실제 서비스에서 쓰는 폰트 조합 252개를 snapdeck font에 넣었습니다

폰트 조합은 생각보다 쉽게 가짜가 됩니다

Fraunces와 Inter를 붙이면 예쁘고, Noto Serif KR와 Pretendard를 붙이면 그럴듯합니다. Satoshi, Geist, SUIT, Pretendard 같은 이름을 잘 섞으면 화면도 꽤 근사해 보입니다. 그런데 그게 실제 서비스에서 쓰이는 감각인지, 아니면 우리가 그냥 “요즘 이런 게 좋아 보인다”고 느낀 결과인지는 다른 문제입니다.

snapdeck font의 페어 탭도 처음에는 그런 쪽에 가까웠습니다. 보기에는 나쁘지 않았지만, 실제 제품 화면에서 반복적으로 검증된 조합이라고 말하기는 어려웠습니다. 사용자가 폰트 조합을 고르려고 들어왔는데, 정작 우리가 보여주는 페어가 현실의 서비스 화면과 멀어지면 도구의 설득력이 약해집니다.

그래서 이번 업데이트에서는 페어 데이터를 다시 만들었습니다.

한글권 서비스 122개, 글로벌/영문권 서비스 130개를 대상으로 공개 웹사이트의 CSS를 수집했고, 그 안에서 실제로 쓰이는 font-family 값을 기준으로 페어를 구성했습니다. 이제 페어 탭에는 감으로 만든 조합이 아니라, 적어도 실제 서비스 화면에서 관찰된 폰트 사용 흔적을 가진 조합이 먼저 나옵니다.

정확히 무엇을 기준으로 삼았나

이번 업데이트의 기준은 “공개 웹사이트 CSS에서 관찰 가능한 `font-family`”입니다.

조사 대상은 Toss, Kakao, Musinsa, Inflearn, LINE, Woowa Brothers, Wanted, RIDI, Banksalad 같은 국내 서비스와 Apple, Google, Microsoft, Airbnb, Vercel, Stripe, Netflix, BBC, The New York Times, Shopify, Figma 같은 글로벌 서비스를 포함했습니다.

각 사이트의 HTML과 연결된 CSS 파일을 가져와서 `font-family`와 `@font-face` 정보를 확인했습니다. 그 결과 한글권 서비스 122개, 글로벌 서비스 130개에서 폰트 사용 흔적을 얻었고, 이번에는 관찰 가능한 전체 252개 결과를 페어 데이터로 만들었습니다.

중요한 점은 이것이 “공식 브랜드 가이드의 선언”은 아니라는 것입니다.

어떤 회사가 공식 문서에서 “우리는 이 폰트를 씁니다”라고 말한 경우도 있지만, 이번 데이터의 기본 근거는 공개 웹사이트에서 관찰되는 CSS입니다. 서비스는 수시로 바뀌고, A/B 테스트나 지역별 페이지, CDN 캐시, fallback stack 때문에 실제 사용자에게 보이는 폰트가 달라질 수 있습니다.

그래서 snapdeck에서는 이 데이터를 “공식 인증된 브랜드 폰트 목록”이 아니라 “실제 서비스 CSS에서 관찰한 폰트 조합 리서치”로 다룹니다. 과장하지 않으려고 의도적으로 그렇게 적어두었습니다.

왜 이 방식이 더 낫다고 봤나

폰트 조합을 고를 때 예쁜 샘플 문장만 보면 판단이 흔들립니다.

실제 서비스에서는 훨씬 지저분한 일이 일어납니다. 한국어와 영어가 섞이고, 숫자와 통화 단위가 들어가고, 버튼 라벨은 짧고, 안내문은 길고, 화면에는 카드와 탭과 필터가 반복됩니다. 브랜드 히어로 한 문장에서는 멋져 보이는 폰트가 결제 내역, 채용 공고, 예약 확인, 오류 메시지에서는 너무 강하거나 너무 약할 수 있습니다.

그래서 이번에는 “실제 서비스가 어떤 폰트를 선택했는가”를 먼저 봤습니다.

