ChatGPT(Lovable) · Cursor AI(커서 AI) · Google Cloud 로 웹서비스 만들기

PRD는 ChatGPT - Lovable PRD Generator로 만들고, 구현은 Cursor AI(커서 AI)와 함께, 서버 운영과 배포는 Google Cloud 로 웹서비스 만들기

 

지난 게시판 웹서비스 만들기에 이어서 이번에는 조금 더 의미있는 서비스를 만들어 보았습니다. PM 업무를 수행하다 보면 다른 앱/웹 프로덕트들의 모습을 찾아보게 됩니다. 그리고 스크린샷을 모아두기도 하고 함께 업무하는 분들께 소개하기도 합니다. 그래서 IT 프로덕트들의 스크린샷을 모아볼 수 있는 웹서비스를 하나 만들어보았습니다. "기획부터 배포까지" 약 2일 정도가 소요되었고, 매일 조금씩 수정하면서 1일 1회 ~ 10회 정도 추가로 커밋을 하고 있습니다. 이번 포스팅에서도 ChatGPT (특히 Lovable PRD Generator), Cursor AI, Google Cloud를 활용해 Product Screens 소개 웹서비스를 만든 전체 과정을 정리해 보았습니다.

• 기획: ChatGPT (Lovable PRD Generator)
• 개발: Cursor AI + 로컬 Google Cloud Proxy 연동
• BE(DB)와 배포: Google Cloud (Cloud SQL) + GitHub 연동
• 도메인: 가비아 연동

👉 결과물: https://snaptheproduct.com/

SnapTheProduct - Product Screen Gallery for PM

 

1. 서비스 소개

서비스 개요

이번에 만든 서비스는 IT Product 스크린샷 모음 및 소개 웹서비스입니다.

snaptheproduct

복잡한 기능보다는 "AI 도구를 활용한 개발 프로세스"와 "Product 스크린샷 모음"에 집중한 프로젝트입니다.

 

서비스 화면 미리보기

로그인 전 -  홈

우선 로그인 전에는 상세 보기를 비활성화 해보았습니다.

 

로그인 전 - Gallery (Products & Screens)

갤러리로 들어가면 프로덕트의 스크린샷 모음을 볼 수가 있습니다.

 

로그인 후 - Gallery (Products & Screens)

로그인 후의 갤러리의 모습입니다.

 

로그인 후 - Gallery (Products & Screens) 상세 화면

조회하고 싶은 Product의 상세 화면으로 진입하면 Product Screens 을 조회할 수 있습니다. 그리고 간단한 설명과 태그를 추가해 놓았습니다.

 

로그인 후 - Request Board

특정 프로덕트에 대한 스크린샷을 요청하고 싶을 때는 Request Board 에 요청 글을 남길 수 있습니다. 지금은 저 혼자서 스크린샷을 올려보겠지만 나중에 기여자들이 생긴다면 같이 해볼 수 있지 않을까 상상해보았습니다.

 

로그인 후 - Profile (My Page)

프로필 정보를 바꾸고 싶을 때 사용할 수 있는 화면입니다.

 

관리자 로그인 후 - Admin Dashboard

관리자로 로그인을 하면 User 의 역할을 관리할 수 있습니다.

 

관리자 로그인 후 - Add Screen Collection

현재는 관리자만 Screen Collection 을 등록할 수 있도록 페이지를 생성했습니다. 지금은 직접 프로덕트의 스크린샷을 준비해서 Gallery 에 추가해볼 예정입니다.

 

 

2. 기획: ChatGPT + Lovable PRD Generator

왜 PRD부터 만들었을까?

요구사항을 먼저 명확히 정리하고 싶었습니다. ChatGPT의 Lovable PRD Generator를 활용해 아래와 같은 md 파일 4개를 생성했습니다.

• masterplan.md
• implementation-plan.md
• design-guidelines.md
• app-flow-pages-and-roles.md

📎 참고 링크: https://chatgpt.com/share/6981dc42-bf2c-8012-8380-5dedd9b4dbea

이 단계에서 느낀 장점은:

• 역시 md 파일을 꼼꼼하게 작성해야 최초 기능 구현 후 수정이 매끄럽습니다.
• 구현 중 방향을 잃지 않게 해주는 기준점 역할을 하는 것도 잊지 말아야 할 점입니다.

 

 

