야나두

흰 지면 위 노랑 브랜드 면과 −4% 자간의 66px 굵은 국문 제목, 그 사이 본문은 이미지가 대신 말한다.

영어 학습 커머스입니다. 흰 지면에 노랑 브랜드 면을 큰 덩어리로 끼우고, 66px까지 커지는 굵은 국문 제목에 −4% 자간을 걸어 단단히 뭉쳐 놓습니다. 제목만 담은 127~184px 높이의 띠와 통짜 이미지 블록이 번갈아 나오는 구성이라 본문의 상당 부분을 이미지가 대신하고, 첫 화면도 텍스트 제목 없이 이미지입니다. 48px 이상 국문 제목이 11곳이라 대형 제목 조판 참고로는 유효하지만, 회색 텍스트의 대비가 여러 곳에서 기준에 못 미치니 색은 그대로 베끼면 안 됩니다.

https://www.yanadoo.co.kr

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Noto Sans KR (선언명 NotoSansCJKkr) · 300 / 400 / 500 / 700 / 900한글 전체 — display·heading·body·ui

Inter · 300 / 400 / 500 / 700 / 800라틴·숫자·공백

Apple SD Gothic Neo · 400 / 700OS 폴백 — 라틴·숫자 (한글 아님)

Type Scaleraw 1920에서 55스타일이 잡혔고 전부 NotoSansCJKkr 선언이다

display66px · 700 · 1.5

다람쥐 헌 쳇바퀴

h160px · 700 · 1.4

다람쥐 헌 쳇바퀴

h250px · 700 · 1.2

다람쥐 헌 쳇바퀴

h332px · 700 · 1.25

다람쥐 헌 쳇바퀴

card-title25px · 700 · 1.2

다람쥐 헌 쳇바퀴

body18px · 400 · 1.5

다람쥐 헌 쳇바퀴

ui16px · 700 · 1.4

다람쥐 헌 쳇바퀴

nav15px · 400 · 1.2

다람쥐 헌 쳇바퀴

