불과 1년도 안 돼서 바이브 코딩(Vibe Coding)이라는 용어가 대세가 되었습니다. 미국의 개발 현장에서도 이러다 일자리가 없어지는 것 아닌지 걱정하는 사람이 많아졌고, 그 와중에 발 빠르게 AI 기술을 익혀 개발자에서 프로덕트 메이커로 커리어를 전환하고 있는 사람도 있습니다. 저 역시 이대로 있으면 안 되겠다는 생각에 클로드 코드(Claude Code)로 회사 업무뿐만 아니라 다양한 사이드 프로젝트를 진행하면서 아이디어를 테스트해 보고 있습니다.

그중 하나가 바로 최근에 배포해서 운영을 시작한 ‘센드피컴페어’라는 해외 송금 비교 서비스입니다. 이번 글에서는 제가 클로드 코드로 실제 서비스를 만들어 출시하기까지의 과정, 그리고 개인적으로 느낀 바이브 코딩의 실제 효용과 한계를 공유해 보고자 합니다.

미리 요점만 콕 집어보면?

클로드 코드로 실제 서비스를 만들어 출시하기까지의 과정과 개인적으로 느낀 바이브 코딩의 실제 효용과 한계를 공유합니다.
12개 이상의 업체 스크래퍼, 17개 이상의 서비스 모듈, 6개의 자동화 워크플로우를 1인으로 몇 주만에 구현할 수 있었던 것은 AI 코딩 도구의 도움 없이는 불가능했을 것입니다.
AI가 코드를 대신 작성해 주는 만큼, 개발자의 역할은 코드를 작성하는 사람에서 프로덕트를 설계하고 판단하는 사람으로 변해야 합니다.

프로젝트의 시작

이번 프로젝트의 아이디어는 개인적인 불편함에서 시작되었습니다. 저는 미국에 거주하면서 한국에 있는 가족에게 송금할 일이 자주 있었습니다. 부모님께 생활비를 보내거나, 한국에 남아 있는 금융 계좌를 관리하거나, 경조사를 챙겨야 하는 경우가 대표적인데요. 문제는 은행이나 송금 업체마다 적용 환율이 다르고, 수수료 구조가 제각각이라는 점이었습니다.

송금액이 큰 경우에는 어떤 은행, 어떤 업체를 쓰는지에 따라 실제로 한국에 송금되는 돈의 차이가 꽤 컸습니다. 그래서 이전에는 어디가 가장 유리한지 따져보기 위해 각 업체의 웹사이트를 열어 금액을 입력하고, 구글 스프레드시트로 비교했습니다. 그런데 그 과정이 매번 번거로웠죠. 그래서 이걸 자동화할 수 있지 않을까 하는 생각에 이번 프로젝트를 시작하게 되었습니다.

기술 스택과 바이브 코딩 환경 세팅

1) 기술 스택 구성

개인적으로 사이드 프로젝트에서 가장 중요하게 생각하는 요소는 출시까지의 속도와 운영 비용의 최소화입니다. 아무리 좋은 아이디어라도 만드는 데 너무 오래 걸리면 동력을 잃기 쉽고, 수익이 불확실한 상황에서 높은 운영 비용은 프로젝트를 지속 가능하지 않게 하기 때문입니다.

그래서 프레임워크로는 프론트엔드와 백엔드를 하나의 프로젝트에서 관리할 수 있고, 검색 엔진 최적화(SEO)에 유리한 서버 사이드 렌더링(SSR)을 지원하며, 버셀(Vercel)을 통해 무료로 배포할 수 있는 넥스트(Next.js)를 선택했습니다.

데이터베이스와 사용자 인증은 슈퍼베이스(Supabase)로 해결했는데, 무료 티어만으로도 PostgreSQL 데이터베이스, 사용자 인증, 실시간 구독 기능을 모두 사용할 수 있어 별도의 서버 비용이 들지 않았습니다. 사실 요즘에는 더 좋은 대안들이 나오고 있지만, 버셀(Next.js) + 수파베이스(PostgreSQL) 조합은 이미 많은 Saas 개발에 사용되었기에, 대부분의 경우 무난한 선택이라고 판단했습니다.

아울러 매시간 각 업체의 환율과 수수료 데이터를 자동으로 수집하기 위해 깃허브 액션(GitHub Actions)을 사용했습니다. 이를 통해 정기적인 스크래핑을 추가 비용 없이 운영할 수 있었죠. 결과적으로 현재 운영 비용은 도메인 구입 비용을 제외하면 사실상 0원에 가깝습니다.

