[Compose] Text Style에 em 단위를 사용해보기.

Compose를 사용해 UI를 그리다 보면, 다양한 Style을 가지고 있는 Text 뷰를 그리게 된다.

이번에 업무를 진행하다 Text에 대한 디테일한 Style을 조정하다가 지금까지 사용해 왔던 글자의 크기 단위인 sp를 사용하지 않고, 기존에서 몇 % 와 같이 배율을 통해 Text의 style을 조정해야 하는 케이스가 발생했다.

 

비율을 통해 Text style을 조정하려다보니 Compose에서는 sp뿐 아니라 em의 단위가 있다는 것을 발견하여 한번 사용해 보았다.

---

우선,

em의 단위란 무엇인가부터 확인해 보자.

 

저번에도 확인했었던 TextUnit에 대한 설명을 보면 다음과 같이 나와있다.

 

This unit can hold either scaled pixels (SP), relative font size (EM) and special unit Unspecified for indicating inheriting from other style or using the default value.

 

em에 대한 설명으로 상대 글꼴 크기.라고 나와있다.

 

이것만 봐서는 해당 수치에 대해서 명확하게 알 수 없었다.

 

그래서 안드로이드 개발자 페이지에서 찾아본 결과, 다음과 같은 결과를 알 수 있었다.

 

 

뭐 어쩌라는 것인지 전혀 모르겠다.

 

그래서 다시 검색을 해보았다.

StackOverflow에서 찾은 글에서는 다음과 같이 나와있다.

 

 

1.em의 단위는 기본으로 설정된 값의 1 배율의 크기라는 것이다.

 

일단 이 정보만 가지고 예제를 만들어 보면서 확인해 보았다.

 

Text(
    modifier = Modifier
        .wrapContentSize(),
    text = text1,
    fontSize = fontSize,
)

 

이와 같이 fontSize를 사용할 수 있게 선언한 후, 1.em부터 테스트 겸 확인을 해 보았다.

 

기본으로 설정된 값이 뭔지는 모르겠으나, 1 배율인 1.em으로 설정했을 때 텍스트의 크기가 상당히 작게 나왔다.

그에 따라서 기본으로 설정된 값을 찾아보려고 하였으나 정확한 sp 값이 나오지 않았고, 해당 Text 영역의 크기를 구해 보았더니

숫자, 영어, 한글의 순으로 7 x 11 , 7 x 11, 11 x 18의 크기가 나왔다.

 

Default로 텍스트의 크기를 설정하지 않은 케이스에서는 27 x 66으로 위에 설명한 "기본 값"보다 훨씬 큰 값이 나왔는데,

솔직히 em을 통해 사용하는 기본 텍스트의 크기가 어떤 기준으로 사용되는지는 확인하지 못하였다.

 

크기를 찾아보기 위해서 위와 같은 이상한 짓을 하긴 했지만,

사실 필자가 em을 사용한 부분은 Font Size를 위해서 사용한 것이 아니었다.

 

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

 

Text를 확인해 보면 다음과 같은 변수들을 받아서 UI를 그리고 있음을 알 수 있다.

여기서 TextUnit.Unspecified가 default로 선언되어 있는 케이스를 보면, FontSize와 letterSpacing, lineHeight 인 것을 볼 수 있다.

즉, em의 단위는 size뿐 아닌 자간과 행간에서도 사용이 가능하다는 뜻이다.

 

그렇다면, 해당 값을 사용해서 확인해 보도록 하자.

 

 

우선, FontSize를 20.sp로 고정시켜 둔 후에 

1. 자간 행간을 조정하지 않은 기본 값
2. 자간만 1.em으로 설정한 값
3. 행간만 1.em으로 설정한 값
4. 자간, 행간을 모두 1.em으로 설정한 값

의 예제이다.

 

예제로 보면 기본 값과, 자간 행간을 1 배율로 설정한 값이 확연하게 다른 것을 볼 수 있는데,

