사이트를 만들고자 하시는 분들~!
바이브코딩을 시도해보려고 했지만, 시작하기 너무 어려웠던 분들을 위해서 작성해보겠습니다~!
네이버! 구글! 처럼 사이트를 무료로 배포하고 싶은 분들이 있다면, 가이드도 포함해서 작성하겠습니다!!
사이트는 처음부터 끝까지 클로드 바이브코딩만으로 코드를 작성하여 구현했습니다.
어떤가요!?
위 결과물은 구현은 이틀, 버그와 오류 수정까지 일주일만에 만든 웹사이트입니다.
무엇을 만들고 싶은지와 어떻게 만들고 싶은지를 결정한다면?!
만드는건 모두~ 클로드가 해줍니다! (저는 클로드 친구비 3만 3천원.. 지불했습니다.)
<깨알 클로드로 만든 목차> < 클로드 바이브코딩 >
클로드 바이브코딩으로 카페 웹사이트 만들기 (무료 배포 A to Z)
클로드한테 이렇게 말했습니다.
첫 프롬프트 공개 — 코딩 몰라도 됩니다
만들어진 화면을 위한
주문 · 준비현황 · 자재 알림 · 샷 현황 탭
모르면 그냥 물어봤어요
운영 흐름부터 배포까지 대화로 해결
2편 예고 — 실제 무료 배포 과정 (Vercel · Render · Aiven)
클로드한테 이렇게 말했습니다.
첫 프롬프트는 정말 단순하게, 그렇지만 명확하게 합니다!
"카페 운영하는데 피크타임에 주문이 몰리면 음료 만드는 사람이 어떤 주문이 들어왔는지 실시간으로 못 봐서 혼잡해. 주문 접수하는 화면이랑 음료 만드는 사람이 보는 화면을 따로 만들고 싶어."
클로드 답변은 이랬어요.
"네, 충분히 만들 수 있어요! 크게 세 개의 화면이 필요할 것 같아요. 주문 접수 화면, 작업자 화면, 그리고 재료나 물품이 필요할 때 알림 보내는 서포트 화면이요. 어떤 메뉴들이 있는지 알려주시면 바로 시작할게요."
"백엔드가 뭐예요, DB 스키마가 뭐예요" 이런 거 하나도 몰라도 됩니다. 그냥 "이런 게 필요해" 하면 클로드가 알아서 구조를 잡아줬거든요.
프롬프트 팁은 AI가 일을 잘하기 위해 필요한 정보가 무엇인지, 어떤게 명확하지 않은지를 물어봐야 합니다.
EX. 이때 필요한 정보나 궁금한게 있으면 물어봐! 그렇다면 ~~~ 이건 어떻게 하실건가요? A , B 중에 뭐를 고르실건가요? 등등 이야기를 나눕니다.
그렇게 어떤 기능이 필요한지, 실제로 어떻게 일하고 흐름이 어떤지 등 필요한 것과 구현되는 방식을 작성하고 큰 틀을 잡아갔습니다.
만들어진 화면을 위한 복잡해보이지만 쉬운
만들어진 화면은 위에 영상에서 보실 수 있어요~! 그걸 만들기 위해 코드를 어떻게 짜고 어떤 곳에 넣는지?? 를 간략하게 설명해드릴게요!

간단하게,
웹사이트를 보고 클릭하면서 사용하죠? >> 사용자 화면
클릭하면, 그 뒤에서 클릭한 결과를 보여주려고 열심히 요청하는 것을 가져다줍니다. >> 서버
그럼 재료는 어디 있나요?? >> 데이터
로 설명이 됩니다. 그렇다면, 이걸 어디에서 관리하지? 코드는 어디에 어떻게 저장하고 업로드 해야하지?
를 차근차근 따라가봅시다!
저희 코드를 받아도 어디다 저장할지 몰라요!
계란 후라이하려면? 후라이팬!
Intellij
The Leading IDE for Professional Java and Kotlin Development
IntelliJ IDEA is the JetBrains IDE for pro development in Java and Kotlin. Built for your comfort, it unlocks productivity, ensures quality code, supports cutting-edge tech, and protects your privacy.
www.jetbrains.com

오른쪽 위에 Download 파란 버튼을 누르면 요런 페이지가 나오는데?
여기서 나에게 맞는 버전으로 다운로드 하시면 됩니다! (이때 모르면? 클로드에 스크린샷해서 물어보기 ㅎㅎ 다 알려주는데, 처음에만 조금 복잡해보이지 나중엔 계속 반복이에요!)
자 다들 후라이팬 장만하셨다면, 이제 계란을 사야겠죠??
뭐 뒤집개도 있어야하고, 기름도 있어야하고,,,, 요런 느낌으로 코딩도 비슷합니다.
후라이팬에서는 사용자 화면, 서버를 다 가져다가 놓을 수 있습니다!
- 조금 흥미가 생기셨다면, 깃허브도 한 번 검색해보세요~! mysql, aiven, render, vercel 등등 앞으로 나올 단어들~
모르면 그냥 물어봤어요
그리고 중간중간 오류가 뜨고, 어떻게 만드는지 또 무슨 말인지 이해가 안간다면,, 스크린 샷 + 복붙으로 다 물어보기!!
오류가 뜨면 아래처럼 그냥 냅다 때려 넣어서, 답을 알아내고 무슨 말인지 모르겠다면 좀 더 쉽게 말해봐..로 프롬프팅(교육)하기..


원래 코딩은 부딪히면서 부딪혀봐야 아는 법..!
생성형 AI가 나오기 전에는 혼자서는 하기 어려웠고, 오래 걸렸지만 지금은 혼자서도 조금만 부딪혀보면 할 수 있답니다~~!!



















