Jetpack Compose 학습 바이블

처음부터 끝까지, 순서대로 배우는 Jetpack Compose

---

스터디 통합 런처 (App)

App 모듈 빌드 시 study 내용을 학습, 테스트, 관리할 수 있는 앱이 실행 됩니다.

학습 내용은 DataStore를 통해 저장되므로, 앱 제거 시 학습 내용도 초기화 됩니다.

예외 모듈

다음 모듈은 Application 모듈로 유지됩니다 (통합 런처에서 제외):

모듈	이유
hilt_viewmodel	@HiltAndroidApp 필요

---

학습 로드맵

Level 0: 사전 준비

모듈	설명	선행 학습
kotlin	람다, 확장 함수, 후행 람다, 널 안전성	-

Level 1: Compose 입문

모듈	설명	선행 학습
compose_introduction	Compose 소개, 선언적 UI vs 명령형 UI	kotlin
composable_function	@Composable 함수의 동작 원리	compose_introduction
preview	@Preview로 UI 미리보기	composable_function

Level 2: 레이아웃 기초

모듈	설명	선행 학습
layout_and_modifier	Column, Row, Box, Modifier 체이닝	composable_function
basic_ui_components	Text, Button, TextField, Image 기초	layout_and_modifier
text_typography	텍스트 스타일링, AnnotatedString	basic_ui_components
rich_text	AnnotatedString 복합 스타일, 클릭 가능 텍스트	text_typography
auto_sizing_text	컨테이너에 맞는 텍스트 크기 자동 조절	basic_ui_components
flow_layout	FlowRow, FlowColumn 동적 래핑	layout_and_modifier

Level 3: 상태 기초

모듈	설명	선행 학습
remember	remember, mutableStateOf로 상태 저장	basic_ui_components
recomposition	Recomposition 동작 이해	remember
remember_saveable	화면 회전에도 상태 유지	recomposition

Level 4: UI 컴포넌트

4-A: 버튼 & 액션

모듈	설명	선행 학습
button	Button, IconButton, FloatingActionButton	remember
menu	DropdownMenu, 컨텍스트 메뉴	remember

4-B: 선택

모듈	설명	선행 학습
checkbox	다중 선택 체크박스	remember
radio_button	단일 선택 라디오 버튼	remember
switch_component	온/오프 스위치	remember
chip	필터/선택 칩	remember
segmented_button	세그먼트 버튼 그룹	remember

4-C: 입력

모듈	설명	선행 학습
textfield_state	TextField 상태 관리, 유효성 검증	remember
secure_textfield	비밀번호 입력 필드 (SecureTextField)	textfield_state
autofill	시스템 자동완성 통합 (로그인, 회원가입)	textfield_state
slider	범위 값 선택 슬라이더	remember
date_picker	날짜 선택기	remember
time_picker	시간 선택기	remember

4-D: 표시 & 피드백

모듈	설명	선행 학습
card	Card로 콘텐츠 그룹화	button
divider	구분선	basic_ui_components
badge	알림 배지	basic_ui_components
tooltip	도움말 툴팁	basic_ui_components
progress_indicator	로딩 인디케이터	basic_ui_components
dialog	AlertDialog, 커스텀 Dialog	remember

Level 5: 리스트 & 검색

5-A: 리스트

모듈	설명	선행 학습
lazy_list	LazyColumn, LazyRow 기초	remember
lazy_grid	LazyVerticalGrid, LazyHorizontalGrid, StaggeredGrid	lazy_list
lazy_layouts	key, contentType, 성능 최적화	lazy_list
pull_to_refresh	당겨서 새로고침	lazy_list
paging_compose	Paging 3 무한 스크롤	lazy_layouts

5-B: 스와이프 & 갤러리

모듈	설명	선행 학습
pager	HorizontalPager, VerticalPager	lazy_list
carousel	가로 스와이프 갤러리	pager

5-C: 검색

모듈	설명	선행 학습
search_bar	SearchBar 기초	textfield_state
search_bar_advanced	검색 자동완성, 디바운스	search_bar

Level 6: 앱 구조

