펄어비스
폴드는 15초마다 넘어가는 1440×780 게임 영상, 그 아래는 34px 웨이트 400 국문 한 문장으로 여는 흰 페이지.
펄어비스는 홈 폴드를 게임 영상 캐러셀로 채우고, 제목 대신 '자세히 보기' 버튼만 얹습니다. 그 아래와 서브페이지는 전부 흰 지면으로 바뀌어, 페이지마다 같은 자리에 34px 굵기 400짜리 국문 문장 하나를 놓고 시작합니다. 큰 글씨로 밀어붙이지 않고 굵기를 400에 묶어 둔 절제된 서브 히어로가 이 사이트의 조판 특징입니다. 다만 스크롤에 반응하는 모션은 하나도 없고 진입 시 1초짜리 페이드가 전부라, 모션보다는 영상 캐러셀과 조용한 국문 문장형 헤더를 참고할 사이트입니다.
https://www.pearlabyss.com/ko-KRColor Palette
Label
Fill
Line
Background
Static
Accent
Typography
Noto Sans KR Regular · 300 / 400 / 700한글·라틴 전 위계 — 디스플레이·제목·본문·UI
Noto Sans KR Bold · 700한글 볼드 (실사용 극소)
Roboto · 400 / 700영문 전용 (한글 0)
Apple SD Gothic Neo · 700한글 폴백 (OS 시스템 폰트)
Type Scaleraw 1920에서 27종이 잡히고 그중 **letter-spacing 값이 있는 스타일은 0개**다 — 48px부터 12px까지 자간 규칙이 없다
display-ko48px · 700 · 1.2
다람쥐 헌 쳇바퀴
h242px · 700 · 1.2
다람쥐 헌 쳇바퀴
hero-statement34px · 400 · 1.6
다람쥐 헌 쳇바퀴
cta-title34px · 700 · 1.2
다람쥐 헌 쳇바퀴
h324px · 700 · 1.4
다람쥐 헌 쳇바퀴
h420px · 700 · 1.4
다람쥐 헌 쳇바퀴
card-title18px · 700 · 1.42
다람쥐 헌 쳇바퀴
body16px · 400 · 1.7
다람쥐 헌 쳇바퀴
body-sm15px · 400 · 1.33
다람쥐 헌 쳇바퀴
label14px · 400 · 1.4
다람쥐 헌 쳇바퀴
ui13px · 700 · 1.08
다람쥐 헌 쳇바퀴
caption12px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR Regular 15,539글리프(99.7%) · Noto Sans KR Bold 42(0.3%) · Apple SD Gothic Neo 2 |
| hangulWeights | 400 주력(11,559) · 700(3,944) · 300(36). 다만 700도 Regular 파일이 그린다 — Bold 페이스 실사용 42글리프 |
| body | 16px w400 lh1.7 자간 0 (본문 문단) · 15px w400 lh1.33 (링크·리스트) · 14px w400 lh1.4 (카드 요약, 27회) |
| sub | 34px w400 lh1.6 — 서브페이지 6곳의 문장형 히어로. 21px w400 · 22px w400 lh1.45 (부연 문단) |
| label | 14px w700 38회 · 13px w700 lh1.08 · 13.33px w400 18회 · 12px w400 lh1.5 — 국문 라벨에도 자간 0 |
| mixing | 서체가 사실상 하나라 혼용 문제가 없다 — Noto Sans KR Regular가 한글 99.7%와 라틴 6,891글리프를 함께 그린다. Roboto 420글리프만 영문 전용으로 붙는다. 국영문이 같은 줄에 있어도 서체가 바뀌지 않는다 |
| hangulHeadings | 있지만 작다 — 최대가 소개 페이지 48px/700 '집요' 두 글자이고, 섹션 제목은 42px/700, 페이지를 여는 것은 34px/400 문장형 히어로다. **홈 폴드에는 국문 제목이 0자**(영상 캐러셀 + 18px 버튼) |
| verdict | 국문 히어로·대형 조판 레퍼런스로는 부적합하다 — 폴드에 제목이 없고 국문이 48px에서 멈추며 자간 규칙이 0종이다. 대신 **34px/400 lh1.6 국문 한 문장으로 페이지를 여는 절제된 문장형 헤더**가 유효한 조판 사례이고(6페이지 동일 규격), 34px 자리에서 굵기를 400(문장)과 700(CTA 질문)으로 나눠 쓰는 규칙은 그대로 가져갈 만하다. 큰 제목 없이 흰 지면과 헤어라인으로 긴 코퍼레이트 페이지를 끌고 가는 방식이 이 사이트의 참고점이다. |
| rendered | Noto Sans KR Regular ×15539 · Noto Sans KR Bold ×42 · Apple SD Gothic Neo ×2 |
영문 · Latin폴백
| latinFont | Noto Sans KR 7,062글리프(94.4%) · Roboto 420글리프(5.6%) |
| latinWeights | 실측 페이스 Regular · Bold |
| share | 라틴 7,482글리프 / 한글 15,583글리프 — 지면의 32.4%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Noto Sans KR를 쓰는 단: display-ko 48px/700 · h2 42px/700 · hero-statement 34px/400 · cta-title 34px/700 · h3 24px/700 · h4 20px/700 · card-title 18px/700 · body 16px/400 · body-sm 15px/400 · label 14px/400 · ui 13px/700 · caption 12px/400 |
| mixing | 국영문 혼용 노드 559개(전체 1,882개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Roboto 폴백(5.6% · 선언됨) |
| verdict | 영문 전용 서체 없음(폴백) — 라틴을 Roboto 5.6%가 그리지만 전부 OS·브라우저 기본 페이스다. 서체를 고른 결과가 아니라 스택이 흘러간 결과이므로 **디자인 결정으로 인용하지 말 것** |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR |
| rendered | Noto Sans KR Regular ×6891 · Roboto ×420 · Noto Sans KR Bold ×171 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 4px | |
| Max width | 1220px | |
| Section gap | 서브페이지 히어로(y=70 | |
| Header | 70px relative | |
| Grid Cards | 뉴스 3열 384×342 거터 24 · 홈 소식 4열 335×295 거터 20 · 소개 3열 371×308 거터 24 · 채용 인재상 3열 322×319 거터 0 · 채용 문화 3열 406×200 거터 0 · 홈 뉴스 3열 467×114 거터 0 | |
| Card Padding | 채용 공고 행 높이 118(단문)/168(장문) · 보도자료 카드 368~394 | |
| Button Padding | 자세히 보기 0×10 · 필터 알약 0×20 · 유튜브 10×15 · 인풋 8×12/8×16/8×54 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| square | 0px | 3회 · 지원하기·더 많은 복지 보기·경력 필터 — 사각 버튼도 함께 쓴다 |
| xs | 2px | 8회 · 히어로 위 '자세히 보기' 버튼 |
| sm | 3px | 10회 · 채용 유튜브 버튼 |
| md | 4px | 13회 · 일반 버튼 — 가장 흔한 라운드 |
| chip | 13px | 9회 · 작은 태그 |
| pill | 27px | 10회 · 채용 목록 필터 알약 '전체 25' '인턴십 5' (높이 54 기준 완전 알약) |
| circle | 50% | 12회 · 캐러셀 화살표 '<' · 인디케이터 |
Guidelines
Do
- 폴드는 영상으로 채우고 제목을 얹지 않는다 — 1440×780 게임 루프 2종에 18px/400 '자세히 보기' 버튼만, 15초 진행 인디케이터로 넘어갈 시점을 알린다
- 서브페이지는 34px/400 lh1.6 국문 한 문장으로 연다 — 6페이지가 같은 y=70·높이 538~611 규격을 쓴다. 굵기를 700으로 올리지 않는 것이 이 사이트의 결이다
- 여백은 4px 배수로 잡는다 — 12(8,604회)·20(3,042)·16(1,973)·40(1,260)·32(658)이 실측 최빈값이다
- 목록은 카드가 아니라 선으로 나눈다 — 1px rgb(106,106,106) 하단 헤어라인 1,574회, 채용 공고 25행이 높이 118/168 두 종류뿐
- 채도색은 세 곳에만 쓴다 — 링크 파랑 #2E65D9(40회)·CONTACT US 네이비 #3047A5·채용 유튜브 #DB2F51. 나머지는 전부 흑백회색
- 긴 페이지의 끝은 검정 CTA 밴드로 닫는다(높이 320~499, 34px/700 국문 질문형 카피)
- 모션은 진입 시 1,000ms 페이드 한 번으로 끝낸다 — fadein·rollUp·fadeShow30 전부 1초, 커스텀 커브는 cubic-bezier(0.27, 0.21, 0, 0.99) 하나
Don't
- #969696을 본문에 쓰지 않는다 — 흰 지면 위 2.96:1로 716회 AA 미달이다. 본문은 #6A6A6A(5.41:1)까지만
- 라운드를 이 사이트에서 배우지 않는다 — 0·2·3·4·13·27·50%가 뒤섞여 있고 같은 채용 페이지에서 필터 버튼이 27px과 0px으로 갈린다
- 대형 국문에 자간을 지어내지 않는다 — 타입 스타일 27종의 letter-spacing이 전부 비어 있다
- 국문 웨이트 700을 볼드 페이스로 가정하지 않는다 — 웨이트 700 국문 3,944글리프를 Regular 파일이 그리고 Bold 페이스가 실제로 그린 것은 42글리프뿐이다
- 스크롤 구동 모션을 이 사이트에서 가져오지 않는다 — 3페이지 실측에서 스크롤 전환 0건 · ScrollTrigger 0개 · 관성 스크롤 없음
- #2E65D9를 회색 배경 위에 쓰지 않는다 — #D8D8D8 위 3.7:1로 미달한다
- 홈 폴드를 국문 히어로 조판 레퍼런스로 쓰지 않는다 — 제목 텍스트가 0자다
