“디자인 감성의 모바일 청첩장 웹페이지를 만들어줘. 가상의 커플 이름은 '지훈 & 소연'이고, 결혼식 장소는 '서울 성수동 에스팩토리'야. 전체적으로 따뜻하고 차분한 느낌, 감성적이고 미니멀한 스타일이었으면 좋겠어. 모바일 사용자에게 최적화된 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) 사용 후기
•
커서는 웹사이트가 아닌 프로그램 형태로, 미리 다운로드 필요
•
새 프로젝트를 시작하고, 프롬프트와 이미지를 업로드해 실행
•
코드가 바로 적용되지 않아 추가 명령이 필요함
•
예시 화면 미제공으로 결과물 확인 방법을 직접 물어봐야 함 파일이 저장된 폴더에서 직접 열어봐야 함