구름

흰 지면 하나에 잉크 #262626 한 색, 144px 여백으로 끊고 자간은 −0.4 / −0.2 / −0.1px 세 계단으로만 내려간다.

구름은 10페이지 전부 흰 지면 하나로 가는 사이트입니다. 색면도 다크 섹션도 없이 144px 여백과 8px 라운드, 1px 회색 선만으로 구획을 나눕니다. 자간이 세 계단(32px 이상 −0.4px · 20px −0.2px · 18px 이하 −0.1px)으로 딱 떨어져 크기별 자간 규칙을 통째로 가져오기 좋고, 큰 제목의 굵기를 700과 500 두 갈래로 나눠 히어로와 섹션 제목의 위계를 굵기로 가르는 점도 참고할 만합니다. 다만 자사 서체 '구름 산스'는 한글을 한 글자도 그리지 않고 폰트 소개 페이지의 영문 견본에만 나타나며, 실제 한글은 99.7%가 Pretendard입니다.

https://www.goorm.io

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard Variable · 400 / 500 / 600 / 700display·heading·body·ui — 사이트 전부

goorm Sans · 700자사 서체 — 견본에만 (라틴 156글리프, 한글 0)

Menlo · 400code (실제 렌더)

Apple SD Gothic Neo · 400폴백 (한글 46글리프)

Type Scale자간이 세 계단으로만 내려간다 — 64·48·38·32·24px는 전부 −0

display64px · 700 · 1.13

다람쥐 헌 쳇바퀴

h148px · 700 · 1.2

다람쥐 헌 쳇바퀴

h248px · 500 · 1.3

다람쥐 헌 쳇바퀴

h338px · 500 · 1.2

다람쥐 헌 쳇바퀴

h424px · 500 · 1.5

다람쥐 헌 쳇바퀴

body-lg20px · 500 · 1.5

다람쥐 헌 쳇바퀴

sub18px · 500 · 1.67

다람쥐 헌 쳇바퀴

body16px · 500 · 1.5

다람쥐 헌 쳇바퀴

nav14px · 600 · 1.71

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.5

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable 16,987글리프(99.7%) · Apple SD Gothic Neo 46(0.3%). 총 17,033글리프(CDP 10페이지, 1440). 자사 서체 goorm Sans는 한글 0글리프다
hangulWeights	500 9,066(53.2%) · 400 7,012(41.2%) · 700 779(4.6%) · 600 130(0.8%). 폴백 Apple SD Gothic Neo 46은 400 구간에만 있다
body	16px w500 lh1.50 자간 −0.1px (raw ×24) · 14px w400 lh1.57 −0.1px (×21) · 14px w500 lh1.57 −0.1px (×14)
sub	20px w500 lh1.50 자간 −0.2px (×7) — 히어로 부제 2행 · 카드 제목. 18px w500 lh1.67 −0.1px (×5)이 섹션 리드
label	14px w600 lh1.71 자간 0 (GNB ×27) · 12px w400 lh1.50 자간 0 (×20) · 12px w700 (×10)
mixing	한 줄 안에서 국영문을 섞는다 — 'goormEDU로 맞춤형 학습 환경을 구축하세요' · '코딩테스트·AI 활용 역량 평가 Devth로 시작하세요'처럼 제품명이 라틴 그대로 국문 문장에 들어간다. 혼용 노드 475개(전체 1,682개)이고 전부 프로브로 재측정했다. 서체를 나누지 않으므로 Pretendard 하나가 두 문자를 다 그린다. 홈 히어로만 영문 단독 2행이다
hangulHeadings	있다. 1440 layout 10페이지 기준 국문 64px/700 3건(채용 §0 '최고의 동료들과 AX의 미래를 그립니다' y0 h462 padTop144 · resources/brands §1 '브랜드 가이드라인' h457 · resources/fonts §1 '구름 산스' h427) · 48px/700 3건(문의 · Devth · goormEDU 히어로) · 48px/500 6건(홈 섹션 오프닝 3 + CTA 3) · 38px/500 11건 · 38px/700 2건(목록 타이틀) · 24px/500 10건. 홈 히어로만 라틴 64px/700 'Superpowers, for everyone'이고, 128px/700 라틴 1건은 폰트 소개 페이지의 자사 서체 견본이다
verdict	국문 대형 조판 레퍼런스로 유효하되 히어로는 서브페이지에서 봐야 한다 — 홈 폴드는 영문이 맡고 국문 64px/700은 채용·브랜드·폰트 세 페이지에 있다. 이식 가치가 가장 큰 것은 자간 계단이다: 24px 이상 −0.4px · 20px −0.2px · 18~14px −0.1px · 12px 이하 0으로 네 값이 전 페이지에서 흔들리지 않는다. 고정 px이라 큰 글자에서 조임이 약해지는(64px −0.63%) 성질을 알고 써야 한다 — 비율 계단이 필요하면 한화(−4~−1%)나 제네시스를 본다. 굵기를 700/500 두 갈래로만 쓰고 600을 GNB 14px에 가둔 것, 행간을 1.13→1.71로 크기 반비례로 벌린 것도 그대로 옮길 만하다. 반대로 색·라운드 체계는 이식 대상이 아니다 — CSS 변수 103개가 정의만 돼 있고 화면에 쓰인 채도색은 대부분 1페이지짜리 제품 데모용이다
rendered	Pretendard Variable ×16987 · Apple SD Gothic Neo ×46

영문 · Latin자사 라틴

