이 페이지는 Cloud Translation API를 통해 번역되었습니다.

단락에 스타일 지정

이 페이지에서는 단락의 텍스트 스타일을 지정하는 방법을 설명합니다. 단락 수준의 스타일 지정을 설정하려면 textAlign 및 lineHeight와 같은 매개변수를 구성하거나 자체 ParagraphStyle를 정의하면 됩니다.

텍스트 정렬 설정

textAlign 매개변수를 사용하면 Text 컴포저블 노출 영역 내에서 텍스트의 가로 정렬을 설정할 수 있습니다.

기본적으로 Text는 콘텐츠 값에 따라 자연 텍스트 정렬을 선택합니다.

라틴어, 키릴어, 한글 등 왼쪽에서 오른쪽으로 쓰는 문자를 위한 Text 컨테이너의 왼쪽 가장자리
아랍어, 히브리어 등 오른쪽에서 왼쪽으로 쓰는 문자를 위한 Text 컨테이너의 오른쪽 가장자리

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}TextSnippets.kt

Text 컴포저블의 텍스트 정렬을 수동으로 설정하려면 TextAlign.Left 및 TextAlign.Right 대신 TextAlign.Start 및 TextAlign.End를 사용하는 것이 좋습니다. 기본 언어 텍스트 방향에 따라 Text 컴포저블의 오른쪽 가장자리로 확인되기 때문입니다. 예를 들어 TextAlign.End는 프랑스어 텍스트의 경우 오른쪽, 아랍어 텍스트의 경우 왼쪽으로 정렬되지만 TextAlign.Right는 사용되는 알파벳과 관계없이 오른쪽으로 정렬됩니다.

단락에 여러 스타일 추가

단락에 여러 스타일을 추가하려면 임의의 주석 스타일로 주석을 추가할 수 있는 AnnotatedString에서 ParagraphStyle를 사용하면 됩니다. 텍스트의 한 부분이 ParagraphStyle로 표시되면 이 부분은 시작과 끝에 줄 바꿈이 있는 것처럼 나머지 텍스트와 분리됩니다.

텍스트에 여러 스타일을 추가하는 방법에 관한 자세한 내용은 텍스트에 여러 스타일 추가를 참고하세요.

AnnotatedString에는 더 쉽게 만들 수 있는 유형 안전 빌더(buildAnnotatedString)가 있습니다. 다음 스니펫에서는 buildAnnotatedString를 사용하여 ParagraphStyle를 설정합니다.

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold, color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}TextSnippets.kt

파란색, 빨간색으로 굵게, 일반 검은색, 세 가지 스타일로 표시된 세 단락

행 간격 및 패딩 조정

includeFontPadding은 텍스트의 상단 첫 번째 행과 하단 마지막 행에 있는 글꼴 측정항목을 기반으로 패딩을 추가하는 기존 속성입니다. Compose BOM 버전 2024.01.01부터 includeFontPadding가 기본적으로 false로 설정되어 기본 텍스트 레이아웃이 일반적인 디자인 도구와 더 일치하게 됩니다.

이제 lineHeight 구성 기능은 새로운 기능이 아니며 이미 Android Q부터 사용할 수 있습니다. 각 텍스트 줄에 행 간격을 배포하는 lineHeight 매개변수를 사용하여 Text의 lineHeight를 구성할 수 있습니다. 그런 다음 새 LineHeightStyle API를 사용하여 이 텍스트가 스페이스 내에서 정렬되는 방식을 세부적으로 구성하고 공백을 삭제할 수 있습니다.

정밀도를 높이려면 'sp'(조정된 픽셀) 대신 텍스트 단위 'em'(상대 글꼴 크기)을 사용하여 lineHeight를 조정할 수 있습니다. 적절한 텍스트 단위 선택에 관한 자세한 내용은 TextUnit를 참고하세요.

바로 위/아래의 줄을 바탕으로 lineHeight를 일종의 측정값으로 표시한 이미지 — **그림 1.** 정렬 및 자르기를 사용하여 설정된 `lineHeight` 내에서 텍스트를 조정하고 필요한 경우 추가 공백을 자릅니다.

Text(
    text = text,
    style = LocalTextStyle.current.merge(
        TextStyle(
            lineHeight = 2.5.em,
            platformStyle = PlatformTextStyle(
                includeFontPadding = false
            ),
            lineHeightStyle = LineHeightStyle(
                alignment = LineHeightStyle.Alignment.Center,
                trim = LineHeightStyle.Trim.None
            )
        )
    )
)TextSnippets.kt

