• 해당 개발일지는 뉴스레터를 통해 메일로도 받아볼 수 있어요.

• 뉴스레터로 받아보기 👉 https://maily.so/blackcon

안녕하세요. 뉴니커! 지난 'Episode 0'에 이어서 바이브코딩 일지를 공유드립니다.

이번에 다룰 내용은 아래와 같아요. 항목은 많지만 내용은 큼지막하게 다룰거라 읽기엔 부담되지 않을거라 봐요.

• 개발을 도와 줄 AI 선택

• AI에 힘을 실어 줄 MCP Server 설정

• 서비스 기획 및 비즈니스 모델 고민

• 사이트 개발

그리고 제목에서 스포가 되었듯이 롤백이 예정되어 있어요. 근래 며칠간 개발을 하고 있었는데, UI가 완정 엉망이 되어 롤백을 하려 해요. 그 전까지 진행했던 작업을 뉴니커에게 공유 드리도록 하겠습니다.

1. 'Gemini CLI', 너로 정했다!

요즘 AI들은 기본적으로 코딩을 할 수 있는 수준인 듯 해요. Claude Code, GeminiCLI, Copilot, Cursor 등등.

많은 사람들이 선호하고 퀄리티가 좋다고 생각하는 것은 단연 Claude Code 긴 하지만, 저는 무료이면서 퀄리티도 많이 좋아진 Gemini CLI를 사용해볼까 합니다.

Gemini CLI란, 구글에서 개발한 Gemini를 터미널 기반으로 사용할 수 있는 도구인데요. AI 모델은 Gemini Pro 2.5를 기본으로 사용하고 있으며, MCP도 연동할 수 있는 장점이 있어요.

🔗 GitHub - google-gemini/gemini-cli: An open-source AI agent that bri...

2. Gemini 에게 힘이 되어 줄 MCP Server들

1) 문서 작성을 위해 필요한 Notion MCP

저는 개발자는 아니지만, 여기저기서 주운 정보에 따르면 개발은 문서화를 해두는게 아주 중요하다고 들었어요. 서비스 개발이 이루어지기 전에 말이죠. 그 이점은 다들 아시리라 생각해요.

그래서 저는 Gemini CLI와 논의를 하고 개발을 하면서 발생되는 문서들을 Notion MCP를 이용하여 작성을 하려고 해요.

🔗 "Notion API를 위한 MCP(Model Context Protocol) 서버를 구현하여 AI 에이전트가 Notion 데이터에 쉽게 접근하고 상호작용할 수 있도록 합니다."

2) 개발 스펙을 최신화로 유지해주는 Context7

순수 AI로만 개발하다보면 최신 버전이 아닌 모듈을 사용한다거나, 과거의 기술을 접목할 때가 종종 있어요. 그 이유는 AI 모델이 학습한 날짜가 최근이 아닌 수 개월 전이기 때문이에요.

이러한 단점을 커버해주기 위해 Context7 이라는 MCP를 소개드려요. 이 MCP Server를 활용한다면 개발 스펙을 최신화로 유지할 수 있다고 합니다. 저는 아직 기획단계인지라, 호출은 안해봤지만 많은 사람들이 사용하고 있어요 :)

🔗 "Context7 MCP는 프롬프트에 최신 코드 문서와 예제를 제공하여 LLM이 최신 정보를 기반으로 정확한 응답을 생성하도록 돕는 도구입니다."

3) 웹 사이트의 UI 담당, shadcn-ui-mcp

shadcn/ui v4 컴포넌트 라이브러리의 소스 코드, 데모, 블록, 메타데이터에 대한 접근을 제공하는 MCP인데요. 웹 사이트 UI를 shadcn으로 개발하기 위해 연결해두었어요. "xxx 컴포넌트로 UI를 개발해줘"라고 입력을 하면 해당 MCP Server와 연계하야 코딩을 해주어요. 👍

단, 레퍼런스가 없다보니 원하는 디자인이 안나올 수 있는데요. 그럴때는 참고할만한 사이트를 함께 제공하는 것도 방법이겠더라구요.

🔗 이 저장소는 shadcn/ui v4 컴포넌트, 블록, 데모 및 메타데이터에 대한 포괄적인 접근을 AI 어시스턴트에 제공하는 Model Context Protocol (MCP)...

3. Gemini와 기획해보기

Gemini에게 개발을 의뢰하기 전에 어떤 서비스인지 설명을 해주는게 좋아요. 막연하게 "xxx 서비스를 만들거야. 개발해줘"라고 한다면 마음에 들지 않는 서비스가 나올수도 있는데요. 그래서 저는 기획부터 gemini와 함께 고민을 했어요.(이러면 gemini도 서비스를 더 쉽게 이해하는 듯 함)

기본적인 서비스 설명과 비즈니스 모델은 제가 생각한 것들은 입력으로 하고, 이를 토대로 좀더 명확한 기획서 및 기능 명세서를 작성해달라고 요청했어요. 답변이 나오는 것을 읽어보고 수정이 필요하다면 명확안 이유와 함께 수정을 요청했으며, 최종적으로 수정한 내용은 Notion에 기록을 해두었답니다.

물론, 기획은 Gemini CLI만 이용한것은 아니에요. 웹기반의 Gemini 도 활용했으며, ChatGPTs에 있는 엔틀러도 함께 이용했는데요. '엔틀러' 일 잘하더라고요. 추천드려요. 🚀

🔗 ChatGPT - Antler KR Oracle

4. 사이트 개발 진행

1) 데일리스크럼 (Daily Scrum)

Gemini CLI와 작업을 하며 TODO 항목을 노션 MCP를 이용해 노션에 기록하게 하곤 하는데요. 이 내용을 토대로 데일리 스크럼을 하자고 해봤어요. 그럼 스스로 할 일을 목록화도 하고 자기반성도 하는거 있죠? 전형적인 개발팀의 모습을 보는 듯 했어요.

Notion MCP로 관리중인 TODO

GeminiCLI와 진행한 데일리스크럼

2) 개발 작업 요청

저는 앞서 이런 작업을 진행하고 실제 개발을 진행했어요. 모든 프롬프트를 뉴스레터로 소개하기 보다는 몇 가지만 가지고 왔으니, 참고삼아 봐주세요. :)

로그인 기능 및 사용자페이지 개발 요청

3) 작업물 확인

저는 개발하는 중에 Shadcn/ui MCP의 존재를 알게 되었고 이를 활용하여 UI 개편을 해보려 했어요. 허허.. 아주 난장판이 없더군요. 사실, 아래 이미지가 되기 전엔 꽤 그럴싸했거든요? 메인 페이지도 괜찮았고, 사용자 대시보드도 양호했어요.

아마도 UI 개선할 때 제가 입력한 프롬프트가 모호했는지 사이트가 이상해졌어요. 제가 수동으로 코드를 복구하려했지만 수정한 부분이 원채 많다보니 에러만 계속 쌓여가더라고요.

그래서 지금까지 개발한 코드들은 모두 삭제할거구요. 처음부터 UI를 지정해주며 다시 한 번 사이트개발을 해보려 해요. 그 내용은 다음 회차에서 또 풀어볼게요!

5. 끝으로

끝으로, 사용한 Gemini CLI를 종료하게 되면 사용 내역을 요약해서 보여줘요. 아래의 결과는 gemini cli를 한 번 실행하고 종료되었을 때의 모습인데, 데일리 혹은 위클리도 정리를 해주는진 잘 모르겠습니다 ㅎㅎ.. 참고삼아 1회 실행한 결과를 공유드리며, 이번 개발일지는 여기서 끝마칠게요. 🙋‍♂️