본문 바로가기

카테고리 없음

파일 몇 개 늘었을 뿐인데 왜 망가졌을까? 바이브코딩 오류가 급증하는 이유

파일 몇 개 늘었을 뿐인데 왜 망가졌을까? 바이브코딩 오류가 급증하는 이유

처음 바이브코딩을 시작할 때는 생각보다 순조롭습니다.

index.html, style.css, script.js 정도만 가지고 작업하면 AI에게 코드를 보여 주기도 쉽고 문제가 생긴 위치도 금방 찾을 수 있습니다.
 
그런데 프로젝트가 커지면서 로그인, 데이터 저장, 검색, 관리자 기능 등을 추가하면 파일이 하나둘 늘어나기 시작합니다.

어느 순간부터 하나를 수정하면 다른 기능이 망가지고, AI에게 오류를 고쳐 달라고 할수록 새로운 문제가 생기는 현상을 경험하게 됩니다.
 
단순히 파일 개수가 많아서 생기는 문제만은 아닙니다.

핵심은 파일 사이의 연결 관계가 복잡해지면서 AI와 사용자 모두 프로젝트 전체를 파악하기 어려워진다는 것입니다.

바이브코딩으로 조금 더 큰 서비스를 만들고 싶다면 파일을 추가하는 방법보다 파일 사이의 관계를 관리하는 방법부터 이해해야 합니다.
 
 

파일 하나가 늘면 연결 관계도 함께 늘어납니다

간단한 웹사이트를 생각해 보겠습니다.

처음에는 다음과 같이 구성할 수 있습니다.
index.html
style.css
script.js

구조가 단순하기 때문에 어디에서 문제가 생겼는지 찾기도 쉽습니다.
프로젝트가 커지면 상황이 달라집니다.

login.js
auth.js
storage.js
api.js
ui.js
search.js
profile.js
처럼 기능별 파일이 만들어집니다.

문제는 이 파일들이 각각 독립적으로 움직이지 않는다는 것입니다.
login.js가 auth.js를 사용하고, auth.js가 사용자 정보를 읽으며, 로그인 성공 후 ui.js가 화면을 변경할 수 있습니다.

파일이 늘어난다는 것은 관리해야 할 연결 관계도 함께 늘어난다는 뜻입니다.
 
 

함수 이름 하나를 바꿔도 여러 파일이 영향을 받습니다

예를 들어 getUser()라는 함수가 있다고 가정해 보겠습니다.

AI에게

“함수 이름을 이해하기 쉽게 바꿔 줘.”

라고 요청해서 getCurrentUser()로 변경했습니다.

문제는 다른 파일에서 여전히 getUser()를 호출하고 있을 수 있다는 것입니다.

AI가 모든 연결 파일을 함께 확인하지 않았다면 일부 기능에서 오류가 발생합니다.

초보자 입장에서는 단순히 함수 이름 하나를 변경했을 뿐인데 갑자기 로그인이나 프로필 화면까지 망가진 것처럼 보입니다.

파일이 많아질수록 작은 변경의 영향 범위가 커집니다.
 
 

AI가 프로젝트 전체를 충분히 보지 못할 수 있습니다

파일이 3개일 때는 현재 코드를 AI에게 전달하기 쉽습니다.

하지만 파일이 수십 개로 늘어나면 모든 내용을 매번 제공하기 어렵습니다.

사용자는 문제가 발생한 파일 하나만 보여 주고

“여기 오류를 고쳐 줘.”

라고 요청하기 쉽습니다.

그러나 실제 원인은 다른 파일에 있을 수 있습니다.

화면에 데이터가 표시되지 않는다고 해서 반드시 화면 코드가 문제인 것은 아닙니다. 데이터를 가져오는 코드나 저장 구조, 함수 호출 과정에서 문제가 생겼을 수도 있습니다.

보이는 증상이 있는 파일과 실제 원인이 있는 파일이 다를 수 있다는 점을 기억해야 합니다.
 
 