body-sm14px · 400 · 1.43

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.33

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Noto Sans KR (선언 NotoSansCJKkr, self-hosted 15파일) — 한글 23,538글리프 중 23,515글리프 = 99.9%. 선언 스택은 NotoSansCJKkr → Inter → Apple SD Gothic Neo → Malgun Gothic → Noto Sans KR → sans-serif이고, 2~3순위(Inter 17 · Apple SD Gothic Neo 6)가 그리는 한글은 23글리프뿐이다
hangulWeights	400 Regular 16,733 · 700 Bold 3,779 · 500 Medium 1,651 · 900 Black 1,352. 600 선언은 38글리프뿐이고 Bold로 그려진다(가변폰트가 아니라 웨이트가 없다)
body	18px/400 lh1.5 자간 0 (회사소개 752px 컬럼) · 16px/700 lh1.4 · 15px/400 lh1.2
sub	이벤트 주석 17px/400 lh1.2, 히어로 캡션 14px/500 ('* 소리를 켜고 감상해 주세요')
label	14px/500 lh1.0 ls −0.14px · 12px/400 lh1.33 · 10px/400 · 10px/700
mixing	한 줄 안에서 갈린다 — '야나두 클래스' 14/400은 한글 Noto Sans KR Regular×6 + 공백 Inter×1, '💵 영어 지원금 최대 지원' 15/500은 한글 Noto Sans KR Medium×9 + 라틴·공백 Inter Medium×4 + Apple Color Emoji×1. 즉 국문은 Noto, 숫자·라틴·공백은 Inter가 그리고, 한글만 떼어 재측정하면 Inter 몫은 17글리프(0.1%)로 사라진다. 두 서체의 x-height·자간이 달라 '2,700만 뷰'·'795만'처럼 숫자가 큰 카피에서 혼합 티가 난다
hangulHeadings	있다. 48px 이상 국문 제목이 11곳 — 66/700 ×2(홈 '2,700만 뷰'·'아는단어 확장 학습법') · 63/700(YndknownWords '아는 단어 확장 학습법') · 62/700(홈 '영어는 취미가 됩니다') · 60/700 ×2 · 58/700 ×2 · 50/700 ×2 · 48/700. 전부 weight 700, 자간 −4%
verdict	국문 대형 제목 레퍼런스로 유효하다 — 48px↑ 국문 제목 11곳, 최대 66px/700 자간 −4%, 제목 밴드를 127~184px 높이로 따로 세워 이미지 블록 사이에 끼우는 패턴이 홈·YndknownWords에서 반복된다. 다만 국문 '히어로' 레퍼런스로는 부적합하다 — 폴드 첫 화면(홈 662px 배너·이벤트 893px·YndknownWords 1,126px)은 전부 이미지이고 텍스트 제목이 없다. 실측 가능한 최대 폴드 제목은 회사소개 히어로의 45px/700('야나두 대표 김민철입니다.', 지면 #28284B 1,020px)이다. 본문·UI 조판 레퍼런스로는 자간 0 규칙과 Noto Sans KR 웨이트 운용(400/700/900)이 쓸 만하고, 대비는 그대로 베끼면 안 된다.
rendered	Noto Sans KR Regular ×16432 · Noto Sans KR Bold ×3779 · Noto Sans KR Medium ×1651 · Noto Sans KR Black ×870 · Inter ×14 · Apple SD Gothic Neo ×6 · Inter Medium ×3

영문 · Latin영문 전용

latinFont	Inter 7,754글리프(69.6%) · Noto Sans KR 1,941글리프(17.4%) · Apple SD Gothic Neo 1,435글리프(12.9%) · Apple Color Emoji 13글리프(0.1%)
latinWeights	실측 페이스 Regular · Medium · ExtraBold · Bold · Black
share	라틴 11,143글리프 / 한글 22,755글리프 — 지면의 32.9%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다
mixing	국영문 혼용 노드 827개(전체 2,100개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Inter 영문 전용(69.6% · 선언됨) · Apple SD Gothic Neo 폴백(12.9%)
verdict	영문 전용 서체가 있다 — Inter 라틴 69.6% / 한글 0.1% · Apple SD Gothic Neo 라틴 12.9% / 한글 0.0%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다
sharedWithKorean	국문과 같은 서체: Inter · Noto Sans KR · Apple SD Gothic Neo
rendered	Inter ×7028 · Noto Sans KR Regular ×1661 · Apple SD Gothic Neo ×1435 · Inter Medium ×385 · Inter ExtraBold ×341 · Noto Sans KR Bold ×222 · Noto Sans KR Medium ×46 · Apple Color Emoji ×13 · Noto Sans KR Black ×12

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	9px
Max width	1200px
Section gap	섹션 자체 padding은 대부분 0 — 여백이 이미지 안에 들어 있다. 명시 padding이 있는 곳은 홈 422/0(y3486)·176/208(y12252)·0/252(y5592), 이벤트 148/140(y9301)·100/150(y10465)·120/107(y4944), 상품 상세 100/0(y9972)·41/41(y1193)
Header	113px sticky
Grid Store	4열 282px + 거터 24px = 1200 정확히 (282×4 + 24×3). store-career 'Best Seller'·'MD's Pick'·'NEW' 세 그리드 공통
Grid Center	고객센터 공지 2열 553px + 거터 88px = 1194 (컨텐츠 폭 1196)
Content Widths	1200(홈·공지·약관·스토어 목록·YndknownWords) · 1196(이벤트·고객센터) · 788(상품 상세, 본문 786) · 752(회사소개, 히어로 블록 806)
Card Padding	상품 카드 282×282 · 강사 썸네일 81×80 거터 25 · 커리큘럼 행 786×59 · 후기 카드 786×170 · 공지 행 1200×69 · 이벤트 리스트 1194×394
Button Padding	12×30 (필터 칩 r34px) · 14×0 (결제 버튼 r6) · 21×0 (목록보기 r4) · 0 (헤더 탭 버튼)

Border Radius

Role	Value	Preview
small	2px	7회 · 인라인 배지(span)
small	4px	12회 · 아웃라인 버튼('앱으로 이동'·'목록보기')
standard	5px	89회 · 카드·박스 표준(div). 최다
standard	6px	11회 · 결제 버튼·배지(span)
medium	12px	4회 · 이미지 썸네일
medium	16px	3회 · 블록(div)
large	18px	6회 · 목록 아이템(li)
large	40px	20회 · 영상 프레임·칩(video/div). 고객센터 FAQ 칩 119×38·검색 칩 164×40
circle	50%	14회 · 아바타·아이콘
pill	24774px	3회 · 알약 버튼. 20000px×2 · 38506px×1 · 100px×2도 같은 의도

Guidelines

국문 제목 자간은 −4%로 고정한다 — 66px −2.64 · 60px −2.4 · 50px −2 · 25px −1, 25px 이상 전 단이 −3~−4% 안에 있다
16px 이하(16·15·14·12px, count 합 116)는 자간을 건드리지 않는다(0). 이 사이트는 작은 글자에 양수 자간을 주지 않는다
1200px 중앙 컬럼을 잡고 카드는 282×4 + 거터 24로 정확히 채운다. 상품 상세만 788(본문 786)로 좁힌다
노랑을 역할별로 갈라 쓴다 — 채운 배경 #FFB900(위에 검정 글자, 12.19:1), 아웃라인 CTA #FF9900, 지면 #FFD03B·#F6C43F·#FFF6CD
제목 웨이트는 700, 스토어 카드·섹션 라벨은 900을 쓴다(Noto Sans KR Black 실렌더 한글 1,352글리프)
헤더는 113px 스티키 흰색으로 10페이지 전부 동일하게 유지한다
긴 지면을 색으로 끊는다 — 흰 지면 사이에 #28284B(1,020px)·#000000(936·1,240px)·#FFF6CD(1,349px)·#FA75BB(1,100px)를 통째로 넣는다

Don't

본문·보조 텍스트를 #A0A0B6(2.56:1 ×122)·#8D8DA0(3.26:1 ×75)·#717188 on #F7F7FC(4.45:1 ×906)로 쓰지 않는다 — 최다 대비쌍 906회가 AA 미달이다
#FFB900·#FF9900 위에 흰 글자를 얹지 않는다(1.72:1 ×7 · 2.14:1 ×7). 노랑 위 글자는 검정이다
라운드를 25종으로 흩지 않는다 — 5px(89회)를 표준으로 잡고, 알약은 24774px·38506px·20000px 같은 계산값 대신 9999px로 고정한다
#007AFF(swiper-button-next 4회)를 브랜드색으로 착각하지 않는다 — 슬라이더 기본 스타일 잔재다
본문 조판을 이미지로 대체하지 않는다 — 홈 22섹션 중 제목 텍스트가 있는 건 9곳(48px↑ 8곳)뿐이고 이미지가 80장이다(이벤트는 17섹션에 이미지 92장·제목 4곳). 검색·번역·확대가 전부 막힌다
약관·정책 페이지의 영문·숫자를 스택 폴백에 맡기지 않는다 — 그 페이지의 라틴·숫자·공백 1,425글리프가 OS 폰트 Apple SD Gothic Neo로 그려져 Windows에서 Malgun Gothic으로 바뀐다. 한글은 Noto Sans KR 웹폰트가 받으므로 국문 조판만 안전하다
9px·25px·31px·35px 같은 실측 최빈 여백(9px 3,105회)을 스케일로 승격하지 않는다 — 8px 배수 규칙이 지켜진 적이 없다는 기록일 뿐이다