스마일게이트

라이브러리에서 스크롤에 가장 깊이 잠긴 사이트 — 스크럽 트리거 112개·핀 16개, 국문 자간은 −1.5%로 전 단 고정.

스마일게이트는 스크롤 자체를 GSAP가 대신 굴리는 사이트입니다. LocomotiveScroll이 문서 대신 안쪽 래퍼를 움직이고, 게임 상세 페이지는 화면을 3,888px·3,780px 동안 고정해 둔 채 그 위 텍스트만 900px씩 교대시키는 방식으로 이야기를 끌고 갑니다. 조판에서는 자간 규칙이 뚜렷해서, 국문은 크기와 상관없이 −1.5%로 고정하고 영문은 −1%로 따로 굴립니다. 다만 폴드는 1440×900 영상이고 큰 제목은 대부분 영문이라, 국문 히어로보다는 스크롤 연출과 자간 체계를 가져올 사이트입니다.

https://www.smilegate.com

Color Palette

Primary

Label

Line

Background

Accent

Typography

Sandoll GothicNeo1 08 Eb · 300 / 400국문 디스플레이·제목

Sandoll GothicNeo1 05 Md · 300 / 400 / 500 / 600 / 700국문 본문·UI

Sandoll GothicNeo1 06 Sb · 300 / 400국문 nav·소형 라벨

Circular XX Web · 400 / 500 / 800영문 디스플레이·라벨 (한글 0)

Apple SD Gothic Neo · 500한글 폴백 (OS 시스템 폰트)

Type Scale**자간이 이 사이트의 규칙이다

display-en224px · 500 · 0.8

Handgloves 123

display-en-2108px · 800 · 1.16

Handgloves 123

year81px · 800 · 1.18

Handgloves 123

display-ko72px · 300 · 1

다람쥐 헌 쳇바퀴

h2-en60px · 800 · 1

Handgloves 123

h2-ko48px · 300 · 1.42

다람쥐 헌 쳇바퀴

h3-ko32px · 300 · 1.5

다람쥐 헌 쳇바퀴

lead-ko26px · 300 · 1.53

다람쥐 헌 쳇바퀴

label-en26px · 500 · 1

Handgloves 123

body-ko18px · 300 · 1

다람쥐 헌 쳇바퀴

body-sm16px · 300 · 1.6

다람쥐 헌 쳇바퀴

label14px · 400 · 1

다람쥐 헌 쳇바퀴

