CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·주식한당 ·아이포니앙 ·일본산당 ·방탄소년당 ·MaClien ·자전거당 ·안드로메당 ·개발한당 ·이륜차당 ·AI당 ·소셜게임한당 ·냐옹이당 ·나스당 ·소시당 ·오른당 ·위스키당 ·PC튜닝한당 ·스팀한당 ·노젓는당 ·패스오브엑자일당 ·바다건너당 ·와인마신당 ·가상화폐당 ·젬워한당 ·육아당 ·클다방 ·IoT당 ·키보드당 ·리눅서당 ·찰칵찍당 ·달린당 ·날아간당 ·골프당 ·3D메이킹 ·X세대당 ·ADHD당 ·AI그림당 ·사과시계당 ·배드민턴당 ·야구당 ·농구당 ·블랙베리당 ·곰돌이당 ·비어있당 ·FM당구당 ·블록체인당 ·보드게임당 ·활자중독당 ·볼링친당 ·캠핑간당 ·문명하셨당 ·클래시앙 ·콘솔한당 ·요리한당 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·디아블로당 ·개판이당 ·동숲한당 ·날아올랑 ·전기자전거당 ·e북본당 ·갖고다닌당 ·이브한당 ·패셔니앙 ·물고기당 ·도시어부당 ·FM한당 ·맛있겠당 ·포뮬러당 ·걸그룹당 ·안경쓴당 ·차턴당 ·총쏜당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·KARA당 ·꼬들한당 ·덕질한당 ·어학당 ·가죽당 ·레고당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·영화본당 ·MTG한당 ·소리당 ·노키앙 ·적는당 ·방송한당 ·그림그린당 ·소풍간당 ·심는당 ·라즈베리파이당 ·품앱이당 ·리듬탄당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·축구당 ·나혼자산당 ·스타한당 ·파도탄당 ·퐁당퐁당 ·테니스친당 ·테스트당 ·빨콩이당 ·공대시계당 ·여행을떠난당 ·터치패드당 ·트윗당 ·창업한당 ·VR당 ·시계찬당 ·WebOs당 ·WOW당 ·윈폰이당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

사용기

기타 바이브 코딩으로 웹 서비스 만들 수 있을까?까?까?까!..가.. 됐습니다! 30

32
2025-11-24 15:49:14 121.♡.143.145
mr.cho

요즘 핫한 ‘바이브 코딩’… 나도 할 수 있을까? 하는 마음으로 접근해서,
비전공자도 할 수 있다는 걸 확인한 한 해였던 것 같습니다.

앱은 아직 제대로 접근해 보지 않아서 잘 모르겠지만, 웹 서비스(홈페이지)는 한번 멋지게 만들어 보고 싶은 마음에
긴 여정 끝에 결과물을 만들 수 있었습니다.

처음에는 GPT + VS Code로 코드 하나하나 붙여가며 피드백을 받고 고쳐 나갔는데, 점차 기술의 발전 속도가 빨라지면서
Cursor까지 등장하니 코드의 연결성이 더 좋아지고, 거기에 Claude Code까지 합세하니 정말 엄청나더군요.

깔끔한 웹페이지 UI는 Rubbable(러버블)을 통해 생성하니 시간이 갈수록 개발 속도가 붙기 시작했습니다.

3.jpg 커서+클로드코드 사용 이미지

중간중간 Claude Code의 능력자 분들의 기능(슈퍼클로드 등)이 비약적으로 발전하면서 차츰 안정적인 개발이 가능해졌습니다.
AI와 코딩을 함께 하면 작은 오류를 수정하다가 전체를 날리는 경우가 많아서 잦은 백업은 필수였는데, 이런 부분들도 점차 좋아지더라고요! 현재는 Claude Code Skills까지 나왔지만, 아직 공부를 못해서 적용을 못해봤습니다.

처음 만들었던 ‘로또 사이트’!

4.jpg 로또 사이트 이미지

최초 시작한 1회차부터 현재까지 1등 ~ 3등 번호는 제외하고 추첨하고, 생성된 번호가 실제 당첨이 되었는지 검증까지 하게 바이브 코딩으로 만들었던 첫 사이트였습니다.

5.jpg

아쉽게도 4등까지만 나오고 3등 이상은… ㅠㅠ

그리고 최근에 만든 두 번째 서비스, ‘알뜰폰 비교 사이트’를 만들어 보자!라고 시도했고, 장장... 7개월 만에... 

알뜰폰 마켓 서비스를 만들게 되었습니다. 

1.jpg

직장인 입장에서 하나하나 관리하기 힘들어서 최대한 자동화되도록 만들어 보았습니다 ㅎㅎ