같은 기능을 여러 파일에서 만들기 시작합니다

AI가 프로젝트 구조를 충분히 이해하지 못하면 이미 존재하는 기능을 새로 만들기도 합니다.

예를 들어 storage.js에 데이터 저장 함수가 있는데 AI가 app.js에 또 다른 저장 함수를 추가할 수 있습니다.
처음에는 둘 다 비슷하게 작동합니다.

그러다 한쪽만 수정하면 문제가 시작됩니다.
A 파일에서는 새로운 저장 방식을 사용하고 B 파일에서는 예전 방식을 계속 사용하는 것입니다.

결국 어느 코드가 실제 기준인지 알기 어려워집니다.
같은 역할을 담당하는 코드가 여러 곳에 생기는 중복은 프로젝트가 커질수록 주의해야 할 문제입니다.
 
 

파일 이름과 경로 오류도 증가합니다

프로젝트가 작을 때는 파일 위치가 단순합니다.
규모가 커지면 폴더도 나누게 됩니다.

예를 들면 다음과 같습니다.
src
components
utils
services
assets

이때 파일을 이동하거나 이름을 변경하면 해당 파일을 불러오는 경로도 함께 바꿔야 합니다.

예를 들어 원래 같은 폴더에 있던 파일을 utils 폴더로 이동했다면 기존 경로가 더 이상 맞지 않을 수 있습니다.

파일 자체의 코드는 멀쩡한데 프로그램에서는 찾지 못하는 상황이 발생합니다.

그래서 파일을 이동하거나 이름을 변경하는 것도 하나의 중요한 코드 변경으로 생각해야 합니다.
 
 

하나를 고쳤는데 다른 기능이 망가지는 이유

파일이 많아진 프로젝트에서는 하나의 데이터가 여러 기능에서 사용될 수 있습니다.

사용자 정보를 예로 들면
로그인
프로필
게시판
댓글
설정
등 여러 기능이 같은 데이터를 이용할 수 있습니다.

사용자 데이터 구조를 한 곳에서 변경했는데 다른 파일이 예전 구조를 사용한다면 일부 기능만 갑자기 작동하지 않을 수 있습니다.

이런 문제 때문에 프로젝트가 커지면 “이 코드를 수정하면 어디까지 영향을 받는가?”를 먼저 확인해야 합니다.
 
 

AI에게 전체 파일을 다시 만들어 달라고 하면 더 위험합니다

오류가 많아지면 답답한 마음에 다음과 같이 요청하기 쉽습니다.

“그냥 전체 코드를 오류 없이 다시 만들어 줘.”

작은 프로젝트에서는 통할 수도 있습니다.

하지만 파일이 많은 프로젝트에서는 기존 함수 이름, 데이터 구조, 파일 간 연결 방식까지 한꺼번에 달라질 위험이 있습니다.

오류 하나를 해결하려다가 정상적으로 작동하던 여러 기능을 잃을 수도 있습니다.

따라서 프로젝트가 커질수록 전체 재작성보다 문제가 발생한 범위를 좁혀 최소한으로 수정하는 방식이 안전합니다.
 
 

파일마다 역할을 하나씩 정해 주세요

파일이 많아지는 것 자체가 나쁜 것은 아닙니다.
오히려 역할을 잘 나누면 프로젝트를 관리하기 쉬워집니다.

예를 들어
auth.js → 로그인과 인증
storage.js → 데이터 저장
ui.js → 화면 표시
search.js → 검색
처럼 역할을 명확하게 정할 수 있습니다.

중요한 것은 storage.js에서 화면 디자인까지 처리하고 ui.js에서 로그인 정보를 저장하는 식으로 역할이 섞이지 않도록 하는 것입니다.

파일 수보다 더 중요한 것은 각 파일이 무엇을 책임지는지 명확한가입니다.
 
 

프로젝트 구조를 AI에게 먼저 보여 주세요

파일이 많아졌다면 오류가 발생할 때 코드부터 보내지 말고 프로젝트 구조를 먼저 설명해 주는 방법이 좋습니다.

