카페24

히어로는 영상이 말하고, 조판은 스크롤 뒤부터 시작한다 — 48px/700 오스퀘어 제목이 120px 여백 사이에서 서른세 번 반복된다.

카페24는 검정 지면 위 영상 한 장으로 홈을 열고, 조판은 그 아래부터 시작하는 사이트입니다. 폴드에서 읽히는 큰 글씨는 영상 안에 그려진 픽셀이라 조판 값이 남지 않고, DOM으로 실측되는 폴드 텍스트는 34.6px 자막 한 줄뿐입니다. 대신 스크롤 아래와 서브페이지에는 48px 굵기 700 국문 섹션 제목이 서른세 번 같은 값으로 반복되고, 그 제목만 자사 배포 서체인 카페24 오스퀘어가 그리며 본문·UI는 전부 Pretendard가 맡습니다. 섹션 높이 860px과 위아래 여백 120px이 한 값으로 고정돼 있어, 기능 소개가 길게 이어지는 B2B 페이지의 반복 구조를 참고할 때 쓰기 좋습니다.

https://www.cafe24.com

Color Palette

Primary

Label

Line

Background

Static

Accent

Typography

Cafe24 Ohsquare ON · 700display·heading (제목 전용)

Pretendard · 400 / 500 / 600 / 700 / 900body·ui·caption·link (본문 전부)

Noto Sans KR · 300 / 500 / 700선언·로드만 관측 (렌더 0글리프)

Apple SD Gothic Neo · 400 / 500폴백 (한글 220글리프)

Arial · 400 / 500라틴 폴백

