루닛 (Lunit)
흰 지면 위 84px 국문 한 줄. 자간은 크기와 상관없이 −0.1px 하나로 끝낸다.
루닛은 국문 대형 조판이 라이브러리에서 가장 또렷하게 서 있는 사이트로, 흰 지면 위 84px 국문 한 줄로 엽니다. 큰 제목의 굵기가 500에서 멈추는 점이 특징인데, 국문 디스플레이에 굵기와 음수 자간을 몰아주는 통념의 반례입니다. 다만 자간이 크기와 상관없이 −0.1px 하나로 고정돼 있어 크기별 자간 규칙은 배울 수 없고, 지면 전체로 보면 영문이 대부분이라 영문 페이지에는 전용 서체가 따로 붙습니다. 국문 히어로의 크기·행간·굵기를 그대로 옮겨야 할 때 1순위로 볼 사이트입니다.
https://www.lunit.io/koColor Palette
Primary
Label
Fill
Line
Background
Accent
Typography
Pretendard · 300 / 400 / 500 / 600 / 700국문 전부 + 국문 페이지의 영문·UI
ClashGrotesk · 300 / 400 / 500 / 600영문 디스플레이 (Light 300 · Medium 500)
Lexend · 300 / 400 / 500 / 600영문 본문·링크·UI
Apple SD Gothic Neo · 300OS 폴백 (한글 6글리프)
Type Scalesize는 1440 실측(getComputedStyle, 2026-09-09)이고 count는 raw 1920의 대응 단(100·80·60·48·40·32·20·18·16·14px)의 count다
display83.5px · 500 · 1.19
다람쥐 헌 쳇바퀴
display-268px · 500 · 1.18
다람쥐 헌 쳇바퀴
h252.5px · 500 · 1.23
다람쥐 헌 쳇바퀴
h2-sm44.4px · 500 · 1.33
다람쥐 헌 쳇바퀴
h335.2px · 500 · 1.27
다람쥐 헌 쳇바퀴
h428.4px · 500 · 1.3
다람쥐 헌 쳇바퀴
lead20px · 400 · 1.4
다람쥐 헌 쳇바퀴
body18.8px · 400 · 1.43
다람쥐 헌 쳇바퀴
ui16.8px · 400 · 1.33
다람쥐 헌 쳇바퀴
caption13.4px · 400 · 1.29
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard — 한글 6,430글리프 중 Pretendard 5,475(85.1%) · Pretendard Medium 844(13.1%) · Pretendard SemiBold 105(1.6%) · Apple SD Gothic Neo 6(0.1%). 선언 1순위는 ClashGrotesk이고 Pretendard는 3순위지만, 앞 두 서체에 한글 글리프가 없어 실제로는 Pretendard가 99.9%를 그린다 |
| hangulWeights | 400 Regular 5,108 · 500 Medium 844 · 700 367(Pretendard 패밀리 내 합성) · 600 SemiBold 105 · 300 6(Apple SD Gothic Neo, 영문 페이지의 '한국어' 3글자뿐). 제목은 500, 본문은 400 두 웨이트가 전부다 |
| body | 18.8px / weight 400 / line-height 26.8px(1.43) / letter-spacing −0.1px (1440 실측). raw 1920 기준 18px lh 1.33 |
| sub | 히어로 부제 18.8px/400 2행(Pretendard ×57) · 리드 20px/400 lh 1.40 |
| label | nav·메뉴 16.8px/400 lh 1.33 · 칩·배지 13.4px/400 lh 1.29 · 캡션 12px/700 lh 1.20 ls +0.25px(10회 — 유일한 양수 자간) |
| mixing | 서체를 나누지 않는다. 국문 페이지에서는 Pretendard 한 벌이 한글 1,089 + 라틴 138글리프를 모두 그리고, Lexend는 38 · ClashGrotesk는 42글리프로 사실상 사라진다. 한 줄 혼용('AI 영상진단' 16.8px/400 → Pretendard ×7, '10,000+' 68px/500)도 Pretendard 단일이다. 영문 페이지에서만 ClashGrotesk Light(1,708글리프)가 83.5px/300 디스플레이를, Lexend(26,599글리프)가 본문을 맡는 이원 구조로 바뀐다 |
| hangulHeadings | 있음 — 5단 전부 한글이다. 홈 h1 '인공지능 기술로 암을 정복합니다' 83.5px/500 lh 99px ls −0.1px(CDP상 '암을 정복합니다' 7글자를 Pretendard Medium ×16이 그림) · 소개 h1 'AI로 암 진단·치료의 미래를 바꿉니다' 68px/500 · 채용 h1 'AI로 암 정복에 도전하는 팀 루닛에 합류하세요' 68px/500 · 섹션 제목 '암 진단과 치료의 방식을 다시 정의합니다' 52.5px/500 lh 64.5px · 하위 제목 35.2px/500 · 카드 제목 28.4px/500 lh 37px. 문의 h1 '비즈니스 및 제품 문의'도 83.5px/500 |
| verdict | 국문 대형 조판 레퍼런스로 1급이다. 84px 국문 히어로가 웨이트 500 하나로 서고 행간 1.19(99px), 자간 −0.1px으로 끝난다 — 국문 디스플레이에 굵기와 음수 자간을 몰아주는 통념의 반례이자, '큰 국문은 500이면 충분하다'는 실증이다. 반대로 조판 '체계'를 배우기엔 빈약하다: 크기별 자간 규칙 0종(전 단계 −0.1px 동일), 행간도 1.18~1.43 사이를 단마다 다르게 쓰고 근거가 되는 비율이 없다. 크기·자간의 수치를 이식하되 규칙표는 다른 곳에서 가져와야 한다 |
| rendered | Pretendard ×7072 · Pretendard Medium ×1125 · Pretendard SemiBold ×139 · Apple SD Gothic Neo ×6 |
영문 · Latin영문 전용
| latinFont | Lexend 26,599글리프(74.9%) · Pretendard 4,710글리프(13.3%) · Clash Grotesk 2,298글리프(6.5%) · Helvetica 1,165글리프(3.3%) |
| latinWeights | 실측 페이스 Light · Medium · SemiBold · ExtraBold |
| share | 라틴 35,532글리프 / 한글 8,342글리프 — 지면의 81.0%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다 |
| mixing | 국영문 혼용 노드 203개(전체 1,150개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Lexend 영문 전용(74.9% · 선언됨) · Clash Grotesk 영문 전용(6.5%) |
| verdict | 영문 전용 서체가 있다 — Lexend 라틴 74.9% / 한글 0.0% · Clash Grotesk 라틴 6.5% / 한글 0.0%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Lexend ×26599 · Pretendard ×4002 · Clash Grotesk Light ×1708 · Helvetica ×1165 · false ×760 · Clash Grotesk Medium ×590 · Pretendard Medium ×421 · Pretendard SemiBold ×182 · Pretendard ExtraBold ×105 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 7.5px | |
| Max width | 1360px | |
| Docs width | 1080px | |
| Section gap | 섹션 상하 패딩은 120/120(scope §3·§12, 채용 §2·§3) | |
| Header | 132px sticky | |
| Grid Cards | 뉴스·리소스 카드 3열 433×228(홈)·433×468(영문 홈)·433×393(베네핏), 거터 30 / 관련 솔루션 4열 460×338, 거터 30 | |
| Grid Stats | 스탯 4열 256×117 거터 171(국문) · 241×117 거터 185(영문), 섹션 높이 357 | |
| Grid Partners | 파트너 로고 타일 200×64, 거터 60, 섹션 531(국문)·558(영문) | |
| Grid Offices | 글로벌 오피스 3열 373×137, 거터 120, 섹션 930, 다크 지면 | |
| Grid Gallery | 채용 포토 갤러리 662×372, 거터 250, 이미지 32장, 섹션 751 | |
| Card Padding | FAQ 행 1360×81(r8) · 채용 공고 행 1320×87 · 약관 리스트 행 1060×27~54 | |
| Button Padding | 9×30 (알약 r100, 20px/500) · 4×24 (소형 알약, 18px/500) · 5×10 (언어 칩, r5, 14px/400) · 10 (폼 인풋, r4) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| badge | 2px | 1회 · 관측만 |
| button-sm | 3.75px | 36회 · 서브 버튼 (0.25rem 계열) |
| input | 4px | 28회 · 폼 인풋·카드 |
| chip | 5px | 15회 · 언어 전환 칩 |
| small | 7.5px | 198회 · 리스트 항목·단락 블록 (0.5rem 계열) |
| card | 8px | 331회 · 카드·FAQ 행·미디어 썸네일 |
| standard | 15px | 558회 · 표준 — 실사용 최다. 큰 미디어 박스·섹션 블록 (1rem 계열) |
| large | 32px | 81회 · 대형 이미지 프레임 |
| xl | 60px | 225회 · 히어로 미디어·대형 카드 |
| pill | 100px | 63회 · CTA 알약(언어 전환 토글 포함). 9999px 계열은 999px ×12로 별도 |
| circle | 50% | 57회 · 언어 선택 토글·아이콘 |
Guidelines
Do
- 국문 대형 제목은 Pretendard weight 500 하나로 세운다 — 히어로 83.5px lh 99px(1.19), 섹션 제목 52.5px lh 64.5px(1.23). 한글 6,430글리프 중 99.9%가 Pretendard 계열이다
- 자간은 −0.1px 한 값으로 고정한다. 83.5px에서 −0.12%, 13.4px에서 −0.75%로 비율만 달라질 뿐 크기별 규칙을 만들지 않는다
- 행간은 제목 1.18~1.30, 본문 1.43(18.8px / 26.8px). 제목이 커질수록 조금씩 좁힌다
- CTA는 알약 radius 100px · 패딩 9×30 · 20px/500 세 벌(검정 솔리드 / 흰 배경 검정 테두리 / 투명 흰 테두리)만 쓴다
- 콘텐츠 폭 1360 중앙(1440에서 좌우 40), 법률·기사 본문만 1080으로 좁힌다
- 섹션 상하 여백은 120 · 80 · 60 세 값만. 여백 잔값은 7.5px 계열(7.5 · 15 · 22.5)로 맞춘다
- 지면은 #FFFFFF 단일, 푸터만 #EFF0F4 909px. 다크(#000000) 지면은 한 페이지에 한 밴드까지(850px · 930px)
- 모션은 0.3s ease 하나로 통일한다(1,591회, 전체의 76%). 스크롤 리빌만 1s ease opacity+transform
Don't
- 큰 글자에 음수 자간을 더 주지 않는다 — 100px과 12px이 같은 −0.1px다. 이 사이트에는 크기별 트래킹 체계가 없다
- 본문 링크에 #0F95AB를 쓰지 않는다(틴트 지면 위 3.12:1, AA 미달 5쌍). 폼 필수 표시 #CC421A도 4.23:1로 텍스트 색 확장 금지
- 국문 디스플레이에 ClashGrotesk·Lexend를 선언하지 않는다 — 한글 글리프가 없어 Pretendard로 폴백된다. 루닛도 선언 1순위는 ClashGrotesk지만 한글은 전부 3순위가 그린다
- 그림자로 띄우지 않는다 — box-shadow 10종이 잡히지만 최다가 rgba(18,25,97,.08) 0 1px 4px ×18이고 전부 9회 이하인 서드파티 위젯 잔재다(해석). 섹션·카드·버튼 본체는 그림자 0
- 라운드를 늘리지 않는다 — 실사용은 15 · 8 · 60 · 7.5px 네 값이고 나머지 20종은 81회 이하 잔재다
- 브랜드 시안 #00C9EA를 텍스트나 큰 면에 쓰지 않는다 — 15회 전부 칩 배경 · 1px 보더 · alpha .2 글로우다
- 15px / 자간 +0.1px 계열(24 · 25 · 16 · 20회)과 20px Arial(18회)을 인용하지 않는다 — Cookiebot 쿠키 배너 스타일이다
- 헤더에 배경을 깔지 않는다 — 132px sticky인데 bg transparent라 지면과 히어로가 그대로 비친다