caption11px · 400 · 1

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Sandoll GothicNeo1 08 Eb 9,494글리프(47.6%) · 05 Md 9,352(46.9%) · 06 Sb 992(5.0%) · Apple SD Gothic Neo 90(0.5%)
hangulWeights	CSS 웨이트가 굵기를 정하지 않는다 — 선언 300에 17,795글리프가 몰려 있고 그 안에서 ExtraBold(9,462)와 Medium(8,013)이 갈린다. 400은 1,913(05 Md 1,209 · 06 Sb 672 · 08 Eb 32), 500은 산돌 페이스가 없어 OS 폰트로 떨어진다(Apple SD Gothic Neo 90)
body	18px w300 lh1.0 자간 −0.27px(−1.5%) · 16px w300 lh1.6 자간 0(53회) · 15px w400 자간 −0.3px(−2%) · 14px w400 자간 −0.21px(−1.5%)
sub	26px w300 lh1.53 자간 −0.39px(−1.5%) · 32px w300 lh1.5 자간 −0.48px(−1.5%) · 36px w300 (게임 상세 지표 문장)
label	14px w400 대문자 자간 −0.21px · 11px w400 자간 −0.22px(−2%) · 15px w400 자간 −0.3px(−2%)
mixing	층으로 완전히 나눈다 — 큰 글자와 라벨은 Circular XX Web 영문(224·108·81·60·26·14px), 국문은 산돌 고딕네오1(72·54·48·32·26·18·16·14·11px)이 맡는다. 자간까지 언어별로 다르다(국문 −1.5% · 라틴 −1%). 한 줄 안 혼용 시 라틴은 산돌이 그대로 받는다 — 산돌 05 Md가 라틴 21,190글리프로 라틴 최다다
hangulHeadings	있다 — 국문 최대 72px/300(실제 ExtraBold) 3회, 개인정보처리방침 페이지 제목 54px/300, 섹션 제목 48px/300, 소제목 32px/300, 게임 상세 지표 36px/300. 다만 홈 폴드에는 국문 제목이 0자이고 홈의 섹션 제목도 전부 영문 60px/800이라, 국문 대형이 나오는 자리는 연혁·정책·게임 상세다
verdict	홈 폴드는 국문 히어로 레퍼런스가 아니다 — 1440×900 영상에 텍스트 0자이고 홈 섹션 제목도 전부 영문이다. 다만 국문 자간 체계는 라이브러리에서 가장 가져갈 만하다 — 72·48·32·26·18·14px 전 단이 정확히 −1.5%이고 15·11px만 −2%로 내리는 규칙이 실측으로 확인된다. 국문 대형 조판 사례로는 72px/300(ExtraBold 파일)과 정책 페이지 54px/300이 있다. 반대로 웨이트 값은 절대 옮기면 안 된다 — 굵기가 파일 이름에 들어 있어서 300을 그대로 쓰면 얇은 글씨가 나온다. 조판보다 모션·레이아웃 레퍼런스로서 가치가 더 크지만, 자간 한 항목만은 조판 레퍼런스로도 유효하다.
rendered	Sandoll GothicNeo1 08 Eb ×9494 · Sandoll GothicNeo1 05 Md ×9352 · Sandoll GothicNeo1 06 Sb ×992 · Apple SD Gothic Neo ×90

영문 · Latin영문 전용

