이 조합 최고! 클로드 코드+ 제미나이 바이브 코딩으로 서비스 구축하기

안녕하세요!

솔로 비즈니스 나이트입니다. 💫

오늘은 지난 글에 이어, 바이브 코딩으로 만드는 ‘온라인 1인 창업 아이템 추천 도구’ 제작기 2탄을 소개하려 해요.

지난 1탄에서는 Chat GPT와 Claude를 활용한 서비스 기획 과정, 그리고 Cursor, Claude Code를 활용한 바이브 코딩 준비 과정을 공유드렸었죠. (지난 1탄은 이곳에서 확인하세요! ) 이번 글에서는 그다음 단계, 실제로 서비스를 구현해 나간 개발 여정을 이야기해보려 합니다.

먼저 진행상황을 공유 드리자면.. 온라인 1인 창업 추천 도구, <나의 1인 창업 DNA는?>를 바이브 코딩으로 구현하는 데 성공했습니다! 🎉

주로 Claude Code를 활용해 작업했고, 물론 중간중간 우여곡절도 있었지만.. 😂 그만큼 비개발자로서 바이브 코딩을 어떻게 실전에서 활용할 수 있을지에 대해 정말 많은 것을 배우고 경험할 수 있었어요.

그럼, 지금부터 솔비나의 바이브 코딩 여정, 그 뒷이야기를 풀어보겠습니다!

15초 미리보기 ⏰

• STEP 03_ 클로드 코드로 서비스 구조 & 데이터 셋팅하기 (2시간 만에 뚝딱)
• STEP 04_ 디자인 적용하기 (Gemini와 바이브 디자인!)

STEP 03_ Claude Code로 서비스 구조 & 데이터 셋팅하기

본격적인 개발에 앞서 클로드 코드에 입력할 프롬프트를 설계하기 위해 다시 클로드를 켰습니다.

기획 단계에서 사용한 Claude 채팅창은 이미 서비스의 핵심 데이터를 기억하고 있었기에, 그 기억을 토대로 서비스 구조를 대략적으로 설명한 뒤에, Claude Code로 구현하기 위한 프롬프트를 정리해 달라고 했어요.

그랬더니 클로드 코드를 통해 어떻게 개발을 진행하면 좋을지, 개발 세부 단계를 기반구축 > 핵심로직 구현 > UI 구현 > 최적화 + 배포까지 각 단계에 맞는 프롬프트를 제안해줬습니다. 이렇게 각 단계별 프롬프트를 클로드 코드에만 입력하면 되니 너무 편했어요!

그렇게 클로드에서 받아온 프롬프트를 클로드 코드에 입력하기 시작했습니다. 서비스 구조 셋팅에 30분도 안걸렸고, 창업 유형에 대한 매칭 로직과 데이터 삽입 작업에는 약 1시간 30분 걸렸어요. 총 약 2시간 만에 서비스 구조가 뚝딱 완성되었습니다!

전체적으로 놀라울 만큼 빠르게 진행됐습니다. 기본 구조가 매끄럽게 돌아가는 걸 보니, "진짜… 이게 되는구나!" 싶더라고요.

🤖 Claude Code 작업 중 기억에 남는 포인트

• 무조건 1번 예스를 누르면 웬만한건 잘 넘어갑니다. 어차피 저보다 개발을 더 잘테니.. 예스 말고 다른 선택지가 없었어요!
• 사전 기획단계에서 데이터들을 열심히 정리해 둔 것이 꽤 도움이 됐어요. 정돈된 데이터 덕분에 삽입 작업이 수월했습니다. 입력했을때 무리없이 잘 알아듣더라구요!
• Claude에게 한꺼번에 너무 많은 작업을 시키기보단, 단계를 나눠 요청하는 게 훨씬 안정적입니다.
• 디자인은… 🥲 말 그대로 날 것 입니다. 보기엔 좀 엉망이었지만 기능은 충실하게 작동해서 일단 뿌듯했습니다!
• 그날 작업이 끝나면 클로드 코드에 작업을 잘 저장해 달라고 요청했습니다. 혹시나 데이터가 날아가지 않도록요.

😅 그리고 작은(?) 위기.. 디자인이 못생겼다!

서비스 구현은 무사히 완료했지만… 문제는 디자인이었습니다.

"기능은 되는데 너무 못생겼다"는 느낌이었어요. 원래 넣으려던 문구가 누락돼 있거나, 랜딩 페이지와 결과 페이지에 예상 못한 텍스트가 섞여 있기도 했고요. (Claude가 너무 열심히 알아서 해준 탓일까요…? 😂)

어쨌든 핵심 기능이 돌아가니 이제 다음 스텝 디자인 다듬기로 넘어가보기로 했습니다.

STEP 04_ 디자인 적용하기 (Gemini와 바이브 디자인!)

디자인이 너무 못생겼다는 냉정한 현실과 마주하며.. 해결 방안을 찾기 위해 고심했어요.

