나만의 IT서비스를 만들어보고 싶다는 생각을 했지만 시작이 어려웠다면 이 글은 조금 도움이 될 것입니다.
작년까지만 해도 코딩의 높은 장벽 앞에서 막막함을 느끼셨을 수도 있습니다. 하지만 이제 바이브 코딩을 통해 AI의 도움으로 누구나 자신의 아이디어를 구현할 수 있는 시대입니다.
저는 AI 기반 RSS 리더 서비스인 Hyprfeed를 직접 기획하고 개발 했습니다. Hyprfeed는 하루에도 수없이 쏟아지는 정보의 홍수 속에서 사용자가 정말 중요한 콘텐츠에만 집중할 수 있도록 AI가 핵심 내용을 요약해주는 차세대 RSS 리더입니다.
이 글에서는 제가 Hyprfeed를 개발하며 겪었던 경험을 바탕으로, 코딩을 처음 시작하는 초보자분들이 어떻게 개발 환경을 설정하고 아이디어를 실제 서비스로 만들어 나갈 수 있는지 그 구체적인 과정을 단계별로 공유하고자 합니다. Hyprfeed를 포함해서 3번의 바이브 코딩을 통해 제가 직접 부딪히고 해결하며 구축한 실전 노하우를 담았습니다. 저와 함께 여러분만의 서비스를 만드는 첫걸음을 내디뎌 봅시다.
1. 아이디어의 시작, V0로 뼈대 세우기
모든 서비스는 아이디어에서 시작하지만, 그 아이디어를 눈에 보이는 형태로 만드는 첫 단계는 막막하기만 합니다. 저는 이 첫 단추를 V0라는 AI 웹사이트 빌더로 시작했습니다.
+ 왜 V0를 선택했는가
초보자에게 가장 큰 장벽 중 하나는 개발 환경 설정입니다. 특히 GitHub(소스코드 관리), Vercel(배포), Supabase(데이터베이스) 같은 여러 서비스를 연결하는 과정에서 예측 불가능한 오류들이 발생하곤 합니다. V0는 이 모든 과정을 단순화시켜 줍니다. 마치 레고 블록을 조립하듯, 몇 번의 클릭만으로 이 서비스들을 손쉽게 연결할 수 있습니다. 이는 초보자가 겪을 수 있는 수많은 시행착오를 줄여주는 결정적인 장점입니다.
또한, V0는 무료 크레딧을 제공합니다. 이 크레딧은 서비스의 기본 레이아웃과 구조를 잡기에 충분한 양입니다. 아이디어를 빠르게 프로토타입으로 만들고 싶을 때, 비용 부담 없이 시작할 수 있다는 점은 매우 매력적입니다.
+ V0의 대안
최근 업데이트된 Lovable 같은 서비스도 V0와 유사하게 손쉬운 연결을 지원하여 좋은 대안이 될 수 있습니다. 하지만 Lovable이나 Replit 같은 서비스들은 배포 서버를 계속 유지하기 위해 정기 결제가 필요한 경우가 많습니다. 반면, V0로 기본 구조를 만든 뒤 Vercel의 무료 배포 플랜을 이용하는 방식은 장기적으로 훨씬 경제적입니다.
아래는 몇 달 전 사용 후기 입니다. 참고만하세요. 두 서비스 모두 이미 많이 발전되어 있습니다.
https://substack.com/home/post/p-165322063
https://substack.com/home/post/p-165544011
+ V0 사용의 핵심 팁
시작 전, 명확한 구조 설계: V0는 프롬프트 기반으로 작동하기 때문에, 크레딧을 효율적으로 사용하려면 최대한 구체적이고 명확한 구조를 미리 정해두는 것이 좋습니다. 종이에라도 좋으니, 만들고 싶은 서비스의 화면(예: 사이드 메뉴, 메인 콘텐츠 영역, 상세 페이지)을 명확하게 그려보고 시작하세요.
V0에서 작업한 Hyprfeed 결과물 완벽주의는 금물: 무료 크레딧 내에서는 서비스의 ‘뼈대’를 잡는 것에만 집중하세요. Hyprfeed의 초기 버전도 사이드 메뉴, 카드 형태의 뉴스 리스트, 상세 내용 뷰 정도의 핵심 구조만 V0로 구성했습니다. 버튼의 색상, 폰트 크기 같은 세세한 디자인은 나중에 얼마든지 수정할 수 있으니, 크레딧을 낭비하지 않는 것이 중요합니다.
GitHub 연동으로 소스 관리 자동화: V0에서 작업하기 전, GitHub에 새로운 저장소(Repository)를 생성하고 연결해두세요. 그러면 여러분이 V0에서 디자인을 수정하고 코드를 생성할 때마다 자동으로 변경 사항이 GitHub에 저장(Push)됩니다. 혼자 진행하는 프로젝트라면 복잡한 브랜치 전략 없이
main브랜치 하나만으로도 충분합니다. 더 이상 소스코드가 날아갈 걱정을 할 필요가 없습니다.클릭 한 번으로 배포: V0에서 만족스러운 결과물이 나왔다면, ‘Publish’ 버튼을 클릭하세요. 이 간단한 과정만으로 여러분의 프로젝트가 Vercel에 자동으로 배포되어 전 세계 어디서든 접속할 수 있는 실제 웹사이트가 됩니다. Vercel 역시 개인 프로젝트를 위한 무료 플랜이 매우 훌륭해서 비용 걱정은 잠시 잊으셔도 좋습니다.
2. Supabase 연동하기
웹 서비스의 핵심은 ‘데이터’입니다. 사용자의 정보, 게시글, 댓글 등 모든 정보는 데이터베이스에 저장됩니다. 저는 Hyprfeed의 데이터베이스로 Supabase를 선택했습니다.
+ 왜 Supabase인가
Supabase는 오픈소스 Firebase 대체재를 표방하며, 특히 소규모 프로젝트나 MVP(최소 기능 제품)를 구현할 때 필요한 대부분의 기능을 무료 플랜으로 충분히 제공합니다. 관계형 데이터베이스의 장점을 가지면서도 사용법이 직관적(그리 직관적이지 않다)이라 초보자가 접근하기에 매우 좋습니다.
+ 효율적인 스키마 설계를 위한 팁
데이터베이스 스키마(테이블 구조) 설계는 초보자에게 가장 어렵게 느껴지는 부분 중 하나입니다. 한 번 잘못 설계하면 나중에 수정하기가 까다롭고, 서비스 전체에 큰 문제를 일으킬 수 있습니다.
바로 이 지점에서 1단계에서 V0로 서비스의 기본 구조를 먼저 만든 것이 중요해집니다. 잘 구성된 UI는 그 자체로 필요한 데이터의 명세서가 되기 때문입니다. 예를 들어, Hyprfeed의 초기 V0 프로토타입에는 다음과 같은 핵심 기능과 콘텐츠 요소가 포함되어 있었습니다.
RSS 피드 수집 및 저장
수집된 글을 카드 형식으로 출력 (제목, 출처, 요약 내용 포함)
사용자가 글을 읽었는지 여부(뷰 체크)
나중에 다시 볼 글을 저장하는 기능(북마크)
AI가 생성한 요약문
이 구조를 바탕으로 V0가 생성한 코드를 기반으로 Supabase의 AI에게 스키마 생성을 요청하면, AI는 ‘feeds’, ‘articles’, ‘bookmarks’ 같은 테이블과 각 테이블에 필요한 ‘title’, ‘source_url’, ‘summary’, ‘is_read’ 같은 컬럼들을 상당히 정확하게 추론하여 자동으로 생성해줍니다. 이렇게 하면 초보자가 겪는 스키마 설계의 진입장벽을 크게 낮출 수 있고, 나중에 발생할 큰 수정 을 미연에 방지할 수 있습니다.
Hyprfeed는 V0에서 Supabase에 연결만 하고 실제 테이블은 Cursor에서 생성했습니다.
3. 본격적인 개발의 시작, AI 코드 에디터
V0는 서비스의 뼈대를 세우는 훌륭한 도구지만, 세부 기능을 추가하고 로직을 수정하는 본격적인 개발에는 무제한으로 코드를 수정할 수 있는 환경이 필요합니다. 이때부터는 AI 기반 코드 에디터를 사용하는 것이 효율적입니다.
+ Cursor: 무제한 AI 파워
Cursor는 월 $20의 Pro 플랜 결제 시, 무제한에 가까운 AI 토큰을 제공합니다. 이제 막 코딩을 시작하는 단계에서는 수많은 질문과 수정 요청을 하게 되므로, 토큰 제한 없이 마음껏 AI의 도움을 받을 수 있는 Cursor는 최고의 선택지 중 하나입니다. 작업 방식은 V0와 유사하게, 내가 원하는 기능을 말로 설명하고 AI가 코드를 생성/수정해주는 과정을 반복하는 것입니다.
Cursor 사용 시 절대 주의사항
절대로, 절대로 AI 에이전트에게 데이터베이스 수정을 직접 맡기지 마세요. AI는 편리하지만 완벽하지 않습니다. “사용자 북마크 상태 저장 테이블에서 상태를 추가해줘” 같은 명령을 내렸을 때, AI가 의도치 않게 테이블 전체를 초기화하거나 테이블 전체를 엉뚱한 칼럼으로 마이그레이션 하는 끔찍한 상황이 발생할 수 있습니다. 항상 AI에게는 SQL 쿼리문을 생성하도록 요청하고, 그 코드를 복사하여 Supabase의 SQL Editor에서 직접 실행하며 결과를 확인하는 습관을 들여야 합니다.
+ AI 에이전트의 컨디션
Cursor Pro는 여러 AI 모델을 번갈아 사용하는데, 마치 사람처럼 ‘똑똑한 에이전트’와 ‘멍청한 에이전트’가 번갈아 나타나는 경험을 하게 될 겁니다. 저의 경우, 하루의 첫 작업은 보통 Claude 모델이 담당하는데, 30분이면 끝날 작업을 척척 해냅니다. 하지만 가끔 멍청한 에이전트가 나타나면 10분짜리 간단한 버그를 4시간 동안 해결하지 못하고 오히려 코드를 더 엉망으로 만드는 경우도 있었습니다. 만약 AI가 같은 문제를 계속 헤매기 시작한다고 느껴진다면, 미련 없이 대화창을 클리어하고 새로운 에이전트와 함께 처음부터 다시 시작하는 것이 정신 건강과 시간 절약에 이롭습니다.
+ Zed: 가볍고 빠른 무료 대안
Zed는 최근 주목받고 있는 코드 에디터로, 매우 가볍고 빠르다는 장점이 있습니다. Gemini AI 모델을 무료로 연동하여 사용할 수 있어 초보자에게 추천할 만합니다. AI 에이전트가 Cursor만큼 친절하지는 않지만, 핵심적인 코드 생성 및 수정 능력은 충분히 똑똑합니다. 유료 결제를 통해 Claude 모델을 연동하여 사용할 수도 있습니다.
4. 배포 전 최종 점검, 놓치기 쉬운 핵심 설정
코딩을 마치고 배포하기 전, 몇 가지 중요한 설정이 남아있습니다. 이 부분을 놓치면 “내 컴퓨터에서는 잘 됐는데 왜 서버에서는 안 되지?”라는 흔한 문제에 부딪히게 됩니다.
+ Supabase 연결 설정의 함정
코드에서 Supabase 데이터베이스에 접근하려면 연결 정보가 필요합니다. 이 정보는 보통 .env.local 이라는 파일에 저장하는데, Cursor가 제안하는 가이드대로 설정하면 데이터베이스에 정상적으로 접근하지 못하는 문제가 있습니다. 반드시 Supabase 프로젝트 대시보드에 접속하여 상단 connect를 클릭해서 “Connect to your project” 에서 App Frameworks, ORMs 의 설정을 붙여넣으면 쉽게 해결됩니다.
+ Vercel 배포 시 환경 변수 설정
.env.local 파일은 ‘로컬(내 컴퓨터)’ 환경에서만 사용되는 파일입니다. 따라서 Vercel 서버가 데이터베이스에 접근하게 하려면, 이 파일에 있던 모든 환경 변수들을 Vercel 프로젝트 설정에 똑같이 추가해주어야 합니다. Vercel Project > Settings > Environment Variables 메뉴에서 하나씩 모두 추가하세요.
+ 서비스 확장 고려
만약 콘텐츠나 사용자 관리가 필요한 서비스를 만든다면, 처음부터 관리자 페이지를 위한 프로젝트를 별 도로 분리(다른 Vercel 프로젝트로)하는 것을 고려해보세요. 또한, 실제 사용자가 쓰는 서비스와 개발 테스트용 서비스를 분리하고 싶다면, 데이터베이스와 배포 서비스 모두를 복제하여 완벽하게 분리하는 것이 안전합니다.
5. Hyprfeed 개발 여정과 교훈
위와 같은 환경 설정이 끝나면, 본격적으로 개발 > 수정 > GitHub에 저장(commit & push)의 무한 루프가 시작됩니다. AI를 이용한 Hyprfeed의 첫 버전 개발에는 약 2주가 소요되었습니다. 하지만 이 과정에서 시간을 가장 많이 소비했던 구간은 코딩 자체가 아니었습니다.
첫째는 앞서 언급한 ‘멍청한 에이전트’가 코드 오류나 로직 오류를 수정하지 못하고 점점 더 문제를 꼬이게 만드는 경우였고, 둘째는 ‘기획 오류’와 ‘완성도에 대한 욕심’이었습니다. 기획은 완벽해 보이지만, 막상 개발하고 나면 허점이 보이기 마련입니다. 또한 MVP 개발 단계에서는 핵심 기능이 아니라면 과감하게 넘어가는 용기가 필요합니다.
놀랍게도, Hyprfeed는 도메인까지 연결해서 테스트버전을 오픈한 후에 서비스의 핵심 부분을 거의 다 수정해버렸습니다. 기존 버전이 다른 RSS 리더와 비교했을 때 ‘AI 번역과 요약’ 외에는 뚜렷한 차별점이 없다고 판단했기 때문입니다. 결국 일주일간의 고민과 일주일간의 수정을 거쳐 총 2주의 시간을 추가로 쏟아부었습니다.
새로운 Hyprfeed는 ‘더 심플하게, 글을 읽는 것에만 집중하자’는 목표로 재탄생했습니다. 카테고리도 ‘Tech’ 분야로 좁혔고, 기능도 번역 및 요약된 텍스트만 깔끔하게 제공하는 형태로 바뀌었습니다.
이렇게 뼈대가 단단해지니, 추가 기능을 구현하는 것은 훨씬 수월했습니다.
필터: 이미 데이터베이스에 출처(source)와 피드(feed) 정보가 구분되어 있어 간단히 구현할 수 있었습니다.
키워드 뉴스: 과거 신문에서 야구 섹션만 쏙쏙 찾아보던 기억에서 아이디어를 얻어, 특정 키워드가 포함된 뉴스만 모아보는 기능을 추가했습니다. 모든 정보를 다 보고 싶지 않은 사용자를 위한 기능입니다.
UTC 00:00 에 정기적으로 뉴스 생성 다국어 지원: 영어, 한국어로 시작해 현재는 일본어까지 추가되었습니다. 다만, 언어를 추가할수록 AI 토큰 사용량이 비례하여 늘어나기 때문에 상황을 보며 신중하게 확장하고 있습니다.
번역 없이 떠먹여주는 편안함 테마 추가 및 모바일 대응: 서비스 구조가 단순해지니 새로운 색상 테마를 추가하는 것도, 다양한 화면 크기에 대응하는 모바일 최적화도 AI의 도움을 받아 손쉽게 해결할 수 있었습니다.
2번째 테마 Cream Vanilla
마치며
만약 여러분이 독자적인 웹 서비스를 기획하고 장기적으로 운영하고 싶다면, 오늘 제가 소개해드린 V0 → Supabase → Cursor/Zed → Vercel로 이어지는 개발 환경 설정을 강력히 추천합니다.
물론, 단순히 아이디어를 빠르게 구현해서 시장의 반응을 보고 싶다면 Lovable이나 Replit으로 제작하는 것이 더 쉬운 방법일 수 있습니다. 만약 서비스의 핵심 기능 하나만 테스트하고 싶다면, Google AI Studio나 Claude 같은 AI 툴 안에서 간단히 프로토타입을 만들어 지인들에게 공유해보는 것도 좋은 방법입니다.
AI와 함께하는 개발은 더 이상 전문가만의 영역이 아닙니다. 아이디어가 있다면, 그리고 약간의 용기만 있다면, 오늘 당장 여러분만의 서비스를 만들어 볼 수 있습니다. Hyprfeed의 개발 여정이 여러분의 위대한 첫걸음에 작은 도움이 되기를 바랍니다.
위 내용의 결과물을 보고 싶다면 → https://hyprfeed.app/