개발에 사용한 툴은 Cursor + Claude Code, 서비스 운영은 DB는 Supabase, Backend는 Render, Frontend는 Vercel을 사용해 웹서비스를 구축했습니다. 하나하나 크롤러 만드는 게 이렇게 고된 일인 줄 처음 알았습니다… ㅠ
개발자 분들, 정말 대단합니다. .

개발 이후 조금씩 버전업하면서 현재는 알뜰폰 비교 사이트별 혜택까지 한 번에 확인할 수 있도록 기획하고 반영해 보았습니다.

2.jpg

그런데 마음처럼 되지는 않더군요. 1차로 크롤링한 요금제 정보와 요금제 비교 사이트의 실제 요금제 매칭이 정말 어려웠습니다.
현재는 매칭률이 부정합성이 높아서 유사한 요금제까지 노출되는 것이 장점이자 단점이 되어버렸습니다.

그리고 수익 구조를 위해 광고 온/오프 기능까지 구현은 했지만, 제어가 잘 되지 않는 부분이 있어 수정 중입니다.

6.jpg

이렇게 광고까지 붙여 운영하면서 이상이 없는지 확인하는 것도 역시 쉽지 않더군요. 동시접속이나 기타 오류 등등… 

뭔가 두서없는 넋두리가 되어버렸네요.

결론은, 40대 초입이지만 노력과 상상력만 있다면 어떻게든 나만의 서비스를 만들 수 있다는 것!을.. 알리고 싶었습니다.

두서없는 넋두리.. 읽어 주신분들 정말 감사드립니다.




