ChatGPT · Cursor AI · Firebase로 게시판 웹서비스 만들기

PRD는 ChatGPT로 만들고, 구현은 Cursor AI와 함께, 배포는 Firebase App Hosting으로 끝내는 게시판 웹서비스 개발기

 

AI로 무언가를 만든다...면 무엇을 만들어야 할까요? 저는 아주 고전으로 돌아가서 CRUD 기본기를 확실하게 연습하는 "게시판"을 만들어보았습니다. 요즘 AI를 공부하면서 가장 크게 달라진 점은 "기획부터 배포까지 혼자서도 충분히 빠르게" 할 수 있게 되었다는 점입니다. 이번 글에서는 ChatGPT와 Cursor AI, 그리고 Google Firebase를 활용해 게시판 웹서비스를 만든 전체 과정을 정리해 보려고 합니다.

• 기획: ChatGPT (Lovable PRD Generator)
• 개발: Cursor AI + 로컬 Firebase 환경
• 배포: Firebase App Hosting + GitHub 연동

👉 결과물: https://board-app--board-app-7d889.us-east4.hosted.app/

 

1. 서비스 소개

서비스 개요

이번에 만든 서비스는 간단한 게시판 웹서비스입니다.

• 기본 CRUD
  • 게시글 목록 조회 (Read) / 상세조회 (Read)
  • 게시글 작성 (Create)
  • 게시글 수정 (Update)
  • 게시글 삭제 (Delete)
• 구글 로그인 설정
• Firebase 기반 데이터 관리 및 배포
  • Firestore Database
  • Storage
  • App Hosting

복잡한 기능보다는 **"AI 도구를 활용한 개발 프로세스 자체"**에 집중한 프로젝트입니다.

 

서비스 화면 미리보기

• 메인 게시글 목록 화면

• 게시글 작성 화면

• 게시글 상세 화면

 

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

이 단계에서 느낀 장점은:

• 기획 문서를 직접 쓰는 시간 절약
• 구현 중 방향을 잃지 않게 해주는 기준점 역할

 

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

PRD → Cursor AI 프롬프트

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

Cursor AI의 가장 큰 장점은 코드를 작성하면서 동시에 맥락을 이해한다는 점이었습니다.

로컬 환경에서 Firebase 사용

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

• Firebase 프로젝트 생성
• Firestore 사용
• Firebase SDK 연동
• 로컬에서 CRUD 동작 확인

백엔드를 직접 구현하지 않아도 되기 때문에 굉장히(?) 수월했지만 Firebase 프로젝트를 처음 사용해봤기 때문에, 중간중간 동작하지 않는 상황을 해결하면서 진행했습니다. 예를 들어 Firestore Database, Storage 에 권한을 추가하는 방법 등입니다. Firebase 에 익숙하지 않아서 한 번에 진행되지는 않았지만 그때마다 오류 메시지를 Cursor AI 에 넣고 수정 코드를 제안해달라고 요청하였을 때, 거의 대부분 1번에 해결이 되었습니다. 정말... 놀랍습니다.

 

4. 배포: Firebase App Hosting

Firebase App Hosting을 선택한 이유

• 별도 서버 관리 불필요
• GitHub 연동만으로 자동 배포 가능
• 소규모 서비스에 충분한 성능

GitHub 연동 & 배포 흐름

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

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

Cursor AI → GitHub Push → Firebase App Hosting Deploy

 

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

 

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

Cursor AI 사용량

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

 

6. 직접 해보며 느낀 점

좋았던 점

• AI 도구 덕분에 개발 속도가 매우 빠름
  • 4시간 정도 안에 배포까지 모두 완료
• 혼자서도 기획–개발–배포까지 가능
• Firebase + App Hosting 조합이 생각보다 강력
  • 클라우드 서비스 & AI 조합하면 이제 자신감있게 비개발자도 무언가 만들어서 배포할 수 있을 듯

아쉬웠던 점

• Firebase 구조를 이해하지 않으면 문제 해결이 쉽지 않음

 

마무리

이번 프로젝트는 "게시판을 잘 만들자" 보다는 "AI 도구를 활용해 어디까지 혼자서 할 수 있을까"에 대한 실험에 가까웠습니다.

결론적으로

• 개인 사이드 프로젝트
• MVP 검증
• 프로토타입 제작

이런 목적이라면 ChatGPT + Cursor AI + Firebase 조합은 정말 강력하다고 느꼈습니다.

다음 글에서는:

• 기능을 조금 더 확장해 본 경험
• 구글 로그인 인증(Auth) 추가
• 실제 운영을 고려한 구조 개선
  • 예) 사용자 프로필 페이지 추가 & DisplayName 수정 기능 제공

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

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