[6주차].앱 완성 정리와 배포

[6주차] 앱 완성 정리와 배포

이번 주는 지금까지 만든 단어장 앱을 최종 정리하고, 실제 스마트폰에 설치할 수 있는 APK 파일로 추출하는 마지막 수업입니다.
앱 이름과 아이콘을 직접 변경하며 나만의 앱 형태로 마무리하고, 1~5주차 동안 배운 Kotlin, Jetpack Compose, 앱 개발 흐름을 간단히 되돌아봅니다.

오늘의 목표

1. 1~5주차 동안 만든 단어장 앱의 구조를 정리한다.
2. Kotlin과 Jetpack Compose의 핵심 개념을 복습한다.
3. 앱의 실제 이름을 원하는 이름으로 변경한다.
4. 홈 화면에 표시되는 앱 아이콘 이미지를 교체한다.
5. APK 파일을 추출하여 스마트폰에 직접 설치한다.

1. 지금까지 만든 앱 되돌아보기

1주차: 안드로이드 스튜디오 시작과 첫 화면 띄우기
2주차: 단어 카드 UI 만들기
3주차: 리스트, 정렬, 뜻 숨기기, 삭제 기능 만들기
4주차: 새 단어 추가 팝업창 만들기
5주차: 플래시카드 학습 화면 이동 만들기
6주차: 앱 이름과 아이콘 변경, APK 배포

처음에는 단순한 텍스트 화면에서 시작했지만, 현재는 단어 추가, 삭제, 정렬, 뜻 숨기기, 플래시카드 학습까지 가능한 하나의 앱 형태가 되었습니다.
이번 시간에는 기능을 더 추가하기보다, 지금까지 만든 앱을 정리하고 실제 스마트폰에 설치하는 것을 목표로 합니다.

2. 현재 앱의 전체 구조

MainActivity.kt 
└─ 앱의 시작 지점
data 패키지 
├─ Word.kt 
└─ WordRepository.kt
ui 패키지 
├─ HomeScreen.kt 
└─ StudyScreen.kt

1. MainActivity.kt

앱이 처음 실행될 때 시작되는 파일입니다.
setContent { } 안에서 Jetpack Compose 화면을 실제 앱 화면으로 띄웁니다.

setContent {    ...}

또한 5주차부터는 NavHost를 사용하여 홈 화면과 학습 화면 사이의 이동을 관리합니다.

2. data 패키지

앱에서 사용하는 데이터를 관리하는 공간입니다.

Word.kt

단어 하나의 정보를 저장하는 데이터 설계도입니다.

data class Word(    
	val id: Long,    
	val spelling: String,    
	val meaning: String,    
	val isHidden: Boolean = false)

Word는 단어 카드 한 장이 가져야 하는 정보를 하나로 묶어둔 형태입니다.

WordRepository.kt

단어 목록을 저장하고 관리하는 데이터 창고 역할을 합니다.
이 파일에서는 다음과 같은 기능을 처리합니다.

단어 목록 저장
단어 추가
단어 삭제
뜻 숨김 상태 변경
앱 재실행 시 데이터 불러오기

3. ui 패키지

실제로 화면에 보이는 UI를 만드는 공간입니다.

HomeScreen.kt

단어 목록이 보이는 메인 화면입니다.
주요 기능은 다음과 같습니다.

단어 리스트 표시
최신순 / 알파벳순 정렬
뜻 숨기기
단어 삭제
새 단어 추가 
팝업 열기
학습 화면으로 이동

StudyScreen.kt

플래시카드 방식으로 단어를 학습하는 화면입니다.
주요 기능은 다음과 같습니다.

단어를 카드 형태로 표시
카드를 누르면 뜻 표시
이전 / 다음 단어 이동
마지막 카드에서 학습 종료

3. Kotlin 핵심 문법 복습

1. val과 var

val words = WordRepository.words
var sortType by remember { mutableStateOf(SortType.LATEST) }

