← 돌아가기: 워크숍 메인 페이지 ← 이전: Chapter 5: AI 튜터와 함께 게임 업그레이드하기
Cursor AI와 함께 프로젝트 전체를 관리하는 방법을 배웁니다. 여러 파일로 구성된 게임을 만들면서, AI가 전체 코드베이스를 이해하고 일관성 있게 개발하는 경험을 합니다.
프로젝트 기반 개발의 특징:
Cursor AI의 강점:
1. https://cursor.sh 에서 Cursor AI 다운로드 2. 설치 후 실행 3. 새 프로젝트 폴더 생성 (예: brick-breaker-pro) 4. Cursor AI에서 해당 폴더 열기
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"기존 벽돌깨기 게임을 프로젝트 구조로 변환해주세요. 현재 게임 코드: [여기에 Chapter 4-5에서 만든 게임 코드 붙여넣기] 이 게임을 여러 파일로 나누어서 더 체계적으로 관리하고 싶어요: 1. index.html (메인 페이지) 2. style.css (스타일 분리) 3. game.js (게임 로직 분리) 기존 기능은 그대로 유지하면서 파일을 분리해주세요."
Cursor AI에서는 여러 파일이나 폴더의 내용을 한 번에 AI에게 맥락으로 제공할 수 있습니다. 프롬프트에 `@파일명` 또는 `@폴더명`을 붙여넣으면 해당 파일/폴더의 내용을 AI가 자동으로 참고합니다.
예시:
"@game.js @objects.js 이 두 파일을 모두 참고해서 공이 벽돌에 닿을 때 파워업 아이템이 떨어지는 기능을 추가해줘."
또는
"@/brick-breaker-pro 이 프로젝트 전체를 참고해서 style 관련 코드는 style.css로, 게임 로직은 game.js로, 객체 정의는 objects.js로 분리해줘."
- 여러 파일을 동시에 맥락으로 제공할 수 있습니다. - 폴더 전체를 `@폴더명`으로 지정하면 하위 파일까지 모두 참고합니다. - 코드가 길거나 여러 파일이 연관된 작업일수록 골뱅이 컨텍스트를 적극 활용하세요!
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"objects.js 파일을 만들어서 게임의 주요 객체들을 분리해주세요. 분리할 객체들: 1. Ball (공) - 위치, 속도, 크기, 이동 함수 2. Paddle (패들) - 위치, 크기, 이동 함수 3. Brick (벽돌) - 위치, 크기, 색상, 파괴 여부 기존 game.js에서 이 객체들을 추출해서 objects.js로 옮기고, game.js에서는 이 객체들을 불러와서 사용하도록 수정해주세요."
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"game.js 파일을 정리해서 게임 로직을 더 깔끔하게 만들어주세요. 정리할 내용: 1. 게임 초기화 함수 분리 2. 게임 루프 최적화 3. 이벤트 처리 함수 정리 4. 점수 및 생명 관리 함수 분리 기존 기능은 그대로 유지하면서 코드를 더 읽기 쉽게 만들어주세요."
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"style.css 파일을 만들어서 기존 인라인 스타일을 분리하고 개선해주세요. 개선할 스타일: 1. 전체 페이지 배경 (그라데이션 효과) 2. 게임 제목 (더 멋진 폰트와 애니메이션) 3. 점수와 생명 표시 (카드 형태 디자인) 4. 시작 버튼 (호버 효과와 그림자) 5. 캔버스 테두리 (더 세련된 디자인) 6. 게임 오버/클리어 메시지 (팝업 형태) 기존 스타일을 유지하면서 더 모던하고 전문적으로 보이게 만들어주세요."
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"index.html 파일을 정리해서 모든 파일이 올바르게 연결되도록 해주세요. 연결할 파일들: 1. style.css (스타일) 2. game.js (게임 로직) 3. objects.js (게임 객체) 파일들이 올바른 순서로 로드되도록 하고, 인라인 스타일은 모두 제거해주세요."
축하합니다! 이제 Cursor AI와 함께 기본적인 프로젝트 구조를 만들어봤습니다.
다음은 선택사항입니다. 시간이 충분하고 더 배우고 싶다면 진행해보세요.
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"sounds.js 파일을 만들어서 게임에 사운드 시스템을 추가해주세요. 추가할 사운드: 1. 공이 패들에 부딪힐 때 (튕기는 소리) 2. 벽돌이 깨질 때 (깨지는 소리) 3. 게임 오버 (실패 음악) 4. 게임 클리어 (성공 음악) 5. 시작 버튼 클릭 (클릭 소리) 웹 브라우저의 Web Audio API를 사용해서 더 품질 좋은 사운드를 만들어주세요."
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"기존 파워업 시스템을 더 고도화해주세요. 추가할 파워업: 1. 관통 공 (벽돌 3개까지 관통) 2. 다중 공 (공이 3개로 분열) 3. 무적 모드 (5초간 공이 바닥에 떨어져도 생명 감소 안함) 4. 점수 2배 (10초간 점수 2배) 파워업 아이템의 시각적 효과도 개선해주세요."
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"config.js 파일을 만들어서 게임 설정을 중앙화해주세요. 설정 항목들: 1. 캔버스 크기 (width: 800, height: 600) 2. 공 속도 (기본값: 5) 3. 패들 속도 (기본값: 8) 4. 벽돌 행/열 수 (rows: 5, cols: 8) 5. 초기 생명 수 (lives: 3) 6. 색상 테마 (배경색, 벽돌색 등) 7. 사운드 볼륨 설정 8. 난이도 설정 이 설정들을 객체 형태로 관리하고, 나중에 쉽게 수정할 수 있도록 만들어주세요."
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"게임에 설정 메뉴를 추가하고 config.js의 설정들을 적용해주세요. 추가할 기능: 1. 설정 메뉴 UI (난이도, 볼륨, 색상 테마 선택) 2. 설정값을 config.js에서 불러오기 3. 설정 변경 시 실시간 적용 4. 설정 저장 기능 (localStorage) 기존 하드코딩된 값들을 모두 config 객체로 교체해주세요."
다음 프롬프트를 복사해서 사용하세요:
"index.html에 게임 메뉴 시스템을 추가해주세요. 메뉴 구성: 1. 메인 메뉴 (시작, 설정, 도움말) 2. 게임 중 메뉴 (일시정지, 재시작, 메인으로) 3. 게임 오버 화면 (재시작, 메인으로) 4. 게임 클리어 화면 (다음 레벨, 메인으로) 각 메뉴는 버튼으로 구성하고, CSS로 예쁘게 스타일링해주세요."
다음 프롬프트를 복사해서 사용하세요:
"여러 레벨을 관리하는 levels.js 파일을 만들어주세요. 레벨 구성: 1. 레벨 1: 기본 벽돌 배치 (쉬움) 2. 레벨 2: 벽돌 개수 증가 (보통) 3. 레벨 3: 특수 벽돌 추가 (어려움) 각 레벨마다: - 벽돌 배치 정보 - 배경색 - 난이도 설정 - 클리어 조건 레벨 데이터를 배열로 관리해주세요."
다음 프롬프트를 복사해서 사용하세요:
"현재 만든 벽돌깨기 게임의 전체 코드를 검토해주세요. 확인할 사항: 1. 모든 파일이 올바르게 연결되었는지 2. 게임이 정상적으로 작동하는지 3. 오류가 있는지 4. 개선할 수 있는 부분이 있는지 문제가 있다면 수정해주고, 개선사항도 제안해주세요."
다음 프롬프트를 복사해서 사용하세요:
"game.js의 성능을 최적화해주세요. 최적화할 부분: 1. 불필요한 계산 줄이기 2. 메모리 사용량 최적화 3. 렌더링 성능 향상 4. 게임 루프 최적화 기존 기능은 그대로 유지하면서 성능만 개선해주세요."
다음 프롬프트를 복사해서 사용하세요:
"이 벽돌깨기 게임 프로젝트를 위한 README.md 파일을 만들어주세요. 포함할 내용: 1. 게임 소개 2. 설치 및 실행 방법 3. 게임 조작법 4. 파일 구조 설명 5. 주요 기능 설명 6. 개발자 정보 초보자도 이해할 수 있게 쉽게 작성해주세요."
Cursor AI에서 다음 프롬프트를 복사해서 사용하세요:
"현재 프로젝트의 전체 구조를 정리해주세요. 파일 구조: - index.html (메인 페이지) - style.css (스타일) - game.js (게임 로직) - objects.js (게임 객체) - sounds.js (사운드) - config.js (설정) - levels.js (레벨) - README.md (설명서) 각 파일의 역할과 연결 관계를 설명해주세요."
축하합니다! 이제 Cursor AI와 함께 완전한 프로젝트를 만들어봤습니다.
다음 단계에서는 실제 활용 사례들을 통해 AI 협업의 무한한 가능성을 확인해보세요.
➡️ 실제 활용 사례:
—
💡 프로젝트 관리의 핵심: 여러 파일로 나누면 처음에는 복잡해 보이지만, 나중에 수정하거나 기능을 추가할 때 훨씬 편리합니다. Cursor AI는 이런 복잡한 구조도 완벽하게 이해하고 일관성 있게 개발할 수 있게 도와줍니다!