Text 컴포넌트 완전 정복

한 줄 요약

Jetpack Compose의 Text 컴포넌트를 사용하면 화면에 원하는 글자를 쉽게 띄울 수 있어!

들어가며

우리 스마트폰을 켜면 제일 먼저 눈에 들어오는 게 뭐야? 바로 화면에 떠 있는 다양한 글자들이지. 카톡 메시지나 인스타 피드에서 보이는 글자들, 다 이런 식으로 만들어진 거야. 이제 너도 직접 앱 화면에 글자를 띄울 수 있게 될 거야. 정말 신기하지 않아?

이게 뭔데? (개념 설명)

Text 컴포넌트는 스마트폰 화면에 글자를 띄워주는 도구야. 예를 들어, 카톡 메시지를 읽을 때 보이는 그 글자들, 인스타에서 피드에 보이는 글자들이 다 이런 식으로 만들어지는 거야. 컴포넌트를 사용하면 우리가 원하는 스타일과 색상으로 글자를 꾸밀 수 있어.

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

Text 컴포넌트는 우리가 쉽게 화면에 글자를 띄우게 하려고 존재해. 만약 이게 없었다면, 매번 글자를 그리기 위해 복잡한 코드를 작성해야 했을 거야. 안드로이드 팀은 이런 불편함을 덜어주기 위해 Text 컴포넌트를 만들었어. 이렇게 하면 개발자가 글자를 쉽게 다룰 수 있거든.

파라미터 완전 정복

파라미터	타입	설명	기본값

| text | String | 화면에 표시할 글자 | 필수 | | color | Color | 글자 색상 | 검정색 | | fontSize | TextUnit | 글자 크기 | 14.sp |

• text: 이건 화면에 표시할 글자야. 예를 들어, "안녕하세요"라는 말을 띄우고 싶다면 이 파라미터에 그 말을 넣으면 돼.
• color: 글자의 색상을 정할 수 있어. 기본은 검정색인데, 우리가 원하는 색깔로 바꿀 수 있지. 예를 들어, 중요한 메시지는 빨간색으로 해볼 수 있어.
• fontSize: 글자의 크기를 결정해. 친구한테 강조해서 보여주고 싶을 때 글자 크기를 키울 수 있어.

내부 동작 원리

이 컴포넌트가 호출되면 내부에서는 글자를 화면에 그리기 위한 여러 가지 작업을 해. 비유하자면, 마치 우리가 종이에 펜으로 글씨를 쓸 때 펜을 잡고, 힘을 조절하고, 글씨체를 신경 쓰는 것처럼 컴퓨터도 글자를 화면에 잘 보이게 그리는 거야.

코드로 직접 해보자

첫 번째로, Text 컴포넌트를 사용하기 위해 필요한 코드를 import 해야 해.

// 첫 번째 부분: import 선언
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

위 코드는 Text 컴포넌트를 사용하기 위한 준비야.

두 번째로, 실제로 화면에 글자를 띄워보자.

```kotlin
// 두 번째 부분: 함수 정의
@Composable // 이 어노테이션은 컴포저블 함수를 정의할 때 사용해
fun showMessage() { // 화면에 메시지를 보여주는 함수
    Text(
        text = "안녕하세요",  // 화면에 표시될 글자
        fontSize = 20.sp,    // 글자 크기 (sp = 화면 크기에 맞게 조절되는 단위)
        color = Color.Blue   // 글자 색상
    )
}

위 코드가 실행되면:

1. 화면에 "안녕하세요"라는 글자가 나타나.
2. 글자 크기는 20sp (보통 크기보다 살짝 큼).
3. 파란색으로 표시됨.

자주 하는 실수 TOP 3

실수 1: 파라미터 오타

• 😵 문제: 글자가 화면에 안 나와.
• 🤔 원인: 파라미터 이름을 틀리게 썼을 때 발생해.
• ✅ 해결: 정확한 파라미터 이름을 사용해야 해.

// 잘못된 예시
Text(tex = "안녕하세요") // 'text'라는 파라미터 이름이 잘못됐어

실수 2: 색상 지정 오류

• 😵 문제: 글자 색상이 이상하게 나와.
• 🤔 원인: Color 객체를 잘못 사용했을 때.
• ✅ 해결: Color 클래스의 올바른 색상을 사용해야 해.

// 잘못된 예시
Text(
    text = "안녕하세요",
    color = Color.Redish // 'Redish'라는 색상은 존재하지 않아
)

실수 3: Composable 어노테이션 누락

• 😵 문제: 함수가 정상적으로 작동하지 않아.
• 🤔 원인: @Composable 어노테이션을 빼먹었을 때.
• ✅ 해결: @Composable 어노테이션을 꼭 붙여야 해.

// 잘못된 예시
fun showMessage() { // @Composable 어노테이션이 필요해
    Text("안녕하세요")
}

실전 응용 예제

• 로그인 화면의 "비밀번호를 입력하세요" 텍스트: Text 컴포넌트를 사용해서 로그인 화면에 안내 메시지를 쉽게 만들 수 있어.
• 쇼핑앱의 상품 가격 표시: 상품 페이지에서 가격을 강조하기 위해 Text 컴포넌트로 가격을 표시할 수 있어.

다음 시간 예고

다음 시간에는 버튼에 대해 알아볼 거야. 버튼을 사용하면 더 많은 사용자 상호작용을 만들 수 있어. 오늘 배운 텍스트와 결합하면 멋진 UI를 만들 수 있으니 기대해줘!

---

Photo by Federica Galli on Unsplash