환경을 아는만큼 최고의 전략은 없다. 웹폰트에서도 폰트가 사용되는 웹 환경을 이해하는 것이 무엇보다 중요하다. 이런 측면에서 폰트 제작사가 아닌 웹에이전시가 개발한 웹폰트가 주목할 만 하다. 최근 웹에이전시 이롭게는 지난 2월 1일부터, 1년이 넘는 제작기간을 거쳐 ‘이롭게 바탕체’를 배포했다. 이롭게 바탕체를 제작한 이롭게 김은주 대표를 만나, 국내 웹사이트와 웹폰트 그리고 이롭게 바탕체에 대해 이야기를 나눠봤다.

국내에서는 언제부터 웹폰트를 본격적으로 사용했는가.

웹폰트에 대한 이야기를 하려면 스마트 기기의 등장을 언급하지 않을 수 없다. 국내에서는 지난 2009년 말 아이폰의 국내 출시와 더불어 모바일 기기에 최적화된 웹사이트에 대한 니즈가 증가했다. 다양한 스크린 사이즈에 대응해 웹사이트를 구축하는 것에는 구축과 운영 이슈가 있기 때문에 반응형 웹 UI로 사이트를 구축하는 것이 시대의 큰 흐름으로 변했다. 2010년 이전에는 모든 컴퓨터에서 동일한 디자인을 보여주기 위해서 전달하는 모든 텍스트를 포토샵 등 프로그램으로 이미지를 만들어서 마크업하는 방식이 일반적이었다. 코딩을 하게 되면 사용자의 컴퓨터에 해당 폰트가 저장돼 있지 않을 경우, 디자인과 관계 없이 시스템 폰트가 보이기 때문이었다. 그런데 반응형 웹 UI에서는 이미지에 텍스트를 넣어서 표현할 경우, 이미지가 리사이즈돼 작게 보여지는 현상이 발생해 가독성에 문제가 생겼다. 정보를 전달하는 대부분의 콘텐츠는 텍스트 형태로 돼 있는데 이미지 박스 내에 있는 글을 읽을 수 없다 보니, 자연스럽게 이미지와 텍스트가 분리되고 이 과정에서 타이포그래피의 표현을 위해 웹폰트가 적극적으로 사용되기 시작했다.

그동안 국내 웹사이트에서 웹폰트 적용은 어떻게 이뤄졌나.

초기에는 거의 대부분 웹폰트를 웹사이트에 내장하는 방식으로 사용했고, 저작권 걱정 없이 사용할 수 있는 폰트도 맑은 고딕이나 나눔 고딕으로 협소했다. 우리가 어떤 사이트에 접속하게 되면 브라우저는 html 코드 순서대로 파일을 호출하게 된다. 화면을 출력하기 위해 정의된 모든 데이터가 로드돼야 화면이 정상적으로 보여지게 되며 내장된 웹폰트도 이러한 출력 요소 중의 하나이다. 이러한 이유 때문에 두 개 이상의 웹폰트가 사용되게 되면 로딩 속도가 늦어지게 된다. 특히 모바일 브라우저에서의 기본 캐시 용량은 3~5MB로 웹폰트 한 개 용량과 비슷하기 때문에 디자인 시 고려가 필요하다. 최근에는 클라우드 서버 기반의 폰트 API 서비스가 각광을 받고 있다. 구글 폰트 사이트에서 무료로 서비스를 이용할 수 있으나 제공하는 한글 서체의 수가 적다. 국내에서는 대표적인 서체 회사나 유통사들이 유료 서비스를 제공하고 있다. 클라우드 서버 기반의 폰트 API 서비스는 폰트를 내장하는 방식에 비해서 속도가 개선됐고 다양한 폰트를 사용할 수 있다는 것이 장점이나, PV에 따라 과금되는 방식이라 비용 이슈가 있다.

웹폰트를 적용할 때 가장 이슈가 된 것은 무엇인가.

