고딕, 그리고 Noto Sans
폰트, 글의 패션이다. 폰트도 TPO가 있고 대부분의 TPO에 알맞은 것이 바로 고딕, San Serif체다.
나눔고딕
고딕하면 MS의 ‘맑은 고딕’이, 그리고 네이버의 ‘나눔 고딕’을 많이들 얘기한다. 좀 더 관심이 있던 사람들은 구글&어도비의 ‘본고딕’ (이하 Noto Sans)을 함께 떠올릴테고 말이다. 더 가면 애플의 ‘애플산돌고딕네오’가 있겠다.
고딕은 간결한 선에서 오는 깔끔함과 가독성이 특징이다. 이러한 간결함에 비해 폰트는 만들기 정말 어렵다. 아니 한글 폰트가 특히 어렵다. 영어는 26자의 대문자와 26자의 소문자를 구성하면 하나의 영문 폰트가 완성되는 반면, 한글은 최소 2,350자의 글자가 필요하다. 대충 셈해도 수십배가 넘는다.
단순히 글자 수가 아니라 위치에 따라 모음의 길이와 위치 조정이 필요하고 거기다 좋은 폰트는 자간(글자 사이의 간격)과 안티 앨리어싱/트루 타입의 고려 등 수많은 조건이 덧붙는다.
Noto Sans KR
과거 좋은 고딕을 사용하기 위해 ‘산돌고딕Neo1’을 유료로 사용(거의 10년 전)하다 협업간 폰트 공유 등의 문제가 있어 결국 ‘Noto Sans 본고딕’를 메인으로 사용했다. 실제로 지금까지 많은 기업들이 디폴트로 ‘Noto Sans’ 폰트를 사용해왔고 지금도 그러하다.
왜? 무료다. 그냥 공짜가 아니라 상업적 이용이 가능한 무료다.
즉 저작권 걱정 하나도 없이 맘대로 사용할 수 있는 폰트라는 것이다. 무엇보다 무료인 폰트 중에서는 더욱 조형미가 좋아 가독성이 뛰어났다.
그럼 그냥 ‘Noto Sans’를 쓰면 되는 거 아닌가? 글 제목은 다른 폰트던데.
Noto Sans도 완벽한 폰트는 아니다. 장점과 별개로 꽤나 여러 단점들이 존재한다.
Noto Sans 문제점
•
한글과 어울리지 않는 영문, 글리프
•
이질적인 숫자
•
넓은 자간
•
플랫폼 별 동일한 적용이 어려운 굵기(Weight) 지원 등…
관련된 글은 이 곳에 잘 정리돼있다.
문제가 한 둘이 아니고 이 단점들은 고스란히 디자이너, 개발자들의 숙제가 된다
디자이너들의 숙제
1.
한글 폰트와 영문, 숫자 폰트를 따로 쓴다.
2.
자간, 행간 등을 별도로 조정한다.
3.
각각 작성 한뒤 하나씩 검수한다.
실제로 작년까지만해도 그냥 매번 저렇게 폰트를 작성하고 수정하곤 했다. 이를 해결하기 위한 Noto Sans를 기반으로 수정한 폰트들이 있었으나 그 존재를 몰랐고, 작년에 이 존재를 깨닫고 사용했을 때는 감탄을 금치 못했다.
심지어 오늘 소개하고 비교할 두 폰트는 무려 개인 디자이너가 이를 수정해 제작한 폰트들이다.
‘무료’에 ‘상업적 사용 가능’으로 말이다.
Pretendard 그리고 SUIT
Pretendard
제작자 : 길형진(Orion Cactus)
system-ui를 대체하는 글꼴
Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는 다른 환경에서 이를 대체할 수 있는 글꼴을 꾸준히 갈망해왔다.
(중략)…. 이어서 맑은 고딕과 나눔고딕을 대신해 본문용 무료 글꼴의 대명사로 쓰이고 있는 Noto Sans KR—본고딕은, 그 글자를 조형하는 여러 사람들이 공통적으로 자간을 조정하는 데 시간을 쏟고 있다는 것과, 본고딕의 한글 크기가 대부분의 한글 글꼴들과 비슷하게 다국어 타이포그래피 환경에서는 조금 크게 자리잡아 라틴 글자와 섞어쓸 때 글자 비율을 어느정도 조정해서 쓰는 점이 제품을 만드는 데 어느정도 부채가 쌓이는 상황이라 보았고, 이처럼 적합하지 않은 글꼴로부터 생기는 추가적인 소요를 줄이자는 데에서 이 프로젝트를 2020년 11월부터 천천히 다듬어왔다.
•
Noto Sans에 없던 SemiBold, ExtraBold 굵기 추가로 총 9개의 폰트 패밀리 지원
•
폰트 비율, 형태, 높이, 길이 등을 조절해 미적 완성도 구성
•
Inter 폰트 기반 영문 및 숫자 조정
•
한국어의 단어표기법에 알맞은 특수기호 추가 및 모양 수정
•
자간, 글자 높이 조정 등…
지속적으로 조금씩 업데이트되고 있으며, 정말 완성도가 높은 폰트다.
추가적인 소요 없이 단일 폰트를 그대로 작성해도 눈에 만족스러운 결과를 보여주는 만큼, 디자이너들은 물론 수많은 기업들에서 사용하고 있다.
2023년 11월에도 업데이트가 있던 만큼 꾸준하게 업데이트 되는 폰트다.
2023.12 기준 이 블로그에 적용된 폰트도 이 ‘프리텐다드’다.
SUIT
제작자 : 윤병선(SUNN-US)
사용자 환경에 영향받지 않는 일관된 시각적 경험을 제공하기 위해 많은 Product에서 본고딕―Noto Sans를 선택합니다.
하지만 한글과 어울리지 않는 Grotesque 계열의 영문자와 숫자, 어긋나 있는 중앙 정렬, 넓은 자간 같은 문제들이 있습니다.
디자이너는 완성도를 위해 많은 노력을 기울이지만 개발자와의 언어 차이, 인력과 시간 부족 등 다양한 요인에 의해 그 노력을 온전히 반영하는 과정은 쉽지 않습니다.
•
Noto Sans에 없던 SemiBold, ExtraBold 굵기 추가로 총 9개의 폰트 패밀리 지원
•
Geometric 영문자와 숫자
•
글자 위 아래 동일한 공백, 자간
•
구두점과 괄호 등의 중앙 정렬
•
UI에 알맞은 줄간격
•
임베딩 및 웹폰트를 위한 용량 최적화 등…
최근 정말 예쁜 UX/UI 포트폴리오를 봤다. 사용된 폰트가 SUIT였고 뭐가 달라 이리 예쁜거지? 하고 찾아본 결과 이름부터가 ‘UI’를 위한 폰트 ‘SUIT’인만큼 정말 정렬에 디테일한 신경을 쓴 폰트였다.
꾸준히 업데이트한 결과 23년 8월 기준 v2.02 까지 올라왔다.
Pretendard vs SUIT
그럼 이제 결정해야할 문제가 있다.
두 폰트 좋고 예쁜건 알겠는데 무슨 폰트를 써야할까.
일반적으로 Pretendard를 많이 사용하고 있지만 SUIT를 사용하기 알맞은 상황이 더 있지 않을까?
이미 UI에서도 Pretendard를 많이 사용하고 있는데 SUIT에서의 더 이점이 있을까?
나만 궁금했는지 이 둘을 비교한 글이 딱히 제대로 없었다.
23년 12월 21일 기준으로 두 폰트를 간단히 비교해봤다.
•
Pretendard v1.3.9
•
SUIT v2.0.2
웹폰트
먼저 웹폰트다. 가볍게 나무위키에서 어떻게 보이는지 확인해보자.
블로그 이미지 첨부 간 사이즈 변경으로 어느정도 글자 깨짐이 존재하여 정확한 차이는 실제로 적용해보고 비교해보는 것이 가장 정확하다.
두 폰트가 설치돼있다면 다음 플러그인을 크롬에 설치해 바로 비교해볼 수 있다.
Noto Sans 본고딕
두 폰트의 베이스가 된 Noto Sans다.
기본적으로 읽기에 큰 불편함은 없으나 디테일을 하나씩 뜯어보면 아쉬운 부분이 상당히 많다.
Pretendard / SUIT
.png&blockId=634dcbf3-c5c3-4347-b340-1ea2965edf37)
좌 Pretendard / 우 SUIT
Noto Sans에 비해 확실히 자간이 줄고, 정돈된 모습이 나타난다.
둘을 얼핏 두고 봤을 때는 크게 다르지 않기에 하나씩 세세히 살펴봤다.
좌 Pretendard / 우 SUIT
둘다 ‘애플산돌고딕네오’에 크기가 맞춰졌고, 자간 조정도 이뤄진만큼 한글로만 작성된 글에서는 거의 동일한 형태를 가진다
•
Noto Sans
•
Pretendard
•
SUIT
확실히 괄호의 중앙정렬 문제는 개선된 폰트 모두 제대로 해결된 형태로 이루어져있다.
Noto Sans
Noto Sans 특수문자의 자간은 디자인 출판 시 무조건적인 수정이 필요하다.
좌 Pretendard / 우 SUIT
‘Pretendard’와 ‘SUIT’는 둘다 특수문자에 있어 자간이 알맞게 조정돼있다.
이 둘의 가장 큰 차이는 영문폰트에서 나타난다.
‘Pretendard’는 ‘Inter’와 ‘San Francisco’를 기반, ‘SUIT’는 Geometric 형태의 영문 폰트를 구성했다.
둘다 기존 폰트에는 어울리는 형태인터라 웹폰트에서는 취향의 영역이라 생각될 정도다.
•
Pretendard 영문 참고
•
SUIT 영문 참고
윈도우 시스템 폰트
시스템 폰트 좌 Pretendard / 우 SUIT
둘다 static 타입의 OTF 파일을 설치했다. (사실 윈도우 호환성을 고려했다면 TTF가 맞다)
이건 이미 처음부터 이를 고려해서 만들어진 ‘Pretendard’가 알맞다.
용량
용량 따위 알게 뭐야! 싶지만 생각보다 폰트의 용량은 크기가 크고, 로딩에 많은 영향을 끼친다.
이건 이미 만들어진 목적부터 용량 최적화가 이루어진 ‘SUIT’가 유리하다.
실제로 웹폰트 Woff2만을 비교해보자면 용량을 압도적으로 경량화 시킨 것을 확인할 수 있다.
로딩 및 반응성이 중요하거나, 폰트로 인해 많은 트래픽이 발생하는 곳이면 ‘SUIT’ 사용을 권장한다.
SUIT | Pretendard | |
Static Woff2 | 1.45mb | 6.58mb |
Variable Woff2 | 611kb | 2,010kb |
파워포인트 (발표자료)
좌 Pretendard / 우 SUIT
일반적인 관점에서 사람들이 좋은 고딕 폰트를 찾기 시작하는 순간은 파워포인트 아니면 휴대폰 꾸미기라고 생각한다. 그런 의미에서 파워포인트에서 한 번 테스트를 수행해봤다.
윈도우에서와 다르게 안티앨리어싱이 들어간 환경에서는 SUIT가 기본적으로 같은 굵기(Weight)에서 좀 더 얇은 글자를 가지고 있다.
파워포인트 네이버 블로그까지 운영해봤던 입장(즉 비전문가 입장)에서 본다면, 원하는 문구를 정확히 힘있게 전달해야하는 순간이 더 많은 터라 파워포인트에서는 Pretendard를 주로 사용할 것이다.
두 폰트가 대단한 점은 파워포인트에서는 10년 너머 폰트 안티앨리어싱이 제대로 작동하지 않아 폰트 크기가 작아지면 실선 - 투명도 100%를 적용해주는 노가다를 매번해야하는데, 두 폰트는 이 노가다를 수행하지 않아도 준수한 가독성을 보장한다.
Figma (UI)
좌측은 UI에 자주 사용하는 11pt Regular/Bold, 우측은 13pt Bold 로 구성했다.
Noto Sans와 다르게 기본 텍스트 박스를 중앙 정렬 시키면 알맞은 위치에 있는 것은 둘다 동일하다
위 Pretendard, 아래 SUIT
Figma에서도 동일하게 SUIT가 좀 더 얇고 영문, 숫자, 특문에서 확실히 차이를 보인다.
UI를 위해 설계된만큼 화살표의 경우 UI에서 자주 사용되는 화살표로 나타나 따로 벡터로 제작하거나 가져올 필요가 없었다. 개인적으로 ‘@’, ‘#’도 확실히 SUIT가 더 취향에 맞았다.
다만 모든 글자를 지원하지는 않기에 만약 사용자가 입력 가능한 텍스트 박스를 서비스에서 제공하고 있다면 사용자가 글자를 입력하다 사라지는 당황스러움에 빠질 수 있다.
즉 서브폰트를 고려해야하고 이때는 앞서 언급한 용량의 장점이 사라지니 서비스 상황에 맞게 사용해야 한다.
위부터 Noto Sans / Pretendard / SUIT
SUIT는 하나하의 글자의 가로 간격이 일정한 형태를 띄어 짧은 단어 단어에 있어 안정감을 주고 보다 편안함을 제공한다. 가독성을 챙기면서도 비교적 부드러운 인상을 주고 싶다면 SUIT를 UI에 채택하는 게 좋은 선택이겠다.
마치며..
Pretendard / SUIT
글을 작성한 시점에서 무료에 상업적 사용이 가능하며, 이 완벽한 확장성에 퀄리티를 뛰어넘는 폰트가 있을까? 당연 없다고 생각한다. 둘 다 정말 정말 끝내주는 폰트다.
정말 이러한 결과물을 무료로 배포한 길형진 디자이너님과 윤병선 디자이너님께 감사를 표한다.
