코드잇

흰 지면 위에 잉크 #333236 한 색, 보라 #9933FF 한 점 — 그리고 국문을 68px w800으로 세운다.

코드잇은 흰 지면에 잉크 한 색으로 쓰고 보라를 액션 한 곳에만 얹는 코딩 학습 사이트입니다. 국문 히어로가 68px까지 커지는 몇 안 되는 사례이고, 자간을 −0.3px 한 값으로 거의 모든 크기에 고정한 뒤 48px 이상 제목에만 따로 더 조이는 규칙이 뚜렷합니다. 행간은 반대로 큰 글자일수록 좁혀(68px 1.24 → 16px 1.69) 제목과 본문의 밀도를 갈라 놓습니다. 개인 대상은 보라, 기업 교육은 파랑으로 액션 색 자체를 나눈 점도 한 사이트에 B2C와 B2B가 섞일 때 참고가 됩니다.

https://www.codeit.kr

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Spoqa Han Sans Neo · 300 / 400 / 500 / 700한글·영문 전 층 (display·heading·body·ui·caption)

Pretendard ExtraBold · 800display 800 (홈 국문 히어로 단 한 곳)

Menlo · 400code

Apple SD Gothic Neo · 400fallback

Type Scale1440 layout 기준

display82px · 700 · 1.22

다람쥐 헌 쳇바퀴

hero68px · 800 · 1.24

다람쥐 헌 쳇바퀴

display-268px · 700 · 1.24

다람쥐 헌 쳇바퀴

h154px · 700 · 1.3

다람쥐 헌 쳇바퀴

h248px · 700 · 1.29

다람쥐 헌 쳇바퀴

h332px · 700 · 1.38

다람쥐 헌 쳇바퀴

h424px · 700 · 1.5

다람쥐 헌 쳇바퀴

body16px · 400 · 1.69

다람쥐 헌 쳇바퀴

ui15px · 500 · 1.67

다람쥐 헌 쳇바퀴

label13px · 500 · 1.62

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Spoqa Han Sans Neo 계열 98.7% (Regular 13,761 · Bold 7,346 · Medium 3,999 = 25,106 / 25,437글리프). 나머지는 Apple SD Gothic Neo 164 · Menlo 145 · Pretendard ExtraBold 12 · Inter 9 · Lucida Grande 1
hangulWeights	400 Regular 13,761(54.1%) · 700 Bold 6,944(27.3%) · 500 Medium 3,955(15.5%) · 900은 파일이 없어 Bold로 그려짐 34 · 800만 Pretendard ExtraBold 12
body	16px w400 lh1.69 ls−0.3px (−1.9%). 커뮤니티 본문·질문/답변 전부 이 값
sub	20px w500 lh1.60 ls−0.3px (섹션 리드) · 18px w400 lh0 ls−0.3px (프로모션 바 문장)
label	15px w500 lh1.67(GNB 1차·배지) · 13px w500 lh1.62(GNB 2차·푸터·타임스탬프) · 12px w400 lh1.67 · 11px w400 lh1.64
mixing	국영문을 한 서체로 섞는다 — 라틴 916글리프 중 902(98.5%)도 Spoqa Han Sans Neo다(Arial 24 · Menlo 14뿐). 영문 전용 디스플레이 서체를 두지 않고, 82px 영문 히어로 'AI Boost Course'도 Spoqa로 그린다. 대신 숫자·영문이 섞인 제목('20분 이상 영상만 보는', '전문가 20인의 노하우로', 'Python으로 주식 투자 자동화하기')을 그대로 국문 조판 안에 넣는다
hangulHeadings	있다. 국문 68px/800 히어로 1개(홈 h1 '5분마다 인생이 바뀐다', y156 h717) · 국문 68px/700 히어로 1개(teams h1 '디지털 리터러시 SQL 교육은 코드잇에서 시작하세요', y64 h478, padding 108/54) · 국문 54px/700 4개(이벤트 히어로 '평생교육이용권으로 AI·IT 강의를 무료로 수강하세요' 포함) · 국문 48px/700 8개(랜딩 섹션 제목 표준). 영문 82px/700은 ai-edu 히어로 한 곳뿐이다
verdict	국문 히어로·대형 제목 레퍼런스로 유효하다 — 48px 이상 국문 제목이 10개 페이지에서 14건이고, 그중 68px 2건이 폴드 안에 있다. 특히 '자간 −0.3px 전 단계 고정 + 디스플레이만 −1px' 규칙과 '행간을 크기에 반비례로 벌리기'(68px 1.24 → 16px 1.69)는 그대로 이식 가능하다. 다만 800 웨이트는 Spoqa가 아니라 Pretendard 폴백이 그린다는 점을 알고 써야 한다 — Spoqa만 로드하고 800을 주면 브라우저·OS에 따라 다른 폰트로 떨어진다
rendered	Spoqa Han Sans Neo ×17971 · Spoqa Han Sans Neo Bold ×9072 · Spoqa Han Sans Neo Medium ×5053 · Apple SD Gothic Neo ×283 · Pretendard ExtraBold ×18

