코딩 몰라도 게임 뚝딱? '댕댕이 뼈다귀 캐치' 제작기 🐶🦴

소개

구글 Build를 익숙하게 사용하기 위한 연습의 일환으로...
간단하고 귀여운 아케이드 게임에 도전해봤습니다!
하늘에서 떨어지는 뼈다귀를 강아지가 받아먹는 간단한 게임이예요!

진행 방법

  1. 기획 단계: 민트베어 스터디장님의 PRD 생성 앱을 이용하여 게임 기획을 구체화하고, 만들어진 PRD 문서를 제미나이에게 쉽게 설명해달라 부탁했어요! 설명을 읽어보며 부족한 부분들을 보충하여 보완된 PRD 문서를 만들었습니다^^

  2. 제작 단계: 구글 Build 입력창에 만든 PRD 문서를 넣고 생성 버튼 클릭! 잠시 후 그럴싸한 게임 화면이 나타났어요~ 직접 게임을 해 보며, 개선하고 싶은 부분을 메모하였고 그 내용을 다시 제미나이에게 '구글 Build에게 수정요청 하기 좋은 문장으로 다듬어줘' 요청하여 Build에 다시 제공하고... (도르마무 도르마무)

  3. 디테일 수정:
    1) PC와 모바일 환경을 오가며 어떻게 보이는지 관찰하고, 모바일에서 스크롤이 생기지 않도록 스마트폰 모양의 베젤을 제작, 그 안에서 게임 화면이 나오도록 구성했어요.

    강아지 뼈 잡기 - 스크린샷


    2) 또 접속 환경에 따라 이모지를 이용한 캐릭터가 다르게 보였기 때문에,
    lucide-react 라이브러리의 SVG 아이콘을 사용해 어디서나 동일하게 보이도록 수정했어요.
    (사실 직접 SVG 아이콘을 만들려 했는데 시간부족으로..)

    3) 사운드가 없으니 재미가 없어서 외부파일 없이 사운드를 적용할 방법을 알려달라고 했어요. 외부 파일 없이 Web Audio API를 사용하여 할 수 있다고 하더라고요? 그래서 뼈다귀를 획득할 때마다 3가지 종류의 사운드가 랜덤으로 나오게, 장애물과 충돌시에는 Buzz음이 나오도록 했어요~

    강아지 뼈 잡기 - 스크린샷


    4) 5,000이상 획득 시 일정 확률로 '황금 뼈다귀'가 출현하도록 하고, 황금 뼈다귀 획득 시 전체 무드가 핑크-보라로 바뀌면서 무적상태가 되도록 했어요. 그리고 아이템 낙하 속도를 2배로, 낙하하는 모든 뼈다귀를 획득과 관계 없이 점수 획득으로 카운트 되도록 설정했어요!


    5) 연속 뼈다귀 획득 시 콤보 횟수가 카운트 되도록 설정하였고, 20개 이상 콤보 누적시 게임 오버 화면에서 배지가 부여되도록 수정했어요!

    강아지 뼈 잡기 - 스크린샷


결과와 배운 점

배운 점 : 하나하나 바꿔가는 재미가 좋았고, 앞으로도 두려움 없이 다양한 앱을 만들어볼 수 있을 것 같아요!

소소한 꿀팁 : AI에게 수정 요청을 할 때, 무작정 말하기보다 "수정 요청하기 좋은 문장으로 다듬어줘"라고 먼저 필터링을 거치면 빌드가 훨씬 더 정확하게 알아듣는 것 같아요! 그리고 그 요청을 바탕으로 수정 계획을 먼저 세워서 보여달라고 하고, 제 승인이 내려진 후에 수정하도록 했더니 요청사항이 더 섬세하게 반영된 것 같습니다!

앞으로의 계획이 있다면 들려주세요.

제가 필요한 앱(캐릭터 특화 이미지 프롬프트 제작 앱)을 만들기 위해 자료를 수집중인데, 잘 기획하여 완성도 있는 앱을 만들 수 있기를 바라고 있어요^^

급하게 쓴 사례글인데 읽어주셔서 감사합니다~~

1
1개의 답글
지피터스 뉴스레터

이번 주 AI, 딱 쓸 것만

매주 월요일 오후,
읽고 바로 써먹을 AI 소식만