Jetpack Compose UI 컴포넌트 목록 📋

Jetpack Compose는 최신 Android UI 툴킷으로, 다양한 UI 컴포넌트를 제공합니다. 이번 글에서는 Jetpack Compose의 주요 UI 컴포넌트를 그룹별로 정리하여, 개발자가 쉽게 활용할 수 있도록 도움을 줍니다.

1. 선택 컴포넌트📍

선택형 UI 컴포넌트는 사용자가 여러 옵션 중에서 선택할 수 있도록 돕는 요소입니다.

DropdownMenu: 드롭다운 메뉴를 나타내는 컴포넌트.
ExposedDropdownMenuBox: DropdownMenu를 노출하는 Box 컴포넌트.
DropdownMenuItem: 드롭다운 메뉴의 항목을 정의.
ComboBox: 사용자가 텍스트를 입력하고 선택할 수 있는 콤보 박스.
Checkbox: 체크박스 컴포넌트.
RadioButton: 라디오 버튼, 한 번에 하나만 선택 가능.
Switch: 스위치 컴포넌트, 트루/폴스 상태 전환.
Slider: 슬라이더, 값 범위 선택.
RangeSlider: 범위 선택이 가능한 슬라이더.
SegmentedButtonRow: 세그먼트화된 버튼 그룹.
Chip: 항목을 태그 형태로 나타내는 컴포넌트.
TriStateCheckbox: 세 가지 상태를 가지는 체크박스.
SegmentedToggleButton: 선택된 상태를 나타내는 토글 버튼.
RadioGroup: 라디오 버튼 그룹을 만들 때 사용.
ChipSelector: 여러 칩을 선택할 수 있는 그룹.
ToggleButton: 두 가지 상태(켜짐/꺼짐) 사이 전환하는 버튼.

2. 입력 필드📍

사용자 입력을 받을 수 있는 다양한 텍스트 필드 컴포넌트입니다.

TextField: 텍스트 입력을 받을 수 있는 기본 필드.
OutlinedTextField: 외곽선이 있는 텍스트 필드.
PasswordTextField: 비밀번호를 입력할 수 있는 텍스트 필드.
SearchBar: 검색어를 입력받는 필드.
DatePicker: 날짜를 선택할 수 있는 필드.
TimePicker: 시간을 선택할 수 있는 필드.
AutoCompleteTextView: 자동완성 텍스트 필드.
NumberInput: 숫자 입력을 받는 필드.
PhoneNumberInput: 전화번호 입력 필드.
CountryCodePicker: 국가 코드 선택 필드.
TextInputLayout: 텍스트 입력에 라벨을 추가하는 레이아웃.
PasswordStrengthMeter: 비밀번호 강도를 시각적으로 표시하는 컴포넌트.
EmailField: 이메일 주소를 입력하는 필드.
CurrencyInput: 통화 입력을 받는 필드.
MultiLineTextField: 여러 줄의 텍스트를 입력받는 필드.

3. 선택 가능한 UI📍

여러 항목 중에서 하나 이상의 선택을 할 수 있는 UI 요소입니다.

Checkbox: 체크박스, 상태를 체크하거나 해제.
RadioButton: 라디오 버튼, 한 번에 하나만 선택 가능.
Switch: 스위치, 두 상태를 전환.
Slider: 슬라이더, 값 범위 선택.
RangeSlider: 범위 선택이 가능한 슬라이더.
SegmentedButtonRow: 여러 버튼 중 하나를 선택하는 레이아웃.
TriStateCheckbox: 세 가지 상태를 가진 체크박스.
ToggleButton: 켜짐/꺼짐 상태를 전환하는 버튼.
SelectableText: 사용자가 선택 가능한 텍스트.
StatefulCheckbox: 체크 상태를 동적으로 변경할 수 있는 체크박스.
RadioChip: 라디오 버튼 형식의 칩.
MultiSelectChipGroup: 여러 개의 칩을 선택할 수 있는 그룹.

4. 리스트 및 아이템📍

데이터를 목록 형식으로 표시하는 컴포넌트입니다.

