[Compose] - Design System 구축 - 1. Typography 만들기

 

 

 

 

 

1. FontFamilry 정의

우선 FontFamily 클래스를 정의합니다.

// Type.kt
val pretendard = FontFamily(
    Font(R.font.pretendard_thin, FontWeight.Thin, FontStyle.Normal),
    Font(R.font.pretendard_extralight, FontWeight.ExtraLight, FontStyle.Normal),
    Font(R.font.pretendard_light, FontWeight.Light, FontStyle.Normal),
    Font(R.font.pretendard_regular, FontWeight.Normal, FontStyle.Normal),
    Font(R.font.pretendard_medium, FontWeight.Medium, FontStyle.Normal),
    Font(R.font.pretendard_semibold, FontWeight.SemiBold, FontStyle.Normal),
    Font(R.font.pretendard_bold, FontWeight.Bold, FontStyle.Normal),
    Font(R.font.pretendard_extrabold, FontWeight.ExtraBold, FontStyle.Normal),
    Font(R.font.pretendard_black, FontWeight.Black, FontStyle.Normal),
)

 

 

2. Typography 정의

Typography를 정의 해야하는데, Material에서 제공하는 Typography 클래스는 속성이 사진과 같이 정해져있습니다.

 

디자이너가 작성해준 Typography와 통일하기 위해 Custom Typography 클래스를 생성해줍니다.

아래와 같이 클래스를 생성한 후 속성을 지정해주면 됩니다.

// Type.kt
@Immutable
class RunnectTypography internal constructor(
    // Title
    val h1: TextStyle,
    val h2: TextStyle,
    val h2_2: TextStyle,
    val h3: TextStyle,
    val h4: TextStyle,
    val h5: TextStyle,

    // Button
    val b1: TextStyle,
    val b2: TextStyle,
    val b3: TextStyle,
    val b4: TextStyle,
    val b5: TextStyle,
    val b6: TextStyle,
    val b7: TextStyle,
    val b8: TextStyle,
    val b9: TextStyle,
) {
    constructor(
        defaultFontFamily: FontFamily = pretendard,
        h1: TextStyle = TextStyle(
            fontFamily = defaultFontFamily,
            fontWeight = FontWeight.Bold,
            fontSize = 24.sp
        ),
        /* 생략 */
        
        b1: TextStyle = TextStyle(
            fontFamily = defaultFontFamily,
            fontWeight = FontWeight.Medium,
            fontSize = 16.sp
        ),
        /* 생략 */
    ) : this(
        h1 = h1,
        /* 생략 */
        b1 = b1,
        /* 생략 */
    )
}

 

 

3. Typography 사용

Typography를 선언했으니 이를 코드에서 호출할 수 있도록 해야합니다.

class RunnectTypography {/*...*/ }

internal val LocalRunnectTypography = staticCompositionLocalOf { RunnectTypography() }

 

 

Typography 클래스와 같은 파일에 staticCompositionLocalOf를 통해 정적 값으로 로컬 컴포지션을 생성 해주었습니다.

 

// Theme.kt
@Stable
object RunnectTheme {

    val typography: RunnectTypography
        @Composable
        @ReadOnlyComposable
        get() = LocalRunnectTypography.current
}

 

object 클래스를 생성하여 내부에 typography 속성을 선언해줍니다.

 

이제 아래와 같이 typography를 사용할 수 있습니다.

RunnectTheme.typography.b1

 

 

 

4. Typography 재정의

가끔 정해진 색상과 폰트 스타일에서 약간 벗어나야 할 때도 있습니다.

공식 문서에서도 이런 상황에선 기존 스타일을 기반으로 수정하는 것을 권장하고 있습니다.

 

이 경우 아래와 같이 copy 함수를 사용하여 미리 정의해둔 스타일을 수정할 수 있습니다.

Text(
    text = name,
    style = RunnectTheme.typograpyh.h1.copy(
        fontWeight = FontWeight.ExtraBold
    )
)

 

이런 방법으로 기존에 정의된 값을 변경할 수 있으므로 작은 변경, 편차 등은 걱정하지 않아도 됩니다.