배달의민족
민트 한 색을 지면으로 깔고, 자체 서체 72px 두 줄이 화면 900px 하나를 통째로 쓴다.
배달의민족 브랜드 랜딩으로, 민트색 한 가지를 지면으로 깔고 검정 글씨만 얹어 회색 단계 없이 위계를 만듭니다. 화면 높이에 딱 맞춘 슬라이드 열세 장이 스크롤 대신 통째로 교체되고, 슬라이드마다 자체 서체로 짠 72px 국문 제목 두 줄이 화면 하나를 다 씁니다. 다만 제목을 뺀 나머지 한글은 웹폰트가 아니라 운영체제 기본 서체로 그려져, 본문 조판은 값만 참고할 수 있고 그대로 재현되지는 않습니다. 브랜드 색 하나로 밀어붙이는 풀스크린 랜딩의 사례입니다.
https://www.baemin.comColor Palette
Primary
Label
Fill
Background
Static
Accent
Typography
BAEMIN WORK · 400display (국문 대형 제목 72px·40px 전용)
Apple SD Gothic Neo · 400 / 600 / 700 / 800heading·body·ui — 한글 84.2% (OS 시스템 폰트, 웹폰트 아님)
.SF NS · 400 / 600 / 700 / 800라틴·숫자·공백·문장부호 전용 (한글 0글리프)
Pretendard · 700 / 800글로벌 페이지 전용 — nav '배달의민족' 16/700 한글 5글리프, 라틴 9 + Pretendard ExtraBold 96
Arial · 400ui — <button> UA 기본값 13.3333px
Type Scaleraw(1920)와 layout(1440)의 72·60px이 동일 — vw/clamp 아님
display72px · 400 · 1.4
다람쥐 헌 쳇바퀴
hero-sub60px · 800 · 1.4
다람쥐 헌 쳇바퀴
display-sm40px · 400 · 1.4
다람쥐 헌 쳇바퀴
footer-link30px · 700 · 1.3
다람쥐 헌 쳇바퀴
body20px · 600 · 1.45
다람쥐 헌 쳇바퀴
cta18px · 700 · 1.4
다람쥐 헌 쳇바퀴
nav16px · 700 · 1.4
다람쥐 헌 쳇바퀴
caption14px · 400 · 1.4
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Apple SD Gothic Neo (macOS 시스템, 943글리프 84.2%) — 웹폰트 아님, Mac/Windows에서 다르게 보임. 대형 제목만 BAEMIN WORK 웹폰트(172글리프 15.4%, self-hosted otf)이고 글로벌 nav의 Pretendard가 5글리프(0.4%). 이전 집계의 '.SF NS 203(24.9%)'은 한글 노드 안의 쉼표·공백·숫자를 한글로 센 허수였고, 재측정에서 .SF NS의 한글은 0글리프다 — 이 사이트의 한글은 브랜드 서체 15.4%를 뺀 나머지 전부가 OS 폰트라는 뜻이라, 'Windows에서 다르게 보인다'는 판정은 재측정 뒤 오히려 강해진다 |
| hangulWeights | 600 주력(Apple SD 732 — 20px 본문) · 400(BAEMIN WORK 172 + Apple SD 115 — 72px 제목·푸터) · 700(Apple SD 76 + Pretendard 5 — nav·푸터 링크·CTA) · 800(Apple SD 20 — 히어로 60px 2행 '브런치, 지금 배민됩니다' 정확히 일치) |
| body | 20px w600 lh1.45(=29px) ls−0.1px ×24, 시스템 폰트. 세미볼드 본문이 기본 — w400 본문은 14px 푸터뿐 |
| sub | 60px w800 lh1.40(=84px) ls 0, 시스템 폰트 — 히어로 부제 2행. 좌측 정렬, 콘텐츠 좌단(1440 기준 x 156) |
| label | 16px w700 lh1.4 (nav 3, #FFFFFF) · 18px w700 (CTA 1) · 14px w400 lh1.4 (푸터 7+3, #B1B3B5) |
| mixing | 층 분리 — 국문 대형 제목은 BAEMIN WORK 단일(72px, 글로벌 라틴 164글리프도 같은 폰트), 본문·UI는 -apple-system 선언 → Mac에서 한글 Apple SD Gothic Neo + 라틴·숫자·문장부호 .SF NS가 한 줄 안에서 섞임('입점 가게 수 1위,'). 영문 페이지(/en/global/)는 Pretendard·Pretendard ExtraBold(96글리프)로 따로 감 |
| hangulHeadings | 있음 — 72px w400 BAEMIN WORK 2행 ×8 슬라이드('세상 모든 것이 / 식지 않도록', '입점 가게 수 1위, / 음식 리뷰 수 1위', '시켜도 시켜도', '365일 연중무휴', '배달은 지금 옵니다', '마음을 배달해드려요', '대용량 택배배송', '10초 만에 결제 완료') + 히어로 60px w800 시스템 폰트 2행. 전부 p 태그(h1 비어 있음). 히어로의 민트 대형 문구('아침의 여유 / 식지 않도록')는 텍스트 노드가 아님 → 이미지/SVG 추정, 미확인 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 유효 — 자체 서체 72/400/lh1.4/자간 −4% 2행 + 화면 1장 1제목 구조, 실측값 있음. 본문 조판(20/600/1.45)은 OS 폰트라 값만 참고하고 폰트 재현 불가(Windows 렌더 미확인). 슬라이드 1–8 캡처 없음 — 시각 검증은 scroll.webm 또는 재캡처 필요 |
| rendered | .Apple SD Gothic NeoI ×943 · BAEMIN WORK ×172 · Pretendard ×5 |
영문 · Latin영문 전용
| latinFont | .SF NS 1,634글리프(81.7%) · Arial 182글리프(9.1%) · Pretendard 105글리프(5.3%) · BAEMIN WORK 78글리프(3.9%) |
| latinWeights | 실측 페이스 ExtraBold |
| share | 라틴 1,999글리프 / 한글 1,120글리프 — 지면의 64.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다 |
| mixing | 국영문 혼용 노드 50개(전체 146개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | .SF NS 폴백(81.7%) · Arial 폴백(9.1% · 선언됨) · Pretendard 영문 전용(5.3% · 선언됨) |
| verdict | 영문 전용 서체가 있다 — .SF NS 라틴 81.7% / 한글 0.0% · Arial 라틴 9.1% / 한글 0.0% · Pretendard 라틴 5.3% / 한글 0.4%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · BAEMIN WORK |
| rendered | .SF NS ×1634 · Arial ×182 · Pretendard ExtraBold ×96 · BAEMIN WORK ×78 · Pretendard ×9 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 미확인 | |
| Max width | 1128px | |
| Section gap | 0 — 13개 섹션 전부 height 900(=뷰포트)·y=index×900·paddingTop/Bottom 0. 여백 대신 화면 교체 | |
| Header | 96px fixed | |
| Grid Slides | 풀스크린 슬라이드 1440×900 ×9(홈) / ×4(글로벌). 콘텐츠 1128 중앙 → 1440 기준 좌우 156. 1920 기준 로고 x 395 = (1920−1128)/2=396과 1px 차로 일치 | |
| Grid Rows | 슬라이드 본문 행 1128×29 ×3–4(홈) · 648×89 / 1128×89 ×3(글로벌 피처) · 840×62 ×4(글로벌 FAQ) | |
| Card Padding | 앱 다운로드 카드 14×19·높이 54는 OmD 실측(2026-07-11) — 우리 raw엔 없음(미확인). 캡처상 카드 높이 ≈54 일치 | |
| Button Padding | 16×32 (검정 알약 CTA ×1) | |
| Footer Global | 152px bg #1A1A1A (글로벌 페이지) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| standard | 12px | 3회 · 앱 다운로드 카드 3개(App Store·Google Play·QR) |
| large | 16px | 1회 · div 1개, 위치 미확인 |
| pill | 9999px | 1회 · 검정 CTA '기업용 상품권 구매하기' |
Guidelines
Do
- 지면은 민트 #0CEFD3 한 색, 텍스트는 #000000 — 대비 14.3:1(×48)이라 회색 단계 없이 검정 하나로 위계를 만든다
- 국문 대형 제목은 자체 서체 BAEMIN WORK 72px w400 lh1.4 자간 −4%(−2.88px) 2행으로, 슬라이드 하나에 제목 하나
- 섹션은 뷰포트 높이 900 1:1로 자르고 padding 0 — 13/13 전부. 여백이 아니라 화면 교체로 리듬을 만든다
- 본문은 20px w600 lh1.45(29px) 3–4행, 콘텐츠 폭 1128 안에서만
- 흰 카드(#fff r12)는 앱 다운로드 3개에만, 검정 알약(9999)은 CTA 1개에만 — 액션 요소 총 4개
- 헤더는 96px fixed 투명, 로고 32px를 상하 32px 대칭으로 앉힌다
- 정보 밀도가 높은 화면(푸터·FAQ)은 검정 #000000 풀스크린으로 반전한다 — 홈 푸터 900px, 글로벌 FAQ 900px
Don't
- 그림자·보더·그라디언트를 쓰지 않는다 (shadows 0 · borders.combinations 0 · gradients 0)
- 민트 위에 회색 텍스트를 올리지 않는다 — 민트 위 텍스트는 #000000(×48)뿐, 회색 #B1B3B5는 검정 위(×10)에만
- 본문을 Pretendard로 깔고 '배민 결'이라 하지 않는다 — 본문은 OS 시스템 폰트(Apple SD Gothic Neo 943글리프 84.2%)이고 브랜드 서체는 72·40px 제목 172글리프(15.4%)에만
- 14px 미만 텍스트·회색 캡션 단계를 만들지 않는다 (최소 14px w400 ×10, 회색은 한 단계)
- 슬라이드 안에 카드 그리드를 넣지 않는다 (repeated 1128×29는 본문 행이지 카드가 아님, 카드 그리드 0/13)
- 섹션 사이 여백을 두지 않는다 — sectionGap 0, y=index×900
- 라운드를 12·9999 밖으로 늘리지 않는다 (16px 1회는 위치 미확인)