val은 한 번 정하면 바뀌지 않는 값입니다.
var는 나중에 값이 바뀔 수 있는 변수입니다.
앱에서는 사용자가 버튼을 누르거나 입력을 하면 값이 바뀌는 경우가 많기 때문에 var를 자주 사용합니다.

2. data class

data class Word(    
	val id: Long,    
	val spelling: String,    
	val meaning: String,    
	val isHidden: Boolean = false
)

data class는 여러 데이터를 하나의 묶음으로 표현할 때 사용합니다.
이 앱에서는 단어 하나를 표현하기 위해 Word라는 데이터 클래스를 만들었습니다.

3. object

object WordRepository {    
	val words = mutableStateListOf<Word>()
}

object는 앱 전체에서 하나만 존재하는 객체를 만들 때 사용합니다.
WordRepository는 여러 화면에서 함께 사용하는 단어 데이터 창고 역할을 합니다.

4. if

text = if (word.isHidden) "●●●●●" else word.meaning

if를 사용하면 조건에 따라 다른 값을 보여줄 수 있습니다.
이 코드에서는 isHidden 값에 따라 단어의 뜻을 숨기거나 보여줍니다.

5. 람다 { }

onClick = { isSheetOpen = true }

람다는 나중에 실행할 코드를 중괄호 안에 넣어두는 방식입니다.
앱 개발에서는 버튼 클릭, 화면 이동, 데이터 변경 같은 이벤트를 처리할 때 자주 사용됩니다.

4. Jetpack Compose 핵심 개념 복습

Jetpack Compose는 화면을 함수처럼 구성하는 Android UI 개발 도구입니다.

1. @Composable

@Composablefun HomeScreen() {    ...}

@Composable이 붙은 함수는 화면을 그리는 함수입니다.
일반 함수가 계산이나 처리를 담당한다면, Composable 함수는 실제로 눈에 보이는 UI를 만듭니다.

2. Modifier

Modifier    
	.fillMaxSize()    
	.background(Color(0xFFF5F5F5))    
	.padding(24.dp)

Modifier는 UI의 크기, 여백, 배경, 정렬 등을 조절하는 도구입니다.
자주 사용한 Modifier는 다음과 같습니다.

fillMaxSize()  = 화면 전체 채우기
fillMaxWidth() = 가로 전체 채우기
padding()      = 여백 주기
background()   = 배경색 지정하기
weight()       = 남은 공간을 비율로 나누기

3. 상태 State

var sortType by remember { mutableStateOf(SortType.LATEST) }

Compose에서는 화면이 바뀌어야 할 때 상태값을 사용합니다.
상태값이 바뀌면, 그 상태값을 사용하는 UI가 자동으로 다시 그려집니다.
예를 들어 정렬 버튼을 누르면 sortType 값이 바뀌고, 단어 리스트가 새로운 정렬 기준에 맞게 다시 그려집니다.

4. 조건부 화면 표시

if (isSheetOpen) {    
	AddWordSheet(onDismiss = { isSheetOpen = false })
}

Compose에서는 화면을 직접 보이게 하거나 숨기는 명령을 사용하기보다, 상태값에 따라 화면을 그릴지 말지를 결정합니다.

isSheetOpen == true  → 팝업창 표시
isSheetOpen == false → 팝업창 표시 안 함

5. 화면 이동 Navigation

navController.navigate("study")

navigate()는 다른 화면으로 이동할 때 사용합니다.

navController.popBackStack()

popBackStack()은 이전 화면으로 돌아갈 때 사용합니다.
5주차에서는 이 기능을 사용하여 홈 화면에서 플래시카드 학습 화면으로 이동하고, 다시 홈 화면으로 돌아오는 구조를 만들었습니다.

5. 앱 개발 전체 흐름

이번 단어장 앱은 실제 앱 개발 과정을 작게 줄여서 경험해본 예시입니다.
보통통 앱 개발 흐름은 다음과 같습니다.