mr.cho 님의 게시글 댓글
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [30]
유마거사
IP 112.♡.231.190
11-24 2025-11-24 15:58:08
·
멋지십니다. 깔끔하게 만드셨네요. 혹시 알뜰폰마켓 URL 좀 알 수 있을까요? (본문에 없는 것 같아서..)
mr.cho
IP 121.♡.143.145
11-24 2025-11-24 16:05:01
·
@유마거사님 앗 깔끔하게 봐주셔서 감사합니다ㅠㅠ
URL은 https://mvnoall.winmoa.net/ << 입니다! ㅎㅎ 혹시 보시고.. 많은 지적사항 좀.. 부탁드립니다(꾸벅)
corns
IP 198.♡.109.45
11-24 2025-11-24 16:16:24
·
대단하십니다. 구체적으로 어떻게 하셨는지 배우고 싶네요 ㅎㅎ
mr.cho
IP 121.♡.143.145
11-24 2025-11-24 16:32:17
·
@corns님 처음엔.. 호기심에 유튜브 보다가.. ai 자동 글쓰기로.. 시작하다가.. 나도 블로그 같은것을 만들어 보면 어떨까로 시작했었습니다. ㅎㅎ 바이브 코딩 관련된 유튜브 영상이 엄청 많다 보니.. 의구심을 갖지 마시고.. 일단 시작하는게 좋을 것 같습니다(광고-강의 결제 유도 등)은 보시되.. 필요한 부분만 챙겨 보시는 게 좋습니다. 간단하게... 홈페이지 만드는 건 러버블 ai로 해보시길 추천드립니다. 내가 원하는 거나... 만들고 싶었던 사이트 이미지나 링크 주면... 겉?면은 거의 비슷하게.. 만들어 주더라구요.
kwatch
IP 183.♡.175.53
11-24 2025-11-24 16:37:12
·
실제 각 통신사마다 가져오는거 아니라 이미 만들어져있는 비교사이트에서 긁어오시면 문제될듯 합니다.
mr.cho
IP 121.♡.143.145
11-24 2025-11-24 16:55:50
·
@kwatch님 아 기본은.. 32개.. 알뜰폰 사이트에서 하나 하나.. 긁어 온 후.. 현재.. 홈페이지 접속 하시면 보이는 목록에 노출이 됩니다. 이후 요금제의 상세 페이지로 들어가면.. "요금제 정보" 아래에.. 해당 요금제를 노출하고 있는 비교사이트의 혜택이.. 노출되는 구조 입니다. 해당부분은.. 수기로? 노출하면 괜찮다고 해서.. 검토 중인 부분 입니다.. 조언 주셔서 감사합니다.
werone80
IP 106.♡.128.187
11-24 2025-11-24 16:44:02
·
우와 멋집니다~ 정보보기에 너무 깔금하고 좋네요. 혹시 10mbps도 추가해줄수있으실까요..대부분이 5mbps라.
알뜰폰 hub보다 깔끔하고 좋은거같아요.
mr.cho
IP 121.♡.143.145
11-24 2025-11-24 16:57:12
·
@werone80님 좋게 봐주셔서 감사합니다. 10Mbps!.. 검토해 보겠습니다 ㅎㅎ 웹버전은 괜찮은데.. 반응형(모바일)로 갔을때... 안이뻐서... ㅠ 그리고 10Mbps 알뜰폰은 비쌉니다...ㅠㅠ
책읽는곰
IP 211.♡.222.169
11-24 2025-11-24 23:28:39
·
와우, 정말 멋지십니다.
저도 고민하고 있는 분야인데, 아직 서비스로는 론칭하지 못했고, 제가 쓰려고 몇 가지 만든 것이 전부입니다.
이렇게 멋진 서비스를 만드셨다니 정말 대단하십니다.
나이도 저랑 비슷한 동년배라서 더 반갑고 응원하게 됩니다.
아무튼 응원합니다!
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 10:00:48
·
@책읽는곰님 응원 감사드립니다. 저도 처음에는 시행착오가 엄청 많았습니다. 현재 만들었던.. 서비스도.. 3~4번 갈아 엎고.. 겨우.. 성공했던 것이라... 정말.. 실패는 성공의 어머니 인것 같습니다. 힘내십시오^^
mupa
IP 180.♡.206.38
11-25 2025-11-25 01:09:44
·
비전공자가 이정도라니 대단하네요.
ui 디자인은 Rubbable이라는곳에서 하신건가요?
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 10:03:10
·
@mupa님 직접 URL을 공유해도 될지 모르겠지만.. https://lovable.dev/ << 에서 디자인(프론트쪽)을 구현을 하고.. DB와 백엔드쪽은 커서와 클로드코드로 작업을 했습니다. 디자인은 하시기 전에.. 여러 사이트를 가시보고.. 컨셉같은걸 ai통해서 분석을 받고.. 개발기획서? 같은것 달라고해서 러버블에.. 던지면.... 만들어주는데.. 여러번 시도하셔서 원하는 결과물 나오면..git 통해서 코드 받으시면 됩니다 ^^;;
KTJZ
IP 211.♡.203.248
11-25 2025-11-25 07:05:11 / 수정일: 2025-11-25 07:07:31
·
Rubbable이 아니라 Lovable(https://lovable.dev) 인것 같네요. v0만 써봤었는데 이것도 기회되면 써봐야겠네요
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 10:03:44
·
@KTJZ님 맞습니다 ^^;; 하루 5회 무료로 되는 부분 있어서.. 무료로.. 저는 디자인만 ㅎㅎㅎ
꿈별
IP 39.♡.24.202
11-25 2025-11-25 08:30:33
·
왜 하나의 ai ide가 아니라 두개를 사용하셨는지 알 수 있을까요?
cursor + cluade code 이렇게 두개 사용하셨다고 해서 문의드립니다
스냥이
IP 1.♡.27.42
11-25 2025-11-25 09:20:30 / 수정일: 2025-11-25 09:41:30
·
@꿈별님 클로드코드는 현재 GUI 형태의 IDE가 없고 터미널 기반 CLI 형태라서, 코드를 보기 위해서는 IDE를 또 띄워야하는 단점이 존재합니다. 그런데 커서나 VS CODE, 윈드서프 같은 GUI형태 IDE에서 터미널을 열고 작업하면 IDE 하나의 창에서 코드도 보면서 IDE 내에 터미널에서 클로드 코드로 작업 지시하고 할 수 있게 되서 많이들 이런 형태로 작업을 합니다. 그리고 클로드 코드의 20달러짜리 Pro 요금제의 경우 토큰제공량이 좀 짠 편(저만 그런지는 모르겠지만요 저도 맥스 요금제 구독하고 싶네여ㅠㅠ)이라, 자잘자잘한 수정/디버깅 작업은 커서 내장 AI Chat으로 해결하면 클로드의 토큰을 절약할 수 있기도 합니다.커서도 요금제 개편하면서 좀 개악되긴 했지만요 ㅠㅠ
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 10:06:39
·
@꿈별님 스냥이 님이 잘 설명을 해주신것 같습니다 ^^;; 관련해서 유튜브 같은데 찾아보시면.. vscode, 커서 등과 연결?하는 방법이 쉽게 나와있는 영상이 많이 있습니다. 저도 영상보고 아둥바동 했던 기억이 있어서.. ㅎㅎ 말로 설명드리는 것보단 한번 보시는게 좋을 것 같습니다.
땅콩미좋아
IP 223.♡.99.205
11-25 2025-11-25 09:05:53
·
오, 멋지네요. Cursor + Claude Code라니 요즘 이런 방식으로 많이 사용하고 있던데, 공부를 많이 하신 것 같습니다.
아직 상용화단계는 아니지만 제가 만들고 있는 https://atorang.figma.site/ 에도 관심 부탁 드립니다.
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 10:08:16
·
@땅콩미좋아님 오~ 멋지습니다 ㅎㅎ 저도 다음 프로젝트 준비 중이긴 한데.. 아직 완전히 작업이 끝난게 아니여서.. ㅎㅎ 완료되면 여행관련으로 넘어가 볼까 계획 중입니다. 프론트는 따놓은 상태인데.. 이번엔.. 개발과제가 쫌 커서.. 위치기반 api도 연동하고 해야해서.. 해낼 수 있을까.. 걱정이 많습니다 ㅠㅠ 힘내십시오!
mechno
IP 106.♡.130.241
11-25 2025-11-25 10:37:43
·
오우 좋네요.

저는 caffeine.ai 서비스로 개인용 웹 서비스 만드는데 그냥 자연어로 명령 하면 만들어주니 편하고 좋더라구요.
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 10:52:23
·
@mechno님 앗! "caffeine.ai 서비스"메모 하겠습니다 ㅎㅎ ai 도 여러가지를 써보고 장단점을 파악해보는 것도 정말 중요한 것 같더라구요. 같은 ai여도.. 매번 생성하는 것이 달라서 ㅎㅎ
mechno
IP 121.♡.116.21
11-25 2025-11-25 11:10:45
·
@mr.cho님 저는 다른 ai 툴로 해보진 않았는데 이것만 써봐도 신세계더라구요. 복잡한건 힘들수도 있을거 같은데 간단한 웹 앱 만들어주는건 정말 최고~

방금 로또 웹 만들어봤는데 오류 수정 명령 포함
7줄 써서 만든거에요.
https://korealotto-2e8.caffeine.xyz/
라이머
IP 220.♡.70.1
11-25 2025-11-25 10:46:58
·
저는 맨날 해야겠다하고서 안하는데 실행력까지 대단하신 것 같아요!!
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 10:54:24
·
@라이머님 감사합니다 ㅎㅎ 저도 처음에.. 혼자 공부하려고 할땐.. 파이썬 책만 몇권... 사두고 보지다 않았는데... 이렇게 서비스가 만들어지는 모습을 보니.. 정말 많이 뿌듯 했습니다. 처음.. 시작이 중요한 것 같습니다. 입코딩(바이브코딩) 정말.. 하다보면 잼있습니다 ㅎㅎ 시간 가는 줄 모르겠더라구요!
Kanilea
IP 112.♡.64.86
11-25 2025-11-25 11:18:46
·
"회원가입"이 생겨나는 순간 지옥의 시작입니다...
이런건 vibe에 의존하다 큰일나죠...
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 12:22:37
·
@Kanilea님 넵 맞습니다. 그래서 보통... 바이브로 개발 후 유지보수에 많이 애먹는다고 하더라구요. 일단.. 해당 사이트는 개인정보 취급 자체를 지양하고 있어서.. 향후에도.. 회원가입 같은 시스템은.. 구현할 계획이 없습니다(능력도 안되서 ㅠㅠ)
위대한 전진
IP 125.♡.71.120
11-25 2025-11-25 13:25:35
·
Cursor 유료로 이용해야 개발 가능한가요? 저는 해볼려고 했는데 api 키 없으면 많이 못하겠더라구요.
mr.cho
IP 121.♡.143.145
11-25 2025-11-25 13:46:07
·
@위대한 전진님 커서보다는 개발쪽은 사람마다 의견이 다르긴 한데... 매번 새로운 ai버전이 나올때마다.. 바뀌는 경우도 있어서.. 저는 claude max 플랜... 결제해서 이용했었습니다. 개발시 토큰 사용량이 많아서.. 하위 플랜은.. 개발 도중 흐름이 끊길 수 있거든요.. Cursor or VSCODE는 브라우저? 느낌으로 보시면 좋을 것 같습니다.
Axel
IP 210.♡.116.206
11-25 2025-11-25 20:53:10
·
배포는 어떻게 하셧을까요?
결국 서비스는 겉에 만들기는 용이한데, 이것저것 구조나 안정성 때문에 배울거나 고려할게 많아서...
mr.cho
IP 121.♡.143.145
11-26 2025-11-26 14:31:00
·
@Axel님 배포........마음이 아팠죠.. 첫번째로 만들던게... 배포에서 하다.. 포기 ㅠㅠ;;
Cursor + VSCODE 면... 클로 명령창에서 하면 웬만한건 다 연결 해주더라구요.
개발관련된 내용은 github 통해서 프론트, 백엔드 올리고.. render쪽에.. 백엔드를 연결하고.. vercel에서 프론트 연결해서 배포 했습니다. git하고 연동이 자연스럽게 되는게 많아서.. 조금 수월한 편이였습니다. 중간 중간 막히시는 부분은.. claude code와 대화를 하시면서 해결하시면.. 충분 합니다! 이게 답답한게.. 이미지 첨부가 바로 안되는 부분이 간혹 생기는데.. 그럴때는 해당 프로젝트 루트에 이미지 파일 저장하시고.. @1.jpg << 예시 처럼 해당 이미지 파일 보고 문제점 확인해줘. 이런식으로.. 해결 하시면 됩니다 ㅎㅎ
새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB / 업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.