에스아이빌리지 (신세계V)

1440×750 사진 한 장 위에 100px/700 국문 두 줄 — 라운드도 그림자도 없이 사진 면적과 글자 크기로만 위계를 만든다.

에스아이빌리지는 신세계의 럭셔리 커머스로, 흰 지면에 사진을 꽉 채우고 그 위에 100px 굵은 국문 두 줄을 얹는 히어로가 인상을 만듭니다. 라이브러리에서 가장 큰 국문 디스플레이이고, 같은 100px 조판을 홈 안쪽 기획 섹션 세 곳에서 그대로 다시 씁니다. 카드도 버튼도 사실상 각지고 그림자가 없어, 위계는 사진 면적과 글자 크기로만 만들어집니다. 국문 대형 제목을 사진 위에 올리는 커머스 히어로를 설계할 때 참고하기 좋습니다. 다만 확보한 표본이 홈 한 페이지뿐이라 사이트 전체 규칙으로 읽으시면 안 됩니다.

https://www.sivillage.com

Color Palette

Primary

Label

Line

Background

Static

Typography

Pretendard · 400 / 700display·heading·body·ui·caption, 한글 100%

Arial · 400플러그인 잔재(미확인)

Type Scalepx 기준은 layout

display100px · 700 · 0.9

다람쥐 헌 쳇바퀴

promo-title48px · 700 · null

다람쥐 헌 쳇바퀴

section-title44px · 400 · 0.9

다람쥐 헌 쳇바퀴

card-title24px · 700 · 1

다람쥐 헌 쳇바퀴

sub20px · 400 · 1.3

다람쥐 헌 쳇바퀴

nav18px · 400 · 1.3

다람쥐 헌 쳇바퀴

body16px · 400 · 1.3

다람쥐 헌 쳇바퀴

body-sm14px · 400 · 1.3

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.3

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard — 한글 3,074글리프 100.0%(CDP, 1440, 혼용 노드 142개 전부 프로브 성공). 선언 1순위도 Pretendard이고 폴백(-apple-system·system-ui·Roboto·Helvetica Neue)이 한글을 그린 건 0글리프다. 웹폰트 맞고 OS 의존이 아니다. 다만 폰트 파일 URL은 dembrandt가 잡지 못했다(sources.urls 0)
hangulWeights	400 → Pretendard 2,782글리프(90.5%) · 700 → Pretendard 292글리프(9.5%). 실측 두 단뿐이고 300·500·600 한글은 0이다
body	16px/400 lh1.30 자간 −0.16px(−1.0%) — 단 이 자간이 걸린 16px 노드는 1,214건 중 118건이다. 나머지는 자간·행간 미지정
sub	28px/400(히어로 서브라인 '주얼리, 15% 페이백 + ~57% + ~20% 쿠폰' CDP 샘플) · 20px/400 lh1.30(퀵링크 라벨)
label	18px/400 lh1.30(헤더 nav) · 14px/400 lh1.30 자간 −0.28px(−2.0%) · 12px/400 lh1.30(캡션)
mixing	한 서체가 국영문을 다 그린다 — 국문 카피 옆에 영문 아이브로우('BALMUDA & more' 18px)와 숫자·기호(~69%, +10%)가 같은 Pretendard로 붙는다. CDP 혼용 노드 142개는 한글만 담은 프로브로 전부 재측정에 성공했고(mixedProbed 142/142), 그 안에서 한글을 그린 서체도 Pretendard 하나뿐이다 — 한글 3,074 · 라틴 3,019는 혼용분까지 반영한 값이라 하한값이 아니다. CDP 샘플 '매일 2번, 선착순 쇼핑 지원금 도전' 16px 노드(한글 13자 + 라틴·기호 7자)가 Pretendard 단일로 렌더된다
hangulHeadings	있다, 그것도 라이브러리 최대급이다. 100px/700이 히어로 슬라이드 카피(y=136, 1440×750 사진 위 2행)와 기획 섹션 3곳(y=3,646 · 4,818 · 6,873) 제목에 쓰이고, 96px/700이 타임세일 카운트다운 숫자다. 그 아래로 48px/700 프로모 제목 7건, 44px/400 섹션 제목 10건이 국문이다
verdict	국문 대형 디스플레이 레퍼런스로 유효하다 — 사진 위 100px/700 자간 −3.0% 행간 0.90 2행이라는 조합을 그대로 실측값으로 가져갈 수 있고, 44px/400(굵기를 낮춘 섹션 제목)과의 위계 대비까지 한 페이지 안에서 확인된다. 유의할 점 둘: ① 히어로는 8장짜리 배너 캐러셀이라 카피가 슬라이드마다 바뀐다 — 고정된 것은 '사진 1440×750 + 좌측 정렬 100px 2행'이라는 틀이지 문구가 아니다 ② 본문 조판은 자간·행간이 일관되게 걸려 있지 않아(16px 1,214건 중 118건만 자간 지정) 국문 본문 레퍼런스로는 약하다
rendered	Pretendard ×3074

