매주 저는 "AI로 4시간 만에 SaaS를 만들었습니다"라는 게시물을 또 하나씩 보게 됩니다. 그리고 매주 댓글은 똑같습니다: "멋지네요, 하지만 Stripe 통합이 실제로 작동하나요?" 보통은 작동하지 않습니다. 그것이 바로 바이브 코딩 (vibe coding)입니다. 당신은 프롬프트(prompt)를 입력하고, AI가 실제로 테스트해 본 적도 없는 결제 흐름을 올바르게 구현하기를 희망하며 기도합니다. AI는 웹훅 핸들러 (webhook handlers)를 환각 (hallucinate)하고, 이메일 설정 (email configs)을 추측합니다. 첫 번째 실제 트랜잭션에서 깨져버리는 체크아웃 흐름 (checkout flows)을 구축합니다. 우리는 정반대의 접근 방식을 취했습니다.

퍼즐 조각 패턴 (The puzzle piece pattern)
우리는 WebsitePublisher.ai를 구축하고 있습니다. 이는 AI 어시스턴트가 대화를 통해 웹사이트와 웹 애플리케이션을 구축하고 게시하는 플랫폼입니다. MCP 프로토콜을 통해 9개의 AI 플랫폼 (Claude, ChatGPT, Gemini, Cursor, Windsurf, GitHub Copilot, Grok, Mistral, n8n)에서 사용할 수 있습니다. 지난 16일 동안, 우리는 78개의 통합 (integrations)을 출시했습니다. 각각은 독립된 퍼즐 조각이며, 우리의 웹 서버에서 실행되는 검증된 소프트웨어입니다. AI는 통합 코드를 생성하지 않습니다. AI는 통합을 호출합니다. 실제 사례는 다음과 같습니다:

사용자: "Stripe 결제와 주문 확인 이메일이 있는 웹숍이 필요해요"
AI 선택:
→ product-catalog (MAPI 엔티티 + 헬퍼)
→ shopping-cart (세션 기반)
→ checkout-flow (오케스트레이션 엔진)
→ stripe (결제 처리)
→ invoice-generator (PDF + 회계)
→ email-templates (Resend 렌더링)

결과: 6개의 테스트된 퍼즐 조각이 결합되어 작동하는 애플리케이션이 됩니다. 환각된 Stripe 웹훅은 제로입니다. 추측된 SMTP 설정도 제로입니다. 힘든 작업은 서버의 검증된 소프트웨어에서 이루어집니다.

이것이 중요한 이유
바이브 코딩 (vibe coding)의 근본적인 문제는 AI에게 두 가지 일을 동시에 요구한다는 점입니다:

1. 당신이 원하는 것을 이해하기 (AI는 이를 매우 잘합니다)
2. 신뢰할 수 있는 인프라 (infrastructure) 구현하기 (AI는 이를 매우 못합니다)

WAVE 코딩은 이 두 가지를 분리합니다. AI는 1번—당신의 의도를 이해하고 적절한 퍼즐 조각을 선택하는 일을 처리합니다. 검증된 소프트웨어는 2번—실제 Stripe 호출, 이메일 전송, 데이터베이스 쿼리 (database queries)를 처리합니다.

78개의 퍼즐 조각에 담긴 것

16일 동안 출시된 기능 중 주요 하이라이트:

E-commerce 스택: 상품 카탈로그 (Product catalog), 장바구니 (shopping cart), 결제 흐름 (checkout flow), 주문 관리 (order management), 재고 추적 (inventory tracking), 배송 (MyParcel), 인보이스 생성 (invoice generation), 할인 코드 (discount codes)
통신 (Communication): SMTP 이메일, 이메일 템플릿, 문의 양식 (contact forms), 다층 스팸 방지 (multi-layer spam protection)
데이터 계층 (Data layer): SEO를 위한 서버 사이드 렌더링 (Server-side rendering), 배치 업데이트/삭제 엔드포인트 (batch update/delete endpoints), 검증 기능이 포함된 데이터 그리드 (data grids with validation)
AI 계층 (AI layer): Coach (가이드형 웹사이트 생성), 컨셉 생성 (concept generation), 스트리밍 채팅 (streaming chat)
플랫폼 강화 (Platform hardening): DNSSEC, 요청 추적 (request tracing), 에러 엔벨로프 표준화 (error envelope standardization), 보안 강화 (security hardening)

각 조각은 동일한 패턴을 따릅니다: 핸들러 (handler)가 엔드포인트 (endpoint), 입력값 (input), 그리고 프로젝트 ID (project ID)를 수신합니다. 의존성 (Dependencies)은 명시적입니다. 마법은 없습니다.

결과물
동일한 16일 동안:

• 7명의 신규 고객 온보딩 (onboarded)
• PSV 서포터즈(30,000명 회원)를 위한 월드컵 예측 게임 배포
• 비주얼 에디터 (Visual editor) 업그레이드 출시
• Coach AI 가이드 시스템 개선

우리는 이것을 WAVE 코딩이라 부릅니다.
단순히 영리한 약어이기 때문이 아닙니다. 당신이 구축하는 각 애플리케이션이 하나의 파도(wave)이기 때문입니다. 즉, 기존의 퍼즐 조각들을 결합하여 새로운 무언가를 만들어내는 하나의 의도적인 추진력입니다. 각 파도는 이전의 것 위에서 쌓아 올려집니다.

Vibe 코딩은 어딘가 유용한 곳에 도달하기를 바라는 무작위적인 에너지입니다. WAVE 코딩은 의도적인 모멘텀 (deliberate momentum)입니다. 🌊

여러분의 생각은 어떠신가요? 여러분은 AI가 사용할 인프라를 구축하고 계신가요, 아니면 AI가 처음부터 인프라를 구축하도록 내버려 두고 계신가요?
websitepublisher.ai