Potion Mixer 🧙‍♂️ 마법의 물약 만들기: MCP와 함께 Cursor로 게임 개발하기

"Potion Mixer" 퍼즐 게임 하기: https://posion-mixer.vercel.app/

ALT

모바일 앱을위한 검은 색 및 자주색 UI 디자인

소개

지난 스터디 이후 스터디장님처럼 게임을 만들고 싶다는 소망으로 시작했습니다. 문제는 제가 게임을 해본 적이 없다는 거예요. 😁 고민 끝에 그나마 제가 할 수 있는 Water Sort 퍼즐을 선택하여 만들어 보았습니다.

사용도구 및 워크플로우

1. ChatGPT O3 : 퍼즐 게임 구현을 위한 브레인 스토밍, 기획 내용 정리

2. Task Master MCP : 스터디에서 배운대로 Cursor에서 PRD와 Task 생성

3. Cursor : PRD에 맞추어 Task에 따라 순차적으로 코드 개발

4. Sequential Thinking MCP : 퍼즐 게임 제작 및 수정 단계에서 Cursor가 자동으로 활용

5. Midjourney & Hailuo : 사이트에 포함된 동영상 생성

6. Github : Cursor와 연동하여 사이트 파일 관리

7. Vercel : Github와 연동하여 사이트 배포

8. Claude : Github와 Vercel의 사용을 위한 질의응답
   

Potion Mixer 게임 개발 과정

1. 개발목표

• 직관적인 퍼즐 게임: 모든 연령대가 쉽게 즐길 수 있는 물약 정렬 퍼즐 게임 개발

• 성능 최적화: 빠른 로딩과 부드러운 사용자 경험 제공

• 반응형 디자인: 모든 디바이스에서 최적화된 게임 플레이 환경 구축

• 브랜드 아이덴티티: "Gpters Wizard & Co." 마법사 테마의 독창적 브랜딩

2. 주요기능

1) 핵심 게임 기능

• 물약 정렬 퍼즐: 튜브 간 액체 이동을 통한 색상별 분류

• 4단계 난이도: Easy(4튜브) → Medium(10튜브) → Hard(12튜브) → Extra Hard(514튜브)

• 컬러 시스템: 다양한 물약 색상으로 시각적 재미 제공

• 실시간 유효성 검사: 이동 가능한 액체와 튜브 자동 판별

2) 사용자 경험 기능

• 사운드 시스템: 게임 효과음 지원

• 폭죽 애니메이션: 게임 완료 시 축하 효과

• 플레이어 시스템: 개인화된 이름 입력 및 게임 진행

• 비디오 배경: 게임 컨셉에 맞는 로그인 경험

3. 게임 기획 (ChatGPT O3)

• 앞서 정한 목표와 주요기능을 기반으로 게임 기획

• 게임 구현 방법 논의

  

  ALT

  검은 색 화면에서 한국어의 스크린 샷

• 웹사이트로 구현하기로 결정하고 기획서 작성

  

  ALT

  한국어 앱의 스크린 샷

4. PRD 작성하고 Task 생성 (Cursor와 Task Master MCP)

• Cursor에 MCP 서버 설정
  (스터디장님 사례 참조: https://www.gpters.org/nocode/post/task-master-mcp-hagseub-hamyeonseo-mini-geim-mandeuleo-bogi-xa1ZCrQoaLKocff)

  

  ALT

  MCPS 시리즈의 스크린 샷

• Task Master 활용하여 PRD와 task 생성하기

  사본

  프로젝트에 taskmaster-ai를 초기화해주세요
  기획서에 맞추어 PRD.md 파일을 작성해주세요
  Task 순서에 따라 순차적으로 개발을 진행해주세요

5. 기술스택 (Cursor)

1) 프론트 엔드

• React 18: 최신 리액트 훅 기반 컴포넌트 개발

• TypeScript: 타입 안전성과 개발 생산성 향상

• Vite: 빠른 개발 서버와 최적화된 빌드 시스템

2) 스타일링 & UI

• Tailwind CSS: 유틸리티 기반 CSS 프레임워크

• CSS Grid & Flexbox: 반응형 레이아웃 구현

• PostCSS: CSS 전처리 및 최적화

3) 상태 관리 & 데이터

• Zustand: 경량 클라이언트 상태 관리

• Local Storage: 게임 설정 및 임시 데이터 저장

4) 개발 도구

• ESLint & Prettier: 코드 품질 및 포맷팅 관리

• Hot Module Replacement: 개발 중 실시간 업데이트

6. 디자인시스템 (Cursor)

1) 컬러 팔레트

• 다크 테마: 주 배경색 dark-800, dark-700, dark-600

• 물약 시스템: 물약별 고유 색상 (빨강, 파랑, 노랑, 초록 등)

• 네온 효과: 선택된 튜브 하이라이트 및 호버 효과

2) 레이아웃 시스템

• 중앙 정렬: 모든 게임 요소의 완벽한 중앙 배치

• 그리드 시스템: CSS Grid 기반 튜브 배열

• 간격 표준화: 1rem 기본 간격, 균등한 요소 배치

• https://ui.shadcn.com/ 사이트를 캡쳐하여 제공 (feat. 샘 알토란님)

  

  ALT

  대시 보드의 흑백 스크린 샷

3) 애니메이션

• CSS Transitions: 부드러운 상태 변화

