네이버랩스

자간을 CSS가 아니라 서체 파일에 굽는다 — 크기마다 다른 트래킹 파일을 따로 얹는다.

네이버랩스는 조판을 서체 파일 쪽에서 푸는 사이트입니다. CSS letter-spacing이 거의 전 구간 0인데, 그 대신 자간이 다르게 구워진 웹폰트 파일을 크기마다 따로 얹습니다. 폰트 URL 81개 중 상당수가 페이지·굵기·트래킹 단계별로 쪼갠 서브셋이고, 선언된 서체 이름 21종이 실제로는 나눔휴먼과 A Type 두 패밀리로 수렴합니다. 자간을 코드가 아니라 파일로 관리하는 방식이 어떤 모습인지 볼 수 있는 국내 사례로 드뭅니다. 다만 본체 사이트는 영문 대문자 히어로에 본문이 대부분 목록이라 조판 밀도가 낮고, 국문 큰 제목은 로봇 소개 페이지 한 곳에서만 58px으로 섭니다. 자간 파일 전략을 참고할 때만 1순위로 보세요.

https://www.naverlabs.com

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

NanumHuman OTF · 300 / 400 / 700 / 900본체 heading·body·ui·caption, 한글 90.2%

A Type TTF · 400 / 500 / 600 / 700/rookie·/nrobot 전용 display·body, 한글 9.8%

Helvetica · 400폴백

Noto Sans KR · Inter Variable · Roboto Variable · 선언만 — 렌더 0글리프

Type Scalepx은 1440 실측이고 raw(1920)와 값이 같다

display109px · 700 · 1

Handgloves 123

display-ko58px · 700 · 1.21

Handgloves 123

hero57px · 900 · 1.12

다람쥐 헌 쳇바퀴

page-title49px · 400 · 1.31

다람쥐 헌 쳇바퀴

lead33px · 400 · 1.52

다람쥐 헌 쳇바퀴

h232px · 700 · 1.56

다람쥐 헌 쳇바퀴

h324px · 700 · 1.3

다람쥐 헌 쳇바퀴

body-lg19px · 400 · 1.42

다람쥐 헌 쳇바퀴

body16px · 400 · 1.44

다람쥐 헌 쳇바퀴

