[바이브 코딩] #5: 실전 Day 2-3 - 백엔드 완성 그리고 배포

들어가며

---

안녕하세요, 개발자 Stark입니다!

지난 편에서 프론트엔드까지 완성했다면, 이번엔 진짜 바이브 코딩의 핵심인 Claude Code를 활용한 백엔드 구축 과정을 공유하려고 합니다. 첫날밤부터 마지막 날까지 이어진 Claude Code와의 사투, 그리고 예상치 못한 배포의 벽까지.

 

이번 포스팅 한 줄 요약

• Claude Code로 백엔드를 완성하고 배포까지 도전했지만, AI도 못하는 게 있다는 걸 깨달은 48시간

 

바이브 코딩 시리즈 정리

#1: AI와 2박 3일 - Monkeys 프로젝트의 시작

#2: AI와 협업하기 위한 우리만의 법칙

#3: AI 도구 선택과 12단계 계획

#4: 실전 Day1 - 아이디어부터 화면까지 

#5: 실전 Day2-3 - 백엔드 완성 그리고 배포 (현)

#6: Monkeys 프로젝트 최종 보고

 

 

Claude Code 세팅 - 가장 중요한 순간

---

Claude Code를 세팅하는 과정은 생각보다 빨리 끝났습니다.

Node.js — Node.js® 다운로드

먼저 위의 링크에 들어가서 설치하거나 직접 node를 검색해서 설치하신 다음 아래의 명령어를 터미널에 입력해 주시면 Claude Code가 설치됩니다. (참고로 Claude Code는 pro 플랜 이상 결제를 하셔야 사용 가능합니다. 저희는 AI 탐험대(회사)에서 지원해 준 Max 플랜을 사용했습니다)

npm install -g @anthropic-ai/claude-code

 

Claude Code 설치가 완료되었다면 터미널에 'claude'라고 입력만 해주시면 멋진 CLI(Command Line Interface: 사용자가 텍스트 기반 명령어를 입력하여 컴퓨터 시스템과 상호 작용하는 인터페이스) 화면이 나타납니다. 영화 같은 곳에서 해커들이 보고 있는 검은 화면에 흰 글씨가 주르륵 올라가는, 바로 그런 화면 말입니다.

클로드 코드 화면

이렇게 세팅은 간단하게 끝냈지만 저희에게는 큰 고민이 있었습니다. 요즘 개발은 백엔드와 프론트엔드가 분리되어 있는데, Claude Code가 이 둘을 어떻게 동시에 이해하고 개발할 수 있을까요?

 

처음엔 Claude Code를 2개 실행하려 했습니다. 백엔드 폴더에서 하나, 프론트엔드 폴더에서 하나. 하지만 이렇게 하면 각 Claude Code 인스턴스가 자기 폴더만 인식하고, 상대방 폴더의 변경사항을 실시간으로 파악할 수 없다는 문제가 있었습니다. 예를 들어, 백엔드 Claude Code가 API 응답 형식을 수정했을 때, 프론트엔드 Claude Code는 이 변경을 알 수 없어 여전히 이전 형식으로 요청을 보내는 코드를 작성하게 됩니다. 결국 API 연동이 안 맞는 코드가 만들어지는 거죠.

 

이걸로 고민하던 도중 eddy님이 좋은 아이디어를 냈습니다.

"그냥 상위 폴더에 프로젝트 모아두고 Claude Code 실행하면 되는 거 아니야?"

여러 프로젝트를 가진 상위 폴더

간단하게 표현하자면 다음과 같습니다.

/monkeys-project
  ├── backend
  └── frontend

위와 같은 구조를 만들고 monkeys-project 폴더에서 Claude Code를 실행하니, 놀랍게도 백엔드와 프론트엔드를 모두 인식하고 둘을 연동하며 개발하기 시작했습니다. 이렇게 바이브 코딩 준비를 완료했습니다!

 

