널리

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

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

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

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

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

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

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

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

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

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

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