모듈	설명	선행 학습
material_symbols	Material Symbols 아이콘 시스템	composable_function
scaffold	Scaffold 기본 구조	layout_and_modifier
window_insets	시스템 바, Edge-to-Edge	scaffold
app_bar	TopAppBar, BottomAppBar	window_insets
navigation_bar	하단 네비게이션 바	scaffold
tabs	TabRow, 탭 전환	scaffold
scaffold_and_theming	MaterialTheme, 다크모드	scaffold
snackbar	Snackbar 메시지	scaffold
bottom_sheet	ModalBottomSheet 기초	scaffold
bottom_sheet_advanced	SheetState, 중첩 시트	bottom_sheet
adaptive_layout	태블릿/폴더블 반응형 레이아웃	window_insets
material_expressive	Material 3 Expressive, 스프링 물리 모션	scaffold_and_theming

Level 7: Side Effects

모듈	설명	선행 학습
side_effect	Side Effect 개념 이해	recomposition
launched_effect	비동기 작업 실행 (API 호출 등)	side_effect
disposable_effect	리소스 정리 (리스너 해제 등)	launched_effect
remember_coroutine_scope	이벤트 핸들러에서 코루틴 실행	launched_effect
produce_state	비동기 데이터를 State로 변환	launched_effect
effect_handlers_advanced	snapshotFlow, rememberUpdatedState	disposable_effect

Level 8: 상태 심화

모듈	설명	선행 학습
state_hoisting	상태 끌어올리기, Stateless 컴포넌트	remember_saveable
derived_state_of	파생 상태로 불필요한 Recomposition 방지	state_hoisting
snapshot_system	snapshotFlow로 State를 Flow로 변환	derived_state_of
stability	@Stable, @Immutable로 성능 최적화	derived_state_of
state_management_advanced	StateFlow vs SharedFlow vs Channel	stability
state_restoration_advanced	프로세스 종료 후 상태 복원	state_management_advanced
retain	직렬화 없이 Config Change 상태 유지	remember_saveable

Level 9: 네비게이션

모듈	설명	선행 학습
navigation_basics	Type-Safe Navigation 기초	state_hoisting
navigation_3	Navigation 3 (2025 최신)	navigation_basics
deep_link	딥링크로 특정 화면 열기	navigation_basics
back_handler	뒤로가기 커스텀 처리	navigation_basics
predictive_back	예측 뒤로가기 제스처 (Android 14+)	back_handler
navigation_drawer	사이드 드로어 메뉴	navigation_basics
navigation_rail	태블릿용 레일 네비게이션	navigation_basics

Level 10: 애니메이션

모듈	설명	선행 학습
animation_basics	animate*AsState, AnimatedVisibility	remember
animation_advanced	updateTransition, Animatable	animation_basics
animation_physics	spring/decay 물리 기반 애니메이션	animation_advanced
animate_bounds	LookaheadScope, 레이아웃 애니메이션	animation_advanced
shared_element_transition	화면 전환 시 공유 요소 애니메이션	animation_advanced, navigation_basics

Level 11: 커스텀 레이아웃

모듈	설명	선행 학습
intrinsic_measurements	IntrinsicSize로 자식 크기 동기화	layout_and_modifier
constraint_layout	제약 조건 기반 복잡한 레이아웃	layout_and_modifier
custom_layout	Layout() 커스텀 레이아웃 작성	constraint_layout
custom_modifier	Modifier.Node로 커스텀 Modifier 생성	custom_layout
canvas_drawing	Canvas로 커스텀 그래픽	layout_and_modifier

Level 12: 아키텍처

모듈	설명	선행 학습
view_model	ViewModel + Compose 통합	state_hoisting
hilt_viewmodel	@HiltViewModel, 의존성 주입	view_model
screen_and_component	Screen vs Component 분리 패턴	state_hoisting
slot_api_pattern	Slot API로 유연한 컴포넌트 설계	screen_and_component
composition_local	암시적 데이터 전달	slot_api_pattern
unidirectional_data_flow	단방향 데이터 흐름 (UDF), MVI 패턴	view_model

Level 13: 제스처 & 인터랙션

모듈	설명	선행 학습
gesture	탭, 드래그, 스와이프 제스처	remember
gesture_advanced	pointerInput 고급 제스처, 멀티터치	gesture
focus_management	포커스 순서, 키보드 처리	gesture
drag_and_drop	드래그 앤 드롭 기능	gesture
haptic_feedback	진동/햅틱 피드백	gesture

Level 14: 외부 통합

