iOS에 AppleSDGothicNeo-Thin 폰트를 적용하고, 안드로이드에도 역시 얇은 폰트를 적용해 달라는 요청을 받았습니다. 해외 사이트에 나와 있는 스펙 문서를 보고 진행을 했지만 특히 안드로이드에서 한글은 스펙과 전혀 다른 길을 가고 있다는 것을 깨달았습니다. 그리고 결국 전체적인 폰트와 크기를 수정할 수 밖에 없었답니다. AppleSDGothicNeo-XXX 와 Helvetica Neue-XXX 로  iOS에서 폰트 굵기를 조절했다면, 안드로이드에서는 어떻게 조절할 수 있을까요? ‘-thin’ 폰트에 대한 버그는 없을까요?
☞ 모바일 폰트 시뮬레이션

iOS

iosfonts.com 에도 나와 있듯이, iOS7 부터는 AppleSDGothicNeo-Thin 폰트를 사용할 수 있습니다. 하지만 font-family : AppleSDGothicNeo-Thin; 인 상태에서 가로모드로 돌려 보면(제일 오른쪽 이미지) 한글에서 ‘스’의 ‘ㅡ’가 살짝 안보입니다. 이 버그는 iOS7에서만 재현됩니다.

-regular	-light	-thin	-thin 가로모드

▲ ios7 iphone5S font-size : 24px;

– 가로모드 TEST

가로모드인 상태에서 더 많은 텍스트를 테스트하고, 폰트 크기를 조절한 결과입니다.

• 깨지는 부분 : ‘ㅅ’ 이 있는 글자에서 빈도가 높긴 하지만, 불규칙적으로 재현됩니다.
• 18px 이하 : 아예 사라집니다.
• 51px 이상 : 사라지는 부분 없습니다.
• 영어와 숫자는 어떤 크기에서든 잘 나옵니다.

18px
24px
51px

– 해결방법

iOS 브라우저 가로모드에서 텍스트가 더 굵게 보이는 현상에 대해 알고 계실텐데요, iOS 자체의 렌더링 이슈입니다. 그 이슈 같은 맥락으로, 아래 css를 추가하면 깨지는 버그는 해결 할 수 있지만 성능 저하가 일어날 수 있기 때문에 사용하지 않는 게 좋습니다.
1. 텍스트를 둘러싼 해당 레이아웃 요소에 backface-visibility : hidden; 을 추가하면 되고 position:relative | absolute | fixed; 를 함께 사용하면 됩니다. (요소를 3D 형태로 회전시킬 때 뒷면을 안보이게 지정한 부분입니다.)

/* CSS code */
.ui{position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden} /* body와 같은 전체 요소에 적용하면 심각한 성능 저하 문제가 있음. */

2. 텍스트를 둘러싼 해당 레이아웃 요소에 “transform:translateZ(0)” 추가하면 되고 position:relative | absolute | fixed 함께 사용하면 됩니다. (요소를 3D 로 변형을 할 수 있게 하는 속성으로 속성값 translateZ(0)은 z 축의 위치값을 0으로 지정한 부분입니다. )

/* CSS code */
.ui{position:relative;transform:translateZ(0);-webkit-transform:translateZ(0)} /* body와 같은 전체 요소에 적용하면 심각한 성능 저하 문제가 있음. */

3. 가장 좋은 방법은 iOS 기기의 성능을 저하시키는 backface-visibility와 transform을 사용하지 않는 것입니다.

• iOS에서 가로모드 일때 텍스트가 더 굵게 보이게 랜더링 하는것은 모든 iOS 디스플레이의 특성입니다.
• backface-visibility와 transform을 사용하면 iOS 기기의 CPU와 GPU 자원을 사용하여 심각한 성능저하 문제가 발생할 수 있습니다.(텍스트가 많아질 수록 성능이 저하되며 배터리 소모도 많아짐).
• backface-visibility와 transform은 본래의도에 맞게 animation 요소에 사용하는것이 좋습니다.

Android

