변경 기록

4명 cold reviewer (Atomic + Nielsen/RUI + WCAG/ARIA + Gestalt/IA) 3 라운드로 평균 8.80 → 9.49. Layout·spacing·motion 토큰 일관성 마무리.

• Changed spacing 토큰 사이트 전반 200+곳 → var(--space-*) (15개 페이지, Layout 포함). 4-px grid 정렬 완성
• Changed Layout.astro 9개 transition → var(--duration-*) var(--easing-standard)
• Changed Layout/projects/status/posts/about/tools radius 라ル(8/10/12/20/0.25rem/0.5rem 등) → --radius-md/lg/2xl
• Changed projects.astro transition: all 0.2s, color 0.2s 등 → 토큰 (21개)
• Added Chip에 size?: 'sm' | 'md' prop + .chip-sm 변형 (projects 태그 size="sm" 호출 silent drop 수정)
• Added card-interactive($lift) mixin — figure-ground elevation + :has(focus-visible) parity + prefers-reduced-motion 폴백
• Added --scrim 토큰 (모달/드로어 backdrop, rgba(0,0,0,0.5) 흡수)
• Added --red-600/--red-700 primitive + --state-error → red-700 (light: 4.5:1 small text AA), dark: #FCA5A5
• Added _tokens.scss container scale 통합 (xs/sm/md/xl/wide + 레거시 alias)
• Changed Layout 네비 — 주요 텍스트 nav vs 유틸리티 아이콘 cluster 사이에 .nav-divider 추가 (Gestalt common region)
• Changed index .post-item 카드 hover/focus elevation (shadow-md → lg + translateY)
• Changed posts/index .post-item 행 hover background-color + focus-visible parity
• Changed notes/index filter-btn raw transition: all 0.2s → 토큰
• A11y projects 카테고리 필터 — role="group" + 동적 aria-pressed (SR 토글 상태 노출, SC 4.1.2)
• A11y CommentSection h3 Comments → h2 (heading hierarchy 정상화)
• A11y status/[slug] breadcrumb nav aria-label="Breadcrumb"
• A11y about .name-kr span에 lang="ko" (SC 3.1.2 Language of Parts)
• A11y --state-error 라이트 테마 red-500(3.76:1) → red-700(4.5:1+) — deleteBtn 등 small text AA 통과
• A11y status/projects 데코 SVG 9개에 aria-hidden="true" 추가 (SC 1.1.1)
• A11y .nav-divider role/aria-orientation 제거 (aria-hidden과 모순 해소)

블로그 전체에 디자인 시스템 적용. 9 라운드 cold review(Atomic Design + Nielsen + WCAG 2.2 AA)로 평균 5.40 → 9.10.

