Jetpack Compose 13주 완성 교육 과정 설계 (XML 개념 포함)

안드로이드 UI 시스템의 핵심 원리를 이해하고, 모든 실습은 Jetpack Compose를 통해 현대적인 방식으로 구현하는 13주 완성 커리큘럼입니다. 총 두 개의 파트로 구성되어 있으며, Part 1은 단일 모듈 기반의 기초 Compose 실습, Part 2는 멀티모듈과 아키텍처 구조를 활용한 실제 Compose 앱 구현을 다룹니다.

🚀 ComposeLab 프로젝트 개요

• 교재: 'Do it! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린(개정4판)'
• 기존 View 시스템 기반의 안드로이드 예제를 Kotlin 기반의 Jetpack Compose로 개발하는 실습
• 최신 안드로이드 개발 트렌드를 따르는 '나만의 안드로이드 앱'을 만드는 과제 실행을 목표로 합니다.

📚 강의 구성

Part 1: Compose 기초와 UI 컴포넌트 실습

• 단일 독립 모듈 구조 (기본 MainActivity.kt 중심)
• Jetpack Compose의 핵심 컴포넌트와 UI 작성 방식에 대한 기초 실습
• Android Studio에서 즉시 실행 가능한 미니 앱 예제 중심
• 주요 주제:
  • Composable 함수 이해
  • Column, Row, Box 레이아웃
  • Modifier, 상태 관리 (remember, mutableStateOf)
  • Theme, ColorScheme, DarkMode Preview
  • 실습용 UI 요소: Card, Button, Image, TextField 등

---

Part 2: 아키텍처 기반 실전 앱 개발 (OpenKnights)

• 멀티모듈 기반 구조
• Android Architecture Guide에 따라 Layered MVI 구조 구현
• 실전 앱 수준의 구조 설계와 상태 관리, 화면 구성 방법 익히기
• Firebase 연동, Navigation 3, Preview + Dark Mode 대응 포함
• 최종 오픈소스-경진대회 용 실제 OpenKnights 앱 구조 실습

📂 디렉토리 위치: /openknights 📄 참고 파일: openknights/GEMINI.md, openknights/app/src/main/..., core, feature, ui

파트 3: 종합 — Jetpack Compose로 마무리 (22장)

• 상태 관리와 UI 선언형 프로그래밍 학습

---

🛠️ 기술 스택 및 개발 환경

• IDE: Android Studio 2025.1.2
• Language: Kotlin (2.0.21)
• UI Toolkit: Jetpack Compose (Material 3)
• Architecture: Multi-module Architecture, KSP for DI annotations
• SDK: compileSDK 36, minSDK 32

📦 모듈 구조 (Part 2 기준)

/openknights
├── app               # 앱 진입점 (UI + Navigation)
├── core              # 공통 유틸리티, 모델, 디자인 시스템
├── feature           # 기능 단위 화면 (팀 관리, 심사 결과 등)
├── ui                # 전역 UI 컴포넌트 (TopBar, Theme 등)
├── data              # 정적/동적 데이터 제공 (추후 Firebase 연동 가능)
└── GEMINI.md         # 구조 설계와 실습 목표 설명서

Part-I: Jetpack Compose UI 기본

1주차: 개발 환경 설정 및 컴포즈 첫걸음

• 목표: 안드로이드 스튜디오 설치부터 앱 실행까지의 과정을 익히고, 컴포즈가 무엇인지 알아본다.
• 이론 (01, 02, 22장): 안드로이드 스튜디오 설치 및 프로젝트 구조, 앱 구성 파일(AndroidManifest.xml, build.gradle.kts)의 역할, 그리고 컴포즈의 개요에 대해 학습한다.
• Compose 실습(app): "Hello, Compose!" 앱 만들기
  • 간단한 Text 컴포저블을 사용하여 화면에 원하는 문구를 미리보기로 출력하고, 에뮬레이터로 실행 실습합니다.

2주차: 코틀린 기초 및 객체지향 프로그래밍

• 목표: 코틀린 변수, 함수, 조건문, 반복문, 클래스와 객체 개념을 이해하고, 람다 함수와 널 안전성 등 코틀린의 핵심적인 특징을 학습한다.
• 이론 (03, 04, 05장): 클래스, 생성자, 상속, 인터페이스 등 객체지향 프로그래밍의 핵심 개념과 람다 함수, 고차 함수, 널 안전성(?, !!, ?.) 사용법을 익힙니다.
• 코틀린 실습: 간단한 예제 프로그램 코딩 및 실행
  • UI 없이 코딩 실습하며, Compose UI는 다음 주부터 본격적으로 다룹니다.