모듈	설명	선행 학습
lifecycle_integration	LifecycleOwner 연동	disposable_effect
image_loading	Coil로 이미지 로딩	basic_ui_components
media3_player	ExoPlayer + Compose	lifecycle_integration
interoperability	View ↔ Compose 상호운용	lifecycle_integration
camerax_compose	CameraX + Compose	interoperability

Level 15: 시스템 통합

모듈	설명	선행 학습
permission_handling	런타임 권한 요청	launched_effect
notification_integration	알림 생성 및 처리	permission_handling
audio_recording	오디오 녹음	permission_handling

Level 16: 테스트 & 성능

모듈	설명	선행 학습
semantics_accessibility	접근성, 스크린 리더 지원	basic_ui_components
compose_testing	UI 테스트, Semantics	semantics_accessibility
compose_preview_testing	@PreviewParameter로 다중 Preview 테스트	compose_testing
screenshot_testing	스크린샷 테스트, Paparazzi	compose_testing
compose_compiler_metrics	컴파일러 리포트 분석	stability
baseline_profiles	앱 시작 성능 최적화	compose_compiler_metrics
pausable_composition	Jank 방지, Composition 일시중단	baseline_profiles
visibility_tracking	화면 노출 추적 (광고, 분석)	lazy_layouts
strong_skipping_mode	Strong Skipping Mode 성능 최적화	stability

Level 17: 멀티플랫폼

모듈	설명	선행 학습
compose_multiplatform_intro	Compose Multiplatform 입문, expect/actual 패턴	composable_function
desktop_extensions	Desktop 전용 API (MenuBar, Tray, KeyShortcut)	compose_multiplatform_intro
web_wasm	Kotlin/Wasm으로 웹에서 Compose 실행	compose_multiplatform_intro

---

카테고리별 인덱스

특정 컴포넌트를 찾고 있다면 여기서 검색하세요

Actions (액션)

모듈	언제 사용?
button	클릭 가능한 버튼이 필요할 때
menu	드롭다운 메뉴가 필요할 때
segmented_button	여러 옵션 중 하나를 선택할 때

Communication (알림/피드백)

모듈	언제 사용?
badge	아이콘에 알림 숫자를 표시할 때
progress_indicator	로딩 상태를 보여줄 때
snackbar	짧은 메시지를 하단에 표시할 때
tooltip	요소에 대한 추가 설명이 필요할 때

Containment (컨테이너)

모듈	언제 사용?
app_bar	화면 상단에 제목과 액션을 배치할 때
bottom_sheet	하단에서 올라오는 추가 콘텐츠가 필요할 때
card	관련 정보를 그룹화할 때
carousel	가로 스와이프 갤러리가 필요할 때
dialog	사용자 확인이나 입력이 필요할 때
divider	콘텐츠 영역을 구분할 때
lazy_list	긴 목록을 효율적으로 표시할 때
scaffold	앱 화면의 기본 구조를 잡을 때

Navigation (네비게이션)

모듈	언제 사용?
navigation_basics	화면 간 이동이 필요할 때
navigation_bar	하단 탭 네비게이션이 필요할 때
navigation_drawer	사이드 메뉴가 필요할 때
navigation_rail	태블릿에서 좌측 네비게이션이 필요할 때
back_handler	뒤로가기 커스텀 처리가 필요할 때
predictive_back	Android 14+ 예측 뒤로가기가 필요할 때
search_bar	기본 검색 기능이 필요할 때
search_bar_advanced	검색 기록, 디바운스 등 고급 기능이 필요할 때
tabs	상단 탭으로 콘텐츠를 전환할 때

Selection (선택)

모듈	언제 사용?
checkbox	여러 항목을 다중 선택할 때
chip	필터나 태그를 선택할 때
date_picker	날짜를 선택할 때
radio_button	여러 항목 중 하나만 선택할 때
slider	범위 내 값을 선택할 때
switch_component	온/오프 토글이 필요할 때
time_picker	시간을 선택할 때

Text Input (텍스트 입력)

모듈	언제 사용?
textfield_state	텍스트 입력 필드가 필요할 때
secure_textfield	비밀번호 입력 필드가 필요할 때
autofill	로그인/회원가입 자동완성이 필요할 때

Text & Typography (텍스트 스타일링)

모듈	언제 사용?
text_typography	텍스트 기본 스타일링이 필요할 때
rich_text	부분 스타일, 클릭 가능한 텍스트가 필요할 때
auto_sizing_text	컨테이너에 맞게 텍스트 크기를 자동 조절할 때