이렇게 Claude Code 세팅을 마친 후 저희는 Claude Code가 앞으로 어떤 형태로 코드를 작성해 나가면 좋을지에 대한 가이드를 세팅하기로 했습니다. 방법은 간단합니다. Claude Code가 읽을수 있는 md 파일(CLAUDE.md)을 생성하고 비즈니스 도메인에 대한 지식 또는 아키텍처 정보를 작성해두기만 하면 됩니다. 저희는 개발하면서 이 파일을 지속적으로 수정했고 서로 파일을 공유해서 백엔드에서는 헥사고날 아키텍처를 적용하고 프론트엔드에는 fsd 아키텍처를 적용하였습니다.

 

 

Backend 개발 - 5시간의 기적

---

STEP 1: 무에서 유를 창조하다 - 도메인 설계부터 DB까지

지금까지의 과정을 읽어보셨다면 저희는 정말 아이디어조차 AI에게 맡긴 채로 시작했다는 것을 아실 수 있을 겁니다. 말 그대로 '무'의 상태에서 '바이브 코딩'만으로 서비스를 만들기로 한 것이죠. 백엔드 개발 시점에 저희가 가진 건 단 세 가지뿐이었습니다. AI가 만든 기획서, 텅 빈 백엔드 프로젝트 폴더, 그리고 Figma Make가 만들어준 프론트엔드 코드.

 

하지만 이런 극한 상황이 오히려 매력적이었습니다. "아무것도 없는 상태에서 무언가를 만들어내는 것", 개발자의 로망 아닌가요? 그래서 방향을 정했습니다. "프론트엔드 코드를 분석해서 백엔드를 역설계하자!"

 

Claude Code에게 프론트엔드 소스코드를 던져주고 도메인 분석을 시켰더니, 단 4분 만에 모든 컴포넌트를 분석하고 도메인을 분리한 뒤 친절한 설명까지 덧붙여줬습니다. 리버스 엔지니어링을 하는 것 같았습니다. (아래와 같이 분석 명령만 내리면 됩니다)

클로드 코드 소스코드 분석

이후 API 명세와 DB 설계를 부탁했는데, 여기서는 약간의 대화가 필요했습니다. "이 기능은 어떻게 구현할까요?" "이 데이터는 어떤 형태로 저장할까요?" 같은 질문들을 주고받으며 1시간 정도 핑퐁을 했습니다. 하지만 급하게 만든 기획서와 디자인만 보고 상당한 퀄리티의 설계를 해낸다는 것이 놀라웠습니다.

 

STEP2: Docker, DB 세팅

백엔드는 데이터베이스 없이는 무용지물입니다. 그래서 Docker에 PostgreSQL을 띄워야 했습니다.

"Docker로 PostgreSQL 세팅해줘"

이 한 문장이면 충분했습니다. Claude Code는 스스로 터미널을 열고, Docker 명령어를 입력하고, PostgreSQL을 설치한 뒤 실행까지 완료했습니다. 심지어 연결 테스트까지 진행하며 "DB 연결 성공!"이라고 보고까지 해주더군요.. 완벽한 바이브 코딩이었습니다.

클로드 코드가 쿼리까지?

STEP 3: 비즈니스 로직 구현 - "코드 구현이 제일 쉬웠어요"

이 단계는 정말 "누워서 떡 먹기"였습니다. 저희는 Claude Code에게 개발에 필요한 모든 정보를 제공했습니다. DB 접속 정보, 기획서, 개발 가이드, QA 방식, 프로젝트 관리 규칙까지. 그러면 아래 이미지와 같이 스스로 분석해서 개발 준비를 합니다. 이렇게 모든 정보를 알고 있는 Claude Code는 적당한 프롬프트를 입력만 해주면 스스로 계획을 세우고 작업을 진행했습니다. 저희는 Claude가 진행할까요?라고 물어보는 질문에 엔터를 누르면서 넷플릭스에서 다음에 볼 드라마를 고르고 있었습니다.

클로드가 분석한 정보

물론 중간중간 프롬프트를 입력해야 한다는 점이나 특정 작업에 대해서는 승인을 하기 위해 엔터를 눌러줘야 한다는 점은 조금 귀찮았습니다. (저희는 이마저도 자동화하고 싶어서 방법이 없을지 찾아봤습니다) 하지만 이 과정에서 중요한 걸 배웠습니다. AI에게 어떻게 질문하느냐에 따라 결과물의 품질이 천차만별이라는 것을.

클로드 코드 엔터입력 예시

