소개
최근 몇 년간 인기를 끌고 있는 취미 공유 커뮤니티(소모임, 문토, 프립 등) 사이트를 Lovable과 Cursor를 활용하여 직접 제작해보았습니다.
1주차에는 두 가지 핵심 강의가 진행되었는데요. 먼저 오리엔테이션에서 곽은철님께서 소개해주신 GPT 프롬프트 메이커와 GPT 딥리서치 기능을 활용한 4주간 학습 계획 수립 방법을 배웠습니다. 또한 스터디장이신 성장피터님의 강의를 통해 Cursor, Lovable, V0 등의 도구를 사용하여 PRD(제품 요구 사항 문서)를 작성하고 이를 바탕으로 퍼스널 랜딩 페이지를 제작하는 방법을 익혔습니다.
두 강의를 통해 간단한 아이디어가 떠올랐고, 딥리서치를 통해 수집한 자료를 기반으로 PRD를 작성하면 더 완성도 높은 결과물을 얻을 수 있을 것 같아 이번 사례를 진행하게 되었습니다.
진행 방법
사례는 다음과 같은 단계로 진행했습니다.
ChatGPT 딥리서치를 활용하여 다양한 취미 공유 커뮤니티 사례 조사 및 벤치마킹
리서치 결과에서 발견한 장점들을 선별적으로 적용하여 취미 공유 커뮤니티 사이트 제작을 위한 PRD 작성
완성된 PRD를 바탕으로 Cursor와 Lovable에서 todo.md를 작성한 후 웹페이지 개발
GPT에 딥리서치 및 PRD 작성을 요청할 때는 곽은철님께서 공유해주신 프롬프트 메이커를 적극 활용했습니다.
1) 벤치마킹을 위한 딥리서치 프롬프트 생성 (GPT 4o)
딥리서치를 하기 위해 딥리서치를 위한 프롬프트 만들었습니다.
2) 딥리서치 진행 (GPT 딥리서치)
앞서 제작한 프롬프트를 활용하여 GPT 딥리서치를 수행했습니다. 먼저 타겟층과 분야에 관한 질문에 답변한 후, 그에 맞춘 맞춤형 리서치가 진행되었습니다.
국내 사례를 중심으로 조사하길 원했으나, 결과적으로 해외 사례 위주로 정보가 수집되어 약간 의외였습니다. 이를 통해 GPT에 요청할 때는 더욱 구체적이고 명확한 지시가 필요하다는 점을 깨달았습니다.
3) 딥리서치 결과를 이용하여 PRD를 제작하기 위한 프롬프트 생성 (GPT 4o)
딥리서치 결과를 참고하여 벤치마킹하여 웹사이트 제작할 수 있도록 PRD 생성을 위한 프롬프트를 만들었습니다.
4) 생성된 프롬프트로 PRD 생성 (GPT o3)
앞서 설계한 프롬프트를 활용하여 PRD를 생성했습니다. 더 높은 품질의 PRD을 얻기 위해 4o 모델 대신 o3 모델을 선택하여 작업을 진행했습니다.
5) PRD를 이용하여 Cursor/lovable에서 todo.md 생성하기 (Cursor w/ claude 3.7 sonnet, Lovable)
스터디장 성장피터님께서 공유해주신 꿀팁을 적용해보았습니다. PRD를 기반으로 먼저 todo.md 파일을 생성한 후 개발을 진행하니, AI가 혼란 없이 체계적으로 작업을 수행하는 모습을 확인할 수 있었습니다. 이 방식을 활용하여 Cursor와 Lovable에서 다음과 같이 개발 요청을 진행했습니다.
<Cursor 예시>
<Lovable 예시>
6) 생성한 todo.md 확인 후 개발 요청하기
위 요청으로 생성된 todo.md를 확인 후에 개발 요청을 하였습니다.
<Cursor 예시>
<Lovable 예시>
7) 개발된 웹페이지 확인
개발된 웹페이지를 확인하니 두 tool모두 에러가 발생하였습니다. Cursor는 문제가 된 부분을 캡처해서 보내주고 고쳤으나 Lovable은 웹페이지가 제대로 동작하지 않는 경우 fix 버튼이 활성화되어 문제되는 부분을 바로 고칠 수 있어 매우 편리했습니다.
<Lovable 예시>
8) 웹페이지 세부 디자인 수정 후 배포
다른 사례에서도 많이 볼 수 있듯이 Cursor보다는 Lovable이 디자인이 좋았습니다. 다른 세부 페이지들도 둘 다 구현은 잘되었습니다. 다만 Cursor는 디자인이 마음에 들지 않아 Lovable로 제작한 페이지만 배포하였습니다. Lovable이 상단 오른쪽 버튼을 통해 배포가 간단하게 가능해서 좋았습니다. 아직 부족한 부분은 많지만 큰 뼈대는 대략적으로 구현이 되어서 놀라웠습니다!
완성된 웹페이지: zest-interest-sphere
<Cursor>
<Lovable>
결과와 배운 점
웹페이지의 큰 뼈대는 금방 만들어졌으나, 세부 기능을 구현하기 위해서는 여러 API를 연결해야 하는데 이 부분은 공부가 좀 더 필요할 것 같습니다.
배운점
딥리서치를 이용하여 PRD를 제작하니 사용자가 생각해야 할 부분이 없어 좋았습니다 ㅎㅎ
todo.md 덕분에 Agent들이 헤메는 경우가 적었습니다. Lovable은 무료사용량 5번만에 진행하였습니다.
시행착오
v0도 동일한 flow로 진행하였는데, 다른 tool들보다 완성도가 낮았습니다. AI model의 차이인가 싶네요.
Cursor로 제작된 파일을 github 배포에 어려움이 조금 있었습니다. 1~2번 더해보면 잘할 수 있을 것 같아요. 그 전까진 바로 배포가 가능한 Lovable이나 V0가 배포 측면에서는 매우 편리한거 같습니다.
계획
MCP들을 활용하면 좀 더 좋은 디자인, 디버깅 능력을 갖출 것 같은데, 웹서비스 개발에 적절한 MCP를 찾아보고 테스트해보려 합니다.
도움 받은 글 (옵션)
1주차 성장피터님 강의
1주차 권은철님 강의