LG에너지솔루션

흰 지면에 Pretendard 한 서체, 큰 글자만 자간 −0.5px로 조인다.

LG에너지솔루션은 흰 지면과 Pretendard 한 서체로만 끌고 가는 코퍼레이트 사이트입니다. 폴드를 여는 72px 대문자는 영문이고 국문이 맡는 가장 큰 글자는 56px이라, 국문 히어로 레퍼런스라기보다 영문 표제 + 국문 본문으로 층을 나누는 방식의 레퍼런스입니다. 색은 거의 흑백인데 CSS 변수에 시맨틱 컬러 토큰 102개가 실려 나오는 점이 특이해서, 코퍼레이트 사이트에 디자인 시스템을 얹는 사례로 볼 만합니다. 히어로 영상과 Lenis 관성 스크롤을 쓰지만 스크롤에 잠긴 모션은 하나도 없어, 조용한 대기업 사이트의 골격을 참고할 때 적합합니다.

https://www.lgensol.com/kr/index

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard · 400 / 500 / 600 / 700 / 800display·heading·body·ui 전 구간, 한글 100%

Roboto · 400라틴 폴백

Apple SD Gothic Neo · 400OS 폴백

Type Scaleraw 1920 스타일 30종 중 자간이 지정된 것은 72px/700 −0

display72px · 700 · 1.4

다람쥐 헌 쳇바퀴

hero-ko56px · 700 · 1.4

다람쥐 헌 쳇바퀴

h244px · 700 · 1.4

다람쥐 헌 쳇바퀴

h332px · 700 · 1.5

다람쥐 헌 쳇바퀴

page-title32px · 400 · 1.4

다람쥐 헌 쳇바퀴

lead24px · 600 · 1.5

다람쥐 헌 쳇바퀴

ui-lg22px · 600 · 1.45

다람쥐 헌 쳇바퀴

body20px · 400 · 1.6

다람쥐 헌 쳇바퀴

ui18px · 500 · 1.6

다람쥐 헌 쳇바퀴

base16px · 400 · 1.6

다람쥐 헌 쳇바퀴

caption14px · 500 · 1.4

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard 계열 100% (11,302글리프 — Pretendard 7,317 · Pretendard SemiBold 2,344 · Pretendard Medium 1,613 · Apple SD Gothic Neo 28)
hangulWeights	400 Pretendard 6,346 · 500 Pretendard Medium 1,597 · 600 SemiBold 2,263 · 700 Pretendard 860. 선언 1순위가 Pretendard이고 실제 렌더도 Pretendard라 선언과 결과가 일치한다
body	20px/400 lh1.60 자간 0 (강조 단락은 20px/500, 16px/400 lh1.60도 20회)
sub	히어로 리드 24px/700 또는 24px/500 lh1.50 — 서브 페이지 9장이 같은 자리에 같은 크기로 쓴다
label	18px/500 lh1.60 GNB 12항목 · 20px/600 lh1.00 탭 라벨 · 14px/500 lh1.40 주석
mixing	국영문을 한 서체(Pretendard)가 그린다. 층으로는 나뉘어 있다 — 72px 대문자 영문이 표제, 그 아래 56px·44px 국문이 실제 메시지를 맡는다. 한 줄 안 혼용은 'LG에너지솔루션은 어디에나 있습니다'처럼 브랜드명만 라틴이 섞이는 형태다
hangulHeadings	있다. 최대 56px/700 lh1.40 자간 −0.5px 'LG에너지솔루션은 어디에나 있습니다'(홈 y1377, 1440 CDP 실측 Pretendard×18). 그다음이 44px/700 10회(섹션 제목), 32px/700 6회. 폴드(y<900) 안 국문 최대는 20px/400 리드 문장이다
verdict	국문 대형 조판 레퍼런스로는 중간이다 — 56px 국문 제목이 있지만 폴드는 영문 72px이 맡고, 국문은 두 번째 화면부터 나온다. 자간 규칙이 −0.5px 하나뿐이라 국문 자간 레퍼런스로는 얇다. 반면 '영문 표제 + 국문 본문' 층 분리와 Pretendard 단일 서체 운용의 예시로는 명확하다
rendered	Pretendard ×7317 · Pretendard SemiBold ×2344 · Pretendard Medium ×1613 · Apple SD Gothic Neo ×28

영문 · Latin국문과 동일