• 호버 효과: scale(1.05) 기반 상호작용 피드백

• 폭죽 효과: 게임 완료 시 파티클 애니메이션

5. 사이트구조 (Cursor)

### 페이지 구조
/
├── Dashboard (대시보드)
│   ├── PlayerNameModal (플레이어 이름 입력)
│   ├── DifficultySelector (난이도 선택)
│   └── GameStats (게임 통계)
├── Game (게임 화면)
│   ├── GameBoard (게임 보드)
│   ├── TubeContainer (튜브 컨테이너)
│   └── GameControls (게임 컨트롤)
└── Settings (설정)
    ├── SoundSettings (사운드 설정)
    └── GameSettings (게임 설정)

### 컴포넌트 구조
src/
├── components/
│   ├── Tube.tsx (튜브 컴포넌트)
│   ├── FireworksEffect.tsx (폭죽 효과)
│   ├── Button.tsx (공용 버튼)
│   ├── Card.tsx (카드 레이아웃)
│   └── Modal.tsx (모달 공통)
├── pages/
│   ├── Dashboard.tsx
│   ├── Game.tsx
│   └── Settings.tsx
├── hooks/
│   └── useGameStore.ts (게임 상태 관리)
├── utils/
│   ├── gameLogic.ts (게임 로직)
│   └── soundManager.ts (사운드 관리)
└── types/
    └── game.ts (타입 정의)

6. 게임시스템/기능 (Cursor)

• 대시보드 구성: 메인 통계, 게임 선택, 플레이어 계정, 설정, 로그 아웃

• 게임 로직: 액체 이동 규칙, 튜브 용량 제한, 완료 조건, 실행 취소, 힌트 기능

• 난이도 시스템: Easy, Medium, Hard, Extra Hard

• 상호작용 시스템: 튜브 선택, 액체 이동, 시각적 피드백, 애니메이션

7. 개발 결과 수정 (Cursor와 Sequential Thinking MCP)

• 디자인을 수정할 때는 여러 차례 이전 버전으로 돌아가기를 요청

• 부분적으로 고치는 것보다 제대로 된 이전 버전에서 다시 시작하는 것이 편리

• 여러 차례 수정을 거치면서 "스파게티 코드"가 되는 문제 발생

• 전체 프로젝트를 점검하여 필요없는 코드를 삭제하고 목적에 맞게 정리할 것을 요청

• 문제점을 점검하고 수정하는 과정에서 특히 따로 명시하지 않아도 Cursor가 Sequential Thinking MCP를 활용하여 처리
  

  

  ALT

  검은 색 화면의 한국어 메뉴의 스크린 샷

8. 게임 사이트 버전 관리 (Github)

• Github에 새로운 Repository "flora-bota" 생성

• Cursor의 터미널에서 Github와 연동 및 업로드

9. 게임 사이트 배포 (Vercel)

• Vercel에 GitHub 계정과 연동

• 프로젝트 설정을 마친 후 "Deploy"하면 자동 배포
  (이전 사례 참조: https://www.gpters.org/nocode/post/flora-bota-2qWP1XtxpzNITEB)

10. 완성 게임 보기: "Potion Mixer" https://posion-mixer.vercel.app/

결과와 배운 점

앤드류 응의 DeepLearning.AI 사이트 강의인 Vibe Coding 101에 나오는 원칙을 (억지로 🤣)적용하여 배운 점을 정리해보았습니다.
한마디로 하자면, "인간은 vibe(방향과 감각)를 주고, 코드는 AI가 만들지만, 거기서 끝나는 것이 아니란 거죠!" 🤩

Vibe 코딩의 핵심 원칙

• 초기엔 직관적으로 빠르게, 이후엔 구조적으로 다듬습니다.

• 문제를 명확하게 정의하고, 구체적 프롬프트를 작성합니다.

• AI가 생성한 코드를 반복적으로 테스트·검토합니다.

• 개발자는 전략가로서 제품 방향과 품질 관리에 집중합니다.

• 빠른 실험과 프로토타입 제작을 적극 활용합니다.

명확한 프롬프트 작성의 중요성

• ChatGPT O3로 게임 기획 시 구체적인 목표와 기능 명시했습니다.

• Task Master MCP로 PRD 작성 시 단계별 명확한 요구사항을 정의할 수 있었어요.

작업 쪼개기의 효과

• Cursor가 전체 게임을 페이지별, 컴포넌트별로 세분화하여 개발했습니다.

• PRD → Task 생성 → 순차적 개발의 체계적 접근이 효과적입니다.

• 복잡한 게임 로직을 단계별로 구현하여야 오류 최소화가 가능할 것입니다.

Revert 습관화의 적용

• 디자인 수정 과정에서 "스파게티 코드" 문제 발생 시 이전 버전으로 되돌리기 적극 활용했습니다.

• 부분 수정보다 안정적인 이전 버전에서 재시작하는 것이 더 효율적임을 체험했어요.

• Github 버전 관리는 언제든 되돌릴 수 있는 환경 구축하는 것임을 알게 되었어요.

반복적 실험과 개선

• Sequential Thinking MCP가 자동으로 문제점을 점검하고 수정하는 과정 경험했습니다. 이래서 사용하는 것이군요!

• 여러 차례 테스트를 통해 게임 로직과 UI/UX 개선했습니다.

• AI 제안을 검토하며 점차 완성도를 향상할 수 있었어요!