-
Notifications
You must be signed in to change notification settings - Fork 0
Agent 개발 워크플로우
jj1kim edited this page May 28, 2026
·
1 revision
Claude Code를 주 Agent로 활용하여 개발을 진행한다. 작업 단위를 명확히 쪼개고, 각 작업마다 일관된 프롬프트 패턴을 사용하여 효율적인 개발 흐름을 만든다.
프로젝트를 다음과 같은 기능 단위로 분리하여 개발한다:
| 기능 단위 | 포함 범위 |
|---|---|
| 프로젝트 초기 설정 | Next.js 프로젝트 생성, Tailwind/TypeScript 설정, DB 스키마, 디렉토리 구조 |
| 스케줄 CRUD | 스케줄 생성/로그인 API + Landing 페이지 UI |
| 캘린더 | 여행 날짜 선택 UI + API |
| 위시리스트 | 5개 카테고리 CRUD API + 패널 UI + 카테고리별 폼 |
| 타임라인 | 그리드 렌더링 + Overview/Day Detail + 이벤트 블록 표시 |
| 일정 확정 | 드래그 배치 모달 + 시간 겹침 검증 + 영업시간 제약 |
| 추천 기능 | "뭐 하지?" 시간대 선택 + 필터링 로직 + 패널 UI |
| 경로 탐색 | Google Maps 연동 + Feasibility 모달 + 경로 시각화 |
| 비용 관리 | 인당 비용 계산 + 카테고리 breakdown 툴팁 |
| 공유 | 토큰 생성 + 공유 링크 접근 API + 읽기전용 모드 |
| 다크 모드 | CSS 변수 + ThemeProvider + 토글 UI |
| 참여자/만료 | 참여자 편집 + D-day 표시 + 만료/연장 기능 |
각 기능 단위 내에서 다시 컴포넌트별로 세분화한다:
기능 단위 (예: 위시리스트)
├── API Route 구현 (GET/POST/PUT/DELETE)
├── 타입 정의 (TypeScript interface)
├── 메인 패널 컴포넌트 (WishlistPanel)
├── 카테고리별 폼 컴포넌트 (TransportForm, PlaceForm, StayForm)
└── 공용 컴포넌트 (PlaceAutocomplete, TimeFieldInput)
[맥락] 현재 {기능 A}까지 구현된 상태이다.
[목표] {기능 B}를 구현해야 한다.
[상세]
- 필요한 API 엔드포인트: ...
- UI 동작 방식: ...
- 데이터 흐름: ...
[제약]
- 기존 {컴포넌트/파일}의 구조를 유지할 것
- {특정 라이브러리}를 사용할 것
[현상] {어떤 동작}을 하면 {어떤 문제}가 발생한다.
[기대] {정상 동작}이어야 한다.
[재현] {재현 단계}
[의심 지점] {관련 파일/함수} (선택)
[대상] {파일/컴포넌트}
[문제] {현재 구조의 문제점}
[방향] {원하는 개선 방향}
[주의] 기존 동작은 그대로 유지할 것
[컴포넌트] {이름}
[역할] {이 컴포넌트가 하는 일}
[Props] {부모로부터 받는 데이터/콜백}
[UI 구성]
- {시각적 구성 요소 설명}
[인터랙션]
- {사용자 동작 → 결과}
1. GitHub Issue에서 작업 선택
│
2. feature 브랜치 생성 (feature-xxx)
│
3. Agent에게 맥락 + 목표 전달 (프롬프트 패턴 활용)
│
4. 생성된 코드 리뷰 및 테스트
│
5. 필요시 수정 요청 (버그/리팩토링 패턴)
│
6. dev 브랜치로 PR 생성
│
7. 코드 리뷰 후 머지
│
8. 다음 Issue로 이동
-
CLAUDE.md에 프로젝트 컨벤션, 디렉토리 구조, 기술 스택 정보를 정리하여 Agent가 매 세션마다 프로젝트 맥락을 빠르게 파악할 수 있도록 한다. - 반복되는 작업 패턴(컴포넌트 생성, API 라우트 추가 등)은 Agent Skill로 정의하여 재사용한다.
- Agent가 생성한 코드는 반드시 로컬에서 동작 확인 후 커밋
- 타입 안전성 유지 (TypeScript strict 모드)
- 각 기능 구현 후 수동 테스트로 기존 기능 회귀 확인
- PR 단위는 하나의 기능 단위를 넘지 않도록 관리