Claude Code는 이미 분석한 도메인과 기획서, 프론트 코드를 참고하며 알아서 개발을 진행했습니다. API를 만들고, 검증하고, 테스트 데이터를 넣고, 에러를 수정하고... 모든 과정이 자동으로 진행됐습니다. 그러다 보니 단 3시간 만에 MVP로 출시해도 될 정도의 백엔드가 완성됐습니다. 평소라면 최소 1달은 걸렸을 작업이었기에 완성품을 보고서는 허망한 마음이 들기도 했습니다. 물론 유지보수 관점에서는 많은 개선이 필요했지만, 작동하는 서비스를 만들기에는 충분했습니다.

 

STEP 4: 프론트와의 연동 - "저희는 놀랐습니다"

가장 인상적인 순간이었습니다.

"프론트엔드와 백엔드 연동해서 테스트해줘"

Claude Code는 스스로 프론트엔드 서버와 백엔드 서버를 실행했습니다. 그리고 브라우저까지 열어서 실제로 클릭하고, API를 호출하고, 응답을 확인했습니다. 저희는 소파에 앉아 Claude Code에 표시된 TODO 리스트가 하나씩 체크되는 걸 멍하니 바라보기만 했습니다. API 연동, CORS 설정, 에러 처리, 데이터 포맷 맞추기... 모든 게 자동으로 진행됐습니다. 진정한 바이브였습니다.

클로드 코드 백엔드 프론트 연동 검증

검증이 완료되면 이런 화면이 표시됩니다.

연동 테스트 완료

이 순간 정말 자비스에게 "개발 좀 해줘"라고 말하고 쉬고 있는 토니 스타크가 된 기분이었습니다. 이렇게 5시간 만에 프론트엔드 연동까지 끝난 1차 MVP 개발이 끝났습니다. 혼자 했다면 최소 1달. AI와 함께하니 단 5시간. 놀라우면서도 묘하게 허무한 감정이 들었습니다.

 

토큰 전쟁 - 검증 vs 속도의 딜레마

백엔드 개발도중 흥미로운 발견을 했습니다. 저와 eddy님 모두 5시간마다 약 17만 개의 토큰을 사용할 수 있었는데, 서로의 사용 패턴에 달라서 그런지 소모율이 완전히 달랐습니다. 저는 매번 프롬포트에 "검증하고 테스트까지 완료한 후 마무리해"라고 요청했고, eddy님은 "검증 없이 빠르게 개발만 해"라고 요청했습니다. 결과는? 저는 토큰 제한에 한 번도 안 걸렸지만, eddy님은 3번이나 걸렸습니다. (덕분에 강제 휴식 시간이 생겼다고 좋아했지만요) 아마 이건 내용을 검증하는데 드는 시간이 오래 걸리다 보니 토큰 사용이 더 적었던 것 같습니다.

claude monitor로 확인한 토큰정보

더 놀라운 건 검증 과정이었습니다. Claude Code는 테스트만 하는 게 아니라, 스스로 TODO 리스트를 만들고, 프로세스를 설계하고, 각 단계를 검증한 뒤 다시 전체를 테스트하는 체계적인 과정을 거쳤습니다. 이 과정을 직접 보신다면 처음에는 "할 말을 잃을 수도 있습니다." AI가 마치 시니어 개발자처럼 꼼꼼하게 QA를 진행하는 모습까지 보여줍니다.

클로드가 스스로 만드는 todo 목록

5시간 MVP 완성 이후 백엔드 작업

MVP를 완성한 이후 저희는 계속해서 비즈니스 로직을 추가하고 코드를 다듬고 저희가 원하는 기능을 찾아서 추가하는 작업을 반복했습니다. 결국 처음만 어렵지 익숙해진 다음부터는 같은 작업의 반복이었던 것입니다. 서비스 규모가 점점 커지면서 Claude Code가 이해하기 힘들어할 것이라 생각했지만 의외로 문제없이 개발을 잘하더군요. 어쩌면 엔터프라이즈급 시스템을 설계하는 것이 가능할지도 모르겠다는 생각이 들 정도였습니다.

 

 

히스토리 관리 - AI가 Git도 다룬다

---

저희는 바이브 코딩을 하던 중 이런 얘기를 했습니다. "커밋도 AI가 해줄 수 있을까?"