Type Scale자간이 거의 없는 사이트다 — raw 56스타일 중 자간이 붙은 것은 7건뿐이고(40px −0

display60px · 700 · 1.4

다람쥐 헌 쳇바퀴

h156px · 700 · 1.25

다람쥐 헌 쳇바퀴

h248px · 700 · 1.5

다람쥐 헌 쳇바퀴

hero-caption34.6px · 700 · 1.4

다람쥐 헌 쳇바퀴

h328px · 700 · 1.29

다람쥐 헌 쳇바퀴

card-title24px · 700 · 1.42

다람쥐 헌 쳇바퀴

lead22px · 400 · 1.5

다람쥐 헌 쳇바퀴

body18px · 400 · 1.5

다람쥐 헌 쳇바퀴

ui16px · 500 · 1.5

다람쥐 헌 쳇바퀴

caption14px · 400 · 1.71

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard 13,327글리프(86.4%) · Cafe24 Ohsquare ON 1,423(9.2%) · Pretendard SemiBold 290(1.9%) · Apple SD Gothic Neo 220(1.4%) · Pretendard Medium 156(1.0%) · Pretendard Black 4. 총 15,420글리프(CDP 10페이지, 1440)
hangulWeights	400 Pretendard 9,103(59.0%) · 700 Pretendard 4,088 + Cafe24 Ohsquare ON 1,389(합 35.5%) · 600 Pretendard SemiBold 290 + Ohsquare 34 · 500 Pretendard Medium 156 + Apple SD Gothic Neo 144 · 900 Pretendard Black 4. 696·699.5 같은 소수 웨이트가 136글리프 잡히는데 가변축 보간 잔재로 보인다(미확인)
body	18px w400 lh1.50 자간 0 (raw ×27) · 16px w500 lh1.50 (×18) · 14px w400 lh1.71 (×30, 푸터·메타)
sub	22px w400 lh1.50 (×4) — 서브페이지 섹션 리드. commerce 계열 섹션의 bodyPx가 22로 고정
label	16px w700 자간 −0.28px 링크(×22) · 15px w400 lh1.47(×9) · 14px w400 lh1.50 UI(×19)
mixing	제목은 Cafe24 Ohsquare(700 단일), 본문·UI는 Pretendard로 층을 나눈다. 같은 18px 안에서도 링크는 Ohsquare 700(×9), 소제목은 Pretendard 700(×11)으로 갈린다. 라틴 5,865글리프 중 Pretendard가 4,651(79.3%), Ohsquare가 940(16.0%)이라 영문 전용 서체는 없다
hangulHeadings	있다. 1440 layout 10페이지 기준 국문 48px/700 33건(섹션 제목 표준 + 마감 CTA) · 56px/700 2건(commerce/channel '마켓/SNS 판매' y0 h600 · commerce/design '쇼핑몰 디자인' y0 h520) · 60px/700 1건(category '동영상으로 배우기' y0 h537) · 40px/700 1건(홈 지표 '+200만') · 30px/700 1건 · 28px/700 4건 · 24px/700 36건(스토리 카드). 60px/700 나머지 3건은 라틴 'STORY'다. 다만 폴드 안에는 34.6px/700 자막 한 줄뿐이라 '국문 히어로'는 없다
verdict	국문 히어로 레퍼런스로는 부적합하다 — 홈 폴드를 덮는 대형 국문은 영상 안에 렌더된 픽셀이고, DOM으로 남는 값은 34.6px 자막 한 줄이다. 대신 국문 섹션 제목 레퍼런스로는 유효하다: 48px/700 자간 0이 33건 한 값으로 반복되고, 그 위로 56·60px 타이틀이 파스텔 밴드에서 열린다. 이식할 규칙은 '제목 서체(단일 700)와 본문 서체를 층으로 분리' + '섹션 높이 860 · padding 120/120 반복' 두 가지이며, 자간·라운드는 가져올 게 없다. weight 500 한글이 절반 OS 폰트로 떨어지는 것도 함께 알고 써야 한다
rendered	Pretendard ×13327 · Cafe24 Ohsquare ON ×1423 · Pretendard SemiBold ×290 · Apple SD Gothic Neo ×220 · Pretendard Medium ×156 · Pretendard Black ×4

영문 · Latin국문과 동일

latinFont	Pretendard 4,841글리프(82.5%) · Cafe24 Ohsquare ON 940글리프(16.0%) · Apple SD Gothic Neo 67글리프(1.1%) · Arial 17글리프(0.3%)
latinWeights	실측 페이스 SemiBold · Medium
share	라틴 5,865글리프 / 한글 15,420글리프 — 지면의 27.6%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: card-title 24px/700 · lead 22px/400 · body 18px/400 · ui 16px/500 · caption 14px/400
mixing	국영문 혼용 노드 758개(전체 1,950개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 27.6%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 82.5%를 그리는 Pretendard가 한글도 89.3% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard · Cafe24 Ohsquare ON · Apple SD Gothic Neo
rendered	Pretendard ×4651 · Cafe24 Ohsquare ON ×940 · Pretendard SemiBold ×143 · Apple SD Gothic Neo ×67 · Pretendard Medium ×47 · Arial ×17

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1280px
Section gap	서브페이지 표준 섹션은 padding 120/120에 높이 860~861px 고정 — commerce/channel §3~8이 이 값으로 여섯 번 연속된다. 스토리 카드 행은 16/16, 로고 스트립은 28/40, 스토리 타이틀은 141/80
Header	80px sticky
Content Widths	페이지 유형마다 다르다 — 홈·commerce 1280 · product 1240 · category 1200 · story 1080
Grid Home	6열 200×202 거터 16 r20px(§2) · 8열 560×560 거터 16(§4) · 6열 406×233 거터 26 r12px(§5) · 5열 218×86 거터 48(§8)
Grid Cards	3열 373×377 거터 40(commerce/channel §9) · 3열 373×350 거터 40(commerce/design §6) · 4열 387×380 거터 40(category §1)
Card Padding	홈 로고 스트립 123×56 거터 66 · 홈 리스트 아이콘 99×99 r19px bg rgb(26,29,34)
Button Padding	12×16(검정 알약 r100px) · 0×20(필터 칩 r30px) · 0×24(흰 알약 r999px) · 0×32(파랑 알약 r9999px) · 0×39.96(파랑 사각 r3.96px)

Border Radius

Role	Value	Preview
computed	3.96px	8회 · 파랑 사각 버튼 — 계산값이 그대로 남은 자리
small	4px	25회 · 작은 버튼·링크 박스
standard	6px	873회 · 표준 — div·a 전반. 라운드 사용의 대부분
card	8px	159회 · 카드·리스트 (0px 8px 8px 0px 부분 라운드 72회 포함)
medium	12px	38회 · 홈 다크 밴드 카드(406×233)
large	20px	46회 · 홈 6열 타일 200×202
xlarge	24px	36회 · 큰 카드·버튼
chip	30px	36회 · 카테고리 필터 칩(20px/700, pad 0×20)
circle	50%	19회 · 닫기·PiP 아이콘 버튼
pill	9999px / 100px / 999px	51회 · 헤더 CTA·마감 CTA·배지 (9999 39 + 100 10 + 999 2)

Guidelines

국문 섹션 제목은 48px/700 자간 0으로 고정한다 — 10페이지 33건이 같은 값이고, 페이지 마감 CTA까지 같은 단을 쓴다
제목만 Cafe24 Ohsquare(weight 700 단일), 본문·UI·링크는 Pretendard로 갈라 쓴다. 한 줄 안에서 섞지 않는다
기능 섹션은 높이 860px · padding 120/120으로 반복한다 — 여섯 개가 연속돼도 리듬이 흔들리지 않는다
서브페이지 오프닝은 파스텔 지면 밴드(h520~600, padTop 80) + 56px/700 제목 + 22px 리드로 연다
면은 6px(873회), 버튼만 알약(9999·100·999px 합 51회)으로 라운드를 두 값으로 좁힌다
모든 페이지를 #F4F5F8 지면 444px CTA 블록으로 닫는다 — 같은 문장·같은 크기로
회색 텍스트 #A6A6A6은 어두운 푸터(#1A1A1A, 7.15:1) 위에서만 쓴다

Don't

히어로 조판을 이 사이트에서 배우지 않는다 — 폴드의 큰 국문은 영상 안 픽셀이고 DOM 최대 텍스트는 34.6px 자막 한 줄이다
크기별 자간 규칙을 가져오지 않는다 — 56스타일 중 자간이 붙은 건 7건이고 제목 단은 전부 0이다
라운드 값을 그대로 복사하지 않는다 — 17종에 3.96px·19px 같은 계산값이 섞여 있다
라임 #BBF94F를 파랑 위에 얹지 않는다 (3.37:1, AA 미달) — 1페이지 24회짜리 프로모션 색이다
본문에 weight 500 한글을 주지 않는다 — 이 구간이 Pretendard Medium 156 대 Apple SD Gothic Neo 144로 갈려 OS마다 다르게 보인다
h1을 0px로 숨기지 않는다 — 10페이지 전부가 heading-1 0px/700(×9)이라 실측 도구에 유령 값을 남긴다
푸터 지면색을 페이지마다 바꾸지 않는다 — 홈만 #F0F2F3이고 나머지 9페이지는 #1A1A1A라 어긋난다