[바이브 코딩] AI로 나만의 모바일 청첩장 만들기 (6) 프론트 디자인 AI 사이트 이용해보기 (v0.dev, Framer, WIX)

계층	추천 기술	선택 이유
Frontend	Next.js 14+ (App Router)	next/image를 통한 사진 최적화 필수. SSR/SSG 지원.
Styling	Tailwind CSS + schadcn/ui	유연한 그리드 시스템(Editorial 레이아웃) 구현에 최적.
Animation	Framer Motion	비주얼의 핵심. 스크롤 기반 인터랙션 구현 난이도 최하.
Database	Supabase (PostgreSQL)	방명록 저장용. 실시간 업데이트(Realtime) 지원.
Storage	Cloudinary 또는 Supabase Storage	고화질 사진 저장. Cloudinary는 URL 파라미터로 즉석 리사이징 가능.
Deployment	Vercel	Next.js와 찰떡궁합. 무료 티어 성능 최강.
External API	Kakao Developers	지도 API 및 카카오톡 공유 기능.

 

사실 모바일청첩장에 넣고 싶은 사진이 너무 많았는데

스냅/스튜디오 두 개를 다 찍었다보니

자랑하고 싶은게 넘 많잖아요;;

 

그래서 아이돌들 홈페이지를 좀 탐구해보기로

그러다가 눈에 띈 키키의 이번 홈페이지!

 

홈화면에서 각 오브제를 누르면 이런 갤러리들이 뜨는 방식!

괜찮은데..?

 

그리고 핀터레스트도 뒤져뒤져

 

첫 로그인 화면에서 컴퓨터 로그인 하듯이 gif로 웨딩 사진 살짝 넣고,

이름과 결혼날짜/위치만 간단하게 넣은 뒤에

아래에 무언가를 입력하면 메인 화면으로 접속

 

메인화면에는 폴더나 오브제 같은 것들을 배치해서 

클릭하면 각종 앨범이나 스냅사진, 결혼정보를 볼 수 있는 것들을 배치해보도록!

 

넘 유니크하잖아..? 내 머리속에서는 이미 상상 완료.

근데 저는 프론트엔드도 아니고 디자이너도 아니잖아요; 디자인 어뜩케 하지;;

 

그래서 일단은 또 제미나이한테 징징대며 프론트엔드 AI 사이트를 추천 받았다.

 

1. v0.dev

Next.js, Tailwind CSS 기반 프론트엔드 UI 즉시 생성
- 애초에 vercel에서 만든 곳이기 때문에 현재 내가 사용하려고 있는 기술스택과 호환성 가장 좋음

 

그럼 냅다 넣어볼게요.

 

엥 헉 생각보다 퀄리티가 좋잖아..?

 

그리고 코드도 다.. 적어줌.. 개좋음

그래서 좀 만드는데 오래걸리긴 했다.

여기서부터 나는 부푼 꿈을 안게 되었음.. 뭔가 좀 부족한데 다른 사이트도 좋지 않을까?

 

 

2. Framer

프레이머는 처음 나왔을 때 한 번 사용해봤는데, 깔끔하게 디자인이 뽑혀서 놀랐었던 기억.

거의 그때가 이런류 초반이었던 것 같아서, 조금 더 발전하지 않았을까? 하는 마음으로 돌려봄.

 

 

엥 y2k 디자인 해오라고 했더니 무슨.. 그냥..이런걸;

그리고 모바일 버전이 안되나? v0.dev는 알아서 딱 모바일형으로 만들어왔는데

얘는 계속 웹으로 만드네..

넌 안되겠다. 너무 정형화되어 있는 느낌...

이건 초반에도 사용할 때 느꼈었음.

 

3. Wix AI

다음으로는 지피티가 추천한 녀석.

이것도 혹시나 하고 돌려봤는데...

 

 

예.. y2k 하곤 전혀 관련 없는 디자인이..^^;;

코드는 타입스크립트 기반으로 짜준듯 (잘 몰라요)

 

 

일단 대략적으로 사용해봤을 땐 호환성도 그렇고 v0.dev를 잘 길들여보는게 좋을 것 같다.

크레딧은 한 달 기준 $5 주는 것 같은데..

일단 저 정도 돌렸을 땐 크레딧 소모가 일어나지 않았다!

사용해보면서 한 번 테스트 해보는 것으로...

 

그래서 v0.dev에서 좀 더 요구사항을 더 넣어서 요청을 해봤다. 

물론 젬민이가 해줬어요. ^.^

"Create a mobile-responsive wedding invitation web app with a macOS/MacBook UI theme.

Phase 1: Login Screen

Background: A serene sky wallpaper (like Windows Bliss or macOS style).

Center: A rounded profile picture frame (placeholder for a wedding GIF), a text input field for 'Guest Name', and a blue 'Login' or 'Enter' button with a glossy finish.

Phase 2: Desktop Screen

After clicking Login, transition to a Desktop view.

Top Menu Bar: Translucent bar with 'Finder', 'File', 'Edit', 'View' and time on the right.

Desktop Icons: 3-4 Folder icons titled 'Gallery', 'Our Story', 'Location', 'Guestbook'.

Phase 3: Window System

Clicking a folder opens a draggable/closable window (Finder-style).

'Gallery' window: Display images in two ways. 1) Scattered overlapping images (Polaroid style) and 2) A carousel with next/prev buttons for high-res photos.

'Location' window: Information about the wedding venue with a map placeholder.

Design Style:

Use Glassmorphism (semi-transparent backgrounds, blur effects).

Use Lucide-react icons for system buttons.

Smooth animations using Framer Motion for opening/closing windows."

 

이번에는 크레딧 한 $2 정도가 차감됐다. 쩝.. 3불밖에 안남았네..

엥 근데 진짜 미친 퀄리티가!!! 미쳤다 ㅠ 구조잡기엔 정말 좋은듯

 

모바일로는 좀 깨지는 편인데,

데스크탑으로 보면 이런 팝업형태로 구현도 잘 해놓음..

세부적인 디자인은 다듬어야겠지만 이런 틀만 짜놓는 것만으로도 엄청난데?

 

근데 문제는!

내가 프론트를 거의 잘 모른다는 것..ㅎ 

크레딧을 여기다 때려박으면서 고치긴 좀 어려울 것 같고..

아무래도 Cursor를 한 번 이용해봐야겠다.

다음 편에서는 v0.dev 에서 짠 코드들을 우선 프로젝트에 박아놓고,

Cursor로 수정해보도록 하겠다.