이모션글로벌 (e·motion global)
회색 #EEEEEE 폴드 900px으로 문을 열고, 링크는 파랑 #0000EE로 놓였다가 손이 닿으면 예외 없이 빨강 #EE2C3C로 넘어간다.
국내 디지털 에이전시 이모션글로벌의 자사 사이트로, 이 라이브러리에 함께 실린 몇몇 사이트를 실제로 만든 제작사이기도 합니다. 페이지마다 회색 폴드 900px 아래에 흰 배경 900px 미디어 섹션이 붙는 2단 구성을 그대로 반복하고, 링크는 기본 파랑에서 손이 닿으면 예외 없이 빨강으로 넘어갑니다. 국문 자간을 크기와 무관하게 −5%로 통일하되 70px 히어로 제목에서만 0으로 푸는 규칙이 명확해, 국문 대형 조판에 그대로 옮길 수 있습니다. 라틴은 Montserrat, 국문은 Noto Sans KR로 자리를 나눠 씁니다.
https://www.emotion.co.krColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Noto Sans KR · 300 / 400 / 500 / 700국문 전용 — 히어로·제목·본문·캡션
Montserrat · 400 / 500 / 600 / 700라틴 디스플레이·네비게이션·UI 라벨
Arial · 400 / 500 / 700폼 컨트롤 폴백
Apple SD Gothic Neo · 500한글 폴백 (웹폰트 아님)
Type Scale42종 실측 중 count 3회 이상만 추렸다(1920 기준)
display156px · 700 · 1
Handgloves 123
display-290px · 600 · 1
Handgloves 123
hero-en80px · 700 · 1
Handgloves 123
hero-ko70px · 700 · 1.43
다람쥐 헌 쳇바퀴
h248px · 700 · 1.54
다람쥐 헌 쳇바퀴
h332px · 700 · 1.56
Handgloves 123
lead24px · 700 · 1.75
다람쥐 헌 쳇바퀴
body18px · 400 · 1
다람쥐 헌 쳇바퀴
ui16px · 500 · 1
Handgloves 123
caption14px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR (self-hosted woff 3종) — 한글 15,477글리프 중 Regular 10,416(67.3%) · Bold 4,695(30.3%) · Medium 176(1.1%) |
| hangulWeights | 400 주력(Regular 10,314) · 700 제목(Bold 4,483) · 500 소수(Medium 176 + Apple SD Gothic Neo 120) · 300은 221글리프뿐이고 그중 119를 Bold 파일이 그린다 |
| body | 18px/400 lh1.0 ls −0.9px(−5%) ×7 · 장문은 14px/400 lh1.5 ls −0.7px(−5%) ×7 · 24px/400 lh1.42 ls −1.2px(−5%) ×2 |
| sub | 24px/700 lh1.75 ls −1.2px(−5%) ×5 — 국문 리드 문단. 홈 works 카드 제목은 24px/500(Medium, 176글리프의 대부분) |
| label | 16px/400 Noto Sans KR ×31(국문 짧은 라벨) · 14px/400 lh1.5 ls −0.7px ×7(캡션) |
| mixing | 자리로 나눈다 — 라틴 디스플레이·nav·UI는 Montserrat(라틴 7,825글리프의 62.1%), 국문 전부는 Noto Sans KR. 다만 국문 문장 안에 섞인 영문은 Noto Sans KR이 그린다(라틴 2,883글리프). marketing 히어로 '…을 제공합니다'처럼 한 줄에 Noto Sans KR Bold 13 + Montserrat Thin 4가 섞이는 노드가 실제로 있다. 홈 히어로만 영문 전용(66.2px/500 Montserrat, 라틴 521글리프 대 한글 176) |
| hangulHeadings | 있다. 국문 최대 제목은 70px/700 Noto Sans KR lh1.43 자간 0 — consulting 히어로 '이모션글로벌은 프로젝트에 맞춤 컨설팅을 제공합니다', magazine 히어로 '이모션글로벌의 시선으로 세상을 이야기합니다', about '멈추지 않는 고민은 언제나 새로운 길을 걷게 합니다'(검정 배경 900px). 다음 단은 48px/700 ls −2.4px(marketing '차별화된 경험을 창조해냅니다', works '완벽함을 만들어 냅니다')이고 40px/700도 works 카드 제목에 쓰인다 |
| verdict | 국문 히어로 조판 레퍼런스로 유효하다. 홈만 영문 히어로(66.2px/500)이고 하위 5개 랜딩의 히어로 제목이 전부 국문 70px/700이며, 48px/700 국문 섹션 제목도 6회 잡힌다. 특히 −5% 일괄 자간과 '70px에서만 자간 0'이라는 예외는 국문 대형 조판에 그대로 이식할 수 있는 값이다. 반대로 line-height 1.0인 18px 본문은 <br> 전제 조판이라 장문에 옮기면 안 된다 |
| rendered | Noto Sans KR Regular ×6656 · Noto Sans KR Bold ×2776 · Apple SD Gothic Neo ×302 · Noto Sans KR Medium ×246 |
영문 · Latin영문 전용
| latinFont | Noto Sans KR 5,068글리프(51.5%) · Montserrat 4,633글리프(47.1%) · Arial 131글리프(1.3%) · Apple SD Gothic Neo 10글리프(0.1%) |
| latinWeights | 실측 페이스 Thin · Regular · Bold · SemiBold · Medium |
| share | 라틴 9,843글리프 / 한글 9,980글리프 — 지면의 49.7%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Noto Sans KR를 쓰는 단: hero-ko 70px/700 · h2 48px/700 · lead 24px/700 · body 18px/400 · caption 14px/400 |
| mixing | 국영문 혼용 노드 232개(전체 978개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Montserrat 영문 전용(47.1% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Montserrat 라틴 47.1% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 156px) |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR · Apple SD Gothic Neo |
| rendered | Montserrat Thin ×4481 · Noto Sans KR Regular ×3048 · Noto Sans KR Bold ×1967 · Montserrat SemiBold ×152 · Arial ×131 · Noto Sans KR Medium ×53 · Apple SD Gothic Neo ×10 · Helvetica ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 10px | |
| Max width | 1224px | |
| Section gap | 섹션 자체가 900px 고정 단위다 — 추출된 15개 섹션 전부 height 900. 큰 여백은 120px×47 | |
| Header | nullpx fixed | |
| Content Width By Page | 1224 (about 44회·consulting 33회·marketing 9회) / 1200 (magazine·works·careers·request·상세) / 740 (home 8회 — 후보 740×8 · 1280×6 · 712×5 · 1200×5로 흩어져 홈만 기준 컬럼을 확정하지 못했다, 미확인) | |
| Card Padding | works 카드 552×537 1열 39개 · magazine 카드 550×1000 74개 gap 120 · home 썸네일 84×76 14열 17개 gap −2 · consulting 타일 134×267 12열 35개 gap −133 | |
| Button Padding | 0px 10px (See More Work) · 10px 18px 10px 10px (Back to All Project) · 20px 40px (퍼즐피스 자세히보기) · 1px 6px (파일첨부·문의하기) | |
| Breakpoints | 1920 · 1200 · 992 · 768 · 767 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 4px | 19회 · 작은 div |
| small-2 | 10px | 25회 · div·section 블록 (상단만 둥근 10px 10px 0 0가 9회 — Behance 카드) |
| chip | 17px | 8회 · 배지 |
| standard | 20px | 75회 · 다이얼로그·카드 표준 |
| medium | 24px | 8회 · 앵커 블록 |
| label | 26px | 29회 · 라벨 알약 |
| button | 28px / 34px / 38px | 54회 · 버튼·div 알약 3종(각 18회) — 높이에 맞춰 반지름을 따로 잡는 방식 |
| button-lg | 40px | 3회 · 큰 알약 버튼 ('퍼즐피스 자세히보기' 20×40 패딩, '문의하기') |
| pill | 100px | 1회 · 'Back to All Project' 완전 알약 |
| circle | 50% / 100% | 138회 · 닫기·아이콘 버튼 123회 + div 15회 — 라운드 중 최다 |
Guidelines
Do
- 국문 본문·제목 자간은 −5%(−0.05em)로 통일한다 — 48px −2.4 · 24px −1.2 · 18px −0.9 · 14px −0.7 전부 같은 비율이다
- 국문 대형 제목은 70px/700 Noto Sans KR lh1.43에 자간 0으로 둔다(−5% 규칙의 유일한 예외)
- 폴드는 900px 고정에 배경 #EEEEEE, 그 아래는 흰 배경 900px 미디어 섹션 — 2단 구조를 페이지마다 반복한다
- 링크 hover는 예외 없이 #EE2C3C 하나로 수렴시킨다(관측 8종 전부, 0.3s ease)
- 선은 1px solid #DDDDDD 하나로만 긋는다(56+28회). 폼은 밑줄만 남기고 나머지 변을 none으로
- 라틴은 Montserrat, 국문은 Noto Sans KR로 자리를 나눈다 — 한글 97.6%가 Noto Sans KR, 라틴 62.1%가 Montserrat
- 알약 버튼은 높이의 절반을 반지름으로 잡는다(28·34·38·40·100px). 원형 아이콘 버튼은 50%(123회)
Don't
- #EE2C3C를 흰 바탕·#EEEEEE 바탕 본문에 쓰지 않는다 (4.15:1 ×56 · 3.58:1 ×135, 둘 다 AA 미달)
- #A0A0A0(2.61:1 ×14)·#B7B7B7 계열을 읽어야 하는 텍스트에 쓰지 않는다 — 회색 텍스트의 바닥은 #666666(5.74:1)
- 8px 배수만으로 여백을 짜지 않는다 — 실측 상위에 30px(110회)·10px(59)·50px(29)·70px(18)이 있어 실질 그리드는 10px이다
- #007AFF(8회, swiper-button)를 브랜드 색으로 승격하지 않는다 — 라이브러리 기본값 잔재로 보인다
- line-height 1.0(18px 본문·16px 라벨·24px UI)을 국문 장문에 그대로 옮기지 않는다 — 이 사이트는 <br>로 줄을 끊는 짧은 문장 전제다(미확인)
- 폼 텍스트를 13.3333px Arial로 두지 않는다 — Element Plus 기본값이 그대로 노출된 결과지 조판 결정이 아니다
- 그림자를 겹쳐 띄우지 않는다 — 5종뿐이고 가장 강한 것도 rgba(0,0,0,0.2) 0 5px 40px(18회)로 넓고 옅다