1.em이면 기본 값 아닌가? 그런데 왜 이상하지? 싶을 수 있으나  FontSize가 Default로 20.sp가 아니기 때문에 다르게 보이는 것이다.

(default로 설정되는 fontSize는 여러모로 테스트해서 확인해 보니 14.sp였다)

 

아무튼, 

자간과 행간을 조절할 때 em의 단위가 동작하는 것은 확인이 가능했으니 실제로 사용하는 케이스로 확인을 해보자.

 

기본적으로 실무에서 fontStyle을 지정할 때는 기본적으로

 

fontFamily = fontType, fontWeight = fontWeight, fontSize = fontSize.sp

 

이 3가지 케이스를 사용하곤 한다.

 

따라서, 실무라면 해당 값을 넣어주고 그다음에 자간 행간 값을 넣어주어야 하겠지만 지금 샘플에서는 폰트 스타일이 존재하지 않으니 위의 3가지 케이스는 기본 값으로 사용하도록 하였다.

 

 

간단하게 한글 2줄로 된 실 사용 예시이다.

FontSize는 default로 설정된 값. 14.sp가 적용이 되었고, 자간과 행간만 일부 차이가 있을 뿐이다.

 

val exampleText = "이것은 실 사용 예시입니다. 띄어쓰기와 줄바꿈을 수행하는 텍스트는 이렇게 나오게 됩니다."

Text(
    modifier = Modifier
        .wrapContentSize(),
    text = exampleText,
)

Spacer(modifier = Modifier.height(10.dp))

Text(
    modifier = Modifier
        .wrapContentSize(),
    text = exampleText,
    letterSpacing = -(0.02).em,
    lineHeight = 1.5.em,
)

 

사용된 코드는 다음과 같다.

자간에는 -(0.02).em의 값을 주었고, 행간에는 1.5.em의 값을 주었다.

즉,

자간은 기존 자간에서 2%만큼 줄이기 위해  -(0.02).em으로 설정하여 -2%의 자간을 주었고,

행간은 기존 행간에서 50%만큼 증가시키기 위해 1.5.em으로 설정하여 150%의 행간을 주게 된 것이다.

 

기본 textStyle을 사용한 후 자간과 행간만 변경해서 큰 차이가 없어 보이겠지만, 실무에서 사용할 때 이와 같이 em을 사용해 배율을 조정하게 되면 생각보다 큰 차이를 느낄 수 있을 것이다.

---

이번 글을 작성하면서 em의 단위가 정확하게 어떠한 값을 갖고 있는지 확인하고자 했는데, 생각보다 해당 값에 대한 정보가 제대로 나오는 곳이 없었다.

단순히 배율이다.라는 정보만 있었기 때문에 어떤 값을 기준으로 추가하는가? 는 알 수 없었지만, 실무로 사용할 때는 다행히도 기본 값에 대하여 잘 알지 못해도 괜찮은 것 같았다.

 

실제 크기가 필요한 경우 sp를 통해 실제 수치를 작성해 주었고, 명확하게 수치를 알지 못하는 경우 em을 사용해 몇 %만 변경해 줘.라는 요구 사항을 들어줄 수 있는 것이다.

 

뭔가 sp와 em에 대해서 보다 명확하게 확인해 보고 공부하고 글을 작성하려고 하였지만, em에 대한 정보가 많이 부족해 대충 이런 느낌이고 이렇게 쓰면 돼~라는 느낌으로 글을 작성하게 돼서 아쉬운 느낌이 든다.

 

추후에 해당 값에 대해서 더 명확하게 알게 되고 이해하게 된다면, 해당 글을 수정하도록 하겠다.

 

해당 코드 전체는 ComposeSample Project에 코드를 올려두었으니 확인하길 바란다.

https://github.com/HeeGyeong/ComposeSample

GitHub - HeeGyeong/ComposeSample