예를 들어 Toss 계열 사이트에서는 `Toss Product Sans`, `Basier Square`, `Apple SD Gothic Neo` 같은 이름이 관찰됩니다. Kakao Corp에서는 `KakaoBig`, `KakaoSmall`, `Apple SD Gothic Neo`, `Malgun Gothic`이 보입니다. Musinsa, Inflearn, 29CM, Wanted, RIDI, Banksalad, Yanolja, Socar 같은 여러 국내 서비스에서는 Pretendard 계열이 반복적으로 나옵니다. Woowa Brothers 쪽에서는 BM HANNA, BM JUA, Pretendard 계열이 함께 보입니다.

글로벌 쪽도 비슷합니다. Apple은 SF Pro 계열, Google과 YouTube는 Roboto와 Google Sans 계열, Vercel과 Next.js는 Geist, Netflix는 Netflix Sans, Airbnb는 Airbnb Cereal, Stripe는 Söhne 계열, Figma는 figmaSans, BBC는 BBC Reith, NYTimes는 Franklin/Karnak/Cheltenham 계열이 관찰됩니다.

이런 이름들은 그냥 멋있어서 고른 폰트가 아닙니다. 수많은 화면과 문장, 지역, 기기에서 버텨야 하는 선택입니다. 물론 우리 프로젝트에 그대로 복사하면 된다는 뜻은 아니지만, 최소한 현실의 기준점으로 삼기에는 충분히 좋습니다.

이번에 바뀐 것

이번 업데이트 이후 페어 탭은 언어별로 100개 이상의 실사용 기반 페어를 보여줍니다.

한국어 UI에서는 국내 서비스 CSS에서 감지된 폰트 흐름을 바탕으로 122개를 구성했습니다. 글로벌/영문 UI에서는 해외 서비스 CSS에서 감지된 폰트 흐름을 바탕으로 130개를 구성했습니다.

카드에는 이제 출처 사이트 이름도 작게 표시됩니다. 예를 들어 Toss, Kakao Corp, Musinsa처럼 해당 조합의 근거가 된 서비스 이름을 볼 수 있습니다. 카드의 조합 정보를 복사하면 출처와 관찰 노트도 함께 들어갑니다.

내부 데이터에는 `sourceName`, `sourceUrl`, `sourceNote` 필드를 추가했습니다. 단순히 “이 조합이 좋아요”라고 말하는 대신, 어디서 관찰했고 어떤 폰트들이 감지됐는지를 남기기 위한 필드입니다.

리서치 원자료도 저장했습니다.

`reports/service-font-research.json`

`reports/service-font-research.md`

`src/data/serviceFontPairs.generated.ts`

나중에 데이터를 갱신하거나, 특정 사이트의 감지 결과가 이상한지 확인할 수 있도록 원자료를 같이 남겨두었습니다.

한글 서비스에서 반복해서 보인 흐름

국내 서비스에서는 Pretendard가 아주 강하게 보였습니다.

Musinsa, Inflearn, 29CM, Wanted, RIDI, Banksalad, Yanolja, Socar, Jobplanet, Fastcampus, Class101, Lezhin, Munto, Frip, DoctorNow 등 다양한 서비스에서 Pretendard 또는 Pretendard Variable 계열이 확인됐습니다.

이건 어느 정도 예상한 결과이기도 합니다. Pretendard는 한글 UI에서 시스템 폰트처럼 쓰기 좋고, 영문과 숫자를 같이 다룰 때도 어색함이 적습니다. 서비스 화면은 폰트가 앞에 나서기보다 정보가 먼저 읽히는 쪽이 중요한데, Pretendard는 그 역할을 잘합니다.

Noto Sans KR도 여전히 강합니다.

공공, 금융, 미디어, 커머스, 여행, 교육 사이트에서 Noto Sans KR 또는 NotoSansKR 계열이 자주 보였습니다. 조금 더 기본적이고 넓은 호환성을 가진 선택지입니다. 브랜드 감각을 강하게 만들지는 않지만, 한국어 웹에서 안정적인 기준점으로 계속 쓰입니다.

Kakao 계열에서는 KakaoBig과 KakaoSmall이 보였습니다.

카카오의 폰트 전략은 꽤 분명합니다. 큰 제목과 브랜드성 있는 문장에는 KakaoBig이, 작은 본문과 UI 문장에는 KakaoSmall이 어울립니다. 이름 그대로 역할이 나뉘어 있어서 페어 데이터에서도 이 구조를 반영했습니다.