LazyColumn: 수직 리스트.
LazyRow: 수평 리스트.
LazyGrid: 그리드 형식의 목록.
ListItem: 리스트 항목을 나타내는 컴포넌트.
Pager: 여러 페이지를 표시하는 컴포넌트.
ExpandableListView: 항목을 확장 가능한 리스트.
SwipeableListItem: 슬라이드로 항목을 지울 수 있는 리스트 아이템.
SwipeToDismissList: 스와이프 제스처로 항목을 삭제할 수 있는 리스트.
GridView: 그리드 형태의 데이터 표시.
LazyVerticalGrid: 세로 방향 그리드.
LazyHorizontalGrid: 가로 방향 그리드.

5. 버튼 및 액션📍

사용자가 클릭할 수 있는 다양한 버튼 컴포넌트입니다.

Button: 일반적인 버튼.
OutlinedButton: 테두리가 있는 버튼.
TextButton: 텍스트만 있는 버튼.
IconButton: 아이콘만 있는 버튼.
FloatingActionButton (FAB): 화면에 떠 있는 액션 버튼.
ExtendedFloatingActionButton: 확장 가능한 플로팅 액션 버튼.
IconToggleButton: 아이콘만 있는 토글 버튼.
CheckableButton: 체크 상태가 가능한 버튼.
ActionButton: 액션을 수행하는 버튼.
FABButton: 플로팅 액션 버튼의 또 다른 스타일.
IconActionButton: 아이콘과 함께 액션을 수행하는 버튼.

6. 메뉴 및 다이얼로그📍

사용자와 상호작용하는 팝업 메뉴 및 다이얼로그 컴포넌트입니다.

DropdownMenu: 드롭다운 형태의 메뉴.
Dialog: 기본 다이얼로그.
AlertDialog: 경고 다이얼로그.
ModalBottomSheet: 모달 형태의 바텀 시트.
BottomSheetScaffold: 바텀 시트를 포함한 화면 구조.
Snackbar: 메시지를 화면 하단에 띄우는 컴포넌트.
DatePickerDialog: 날짜를 선택하는 다이얼로그.
TimePickerDialog: 시간을 선택하는 다이얼로그.
CustomDialog: 커스텀 다이얼로그.
ProgressDialog: 진행 상태를 표시하는 다이얼로그.
ConfirmationDialog: 확인 다이얼로그.

7. 네비게이션📍

앱 내에서 화면 전환을 관리하는 컴포넌트입니다.

NavigationHost: 내비게이션 호스트, 화면 전환을 관리.
BottomNavigation: 하단 네비게이션 바.
NavigationDrawer: 네비게이션 드로어, 측면 메뉴.
NavController: 네비게이션을 제어하는 컨트롤러.
NavBackStackEntry: 내비게이션 백 스택 항목.
NavigationRail: 레일 형식의 네비게이션.
TabBar: 탭 형식의 네비게이션.
TabRow: 탭 항목을 가로로 배치.

8. 레이아웃📍

UI 요소를 배치하는 다양한 레이아웃 컴포넌트입니다.

Box: 자식 컴포넌트를 겹쳐서 배치하는 박스.
Row: 수평으로 배치되는 레이아웃.
Column: 수직으로 배치되는 레이아웃.
Scaffold: 기본 화면 구조를 제공하는 레이아웃.
ConstraintLayout: 제약 조건을 기반으로 UI 요소 배치.
Spacer: 두 UI 요소 간에 공간을 추가.
Grid: 그리드 레이아웃.
Surface: 배경이나 모서리 등을 설정할 수 있는 표면.
Align: 자식 컴포넌트를 정렬할 때 사용.
Stack: 요소를 겹쳐서 배치하는 레이아웃.

9. 이미지 및 아이콘📍

이미지 및 아이콘을 표시하는 컴포넌트입니다.

Image: 이미지를 표시하는 컴포넌트.
Icon: 아이콘을 표시하는 컴포넌트.
AsyncImage: 비동기적으로 이미지를 로딩하고 표시하는 컴포넌트.
CoilImage: 이미지 로딩 라이브러리인 Coil을 사용하는 컴포넌트.
GlideImage: 이미지 로딩 라이브러리인 Glide를 사용하는 컴포넌트.

10. 로딩 및 진행 상태📍

로딩 및 진행 상황을 표시하는 컴포넌트입니다.

