문제 발견부터 수익화까지 
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

1. 바이브 코딩이란?2. 모바일 청첩장 제작의 필요성과 활용3. 네 가지 바이브 코딩 툴 소개4. 프롬프트 작성 및 디자인 준비 과정5. 레플릿(Replit) 사용 후기6. 러바블(Lovable) 사용 후기7. V0 사용 후기8. 커서(Cursor) 사용 후기9. 네 가지 툴 비교 및 활용 팁
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. 네 가지 툴 비교 및 활용 팁

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