예를 들어 다음처럼 전달할 수 있습니다.
프로젝트 구조
index.html - 기본 화면
app.js - 프로그램 시작
auth.js - 로그인 처리
storage.js - 데이터 저장
ui.js - 화면 출력
search.js - 검색 처리
현재 정상 기능: 로그인, 저장, 삭제
문제 기능: 검색 결과 출력

그리고 AI에게 이렇게 요청합니다.

“코드를 바로 수정하지 말고 검색 기능과 연결된 파일부터 찾아 주세요. 어떤 파일을 확인해야 하는지 알려 준 뒤 필요한 파일만 수정해 주세요.”


이 방식은 AI가 무작정 여러 파일을 변경하는 상황을 줄이는 데 도움이 됩니다.
 
 

파일이 많아지기 시작했다면 버전 관리가 필요합니다

파일이 2~3개인 프로젝트는 복사본만 만들어도 어느 정도 관리할 수 있습니다.

하지만 프로젝트 규모가 커지면 어떤 파일을 언제 수정했는지 기억하기 어려워집니다.

이 단계에서는 Git 같은 버전 관리 방법을 배우는 것이 좋습니다.

아직 Git이 어렵다면 최소한 중요한 단계마다 프로젝트 전체를 별도로 보관하세요.

v1_기본기능완료
v2_로그인완료
v3_검색추가전
v4_검색완료
처럼 구분할 수 있습니다.

정상적으로 작동했던 시점을 남겨 두면 AI 수정으로 문제가 커져도 빠르게 돌아갈 수 있습니다.
 
 

파일이 많아졌을 때 사용하는 오류 수정 프롬프트

아래처럼 요청해 보세요.

“현재 프로젝트에는 index.html, app.js, auth.js, storage.js, ui.js, search.js가 있습니다. 로그인, 저장, 삭제 기능은 정상이고 검색 결과를 화면에 표시하는 기능에서만 문제가 발생합니다. 코드를 바로 수정하지 말고 먼저 검색 기능과 관련된 파일과 함수의 연결 관계를 분석해 주세요. 정상 작동하는 파일과 함수는 변경하지 마세요. 원인이 확인되면 필요한 부분만 최소한으로 수정하고, 변경한 파일과 이유를 설명해 주세요. 수정 후 기존 기능까지 확인할 테스트 목록도 만들어 주세요.”


핵심은 AI에게 단순히 오류를 고치게 하는 것이 아닙니다.

현재 구조 → 정상 기능 → 문제 기능 → 관련 파일 분석 → 최소 수정 → 테스트
순서로 작업하게 만드는 것입니다.
 
 

파일 수보다 ‘연결 관계’를 관리하는 것이 중요합니다

바이브코딩에서 파일이 많아질수록 오류가 급증하는 이유는 파일 자체가 문제라서가 아닙니다.

함수, 데이터, 파일 경로와 기능이 서로 연결되면서 작은 수정 하나가 예상하지 못한 곳까지 영향을 미칠 가능성이 커지기 때문입니다.

프로젝트가 커지기 시작했다면 AI에게 무조건 코드를 더 만들어 달라고 하기보다 파일마다 역할을 정하고, 현재 구조를 기록하며, 수정 범위를 작게 유지하세요.

프로젝트 구조 정리 → 관련 파일 확인 → 한 가지 문제만 수정 → 직접 테스트 → 정상 버전 저장

이 흐름을 습관으로 만들면 파일이 늘어나더라도 훨씬 안정적으로 관리할 수 있습니다.
 
 
처음에는 파일을 많이 만드는 것이 개발 실력처럼 느껴질 수도 있습니다. 하지만 실제로 중요한 것은 파일의 개수가 아닙니다.

어떤 파일이 무엇을 담당하고, 서로 어떻게 연결되는지 설명할 수 있는 상태를 유지하는 것.

이것이 규모가 커진 바이브코딩 프로젝트를 지키는 핵심입니다.