경험상 바로 Cursor에 “이런 사이트 만들어줘”라고 시키는 것보다,
AI 빌더를 통해 화면 구조를 먼저 잡는 방식이 훨씬 효율적입니다.
코드를 직접 작성하지 않아도, 자연어로 웹사이트를 생성해주는 AI 빌더 서비스가 있습니다.
제가 주로 사용하는 서비스는 ‘v0’라는 도구인데, Next.js + Tailwind 기반으로 실제 배포가능한 프로덕션 코드를 생성해줍니다.
lovable, bolt 등의 서비스도 있지만 체감상 생성 결과의 품질이 다른 툴보다 높아서 애용하고 있습니다.
https://v0.app/ 에 접속하면 바로 사용가능하며, 무료 한도 내에서도 사이트 초기 디자인과 구조를 잡는 정도에는 충분합니다.
이후 신규 컴포넌트나 디자인은 Cursor에게 기존 디자인과 이질감이 들지 않도록 만들어달라고 하면 됩니다.
저는 아래와 같이 프롬프팅했고, 이후 화면 캡쳐와 같은 첫 결과물이 나왔습니다.
우리 서비스의 주 사용자 타겟은 내일 날씨, 이번주 날씨, 기온별 옷차림을 검색하는 유저들이고, 유저에게 트렌디함/편함/자주 들어오고싶은 인상을 주고 싶어.
홈페이지 (’/’)에 사용할 컴포넌트를 만들어줘. 아래 정보가 포함되어야 해.
오늘의 날씨 정보
- 위치: 맨 왼쪽부터, 화면의 약 65%~70% 차지
활동지수 (Activity Score)
- 80점 이상: 실외활동하기 좋은 날씨 (적절한 문구 필요)
- 80점 미만: 실내활동하기 좋은 날씨 (적절한 문구 필요)- 위치: 오늘의 날씨 정보의 오른쪽 영역 상단에 위치
졸라맨에 옷입혀서 오늘의 기온/날씨에 따른 옷차림 추천- asset으로 반팔티, 반바지, 바람막이, 후드티, 패딩, 코트 등등을 만들어서 조합가능하게 해줘
- 위치: 활동지수 아래에 위치
v0의 첫 결과물에서 이어서 수정을 진행할 수 있는데,
최대한 v0에서 다듬고 가야 Cursor에서 프롬프팅할 일이 적어집니다.
저는 졸라맨의 완성도가 떨어진다고 생각해서 이 부분을 위주로 다듬었고, 아래는 그 결과물입니다.