바이브 코딩의 가장 큰 문제 중 하나는 속도였습니다. AI가 엄청난 속도로 코드를 수정하다 보니, 어느 순간 뭐가 바뀌었는지 파악하기 어려웠습니다. 마구잡이로 수정된 코드를 수동으로 커밋하면 "대규모 변경"이라는 의미 없는 히스토리만 남게 된다는 것을 뒤늦게 깨달았습니다.

 

그래서 시도해 봤습니다."Claude Code야, Git 관리도 네가 해줄래?" 놀랍게도 가능했습니다.

"기능별로 커밋 분리해서 한글로 커밋 메시지 작성해줘 prefix도 잘 붙여서"

Claude Code는 변경사항을 분석하고, 기능 단위로 커밋을 분리하고, 의미 있는 한글 커밋 메시지까지 작성했습니다. "feat: 사용자 인증 기능 추가", "fix: API 응답 형식 수정" 같은 식으로 체계적으로 관리해 줬습니다. 더 놀라운 건, 잘못된 커밋을 발견하면 스스로 리셋하고 다시 정리해서 커밋한다는 점이었습니다. 마치 Git을 능숙하게 다루는 시니어 개발자 같았습니다. (저보다 관리를 잘하길래 약간 슬펐습니다..)

클로드가 자동으로 한 커밋

이 과정을 지켜보니 상상이 펼쳐졌습니다. PR(Pull Request)까지 자동화하고, CodeRabbit 같은 리뷰 AI와 연동하면? Claude Code가 코드를 작성하고, CodeRabbit이 리뷰하고, 다시 Claude Code가 수정하고... AI끼리 핑퐁하며 코드 품질을 높인 뒤 마지막에 인간이 최종 승인만 하는 구조. 완벽한 AI 개발 파이프라인이 될 수 있을 것만 같았습니다.

 

제가 바이브 코딩을 하던 중 히스토리 관리의 중요성을 뼈저리게 느낀 사건이 발생했는데 소개드리도록 하겠습니다.

바이브 코딩을 하다 보면 멍해지면서 그냥 엔터만 누르게 됩니다.. 근데 제가 아무 생각 없이 누른 엔터가 코드를 삭제하는 명령이었던 것입니다. 아무것도 몰랐던 저는 갑자기 Claude Code가 이상한 말을 하길래 유심히 봤습니다. CLI 화면에 "사용자에게 솔직하게 말해야 한다"는 문장을 혼자 3번이나 반복하더니...

"정말 죄송합니다. 제가 실수로 모든 백엔드 코드를 삭제해버렸습니다."

이걸 본 순간 머릿속이 하얘졌습니다. 하루 종일 개발했던 작업이 완전히 사라진 것입니다. 심지어 git에 기록을 남겨두지 않았기에 git을 통해 코드를 복구할 방법도 없었습니다.

 

"AI가 스스로 rm -rf(삭제 명령어)를 실행하다니!"

 

다행히 침착하게 해결방안을 생각해 냈습니다. IntelliJ IDEA의 Local History 기능을 사용하여 코드를 복구할 수 있었습니다. 프로젝트 폴더에서 우클릭 → Local History → Show History를 통해 삭제 직전 상태로 되돌릴 수 있었습니다. 만약 이 기능이 없었다면? 5시간의 작업이 모두 날아갈 뻔했습니다. 이 사건 이후로 저희는 철칙을 만들었습니다.

1. 기능 하나 완성할 때마다 즉시 커밋
2. 중요한 변경사항은 즉시 푸시
3. AI에게도 커밋 규칙 교육

 

 

QA - AI가 알아서 테스트하다

---

문득 이런 생각이 들었습니다. "테스트도 자동화할 수 없을까?"

개발자라면 누구나 테스트의 중요성을 알지만, 동시에 가장 귀찮은 작업 중 하나입니다. 그래서 저희는 이것도 AI에게 맡기기로 했습니다. Claude Code의 테스트 방식은 인상적이었습니다. 단순히 유닛 테스트를 작성하는 수준이 아니었습니다.

"새로운 기능 테스트해줘"

이 한 마디에 Claude Code는