lineHeight를 조정하는 것 외에도 이제 LineHeightStyle 실험용 API의 구성을 사용하여 텍스트의 중심을 설정하고 스타일을 지정할 수 있습니다. LineHeightStyle.Alignment 및 LineHeightStyle.Trim (includeFontPadding를 false로 설정해야 자르기를 사용할 수 있음) 정렬 및 자르기는 텍스트 행 사이의 측정된 공간을 사용하여 모든 줄(한 행의 텍스트와 텍스트 블록의 상단 행 포함)에 공간을 보다 적절하게 배포합니다.

LineHeightStyle.Alignment는 행 간격에 의해 제공된 공간의 행을 정렬하는 방법을 정의합니다. 각 행 내에서 텍스트는 상단, 하단, 중앙 또는 비례적으로 정렬할 수 있습니다. 그런 다음 LineHeightStyle.Trim을 사용하면 텍스트의 첫 번째 행 상단과 마지막 행 하단에 추가 공간(lineHeight 및 정렬 조정에서 생성됨)을 남겨두거나 삭제할 수 있습니다. 다음 샘플에서는 정렬이 중앙(LineHeightStyle.Alignment.Center)으로 되어 있을 때 여러 행의 텍스트가 다양한 LineHeightStyle.Trim 구성에서 어떻게 표시되는지를 보여줍니다.


`LineHeightStyle.Trim.None`	`LineHeightStyle.Trim.Both`

`LineHeightStyle.Trim.FirstLineTop`	`LineHeightStyle.Trim.LastLineBottom`

이 변경사항의 컨텍스트, includeFontPadding이 View 시스템에서 작동하는 방식, Compose에 적용된 변경사항, 새로운 LineHeightStyle API에 관한 자세한 내용은 Compose 텍스트에서 글꼴 패딩 수정 블로그 게시물을 참고하세요.

줄바꿈 삽입

LineBreak API는 텍스트를 여러 줄로 분할하는 기준을 정의합니다. Text 컴포저블의 TextStyle 블록에서 원하는 줄바꿈 유형을 지정할 수 있습니다. 사전 설정된 줄바꿈 유형은 다음과 같습니다.

Simple - 빠르고 기본적인 줄바꿈입니다. 텍스트 입력란에 권장됩니다.
Heading: 느슨한 줄바꿈 규칙을 사용한 줄바꿈 제목과 같은 짧은 텍스트에 권장됩니다.
Paragraph: 가독성을 높이기 위해 속도가 느리고 품질이 우수한 줄 바꿈을 사용합니다. 단락과 같이 텍스트가 많은 경우에 권장됩니다.

다음 스니펫에서는 Simple 및 Paragraph를 모두 사용하여 긴 텍스트 블록에서 줄바꿈 동작을 지정합니다.

TextSample(
    samples = mapOf(
        "Simple" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Simple
                )
            )
        },
        "Paragraph" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph
                )
            )
        }
    )
)TextSnippets.kt

간단한 줄바꿈 전략을 보여주는 텍스트 블록과 단락에 최적화된 줄바꿈 전략을 보여주는 텍스트 블록 간단한 줄바꿈 전략이 적용된 텍스트 블록은 줄 길이가 더 다양합니다. — **그림 1.** 단순한 줄바꿈 전략이 있는 텍스트 블록 (상단)과 단락에 최적화된 줄바꿈이 있는 텍스트 블록 (하단)이 있습니다.

위 출력에서 Paragraph 줄바꿈 동작은 Simple 줄바꿈보다 시각적으로 균형 잡힌 결과를 생성합니다.

줄바꿈 맞춤설정

Strategy 매개변수를 사용하여 자체 LineBreak 구성을 구성할 수도 있습니다. Strategy은 다음 중 하나일 수 있습니다.

Balanced - 텍스트의 줄 길이의 균형을 맞추려고 시도하며, 사용 설정된 경우 자동 하이픈 연결도 적용합니다. 시계와 같은 작은 화면에 표시되는 텍스트의 양을 최대화하는 데 권장됩니다.
HighQuality: 줄바꿈(사용 설정된 경우)을 포함하여 텍스트의 가독성을 높이도록 단락을 최적화합니다. (Balanced 또는 Simple가 아닌 모든 항목의 기본값이어야 합니다.)
Simple: 빠르고 기본적인 전략입니다. 사용 설정하면 줄바꿈은 한 줄에 혼자 들어가지 않는 단어에 대해서만 실행됩니다. 타이핑하는 동안 위치가 변경되지 않도록 텍스트를 수정할 때 유용합니다.

