AI한테 디자인 시스템 전면 교체 시켰더니 — 321개 하드코딩 색상이 사라졌다

같은 "파란색"인데 파일마다 다른 hex 코드

로또 분석 앱을 7개월째 만들고 있는데, 다크 모드에서 색상이 이상하다는 걸 발견했습니다. 예측 페이지의 파란색은 #4299E1, 결과 페이지는 #3182CE, 대시보드는 #007BFF... 전부 "파란색"인데 미세하게 다른 거예요.

AI한테 기능별로 "이 페이지 만들어줘"를 반복하다 보니 생긴 문제였습니다. AI는 매번 새 대화에서 비슷하지만 다른 색상을 골라 쓰거든요. 파일이 누적될수록 색상 불일치가 커지는 구조였습니다.

"고쳐줘" 대신 "먼저 감사해줘"

처음에는 "색상 통일시켜줘"라고 할 뻔했습니다. 근데 어떤 파일에 어떤 색상이 있는지도 모르면서 고칠 수가 없잖아요. 그래서 프롬프트를 바꿨습니다.

Before — 초급 프롬프트:

다크 모드 색상이 안 맞아. 고쳐줘.

After — 중급 프롬프트:

당신은 프론트엔드 디자인 시스템 감사 전문가입니다.

[맥락]
- Next.js 15 + Tailwind CSS + shadcn/ui 기반 프로젝트
- 7개월간 기능 중심으로 개발, 디자인 시스템은 별도 관리 안 함
- 다크 모드에서 색상 불일치 발생 중

[요청]
모든 소스 파일을 스캔해서 다음 항목을 감사해주세요:
1. 하드코딩된 색상값 (hex, rgba, 임의 Tailwind 값)
2. dark: 접두사로 별도 지정된 색상 패턴
3. outline-none을 쓰면서 focus-visible 대체가 없는 곳
4. 숫자를 표시하는데 tabular-nums가 없는 곳

각 항목별로 파일명, 라인 번호, 현재 값, 권장 수정안을 테이블로 정리해주세요.

"고쳐줘"와 "감사해줘"의 차이는 결정적이었습니다. 감사 결과로 나온 건 572줄짜리 리포트. 문제의 실체가 보이니까 그 다음이 가능해진 거죠.

572줄 감사 리포트에서 드러난 실체

감사 리포트를 열었을 때 좀 충격받았습니다. "잘 만들고 있다"고 생각했는데, 수치로 보니까 현실이 다르더라고요.

감사에서 찾아낸 이슈 분포:

