모바일(Iphone, Ipad) 웹 페이지 IOS 5.1 폰트 최적화 하기

Reviews & Design & Swim
About me /Contect/Admin

TISTORY/티스토리 정보
최근 더 뉴 아이패드(The New Ipad) 발표와 함께  IOS 5.1(아이폰 OS, 아이패드 OS) 발표가 있었습니다. 업데이트 내용으로는 잠금 해제 화면에서 카메라 즉시 사용 가능 및 기타 등등 있으며, 한국인으로서 한글을 사용하는 사용자로서, 주목할 만한 업데이트가 있었습니다. 바로 애플산돌고딕네오(AppleSDGothicNeo) 입니다. 기존 IOS 5.0 이하 버전에서는 애플고딕(AppleGothic) 을 사용했었습니다. 이번 발표를 누구보다 기다린 한 사람이었고, 발표 직후는 아니지만, 회사 출근 후 바로 업데이트에 들어갔습니다.

아이폰과 아이패드 IOS 5버전은 아이튠즈(iTunes)를 거치지 않고 업데이트가 가능하니, 너무나도 편하고 간편하게 업데이트하였습니다. 업데이트 후 아이패드와 아이폰으로 현재의 광재닷컴(kwangjae.com)이 애플산돌고딕네오(AppleSdGothicNeo)으로 어떻게 표현되는지 확인하던 중 이상한 현상을 발견했습니다.


iOS 5.1 최적화

Ios 5.1 직후의 모습 애플고딕 적용이 안된다.


애플(Apple)은 IOS 5.1 업데이트를 하면서 애플고딕을 지워 버린 듯합니다. 5.1로 업데이트한 후 애플고딕(AppleGothic)이 적용된 사이트들은 다 위와 같은 현상이 발생했습니다. 그래서 바로 CSS 수정에 들어갔습니다.

IOS 5.1 폰트 최적화

애플산돌고딕네오를 적용하였습니다.

CSS로 애플산돌고딕네오(AppleSDGothicNeo)만 적용한 모습입니다. 애플 폰트가 적용되지 않았을 때 발생하는 현상이 사라졌습니다. 기본적으로 볼드체가 표현이 되었으며, 미세하게나마 폰트들의 가독성이 좋아졌습니다. 여기서 CSS를 조금 아시는 분들은 애플고딕(AppleGothic)과 애플산돌고딕네오(AppleSDGothicNeo)를 동시에 적용하면 되지 않느냐고 말씀하시겠지만 앞서 언급한 것처럼 IOS 5.1 에서 애플산돌고딕(AppleSDgothicNeo)가 추가 된 것이 아니라 애플고딕(AppleGothic)을 교체되었기 때문입니다. 애플산돌고딕네오와 애플고딕을 동시에 적용했을 시에는 적용 전의 모습으로 돌아가더군요. (다른 좋은 정보 있으시다면 댓글을 남겨주세요.)



IOS 5.1로 업데이트 하지 않은 제품에서는 어쩔 수 없이 미 적용상태를 유지해야 할 듯합니다. 
그럼 CSS에 애플산돌고딕네오(AppleSDGothicNeo)를 적용하는 방법을 알아보겠습니다. (페이지 로딩 속도와 사이트 최적화를 위해서 스크립트를 적을 수 있는 스크립트는 사용하지 않았습니다. 양해 부탁합니다.)

티스토리(Tistory)를 기본으로 설명하겠습니다. 티스토리 관리에 들어가셔서 HTML/CSS 편집으로 들어갑니다. 그 후 CSS 에서 Font-Family: 를 찾습니다. 아래 그림과 같이 추가해 주시면 됩니다. 

CSS 수정

Li 에 적용 했지만 Font-Family 가 있는 모든 구역에 적용해 주시면 됩니다.

위와 같이 간단하게 적용해 주시면 됩니다. 거창한 제목을 붙여 놓고 너무나도 간단한 이야기를 한 듯하여 부끄럽네요. 그림과 같이 수정하시면 IOS 5.1을 사용하는 모든 기기에서 애플산돌고딕네오(AppleSDGothicNeo)를 보실 수 있습니다. 

요번 업데이트로 적용된 애플산돌고딕네오에 대한 호불호가 갈리는데 저는 만족하며 사용하고 있습니다. 가독성 또한 높아졌다고 생각합니다. 간혹 폰트들이 투박하게 보일 때가 있다는 것 (예를 들어 연락처 부분이라던가.)을 제외하면 높은 퀄리티의 폰트라고 생각합니다. 배경화면에서 영어와 한글 폰트의 비율이 잘 맞아떨어지는 것만으로도 만족하며 사용하고 있습니다. 여러분도 자신의 블로그 및 사이트에 IOS 5.1로 새로 탄생한 한글 폰트인 애플산돌고딕네오(AppleSDGothicNeo)를 적용해 보시기 바랍니다. 감사합니다.
연관있는 콘텐츠