GS리테일
흰 지면·한 서체·200px 여백. 유채색은 파랑 한 점, 깊이는 1px 선 하나.
GS리테일 사이트는 흰 지면 위에 Pretendard 한 서체만 쓰는 대기업 코퍼레이트 웹사이트입니다. 국문 72px 볼드 제목이 홈 섹션과 하위 페이지 타이틀을 모두 맡고 있어, 국문 대형 조판을 실물로 볼 수 있는 레퍼런스입니다. 그림자를 한 번도 쓰지 않고 1px 회색 선과 200px 섹션 여백만으로 지면을 나누며, 유채색은 링크와 활성 표시에 쓰는 파랑 한 색뿐입니다. 국문 제목이 큰 기업 소개 사이트나, 연혁·보도자료·약관처럼 정보 페이지가 많은 코퍼레이트 사이트를 설계할 때 참고하기 좋습니다.
https://www.gsretail.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 400 / 500 / 600 / 700display·heading·body·ui·caption — 국문·라틴 전부
Type Scalepx 기준은 layout
display72px · 700 · 1.24
다람쥐 헌 쳇바퀴
hero-statement60px · 700 · 1.4
다람쥐 헌 쳇바퀴
h248px · 700 · 1.3
다람쥐 헌 쳇바퀴
h340px · 700 · 1.3
다람쥐 헌 쳇바퀴
h432px · 700 · 1.3
다람쥐 헌 쳇바퀴
lead24px · 400 · 1.5
다람쥐 헌 쳇바퀴
label20px · 700 · 1.4
다람쥐 헌 쳇바퀴
body18px · 400 · 1.4
다람쥐 헌 쳇바퀴
ui16px · 400 · 1.4
다람쥐 헌 쳇바퀴
caption14px · 400 · 1.4
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard — 한글 20,272글리프 중 97.9%(19,845). 나머지는 같은 서체의 로컬 정적 페이스 Pretendard Medium 1.2%(252) · Pretendard SemiBold 0.9%(175) |
| hangulWeights | 400 14,810글리프(주력) · 700 4,999 · 500 252 · 600 211(SemiBold 175 + 36). 100~900 9단을 선언하지만 실제로 그려지는 건 네 단뿐이다 |
| body | 16px/400 lh1.40 자간 −0.32px(−2.0%) — 최다 스타일 31회. 긴 본문은 18px/400 lh1.40(8회) |
| sub | 24px/400 lh1.50 자간 −0.24px(−1.0%) — 섹션 리드 문장 |
| label | 14px/700 ×30 · 14px/400 ×27 · 13.3333px/400 ×9 (푸터·메타·건너뛰기 링크) |
| mixing | 한 서체가 국영문을 다 그려 층 분리가 없다. 국문 제목 안에 'GS리테일'·'GS25'·'ESG'·'BNBP'·'18,600+' 같은 라틴·숫자 토큰이 그대로 섞이고, 같은 Pretendard로 렌더된다. 홈 132개 노드 중 40개가 국영문 혼용이었고 40개 전부 한글 전용 프로브에 성공했다 |
| hangulHeadings | 있다 — 72px/700 lh1.24 자간 −2.0%가 국문 제목을 맡는다. 홈 '일상에 가치를 더하는, GS리테일의 사업'·'더 나은 일상을 만드는, GS리테일의 소식'(y1873·y2779), 타이틀 밴드 '경영이념 및 가치체계'·'기업 연혁'·'고객센터'·'뉴스룸'·'보도자료'·'지속가능경영'·'개인정보처리방침'. 그 아래로 CEO 인사말 히어로 60px/700 국문 2행, 48px/700 '우리의 비전'·'우리의 일하는 방식', 40px/700 'ESG 거버넌스'. 라틴이 대형을 맡는 곳은 40px/700 Fair·Friendly·Fresh·Fun 4개뿐이다 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 유효하다. 72px/700 Pretendard, 행간 1.24, 자간 −2.0%가 국문 대형 조판의 실제 값이고, 아래로 48/40/32px −1.0% · 24/18/16px −1~−2%까지 한 서체로 이어진다. 다만 히어로 자체는 이미지가 카피를 품는 방식(홈 폴드 텍스트 0자)이라, 대형 국문 카피를 화면에 얹는 히어로 조판 사례로는 CEO 인사말 60px 페이지를 봐야 한다. |
| rendered | Pretendard ×19845 · Pretendard Medium ×252 · Pretendard SemiBold ×175 |
영문 · Latin국문과 동일
| latinFont | Pretendard 10,721글리프(99.8%) · Apple SD Gothic Neo 10글리프(0.1%) · PingFang SC 8글리프(0.1%) · Menlo 2글리프(0.0%) |
| latinWeights | 실측 페이스 SemiBold · Medium |
| share | 라틴 10,742글리프 / 한글 20,272글리프 — 지면의 34.6%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: display 72px/700 · hero-statement 60px/700 · h2 48px/700 · h3 40px/700 · h4 32px/700 · lead 24px/400 · label 20px/700 · body 18px/400 · ui 16px/400 · caption 14px/400 |
| mixing | 국영문 혼용 노드 712개(전체 1,928개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 34.6%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.8%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard ×10516 · Pretendard SemiBold ×169 · Pretendard Medium ×36 · Apple SD Gothic Neo ×10 · PingFang SC ×8 · Menlo ×2 · Lucida Grande ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | dembrandt | |
| Max width | 1400px | |
| Section gap | 섹션 상하 200px (홈 sec03·sec04 paddingTop 200 | |
| Header | 100px fixed | |
| Grid Values | 690×400 2열 · gapX 20 · radius 12 (about/company '우리의 일하는 방식' 카드 8장 — 690×2+20 = 1,400으로 콘텐츠 폭과 정확히 일치) | |
| Grid News | 440×334 6장 · gapX 12 · radius 0 (홈 뉴스 — 440×6+12×5 = 2,700px으로 콘텐츠 1,400px을 넘는 Swiper 가로 캐러셀) | |
| Grid Support | 296×500 3열 · gapX 30 · radius 12 · bg #fff · 카드마다 CTA (고객센터) | |
| Grid Rows | 760×99 10행 (연혁 타임라인) · 1400×224 5행 (ESG 거버넌스) · 1045×131 3행 (홈 통계) · 1399×53 23행 (개인정보처리방침 표) | |
| Grid Chips | 43×28 7개 · gapX 38 (뉴스룸·보도자료 필터 칩) · 233×82 5개 (연혁 연도 탭) | |
| Button Padding | 0×32 ('기타 문의하기' 18/700 r10) · 0×16 ('개인정보 처리방침' 16/400 r10) · 6×11 ('채용문의' 16/600 r4) · 15×28 ('숏폼' 20/700 r99) · 14×16 (셀렉트 r12) · 0×12 ('1:1 상담' 16/400 r4) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| — | 2px | 6회 · span 관측만 |
| small | 4px | 18회 · 소형 아웃라인 버튼('채용문의' 6×11, '1:1 상담' 0×12) |
| button | 10px | 38회 · 표준 버튼('기타 문의하기' 0×32, '개인정보 처리방침' 0×16) |
| standard | 12px | 109회 · 폼 인풋·셀렉트, 카드 그리드(밸류 690×400 · 고객센터 296×500) |
| — | 16px | 1회 · img 관측만 |
| circle | 50% | 22회 · 원형 아이콘 버튼 |
| pill | 99px | 39회 · 알약 칩·링크('숏폼' 15×28) |
Guidelines
Do
- 국문 대형 제목은 Pretendard 72px/700 lh1.24 자간 −1.44px(−2.0%)로 잡는다 — 이 사이트에서 10회 반복되는 유일한 디스플레이 단이다
- 본문·UI 기본은 16px/400 lh1.40 자간 −0.32px(−2.0%). raw 25종 중 31회로 최다 스타일이다
- 자간을 px가 아니라 비율로 관리한다 — 72·18·16px −2.0%, 48·40·32·24px −1.0%. 값은 세 단이면 충분하다
- 깊이는 1px solid #E5E5E9(949회) 헤어라인으로만 만든다. 그림자는 0회다
- 유채색은 #107AF2 하나로 묶고 활성 탭 밑줄(2px solid ×27)·링크에만 쓴다
- 섹션 상하 여백 200px, 하위 페이지 타이틀 밴드 157/162px, 콘텐츠 폭 1400px 중앙으로 페이지 리듬을 고정한다
- 폼 요소는 테두리 없이 #F8F8F8 채움 + radius 12px + 패딩 14×16으로 통일한다
- 풀블리드 히어로가 있는 페이지는 헤더 bg를 transparent로 두고(8/10), 이미지가 없는 정보 페이지에서만 흰 바탕으로 바꾼다
Don't
- 근검정을 두 값으로 쓰지 않는다 — 이 사이트는 #161616(2,591회)과 #222222(대비쌍 534)를 위계 없이 섞는다. 하나로 잠글 것
- #999999를 본문에 쓰지 않는다 (흰 바탕 2.85:1, AA 미달 36쌍)
- #107AF2를 흰 바탕 위 본문 텍스트색으로 쓰지 않는다 (4.13:1, AA 미달 11쌍). 배경·테두리·대형 굵은 글자로만
- 반복 카드의 총 폭이 콘텐츠 폭을 넘게 두지 않는다 — 홈 뉴스는 440×6+12×5 = 2,700px으로 1,400px을 넘어 6장 중 3장만 보인다
- 라운드를 5종(2·4·10·12·16·50%·99px)으로 흩지 않는다 — 버튼 한 역할에만 10·4·99px 세 값이 붙어 있다
- 여백을 3·9·19·27px 같은 값으로 쌓지 않는다 — 상위 16개 간격값 중 절반이 4·8 배수 밖이다
- 그림자로 카드를 띄우지 않는다 (9경로 병합 그림자 0회, 그라디언트도 이미지 딤 rgba(0,0,0,.3) 1회뿐)
- 아웃라인 버튼을 규격 3종으로 늘리지 않는다 — r10 0×32 18/700 · r4 6×11 16/600 · r4 0×12 16/400이 한 사이트에 공존한다
