냠냠픽업

테마

YumYum 디자인 시스템 — 타이포그래피 토큰 v2 ​

냠냠픽업 디자인 시스템 타이포그래피 가이드 작성일: 2026-05-13 버전: v2.0

1. 디자인 원칙 ​

1.1 핵심 컨셉 ​

  • 명확하고 친근하게 — 식음료 픽업 서비스에 맞는 톤
  • 한글 가독성 절대 우선 — 한국 서비스
  • Pretendard 베이스, LaundryGothic은 임팩트용 (컬러 시스템의 Tier 구조와 동일)

1.2 폰트 사용 비율 ​

  • Pretendard (Tier 1): 95% (모든 본문, UI 텍스트)
  • LaundryGothic (Tier 2): 5% (로고, 온보딩, 이벤트성 헤드라인)

1.3 Tier 구조 ​

Tier폰트용도사용 빈도
Tier 1 — BasePretendard본문, 라벨, 버튼, 일상 UI95%
Tier 2 — DisplayLaundryGothic로고, 온보딩, 이벤트 배너, 빅넘버, 마스코트 인용구5%

2. 폰트 패밀리 ​

2.1 Pretendard (Tier 1) ​

가장 안정적인 한글 가독성을 제공하는 범용 폰트.

  • 본문, 모든 UI 텍스트
  • 9단계 weight 제공 (Thin~Black), 4단계만 사용
  • 영문, 숫자도 포함 (별도 영문 폰트 불필요)
  • 가격 표시 같은 숫자 정렬에는 font-variant-numeric: tabular-nums 활용

2.2 LaundryGothic (Tier 2) ​

특이한 굴곡과 개성으로 브랜드 임팩트를 주는 디스플레이 폰트.

쓰는 곳

  • 로고 (필수)
  • 온보딩 헤드라인
  • 이벤트 배너 제목
  • 빅넘버 강조 (가격, 절약 금액)
  • 시즌 캠페인 타이틀
  • 마스코트 인용구

쓰지 않는 곳

  • 긴 본문 (가독성 떨어짐)
  • 버튼, 라벨 등 일관된 UI 패턴
  • 3줄 이상의 텍스트

기본 규칙

  • 한 화면에 LaundryGothic은 1~2곳만
  • 짧고 감정 표현이 필요한 곳에서만

2.3 CSS Variables ​

css
--font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-family-display: 'LaundryGothic', 'Pretendard', sans-serif;

3. Font Weight ​

Pretendard의 9단계 weight 중 4단계만 사용. 더 많이 쓰면 위계가 흐려짐.

TokenValue사용 비율용도
font-weight-regular40080%본문, 긴 텍스트, 보조 텍스트 (기본값)
font-weight-medium50015%라벨, 버튼, 메뉴명 (한글에서 가장 많이 쓰는 강조)
font-weight-semibold6004%작은 제목, 가격 강조, 섹션 헤딩
font-weight-bold7001%큰 제목, 빅넘버, Hero 헤드라인 (아껴 사용)

LaundryGothic은 Bold 1단계만 사용.

사용하지 않을 Weight ​

  • Thin(100), ExtraLight(200), Light(300): 한글에서 너무 얇아 가독성 떨어짐
  • ExtraBold(800), Black(900): 한글에서 너무 무거워 답답함

한글 vs 영문 Weight 차이 ​

한글은 자소가 많아 같은 weight에서도 영문보다 무겁게 느껴짐. 영문 디자인 시스템에서 Bold를 쓰는 자리도, 한글에서는 SemiBold로 충분한 경우가 많음.

4. Type Scale (Primitives) ​

기준점은 16px (base). 한글 모바일 본문 가독성의 황금 기준.

TokenSize비율용도
text-xs12px—캡션, 부가 정보
text-sm14px×1.17보조 본문
text-base ⭐16px×1.14기본 본문 (기준점)
text-lg18px×1.125강조 본문, 작은 제목
text-xl22px×1.22서브타이틀
text-2xl28px×1.27페이지 헤딩
text-3xl36px×1.29큰 헤딩, Display
text-4xl48px×1.33Hero, 빅넘버

