코오롱스포츠
1440×796 슬라이드와 영문 58px 한 줄로 열고, 그 아래는 208×548 상품 트랙과 36px 국문 제목이 흰 지면 위를 굴러간다.
코오롱스포츠 공식몰은 한 서체로 전부 끌고 가는 아웃도어 커머스입니다. Spoqa Han Sans Neo가 국문과 영문을 다 그리고 웨이트는 400·500 두 단에 88%가 몰려 있어, 굵기 대신 크기와 자간으로만 위계를 만듭니다. 자간 규칙이 뚜렷한 편이라 36px 국문 섹션 제목에 −5.6%, 42px에 −4.8%로 크게 조이면서 13~20px 본문은 자간 0으로 두는 이원 규칙을 그대로 가져갈 만합니다. 폴드 히어로는 영문 58px이라 국문 히어로 참고로는 맞지 않고, 상품 트랙과 필터 칩으로 짠 커머스 홈 골격을 볼 때 쓰시면 좋습니다.
https://www.kolonsport.comColor Palette
Label
Line
Background
Accent
Typography
Spoqa Han Sans Neo · 300 / 400 / 500 / 700국문·영문 전부
Pretendard Variable · 300 / 400 / 600 / 700에디토리얼 페이지 전용
Type Scale크기 기준은 layout
editorial-display74px · 600 · 1.2
다람쥐 헌 쳇바퀴
hero-en58px · 500 · 1.21
다람쥐 헌 쳇바퀴
editorial-h155.5px · 600 · 1.2
다람쥐 헌 쳇바퀴
display-thin50px · 300 · 1.5
다람쥐 헌 쳇바퀴
h242px · 700 · 1.1
다람쥐 헌 쳇바퀴
section-ko36px · 500 · 1.2
다람쥐 헌 쳇바퀴
welcome32px · 300 · 1.5
다람쥐 헌 쳇바퀴
lead24px · 400 · 1.5
다람쥐 헌 쳇바퀴
link16px · 400 · 1
다람쥐 헌 쳇바퀴
body15px · 500 · 1.4
다람쥐 헌 쳇바퀴
caption12px · 400 · 1.08
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Spoqa Han Sans Neo (self-hosted SpoqaHanSansNeo-Thin/Light/Regular/Medium/Bold, ttf·woff·woff2 15파일 — 사이트가 싣는 폰트 전부). 한글 20,316글리프의 88.8%(Regular 16,327 80.4% · Medium 1,703 8.4% · Light 12 · Bold 6)를 그리고 나머지 11.2%(2,268)는 Pretendard Variable이다. 선언 1순위·2순위와 실제 순위가 그대로 일치하고 OS 폰트 폴백은 0글리프다 |
| hangulWeights | 300: Spoqa 52 + Light 12 + Pretendard 11 · 400: Spoqa 10,769 + Pretendard 2,101 · 500: Spoqa 5,506 + Medium 1,703 · 600: Pretendard 15 · 700: Pretendard 141 + Bold 3. 400·500 두 단이 17,978글리프(88.5%)이고 굵은 국문은 사실상 없다 — CSS 700 한글 144글리프 중 141이 Pretendard다. 28px/100 스타일이 선언돼 있으나 Thin 렌더는 0글리프다 |
| body | 15px/500 lh1.40 자간 0(raw ×20) · 16px/400 lh1.00(×29, 최다) · 14px/400 lh1.57(×11) · 13px/400 lh1.00(×18) |
| sub | 24px/400 lh1.50 자간 −1px(×2) · 24px/500 lh1.29 자간 0(×4) · 20px/400 lh1.60 |
| label | 12px/400 lh1.08 −0.2px(×25) · 12px/500 lh1.33(×18) · 10px/500 lh1.35 −0.2px(×6) · 9px/400 lh1.30 −0.2px(×6) |
| mixing | 국영문을 한 서체가 그려서 혼용이 티가 나지 않는다 — Spoqa Han Sans Neo가 한글 88.8%와 라틴 92.7%를 함께 맡는다. 상품명·기능 용어가 영문이라 지면의 59.8%가 라틴인데도 조판이 갈리지 않는 이유가 이것이다. 혼용 노드는 837개(전체 4,001개)이고 프로브 성공은 821개다 |
| hangulHeadings | 있다. 사이트 국문 최대는 에디토리얼 /Page/243383의 55.5px/600 '안전한 우중 액티비티를 위해'(Pretendard Variable, 콘텐츠 폭 1,040)이고, 홈 국문 최대는 36px/500 lh1.20 자간 −2px(−5.6%) 섹션 제목이다 — '새로운 시작'(y980) · '자연에서 느끼는 솟솟한 즐거움!'(y2236) · '안전한 우중 액티비티를 위해'(y3056). 가입 페이지에 32px/300 '코오롱스포츠에 오신 것을 환영합니다'가 있다. 폴드 히어로 58px/500은 영문 'THE STANDARD OF CARRY'이고, 42px/700·74px/600 단도 국문 카피로 확인된 자리가 없다 |
| verdict | 국문 히어로 레퍼런스로는 부적합하다 — 폴드 히어로 58px 자리가 영문이고 국문은 홈에서 36px, 사이트 전체로도 55.5px에서 멈춘다. 유효한 것 셋: ① 국문 자간의 이원 규칙 — 24px 이상은 −1.7%~−5.6%로 크게 조이고 13~20px 본문 대역은 0, 12px 이하 캡션만 −0.2px. 36px/500 −5.6%는 라이브러리 국문 섹션 제목 중에서도 센 값이다 ② 웨이트를 400·500 두 단(88.5%)으로만 끌고 가는 조판 — 굵기 대신 크기와 자간으로 위계를 만드는 표본이다 ③ 한 서체(Spoqa Han Sans Neo)가 국문과 라틴 60%를 함께 그려도 무너지지 않는 국영문 혼용 사례 |
| rendered | Spoqa Han Sans Neo ×16327 · Pretendard Variable ×2268 · Spoqa Han Sans Neo Medium ×1703 · Spoqa Han Sans Neo Light ×12 · Spoqa Han Sans Neo Bold ×6 |
영문 · Latin국문과 동일
| latinFont | Spoqa Han Sans Neo 28,009글리프(92.7%) · Pretendard 2,211글리프(7.3%) |
| latinWeights | 실측 페이스 Medium · Bold · Light |
| share | 라틴 30,220글리프 / 한글 20,316글리프 — 지면의 59.8%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Spoqa Han Sans Neo를 쓰는 단: hero-en 58px/500 · h2 42px/700 · section-ko 36px/500 · welcome 32px/300 · lead 24px/400 · link 16px/400 · body 15px/500 · caption 12px/400 |
| mixing | 국영문 혼용 노드 837개(전체 4,001개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 59.8%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 92.7%를 그리는 Spoqa Han Sans Neo가 한글도 88.8% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Spoqa Han Sans Neo · Pretendard |
| rendered | Spoqa Han Sans Neo ×17570 · Spoqa Han Sans Neo Medium ×10204 · Pretendard Variable ×2211 · Spoqa Han Sans Neo Bold ×142 · Spoqa Han Sans Neo Light ×93 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact(타입) × spacious(이미지) | |
| Base unit | 8px | |
| Max width | 1312px | |
| Section gap | 홈 섹션이 여백 없이 붙는다(y 104→980→1608→2236→3056→3784, padding 0/0). 리듬은 섹션 높이로 만든다 — 796·628·628·820·648·657px | |
| Header | 104px static | |
| Content Widths | 홈 1312 · 기획전·멤버십 1304 · 스토어 1200 · 에디토리얼 1040 · 가입 960. 목록 페이지의 484는 추출기 오검출로 본다(미확인) | |
| Grid Home | 상품 트랙 20개 208×548 gap 0(가로 스크롤) · 기획 카드 3열 309×615 · 히어로 슬라이드 1440×796 ×9 | |
| Grid Promo | 기획전 카드 289×329 gap 18, 9~10장 | |
| Grid Store | 매장찾기 블록 5열 33×15 gap 16 — 전 페이지 하단 공통 657px | |
| Card Padding | 필터 칩 12×16 · 쿠폰 버튼 0×30 · '더 보기' 6×8 | |
| Button Padding | 회원가입 0×25 · 조회 0×25 · 필터 12×16 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| standard | 2px | 726회 · span 기본. 사실상 지면 전체의 라운드값이라 각져 보인다 |
| small | 4px | 7회 · span |
| small | 5px | 16회 · span |
| input | 6px | 1회 · 체크박스 |
| medium | 9.984px | 1회 · 리스트 아이템 |
| medium | 10px | 15회 · div·a |
| medium | 15px | 3회 · '더 보기' 버튼(1px solid #B3B3B3) |
| large | 20px | 74회 · 라벨·배지 |
| pill | 50px | 2회 · 버튼 |
| circle | 50% | 6회 · 이미지 아바타 |
| pill | 500px | 4회 · 앵커 알약 |
| pill | 999px | 11회 · 카테고리 필터 칩(pad 12×16, 1px #E6E6E6, 활성 시 bg #000000·#1F1F1F) |
Guidelines
Do
- 국문 섹션 제목은 36px/500에 자간 −2px(−5.6%)로 크게 조인다 — 42px −4.8%, 74px −4.0%도 같은 결이다
- 13~20px 본문 대역은 자간 0으로 두고, 12px 이하 캡션에만 −0.2px을 준다
- 웨이트를 400·500 두 단으로 끌고 간다(한글 88.5%) — 굵기 대신 크기와 자간으로 위계를 만든다
- 섹션 여백을 0으로 두고 리듬을 섹션 높이로 만든다(796·628·628·820·648·657px)
- 상품 트랙은 208×548 카드 20개를 gap 0으로 가로 배치하고 좌우 화살표 2개만 단다
- 라운드는 2px을 기본으로 하고 필터 칩만 999px 알약으로 둔다
- 사진 위 글자는 linear-gradient(rgba(0,0,0,.3)) 딤 한 겹으로 살린다
Don't
- #B3B3B3(2.10:1 ×340)와 브랜드 그린 #84BD00(2.27:1 ×339)을 텍스트 색으로 쓰지 않는다 — 그린은 hover와 강조에만
- Swiper 기본 파랑 #007AFF를 남기지 않는다 — dembrandt가 이걸 semantic.primary로 오판할 만큼 브랜드 색처럼 보인다
- Thin(100)·Light(300) 파일을 싣고 안 쓰지 않는다 — 28px/100 스타일이 선언돼 있는데 Spoqa Thin 렌더는 0글리프다
- 한 페이지에서만 서체를 바꾸지 않는다 — 에디토리얼(/Page/{id})만 Pretendard Variable로 갈려 국문 인상이 달라진다
- 국문 히어로를 이 사이트에서 베끼지 않는다 — 폴드 58px 자리는 영문이고 국문은 36px에서 멈춘다
- 한 섹션에 이미지 245장을 넣지 않는다(/Category/List/{id} 8,889px 단일 섹션) — 골격 추출도 스크롤 성능도 무너진다
- line-height 1.00을 남발하지 않는다 — 16px/400 링크(29건)·13px/400(18건)·20px/700이 전부 lh1.00이다
