feat(blog): 디자인 토큰 후속 — 액센트 대비 AA 확보 + 중립 토큰 확장 (#94)

[Malloc72P]

#94 멀티 페르소나 리뷰(FE/사용자/디자이너/면접관)에서 나온 미흡사항을 개선합니다.

🔴 액센트 대비 — WCAG AA 확보

활성 칩·현재 시리즈의 흰 글자가 indigo-500(#6366f1)에서 4.47:1 → AA(4.5) 미달이었습니다(기존 gray-700은 10.3:1이라 회귀였음).

• brand 스케일 도입: --color-brand(#6366f1, 비텍스트 액센트=포커스 링) + --color-brand-strong(#4f46e5, 텍스트 위 액센트)
• 텍스트 액센트(칩·현재 시리즈) → brand-strong (6.29:1, AA 통과). 포커스 링은 비텍스트(≥3:1)라 brand 유지

🟠 토큰 시스템 확장 (경계가 명확한 중립색)

값은 기존 Tailwind gray와 동일해 시각 변화 없이 단일 출처로 모음:

• --color-surface-muted(gray-50) → 카드 배경(post-card hover/네비게이터/추천 카드)
• --color-border(gray-200) → 카드/모달 경계
• --color-border-subtle(gray-100) → 옅은 구분선(소개 카드/검색 결과)
• raw 중립색(bg-gray-50/border-gray-100/200) 잔존 0

범위 외(별도 처리)

• @theme 부채 + muted 텍스트 전면 토큰화 → [Build/Design] Tailwind v4 @theme가 Turbopack 빌드에서 토큰/유틸을 생성하지 않음 → 토큰 시스템 완성 #120 으로 분리. arbitrary value가 verbose하고 @theme 해결 시 재작업이라, 깔끔한 유틸로 한 번에 하는 게 맞아 보류.
• 액센트 편중(CTA/링크 확장) — 이번 범위 제외(지시).

검증

• 빌드 CSS에 --color-brand-strong:#4f46e5 + 모든 토큰 유틸 생성 확인
• 스크린샷 육안 확인(현재 시리즈 칩이 더 진한 인디고, 카드/경계 동일)
• 단위 81 / E2E 7(로컬 dev + CI=true 프로덕션) / lint 0 / tsc clean
• 최신 main(fix(blog): #118 본문 풀폭·인라인 코드 회색 배경·모바일 줄간격 복원 #119 본문 풀폭·인라인 코드 수정 포함) 위에 rebase — #119와 파일 교집합 0, 원복 없음

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
blog	Ignored	Preview	Jun 29, 2026 11:38pm

[Malloc72P]

🔍 코드 리뷰 (self-review)

리뷰의 🔴(대비)·🟠(중립 토큰)을 반영했고, 검증상 별도로 고칠 미흡점은 없습니다. 의도적 결정만 기록합니다.

의도적 결정

• brand 2-step 스케일: brand(#6366f1, 비텍스트=포커스 링) / brand-strong(#4f46e5, 텍스트 위). 두 인디고가 인접하지 않아(링 vs 채운 칩) 시각 충돌 없음. 단일 인디고(600)로 통일하는 선택지도 있으나, 대비 목적이 명확한 2-step이 더 의미적이라 유지.
• 중립 토큰은 경계가 명확한 것만(surface/border) 적용, muted 텍스트(~20곳)는 #120으로 분리: arbitrary value가 verbose하고 @theme 해결 시 재작업이라, 깔끔한 유틸로 한 번에 하는 게 맞음.
• 값은 기존 gray와 동일 → 시각 변화 없이 단일 출처화(회귀 0).

#119와의 관계 (중요)

• 어제 병합된 fix(blog): #118 본문 풀폭·인라인 코드 회색 배경·모바일 줄간격 복원 #119(본문 풀폭·인라인 코드 회색 배경·모바일 줄간격)는 next.config.mjs·post-detail.module.scss만 변경.
• 이 PR은 색 토큰(global.css + 카드/뱃지 .tsx)만 변경 → 파일 교집합 0, 원복 없음. 최신 main(fix(blog): #118 본문 풀폭·인라인 코드 회색 배경·모바일 줄간격 복원 #119 포함) 위로 rebase하여 결합 검증 완료.

검증

• 빌드 CSS에 --color-brand-strong:#4f46e5 + 모든 토큰 유틸 생성 / 스크린샷 육안 확인
• 단위 81 / E2E 7(로컬 + 프로덕션 빌드) / lint 0 / tsc clean