CircularProgressIndicator: 원형 진행 상태 표시기.
LinearProgressIndicator: 선형 진행 상태 표시기.
Shimmer: 로딩 중임을 나타내는 반짝이는 효과.
ProgressBar: 진행 중인 작업을 표시하는 바.
IndeterminateProgressIndicator: 진행 상태를 알 수 없는 경우 표시하는 컴포넌트.

11. 애니메이션 및 전환📍

UI 요소에 애니메이션과 전환 효과를 추가하는 컴포넌트입니다.

AnimatedVisibility: UI 요소의 가시성 변화를 애니메이션으로 처리.
AnimatedContent: 콘텐츠의 변화를 애니메이션으로 처리.
AnimatedValue: 값의 변화를 애니메이션으로 처리.
Crossfade: 두 콘텐츠 간에 부드러운 전환 애니메이션을 제공.
updateTransition: 다양한 상태 변화에 애니메이션을 적용.
AnimatedImage: 이미지의 애니메이션 전환.
Animatable: 값을 애니메이션으로 변환.
TweenSpec: 트윈 애니메이션을 위한 설정.
SpringSpec: 스프링 애니메이션 설정.
Easing: 애니메이션에서의 이징 효과.

12. 텍스트 및 타이포그래피📍

UI에서 텍스트를 다루는 컴포넌트들입니다.

Text: 텍스트를 표시하는 기본 컴포넌트.
AnnotatedString: 텍스트에 스타일을 적용하거나 일부 부분을 강조할 때 사용.
TextField: 텍스트 입력 필드.
Typography: 기본 타이포그래피 스타일을 정의.
TextStyle: 텍스트 스타일을 정의하는 클래스.
TextOverflow: 텍스트가 넘칠 때 표시 방식을 설정.
InlineTextContent: 텍스트 내부에 다른 컴포넌트를 삽입할 때 사용.
TextInput: 텍스트 입력 관련 다양한 설정을 지원.

13. 뷰페이저 및 탭📍

뷰페이저 및 탭을 활용한 컴포넌트입니다.

Pager: 페이지 단위로 콘텐츠를 표시하는 컴포넌트.
TabRow: 탭 항목을 가로로 배치하는 컴포넌트.
Tab: 각각의 탭 항목을 정의하는 컴포넌트.
TabItem: 탭 내에서 사용하는 아이템.
HorizontalPager: 수평 방향으로 페이지 전환.
VerticalPager: 수직 방향으로 페이지 전환.

14. 그래픽 및 캔버스📍

그래픽을 그리거나 캔버스를 사용하여 UI를 구현하는 컴포넌트들입니다.

Canvas: 직접 그리기 기능을 제공하는 캔버스.
DrawScope: 그래픽 그리기를 위한 범위.
Path: 경로를 정의하고 그리는 데 사용.
DrawText: 텍스트를 캔버스에 그리는 데 사용.
DrawCircle: 원을 그리는 함수.
DrawRect: 사각형을 그리는 함수.
DrawLine: 선을 그리는 함수.
GraphicsLayer: 레이아웃의 그래픽 레이어를 조작.
Shape: 다양한 도형을 정의.

15. 오디오 및 비디오📍

오디오와 비디오 관련 컴포넌트들입니다.

MediaPlayer: 오디오 및 비디오 재생을 관리하는 클래스.
VideoPlayer: 비디오 재생을 위한 컴포넌트.
AudioPlayer: 오디오 재생을 위한 컴포넌트.
SoundEffect: 오디오 효과를 적용하는 기능.
VolumeControl: 오디오 볼륨을 제어하는 기능.

16. 폼 및 데이터 입력📍

폼을 처리하거나 데이터를 입력받는 컴포넌트들입니다.

Form: 폼을 구성하는 컨테이너.
FormField: 폼 내 개별 입력 필드를 나타내는 컴포넌트.
CheckboxField: 체크박스 필드.
TextField: 텍스트 입력 필드.
RadioButtonField: 라디오 버튼 필드.
DateField: 날짜 입력 필드.
PhoneField: 전화번호 입력 필드.
PasswordField: 비밀번호 입력 필드.
EmailField: 이메일 입력 필드.

17. 리스트 및 아이템 📍

리스트와 관련된 다른 컴포넌트들입니다.

