[Compose Text] Text에 간격 만들기 : letter spacing, line height

Text 간격 만들기

Text의 간격은 두가지가 있다. 하나는 글자간 간격이고, 다른 하나는 줄간 간격이다. Compose Text에서는 이러한 간격들을 설정할 수 있는 프로퍼티들을 제공한다.

• letterSpacing : 글자간 간격을 만드는 옵션

letterSpacing: TextUnit = TextUnit.Unspecified,

• lineHeight : 줄간 간격을 만드는 옵션

lineHeight: TextUnit = TextUnit.Unspecified

둘 모두 sp값에 해당하는 TextUnit을 인자로 받는다. 아래에서 이 둘이 어떻게 동작하는지 살펴보자.

 

 

letterSpacing 이용해 글자간 간격 만들기

Text의 letterSpacing 프로퍼티를 이용하여 글자간 간격을 줄 수 있다.

letterSpacing: TextUnit = TextUnit.Unspecified,

 

letterSpacing의 인자로 넘어가는 값은 TextUnit이며 이는 Int.sp 확장 프로퍼티로 만들어낼 수 있다.

val Int.sp: TextUnit get() = pack(UNIT_TYPE_SP, this.toFloat())

 

아래에서 letterSpacing을 1sp, 2sp, 3sp를 줬을 때 글자간 간격이 어떻게 변화하는지 살펴보자.

@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldLetterSpacing() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text(text = "Kotlin World letterSpacing 1sp", letterSpacing = 1.sp)
        Text(text = "Kotlin World letterSpacing 2sp", letterSpacing = 2.sp)
        Text(text = "Kotlin World letterSpacing 3sp", letterSpacing = 3.sp)
    }
}

그림1. Text letterSpacing

 

lineHeight 이용해 줄간 간격 만들기

lineHeight는 줄의 기준선의 간격을 설정하는 옵션이다.

 

여기서 주의할 점은 lineHeight가 설정하는 것이 줄의 기준선의 간격이라는 것이다.

그림2. lineHeight

따라서 만약 너무 적은 값의 lineHeight를 줄 경우 글자가 겹칠 수 있다. 예를 들어 lineHeight를 6sp를 줘보자.

@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldLineHieght() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text(text = "Kotlin World\nlineHeight 6sp", lineHeight = 6.sp)
    }
}

그림3. lineHeight 6sp

기본 글자 크기가 12sp이므로 윗 줄과 아랫 줄의 글자가 겹쳐서 나오는 것을 확인할 수 있다.

 

그러면 이번에는 12sp보다 크게 넉넉히 20sp를 줘보도록 하자.

@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldLineHieght() {
    Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Text(text = "Kotlin\nWorld\nlineHeight 20sp", lineHeight = 20.sp)
    }
}

그림4. lineHeight 20sp

글자가 겹쳐 나오지 않고 중간에 8sp의 여유공간이 생긴것을 확인할 수 있다.