생애 최초 바이브 코딩을 활용한 밈 생성 웹서비스 만들기!

소개

시도하고자 했던 것과 그 이유를 알려줘.

이번에 지피터스 애창패를 참여하게 되면서 20년 전 개발을 했던 내 과거를 떠올려 봤다. "바이브 코딩"으로 어디까지 할 수 있고, 정말 MVP를 4주 만에 만들어서 런칭까지 할 수 있을지 도전해 보고 싶었다.

첫 주는 무엇을 만들까 고민하다 한 주가 훌쩍 흘렀다. 주말 오전에 리더님이 했던 말 중에, 개인적으로 해결하고 싶은 주제도 좋지만 많은 사람들에게 흥미를 유발할 수 있는 주제로 서비스를 만들었으면 좋겠다는 말이 떠올랐다. 그래서 제미나이한테 물어봤고, 몇 개 후보 중 "AI 밈(Meme) 생성기"라는 주제를 선택하게 되었다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용했어?

1. 초기 기획 (1주차)

아이디어를 구체화하기 위해 Vooster AI를 활용해 PRD, 사용자 여정, TRD를 만들었다. 그렇게 처음으로 탄생한 웹 인터페이스는 아래와 같았다. 첫 컨셉은 AI가 만들어준 문구를 가지고 밈을 자동 생성하는 서비스였다.

한국 웹 사이트의 스크린 샷

2. 첫 번째 시련

하지만 생각보다 AI가 만들어준 문구는 너무 심플했고, 생성된 이미지는 더 마음에 들지 않았다.
이미지 생성을 몇 번 하고 나니 Gemini는 금방 한도가 차서 더 이상 생성을 못했고, 대안으로 오픈 소스 모델을 활용해보니 이미지 퀄리티는 말할 것도 없었다.

그래도 '런칭에 포커스 해보자'고 생각하고 Git, Supabase 연동 및 서비스 구현까지 해보려 했지만, 생각보다 클라우드 상에서의 DB 연동조차 쉽지 않았다.

3. 방향 전환 및 재도전 (2주차)

결국 PRD를 수정하고 기능 구현에 집중해 보자고 방향을 틀었다. 그리고 새롭게 만들어진 웹서비스 이미지는 아래와 같다.

한국 캐릭터가있는 웹 사이트의 스크린 샷

두 번째 주 월요일부터 Lovable로 새롭게 만든 이미지의 코드를 Git으로 연동해서 내려받았다. 그리고 주말에 Sam님을 통해 소개받은 Claude CodeCodex를 활용해 제대로 바이브 코딩을 시작했다.

이틀 만에 템플릿을 활용한 밈 생성, 내 파일을 업로드해서 밈을 생성하는 핵심 기능을 완성했고, 3일째 되는 날에는 밈 갤러리, 큐레이션된 작품만 모아 놓은 밈 발견 메뉴까지 만들게 되었다.

생각보다 빠르게 작품이 완성되어 가는 것을 경험하면서 바이브 코딩의 생산성을 몸으로 체험할 수 있었다.

결과와 배운 점

배운 점과 나만의 꿀팁을 알려줘.

가장 크게 배운 건 "안되면 빨리 포기하고 방향을 전환하는 용기"였다. 첫 번째 컨셉에 미련을 가졌다면 아마 DB 연동에서 계속 헤매고 있었을 것이다. PRD를 과감히 수정하고 핵심 기능 구현에 집중하니 오히려 개발 속도가 붙었다.

나만의 꿀팁은 "AI 코드 어시스턴트를 200% 신뢰하고 활용하는 것"이다. Claude Code와 Codex를 쓰면서 예전처럼 모든 코드를 내가 다 짜야 한다는 부담감을 내려놓을 수 있었다. 덕분에 화면에 나타난 모든 기능들이 DB와 연결되는 구조를 놀랍도록 쉽게 구현해 내는 경험까지 할 수 있었다.

과정 중에 어떤 시행착오를 겪었어?

  • 초기 AI 모델의 한계: Gemini 이미지 생성은 퀄리티는 괜찮았지만 사용량 제한이 너무 빨랐고, 오픈 소스 모델은 퀄리티가 기대 이하였다. AI가 생성해 주는 문구도 너무 단조로워 서비스의 매력을 살리기 어려웠다.

  • 클라우드 인프라의 장벽: Git, Supabase 연동 과정에서 예상보다 많은 시간을 썼다. 특히 클라우드 DB를 처음 다뤄보면서 개념을 이해하고 연동하는 과정이 쉽지 않았다.

앞으로의 계획이 있다면 들려줘.

2주차까지 핵심 기능의 뼈대를 빠르게 만들었고, 이제 남은 기간 동안 MVP 런칭을 위해 더 구체적인 계획을 세웠다.

📈 현재 구현 완료도 (전체 약 70% 🎯)

카테고리

완료도

주요 완성 기능

기본 밈 생성

🟢 95%

템플릿 선택, 텍스트 추가, 저장

갤러리 시스템

🟢 90%

밈 업로드, 조회, 댓글, 반응

큐레이션

🟢 85%

자동 트렌딩, 에디터 추천

공유 기능

🟡 70%

기본 공유, 카카오톡 공유

검색/필터

🟡 60%

기본 검색, 카테고리 필터

사용자 시스템

🔴 10%

기본 로컬 스토리지만

모바일 최적화

🟡 50%

반응형 디자인 부분 적용

🚧 남은 기간 동안의 핵심 목표

런칭을 위해 아래 기능들을 최우선으로 구현할 계획이다.

🛠️ 1. 기술적 기반 완성

  • 사용자 인증 시스템: 기본적인 로그인/회원가입 기능을 구현하고, 편의성을 위해 구글, 카카오 등 OAuth 소셜 로그인을 연동할 것이다.

  • 데이터 관리: 현재 LocalStorage에 임시 저장된 데이터를 실제 클라우드 DB와 이미지 스토리지에 연동해서 안정적으로 관리할 것이다.

📄 2. 필수 페이지 구현

  • 사용자가 북마크한 밈을 보거나 프로필을 관리할 수 있도록 /bookmarks, /profile 등 누락된 핵심 페이지들을 구현할 것이다.

📱 3. 사용성 개선

  • 다양한 모바일 환경에서 불편함이 없도록 반응형 디자인을 개선하고 터치 제스처를 지원하는 등 모바일 최적화에 집중할 것이다.

🔮 장기적인 로드맵

MVP 런칭 이후에는 아래와 같은 고급 기능들을 순차적으로 추가해서 서비스를 고도화할 예정이다.

  • 밈 편집 기능 강화: AI 기반 텍스트 자동 생성, 고급 텍스트 효과, 스티커 기능 추가

  • 소셜 기능 확장: 사용자 팔로우, 밈 챌린지/배틀, 커뮤니티 기능 도입

  • 개인화 및 분석: 머신러닝 기반의 개인화 추천, 상세 통계 대시보드 제공

  • 비즈니스 모델 구축: 프리미엄 구독 기능 및 크리에이터 수익화 모델 도입

도움 받은 글 (옵션)

참고한 지피터스 글이나 외부 사례를 알려줘.

  • 주말에 Sam님을 통해 소개받은 Claude Code와 Codex가 이번 프로젝트의 게임 체인저가 되었다.

  • "많은 사람들에게 흥미를 유발할 수 있는 주제"를 선택하라는 리더님의 조언이 초기 아이디어를 잡는 데 큰 도움이 되었다.

3
1개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요