프리텐다드 vs 노토산스 vs 스포카 vs 인터롭 -1
본고딕 폰트 4종 비교 - 1편. 활자 디자인
새로운 UI/UX 프로젝트를 시작할 때 가장 중요한 디자인 결정 중 하나는 본문 폰트 선택입니다. 본문 폰트는 사용자가 인터페이스에서 가장 오래 접하는 요소로, 서비스의 가독성과 사용성에 직접적인 영향을 미칩니다. 특히 모바일 환경에서는 작은 화면에서도 긴 시간 읽기 편한 폰트 선택이 더욱 중요해졌습니다.
본문 폰트는 단순한 심미적 선택을 넘어 여러 기술적인 사항을 고려해야 합니다. 다양한 디바이스에서의 일관된 표현, 빠른 로딩을 위한 최적화된 용량, 여러 언어 지원 여부, 다양한 크기에서의 가독성 등이 모두 중요한 평가 기준이 됩니다. 또한 서비스의 브랜드 아이덴티티를 일관되게 전달하면서도, 사용자의 피로도를 최소화할 수 있는 균형 잡힌 선택이 필요합니다.
한글 웹폰트의 경우 본고딕(노토 산스) 기반의 폰트들이 가장 많이 사용됩니다. 본고딕은 뛰어난 가독성으로 디지털 환경의 새로운 기준이 되었고, 이는 여러 디자이너들에게 영감을 주어 구현 환경, 지원 언어, 용량, 라이선스 등을 개선한 새로운 폰트들이 등장하는 계기가 되었습니다. 이 글에서는 대표적인 본문 폰트인 '노토 산스(본고딕)'와 이를 기반으로 발전된 폰트들을 비교해 보겠습니다.
비교 대상 폰트
✦ 기준 폰트
- 노토 산스 KR (Noto Sans KR) : 본고딕의 한글/영문 통합 버전 (구글 배포)
✦ 비교 폰트
① 스포카 한 산스 네오 (Spoqa Han Sans Neo) : 본고딕, Lato 기반 (스포카팀 제작)
② 프리텐다드 (Pretendard) : 본고딕, Apple SD 산돌고딕 네오, Inter, San Francisoco 기반 (길형진님 제작)
③ 인터롭 (Interop) : 본고딕, Inter 기반 (장해민님 제작)
디자인 특징 분석
1. 한글 디자인
노토 산스 KR, 스포카 한 산스, 프리텐다드, 인터롭 한글 디자인 비교① 스포카 한 산스 네오 : 크기, 자간, 두께가 노토 산스 KR과 거의 같습니다.
② 프리텐다드 : 크기가 조금 작습니다. 자간이 잡혀 있어 특별한 경우가 아닌 한 따로 조정하지 않아도 되는 장점이 있습니다.
③ 인터롭 : 크기와 자간은 프리텐다드와 유사하지만 두께가 조금 더 두껍습니다.
2. 영문 디자인
노토 산스 KR, 스포카 한 산스, 프리텐다드, 인터롭 영문 디자인 비교① 스포카 한 산스 네오 : 자간이 조금 넓고, y나 l의 획의 끝부분이 직선 형태로 되어 있어 보다 모던한 인상을 줍니다.
② 프리텐다드 : 단층 g와 짧은 어센더(Ascender), 획의 끝 처리가 수직/수평으로 되어 있어 정돈된 인상을 주면서도 뛰어난 가독성을 제공합니다.
③ 인터롭 : 프리텐다드와 유사하지만 획의 끝처리 등의 휴머니즘적 요소로 보다 부드러운 인상을 줍니다.
3. 숫자/기호 디자인
노토 산스 KR, 스포카 한 산스, 프리텐다드, 인터롭 숫자/기호 디자인 비교① 스포카 한 산스 네오 : 특수문자가 각진 형태로 디자인되었습니다. 1, 6, 9와 같은 숫자 획의 두께가 균일하고 직선으로 처리되어 숫자의 가독성이 높습니다.
② 프리텐다드 : 따옴표와 숫자 1 등의 끝 부분을 심플하게 처리하여 기하학적이고 깔끔한 인상을 줍니다. 리거처(Ligature) 기능을 지원하여 -와 >를 입력하면 화살표 →로 자동 렌더링 됩니다.
③ 인터롭 : 숫자 디자인과 리거쳐 기능은 프리텐다드와 유사하며 특수문자 디자인에 차이가 있습니다.
4. 폰트 메트릭스 (Font Metrics)
노토 산스 KR, 스포카 한 산스, 프리텐다드, 인터롭 폰트 메트릭스 비교노토 산스의 폰트 메트릭스를 살펴보면, 한글이 어센더(Ascender)와 디센더(Descender) 라인(상하 빨간색 라인) 사이의 중앙에 위치하지 않고 살짝 아래로 쏠려 있는 점을 확인할 수 있습니다. 이에 따라 버튼이나 컨테이너 중앙에 텍스트를 배치할 때 수직 중앙정렬을 맞추기 번거로운 점이 있습니다.
스포카 한 산스 네오, 프리텐다드, 인터롭은 모두 이러한 노토산스 KR의 수직 정렬 문제를 해결하였습니다. 다만 스포카 한 산스 네오의 경우 기본 행간이 다소 높게 설정되어 있습니다.
이 폰트들은 본고딕을 기반으로 하기에 한글 형태는 유사하나, 영문과 숫자 그리고 특수문자에서 특징이 드러납니다. 특히 숫자 디자인의 경우, 직선적이고 균일한 두께로 처리된 스포카 한 산스 네오는 금융 서비스나 SaaS 플랫폼과 같이 데이터를 자주 표현하는 서비스에 적합합니다. 프리텐다드와 인터롭은 기하학적이면서도 현대적인 디자인으로, 모바일 환경에서의 높은 가독성이 요구되는 서비스에 좋은 선택이 될 수 있습니다.
✦ 스포카 한 산스 : 숫자, 데이터 표현이 중요한 서비스에 추천
✦ 프리텐다드, 인터롭 : 모바일 환경에서의 높은 가독성이 요구되는 서비스에 추천
결국 폰트 선택은 프로젝트의 성격, 주요 콘텐츠 유형, 타깃 사용자, 구현 환경 등을 종합적으로 고려하여 결정해야 합니다. 본고딕 기반의 이 폰트들은 각자의 특장점을 가지고 있으므로, 프로젝트의 요구사항과 디자인 방향성에 맞춰 신중히 선택하시기 바랍니다.
다음 글에서는 이러한 디자인적 특성을 넘어 구현 환경, 용량, 라이선스 등 기술적 요소들을 자세히 살펴보도록 하겠습니다.
※ 폰트 다운로드
노토 산스 KR https://fonts.google.com/noto/specimen/Noto+Sans+KR
스포카 한 산스 네오 https://spoqa.github.io/spoqa-han-sans/
프리텐다드 https://cactus.tistory.com/306
