AI로 기능 쌓기 — 기능이 늘어날수록 구조를 잃지 않는 방법
AI에게 기능을 요청하는 올바른 방법과, 기능이 늘어도 구조를 잃지 않는 개발 루틴을 소개합니다.
4편에서 첫 화면을 만들었습니다. 이제 본격적으로 기능을 쌓아갈 차례입니다. 이 편에서는 실제로 AI와 함께 기능을 추가하는 방법과, 기능이 늘어날수록 구조가 흐릿해지는 현실을 어떻게 관리하는지 다룹니다.
계속해서 북마크 앱을 예제로 사용합니다. 4편에서 만든 기본 화면 위에 태그 기능과 검색 기능을 추가해봅니다.
AI에게 기능을 요청하는 방법
기능을 추가할 때 가장 중요한 원칙은 한 번에 하나씩입니다.
경험이 없으면 “태그 기능이랑 검색 기능이랑 정렬 기능 다 추가해줘”라고 한 번에 요청하고 싶어집니다. 하지만 이 방식은 문제를 만들기 좋습니다.
| 방식 | 장점 | 단점 |
|---|---|---|
| 한 번에 여러 기능 요청 | 빠른 것처럼 보임 | 코드가 얽혀서 나중에 수정하기 어려움, 에러 발생 시 원인 파악 어려움 |
| 하나씩 단계별로 요청 | 느린 것처럼 보임 | 각 단계에서 결과 확인 가능, 문제 생기면 원인 명확함 |
실제로 하나씩 요청하는 것이 전체 속도는 더 빠릅니다. 버그가 어디서 생겼는지 바로 알 수 있어 고치는 시간이 훨씬 줄어들기 때문입니다.
좋은 기능 추가 프롬프트 구조
[현재 상태 설명]
지금 북마크 앱에는 URL과 제목을 저장하고 목록으로 보여주는 기능이 있어.
데이터는 localStorage에 저장돼 있고, 각 북마크는 { id, url, title } 구조야.
[추가할 기능]
태그 기능을 추가하고 싶어. 북마크를 저장할 때 태그를 여러 개 달 수 있고,
목록에서 태그를 클릭하면 해당 태그의 북마크만 필터링되게 해줘.
[데이터 구조 변경]
기존 북마크 데이터에 tags: [] 배열을 추가해줘.
기존 데이터는 마이그레이션 없이 tags가 없으면 빈 배열로 처리하면 돼.
[범위 제한]
이것만 먼저 해줘. 태그 편집이나 태그 삭제는 나중에 추가할 거야.이렇게 현재 상태 → 원하는 기능 → 데이터 변경 → 범위 제한 순서로 작성하면 AI가 기존 코드와 충돌 없이 기능을 추가합니다.
기능이 늘어날수록 구조 파악이 어려워지는 현실
기능을 하나씩 추가하면서도 피할 수 없는 현실이 있습니다. 코드가 점점 복잡해진다는 것입니다.
처음에는 App.jsx 하나에 모든 코드가 있어도 괜찮습니다. 하지만 태그 기능이 추가되고, 검색이 추가되고, 정렬이 추가되면 어느 순간 App.jsx가 300줄을 넘어갑니다.
이 시점에서 새 기능을 요청하면 이런 일이 생깁니다.
- AI가 기존 코드를 잘못 이해하고 비슷한 함수를 다시 만들어 중복이 생긴다
- 수정 요청을 했는데 관련 없는 부분이 바뀐다
- 한 기능을 고치면 다른 기능이 깨진다
이 현상의 원인은 AI가 코드를 읽을 때 전체 맥락을 한 번에 파악하기 어렵다는 점입니다.
기능이 쌓일수록 CLAUDE.md에 흔적 남기기
이 문제를 해결하는 방법은 기능을 추가할 때마다 프로젝트의 현재 구조를 짧게 기록해두는 것입니다. 5편에서 이야기한 “기록하는 습관”을 실제 루틴으로 만드는 단계입니다.
기록 자체는 복잡하지 않습니다. 3편에서 만든 CLAUDE.md에 새로 생긴 파일과 그 역할을 한두 줄 덧붙이는 것으로 충분합니다.
예를 들어 태그 기능을 추가했다면 Claude Code에게 이렇게 요청합니다.
태그 기능 추가 완료됐어. CLAUDE.md의 구조 설명을 아래 내용으로 갱신해줘:
- TagFilter 컴포넌트 추가 (BookmarkList 하위, 태그 클릭 시 필터링)
- AddForm에 태그 입력 필드 추가됨
- localStorage 데이터에 tags 배열 추가됨이렇게 CLAUDE.md를 최신 상태로 유지하면, 다음에 새 기능을 요청할 때 AI가 대화를 시작하면서 자동으로 현재 구조를 파악합니다. 코드 파일을 일일이 열어볼 필요가 없습니다.
검색 기능을 추가하려는데, 현재 구조에서 어디에 두면 좋을지 먼저 제안해줘.CLAUDE.md에 구조가 정리되어 있으면 Claude Code가 검색 기능이 어떤 컴포넌트와 연관되는지 파악한 뒤 위치를 제안합니다.
실전 팁: 기능 추가 루틴
기능을 추가할 때마다 반복하면 좋은 루틴입니다.
1. 시작 전: 현재 구조 확인
CLAUDE.md와 현재 폴더 구조를 보고 지금 상태를 요약해줘.2. 코드 작성: 한 기능씩 요청
기능을 작은 단위로 쪼개서 순서대로 요청합니다.
3. 작동 확인
브라우저에서 추가된 기능이 정상 동작하는지 직접 확인합니다.
4. 기록: CLAUDE.md 갱신
방금 추가한 [기능]을 CLAUDE.md 구조 설명에 반영해줘.이 루틴을 반복하면 기능이 늘어도 구조가 흐릿해지지 않습니다. 다음 작업을 시작할 때 항상 “현재 어디까지 왔는지”를 명확하게 파악하고 시작할 수 있습니다.
다음 편에서
다음 편에서는 로컬에서만 동작하는 앱을 인터넷에 공개하는 방법, 즉 배포를 다룹니다.