밀리의서재

흰 지면 위에 20px 제목 한 줄과 표지 카드 한 줄, 그것을 열두 번 반복해 만든 서점 매대.

밀리의서재는 전자책·웹툰 구독 서비스의 콘텐츠 포털로, 서점 매대처럼 표지 카드가 줄줄이 깔린 인상입니다. 20px 굵은 섹션 제목 한 줄과 가로 캐러셀 한 줄을 열 번 넘게 반복해 화면을 만들고, 한 페이지에 표지를 수천 장까지 쌓습니다. 국문 제목은 44px이 상한이고 자간 규칙도 없어 대형 조판 레퍼런스로는 약합니다. 대신 20px 제목에서 12px 캡션까지 촘촘히 내려가는 콘텐츠 UI 위계와, 목록이 많은 화면의 밀도를 참고하기 좋습니다.

https://www.millie.co.kr

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard Variable · 300 / 400 / 500 / 600 / 700 / 900display·heading·body·ui·caption, 한글 96.6%

NotoSerifKR (CDP 보고명 'OTS derived font') · 300serif quote (인용·리뷰 본문)

Apple SD Gothic Neo · 400 / 700fallback (문장부호)

NotoSansKR · 400 / 700미사용 (로드만 됨)

Type Scaleraw 1920 기준 33스타일, 크기는 44 → 0px까지 흩어져 있고 layout 1440 실측 제목도 44·36·24·20·18·16·14·12로 같은 단을 쓴다(clamp/vw 흔적 없음)

display44px · 700 · 1.23

다람쥐 헌 쳇바퀴

h136px · 700 · 1.44

다람쥐 헌 쳇바퀴

h224px · 700 · normal

다람쥐 헌 쳇바퀴

section-title20px · 700 · normal

다람쥐 헌 쳇바퀴

h418px · 600 · 1.28

다람쥐 헌 쳇바퀴

body16px · 400 · 1.5

다람쥐 헌 쳇바퀴

serif-quote16px · 300 · 1.75

Handgloves 123

label14px · 400 · normal

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.5

다람쥐 헌 쳇바퀴

micro11px · 600 · 1.27

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable — 한글 32,783글리프(33,941 중 96.6%), self-host PretendardVariable.subset.*.woff2 27파일
hangulWeights	400 주력 23,870 · 700 6,741 · 600 1,976 · 900 188 · 500 8. 300은 전부 세리프(NotoSerifKR 879)라 산세리프 라이트는 0이다
body	16px/400 lh1.50 자간 0(raw 22회). 굵은 대응 16px/700 lh1.38(22회)이 같은 수로 붙어 다닌다
sub	18px/400 lh1.78(2회) — 밀리플레이스 히어로 부제 '읽는 사람들의 작은 책방,'. 44px 제목 아래 한 단계
label	14px/400(26회, 칩·메타) · 14px/700(12회) · 12px/400 lh1.50(15회) · 11px/600(2회) · 10px/400(7회)
mixing	국영문 단일 서체다 — 라틴 1,287글리프도 Pretendard Variable이 그리고 영문 전용 디스플레이 서체가 없다. 층을 나누는 유일한 서체는 세리프 인용(NotoSerifKR 300, 879글리프)이고, 여기에만 자간 −0.6px이 붙는다. macOS에서는 Pretendard 서브셋에 없는 문장부호 145글리프가 Apple SD Gothic Neo로 떨어진다(아티클 h1 '《…》' 2글리프) — Windows에서는 다른 폰트가 그 자리를 메운다
hangulHeadings	있음 — 44px/700 국문 히어로 2곳(홈 '전 국민이 먹은 그 빵', 밀리플레이스 '동네한바퀴 인터뷰'·'일상 한쪽을 내어줘요', raw count 2)과 36px/700 아티클 h1 1곳. 48px 이상은 0이고, 나머지 페이지의 최대 제목은 24px 또는 20px이다
verdict	국문 대형 조판 레퍼런스로는 약하다 — 상한 44px, 자간 규칙 0종, 히어로가 배너 캐러셀이라 조판이 아니라 이미지가 화면을 만든다. 대신 20px/700 섹션 제목(21회) → 16px/400 본문(22회) → 14px/400 칩(26회) → 12px/400 캡션(15회)으로 내려가는 조밀한 국문 콘텐츠 UI 조판과, 표지 카드가 수백 장 깔린 목록형 화면의 위계 레퍼런스로 유효하다.
rendered	Pretendard Variable ×30793 · OTS derived font ×1289 · Apple SD Gothic Neo ×3

영문 · Latin국문과 동일

