우아콘 웹사이트에 사용된 폰트는 무엇일까?

Nov.22.2024 장해민

Design Web Frontend

텍스트는 UI를 구성하는 가장 기본적인 요소 중 하나입니다. 그리고 좋은 폰트로 좋은 사용자 경험을 제공하는 것은 매우 중요한 기술이죠. 우리 회사는 주기적으로 예쁜 폰트를 만들고 무료로 배포합니다. 폰트를 사랑하는 저에겐 큰 의미와 가치가 있는 문화고, 이 폰트들을 활용해 에브리모지쓰면글림체를 만들기도 했습니다.

아쉽게도 배달의민족 폰트는 생김새가 독특하고 여러 가지 굵기를 지원하지 않기 때문에 작은 글씨나 일반적인 본문에 사용하기 어렵습니다. 시스템 폰트는 운영체제마다 달라서 레이아웃과 사용자 경험이 파편화됩니다. 그래서 배민 웹 서비스에는 가장 대중화된 오픈소스 폰트인 본고딕(Noto Sans) 또는 스포카에서 커스텀한 스포카 한 산스(Spoqa Han Sans)를 사용합니다.

본고딕은 정말 기본적인 형태의 디자인이며 싫증이 나지 않고 작은 크기에서도 읽기 쉽게 다듬어졌습니다. 게다가 무료죠. 하지만 개인적으로 본고딕의 한글은 그 아름다움이 무색하게도 다른 글리프(glyphs, 뜻과 소리를 지니지 않은 도형 기호)와 어울리지 않습니다. 영문과 달리 한글 글리프는 상대적으로 커 보이며 줄기가 균일합니다. 한글과 영문, 숫자, 특수문자가 교차할 때마다 균형이 깨지고 조화롭지 않습니다.

그래서 Interop 폰트를 만들었습니다. Interop(인터롭)은 Inter와 본고딕의 한글 글리프를 페어링(서로 다른 폰트를 어울리도록 매칭)한 폰트입니다. 한글 글리프의 크기를 94%로 줄이고 굵기를 조절했습니다. 페어링된 폰트들의 고유한 특성은 그대로 살리면서 한글과 영문이 마치 하나의 언어처럼 보이게 만들고자 했습니다. 곧게 뻗은 Inter의 줄기는 본고딕의 한글과 잘 어우러지고, 작아진 한글은 수평감과 안정감을 높입니다. 이 효과는 특히 큰 텍스트를 볼 때 더욱 두드러집니다.

Interop은 총 8가지의 굵기를 제공합니다. 두 폰트의 조화로운 페어링을 위해 본고딕의 Black과 Inter의 Extra Bold를 최대 굵기 기준으로 삼고, 각 굵기마다 본고딕을 조금씩 수정했습니다.

예를 들어, Interop의 Thin은 본고딕의 Thin보다 조금 더 가늘고, Interop의 Bold는 본고딕의 Bold보다 조금 더 굵습니다.

2019년에 처음 제작하여 키노트, 문서, 사이드 프로젝트 등에 사용하고 있었는데요, 시간이 흘러 우아한형제들 기술 콘퍼런스인 WOOWACON 2023WOOWACON 2024의 웹사이트에도 사용되어 뿌듯합니다. 그리고 이 폰트를 여러분과 나누고픈 마음에 짧은 소개글을 남깁니다.

아름다움과 균형에 민감한 미니멀리스트로서, 멋진 코드를 작성하는 것도 물론 중요하지만 우리 개발자 스스로가 디테일을 놓치지 않고 사용자를 만족시키는 방법을 아는 것 또한 놓치지 말아야 할 덕목이라고 생각합니다.

Interop은 페어링된 두 폰트의 라이선스(OFL, SIL Open Font License)를 따라 마찬가지로 오픈소스이며 무료입니다. 폰트에 관심이 있다면 사용해 보시고 차이점을 한번 느껴보시길 바랍니다.

https://interop.design – Interop 폰트 공식 웹사이트