문제 발견부터 수익화까지 
TTM 빌더 팀 합류하기

⚡ 주인장 자료

1인 개발자들을 위한 디자인 사이트 모음 | 웹사이트 디자인 레퍼런스, 바이브 디자인
레플릿 + 깃허브 연동하고, 공짜로 서비스 배포하기, 레플릿 꿀팁 2탄 | Replit, Github, CloudFlare
시간, 비용 절약하는 선 디자인 후 바이브 코딩, 레플릿 꿀팁 1탄 | Replit, Figma, Stitch AI, Chatgpt
바이브 코딩을 잘하기 위한 5가지 필수 원칙 | Replit, Chatgpt, 바이브코딩
돈이 될 수 있을까? 코딩 없이 서비스 만들고 검색 엔진 등록까지 | Replit, ChatGPT, 바이브코딩
바이브 코딩 뭐가 좋아? 요즘 대세 툴 4가지 맛보기 | Cursor, Replit, Lovable, V0, ChatGPT
단 30분, 3단계로 월 매출 14억 어플 따라 만들기 | 바이브 코딩, Replit, ChatGPT

바이브 코딩 뭐가 좋아? 요즘 대세 툴 4가지 맛보기 | Cursor, Replit, Lovable, V0, ChatGPT

Created by
  • T
    TTM
Created at
💬
Replit에 사용한 프롬프트

“디자인 감성의 모바일 청첩장 웹페이지를 만들어줘.
가상의 커플 이름은 '지훈 & 소연'이고, 결혼식 장소는 '서울 성수동 에스팩토리'야.
전체적으로 따뜻하고 차분한 느낌, 감성적이고 미니멀한 스타일이었으면 좋겠어.
모바일 사용자에게 최적화된 UI/UX로 구성하고, 세로 스크롤 기반 구조로 부탁해.
주요 섹션은 다음과 같아:
첫 화면: 커플 이름과 ‘결혼합니다’ 문구, 배경엔 흐릿한 웨딩 사진 느낌
소개: 커플의 짧은 소개 글 (예: “7년의 연애 끝에, 저희 결혼합니다.”)
일정 안내: 날짜/시간/장소 (2025년 10월 25일 오후 2시, 에스팩토리)
오시는 길: 카카오맵 또는 구글맵 임베드
마음 전하실 곳: 계좌번호 또는 마음 전하는 문구 섹션
배경은 크림빛이나 베이지톤으로 부탁하고, 글꼴은 부드럽고 깔끔한 산세리프체가 좋겠어.
각 섹션 사이에는 여백이 충분히 들어가도록 하고, 애니메이션은 최소화해서 잔잔한 분위기를 살려줘.”
이 영상은 비전공자코딩 없이모바일 청첩장웹사이트를 만들 수 있는지 확인하기 위해 **네 가지 바이브 코딩 툴(레플릿, 러바블, v0, 커서)**을 사용하여 비교 분석합니다. 각 툴의 특징과 장단점을 살펴보고, 간단한 명령어로 어느 정도 퀄리티의 결과물을 얻을 수 있는지 보여주며, 노코드 툴을 활용한 it 서비스 제작의 가능성을 제시합니다.

1. 바이브 코딩이란?

바이브 코딩은 코딩을 잘 모르는 사람도 쉽게 웹사이트를 만들 수 있게 해주는 최신 트렌드의 툴
예전에는 모바일 청첩장 같은 간단한 웹사이트도 만드는 데 시간이 오래 걸렸지만, 바이브 코딩을 활용하면 훨씬 빠르고 쉽게 제작 가능함
비전공자도 코딩 한 줄 없이 모바일 청첩장웹사이트를 만들 수 있음

2. 모바일 청첩장 제작의 필요성과 활용

모바일 청첩장은 결혼할 때 거의 필수로 사용됨
직접 만든 모바일 청첩장을 선물하면 의미가 큼
시중에서 모바일 청첩장 제작에는 약 1만 원 정도의 비용이 듦
디자인에 자신 있다면 가족이나 지인에게 만들어 줄 수 있고, 소규모 창업 아이템으로도 활용 가능함

