바이브 코딩 첫 실천기: AI와 함께 만든 점심 메뉴 추천 서비스

AI와 함께 만든 점심 메뉴 추천 서비스: What Launch 개발기

들어가며

이 프로젝트를 시작한 이유는 단순했습니다. 바이브 코딩을 경험해보고 싶었기 때문입니다.

AI와 함께 코딩하는 방법을 배워보고 실습하는 시간을 가져보고 싶었고, 그 결과물이 바로 이 프로젝트입니다. "오늘 점심 뭐먹지?" 매일 반복되는 이 고민을 해결하는 간단한 웹 서비스를 만들면서, Cursor의 AI 어시스턴트와 함께 개발했습니다.

단순한 프로젝트지만, 바이브 코딩을 알아보고 처음 실천해본 프로젝트입니다.

무엇을 만들었나

What Launch는 위치와 음식 장르를 입력하면 주변 식당 중 하나를 랜덤으로 추천해주는 간단한 웹 서비스입니다.

• 위치 입력 (주소 또는 장소명)
• 음식 장르 선택 (한식, 일식, 중식, 양식, 기타, 또는 랜덤)
• 주변 식당 랜덤 추천
• 지도에 위치 표시
• 카카오맵 상세 페이지 연결

특별히 대단한 기술을 사용한 건 아니지만, AI와의 협업 방식과 문서화 전략이 이번 프로젝트의 핵심이었습니다.

 

AI와의 협업: 컨텍스트를 제대로 전달하기

이번 프로젝트의 핵심은 AI에게 컨텍스트를 제대로 설명시켜서 개발하게 한 것입니다. 단순히 "이거 만들어줘"라고 요청하는 게 아니라, 프로젝트의 제약사항, 목표, 기술 선택 기준을 모두 문서화해서 AI가 자동으로 참고하도록 만들었습니다.

이렇게 하니 AI가 매번 "어떤 기술을 쓸까요?"라고 물어보지 않고, 문서에 명시된 규칙에 맞춰서 자동으로 올바른 선택을 했습니다.

1단계: 프로젝트 헌장 (constitution.md)

먼저 프로젝트의 제약사항을 정의했습니다:

• 월 운영비용: $5 이하 (무료 티어 최대 활용)
• 개발 기간: 1주 이내
• 유지보수 인력: 1명
• 초기 예상 트래픽: 월 100명 방문자 이하

이 제약사항들이 이후 모든 기술 선택의 기준이 되었습니다.

2단계: 요구사항 명세 (specification.md)

프로젝트 개요와 제약사항을 바탕으로 상세한 요구사항을 작성했습니다. 각 기능에 고유 ID를 부여해 (FR-001, NFR-001 등) 추적 가능하게 만들었습니다.

예를 들어:

• FR-001: 사용자는 주소 또는 장소명을 입력할 수 있어야 한다
• FR-004: 사용자는 다음 음식 장르 중 하나를 선택할 수 있어야 한다
• NFR-001: 지도 렌더링 시 끊김 없이 부드럽게 표시되어야 한다

3단계: 개발 계획 (plan.md)

요구사항과 제약사항을 바탕으로 기술 스택과 개발 구조를 미리 결정했습니다. 여기서 중요한 건, 각 선택의 이유를 명확히 기록해서 AI가 이해할 수 있게 한 것입니다.

예를 들어, Next.js 대신 React + Vite를 선택한 이유를 문서에 명시:

• Next.js는 이 프로젝트에 과함 (SSR/SSG 불필요)
• 더 가벼움 (번들 크기 작음)
• 운영 비용 0 (정적 파일만 배포)

이렇게 문서화해두니, AI가 기술을 선택할 때 이 기준을 자동으로 참고했습니다.

4단계: AI 구현 규칙 (rule.md)

가장 중요한 단계입니다. .cursor/rules/rule.md 파일에 구현 규칙을 작성했는데, 이 파일은 Cursor IDE가 자동으로 읽어서 AI 어시스턴트가 코드를 작성할 때 참고합니다.
(해당 폴더에 넣어두면, cursor 가 작업을 할 때 참고한다고 하길래 넣어봤습니다.)

이 파일이 바로 AI에게 컨텍스트를 전달하는 핵심입니다. 이 파일을 통해:

• 기술 스택 규칙 (필수 사용, 금지 사항)
• 코드 작성 규칙
• 제약사항 (반드시 준수)
• 구현 우선순위

를 AI에게 전달했고, AI는 이 규칙들을 자동으로 따르면서 코드를 작성했습니다.

결과: AI가 매번 질문하지 않고, 문서에 명시된 규칙에 맞춰서 자동으로 올바른 기술을 선택하고 코드를 작성했습니다.

 

AI 활용의 효과: 컨텍스트 전달의 힘

핵심: AI에게 컨텍스트를 제대로 설명시켰다

문서화를 통해 AI에게 프로젝트의 전체 컨텍스트를 전달했습니다. 그 결과 가장 크게 느낀 건 AI가 일관성 있게 코드를 작성한다는 것이었습니다.

1. 일관성 있는 개발

문서화된 컨텍스트를 AI가 알고 있어서, 쌩뚱맞게 다른 방식으로 개발하거나 이미 잘 되고 있는 걸 다시 만드는 일이 없었습니다.

이전 경험 (문서화 없을 때):

