Snapdeck Sans — 슬라이드와 제품을 위한 폰트
font.snapdeck.app을 만들고 나서 한동안 수천 개의 오픈 폰트를 비교했습니다. 좋은 폰트는 많았지만, Snapdeck에서 원하는 조건을 한 번에 만족하는 폰트는 찾기 어려웠습니다.
슬라이드 제목에서는 멀리서도 읽혀야 하고, 본문에서는 정보가 촘촘해도 답답하지 않아야 합니다. 제품 UI에서는 12px 라벨과 버튼 안에서도 선명해야 하고, PDF로 내보냈을 때는 화면에서 본 레이아웃이 그대로 유지되어야 합니다. 그래서 Snapdeck Sans를 만들었습니다. Snapdeck의 제품 UI, AI 생성 슬라이드, PDF export까지 한 톤으로 묶기 위한 한글·영문 산세리프입니다.
왜 직접 만들었나
Snapdeck에서 폰트는 단순한 취향 문제가 아니었습니다. 매번 슬라이드를 만들 때마다 “제목은 어떤 폰트로 갈까?”, “본문은 Inter와 맞을까?”, “이 폰트는 상업적으로 써도 될까?”, “PDF로 뽑으면 줄바꿈이 달라지지 않을까?”를 확인해야 했습니다.
Pretendard, Inter, SUIT, Asta Sans, Goorm Sans처럼 좋은 후보는 많았습니다. 다만 Snapdeck이 필요로 하는 사용처가 조금 달랐습니다.
| 용도 | 필요했던 것 | 기존 조합에서 자주 생긴 문제 |
|---|---|---|
| 슬라이드 제목 | 멀리서도 읽히는 굵기와 존재감 | UI 폰트는 제목에서 약하고, 디스플레이 폰트는 제품 화면에서 무거움 |
| 슬라이드 본문 | 높은 정보 밀도와 안정적인 가독성 | 한글·영문 페어링마다 줄 간격과 x-height가 어긋남 |
| Snapdeck UI | 다크 배경, 작은 라벨, 버튼에서의 선명도 | 슬라이드용 폰트는 작은 UI 텍스트에서 흐려짐 |
| PDF export | 화면과 PDF의 레이아웃 일치 | 웹폰트와 로컬 폰트를 섞으면 줄바꿈과 박스 높이가 달라짐 |
결론은 단순했습니다. 제목용, 본문용, UI용 폰트를 매번 새로 조합하는 것보다 한 패밀리 안에서 굵기만 바꿔 슬라이드와 제품을 함께 커버하는 편이 Snapdeck에는 더 맞았습니다.
font.snapdeck.app MVP 때부터 중요하게 봤던 기준도 그대로 가져왔습니다. 같은 문장이 밝은 배경과 어두운 배경에서 모두 괜찮은지 확인했습니다. 랜딩 페이지에서는 좋아 보이지만 제품의 다크 UI에서는 흐려지는 폰트가 많았기 때문입니다.
Snapdeck Sans란
Snapdeck Sans는 askitmore(Snapdeck Sans Project Authors)가 만든 오픈 소스 산세리프입니다. Snapdeck 안에서 바로 쓰기 위해 만들었지만, OFL 조건을 지키면 개인 작업, 상업 프로젝트, 제품, 브랜드, 앱, 웹, 문서, 발표 자료, AI 생성물에도 자유롭게 사용할 수 있습니다.
- 라이선스: SIL Open Font License 1.1 (OFL)
- Reserved Font Name: 없음
- 포맷: OTF 6종
- 버전: 1.000
- 참고·베이스: Asta Sans(42dot), Pretendard, Goorm Sans, Satoshi
Reserved Font Name을 두지 않았기 때문에 수정, 재배포, 임베딩도 OFL 범위 안에서 자유롭습니다. Snapdeck 내부에서만 쓰는 닫힌 폰트가 아니라, 실제 작업에 가져다 쓸 수 있는 폰트로 공개하고 싶었습니다.
한 패밀리로 슬라이드와 UI를 같이 맞추기
Snapdeck Sans의 핵심은 “개성이 강한 제목용 폰트”가 아닙니다. 슬라이드, 대시보드, 버튼, PDF까지 오가는 작업에서 톤이 흔들리지 않는 기본 폰트가 되는 것입니다.
| 맥락 | 제목 | 본문 | 권장 weight |
|---|---|---|---|
| 슬라이드 표지 | Series A Update | - | Bold 700 |
| 슬라이드 본문 | - | Traction, unit economics... | Regular 400 |
| 섹션 헤드 | Q3 Product Update | 매출 · 리텐션 · 로드맵 | Bold 700 + Regular 400 |
| UI 네비게이션 | Projects | - | SemiBold 600 |
| 버튼·라벨 | Export PDF | - | Medium 500 |
| 캡션 | - | snapdeck.app · Draft | Light 300 |
font.snapdeck.app에서 “Pretendard + Inter?”, “Goorm Sans + Satoshi?” 같은 조합을 계속 비교했던 이유는 결국 한글과 영문이 한 화면에서 자연스럽게 섞여야 했기 때문입니다. Snapdeck Sans는 그 비교 시간을 줄이기 위해 만들었습니다. 한 패밀리 안에서 제목, 본문, UI 라벨을 모두 처리하고, 필요한 경우 weight만 바꾸면 됩니다.
구조 - 6 weights, 12,202 glyphs
Snapdeck Sans는 Light부터 ExtraBold까지 6가지 굵기로 구성되어 있습니다.
| Weight | CSS font-weight |
파일 |
|---|---|---|
| Light | 300 | SnapdeckSans-Light.otf |
| Regular | 400 | SnapdeckSans-Regular.otf |
| Medium | 500 | SnapdeckSans-Medium.otf |
| SemiBold | 600 | SnapdeckSans-SemiBold.otf |
| Bold | 700 | SnapdeckSans-Bold.otf |
| ExtraBold | 800 | SnapdeckSans-ExtraBold.otf |
각 굵기는 12,202개 glyph와 12,180개 cmap codepoint를 갖습니다. 패밀리 전체가 같은 문자 커버리지를 유지하기 때문에 특정 굵기에서 글자가 fallback으로 빠지는 일을 줄일 수 있습니다.
- 한글 음절: 11,172개 (U+AC00-U+D7A3 전체)
- 한글 자모: 94개
- 라틴: 기본 52자 + 확장 라틴
굵기 범위는 슬라이드와 UI를 함께 고려해 300-800으로 잡았습니다. Regular와 Medium은 본문과 UI 라벨에, SemiBold와 Bold는 네비게이션과 제목에, ExtraBold는 표지나 섹션 구분처럼 강한 대비가 필요한 곳에 맞췄습니다. Light는 캡션이나 긴 보조 텍스트에서 유용합니다.
형태 - neutral geometric sans
Snapdeck Sans는 중립적인 기하학 산세리프(neutral geometric sans)에 가깝습니다. Asta Sans의 골격을 바탕으로, Snapdeck 슬라이드와 제품 UI에서 자주 마주치는 상황에 맞게 조정했습니다.
프로포션
| 항목 | 값 (unitsPerEm = 1000) |
|---|---|
| Ascender | 990 |
| Descender | -251 |
| x-height | 505 |
| cap-height | 707 |
| x-height / cap-height | 0.714 |
| Italic angle | 0° (upright only) |
x-height는 cap-height의 약 71%입니다. 본문에서 글자가 작아져도 잘 읽히고, 대문자는 제목과 UI 라벨에서 충분히 또렷하게 보이도록 잡았습니다.
또 하나 중요하게 본 것은 vertical metrics입니다. 6가지 굵기 모두 vertical metrics가 동일합니다. Regular를 Bold로 바꿔도 줄 높이나 텍스트 박스 높이가 흔들리지 않습니다. Snapdeck 에디터에서 텍스트 weight만 바꾸는 일이 많기 때문에, 이 부분은 실제 사용감에 꽤 크게 작용합니다.
라틴 letterform
- H, n, o: 단순한 기하학 구조로 제목에서 멀리서도 형태가 분명하게 보임
- a: single-storey 계열의 2 contour 구조
- g: 본문 리듬을 위한 loop + tail 구조
- S, R: UI와 슬라이드 양쪽에서 튀지 않는 곡선 비율
굵기가 올라갈수록 stem은 두꺼워지고 advance width도 조금 넓어집니다. 예를 들어 H의 advance width는 다음과 같습니다.
| Weight | advance width |
|---|---|
| Light 300 | 656 |
| Regular 400 | 668 |
| Bold 700 | 688 |
| ExtraBold 800 | 694 |
Bold는 Regular보다 약 5% 넓습니다. 슬라이드 제목을 Bold로 올릴 때 줄바꿈이 달라질 수 있으므로, font.snapdeck.app에서 보던 것처럼 실제 문장으로 미리 확인하는 것이 좋습니다.
한글
한글은 11,172개 완성형 음절을 개별 glyph로 갖고 있습니다. 자모 조합에만 의존하지 않기 때문에 PDF export, 오프라인 렌더링, 에디터 캔버스에서도 웹폰트 fallback 없이 같은 형태를 유지하기 쉽습니다.
대부분의 한글 음절 advance width는 813입니다. 완전한 고정폭은 아니지만 고정폭에 가까운 그리드라서 bullet, 표, 짧은 라벨에서 세로 정렬이 깔끔하게 보입니다.
OpenType - 슬라이드와 UI에 필요한 기능
Snapdeck Sans OTF에는 GSUB와 GPOS 테이블이 들어 있습니다.
| Feature | 용도 |
|---|---|
liga |
합자 |
tnum |
표와 KPI 열 정렬을 위한 고정폭 숫자 |
frac |
분수 |
ccmp |
한글 자소 조합 |
calt |
문맥 대체 |
vert / vrt2 |
세로 조판 대체 |
Snapdeck 생성 슬라이드에는 매출표, 퍼센트, 분기 숫자처럼 숫자가 줄지어 나오는 장면이 많습니다. 이때 tnum을 켜면 숫자 폭이 일정해져 표와 KPI 카드가 더 안정적으로 보입니다.
font.snapdeck.app에서 Snapdeck Sans까지
font.snapdeck.app을 만들면서 알게 된 것은 단순했습니다. 좋은 폰트를 찾는 일도 중요하지만, 제품 안에서 계속 같은 톤으로 쓸 수 있는 기본값이 더 필요했습니다.
그래서 font.snapdeck.app은 폰트를 고르는 도구로 두고, Snapdeck Sans는 Snapdeck에서 바로 쓰는 폰트로 만들었습니다. 둘 다 OFL 생태계 안에 있고, 역할만 다릅니다. 하나는 선택을 돕고, 다른 하나는 선택 이후의 작업을 줄입니다.
다운로드
OTF 6종과 OFL.txt를 공개합니다.
- SnapdeckSans-Light.otf
- SnapdeckSans-Regular.otf
- SnapdeckSans-Medium.otf
- SnapdeckSans-SemiBold.otf
- SnapdeckSans-Bold.otf
- SnapdeckSans-ExtraBold.otf
- OFL.txt
웹에서는 font.snapdeck.app의 CSS를 import해서 바로 사용할 수 있습니다.
@import url("https://font.snapdeck.app/fonts/snapdeck-sans/snapdeck-sans.css");
:root {
font-family: "Snapdeck Sans", system-ui, sans-serif;
}
.slide-title {
font-weight: 700;
font-feature-settings: "tnum" 1;
}
.ui-label {
font-weight: 500;
font-size: 14px;
}
앞으로
Snapdeck Sans v1.000은 Snapdeck의 제품, 슬라이드, PDF에 맞춘 첫 릴리스입니다. 지금은 upright OTF 6종으로 시작하지만, 필요해지면 italic, variable font, webfont subset도 이어서 만들 계획입니다.
슬라이드와 제품 UI에서 한글·영문 톤을 맞추는 일이 번거롭다면 Snapdeck Sans를 바로 써볼 수 있습니다. 다른 후보와 비교해보고 싶다면 font.snapdeck.app에서 함께 살펴보면 됩니다.