부릉 VROONG
흰 지면을 그린 대각선 하나로 가르고, 국문 대형은 얇게 쓰되 강조할 단어만 굵힌다.
부릉은 상점주에게 배달대행을 제안하는 단일 랜딩 페이지입니다. 흰 지면에 브랜드 그린(#05CD82)과 대각선 마스크만으로 구역을 나누고, 국문 대형 제목을 weight 100~200으로 얇게 깐 뒤 강조할 단어만 weight 400으로 올려 한 줄 안에서 굵기 대비를 만듭니다. 국문 히어로를 얇게 조판한 사례를 찾을 때 참고할 만하지만, 그린 글자의 대비가 2.09:1로 낮고 버튼 높이가 29~34px에 그쳐 그대로 옮기기에는 무리가 있습니다. 측정한 것은 홈 한 페이지(섹션 6개)뿐이며, 여기 적힌 값은 전부 그 한 페이지의 것입니다.
https://www.vroong.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Noto Sans KR · 100 / 200 / 300 / 400 / 500 / 700display·heading·body·ui·caption — 지면 전체 단일 서체
Type Scale타입 px 기준은 layout
display64px · 100 · 1.2
다람쥐 헌 쳇바퀴
hero48px · 200 · 1.46
다람쥐 헌 쳇바퀴
section-label32px · 200 · 1.44
다람쥐 헌 쳇바퀴
quote28.8px · 300 · 1.42
다람쥐 헌 쳇바퀴
card-title24px · 400 · 1.46
다람쥐 헌 쳇바퀴
h120.8px · 100 · 1.44
다람쥐 헌 쳇바퀴
body16px · 400 · 1.46
다람쥐 헌 쳇바퀴
body-sm14.4px · 400 · 1.46
다람쥐 헌 쳇바퀴
ui13.6px · 400 · 1.46
다람쥐 헌 쳇바퀴
caption12px · 400 · 2.33
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR — 웹폰트(CDP isCustomFont true, fontsrc.json reliable). 한글 1,993글리프 100%를 이 한 서체가 그린다. CDP 보고명은 가변 폰트 기본 인스턴스명 'Noto Sans KR Thin'이지만 실제 렌더 웨이트는 다섯 단이다 |
| hangulWeights | 400 주력 1,810글리프(90.8%) · 200 66 · 300 60 · 700 38 · 100 19. 선언 1순위(Noto Sans KR)와 실제 렌더가 일치한다 |
| body | 16px w400 lh1.46(normal) ls−0.96px(−6.0%). 카드 본문은 14.4px w300 lh2.30으로 행간만 크게 벌린다 |
| sub | 히어로 48px w200 2행(384×140) — 기본 #000000, 강조 '상점주' w400, '프리미엄 배송' w400 + #05CD82 |
| label | 섹션 라벨 32px w200 #777777 ls−0.96px(−3.0%) ×4 · 캡션 12px w400 lh2.33 ls−0.96px(−8.0%) · 푸터 13.6px w400 자간 0 |
| mixing | 사실상 국문 단일 지면이다. 라틴 428글리프(전체 2,421 중 17.7%)도 같은 Noto Sans KR이 그리고, 라틴은 워드마크 VROONG·'One click'·'Windows/Android POS'·주소 숫자에만 나온다. 혼용 노드 70개는 한글만 담은 프로브로 전부 재측정했다(mixedProbed 70/70) |
| hangulHeadings | 있다. 최대 국문 디스플레이는 64px weight 100 lh1.20 ls−3.2px(−5.0%) '주문부터 배달까지'(동영상 섹션 y2,872, 폭 972, #05CD82)이고, 히어로는 48px weight 200 ls−2.4px(−5.0%) '상점주를 위한 / 프리미엄 배송서비스'(y380)다. 둘 다 Noto Sans KR이 그린 한글임을 라이브 실측으로 확인했다(라틴 오독 아님). fontsrc의 hangul[].maxSize도 64로 일치한다. 두 줄 모두 강조어만 weight 400으로 올려 한 줄 안에서 굵기를 두 단 쓴다 |
| verdict | 국문 히어로 조판 레퍼런스로 유효하다. weight 100~200 국문 대형 + 같은 줄 안 400 강조라는 조합은 라이브러리에서 드문 실측 사례다(64px weight 100은 이터널저니 60px/100 다음 급). 다만 그린 글자의 대비 2.09:1과 12~32px 고정 자간 −0.96px은 그대로 가져오면 안 된다. 측정 범위는 홈 1페이지뿐이라 사이트 전체 조판 규칙으로 일반화할 수 없다. |
| rendered | Noto Sans KR Thin ×1993 |
영문 · Latin국문과 동일
| latinFont | Noto Sans KR 428글리프(100.0%) |
| latinWeights | 실측 페이스 Thin |
| share | 라틴 428글리프 / 한글 1,993글리프 — 지면의 17.7%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Noto Sans KR를 쓰는 단: display 64px/100 · hero 48px/200 · section-label 32px/200 · quote 28.8px/300 · card-title 24px/400 · h1 20.8px/100 · body 16px/400 · body-sm 14.4px/400 · ui 13.6px/400 · caption 12px/400 |
| mixing | 국영문 혼용 노드 70개(전체 207개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 17.7%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 100.0%를 그리는 Noto Sans KR가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR |
| rendered | Noto Sans KR Thin ×428 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 5px | |
| Max width | 972px | |
| Section gap | 간격이 아니라 높이가 고정이다 — 섹션 6개 중 5개가 정확히 900px, 마지막 푸터 밴드만 321px. 6섹션 전부 paddingTop 0 | |
| Header | 43px fixed | |
| Grid Cards | 피처 카드 3열 280×440 (280×3=840, 972 안에서 좌우 66px 여유) | |
| Grid Tiles | 아이콘 타일 4열 210×200, 거터 0 (210×4=840) | |
| Card Padding | 카드 280×440 내부 여백 미측정 · 아이콘 타일 210×200 | |
| Button Padding | 5px 10px — 버튼 3종 공통, 결과 높이 29~34px | |
| Breakpoints | 1200px · 1279px · 1280px (raw). 1440 실측만 있어 반응형 거동은 미확인 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| list | 5px | 6회 · ul — 목록·드롭다운 |
| image | 9px | 4회 · img 모서리 |
| card | 10px | 9회 · 피처 카드 280×440 |
| bottom-only | 0px 0px 10px 10px | 3회 · 아래만 둥근 블록(div) — 드롭다운 추정, 미확인 |
| button | 16px | 5회 · 버튼 3종·칩. 높이 29~34px이라 사실상 알약으로 읽힌다 |
| large | 20px | 3회 · div — 관측만 |
| circle | 50% | 3회 · span — 캐러셀 도트 |
Guidelines
Do
- 국문 대형은 얇게 깔고 강조어만 굵힌다 — 64px는 컨테이너 weight 100 + 강조어 400, 48px 히어로는 200 + 400. 같은 줄 안에서 굵기 두 단으로 위계를 만든다
- 디스플레이 자간은 −0.05em 비례로 — 64px −3.2px · 48px −2.4px (둘 다 −5.0%)
- 브랜드 그린 #05CD82(43회)는 강조어·CTA 배경·아이콘에만. 지면은 6섹션 전부 #FFFFFF 단색으로 둔다
- 구획은 그림자가 아니라 대각선으로 나눈다 — 흰 대각 그라디언트 슬래시 7회(48%→53% 사이 1px대 헤어라인)와 그린 대각 면
- 면을 띄우는 것은 피처 카드 3장뿐 — radius 10px + rgb(238,238,238) 0 0 15px 3px. 색 없는 확산 그림자로만 들어올린다
- 콘텐츠 폭 972 중앙(후보 972×10). 카드는 3열 280, 아이콘 타일은 4열 210 거터 0
- 모션은 0.5s ease 한 종류로 통일(24회). easing은 ease 38회 단일이고 커스텀 커브가 0이다
Don't
- 브랜드 그린을 흰 지면 위 글자색으로 쓰지 않는다 — #05CD82/#FFFFFF 2.09:1(8쌍)로 대형 텍스트 기준 3:1에도 미달한다. 이 사이트는 48·64px 카피를 그 색으로 쓴다(베끼면 안 되는 쪽)
- 회색 칩 위 그린 글자를 만들지 않는다 — #05CD82/#EEEEEE 1.80:1로 팔레트 최저 대비다
- 작은 글씨에 고정 음수 자간을 걸지 않는다 — −0.96px 하나를 12~32px 전 구간에 써서 32px −3.0% → 16px −6.0% → 12px −8.0%로 상대 자간이 반대로 커진다
- 버튼을 padding 5px 10px로 만들지 않는다 — 3종 전부 높이가 29~34px이라 터치 타깃 44px 기준에 못 미친다
- #787878을 본문에 쓰지 않는다 — 흰 지면 4.42:1로 AA 4.5:1 미달
- #0000EE(10회)를 팔레트에 넣지 않는다 — 스타일이 걸리지 않은 브라우저 기본 링크색이지 디자인 결정이 아니다
- 섹션 900px 픽셀 고정을 그대로 옮기지 않는다 — 뷰포트 높이 700에서도 docHeight가 4,821로 같아 100vh가 아니다. 짧은 화면에서 콘텐츠가 잘린다
- weight 100~200을 본문에 쓰지 않는다 — 이 사이트도 제목에만 쓴다(한글 1,993글리프 중 400이 1,810개, 100은 19개뿐)
