Jetpack Compose 초심자 가이드 2: Jetpack Compose 개발 환경 구축하기 🚀

윤성현·2025년 4월 13일
jetpack compose
2

Jetpack Compose 초심자 가이드

목록 보기
2/10
post-thumbnail

📌 개요

이전 글에서는 Jetpack Compose란 무엇인가?라는 주제로 Compose의 개념과 특징, 기존 View 시스템과의 차이점에 대해 소개해드렸습니다.

Jetpack Compose를 활용하기 위해서는 먼저 개발 환경 설정을 올바르게 하는 것이 중요합니다.

이번 글에서는 Android Studio 설정 방법부터 Jetpack Compose 프로젝트 생성, Gradle 설정, 그리고 Compose의 Preview 기능 활용법까지 알아보겠습니다.

1. Android Studio 설치

Jetpack Compose는 Android Studio에서 공식적으로 지원합니다. 안정화된 버전 중 최신 버전 사용을 권장합니다.

설치 방법

  1. Android Studio 공식 페이지에서 최신 버전 다운로드
  2. 설치 후 표준 설정으로 진행하면 됩니다.

Compose의 Preview 기능의 업데이트 등 최신 버전의 안드로이드 스튜디오에서는 더 개선된 기능을 제공합니다. 따라서, 최신 버전의 안드로이드 스튜디오 버전을 사용하시는 것을 권장합니다.

2. Compose 프로젝트 생성하기

Compose 프로젝트는 Android Studio에서 제공하는 템플릿을 통해 간단히 생성할 수 있습니다.

프로젝트 생성 순서

  1. File > New > New Project 선택
    • 프로젝트를 만들거나 열어본 적이 없는 경우에는 New Project 버튼을 바로 클릭하면 됩니다.
  2. Empty Activity 템플릿 선택
    • 육각형 모양(3차원의 큐브 형태 모양)은 Jetpack Compose 표시입니다.
    • Empty Activity를 선택하면 기본적인 Compose 설정이 자동으로 포함됩니다. (자세한 내용은 아래에서 다루겠습니다.)
  3. 프로젝트 이름, 패키지명, 저장 경로 설정
    • Name 란에 프로젝트 이름을 작성해주시면 됩니다.
      • 이름은 프로젝트의 목적에 맞는 이름을 적어주시면 됩니다.
      • 여기서는 PascalCase(처음과 모든 단어의 시작을 대문자로 작성)를 사용하지만, 원하신다면 소문자로만 적으시거나, 소문자와 - 를 섞어서 작성하실 수도 있습니다.
    • Package name은 작성하신 Name에 따라 자동으로 기입됩니다.
      • 익숙하지 않으시다면, 이 부분은 자동으로 작성된 내용으로 두어도 좋습니다.
    • Minimum SDK는 보통 API 21 (Android 5.0) 이상 선택

3. Gradle 설정 확인하기

Compose가 제대로 작동하려면 build.gradle(:app)에 아래 항목이 포함되어 있어야 합니다.

android {
    ...
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "사용하는 코틀린 버전에 맞는 값"
    }
}

📌 Kotlin Compiler Extension 버전은 사용 중인 Kotlin 버전 및 Compose 버전에 따라 달라질 수 있으니, 공식 버전 가이드를 확인하세요.

4. 프로젝트 기본 구조 이해하기

Compose 프로젝트는 기존 XML 기반 프로젝트와 달리 코틀린 파일 중심으로 구성됩니다.

app/
├── MainActivity.kt       // 앱의 진입점
├── ui/theme/             // 테마 설정
│   ├── Theme.kt
│   ├── Color.kt
│   ├── Type.kt
└── ...

주요 파일 설명

  • MainActivity.kt : Compose UI의 진입점. XML을 사용하지 않고 Compose 코드로 UI를 정의합니다.
  • Theme.kt : 전체 앱에 적용되는 MaterialTheme 정의
  • Color.kt, Type.kt : 앱의 색상과 텍스트 스타일 등을 정의합니다.

🎯 테마를 활용하여 전체 UI의 일관성을 유지할 수 있습니다.

5. 첫 Compose UI 만들어보기

