소개
저는 디자인 감각이 거의 없는 편이라, 웹사이트를 만들 때마다 늘 첫걸음이 막막했어요. 이번에는 디자인부터 배포까지 한 번에 해결할 수 있는 툴 조합을 실험해봤습니다.
디자인은 lovart.ai라는 AI 디자인 에이전트를 활용했고,
개발 초기 구조 는 lovable.dev로 세팅,
이후 cursor를 이용해 코드 수정 및 기능 추가,
supabase MCP로 데이터베이스를 세부적으로 구성하고,
최종적으로 발생한 에러는 ChatGPT의 deep research 기능을 통해 해결했어요.
처음 시도한 조합이었지만 꽤 만족스럽고, 공유해보고 싶었습니다 😄
진행 방법
1. AI 디자인 에이전트: lovart.ai
디자인 능력이 부족해서 처음 시도
베타 버전이라 걱정했지만 예상보다 훨씬 완성도 높은 디자인 제공
웹사이트 레이아웃, 구성, 색감 등 자동으로 제안해줘서 매우 만족
2. 빠른 기본 구조 생성: lovable.dev
supabase 연결까지 자동으로 설정됨
기본 인증, 라우팅 등도 포함된 템플릿으로 빠르게 시작 가능
3. 코드 기반 확장: cursor
lovable에서 생성된 프로젝트를 cursor로 열어 페이지 추가 및 수정
개발자의 개입이 필요한 부분(예: API 연동, 상태관리 등)을 이곳에서 처리
4. DB 구성: supabase MCP
추가 테이블 및 관계형 설정은 MCP에서 진행
시각화 UI로 쉽게 조작 가능해 생산성 향상
5. 예기치 못한 에러 해결: ChatGPT Deep Research
DB 구조와 코드 간의 불일치로 인해 기능 작동 오류 발생
문제의 원인을 명확히 알기 어려웠지만,
ChatGPT의 deep research 기능으로 GitHub 이슈와 관련 문서까지 함께 분석하여 빠르게 해결 💡
결과와 배운 점
툴 조합만 잘 해도 MVP는 며칠 안에 만들 수 있다는 확신이 들었어요
특히 lovart.ai + lovable.dev 조합은 디자인-프론트 기초가 약한 분에게 강력 추천
deep research는 찾기 어려운 문제까지 파고들 수 있어서 진짜 유용했어요
도움 받은 글 (옵션)
ChatGPT plus의 Deep Research 기능 (웹 & GitHub 연동)
🛠️ 다양한 툴을 조합해보는 걸 무조건 추천합니다! 익숙하지 않아도 하나씩 해보면 생각보다 잘 연결돼요 🙌