특화된 CLAUDE.md 컨텍스트 주입을 통한 Mobile CSS 구현 오류 최소화

Context

범용적인 LLM 기반 코드 생성 도구는 구체적인 모바일 타겟팅 기준과 제약 사항에 대한 컨텍스트 부족으로 인해 Desktop-first 접근 방식과 같은 일반적인 CSS 규칙을 생성함. 이로 인해 iOS 자동 줌, Touch Target 미달 등 실무적인 모바일 UI/UX 결함이 반복적으로 발생하는 한계가 존재함.

Technical Solution

• 태스크별 특화된 컨텍스트 파일을 구성하여 LLM의 Generalist 특성을 Specialist 수준으로 전환하는 전략 설계
• .claude/ 디렉토리 및 루트 경로의 CLAUDE.md를 활용한 Persistent Context 주입 메커니즘 적용
• Audit Workflow 정의를 통해 Viewport, Font-size, Overflow 등 분석 우선순위를 강제하여 상위 단계의 설계 오류 방지
• Playwright 및 Puppeteer MCP Server 연동을 통한 Headless Browser 기반의 자동화된 시각적 검증 루프 구축
• Mobile-specific CSS Snippet과 Edge-case(예: flex item의 min-width: 0)를 명시한 규칙 라이브러리를 통해 일관된 코드 생성 유도
• Landscape, Dark Mode, Text Zoom 등 다각적 검증 항목을 포함한 Test Checklist 기반의 완료 정의(DoD) 수립