영문 · Latin국문과 동일

latinFont	Spoqa Han Sans Neo 10,844글리프(98.5%) · Menlo 159글리프(1.4%) · Apple SD Gothic Neo 3글리프(0.0%) · Pretendard 3글리프(0.0%)
latinWeights	실측 페이스 Bold · Medium · ExtraBold
share	라틴 11,010글리프 / 한글 32,397글리프 — 지면의 25.4%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Spoqa Han Sans Neo를 쓰는 단: display 82px/700 · display-2 68px/700 · h1 54px/700 · h2 48px/700 · h3 32px/700 · h4 24px/700 · body 16px/400 · ui 15px/500 · label 13px/500
mixing	국영문 혼용 노드 890개(전체 2,353개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 25.4%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 98.5%를 그리는 Spoqa Han Sans Neo가 한글도 99.1% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Spoqa Han Sans Neo · Apple SD Gothic Neo · Pretendard
rendered	Spoqa Han Sans Neo ×6099 · Spoqa Han Sans Neo Bold ×3353 · Spoqa Han Sans Neo Medium ×1392 · Menlo ×159 · Apple SD Gothic Neo ×3 · Pretendard ExtraBold ×3 · Lucida Grande ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	regular
Base unit	4px
Max width	1120px
Section gap	섹션 사이 여백은 0 — 섹션이 서로 맞닿는다(홈 y156→873→2133→3137 연속). 간격은 섹션 내부 padding으로 준다: 160/160(teams 클라이언트 로고 h848
Header	98px sticky (div.stickySection, <header> 태그 아님 — 위에 58px 프로모션 바가 먼저 온다)
Content Width By Template	홈 1120 · teams 1296 · ai-edu 1200 · 커뮤니티 목록/상세 1200 · FAQ 1044 · 이벤트 996 · 인터뷰 상세 752 · 작품/프로필 상세 1360 — 템플릿마다 다른 폭을 쓴다(10페이지 중 7개 값)
Grid Home	홈 히어로 4×4 타일 124×144(gap 124) · 추천 카드 3열 362×304 gap 16 · 수료증 배너 20열 4×4 타일
Grid Cards	이벤트 코스 카드 4×2 · 커뮤니티 목록 1열 전폭(행 h166~190) · 인터뷰 관련 강의 4×2 344×146 gap 12 · teams 피처 5×2 327×137
Card Padding	커뮤니티 목록 행 20/22 · 이벤트 로드맵 카드 40/64 · 프로필 출석 패널 25/200
Button Padding	8×24 (r8, 16/500 기본) · 10×32 (r10, 18/700 대형) · 8×16 (r10 보조 / r22 알약) · 6×12 (r12 출처 칩 13/400)
Header B2 B	기업교육 2페이지(teams · ai-edu)만 61px fixed 투명 헤더 + 자체 nav(기업교육 · 생성형 AI 교육 · 고객 사례 · 블로그 · 문의하기)를 쓰고 219px 공통 푸터 대신 218px GeneralFooter를 쓴다
Footer Groups	B2C 푸터 219px · 5그룹(코드잇 소개 · 멤버십 소개 · 자주 묻는 질문 · 공지사항 + 개인정보 처리방침)

Border Radius

Role	Value	Preview
xs	2px	8회 · 이미지 마스크
small	4px	25회 · 작은 배지(bg #FFE878 border 1px #FFC002 15/500 pad 2×8)·썸네일
chip	6px	28회 · 인라인 칩·코드 조각
standard	8px	130회 · 표준 — 버튼('수강 신청하기' pad 8×24)·영상·FAQ 행
button-lg	10px	15회 · 대형 CTA('무료 체험 시작하기' 18/700 pad 10×32)
card	16px	23회 · 추천 카드 362×304 · 관련 강의 카드 344×146
card-lg	20px	68회 · 큰 카드·모듈 블록(ai-edu 강사진 606×136 bg #F6F6F8)
media	24px	52회 · 영상 프레임
badge	32px	76회 · 배지 전용 — pad 0×12, 15/700, bg #C47CFD/#A64EFF/#9933FF
circle	50%	94회 · 아바타·아이콘 버튼
pill	9990px	84회 · 검색창·메뉴 알약 (999px 5회 · 100% 4회도 같은 의도)

Guidelines

국문 대형 제목을 세운다 — 홈 h1은 68px/800이다. 단 Spoqa에 800 파일이 없으므로 800을 쓰려면 Pretendard ExtraBold를 함께 얹어야 한다(코드잇도 그렇게 떨어진다)
자간은 −0.3px 한 값으로 전 단계 고정, 48px 이상만 −1px(54·48) · −3px(82)로 내린다. 38개 스타일 중 34개가 −0.3px이다
행간을 크기에 반비례로 벌린다: 68px 1.24 → 48px 1.29 → 32px 1.38 → 24px 1.50 → 16px 1.69
액션 색을 대상별로 가른다 — B2C 보라 #9933FF, B2B 파랑 #0674F4. 두 색을 한 화면에 겹치지 않는다
보라를 텍스트로 쓸 땐 배경용 #9933FF(4.92:1)가 아니라 #760DDE(7.28:1)를 쓴다 — 코드잇이 변수를 둘로 나눈 이유다
깊이는 rgba(51,50,54,0.05) 인셋 1px 링(84회)과 1px rgba(51,50,54,0.1) 보더(57회)로. 외부 그림자는 rgba(0,0,0,0.12) 0 2px 18px(8회)까지만
다크 블록 #080C14은 AI·기업교육 서사 구간에만 끼운다(홈 y4193~4593, teams 2섹션, ai-edu 3섹션). 흰 텍스트 19.57:1
라운드는 8px 표준 · 대형 CTA 10px · 카드 16/20px · 배지 32px · 알약 9990px

Don't

#888893을 본문에 쓰지 않는다 — 흰 배경 3.51:1로 AA 미달이다(#99999B 2.84:1 ×114도 같은 문제)
#0674F4 위에 흰 텍스트를 작게 쓰지 않는다 — 4.36:1로 AA 미달이며, 이 사이트의 실제 결함이다(×12)
자간을 양수로 주지 않는다 — 38개 스타일 전부 음수이고 양수 단계가 하나도 없다
섹션 사이에 margin을 넣지 않는다 — 섹션은 맞닿고, 여백은 내부 padding(160/160 · 120/120 · 40/64)이 만든다
콘텐츠 폭을 사이트 전체에 하나로 고정하지 않는다 — 코드잇은 템플릿마다 다르다(1120 · 1296 · 1200 · 1044 · 996 · 752 · 1360)
그라디언트를 41종까지 벌리지 않는다 — 상위 2종(파랑→보라 91deg ×22, 파랑 세로 ×18)만 남기고 나머지는 페이지별 잔재다
모션에 300ms 초과 값을 남발하지 않는다 — 0.2s×401 · 0.3s×277이 주력이고 0.5s는 카드 transform(33회)·미디어 opacity(5회)에만 쓴다