Gestures (제스처)

모듈	언제 사용?
gesture	기본 탭, 드래그, 스와이프가 필요할 때
gesture_advanced	멀티터치, 복잡한 제스처가 필요할 때
drag_and_drop	드래그 앤 드롭이 필요할 때
haptic_feedback	터치 진동 피드백이 필요할 때

Icons (아이콘)

모듈	언제 사용?
material_symbols	Material Symbols 아이콘 시스템이 필요할 때

Multiplatform (멀티플랫폼)

모듈	언제 사용?
compose_multiplatform_intro	Android/iOS/Desktop/Web 코드 공유가 필요할 때
desktop_extensions	Desktop 앱에 메뉴바, 트레이, 단축키가 필요할 때
web_wasm	웹 브라우저에서 Compose를 실행할 때

---

키워드로 찾기

"이런 상황인데 뭘 써야 하지?"

상태 & 데이터

키워드	관련 모듈
상태 저장	remember, remember_saveable
화면 회전	remember_saveable, retain, state_restoration_advanced
상태 끌어올리기	state_hoisting
파생 상태	derived_state_of
snapshotFlow	snapshot_system, effect_handlers_advanced
Flow/Channel	state_management_advanced

비동기 & Side Effect

키워드	관련 모듈
API 호출	launched_effect, remember_coroutine_scope
리스너 등록/해제	disposable_effect
코루틴 실행	remember_coroutine_scope
비동기 → State	produce_state
snapshotFlow	effect_handlers_advanced

리스트 & 스크롤

키워드	관련 모듈
긴 목록	lazy_list, lazy_grid, lazy_layouts
무한 스크롤	paging_compose
페이지 스와이프	pager, carousel
당겨서 새로고침	pull_to_refresh
화면 노출 추적	visibility_tracking

네비게이션

키워드	관련 모듈
화면 이동	navigation_basics, navigation_3
딥링크	deep_link
뒤로가기	back_handler, predictive_back
예측 뒤로가기	predictive_back
하단 탭	navigation_bar
사이드 메뉴	navigation_drawer

애니메이션

키워드	관련 모듈
값 애니메이션	animation_basics
복잡한 전환	animation_advanced
물리 애니메이션	animation_physics
spring/decay	animation_physics
레이아웃 변경	animate_bounds
화면 전환 효과	shared_element_transition

성능 & 테스트

키워드	관련 모듈
Recomposition 최적화	stability, derived_state_of
컴파일러 분석	compose_compiler_metrics
앱 시작 속도	baseline_profiles
Jank 방지	pausable_composition
UI 테스트	compose_testing
Preview 테스트	compose_preview_testing
스크린샷 테스트	screenshot_testing

외부 연동

키워드	관련 모듈
이미지 로딩	image_loading
비디오 재생	media3_player
카메라	camerax_compose
권한 요청	permission_handling
알림	notification_integration
기존 View 사용	interoperability

텍스트 스타일링

키워드	관련 모듈
부분 스타일	rich_text
AnnotatedString	rich_text, text_typography
클릭 가능한 텍스트	rich_text
자동 크기 조절	auto_sizing_text

제스처 & 인터랙션

키워드	관련 모듈
멀티터치	gesture_advanced
커스텀 제스처	gesture_advanced
진동 피드백	haptic_feedback
pointerInput	gesture_advanced

레이아웃 심화

키워드	관련 모듈
IntrinsicSize	intrinsic_measurements
자식 크기 동기화	intrinsic_measurements
커스텀 레이아웃	custom_layout

멀티플랫폼

키워드	관련 모듈
Desktop 앱	desktop_extensions
웹 앱	web_wasm
코드 공유	compose_multiplatform_intro
MenuBar/Tray	desktop_extensions
Kotlin/Wasm	web_wasm

---

공식 문서 링크

Google 공식 코스

• Android Basics with Compose - 입문자용
• Jetpack Compose for Android Developers - 기존 개발자용

공식 문서

• Compose Documentation - 전체 문서
• State and Jetpack Compose
• Side-effects in Compose
• Compose Performance

Material Design 3

• M3 Components - 컴포넌트 가이드

---

기여하기

학습 모듈 추가나 개선은 언제나 환영합니다!