caption13px · 400 · 1.85

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	NanumHuman — 한글 17,412글리프 중 NanumHuman OTF 14,333(82.3%) · NanumHuman OTF Regular 1,161(6.7%) · NanumHuman OTF Bold 214(1.2%)로 계열 합계 90.2%, A Type TTF 1,704(9.8%). 선언 서체 이름은 21종(NanumHuman · NanumHumanContactBold33 · Helvetica · AType · ATypeNRobotT18~T50 · NanumHumanPrivacyBold20 · NanumHumanProposal14~28 · NanumHumanPublication21 등)인데 CDP가 보고하는 실제 패밀리는 둘뿐이다 — 나머지는 전부 페이지·굵기·크기·트래킹별로 쪼갠 서브셋 파일이다(폰트 URL 81개)
hangulWeights	400 Regular 9,066 · 300 Light 5,644 · 600 SemiBold 1,510(전량 A Type) · 700 Bold 1,192. Light가 5,644글리프로 두 번째인 것이 특징인데 약관·윤리 페이지 본문이 19px/300 lh1.8이기 때문이다. 900은 홈 히어로 영문에만 쓰고 한글에는 없다
body	16px / weight 400 / line-height 23px(1.44) / letter-spacing 0 (1440 실측, count 20). 리서치 본문은 17px/400 lh 1.65, 목록·카드는 15px/400 lh 1.53(count 18), 법률 본문은 19px/300 lh 1.8
sub	블로그 리드 33px/400 lh1.52 ls −0.3px · 카드 제목 19px/400 lh 27px(1.42) · 법률 리드 19px/300 lh1.8
label	nav 16px/400 lh 23px 영문 대문자 6개 · 태그 칩 13px/400 lh1.85 bg #F3F5F8 · 필터 칩 17px/900(활성)·17px/400(비활성) · 푸터 링크 15px/400 lh 22px · 각주 11px/400 lh1.73
mixing	본체와 /rookie가 서체를 나눠 쓴다. 본체 8페이지는 NanumHuman 한 벌이 한글 15,708 + 라틴 9,242글리프를 모두 그리고, /rookie·/nrobot 두 페이지만 A Type이 한글 1,704 + 라틴 1,806을 맡는다. 한 줄 혼용도 각자 단일 서체로 처리한다 — '5G클라우드 로봇' 58px/700은 ATypeNRobotT26 하나, '코드 한 줄 없이 로봇을 움직이는 법 — FLOW가 바꾸는…' 19px/400은 NanumHuman 하나다. 혼용 노드 330개(전체 1,186개)를 전부 한글만 담은 프로브로 재측정했다
hangulHeadings	있음 — 다만 본체가 아니라 /rookie 한 곳이다. 국문 최대는 58px/700 h3 5개('동시에 똑똑하게' · '루키가 대신 가져다 줄게요' · '루키와 소통할 수 있어요' · '자연스럽게, 답답하지 않게' · '최첨단 공간 인프라와 완벽히 연동', lh 70px 1.21, ls 0, ATypeNRobotT26)이고 '5G클라우드 로봇'까지 합쳐 같은 값이 7회 반복된다. 같은 페이지 폴드의 109px/700 'Rookie 2'와 홈 폴드의 57px/900 'ROBOT & PHYSICAL AI'·'CREATING NEW CONNECTIONS', /publicationList의 49px/400 'PUBLICATIONS', /research의 57px/900 'RESEARCH'는 전부 영문이다. 본체 국문 최대는 /blogList 리드 33px/400과 약관 조 제목 24px/700에 그친다
verdict	국문 대형 조판 레퍼런스로는 약하다 — 본체 8페이지의 국문 최대가 33px이고, 58px 국문은 제품 소개 페이지 한 곳에만 있다. 대신 이 사이트에서 가져올 것은 자간 운용 방식이다. CSS letter-spacing이 거의 전 구간 0인데 그 대신 트래킹이 다르게 구워진 서체 파일을 크기마다 얹는다 — 109px→T18, 58px→T26, 20px→T25, 16px→T50, 13px→T35 식으로 15단계다. '크기별 자간 규칙'을 스타일시트가 아니라 폰트 파이프라인에서 푸는 국내 사례로, 두산로보틱스의 −0.63px 고정과 정확히 반대편에 있다. 두 사이트를 나란히 놓으면 자간 축의 두 극단을 한 번에 보여줄 수 있다. 국문 58px/700 lh1.21 ls0이라는 값 자체도 A Type 서체가 자간을 이미 머금은 결과라, 다른 서체로 옮길 때 ls 0을 그대로 쓰면 안 된다
rendered	NanumHuman OTF ×14333 · A Type TTF ×1704 · NanumHuman OTF Regular ×1161 · NanumHuman OTF Bold ×214

영문 · Latin국문과 동일

