리디
흰 지면에 220px 여백을 위아래로 두르고 54px 제목 한 줄, 마지막에 리디 블루 300px 띠 하나.
리디 사이트는 여백이 만드는 사이트입니다. 홈 섹션마다 위아래 패딩을 215~220px씩 주고 그 안에 54px 제목 한 줄과 카드 한 줄만 놓아, 4,432px 페이지에 섹션이 다섯 개뿐입니다. 마지막은 리디 블루 #1E9EFF 300px 띠에 'Join us' 한 줄로 닫습니다. 국문 조판도 볼 만한데, 70px과 54px 국문 제목이 실제로 있고 자간을 크기와 무관하게 −0.25px로 고정해서 큰 글자는 거의 손대지 않고 작은 글자만 좁아지는 결과가 됩니다. 스크롤 진입 시 89px 아래에서 올라오며 나타나는 AOS 모션도 실측값 그대로 가져다 쓸 수 있습니다.
https://ridicorp.comColor Palette
Primary
Accent
Label
Line
Background
Static
Typography
Noto Sans KR · 400 / 500 / 700 / 900한글 100% — display·heading·body 전부
Poppins · 400 / 500 / 700 / 800 / 900라틴 전용 display·heading·body
RIDIBatang · 400선언만 — 실질 미사용
Noto Sans JP · 400 / 500 / 700 / 900일본어 선언(실측 0글리프)
Type Scalepx는 layout
display70px · 700 · 1.5
다람쥐 헌 쳇바퀴
h154px · 700 · 1.36
다람쥐 헌 쳇바퀴
h247.248px · 700 · 1.36
다람쥐 헌 쳇바퀴
h336px · 700 · 1.63
다람쥐 헌 쳇바퀴
h424px · 700 · 1.36
다람쥐 헌 쳇바퀴
lead21.008px · 400 · 1.63
다람쥐 헌 쳇바퀴
label18px · 400 · 1.63
다람쥐 헌 쳇바퀴
body16px · 400 · 1.63
다람쥐 헌 쳇바퀴
body-sm15px · 400 · 1.47
다람쥐 헌 쳇바퀴
caption14px · 500 · 1.63
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR — Google Fonts 가변(css2?family=Noto+Sans+KR:wght@400;500;700;900). 한글 13,221글리프 중 13,220(100.0%). **CDP가 전 웨이트를 'Noto Sans KR Thin' 한 이름으로 보고하지만 실제 Thin이 아니다** — 가변 폰트 인스턴스 이름 보고 방식이고 hangulByWeight는 400(9,785) · 700(3,322) · 900(83) · 500(30)으로 갈린다. **선언 1순위는 'Poppins, Pretendard Variable'인데 Pretendard가 폰트 URL에 없어 로드되지 않는다 — 한글은 스택 뒤 Noto Sans KR이 받는다(선언과 렌더 불일치).** 자체 서체 RIDIBatang.woff는 6개 경로에 얹혀 있으나 10페이지 렌더 0글리프 |
| hangulWeights | 400 주력(9,785) · 700 제목(3,322) · 900 소수(83) · 500 소수(30) |
| body | 16px w400 lh1.63 자간 −0.25px(27회, 최다). 보조 15px w400 lh1.47 |
| sub | 21.008px w400 lh1.63 −0.25px — 기사 리드(3회). w500 변형 2회 |
| label | 14px w500 lh1.63 −0.25px(13회) · 14px w400 lh1.36 −0.5px(8회) |
| mixing | 층으로 나뉜다 — 내비 6개·홈 섹션 제목 5개·관련글 제목이 전부 영문(Poppins)이고, 국문은 사업 페이지 제목·기사 제목·본문·카드 제목이 맡는다. 한 줄 혼용도 흔하다(예: '리디, 구글 TCRP 공식 파트너사 선정' 47.248/700 → Poppins 10글리프 + Noto Sans KR 24글리프)로, 라틴 부분만 Poppins로 바뀐다 |
| hangulHeadings | 있음 — 국문 실측 최대는 70px/700('개인정보처리방침' 정책 페이지 제목, '리디' 태그 아카이브 제목). 그 아래 54px/700 국문 2건(사업 페이지 '고객의 IP 경험을 다채롭게 연결합니다.'·'궁극의 팬덤 플랫폼 기업 리디'), 47.248px/700 국문 3건(보도자료·스토리 상세 제목), 24px/700 카드 제목 15건. 홈 히어로 54px/700은 영문('Rich Imagination, Deep Insight')이고 국문은 그 아래 20px/400 부제로 온다 |
| verdict | 국문 대형 조판 레퍼런스로 유효하다 — 70·54·47px 세 단이 실측되고 전부 700 웨이트다. 참고할 규칙: ① 자간을 크기별로 바꾸지 않고 −0.25px 하나로 고정한다(70px −0.36% ~ 14px −1.79%) ② 대형 국문 제목의 행간은 1.36~1.50으로 넉넉하다(70px lh1.50, 54·47px lh1.36) ③ 본문 행간 1.63으로 제목보다 더 넓게 잡는다 ④ 국문 제목 앞뒤로 215~220px 여백을 둔다. 주의: 홈 폴드를 여는 자리는 영문이고 국문은 부제 20px이므로 '국문 히어로'가 아니라 '국문 페이지 제목·기사 제목' 레퍼런스다 |
| rendered | Noto Sans KR Thin ×13220 · Poppins ×1 |
영문 · Latin영문 전용
| latinFont | Poppins 6,244글리프(76.1%) · Noto Sans KR 1,948글리프(23.8%) · Apple SD Gothic Neo 8글리프(0.1%) |
| latinWeights | 실측 페이스 Thin · Medium · Black |
| share | 라틴 8,200글리프 / 한글 13,221글리프 — 지면의 38.3%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Poppins를 쓰는 단: display 70px/700 · h1 54px/700 · h3 36px/700 · label 18px/400 |
| mixing | 국영문 혼용 노드 254개(전체 767개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Poppins 영문 전용(76.1% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Poppins 라틴 76.1% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 70px) |
| sharedWithKorean | 국문과 같은 서체: Poppins · Noto Sans KR |
| rendered | Poppins ×5762 · Noto Sans KR Thin ×1948 · Poppins Medium ×471 · Poppins Black ×11 · Apple SD Gothic Neo ×8 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 미확인 | |
| Max width | 1200px | |
| Section gap | 홈 섹션 상하 패딩 220/220(사업) | |
| Header | 138px fixed | |
| Content Width By Template | 1200(홈·목록·정책, 후보 1232·1280) · 900(기사·스토리 상세, 후보 940) — 1440 실측 | |
| Grid Story | 홈 스토리 4열 379×388, 거터 32 (379×4 + 32×3 = 1,612 > 1200 — 가로 슬라이더다. slick 캐러셀이 붙어 있다) | |
| Card Padding | 뉴스룸 목록 행 1200×137, 3행 · 기사 태그 칩 69×23·36×23 gap 10 · 정책 표 300×44·300×48 4열 gap 0 | |
| Button Padding | 12×24 (CTA '지금 리디는 채용 중', r28) · 0 (페이지네이션 원형, r50%) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 5px | 9회 · 목록 컨테이너 |
| standard | 20px | 79회 · 버튼·칩 표준(최다) |
| cta | 28px | 1회 · 채용 CTA 버튼 — 18px/400에 패딩 12×24라 사실상 알약 |
| large | 35px | 1회 · 관측만 |
| circle | 50% | 51회 · 페이지네이션 버튼·불릿 |
Guidelines
Do
- 섹션 상하 패딩을 215~220px로 크게 준다 — 홈 4,432px에 섹션 5개가 이 여백으로 나뉜다
- 지면을 #FFFFFF와 #F9F9F9로 교대시켜 섹션을 구분한다(홈 흰 → 회 → 흰 → 회 → 블루)
- 채도는 #1E9EFF 하나만, 로고·CTA·마지막 300px 띠·5px 밑줄에만 쓴다
- 자간 −0.25px를 전 단에 고정한다 — 큰 글자는 손대지 않고(70px −0.36%) 작은 글자만 조인다(14px −1.79%)
- 국문 대형 제목은 700 웨이트로 간다 — 70px·54px·47.248px 전부 700이다
- 스크롤 진입 모션은 opacity 0.11 → 1 + translateY 89px → 0을 408~417px 범위에서 선형으로(AOS 1s ease 실측)
- 카드에 라운드·보더·그림자를 주지 않는다 — 379×388 스토리 카드가 radius 0 · border 0 · shadow none이다
Don't
- #1E9EFF 위에 흰 글자를 올리지 않는다 (2.84:1, AA 미달 ×39). 그 위 텍스트는 #101010로(6.7:1)
- #808080을 본문에 쓰지 않는다 (#fff 위 3.95:1 · #f9f9f9 위 3.75:1, 둘 다 AA 미달)
- 그라디언트를 쓰지 않는다 (gradients 0). 그림자도 rgba(0,0,0,.1) 0 0 25px 하나만(9회)
- 큰 글자에 큰 음수 자간을 주지 않는다 — 70px에서도 −0.25px(−0.36%)에서 멈춘다
- Pretendard를 선언에만 넣지 않는다 — 이 사이트가 'Poppins, Pretendard Variable'을 선언하고도 Pretendard를 로드하지 않아 한글이 Noto Sans KR로 떨어진다
- 스크롤 스크럽을 만들지 않는다 — 실측 3페이지에서 스크럽 0 · ScrollTrigger 0이고 전환 8건 전부 시간 기반·원샷이다
- 홈 카드 그리드를 4열로 눕히려 하지 않는다 — 379×4 + 32×3 = 1,612px로 콘텐츠 폭 1,200을 넘는 가로 슬라이더다
