[1.54.0] 모바일 사용성 전면 개편 기획서 — 기반 먼저, 스트랭글러 점진 교체

작업 일자: 2026-06-15 작업 브랜치: feature/1.54.0-redesign-spec

📋 작업 개요

작업 유형: 기획서(SPEC) 작성 (분석 + 전략 수립) 담당: jsg3121 + Claude

모바일 사용자 비중이 높은(55.6%) 포케코리아의 모바일 사용성 전면 개편 전략을 기획서로 정리했다. 코드 수정 없이, 현황 조사 → 전략 수립 → 단계별 로드맵을 문서화했다.

🔍 현황 조사 결과

• 라우트 38개는 page.tsx 레벨에서 전부 모바일/데스크톱 완전 분기됨 (UA 판별 + 파일 레벨 분리) — 페이지 분기 구조는 우수
• 진짜 문제는 공용 컴포넌트의 모바일 대응 미흡:
  • 🔴 Tag(타입 배지): 모바일 약 43×18px, 터치 권장 44px 미달 — 거의 전 페이지 영향
  • 🔴 StatChart(능력치 차트): 모바일 라벨 가독성·겹침 위험
  • 🟡 MobileTabBar: 아이콘 15px, 폰트 9px
• 디자인 토큰: 색상은 잘 토큰화됨, 간격/폰트/브레이크포인트는 임의값·혼용

🎯 전략

기반 먼저 → 화면 점진 교체(스트랭글러 패턴)

1. Phase 0 — 디자인 시스템 기반 정비 (전 페이지 동시 개선)
   • 4.1 토큰 체계 정비 (spacing/fontSize 확장 + 브레이크포인트 mobile:/desktop: 일원화) ← 첫 작업
   • 4.2 터치 타겟 표준 (최소 44px)
   • 4.3 공용 컴포넌트 모바일 대응 (Tag → StatChart → MobileTabBar)
2. Phase 1+ — 라우트별 스트랭글러 점진 교체 (홈 → 리스트 → 상세 순)
   • 사이클: ux-designer 비평 → ui-publisher 시안 → DesignSync 미리보기 → 구현 → 검증

🎨 디자인 원칙

• 기존 무드·톤 유지 (primary 파랑 계열, Gmarket Sans)
• 변경은 레이아웃·간격·터치 타겟·가독성에 국한, 브랜드 인상 유지

📁 변경 파일

파일	변경 내용
.claude/specs/mobile-redesign-plan.md	모바일 개편 기획서 신규