안드로이드에 얇은 폰트를 적용하길 원하는 디자이너는 “Droid로 해주세요”, 혹은 “Roboto로 해주세요”, 아니면 아예 “얇은 폰트로 나오게 해주세요.” 라고 각각 다르게 요청하곤 합니다. 안드로이드의 기본 시스템 폰트가 버전 4.0(아이스크림샌드위치)을 기준으로 이전에는 Droid, 이후에는 Roboto 이기 때문입니다. Roboto 를 사용하기 위해 검색을 해보면, 구글에서 무료로 제공하는 웹폰트 중 하나인 Roboto를 링크시켜 사용하는 방법이 가장 많이 나오지만…
결론부터 말하자면, 이미 기본 시스템 폰트가 roboto regular 이기 때문에 따로 링크를 시키지 않아도 font-family : sans-serif;  를 사용하면 Roboto 로 렌더링 됩니다.

font-family:sans-serif            // roboto regular
font-family:sans-serif-light      // roboto light
font-family:sans-serif-condensed  // roboto condensed
font-family:sans-serif-thin       // roboto thin (android 4.2)
font-family:sans-serif-medium     // roboto medium (android 5.0)</pre>

▲ font-family : sans-serif-light;  로 갤S3_4.3에서 렌더링 된 것과 http://www.fontsquirrel.com/fonts/roboto 페이지에서 설명하는 roboto light 폰트 이미지를 겹쳐보니, 특수문자인 @과 $ 를 제외하고 일치합니다.

– 한글

안드로이드 4.2 이상부터 sans-serif-thin 폰트가 적용되는 것이 스펙이지만, 아래 테이블을 보면 알 수 있듯이 한글에서는 버전뿐만 아니라 디바이스 별로 불규칙합니다.

	sans-serif	sans-serif-light	sans-serif-thin
옵티머스 뷰 v2.3.6		sans-serif와 동일	sans-serif와 동일
갤노트1 v4.0.4		sans-serif와 동일	sans-serif와 동일
갤노트2 v4.1.2			sans-serif와 동일
갤S3 v4.3
넥서스 v4.3
옵티머스 G2 v4.4.2
갤S5 v4.5

• 옵티머스 뷰_v2.3.6 : Droid 폰트
• 갤S3_v4.3 : thin 에서 한글이 light보다 두꺼움
• 옵티머스 G2 v_4.4.2 : light와 thin 모두 한글은 적용 안됨

마무리

font-family : AppleSDGothicNeo-Thin,sans-serif-thin;  로 선언하여 iOS와 안드로이드에서 얇은 폰트를 적용하면 될 것이라고 생각했습니다. 하지만 아이폰에서는 한글이 깨져서 렌더링 되고(51px보다 작다면), 안드로이드에서는 한글과 숫자/영어의 두께 차이가 너무 커졌습니다. 결국, iOS와 안드로이드 모두 ‘한글’에서는 ‘-thin’ 폰트를 사용할 수 없다고 보고, iOS에서 ‘-thin’ 폰트로 숫자나 영어에 사용했더라도 안드로이드에서는 ‘-light’ 를 사용했습니다.
또한 안드로이드 일부 디바이스에서는 sans-serif-light 폰트를 쓰더라도 한글에 적용이 안되기 때문에, 한글과 영어/숫자가 함께 쓰이는 곳에서는 어글리 해 보일 수 있다는 점을 미리 알리고 작업에 들어가면 좋을 것 같습니다.

• iOS : AppleSDGothicNeo-Light 를 사용하고, 숫자나 영어에만 AppleSDGothicNeo-Thin 혹은 가이드에 따라 HelveticaNeue-Thin 을 사용
• 안드로이드 : sans-serif-light 만 사용

// scss
$font-light : HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif-light;
$font-thin : HelveticaNeue-Thin,AppleSDGothicNeo-Thin,sans-serif-light; // 한글적용X
$font-regular : Helvetica,AppleSDGothicNeo-Regular;
// css
body{font-family:$font-light}