Lovable을 이용한 MVP UI 만들기

소개

Vibe Coding Tools Cursor, Windsurf 는 알고 있었지만, Lovable이 웹페이지나 초기 디자인 컨셉을 잘 만들어준다는 강사님의 말씀를 듣고 도전 해 보았습니다.

진행 방법

사용도구 및 웹사이트

  1. chatGPT

  2. Dribbble.com - 디자인 참고 사이트

chatGPT 4o 로 PRD 생성요청

  1. 먼저 GPT를 통해 원하는 기능의 요청 프롬프트를 정리하고

pms (project manage system) 만들기
prd 파일을 만들어줘
자세한 요구사항
1. 사용자 : it 회사의 프로젝트을 수행하는 pm
2. 관리자 : it 회사의 임원 및 pmo 조직
3. 웹, 모바일에서 접속 가능
4. 사용자는 프로젝트 정보를 입력한다. (프로젝트명, 프로젝트코드, 고객사, 설계자, 개발자, 프로젝트 일정)
5. 관리자는 등록된 프로젝트와 일자를 관리한다.
6. 사용자가 사용하기 편하게 해야 한다.
7. 기본적으로 간트 챠트 기능이 구현되어야 한다.

이를 바탕으로 PRD 파일을 생성하였습니다.

# 📝 Product Requirements Document (PRD)

## 📌 프로젝트명
**PMS (Project Management System)**

---

## 1. 제품 개요

**PMS**는 IT 기업의 프로젝트 관리를 돕기 위한 웹 및 모바일 기반 시스템입니다. PM(프로젝트 매니저)은 프로젝트 정보를 등록·관리하고, 관리자는 전체 프로젝트 일정과 상태를 모니터링할 수 있습니다. 직관적이고 간편한 UI/UX를 기반으로 간트 차트 시각화를 기본 제공합니다.

---

## 2. 주요 사용자

| 역할 | 설명 |
|------|------|
| 사용자 (PM) | 프로젝트를 직접 등록하고 담당자를 지정하며, 일정과 진행 상태를 관리 |
| 관리자 (임원/PMO) | 전체 프로젝트를 모니터링하고, 일정을 조정하며, 프로젝트 상태를 리포트 형태로 확인 가능 |

---

## 3. 플랫폼 요구사항

- Web (Chrome, Edge, Safari 최신 버전 대응)
- Mobile (Responsive Web 또는 Hybrid App으로 Android/iOS 대응)

---

## 4. 주요 기능

### 4.1 사용자(PM) 기능

- 프로젝트 등록
  - 프로젝트명
  - 프로젝트코드 (중복 불가)
  - 고객사명
  - 설계자, 개발자 (사내 인력 목록에서 선택)
  - 프로젝트 시작일, 종료일

- 프로젝트 수정/삭제 (본인이 등록한 프로젝트만 가능)
- 프로젝트 진행 상태 입력 (예: 준비, 설계, 개발, 테스트, 완료)
- 간트 차트 시각화 (Drag&Drop으로 일정 조정 가능)
- 모바일 최적화된 인터페이스 제공

### 4.2 관리자 기능

- 전체 프로젝트 리스트 보기 (필터: 고객사, 기간, 담당자, 상태 등)
- 특정 프로젝트 상세 보기 및 수정 권한
- 간트 차트 기반 전체 일정 모니터링
- 사용자별 프로젝트 참여 현황 확인
- 리포트 생성 (PDF/Excel 출력)

---

## 5. 시스템 요건

| 항목 | 설명 |
|------|------|
| 백엔드 | Spring Boot (Java) 기반 REST API |
| 프론트엔드 | React 또는 Polymer |
| 데이터베이스 | PostgreSQL |
| 인증 | JWT 기반 사용자 인증 (관리자/사용자 Role 분리) |
| 배포 | AWS 또는 사내 서버 환경 |
| 보안 | 시큐어코딩 적용, OWASP Top 10 대응

---

## 6. UX/UI 요구사항