영문 · Latin폴백

latinFont	Pretendard 2,719글리프(90.1%) · Arial 300글리프(9.9%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 3,019글리프 / 한글 3,074글리프 — 지면의 49.5%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display 100px/700 · promo-title 48px/700 · section-title 44px/400 · card-title 24px/700 · sub 20px/400 · nav 18px/400 · body 16px/400 · body-sm 14px/400 · caption 12px/400
mixing	국영문 혼용 노드 142개(전체 578개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Arial 폴백(9.9% · 선언됨)
verdict	영문 전용 서체 없음(폴백) — 라틴을 Arial 9.9%가 그리지만 전부 OS·브라우저 기본 페이스다. 서체를 고른 결과가 아니라 스택이 흘러간 결과이므로 디자인 결정으로 인용하지 말 것
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard ×2719 · Arial ×300

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	compact
Base unit	4px
Max width	1360px
Section gap	0 — 18섹션의 paddingTop/Bottom이 전부 0이고 섹션 y가 앞 섹션 끝에 붙는다(예: 1,008+226=1,234 = 다음 섹션 y). 예외는 히어로→퀵링크 40px, 타임세일→기획 29px, 쇼츠 제목 띠 padTop 40 뿐이다. 여백은 섹션 사이가 아니라 카드·컴포넌트 안쪽에 있다
Header	76px sticky
Grid Product	상품 5열 253px 거터 24 (253×5 + 24×4 = 1,361 ≈ contentWidth 1,360). 트랙에는 18장(인기 랭킹·나만을 위한 추천) · 8장(신규 입점) · 7장(타임세일)이 실린다
Grid Promo	기획 섹션 우측 상품 3열 200px 거터 24 (200×3 + 24×2 = 648), 섹션 높이 1,172
Grid Quicklink	퀵링크 6열 148×186 거터 24 (148×6 + 24×5 = 1,008)
Grid Shorts	쇼츠 세로 카드 383×644 거터 24, 트랙 10장
Card Padding	상품 카드 253×460(기본) · 253×479(타임세일) · 253×478(신규 입점) · 253×460(추천). 카드 radius 0px, 보더 0, 그림자 none
Button Padding	8px (히어로 아웃라인 CTA '자세히 보기', r 0px, 1px solid #fff, 16px/400)

Border Radius

Role	Value	Preview
button	9px	12회 · 일부 버튼. 히어로 CTA는 오히려 0px이다
—	15px	8회 · div 8건, 용도 미확인

Guidelines

국문 대형 제목은 100px/700에 자간 −3.0%(1920 96px 기준 −2.88px), 행간 0.90으로 두 줄까지 — 사진 위 좌측 정렬이 이 사이트의 히어로 공식이다
같은 디스플레이 단(100px/700)을 히어로에만 두지 말고 본문 기획 섹션(1,172px 높이) 3곳에서 반복해 리듬을 만든다
섹션 제목은 44px/400 자간 −1.32px(−3.0%)로 굵기를 낮춰 히어로와 위계를 가른다
카드·이미지 라운드는 0px으로 두고 그림자·그라디언트를 쓰지 않는다(홈 1페이지 외부 그림자 0 · 그라디언트 0)
콘텐츠 폭 1,360 중앙, 상품은 253×460 5열 거터 24(253×5+24×4=1,361)로 깔고 트랙에 18장까지 싣는다
채도는 #DA291C 한 색으로 제한하고 할인율·세일가에만 쓴다(팔레트 140회, 대비 4.87:1)
사진 위 버튼은 채우지 말고 1px 흰 아웃라인(radius 0, padding 8)으로 처리한다

Don't

#999999를 본문에 쓰지 않는다 — 흰 지면 대비 2.85:1로 AA 미달인데도 팔레트 452회·대비쌍 75건으로 가장 흔한 회색이다
자간을 본문에 일괄로 걸었다고 가정하지 않는다 — 16px 노드 1,214건 중 118건에만 −0.16px가 걸려 있다
여백을 섹션 사이에서 찾지 않는다. 18섹션의 padding이 전부 0이고 섹션 간격도 0이라, 이 골격을 그대로 옮기면 컴포넌트 안쪽 여백을 직접 설계해야 한다
8px 스케일이라고 단정하지 않는다 — 19px 426회 · 9px 120회 · 3px 120회가 4·8배수 밖에서 대량으로 나온다
Arial로 잡히는 30/18/10px 단 60건을 조판으로 옮기지 않는다(플러그인 기본값 추정, 미확인)
라운드를 넣지 않는다 — 사이트 전체에서 9px 12회·15px 8회뿐이고 카드는 전부 0px이다
홈 한 장의 골격을 사이트 전체 IA로 일반화하지 않는다(표본 1페이지)