바이브 코딩으로 벽돌깨기 게임 만들기: 커서AI로 미션 맵 구현하고 공유까지!
🎮 벽돌깨기 게임 맵 커스터마이징 및 구현 후기
얼마 전 쓰레드에서 흥미로운 벽돌깨기 게임 영상을 발견했습니다.
👉 영상 보러가기
영상 속 독특한 미션 맵을 보니 저도 직접 플레이해보고 싶다는 생각이 들었습니다.
그래서 이번 기회에 커서AI(Cursor AI) 를 이용한 바이브 코딩(Vibe Coding) 으로 직접 맵을 구현하고, SNS 공유 기능까지 포함한 웹앱을 만들어보았습니다.
🔧 실제 구현 과정 요약 (프롬프트 서사)
| 나의 프롬프트 | AI의 응답 |
|---|---|
| "벽돌깨기 게임의 맵 구조를 설명한 스크린샷을 참고하여 정확히 구현하라." | 맵의 초기 구조를 생성하고 통로 및 벽의 상태를 정의함 |
| "벽돌의 유형을 명확히 정의하고, 충돌 감지 및 클리어 판정을 처리하라." | 깰 수 있는 벽돌/없는 벽돌/통로의 상태별 충돌 처리 및 게임 클리어 조건 구현 |
| "게임 종료 후 클리어 타임과 닉네임을 입력받고 SNS 공유 기능을 구현하라." | 카카오톡, 트위터 공유 기능 구현 (닉네임 포함 문구 생성) |
| "공유 시 게임 종료 당시 화면을 캡처해 첨부하라." | 캔버스 스크린샷 생성 및 공유 URL에 포함하는 기능 구현 → 하지만 url로 스크린샷을 첨부할 수 없어서 구현은 되지 못함. |
🧩 완성된 맵 특징
- 초록색 깰 수 있는 벽돌로 전체 너비를 채움 (0~19행)
- 회색 깰 수 없는 벽을 20행에 배치
- 중앙에서 시작하는 세로 통로 (2열 폭)
- 왼쪽으로 이어지는 U자형 통로, 4열 너비 → 아래로 5행 연장
- 통로 주변은 회색 벽으로 완전히 둘러싸여 공이 빠져나가지 않음
- 패들과 벽 사이 간격을 확보해 쾌적한 플레이 환경 제공
🕹️ 플레이 방법
- 별도 설치 없이 웹 브라우저에서 바로 시작
- 모든 벽돌을 파괴하면 자동으로 클리어 타임 측정
실패 시, 진행률 결과 카운트 - 닉네임 입력 → 트위터 / 카카오톡으로 결과 공유 가능
💬 여러분도 도전해보세요!
https://hughqlee.com/brickbreaker
👉 자신만의 닉네임으로 벽돌깨기 기록을 남기고,
SNS에 공유해 친구들과 타임을 비교해보세요!
Made with Cursor AI + 바이브 코딩 ✨