SK텔레콤
표지를 카피가 아니라 radius 16 타일 14장으로 짠다 — 국문 글자는 36px에서 멈춘다.
SK텔레콤 홈은 히어로에 큰 카피를 두지 않고, 모서리 16px 타일 14장을 5열로 깔아 첫 화면을 채웁니다. 페이지에서 가장 큰 국문 글자가 36px 섹션 제목일 만큼 조판은 조용하고, 타일의 색면과 사진이 화면을 끕니다. 국문·영문을 모두 자사 서체 SKT Sans가 그리며 본문 웨이트는 600이 기본입니다. 국문 대형 히어로 레퍼런스로는 맞지 않고, 진입 지점을 타일로 늘어놓는 코퍼레이트 홈이나 스티키 히어로 구조를 설계할 때 참고하기 좋습니다.
https://www.sktelecom.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
SKT Sans Text · 400 / 500 / 600 / 700body·ui·caption — 한글 98.1%
SKT Sans Display · 700 / 800display — 섹션 제목과 진입 인트로
swiper-icons · 400icon-font
Type Scale기준은 1440(라이브 재측정 2026-09-10)
display-intro110px · 800 · 1.4
Handgloves 123
section-title36px · 700 · 1.3
Handgloves 123
tile-title20px · 700 · 1.3
Handgloves 123
tile-copy18px · 700 · 1.5
Handgloves 123
button16px · 700 · 1.6
Handgloves 123
nav-link15px · 600 · 2.1
Handgloves 123
card-title14px · 500 · 1.6
Handgloves 123
footer-link13px · 400 · 1.8
Handgloves 123
caption12px · 600 · 1.6
Handgloves 123
micro11px · 500 · 1.82
Handgloves 123
국문 · Korean
| hangulFont | SKT Sans Text (SemiBold 702 · Bold 59 · Regular 56) + SKT Sans Display Bold 16 — 한글 833글리프 전부 자사 웹폰트(fontsrc.json isCustomFont=true, reliable) |
| hangulWeights | 600 409 · 500 293 · 400 56 · 700 75(Text Bold 59 + Display Bold 16). CDP가 SemiBold 한 페이스로 500·600 두 단을 보고한다 — 이름의 웨이트 접미사가 아니라 hangulByWeight로 확인한 값이다 |
| body | 14px w500 lh1.6 (카드 제목) · 13px w400 lh1.8 (푸터 링크, 74회로 최다 단) |
| sub | 20px w700 lh1.30 (히어로 타일 제목 48회) · 18px w700 lh1.50 (타일 2행 카피) |
| label | 12px w600 lh1.6 자간 −0.13px(−1.08%) 26회 · 11px w500 lh1.82 24회 |
| mixing | 혼용 노드 36개를 전부 프로브로 재측정했다(mixedProbed 36/36). 국문·영문을 한 패밀리(SKT Sans)가 다 그려서 혼용 줄에도 서체 전환이 없고, 영문만 있는 타일 제목(YouTube·Instagram·SECURITY CENTER·T world)도 국문 타일과 같은 20/700 단을 쓴다 |
| hangulHeadings | 있다 — 그러나 최대가 36px/700 lh1.30 자간 0 두 건뿐이다('뉴스룸 콘텐츠' y1060 · '보도자료' y1530, SKT Sans Display Bold). 폴드(y<900) 안 최대 국문은 히어로 타일 제목 20px/700이고 히어로에는 국문 대형 카피가 없다. 로드 직후 잠깐 뜨는 110px/800은 영문 'SK Telecom' 워드마크다 |
| verdict | 국문 히어로·대형 제목 레퍼런스로는 부적합하다(폴드 최대 국문 20px · 페이지 최대 36px). 국문 UI·카드 조판 레퍼런스로는 유효하다 — 20/700 → 14/500 → 13/400 → 12/600 네 단이 뚜렷하고, 자간을 거의 쓰지 않으며(20px 이상 전부 normal) 본문 웨이트를 600으로 올려 잡는다 |
| rendered | SKT Sans Text SemiBold ×702 · SKT Sans Text Bold ×59 · SKT Sans Text Regular ×56 · SKT Sans Display Bold ×16 |
영문 · Latin국문과 동일
| latinFont | SKT Sans Text 452글리프(99.8%) · SKT Sans Display 1글리프(0.2%) |
| latinWeights | 실측 페이스 SemiBold · Bold · Regular |
| share | 라틴 453글리프 / 한글 833글리프 — 지면의 35.2%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 SKT Sans Text를 쓰는 단: tile-title 20px/700 · tile-copy 18px/700 · button 16px/700 · nav-link 15px/600 · card-title 14px/500 · footer-link 13px/400 · caption 12px/600 · micro 11px/500 |
| mixing | 국영문 혼용 노드 36개(전체 98개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 35.2%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.8%를 그리는 SKT Sans Text가 한글도 98.1% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: SKT Sans Text · SKT Sans Display |
| rendered | SKT Sans Text SemiBold ×382 · SKT Sans Text Bold ×63 · SKT Sans Text Regular ×7 · SKT Sans Display Bold ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 20px(59회)와 | |
| Max width | 1280px | |
| Section gap | 섹션 패딩으로 만든다 — 뉴스룸 padding-top 160 / 보도자료 120·160 / 히어로 75·19 (1440 실측) | |
| Header | 75px static | |
| Grid Hero | 5열 260px 거터 10 — .inner 1340 = 260×5 + 10×4. 타일 14장, 열마다 2~3장씩 높이가 다르다(열 높이 최대 502) | |
| Grid Cards | 4열 311px 거터 12 — 1280 = 311×4 + 12×3. 카드 311×271, 썸네일 311×210 | |
| Card Padding | 카드 자체 패딩 0 — 썸네일 311×210 바로 아래 14/500 제목이 붙는다 | |
| Button Padding | 14px 36px (알약 CTA 232×58, radius 100px, 2px solid #000) | |
| Gaps | flex/grid gap 실측 — 10px ×8 · 16px ×8 · 12px ×2 · 33px ×2 · 18px ×1(푸터 SNS 아이콘 30×30 5개) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| tab | 4px 4px 0px 0px | 1회 · 히어로 하단 스크롤 유도 탭 80×22 (bg #727887, y=878) |
| — | 12px | 1회 · 관측만 (div 1건) |
| standard | 16px | 106회 · 히어로 타일·카드 썸네일 전부. 1440 라이브 집계로도 16px ×64로 단일 표준 |
| pill | 100px | 1회 · CTA '뉴스룸 바로가기' 232×58 한 곳 |
Guidelines
Do
- 히어로를 카피 대신 타일 벽으로 짠다 — 5열 260px 거터 10(.inner 1340), 타일 14장, radius 16, 제목 20/700 + 설명 14/500
- 국문 제목은 36/700 lh1.30 자간 0에서 멈추고 20/700 → 14/500 → 13/400 → 12/600 네 단으로 떨어뜨린다
- 국문 본문 웨이트의 기본은 600이다 — 한글 833글리프 중 SemiBold가 702(84.3%)
- 라운드는 16px 하나로 통일한다(106회). 알약 100px은 CTA 한 곳에만
- 깊이는 그림자 대신 1px rgba(0,0,0,0.05) 헤어라인으로 만든다(외부 그림자 사실상 0)
- 액션은 색이 아니라 형태로 — CTA는 투명 배경 + 2px solid #000 + 알약 232×58
- 콘텐츠는 1280 폭(좌우 마진 80), 섹션 간격은 패딩 120~160으로 준다
- 히어로를 position:sticky 900px으로 두고 흰 섹션이 그 위를 덮으며 올라오게 한다
Don't
- #0000EE를 브랜드 색으로 베끼지 말 것 — 팔레트 1위(184회)지만 0×0으로 접힌 메가메뉴 앵커의 브라우저 기본값이고 1440 가시 텍스트 색 집계엔 0회다
- 흰 글자를 #727887 위에 올리지 말 것 — 4.42:1로 AA 미달인 조합이 13쌍이다(TOP 버튼 55×58이 그렇게 돼 있다)
- 국문 대형 히어로 레퍼런스로 쓰지 말 것 — 폴드 최대 국문이 20px, 페이지 최대가 36px이고 110px은 영문이다
- 자간 규칙을 만들지 말 것 — 20px 이상은 전부 normal이고 음수 자간은 12·14px 네 건(−0.13 · −0.48 · −0.52 · −0.56px)뿐이다
- raw의 10px/400 228회를 본문 크기로 재현하지 말 것 — html·body font-size가 10px이라 상속된 컨테이너 값이고 가시 텍스트 최소는 11px이다
- 모션을 스크롤에 잠그지 말 것 — gsap 3.12.2 · ScrollTrigger · Lenis가 다 있는데 등록 트리거 3개가 전부 scrub:false · pin:false이고 실측 스크롤 구동 전환도 0건이다
- 다크 지면 섹션을 만들지 말 것 — 4섹션 중 3개가 #FFFFFF, 히어로만 #F6FAFD다. 검정은 타일 안쪽(#333333 ×3)에만 있다
