크래프톤
홈은 1440×900 브랜드 필름 한 편이 전부고, 글자는 그 다음 페이지에서 70px 국문 한 줄로 시작한다.
크래프톤은 홈 폴드를 글자가 아니라 영상 한 편으로 채웁니다. 1440×900 브랜드 필름이 자동 재생되고 제목 텍스트는 0개라, 첫 화면만 보면 조판 레퍼런스가 아닙니다. 다만 홈을 넘어가면 성격이 달라져서, 서브페이지 여덟 곳이 모두 같은 자리(y=220)에 70px 굵은 국문 페이지 타이틀을 세우고 게임 상세는 영상 위에 61.5px 국문 제목을 얹습니다. 모션은 라이브러리 없이 클래스 토글과 CSS 전환만으로 만들어져, 스크롤 리빌을 가볍게 구현하는 방식을 볼 때 참고가 됩니다. 다만 타입 스타일 58종에 자간 규칙이 하나도 없어 대형 국문의 자간 처방은 이 사이트에서 얻을 수 없습니다.
https://www.krafton.comColor Palette
Label
Fill
Line
Background
Static
Accent
Typography
OTS derived font (자체 호스팅 한글 웹폰트) · 400 / 500 / 700한글 전 위계 — 디스플레이·제목·본문·UI
Apple SD Gothic Neo · 400 / 500 / 700한글 폴백 (OS 시스템 폰트)
Zalando Sans Expanded · 500 / 700 / 800영문 디스플레이 (한글 0)
Poppins · 300 / 400 / 500 / 600 / 700영문 UI·라벨 (한글 0)
Lato Light · 300 / 700영문 소수 (한글 0)
Type Scaleraw 1920에서 58종이 잡히고 그중 **자간 값이 있는 스타일은 0개**다 — 82px부터 12px까지 letter-spacing이 전부 비어 있다
hero-ko70px · 700 · 1.3
다람쥐 헌 쳇바퀴
display-en64px · 800 · 1.09
Handgloves 123
hero-game61.5px · 700 · 1.2
다람쥐 헌 쳇바퀴
h246px · 700 · 1.4
다람쥐 헌 쳇바퀴
h336px · 700 · 1.4
다람쥐 헌 쳇바퀴
h3-en36px · 600 · 1.2
Handgloves 123
h428px · 700 · 1.5
다람쥐 헌 쳇바퀴
body-lg20px · 400 · 1.3
다람쥐 헌 쳇바퀴
body16px · 400 · 1.4
다람쥐 헌 쳇바퀴
body-sm15px · 300 · 1.7
다람쥐 헌 쳇바퀴
label-en13px · 500 · 1.2
Handgloves 123
caption12px · 400 · 1.4
Handgloves 123
국문 · Korean
| hangulFont | OTS derived font 32,224글리프(94.7%) · Apple SD Gothic Neo 1,819글리프(5.3%) |
| hangulWeights | 400 주력(28,672 · 웹폰트 기준) · 700(2,508) · 500(1,044). 300·600·800 국문 없음 |
| body | 16px w400 lh1.4 자간 0 (정관·규정 본문) · 15px w300 lh1.7 (보도자료 요약·푸터) · 20px w400 lh1.3 (섹션 리드) |
| sub | 24px w500 lh1.24 (소개 페이지 부제) · 19px w500 lh1.2 (IR 소제목) |
| label | 14px w400 lh0(=1) 32회 · 13px w400 lh1.2 18회 · 12px w400 lh1.5 9회 — 국문 라벨에도 자간 0 |
| mixing | 층으로 나눈다. 영문은 Zalando Sans Expanded(디스플레이 64/800)와 Poppins(라벨 13/500 대문자·캡션 12/400)가 맡고, 국문은 한글 웹폰트 하나가 디스플레이부터 캡션까지 전부 맡는다. 한 줄 안 혼용 시 라틴은 Zalando/Poppins·한글은 웹폰트로 글자 단위로 갈린다(fonts 샘플: '크래프톤 이야기' 14/700 → Poppins×1 + 한글 웹폰트×14) |
| hangulHeadings | 있다 — 서브페이지 8곳 전부 70px/700 국문 페이지 타이틀(y=220 · h=91), 게임 상세 61.5px/700 국문 히어로(검정 900px 풀블리드 위), 섹션 제목 46/700·42/700·36/700. 단 **홈 폴드에는 국문 제목이 0자**다(영상 한 편) |
| verdict | 홈 폴드는 국문 히어로 레퍼런스가 아니다 — 1440×900 영상 한 편에 텍스트 0자다. 다만 서브페이지의 70px/700 페이지 타이틀 밴드와 게임 상세의 61.5px/700 풀블리드 국문 히어로는 국문 대형 조판 사례로 유효하다. **자간 규칙은 얻을 수 없다** — 타입 스타일 58종의 letter-spacing이 전부 비어 있어 대형 국문의 자간 처방이 이 사이트엔 없다. 조판보다는 미디어 폴드 → 페이지 타이틀 밴드로 넘어가는 구조와 라이브러리 없는 스크롤 리빌 구현을 참고할 사이트다. |
| rendered | OTS derived font ×32224 · Apple SD Gothic Neo ×1819 |
영문 · Latin영문 전용
| latinFont | OTS derived font 9,454글리프(79.6%) · Zalando Sans Expanded 848글리프(7.1%) · Poppins 717글리프(6.0%) · Helvetica 537글리프(4.5%) |
| latinWeights | 실측 페이스 Medium · Light |
| share | 라틴 11,877글리프 / 한글 34,043글리프 — 지면의 25.9%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 OTS derived font를 쓰는 단: hero-ko 70px/700 · hero-game 61.5px/700 · h2 46px/700 · h3 36px/700 · h4 28px/700 · body-lg 20px/400 · body 16px/400 · body-sm 15px/300 |
| mixing | 국영문 혼용 노드 569개(전체 1,763개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Zalando Sans Expanded 영문 전용(7.1% · 선언됨 · 최상단 디스플레이 독점) · Poppins 영문 전용(6.0% · 선언됨) |
| verdict | 영문 전용 서체가 있다 — Zalando Sans Expanded 라틴 7.1% / 한글 0.0% · 최상단 디스플레이 독점 · Poppins 라틴 6.0% / 한글 0.0%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 64px) |
| sharedWithKorean | 국문과 같은 서체: OTS derived font · Apple SD Gothic Neo |
| rendered | OTS derived font ×9454 · Zalando Sans Expanded ×848 · Poppins ×590 · Helvetica ×537 · Apple SD Gothic Neo ×195 · Poppins Medium ×127 · Lato Light ×120 · Lucida Grande ×6 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 5px | |
| Max width | 1200px | |
| Section gap | 서브페이지 페이지 타이틀(y=220 h=91) → 첫 콘텐츠 y=396으로 85px | |
| Header | 83px fixed | |
| Grid Home | 게임 3열 620×390(20아이템 Swiper) · 뉴스 3열 409×364 · 스튜디오 3열 300×355, 거터 0 | |
| Grid Sub | 소개 5개 3열 427×467 · CSR 3열 427×309 · 채용 피플 4열 310×389 · 인재상 1열 1260×218, 전부 거터 0 | |
| Card Padding | 보도자료 카드 행 높이 377~384 ×10 | |
| Button Padding | 필터 12×52×12×20 · 칩 9×10 · 쿠키 13×20 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| square | 0px | 5회 · 버튼 5종 전부 · 카드·이미지 전부 (repeated r0px 10페이지) |
| chip | 34px | 27회 · 카테고리 라벨 칩 — 사이트에서 유일하게 둥근 사각 |
| circle-modal | 50% | 9회 · 모달 닫기 버튼 |
| circle | 100% | 8회 · 인디케이터 점 |
Guidelines
Do
- 폴드를 영상 하나로 채울 거면 제목을 얹지 말고 완전히 비운다 — 홈 히어로 1440×900에 텍스트 0자, 대신 1.8s 무한 화살표로 다음을 알린다
- 국문 제목은 서브페이지에서 70px/700 한 줄로 세우고 밴드 높이를 91px로 고정한다 — 8페이지가 같은 y=220을 쓴다
- 면은 사각으로 둔다. 버튼 5종·카드·썸네일 전부 radius 0, 둥근 것은 34px 칩과 원형뿐
- 구분은 선으로 한다 — 1px rgb(85,85,85) 49회, 다크에선 1px rgb(57,57,57) 23회. 그림자는 2종 18회뿐
- 콘텐츠 폭은 1200으로 잠근다(10페이지 중 9페이지, 정관 페이지는 후보 533회 전부 1200)
- 스크롤 리빌은 라이브러리 없이 클래스 토글 + CSS 전환으로 만든다 — `a-Opacity` 클래스에 `is-`를 붙여 0.3s ease-out opacity를 태운다
- 영문 라벨·캡션은 Poppins 13px/500 대문자로, 영문 디스플레이는 Zalando Sans Expanded 64px/800로 국문과 층을 나눈다
Don't
- #0000EE를 액센트로 옮기지 않는다 — 브랜드 색이 아니라 스타일 안 붙은 앵커의 브라우저 기본값이고(hover #0000FF), 검정 지면 위 2.23:1로 AA 미달이다
- 본문 #555555를 검정 지면에 그대로 쓰지 않는다 — 흰 지면 7.46:1은 통과하지만 검정 위 2.82:1로 279회 미달한다
- 메타 회색 #777777(479회)·#979899(10회)를 흰 지면 본문에 쓰지 않는다 — 각각 4.48:1·2.89:1로 미달
- 대형 국문에 자간을 지어내지 않는다 — 이 사이트는 타입 스타일 58종에 자간 값이 0개다. 자간 처방은 다른 레퍼런스에서 가져올 것
- 그라디언트를 재현하지 않는다 — 2종 634회 전부 `linear-gradient(#000,#000)`·`(#fff,#fff)`로 단색을 그라디언트 문법으로 쓴 것이라 시각적 그라디언트가 아니다
- 여백을 8px 배수로 정리하지 않는다 — 실측 최빈값이 5px(1,059)·2px(822)·7px(483)이라 8배수 스케일로 옮기면 다른 사이트가 된다. 반대로 이 값들을 그대로 베끼는 것도 권하지 않는다
- 홈 폴드를 국문 히어로 조판 레퍼런스로 쓰지 않는다 — 제목 텍스트가 0자다
