Text 컴포넌트 완전 정복

한 줄 요약

Jetpack Compose의 Text 컴포넌트를 사용하여 화면에 글자를 쉽게 표시할 수 있습니다.

들어가며

텍스트는 우리 삶의 많은 부분에서 중요한 역할을 합니다. 스마트폰을 사용하면서 가장 많이 접하는 것이 바로 문자죠. 친구에게 메시지를 보내거나, 뉴스를 읽거나, 앱의 버튼을 누를 때 모두 텍스트가 사용됩니다. 그래서 앱 개발에서도 텍스트를 어떻게 다루는지가 매우 중요해요.

Jetpack Compose에서는 Text 컴포넌트를 사용하여 화면에 글자를 쉽게 표시할 수 있습니다. 이 컴포넌트를 잘 활용하면 앱의 사용자 경험을 크게 향상시킬 수 있습니다. 오늘은 Text 컴포넌트가 어떻게 동작하는지, 그리고 어떻게 활용할 수 있는지를 자세히 알아보겠습니다.

목차

• Text 컴포넌트란?

• 파라미터 완전 정복

• 실제 사용 예제

• 자주 하는 실수

• 실전 응용

• 심화: Text를 활용한 실전 프로젝트 구현

Text 컴포넌트란?

Text 컴포넌트는 스마트폰 화면에 글자를 띄워주는 도구야. 카카오톡 메시지 읽을 때 보이는 그 글자들? 다 이런 식으로 만들어진 거야. Jetpack Compose에서는 이 Text 컴포넌트를 사용해서 손쉽게 앱에 문자를 추가할 수 있어.

파라미터 완전 정복

Text 컴포넌트는 다양한 파라미터를 제공하여 글자의 스타일과 위치를 조정할 수 있어. 각 파라미터가 어떻게 동작하는지 살펴보자.

파라미터	타입	설명	기본값
text	String	화면에 표시할 글자	필수
color	Color	글자 색상	Color.Unspecified
fontSize	TextUnit	글자 크기	TextUnit.Unspecified
fontWeight	FontWeight	글자 두께	FontWeight.Normal
textAlign	TextAlign	글자 정렬	TextAlign.Start

각 파라미터 상세 분석

text

@Composable
fun Text(
    text: String,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight = FontWeight.Normal,
    textAlign: TextAlign? = null,
    ...
)

• 역할: 화면에 표시할 텍스트
• 내부 처리: 사용자가 입력한 문자열을 안전하게 String으로 변환

color

val resolvedColor = color.takeOrElse { Color.Black }

• 역할: 글자 색상을 지정
• 내부 처리: 지정하지 않으면 기본값(검정색) 사용

fontSize

val resolvedFontSize = fontSize.takeOrElse { 14.sp }

• 역할: 글자 크기를 결정
• 내부 처리: 기본값으로 14.sp 사용, 화면 크기에 맞게 조절

실제 사용 예제

Text 컴포넌트를 활용한 간단한 예제를 통해 사용 방법을 알아보자.

import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import androidx.compose.ui.graphics.Color

@Composable
fun showGreeting() {
    Text(
        text = "안녕하세요",  // 화면에 표시할 글자
        fontSize = 20.sp,    // 글자 크기
        color = Color.Blue,  // 글자 색상
        fontWeight = FontWeight.Bold  // 글자 두께
    )
}

위 코드는 화면에 "안녕하세요"라는 글자를 파란색으로 표시하고, 글자 두께는 Bold로 설정합니다. 크기는 20sp로 설정되어 있어요.

자주 하는 실수

실수 1: 잘못된 색상 설정

• 😵 문제: 색상 값을 잘못 설정하면 오류 발생
• 🤔 원인: Color 클래스의 값을 잘못 참조
• ✅ 해결: Color.Red 같은 사전 정의된 색상 사용

실수 2: 글자 크기 설정 오류

• 😵 문제: sp 대신 다른 단위 사용
• 🤔 원인: TextUnit을 잘못 이해
• ✅ 해결: 항상 sp 단위 사용

실수 3: 텍스트 정렬 오해

• 😵 문제: 텍스트 정렬이 예상과 다르게 표시
• 🤔 원인: TextAlign 설정 실수
• ✅ 해결: TextAlign.Center 등 정확히 지정

실전 응용 예제

Text 컴포넌트는 다양한 상황에서 활용될 수 있어. 몇 가지 실전 예제를 살펴보자.

• 로그인 화면: "비밀번호를 입력하세요"와 같은 안내문구
• 쇼핑 앱: 상품 가격 표시
• 메시지 앱: 상대방에게 보낸 메시지

이런 상황에서 Text 컴포넌트를 적절히 사용하면 앱의 사용자 경험을 크게 개선할 수 있어.

심화: Text를 활용한 실전 프로젝트 구현

1단계: 타이핑 애니메이션이 있는 텍스트 만들기

import androidx.compose.animation.core.*
import androidx.compose.runtime.*
import androidx.compose.material.Text

@Composable
fun TypingText(text: String) {
    val displayedText = remember { mutableStateOf("") }
    LaunchedEffect(text) {
        text.forEachIndexed { index, _ ->
            displayedText.value = text.substring(0, index + 1)
            delay(150)  // 각 글자마다 딜레이를 줘서 타이핑 효과
        }
    }
    Text(displayedText.value)
}

2단계: 그라데이션 텍스트 만들기

import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign

@Composable
fun GradientText(text: String) {
    Text(
        text = text,
        style = TextStyle(
            brush = Brush.linearGradient(
                listOf(Color.Red, Color.Blue)
            ),
            textAlign = TextAlign.Center
        )
    )
}

3단계: 클릭 가능한 하이퍼링크 텍스트 만들기

import androidx.compose.foundation.clickable
import androidx.compose.material.Text
import androidx.compose.ui.platform.UriHandler
import androidx.compose.runtime.Composable

@Composable
fun HyperlinkText(text: String, url: String) {
    val uriHandler = LocalUriHandler.current
    Text(
        text = text,
        modifier = Modifier.clickable { uriHandler.openUri(url) },
        color = Color.Blue
    )
}

이렇게 다양한 기능을 Text 컴포넌트를 활용해 구현할 수 있어. 실제 앱에서 이런 기술을 활용하면 사용자에게 더욱 풍부한 경험을 제공할 수 있지!

다음 시간 예고

다음 시간에는 Button 컴포넌트의 종류와 스타일링 방법에 대해 알아볼 거야. 오늘 배운 Text 컴포넌트와 함께 사용하면 훨씬 더 멋진 UI를 만들 수 있을 거야.

Photo by Florian Olivo on Unsplash