개요

이 문서는 Artify 프로젝트 개발 과정에서 AI 도구를 어떻게 활용했는지 기록합니다. 프론트엔드 개발자로서 AI를 효과적으로 활용하여 개발 생산성을 높이고, 코드 품질을 향상시킨 사례들을 정리합니다.

사용 도구

Claude Code (주력)

AI 기반 CLI 코딩 어시스턴트로, 터미널에서 직접 코드 작성 및 분석을 수행합니다.

주요 기능 활용

• MCP (Model Context Protocol): 외부 도구 연동
  • Supabase MCP: DB 스키마 조회, 쿼리 실행
  • Playwright MCP: E2E 테스트, 스크린샷
  • Context7: 최신 라이브러리 문서 조회
• Custom Skills: 프로젝트 맞춤 워크플로우
  • moai-domain-frontend: React/Next.js 패턴
  • moai-workflow-testing: TDD 워크플로우
• Specialized Agents: 복잡한 작업 위임
  • expert-frontend: UI 컴포넌트 구현
  • expert-debug: 에러 분석 및 해결
  • manager-tdd: 테스트 주도 개발

설정 파일

• .claude/settings.json: Claude Code 전역 설정
• CLAUDE.md: 프로젝트별 지시사항 (Alfred 오케스트레이터)
• .moai/: MoAI-ADK 설정 (Skills, Agents, Commands)

AI 활용 전략

1. 코드 생성 및 리팩토링

컴포넌트 생성

• Atomic Design 패턴에 맞는 컴포넌트 구조 생성
• Props 타입 정의 + 접근성(a11y) 속성 포함
• Storybook 스토리 자동 생성