엔씨소프트
자간을 한 번도 건드리지 않고, 1160 한 폭 안에서 266 정사각 카드만 반복한다.
엔씨소프트 코퍼레이트 사이트는 게임 아트를 카드로 반복해 보여주는 구조입니다. 자간을 선언한 스타일이 18개 중 한 건도 없어, 국문 조판을 Pretendard 기본값에 맡기고 크기와 굵기(700·500·400)만으로 위계를 세우는 드문 사례입니다. 히어로는 검정에 가까운 지면에 48px 굵기 700 국문 한 줄이고, 그 아래는 1160 폭 안에서 266 정사각 카드 4열이 가로 간격 32로 계속 반복됩니다. 라이브러리에서 드물게 외부 그림자를 실제로 쓰는 곳이라(0 24px 30px rgba(0,0,0,.12) 11회), 카드가 떠 보이는 콘텐츠 목록을 만들 때 참고가 됩니다.
https://www.nc.comColor Palette
Label
Fill
Line
Background
Accent
Typography
Pretendard · 400 / 500 / 700display·heading·body·ui — 한글 89.0%, 라틴 89.9%
Pretendard Medium · 500weight 500 전용 페이스
.SF NS · 400라틴 폴백
Type Scale**18개 스타일 전부 letter-spacing 선언이 없다** — 이 라이브러리에서 자간 규칙이 0종인 사이트다(그린카와 같은 유형)
h152px · 700 · 1.42
다람쥐 헌 쳇바퀴
hero48px · 700 · 1.35
다람쥐 헌 쳇바퀴
h236px · 700 · 1.28
다람쥐 헌 쳇바퀴
h328px · 700 · 1.36
다람쥐 헌 쳇바퀴
link-strong20px · 700 · 1.4
다람쥐 헌 쳇바퀴
lead20px · 400 · 1.6
다람쥐 헌 쳇바퀴
body18px · 400 · 1.67
다람쥐 헌 쳇바퀴
ui16px · 500 · 1.38
다람쥐 헌 쳇바퀴
button15px · 700 · 1.33
다람쥐 헌 쳇바퀴
caption14px · 400 · 1.43
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 3,503글리프(89.0%) + Pretendard Medium 435(11.0%). 선언 1순위(Pretendard)와 실렌더가 일치한다 — 웹폰트가 계획대로 붙은 사례다 |
| hangulWeights | 400 Pretendard 2,852 · 700 Pretendard 582 · 500 Pretendard Medium 435 + Pretendard 69. 400이 72%로 지면을 지배한다 |
| body | 18px w400 lh1.67(뉴스 본문) · 20px w400 lh1.60(히어로 리드). 자간 선언 없음 |
| sub | 히어로 부제 14px w400 lh1.43 · 카드 메타 14px w400. 자간 선언 없음 |
| label | 16px w500 lh1.38(Pretendard Medium, 탭·버튼) · 15px w700 lh1.33(CTA) · 13.33px w400(맨 위로) |
| mixing | 국영문을 한 서체가 그린다(Pretendard가 한글 89.0% · 라틴 89.9%). 섹션 라벨은 영문 대문자(MMORPG · NC NEWS · CEO MESSAGE · GLOBAL NETWORK · R&D CENTER)이고 문장은 국문이라, 층이 아니라 **역할로** 갈린다 — 라벨은 영문, 문장은 국문. 히어로 슬라이드는 국문('28년의 시간을 넘어, 서풍이 다시 분다')과 영문 혼용('SET UP THE NEW STREAM <Like or Die> 최초 공개')이 번갈아 나온다 |
| hangulHeadings | 있다. 기업 정보 h1 52px w700 국문 2행('즐거움으로 연결된 / 새로운 세상, 엔씨'), 홈 히어로 48px w700 국문 1행, 뉴스룸 페이지 타이틀 52px w700('뉴스'). 다만 섹션 제목 28px 단은 대부분 영문 라벨이다 |
| verdict | 국문 대형 조판 레퍼런스로 유효하다 — 48~52px w700 국문 제목이 세 페이지 모두에 있다. 다만 **자간 규칙은 배울 것이 없다**(18개 스타일 전부 letter-spacing 미선언). 굵기 700 + 자간 0이라는 조합 자체가 참고점이고, 얇거나 자간을 좁히는 국문 디스플레이를 찾는다면 이 사이트는 반례 쪽이다 |
| rendered | Pretendard ×3503 · Pretendard Medium ×435 |
영문 · Latin국문과 동일
| latinFont | Pretendard 1,942글리프(97.1%) · .SF NS 57글리프(2.9%) |
| latinWeights | 실측 페이스 Medium |
| share | 라틴 1,999글리프 / 한글 3,938글리프 — 지면의 33.7%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: h1 52px/700 · hero 48px/700 · h2 36px/700 · h3 28px/700 · link-strong 20px/700 · lead 20px/400 · body 18px/400 · ui 16px/500 · button 15px/700 · caption 14px/400 |
| mixing | 국영문 혼용 노드 84개(전체 225개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 33.7%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 97.1%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard ×1796 · Pretendard Medium ×146 · .SF NS ×57 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 8px | |
| Max width | 1160px | |
| Section gap | 홈: 히어로 600 → 카드 섹션 972·376·376·585·882 → NC NEWS 521(padding 76/76). 기업 정보: 히어로 685 → CEO 828(padding 80/117) → GLOBAL NETWORK 763 → NC HQ 693 → R&D CENTER 835. 섹션 사이 명시 간격은 padding 76·80으로 잡힌다 | |
| Header | 80px sticky | |
| Grid Cards | 266×266 4열 gap 32 = 266×4+32×3 = 1160 (정확히 콘텐츠 폭) | |
| Grid News | 365×297 gap 32 — 3장이면 1,159로 딱 맞고 4장째가 잘린다. 캡처에서 우측 화살표가 확인돼 가로 캐러셀이다 | |
| Grid Upcoming | 266×380 4열 gap 32 r16, 5장(2행) | |
| Grid Purple | 210×307 5열 gap 28 = 1,162 | |
| Card Padding | NC NEWS 섹션 padding 76/76 · CEO 섹션 padding 80/117 | |
| Button Padding | 바로가기 12×16 (r8) · 더보기 10×28 (r4, 1px solid #000) · 맨 위로 0 (r50%) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| — | 2px | 1회 · 관측만 |
| button-sm | 4px | 4회 · '더보기' 버튼(pad 10×28, 1px solid #000) |
| — | 5px | 4회 · 관측만 |
| — | 6px | 2회 · 관측만 |
| button | 8px | 2회 · 히어로 CTA '바로가기' |
| card | 16px | 23회 · 카드 표준 — 출시 예정 카드 266×380(bg #fff, 1px rgba(34,34,34,.08)) |
| circle | 50% | 6회 · '맨 위로' 원형 버튼(bg #777A92) |
| circle | 100% | 1회 · 관측만 |
Guidelines
Do
- 국문 제목은 Pretendard 700으로 세우고 자간을 건드리지 않는다 — 18개 스타일 중 letter-spacing 선언 0개
- 제목 행간 1.28~1.42, 본문 행간 1.60~1.67로 두 구간을 분리한다(36→1.28 · 28→1.36 대 20→1.60 · 18→1.67)
- 콘텐츠 폭 1160에 266 정사각 카드 4열 gap 32를 맞춘다(266×4+32×3=1160)
- 카드 라운드는 16px 하나로 통일한다(23회). 버튼만 8px(바로가기)·4px(더보기)로 내린다
- 굵기는 700·500·400 세 단만 쓴다 — 600·300은 관측되지 않았다
- 히어로 이미지 하단에 linear-gradient(투명 → rgba(0,0,0,.6) → #000)를 깔아 흰 글자를 앉힌다
- 전환은 0.15s ease를 기본으로 쓴다(0.15s 44회 · ease 83회)
Don't
- 자간을 임의로 좁히지 않는다 — 이 사이트의 국문 조판은 Pretendard 기본 자간이 전부다
- #888890을 본문에 쓰지 않는다(#F2F2F3 위 3.14:1, AA 미달) — 메타·캡션 전용
- 알약 버튼을 만들지 않는다 — 라운드 9999·1000px 계열 0건
- 채도색으로 액센트를 만들지 않는다 — 실측 채도 hex는 #FF4146 3회와 선언만 된 --ncui-point-text=#1f3263뿐이다
- 365×297 뉴스 카드를 4열 그리드로 짜지 않는다 — 1160 폭에 3장까지만 들어간다(가로 캐러셀이다)
- 0.4s를 넘기는 전환을 넣지 않는다(0.4s는 1회, 나머지는 0.15~0.3s)
- 섹션 제목을 28px 위로 키우지 않는다 — 36px 이상은 히어로와 페이지 타이틀 전용이다
