안녕하세요, UI 디자이너 강영화입니다.

지난 12월 6일, 한글 웹폰트 글꼴보기집을 공유했습니다. 트위터 및 페이스북으로 공유된 글이 많이 퍼져서 공유 후 2주가 지난 오늘까지 20,000명 가까이 방문했습니다. 공유한 둘째 날에는 9,000명 정도가 방문해 가장 많은 방문자 수를 기록했습니다. 이 웹 페이지를 공개하고 나니 이 작업을 어떻게 시작하게 되었는지, 각 항목이 어떤 의미가 있는지 궁금해하시는 분들이 문의해주셨습니다. 그래서 이 웹페이지를 어떻게 만들게 되었는지, 어떤 방식으로 읽으면 되는지 간단한 설명을 적어봅니다.

한글 웹폰트 글꼴보기집, 어떻게 만들게 되었나?

한글 웹폰트 글꼴보기집은 졸업 동기들과 함께 진행한 전시인 벌써 사년 전에서 발표한 작업입니다. 저는 이 전시에서 작년부터 저의 직군인 UI 디자인과 연관 깊은 사이드 프로젝트를 만들어 발표하고 있습니다. 작년에는 ui-practices.me 라는 iOS 인터랙티브 아카이브 사이트를 만들었었죠. 

이번 전시에서 공개한 한글 웹폰트 글꼴보기집은 웹 페이지 메인에 써 있는 것처럼 사이드 프로젝트의 일환으로 작업한 한글 본문용 글꼴 미리 보기 웹 페이지입니다. 

“왜 한글꼴은 구글 폰트 같이 한 눈에 볼 수 있는 웹 페이지가 없을까?”

노토산스를 커스텀해 스포카 한 산스를 만들면서 다양한 웹사이트를 살펴보며 들었던 의문입니다. 웹 페이지를 위한 라이선스가 비교적 자유로운 한글꼴들이 여러개 있다는 것은 알고 있지만, 그것을 한눈에 볼 수 있는 플랫폼이 없었습니다. 특히 몇년새 나눔고딕을 시작으로 만듦새가 좋고 미려한 한글꼴이 OFL로 공개되거나 개인 사용자에게 무료로 활용할 수 있게 풀리고 있지만 이 또한 리스트로 깔끔하게 정리된 곳을 찾기는 어려웠습니다. 웹페이지 디자인을 하면서 다양한 글꼴을 사용하기 위해서는 리스트로 정리해놓을 필요가 있다고 느꼈습니다.

돋움체와 바탕체로 나뉘어있는 17개 한글꼴

웹에서 더 친근한 돋움체(혹은 고딕체, Sans-serif)와 책에서 더 자주 볼 수 있는 바탕체(혹은 명조체, Serif)로 글꼴을 분류했습니다. 돋움체는 11개, 바탕체는 6개로 총 17개의 한글꼴을 볼 수 있습니다. 본문용 글꼴을 모았기 때문에 제목용 디스플레이 글꼴이나 필기체 등은 제외했습니다.

첫 페이지에서 왜 같은 글꼴로 보여주는지 궁금하다는 분들도 계셨습니다. 결론부터 말씀드리면 용량 문제가 가장 큽니다. 보통의 한글 폰트는 작게는 400킬로바이트부터, 크게는 2메가바이트 까지 비교적 큰 용량을 사용해 불러오게 됩니다. 영문 글꼴의 경우 몇십 킬로바이트면 되는 폰트 용량이 한글꼴의 경우 최대 몇 십 배까지 늘어나게 되는데 17개의 한글꼴을 모두 보여주면 용량이 최소 10메가바이트 이상 어마어마하기 커지기 때문에 부담스러울 것이라고 판단해 한 개의 글꼴로 통일했습니다. 이렇게 다양한 폰트의 모양새를 보여주는 페이지에는 이미지 텍스트를 사용하기도 하는데, 이 페이지가 “웹폰트”를 보여주는 데 집중하는 게 중요하다고 생각해 이미지 텍스트 사용을 피하려고 했습니다.

물론 서브셋같이 작은 단위로 폰트 이름만 불러오는 방향으로 바꾼다면 해결 할 수 있겠지만, 배포할 당시에는 작업 시간이 모자라 한 개의 글꼴로 통일했습니다. 다음 업데이트 시에는 서브셋으로 만들어 웹폰트로 불러오도록 작업하고 싶습니다.

글꼴에 대한 설명과 다운로드 링크, 라이선스 정보 제공