latinFont	NanumHuman 9,242글리프(83.5%) · A Type 1,806글리프(16.3%) · Helvetica 16글리프(0.1%)
latinWeights	실측 페이스 Regular · Bold
share	라틴 11,064글리프 / 한글 17,412글리프 — 지면의 38.9%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 NanumHuman를 쓰는 단: hero 57px/900 · page-title 49px/400 · lead 33px/400 · h2 32px/700 · h3 24px/700 · body-lg 19px/400 · body 16px/400 · caption 13px/400
mixing	국영문 혼용 노드 330개(전체 1,186개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 38.9%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 83.5%를 그리는 NanumHuman가 한글도 90.2% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: NanumHuman · A Type
rendered	NanumHuman OTF ×8885 · A Type TTF ×1806 · NanumHuman OTF Regular ×314 · NanumHuman OTF Bold ×43 · Helvetica ×16

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	compact
Base unit	16px
Max width	1060px
Section gap	리서치 섹션 pad 80/60 → 60/60 반복, 마지막만 60/120. 논문 목록은 항목마다 pad 24/24로 촘촘하고, 목록 하단 페이지네이션 앞에 0/100
Header	68px absolute
Content Widths	본체 1000(7페이지, cands ×3~35) · 약관·윤리 1060 · 리서치 본문 707 · 약관 단 730 · /rookie 920(×23)
Card Padding	블로그 카드 320×327 g20 · 연락처 지도 타일 256×256 · 리서치 항목 707×116 · 약관 행 730×43 · /rookie 리스트 420×73
Button Padding	Learn More 0×10 r4 · 필터 칩 6×16 r24 · 대형 CTA 0 39 0 31 r50.5 · 태그 칩 2×10 r4

Border Radius

Role	Value	Preview
standard	4px	75회 · 버튼·태그 칩 — 최다
indicator	10px	4회 · 히어로 슬라이드 인디케이터 118×4
panel	16px	1회 · 패널
chip	24px	6회 · 필터 칩 pad 6×16 (ALL·Tech·Company)
circle	50%	21회 · 자동재생 정지·슬라이드 이전/다음 컨트롤
cta	50.5px	1회 · /rookie 대형 CTA(pad 0 39 0 31, 20px/600)
pill	60px	8회 · 알약 버튼

Guidelines

자간은 CSS가 아니라 서체 파일로 관리한다 — letter-spacing 0을 유지하고 크기마다 트래킹이 다른 서브셋을 얹는다(T7~T50 15단계)
웹폰트는 페이지·굵기·크기 단위로 서브셋한다 — 81개 URL 중 NanumHumanProposalBold28·NanumHumanPublication21처럼 쓰이는 자리만 담은 파일이 대부분이다
본문은 NanumHuman 16px/400 lh 23px(1.44) 또는 15px/400 lh1.53, 리서치 본문만 17px/400 lh1.65로 넓힌다
텍스트는 #555555(7.46:1) 한 색으로 지면을 덮고 제목만 #333333(12.63:1)로 올린다. 메타는 #999999
흰 지면 8페이지를 484px #111111 다크 푸터로 닫는다 — 지면 전환을 마지막 한 번에만 쓴다
카드·리스트는 radius 0으로 두고 1px rgba(0,0,0,0.08) 헤어라인으로만 나눈다(52회, 최다 보더)
필터 칩만 radius 24px 알약으로 띄우고 활성은 bg #111111 + weight 900으로 대비를 준다
히어로 등장은 라이브러리 없이 CSS keyframes 순서로 짠다 — 배경 0.7s → 텍스트 2s → 버튼 0.5s

Don't

홈을 국문 히어로 근거로 인용하지 않는다 — 폴드 57px/900은 'ROBOT & PHYSICAL AI'이고 뒤이은 57px도 'CREATING NEW CONNECTIONS'로 둘 다 영문 대문자다
#00A0FF(2.81:1)와 #0578FF(4.09:1)를 본문 텍스트로 쓰지 않는다 — 둘 다 흰 지면에서 AA 미달이다
#999999(2.85:1)을 본문에 쓰지 않는다 — 이 사이트에서도 날짜·저자에만 341회 쓴다
스크롤 스크럽 레퍼런스로 쓰지 않는다 — 라이브러리가 Swiper 하나뿐이고 ScrollTrigger가 0개, 스크럽 판정도 홈 §1 패럴랙스 1건(552px)뿐이다
폴드에 영상 4장(합계 93MB)을 넣는 방식을 그대로 옮기지 않는다 — 파일명에 용량이 그대로 남아 있을 만큼 무겁고 loop도 걸려 있지 않다
선언된 서체 이름 21종을 서체 21종으로 읽지 않는다 — CDP 실측 패밀리는 NanumHuman과 A Type 둘뿐이다
그림자로 카드를 띄우지 않는다 — box-shadow가 2종 19회뿐이고(rgba(0,0,0,0.14) 0 2px 50px ×17), 그라디언트는 0개다
/rookie의 규격을 본체 규격으로 섞지 않는다 — 헤더 100 vs 68, 콘텐츠 920 vs 1000, 서체 A Type vs NanumHuman으로 전부 다르다