LG유플러스
한 도메인 안에 코퍼레이트·스토어·서브브랜드 네 벌의 시스템이 서로를 모른 채 살아 있다.
LG유플러스는 하나의 도메인이지만 실제로는 네 개의 다른 사이트가 붙어 있습니다. 기업정보·인재채용 쪽은 Pretendard Variable로 66px 국문 타이틀을 세우고 여백을 크게 쓰는 브랜드 지면이고, 스토어·요금제 쪽은 40px 제목에 카드가 촘촘한 커머스 지면이며, 너겟과 유독은 각각 폭 636px·다른 서체를 쓰는 별도 서브브랜드입니다. 자간 규칙까지 층마다 달라서 브랜드 층은 −0.64px, 스토어 층은 −0.32px을 크기와 무관하게 고정합니다. 큰 조직의 디자인 시스템이 실제로 어떻게 갈라지는지 보려면 좋은 사례이지만, 국문 조판을 한 벌로 인용하기에는 적합하지 않습니다.
https://www.lguplus.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard Variable · 400 / 500 / 600 / 700 / 800코퍼레이트 층 전용 (display·heading·body·ui)
Pretendard · 300 / 400 / 500 / 700스토어·너겟·고객지원 층 (heading·body·ui)
Geist · 800선언만 있고 렌더 0
nskr (Noto Sans KR) · 100 / 400 / 500 / 700 / 800선언·웹폰트 로드만 있고 렌더 0
이름 미보고 서체 (OTS derived font) · 100 / 300 / 700유독(pogg) 층 전체
Apple SD Gothic Neo · 800폴백
Type Scalepx은 1440 실측(66·52·48
corp-title66px · 800 · 1.1
다람쥐 헌 쳇바퀴
corp-statement52px · 600 · 1.25
다람쥐 헌 쳇바퀴
corp-lead48.92px · 700 · 1.3
다람쥐 헌 쳇바퀴
corp-h240px · 800 · 1.5
다람쥐 헌 쳇바퀴
store-h140px · 700 · 1.5
다람쥐 헌 쳇바퀴
store-h236px · 700 · 1.56
다람쥐 헌 쳇바퀴
price28px · 700 · 1
다람쥐 헌 쳇바퀴
store-h324px · 700 · 1
다람쥐 헌 쳇바퀴
body-strong18px · 500 · 1.2
다람쥐 헌 쳇바퀴
body16px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard Medium 28,026글리프(55.4%) · Pretendard 15,367(30.4%) · Pretendard Variable 3,581(7.1%) · 이름 미보고 서체(OTS derived font) 2,350(4.6%, 유독 전용) · Pretendard Light 1,090(2.2%) · Pretendard SemiBold 187 · Apple SD Gothic Neo 8 · Pretendard ExtraBold 2 — 합 50,611 |
| hangulWeights | 500 Pretendard Medium 25,954 / Pretendard Variable 2,046 · 400 Pretendard 11,159 / Medium 2,053 · 700 Pretendard 4,201 / 이름 미보고 983 · 300 Light 1,012 / 이름 미보고 892 · 600 Variable 368 / SemiBold 187 · 800 Variable 133 · 100 이름 미보고 137 · 350 Light 78 |
| body | 16px/400 lh1.50 ls −0.32px(−2.0%) Pretendard — raw 92개 스타일 중 최다(25회), 500 웨이트 변형이 22회로 거의 같다 |
| sub | 18px/500 lh1.20 ls −0.54px(−3.0%) Pretendard — 카드 제목·후기 제목·목록 링크(8회) |
| label | 14px/400 lh2.00 ls −0.32px(18회) · 14px/500 lh3.86(15회) — 링크 라벨. lh 3.86은 nav 항목의 행 높이가 글자 크기의 네 배 가까이 잡힌 것이다 |
| mixing | 국문과 라틴을 같은 서체가 그린다(Pretendard 계열). 층 구분은 서체가 아니라 자간·웨이트로 한다 — 코퍼레이트 Pretendard Variable −0.64px, 스토어 Pretendard −0.32px. 코퍼레이트 h1 '5G부터 AI까지, 더 나은 일상을 위한 혁신 LG U＋는…'처럼 한 줄 안 혼용도 Pretendard Variable 단일이 처리한다. 혼용 노드는 한글만 담은 프로브로 재측정했다(기업소개 55/55 · 인재채용 89/89 성공) |
| hangulHeadings | 있다. 국문 최대는 코퍼레이트 66px/800 '기업소개'·'인사제도'(lh1.10 ls −0.64px, 1440 y466)이고 그 아래 48.92px/700 국문 리드 h1, 52px/600 인재상 카피가 이어진다. 스토어 층 국문 최대는 40px/700 '폰 바꿀 계획 있으세요?'·'디즈니+ 플러스플랜130'이다. 66px·52px·48.92px 모두 한글이며 영문 40px 'Personal'·'Enterprise'는 그보다 작다 |
| verdict | 국문 대형 제목 레퍼런스로는 코퍼레이트 층만 유효하다 — 66px/800 국문 타이틀과 48.92px/700 리드가 실재한다. 다만 자간을 px 고정으로 박아 큰 글자일수록 비율이 얕아지는(66px −0.97% ↔ 16px −4.0%) 구조라, 국문 대형에서 자간을 조이는 통상 관행의 반례로 인용하는 편이 정확하다. 사이트 전체를 한 벌의 국문 조판 사례로 쓰기에는 층별 규칙이 너무 다르다 |
| rendered | Pretendard Medium ×28026 · Pretendard ×15367 · Pretendard Variable ×3581 · OTS derived font ×2350 · Pretendard Light ×1090 · Pretendard SemiBold ×187 · Apple SD Gothic Neo ×8 · Pretendard ExtraBold ×2 |
영문 · Latin국문과 동일
| latinFont | Pretendard 38,945글리프(96.7%) · OTS derived font 1,092글리프(2.7%) · Apple SD Gothic Neo 181글리프(0.4%) · Apple Color Emoji 62글리프(0.2%) |
| latinWeights | 실측 페이스 Medium · Light · SemiBold |
| share | 라틴 40,291글리프 / 한글 50,611글리프 — 지면의 44.3%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: corp-title 66px/800 · corp-statement 52px/600 · corp-lead 48.92px/700 · corp-h2 40px/800 · store-h1 40px/700 · store-h2 36px/700 · price 28px/700 · store-h3 24px/700 · body-strong 18px/500 · body 16px/400 |
| mixing | 국영문 혼용 노드 1,323개(전체 3,294개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 44.3%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 96.7%를 그리는 Pretendard가 한글도 95.3% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · OTS derived font · Apple SD Gothic Neo |
| rendered | Pretendard Medium ×29584 · Pretendard ×7227 · Pretendard Variable ×1405 · OTS derived font ×1092 · Pretendard Light ×632 · Apple SD Gothic Neo ×181 · Pretendard SemiBold ×97 · Apple Color Emoji ×62 · Zapf Dingbats ×9 · PingFang SC ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Max width | 1320px | |
| Section gap | 코퍼레이트 200/200(인재 개발) | |
| Header | 112px relative(스토어) · fixed 80(인재채용) · static 96(기업소개) · sticky 90(유독) · 0(너겟) | |
| Content Widths | 1440 기준 홈 1320 · 고객지원 1376 · 이벤트 1080 · 요금제 708 · 너겟 636 · 코퍼레이트/기기상세 null(전폭 레이아웃이라 후보 미검출) | |
| Grid Store | 홈 3열 345×564 g20 r14 · 4열 312×561 g24 r16 · 3열 467×300 g19 r12 · 3열 272×600 g20 r14 · 4열 305×254 g0 | |
| Grid Corporate | 사업장 3열 400×316 g20 · 자회사 5열 232×192 g20 | |
| Grid Nerget | 1열 636px, 후기 카드 높이 152~208, 위아래 패딩 24 | |
| Grid Pogg | 4열 카드, 행 높이 339~340, 행 간격 22 (y287·649·1011·1372·1733·2094·2455·2816·3177·3538) | |
| Card Padding | 옵션 칩 16px 42px 16px 20px r12 · 버튼 12px 38px r32 · 배지 4px 8px r12 · 마젠타 버튼 0 30px r20 | |
| Button Padding | 0 30px r20px(마젠타 solid) · 12px 38px r32px(다크) · 4px 8px r8px(코퍼레이트 미니 nav) | |
| Note | 푸터가 층마다 다르다 — 코퍼레이트 528px #22171C(그룹 8) · 스토어 360px #2D2926(그룹 8) · 유독 157px #2D2926(그룹 4) · 너겟 0px #181A1B(그룹 3). 브레이크포인트는 1920·1590·1580·1456·1440·1400·1281·1280·1200·1025·1024·992·830·795px로 14개다. |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 4px | 22회 · 메뉴·미니 배지 |
| small | 6px | 7회 · 슬라이드 인디케이터 |
| chip | 8px | 68회 · 앵커 칩·코퍼레이트 미니 nav 버튼 |
| list | 10px | 5회 · 목록 블록 |
| item | 12px | 58회 · 리스트 아이템·옵션 칩·배지 |
| card | 14px | 19회 · 홈 카드 (상단만 둥근 14px 14px 0 0 형태가 37회로 더 많다) |
| card-lg | 16px | 146회 · 표준 카드·버튼. 최다 라운드 |
| button | 20px | 41회 · 마젠타 solid 버튼 |
| label | 21px | 5회 · 라벨 알약 |
| modal | 24px | 4회 · 모달·바텀시트 (24px 24px 0 0 형태 1회) |
| chip-lg | 28px | 2회 · 큰 칩 버튼 |
| map | 32px | 1회 · 사업장 위치 지도 보기 버튼 |
| tab | 40px | 7회 · 탭 알약 (130px ×3 변형 동반) |
| pill | 500px | 1회 · 꿀팁 배지 |
| circle | 50% | 82회 · 슬라이드 도트·아이콘 버튼 |
| pill-max | 3.35544e+07px | 25회 · '페이지 맨 위로 이동' 버튼 — 알약 의도지만 값이 2^25로 터져 있다 |
Guidelines
Do
- 층을 나눌 거라면 끝까지 나눈다 — 헤더 높이(112/96/80/90/0)·푸터 색(#2D2926/#22171C/#181A1B)·콘텐츠 폭(1320/1080/708/636)까지 층별로 일관되게 간다
- 자간을 px 고정으로 박으려면 층 안에서는 한 값으로 — 코퍼레이트 −0.64px, 스토어 −0.32px이 그 예다
- 브랜드 마젠타 #E6007E는 버튼 배경과 1px 테두리에만 쓰고, 본문 색으로는 쓰지 않는다(63회 중 텍스트 사용은 배지 한 곳)
- 본문은 #000000(21:1), 보조는 #66707A(5.04:1) 두 색으로 끊는다
- 커머스 카드는 radius 16px(146회)을 기본으로, 상단만 둥근 14px 14px 0 0(37회)은 이미지 위에 올라가는 카드에만
- 그림자는 rgba(0,0,0,0.1) 0 3px 6px(61회)와 rgba(0,0,0,0.05) 0 2px 4px(40회) 두 단으로 충분하다
- 이징은 cubic-bezier(0.4,0,0.2,1)에 0.15s(82회) — 커머스 UI의 반응 속도로 짧게 잡는다
Don't
- 이 사이트의 조판을 한 벌로 인용하지 않는다 — 같은 40px 제목이 층에 따라 웨이트 700/800, 자간 −0.32/−0.64로 갈린다
- 라운드를 21종으로 늘리지 않는다 — 최다값 16px조차 전체의 절반을 못 넘고, 3.35544e+07px 같은 값 오류가 섞여 있다
- #888888(3.54:1)·#FF2E98 위 흰 글자(3.44:1)를 본문에 쓰지 않는다 — 둘 다 AA 미달
- 선언 서체를 렌더 서체로 믿지 않는다 — Geist·nskr 둘 다 declaredFirstFamilies에 있지만 렌더 0글리프다
- 브레이크포인트를 14개로 벌리지 않는다 (1920·1590·1580·1456·1440·1400·1281·1280·1200·1025·1024·992·830·795)
- 스크롤 모션을 기대하지 않는다 — 10페이지에서 라이브러리는 Swiper 하나, ScrollTrigger·Lenis·캔버스는 0이고 일곱 페이지가 전환 0이다
- #007AFF는 Swiper 기본값이지 브랜드 색이 아니다