latinFont	Pretendard 7,685글리프(82.2%) · Menlo 1,260글리프(13.5%) · goorm Sans 156글리프(1.7%) · goorm Sans Code 156글리프(1.7%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 9,350글리프 / 한글 17,033글리프 — 지면의 35.4%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display 64px/700 · h1 48px/700 · h2 48px/500 · h3 38px/500 · h4 24px/500 · body-lg 20px/500 · sub 18px/500 · body 16px/500 · nav 14px/600 · caption 12px/400
mixing	국영문 혼용 노드 475개(전체 1,682개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Menlo 모노(13.5%) · goorm Sans 자사 라틴(1.7% · 선언됨) · goorm Sans Code 자사 라틴(1.7% · 선언됨)
verdict	영문 전용 서체가 있다 — Menlo 라틴 13.5% / 한글 0.0% · goorm Sans 라틴 1.7% / 한글 0.0% · goorm Sans Code 라틴 1.7% / 한글 0.0%. 다만 타입 스케일에 이 서체로 지정된 단이 없다 — 디스플레이 레퍼런스로 보기 어렵다
sharedWithKorean	국문과 같은 서체: Pretendard · Apple SD Gothic Neo
rendered	Pretendard Variable ×7685 · Menlo ×1260 · goorm Sans ×156 · goorm Sans Code ×156 · Apple SD Gothic Neo ×92 · Arial ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1172px
Section gap	144px이 기준선이다(raw commonValues 144px ×36). 홈 §12~14와 솔루션 페이지가 padding 144/144, 채용은 96/96, 목록 페이지 타이틀은 136/64, 히어로는 padTop 144(채용·브랜드·폰트) 또는 136(문의·뉴스룸·공지)
Header	72px fixed
Content Widths	페이지마다 다르다 — 채용 상세·솔루션·뉴스룸 1172 · 홈·공지 1140 · 채용 목록 948 · 브랜드·폰트 752 · 문의 592
Grid Cards	3열 369×190 거터 16 r8px bg #F7F7F7(채용 §6) · 3열 369×130 거터 16(홈 §14) · 3열 359×296 거터 32(뉴스룸) · 3열 337×136 거터 32(홈 지표 3열) · 2열 352×420 거터 16 r8px(홈 §12) · 3열 305×40 거터 16(채용 공고 행)
Logo Strip	128×40 로고 86칸, 거터 72 — 홈 히어로 안(§0)과 문의 페이지 하단(§2 h184 padding 72/72)에 같은 규격으로 반복. 솔루션 페이지는 30칸·26칸
Button Padding	0×24 (r8px, 16px/500 — 주 CTA·보조 CTA 공통) · 0×12 · 0×8 · 0×16

Border Radius

Role	Value	Preview
small	4px	10회 · 작은 태그
checkbox	6px	8회 · 체크박스·작은 버튼 (6px 2 + 6.754px 6)
standard	8px	379회 · 표준 — 버튼·카드·인풋·태그 전부. 라운드 사용의 대부분이 이 한 값이다
medium	12px	24회 · 인풋·카드 변형, 배지 채움
large	16px	10회 · 이미지 블록
xlarge	32px	33회 · 이미지·카드 (32px 3 + 32.12px 24 + 32.363px 6 — 대부분 계산값이다)
circle	50%	13회 · 아바타·아이콘
pill	999px / 9999px	15회 · 배지·상태 칩 (999 11 + 9999 4). 버튼에는 안 쓴다

Guidelines

자간을 세 계단으로 잠근다 — 24px 이상 −0.4px · 20px −0.2px · 18~14px −0.1px · 12px 이하 0
행간을 크기에 반비례로 벌린다 — 64px 1.13 → 48px 1.20~1.30 → 24px 1.50 → 18px 1.67 → 14px 1.71
같은 48px에서 히어로는 700, 섹션 제목은 500으로 굵기로 위계를 가른다
섹션 여백은 144px 기준(raw ×36), 밀도가 필요한 목록·채용은 96/24로 내린다
라운드는 8px 하나로(379회) 버티고 배지만 알약(999px)으로 예외를 둔다
카드는 테두리 대신 #F7F7F7 채움으로, 인풋은 보더 대신 #E1E1E1 1px 인셋 링으로 만든다
주 CTA는 잉크색 #262626 배경 + 흰 글자 16px/500 · pad 0×24 · r8px 하나로 통일한다

Don't

브랜드 파랑 #0043B3을 CTA 배경으로 쓰지 않는다 — 실제 CTA 7건이 전부 #262626이고 파랑은 배지 텍스트 59회뿐이다
다크 섹션·컬러 밴드를 만들지 않는다 — 10페이지 전 섹션 배경이 rgb(255,255,255) 하나다
자사 서체를 한글 조판에 전제하지 않는다 — goorm Sans는 라틴 156글리프(폰트 소개 견본)뿐이고 한글 0글리프, 실제 한글은 99.7%가 Pretendard다
코드 블록에 Fira Code를 선언만 하고 두지 않는다 — 렌더 0글리프이고 실제로는 OS 서체 Menlo가 1,260글리프를 그린다
라운드 값 목록을 복사하지 않는다 — 32.12px·21.009px·3.35544e+07px 같은 계산·오류 값이 섞여 있다
제품 데모 위젯의 색(#2A72E5·#805CEC·#83009F)을 사이트 액센트로 승격하지 않는다 — 전부 1페이지짜리이고 UI 재현용이다
스타일이 안 붙은 링크를 남기지 않는다 — #0000EE(브라우저 기본색)가 9페이지에서 88회 잡힌다