[Android/Compose] 1줄 lineHeight

흔히 안드로이드 컴포즈에서 디자인 시스템을 구성할 때, 디자이너가 준 typography 가이드 중 Line Height 는
컴포즈 TextStyle 의 lineHeight 속성으로 구현하고 있습니다.
그런데 두 줄 이상인 경우에만 정상적으로 해당 속성이 적용되고, 한 줄인 텍스트에 대해서는

간격이 좁다고 느끼신적이 있으신가요?

 

만약 그렇다면 저와 같은 문제에 직면하셨다고 볼 수 있습니다 😮

 

분명 lineHeight 속성을 부여했음에도 도대체 왜 1줄에서는 적용되지 않는걸까요??
이는 아래와 같이 설정된 LineHeightStyle 의 기본값에 의해 발생한 것입니다.

class LineHeightStyle(val alignment: Alignment, val trim: Trim, val mode: Mode) {

    constructor(alignment: Alignment, trim: Trim) : this(alignment, trim, Mode.Fixed)

    companion object {
        /**
         * The default configuration for [LineHeightStyle]:
         * - alignment = [Alignment.Proportional]
         * - trim = [Trim.Both]
         * - mode = [Mode.Fixed]
         */
        val Default =
            LineHeightStyle(alignment = Alignment.Proportional, trim = Trim.Both, mode = Mode.Fixed)
    }

    ...
}

trim 파라미터에 Trim.Both 값이 들어가게 되면서 1줄 일때는 기본적으로 상하단의 여백을 trim 처리하게 됩니다.
만약 아래와 같이 해당 속성을 Trim.None 으로 바꿔준다면,

간단하게 저희가 의도한 디자인을 얻을 수 있게 됩니다.

LineHeightStyle 적용 전 후

추가로 만약 디자이너가 아래와 같이 Line Height 값을 % 단위로 준 경우라면, 위 코드에서도 볼 수 있다시피

.em 단위를 이용하여 쉽게 구현할 수 있습니다.