3주차: Compose 기본 컴포저블

• 목표: XML의 기본 뷰(View)에 대응하는 Compose의 기본 UI 컴포넌트 사용법을 익힙니다.
• 이론 (06장): XML의 TextView, ImageView, Button, EditText 등의 역할을 배우고, 이것이 Compose의 Text, Image, Button, TextField 와 어떻게 1:1로 대응되는지 학습한다.
• Compose 실습(app_01): Compose의 Text, **Image**로 구성된 UI를 만들어 본다.
• Compose 실습(app_02): 간단한 로그인 화면 UI 만들기
  • Image로 로고를 표시하고, TextField로 아이디/비밀번호를 입력받으며, Button으로 로그인 액션을 취하는 화면 만들기 실습.

4주차: Compose 레이아웃 (Container)

• 목표: XML의 다양한 레이아웃(Layout) 에 대응하는 Compose에서 컴포넌트를 배치하는 방법을 익힙니다.
• 이론 (07장): LinearLayout, RelativeLayout, FrameLayout의 동작 원리를 이해하고, 이것이 Compose의 Column, Row, Box 와 어떻게 대응되는지 학습합니다. ConstraintLayout의 개념도 함께 다룹니다.
• Compose 실습(app_03): 프로필 카드 만들기
  • Row를 이용해 프로필 사진과 이름을 나란히 배치하고, Column을 사용해 이름 아래에 자기소개를 배치하는 등 복합적인 레이아웃을 구성합니다.
• Compose 실습(app_04): 전화 앱의 키패드 화면 만들기

5주차: 사용자 이벤트 처리와 Modifier

• 목표: 사용자의 터치 이벤트를 처리하는 방법을 배우고, Modifier를 통해 컴포저블을 꾸미는 방법을 익힙니다.
• 이론 (08, 09장): 뷰의 터치 이벤트 리스너 개념을 배우고, Compose의 clickable Modifier를 통한 이벤트 처리 방법을 학습합니다. 리소스(문자열, 색상) 관리 방법도 함께 다룹니다.
• Compose 실습(app_05): 초간단 카운터 앱 만들기
  • 숫자를 표시하는 Text와, 누를 때마다 숫자가 1씩 증가/감소하는 Button 두 개를 만듭니다. Modifier.padding, Modifier.size 등을 활용해 UI를 꾸밉니다.
• Compose 실습(app_06): 스톱워치 기능 만들기
• Compose 실습(app_07): 메신저 앱의 인트로 화면 만들기

6주차: 다이얼로그와 알림

• 목표: 사용자에게 정보를 제공하거나 확인을 받는 다이얼로그와 시스템 알림을 구현하는 방법을 학습합니다.
• 이론 (10장): XML 기반의 AlertDialog와 Notification 생성 원리를 배우고, Compose의 AlertDialog 사용법과 NotificationManager를 통한 시스템 알림 생성 방법을 학습합니다. 퍼미션 요청 개념도 함께 다룹니다.
• Compose 실습(app_08): 버블 게임
  • 버블 게임이 종료되면, 알림으로 점수를 알려주고, 종료 버튼을 누르면 "정말 종료하시겠습니까?"라는 AlertDialog가 나타나고, '예'/'아니오' 버튼에 따라 특정 동작을 수행하도록 구현한다.
• Compose 실습(app_09): 카카오톡 알림 만들기

7주차: Compose 목록과 페이저

• 목표: 대량의 데이터를 효율적으로 보여주는 목록과 좌우로 스와이프하는 화면을 구성하는 방법을 배웁니다.
• 이론 (11장): RecyclerView와 ViewPager2의 동작 원리(뷰 재사용)를 배우고, 이것이 **Compose의 LazyColumn**과 HorizontalPager 로 어떻게 더 간결하고 강력하게 구현되는지 비교하며 학습합니다.
• Compose 실습(app_10): Wellness Task 목록 화면 만들기
  • LazyColumn을 사용해 스크롤 가능한 Task 목록을 만들고, 각 목록 아이템은 Card와 Row를 조합하여 구성합니다.
• Compose 실습(app_11): Jetpack 라이브러리를 이용한 화면 만들기

Part-II: Jetpack Compose UI 응용

9주차: 머티리얼 디자인과 화면 구조

