처음 바이브코딩을 해보며 느낀 점

AI 활용 능력이 커리어의 핵심이 된 시대입니다. 저도 이에 동의하여 바이브코딩을 시작했어요. 사실 완전히 처음은 아닙니다. 웹플로우에서 화면을 구성하고 API를 호출할 때 AI의 힘을 빌리는 경우는 자주 있었으니까요. 그래도 서버까지 AI의 힘을 빌려 개발하는 건 이번이 처음이었습니다.

저는 2015년까지 피처폰을 쓰던 사람으로, 트렌드를 빠르게 따라가는 타입은 아닙니다. UX/UI 디자인도 2010년부터 유행이었는데 시작한 건 2018년이었어요. 그래도 새로운 것을 배우는 걸 어려워하지 않는 편입니다. 늦게 시작했지만 소프트웨어 기획으로 잘 버텨왔고, 이번에도 UI 디자이너 시절 배웠던 개발 공부와 IT 회사에서 쌓은 경험 덕분에 비교적 수월하게 시작할 수 있었습니다.

‍

기존 방식의 한계

바이브코딩 이전에는 Webflow로 화면을 만들고, 서버는 Xano로 구현했습니다. 컴퓨터에 별도로 설치하는 것 없이 원하는 도메인에 배포할 수 있어서 장점이 많았어요. 하지만 Xano를 쓰면서 몇 가지 치명적인 한계를 만났습니다.

외부 API를 호출할 때 인터페이스를 벗어난 형식 오류가 자주 생겼습니다. 파라미터를 object로 설정했는데 array가 자동으로 삽입되는 식이었고, 이럴 때는 처음부터 다시 만들어야 했어요. 모든 동작을 한 땀 한 땀 직접 작성해야 하는 것도 문제였습니다. 로직의 순서, 루프 구조, if 조건까지 모두 손수 설계해야 했죠. AI에게 백엔드 원리는 물어볼 수 있었지만, Xano의 인터페이스는 대부분의 AI가 잘 몰랐습니다. 결국 인터페이스는 직접 찾아 조작해야 했어요. 무엇보다, 조금 복잡한 구현은 아예 불가능했습니다. 업비트 주문 API나 X.ai 파일 업로드 API처럼 HS512나 multipart/form-data가 필요한 경우가 그랬어요.

결국 백엔드에서 페인포인트가 너무 많았고, 바이브코딩으로 넘어가야 하는 상황이 됐습니다.

‍

기술 스택을 단순하게 가져간 이유

세팅을 시작하면서 고려한 건 두 가지였습니다. 기술 스택을 단순하게 유지하는 것, 그리고 AI 솔루션에 불필요한 비용을 쓰지 않는 것이었어요.

React나 Node.js는 기본으로 세팅해두면 좋지만, 이 둘을 시작하는 순간 TypeScript, Next.js, Nest.js 같은 선택지들이 따라옵니다. 제가 만들려는 건 단순히 서버 호출이 있는 수준의 웹앱이었기 때문에, 순수한 HTML, CSS, 자바스크립트로 구성하는 쪽을 택했습니다. HTML과 CSS의 장점 중 하나는 별도 빌드 없이도 바로 테스트가 가능하다는 점이에요. 코드를 편집하고 저장한 뒤 파일을 열면 바로 확인할 수 있으니까요.

커서 AI나 클로드 코드가 바이브코딩에 좋다고들 하지만, 개발을 업으로 삼는 단계가 아니라면 굳이 매달 $100를 낼 필요는 없다고 생각했습니다. 재미있을지 없을지 모르는 게임을 현질하며 시작하는 건 바람직하지 않으니까요. 클로드 무료 버전으로도 원하는 부분을 파일로 제공해줘서, 속도가 살짝 느린 것 외에는 큰 불편함이 없었습니다.

‍

Vercel과 Supabase를 선택한 이유

Vercel의 가장 큰 매력은 하나의 레포지토리에서 프론트와 서버를 모두 구현할 수 있다는 점입니다. 예전에 Webflow와 Xano를 함께 쓸 때는 다달이 5만 원이 넘는 비용이 발생했는데, Vercel로 이 둘을 하나로 합치면 비용을 크게 줄일 수 있을 것이라는 기대가 생겼어요.

Supabase는 크로스 프로젝트를 하면서 알게 된 서비스입니다. Xano를 버리면서 별도 DB가 필요했는데, 연동 과정이 생각보다 훨씬 간단했어요. 특히 이메일 인증 구현이 인상적이었습니다. 예전에는 코드 생성, 이메일 발송 API 연결, 인증 확인 로직을 모두 직접 만들어야 했는데, Supabase는 원하는 인증 방식을 거의 완벽하게 자체 제공하고 있었습니다. Magic Link도 지원하고 있어서 원하는 방식을 골라 쓰면 됩니다. 무료로 보낼 수 있는 이메일 수가 제한적이라 Resend를 추가로 연동했는데, 이것도 연동이 매우 쉬웠어요.

‍