스튜디오드래곤
흰 지면 한복판에 1387×780 영상을 통째로 놓고, 나머지는 회색 글자와 사진으로만 조용히 흐른다.
스튜디오드래곤은 98%가 흰 지면인 드라마 제작사 사이트로, 폴드를 글자가 아니라 1387×780 풀블리드 영상이 엽니다. 히어로에는 카피가 한 줄도 없고 로고 락업만 놓여 있어서, 조판보다 영상·작품 그리드 같은 레이아웃 근거를 보러 오는 레퍼런스입니다. 서체는 Noto Sans KR 한 벌로 국문과 영문을 모두 그리고, 전 크기 단에 음수 자간(50px에서 −3.0%, 본문 16px에서 −1.0%)을 건 것이 조판 규칙입니다. gsap과 ScrollTrigger가 로드돼 있지만 등록된 스크롤 트리거는 0건이라, 실제 연출은 진입 시 한 번 올라오는 페이드업 한 종류뿐입니다.
https://www.studiodragon.netColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Noto Sans KR · 300 / 400 / 500 / 700국문·영문 전담 (단일 서체)
Roboto · 400폴백 (의도 아님)
Apple SD Gothic Neo · Times New Roman · AppleGothic · Arial · 400OS 폴백 유출
iconfont · 400아이콘 폰트
Type Scalepx 기준은 layout
statement68px · 700 · 1
다람쥐 헌 쳇바퀴
page-title60px · 700 · 1
다람쥐 헌 쳇바퀴
section50px · 700 · 0.92
다람쥐 헌 쳇바퀴
h336px · 700 · 1.17
다람쥐 헌 쳇바퀴
lead-ko30px · 700 · 1
다람쥐 헌 쳇바퀴
quote24px · 500 · 1.33
다람쥐 헌 쳇바퀴
sub20px · 500 · 1.4
다람쥐 헌 쳇바퀴
strong18px · 700 · 1.33
다람쥐 헌 쳇바퀴
body16px · 500 · 1.5
다람쥐 헌 쳇바퀴
caption14px · 300 · 1.3
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR 10,342글리프(100%) — self-host NotoSansKR-Light/Regular/Medium/Bold.woff2. CDP는 서브셋 가공본이라 패밀리명을 못 읽고 'OTS derived font'로 보고하며, declaredFirstFamilies 1순위(Noto Sans KR)와 @font-face 파일명으로 동정했다. OS 폴백 유출 0건 |
| hangulWeights | 400 Regular 7,834(75.8%) · 500 Medium 2,249(21.7%) · 700 Bold 259(2.5%). 300 Light는 라틴 캡션에서만 쓰이고 한글 렌더는 잡히지 않았다. 800·900 파일이 없어 굵은 국문 대형이 불가능하다 |
| body | 16px w500 lh1.50 자간 −0.16px(−1.0%) — count 27 |
| sub | 50px w700 lh0.92 −1.5px(작품 제목) · 36px w700 lh1.17 −1.08px · 30px w700(회사소개 리드) · 24px w500 lh1.33 −0.4px · 20px w500 lh1.40 −0.2px(작품 카드 제목, ×9) |
| label | 14px w300 lh1.30 −0.4px ×115(최다) · 13px w400 lh1.30~1.54 −0.13~−0.4px ×17 · 12px w400 lh1.50 −0.12px |
| mixing | 국문·영문이 같은 서체·같은 크기 단을 공유한다. 50px/700 자리를 영문 섹션 제목(ON AIR · WORKS · BEST MOMENTS)과 국문 작품 제목('눈물의 여왕'·'포토 이미지')이 나눠 쓰고, 60px·68px 자리는 영문만 차지한다. 한 줄 안 혼용도 Noto Sans KR 단일이라 서체 전환이 일어나지 않는다 |
| hangulHeadings | 있으나 얕다 — 최대가 50px/700 lh0.92 −1.5px(작품 상세 '눈물의 여왕' y179 · '포토 이미지' y1415)이고 그다음이 30px/700(회사소개 리드 y1541) · 30px/500(윤리경영 '행동강령'·연혁 리드) · 24px/400(연혁 작품명 5건) · 20px/500(작품 카드 ×9)이다. 폴드(y<700)를 여는 자리는 10페이지 모두 텍스트가 아니라 영상·이미지이고, 68px·60px 큰 단은 전부 영문이다 |
| verdict | 국문 대형 조판 레퍼런스로는 부적합하다 — 폴드에 국문 카피가 0줄이고 웨이트가 700에서 끊긴다. 대신 두 가지로 유효하다: ① 전 구간 음수 자간 체계(50·36px −3.0% → 20·16px −1.0%)의 실측 표본, ② 국영문이 서체·크기 단을 완전히 공유하는 단일 서체 운영의 표본. 같은 그룹사인 CJ ENM이 전 구간 양수 자간(+1.5%)이라 두 사이트를 나란히 놓으면 국문 자간 선택의 양극이 보인다 |
| rendered | OTS derived font ×10342 |
영문 · Latin국문과 동일
| latinFont | OTS derived font 9,962글리프(97.1%) · Roboto 216글리프(2.1%) · Apple SD Gothic Neo 50글리프(0.5%) · Times New Roman 25글리프(0.2%) |
| latinWeights | 단일 페이스(웨이트 파생 페이스 없음) |
| share | 라틴 10,260글리프 / 한글 10,342글리프 — 지면의 49.8%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다 |
| mixing | 국영문 혼용 노드 345개(전체 968개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 49.8%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 97.1%를 그리는 이름 미보고 서체(OTS derived font)가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: OTS derived font |
| rendered | OTS derived font ×9962 · Roboto ×216 · Apple SD Gothic Neo ×50 · Times New Roman ×25 · AppleGothic ×5 · Arial ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 8px | |
| Max width | 1320px | |
| Docs width | 1000px | |
| Section gap | 회사소개 40px(띠 위 패딩) | |
| Header | 119px static | |
| Grid Works | 홈 WORKS 7열 336×493, 거터 0 (336×4=1344 ≈ 1320 — 4열 노출 + 가로 스크롤) | |
| Grid Moments | 홈 BEST MOMENTS 6열 336×288, 거터 0 | |
| Grid Footer | 푸터 패밀리사이트·SNS 7열 57×40, 거터 0 | |
| Grid About | 회사소개 1열 1070×104 4행 · 자료 목록 1열 1000×345 3행 | |
| Card Padding | 미측정 — 반복 아이템 치수(336×493 · 336×288 · 1070×104)만 실측 | |
| Button Padding | 17px 41px 18px (radius 0, 2px solid 테두리) — 상하 패딩이 1px 어긋난다 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 4px | 8회 · 칩·태그(span) |
| input | 5px | 1회 · 셀렉트 박스(combobox) |
| standard | 6px | 29회 · 이미지·카드 표준 (div/image, 최다) |
| — | 20px | 1회 · 관측만 (div) |
| pill | 27px | 4회 · 원형 아이콘 버튼(i) — 54px 지름 |
| pill-lg | 50px | 2회 · 알약 배지(span) |
| circle | 50% | 4회 · 아이콘(i) |
| circle-pct | 100% | 4회 · 원형 SNS 링크(a) — 우측 고정 40px |
Guidelines
Do
- 자간을 전 구간 음수로 건다 — 50·36px −3.0%, 18px −2.0%, 14px −2.86%, 20·16·13px −1.0%
- 본문색을 순검정이 아니라 #464646으로 쓴다(9.44:1, 77쌍). 검정은 제목·테두리에만
- 국문 제목을 영문과 같은 50px/700 lh0.92 단에 얹는다 — 국문용 별도 스케일을 만들지 않는다
- 폴드는 카피 없이 영상으로만 연다 — 1387×780(원본 1920×1080) 자동재생 + 로고 락업, 그 아래 첫 화면에서 68px 한 줄로 받는다
- 카드 그리드는 거터 0으로 붙이고 가로로 흘린다(336×493 7장 중 4장 노출)
- 라운드는 6px 하나로 통일하고(29회) 그 위는 전부 원형(50%·100%)으로 간다. 버튼은 radius 0
- 깊이가 필요하면 4단 부드러운 그림자를 쓴다 — 0 0 8px α.08 → 0 8px 18px α.06 → 0 12px 24px α.12 → 0 16px 24px α.10
- 콘텐츠 폭 1320 중앙, 텍스트가 긴 소개 페이지만 1000으로 좁힌다
Don't
- 국문 대형 조판 레퍼런스로 쓰지 않는다 — 이 사이트는 '모션·레이아웃 레퍼런스'다. 폴드에 카피가 0줄이고 웨이트에 800·900이 없어 굵은 국문 대형이 성립하지 않는다
- 800·900 웨이트를 쓰지 않는다 — self-host 파일이 Light 300·Regular 400·Medium 500·Bold 700 네 벌뿐이다(900은 선언만, unloaded)
- #999999를 #333333 위에 쓰지 않는다 — 4.43:1로 AA 미달(8회)
- #6C679B를 네이비 지면 본문에 쓰지 않는다 — #0A0259 위 3.47:1 미달(2회)
- 로고 네이비(#0A0259·#1B1465)를 UI 액션색으로 전용하지 않는다 — 버튼은 무채색 고스트뿐이다
- 스크롤에 잠긴 연출(스크럽·핀)을 만들지 않는다 — gsap 3.12.2·ScrollTrigger가 로드되지만 등록된 트리거는 0건이다
- 헤더를 고정하지 않는다 — 119px 정적 바가 스크롤과 함께 올라간다
