노토 산스의 모든 것 (3)
노토 산스의 한계점과 대안
2년 반만에 마무리 짓는 노토 산스 시리즈의 마지막 편이다.
글을 쓰는 건 정말이지 재밌지만 시작하기가 너무 어렵다. 주제는 쌓여 가는데 운 띄우기가 너무나 힘드네!
아무튼 노토 산스 3편 시작합니다.
이젠 더 이상 미룰 수 없다 노토산스 3편 @대학내일노토 산스 2편을 먼저 보고 오시면 더 재밌습니다
디지털 대격변이 가져온
노토 산스의 한계
2편에서 다뤘듯이, 노토 산스는 등장과 동시에 한국 웹 디자인의 시각적 품질을 상향 평준화시킨 일등공신이고, 디자이너와 개발자들에게는 웹, 인쇄 가릴 것 없이 표준적인 제품을 만들 수 있는 서체가 되어 줬다.
하지만 웹과 앱 환경이 빠른 속도로 발전하면서, 노토 산스의 한계점이 조금씩 드러나기 시작했다.
너무나 범용적인 형태
전세계적으로 통용되는 문자인 알파벳이나 키릴 문자, 산스크리트 등등은 모두 유사한 결합구조를 가지고 있는데, 글자를 위아래로 결합하는 것이 아니라 가로 방향으로 결합한다는 것이다. 즉, 가로로 그어진 선을 기준으로 글자를 배열하면 된다는 뜻이다. 기준선 위로 올라가는 l, f, k, d 등의 Ascender, 기준선 밑으로 내려가는 q, p, j 등의 descender만 고려하면 된다.
한글은 Descender가 없어 전체적으로 위로 뜬 듯한 밸런스를 가지고 있다.하지만 한글은 조금 다르다. 한글은 초성, 중성, 종성이 입체적으로 결합하는 유일무이한 문자 구조를 가지고 있다. 한글은 descender가 따로 없기 때문에, 모든 글자가 기준선 위에 위치한다. 이 한글을 영문과 같이 사용할 때 문제가 생긴다. 한글은 모두 기준선 위에 떠 있지만, 어디까지나 영문 폰트을 기준으로 해야 하기 때문에 기준선 위로 한글은 모두 올라가야 하고, 영문 descender를 쓰기 위해 글자 자체의 공간이 아래로 더 넓게 만들어 진다.
또한 그로 인해 폰트 자체가 가진 기본 공간 밸런스도 깨진다.영문, 한글, 숫자를 모두 하나의 서체로 유려하게 사용할 수 있다는 범용성은 강력한 장점이었지만, 앱과 웹 환경이 점점 발전하고 특히 디자인 시스템과 UX가 많이 연구되기 시작하면서, 같이 쓰기 위해 만든 범용성이 오히려 노토 산스의 어정쩡한 글자 공간, 한글과는 어울리지 않는 행간 등의 단점으로 부각되기 시작한 것이다.
프리텐다드와 비교해보면 밸런스 차이를 더 확실하게 볼 수 있다혼동을 가져오기 쉬운 숫자체
노토 산스를 꾸준히 써 온 사람들은 잘 알겠지만, 노토 산스 폰트는 다른 유사 폰트와 구별할 수 있는 독특한 특징이 하나 있다. 바로 숫자 1 이다.
노토 산스 2편을 참고해 주세요이 폰트의 숫자 1은 유독 존재감이 강하다. 세로획 아래에 짧은 받침이 달린 구조인데, 처음 보면 디자인적으로 단단하고 멋있다. 하지만 1, l(소문자 엘), I(대문자 아이)가 한 줄에 모이면 얘기가 달라진다.
특히 금융 서비스나 데이터 대시보드처럼 숫자가 중심이 되는 화면에서는 그 한 글자가 사용자 경험에 직접적인 영향을 준다. 그래서 어떤 곳은 숫자만 다른 폰트를 쓰기 시작했다. 노토 산스에 숫자만 영문 폰트를 대응하는 식으로 페어링하는 방법인데, 당연히 귀찮고, 번거롭고, 디자인도 할 일이 많이 생긴다.
그래서 겉보기엔 별 문제 없어 보이지만, 디자인 시스템 차원에서는 유지보수 악몽이 된다. 기획자가 '숫자만 다르게 갈 수 있을까요?' 라고 말할 때마다, 디자이너와 개발자의 눈빛이 서서히 흔들린다. 사실 디자이너 눈빛이 제일 많이 흔들린다.
노토 산스의 단점을 개선한 개량형 서체들
노토 산스가 범용성과 안정성으로 선택되던 시절에는 폰트를 ‘설정하고 잊는’ 것이 가능했다. 디자이너가 폰트 때문에 밤새 고민하거나 개발자에게 폰트 파일을 문의하는 일도 드물었다. 그 안정감이 곧 장점이었다. 그러나 환경이 바뀌면서 장점이 단점으로 작용하기 시작했다. 반응형 레이아웃과 다양한 디바이스, 가변 폰트 지원의 등장, 그리고 디자인 시스템의 성숙화는 폰트에 대해 ‘한 번 설정하고 끝’이라는 가정을 깨뜨렸다.
구체적으로 말하자면, 영문·한글·일본어를 하나의 세트로 묶은 노토 산스는 모든 문자를 포용했지만, 그 처리 방식이 ‘언어마다 별도 설계된 폰트’와 같은 정밀함을 담지 못했다. 숫자 형태의 미세한 구분, 행간 라인-하이트의 조정, 굵기의 흐름 등에서 디테일이 필요한 디자인 환경에서는 부족함이 드러났다. 이런 필요가 생긴 순간, 자연스럽게 ‘노토 산스가 커버하지 못하는 부분’을 보완하거나 개선한 서체들이 주목받기 시작했다. 그 대표주자가 바로 ‘웹 최적화’, ‘숫자 가독성 개선’ 이라는 특징을 갖춘 대체 폰트들이다. 참고로 모두 오픈 라이선스인 노토 산스를 베이스로 놓고 개선한 폰트들이다.
1. Pretendard
한마디로 현재 웹 디자인의 기본 서체다.
한글과 영문 베이스라인이 정확하게 맞고, 가변 폰트(Variable Font)도 지원한다. 굵기 체계가 세밀하고, 자간도 따로 손대지 않아도 무난하게 떨어진다. 노토 산스가 안전한 선택이었다면, 프리텐다드는 이유 있는 선택이다. 다만 너무 많이 쓰이다 보니 브랜드 톤을 만들기엔 다소 평범하다는 점이 약간의 아쉬움이다. 사실 상 노토 산스의 위치를 완벽하게 대체했다고 해도 과언이 아니다.
2. Spoqa Han Sans Neo
스타트업 환경에서 꾸준히 사랑받는 서체다. 특유의 유려한 숫자 형태가 매력인 서체다. 스포카의 기존 폰트를 개선해 굵기 단계를 늘리고, 영문과 한글의 시각적 균형을 맞췄다. 숫자 ‘1’ 문제도 개선됐고, 전체적으로 더 얇고 또렷한 인상을 준다. 작은 화면에서도 시인성이 높고, 버튼·라벨·탭 텍스트에서 특히 강하다.
경쾌하고 가벼운 서비스 무드를 만들 때는 이 폰트를 추천한다. 단점으로는 웹에서 렌더링 시 앨리어싱 현사이 조금 두드러지는 편이다.
3. SUIT
한글 폰트 중에서는 구조가 가장 깔끔하게 설계된 편이다. 100부터 900까지의 굵기를 세밀하게 조정할 수 있어서, 디자인 시스템 위계 표현에 특히 유용하다. Pretendard가 안정적이라면 SUIT는 조금 더 브랜드에 가까운 뉘앙스를 가진다. 또한 한때 유행했던 격동고딕이나 고담 같은 지오메트릭 서체 계열의 자형인 것도 매력이다. 실제 기업 웹사이트나 브랜드 리뉴얼 프로젝트에서 ‘우리 서체’ 느낌을 주고 싶을 때 자주 쓰인다. 아직 커뮤니티 레퍼런스는 많지 않지만, 의외로 괜찮다.
4. Min Sans
이름처럼 미니멀리즘에 진심인 폰트다. 곡선보다는 직선 중심의 조형으로, 전체적으로 간결하고 균형 잡힌 인상을 준다. 정보 밀도가 높은 화면보다는 감각적인 브랜드 웹사이트나 전시·디자인 스튜디오 사이트에 잘 어울린다. 글자 자체가 메시지보다는 ‘분위기’를 만들어주는 역할을 하기 때문이다. 본문보다는 헤더나 타이틀, 혹은 포트폴리오 사이트의 메인 문구용으로 좋다. 레이아웃용 폰트로는 매우 좋다.
5. Interop
아직은 생소하지만, 디자이너들 사이에서 빠르게 입소문을 타고 있는 서체다. 라틴 서체 Inter와 한글 노토 산스 KR을 조합한 프로젝트로, 한글과 영문이 섞여 있을 때의 밸런스를 세밀하게 맞춘 것이 특징이다. 한글은 기존 노토보다 살짝 좁고, 영문은 Inter 특유의 부드러운 곡선을 그대로 가져왔다. 결과적으로 다국어 인터페이스에서 가장 자연스러운 조합을 만든다.
이외에도 원티드 산스 등 노토 산스를 기반으로 다양한 자체 폰트나 개량형 폰트가 매우 많다. 그만큼 노토 산스는 UI 디자인의 완성도를 몇배나 더 끌어올렸다고 할 수 있다.
시리즈를 마치며
노토 산스는 완벽하지 않지만, 한글 웹 폰트가 전무하던 시대를 정리하는 디자인 표준을 만들었다. 단순히 보여지기 위한 폰트를 고르는 것이 아니라 행간, 자간, 단락, 덩어리감, 분위기 등을 모두 고려해서 폰트를 고르게 만들어줬고, 또 그 배경 위에서 Pretendard와 Spoqa 같은 후속 세대가 자랐다. 또한 한국의 UXUI 환경이 급속도로 발전하게 된 하나의 원동력이 되어주기도 했다.
디자이너는 예쁘다고 폰트를 고르지 않는다. 맥락과 목적에 맞게 선택한다.
그리고 그 출발점에는 언제나 노토 산스가 있었다는 것을 기억했으면 좋겠다
여기까지 쓰는 데 3년이 걸렸다.
fin.
노토 산스야 앞으로 가끔씩 보자