배포 후 코드 정리하기 — AI와 함께 리팩터링하는 법
바이브코딩 후 반드시 필요한 리팩터링을 AI와 함께 진행하는 방법을 설명합니다.
서비스를 배포하고 나면 한 가지 선택의 기로에 서게 됩니다. 계속해서 새 기능을 추가할 것인가, 아니면 지금까지 만든 코드를 한 번 정리할 것인가.
빠르게 기능을 만들어온 바이브코딩 프로젝트라면 이 시점이 중요합니다. 코드 정리 없이 계속 기능을 추가하면 나중에 AI도 코드를 파악하기 어려운 상태가 됩니다. 이 편에서는 AI와 함께 코드를 읽고 정리하는 방법, 즉 리팩터링(refactoring)을 다룹니다.
왜 바이브코딩 후엔 반드시 정리가 필요한가
리팩터링은 기능은 바꾸지 않고 코드의 구조를 개선하는 작업입니다. 눈에 보이는 변화는 없지만 나중에 수정과 확장이 훨씬 쉬워집니다.
바이브코딩으로 빠르게 만든 코드에는 공통적인 문제들이 생깁니다.
| 문제 | 예시 | 영향 |
|---|---|---|
| 한 파일에 너무 많은 역할 | App.jsx에 UI + 로직 + 데이터 처리가 한꺼번에 | 어디를 고쳐야 할지 파악하기 어려움 |
| 중복 코드 | 비슷한 함수가 2~3군데에 존재 | 하나 수정하면 다른 곳도 수동으로 바꿔야 함 |
| 일관성 없는 명명 | getBookmarks, fetchData, loadItems가 같은 기능 | 코드 읽는 데 시간이 더 걸림 |
| 하드코딩된 값 | localStorage.getItem('bm-data-v1') 같은 문자열이 여러 곳에 | 키 이름 바꾸면 모두 찾아서 변경해야 함 |
이런 문제들은 기능을 빠르게 추가할 때는 눈에 띄지 않지만, 코드가 쌓이면 새로운 기능을 추가하거나 버그를 수정하는 데 시간이 점점 더 오래 걸리게 만듭니다.
AI와 함께 코드를 읽고 구조를 개선하는 방법
리팩터링을 직접 하려면 코드를 이해하고 있어야 합니다. 바이브코딩으로 만든 코드는 AI가 만들었기 때문에 정확히 무엇이 어디에 있는지 파악하기 어려울 수 있습니다.
이때도 AI를 활용합니다. 리팩터링 요청을 위한 좋은 프롬프트 방식입니다.
1단계: 현재 코드 분석 요청
현재 bookmark-app 프로젝트의 코드를 읽고, 아래 항목을 파악해줘:
1. 각 파일이 어떤 역할을 하는가
2. 한 파일이 너무 많은 역할을 하고 있는 부분은 어디인가
3. 중복된 로직이 있는 부분은 어디인가
4. 개선하면 좋을 부분 상위 3가지
수정은 아직 하지 말고, 분석만 해줘.분석 먼저 요청하는 것이 중요합니다. 바로 “고쳐줘”라고 하면 AI가 과도하게 많은 것을 한 번에 바꿀 수 있습니다.
2단계: 우선순위 정하기
AI가 분석 결과를 알려주면 어떤 것부터 정리할지 순서를 정합니다. 모든 것을 한 번에 고치려 하지 않습니다.
위 분석에서 3번 항목(localStorage 로직 분리)부터 처리해줘.
현재 App.jsx에 있는 localStorage 관련 코드를 storage.js 파일로 분리해줘.
기능은 그대로 유지하고 구조만 바꿔줘.3단계: 변경 후 작동 확인
코드를 바꾼 후에는 반드시 브라우저에서 기능이 그대로 작동하는지 확인합니다. 리팩터링은 기능을 바꾸지 않는 것이 원칙이지만, 실수가 생길 수 있습니다.
4단계: 다음 항목으로
확인이 끝나면 다음 항목으로 넘어갑니다. 한 번에 하나씩입니다.
리팩터링할 때 자주 쓰는 프롬프트 패턴
컴포넌트 분리
App.jsx에서 북마크 목록을 보여주는 부분을 BookmarkList.jsx 컴포넌트로 분리해줘.
props와 콜백 함수 연결도 함께 처리해줘.공통 로직 추출
fetchBookmarks(), saveBookmark(), deleteBookmark() 함수가 각각 다른 파일에 흩어져 있어.
이것들을 hooks/useBookmarks.js 커스텀 훅으로 묶어줘.상수 정리
코드에 문자열로 하드코딩된 값들(localStorage 키 이름 등)을
constants.js 파일로 모아줘.불필요한 코드 정리
주석 처리된 코드, 사용하지 않는 import, 미완성된 함수들을 정리해줘.
기능에 영향 없이 제거할 수 있는 것들만 처리해줘.리팩터링 결과를 CLAUDE.md에 반영하기
리팩터링은 새 기능을 추가하는 것이 아니라 구조를 바꾸는 작업이므로, 구조를 설명해둔 CLAUDE.md도 바뀐 내용에 맞게 갱신해야 합니다.
리팩터링이 완료됐어. CLAUDE.md의 구조 설명을 아래에 맞게 갱신해줘:
- storage.js 새로 추가 (localStorage 로직 담당)
- hooks/useBookmarks.js 새로 추가 (북마크 CRUD 로직)
- App.jsx는 이제 UI 레이아웃만 담당
- loadData() 함수는 삭제됨문서가 코드와 동기화되어 있으면 나중에 AI에게 “지금 구조가 어떻게 되어 있어?”라고 물었을 때 정확한 현재 상태를 바로 파악할 수 있습니다.
언제 리팩터링을 멈춰야 하는가
리팩터링에는 끝이 없습니다. 코드는 항상 더 개선할 수 있습니다. 하지만 서비스를 운영하면서 리팩터링에만 시간을 쏟을 수는 없습니다.
리팩터링을 멈추고 다음 기능으로 넘어가도 되는 신호는 이렇습니다.
- AI에게 새 기능을 요청했을 때 기존 코드와 충돌 없이 잘 추가된다
- 특정 기능을 수정할 때 어떤 파일을 열어야 하는지 바로 알 수 있다
- 코드 파일 하나의 길이가 대략 200줄 이하다
완벽하게 정리된 코드가 목표가 아닙니다. 다음 기능을 추가하고 버그를 수정하기에 불편하지 않은 상태가 목표입니다.
다음 편에서
다음 편에서는 배포 후 반드시 마주치게 되는 상황인 프로덕션 버그를 다룹니다. 실제 사용자가 쓰는 환경에서 발생하는 버그는 로컬 개발 환경과 다른 점이 있습니다. AI와 함께 원인을 찾고 해결하는 방법을 알아봅니다.