AI가 짠 코드, 왜 자꾸 꼬일까? 바이브코딩에서 구조 설계가 중요한 이유

AI에게 원하는 기능을 설명하면 코드를 만들어주는 AI 바이브코딩(Vibe Coding)이 보편화되면서, 전문 개발 지식이 없어도 누구나 쉽게 웹사이트나 웹 서비스를 만들 수 있게 되었습니다.

저 역시 Pixoas를 비롯하여 다양한 웹사이트를 만들면서, AI에게 필요한 기능을 하나씩 요청하면 웹툴을 쉽게 만들 수 있을 것이라 생각했습니다.

하지만, AI에게 모든 것을 맡기는 것이 완성도 높은 결과물로 이어지지 않았고, 결국 누구나 만들 수 있는 내 웹사이트가 경쟁력을 가지기 위해서는 최소한의 도메인 지식이 필요하다는 것을 깨달았습니다.

이번 글에서는 실제로 웹사이트와 웹툴을 제작한 경험을 바탕으로 AI 바이브코딩으로 웹사이트를 만들 때 무엇을 먼저 생각하고 설계해야 하는지 정리해봤습니다.

🧩 AI는 기능을 구현할 수 있지만, 전체를 설계해주지는 않습니다

실제로 AI 바이브코딩의 한계를 가장 크게 체감한 것은 ImagePrep을 개발할 때였습니다.

이미지 일괄 변환 웹사이트인 🔗 ImagePrep는 포맷·용량·크기·비율·여백·파일명 등의 여러 이미지 요소를 최대 50장까지 한번에 처리할 수 있도록 만든 웹사이트입니다.

이러한 다양한 기능들을 구현하기 위해 처음에는 AI에게 한번에 입력하면서 요청했었고, 몇 번의 시도 끝에 그럴듯한 결과물이 나왔었습니다.

하지만, 기능들이 완벽하게 구현이 되었는지 Test를 해봤을 때, 각각의 기능은 정상적으로 동작했지만 여러 기능이 서로 얽히면서 예상하지 못한 충돌이 발생했습니다.

예를 들어 이미지의 크기와 비율을 함께 변경하거나, 여백을 추가한 뒤 다시 압축하는 것처럼 여러 기능을 조합했을 때 특정 기능의 결과가 다른 기능에 영향을 주는 문제가 발생한 것입니다.

결국, AI가 코드를 제대로 짜게 하기 위해서는 구현하고자 하는 기능들이 서로 어떤 영향을 미치는지 확인해야 하며, 전체적인 구조를 잡는 것이 중요하다는 것을 알게 되었습니다.

🗂️ 그래서 전체 구조부터 재설계했습니다

웹사이트의 취지에 맞춰 필요한 기능을 정했다면, 바이브코딩으로 코드를 바로 생성하기보다 먼저 각 기능이 어떤 구조로 동작해야 하는지 설계하는 과정이 필요합니다.

ImagePrep을 만들 때도 바로 코드를 작성하기보다, 이미지가 업로드된 이후 어떤 과정을 거쳐 최종 결과물로 만들어지는지, 그 파이프라인부터 정의했습니다.

이미지 선택 ➔ 이미지 정보 확인 ➔ 크기·비율·위치 편집 ➔ 압축·포맷 변환 ➔ 결과 파일 생성 ➔ 다운로드

이렇게 전체 흐름을 먼저 정리한 뒤, 각 과정의 역할에 맞춰 코드를 나눴습니다. 자연스럽게 GitHub 프로젝트의 폴더와 파일도 기능별로 구분했습니다.

처음에는 이렇게 구조를 미리 정하는 과정이 개발 속도를 늦추는 것처럼 느껴졌지만, 실제론 오히려 반대였습니다.

새로운 기능을 추가하거나 기존 기능을 수정할 때 어떤 부분의 코드를 확인해야 하는지 훨씬 명확해졌고, 결과적으로 AI에게 코딩을 요청하고 수정하는 과정이 굉장히 수월해졌습니다.

🤖 AI에게 코딩을 요청하는 방법도 달라졌습니다

구조를 정하기 전에는 AI에게 단순히 "이 기능을 만들어줘"라고 요청했습니다. 하지만 구조를 설계한 후에는 어떤 파일의 어떤 기능을 수정해야 하는지 Context를 함께 전달하기 시작했습니다.

예를 들어 이미지 압축 기능을 수정해야 한다면 아래와 같이 명확한 컨텍스트를 제공했습니다.

"현재 이미지 압축은 compressor.js에서 담당하고 있어. 기존의 Canvas 렌더링 흐름(renderer.js)은 유지하면서, compressor.js 내부의 압축 최적화 로직만 수정해 줘. 다른 파일의 기능에는 절대 영향을 주면 안 돼."

이렇게 AI가 작업해야 하는 범위를 명확하게 지정한 결과, 코드들이 서로 꼬이는 일이 줄었고, 결과적으로 훨씬 더 적은 토큰으로 정확하고 높은 퀄리티의 결과물을 얻을 수 있었습니다.

💡 AI 바이브코딩에서 사람이 해야 할 일

AI가 발전함에 따라 코드 작성이 훨씬 쉬워졌고, 비개발자도 다양한 결과물을 만들 수 있게 되었습니다. 하지만 무엇을 만들지, 어떤 기능이 필요한지, 각 기능이 어떻게 연결되어야 하는지는 결국 사람이 결정해야 합니다.

기능이 복잡해질수록 코드를 작성하기 전에 구현 목표를 정의하고 구조화하는 기획 과정 자체가 최종 결과물의 품질을 결정짓기 때문입니다.

저 역시 새로운 웹사이트를 만들 때, 무엇을 만들고 기능을 어떻게 나눌지, 그리고 파일들이 서로 어떤 관계를 가지는지부터 탄탄하게 기획한 후에 실제 코드를 구현하고 있습니다.

정리하자면, AI 바이브코딩은 개발의 진입장벽을 크게 낮춰주지만, 전체 구조를 먼저 설계하고 작업 범위를 명확히 지정해 AI에게 정확한 컨텍스트를 제공하는 것이 완성도 높은 결과물로 이어집니다.

물론 무엇을 만들고 어떤 기능과 구조가 필요한지 고민하는 과정 역시 AI의 도움을 받을 수 있습니다. 기회가 된다면 다음에는 기획 단계에서 AI를 활용하는 방법에 대해서도 다뤄 보겠습니다.