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

> **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. 네 가지 툴 비교 및 활용 팁

- 네 가지 툴 모두 명령어 한 번씩만으로 모바일 청첩장 제작 가능

- **비전공자도 노코드 툴만으로 간단한 웹사이트 제작이 충분히 가능함**

- 직접 만든 청첩장은 선물로도 의미 있고 감동적임

- 완벽하게 한 번에 만들기는 어렵고, 계속 수정하며 다듬는 과정이 필요함

- **영어 프롬프트가 더 정확하고 예쁜 결과를 주는 경우가 많음**

- 사용한 프롬프트가 최선이 아닐 수 있으니, 다양한 시도를 해보는 것이 좋음

![Image](https://upload.cafenono.com/image/slashpagePost/20250708/233713_r25QxMixI3AY303Zsw?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20250708/233332_GeqOg9iUBVqisnst1P?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20250708/231343_XL3iLh0qAn2LbDppmW?q=80&s=1280x180&t=outside&f=webp)

For the site tree, see the [root Markdown](https://slashpage.com/time-to-make-club.md).