이번 프로젝트에서 주로 사용한 AI 코딩 도구는 클로드 코드였습니다. 참고로, 클로드 코드는 엔트로픽(Anthropic)에서 만든 터미널 기반의 AI 코딩 도구입니다. 개인적으로 생각하는 클로드 코드의 장점은 프로젝트의 컨텍스트(Context)를 깊이 이해한 상태에서 전반적인 프로젝트 구조와 기존 코드 패턴에 맞는 코드를 작성해 준다는 점입니다.

저는클로드 코드 맥스(Max)를 구독해서 사용 중이며, 비주얼 스튜디오 코드(VS Code)와 워프(Warp) 터미널을 이용해, 2~3개의 에이전트(agent)를 병렬로 이용했습니다. 프로젝트 중간에는 클로드 코드가 계속 일하도록 하는 랄프 루프(Ralph Loop)를 쓰기도 했습니다. 하지만 프로젝트가 제가 생각했던 것과 다른 구조로 만들어지는 것을 보고 더 이상 사용하지 않았습니다.

핵심 기능 구현 과정

1) PRD 작성과 UI 설계

프로젝트 초기 PRD(Product Requirements Document, 제품 요구사항 문서)를 설계할 때는 클로드 코드와 제미나이(Gemini)를 함께 사용하여, 교차 검증하는 방식을 취했습니다. 한쪽에서 작성한 PRD를 다른 쪽에서 리뷰하고, 빠진 요구사항이나 논리적 허점을 잡아내는 방식이었는데요. 초기 PRD 작성 시 전반적인 프로젝트 아키텍처와 각 Phase 별 플래닝도 동시에 문서화했습니다.

UI 디자인은 피그마(Figma)를 활용하여, 전체적인 레이아웃과 컴포넌트(Component) 구조를 잡은 후, 클로드 코드를 통해 실제 코드로 구현하는 방식으로 진행했습니다. 이처럼 클로드 코드를 중심으로 제미나이와 피그마를 보조적으로 활용하는 것이 이번 프로젝트에서 수행한 바이브 코딩 환경이었습니다. 다만, 최근에는 피그마 외에도 UI 디자인에 활용할 수 있는 좋은 툴들이 많아, 다음 프로젝트에는 다른 방식의 UI 디자인을 테스트해 보려고 합니다.

2) 송금 업체 데이터 수집 프로세스 구현

현재 미국 한국 간 송금을 지원하는 은행과 업체는 수없이 많습니다. 그중에서 우선 한인들이 가장 많이 사용하는 와이즈(Wise), 와이어바알리(WireBarley), 레밋리(Remitly) 같은 핀테크 업체와 뱅크오브아메리카(Bank of America) 같은 시중 은행 등 12개 이상의 업체 데이터를 자동으로 수집하는 프로세스를 만들었습니다.

데이터 수집을 위해 기본적으로 퍼피티어(Puppeteer)로 브라우저를 띄워 실제 사용자처럼 금액을 입력하고 수취 예상액을 확인하며, 정적 페이지인 경우에는 치리오(Cheerio)로 데이터를 파싱하도록 했습니다. 수집된 데이터는 DB에 저장되며, 기준 환율(Mid-market Rate)과의 차이도 함께 기록하여 각 업체가 얼마나 환율 마진을 가져가는지까지 파악하도록 했습니다. 그리고 이러한 프로세스를 구현하기 위해 클로드 코드를 통해 각 업체별로 스크립트를 생성했습니다.

3) AI 분석 기능 구현

데이터 비교를 넘어, 사용자에게 실질적인 판단 근거를 제공하기 위해 AI 분석 기능도 추가했습니다. 이를 위해 오픈AI API를 활용하여 두 가지 기능을 만들었습니다. 하나는 AI가 비교 결과 설명해 주는 것으로 "왜 이 업체가 이 금액 구간에서 유리한지"를 환율 마진, 수수료 구조, 현재 프로모션 등을 종합하여 자연어로 설명해 주는 기능입니다.

두 번째는 송금 타이밍 분석으로 최근의 환율 추이를 분석하여, 지금 돈을 보내는 것이 유리한지, 조금 기다리는 것이 나은지에 대한 의견을 제공하는 기능입니다. 다만, 이런 AI 기능을 도입하면서 비용 대비 효용이라는 현실적 고민도 생겼습니다.