1. 백엔드 서버를 실행하고
2. 프론트엔드 서버도 실행하고
3. 브라우저를 열어서 실제로 클릭하고
4. 네트워크 탭을 확인하며 API 호출을 검증하고
5. 문제를 발견하면 즉시 수정까지

더 놀라운 건, 테스트를 위해 간이 웹페이지를 만들기도 했다는 점입니다. "이 API를 제대로 테스트하려면 폼이 필요한데..." 하면서 뚝딱 HTML 페이지를 만들어 테스트를 진행하더군요. 덕분에 기존에 Postman으로 일일이 API를 테스트하던 수고가 사라졌습니다. 서비스가 잘 만들어지고 있는지 보고 있는 저희에게 신뢰성도 주었습니다.

 

다만 한계도 명확했습니다. 하나의 API에도 수많은 시나리오가 있는데 이런 모든 케이스까지 AI가 알아서 테스트하진 못했습니다.

• 정상적인 요청
• 잘못된 파라미터
• 권한 없는 사용자
• 동시 다발적 요청
• 네트워크 오류 상황

하지만 생각해 보니, 만약 QA 전문가가 자신만의 AI 에이전트를 만들거나 사용해서 훈련시킨다면? 수백 가지 테스트 시나리오를 자동으로 실행하는 "10x AI QA 엔지니어"가 탄생할 수도 있겠다는 생각이 들었습니다.

 

 

문서화도 AI가?

---

프로젝트 문서화는 개발자들이 가장 싫어하는 작업 중 하나죠. 당연히 이것도 AI에게 맡기기로 했습니다.

여기서는 Google의 Gemini CLI를 활용했습니다. Claude Code와 비슷하지만 성능은 아직 부족했기에 개발에는 사용하지 않았습니다.  그러나 무료라는 큰 장점이 있었기 때문에 문서 작성에 활용하기에는 충분했습니다.

"프로젝트 구조 분석해서 README 작성해줘"

Gemini는 전체 프로젝트를 스캔하고, 아키텍처를 분석하고, API 문서를 생성하고, 심지어 설치 가이드까지 작성해 줬습니다. 생각보다 꽤 만족스러운 퀄리티였습니다.

 

 

배포는 수동으로

---

처음에는 배포 과정도 완전히 AI에게 맡기고 싶었습니다. AWS의 Amazon Q를 활용하면 IaC 템플릿 코드(Terraform)를 생성해 줄 수 있어서, 이 코드를 실행하면 인프라가 구축될 거라 기대했습니다. 하지만 현실은 달랐습니다. 가장 큰 문제는 비용이었습니다. 2박 3일짜리 프로젝트에 AWS 비용을 쓰기엔 부담스러웠습니다. (저는 프리티어도 다 사용해서 완전 무료 서비스를 사용하고 싶었습니다)

 

다행히 세상에는 무료 배포 서비스들이 많았습니다. ChatGPT와 긴 대화를 나누며 최적의 도구들을 찾아냈습니다. 프론트엔드는 Vercel, 백엔드는 Railway로 결정했습니다.

 

Vercel은 정말 간단했습니다. GitHub 저장소를 연결하기만 하면 끝. 배포 UI가 직관적이어서 5분이면 충분했고, 환경변수 설정도 너무 간단했고 코드를 푸시할 때마다 자동으로 재배포되는 것도 매력적이었습니다. 무료로 도메인까지 제공해 주니 프론트엔드 배포는 정말 쉬웠습니다.

vercel 배포 완료

반면 Railway를 통한 백엔드 배포는 조금 복잡했습니다. Railway의 가장 큰 장점은 PostgreSQL을 무료로 지원한다는 점이었습니다. Vercel처럼 GitHub와 연동되어 커밋이 발생하면 자동 배포되는 것도 좋았습니다. 하지만 환경변수 설정에서 난관을 만났습니다. PostgreSQL의 public URL을 환경변수로 설정해야 했는데, 이 부분이 조금 오래 걸렸습니다. 서버가 제대로 올라간 후에는 Settings 탭의 Networking 섹션에서 'Generate Domain' 버튼을 클릭해 접속 가능한 도메인을 생성했습니다. 프론트엔드와의 통신을 위해 CORS 설정도 추가로 필요했습니다.

railway 환경변수 설정