모든 단계가 1.1~1.3배 비율로 자연스러운 흐름을 만들어냄.

5. Line Height & Letter Spacing ​

5.1 핵심 원칙 ​

"폰트 크기가 클수록 줄높이와 자간을 좁게"

큰 글자는 자간이 자연스럽게 벌어져 보이므로 좁혀야 하고, 작은 글자는 빽빽해 보이므로 띄워야 함 (착시 보정).

5.2 Line Height Scale ​

TokenValue용도
lh-tight1.1Display, 빅넘버
lh-snug1.2큰 헤딩 (3xl 이상)
lh-condensed1.3헤딩 (2xl)
lh-normal1.4서브타이틀 (xl)
lh-relaxed1.5작은 본문, 라벨, 캡션
lh-loose1.6본문 (base, lg) ⭐

5.3 Letter Spacing Scale ​

TokenValue용도
ls-tight-0.02emDisplay, 큰 헤딩 (3xl 이상)
ls-snug-0.01em헤딩 (xl, 2xl)
ls-normal0본문, 라벨
ls-wide0.01em작은 텍스트 (xs, 캡션)

6. 의미별 토큰 (Semantic Tokens) ​

Primitives를 조합한 실제 사용 토큰. 디자이너가 바로 가져다 쓰는 단위.

6.1 Display (빅넘버, Hero 헤드라인) ​

TokenSizeWeightLine H.Letter S.용도
display48pxBold (700)1.1-0.02emHero 헤드라인, 빅넘버 (한 화면 1개 이하)
display-sm36pxBold (700)1.2-0.02em큰 헤드라인

6.2 Heading (제목) ​

TokenSizeWeightLine H.Letter S.용도
heading-lg28pxSemiBold (600)1.3-0.01em페이지 제목, 매장명
heading-md22pxSemiBold (600)1.4-0.01em섹션 제목
heading-sm18pxSemiBold (600)1.50카드 제목, 소제목

6.3 Body (본문) ​

TokenSizeWeightLine H.Letter S.용도
body-lg18pxRegular (400)1.60강조 본문, 인용구
body ⭐16pxRegular (400)1.60기본 본문 (모든 본문은 일단 이걸로 시작)
body-sm14pxRegular (400)1.50보조 본문, 설명문

6.4 Label (버튼, 라벨, UI 텍스트) ​

TokenSizeWeightLine H.Letter S.용도
label-lg16pxMedium (500)1.50큰 버튼, 메인 CTA
label14pxMedium (500)1.50기본 버튼, 라벨, 메뉴명
label-sm12pxMedium (500)1.50.01em작은 뱃지, 태그

6.5 Caption (캡션, 부가 정보) ​

TokenSizeWeightLine H.Letter S.용도
caption12pxRegular (400)1.50.01em캡션, 부가 정보, 시간 표시

7. 사용 가이드라인 ​

7.1 토큰 선택 흐름 ​

1. 어떤 종류의 텍스트인가?
   - 가장 강조하고 싶은 한 줄? → Display
   - 제목? → Heading (lg/md/sm)
   - 본문? → Body (lg/기본/sm)
   - 버튼/라벨? → Label (lg/기본/sm)
   - 작은 부가 정보? → Caption

2. 크기 변형이 필요한가?
   - 더 크게 → -lg
   - 더 작게 → -sm

7.2 한 화면에서의 위계 ​

좋은 위계는 보통 3~5단계가 한 화면에 등장.

예시 — 매장 상세 화면

  • 매장명: heading-lg
  • 픽업 정보 제목: heading-sm
  • 본문 설명: body-sm 또는 body
  • 가격: display-sm 또는 heading-md
  • 주문 버튼: label-lg
  • 부가 정보: caption

7.3 Tier 2 (LaundryGothic) 적용 ​

