이번에 바이브 코딩을 경험해보기 위해 Claude를 사용해 오디오/비디오 파일을 업로드하면 AI가 번역 + 더빙해주는 웹 서비스 DubbAI를 만들어 봤어요.
기술 스택은 Next.js 16 + NextAuth + ElevenLabs API + DeepL API + ffmpeg.wasm + Turso DB + Vercel 배포인데요, 인증, 외부 API 3개, DB, 비디오 처리, 배포까지 풀스택을 커밋 기준 3일에 끝냈어요. 혼자 했으면 2주는 잡았을 것 같아서, 실제로 효과있었던 패턴들을 공유해 보려고 합니다.
AI 없이 혼자 했으면 막혔을 포인트
ffmpeg.wasm 클라이언트 사이드 비디오 처리 — 브라우저에서 영상에 더빙 음성을 합성해야 했어요. SharedArrayBuffer, CORS 헤더, WASM 로딩 이슈까지 삽질 포인트가 꽤 많은데, AI가 설정부터 에러 핸들링까지 한 번에 잡아줬습니다. 체감 4~5시간은 절약한 것 같아요.
NextAuth + Google OAuth + 화이트리스트 — 인증 자체는 쉬운데 화이트리스트 기반 접근 제어랑 미인가 사용자 리다이렉트 플로우까지 붙이면 경우의 수가 확 늘어나더라고요. AI가 미들웨어 구성까지 한 사이클에 완성해줬습니다.
진짜 효과 있었던 패턴 4가지
1. "계획만 세우고, 구현하지 마"
처음엔 AI한테 바로 코드를 시켰는데, 방향이 틀어진 채로 수백 줄이 쏟아지는 경험을 했어요. 그래서 계획을 먼저 받아서 제가 검토한 뒤에 구현을 시키는 방식으로 바꿨더니 차이가 컸습니다.
"코드는 구현하지 말고 계획만 작성해줘"
이 한 줄이 전부예요. 계획서를 보면서 "여기서 서비스 레이어를 분리하자", "이 순서는 바꾸자" 같은 피드백을 주고 나서 구현을 요청하는 방식이에요. Plan-Do-Check-Act(PDCA) 사이클인데, Plan 단계에서 개발자가 직접 개입하는 게 핵심입니다.
처음엔 시간이 더 걸릴 것 같았는데, 오히려 총 개발 시간이 확 줄었어요. 초기 계획에서 "서비스 로직이 API 라우트에 섞여 있다"는 걸 발견하고 미리 분리했더니, 나중에 테스트 작성도 쉽고 유지보수도 깔끔했습니다. 계획 10분이 구현 2시간을 절약해주는 셈이에요.
저는 계획을 부탁할 때 Plannotator라는 플러그인을 사용하는 편이에요.
위 이미지처럼 계획을 담은 마크다운을 웹으로 열어주는데 웹에서 커멘트 등을 남겨서 바로 수정을 할 수 있어요. 커멘트는 특정 부위에 달 수도 있고, 글로벌 커멘트로 전체에 관해서 남길 수도 있습니다. 수정을 다하고 우측 상단에 버튼을 누르면 AI가 계획서를 기반으로 개발을 진행해줍니다.
2. 처음 만나는 프레임워크도, 코딩을 몰라도 AI가 다리를 놔준다
저는 Swift 개발자라 iOS에서는 MVVM 패턴을 즐겨 사용했어요. 근데 이번 프로젝트는 Next.js였거든요. 그래서 물었습니다
"Next.js 생태계에서도 MVVM처럼 비즈니스 로직을 깔끔하게 분리하는 패턴이 있을까요?"
AI가 서비스 레이어 패턴을 찾아서 설명해주고, DeepL 서비스/ElevenLabs 서비스/DB 레이어를 분리하는 프로젝트 구조까지 제안해줬어요. "아, 이게 TypeScript 세계의 클린 아키텍처구나" 하고 바로 감이 왔습니다.
이게 단순히 "언어를 바꿀 때"만의 이야기가 아니에요. 코딩 지식이 전혀 없는 상태에서도 동일하게 적용됩니다. AI는 "서비스 레이어가 뭔지 몰라도 괜찮아요, 이렇게 하면 나중에 유지보수가 쉬워집니다"라는 식으로 이유와 함께 설명해주거든요. 결국 본인이 어느 수준에 있든 그 수준에 맞는 다리를 놔준다는 게 핵심인 것 같아요.
보통 새 프레임워크는 "공식 문서 읽고 → 튜토리얼 따라 하고 → 삽질하고..." 여기서 몇 주가 날아가잖아요. 그런데 AI가 "당신이 이미 아는 패턴을 이 언어에서는 이렇게 표현해요"라고 번역해주니까 학습 곡선이 확 완화됐어요. 3일 만에 끝낼 수 있었던 핵심 요인이었습니다.
3. 교차 검증 — 구현한 AI한테 검증 시키지 마세요
이게 제가 했던 가장 비싼 실수였어요. 코드를 짠 AI한테 "잘 됐는지 확인해줘"라고 하면 자기 코드를 감싸는 확증 편향이 생기거든요. 반드시 다른 대화창이나 다른 역할을 부여한 AI로 검증해야 합니다.
"방금 구현한 코드를 시니어 개발자 관점에서 코드 리뷰해줘"
실제로 이렇게 했더니 첫 번째 AI가 놓쳤던 에러 처리 누락, 타입 불일치 같은 문제가 바로 나왔어요. 비동기 처리에서 await을 빼먹은 부분도 캐치해줬는데, 안 했으면 런타임에 터졌을 버그였습니다.
"보안 관점에서 봐줘", "성능 관점에서 봐줘" 같이 역할을 바꿔서 검증하면 배포 전에 잡히는 문제가 확실히 많아졌어요. 덕분에 배포 후 핫픽스 없이 기능을 계속 추가할 수 있었습니다.
4. 목표만 걸어두면 알아서 반복한다
목표 조건을 걸어두면 AI가 스스로 구현 → 테스트 → 수정을 반복해줍니다.
"테스트가 전부 통과할 때까지 스스로 수정해줘"
Jest가 Playwright E2E 파일을 픽업해서 실패하는 문제도 이 루프 안에서 testPathIgnorePatterns 설정으로 알아서 해결됐어요. 최종적으로 테스트 21개 전체 통과했습니다 (유닛 + 통합 + E2E).
목표만 걸어두면 AI가 실패 로그를 읽고, 원인을 찾고, 수정하는 과정을 자동으로 반복하니까 그 사이에 다른 작업을 진행할 수 있었습니다. 독립적인 작업이 여러 개라면 병렬로 맡기는 것도 가능해요.
다음 3가지를 병렬로 처리해줘:
1. DeepL 서비스 레이어
2. ElevenLabs 서비스 레이어
3. 위 두 서비스의 유닛 테스트
의존성 없는 작업은 항상 병렬로 요청하면 체감 2~3배 빠릅니다.
마치면서
AI 코딩 에이전트는 "코드를 대신 짜주는 도구"라기보다는 "내가 방향을 잡아주면 실행을 가속해주는 도구"에 가까운 것 같아요. 계획 없이 시키면 방향이 틀어지고, 검증 없이 믿으면 버그가 쌓이더라고요.
핵심을 요약하면 이렇습니다
- 계획 먼저, 구현 나중에 — 계획 10분이 디버깅 2시간을 줄여줍니다
- 모르는 건 AI한테 번역을 맡기기 — 코딩을 몰라도, 언어가 처음이어도 높은 품질의 결과물이 나옵니다
- 만든 AI와 검증하는 AI를 분리하기 — 확증 편향 차단이 품질의 핵심
- 목표 조건 걸고 자동 반복 — 손 놓고 있어도 테스트가 초록불로 바뀝니다
코드와 계획서 전체는 GitHub에서 보실 수 있어요. 내용이 공감가거나 도움이 된 경우 Star를 눌러주세요. 궁금한 점 있으시면 댓글로 편하게 남겨주세요.