latinFont	Pretendard 7,420글리프(99.5%) · Roboto 30글리프(0.4%) · Apple SD Gothic Neo 7글리프(0.1%)
latinWeights	실측 페이스 SemiBold · Medium · ExtraBold
share	라틴 7,457글리프 / 한글 11,302글리프 — 지면의 39.8%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display 72px/700 · hero-ko 56px/700 · h2 44px/700 · h3 32px/700 · page-title 32px/400 · lead 24px/600 · ui-lg 22px/600 · body 20px/400 · ui 18px/500 · base 16px/400 · caption 14px/500
mixing	국영문 혼용 노드 283개(전체 982개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 39.8%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.5%를 그리는 Pretendard가 한글도 99.8% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard · Apple SD Gothic Neo
rendered	Pretendard ×4802 · Pretendard SemiBold ×1621 · Pretendard Medium ×985 · Roboto ×30 · Pretendard ExtraBold ×12 · Apple SD Gothic Neo ×7

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1208px
Section gap	섹션 패딩 120/120이 기본, 페이지 마지막 섹션만 120/240. 홈은 패딩 0으로 붙이고 섹션 높이(800·900·1350·896)로 리듬을 만든다
Header	100px absolute
Grid	고정 콘텐츠 폭이 없다 — 페이지별 텍스트 블록 폭이 776(홈)·872·816·612·600·1208로 갈린다. 섹션은 전부 1440 풀블리드이고 안쪽 블록만 다르게 잡는다
Grid Cards	뉴스 4열 345×420 거터 20(홈) · 산업별 솔루션 2열 528×305 거터 20 r16 · 기술 카드 4열 254×229 거터 20 r16 · 인재상 2열 704×248 거터 32 r16
Card Padding	폼팩터 원형 카드 320×320 r999px 거터 58 · 문의 카테고리 칩 300×72 r8 거터 10
Button Padding	큰 버튼 20×40 r8 · 알약 6×24 r100px · PDF 10×20 r8 · 배터리 선택 20 r8

Border Radius

Role	Value	Preview
hairline	2px	45회 · 인라인 태그(span)
xs	3px	10회 · 검색 인풋
small	4px	42회 · 작은 배지
standard	8px	239회 · 표준 — 버튼·리스트박스·PDF 칩
card	16px	107회 · 카드·인풋. 드롭다운은 16px 16px 0 0 9회
media	24px	3회 · 이미지·영상 프레임
pill-96	61px	9회 · 관측만
pill	100px	96회 · 알약 버튼·태그(999px 33회 포함)
circle	50%	20회 · 검색어 초기화·원형 아이콘(100% 145회 포함)

Guidelines

지면을 흰색 하나로 두고 강조가 필요한 구간만 통째로 어둡게 바꾼다 — 홈 NCM 1440×900은 #000000, 폼팩터 산업 솔루션 1440×1422는 #242D36이다.
자간은 56px 이상 두 단에만 −0.5px을 주고 44px 이하 28단은 normal로 둔다. 규칙이 하나뿐이라 구현이 흔들리지 않는다.
행간을 크기에 반비례로 넓힌다 — 72·56·44px은 1.40, 32·24px은 1.50, 20·18·16px은 1.60이다.
버튼 모양을 두 종류로만 쓴다: 큰 액션은 radius 8px(239회) 패딩 20×40, 보조는 알약 100px 패딩 6×24.
서브 페이지 9장이 높이 580px 히어로 + 83px 탭 바라는 같은 머리를 쓴다 — 페이지가 늘어도 상단이 흔들리지 않는다.
그림자를 두 값으로 묶는다(rgba(16,16,16,.1) 10 20 40 ×9 · rgba(0,0,0,.12) 0 20 20 ×9). 나머지 깊이는 배경색 전환으로 만든다.

Don't

#33B0C6을 흰 지면 위 텍스트색으로 쓰지 않는다 — 2.57:1로 AA 미달이고 실제 wcag 미달 쌍 32개가 전부 이 조합이다.
#B4B8B9(2:1 ×15)·#858889(#f3f5f7 위 3.27:1 ×9)를 본문에 쓰지 않는다. 비활성 표시 전용이다.
72px 대문자를 국문 히어로 근거로 인용하지 않는다 — 'EMPOWER EVERY POSSIBILITY'는 영문이고 국문 최대는 56px이다.
헤더가 absolute라 스크롤 중 사라진다. 고정 헤더를 전제로 한 섹션 상단 여백(padding-top 100)을 그대로 옮기면 안 된다.
Swiper 화살표에 남은 #007AFF(2회)를 브랜드 색으로 옮기지 않는다 — 기본 스타일 잔재다.
고정 콘텐츠 폭을 가정하지 않는다. 텍스트 블록 폭이 페이지마다 600·612·776·816·872·1208로 갈린다.
Lenis가 걸려 있다고 스크롤 스크럽 연출을 전제하지 않는다 — ScrollTrigger 0개, 스크럽 전환 0건이다.