네이버의 나눔체 웹폰트와 미리보기 툴

웹폰트를 아시나요?
웹 서비스 제작에 관여되신 분들이라면 적어도 한번은 들어봤을 만한 웹폰트
.

특정 글꼴을 별도로 설치하지 않아도, 보고 쓸 수 있도록 해주는 것인데요. 아직은 IE에서만 동작하고 있습니다. 하지만 다른 브라우저도 차츰 적용하고 있으니, 보편화 될 날도 기대해 봅니다

webFont_support_browser_tab.png

네이버의 경우 자체적으로 만든 네이버 나눔체라는 폰트가 있고,
이것을 IE용 웹폰트로 변환하여, 네이버캐스트미투데이 서비스에 적용 중이기 때문에,
IE
로 보시면 별도의 글꼴 설치 없이 나눔체로 보이는 것을 확인하실 수 있습니다.


font_comparison.png


개인적으로는 웹페이지가 아닌 인쇄물 같은 잡지를 보는 느낌이 나서, 나눔체에 대한 만족도가 큰데요

반면에, 제작자 입장에서 나눔웹폰트를 적용 하는 것은 쉽지 않았습니다
웹폰트를 실 서비스에 적용해본 전례가 없어 기술적 시행착오가 많았고
, 무엇보다 글꼴의 상이함에서 오는 크로스브라우징 문제에 가장 어려움이 따랐습니다.

IE에서만 나눔체가 적용되도록 했기 때문에, 타 브라우저에서는 기본글꼴이 나오게 되는데, 이 경우 글꼴의 서로 다른 자간, 행간 값의 영향으로 같은 페이지임에도, 브라우저에 따라 레이아웃이 변하게 되는 현상이 많았습니다.

이를 최소화 하기 위해서, 하나 하나 고쳐가며, 확인 작업을 일일이 하였는데, 공수가 너무 많이 들었고, 결국 작업 속도는 떨어지게 됩니다.
게다가 디자인 퀄리티를 위해 웹디자이너의 감(?)이 중요했는데
, 웹디자이너가 손수 HTML을 수정하며, 확인하기에는 무리가 있었구요
그래서 작업리소스를 줄일수 있고, 웹디자이너가 직접 조절해가며 확인이 가능한
시뮬레이션툴을 활용 중입니다.

font_simulation.png


디자인 산출물인 PSD의 경우 직접 웹페이지로 변환하여 보면 또 그 느낌과 미세한 폰트 차이가 있는데, 본 툴을 활용하면 폰트의 사이즈, 행간, 자간, , 캐릭터셋을 테스트 할 수 있고, 서로 다른 폰트를 같이 동시에 비교해 볼 수도 있습니다.

시뮬레이션이 가능한 폰트 범위는 아래와 같습니다.

  • 돋움
  • 굴림
  • 바탕
  • 맑은 고딕
  • 나눔고딕 설치형
  • 나눔고딕 웹폰트
  •  arial
  • verdana
  • tahoma
  • simsun

HTML이 어려운 웹디자이너 분들과, 일일이 손수 만들어 비교해야 하는 마크업 개발자 분들은 한번쯤 활용해보셔도 좋을것 같습니다.
또, 나눔체 글꼴의 경우 개발자분들을 위한 활용방법도 있으니, 참고하시기 바랍니다 :)

엮인글 1

엮인글 주소: http://html.nhndesign.com/index.php?document_srl=4773&key=07d&act=trackback&vid=blog

4397's me2DAY

기타도리의 생각

네이버 나눔체폰트 시뮬레이션 툴

댓글 10

클로버

*.140.88.231

현재 네이버에서 블로그를 운영중인 닉네임 클로버입니다.
저 역시 블로그를 운영하며, 나눔체를 사용하기를 원했는데요. 최근 나눔고딕과, 나눔명조체를 사용할 수 있어서 좋았습니다.
하지만, 현재 적용된 나눔체들은 웹에서 보기에는 뭔가...깔끔하지 못한 느낌이 들었습니다. (물론 설치형으로 디자인툴에서 사용시에는 참으로 예쁜 느낌의 서체입니다.)
그래서 현재 적용되어 있는 나눔고딕 web체를 발견했는데요, 이 서체는 블로그에서는 아직 적용이 안되더라구요. 이 부분은 언제쯤 개선이 가능할까요?

시니시즘

*.103.83.39

이 글에서 분류하고 있는 나눔고딕체와 나눔고딕Web체는 서로 다른 서체가 아닙니다. 전자의 경우는 PC에 설치되어 있는 나눔고딕 폰트를 렌더링하는 것이고, 나눔고딕Web체는 웹폰트를 말하는 것 같습니다.

허정학

*.234.173.37

마크업 개발자라면 가장 어려운 부분이 폰트별 자간, 행간 그리고 인라인 엘리먼트의 베이스라인이 아닐까 생각합니다. 참 좋은 아이디어입니다.
항상 문서로 테스트를 하였지 시뮬레이터 생각한 한번도 해보지 못했네요.

잘살아서복수

*.37.141.11

실례지만... 재가 잘 못찾는건지.. 아님 공개하지 않으신건지.. ??
나눔체 웹폰트를 다운로드 할 수 없는 것인지요 ?? 만약 보류 중이시라면 언제쯤이 될지요 ?? 염치없지만... 나눠주세요 !!

부르

*.64.86.60

TTF 파일도 웹폰트로 지원합니다.
다만 IE 가 독자적으로 지원하는 포맷인 EOT 파일은 EOT 파일 제작시에 글꼴을 사용하실 도메인을 추가해야 하므로
나눔글꼴 TTF 파일로 직접 변환하여 사용하셔야 합니다.

자세한 변환방법은 "EOT 변환하기" 로 검색하시면 많은 자료가 있습니다.

잘살아서복수!!

*.37.141.11

답변 감사합니다. ^^

VIRHAC

*.11.84.83

웹표준화 라이브러리를 자주 보고 참고하는 1인 인데요.
오타가 있는거 같은데 알릴수있는 게시판이 없군요~

위치는 "UI라이브러리" > "List 적용 가이드" > "이미지+측면타이틀/텍스트" 여기 소스에
<dd></dt> 이렇게 닫겨 있는 오타가 있습니다.
수정 해주셨으면 감사해요~

ws

*.64.86.61

VIRHAC님~
알려주셔서 감사합니다.^^

말씀하신 부분 수정하였습니다.

라이센스관련

*.129.67.109

나눔폰트를 eot 변환하여 웹에 사용할 경우 라이센스는 어떻게 되나요 ? 언론사 사이트에 자유롭게 적용가능한지 궁금합니다.

부르

*.64.86.60

다음 링크를 참조하시면 됩니다. http://help.naver.com/ops/step2/faq.nhn?faqId=15879
댓글 남기기