LINE에서는 LINESeed 계열이 관찰됐습니다.

LINE Seed는 다국어 서비스에서 브랜드의 통일감을 유지하려는 성격이 강합니다. 한국어만 잘 보이면 되는 폰트라기보다, 일본어와 영어, 한국어가 섞이는 제품 환경에서 의미가 있습니다.

Woowa Brothers 쪽에서는 BM HANNA, BM JUA 같은 배달의민족 폰트들이 강하게 보였습니다.

이런 폰트는 일반 SaaS 본문용이라기보다 브랜드의 목소리가 필요할 때 힘이 있습니다. 배달의민족처럼 말투와 캐릭터가 중요한 서비스에서는 폰트가 단순한 글자체가 아니라 브랜드 언어의 일부가 됩니다.

영문/글로벌 서비스에서 반복해서 보인 흐름

영문권에서는 Inter, Roboto, Segoe UI 같은 실용적인 UI 폰트가 계속 보였습니다.

이름만 보면 너무 익숙해서 새로울 게 없어 보이지만, 실제 제품에서는 이런 폰트들이 여전히 강합니다. 작은 텍스트, 긴 설정 화면, 대시보드, 도움말, 가격표, 개발자 문서까지 다 버텨야 하기 때문입니다.

Apple은 SF Pro 계열이 기준점입니다.

SF Pro Display와 SF Pro Text의 역할 분리는 여전히 좋은 레퍼런스입니다. 큰 제목과 작은 본문을 같은 세계 안에서 나누는 방식이기 때문입니다.

Vercel과 Next.js 쪽에서는 Geist가 보입니다.

Geist는 개발자 도구나 배포 플랫폼처럼 기술적이고 빠른 인상을 주는 제품에 잘 맞습니다. 한국어 서비스에서 전체 본문에 쓰기보다는, 영문 제품명, 상태값, 코드성 라벨, 개발자 문서의 H1 같은 곳에 쓰고 한국어 본문은 Pretendard나 SUIT가 받치는 식이 자연스럽습니다.

Netflix, Airbnb, Stripe, Figma, BBC, NYTimes처럼 자체 폰트나 강한 브랜드 폰트를 쓰는 서비스도 많았습니다.

이런 폰트는 그대로 가져다 쓰기 어렵거나 라이선스상 불가능할 수 있습니다. 그래도 중요한 건 역할입니다. Netflix Sans는 엔터테인먼트 플랫폼의 강한 브랜드 톤을 만들고, Airbnb Cereal은 서비스 전체를 부드럽게 묶으며, BBC Reith나 NYTimes 계열은 뉴스와 에디토리얼의 권위를 만듭니다.

snapdeck에서는 이런 전용 폰트를 “쓸 수 있는 무료 폰트 추천”으로 오해시키지 않도록, 출처 기반 페어로만 다룹니다. 실제 프로젝트에 적용하려면 반드시 라이선스와 배포 가능 여부를 따로 확인해야 합니다.

정확도에 대해 솔직히 말하면

이번 데이터는 이전보다 훨씬 낫지만, 100% 완전한 정답은 아닙니다.

웹사이트의 CSS는 시점에 따라 바뀝니다. 2026년 6월 28일에 관찰한 값이 다음 달에도 그대로일 수는 없습니다. 어떤 사이트는 지역에 따라 다른 CSS를 내려주고, 어떤 사이트는 로그인 상태나 실험군에 따라 다른 폰트를 씁니다. 또 CSS에는 실제로 화면에 쓰이지 않는 fallback 폰트나 레거시 폰트가 남아 있을 수 있습니다.

그래서 이번 데이터는 다음처럼 읽어야 합니다.

“이 서비스는 공개 CSS에서 이런 폰트 계열이 관찰됐다.”

여기까지는 꽤 강한 근거입니다.

하지만 다음처럼 말하면 과합니다.

“이 회사의 공식 브랜드 폰트는 이것이다.”

그건 공식 브랜드 가이드나 라이선스 문서가 있어야 말할 수 있습니다.

