[UXUI 부트캠프 #3] AI로 만든 '만두런' 게임
안녕하세요
UXUI 디자이너 댄비입니다
부트캠프의 세 번째 여정으로 오늘은 조금 특별한 프로젝트를 가져왔습니다.
디자이너인 제가 직접 코딩까지 도전해 본 '만두런(Mandu Run)' 게임 만들기 프로젝트입니다!
디자인-Figma
코딩-클로드, 제미나이
1. Concept & Design
Main Tool: Figma
Design Point
Color:포근한 버터색인 #FFF9DA ■
Assets: 귀여운 '만두' 캐릭터
2. Development
AI와의 협업 과정
코딩에 익숙하지 않은 디자이너도 AI와 함께라면 게임을 만들 수 있습니다!
이번 프로젝트의 코딩 파트너는 제미나이와 클로드입니다.
Logic: 구글의 '공룡 게임' 로직을 베이스로 하되, 만두가 장애물을 피하며 점수를 쌓는 방식으로 커스텀했습니다.
[1차 제미나이]
"공룡 게임을 구현하려고 할때, AI한테 어떻게 설명해야 할까?"
> 기본 프롬프트를 만들어가는 과정입니다.
HTML, CSS, JavaScript를 사용하여 '구글 공룡 게임'의 클론을 만들어줘. 하나의 파일(index.html)로 작성해주고 다음 기능을 포함해줘: 1. 게임 루프: requestAnimationFrame을 사용하여 부드럽게 구동될 것. 2. 플레이어: 검은색 사각형이며, Space 키를 누르면 점프함. 중력이 적용될 것. 3. 장애물: 오른쪽에서 왼쪽으로 다가오는 빨간색 사각형. 속도는 시간이 지날수록 조금씩 빨라짐. 4. 충돌 감지: 플레이어와 장애물이 닿으면 'Game Over' 문구를 띄우고 재시작 버튼을 보여줌. 5. 점수: 살아남은 시간에 비례하여 점수가 실시간으로 표시됨. 가급적 코드 주석을 상세히 달아서 로직을 설명해줘.
[2차 클로드]
클로드에게 구체적인 상황(Role)과 의도를 설명하니, 단 몇 분 만에 HTML/CSS/JS 코드를 완성해 주더라고요.
이후 간장, 단무지, 고춧가루를 추가하고 세부적인 asset을 변경해 게임을 완성시켰습니다.
3. 배포 및 시행착오 (GitHub Pages)
[260311]
완성된 게임을 친구들에게 공유하기 위해 GitHub Pages를 이용했습니다.
근데 여기서부터 어떻게해야 할지 모르겠어서 공부를 좀 더 해보려고요...
[260312]
저 냈어요! 해냈어요!
이분 블로그 참고했더니 해냈어요..
참고: https://daleseo.com/github-pages/
[GitHub Pages로 웹사이트 무료 호스팅하기]
GitHub Pages로 정적 웹사이트를 무료로 호스팅하는 가장 기초적인 방법을 실습과 함께 알아봅니다. 블로그, 포트폴리오, 프로젝트 문서를 쉽게 배포해보세요.
문제는 이름이였어요!
여러분은 파일명 꼭 index.html로 하고 3시간 손해보지 마세요!
� 만두 런 게임
https://danbiskrr-mandu.github.io/mandu/
아직은 pc에서만 가능합니다 ㅎ.ㅎ
이번 프로젝트를 통해 디자이너도 AI를 도구로 삼으면 개발 영역까지 확장할 수 있다는 큰 자신감을 얻었습니다.
앞으로도 댄비의 부트캠프 도전기는 계속됩니다.
� 만두런, 한 번 플레이해 보실래요? �