latinFont	Sandoll GothicNeo1 05 Md 21,190글리프(61.0%) · Sandoll GothicNeo1 08 Eb 10,544글리프(30.4%) · . 2,308글리프(6.6%) · Sandoll GothicNeo1 06 Sb 593글리프(1.7%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 34,710글리프 / 한글 19,928글리프 — 지면의 63.5%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Sandoll GothicNeo1 05 Md를 쓰는 단: lead-ko 26px/300 · body-ko 18px/300 · body-sm 16px/300 · caption 11px/400
mixing	국영문 혼용 노드 536개(전체 2,337개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	이름 미보고 서체(.) 영문 전용(6.6%)
verdict	영문 전용 서체가 있다 — 이름 미보고 서체(.) 라틴 6.6% / 한글 0.0%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다
sharedWithKorean	국문과 같은 서체: Sandoll GothicNeo1 05 Md · Sandoll GothicNeo1 08 Eb · Sandoll GothicNeo1 06 Sb · Apple SD Gothic Neo
rendered	Sandoll GothicNeo1 05 Md ×21190 · Sandoll GothicNeo1 08 Eb ×10544 · . ×2308 · Sandoll GothicNeo1 06 Sb ×593 · PingFang SC ×67 · Times New Roman ×7 · Apple SD Gothic Neo ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	4px
Max width	1200px
Section gap	홈 섹션 제목 위 padT 180(SMILEGATE NOW)
Header	84px fixed
Grid Home	SMILEGATE NOW 8열 232×325 거터 48 · NEWSROOM 6열 347×435 거터 80 · 사업 3열 462×45 · 플로우 마퀴 2,808×534(8아이템)
Grid Sub	연혁 1열 527×135/171/207(3단 높이) · 정책 4열 189×356 거터 0 · 연락처 1열 754×14
Card Padding	연혁 카드 527×135(짧은 항목) · 527×171 · 527×207(이미지 포함)
Button Padding	GO TO WEBSITE 8×12 (r0 · 1px solid #ED5D2A) · Website 14 (r54px · 1px solid #666666)
Content Width By Page	홈 1200 · 연혁 1052 · 게임 상세 1296 · 연락처·정책 756

Border Radius

Role	Value	Preview
square	0px	2회 · 카드·이미지·표 전부. 게임 상세 버튼 'GO TO WEBSITE'도 0px
md	10px	9회 · 작은 태그
pill	54px	7회 · 게임 상세 'Website' 버튼 — 패딩 14 기준 완전 알약
pill-lg	100px	3회 · 큰 알약 블록
circle	100%	15회 · 아이콘 원판·인디케이터 — 가장 흔한 라운드

Guidelines

국문 자간은 크기와 상관없이 −1.5%로 고정한다 — 72·48·32·26·18·14px 전부 −1.5%이고 15px·11px만 −2%로 한 단 더 좁힌다
영문 자간은 국문과 따로 굴린다 — Circular XX Web은 224·108·80px 전부 −1%, 대문자 라벨 하나만 +20%(26px/500 · +5.2px)
국문 굵기는 웨이트 값이 아니라 폰트 파일로 지정한다 — CSS는 font-weight:300인데 08 ExBd·05 Md·06 Sb 파일이 굵기를 만든다
지면을 평평하게 둔다 — 그림자 0종 · 그라디언트 0종, 구분은 1px 선(#000000 125회 · #E2E2E2 84회)으로만
콘텐츠 면은 radius 0, 둥근 것은 버튼(54·100px 알약)과 아이콘(100%)에만 — 중간값 4·8·12·16px을 쓰지 않는다
여백은 4px 배수로 잡는다 — 40(980회)·20(720)·24(503)·12(442)·80(203)·32(182)이 실측 최빈값이고 섹션 위아래는 150~180
스크롤 연출은 구간을 넓게 잡는다 — 홈은 섹션 하나가 900~1,800px 스크럽 구간을 쓰고, 연혁은 연도 그룹 하나가 1,512~9,890px을 쓴다
긴 스토리 구간은 핀을 겹쳐서 만든다 — 게임 상세는 히어로를 3,888px 고정하고, 키워드 블록 안쪽을 2,880/3,780px 두 겹으로 핀한 뒤 그 위 텍스트를 900px씩 아홉 번 교대로 핀한다(전부 scrub:1)

Don't

font-weight 값을 그대로 옮기지 않는다 — 300으로 선언된 한글 17,795글리프를 ExtraBold(9,462)와 Medium(8,013)이 나눠 그린다. 웨이트만 복사하면 굵기가 완전히 달라진다
#FF5000 위에 흰 글자를 얹지 않는다 — 3.28:1로 32회 AA 미달이다. 연혁 마커 #FFD241(1.44:1)·#1EEBC8(1.52:1)도 마찬가지
#999999을 본문에 쓰지 않는다 — 흰 지면 위 2.85:1로 44회 미달. #666666(5.74:1)까지만
#666666을 다크 지면(#111111)에 쓰지 않는다 — 3.29:1로 미달한다. 다크 지면 텍스트는 #FFFFFF나 #ED5D2A(5.58:1)로
layout.json의 docHeight 900을 페이지 길이로 읽지 않는다 — LocomotiveScroll이 문서 대신 래퍼를 움직여서 8페이지가 900으로 보고된다. 실제 길이는 연혁 32,289 · 연락처 5,329(motion.json 실측)
핀을 아무 페이지에나 쓰지 않는다 — ScrollTrigger 113개 중 핀은 게임 상세 한 페이지의 16개뿐이고 홈·연혁·연락처·정책은 핀 0으로 스크럽만 쓴다. 연혁처럼 항목이 많은 페이지에서 화면이 멈춰 보이는 것은 핀이 아니라 긴 스크럽 구간(1,512~9,890px)이 만든 인상이다
폴드를 국문 히어로 조판 레퍼런스로 쓰지 않는다 — 홈 히어로는 1440×900 영상에 제목 0자이고, 큰 제목 자리는 대부분 영문(60·81·108·224px)이 차지한다