- 직관적인 사용자 인터페이스
- 자동완성 및 최소 입력 방식
- 반응형 디자인으로 모바일 UX 강화
- 상태별 색상 시각화
- 간트차트 라이브러리 예시:
  - `frappe-gantt`
  - `dhtmlx-gantt`
  - `react-gantt`

---

## 7. 비기능 요구사항

- 응답 속도: 1초 이내
- 데이터 무결성 보장
- 1만 건 이상의 프로젝트 확장성 고려
- Role 기반 접근 제어
- 감사 로그 및 행위 추적 기능

---

## 8. 초기 개발 MVP 범위

| 기능 | 포함 여부 |
|------|-----------|
| 프로젝트 등록/조회/수정 | ✅ |
| 기본 간트 차트 구현 | ✅ |
| 관리자용 전체 리스트 보기 | ✅ |
| 모바일 대응 (반응형 웹) | ✅ |
| 로그인 및 사용자 권한 | ✅ |
| 리포트 및 고급 통계 기능 | ❌ (차후 버전 개발 예정) |

---

이후 lovable.dev 에 접속하여 계정을 생성한 뒤, 프롬프트와 참고용 이미지를 함께 업로드하여 실행하였습니다.

한국 계정 페이지의 스크린 샷

첨부한 디자인 이미지를 기반으로 매우 높은 완성도의 디자인을 생성해주었고, 기대 이상으로 만족스러웠습니다.

단, 생성된 화면에서 왼쪽 메뉴를 클릭할 때 간혹 404 에러가 발생하는 경우가 있었습니다. 이럴 때는 Lovable 좌측 프롬프트 창에 해당 URL과 함께 “404 에러가 발생한다”는 내용을 입력하면, 시스템이 자동으로 감지하고 수정된 버전으로 다시 생성해주었습니다.

아래는 Lovable가 만들어준 각 메뉴를 클릭하며 확인한 실제 화면입니다.

한국어 웹 사이트의 스크린 샷

이후 디자인 결과물을 GitHub와 연동하여 저장하고, 로컬 환경에 git clone을 통해 다운로드 받은 뒤,

Cursor에서 해당 소스를 오픈하여 본격적인 개발에 착수하였습니다.

앞으로 Cursor를 활용하여 보안 취약점 분석시큐어 코딩 기준에 맞춘 상세 기능들을 구현해나갈 예정입니다.

결과와 배운 점

Lovable는 정말 초기 디자인을 안정적으로 잘 잡아주는 툴이라고 생각합니다.

이름처럼 결과물이 참 사랑스럽고 매력적으로 느껴집니다.

개인적인 경험으로는, 처음 생성된 결과물에서 90% 정도 만족스러웠다면, 나머지 10%를 수정 요청하기보다는 PRD를 다시 정리해서 새롭게 생성하는 것이 더 좋은 결과를 얻을 수 있었습니다.

수정 요청을 반복하면 오히려 처음 마음에 들었던 부분들이 의도치 않게 사라지는 경우가 종종 있었기 때문입니다.

앞으로도 Cursor와 함께 “Vibe Coding With Secure” 경험을 만들어가고 싶습니다.


정말 왜 이제야 이 커뮤니티를 알게 된 건지… 지난 시간들이 너무 아깝다는 생각이 들 정도입니다.

이런 보물 같은 곳을 이제야 발견하다니, 제 자신이 원망스러울 정도예요.

이곳에 계신 분들은 정말 수준도 높고 정보도 풍부해서, 글 하나하나가 그냥 ‘실전 바이블’ 같습니다.

마치 오랫동안 혼자 헤매다가 드디어 길을 찾은 느낌이랄까요?

조금만 더 일찍 알았더라면 얼마나 많은 시행착오를 줄일 수 있었을까 하는 아쉬움이 크지만,

지금이라도 이 커뮤니티를 알게 된 건 정말 큰 행운이라고 생각합니다.

앞으로는 하루라도 빠짐없이 눈팅하고, 배워가며, 저도 언젠가는 도움이 되는 글을 남길 수 있도록 노력하겠습니다!

운영진분들, 그리고 이곳을 빛내주시는 모든 분들께 진심으로 감사합니다 🙇‍♂️✨

7
8개의 답글

👉 이 게시글도 읽어보세요