쌍용건설
건축 사진을 전면에 깔고, 영문 디스플레이는 고전 세리프(Gilda Display) 한 줄로 얹는다.
쌍용건설은 풀블리드 건축 영상과 사진 위에 얇은 세리프 영문 제목을 얹어 단정하고 고급스러운 인상을 만드는 건설사 사이트입니다. 지면은 흰색이지만 홈의 히어로 영상과 남색 섹션 두 개가 큰 비중을 차지해, 밝은 지면과 어두운 사진 면이 번갈아 나옵니다. 국문은 SUIT 고딕이 전부 맡고 큰 제목은 영문 세리프가 담당하는 이원 구조라, 영문 디스플레이 레퍼런스로 참고하기 좋습니다. 국문 대형 제목은 서브페이지 타이틀 54px 정도가 최대입니다.
https://www.ssyenc.com/kr/indexColor Palette
Primary
Label
Fill
Line
Background
Accent
Typography
Gilda Display · 400display (영문 세리프 전용)
SUIT · 400 / 500 / 600 / 700heading·body·ui 한글 전부
Apple SD Gothic Neo · 400폴백 (한글 16글리프)
Type Scale국문 SUIT는 전 단계 자간 −2%(−0
display-xl120px · 400 · 1
Handgloves 123
display75px · 400 · 1.1
Handgloves 123
page-title-ko54px · 400 · 1.3
다람쥐 헌 쳇바퀴
h236px · 700 · 1.4
다람쥐 헌 쳇바퀴
h330px · 600 · 1.4
다람쥐 헌 쳇바퀴
h424px · 700 · 1.38
다람쥐 헌 쳇바퀴
body20px · 400 · 1.5
다람쥐 헌 쳇바퀴
link18px · 500 · 1.3
다람쥐 헌 쳇바퀴
ui16px · 400 · 1.3
다람쥐 헌 쳇바퀴
caption13px · 400 · 1.4
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | SUIT (웹폰트, 한글 21,359글리프 중 81.3%) + SUIT Medium 15.2% + SUIT SemiBold 3.5% |
| hangulWeights | 400 주력(15,454) · 500(3,187) · 600(742) · 700(1,867) |
| body | raw 1920 기준 20px/400 lh1.5 ls−0.4px (1440 환산 약 15px) |
| sub | 18px/500 lh1.3 ls−0.36px (링크·카드 라벨) |
| label | 16px/400 ls−0.32px · 13px/400 ls−0.26px |
| mixing | 영문 디스플레이 Gilda Display와 국문 SUIT를 층으로 분리. 한 줄 혼용은 SUIT 단일(예: 'e-Brochure' 30/700 SUIT) |
| hangulHeadings | 있음(서브페이지 한정): 54/400 SUIT 타이틀(해외사업·회사소개·복리후생), 36/700 '쌍용건설 소식'. 홈 히어로는 영문 Gilda |
| verdict | 국문 대형 제목은 서브페이지 타이틀 54px(1440)이 최대로 약하다. 국문 본문·UI는 SUIT −2% 자간이 일관돼 참고 가치가 있고, 히어로 타이포 레퍼런스는 영문 세리프 쪽이다 |
| rendered | SUIT ×17365 · SUIT Medium ×3236 · SUIT SemiBold ×742 · Apple SD Gothic Neo ×16 |
영문 · Latin영문 전용
| latinFont | SUIT 8,520글리프(83.9%) · Gilda Display 1,598글리프(15.7%) · Apple SD Gothic Neo 22글리프(0.2%) · AppleMyungjo 16글리프(0.2%) |
| latinWeights | 실측 페이스 Medium · SemiBold |
| share | 라틴 10,156글리프 / 한글 21,359글리프 — 지면의 32.2%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 SUIT를 쓰는 단: page-title-ko 54px/400 · h2 36px/700 · h3 30px/600 · h4 24px/700 · body 20px/400 · link 18px/500 · ui 16px/400 · caption 13px/400 |
| mixing | 국영문 혼용 노드 682개(전체 2,036개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Gilda Display 영문 전용(15.7% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Gilda Display 라틴 15.7% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 120px) |
| sharedWithKorean | 국문과 같은 서체: SUIT · Apple SD Gothic Neo |
| rendered | SUIT ×6777 · Gilda Display ×1598 · SUIT Medium ×1489 · SUIT SemiBold ×254 · Apple SD Gothic Neo ×22 · AppleMyungjo ×16 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 30px | |
| Max width | 1320px | |
| Section gap | 홈 섹션 높이 810px 반복(y900·1710·2520·3330), 섹션 위 패딩 120px 1곳·서브 90/135/150 혼재 | |
| Header | 81px fixed |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 2px | 1008회 · li 요소(목록 점·구분 막대) |
| small | 4px | 90회 · div 소형 상자 |
| — | 8px | 18회 · 관측만 |
| — | 20px | 5회 · 카드 |
| pill | 50px / 99px | 76회 · View More·호텔 칩·검색 인풋·'글로벌세아' 버튼 |
| circle | 50% | 709회 · 화살표 원형 버튼·인디케이터·아이콘 |
Guidelines
Do
- 영문 섹션 제목은 Gilda Display 400 한 가지만, 75px(1440)·자간 −2%로 쓴다
- 국문 전부는 SUIT, 전 단계 자간 −2%(16px 이하도 음수)
- 사진·영상 위 텍스트는 흰색, 밝은 면에선 #1c1c1c 제목 + #666 본문의 2단
- 콘텐츠 폭은 홈 1320 · 서브 1096으로 고정하고 홈 섹션은 810px 단위로 쌓는다
- 버튼은 알약 50px(View More) 하나로 통일하고 어두운 면에선 흰 α.15 채움 + α.4 보더
- 레드 #a8001a는 필터 칩 같은 극소 요소에만, 면적 확장 금지(22회)
- 카드 라운드는 0으로 두고 곡선은 버튼·원형 화살표에만 쓴다
Don't
- box-shadow를 쓰지 않는다 (shadows 0)
- Gilda Display에 한글을 시키지 않는다 (한글 6글리프뿐, 국문은 SUIT)
- #888888을 본문에 쓰지 않는다 (3.54:1, AA 미달)
- 레드를 CTA 채움 전반에 확장하지 않는다 (accent 22회, 호텔 칩 1곳)
- 300ms 초과의 느린 전환을 UI 요소에 걸지 않는다 (0.3s가 1,407회, 최대 1.3s는 6회)
- 서브페이지에 국문 대형 디스플레이(54px 초과)를 기대하지 않는다 — 국문 최대는 54/400
- SUIT SemiBold 600을 본문에 쓰지 않는다 (소제목·메뉴 한정, 742글리프)
