소개
바이브 코딩 경험이 전혀 없는 상태여서, 처음부터 완성도 높은 서비스를 만들기보다는
그동안 만들고 싶었던 서비스를 실제로 구현해보는 경험 자체에 집중하고자 했습니다.
만들고자 하는 서비스 : 한 해를 돌아보며, 월별 대표 사진으로 회고하는 서비스
진행 방법
사용한 도구와 활용 방식
GPT (기획 도구) : 전체적인 기획 방향성 정리 + 기술 가능성 검토 + 프롬프트 설계에 활용
Claude Code (구현 도구) : 정리된 기획과 디자인 요구사항을 바탕으로 실제 코드 생성
Replit : Claude Code로 생성한 결과물을 실행하고 URL 형태로 배포
-------------------------------------------------------------------------------
일단 첫 번째로 전체적인 기획 방향성을 GPT와 대화하면서 정리했습니다.MVP 기능 스펙 문서 1페이지 정리 (서비스 한 줄 정의, 목적, 타겟, 핵심 기능 등)
플랫폼 선정(앱 vs 웹) + 제외할 기능 정리
MVP 배 포 후, 다른 유저들의 의견을 받으면서 점진적으로 개선해나가는 것으로 목표로 두고 있어서 현 시점에서는 '웹'이 적합하다고 판단했습니다.
앱 설치 행위가 없고 + 로그인/회원가입 기능을 제외하여 사용자 진입 장벽을 최소화하고자 합니다.
로그인 없이도, 기록물 저장 가능 여부 검토
브라우저 안에 저장되는 방식으로 가능한 점 확인
한국어 문자 메시지 스크린샷
회고 서비스와 잘 어울리는 디자인/Copy 정리
위와 같이 내용을 정리한 후 Claude Code에 바로 넣을 수 있는 프롬프트를 요청했습니다.
한국어 웹사이트 스크린샷
Claude Code에서 위 프롬프트를 그대로 넣었고, 몇 분안에 바로 웹서비스를 만들어주더라구요!
URL 형태로 바로 배포도 해주어서 생각보다 과정이 너무 간단해서 놀랐습니다..!
앱 게시 옵션이 포함된 화면 스크린샷
만들어진 웹페이지를 둘러 봤을 때, 기능적으로는 전체적으로 잘 동작해서 수정할 부분이 없었고
디자인적으로만 일부 수정 요청을 하면서 마무리지었습니다.
웹페이지 내의 언어가 모두 영어로 작성되어서 한글로 수정 요청
적용된 한글 폰트가 마음에 들지 않아서 TTF 폰트 파일을 첨부하여 수정 요청
한국어 문자 메시지 스크린샷
결과와 배운 점
Claude Code를 처음 써봐서 이렇게 단순하게(?) 써도 되는지는 잘 모르겠지만,
특별한 개발 지식이 없어도 MVP를 만들 수 있어서 좋았습니다.
브라우저 내부에 데이터를 저장하는 IndexedDB를 알게 되었습니다.
로그인 등의 기능을 MVP에서 제외해도 충분히 베타 테스트해 볼 수 있는 결과물이 나오는 것 같습니다.
도움이 필요한 부분
추후 웹 -> 앱으로의 전환 혹은 로그인 기능을 추가할 가능성을 고려했을 때
현재의 기록 데이터를 어떻게 이관할 수 있을지.. 로그인이 없는 현재 초기 단계에서 어떤 식으로 설계되어야 좋을지 자문을 구하고 싶습니다.
앞으로의 계획
실제로 사용해보면서 UX 개선 포인트 찾아보기
디자인 보완
실제로 사용해 볼 베타 테스터 모집해보기
