메가존클라우드

80px 영문 히어로부터 12px 캡션까지 Pretendard 한 서체·자간 −2% 고정, 깊이는 그림자 0개 대신 흰 면과 #0A0F10 검정 면의 교대로 만든다.

메가존클라우드는 국문으로 설명하면서 첫 화면만 영문으로 여는 B2B 기업 사이트입니다. 80px 영문 헤드라인부터 12px 캡션까지 전부 Pretendard 한 서체로 그리고 자간을 크기와 상관없이 −2%로 묶어, 위계를 오직 크기와 굵기로만 만듭니다. 그림자를 한 개도 쓰지 않고 흰 면과 검정 면(#0A0F10)을 번갈아 쌓아 리듬을 만드는 점이 이 사이트의 성격을 가장 잘 보여줍니다. 서비스·산업·제품·고객사례·인사이트 다섯 축으로 갈라지는 B2B 기업 사이트의 정보구조와 섹션 순서를 참고할 때 좋습니다.

https://www.megazone.com

Color Palette

Primary

Label

Fill

Line

Background

Accent

Typography

Pretendard · 300 / 400 / 500 / 600 / 700 / 800display·heading·body·ui — 국문·영문 전부

Apple SD Gothic Neo · 400 / 700fallback (OS 폰트) — 사례·기사 상세 본문

Arial · 400 / 700fallback (편집기 본문)

Type Scale1440 layout 기준이며 raw(1920)와 같다

display80px · 800 · 1.2

다람쥐 헌 쳇바퀴

h1-cta72px · 700 · 1

다람쥐 헌 쳇바퀴

stat68px · 700 · 1.2

다람쥐 헌 쳇바퀴

h160px · 600 · 1.4

다람쥐 헌 쳇바퀴

h244px · 700 · 1.4

다람쥐 헌 쳇바퀴

h332px · 700 · 1.4

다람쥐 헌 쳇바퀴

lead24px · 500 · 1.4

다람쥐 헌 쳇바퀴

ui-strong18px · 700 · 1

다람쥐 헌 쳇바퀴

body18px · 400 · 1.4

다람쥐 헌 쳇바퀴

body-sm15px · 500 · 1.4

다람쥐 헌 쳇바퀴

caption12px · 300 · 1

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard 45,678글리프(85.8%) — self-hosted 정적 페이스(Pretendard 39,767 · Medium 4,667 · Light 920 · SemiBold 324). 나머지 7,558(14.2%)은 Apple SD Gothic Neo(OS 폰트)이고 10개 템플릿 중 resources/insight 상세(4,724)와 case-stories 상세(2,834) 둘에만 몰려 있다 — 그 두 페이지에서는 Pretendard가 각각 88·512글리프뿐이라 본문 전체가 OS 폰트로 그려진다
hangulWeights	400 주력(Pretendard 34,166 · Apple SD Gothic Neo 5,686) · 500(Medium 4,667) · 700(Pretendard 2,963 · Apple SD Gothic Neo 1,872) · 300(Pretendard 2,428 · Light 920) · 600(SemiBold 324) · 800(Pretendard 210)
body	18px w400 lh1.4 ls−0.36px (카드·FAQ) · 15px w500 lh1.4 ls−0.3px (count 38, 최다) · 사례·기사 상세만 17px w400 lh1.5 ls0
sub	24px w500 lh1.4 ls−0.48px (count 11) — 히어로 아래 국문 리드. 컨택트 '비즈니스 고민, 함께 해결'이 Pretendard Medium 106글리프
label	15px w500 ls−0.3px (지역 스위처 '대한민국') · 14px w500 ls−0.28px (count 20) · 13px w500 lh1.4 (인증범위 라벨) · 12px w300 uppercase (자간 0)
mixing	층으로 나누지 않고 한 줄 안에서 섞는다 — 서비스 히어로 h1이 'AI-Powered Modernization 혁신 그 이상의 진화'(60/600, 국문분 8글리프 Pretendard SemiBold) · '미래를 여는 AI-Native 혁신, MegazoneCloud가 그 시작을 함께 합니다.'(60/600, 국문분 64글리프)처럼 영문 제품명을 국문 문장에 그대로 박는다. 서체가 하나라 혼용 지점에서 서체가 갈리지 않는다. 혼용 노드는 771개(전체 2,366개)이고 그중 770개를 한글 프로브로 재측정했다(실패 1개는 어느 쪽으로도 세지 않았다). 예외는 사례·기사 상세로, 그쪽은 한글이 Apple SD Gothic Neo·라틴이 Arial로 갈린다
hangulHeadings	있음 — 순국문 최대는 44px/700이다(사례 목록 h1 '산업 별 고객 성과로 메가존클라우드의 DX 역량을 확인하세요' Pretendard×57 · 파트너 '고객의 비즈니스를 실질적으로 변화시키는 5개의 핵심…'). 국문이 섞인 최대 단은 60px/600 서비스 히어로 h1 2곳이고, 그 위 80px/800 · 72px/700 · 68px/700 · 60px/700 · 50px/700 단은 전부 영문 또는 숫자다('Empowering every organization…' · "We're Hiring" · '150' · 'What We Do' · 'Resources'). 홈 폴드에는 국문 제목이 없다
verdict	국문 히어로 레퍼런스로는 부적합하다 — 첫 화면 80px은 영문이고 순국문 제목은 44px에서 멈춘다. 대신 pxd처럼 영문 제목과 국문 본문을 위아래 층으로 분리하지 않고 60px 한 줄 안에서 섞는다는 점이 다르다. 영문 제품명·기술 용어를 국문 문장에 그대로 박아야 하는 B2B 기술 카피의 조판 레퍼런스로 유효하고, 그 근거는 서체가 하나(Pretendard)라 혼용 지점에서 획 굵기·글자 폭이 튀지 않는다는 것이다. 크기별 자간을 −2% 비례로 묶는 규칙도 국영문 혼용 지면에서 그대로 가져다 쓸 만하다. 다만 사례·기사 상세의 본문은 OS 폰트로 렌더되므로 본문 조판 근거로는 쓰지 않는다
rendered	Pretendard ×39767 · Apple SD Gothic Neo ×7558 · Pretendard Medium ×4667 · Pretendard Light ×920 · Pretendard SemiBold ×324

영문 · Latin폴백

latinFont	Pretendard 31,217글리프(93.5%) · Arial 2,162글리프(6.5%) · Noto Sans JP 11글리프(0.0%) · Apple Symbols 4글리프(0.0%)
latinWeights	실측 페이스 Medium · Light · SemiBold · ExtraBold · Thin
share	라틴 33,395글리프 / 한글 53,236글리프 — 지면의 38.5%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display 80px/800 · h1-cta 72px/700 · stat 68px/700 · h1 60px/600 · h2 44px/700 · h3 32px/700 · lead 24px/500 · ui-strong 18px/700 · body 18px/400 · body-sm 15px/500 · caption 12px/300
mixing	국영문 혼용 노드 771개(전체 2,366개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Arial 폴백(6.5% · 선언됨)
verdict	영문 전용 서체 없음(폴백) — 라틴을 Arial 6.5%가 그리지만 전부 OS·브라우저 기본 페이스다. 서체를 고른 결과가 아니라 스택이 흘러간 결과이므로 디자인 결정으로 인용하지 말 것
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard ×18848 · Pretendard Medium ×6266 · Pretendard Light ×4874 · Arial ×2162 · Pretendard SemiBold ×875 · Pretendard ExtraBold ×354 · Noto Sans JP Thin ×11 · Apple Symbols ×4 · Helvetica ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	4px
Max width	1360px
Docs width	1200px
Section gap	섹션 세로 패딩 120/120이 표준(120px 37회)
Header	100px fixed
Grid Cards	사례 카드 4열 340×518 gap 20 · 전체 사례 4열 325×483 gap 20 r18 · 인사이트 3열 440×446 gap 20 · Industries 3열 210×210 gap 20 r18 · 인증 카드 628×246 gap 32 · Voices 420×334 gap 24 r18
Card Padding	제품 슬라이드 pad 24/24(높이 280) · 파트너 카드 pad 12/12(높이 550~600) · 사례 요약 밴드 pad 40/40
Button Padding	알약 버튼 0 40 · 태그 칩 8 16 · 파트너 뱃지 10 24 · MUI 인풋 16.5 14
Content Widths	1360(홈·서비스·파트너·사례목록·컨택트, 25~62회) · 1240(사례 상세·기사 상세, 11~37회) · 1200(개인정보처리방침, 286회)
Cert Band	전 페이지 하단에 180px '인증범위' 밴드(#0A0F10, 13/500 라벨 + 12px 본문 255자)가 푸터 위에 붙는다

Border Radius

Role	Value	Preview
small	4px	60회 · 버튼·MUI 셀렉트
—	5px	9회 · 버튼
—	6px	2회 · 배지
medium	8px	76회 · 버튼·소형 패널
—	12px	48회 · 컨테이너
card	18px	146회 · 카드 표준 — 사례 카드 325×483 · Industries 210×210 · Voices 420×334
—	20px	9회 · 본문 블록
—	40px	6회 · 대형 패널
circle	50%	65회 · 캐러셀 도트 14×14 · 아이콘
pill	100px	145회 · 알약 버튼(pad 0 40, 18/700)과 태그 칩(pad 8 16, 14/400) — 카드 18px과 함께 이 사이트의 두 라운드
pill	500px	5회 · 100px과 같은 알약 의도의 중복 값
asymmetric	8px 8px 0px 16px	10회 · 이미지 한쪽 모서리만 키운 비대칭 라운드

Guidelines

자간을 크기 × −2%로 건다 — 72(−1.44) · 60(−1.2) · 44(−0.88) · 24(−0.48) · 18(−0.36) · 15(−0.3) · 14(−0.28px)까지 19개 단이 정확히 이 값이다
행간은 제목 1.3~1.4 · 본문 1.4로 통일한다. 최다 스타일이 15px w500 lh1.4 ls−0.3px(count 38)이다
깊이를 그림자 없이 만든다 — box-shadow 0개, 지면을 #FFFFFF ↔ #0A0F10 ↔ #F7F7F7 ↔ #F0F0F0으로 갈아 끼우고 경계는 1px rgb(221,221,221)
라운드는 카드 18px과 알약 100px 둘로 끝낸다(146회·145회로 전체의 절반)
섹션 세로 패딩은 120/120을 기본으로, 콘텐츠가 많은 섹션만 140/140으로 올린다
채도는 그라디언트에만 쓴다 — #414AFF를 축으로 #32EF7A·#8920FF·#00D7F8을 175/116/304/314deg 2색 조합으로 붙인다
검정 지면 위 보조 텍스트는 #9D9F9F(7.25:1)을 쓴다. 흰 지면의 #AAAAAA를 그대로 옮기면 안 된다

Don't

#AAAAAA를 흰 지면 텍스트에 쓰지 않는다 (2.32:1, AA 미달 98쌍). #777777도 흰 지면 4.48:1 · 검정 지면 4.31:1로 양쪽 다 미달이다
브랜드 파랑을 두 값으로 두지 않는다 — #414AFF(--color-point-blue)와 #5891E8(1페이지 링크, 3.17:1 미달)이 공존한다
CMS·편집기 본문을 사이트 폰트 스택 밖에 두지 않는다 — 사례 상세와 인사이트 기사 두 템플릿의 본문 7,558글리프가 Apple SD Gothic Neo(OS 폰트)로 그려지고 Arial 11pt·17pt가 섞인다
국문 사이트의 내비게이션을 전부 영문으로 두지 않는다 — 1차 라벨 6개가 전부 영문이고 국문은 지역 스위처 '대한민국' 하나뿐이다
대형 제목의 굵기를 낮추지 않는다 — CTA 36/400은 같은 크기대의 36/600·36/700보다 눈에 띄게 약하다
알약 라운드를 100px과 500px 두 값으로 쓰지 않는다 (145회 대 5회, 결과는 같다)
폰트 크기에 pt 환산 소수점을 남기지 않는다 (28.8 · 22.6667 · 19.2 · 14.6667px)