• 목표: 구글 머티리얼 디자인 가이드라인을 이해하고, 표준 앱 구조를 손쉽게 만드는 방법을 배웁니다.
• 이론 (12장): AppBar, DrawerLayout, FloatingActionButton 등 XML 기반의 머티리얼 컴포넌트들을 배우고, Compose의 Scaffold 를 통해 이 모든 요소를 얼마나 쉽게 조합할 수 있는지 학습합니다.
• Compose 실습(app_11): SNS 앱의 메인 화면 뼈대 만들기
  • Scaffold를 사용해 상단바(TopAppBar), 하단 탭(NavigationBar), 글쓰기 버튼(FloatingActionButton)이 모두 포함된 앱의 기본 구조를 만듭니다.

10주차: 상태 관리와 생명주기

• 목표: 화면 전환 방법을 배우고, Compose의 핵심인 '상태(State)'와 생명주기를 깊이 있게 이해합니다.
• 이론 (13장): Intent를 이용한 액티비티 전환 원리를 배우고, 액티비티 생명주기와 Compose의 remember, mutableStateOf 의 관계를 학습합니다. ViewModel 을 이용한 상태 관리의 중요성도 함께 다룹니다.
• Compose 실습(app_12): 간단한 할 일(To-Do) 목록 앱 만들기
  • ViewModel에 할 일 목록 State를 정의하고, TextField로 새 할 일을 추가하면 목록이 실시간으로 갱신되는 앱을 만듭니다.

11주차: 시스템 컴포넌트 연동 (외부 앱)

• 목표: 백그라운드 컴포넌트들의 개념을 이해하고, 다른 앱(갤러리, 카메라 등)과 상호작용하는 방법을 배웁니다.
• 이론 (14, 15, 16장): BroadcastReceiver, Service, ContentProvider의 역할을 개괄적으로 이해하고, 이 중 가장 활용도가 높은 다른 앱의 데이터를 가져오는 방법에 집중합니다.
• Compose 실습(app_13): 갤러리에서 사진 가져와 화면에 표시하기
  • ActivityResultLauncher 를 사용하여 갤러리를 열고, 선택한 사진의 URI를 받아와 Coil 라이브러리를 통해 화면의 Image 컴포넌트에 표시합니다.

12주차: 데이터 저장 (로컬 데이터베이스)

• 목표: 앱의 데이터를 기기 내부에 영구적으로 저장하는 방법을 학습합니다.
• 이론 (17장): 데이터베이스(SQLite)의 기본 원리와 Room 라이브러리의 역할을 배웁니다. SharedPreferences에 대응하는 DataStore 도 함께 소개합니다.
• Compose 실습(app_14): 할 일 목록 앱에 데이터 저장 기능 추가하기
  • 9주차에 만든 할 일 목록 앱에 Room 데이터베이스를 연동하여, 앱을 껐다 켜도 목록이 그대로 유지되도록 기능을 개선합니다.

13주차: 네트워크 통신 및 위치 정보

• 목표: 인터넷을 통해 외부 서버와 데이터를 주고받고, 사용자의 위치 정보를 활용하는 방법을 배웁니다.
• 이론 (18, 19장): HTTP 통신의 기본과 Retrofit 라이브러리 사용법을 배웁니다. 위치 정보 권한 획득 및 FusedLocationProviderClient 사용법도 함께 학습합니다.
• Compose 실습(app_15): 간단한 날씨 앱 만들기
  • 공개 날씨 API를 호출하여 현재 위치의 날씨 정보를 받아온 후, Text와 Icon을 이용해 화면에 표시합니다.

14주차: 파이어베이스 연동 및 최종 프로젝트

• 목표: 파이어베이스를 활용하여 백엔드 기능을 구현하고, 학습한 내용을 총정리하여 완성도 있는 앱을 만듭니다.
• 이론 (20, 21, 22장): 파이어베이스의 핵심 기능인 인증(Authentication), 실시간 데이터베이스 Firestore, 파일 저장소 Storage 의 개념과 사용법을 학습합니다.
• Compose 실습(app_16): 실시간 익명 채팅 앱 만들기
  • Firebase Auth로 익명 로그인을 구현하고, Firestore를 이용해 사용자들이 보낸 메시지를 모든 접속자에게 실시간으로 보여주는 간단한 채팅 앱을 최종 프로젝트로 완성합니다.

📚 앱 모듈 목록

• app_01_compose_coffee
• app_02_kakao_email
• app_03_profile
• app_04_keypad
• app_05_count
• app_06_stopwatch
• app_10_bubble_game
• app_11_dropdown
• app_11_jetpack
• app_13_todotask
• app_14_triple
• app_17_todo_revised
• app_18_fake_store
• app_22_box
• app_22_newsapp
• app_22_state
• app_22_wellness
• openknights (우송대 오픈소스 경진대회 모바일 앱)