AI로 영어 학원 홈페이지 초안 뽑아보기 + 후기

원래 계획은 Cursor로 두 가지 버전을 뽑아서 보여드리는 거였는데, 생각보다 손볼곳이 많고 헤서 Lovable에게 더 수정요청을 하고 다른 AI 툴들도 돌려보는 방식을 진행했습니다.

아래는 제가 직접 써본 Lovable / Figma Make / Cursor + Gemini CLI 각 툴의 경험과 느낀 점입니다.

툴별 초안 제작 경험과 문제점

Lovable

저번에 사용해본 AI 툴입니다.
매우 쉽게 웹 페이지를 생성하고 빌드해서 배포까지 할 수 있는 것 같습니다.

• 장점
  • 간단한 PRD.MD를 생성해서 전달했을 떄 제법 괜찮은 시안을 뽑아줌
  • 회의 자리에서 즉각적으로 보여줄 수 있으나 최초 뽑아낼 떄는 생각보다 시간이 좀 걸림 -> 하지만 여러 페이지를 생성 요청해서 그런것 같네요
  • 무료 버전만 써도 꽤 나은 퀄리티가 나오는 경우가 많음
  • 과거로 되돌리려면 버튼을 눌러 가능
• 단점 / 주의점
  • 구독하지 않으면 코드 수정이 불가능합니다. -> 이 이유로 Cursor로 수정 가능한 초인을 만드려 했으나
  • 아주 세밀한 디자인 디테일을 수정하려하먄 토큰이 금방 모자랄 것,,,

비개발자가 MVP나 간단한 홍보페이지를 만드는 거라면 구독해서 사용할만하다고 생각됩니다.

Cursor + Gemini CLI: 기대와 한계

처음엔 Cursor + Gemini CLI 조합으로 두 가지 안을 뽑아보려 했습니다.
일단 Cursor를 메인으로 활용했을 때

• 장점
  • 익숙한 코드에디터에서 코드 수정 가능
• 단점 / 주의점
  • Lovable과 같은 프롬프트를 넣었는데 퀄리티가 매우 떨어짐
  • 구조나 코드적인 부분은 다른 툴보다 나은데... 결국 디자인을 갈아엎기 위해 코드를 많이 고쳐야함
  • Cursor 에디터도 마찬가지로 구독하지 않으니 VSCODE보다 불편
  • 과거로 되돌리려면 직접 형상관리 필요

비개발자가 MVP를 위해 사용하기엔 애매한거 같고 당장은 개발자가 개발을 도와주는 툴로써 쓰는게 좋을 것 같습니다.

Figma Make

커서로 초인을 여러게 만드는데에는 무리가 있을 것 같아서 피그마 메이크도 사용해봤습니다.
처음엔 Figma Design을 만드는건 줄 알았는데 Lovable과 같은 기능이더라구요

• 장점
  • Lovable과 마찬가지로 깔끔하고 거의 바로 사용 가능한 디자인
  • 구독하면 Figma Design으로 옮기기 가능
• 단점 / 주의점
  • 구독하지 않으면 제한된 기능, 아직 Beta
  • Beta이긴 하지만 Lovable에 비해 공유가 자유룝지 않고 배포도 자유룝지 않음

Figma Design기반으로 프로토타입을 뽑을 수 있고 이를 기반으로 공유도 쉽다는 장점이 있어
1인 개발자가 간단한 디자인 시안을 뽑기 좋은 것 같고 정식 출시 후 요금만 괜찮다면 구독해볼만 한 것 같습니다.

추천 용도

개인적인 생각으로의 툴 용도는 아래와 같습니다.
다 제대로 된 사용을 하려면 구독은 해야할 것 같습니다.

역할	메인 툴	보조 용도 / 보완
비개발자가 간단한 홍보페이지 퍼블리싱	Lovable	쉬운 사용 및 배포
디자인 안정성 기반 AI툴	Figma Make	Make에서 나온 시안 → 수작업 보정
코드/프로젝트 뼈대	Gemini CLI / Cursor	프로젝트 기본 구조 생성, 반복 코드 자동화

---

💬 마무리

초안들을 가지고 추가 회의를 했을 떄 Figma Make로 만든 초안이 평가가 좋았고 이를 기반으로
Next.js 이용해 홈페이지를 구성해보겠습니다.

Figma Design이 있으면 좋겠다 생각이 들긴했지만 일단 커서만 구독해서 Cursor Tab을 활용한 생산성만 높여보겠습니다.

GPT로 만든 이미지