바이브 코딩으로 홈페이지를 만들다
어떻게 혼자서 서비스를 만들었는가
그 작은 실험은 최근 화제인 '바이브 코딩'으로 시작됐다. 바이브 코딩이란 생성형 AI의 도움을 받아 코드를 작성하는 행위를 뜻한다. 이것을 활용하면 누구나 서비스를 만들 수 있다는 점이 매력적이었다. 그래서 나는 바이브 코딩으로 자기소개서 작성 AI 서비스 개발에 도전했다. 그리고 이번 실험을 위한 두 가지 규칙을 정했다.
1) '완벽한 서비스'보다 '빠른 실험'을 우선한다.
누구나 그럴싸한 아이디어를 가지고 있기 마련이다. 혼자서 생각해 보면 세상을 뒤바꿀 천재적인 발상이지만, 시장은 아주 냉정하고 공평한 심사위원이다. 그래서 나는 MVP를 빠르게 개발·배포한 뒤, 광고를 집행해서 서비스 수요를 검증하는 것을 목표로 정했다. 서비스를 고도화할 것인지, 드롭할 것인지는 광고로 유입되는 사용자 반응을 확인한 뒤에 판단할 수 있었다.
2) Cursor를 활용한 바이브 코딩으로 핵심 기능만 빠르게 개발한다.
바이브 코딩을 제대로 맛보고 싶어서 Cursor로만 서비스를 개발하기로 했다. 먼저 내 머릿속에 있는 서비스 플로우와 기능을 제품 요구사항 정의서(PRD)로 작성하고, Cursor에게 '이건 자기소개서 생성 서비스를 위해 내가 작성한 PRD야. 일단 이 문서를 읽고 기억해줘'라는 프롬프트로 첫 삽을 뜨기 시작했다.
디자인은 항상 함께 고민해 주는 동료인 프로덕트 디자이너 J군에게 도움을 받았다. J군의 도움으로 완성된 디자인을 어떻게 하면 코드로 바꿀 수 있을까 고민하던 중 MCP(Model Context Protocol)를 알게 되었고, MCP로 Figma와 Cursor를 연결하면 자연어로 프론트엔드를 구축할 수 있다는 걸 알게 되었다.
J군의 디자인과는 사뭇 다르고 어딘가 엉성했지만 확실히 동작하는 결과물이 빠른 속도로 만들어졌다. 그래서 기존에 SQLite로 구축했던 DB도 MCP를 사용해서 다시 만들어 보았다. Supabase와 Cursor를 MCP로 연결하고 'PRD를 참고해서 Supabase로 DB 구축을 해줘'라고 명령을 하자, 데이터 스키마부터 테이블까지 모두 깔끔하게 만들어줬다. 이후 Supabase에서 제공하는 Auth Providers를 활용하여 구글/카카오 로그인을 추가하면서 기본적인 Web의 구색을 갖출 수 있었다. 완벽하진 않았지만 충분히 실행 가능한 결과물이었고, 신선한 충격과 동시에 '뭔가 변하고 있다'는 느낌을 받았다.
서비스 제작 과정에서 겪었던 가장 큰 문제는 '채용 데이터를 어떻게 수집할 것인가'였다. 최초 기획에서는 채용 공고 URL을 입력하면 회사명, 직무, 주요 업무, 자격 요건, 우대 사항 등 자기소개서 생성에 필요한 정보를 크롤링하는 방식을 고려했다. 사용자 입장에서 생각했을 때 가장 쉬운 방법이라고 생각했고, 구현 난이도도 높지 않기에 처음에는 이것이 정답이라고 생각했다.
하지만 결과적으로 선택한 채용 데이터 수집 방법은 '직접 입력'이었다.
1) 채용 플랫폼(잡코리아, 사람인 등)들은 크롤링에 매우 민감했다.
실제로 잡코리아와 사람인 간의 법정 다툼이 있었고, 야놀자와 여기어때, 네이버와 다윈중개 등 다양한 도메인에서 크롤링으로 인한 트러블이 발생했다. 이 서비스를 상업적으로 활용할 계획은 전혀 없었지만 리스크를 제거하는 것이 마음이 편했다.
2) 세상에는 다양한 형태의 채용 공고들이 존재했다.
텍스트로만 이루어진 공고, 이미지와 텍스트로 이루어진 공고 등 여러 형태가 존재했다. 게다가 많은 채용 공고에서 하나의 URL 안에 여러 직무를 함께 채용하고 있었다. 이 문제를 해결하기 위해 이미지 인식을 위한 OCR, 직무 추출을 위한 임베딩 모델 등 여러 방법을 시도했지만 결국 배보다 배꼽이 더 큰 상황이라고 판단했다.
결국 URL 하나만으로는 안정적인 데이터 수집이 어렵다는 결론을 내렸고, 직접 입력 방식을 채택하게 되었다. 사용자 입장에서는 다소 번거로운 방식이지만, '핵심 기능을 빠르게 만들어서 수요를 검증한다'는 이번 실험의 규칙에는 오히려 잘 맞는 선택이었다.
이번 글에서 다룬 건 서비스의 뼈대를 세우는 과정이었다. Cursor, Supabase, 그리고 MCP를 바탕으로 순식간에 뼈대를 세우고 나니, 이 실험의 다음 단계가 기대되기 시작했다. 다음 글에서는 내가 가장 많은 시간을 투자했던 프롬프트 엔지니어링 과정에 대해서 다뤄보려 한다.