• Changed 레거시 --gray-N 250+곳을 --text-*/--surface-*/--border-* semantic 토큰으로 치환 (about, projects, contact, posts/[slug], notes/[slug], reviews/[slug], status/*, Layout, CommentSection 등)
• Changed status 페이지 56곳 hex(#22c55e/#f59e0b/#ef4444/#60a5fa/#d97706/#a78bfa) → --state-success/warning/error/info 토큰
• Changed projects.astro hex(#22c55e/#eab308/#6b7280) → --state-*/text-muted 토큰
• Changed Layout.astro hardcoded rgba shadow (3개) → --shadow-sm/md/lg 토큰
• Changed status 펄스 애니메이션 rgba → color-mix(in srgb, var(--state-*) ..., transparent) 패턴
• Changed posts/[slug] code-inline #d63384 → var(--state-error)
• Changed CommentSection 하드코딩 '#fff' 3곳 → var(--text-on-accent) (다크 모드 2.5:1 대비비 → AA 통과)
• Changed scroll-to-top, deleteBtn 등 → semantic token 사용
• Changed 14개 페이지 raw font-size (~150개) → typography 믹스인 (display-1/2, heading-1/2/3, body-lg/body/sm, caption, eyebrow) 적용
• Changed Atomic 컴포넌트 Chip/PostCard/Note의 raw rem() → 믹스인 (atom 레이어 일관성)
• Added --measure: 38rem 토큰 신설 (한글 본문 45-75자 CPL 가이드)
• Added status/index + status/[slug] severity/status pill → <Badge tone weight> (디자인 외부에서 첫 Badge 소비)
• Added 4개 리스트 페이지(index/posts/notes/reviews) 필터 + 태그 → <Chip as="button" pressed> + <Chip>
• Added about.astro skill-tag (3개소) → <Chip>
• Added 404 페이지 재작성 — Korean voice + Search 검색 어포던스 + 다중 복구 링크 + Button-style 토큰
• Added _global.scss body에 word-break: keep-all + overflow-wrap: anywhere 전역 적용 (한글 어절 분할 방지)
• Changed posts/notes/reviews/status detail의 .article-content/.incident-body에 max-width: var(--measure) + margin-inline: auto 적용
• Changed 한글 본문 line-height 1.7~1.85 일관 적용
• A11y 4개 리스트(index/posts/notes/reviews) 중첩 anchor (<a>가 <h2> wrap) → stretched-link 패턴 (heading-in-link 제거 + 카드 전체 hit area 유지)
• A11y 4개 empty-filter 메시지 → role="status" aria-live="polite"
• A11y SearchModal APG Combobox 1.2 패턴 (role=combobox, aria-controls, aria-expanded, aria-activedescendant, aria-autocomplete, listbox id, option ids, focus-trap에서 option 제외, status를 listbox 밖으로 분리, Close 버튼 추가)
• A11y Drawer: role="dialog" + aria-modal="true" + aria-controls=drawer + 배경 main inert 토글 + 햄버거 aria-label 동적 (Menu ↔ Close menu)
• A11y Projects tabs: APG Tabs 키보드 패턴 (roving tabindex + ArrowLeft/Right/Home/End + aria-labelledby + tabindex=0 on panels)
• A11y CommentSection: 모든 input/textarea에 aria-label, Reply/Edit/Delete 버튼 disambiguating aria-label, Cancel/Save type="button", 인라인 버튼 min-height 24×24px (WCAG 2.5.8), deleteBtn에 underline+bold (color 단독 의존 제거)
• A11y Layout 모바일 로고 aria-label="Home" (heading display:none 시 accessible name 보존)
• A11y about.astro h4 → h3 (WCAG 2.4.6 sequential heading hierarchy)
• A11y contact 이모지 아이콘 (3종) aria-hidden="true"
• A11y status 페이지 데코 dots (banner/service/tag) aria-hidden="true"
• A11y status banner role="status" + aria-live="polite" (동적 상태 알림)
• A11y reviews/[slug] 평점 패턴: aria-hidden visual + sr-only text (aria-label on <p> 안티패턴 제거)
• A11y 리스트 페이지 카드 썸네일 alt="" (제목 링크 옆에 있어 데코로 처리, SR 중복 announce 제거)
• Changed Voice 8번 원칙 추가 — UI 라벨은 짧고 영문 우선, 본문은 한글 (Voice 페이지 자체가 그 예시)

디자인 시스템 첫 버전. 토큰 레이어와 핵심 컴포넌트를 정리.

• Added Primitive + Semantic 2-레이어 토큰 체계 (text, surface, border, accent)
• Added Foundation 토큰 — space(11), radius(6), shadow(5), motion(4d+4e), z-index(7)
• Added Typography 9단계 스케일 (display/heading/body/caption/label/code)
• Added Pretendard + Fira Code 폰트 패밀리 토큰화
• Added Chip / Button / PostCard / Note 4개 공유 컴포넌트
• Added State 컬러 (success/warning/error/info) + bg 변형
• Added /design 매거진 표지 스타일 spec doc
• Changed Primary 색을 #64B5F6 → #2563EB로 변경 (대비비 2.4:1 → 5.2:1, WCAG AA pass)
• Changed Body weight 400 → 500 (한글 가독성 강화)
• Changed 의미 토큰을 color-mix()로 텍스트 색에서 파생하는 패턴 도입
• A11y WCAG AA 대비비 검증, focus-visible ring 토큰화
• A11y prefers-reduced-motion 전역 처리