코드 복붙만 했는데 왜 실행이 안될까? 초보가 놓치는 숨은 오류 10가지!
“AI가 만들어 준 코드를 그대로 복사해서 붙여넣었는데 왜 작동하지 않을까요?”
바이브코딩을 시작하면 코드를 직접 입력하기보다 AI가 만들어 준 내용을 복사해서 붙여넣는 일이 많습니다. 빠르고 편리하며 오타도 줄일 수 있어 복사·붙여넣기 자체가 잘못된 방법은 아닙니다.
문제는 코드가 어디에 들어가는지, 기존 코드와 어떻게 연결되는지 확인하지 않은 채 복붙만 반복할 때 시작됩니다.
처음에는 잘 작동하다가 어느 순간 버튼이 두 번 실행되고, 예전 함수와 새 함수가 동시에 남거나, 정상 코드가 사라질 수도 있습니다.
바이브코딩 초보라면 코드를 많이 작성하는 것보다 복사한 코드가 프로젝트의 어느 부분을 바꾸는지 확인하는 습관부터 익히는 것이 중요합니다.
추가해야 할 코드를 기존 코드 위에 덮어쓸 수 있습니다
AI가 새로운 기능을 만들어 주면서 다음과 같이 설명할 수 있습니다.
“아래 코드를 script.js에 적용하세요.”
초보자는 기존 내용을 모두 지우고 새로운 코드를 붙여넣기 쉽습니다.
그런데 AI가 제공한 코드가 파일 전체가 아니라 수정해야 할 일부 코드였다면 어떻게 될까요?
기존에 정상적으로 작동하던 함수가 사라질 수 있습니다.
저장 기능을 추가하려다가 삭제와 검색 기능이 없어지는 식입니다.
붙여넣기 전에 ‘전체 교체인지 일부 추가인지’를 반드시 확인해야 합니다.
같은 코드를 두 번 붙여넣을 수 있습니다
코드가 제대로 적용됐는지 확신이 없어서 같은 내용을 다시 붙이는 경우도 있습니다.
예를 들어 버튼 클릭 이벤트가 두 번 등록되면 한 번 눌렀는데 함수가 두 번 실행될 수 있습니다.
사용자는 버튼이 이상하다고 생각하지만 실제 원인은 중복된 코드일 수 있습니다.
함수, 이벤트, CSS 스타일도 마찬가지입니다.
복붙하기 전에는 같은 함수 이름이나 코드가 이미 존재하는지 검색해 보는 습관이 좋습니다.
중괄호 하나가 엉뚱한 위치에 들어갈 수 있습니다
AI가 함수 하나만 수정해서 보내 줬다고 생각해 보겠습니다.
코드 자체는 정확할 수 있습니다.
하지만 사용자가 기존 함수의 중간에 붙여넣거나 닫는 중괄호 위치를 잘못 맞추면 전혀 다른 결과가 생길 수 있습니다.
JavaScript뿐 아니라 HTML 태그의 시작과 끝, CSS의 중괄호도 마찬가지입니다.
AI 코드가 맞더라도 붙여넣은 위치가 틀리면 프로그램은 틀릴 수 있습니다.
그래서 “이 코드를 어디에 넣어야 하나요?”를 확인하는 것도 중요한 개발 과정입니다.
예전 코드가 남아 새 코드와 충돌할 수 있습니다
AI에게 기존 함수를 개선해 달라고 요청했더니 새로운 버전의 함수를 만들어 줬다고 가정해 보겠습니다.
새 코드를 붙여넣었지만 예전 코드를 삭제하지 않았다면 비슷한 역할을 하는 코드가 함께 남을 수 있습니다.
프로젝트가 커질수록 이런 중복은 찾기 어려워집니다.
AI에게 수정 코드를 받을 때는 다음처럼 요청해 보세요.
“새 코드를 추가해야 하는 위치와 기존 코드에서 삭제해야 하는 범위를 함께 알려 주세요.”
추가할 코드만큼 삭제해야 할 코드를 확인하는 것도 중요합니다.
변수 이름이 기존 프로젝트와 다를 수 있습니다
AI가 만든 예제 코드에서는 사용자 이름을 username으로 사용했는데 현재 프로젝트에서는 userName을 사용하고 있을 수 있습니다.
사람에게는 거의 같은 이름처럼 보입니다.
하지만 코드에서는 서로 다른 변수입니다.
AI가 새로운 코드를 만들어 줄 때 기존 프로젝트의 이름을 정확하게 참고하지 못하면 이런 문제가 생길 수 있습니다.
그래서 복붙 전에
변수 이름
함수 이름
HTML 요소의 id
CSS 클래스 이름
을 확인해야 합니다.
비슷하게 생겼다는 이유만으로 같은 코드라고 생각하면 안 됩니다.
다른 프로젝트의 코드를 그대로 가져오면 문제가 생길 수 있습니다
인터넷이나 AI 답변에서 찾은 코드는 그 자체로 정상일 수 있습니다.
하지만 내 프로젝트에서도 그대로 작동한다는 보장은 없습니다.
사용하는 라이브러리나 버전, 파일 구조, 데이터 형식이 다를 수 있기 때문입니다.
예제 코드에는 이미 설치되어 있다고 가정한 라이브러리가 있을 수도 있습니다.
그래서 코드를 가져오기 전에
“이 코드가 현재 프로젝트 환경에서도 그대로 사용할 수 있는지 확인해 주세요.”
라고 AI에게 검토를 요청하는 방법이 좋습니다.
좋은 코드라도 환경이 다르면 잘못된 코드가 될 수 있습니다.
HTML만 바꿨는데 JavaScript가 갑자기 망가질 수 있습니다
디자인을 수정하면서 HTML을 통째로 복붙하는 경우도 주의해야 합니다.
기존 버튼이 다음과 같은 식별자를 가지고 있었다고 생각해 보겠습니다.
saveButton
JavaScript는 이 이름을 이용해 저장 버튼을 찾습니다.
그런데 새로운 HTML을 붙여넣으면서 버튼의 id가 바뀌거나 사라지면 JavaScript가 해당 버튼을 찾지 못합니다.
화면은 더 예뻐졌는데 저장 기능이 작동하지 않는 상황이 발생합니다.
HTML, CSS, JavaScript는 서로 독립된 파일처럼 보여도 실제로는 연결되어 있습니다.
복붙 직후 테스트하지 않으면 원인을 찾기 어려워집니다
AI가 코드 세 개를 제안했다고 가정해 보겠습니다.
첫 번째 코드를 붙입니다.
두 번째 코드도 붙입니다.
세 번째 코드까지 붙입니다.
그제야 실행했더니 오류가 발생합니다.
이제 어느 코드에서 문제가 시작됐는지 알기 어렵습니다.
더 안전한 방법은 간단합니다.
한 번 붙여넣기 → 저장 → 실행 → 테스트
그리고 다음 코드를 적용합니다.
수정 범위가 작을수록 문제가 발생했을 때 원인을 찾기도 쉽습니다.
AI의 설명 문장까지 코드에 넣지 마세요
초보자에게 의외로 자주 생기는 실수입니다.
AI가 코드와 설명을 함께 제공했는데 어디까지 복사해야 하는지 구분하지 못하고 설명 문장이나 마크다운 표시까지 붙여넣는 경우가 있습니다.
코드 블록을 감싸는 표시나 일반 설명 문장은 실제 소스 코드가 아닐 수 있습니다.
붙여넣기 전에 코드 영역과 설명 영역을 구분해서 확인하는 습관을 들이세요.
잘 모르겠다면 AI에게
“실제로 파일에 붙여넣어야 하는 코드만 보여 주세요.”
라고 요청하면 됩니다.
복붙이 반복될수록 내가 이해하지 못하는 코드가 쌓입니다
가장 큰 문제는 당장 발생하는 오류가 아닐 수도 있습니다.
AI가 만들어 준 코드를 계속 붙이기만 하면 프로젝트 안에 내가 역할을 모르는 코드가 점점 많아집니다.
처음에는 100줄이었던 코드가 1,000줄이 되었는데 어느 함수가 무엇을 하는지 모르는 상태가 될 수 있습니다.
이때 오류가 발생하면 AI에게 다시 전체를 맡길 수밖에 없습니다.
그 결과 또 많은 코드가 변경되고 프로젝트는 더 이해하기 어려워집니다.
복붙의 진짜 위험은 코드가 늘어나는 속도보다 이해하지 못하는 코드가 늘어나는 속도가 더 빨라지는 것입니다.
복붙하기 전에 확인해야 할 체크리스트
AI가 코드를 만들어 줬다면 바로 붙여넣지 말고 아래 항목을 확인해 보세요.
- 어느 파일에 넣어야 하는 코드인가?
- 기존 코드를 교체하는가, 새로 추가하는가?
- 정확히 어느 위치에 넣어야 하는가?
- 삭제해야 할 기존 코드는 있는가?
- 같은 함수가 이미 존재하지 않는가?
- 변수와 함수 이름이 현재 프로젝트와 같은가?
- HTML의 id와 CSS 클래스 이름이 연결되어 있는가?
- 새로운 라이브러리가 필요한가?
- 적용 전 정상 버전을 저장했는가?
- 붙여넣은 직후 바로 테스트했는가?
이 열 가지를 매번 모두 확인하는 것이 번거롭게 느껴질 수 있습니다.
하지만 몇 분의 확인이 몇 시간짜리 디버깅을 막아 줄 수 있습니다.
초보자에게 추천하는 안전한 복붙 프롬프트
AI에게 코드를 요청할 때 아래와 같이 말해 보세요.
“현재 정상적으로 작동하는 기능은 유지해야 합니다. 코드를 제공하기 전에 어느 파일의 어느 위치를 수정해야 하는지 먼저 설명해 주세요. 기존 코드를 교체하는 것인지 새 코드를 추가하는 것인지 명확하게 구분해 주세요. 삭제해야 할 코드가 있다면 시작 부분과 끝 부분을 알려 주세요. 기존 변수, 함수, id, 클래스 이름은 가능한 한 변경하지 마세요. 한 번에 여러 파일을 수정하지 말고 가장 작은 단위부터 수정한 뒤 제가 확인할 테스트 항목도 알려 주세요.”
이렇게 요청하면 단순히 코드를 받는 데서 끝나지 않고 어디에 어떻게 적용해야 하는지까지 함께 확인할 수 있습니다.
복붙을 줄이는 것보다 ‘확인 없는 복붙’을 줄이세요
바이브코딩에서 복사해서 붙여넣는 행동 자체가 나쁜 것은 아닙니다.
AI가 만든 코드를 활용하면 개발 속도를 크게 높일 수 있고 긴 코드를 직접 입력하면서 생기는 오타도 줄일 수 있습니다.
문제는 무엇인지 모르고, 어디에 들어가는지 모르고, 무엇이 바뀌는지도 모른 채 복붙을 반복하는 것입니다.
앞으로 코드를 붙여넣기 전에 세 가지만 질문해 보세요.
- 어디에 넣는가?
- 무엇을 바꾸는가?
- 붙여넣은 뒤 무엇을 테스트해야 하는가?
그리고 작업 순서를 단순하게 유지하세요.
정상 버전 저장 → 작은 코드 적용 → 실행 → 결과 확인 → 다음 수정
이 습관이 자리 잡으면 AI가 만든 코드를 훨씬 안전하게 활용할 수 있습니다.
바이브코딩 실력이 늘어난다는 것은 복붙을 하지 않게 된다는 의미가 아닙니다.
복사한 코드가 내 프로젝트에서 어떤 역할을 하는지 알고 적용할 수 있게 되는 것에 더 가깝습니다.