카카오헤어샵 안드로이드 커스텀 폰트 적용기
KHDS-light, regular, medium, bold
android:fontWeight="400"
카카오헤어샵 안드로이드 앱에 커스텀 폰트를 적용하면서 겪었던 이야기를 간단하게 정리해 보았습니다.
커스텀 폰트 적용의 시작
"랄프의 디자인을 완벽하게 적용하고 싶어요"
- 안드로이드에서 기본 제공 하는 폰트(Roboto) 적용 시 앱 디자인을 완벽하게 적용하는데 어려움이 있습니다.
- 폰마다 제각각인 폰트 때문에 앱 디자인의 일관성이 유지되지 않습니다.
개발 검토
1. 폰트 적용 방법
- 폰트를 앱내 리소스에 포함 시키는 경우 앱 개발 시 포함된 폰트를 사용 할 수 있습니다.
- 공식 개발 가이드 : https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml
2. 실제 헤어샵에 적용해본 코드
- res/font/ 에 실제 사용할 폰트를 추가하고 font.xml 파일을 생성
+ 글쓴이 TIP - "오픈타입 폰트(OTF)를 사용하세요"
- 실제 가이드 문서를 보면 OTF, TTF 2가지 형식의 폰트를 지원하지만 테스트 결과 TTF 형식의 폰트를 적용하는 경우 일부 디바이스에서 폰트가 약간 찌그러져 보이는 현상이 있었습니다.
- 폰트 용량 측면에서도 TTF 보다 OTF가 더 작기 때문에 앱 용량을 줄이는데 도움이 됩니다.
- font.xml 샘플
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<font
app:font="@font/khds_bold"
app:fontStyle="normal"
app:fontWeight="700" />
</font-family>
+ 글쓴이 TIP - "fontWeight 를 꼭 지정해 주세요."
- fontWeight 를 지정 하지 않는 경우 일부 디바이스에서 폰트가 제대로 노출 되지 않습니다.
- fontWeight 는 폰트마다 고유 값이 있기 때문에 해당 폰트에 맞는 값을 꼭 설정 해주세요.
- font.xml 사용 예제
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/font_khds_bold" />
실제 앱에 적용할 폰트 검토
1. 실제 앱에서 사용할 폰트를 검토
- 앱 디자인에 적용된 폰트와 동일하거나 비슷한 폰트를 찾아서 안드로이드에서 실제 적용이 가능한지 검토를 해야 합니다.
- 카카오헤어샵의 경우 "Noto Sans KR", "스포카 한 산스" 총 2개의 폰트를 검토하였습니다.
2. 디자이너 랄프의 검토 의견
후보 1. Noto Sans KR
- 텍스트가 한글인 경우 디자인에 잘 맞게 나온다.
- 영문, 숫자인 경우는 디자인과 어울리지 않는다.
- Noto Sans KR를 적용할 경우 한글과 영문/숫자 폰트를 따로 관리 해야 할 것 같다.
후보 2.스포카 한 산스 (https://spoqa.github.io/spoqa-han-sans/ko-KR/)
- 웹에서 보편적으로 많이 쓰는 폰트라 디자인에 적용하는데 크게 문제가 없다.
- 텍스트가 한글인 경우 디자인에 잘 맞게 나온다.
- 영문, 숫자인 경우는 Noto Sans KR 보다는 괜찮지만 쪼금 아쉬운 부분이 있다.
- 스포카 한 산스를 적용할 경우 한글, 영문/숫자 폰트를 1개로 관리 할 수 있다.
마음에 쏙 드는 폰트가 없는데.. 저희가 커스텀 폰트를 만드는 건 어떨까요?
"다른 폰트를 참고하여 카카오헤어샵에서 사용할만한 조합형 커스텀 폰트(?) 를 만들어 봅시다"
- 커스텀 폰트를 만들기 위해 베이스가 될만한 폰트를 검토 해야 합니다.
- 스포카 한 산스 네오 : https://spoqa.github.io/spoqa-han-sans/
- Inter : https://github.com/rsms/inter/
"폰트 라이센스 검토는 필수!"
- SIL OPEN FONT LICENSE (OFL-1.1) (https://opensource.org/licenses/OFL-1.1)
"폰트를 조합(?), 편집(?) 은 어떻게 하는거야?"
- 폰트 편집 툴을 이용해서 폰트 조합 및 디자인 / 자간 등을 수정 합니다.
- fontforge : https://fontforge.org/en-US/
+ 글쓴이 TIP - 앱에 적용할 폰트라면 오리지널 보단 서브셋 폰트가 좋습니다.
- 지원하는 글자수에 차이가 있지만 서브셋 폰트만으로도 대부분의 한글 표현이 가능 합니다.
- 오리지널과 서브셋 폰트의 용량은 차이가 크기 때문에 꼭 서브셋 폰트를 사용하세요.
결과물 - KHDS
참고
1. 스포카 한 산스 네오 : https://spoqa.github.io/spoqa-han-sans/
2. Inter : https://github.com/rsms/inter/
3. fontforge : https://fontforge.org/en-US/
4. SIL OPEN FONT LICENSE (OFL-1.1) : https://opensource.org/licenses/OFL-1.1
5. 폰트의 경량화 : https://www.44bits.io/ko/post/optimization_webfont_with_pyftsubnet
6. FontForge로 한글, 영문 폰트 합치기 (Merge Fonts) : http://thepulsar.in/nothing/fontforge-%ED%95%9C%EA%B8%80-%EC%98%81%EB%AC%B8-%ED%8F%B0%ED%8A%B8-%ED%95%A9%EC%B9%98%EA%B8%B0merge/