3. 네 가지 바이브 코딩 툴 소개

이번 영상에서 사용한 툴은 레플릿(Replit), 러바블(Lovable), V0, 커서(Cursor) 총 네 가지임
각 툴마다 특징과 장단점이 다름
명령어(프롬프트) 몇 번만 입력하면 결과물을 빠르게 확인할 수 있음

4. 프롬프트 작성 및 디자인 준비 과정

ChatGPT를 활용해 감성적인 모바일 청첩장 제작에 적합한 프롬프트를 얻음 예시: 가상의 커플 이름, 실제 서울 결혼식장 정보 등 포함 두 가지 프롬프트와 팁도 함께 제공됨
디자인 이미지는 바이브 코딩 툴에 첨부할 용도로 생성함 처음에는 ChatGPT로 이미지 생성 시도, 결과가 만족스럽지 않아 구글 이미지 FX, 핀터레스트 등 다양한 툴 활용 핀터레스트에서 원하는 모바일 청첩장 이미지를 직접 찾아 저장함

5. 레플릿(Replit) 사용 후기

준비한 프롬프트와 이미지를 레플릿에 입력 후 생성 버튼 클릭
중간에 오류가 있었지만 자동으로 해결되어 결과물이 잘 생성됨
메뉴, 이미지, 문구, 일정, 위치, 계좌 정보, 공유 버튼 등 다양한 요소가 포함된 모바일 청첩장 완성
웨딩 이미지를 추가로 적용해 달라고 요청하면 잘 반영됨
모바일 화면에서도 실제 청첩장처럼 잘 구성되어 있음

6. 러바블(Lovable) 사용 후기

동일한 프롬프트와 이미지를 입력해 실행
메뉴는 비어 있지만, 예시 이미지를 활용해 하단에 배치함
문구, 일정, 장소, 계좌 정보 등은 자동으로 생성됨
메뉴에 배경 이미지가 없는 점이 아쉬움
웨딩 이미지 추가 요청 시, 이미지 크기가 완벽하게 맞지 않음
모바일 화면에서는 이미지 정렬이 괜찮음

7. V0 사용 후기

동일한 프롬프트와 이미지를 입력해 실행
예시 이미지를 상단에 배치하고, 문구, 일정, 지도, 계좌 정보 등도 잘 들어감
실제 지도 API를 연결해 위치 정보를 보여주는 점이 특징
웨딩 이미지 추가 요청 시, 중간에 이미지를 넘겨볼 수 있는 앨범 공간이 추가됨
사용자의 요구를 잘 이해해 반영하는 점이 인상적임

8. 커서(Cursor) 사용 후기

커서는 웹사이트가 아닌 프로그램 형태로, 미리 다운로드 필요
새 프로젝트를 시작하고, 프롬프트와 이미지를 업로드해 실행
코드가 바로 적용되지 않아 추가 명령이 필요함
예시 화면 미제공으로 결과물 확인 방법을 직접 물어봐야 함 파일이 저장된 폴더에서 직접 열어봐야 함
기능은 모두 들어가 있으나, 기본 디자인이 다소 실망스럽고 센스가 부족함
지도 API는 연결되어 있음
이미지 업로드 과정이 번거롭고, 이미지 링크나 파일명을 직접 입력해야 함
이미지 적용 후 레이아웃이 깨지는 등 완성도가 아쉬움

9. 네 가지 툴 비교 및 활용 팁

네 가지 툴 모두 명령어 한 번씩만으로 모바일 청첩장 제작 가능
비전공자도 노코드 툴만으로 간단한 웹사이트 제작이 충분히 가능함
직접 만든 청첩장은 선물로도 의미 있고 감동적임
완벽하게 한 번에 만들기는 어렵고, 계속 수정하며 다듬는 과정이 필요함
영어 프롬프트가 더 정확하고 예쁜 결과를 주는 경우가 많음
사용한 프롬프트가 최선이 아닐 수 있으니, 다양한 시도를 해보는 것이 좋음