스포카
자기 회사가 만든 서체로만 조판하고, 색은 초록 하나만 남긴 흰 지면.
스포카는 매장 관리 SaaS 회사의 채용·소개 사이트로, 흰 지면 위에 자사 배포 서체인 Spoqa Han Sans Neo 하나만 써서 조판합니다. 히어로 제목이 56px/700 국문 한 문장이고 인용문은 32px/300 Light까지 내려가, 국문 대형 조판에서 굵기 폭을 넓게 쓰는 사례로 볼 만합니다. 섹션 위 여백을 192px으로 크게 잡고 그림자와 애니메이션을 거의 쓰지 않아 지면이 조용합니다. 텍스트가 주인공인 채용 페이지나 회사 소개 페이지를 만들 때 참고하기 좋습니다.
https://spoqa.co.krColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Spoqa Han Sans Neo · 300 / 400 / 500 / 700display·heading·body·ui 전부 — 한글 100% · 라틴 99.6%
Open Sans · 300 / 400 / 600 / 700선언만 있고 거의 안 그림
Arial · 400브라우저 폼 위젯 기본
Type Scale자간이 전 구간 0이다 — raw 34단 중 letterSpacing이 붙은 것은 22px/600 Open Sans의 −1px 하나뿐이고, 1440 실측에서도 56·48·40·32px 전부 ls normal이다
hero56px · 700 · 1.29
다람쥐 헌 쳇바퀴
h248px · 500 · 1.33
다람쥐 헌 쳇바퀴
h340px · 500 · 1.5
다람쥐 헌 쳇바퀴
quote32px · 300 · 1.6
다람쥐 헌 쳇바퀴
h432px · 700 · 1.5
다람쥐 헌 쳇바퀴
h528px · 300 · 1.5
다람쥐 헌 쳇바퀴
lead24px · 400 · 1.75
다람쥐 헌 쳇바퀴
body18px · 400 · 1.5
다람쥐 헌 쳇바퀴
ui14px · 400 · 1.5
다람쥐 헌 쳇바퀴
caption13px · 400 · 1.75
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Spoqa Han Sans Neo 23,957글리프(100%) — Regular 8,888(37.1%) · Light 8,257(34.5%) · Medium 4,555(19.0%) · Bold 2,257(9.4%). 폴백 서체가 한 글자도 그리지 않는다 |
| hangulWeights | 300 Light 8,232 · 400 Regular 8,714 · 500 Medium 4,531 · 700 Bold 2,251. Light가 Regular와 거의 동률인 것이 이 사이트의 특징이다(다른 국문 사이트에서 300은 보통 소수 웨이트다) |
| body | 18px/400 lh1.5 ls0 (count 24, 최다). 같은 18px에 500·700·300 변형이 각각 16·15·2회 |
| sub | 24px/400 lh1.75 리드(6회) · 28px/300 lh1.50 인터뷰 질문 · 32px/300 lh1.60 인용 |
| label | 18px/500·700 nav 라벨 · 13px/400 lh1.75 주소·메타(16회) · 12px/400 lh1.75(17회) |
| mixing | 혼용 노드 430개(전체 1,137개 중 37.8%)이고 430개 전부 한글만 담은 프로브로 재측정에 성공했다. 서체 전환은 없다 — 영문 단어('Grant' 'Tom' 'interview1')까지 Spoqa Han Sans Neo가 그린다. 선언된 Open Sans는 라틴 46글리프(0.4%)에서만 실제로 나타난다 |
| hangulHeadings | 있다. 국문 최대는 홈·채용 h1 56px/700 lh1.29(72.24px) 자간 0 '우리는 사장님의 식자재 걱정을 덜어주는 편리한 서비스를 만듭니다.'(1440 실측 y226). 다음이 48px/700 lh1.50 '우리는 이렇게 일해요' 등 5곳, 40px/700 lh1.50 '든든한 식자재 파트너' |
| verdict | 국문 대형 조판 레퍼런스로 유효하다 — 56px/700 국문 한 문장 히어로가 실재하고, 자간 0·행간 1.29라는 값을 그대로 인용할 수 있다. 특히 국문 32px에 Light 300을 쓰는 인용 조판은 라이브러리 안에서 드문 사례다. 반면 색 대비는 초록·회색 둘 다 AA 미달이라 팔레트는 참고하지 말 것 |
| rendered | Spoqa Han Sans Neo ×8888 · Spoqa Han Sans Neo Light ×8257 · Spoqa Han Sans Neo Medium ×4555 · Spoqa Han Sans Neo Bold ×2257 |
영문 · Latin국문과 동일
| latinFont | Spoqa Han Sans Neo 11,556글리프(99.6%) · Open Sans 46글리프(0.4%) · Apple SD Gothic Neo 3글리프(0.0%) |
| latinWeights | 실측 페이스 Medium · Light · Bold |
| share | 라틴 11,605글리프 / 한글 23,957글리프 — 지면의 32.6%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Spoqa Han Sans Neo를 쓰는 단: hero 56px/700 · h2 48px/500 · h3 40px/500 · quote 32px/300 · h4 32px/700 · h5 28px/300 · lead 24px/400 · body 18px/400 · ui 14px/400 · caption 13px/400 |
| mixing | 국영문 혼용 노드 430개(전체 1,137개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 32.6%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.6%를 그리는 Spoqa Han Sans Neo가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Spoqa Han Sans Neo |
| rendered | Spoqa Han Sans Neo ×6112 · Spoqa Han Sans Neo Medium ×2297 · Spoqa Han Sans Neo Light ×1939 · Spoqa Han Sans Neo Bold ×1208 · Open Sans ×46 · Apple SD Gothic Neo ×3 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 미확인 | |
| Max width | 1020px | |
| Section gap | 섹션 위 패딩 192px이 채용·홈의 기본 리듬이다(padT 192 x4). 160px(채용 인용 블록) | |
| Header | 90px fixed | |
| Card Padding | 채용 원칙 카드 1020x252 3행 · 복지 행 499x40 5개 · 채용공고 행 1019x59 9개 · 언론 카드 350x384 6개(3열) · 인터뷰 문답 679x133 | |
| Button Padding | 20x32 (주 CTA r10 18px/700) · 4x10 (사진 위 아웃라인) · 12x16 (인풋 r10) · 10px (Quform 인풋 r10) | |
| Content Widths | 용도별로 네 값 — 홈·채용 1020px(후보 1020x101·1020x179) · 인터뷰 680px · 지원서/인재풀 폼 640px · 약관 760px · 구 인터뷰 페이지 1000px |
Border Radius
| Role | Value | Preview |
|---|---|---|
| table | 2px | 4회 · 표 셀 |
| small | 4px | 24회 · 검색·셀렉트 |
| chip | 5px | 96회 · 인라인 강조 span |
| button-alt | 8px | 6회 · 일부 버튼 |
| standard | 10px | 105회 · CTA 버튼·인풋·카드 표준 |
| large | 30px | 2회 · 아이콘 배지 |
| circle | 50% | 2회 · 원형 요소 |
Guidelines
Do
- 국문 히어로를 56px/700 lh1.29 한 문장으로 세운다 — 이 사이트의 h1은 홈·채용 둘 다 같은 문장이다
- 자간을 건드리지 않는다 — 56·48·40·32px 전부 ls normal(1440 실측)이고 raw 34단 중 자간이 붙은 단이 하나뿐이다
- 행간을 크기에 반비례로 준다 — 56px lh1.29 → 32px lh1.60 → 24px lh1.75 → 13px lh1.75
- 웨이트로 층을 만든다 — 같은 32px에 인용 300 · 소제목 500 · CTA 700을 나눠 쓴다(Light 300이 전체 한글의 34.5%)
- 섹션 위 여백을 192px으로 크게 잡고 배경색은 바꾸지 않는다(9페이지 전 섹션 #FFFFFF)
- 콘텐츠 폭을 용도별로 나눈다 — 읽는 글 680px · 폼 640px · 목록/그리드 1020px · 약관 760px
- 라운드는 10px 하나로 버튼과 인풋을 함께 맡긴다(105회, 알약 0회)
Don't
- 초록 #00AB6E 위에 흰 글자를 얹지 않는다 — 2.98:1(59쌍)로 AA에 크게 못 미친다. 짙은 #008C5E도 4.27:1이라 부족하다
- #717D85을 본문에 쓰지 않는다 — 4.22:1(139쌍) AA 미달인데 팔레트 등장 페이지 수는 9로 최다다
- 알약 버튼을 넣지 않는다 — radius 9999px이 0회다
- 그림자로 카드를 띄우지 않는다 — box-shadow가 rgba(0,0,0,.25) 0 10.08px 10.08px 8회 한 종뿐이고 그라디언트는 0개다
- 진입 애니메이션을 넣지 않는다 — CSS 키프레임 0개, 3페이지 스크롤 전환 0건, 모션 라이브러리 0개다
- Open Sans 같은 라틴 서체를 따로 얹지 않는다 — 선언은 있지만 실제로 46글리프(0.4%)만 그리고 영문 제목까지 Spoqa Han Sans Neo가 맡는다
- 폼 스타일을 플러그인 기본값에 맡기지 않는다 — 같은 지원서 안에 인풋 두 종(자체 1px #B1BDC4 / Quform rgba(0,0,0,.04))이 섞여 있다