가장 큰 이슈는 웹폰트로 적용할 만한 폰트가 다양하지 않다는 것이다. 그 외에 퍼포먼스와 관련해 발생하는 빈번한 문제는 가독성과 용량에 대한 것이다. 국내에서 사용되는 대부분의 웹폰트는 ttf 또는 otf로 제작된 폰트를 eot 또는 woff와 같은 타입의 웹폰트로 변환한 것이다. 그래픽 툴에 최적화된 폰트를 웹폰트로 변화하게 되면 어쩔 수 없이 계단 현상이 발생한다. 강제적으로 용량을 압축하는 과정에서 불필요한 픽셀이 사라지면서 생기는 현상인데 이것은 별도의 힌팅 작업을 해야만 문제 해결이 가능하다. 하지만 대부분의 폰트는 웹폰트를 전제로 디자인되지 않았기 때문에 힌팅 작업까지 완료되고 용량까지 적은 한글 폰트는 거의 없었다.

한글 웹폰트에서 발생하는 문제점은 무엇인가.

이것은 디자인적인 측면과 기술적인 측면을 모두 고려해야 할 것 같다. 영어의 경우 하나의 폰트만 사용하더라도 대소문자를 구분해서 표기하거나 이탤릭으로 표기하는 등의 간단한 표기방식의 변경 또는 폰트 두께의 변형만으로도 미려한 웹사이트 디자인이 가능하다. 그러나 한글로 디자인을 할 경우 미려하고 풍부한 디자인을 하려면 폰트를 적어도 세 개 정도는 사용해야 한다. 하지만 영문자소가 94자인데 반해 현대 한국에서 모든 글자를 표현할 수 있는 한글 자소는 11,172자로 한글 폰트의 용량은 커질 수 밖에 없다. 통상적으로 기존의 폰트를 웹폰트로 변환했을 때 폰트 한 개의 용량이 모바일 브라우저의 기본 캐시 용량과 비슷하다. 디자인이 컨펌되려면 다양한 글꼴을 사용할 수 밖에 없고, 이것은 모바일에서도 빠른 로딩이 필수인 요건과 상충되는 경우가 많다.

국내에서 웹폰트를 사용하면서 상당한 고충이 있었을 것 같다. 직접 개발하게 된 특별한 계기가 있는가.

대부분의 클라이언트는 웹사이트 구축 이후 폰트와 관련해 지속적으로 월 비용이 나가는 부분에 대해 이해하지 못하는 경우가 많다. 저작권 이슈가 없는 무료 폰트를 찾다 보니 대부분의 웹사이트에 사용된 폰트가 유사하고 폰트나 레이아웃이 유사하니 웹사이트 간의 차이점이 크게 없어 보이게 된다. 자사도 2012년까지는 일반적으로 많이 사용되는 맑은 고딕이나 나눔 고딕 폰트를 웹폰트로 변환해서 사용해 왔다. 자사는 2013년 아모레퍼시픽의 한율 프로젝트를 진행하면서 기업 전용 서체에 대한 힌팅 작업을 경험하게 됐다. 아모레퍼시픽에는 부리체라는 세리프 폰트가 있는데, 해당 폰트를 힌팅하는 과정에서 웹폰트의 선명함과 용량을 개선할 방안들에 대해 관심을 가지게 됐다.

웹폰트 제작 중 가장 어려운 점은 무엇이었나.

우리의 목표는 헤드라인 서체가 아닌, 웹에서 사용할 수 있는 가볍고 미려한 본문 폰트를 만드는 것이었다. 그래서 처음에는 간결하고 가독성이 뛰어난 기본형으로 구성된 고딕체를 만들기 시작했다. 하지만 웹폰트 제작을 시작하고 얼마 지나지 않아 구글 본고딕이 출시됐다. 웹폰트로 적용 시 특정한 폰트 크기에서 뿌옇게 보이는 현상은 있었지만 상당히 완성도가 높았다. 폰트 디자인 자체의 완성도는 물론이고 다양한 언어를 지원한다는 것도 큰 장점이었다. 다운로드해 사용도 가능하지만 클라우드 방식으로도 서비스를 제공하여 html 코드만 붙여 넣으면 바로 적용할 수 있는 퍼블리싱 방식도 획기적이었다. 본고딕보다 잘 만들 자신이 없었기 때문에 프로젝트는 난항에 빠졌다. 하지만 자사는 현실을 인정하고 처음부터 다시 프로젝트를 기획했다. 그리고 웹사이트를 제작하면서 무료 폰트 중에서는 웹에 최적화된 미려한 바탕체 폰트가 없다는 것을 인지하게 됐다.