우선, 클로드 코드를 통해 개발중이니, 디자인 가이드를 클로드에게 맡겨보면 오류가 덜하지 않을까 싶어 클로드에 맡겨보기로 했어요. 클로드에는 기존 기획에 대한 대화 데이터가 저장되어있으니 작업 지시도 쉬울거라는 판단이었죠.

이번에도 클로드는 컬러 시스템과 타이포, 레이아웃 등 각 요소별, 단계별로 어떻게 클로드 코드에 입력하면 좋을지 상세하게 가이드를 줬어요! 매우 믿음직스러웠고 그걸 따라 차근차근 클로드 코드에 입력했습니다.

하지만 결과는… 🥲

조금 나아지긴 했지만, 여전히 시원스럽게 디자인이 나아진 느낌은 아니었어요..!

그래서... Gemini를 활용해보기로 했습니다

일단 Pinterest 등을 통해 마음에 드는 예시 디자인 몇 개를 수집하며 제가 원하는 디자인을 컨셉을 구상했습니다.

이후 풀스택 개발자이자 디자이너로 역할부여를 한 제미나이에게 간단한 서비스에 대한 소개와 함께 디자인 수정에 대한 고민 상담을 했어요!

제미나이는 개발 비 전공자도 바이브 코딩을 통해 디자인 수정을 진행할 수 있는 방법들을 알려줬는데요, 클로드 코드에 전달해보라며 디자인 가이드 프롬프트 예시까지 바로 정리해줬어요. 이 디자인 가이드 예시를 토대로 앞서 찾은 레퍼런스 이미지를 첨부하고 이를 참고하여 MVP를 만들어 달라고 했습니다.

그랬더니.. 이렇게 빠르게 MVP를 만들어 보여줬어요! 정확한 데이터를 준게 아니다보니 내용이 맞진 않았지만 디자인 느낌을 보기엔 충분했어요. 기존 디자인을 보다가 이걸보니 훨씬 마음에 들었죠.

사실 이 과정을 GPT에게도 시켜봤지만, 제미나이가 훨씬 나아서 제미나이를 수석 디자이너로 고용하기로 결정했어요. 제미나이에게 아까 만든 MVP 이미지를 첨부하고 서비스에 대한 조금 더 상세한 안내와 함께 기능을 절대 건드리지 않는 선에서 클로드 코드에 입력할 디자인 가이드 프롬프트를 부탁했어요!

그렇게 제미나이를 통해 받은 디자인 가이드 프롬프트를 순차적으로 클로드 코드에 넣기 시작했습니다.

💡 클로드 코드에 디자인 적용 시 꼭 기억할 팁

• 한꺼번에 디자인 전체를 넣지 마세요. 순차적으로 적용해야 오류 없이 반영됩니다.
• “기능은 절대 건드리지 말고, 디자인만 수정해줘” 라는 메시지를 반복해서 강조해야 해요. (완전 중요!!)
• 레퍼런스 이미지를 프롬프트에 첨부하는 방식은 안 됩니다. Claude Code는 특정 경로에 이미지를 저장하고, 그 파일 경로를 직접 입력해야만 이해하더라고요.

제미나이의 도움과 레퍼런스 이미지의 콜라보 덕분에, 드디어 날것의 디자인을 벗어날 수 있었어요!

텍스트나 버튼 문구 등 세부 수정은 조금 더 손봐야 하지만, 전반적인 비주얼 톤은 훨씬 좋아졌습니다. 정말 레퍼런스의 이미지 톤대로 만들어 줘서 너무 고마웠어요!

그런데.. 디자인 추가 수정 작업 중에 결과 페이지 전체가 통째로 날아가는 사건이 발생했어요 🫠 

디자인만 살짝 손본다고 생각했는데, 알고 보니 Gemini가 제안한 코드 중 일부가 기능과 미묘하게 연결돼 있었던 것 같아요. 저는 "로직은 그대로 두고, 디자인만!"이라고 명확히 지시했다고 생각했지만, AI들도 사람처럼 가끔은 맥락을 잘못 이해 했던게 아닐까 싶었습니다.. 😭

이후 다시 Claude에게 서비스 관련 데이터들을 다시 전달해 결과 화면을 복구하는 데 성공했습니다. 복구 작업은 다행히 크게 어렵지 않았지만 아무래도 시간이 소요될 수 밖에 없었죠. 최종적으로는 디자인 레퍼런스 찾는 것부터 제미나이로부터 디자인 가이드 받기, 클로드 코드에 적용, 마지막으로 날아간 결과화면 복구까지 총 3~4시간 정도 걸린것 같아요.

이제 정말 마지막 스퍼트만 남았습니다.

다음 글에서는 최종 디자인 정리와 배포 전 테스트, 마무리 수정을 거쳐 드디어 완성된 온라인 1인 창업 추천 도구 <나의 1인 창업 DNA는?> 를 솔비나 구독자분들께 처음으로 공개하려고 해요.

실제 사용 가능한 서비스의 완성까지,
그 다음 이야기도 많이 기대해 주세요. 곧 돌아오겠습니다! 😊

오늘도 읽어주셔서 감사합니다!