그린카 (Greencar)
흰 지면 9,480px을 스크롤 무대로 쓰고, 색은 마지막 640px 그린 밴드 한 번에 몰아 쓴다.
그린카 홈은 한 페이지 9,480px를 통째로 스크롤 무대로 쓰는 구성입니다. 여섯 섹션 중 다섯이 흰 지면이고 색은 마지막 640px 그린 밴드 한 번에 몰아 씁니다. 글자가 100자 남짓인 섹션이 각각 2,700px를 차지해, 정보량이 아니라 스크롤 길이로 연출을 만드는 쪽입니다. 다만 가장 큰 글자 자리는 영문 64px이 가져가고 국문은 36px에서 멈추며 자간 조정이 한 건도 없어, 국문 조판 레퍼런스로는 얻을 값이 적습니다.
https://www.greencar.co.krColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 400 / 500 / 600 / 700한글 전용 — 제목·본문·UI 전부
Outfit · 400 / 500 / 600 / 700라틴 디스플레이·숫자·공백/괄호
Type Scaleraw 23종 전부 letter-spacing이 빈 값(normal)이라 자간 조정이 한 건도 없다
display64px · 500 · 1.5
Handgloves 123
h136px · 700 · 1.5
다람쥐 헌 쳇바퀴
h232px · 700 · 1.5
다람쥐 헌 쳇바퀴
hero-sub24px · 600 · 1.5
다람쥐 헌 쳇바퀴
body-lg20px · 500 · 1.5
다람쥐 헌 쳇바퀴
nav18px · 500 · 1.2
다람쥐 헌 쳇바퀴
button16px · 700 · 1.4
다람쥐 헌 쳇바퀴
body16px · 400 · 1.5
다람쥐 헌 쳇바퀴
footer-link16px · 400 · 3.5
다람쥐 헌 쳇바퀴
caption13.3333px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard / Pretendard Medium / Pretendard SemiBold (정적 인스턴스, raw variable false). 한글 1,633글리프를 100% 이 계열이 그린다 — Pretendard 1,350(82.7%) · Medium 255(15.6%) · SemiBold 28(1.7%). 이전 집계의 'Outfit 400개(24.7%)'는 한글 노드 안의 공백·괄호·라틴을 한글로 센 허수였고, 재측정에서 Outfit의 한글은 0글리프다 — 샘플 8건에서 Pretendard 수 = 한글 글자 수가 정확히 일치했던 것과 같은 결론 |
| hangulWeights | 400 Pretendard 990 · 700 Pretendard 360 · 500 Pretendard Medium 255 · 600 Pretendard SemiBold 28 |
| body | 16px/400 lh1.50 자간 0 (count 8) · 뉴스 본문은 20px/500 lh1.50 |
| sub | 24px/600 lh1.50 (count 8) — 히어로 영문 64px 아래 국문 한 줄 |
| label | GNB 18px/500 lh1.20 · 버튼 16px/700 lh1.40 · 최소 13.3333px/400 lh1.50 |
| mixing | 선언은 'Outfit, Pretendard, sans-serif' 단일 스택이고 분리는 브라우저 폴백이 한다. 히어로만 층으로 갈라 영문 64px/500(Outfit)을 위, 국문 24px/600(Pretendard)을 아래 두고, 나머지 섹션 제목 36px/700은 전부 국문이다. 같은 줄 안 혼용(예: 'G car')에서 한글은 언제나 Pretendard이고 라틴만 Outfit 또는 Pretendard로 갈린다(라틴 실측 Pretendard 57.9% · Outfit 42.1%) |
| hangulHeadings | 있음 — 국문 제목 36px/700 lh1.50 자간 0이 4개 섹션(count 12), 32px/700이 1개. 단 페이지 최대 크기 64px/500은 영문 'Create a Better Life'가 차지하고 국문은 그 아래 24px/600으로 내려간다 |
| verdict | 국문 본문·섹션 제목 레퍼런스로 유효하다(36/700 lh1.50, 자간 0, Pretendard). 국문 히어로 레퍼런스로는 부적합 — 히어로 1행이 영문 64px이고 국문 최대는 36px에서 멈춘다. 자간 규칙이 아예 없어(23종 전부 normal) 자간 설계 참고용으로는 쓸 값이 없다 |
| rendered | Pretendard ×1350 · Pretendard Medium ×255 · Pretendard SemiBold ×28 |
영문 · Latin영문 전용
| latinFont | Outfit 703글리프(75.6%) · Pretendard 227글리프(24.4%) |
| latinWeights | 실측 페이스 Medium · SemiBold |
| share | 라틴 930글리프 / 한글 1,633글리프 — 지면의 36.3%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Outfit를 쓰는 단: display 64px/500 |
| mixing | 국영문 혼용 노드 53개(전체 155개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Outfit 영문 전용(75.6% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Outfit 라틴 75.6% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 64px) |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Outfit ×576 · Pretendard ×135 · Outfit Medium ×121 · Pretendard Medium ×76 · Pretendard SemiBold ×16 · Outfit SemiBold ×6 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 8px | |
| Max width | 1400px | |
| Section gap | 섹션 사이 여백 0 — 섹션이 곧 블록이다(높이 900 | |
| Header | 80px fixed | |
| Grid News | 뉴스 카드 345×460, gap 20 (345×4 + 20×3 = 1440 → 1400 컨테이너에서 4열 추정, 미확인) | |
| Grid Hero | 히어로 반복 17개 307×281, gapX −164 (음수 = 겹쳐 쌓이는 캐러셀/스택 추정, 미확인) | |
| Card Padding | 뉴스 카드 345×460 radius 0px · 도트 인디케이터 8×8 gap 18 | |
| Button Padding | 14px 20px (버튼 3종 전부 동일) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 6px | 6회 · 작은 버튼 |
| button | 8px | 11회 · 버튼 3종·모달 |
| standard | 12px | 32회 · 리스트·박스 표준. 히어로 반복 아이템 307×281도 12px |
| large | 16px | 24회 · 큰 블록 |
| modal | 20px | 4회 · 모달 |
| circle | 50% | 17회 · 도트 인디케이터(8×8)·아이콘 버튼 |
| pill | 100px | 1회 · 알약 1회뿐 — 체계라 부르기 어렵다 |
Guidelines
Do
- 지면은 #FFFFFF 하나로 두고 컬러 면은 마지막 CTA 밴드(#00C88C, 640px, 패딩 220/220) 한 번만 쓴다 — 6개 섹션 중 5개가 흰 배경이다
- 국문 제목은 36px/700 lh1.50 자간 0을 상한으로 잡는다(count 12). 그 위 64px 자리는 영문 몫이다
- 한글은 Pretendard가 전량 그리고 라틴만 Outfit(42.1%)과 Pretendard(57.9%)가 나눠 갖게 둔다 — 스택은 'Outfit, Pretendard, sans-serif' 하나로 선언하고 브라우저 글리프 폴백이 알아서 나눈다(샘플 8건 + 혼용 노드 프로브 재측정 검증)
- 버튼은 패딩 14×20 · radius 8px · 16px/700 한 규격으로 통일하고, 배경만 #222222 채움 / 투명+1px #FFFFFF / 투명+1px #222222 3종으로 나눈다
- 라운드는 12px(32회)과 16px(24회)을 기본으로 쓰고 카드형 썸네일은 0px로 각지게 둔다(뉴스 카드 345×460 radius 0)
- 전환은 0.8s(43회) 중심에 cubic-bezier(0.25,0.1,0.25,1)를 기본 이징으로 쓰고, 커스텀 커브는 카드 clip-path(0.77,0,0.175,1) 한 곳에만 허용한다
- 본문 대비는 #000000 on #FFFFFF 21:1 또는 #898989 on #171717 5.12:1처럼 AA를 넘는 조합만 쓴다
Don't
- #007AFF를 액센트로 승격하지 않는다 — 흰 배경 4.02:1(AA 미달)이고 출처가 swiper-button-prev/next 4회뿐이다
- 4px solid #667EEA(1회)나 #133B55(4회)를 브랜드 색으로 재현하지 않는다 — 출처가 확인되지 않은 잔재다
- 국문에 자간을 넣지 않는다 — raw 23종 전부 letter-spacing 빈 값(normal)이라 이 사이트의 국문 조판엔 자간 규칙 자체가 없다
- 푸터 링크의 lh 3.50(=56px)을 본문 규칙으로 옮기지 않는다 — 23종 중 유일한 이탈값이고 나머지는 1.20~1.50이다
- 입력 필드를 보더 0 · 패딩 0 · 배경 투명으로 두는 방식(3종 전부)을 그대로 베끼지 않는다 — 필드 경계가 시각적으로 사라진다
- 그림자로 면을 띄우지 않는다 — 전 페이지 그림자 7회뿐(0 4px 8px α.08 ×4 · 0 10px 40px α.2 ×2 · α.3 ×1)이고 대부분 모달용이다
- 히어로 반복 아이템의 gapX −164px(겹침)를 일반 그리드 값으로 쓰지 않는다 — 스택형 연출 전용이다
