Dev Lab
Compose 기본2026년 01월 18일· 8 min read

Icon과 Image 다루기

Jetpack Compose Icon과 Image 다루기 - 기초 단계. Compose 기본 카테고리의 실전 가이드.

#Icon#Image#이미지
Icon과 Image 다루기

Icon과 Image 다루기

한 줄 요약

Jetpack Compose에서 아이콘과 이미지를 어떻게 표시하는지 배워보자!

들어가며

일상에서 앱을 사용할 때, 화면에 보이는 아이콘과 이미지를 많이 보게 되지? 예를 들어, 페이스북 앱을 열면 상단에 메시지 아이콘이 있고, 인스타그램을 보면 사진이 쭉 나열되어 있어. 이런 아이콘과 이미지를 앱 화면에 나타내는 건 아주 기본적이지만 중요한 작업이야. 그래서 오늘은 Jetpack Compose에서 어떻게 아이콘과 이미지를 다루는지 알아보려고 해.

아이콘과 이미지

이게 뭔데? (개념 설명)

아이콘은 앱에서 작은 크기의 그림으로 기능을 표현하는데 사용돼. 예를 들어, 톱니바퀴 모양의 설정 아이콘은 설정 화면으로 이동할 수 있다는 걸 알려주지. 반면에 이미지는 좀 더 큰 사진이나 그래픽으로, 사용자가 콘텐츠를 쉽게 인식하도록 도와줘. 예를 들어, 쇼핑 앱에서 상품의 사진을 보여줄 때 이미지를 사용해.

왜 이렇게 만들어졌을까? (설계 철학)

아이콘과 이미지는 사용자 경험을 직관적으로 만들어줘. 버튼에 글자만 있으면 어떤 기능인지 헷갈릴 수 있지만, 아이콘을 더하면 바로 알 수 있지. 또한, 이미지를 통해 사용자는 더 많은 정보를 빠르게 받을 수 있어. 그래서 Android 팀은 Jetpack Compose에서 이 두 가지를 쉽게 사용할 수 있도록 만들었어.

파라미터 완전 정복

파라미터타입설명기본값
imageVectorImageVector아이콘을 그릴 벡터 이미지필수
painterPainter이미지를 그릴 도구필수
contentDescriptionString화면 리더를 위한 설명null
modifierModifier레이아웃과 스타일링을 위한 도구Modifier

파라미터 설명

  • imageVector: 이건 아이콘의 모양을 정의하는 도구야. 인터넷에서 다운받은 SVG 파일 같은 걸 생각하면 돼.
  • painter: 이미지를 그릴 때 사용되는 도구야. JPEG나 PNG 같은 실제 이미지 파일을 생각하면 돼.
  • contentDescription: 시각장애인이 화면 리더를 사용할 때 아이콘이나 이미지가 뭔지 설명해주는 텍스트야.
  • modifier: 아이콘이나 이미지의 크기, 위치 등을 조절할 수 있는 도구야. 예를 들어, 이미지를 화면 중앙에 배치하고 싶을 때 사용해.

내부 동작 원리

아이콘이나 이미지를 화면에 그리면 내부적으로는 화면에 픽셀을 색칠하는 작업이야. 아이콘의 경우에는 주어진 벡터 이미지를 따라 모양을 그리고, 이미지는 주어진 파일을 읽어서 화면에 맞게 크기를 조정해 보여줘. 이 과정은 우리가 직접 관리하지 않아도 되고, Compose가 알아서 해주니까 쉬워.

코드로 직접 해보자

아이콘을 표시하는 코드를 먼저 살펴보자.

// 첫 번째 부분: 아이콘을 그리기 위한 import
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.Icon
import androidx.compose.runtime.Composable

// 두 번째 부분: 아이콘 표시 함수 정의
@Composable
fun showFavoriteIcon() {
    Icon(
        imageVector = Icons.Filled.Favorite,  // 하트 모양 아이콘

contentDescription = "Favorite Icon" // 화면 리더를 위한 설명 ) }


위 코드에서는 하트 모양의 'Favorite' 아이콘을 화면에 나타낼 수 있어. 이 아이콘은 우리가 흔히 보는 '좋아요' 표시 같은 거야.

다음은 이미지를 표시하는 방법이야.

```kotlin
// 첫 번째 부분: 이미지를 그리기 위한 import
import androidx.compose.foundation.Image
import androidx.compose.ui.res.painterResource
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource

// 두 번째 부분: 이미지 표시 함수 정의
@Composable
fun showSampleImage() {
    Image(
        painter = painterResource(id = R.drawable.sample_image),  // 리소스에서 이미지 가져오기
        contentDescription = "Sample Image"  // 화면 리더를 위한 설명
    )
}

이 이미지는 앱의 리소스 폴더에 저장된 그림 파일을 화면에 보여줘. 위 코드가 실행되면 설정한 이미지를 앱에서 볼 수 있어.

자주 하는 실수 TOP 3

실수 1: 잘못된 리소스 경로

  • 😵 문제: 이미지 파일의 경로를 잘못 입력하면 에러가 발생해
  • 🤔 원인: 이미지가 있는 위치를 정확히 모를 때
  • ✅ 해결: res/drawable 폴더에 이미지가 있는지 확인하고 경로를 정확히 입력해
// 잘못된 경로 예시
Image(painter = painterResource(id = R.drawable.wrong_path), contentDescription = null)

실수 2: contentDescription 누락

  • 😵 문제: 화면 리더 사용자가 이미지나 아이콘을 못 알아봐
  • 🤔 원인: 설명을 넣지 않아서
  • ✅ 해결: 항상 contentDescription을 넣어줘야 해
// 개선된 코드
Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite Icon")

실수 3: 크기 조정 실수

  • 😵 문제: 이미지가 화면에 너무 크게 나타나거나 잘려 보여
  • 🤔 원인: modifier를 사용하지 않아서
  • ✅ 해결: modifier로 크기와 위치를 조정해
// 크기 조정 예시
Image(painter = painterResource(id = R.drawable.sample_image), contentDescription = null, modifier = Modifier.size(100.dp))

이미지 크기 조정

실전 응용 예제

  • 쇼핑 앱에서 상품의 이미지를 보여줄 때 Image를 사용해. 이렇게 하면 사용자가 상품을 쉽게 확인할 수 있어.
  • 메신저 앱에서는 메시지 옆에 보내기 아이콘을 Icon으로 표시해. 사용자가 버튼을 누르면 메시지를 전송할 수 있지.

다음 시간 예고

다음 시간에는 Row를 사용해서 UI 컴포넌트를 가로로 배치하는 방법을 알아볼 거야. 오늘 배운 아이콘과 이미지를 Row에 넣어서 배치해보는 것도 재미있을 거야.

Photo by Federica Galli on Unsplash

관련 글