웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기

아름다운 페이지를 위한 웹폰트

우리가 흔하게 보는 웹사이트는 대부분 글(text)로 이루어져 있습니다. 사진이나 동영상을 통해 정보를 전달 받기도 하지만 아직 대부분 글을 눈으로 읽는 과정을 통해 정보를 얻고 있습니다. 책이나 잡지같은 인쇄물에서도 글꼴(font)이 중요하듯이 웹사이트에서도 내용을 잘 전달하기 위해서, 매력적으로 보이기 위해서 글꼴은 매우 중요합니다. 

웹폰트란

왠지 웹사이트의 글꼴은 거의가 비슷해 보이지 않나요? 디자이너가 공들인 이미지 위의 글꼴에 비해 투박하게 보일 때도 많고, 대부분 같은 글꼴을 쓰고 있다고 생각되지 않나요? 이미 익숙해져서 눈치채지 못하고 있을 수도 있습니다. 

웹폰트란 문자 그대로 웹+폰트. 웹에서 쓰이는 폰트입니다. 웹에서 볼 수 있는 ‘맑은고딕’이나 ‘굴림’은 웹폰트라고 부르지 않고 아닌 다른 프로그램에서도 쓰고 있는데 왜 굳이 웹폰트라는 단어를 쓰는 걸까요? 웹폰트는 일반 폰트와 조금 다른 점이 있습니다. 

웹폰트 무엇이 다른가 1 : 온라인에서 다운로드

웹폰트는 온라인에서 다운로드 됩니다. 나는 폰트같은 걸 다운받은 적 없는데 폰트가 다운로드 된다니 더욱 혼란스럽습니다. 이를 이해하기 위해서는 웹페이지 구성 방식을 조금 살펴볼 필요가 있습니다.

웹페이지 안의 글은 단순해 보여도 여러가지 정보를 담고 있습니다. 크기, 색상, 굵기 등과 함께 font-family라는 글꼴의 정보도 가지고 있습니다. 웹브라우저가 이 정보를 만나면 크기, 색상, 굵기는 이미 정해진 방법대로 표현해주면 되는데, 글꼴 정보는 스스로 표현할 수가 없습니다. 그래서 사용자가 이미 윈도우즈나 맥에 설치해 놓은 글꼴 중 설정된 것과 같은 것을 찾아서 해당 글꼴로 보여주게 됩니다. 

여기서 이미 설치된 글꼴은 ‘시스템폰트’라고 합니다. 이미 가지고 있기 때문에 자연스럽게 보여줄 수 있습니다. 설정된 글꼴이 내 PC에 없다면? 유사한 것 중 적당한 것을 골라 보여주게 됩니다. 그러면 만든이가 디자인한대로 표현되지는 않습니다.

그래서 웹페이지 안의 글은 대부분 비슷하게 보이는 겁니다. 사용자 PC에 어떤 글꼴이 설치되어 있는지 알 수 없으니 가장 기본적인 글꼴들로 ‘안전하게’ 설정하는 것이죠. 윈도우는 맑은 고딕, 굴림, 돋움, 바탕, 궁서라는 기본 한글 글꼴을 가지고 있습니다. 

다양한 속성을 가지고 있는 텍스트

다시 웹폰트로 돌아가 봅시다. 사용자 PC에 없는 글꼴을 꼭 보여주고 싶을 때, 사용자에게 따로 어떤 폰트를 설치하라고 강요할 수 없을 때, 이 웹폰트를 사용합니다. 온라인의 어떤 공간에 폰트 파일을 올려두고서 사용자가 웹페이지를 볼 때, 브라우저에게 글꼴 정보를 전달해 줍니다. 그러면 PC에 글꼴이 없어도 볼 수 있는 것이죠. 

다만 글꼴은 용량이 클 수 있습니다. 특히 완성형 글꼴이 매우 많은 한글 글꼴은 더더욱 큽니다. 간혹 웹페이지가 번쩍 하면서 글꼴이 바뀌는 경험을 해보셨을텐데요. 이 시차가 바로 웹폰트가 다운로드되는 시간입니다. 