메인 페이지에서 특정 글꼴을 선택해 들어오면 그 글꼴에 대한 설명을 볼 수 있습니다. 또한, 각 글꼴을 내려받을 수 있는 링크를 제공해 다운로드를 쉽게 받을 수 있도록 했습니다. 글꼴을 내려받으면 사용자들은 웹폰트가 아닌 워드프로세서, 그래픽 디자인 툴을 위한 작업 등에 활용할 수 있습니다. 라이선스 정보 버튼을 누르면 라이선스에 대한 안내 페이지로 이동합니다. 한글 웹폰트 글꼴보기집에 있는 모든 글꼴은 무료 글꼴로 공개되었지만 저작물을 사용할 때는 어떤 것이든지 라이선스를 정확히 확인하고 사용해야 하기에 안내 페이지로 넘어가게 하여 편하게 확인할 수 있도록 했습니다.

외롭지 않은 글꼴 미리 보기

글꼴을 미리 써볼 수 있는 미리 보기 섹션도 실었습니다. 팬그램은 어떤 것을 넣을까 하다가 2016년에 출간된 봄알람의 책 “우리에게도 계보가 있다 - 외롭지 않은 페미니즘”의 일부를 저자 이민경 님의 허락을 받고 게재했습니다. 아래 예시와 같이 글자 굵기, 정렬(오른쪽, 가운데, 왼쪽 정렬), 글자 크기, 글줄 사이, 글자 사이를 변경할 수 있습니다. 그뿐만 아니라 섹션을 클릭해 원하는 글귀를 입력할 수도 있습니다.

글꼴 렌더링 예시

이 섹션은 Ellen Lupton의 “Type on Screen”의 웹 폰트를 보여주는 챕터에서 참고했습니다. 우리는 모두 같은 환경, 같은 화면에서 글자를 보지 않습니다. 우리가 보는 각각의 디지털 기기의 환경마다 미묘하게 폰트 렌더링이 다릅니다. 맥북 프로 레티나 Chrome 브라우저에서 보는 것과 윈도우 Chrome에서 보는 것과 다른 점이 분명히 있습니다. 이것은 심한 경우 가독성에 영향을 주기도 하죠. 한글 웹폰트 글꼴보기집에서는 4개 환경(iOS, Android, macOS, Windows)의 6개 브라우저에서 특정 글꼴이 어떻게 보이는지 캡쳐했습니다.

6개 환경의 디바이스를 모두 가지고 있지는 않았기에 Browserstack라는 서비스를 이용해 캡쳐했습니다. Browserstack 같은 서비스는 가상머신의 운영체제에서 가상의 브라우저를 사용하는 가상머신을 이용해 다양한 환경에서 웹 페이지가 어떻게 보이는지 살펴볼 수 있습니다. 이런 가상머신 위에서 보니 이용하니 작은 사이즈의 경우 실제보다 화면이 자글자글하고 훨씬 더 많이 깨져보이는 문제가 있었습니다. 개인적으로 깨지지 않는 스크린샷을 원했기 때문에 글자를 더 확대해서 캡쳐했습니다. 따라서 각 환경에서 100% 캡처 이미지처럼 보인다고 말하지는 못합니다. Windows 환경 Chorme 브라우저의 경우 현재 이 웹사이트에 올라가있는 캡쳐보다 조금 더 깨져보이는 등, 다소 차이가 있습니다.

실제 렌더링과 차이는 있지만, 이 이미지들을 통해 각 환경에서의 전반적인 렌더링 양상을 볼 수 있습니다. 예를 들어 보면 다음과 같습니다.

사용자들이 접속하는 환경은 한 가지 환경이 아닙니다. 레티나 디스플레이가 널리 퍼지고 디자이너나 개발자들은 사용자들이 접하는 것보다 더 좋은 환경에서 작업하고 있습니다. 이렇게 더 고해상도의 환경에서 작업하다 보면 보통의 사용자가 어떤 환경에서 자신의 작업 결과를 보는지 간과하기 쉽습니다. 이 섹션은 이러한 문제에 힌트를 제공하기 위해 한글 웹폰트 글꼴보기집에 추가되었습니다. 기존에 다양한 환경을 캡쳐해 보여주는 웹 페이지가 기존에 없었기 때문에 웹 페이지를 만드는 누구에게나 좋은 도구가 되리라고 생각합니다.


제가 필요하다고 생각해 만든 페이지에 관심 가져주셔서 감사합니다.

한글 웹폰트 글꼴보기집의 메인 페이지에도 적어두었지만, 이 도구가 다양한 환경에서의 한글 웹 타이포그래피를 다루는 디자이너와 개발자에게 실질적으로 도움이 되길 바랍니다. 다음 프로젝트도 기대해주세요!