요즘 핫한 ‘바이브 코딩’… 나도 할 수 있을까? 하는 마음으로 접근해서,
비전공자도 할 수 있다는 걸 확인한 한 해였던 것 같습니다.
앱은 아직 제대로 접근해 보지 않아서 잘 모르겠지만, 웹 서비스(홈페이지)는 한번 멋지게 만들어 보고 싶은 마음에
긴 여정 끝에 결과물을 만들 수 있었습니다.
처음에는 GPT + VS Code로 코드 하나하나 붙여가며 피드백을 받고 고쳐 나갔는데, 점차 기술의 발전 속도가 빨라지면서
Cursor까지 등장하니 코드의 연결성이 더 좋아지고, 거기에 Claude Code까지 합세하니 정말 엄청나더군요.
깔끔한 웹페이지 UI는 Rubbable(러버블)을 통해 생성하니 시간이 갈수록 개발 속도가 붙기 시작했습니다.
커서+클로드코드 사용 이미지
중간중간 Claude Code의 능력자 분들의 기능(슈퍼클로드 등)이 비약적으로 발전하면서 차츰 안정적인 개발이 가능해졌습니다.
AI와 코딩을 함께 하면 작은 오류를 수정하다가 전체를 날리는 경우가 많아서 잦은 백업은 필수였는데, 이런 부분들도 점차 좋아지더라고요! 현재는 Claude Code Skills까지 나왔지만, 아직 공부를 못해서 적용을 못해봤습니다.
처음 만들었던 ‘로또 사이트’!
로또 사이트 이미지
최초 시작한 1회차부터 현재까지 1등 ~ 3등 번호는 제외하고 추첨하고, 생성된 번호가 실제 당첨이 되었는지 검증까지 하게 바이브 코딩으로 만들었던 첫 사이트였습니다.

아쉽게도 4등까지만 나오고 3등 이상은… ㅠㅠ
그리고 최근에 만든 두 번째 서비스, ‘알뜰폰 비교 사이트’를 만들어 보자!라고 시도했고, 장장... 7개월 만에...
알뜰폰 마켓 서비스를 만들게 되었습니다.

직장인 입장에서 하나하나 관리하기 힘들어서 최대한 자동화되도록 만들어 보았습니다 ㅎㅎ
개발에 사용한 툴은 Cursor + Claude Code, 서비스 운영은 DB는 Supabase, Backend는 Render, Frontend는 Vercel을 사용해 웹서비스를 구축했습니다. 하나하나 크롤러 만드는 게 이렇게 고된 일인 줄 처음 알았습니다… ㅠ
개발자 분들, 정말 대단합니다. .
개발 이후 조금씩 버전업하면서 현재는 알뜰폰 비교 사이트별 혜택까지 한 번에 확인할 수 있도록 기획하고 반영해 보았습니다.

그런데 마음처럼 되지는 않더군요. 1차로 크롤링한 요금제 정보와 요금제 비교 사이트의 실제 요금제 매칭이 정말 어려웠습니다.
현재는 매칭률이 부정합성이 높아서 유사한 요금제까지 노출되는 것이 장점이자 단점이 되어버렸습니다.
그리고 수익 구조를 위해 광고 온/오프 기능까지 구현은 했지만, 제어가 잘 되지 않는 부분이 있어 수정 중입니다.

이렇게 광고까지 붙여 운영하면서 이상이 없는지 확인하는 것도 역시 쉽지 않더군요. 동시접속이나 기타 오류 등등…
뭔가 두서없는 넋두리가 되어버렸네요.
결론은, 40대 초입이지만 노력과 상상력만 있다면 어떻게든 나만의 서비스를 만들 수 있다는 것!을.. 알리고 싶었습니다.
두서없는 넋두리.. 읽어 주신분들 정말 감사드립니다.
URL은 https://mvnoall.winmoa.net/ << 입니다! ㅎㅎ 혹시 보시고.. 많은 지적사항 좀.. 부탁드립니다(꾸벅)
알뜰폰 hub보다 깔끔하고 좋은거같아요.
저도 고민하고 있는 분야인데, 아직 서비스로는 론칭하지 못했고, 제가 쓰려고 몇 가지 만든 것이 전부입니다.
이렇게 멋진 서비스를 만드셨다니 정말 대단하십니다.
나이도 저랑 비슷한 동년배라서 더 반갑고 응원하게 됩니다.
아무튼 응원합니다!
ui 디자인은 Rubbable이라는곳에서 하신건가요?
cursor + cluade code 이렇게 두개 사용하셨다고 해서 문의드립니다
아직 상용화단계는 아니지만 제가 만들고 있는 https://atorang.figma.site/ 에도 관심 부탁 드립니다.
저는 caffeine.ai 서비스로 개인용 웹 서비스 만드는데 그냥 자연어로 명령 하면 만들어주니 편하고 좋더라구요.
방금 로또 웹 만들어봤는데 오류 수정 명령 포함
7줄 써서 만든거에요.
https://korealotto-2e8.caffeine.xyz/
이런건 vibe에 의존하다 큰일나죠...
결국 서비스는 겉에 만들기는 용이한데, 이것저것 구조나 안정성 때문에 배울거나 고려할게 많아서...
Cursor + VSCODE 면... 클로 명령창에서 하면 웬만한건 다 연결 해주더라구요.
개발관련된 내용은 github 통해서 프론트, 백엔드 올리고.. render쪽에.. 백엔드를 연결하고.. vercel에서 프론트 연결해서 배포 했습니다. git하고 연동이 자연스럽게 되는게 많아서.. 조금 수월한 편이였습니다. 중간 중간 막히시는 부분은.. claude code와 대화를 하시면서 해결하시면.. 충분 합니다! 이게 답답한게.. 이미지 첨부가 바로 안되는 부분이 간혹 생기는데.. 그럴때는 해당 프로젝트 루트에 이미지 파일 저장하시고.. @1.jpg << 예시 처럼 해당 이미지 파일 보고 문제점 확인해줘. 이런식으로.. 해결 하시면 됩니다 ㅎㅎ