여기서 바이브 코딩의 한계를 경험했습니다. 환경변수 설정을 Claude Code에게 맡겨보려 했는데, 3시간 동안 계속 실패했습니다. Claude Code는 CLI를 통해 많은 것을 할 수 있지만, 웹 대시보드에 로그인해서 버튼을 클릭하고 폼을 작성하는 작업은 할 수 없었기 때문입니다. 왜 실패하는지 원인조차 명확하게 파악하지 못한 채 시간만 흘러갔습니다.

 

결국 제가 직접 Railway 대시보드에 접속해서 하나씩 수동으로 입력했습니다. 환경변수를 설정하고, 도메인을 생성하고, CORS를 구성하는 데 걸린 시간은 단 30분. AI가 3시간 동안 못한 일을 인간이 30분 만에 해결한 셈입니다.

 

이 경험을 통해 깨달은 것은 AI가 코드를 작성하고 로직을 구현하는 것은 정말 잘하지만, 아직 GUI 기반의 작업이나 외부 서비스의 대시보드를 조작하는 것은 어렵다는 점이었습니다. 배포 자동화의 꿈은 아직 완전히 실현되지 않았지만, 그래도 무료로 실제 작동하는 서비스를 배포하는 데 성공했으니 만족스러웠습니다. 언젠가는 AI가 브라우저를 조작하고 대시보드 설정까지 하는 날이 올 것입니다. 그때까지는 이런 작업들은 여전히 인간의 몫인 것 같습니다. (또는 방법은 존재하지만 제가 모르는 것일 수도 있습니다)

 

 

마무리하며

---

이렇게 2박 3일의 바이브 코딩 대장정이 끝났습니다.

돌이켜보면 정말 롤러코스터 같은 시간이었습니다. Claude Code와 함께한 백엔드 개발은 놀라울 정도로 빨랐습니다. 평소라면 한 달은 걸렸을 작업을 단 5시간 만에 끝냈으니까요. API 설계부터 DB 구축, 프론트엔드 연동까지 모든 게 자동으로 진행되는 걸 보며 "이게 미래의 개발 방식이겠구나" 싶었습니다.

 

하지만 동시에 AI의 한계도 명확히 봤습니다. Claude Code가 rm -rf로 모든 코드를 삭제했을 때의 그 절망감. 3시간 동안 Railway 배포에 실패하며 느낀 무력감. GUI를 조작할 수 없는 AI를 보며 "아직은 인간이 필요하구나"라는 안도감도 들었습니다. 가장 인상적이었던 건 AI가 "사용자에게 솔직하게 말해야 한다"라고 3번 중얼거리다가 코드 삭제를 고백했던 순간입니다. AI도 나름의 양심(?)이 있는 건가 싶어 당황스러웠습니다.

 

토큰 전쟁에서 배운 교훈도 컸습니다. 검증을 포함한 신중한 접근이 오히려 토큰을 아낀다는 것. 빠르게만 가려다 더 많은 비용을 쓸 수 있다는 것. 개발도 인생도 급할수록 돌아가야 한다는 옛말이 맞더군요. 무엇보다 중요한 건 우리가 해냈다는 사실입니다.

• 실제 작동하는 서비스 2개 완성
• 프론트엔드부터 백엔드까지 풀스택 개발
• 무료 배포까지 성공
• Git 자동화, QA 자동화 실현

물론 바이브 코딩은 완벽하진 않습니다. 유지보수는 어려울 것이고, 확장성도 의문이고, 코드 품질도 개선이 필요합니다. 하지만 2박 3일 만에 아이디어부터 배포까지 완료했다는 것 자체가 놀라운 성과 아닐까요? 다음 편에서는 드디어 완성된 서비스를 공개합니다. '인생 랜덤 미션'과 '동네 고양이 도감', 과연 어떤 모습일까요? 그리고 2박 3일간의 바이브 코딩을 통해 저희가 얻은 인사이트와 느낀 점 그리고 앞으로 AI 시대를 살아갈 개발자들에게 전하고 싶은 메시지를 정리하겠습니다.

To be continued...

 

2025.08.24 - [AI] - [바이브 코딩] #6: Monkeys 프로젝트 최종 보고

[바이브 코딩] #6: Monkeys 프로젝트 최종 보고