비록 GPT-4o-mini라는 비교적 저렴한 모델을 선택했지만, API 호출 건수가 늘어나면 비용이 무시할 수 없는 수준이 되기도 합니다. 특히 무료 사용자에게까지 AI 분석을 무제한 제공하면, 수익 없이 비용만 증가하는 구조가 됩니다.

따라서 AI 분석을 회원 가입이 필요한 프리미엄 기능으로 분류했고, 이는 기술적 판단이 아니라 일종의 비즈니스 측면의 결정이었습니다. 아울러 지속적인 수익 창출을 위한 다양한 CTA(Call to Action) 요소도 배치했습니다.

바이브 코딩의 실제 효용과 한계

1) AI가 잘 도와준 부분

바이브 코딩이 특히 빛을 발한 영역은 UI 컴포넌트 개발과 비즈니스 로직 생성, 그리고 빠른 프로토타이핑이었습니다. 예를 들어, 클로드 코드에 "송금 업체 비교 결과를 카드 형태로 보여주는 컴포넌트를 만들어줘. 실수령액이 높은 순서대로 정렬하고, 각 카드에는 업체 로고, 환율, 수수료, 실수령액을 표시해줘"와 같이 요청하면, 테일윈드 CSS가 적용된 깔끔한 컴포넌트가 바로 생성되었습니다.

비록 미세 조정은 필요했지만, 직접 코드를 작성하는 것과는 비교도 되지 않는 속도였습니다. 또한 "이런 레이아웃으로 비교 화면을 만들어보자"라는 생각을 단 몇 분 안에 실제 동작하는 UI로 만들 수 있었습니다.

이번 프로젝트에는 비교 계산, 환율 관리, 스크래핑, AI 분석, 게시판, 이메일 발송, 구독 관리 등 총 17개의 서비스 모듈이 있었는데, 각 모듈의 기본 구조 위에 AI가 빠르게 비즈니스 로직을 채워 넣는 방식으로 작업을 진행했습니다. 아울러 12개 이상의 업체 데이터를 다루다 보면 데이터 파싱(Parsing), 포맷 변환, API 응답 처리 등에서 유사한 패턴의 코드가 반복되는데, 클로드 코드에 이런 패턴을 스킬(skill)과 문서로 제공하여 보다 효율적으로 일관된 코드를 만들 수 있었습니다.

2) 바이브 코딩의 한계

반면, 아직은 모든 개발을 AI에게 전적으로 맡기기 어려운 부분도 분명히 있었습니다. 특히 어느 정도 바이브 코딩으로 프로젝트를 진행하다 보면, 무지성으로 Yes를 클릭하는 시점이 오게 되는데, 이때가 가장 위험한 단계였습니다. 프로젝트 구조와 패턴의 일관성이 무너지기 시작하고, 이미 만들어진 기능과 유사한 중복 코드가 발생했습니다. 결국 기존 기능이나 UI에 버그가 생기기 시작하고, 이를 디버깅하는 시간도 점차 늘어나게 되었습니다.

데이터 아키텍처 설계도 마찬가지입니다. 12개 이상 업체의 서로 다른 수수료 구조(정액제, 정률제, 환율 내재형 등)를 어떻게 정규화하여 하나의 비교 테이블로 만들 것인가, 스크래핑 데이터의 이력은 어떻게 관리하고 최신 데이터는 어떤 기준으로 갱신할 것인가와 같은 문제에는 어느 정도 데이터베이스와 관련된 지식이 필요했습니다.

예를 들어, AI에게 단순히 "송금 수수료 비교 시스템을 설계해줘"라고 요청하면 일반적인 구조를 제안해 주지만, 실제 업체들의 특수한 수수료 구조까지 반영한 DB 설계는 개발자의 판단이 필요했습니다.

서비스 운영 비용과 관련된 현실적 제약에 대한 판단도 마찬가지입니다. 업체 정보를 실시간으로 스크래핑하는 것은 기술적으로 가능하지만 현실적으로 비용 이슈가 있으며, 유지보수가 어렵다는 판단을 내려야 했습니다. 그래서 송금 금액 구간을 나누고, 실시간이 아닌 정기 스크래핑으로 타협하는 결정을 내렸습니다.