같은 의미 토큰을 Tier 2 폰트로도 쓸 수 있음:

  • display-sm + LaundryGothic → 온보딩 헤드라인
  • heading-lg + LaundryGothic → 이벤트 배너 제목
  • display + LaundryGothic → 빅넘버 강조

기본은 Pretendard. 특별한 임팩트가 필요할 때만 font-family를 LaundryGothic으로 바꿈.

8. CSS Variables 구현 예시 ​

css
:root {
  /* Font Family */
  --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-family-display: 'LaundryGothic', 'Pretendard', sans-serif;

  /* Font Weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type Scale (Primitives) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;

  /* Line Height */
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-condensed: 1.3;
  --lh-normal: 1.4;
  --lh-relaxed: 1.5;
  --lh-loose: 1.6;

  /* Letter Spacing */
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.01em;
}

/* Semantic Tokens */
.text-display {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.text-display-sm {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.text-heading-lg {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-condensed);
  letter-spacing: var(--ls-snug);
}

.text-heading-md {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-snug);
}

.text-heading-sm {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
}

.text-body-lg {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-normal);
}

.text-body {
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-normal);
}

.text-body-sm {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
}

.text-label-lg {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
}

.text-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
}

.text-label-sm {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-wide);
}

.text-caption {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-wide);
}

/* Tier 2 — LaundryGothic 변형 */
.text-display.is-display-font,
.text-heading-lg.is-display-font {
  font-family: var(--font-family-display);
}

9. Figma 적용 방법 ​

9.1 Text Style 구조 권장 ​

Yumyum/
├── Display/
│   ├── display
│   └── display-sm
├── Heading/
│   ├── heading-lg
│   ├── heading-md
│   └── heading-sm
├── Body/
│   ├── body-lg
│   ├── body ⭐ (기본)
│   └── body-sm
├── Label/
│   ├── label-lg
│   ├── label
│   └── label-sm
├── Caption/
│   └── caption
└── Display-LaundryGothic/ (Tier 2 변형)
    ├── display-laundry
    └── heading-laundry

9.2 권장 Figma 플러그인 ​

  • Tokens Studio — JSON으로 타이포그래피 토큰 일괄 import/export
  • Typestyles — 텍스트 스타일 일괄 변경 관리

10. 기존 vs 신규 비교 ​

항목기존v2 (신규)
단계 수8개 (정의 모호)12개 의미별 토큰
사이즈 분포28/18/17/16/14/12/10 (들쭉날쭉)12/14/16/18/22/28/36/48 (균등)
Weight 사용Bold/SemiBold/Regular 혼재, 일관성 ✗Regular/Medium/SemiBold/Bold, 4단계 명확
Line Height정의 없음6단계 (1.1~1.6)
Letter Spacing정의 없음4단계 (-0.02em ~ 0.01em)
폰트 패밀리1개 (LaundryGothic)Tier 구조 (Pretendard + LaundryGothic)
명명 체계h1/h2/h3 + title + body 혼재카테고리-사이즈 일관 체계
한글 최적화없음한글 가독성 기준 설계

11. 다음 단계 ​

타이포그래피 시스템이 자리잡으면, 다음 디자인 시스템 요소도 같은 방식으로 정리:

  • [ ] Spacing — 4px 베이스 그리드 (4, 8, 12, 16, 24, 32, 40, 64)
  • [ ] Radius — 4, 8, 12, 16, 24 (pill)
  • [ ] Elevation/Shadow — 0~4단계
  • [ ] Components — Button, Input, Card, Modal, Badge, Toast 등 (컬러 + 타이포 토큰 조합)
  • [ ] Stratis UI Icons — Stratis UI Icons 통일, 사이즈 가이드

이 문서는 살아있는 문서입니다. 디자인 시스템이 발전하면서 함께 업데이트하세요.

냠냠픽업 — 지속가능한 중개수수료 2% 음식 픽업 서비스

© 2026 YumYum