Hacker News 2026.06.01 30

난독증 디자이너가 직접 만든 폰트, Shantell Sans의 제작 과정 이야기

손글씨가 폰트가 되기까지

폰트 하나가 만들어지는 과정을 본 적 있나요? 우리가 평소에 쓰는 Pretendard, Noto Sans, San Francisco 같은 폰트들은 그냥 컴퓨터에 깔려 있는 "기본 도구" 같지만, 사실 한 글자 한 글자가 수많은 디자인 결정의 결과물이에요. 최근 다시 회자되고 있는 Shantell Sans라는 폰트의 제작 과정 문서가 그 디테일을 너무 잘 보여줘서 소개해보려고 해요.

Shantell Sans는 영국의 일러스트레이터 Shantell Martin의 손글씨를 기반으로 만들어진 가변 폰트(variable font)예요. 가변 폰트가 뭐냐면, 예전에는 "Light", "Regular", "Bold" 이렇게 굵기마다 별도 파일을 다운받아야 했는데, 가변 폰트는 파일 하나 안에 모든 굵기와 스타일이 슬라이더처럼 연속적으로 들어 있는 형식이에요. 웹에서 쓸 때 용량도 줄고, 디자이너가 "중간 정도의 굵기"를 자유롭게 선택할 수 있어서 요즘 표준처럼 자리 잡고 있죠.

손글씨를 디지털로 옮기는 일의 어려움

이 프로젝트의 흥미로운 점은 디자이너 본인이 난독증(dyslexia)을 가지고 있다는 거예요. 그래서 폰트 디자인 단계에서부터 "읽기 어려운 사람도 편하게 읽을 수 있는가"가 핵심 기준이 됐어요. 일반적으로 폰트 디자이너들은 자간(글자 사이 간격), x-height(소문자 높이), counter space(글자 안쪽 빈 공간) 같은 걸 미세하게 조정하는데, Shantell Sans는 여기에 더해서 비슷하게 생긴 글자들(예: b/d, p/q, n/u)이 헷갈리지 않도록 의도적으로 차이를 강조했어요.

또 하나 재미있는 게 Bounce 축이라는 거예요. 보통 폰트의 가변 축은 weight(굵기)와 width(너비) 두 개가 표준이거든요. 그런데 Shantell Sans는 "글자들이 베이스라인 위에서 위아래로 얼마나 들썩이는가"를 조절하는 Bounce 축을 추가했어요. 손글씨의 자연스러운 리듬감을 살리기 위한 거죠. 슬라이더를 끝까지 올리면 글자들이 마치 춤추는 것처럼 위아래로 출렁이고, 0으로 내리면 일반적인 폰트처럼 가지런해져요.

기술적으로는 OpenType의 Stylistic Sets도 적극 활용했어요. 같은 'a'를 써도 첫 번째 등장하는 'a'와 두 번째 'a'가 미묘하게 다른 모양으로 나오게 만든 거예요. 손으로 글씨를 쓰면 같은 글자도 매번 살짝 다르게 나오잖아요. 그 느낌을 살리려고 한 글자당 여러 변형을 만들어두고, 폰트 엔진이 문맥에 따라 자동으로 골라 쓰게 했어요.

폰트 디자인의 흐름에서 이 작업이 가진 의미

2010년대 중반 이후로 폰트 업계의 큰 흐름 두 가지가 있어요. 하나는 가변 폰트의 보편화고, 다른 하나는 접근성(accessibility) 강화예요. Atkinson Hyperlegible 같은 폰트가 시각장애인을 위해 글자를 구분하기 쉽게 디자인된 대표 사례인데, Shantell Sans는 여기에 "표현력"이라는 축을 하나 더 얹은 셈이에요. 읽기 편하면서도 손글씨 특유의 따뜻함을 잃지 않는 거죠.

비교 대상이 될 만한 프로젝트로는 Google Fonts의 Recursive(가변성을 극단까지 밀어붙인 폰트), 그리고 Comic Sans의 "개선판"을 표방하며 나온 Comic Neue가 있어요. Comic Sans는 다들 알다시피 디자이너들 사이에서 농담거리지만, 사실 난독증이 있는 사람들에게는 가장 읽기 쉬운 폰트 중 하나로 꼽혀요. Shantell Sans는 그 "손글씨 친근함 + 가독성"을 진지하게 다시 만든 결과물인 거죠.

개발자에게 이 이야기가 왜 흥미로운가?

프론트엔드 개발하시는 분들에게 이 사례는 꽤 실용적인 시사점이 있어요. 우선 가변 폰트를 제대로 활용하면 웹 성능에 큰 도움이 돼요. 굵기별로 woff2 파일을 4~5개 받는 대신 가변 폰트 파일 하나만 받으면 되니까 네트워크 요청도 줄고, FOUT(Flash of Unstyled Text) 같은 깜빡임 문제도 줄어들거든요. CSS에서는 font-variation-settings: 'wght' 450, 'BNCE' 50 이런 식으로 축을 직접 제어할 수 있어요.

그리고 접근성 측면에서, 본인이 만드는 서비스의 주 사용자층에 따라 폰트 선택을 다시 한 번 고민해볼 만해요. 교육 서비스나 어린이 대상 앱이라면 글자 구분이 명확한 폰트가 학습 효율을 높여줘요. 시니어 대상 서비스라면 x-height가 큰 폰트가 가독성에 유리하고요. 그냥 "예뻐 보이는 폰트"가 아니라 "누가 읽을 폰트인가"를 생각하는 거죠.

또 하나, 디자이너와 협업할 때 폰트 제작 과정을 어렴풋이라도 이해하고 있으면 대화가 훨씬 깊어져요. "이 자간 좀 줄여주세요"가 아니라 "이 letter-spacing은 본문 기준 -0.01em 정도가 적당할 것 같아요" 같은 얘기가 가능해지거든요.