Act as a Patient, Non-Technical Android Studio Guide

물론이죠 😊 앱 만들기는 레시피를 따라 요리하는 것과 비슷해요.

• 코드 = 요리법 📝
• Android Studio = 요리하는 주방
• 에뮬레이터/휴대폰 = 완성된 요리를 맛보는 곳 📱

이번에는 버튼을 누르면 “안녕하세요!”가 나타나는 앱을 만들겠습니다. 요즘 새 Compose 프로젝트는 Kotlin과 Jetpack Compose를 사용하는 것이 기본적인 시작 방법입니다. 공식 Android 안내

1단계: 새 프로젝트 만들기

1. Android Studio를 엽니다.
   파란색 아이콘에 안드로이드 로봇이 있는 프로그램이에요 🤖

2. 시작 화면에서 New Project를 클릭합니다.

3. 여러 카드가 보이면 Phone and Tablet 아래의 Empty Activity를 선택합니다.

   • Empty Activity는 빈 종이처럼 시작하는 프로젝트입니다.
   • XML 화면 대신 최신 방식인 Jetpack Compose가 준비됩니다.

4. 오른쪽 아래 Next를 클릭합니다.

5. 다음처럼 입력합니다.

   • Name: HelloButton
   • Package name: 자동으로 두어도 됩니다.
   • Save location: 저장할 장소를 그대로 두어도 됩니다.
   • Language: Kotlin
   • Minimum SDK: API 21 이상

6. Finish를 클릭합니다.

7. 잠시 기다립니다. 아래쪽에 진행 표시줄이 보일 수 있어요.
   Android Studio가 앱을 만들기 위한 재료를 준비하는 중입니다. 처음에는 몇 분 걸릴 수 있습니다.

Android Studio의 버전에 따라 Empty Activity라는 이름이나 화면 배치가 조금 다를 수 있습니다. Empty Compose Activity가 보이면 그것을 선택해도 됩니다. Android 공식 템플릿 안내

2단계: 코드를 넣을 파일 열기

왼쪽에 파일 목록이 보일 거예요.

1. 왼쪽 위에 Android라고 적힌 메뉴가 있으면 그대로 둡니다.

2. 다음 순서로 폴더를 엽니다.

   app → kotlin+java 또는 java → 여러분의 패키지 이름

3. 그 안의 MainActivity.kt를 두 번 클릭합니다.

이 파일은 앱이 처음 켜질 때 실행되는 현관문 같은 파일입니다 🚪

3단계: 코드 바꾸기

파일 맨 위에는 다음과 비슷한 줄이 있을 겁니다.

package com.example.hellobutton

이 package 줄은 그대로 둡니다. 여러분의 프로젝트 이름에 따라 내용이 다를 수 있어요.

그 아래 내용을 모두 지우고 다음 코드를 붙여 넣습니다.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            GreetingApp()
        }
    }
}

@Composable
fun GreetingApp() {
    var showGreeting by remember {
        mutableStateOf(false)
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        if (showGreeting) {
            Text("안녕하세요!")
        }

        Button(
            onClick = {
                showGreeting = true
            }
        ) {
            Text("인사 보기")
        }
    }
}

4단계: 코드 뜻 알아보기

처음부터 모든 단어를 외울 필요는 없습니다. 지금은 이렇게 이해하면 충분해요.

Button

화면에 버튼을 만드는 명령입니다. 버튼은 초인종처럼 눌렀을 때 무언가를 실행합니다 🔔

Text("인사 보기")

버튼 안에 인사 보기라는 글자를 보여줍니다.

var showGreeting by remember {
    mutableStateOf(false)
}

“인사말을 보여줄까?”라는 메모장을 하나 만드는 부분입니다.

• false = 아직 보여주지 않음
• true = 보여줌

onClick = {
    showGreeting = true
}

버튼을 누르면 메모장의 내용을 true로 바꿉니다.

if (showGreeting) {
    Text("안녕하세요!")
}

메모장이 true일 때만 **안녕하세요!**를 화면에 보여줍니다.

5단계: 앱 실행하기 ▶️

1. Android Studio 위쪽을 봅니다.
2. 휴대폰 모양의 기기 선택 메뉴에서 사용할 기기를 고릅니다.
3. 초록색 삼각형 모양의 Run ▶ 버튼을 클릭합니다.

처음 실행할 때는 시간이 조금 걸릴 수 있습니다.

사용할 기기가 보이지 않는 경우

기기 선택 메뉴에 아무것도 없다면:

1. 위쪽 기기 메뉴를 클릭합니다.
2. Device Manager를 선택합니다.
3. Create Virtual Device를 클릭합니다.
4. Pixel 같은 휴대폰을 선택합니다.
5. 화면의 안내에 따라 Android 버전을 설치합니다.
6. 만든 기기의 ▶ 버튼을 눌러 켭니다.
7. 다시 Android Studio의 초록색 Run ▶ 버튼을 누릅니다.

완성된 모습

처음에는 화면 가운데에 다음 버튼만 보입니다.

[ 인사 보기 ]

버튼을 누르면 이렇게 바뀝니다.

안녕하세요!

[ 인사 보기 ]

자주 생기는 문제

빨간 글씨가 많이 보여요

코드를 붙여 넣은 직후 Android Studio가 아직 준비 중일 수 있습니다. 아래쪽 진행 표시가 끝날 때까지 잠시 기다려 보세요.

Unresolved reference라는 오류가 나요

필요한 가져오기 문장이 빠졌다는 뜻입니다. 위의 코드를 파일에 정확히 전부 붙여 넣었는지 확인하세요.

Missing }라는 오류가 나요

중괄호 } 하나가 빠졌다는 뜻입니다. 코드를 일부만 지우지 말고, package 줄만 남긴 뒤 그 아래를 모두 지우고 코드를 다시 붙여 넣어 보세요.

앱이 실행되지 않아요

아래쪽 Logcat 창은 앱의 탐정 수첩 🔍입니다. 다만 지금은 먼저:

1. 코드 저장이 끝났는지 확인
2. 오류가 빨간색으로 남아 있는지 확인
3. 에뮬레이터가 켜져 있는지 확인
4. 초록색 Run ▶ 버튼을 다시 클릭

하면 됩니다.

축하합니다! 🎉 첫 번째 Android 앱에서 버튼과 화면 변화를 직접 만들었어요. 정말 잘하고 계십니다. 다음에는 버튼을 누를 때 글자가 바뀌거나 색상이 변하도록 확장할 수 있어요. 🌟