바이브코딩으로 시작한 사이드 프로젝트 도전기 (Day 1)

바이브코딩으로 시작한 사이드 프로젝트 도전기 (Day 1)

이번에 사이드 프로젝트를 바이브코딩 방식으로 도전해봤습니다.
코파일럿 에이전트를 활용해 Next.js 프론트 프로젝트를 진행했는데요, 직접 경험해보니 꽤 신선했습니다.

저는 평소에 구글 제미나이 유료 버전을 사용하고 있지만, 앱 UI 관련해서는 클로드가 더 강점을 보이더군요.
기획 단계에서부터 UI 초안까지 뽑아내는 데 정말 유용했습니다.

오늘은 제가 실제로 어떤 방식으로 AI를 활용했는지 공유해보겠습니다.

---

1. 아이디어 구체화 – AI에게 던져보기

처음에는 막연한 아이디어만 있었습니다.
예를 들어:

주니어 개발자 포트폴리오 공유 플랫폼

• 아이디어: 주니어 개발자들이 만든 포트폴리오 웹사이트를 올리고, 시니어 개발자들이 조언을 해주는 서비스.
• 포인트: 익명으로 피드백을 주고받을 수 있는 기능.

위와 같은 웹 앱 사이트를 만들려고 합니다. 앱 UI를 설명하는 구체적인 내용을 작성해줘요.

이렇게 AI에게 요청하면, 초기 기획안이 훨씬 구체적으로 다듬어집니다.

---

2. 구글 제미나이로 심층 리서치

아이디어를 조금 더 확장하기 위해 수익화 가능성에 대한 리서치를 부탁했습니다.

{초기 기획안 답변 내용}
이러한 아이디어를 통해서 실제로 수익화 측면에서 어떨지 심층적으로 분석해줘.

 

제미나이는 데이터 기반 분석을 잘 해줘서, 시장성 검토에 큰 도움이 됐습니다.

---

3. 앱 화면 기획 만들기

리서치 결과를 토대로, 실제 개발 범위를 고려한 기획을 요청했습니다.

{심층 리서치 보고서 내용} 

그럼 위 내용을 바탕으로 1인 개발자가 구현할 수 있는 범위까지 앱 화면별 기획을 작성해주세요.

 

이 과정에서 화면 구조와 필요한 기능들이 정리되었습니다.

---

4. 클로드로 UI 구상

기획 내용을 클로드에게 전달해, 구체적인 UI 시안을 받았습니다.

{앱 화면 기획 내용}

------------------------
해당 기획을 포함한 앱 UI를 만들어줘. 각각의 상세 디자인 예시를 그려주세요.

클로드는 UI 구체화와 예시 디자인에서 특히 강점을 보였습니다.

---

5. 코파일럿 에이전트 프롬프트 생성

마지막으로, 실제 코드 생성을 위해 클로드에게 코파일럿 에이전트에 적용할 명령 프롬프트를 부탁했습니다.

자 이제 코파일럿 에이전트를 이용해서 당신이 제안해준 UI 대로 Next.js 코드 템플릿을 만들어달라고 할 거예요. 
명령 프롬프트를 주세요.

 

이 과정을 거쳐 나온 초안 UI를 기반으로, 여러 번 수정과 보완을 반복했습니다.

---

느낀 점

실제로 바이브코딩을 경험해보니, 마치 해리포터의 주문처럼 "명령만 하면" 결과물이 툭툭 나오는 기분이었습니다.

물론 완벽하지는 않아서 계속 수정이 필요했지만, 개발 초기 허들을 낮추는 데는 엄청난 도움이 되더군요.
앞으로 이런 흐름에 적응하지 못하면 진짜 도태되겠구나… 하는 생각까지 들었습니다. 😅