KMP가 정식으로 릴리즈되고, 한번 사용해보자 싶어서 영문 CV를 KMP(Kotlin/Wasm ComposeWeb)로 만들어봤다.
아직 많이 불안정한만큼, 기본적으로 한글지원이 안된다. 폰트를 적용하려면 ByteArray로 변환해서 내부 typography에 넣어줘야한다. 다른 방법도 많겠지만, 일단 내가 해결한 방법으로 적어보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mingyu Kim</title>
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="application/javascript" src="composeApp.js"></script>
</head>
<body>
</body>
</html>물론 wasmJs에 있는 index.html에 한글 설정 먼저 한다. utf-8은 이미 되어있으니 lang만 ko로 바꿔주면 될 것이다.
먼저 wasmJsMain 패키기의 resouces패키지 밑에 한글이 지원되는 TTF 폰트 파일을 넣는다. 이제 첨부한 폰트 파일을 ByteArray로 바꿔보자. 이 코드는 commonMain에서 작성할건데, 나의 경우 Theme 파일을 따로 두고있어서 거기에 넣어놨다.
var fontIBMPlex by remember { mutableStateOf<FontFamily?>(null) }
LaunchedEffect(Unit) {
val fontData = loadResource("IBMPlexSansKR-Regular.ttf")
fontIBMPlex = FontFamily(
Font(identity = "IBMPlexSansKR-Regular", data = fontData)
)
}`LaunchedEffect`로 이제 초기화될 때 fontIBMPlex가 폰트 파일을 기반으로 한 FontFamily가 됐다. 그걸 MaterialTheme에 덮어 씌워주면 끝난다.
MaterialTheme(
colors = lightColors(
primary = Color(0xFF6200EE),
secondary = Color(0xFF03DAC5),
background = Color(0xFFF6F6F6),
onPrimary = Color.White,
onBackground = Color.Black
),
typography = Typography(
h5 = TextStyle(fontFamily = fontIBMPlex, fontWeight = FontWeight.Bold, fontSize = 24.sp ),
subtitle1 = TextStyle(fontFamily = fontIBMPlex, fontWeight = FontWeight.Bold, fontSize = 18.sp),
subtitle2 = TextStyle(fontFamily = fontIBMPlex, fontWeight = FontWeight.Bold, fontSize = 16.sp),
body2 = TextStyle(fontSize = 16.sp)
),
shapes = Shapes(
medium = RoundedCornerShape(8.dp)
),
content = content
)내가 현재 사용하는 textStyle이 `h5, subtitle1, subtitle2, body2` 만 쓰고 있어서 그것만 달아줬다.
이 과정을 다 거치면 아래처럼 한글이 잘 나오는 걸 볼 수있다.
도움이 됐다면 댓글이나 공감 버튼 한 번씩 누르고 가주세요!
반응형