블랙야크 (BYN 공식몰)
1440×840 사진 6장으로 열고, 그 뒤로는 40px 영문 제목 한 줄과 상품 카드 트랙만 흰 지면 위를 흐른다.
블랙야크 공식몰은 사진을 화면 가득 쓰는 아웃도어 커머스입니다. 폴드는 1440×840 사진 슬라이드와 64px 영문 한 줄이 차지하고, 그 아래부터는 40px 영문 제목 + 상품 카드 트랙이 흰 지면 위에서 계속 반복됩니다. 브랜드 전용 서체 Futura for Blackyak이 영문 제목을 맡고 한글은 96%를 Noto Sans KR 웹폰트가 그리지만, 국문이 올라가는 가장 큰 자리가 40px이라 국문 대형 조판 레퍼런스로는 약합니다. 영문 제목과 사진으로 리듬을 만드는 커머스 홈 골격을 참고할 때 쓰시면 좋고, 확보한 표본은 홈 한 페이지뿐입니다.
https://www.blackyak.comColor Palette
Primary
Label
Fill
Line
Background
Accent
Typography
Futura for Blackyak · 400display·영문 섹션 제목 (전용)
Montserrat · 300 / 400 / 500 / 600 / 700body·ui·link (라틴)
Noto Sans KR · 400 / 500 / 600 / 700한글 전담(95.9%) · 라틴 겸용
Apple SD Gothic Neo · 500한글 잔여 폴백 (OS 폰트, 3.4%)
Pretendard · 700한글 굵은 제목(추정)
Type Scalepx 기준은 layout
hero-display64px · 400 · null
Handgloves 123
section-en40px · 400 · 1
Handgloves 123
section-ko40px · 700 · null
다람쥐 헌 쳇바퀴
banner-en32px · 400 · 1.3
Handgloves 123
label-wide24px · 600 · 1
Handgloves 123
label-tight20px · 600 · 1
Handgloves 123
body16px · 600 · 1.25
Handgloves 123
link15px · 700 · 1
Handgloves 123
body-ko14px · 500 · 1.5
다람쥐 헌 쳇바퀴
footer-link13px · 400 · 1.92
Handgloves 123
국문 · Korean
| hangulFont | 한글 2,797글리프 중 Noto Sans KR 계열이 2,683(95.9%: Medium 1,893 · Regular 717 · Bold 49 · 이름 그대로 24) · Apple SD Gothic Neo 96(3.4%, macOS 시스템 폰트) · Pretendard 18(0.6%). 선언 1순위는 Montserrat(라틴 전용)이지만 스택 뒤의 한글 웹폰트가 대부분 제대로 잡힌다 — 한글 폴백이 빠진 스택은 weight 500 일부에만 남아 96글리프를 OS 폰트로 흘린다(그 부분만 Windows에서 맑은 고딕이 된다). Noto Sans KR·Pretendard 파일을 15개 self-host하는데 실사용은 Noto Sans KR 쪽으로 쏠려 있다 |
| hangulWeights | 500 → Noto Sans KR Medium 1,893 · Apple SD Gothic Neo 96 (한글의 71.1%가 이 한 단) · 400 → Noto Sans KR Regular 717 · 이름 그대로 16 (26.2%) · 700 → Noto Sans KR Bold 49 · Pretendard 18 · 600 → Noto Sans KR 8 |
| body | 14px/500 lh1.50 자간 −0.14px(−1.0%) Noto Sans KR (브랜드 라벨 '블랙야크'·'힐크릭'·'나우' CDP 샘플에서 Noto Sans KR Medium 렌더 확인). 같은 14px/500에 lh1.00 자간 −0.28px(−2.0%) 'Noto Sans CJK KR' 표기가 20건 더 있다 |
| sub | 18px/500 capitalize Noto Sans KR ×7 · 15px/400 lh2.27 'Noto Sans KR main' ×6 |
| label | 14px/700 Noto Sans KR Bold(로그인·장바구니, CDP 샘플 확인) · 13px/400 lh1.92 ×87(푸터, 라틴 스택) |
| mixing | 국문 라벨 옆에 영문·숫자가 붙으면 서체가 글자 단위로 갈린다 — CDP 샘플 '블랙야크 키즈' 14px/500에서 한글 6글자는 Noto Sans KR Medium이, 사이 공백 1글자는 Montserrat Medium이 그린다. 혼용 노드 157개는 한글만 담은 프로브로 157개 전부 재측정에 성공했고(mixedProbed 157/157), 그 라틴 글리프를 한글 집계에서 분리했다 — 한글 2,797 · 라틴 2,597은 혼용분까지 반영한 값이라 하한값이 아니다 |
| hangulHeadings | 있으나 작고 예외적이다. 국문 최대는 40px/700 섹션 제목 2건('고객님을 위한 추천 상품' y=2,453 · '지금 주목할 상품 추천' y=3,432)뿐이고, 64px 히어로와 40px 섹션 제목 7건은 전부 영문(Futura for Blackyak)이다. 국문은 히어로 부제·상품명·라벨 자리(18px 이하)로 내려간다 |
| verdict | 국문 히어로·대형 조판 레퍼런스로는 부적합하다 — 국문 천장이 40px/700 2건이고 큰 자리는 영문 브랜드 서체가 독점한다. 다만 폰트 스택 자체는 굴러간다: 한글의 95.9%를 Noto Sans KR이 그리고 OS 폴백은 3.4%(weight 500 단)에 그친다. 국문과 관련해 반면교사로 남는 것은 ① 같은 서체를 세 이름(오타 'MonSterrat-new' 포함)으로 부르는 선언 ② 크기마다 다른 자간(+7.5% ~ −7.1%)과 lh 1.00 남발 ③ Pretendard 파일 10개를 싣고 18글리프만 쓰는 낭비다. 유효하게 참고할 것은 영문 제목 + 사진 + 각진 카드로 만든 커머스 홈 골격이다 |
| rendered | Noto Sans KR Medium ×1893 · Noto Sans KR Regular ×717 · Apple SD Gothic Neo ×96 · Noto Sans KR Bold ×49 · Noto Sans KR ×24 · Pretendard ×18 |
영문 · Latin자사 라틴
| latinFont | Montserrat 1,374글리프(52.9%) · Noto Sans KR 665글리프(25.6%) · Futura for Blackyak 328글리프(12.6%) · Apple SD Gothic Neo 210글리프(8.1%) |
| latinWeights | 실측 페이스 SemiBold · Medium · Regular · Bold |
| share | 라틴 2,597글리프 / 한글 2,797글리프 — 지면의 48.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Montserrat를 쓰는 단: label-wide 24px/600 · label-tight 20px/600 · body 16px/600 · link 15px/700 · footer-link 13px/400 |
| mixing | 국영문 혼용 노드 157개(전체 495개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Futura for Blackyak 자사 라틴(12.6% · 최상단 디스플레이 독점) · Montserrat 영문 전용(52.9% · 선언됨) |
| verdict | 영문 전용 서체가 있다 — Futura for Blackyak 라틴 12.6% / 한글 0.0% · 최상단 디스플레이 독점 · Montserrat 라틴 52.9% / 한글 0.0%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 64px) |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR · Apple SD Gothic Neo · Pretendard |
| rendered | Noto Sans KR ×636 · Montserrat SemiBold ×580 · Montserrat Medium ×436 · Montserrat ×358 · Futura for Blackyak ×328 · Apple SD Gothic Neo ×210 · Noto Sans KR Medium ×14 · Montserrat Thin SemiBold ×13 · Noto Sans KR Regular ×9 · Noto Sans KR Bold ×6 · Arial ×4 · Pretendard ×3 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 16px | |
| Max width | 1380px | |
| Section gap | 0이 기본이다 — 14섹션의 padding이 대부분 0이고 섹션 y가 앞 섹션 끝에 붙는다. 예외는 두 곳의 160px 간격(y=6,757→6,917 | |
| Header | 미검출 — layout shell.header가 null이다. 상단 브랜드 전환 바가 0~60px을 차지하고(히어로 섹션 y=60에서 역산) 그 아래 GNB는 히어로 사진 위에 겹쳐 있어 추출기의 header 탐지(<header> 또는 fixed/sticky 상단 요소)에 걸리지 않았다px 미확인 | |
| Grid Hero | 1440×840 슬라이드 6장, 거터 0 — contentWidth 1,380을 넘어 풀블리드다 | |
| Grid Best | 주간 베스트 325×399 거터 27, 트랙 43장 (325×4 + 27×3 = 1,381 ≈ 1,380 → 한 화면 4장) | |
| Grid Trending | 464×594 3열 거터 23 (464×3 + 23×2 = 1,438 ≈ 1,440 풀블리드). OUR STORY도 같은 464 폭(464×384) | |
| Grid Recommend | 추천 상품 221×313 6열 거터 11 (221×6 + 11×5 = 1,381). 두 번째 추천 섹션은 같은 221 폭에 3장·거터 359로 성기게 벌어진다 | |
| Grid Magazine | 매거진 434×402 4열 거터 4 · 시즌 에센셜 324×324 2열 4장 거터 24 · 255×321 3열 6장 거터 16 · DISCOVER MORE 316×571 트랙 13장 거터 24 | |
| Card Padding | 카드 자체는 radius 0px · border 0 · shadow none · bg transparent (14섹션 전부) | |
| Button Padding | 0px — raw가 잡은 버튼 2개가 모두 팝업 레이어의 것이다('하루 동안 열지 않기' 흰 지면 + 1px 검정 상단선 / '닫기' 검정 지면, 둘 다 13px/400 r 0px) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| — | 2px | 1회 · div 1건 |
| — | 3px | 3회 · div·button |
| — | 4px 0px 0px 4px | 5회 · 한쪽만 둥근 입력·버튼 결합부 |
| — | 18px | 1회 · div 1건 |
| — | 22px | 1회 · div 1건 |
| pill | 32px | 6회 · li 6건 — 라운드 중 최다. 칩·태그 추정(미확인) |
| — | 40px | 1회 · div 1건 |
Guidelines
Do
- 폴드는 사진 한 장에 맡긴다 — 1440×840(폴드의 93%) 슬라이드에 영문 64px/400 한 줄, CTA 0개
- 섹션 제목은 영문 40px/400 브랜드 서체(Futura for Blackyak, 7건)로 통일하고 국문이 필요할 때만 같은 40px에서 굵기를 700으로 올린다(2건)
- 카드는 radius 0px · 보더 0 · 그림자 없음으로 두고(14섹션 전부) 사진 자체가 면이 되게 한다
- 사진 위 텍스트는 rgba(0,0,0,0.6) 단색 오버레이(13회)와 1px rgba(255,255,255,0.5) 테두리(7회)로만 처리한다
- 카드 트랙은 contentWidth 1,380에 맞춰 한 화면 4장으로 끊는다(325×4 + 거터 27×3 = 1,381)
- 전환은 0.3s에 cubic-bezier(0.215, 0.61, 0.355, 1)(easeOutCubic) 하나로 모은다 — 15건 중 11건이 이 커브다
- 여백 단위는 16px을 기준으로 잡는다(242회로 최다, 12·8·24px이 뒤를 잇는다)
Don't
- 한글 폴백이 빠진 스택을 남기지 않는다 — 폰트 파일을 23개 싣고도 한글 96글리프(3.4%, 전부 weight 500)가 macOS Apple SD Gothic Neo로 떨어져 그 단만 Mac/Windows에서 다르게 보인다
- 폰트 패밀리 이름을 오타로 선언하지 않는다 — 선언 목록에 'MonSterrat-new'가 들어 있다(Montserrat 오타 추정). 같은 서체를 Montserrat · Montserrat-new · MonSterrat-new 셋으로, Noto Sans KR을 NotoSansKR · 'Noto Sans KR main' · 'Noto Sans CJK KR' 셋으로 부른다
- 자간을 크기마다 즉흥으로 정하지 않는다 — 24px +7.5% · 20px −5.0% · 16px −6.3%/−2.0%/0 · 14px −7.1%/−2.0%/−1.0%가 한 페이지에 공존한다
- 행간 1.00을 기본값으로 깔지 않는다(36개 스타일 중 20건). 4.29 · 2.43 · 2.27 같은 이상치도 함께 남는다
- 15.99px 같은 비정수 크기를 남기지 않는다(500 웨이트 15건)
- #007AFF를 브랜드색으로 옮기지 않는다 — Swiper 화살표 기본 스타일이고 흰 지면 대비 4.02:1로 AA 미달이다
- 홈 한 장의 골격을 사이트 전체 IA로 일반화하지 않는다(표본 1페이지)
- 진입 팝업을 닫지 않은 채로 폴드를 평가하지 않는다 — 이번 캡처에서 팝업 300×420가량이 히어로 카피를 가렸다