LazyColumnFor: LazyColumn을 사용한 반복 가능한 아이템 표시.
LazyRowFor: LazyRow를 사용한 반복 가능한 항목 표시.
LazyVerticalGridFor: 세로 방향 그리드에서 반복 가능한 항목 표시.
LazyHorizontalGridFor: 가로 방향 그리드에서 반복 가능한 항목 표시.

18. 동적 UI 업데이트📍

동적으로 UI를 업데이트하거나 상태 변경을 처리하는 컴포넌트들입니다.

State: 상태를 저장하고 변경할 수 있는 객체.
MutableState: 변경 가능한 상태.
remember: 상태를 기억하여 컴포저블이 재구성될 때 값을 유지.
derivedStateOf: 기존 상태에서 파생된 상태를 생성.
LaunchedEffect: Side Effect를 처리하는 컴포저블.
SideEffect: 상태 변화 시 부수 효과를 발생시키는 컴포저블.
DisposableEffect: 컴포저블이 사라질 때 부수 효과를 정리.

19. 헤더 및 푸터📍

리스트나 테이블의 헤더와 푸터를 구성하는 컴포넌트들입니다.

Header: 리스트 항목의 헤더를 표시.
Footer: 리스트 항목의 푸터를 표시.
StickyHeader: 스크롤 시 고정되는 헤더를 표시.
ListHeader: 리스트 항목의 상단을 구성하는 헤더.
ListFooter: 리스트 항목의 하단을 구성하는 푸터.

➡️ Jetpack Compose 기본 자주 사용하는 UI 컴포넌트

선택 컴포넌트	DropdownMenu, ExposedDropdownMenuBox, DropdownMenuItem, ComboBox, Checkbox, RadioButton, Switch, Slider, RangeSlider, SegmentedButtonRow, Chip, TriStateCheckbox, SegmentedToggleButton, RadioGroup, ChipSelector, ToggleButton
입력 필드	TextField, OutlinedTextField, PasswordTextField, SearchBar, DatePicker, TimePicker, AutoCompleteTextView, TextInputLayout, EmailField, PasswordStrengthMeter, MultiLineTextField, NumericTextField, PhoneNumberInput, CurrencyInput
선택 가능한 UI	Checkbox, RadioButton, Switch, Slider, RangeSlider, SegmentedButtonRow, TriStateCheckbox, ToggleButton, RadioGroup, SelectableText, StatefulCheckbox, CustomToggleButton, ChoiceChip
리스트 및 아이템	LazyColumn, LazyRow, LazyGrid, ListItem, Chip, FilterChip, ChoiceChip, Pager, LazyVerticalGrid, GridItem, LazyList, ExpandableListView, SwipeableListItem, SwipeToDismissList, GridView
버튼 및 액션	Button, OutlinedButton, TextButton, IconButton, FloatingActionButton (FAB), ExtendedFloatingActionButton, IconToggleButton, ActionButton, CheckableButton, IconActionButton, FABButton
메뉴 및 다이얼로그	DropdownMenu, Dialog, AlertDialog, ModalBottomSheet, BottomSheetScaffold, Snackbar, CustomToast, DatePickerDialog, TimePickerDialog, ProgressDialog, InfoDialog, FullScreenDialog, ConfirmationDialog
네비게이션	NavigationHost, NavigationGraph, BottomNavigation, TabRow, NavigationDrawer, NavController, NavBackStackEntry, TabBar, BottomTabBar, SideNavigation, NavigationRail
레이아웃	Box, Row, Column, Scaffold, FlowRow, FlowColumn, Spacer, Align, Grid, ConstraintLayout, Stack, Surface, ColumnScope, RowScope, NestedScroll, VerticalScroll, HorizontalScroll
이미지 및 아이콘	Image, Icon, AsyncImage, IconButton, VectorIcon, ImageVector, GlideImage, CoilImage, AvatarImage, ProfileImage, ImagePainter
로딩 및 진행 상태	CircularProgressIndicator, LinearProgressIndicator, ProgressIndicator, Shimmer, ProgressBar, IndeterminateProgressIndicator, LoadingIndicator, SwipeRefresh, PullToRefresh, ProgressDialog, Spinner

Jetpack Compose는 Android UI 개발을 훨씬 더 직관적이고 효율적으로 만들어주는 도구입니다!

저작자표시 비영리 변경금지

슬기로운 컴포즈 생활 🎼