웹사이트에 ‘예쁜’ 바탕체가 필요한 건 왜일까?

우리가 어렸을 때부터 접하는 책은 주로 바탕체로 돼 있다. 하지만 웹에서는 이런 아름다운 바탕체를 찾아보기 어렵다. 국내 웹사이트를 보면, 무료로 사용할 수 있는 고딕체를 많이 적용하다 보니 디자인이 굉장히 투박해 보인다. 웹디자인이나 지면디자인이 아름답고 풍성해 보이려면, 세리프와 산세리프 비율이 8:2 정도로 섞이는 게 좋다. 웹사이트를 아름답게 표현하기 위해 바탕체는 반드시 필요하다.

이롭게 바탕체의 특징에 대해 알려달라.

이롭게 바탕체는 무엇보다 웹 환경을 생각하고 처음부터 제작됐다. 모든 폰트에 대해 힌팅작업이 완료됐기 때문에 웹사이트에서 콘텐츠를 확인할 때 글자가 선명하다는 것이 가장 큰 특징이다. 그래서 PC뿐 아니라 모바일에서도 높은 가독성을 보인다. 또한 현재 존재하는 한글 웹폰트 중 가장 가벼운 용량을 갖추고 있다. 경량화 측면에서 한글로 조합 가능한 11,172자를 조합하면서 파일 용량을 3MB 내외로 줄이는 게 가장 큰 이슈였다. 물리적으로는 용량을 줄이는 데 한계가 있어 디자인 개선을 통해 용량 문제를 해결했다. 웹폰트로 전환하거나 힌팅 작업을 할 때 세리프 글꼴에서 꺾이는 디자인이 많을수록 용량에 영향을 끼친다는 것을 알고 모음의 꺾임을 최소화하는 작업을 했다. 결과적으로 이롭게 바탕체의 용량은 ttf 파일 기준으로 3MB이며, woff 기준으로 1MB가 안 된다. 더불어 이롭게 바탕체만의 개성을 살리기 위해 자음의 속공간을 키우고 전체적인 크기와 비율을 조절했다. 더불어 무료 폰트이며 향후에도 다양한 플랫폼을 통해 이롭게 바탕체를 무료로 제공한 계획이다.

마지막으로 향후 폰트 제작에 대한 생각이 궁금하다.

이번에 바탕체를 배포하면서 반응이 좋으면 이롭게 바탕체를 굵기 별로 만들고, 고딕 버전도 제작할 계획을 하고 있다. 그리고 웹폰트 외 점자체에 대해 관심이 많다. 사실 예전부터 장애인들을 위한 IT 교육과 IT 분야 일자리 창출에 꿈을 가지고 있었다. 실제 전 직원이 점자를 배우는 시간을 가졌고, 또 이롭게 명함에는 점자가 표시돼 있다. 점자는 손으로 직접 읽어야 해서, 더 크고 가독성이 좋아야 하는 점을 연구해보려고 한다. 웹 환경을 이롭게 하기 위해 이롭게 바탕체를 제작한 것처럼, 시각장애인들이 이롭게 생활할 수 있는 환경을 만들고 싶다. 이롭게는 디지털 에이전시지만, 이롭게가 가진 기술이 사회에 이롭게 쓰였으면 한다.

• 출처: DI매거진 2017년 2월호
  
• 글: 신건우 기자
  
• 사진: 김주선 포토그래퍼