| 영역 | 파일 수 | 이슈 수 | 대표 사례 |
|------|---------|---------|----------|
| 예측 페이지 | 5개 | 112개 hex | dark:bg-[#4299E1] 등 별도 다크모드 색상 |
| 결과 페이지 | 6개 | 111개 hex | 등수별 색상이 파일마다 다른 값 |
| 통계 페이지 | 4개 | 40개 hex | 차트 색상 하드코딩 |
| 대시보드+공유 | 15개 | 52개 hex | 카드/배경/테두리 색상 불일치 |
| 접근성 | 전체 | 155개 | outline-none + focus 대체 없음 |

합계 321개 하드코딩 색상, 155개 접근성 이슈. 이걸 사람이 하나씩 고치면 끝이 없었을 겁니다.

Phase 0~5 — 프로덕션 운영 중 리뉴얼 계획

문제 목록이 나왔으니 실행 계획이 필요했습니다. 여기서 핵심은 "프로덕션이 돌아가는 중"이라는 제약조건이었거든요.

당신은 프론트엔드 리뉴얼 프로젝트 매니저입니다.

[현재 상태]
- 572줄 감사 리포트 완료 (321개 색상 + 155개 접근성 이슈)
- 프로덕션 운영 중 (사용자가 매일 접속)

[제약조건]
- 한 번에 전부 바꾸면 프로덕션이 터질 수 있음
- 각 Phase는 독립적으로 배포 가능해야 함
- Phase별로 커밋을 분리해서 롤백 가능하게
- CSS 변수 시스템이 이미 globals.css에 일부 정의되어 있지만 사용되지 않음

[요청]
이슈를 우선순위별로 Phase를 나눠주세요.
각 Phase의 작업 범위, 영향 파일 수, 위험도를 정리해주세요.

AI가 짜준 6단계 계획:

| Phase | 작업 | 핵심 내용 |
|-------|------|----------|
| 0 | 긴급 정리 | 테스트 페이지 4개 삭제, prefers-reduced-motion 추가 |
| 1 | 토큰 기반 구축 | Slate neutral + 12색 차트 팔레트 + semantic 색상 정의 |
| 2 | 코어 컴포넌트 | 사이드바(240px/56px) + Cmd+K 팔레트 + 카드 통일 |
| 3 | 321개 색상 제거 | 31개 파일, 1,480줄 삭제 + 404줄 추가 |
| 4 | 차트+API 정리 | 스파크라인, 숫자 애니메이션, 실험 API 9개 삭제 |
| 5 | 접근성+SEO | KWCAG 포커스 표시기, OG 이미지 자동 생성 |

Phase 3 — 31개 파일에서 1,480줄을 삭제한 날

가장 큰 Phase 3를 실행할 때의 프롬프트입니다.

당신은 CSS 마이그레이션 전문가입니다.

[현재 상태]
- Phase 1에서 CSS 변수 토큰 시스템 완성됨:
  - neutral: Slate 계열 (--neutral-50 ~ --neutral-950)
  - semantic: --success, --warning, --error, --info
  - chart: 12색 팔레트
  - lotto-ball: 번호대별 색상 + glow shadow

[변환 대상]
- 예측 5개 파일: 112개 hex
- 결과 6개 파일: 111개 hex + 등수 색상
- 통계 4개 파일: 40개 hex
- 대시보드+공유 15개 파일: 52개 hex
- 고아 페이지 2개: /predict/simple, /predict/pattern (삭제 대상)

[변환 규칙]
- dark:bg-[#4299E1] → bg-primary (CSS 변수가 라이트/다크 자동 전환)
- dark:text-[#48BB78] → text-success
- dark:border-[#F6E05E]/20 → border-warning/20
- 로또볼 색상: 번호대별 전용 토큰 (--lotto-1to10 ~ --lotto-41to45)

[요청]
31개 파일의 모든 임의 색상값을 토큰으로 교체해주세요.
고아 페이지 2개와 불필요 컴포넌트(SimplePatternSelector, PatternSelector)도 삭제해주세요.

Before:

<div className="border-primary/30 dark:border-[#4299E1]/30 bg-primary/5 dark:bg-[#4299E1]/5">
  <span className="text-green-400 dark:text-[#48BB78]">+12.5%</span>
</div>

After:

<div className="border-primary/30 bg-primary/5">
  <span className="text-success">+12.5%</span>
</div>

dark: 접두사가 통째로 사라졌습니다. CSS 변수가 라이트/다크를 자동 처리하니까 코드가 절반으로 줄어든 거예요. 결과: 1,480줄 삭제, 404줄 추가. 삭제가 추가의 3.6배라는 건, 그만큼 중복이 심했다는 뜻이죠.

토큰 설계에서 놓칠 뻔한 것 — 로또볼 glow

Phase 1에서 토큰을 설계할 때 한 가지 피드백을 줬습니다. AI가 처음 만든 토큰에는 로또볼 색상만 있었는데, 실제 UI에서는 볼 주변에 glow 효과가 있거든요.

[피드백]
토큰에 로또볼 색상만 정의했는데, 실제 UI에서는
볼 주변에 그림자(glow) 효과를 사용하고 있습니다.

[요청]
각 번호대별 색상에 --shadow-glow-* 변수도 추가해주세요.
예: --shadow-glow-1to10: 0 0 12px rgba(금색, 0.4)

이런 디테일은 AI가 알 수 없습니다. 실제 화면을 보고 있는 사람만 발견할 수 있거든요. 감사 리포트가 현황 파악을 해줬다면, 디테일 보강은 사람 몫이었습니다.

Phase 3 결과, 수치로 보면

| 항목 | Before | After |
|------|--------|-------|
| 하드코딩 색상 | 321개 (31파일) | 0개 |
| dark: 접두사 | 120개+ | CSS 변수 자동 전환 |
| CSS 변수 커버리지 | 일부 정의만 | 40+ 시맨틱 토큰 + glow |
| 접근성 포커스 | outline-none 155건 | KWCAG 포커스 표시기 |
| 고아 페이지 | 2개 방치 | 삭제 |
| 불필요 컴포넌트 | 2개 (PatternSelector) | 삭제 |
| backdrop-blur | 51개 카드 | 0개 (GPU 절약) |

가장 체감이 컸던 건 다크 모드입니다. 이전에는 새 페이지를 만들 때마다 dark:bg-[#...]을 일일이 지정해야 했는데, 이제는 bg-primary만 쓰면 라이트/다크가 자동 전환되거든요. 유지보수 비용이 확 줄었습니다.

AI한테 대규모 리팩토링을 시킬 때 "고쳐줘"부터 시작하면 뭘 고쳐야 하는지도 모른 채 수정이 시작됩니다. 감사 리포트 → 분류 → Phase별 계획 → 실행 순서로 가니까, 321개 색상을 1주일 만에 정리할 수 있었습니다.