# UI/UX

- [테마 적용](/start/uiux/ui-ux/theme.md): 플러터(Flutter) 앱에서 테마를 적용하는 것은 앱의 디자인과 사용자 경험을 개선하는 핵심적인 부분입니다. 테마를 사용하면 앱의 색상, 폰트, 그림자, 및 기타 스타일 요소를 일관되게 제어할 수 있어서, 사용자들에게 일관성 있는 시각적 경험을 제공할 수 있습니다. 간단한 테마 적용 예제를 통해 플러터 앱에서 테마를 어떻게 활용하는지 확인해보세요.
- [화면방향전환](/start/uiux/ui-ux/orientation.md): Flutter를 사용하여 모바일 앱을 개발할 때 화면 방향 전환은 매우 중요한 고려 사항 중 하나입니다. 사용자가 기기를 가로 또는 세로로 회전할 때, 앱의 화면도 함께 회전하거나 고정시켜야 합니다. SystemChrome를 사용하여 화면 방향을 제어하며, 다양한 화면 방향 옵션을 활용할 수 있습니다.
- [토스트 (Toast)](/start/uiux/ui-ux/toast.md): Flutter 앱에서 사용자에게 간단한 메시지나 알림을 효과적으로 전달하기 위해서 Toast 위젯을 사용합니다. Toast 위젯을 사용하면 사용자에게 시각적인 피드백을 제공하고 앱의 사용성을 향상시킬 수 있습니다. 다양한 종류의 Toast 메시지를 활용하여 사용자와의 상호작용을 개선할 수 있습니다.
- [버튼 (Button)](/start/uiux/ui-ux/button.md): 플러터에서 자체적으로 제공하는 Button 위젯 뿐만 아니라, 인터넷에 공개된 UI/UX 컴포넌트들을 조합하여 만들어진 다양한 디자인의 버튼을 손쉽게 개발할 수 있습니다.
- [텍스트 (Text)](/start/uiux/ui-ux/text.md): 플러터에서 다양한 텍스트 형태를 사용할 수 있습니다. Text 위젯은 텍스트를 효율적으로 표시하고 스타일을 적용하는데 사용되며, 고객 요구사항에 맞게 커스터마이즈할 수 있습니다.
- [탭바 (TabBar)](/start/uiux/ui-ux/tabbar.md): 탭바(TabBar)는 Flutter 앱에서 화면을 효과적으로 구성하고 다양한 컨텐츠 간 전환이 필요할 때 사용 되는 중요한 UI 요소입니다. 탭바 위젯을 사용하여 다른 화면 또는 컨텐츠로 빠르게 전환하는 기능을 구현할 수 있습니다.
- [이미지뷰 (ImageView)](/start/uiux/ui-ux/imageview.md): 이미지는 모바일 앱에서 중요한 부분을 차지하며, 사용자 경험을 향상시키고 앱을 더욱 흥미롭게 만드는 데 큰 역할을 합니다. Flutter 앱에서 사용 가능한 이미지 슬라이더 및 이미지 처리를 확인해보세요.
- [카메라/이미지](/start/uiux/ui-ux/camera.md): 카메라와 이미지 관련 기능을 가진 앱은 사용자가 쉽게 사진과 동영상을 찍거나 갤러리에서 이미지를 선택하고, 다양한 작업을 수행할 수 있도록 돕습니다. 아래에서 이러한 앱의 주요 기능과 사용 방법을 확인해보세요.
- [페이지 트랜지션](/start/uiux/ui-ux/page-transition.md): 플러터(Flutter) 앱을 개발할 때 화면 전환은 중요한 부분 중 하나입니다. 사용자 경험을 향상시키고 앱의 내비게이션을 더 매끄럽게 만드는 데 도움이 됩니다. 아래에서 플러터에서 사용 가능한 페이지 트랜지션을 확인해보세요.
- [입력필드 (TextField)](/start/uiux/ui-ux/textfield.md): Flutter는 사용자로부터 다양한 형태의 데이터를 입력받아야 하는 경우 TextField 위젯을 사용하여 입력 필드를 구현할 수 있습니다. TextField 위젯은 텍스트 입력, 숫자 입력, 핸드폰 번호, 신용카드 번호 등 다양한 유형의 입력을 처리할 수 있어 앱 개발에서 핵심 역할을 합니다.
- [체크박스 (CheckBox)](/start/uiux/ui-ux/checkbox.md): 체크박스 위젯은 사용자에게 선택 옵션을 제공하고 선택 사항을 수집하는 데 사용되는 중요한 위젯입니다. 아래에서 다양한 체크박스 위젯 예제와 설명을 포함한 코드 예시를 확인해보세요.
- [라디오버튼 (RadioButton)](/start/uiux/ui-ux/radiobutton.md): 라디오버튼(RadioButton) 위젯은 사용자가 여러 옵션 중 하나를 선택하는 데 사용됩니다. 아래에서 다양한 형식의 라디오버튼과 라디오버튼 그룹을 설명하는 코드 예제를 확인해보세요.
- [로딩바 (Loading Indicator)](/start/uiux/ui-ux/loading-indicator.md): 로딩 인디케이터는 앱이 데이터를 가져오거나 작업을 수행하는 동안 사용자에게 진행 상황을 시각적으로 표시하는 중요한 요소입니다. 로딩 인디케이터는 앱의 사용자 경험을 향상시키고 로딩 화면을 관리하는데 도움이 됩니다.
- [바텀시트 (BottomSheet)](/start/uiux/ui-ux/bottomsheet.md): 바텀시트 (Bottom Sheet)은 모바일 앱 및 모바일 프레임워크에서 자주 사용되는 UI 요소 중 하나입니다. 이것은 화면 하단에서 위로 슬라이딩하여 추가 정보를 제공하거나 사용자와 상호 작용할 수 있는 패널 형태의 위젯입니다. 바텀시트를 사용하여 앱 내에서 다양한 작업 및 정보 표시를 구현할 수 있습니다.
- [리스트뷰 (ListView)](/start/uiux/ui-ux/listview.md): Flutter에서 데이터 목록을 표시하고 스크롤하는 데 사용되는 중요한 위젯 중 하나입니다. 이 위젯은 동적으로 데이터를 생성하여 스크롤 가능한 목록을 만들 수 있도록 도와줍니다.
- [슬리버 (Sliver)](/start/uiux/ui-ux/sliver.md): 슬리버(Sliver) 위젯은 Flutter에서 스크롤 가능한 컨텐츠를 구성하는 데 사용되며, 다양한 레이아웃을 생성할 수 있는 강력한 도구 중 하나입니다.
- [사운드 (Sound)](/start/uiux/ui-ux/sound.md): 사운드는 앱에 음악, 효과음 또는 녹음된 오디오를 추가하는 데 사용될 수 있으며 사용자 경험을 향상시키는 데 중요한 역할을 합니다.
- [애니메이션 (Animation)](/start/uiux/ui-ux/animation.md): 애니메이션은 Flutter 애플리케이션을 더 생동감 있게 만들어주는 중요한 기술입니다. Flutter는 다양한 애니메이션을 구현할 수 있는 다양한 방법을 제공합니다.
- [위치 및 정렬](/start/uiux/ui-ux/axis-alignment.md): Flutter에서 위젯을 배치하고 정렬하는 데 중요한 역할을 하는 위치 및 정렬 위젯에 대한 가이드를 제공합니다. 이 예제에서는 Row 및 Column 위젯을 사용하여 다양한 위치 및 정렬 옵션을 시연합니다.
- [커스텀 키보드](/start/uiux/ui-ux/custom-keyboard.md): 숫자 입력, 또는 다양한 유형의 입력을 받을 수 있는 커스텀 키보드가 있습니다. 다양한 유형의 키보드는 사용자가 정보를 쉽게 입력하고 앱을 더 효과적으로 활용할 수 있도록 돕습니다.
- [카드 (Card)](/start/uiux/ui-ux/card.md): Flutter는 다양한 디자인 요소를 구현하기 위한 강력한 도구를 제공합니다. 그 중에서도 다양한 형태와 스타일의 카드 위젯을 만들어 UI를 풍부하게 꾸밀 수 있습니다. 이번 글에서는 몇 가지 유용한 카드 위젯을 소개하겠습니다.
- [토글 버튼 (Toggle Button)](/start/uiux/ui-ux/toggle-button.md): Flutter는 사용자와의 상호작용을 강화하고 앱의 기능을 확장하기 위한 다양한 위젯을 제공합니다. 이 중에서 Toggle Button 위젯은 특히 상태 전환 및 설정 변경에 유용합니다. 이 글에서는 Flutter의 다양한 Toggle Button 위젯을 살펴보고 활용하는 방법을 소개하겠습니다.
- [다이얼로그 (Dialog)](/start/uiux/ui-ux/dialog.md): 앱에서 사용자와 상호 작용하고 정보를 표시하기 위해 사용하는 다이얼로그 위젯은 매우 유용합니다. 다이얼로그 위젯을 사용하여 간단한 정보 제공부터 중요한 결정을 요구하는 상황까지 다양한 시나리오를 다룰 수 있습니다.
- [QR코드](/start/uiux/ui-ux/qr.md): QR 코드(Quick Response Code)는 정보를 빠르게 읽을 수 있는 이차원 매트릭스 바코드입니다.
- [페이지뷰 (PageView)](/start/uiux/ui-ux/pageview.md): 한 화면에서 여러 페이지를 넘겨볼 수 있도록 구현되는 위젯 입니다. 페이지뷰를 사용하면 사용자는 여러 페이지를 스와이프(swipe) 동작으로 편리하게 이동할 수 있습니다.