AI로 기능 쌓기 — 기능이 늘어날수록 구조를 잃지 않는 방법

MCP까지 연결했다면 이제 본격적으로 기능을 쌓아갈 차례입니다. 이 편에서는 실제로 AI와 함께 기능을 추가하는 방법과, 기능이 늘어날수록 구조가 흐릿해지는 현실을 어떻게 관리하는지 다룹니다.

계속해서 북마크 앱을 예제로 사용합니다. 4편에서 기본 화면을 만들었고, 이제 태그 기능과 검색 기능을 추가해봅니다.

AI에게 기능을 요청하는 방법

기능을 추가할 때 가장 중요한 원칙은 한 번에 하나씩입니다.

경험이 없으면 “태그 기능이랑 검색 기능이랑 정렬 기능 다 추가해줘”라고 한 번에 요청하고 싶어집니다. 하지만 이 방식은 문제를 만들기 좋습니다.

방식	장점	단점
한 번에 여러 기능 요청	빠른 것처럼 보임	코드가 얽혀서 나중에 수정하기 어려움, 에러 발생 시 원인 파악 어려움
하나씩 단계별로 요청	느린 것처럼 보임	각 단계에서 결과 확인 가능, 문제 생기면 원인 명확함

실제로 하나씩 요청하는 것이 전체 속도는 더 빠릅니다. 버그가 어디서 생겼는지 바로 알 수 있어 고치는 시간이 훨씬 줄어들기 때문입니다.

좋은 기능 추가 프롬프트 구조

[현재 상태 설명]
지금 북마크 앱에는 URL과 제목을 저장하고 목록으로 보여주는 기능이 있어.
데이터는 localStorage에 저장돼 있고, 각 북마크는 { id, url, title } 구조야.

[추가할 기능]
태그 기능을 추가하고 싶어. 북마크를 저장할 때 태그를 여러 개 달 수 있고,
목록에서 태그를 클릭하면 해당 태그의 북마크만 필터링되게 해줘.

[데이터 구조 변경]
기존 북마크 데이터에 tags: [] 배열을 추가해줘.
기존 데이터는 마이그레이션 없이 tags가 없으면 빈 배열로 처리하면 돼.

[범위 제한]
이것만 먼저 해줘. 태그 편집이나 태그 삭제는 나중에 추가할 거야.

이렇게 현재 상태 → 원하는 기능 → 데이터 변경 → 범위 제한 순서로 작성하면 AI가 기존 코드와 충돌 없이 기능을 추가합니다.

기능이 늘어날수록 구조 파악이 어려워지는 현실

기능을 하나씩 추가하면서도 피할 수 없는 현실이 있습니다. 코드가 점점 복잡해진다는 것입니다.

처음에는 App.jsx 하나에 모든 코드가 있어도 괜찮습니다. 하지만 태그 기능이 추가되고, 검색이 추가되고, 정렬이 추가되면 어느 순간 App.jsx가 300줄을 넘어갑니다.

이 시점에서 새 기능을 요청하면 이런 일이 생깁니다.

AI가 기존 코드를 잘못 이해하고 비슷한 함수를 다시 만들어 중복이 생긴다
수정 요청을 했는데 관련 없는 부분이 바뀐다
한 기능을 고치면 다른 기능이 깨진다

이 현상의 원인은 AI가 코드를 읽을 때 전체 맥락을 한 번에 파악하기 어렵다는 점입니다.

기능이 쌓일수록 Umtri 트리에 흔적 남기기

이 문제를 해결하는 방법은 기능을 추가할 때마다 Umtri 트리에 기록을 남기는 것입니다.

기록 자체는 복잡하지 않습니다. 새 컴포넌트를 만들었다면 Umtri 트리에 leaf 노드 하나를 추가하는 것으로 충분합니다.

MCP가 연결된 상태에서 Claude Code에게 이렇게 요청합니다.

태그 기능 추가 완료됐어.
Umtri bookmark-app 그라운드 트리에 아래 내용 반영해줘:

- TagFilter 컴포넌트 → BookmarkList twig 아래 leaf로 추가
- AddForm에 태그 입력 추가됐으니 AddForm leaf의 설명 업데이트
- localStorage에 tags 배열 추가됐으니 storage.js leaf 설명도 업데이트

이렇게 기록해두면 다음에 새 기능을 요청할 때 이렇게 할 수 있습니다.

Umtri에서 bookmark-app 트리 가져와줘.
검색 기능을 추가하려는데, 현재 구조에서 어디에 추가하면 좋을지 제안해줘.

Claude Code가 현재 트리 구조를 읽어서 검색 기능이 어떤 컴포넌트와 연관되는지, 어디에 위치해야 하는지를 파악한 뒤 제안합니다. 코드 파일을 모두 열어볼 필요 없이 트리 구조 하나로 전체 맥락을 파악합니다.

Season(시즌) 개념 활용하기

Umtri에는 Season이라는 개념이 있습니다. 프로젝트의 성장 주기를 구분하는 단위입니다. 자연의 계절처럼, 프로젝트도 단계별로 성장합니다.

시즌을 나누는 기준은 자유입니다. 예를 들어 이렇게 나눌 수 있습니다.

시즌	내용
Season 1	기본 기능 (북마크 저장·삭제)
Season 2	태그와 검색 기능 추가
Season 3	배포 및 공유 기능

시즌을 나눠두면 “Season 1에는 이 기능이 있었는데 Season 2에서 어떻게 바뀌었는지”를 타임라인으로 볼 수 있습니다. 나중에 “왜 이 구조로 바뀌었지?“라는 질문이 생겼을 때 히스토리를 찾아볼 수 있습니다.

실전 팁: 기능 추가 루틴

기능을 추가할 때마다 반복하면 좋은 루틴입니다.

1. 시작 전: 현재 구조 확인

Umtri에서 bookmark-app 트리 가져와서 현재 구조 요약해줘.

2. 코드 작성: 한 기능씩 요청

기능을 작은 단위로 쪼개서 순서대로 요청합니다.

3. 작동 확인

브라우저에서 추가된 기능이 정상 동작하는지 직접 확인합니다.

4. 기록: Umtri 트리 업데이트

[추가한 내용]을 Umtri 트리에 반영해줘.

이 루틴을 반복하면 기능이 늘어도 구조가 흐릿해지지 않습니다. 다음 작업을 시작할 때 항상 “현재 어디까지 왔는지”를 명확하게 파악하고 시작할 수 있습니다.

다음 편에서

다음 편에서는 로컬에서만 동작하는 앱을 인터넷에 공개하는 방법, 즉 배포를 다룹니다. 배포를 할 때마다 Umtri에 자동으로 기록되는 GitHub Actions 설정도 함께 살펴봅니다.