삼성SDI
사진 히어로 900px 뒤에 검정에서 파랑으로 3,674px을 내려가는 그라디언트 한 장을 깔고, 그 위에 흰 카드만 얹는다.
삼성SDI 홈은 900px짜리 사옥 사진으로 열고, 그 아래 본문 전체를 검정(#0B0909)에서 파랑(#4159DF)으로 넘어가는 그라디언트 한 장으로 덮습니다. 섹션마다 배경을 바꾸는 대신 3,674px짜리 그라디언트 위에 흰 카드(radius 20px)만 올리는 방식이라, 스크롤할수록 지면 색이 저절로 밝아지는 인상을 줍니다. 다만 대형 제목은 BUSINESS·IR·CAREER·ESG·PR Center 다섯 개가 전부 영문 60px이고 국문은 히어로 부제 30px이 최대라, 국문 히어로 조판 레퍼런스로는 쓸 수 없습니다. 긴 그라디언트 지면 위에 카드 섹션을 쌓는 코퍼레이트 홈을 설계할 때 참고하기 좋습니다.
https://www.samsungsdi.co.krColor Palette
Primary
Label
Line
Surface
Background
Typography
Montserrat · 300 / 400 / 500 / 600 / 700display·nav·body (라틴 전담)
NotoKR-Regular / NotoKR-Bold / NotoKR-Medium · 400 / 500 / 700한글 전담 (본문·부제·푸터)
League Spartan SemiBold · 600히어로 제목 (영문 전용)
Pretendard SemiBold · 600히어로 국문 부제
Type Scale1440 기준
section-title60px · 700 · 1
다람쥐 헌 쳇바퀴
hero-title45px · 600 · 1.3
Handgloves 123
hero-sub-ko30px · 600 · 1.3
다람쥐 헌 쳇바퀴
megamenu-heading26px · 700 · 1
다람쥐 헌 쳇바퀴
section-sub-ko20px · 400 · 1.4
다람쥐 헌 쳇바퀴
nav18px · 500 · 1
Handgloves 123
body16px · 400 · 1.4
Handgloves 123
footer-link14px · 400 · 2.4
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | NotoKR-Regular 1,032글리프(77.8%) · NotoKR-Bold 200(15.1%) · NotoKR-Medium 54(4.1%) · Pretendard SemiBold 37(2.8%). 전부 웹폰트(CDP isCustomFont, 선언 9페이스 중 8개 로드) |
| hangulWeights | 400 NotoKR-Regular 1,032 · 700 NotoKR-Bold 200 · 500 NotoKR-Medium 54 · 600 Pretendard SemiBold 37 |
| body | 20px/400 lh28px(1.40) ls−0.25px(−1.25%) NotoKR-Regular — 섹션 부제 5줄. 카드 안 본문은 16px/400 lh1.40 |
| sub | 히어로 부제 30px/600 lh39px(1.30) ls−0.25px(−0.83%) Pretendard SemiBold, 흰색 중앙 2행 — 이 사이트 국문 최대 |
| label | 푸터 링크 14px/400 lh33.6px(2.40) #888888 · 메가메뉴 18px/500 NotoKR-Medium |
| mixing | CSS는 'Montserrat, NotoKr, sans-serif' 한 스택만 선언하고 브라우저가 글자별로 갈라 그린다 — 라틴은 Montserrat, 한글은 2순위 NotoKr. 즉 국문 서체를 고른 게 아니라 폴백시킨 구조다. 예외는 히어로 두 줄로, 영문 제목에 League Spartan SemiBold, 국문 부제에 Pretendard SemiBold를 각각 따로 지정했다. 혼용 노드 32개를 전부 한글 전용 프로브로 재측정했다(mixedProbed 32/32) |
| hangulHeadings | 없음. 40px 이상 국문 제목이 0개다 — 60px/700 섹션 제목 5개(BUSINESS·IR·CAREER·ESG·PR Center)와 45px/600 히어로 제목이 전부 영문이고, 국문이 맡는 가장 큰 자리는 히어로 부제 30px/600이다. layout.json 0번 섹션의 '70px/700 삼성SDI'는 로고 앵커의 text-indent −9999px 대체 텍스트라 화면에 보이지 않는다(1440 라이브 확인) |
| verdict | 국문 히어로·대형 제목 레퍼런스로는 부적합하다. 국문이 30px을 넘지 않고 조판 규칙도 −0.25px 고정 자간 하나뿐이다. 대신 어두운 그라디언트 지면 위에서 흰 국문 본문(20/400/1.40)을 읽히게 하는 명도 대비와, 영문 디스플레이 + 국문 부제로 히어로를 나누는 구성은 코퍼레이트 홈 레퍼런스로 쓸 만하다 |
| rendered | NotoKR-Regular ×1032 · NotoKR-Bold ×200 · NotoKR-Medium ×54 · Pretendard SemiBold ×37 · Montserrat Medium ×3 · Montserrat ×1 |
영문 · Latin영문 전용
| latinFont | Montserrat 644글리프(86.0%) · League Spartan 74글리프(9.9%) · Pretendard 27글리프(3.6%) · NotoKR-Regular 4글리프(0.5%) |
| latinWeights | 실측 페이스 SemiBold · Medium · Regular |
| share | 라틴 749글리프 / 한글 1,327글리프 — 지면의 36.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Montserrat를 쓰는 단: section-title 60px/700 · megamenu-heading 26px/700 · nav 18px/500 · body 16px/400 |
| mixing | 국영문 혼용 노드 32개(전체 103개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Montserrat 영문 전용(86.0% · 선언됨 · 최상단 디스플레이 독점) · League Spartan 영문 전용(9.9% · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Montserrat 라틴 86.0% / 한글 0.3% · 최상단 디스플레이 독점 · League Spartan 라틴 9.9% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 60px) |
| sharedWithKorean | 국문과 같은 서체: Montserrat · Pretendard · NotoKR-Regular |
| rendered | Montserrat ×638 · League Spartan SemiBold ×74 · Pretendard SemiBold ×27 · Montserrat Medium ×6 · NotoKR-Regular ×4 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 5px | |
| Max width | 1200px | |
| Section gap | 180px ×4 (BUSINESS→IR→CAREER→ESG→PR Center) | |
| Header | 80px fixed | |
| Grid I R | 4열 — 585 + 175×3, 거터 30 (585+525+90=1200) | |
| Grid Career | 3열 — 585(인재상 패널) + 270×2, 거터 38 (585+540+76=1201) | |
| Grid Esg | 4열 270×390, 거터 40 (270×4+40×3=1200) | |
| Grid News | 3열 370×542, 거터 30 (Swiper 트랙이라 4번째 슬라이드가 잘려 보인다) | |
| Card Padding | 뉴스 카드 370×542 = 이미지 370×252 + 본문 370×290. 뉴스 제목 우측 45px 여백 | |
| Button Padding | 알약 버튼은 .btn.round30 radius 30px ×10 — 접힌 레이어라 치수 미확인 | |
| Side Margin | 120px (1440에서 콘텐츠 1200 중앙) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 4px | 1회 · 버튼 1개 — 관측만 |
| — | 7px | 1회 · 버튼 1개 — 관측만 |
| — | 10px | 2회 · ul·모달 |
| standard | 20px | 38회 · 모든 카드·패널의 표준값 — IR 585×175·175×175, CAREER 270×277, ESG 270×390, Key Info 타일 130×130, 주가 패널 350×140 |
| card-top | 20px 20px 0px 0px | 6회 · 뉴스 카드 이미지 370×252 (위만 둥글게) |
| card-bottom | 0px 0px 20px 20px | 6회 · 뉴스 카드 본문 370×290 (아래만 둥글게) |
| pill | 30px | 10회 · .btn.round30 알약 버튼·ul |
| circle | 50% | 2회 · 아이콘 버튼 |
| circle | 100% | 1회 · 아이콘 버튼 |
Guidelines
Do
- 지면 색을 섹션이 아니라 문서 한 요소가 소유하게 한다 — 3,674px 한 장의 linear-gradient(#0B0909 → #4159DF) 위에 섹션 5개를 transparent로 얹는다
- 그라디언트 위 카드는 흰색 + radius 20px으로 통일한다(38회). 이미지와 본문이 갈리는 카드만 20 20 0 0 / 0 0 20 20으로 쪼갠다
- 섹션 헤더는 영문 60px/700 lh1.00 + 국문 20px/400 lh1.40 두 줄 규격을 다섯 번 반복한다
- 콘텐츠 폭 1200 중앙(좌우 120), 섹션 간격 180px, 히어로 뒤만 120px
- 그리드는 합이 정확히 1200이 되게 짠다 — IR 585+175×3 거터 30, ESG 270×4 거터 40, CAREER 585+270×2 거터 38
- 푸터 링크 회색은 #888888을 쓰되 #121212 지면 위에서만 쓴다(5.28:1 통과)
- 스크롤 리빌은 섹션 상단 −720px(뷰포트 900의 80%)에서 한 번만 토글한다 — ScrollTrigger 6개 전부 scrub:false·pin:false
Don't
- 국문 대형 제목을 이 사이트에서 가져가지 않는다 — 60px 제목 다섯 개가 전부 영문이고 국문 최대는 히어로 부제 30px/600이다
- 자간을 −0.25px 절대값 하나로 전 단에 고정하는 방식은 베끼지 않는다 — 14px에서 −1.79%가 되어 작은 국문이 과하게 붙는다(작은 글자에 양수를 주는 관행의 반대)
- #888888을 흰 카드 위 텍스트로 쓰지 않는다(3.54:1, AA 미달 ×7). #DDDDDD 구분선도 흰 지면에서 1.36:1이라 경계로 거의 안 읽힌다
- 18px 한 크기에 weight를 300·400·500·700 네 단으로 쪼개지 않는다(각 25·44·64·44회) — 위계가 크기 대신 굵기로만 갈려 스캔이 어렵다
- 그림자를 카드 위계 신호로 쓰지 않는다 — 페이지에서 가시 그림자는 뉴스 카드 5개(8px 3px 15px −4px)뿐이고 나머지 카드는 전부 shadow:none이다
- 링크 색 전환에 cubic-bezier(0.68,-0.55,0.27,1.55) 오버슈트를 걸지 않는다(6회) — 색상에 반동 커브를 주면 깜빡임으로 읽힌다
- 로고 자리에 font-size 70px 텍스트를 두고 text-indent −9999px으로 감추지 않는다 — 실측 도구가 이 사이트의 최대 제목을 70px로 잘못 읽었다