latinFont	Pretendard 18,195글리프(97.0%) · OTS derived font 297글리프(1.6%) · Apple SD Gothic Neo 134글리프(0.7%) · Apple Color Emoji 123글리프(0.7%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 18,758글리프 / 한글 32,085글리프 — 지면의 36.9%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display 44px/700 · h1 36px/700 · h2 24px/700 · section-title 20px/700 · h4 18px/600 · body 16px/400 · label 14px/400 · caption 12px/400 · micro 11px/600
mixing	국영문 혼용 노드 864개(전체 2,686개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 36.9%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 97.0%를 그리는 Pretendard가 한글도 96.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard · OTS derived font · Apple SD Gothic Neo
rendered	Pretendard Variable ×18195 · OTS derived font ×297 · Apple SD Gothic Neo ×134 · Apple Color Emoji ×123 · Apple Symbols ×4 · fontello ×3 · Zapf Dingbats ×2

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	compact
Base unit	4px
Max width	1392px
Section gap	섹션 사이 마진이 없다 — padding만으로 나눈다. 홈 11섹션 32/32
Header	65px sticky
Content Widths	1392(홈·고객센터·검색·웹툰 선반·랭킹, 후보 1392×104) · 1400(밀리플레이스·기획전) · 652(아티클 상세, 후보 652×30) · 500(이벤트 상세). 1440 뷰포트에서 1392는 좌우 24px만 남기는 사실상 풀블리드다
Grid Home	홈 카드 캐러셀 7종 — 145×264 g12 · 290×485 g12 · 272×350 g12 · 327×190 g16 · 280×424 g12 · 334×334 g41 r12 · 688×152 g16 r12
Card Padding	웹툰 선반 표지 145×268~299 g12(19섹션 동일) · 밀리플레이스 장소 242×302·335×248 g12 · 고객센터 리뷰 222×351 g14 ×18 · 기획전 264×342 g20 ×13
Button Padding	0×24 (알약 CTA) · 0×12 (사각 소형) · 0×10 (칩·담기) · 4×10 (오버레이 배지)
Header Variants	48(아티클·검색) · 49(웹툰 선반·밀리플레이스) · 64(고객센터, static) · 65(홈·책 상세) · 96(기획전, 뒤로가기+탭 5) · 168(랭킹, 도서 종류+탭 7) · 없음(이벤트 상세) — 탭이 붙는 만큼 커진다
Footer Note	푸터가 있는 페이지는 10곳 중 2곳뿐이다 — 홈 228px 4그룹, 고객센터 1,008px 4그룹. 나머지 8페이지는 푸터가 없다

Border Radius

Role	Value	Preview
small	4px	81회 · 소형 사각 버튼·라벨('로그인'·'팔로우')
cover	7px	492회 · 책 표지 이미지 — 컨테이너 8px보다 1px 작다
standard	8px	1210회 · 카드·버튼 표준(최다)
chip	10px	27회 · 카테고리 칩('종합'·'소설')
card-lg	12px	207회 · 큰 카드·배너(홈 오리지널 334×334, 소식 688×152)
banner	16px	778회 · 배너·시트 컨테이너(2위). 상단만 둥근 '16px 16px 0 0' 2회 포함
tile	20px	80회 · 리스트 아이템·링크 타일
circle	50%	70회 · 아바타·아이콘 버튼
pill	100px / 999px	120회 · 알약 CTA·지역 필터 칩·담기 버튼 (100px 90회 + 999px 30회)

Guidelines

콘텐츠 폭 1392px(1440에서 좌우 24px)으로 거의 풀블리드로 깔고, 카드 거터는 12px로 붙인다 — 홈 캐러셀 7종 중 5가 gap 12
섹션은 마진 없이 padding 32/32만으로 나눈다(홈 11섹션 동일). 배너 앞뒤만 0/24로 예외를 준다
섹션 제목은 20px/700 한 단으로 통일한다(raw 21회) — 홈·밀리플레이스·웹툰 선반이 전부 이 크기다
액션 표면은 #333333 + 흰 글씨(12.63:1, 59회). 브랜드 보라 #5644F9는 흰 글씨를 얹을 때(5.85:1)만 쓴다
카드 컨테이너는 radius 8px(1,210회), 그 안의 표지 이미지는 7px(492회)로 1px 작게 잡는다
그림자는 x·y를 함께 2px 미는 대각선으로 준다 — 상위 2종 215회가 모두 2px 2px 계열이다
모션은 0.2s(74회)·0.15s(40회)에 cubic-bezier(0.4,0,0.2,1)(29회)로, 버튼 색 전환(25회)과 카드 opacity(0.3s, 12회)에만 건다
국문 본문은 16px/400 lh1.50, 자간은 건드리지 않는다 — Pretendard 31스타일 전부 normal이다

Don't

#8B8B8B을 읽는 텍스트에 쓰지 않는다(3.41:1 ×296, AA 미달). 같은 값이 보더로 727회 쓰이는 것과 역할을 섞지 말 것
#C1C1C1을 본문·라벨에 쓰지 않는다(1.8:1 ×22) — 플레이스홀더 한도까지다
#5644F9 위에 #242424를 얹지 않는다(2.65:1, AA 미달 ×6). 이 보라는 흰 글씨 전용이다
국문 제목을 48px 이상으로 올리지 않는다 — 이 사이트의 상한은 44px/700 두 곳뿐이고 그 위 조판 근거가 없다
헤더 높이를 하나로 고정하지 않는다 — 실측은 48·49·64·65·96·168 여섯 종이고, 탭 줄이 붙는 만큼 커진다
파스텔 10색·형광 노랑 #FFF454·웹툰 시안 #00DAE1을 시스템 색으로 승격하지 않는다 — 각각 9회·20회·1페이지짜리 콘텐츠 지면이다
8px·9px·0px 텍스트 스타일을 따라 쓰지 않는다(각 2·1·1회). 알약 반경도 39px 같은 1회짜리 선언을 재현하지 않는다
국문 대형 제목에 음수 자간을 넣지 않는다 — 44px 제목조차 자간 0이고, 자간이 있는 두 스타일은 세리프 인용(−0.6px)뿐이다