웹폰트 무엇이 다른가 2 : 가벼운 웹폰트

그래서 웹폰트는 가벼워야 합니다. 사용자가 기다리지 않고, 웹페이지를 아름답게 보여주려면 용량이 큰 웹폰트를 가볍게 해야 합니다. 보통 경량화는 완성형 글꼴 중 사용 빈도가 낮은 문자들을 지워버리는 방식으로 진행됩니다. 꼭 포함될 필요가 없는 한자나 일본어가 포함되어 있다면 삭제합니다. 한글 중 사용 빈도가 낮은 문자들도 삭제합니다.

KS X 1001이라는 표준이 있습니다. 많이 쓰이는 8,836자의 한글 문자 모음인데요. 이걸 기준으로 문자를 줄입니다. 이렇게 다이어트 시킨 폰트 파일을 웹에서 사용할 수 있도록 포맷을 변환하여 서버에 올리면 사용할 수 있습니다.

사용 빈도가 낮은 문자는 삭제한다.

웹폰트로 무얼 할 수 있을까 1 : 아름다운 텍스트

그럼 웹폰트로는 무얼 할 수 있을까요? 당연히 웹페이지를 매력적으로 만드는 데 사용합니다. 굴림체 일색이던 웹페이지에 생명을 불어 넣을 수 있습니다. 개성 있는 웹페이지를 만들 수 있고 사용자에게 정보가 잘 전달되도록 가독성을 높이는 역할도 합니다. 

가독성의 차이

웹폰트로 무얼 할 수 있을까 2 : 아이콘

웹폰트의 중요한 용도가 하나 더 있습니다. 바로 웹페이지의 아이콘을 표현하는 일입니다. 웹페이지에는 많은 아이콘이 사용됩니다. 사용자가 UI를 쉽게 조작할 수 있도록 안내하는 역할을 합니다. 이런 아이콘은 하나의 웹페이지에도 꽤 많이, 자주 사용되기 때문에 이를 모두 이미지로 만들고 하나하나 html 태그로 넣는 것은 효율적이지 않습니다.

그래서 웹폰트를 사용합니다. 아이콘 폰트는 ㄱ, ㄴ, ㄷ, a, b, c와 같은 문자 있던 자리에 기호와 그림을 배치하여 해당 문자가 웹페이지에 보일 때, 한글이나 영문이 아닌 그림으로 보이게 하는 겁니다. 

이미 만들어진 아이콘 모음이 많습니다. 그 중 Font awesome, Material icon이 유명하고 국내에는 Xeicon이라는 서비스도 있습니다. 

자기만의 아이콘 모음을 만들 수 있는 icomoon같은 서비스도 있습니다. 이런 아이콘 폰트를 사용하면 따로 아이콘을 그리거나 이미지로 만들지 않고도 쉽게 웹페이지에 원하는 아이콘을 넣을 수 있습니다. 

마치며

웹사이트를 만드는 기술은 나날이 발전하고 있습니다. 화려하고 멋진 웹사이트가 하루가 멀다하고 등장하고 있으며, 구글드라이브처럼 PC용 프로그램에 버금가는 복잡한 도구도 웹을 통해 서비스되고 있습니다. 그만큼 웹에서의 글꼴, 웹폰트도 발전하고 있습니다. 한글은 영문 알파벳에 비해 필요한 문자 수가 많아 그 발전 속도가 느리지만, 멋진 오픈소스 웹폰트들이 등장하고, 다양한 유료 서비스도 등장하고 있습니다. 아이콘 폰트를 사용하면 고품질의 웹사이트를 쉽게 만들 수도 있습니다. 웹폰트를 적극 활용해서 멋진 웹사이트를 만들어 보는 것은 어떨까요. 

- 참조: 한글 웹 폰트 경량화해 사용하기

by 북극곰 발자국