이제 프로젝트를 생성했으니, 아주 간단한 UI를 Compose로 직접 만들어봅시다.

  1. MainActivity.kt 파일 하단에 아래의 예시 코드를 따라서 작성하거나 복사/붙여넣기 해봅시다.

    • ✋ 혹시 자동으로 작성된 Greeting 함수가 있다면 삭제한 후에 진행해주세요!
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    Text(text = "안녕하세요, $name!")
}

짚고 넘어가기

  • Jetpack Compose의 UI는 함수로 만든다는 점을 알 수 있습니다.
  • @Composable 어노테이션을 함수 위에 붙임으로써 Jetpack Compose의 UI를 만들 수 있습니다.
    • Jetpack Compose의 UI는컴포저블 UI 혹은 컴포저블 함수 라고 불립니다.
    • 앞으로는 컴포저블 함수 라는 용어를 사용하도록 하겠습니다.

6. Compose Preview 활용하기

Jetpack Compose의 강력한 기능 중 하나는 바로 Preview 기능입니다.

코드를 작성하면서 실시간으로 UI를 확인할 수 있어, 개발 속도와 편의성이 크게 향상됩니다.

기본 Preview 예제

  • 아래 예제는 기존에 작성한 Greeting 함수는 그대로 두고, Preview를 위한 함수만 추가한 예시입니다.
  • 이미 Greeting 함수를 작성해두셨다면, 아래 코드에서 GreetingPreview 함수만 추가하셔도 됩니다.
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun Greeting(name: String) {
    Text(text = "안녕하세요, $name!")
}

@Preview(showBackground = true)
@Composable
private fun PreviewGreeting() {
    Greeting("Jetpack Compose")
}
  • Preview 기능을 사용하면 실시간으로 결과를 확인할 수 있습니다.
    • 만들어둔 컴포저블 함수를 사용하는 새로운 컴포저블 함수를 만듦으로써 미리보기를 위한 컴포저블 함수를 만들 수 있습니다.
    • @Preview 어노테이션을 컴포저블 함수 위에 붙임으로써 미리보기를 위한 컴포저블 함수를 만들 수 있습니다.
    • IDE 창 우측 상단에 있는 세 아이콘 중, 가운데 있는 아이콘을 클릭하면 코드와 미리보기 화면을 동시에 확인할 수 있습니다.
  • showSystemUi = true, uiMode = Configuration.UI_MODE_NIGHT_YES 등의 옵션을 활용하면 다양한 화면 상태를 미리 볼 수 있습니다.

Preview 모드 종류

옵션설명
showBackground배경색을 포함하여 UI를 표시합니다
showSystemUi상태바와 내비게이션 바를 함께 표시합니다
uiMode다크 모드 등 다양한 시스템 UI 모드를 테스트할 수 있습니다
device특정 기기의 해상도 및 화면 크기로 미리볼 수 있습니다
  • 이외에도 언어 설정에 따라 다르게 표시하는 Preview 등 다양한 설정이 있으며, 더 자세한 내용은 공식 문서에서 확인하실 수 있습니다.

💡 여러 개의 Preview 함수를 작성하면, 다양한 상태와 디자인을 동시에 비교하고 테스트할 수 있어 매우 유용합니다.

정리

Jetpack Compose는 간단한 설정만으로 바로 시작할 수 있으며, 특히 Preview 기능을 활용하면 XML보다 훨씬 빠르고 효율적으로 UI를 개발할 수 있습니다.

🎯 다음 글 예고: "Jetpack Compose 기본 UI 구성 요소 살펴보기"

이번 글에서는 Jetpack Compose 개발 환경 구축부터 간단한 UI 구성까지 실습해보았습니다.

다음 글에서는 Text, Button, Image, Column, Row, Box 등 Jetpack Compose의 기본 UI 구성 요소를 하나씩 살펴보고, Modifier를 활용하여 크기, 정렬, 패딩 등을 조정하는 방법도 함께 배워보겠습니다.🚀

profile
윤성현
이전 포스트

Jetpack Compose 초심자 가이드 1: Jetpack Compose란 무엇인가? 🚀

다음 포스트

Jetpack Compose 초심자 가이드 3: Compose 기본 컴포저블과 Modifier 🚀

0개의 댓글