소개
안녕하세요, 지피터스 덕분에 커서(CURSOR)관련 꿀팁과 사례글로 정말 많은 도움을 받고 있습니다.
커서로 소소한 웹 게임을 만들어 보았습니다.
사실, 예전부터 “내가 키우는 강아지로 게임을 만들어 보면 어떨까?” 하는 막연한 생각을 가지고 있었는데요,
커서의 손쉬운 개발 환경과 GPT의 든든한 지원 덕분에, 그 꿈을 정말 간단하게 현실로 만들어 볼 수 있었습니다.
참고로, 저는 강아지 두 마리를 키우고 있습니다.
포메라니안 “인절미”, 그리고 시바견 “샤낼”인데요, 이번 게임에서는 이 두 아이를 귀여운 캐릭터로 구현해봤습니다. 🐶
진행 방법
사용한 도구 : cursor, chatGPT
소스관리 : github
배포 : vercel
지피터스에서 배운대로 PRD.md 파일을 GPT에 요청하여 최대한 상세하게 만들었습니다.
# 횡스크롤 웹 게임 PRD (Product Requirements Document)
## 1. 게임 개요
- 장르: 횡스크롤 액션 게임
- 플랫폼: 웹 브라우저
- 대상: 일반 사용자
- 개발 기술: HTML5, CSS3, JavaScript
## 2. 게임 기능
### 2.1 캐릭터 선택
- 게임 시작 시 캐릭터 선택 화면 표시
- 선택 가능한 캐릭터:
- 남자 캐릭터
- 여자 캐릭터
- 선택 후 게임 시작
### 2.2 게임 플레이
- 자동 횡스크롤 진행
- 바닥에 랜덤하게 바위 생성
- 플레이어 조작:
- 스페이스바, 터치 : 점프
- 점프로 바위 피하기
### 2.3 게임 UI
- 오른쪽 상단에 진행 거리 표시
- 게임 오버 시 재시작 버튼 표시
### 2.4 게임 규칙
- 바위와 충돌 시 게임 오버
- 게임 오버 시 재시작 가능
- 진행 거리 기록
## 3. 기술 요구사항
### 3.1 프론트엔드
- HTML5 Canvas 사용
- CSS3 애니메이션
- JavaScript 게임 로직
- 반응형 디자인
### 3.2 성능 요구사항
- 60FPS 유지
- 부드러운 애니메이션
- 최소한의 리소스 사용
## 4. 개발 우선순위
### 4.1 1단계 (기본 기능)
- 캐릭터 선택 화면
- 기본 게임 엔진
- 캐릭터 이동 및 점프
- 바위 생성 및 충돌
### 4.2 2단계 (UI/UX)
- 진행 거리 표시
- 게임 오버 화면
- 재시작 기능
### 4.3 3단계 (최적화)
- 성능 최적화
- 애니메이션 개선
- 버그 수정
## 5. 기대 효과
- 간단하고 재미있는 웹 게임
- 모바일/데스크톱 모두 지원
- 낮은 진입 장벽
- 높은 재방문율
PRD.md 파일을 기준으로 cursor에게 작업요청!
결과와 배운 점
처음에는 단순히 캔버스에 도형을 그리고 끝날 줄 알았지만, 점점 캐릭터를 이미지로 만들고 싶어졌습니다.
GPT에게 직접 PNG 캐릭터 이미지 생성을 요청하면서, 훨씬 매력적인 게임이 되었습니다.
움직임을 부드럽게 표현하기 위해 검색하다가 “스프라이트 시트”라는 개념을 처음 접했고,
관련해서 상용/무료 리소스를 거래하는 다양한 사이트들도 알게 되었습니다.