snapdeck font는 실무 도구이기 때문에 이 차이를 중요하게 봅니다. 폰트 선택에서 가장 위험한 건 예쁜 이름을 빠르게 믿어버리는 일입니다. 이번 업데이트는 그 위험을 줄이기 위해, 적어도 관찰 가능한 근거를 가진 조합을 보여주려는 시도입니다.

그래서 사용자는 무엇을 얻나

이제 페어 탭을 열면 “요즘 좋아 보이는 조합”이 아니라 “실제 서비스 CSS에서 출발한 조합”을 먼저 볼 수 있습니다.

예를 들어 한국어 제품 UI를 만들고 있다면 Toss, Kakao, Musinsa, Inflearn, 29CM, Wanted, RIDI, Banksalad 같은 서비스에서 관찰된 흐름을 빠르게 비교할 수 있습니다.

영문 랜딩이나 글로벌 SaaS를 만들고 있다면 Apple, Google, Vercel, Stripe, Netflix, Airbnb, Figma, BBC, NYTimes 같은 서비스의 폰트 사용 흐름을 레퍼런스로 볼 수 있습니다.

물론 그대로 따라 쓰라는 뜻은 아닙니다. 좋은 레퍼런스는 복사 대상이 아니라 판단 기준입니다.

내 제품이 금융처럼 신뢰가 중요한지, 커뮤니티처럼 말투가 중요한지, 개발자 도구처럼 정확함이 중요한지, 커머스처럼 정보량이 많은지에 따라 폰트 선택은 달라집니다. 이번 페어 데이터는 그 판단을 조금 더 빨리 시작할 수 있게 해줍니다.

앞으로 더 보완할 것

첫 번째는 공식 가이드와의 교차 검증입니다.

이번 리서치는 공개 CSS가 중심입니다. 앞으로는 각 회사의 브랜드 가이드, 디자인 시스템 문서, 폰트 배포 페이지를 더 많이 연결해서 “관찰됨”과 “공식 문서 확인됨”을 구분하려고 합니다.

두 번째는 무료 대체 폰트 추천입니다.

Netflix Sans, Airbnb Cereal, SF Pro, BBC Reith, NYTimes 계열처럼 그대로 쓰기 어려운 폰트가 많습니다. 이런 경우에는 “이 서비스는 이런 톤을 쓴다”에서 끝나는 게 아니라, 비슷한 역할을 하는 공개 폰트 후보까지 이어져야 합니다. 예를 들어 전용 브랜드 폰트를 쓰지 못할 때 어떤 Google Fonts나 오픈 폰트가 역할상 가까운지 제안하는 식입니다.

세 번째는 페어의 설명 품질입니다.

지금은 출처 사이트와 감지된 폰트를 보여주는 수준입니다. 다음 단계에서는 왜 이 조합이 제품 UI에 맞는지, 어떤 화면에서 조심해야 하는지, 한글/영문 혼합 문장에서는 어떤 굵기부터 시작하면 좋은지까지 카드 안에서 더 잘 설명하고 싶습니다.

네 번째는 주기적 갱신입니다.

서비스 사이트의 CSS는 계속 바뀝니다. 이번에 만든 `reports/service-font-research.json`을 기준으로 나중에는 갱신 스크립트를 만들고, 변경된 폰트 사용 흐름을 추적할 수 있게 만들 계획입니다.

마무리

폰트는 취향처럼 보이지만, 실제 서비스에서는 운영의 결과입니다.

수많은 화면, 수많은 사용자, 수많은 문장을 견디는 과정에서 어떤 폰트는 살아남고 어떤 폰트는 사라집니다. 이번 업데이트는 그 현실에 snapdeck font를 조금 더 가까이 붙이는 작업이었습니다.

이제 페어 탭의 252개 조합은 적어도 “어디선가 봤을 법한 느낌”이 아니라, 실제 공개 서비스 CSS에서 출발한 데이터입니다.

아직 완벽하다고 말하고 싶지는 않습니다. 하지만 이전보다 훨씬 덜 가짜입니다. 그리고 폰트 선택 도구가 가져야 할 첫 번째 태도는 아마 거기서 시작한다고 생각합니다.

써보면서 이상한 조합이 보이면 알려주세요. 어떤 서비스의 폰트가 잘못 감지됐거나, 더 좋은 공식 근거가 있다면 그쪽으로 고치겠습니다.