다음 스니펫은 기본 설정이 적용된 단락과 Balanced 줄바꿈 전략을 사용하는 작은 화면에 최적화된 단락의 차이를 보여줍니다.

TextSample(
    samples = mapOf(
        "Balanced" to {
            val smallScreenAdaptedParagraph =
                LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = smallScreenAdaptedParagraph
                )
            )
        },
        "Default" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default
            )
        }
    )
)TextSnippets.kt

균형 잡힌 줄바꿈 전략이 적용된 단락과 전략 없이 서식이 지정된 단락 균형 잡힌 줄바꿈 전략이 적용된 단락은 기본값보다 줄 길이가 더 일관됩니다. — **그림 2.** `Balanced` 줄바꿈 전략으로 형식이 지정된 단락(위)과 줄바꿈 전략 없이 형식이 지정된 단락

CJK 고려사항

특히 CJK 언어를 위해 설계된 Strictness 및 WordBreak API를 사용하여 LineBreak를 맞춤설정할 수도 있습니다. CJK가 아닌 언어에서는 이러한 API의 효과가 항상 나타나는 것은 아닙니다. 전반적으로 줄바꿈 규칙은 언어를 기반으로 정의됩니다.

Strictness은 다음 속성을 사용하여 줄바꿈의 엄격한 정도를 설명합니다.

Default: 언어의 기본 중단 규칙입니다. Normal 또는 Strict에 상응할 수 있습니다.
Loose - 제한이 가장 적은 규칙. 짧은 줄에 적합합니다.
Normal - 줄바꿈의 가장 일반적인 규칙입니다.
Strict: 가장 엄격한 줄바꿈 규칙입니다.

WordBreak는 다음 속성을 사용하여 단어 내에 줄바꿈을 삽입하는 방법을 정의합니다.

Default - 언어의 기본 브레이킹 규칙입니다.
Phrase: 구문 기반 줄바꿈

다음 스니펫은 일본어 텍스트에 Strict 엄격도 및 Phrase 단어 나누기 설정을 사용합니다.

val customTitleLineBreak = LineBreak(
    strategy = LineBreak.Strategy.HighQuality,
    strictness = LineBreak.Strictness.Strict,
    wordBreak = LineBreak.WordBreak.Phrase
)
Text(
    text = "あなたに寄り添う最先端のテクノロジー。",
    modifier = Modifier.width(250.dp),
    fontSize = 14.sp,
    style = TextStyle.Default.copy(
        lineBreak = customTitleLineBreak
    )
)TextSnippets.kt

엄격도 및 단어 구분 설정이 적용된 일본어 텍스트와 기본 텍스트 비교 — **그림 3.** `Strictness` 및 `WordBreak` 설정으로 형식이 지정된 텍스트 (상단)와 `LineBreak.Heading`로만 형식이 지정된 텍스트 (하단)

줄을 기준으로 텍스트를 하이픈으로 연결

Hyphens API를 사용하면 앱에 구두점 지원을 추가할 수 있습니다. 구두점은 단어가 텍스트 줄에 걸쳐 나뉘었음을 나타내기 위해 대시와 같은 구두점을 삽입하는 것을 말합니다. 이 기능을 사용 설정하면 적절한 구두점 위치에서 단어의 음절 사이에 구두점이 추가됩니다.

기본적으로 구두점은 사용 설정되어 있지 않습니다. 줄바꿈을 사용 설정하려면 TextStyle 블록에 Hyphens.Auto를 매개변수로 추가합니다.

TextSample(
    samples = mapOf(
        "Hyphens - None" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.None
                )
            )
        },
        "Hyphens - Auto" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.Auto
                )
            )
        }
    )
)TextSnippets.kt

구두점을 사용 설정하지 않은 단락과 구두점을 사용 설정한 단락
하이픈 연결을 사용하면 단어가 하이픈으로 연결되고 두 줄로 나뉩니다. — **그림 4.** 구두점을 사용 설정하지 않은 문단 (위)과 구두점을 사용 설정한 문단 (아래)

사용 설정하면 다음과 같은 경우에만 단어 나누기가 발생합니다.

단어가 한 줄에 맞지 않습니다. Simple 줄바꿈 전략을 사용하는 경우 줄이 단일 단어보다 짧은 경우에만 단어의 구두점이 표시됩니다.
적절한 낱말 띄어쓰기는 시스템에 있는 사전을 사용하여 결정되므로 기기에 적절한 언어가 설정됩니다.