스파르타코딩클럽
%3B%22%20viewBox%3D%220%200%2016%2016%22%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cuse%20href%3D%22%23svg138056249_1462%22%3E%3C%2Fuse%3E%3C%2Fsvg%3E)
흰 지면에 잉크 #15171A와 빨강 #FA0030 한 점 — 국문은 50px에서 멈추고, 화면을 채우는 건 26px/800 카드다.
개발 교육 서비스의 사이트로, 한 도메인 안에 마케팅·앱·블로그 셸 세 개가 서로 다른 헤더와 푸터를 달고 공존합니다. 흰 지면에 잉크색으로 쓰고 빨강은 '수강신청하기' 버튼 한 곳에만 얹습니다. 크게 쓰는 제목은 거의 없고 — 국문 히어로는 50px 한 건뿐입니다 — 화면을 채우는 것은 26px 굵은 카드 제목이 한 값으로 통일돼 반복되는 그리드라, 카드·상품 상세 조판 참고로 강합니다. 반대로 라운드가 18종, 브레이크포인트가 33개로 흩어져 있고 대비가 기준에 못 미치는 조합도 많아, 시스템 값을 그대로 가져오면 안 됩니다.
https://spartaclub.krColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 400 / 500 / 600 / 700 / 800display·heading·body·ui·caption, 한글 100%
Gmarket Sans TTF · 700장식 (사실상 미사용)
Noto Sans · 로드만 됨 (렌더 0)
EBSHunminjeongeum / Dokrip · 로드만 됨 (렌더 0)
Apple SD Gothic Neo / AppleMyungjo / Apple Color Emoji / Arial · 400fallback
Type Scalepx 기준은 layout
hero50px · 700 · 1.32
다람쥐 헌 쳇바퀴
h140px · 700 · 1.15
다람쥐 헌 쳇바퀴
h232px · 700 · 1.38
다람쥐 헌 쳇바퀴
h326px · 800 · 1.2
다람쥐 헌 쳇바퀴
h422px · 700 · 1.45
다람쥐 헌 쳇바퀴
body-lg20px · 400 · 1.45
다람쥐 헌 쳇바퀴
body16px · 700 · 1.5
다람쥐 헌 쳇바퀴
ui15px · 700 · 1.47
다람쥐 헌 쳇바퀴
body-sm13px · 500 · 1.54
다람쥐 헌 쳇바퀴
label12px · 500 · 1.67
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 계열 4파일이 한글 82,056글리프의 99.91%를 그린다 — Pretendard 50,865(62.0%) · Pretendard Medium 23,088(28.1%) · Pretendard ExtraBold 6,728(8.2%) · Pretendard SemiBold 1,304(1.6%). 나머지 71글리프는 Apple Color Emoji 62 · Apple SD Gothic Neo 5 · Gmarket Sans TTF 2 · AppleMyungjo 1 · Arial 1. 전부 self-host(static.spartacodingclub.kr)이고 가변 폰트가 아니라 9웨이트 정적 27파일이다 |
| hangulWeights | 5단이 전부 실렌더된다 — 400 Pretendard 44,644 · 500 Pretendard Medium 22,241 · 600 Pretendard SemiBold 1,026 · 700 Pretendard 6,221 · 800 Pretendard ExtraBold 6,728. 단 weight 400 구간에서 Pretendard Medium 847 · Pretendard SemiBold 266글리프가 함께 그려진다(합 1,113) — 웨이트를 font-weight가 아니라 패밀리 이름으로 고르기 때문이다 |
| body | 앱 셸 13px/500 lh1.54 자간 0(55스타일 중 최다 10건) · 블로그 아티클 20px/400 lh1.45 자간 0 · 커뮤니티 목록 본문 13px |
| sub | 상품 상세 리드 16px/700 lh1.50 · 블로그 아티클 19px/400 lh1.60(인용 박스). 홈 히어로 부제는 layout이 홈을 한 섹션으로 잡아 미확인 |
| label | GNB 1차 13px(마케팅 셸은 font-weight 400 + 패밀리 'Pretendard Medium', 앱·블로그 셸은 500 + 'Pretendard') · GNB 2차 16px/700 · 링크 12px/500 lh1.67 12건 · 캡션 12px/400 lh1.50 |
| mixing | 국영문을 Pretendard 한 계열로 섞는다 — 라틴 1,520글리프도 전부 Pretendard 계열이 그리고(Medium 617 · SemiBold 545 · Pretendard 324 · ExtraBold 22 · Gmarket Sans TTF 12) 영문 전용 디스플레이 서체가 없다. 라틴 대 한글 비율이 1,520 대 82,056(1.9%)이라 사실상 국문 전용 조판이다. 국영문 혼합 제목('ChatGPT, 내 필요에 딱 맞춰 더 똑똑하게 활용하기' 32px/700 · '망한 사진, AI로 부활시키기 – 나노바나나(Gemini) 활용법' 22px/700)을 그대로 한 줄에 넣는다. 예외는 아웃라인 버튼 '블로그 구경하기' 하나로, 13.33px/400 Arial로 떨어진다 |
| hangulHeadings | 있다. 홈 히어로 'AI 시대,' 50px/700 lh1.32 자간 −1px(−2.0%)이 1440 실측 최대 국문 제목이고, 48px 이상은 10페이지 통틀어 이 1건뿐이다. 다음이 블로그 아티클 소제목 40px/700 lh1.15 자간 −0.6px 3건(blog-id §10·§21·§30, 92px 밴드), 상품 상세 섹션 제목 32px/700 lh1.38 자간 0 5건, 블로그 카드 제목 26px/800 lh1.20 자간 −0.26px 40칸이다. raw(1920)에는 52px/800 lh1.05 자간 −0.78px 2건이 더 있는데 블로그 아티클 h1로 추정되며 1440 layout에서 섹션 헤딩으로 잡히지 않아 미확인이다 |
| verdict | 국문 히어로 레퍼런스로는 제한적으로만 유효하다 — 50px 1건이 전부고 그마저 홈 섹션 분할 실패로 부제·CTA 조판을 못 읽는다(같은 도메인의 코드잇은 48px↑ 국문 제목 14건, 68px 2건). 반대로 국문 카드·상세 조판 레퍼런스로는 강하다: 26px/800 자간 −0.26px 카드 제목 40칸이 한 값으로 통일돼 있고, 상품 상세 32→22→16→15px 네 단과 244×3+20×2=772 그리드가 산술로 맞는다. 자간·라운드·브레이크포인트 규칙은 이식 대상이 아니다 — 자간은 55스타일 중 46건이 0에 나머지가 네 규칙으로 갈리고, 라운드 18종·브레이크포인트 33개다. 웨이트를 패밀리 이름으로 고르는 방식(font-weight 400 + 'Pretendard Medium')도 따라 하지 말 것 — weight 400 노드 1,113글리프가 실제로는 Medium·SemiBold로 그려져 CSS 값과 화면이 어긋난다 |
| rendered | Pretendard ×28642 · Pretendard Medium ×15006 · Pretendard ExtraBold ×1642 · Pretendard SemiBold ×767 · Apple SD Gothic Neo ×10 · Gmarket Sans TTF ×1 |
영문 · Latin국문과 동일
| latinFont | Pretendard 21,917글리프(99.9%) · Gmarket Sans 13글리프(0.1%) · Apple Color Emoji 4글리프(0.0%) · Arial 1글리프(0.0%) |
| latinWeights | 실측 페이스 Medium · ExtraBold · SemiBold |
| share | 라틴 21,935글리프 / 한글 46,068글리프 — 지면의 32.3%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: hero 50px/700 · h1 40px/700 · h2 32px/700 · h3 26px/800 · h4 22px/700 · body-lg 20px/400 · body 16px/700 · ui 15px/700 · body-sm 13px/500 · label 12px/500 |
| mixing | 국영문 혼용 노드 1,107개(전체 2,632개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 32.3%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.9%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · Gmarket Sans |
| rendered | Pretendard ×11488 · Pretendard Medium ×9642 · Pretendard ExtraBold ×529 · Pretendard SemiBold ×258 · Gmarket Sans TTF ×13 · Apple Color Emoji ×4 · Arial ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Max width | 1152px | |
| Section gap | 섹션 사이 여백 0 — 섹션이 서로 맞닿는다(상품 상세 y794→1751→2871→3779→4079→4629→5223→5557). 숨은 전부 내부 padding으로 준다: 100/100(상품 상세 8섹션 전부 | |
| Header | 96px fixed | |
| Content Width By Shell | 마케팅 셸 1152(홈 후보 1152×40 · 1200×19 · 1008×8 · 1360×7) · 카탈로그 1152 · 수강후기 820(후보 820×44 · 780×19 · 900×11) · 앱 셸 상품 상세 772(후보 772×57~69) · 커뮤니티·이벤트 1152 · Framer 블로그 인덱스 1200 · 블로그 아티클 720(후보 720×80~86) | |
| Grid Product | 혜택 카드 3열 244×280 gap 20 → 244×3+20×2 = 772 (콘텐츠 폭과 정확히 일치) · 핵심 스킬 2열 376×400 gap 18 r12 bg #0D0E11 → 376×2+18 = 770 · 실습 결과물 772×534 전폭 4장 | |
| Grid Blog | 아티클 카드 3열 376×366 gap 36 → 376×3+36×2 = 1200 (콘텐츠 폭과 일치). 인덱스에서는 카드 높이가 391·409·423 세 값으로 흔들린다 | |
| Grid List | 커뮤니티 Q&A 10행 680×197(일부 680×221), 콘텐츠 1152의 59% · FAQ 아코디언 772×79 4~5행 · 커리큘럼 674×61 4행 · 블로그 본문 불릿 652×32 · 771~983×36 | |
| Card Padding | 이벤트 카드 254px 높이 · 상품 상세 섹션 padding 100/100 · 블로그 인용 박스 17/17 | |
| Button Padding | 16×20 (r38, 15px/700 주 CTA) · 11×14 (r8, 13.33px/400 아웃라인) · 10×12 (r6, 12px/400) · 8×12 (r4, 13px/600) · 8×64 (r8, 블로그 배너 버튼) | |
| Shell Variants | 헤더 3종 — 96px fixed 투명 + nav 9라벨(홈·카탈로그·수강후기) · 36px fixed 흰색 + nav 0라벨(상품 ×2·커뮤니티·이벤트, 본문 앞에 별도 90px 빈 스트립이 온다) · 178px static 투명(블로그 ×3). 푸터 3종 — 549px 8그룹 / 586px 4그룹 / 없음(블로그 3페이지 전부 footer null) | |
| Off Grid | 34.56px ×63 · 64.8px ×30 — 8px 격자 밖 값이 93회. 64.8 = 80×0.81, 34.56 = 64.8×0.5333으로 스케일 파생 추정(미확인) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| xs | 2px | 2회 · div |
| xs | 3px | 18회 · 카드 |
| sm | 4px | 40회 · 작은 버튼('더 알아보기' 8×12 r4) |
| sm | 6px | 38회 · 링크 버튼('기업교육 알아보기' 10×12 r6) |
| button | 8px | 55회 · 버튼 표준('더 많은 질문 보기'·'블로그 구경하기'·'발급 가이드 확인하기'·'자세히 보기') |
| — | 10px | 23회 · div·img |
| standard | 12px | 150회 · 카드·썸네일 표준(다크 카드 376×400 포함) |
| large | 16px | 60회 · 링크 카드·큰 썸네일 |
| large | 20px | 35회 · div·img |
| xl | 30px | 17회 · iframe(영상 프레임) |
| pill-cta | 38px | 2회 · 주 CTA '수강신청하기'(높이 ~54px라 알약에 가깝다) |
| xxl | 40px | 47회 · 큰 패널·캐러셀 프레임 |
| circle | 50% | 15회 · 아바타·아이콘 |
| circle | 100% | 21회 · 이미지 원형 마스크 |
| pill | 999px | 12회 · 칩·태그 (999px 7 + 99px 3 + 100px 2) |
Guidelines
Do
- 국문 본문은 Pretendard 13px/500 lh1.54 자간 0(앱 셸, 스타일 10건으로 최다)이나 20px/400 lh1.45(블로그 아티클)로 잡는다 — 자간을 주지 않는 것이 이 사이트의 기본값이다(55스타일 중 46건)
- 액션은 빨강 #FA0030 한 색을 버튼 배경으로만 쓴다(padding 16×20, radius 38px, 텍스트 #FFFFFF 15px/700)
- 그리드는 콘텐츠 폭에 산술로 맞춘다 — 상품 상세 244×3+20×2=772, 블로그 376×3+36×2=1200
- 섹션은 붙이고 숨은 내부 padding 100/100으로 준다(상품 상세 8섹션 전부). 카드 목록만 세로 스텝 294px(254+40)로 반복한다
- 국문 카드 제목은 26px/800 lh1.20 자간 −0.26px 한 값으로 통일한다 — 블로그 40칸이 전부 이 값이다
- 행간은 크기에 반비례로 벌린다(52px 1.05 → 26px 1.20 → 20px 1.45 → 16px 1.50 → 13px 1.54 → 12px 1.67)
- 모션은 0.4s(45회)·0.3s(28회)에 ease-in-out(51회)이나 cubic-bezier(0.36,0,0,1)(32회) 둘 중 하나만 쓴다
Don't
- 브라우저 기본 링크색 #0000EE를 남기지 않는다 — 438회 검출, wcag 쌍 126건이고 버튼 3종('기업교육 알아보기'·'발급 가이드 확인하기'·'자세히 보기')의 텍스트 색으로도 잡힌다
- 회색을 본문에 쓰지 않는다 — AA 미달 쌍이 #A4A7B0 2.4:1 187건 · #858893 3.54:1 149건 · #D4D4D4 1.48:1 24건으로 합계 360건이다. AA를 통과하는 마지막 회색은 #666874(5.53:1, 11건)뿐
- 브랜드 빨강을 텍스트에 쓰지 않는다 — #FA0030 4.11:1(34건) · #E8344E 4.17:1(16건) 둘 다 흰 배경에서 AA 미달이다
- 빨강을 두 개 두지 않는다 — semantic.primary는 #FA0030(65회)인데 PWA manifest theme_color는 #E8344E(128회)로 다른 색이다
- 라운드를 18종으로 늘리지 않는다(2·3·4·6·8·10·12·16·20·30·34·38·40·50%·99·100·100%·999px). 12px 150회가 최다지만 16·8·40·4·6이 38~60회로 붙어 있어 표준이 서 있지 않다
- 브레이크포인트를 33개로 늘리지 않는다(0~1280px). 1px 차이로 갈린 쌍만 8쌍이다 — 1200/1199 · 1024/1023 · 1001/1000 · 992/991 · 820/819 · 768/767 · 601/600 · 400/399
- 폰트 파일을 125개 부르지 않는다 — 실제로 글자를 그리는 건 Pretendard 계열 4파일(99.91%)뿐이고 Noto Sans 17파일 · 눈누 2파일(EBS훈민정음·독립)은 렌더 0글리프, Gmarket Sans 6파일은 14글리프다
- 8px 격자 밖 34.56px(63회)·64.8px(30회)를 재현하지 않는다 — 스케일 파생 잔재로 보인다(원인 미확인)