3. 개발: Cursor AI와 함께한 구현 과정

PRD → Cursor AI 프롬프트

생성된 md 파일들을 그대로 Cursor AI에 넣고, 아래와 같은 방식으로 작업했습니다.

웹서비스 스크린샷 모음 서비스를 개발하려고 합니다.
4가지 문서를 참고하여 구현해주세요.

# masterplan.md
# implementation-plan.md
# design-guidelines.md
# app-flow-pages-and-roles.md

프로덕트가 다 만들어지면 로컬에서 테스트해볼 예정입니다.
이후 단계로 필요한 정보가 있으면 알려주세요.

 

로컬 환경에서 Google Cloud Proxy 사용

개발은 모두 로컬 환경에서 진행했습니다.

• Google Cloud 프로젝트 생성
• App Engine 사용
• Cloud SQL 사용
• Cloud storage 사용
• Cloud DNS 사용
• Cloud Build 사용
• 로컬에서 CRUD 동작 확인

지난 번과 다르게 Google Cloud 프로젝트에 Cloud SQL과 App Engine 으로 백엔드를 구현하였습니다. 중간중간 동작하지 않는 상황을 해결하면서 진행했습니다. 오류 메시지를 Cursor AI 에 넣고 수정 코드를 제안해달라고 요청하였을 때, 거의 대부분 한 번에 해결이 되었습니다. 정말... 놀랍습니다.

 

4. 배포: Google Cloud

Google Cloud를 선택한 이유

• App Engine API 사용 용이
• Cloud SQL 사용 용이
• 향후에 Google Analytics 연동하여 사용자 생성까지 확인
• 결제 편의성

 

GitHub 연동 & 배포 흐름

배포 구조는 아래와 같습니다.

1. Cursor AI에서 코드 작성
2. Google Cloud & GitHub 저장소 연동
3. GitHub 저장소에 push
4. Google Cloud 자동으로 빌드 & 배포

Cursor AI → GitHub Push → Google Cloud Deploy

 

이 과정이 한 번 세팅되고 나니, 배포에 대한 부담이 거의 사라졌습니다.

 

5. 이렇게까지 했을 때 비용

Cursor AI 사용량

• 현재 사용 중인 플랜은 Pro $20/mo. => Pro Plus $60/mo. 로 향상 ㅠㅠ
• 지금 상태로는 5일만에 거의 전체 비용에 가까워짐

 

Google Cloud 인보이스

• Google Cloud 에서 이용한 서비스 별 금액

 

6. 직접 해보며 느낀 점

좋았던 점

• AI 도구 덕분에 개발 속도가 매우 빠름
  • 일단 배포는 첫 날(1일) 모두 완료
  • 핵심 기능과 이것저것 추가로 기능을 붙여서 2일에 배포까지 모두 완료
• 혼자서도 기획–개발–배포까지 가능
• 클라우드 서비스 & AI 조합하면 이제 자신감있게 비개발자도 무언가 만들어서 배포할 수 있을 듯

아쉬웠던 점

• 역시 기존 Google Cloud 구조를 이해하지 않으면 문제 해결이 쉽지 않음
• 하지만 에러 메시지를 Cursor AI에게 전달하고 이것저것 구글링해서 문제 해결하면서 실력 향상을 느낌

 

마무리

이번 프로젝트는 "AI 도구를 활용해 혼자서 개발한 사이트를 실제 오픈할 수 있을까"에 대한 실험에 가까웠습니다.

결론적으로

• 서비스를 성장시키는 것은 별개의 문제이지만 일단 만들어서 시작하는 것은 가능하다!

이런 목적이라면 ChatGPT (Lovable PRD Generator) + Cursor AI + Google Cloud (BE 뭐가 됐건!) 금방 됨

다음 글에서는:

• Snap the Product 에 올릴 Product 소개 콘텐츠를 자동으로 작성해주는 자동화 스크립트
• 구글 검색에 노출되도록 SEO 작업

같은 내용을 다뤄볼 예정입니다.

혹시 따라하다가 잘 안되시는 분들은 댓글로 남겨주세요.