1. 만들 앱을 구상한다.
2. 화면 구조를 설계한다.
3. 필요한 데이터를 정한다.
4. UI 화면을 만든다.
5. 버튼과 기능을 연결한다.
6. 데이터를 저장한다.
7. 화면 이동을 붙인다.
8. 테스트하며 오류를 수정한다.
9. 앱 이름과 아이콘을 변경한다.
10. APK 파일로 추출하여 설치한다.

6. 앱 이름 바꾸기 strings.xml

앱 이름은 스마트폰에 설치했을 때 홈 화면이나 앱 목록에 표시되는 이름입니다.

1. 왼쪽 트리에서 app > res > values > strings.xml 파일을 엽니다.
2. 아래 코드를 찾습니다.

<string name="app_name">AppdongBootcamp</string>

1. AppdongBootcamp 부분을 원하는 앱 이름으로 바꿉니다.
   예시:

<string name="app_name">나만의 단어장</string>

한글 이름으로 변경해도 됩니다.

7. 홈 화면 앱 아이콘 이미지 교체 Image Asset

이번에는 스마트폰 홈 화면에 표시되는 앱 아이콘을 변경합니다.

1. 왼쪽 트리에서 제일 바깥쪽 app 폴더를 우클릭합니다.
2. New ➜ Image Asset을 클릭합니다.
3. 팝업창 중간의 Foreground Layer 탭에서 Path 버튼을 누릅니다.
4. 미리 준비한 아이콘용 이미지 파일을 선택합니다.
   • PNG 이미지 추천
   • 정사각형 이미지 추천
   • 너무 복잡한 사진보다 단순한 이미지 추천
5. 이미지가 너무 크면 Resize 슬라이더를 줄여 초록색 안전 구역 안에 맞춥니다.
6. 오른쪽 아래의 Next를 누릅니다.
7. Finish를 누르면 기존 기본 아이콘이 새 아이콘으로 교체됩니다.

8. 마지막 Build: APK 파일 추출하기

이제 Android Studio 없이도 스마트폰에 설치할 수 있는 APK 파일을 만들어봅니다.

1. Android Studio 상단 메뉴바에서 Build를 클릭합니다.
2. Build Bundle(s) / APK(s) ➜ Build APK(s)를 클릭합니다.
3. 오른쪽 아래에서 Gradle Build Running 로딩이 끝날 때까지 기다립니다.
4. 빌드가 완료되면 오른쪽 아래에 작은 팝업이 뜹니다.
5. 팝업 안의 파란색 locate 글씨를 클릭합니다.
6. 윈도우 탐색기가 열리면 app-debug.apk 파일을 확인합니다.
7. app-debug.apk 파일을 카카오톡 “나에게 보내기”로 전송합니다.
8. 스마트폰에서 APK 파일을 다운로드합니다.
9. 다운로드한 APK 파일을 눌러 설치합니다.
10. 알 수 없는 출처 앱 설치 허용 경고가 뜨면 허용 후 설치를 진행합니다.

9. 마무리

이번 부트캠프에서 만든 앱은 큰 규모의 앱은 아니지만, 앱 개발의 핵심 흐름을 포함하고 있습니다.

화면 만들기
데이터 만들기
리스트 보여주기
버튼 이벤트 처리하기
상태에 따라 화면 바꾸기
데이터 저장하기
화면 이동하기
앱 이름과 아이콘 바꾸기
APK로 설치하기

앞으로 Android 앱 개발을 더 공부하고 싶다면 다음 순서로 이어가면 좋습니다.

Kotlin 기본 문법→ Jetpack Compose UI→ 상태 관리→ Navigation→ 데이터 저장→ API 통신→ 서버 / DB 연결→ 로그인→ 배포

현재 만든 앱은 스마트폰 내부에 데이터를 저장하는 로컬 앱입니다.
다음 단계에서는 인터넷에서 데이터를 가져오거나, 서버와 연결하여 사용자별 데이터를 저장하는 앱을 만들 수 있습니다.