개인적으로 이와 같은 판단은 시스템 운영 경험에서 나오는 것이라고 생각합니다. AI는 대부분 "이상적인" 솔루션을 제시하는 경향이 있어, 이런 트레이드오프(Trade-off) 결정까지 기대하기는 어려웠습니다.

정리하자면, 아직까지 바이브 코딩은 0에서 1을 만드는 도구가 아니라1을 10으로 만드는 가속기에 가까운 것 같습니다. 간단한 랜딩 페이지나 프로토타입 수준이라면 코딩 경험 없이도 만들 수 있지만, 실제 사용자에게 서비스하는 수준의 프로덕트를 만들려면 AI가 프로젝트 구조를 일관성 있게 가져갈 수 있도록 가이드라인(CLAUDE.md 및 프로젝트 문서 구조 설계 등)을 마련하고, 시스템 운영에 필요한 판단을 내릴 수 있어야 합니다. 아울러 기본적인 보안 지식과 AI가 생성한 코드를 이해할 수 있는 수준의 능력은 여전히 필요하다고 생각합니다.

사용자 반응과 향후 개선 계획

1) 커뮤니티 공유 후 피드백

저는 이번에 개발한 서비스를 마일모아라는 미국 한인 커뮤니티에 제작기를 공유했습니다. 해당 글은 6,000회 이상의 조회수를 기록하며 실제 해외 송금 사용자들의 구체적인 피드백을 받을 수 있었습니다. “다른 송금 업체도 더 추가해 달라", "업체별 사용 후기를 공유할 수 있으면 좋겠다" 등의 개선 요청이 있었고, 이를 반영하여 2차 업데이트를 진행했습니다.

이번 업데이트에서는 송금과 관련된 정보와송금 업체의사용 후기를 공유할 수 있는게시판 기능을 추가하고, 사용자가 원하는 환율 조건을 설정해 두면 조건이 충족될 때 자동으로 알림을 보내는 로그인 기반 환율 알림 기능도 도입했습니다. 이를 통해 사용자의 지속적인 참여를 이끌고자 했죠.

3) 향후 개선 계획

프로젝트를 배포한 후 궁극적으로 구현하고자 하는 것이 무엇인지에 대한 고민도 하게 되었습니다. 최종적으로 사용자가 자신의 조건과 선호 기간만 설정해 두면, AI가 환율 흐름과 수수료 구조를 지속적으로 관찰하다가, 가장 유리한 시점에 가장 적절한 송금 서비스를 선택해 자동으로 송금까지 처리하는 서비스를 만들어 보고 싶다는 생각이 들었고요.

아울러 계속해서 발전하는 바이브 코딩 개발 방식도 다음 업데이트에 적용해 보고자 합니다. 특히 여러 AI 에이전트(Agent)에게 각각 다른 역할(코드 작성, 코드 리뷰, 테스트 생성 등)을 맡기고, 이를 조율하는 오케스트레이션(Orchestration)과 다양한 멀티 에이전트 워크플로(Multi-Agent Workflow)를 실험하고, 이러한 경험도 정리하여 공유해볼까 합니다.

마치며

이상 클로드 코드를 활용한 바이브 코딩으로 해외 송금 비교 서비스를 기획부터 출시까지 한 경험을 정리해 보았습니다. 이번 프로젝트에서 제가 경험한 바이브 코딩은 개발자의 생산성을 급격히 높여 주었습니다. 12개 이상의 업체 스크래퍼, 17개 이상의 서비스 모듈, 6개의 자동화 워크플로우를 혼자 몇 주 만에 구현할 수 있었던 건 AI 코딩 도구의 도움 없이는 불가능했을 겁니다.

다만, 서비스를 온전히 출시하기 위해서는 기획, UI/UX, 마케팅, 보안, 운영 등에 대한 노하우가 필요하다는 점도 분명했습니다. AI가 코드를 대신 작성해 주는 만큼, 개발자의 역할은 코드를 작성하는 사람에서 프로덕트를 설계하고 판단하는 사람으로 변해야 한다고 생각했죠.

AI 시대에 개발자가 사이드 프로젝트를 통해, 아이디어를 실현하는 것이 그 어느 때보다 쉬워진 것이 사실입니다. 따라서 이런 서비스가 있으면 좋겠다는 아이디어를 가지고 있는 개발자라면, 바이브 코딩을 활용하여 직접 만들어 보는 것을 추천합니다. 불편함을 해결하는 작은 서비스 하나가 많은 사람에게 도움이 될 수 있을 겁니다.