• AI가 맥락을 모르고 다른 방식으로 개발
• 이미 잘 작동하는 코드를 다시 작성
• 매번 맥락을 다시 설명해야 함
• "아까 그거 말고 이렇게 해줘" 반복

이번 경험 (문서화 후):

• AI가 문서를 읽고 컨텍스트를 이해
• 이미 정해진 규칙에 맞춰서 일관되게 개발
• 맥락을 다시 설명할 필요 없음
• 문서화된 내용을 척척 해내는 느낌

2. 빠른 개발 속도

컨텍스트를 알고 있어서, AI가 해야 할 일을 휙휙 빠르게 해냈습니다. 문서화된 규칙을 읽고 그것들을 척척 처리하는 느낌이었습니다.

실제 경험:

• "Phase 2 구현해줘" → AI가 plan.md와 rule.md를 읽고 바로 올바른 방식으로 구현
• "Phase 3 구현해줘" → 이미 정해진 기술 스택과 구조에 맞춰서 일관되게 구현
• 매번 "어떤 기술 쓸까요?" 같은 질문 없이 바로 진행

3. 이상한 기술로 다시 구현하는 일이 없었다

이미 문서화로 어떤 기술로 개발하는 게 명시되어 있었기 때문에, AI가 갑자기 이상한 기술로 다시 구현하거나 하는 일이 없었습니다.

이전 경험 (문서화 없을 때):

• AI가 맥락을 모르고 다른 기술 스택으로 제안
• "아까 React로 했는데 왜 Next.js로 하려고 해?" 같은 상황
• 이미 잘 작동하는 코드를 다른 방식으로 다시 구현
• 매번 "이 기술 쓰지 말고 그 기술 써줘" 반복

이번 경험 (문서화 후):

• plan.md와 rule.md에 기술 스택이 명시되어 있음
• AI가 문서를 읽고 이미 정해진 기술로 일관되게 개발
• React + Vite로 시작했으면 끝까지 React + Vite로 유지
• Context API로 시작했으면 끝까지 Context API로 유지
• 갑자기 Redux나 Next.js 같은 다른 기술로 바꾸는 일 없음

4. 불필요한 대화 감소

문서화가 잘 되어 있어서, AI가 매번 "어떤 기술을 쓸까요?"라고 물어보지 않았습니다. rule.md를 참고해서 바로 올바른 선택을 했습니다.

차이점:

• 문서화 없을 때: 매번 맥락 설명 → 질문 → 설명 → 구현 (반복)
• 문서화 후: "구현해줘" → AI가 문서 읽고 바로 구현 (한 번에)

 

배운 점

• AI에게 컨텍스트를 제대로 전달하는 것이 핵심: 단순히 "이거 만들어줘"라고 요청하는 것보다, 프로젝트의 전체 컨텍스트를 문서화해서 AI가 이해할 수 있게 하는 것이 훨씬 효율적이었습니다.
• 문서화를 미리 해두면 AI가 자동으로 참고: rule.md 파일을 .cursor/rules/ 폴더에 넣어두니, Cursor IDE가 자동으로 읽어서 AI가 코드를 작성할 때 참고했습니다. 이게 가장 큰 차이였습니다.
• 기술 선택을 미리 결정하면 일관성 유지: 제약사항과 요구사항을 바탕으로 기술 스택을 미리 결정하고 문서화해두니, AI가 자동으로 그 기준에 맞춰서 선택했습니다.
• 제약사항을 먼저 정의: 비용, 시간, 인력 같은 제약사항을 먼저 정의하니, 모든 기술 선택이 자연스럽게 결정되었습니다.
• 단계적 구체화: constitution → specification → plan → rule 순서로 점점 구체화하면서, 일관성 있는 개발이 가능했습니다.
• AI는 컨텍스트가 명확할수록 강력하다: AI가 모든 걸 해결해주는 게 아니라, 명확한 컨텍스트를 주면 그에 맞춰서 놀라울 정도로 정확하게 도와줍니다.

 

마치며

이번 프로젝트를 통해 가장 크게 배운 건 AI에게 컨텍스트를 제대로 전달하는 것의 중요성입니다.

단순히 "이거 만들어줘"라고 요청하는 것보다:

1. 프로젝트의 제약사항을 먼저 정의하고 (constitution.md)
2. 요구사항을 명확히 문서화하고 (specification.md)
3. 기술 스택과 개발 방식을 미리 결정하고 (plan.md)
4. AI가 자동으로 참고할 수 있게 구현 규칙을 작성하는 것 (rule.md)

이렇게 하니 AI가 매번 질문하지 않고, 문서에 명시된 규칙에 맞춰서 자동으로 올바른 선택을 하고 코드를 작성했습니다.

핵심은 "AI에게 컨텍스트를 제대로 설명시켜서 개발하게 한 것"입니다.

AI 어시스턴트는 정말 강력한 도구지만, 컨텍스트가 없으면 원하는 방향으로 가지 않을 수 있습니다. 반대로, 잘 문서화된 프로젝트에서는 AI가 놀라울 정도로 일관성 있게 도와주는 것 같습니다.

때문에, 앞으로도 이런 방식으로 프로젝트를 진행하면 좋을 것 같습니다. 특히 작은 사이드 프로젝트에서는 이런 문서화 전략이 큰 도움이 될 것 같습니다.

---

프로젝트 링크: GitHub 저장소
프로젝트 결과물: What Launch