Ep2. "??: 고맙고, 행복하길 빌고, 많이 좋아했다. "
작성자 HelloStranger
Vibe Coding Diary
Ep2. "??: 고맙고, 행복하길 빌고, 많이 좋아했다. "
-
해당 개발일지는 뉴스레터를 통해 메일로도 받아볼 수 있어요.
-
뉴스레터로 받아보기 👉 https://maily.so/blackcon
안녕하세요. 뉴니커!
저는 '무일푼 바이브코딩'이라는 목표를 갖고, Gemini CLI와 함께 웹 사이트를 개발하고 있었는데요. 개발을 하다보니 하나씩 부족함이 느껴졌어요. 그 중에서도 가장 불편했던 점은 사용량 제한이 너무 빨리 다가와서 개발 연속성이 계속 끊어졌던 점인데요.
결국, Gemini CLI는 잠시 내려두기로 하고, Claude Code를 사용해보기 위해 Pro 구독을 1개월 결제했답니다. 🫠 그래서 오늘은 Claude Code와 현재까지 개발한 내용과 더불어 3일간 개발한 결과물을 보여드릴게요. (개인적으로 구글을 좋아하는데, gemini를 떠나보내니 씁쓸하네요.)
지난 이야기
1. Cluade Code에게 뇌 이식하기
이 전에 Gemini CLI를 이용하여 다양한 작업을 수행했어요. 그 과정에서 Notion에 생성된 다양한 기술 문서들이 있는데요. 저는 개발을 하기 전에 이 문서들의 내용을 Claude Code에게 전달했어요. (프로젝트 맥락을 이해한다면 AI가 더욱 나은 결과를 만들어요)
Notion에 작성된 기술 문서들
우선, Notion에 작성된 내용들은 Notion MCP 서버를 활용하여 정보를 받아오도록 해볼게요.
> Notion MCP를 이용하여 "기술 요구 사항"을 이해하고 프로젝트 폴더 구조를 구성해줘.
Notion 외에도 CLAUDE.md 파일을 생성하여 프로젝트를 이해시키는 방법도 이용했어요. 해당 파일은 Claude Code에게 프로젝트에 대한 기반 지식을 사전에 알려주는 파일인데요. 보통 프로젝트에 대한 설명, 목표, 비즈니스 모델, 개발 스펙 등 다양한 정보를 작성해두어요.
사실, 기존에 만들어진 프로젝트가 있다면 "프로젝트를 분석해서 CLAUDE.md를 생성해줘"라고 해도 되지만, 저는 완전 바닥부터 다시 개발하는터라 처음부터 작성을 해주어야 했어요.
vooster.ai(AI Product Manager) 를 이용하면 사용자 질의를 기반으로 제품요구사항(PRD) 문서를 작성해주는데요. 저는 이 파일을 CLAUDE.md 로 작성하여 개발을 했어요.
아래는 CLAUDE.md 파일의 일부이니 참고해주시면 되고요. 제품요구사항을 입력했지만, 좀 더 찾아보면 효과적으로 작성하는 방법이 더 있을 듯 해요.
2. 밑도 끝도 없이 "개발해줘" 시전
프로젝트에 대한 맥락을 AI에게 전달을 하였고, 폴더구조도 잡아두었어요. 그리고 추가 프롬프트 없이 "기획서를 토대로 개발해줘"를 입력하니, 아래와 같은 UI가 금방 만들어지더라고요. 각 메뉴와 랜딩 페이지의 내용등은 앞서 프로젝트를 이해시킨 덕에 자동으로 만들어준 것으로 보여요.
이렇게만 했음에도 지난 Gemini CLI의 결과와는 결이 다른 웹 사이트가 개발되어요. 물론, 각 메뉴나 기능 개발을 이어가기 위해서는 채팅을 하면서 디테일한 입력이 필요한데요. 이 내용들도 아래에서 다루어볼게요.
Claude Code로 개발한 초안
"Claude Code 압승" 1/Claude Code로 "기획서를 토대로 개발해줘" 수행한 결과 2/Gemini CLI로 "기획서 토대로~", "TODO토대로~", "이 사...
3. 세부적인 개발 이어가기
1) TODO 제공 및 개발 요청
Notion을 통해 프로젝트의 TODO를 관리하고 있는데, 기능 추가할 때도 이 TODO를 적극 활용했어요. 채팅을 통해 "할 일을 확인하고 기능 개발을 해줘"라고 했으며, 개발이 완료될 때마다 결과물을 보면서 세부 적인 수정 요청을 했어요.
(저는 이번 프로젝트를 수행하기 전에 Notion을 전혀 사용하지 않았는데요. Notion MCP를 사용하니 계속 손이 가게 되네요. 😀)
노션에 정리된 TODO List
2) 웹 UI 개편
아무래도 초안으로 개발된 디자인이 완벽해보이진 않아서 UI 개편을 요청했어요. 무작정 "UI를 현대적으로 수정해줘"라고 하면, 지난 롤백 사태가 발생할까봐 겁이 났는데요.
이를 막기 위해 추구하는 디자인의 웹 사이트 링크를 함께 제공하며, "이 사이트(URL제공)를 기반으로 UI를 전반적으로 수정해줘. 기존의 기능이 누락되지 않고 그대로 유지되어야 해"라고 요청을 했어요.
저의 추구미는 Product Hunt 사이트인데, 그 이유는 다양한 상품이 나열되어 있고, 메뉴가 많음에도 복잡한 느낌이 없기때문이에요.
Product Hunt UI
3) DB Migration
Beta 로나마 오픈해둔 MCP Hub가 있어요. 이 사이트에는 MCP Server가 총 677개의 서버와 다수의 회원이 가입되어 있는 상태에요. 이 정보들을 지금 개발하고 있는 프로젝트에 이전해야 할 필요가 있겠죠?
이 역시 Claude Code에게 요청을 하였고, DB 구조 생성부터 기존 데이터를 이동하는 작업까지 스크립트를 개발해주었어요. 저는 이 스크립트를 수행하면서 DB Migration도 편히 할 수 있었답니다.
Migration을 위한 스크립트
4. 결과물 훑어보기
지난 3일간 Cluade Code와 함께 다양한 기능들을 추가하고 UI/UX를 개선하면서 완성된 사이트를 소개드릴게요. 아직 손 봐야할 내용이 많기에 외부에 배포는 안되었고 스크린샷으로나마 봐주세요. 🙏
1) 메인 페이지
2) MCP 서버 목록 페이지
3) MCP 서버 제작 요청(커미션) 페이지
4) 신규 MCP 서버 등록 페이지
5) 사용자 대시보드
개요
구매자 대시보드
판매자 대시보드 (1)
판매자 대시보드 (2)
5. 다시 찾아온 사용량 제한
이렇게 개발하다보니 Claude Code도 사용량 제한 시간이 다가왔어요. 그럼에도 앞서 보신 결과와 같이 아주 많은 작업을 이행할 수 있었는데요. Gemini CLI에서는 디테일한 요청을 계속하다보니 사용량을 초가했다면, Claude Code에서는 많은 기능들을 개발하다보니 사용량 초과가 되었어요.
UI 개선 중 찾아 온 휴식 시간
그래서 저는 개발도 많이 되었다고 생각하고 이 시간을 휴식 시간으로 가지고 있어요. 밀린 청소도 하고 여가시간도 보내는 등 말이죠 :)
오늘은 여기까지 작업한 내용을 공유드릴게요. 다음에는 또 어떤 작업물들을 공유할지는 미정이지만, 계속해서 이 프로젝트 개발을 진행할 것이며, 그 진행상황을 공유하지 않을까 생각드네요.
그럼 이번 한 주도 고생들 하셨습니다. 다음 일지에서 또 봬요. 👋