[일주일프/05] vibe-pizza: 8살 딸을 위한 나만의 피자 가게 게임

그동안 만든 건 정말 많은데 글 쓸 시간이 없었네요. 간단히만 공유해봅니다.

나만의 피자 가게

8살 딸을 위해 만든 피자 가게 게임

Lovable

Vibe Pizza는 올해 8살 된 딸 여은이를 위해 만든 피자 가게 게임입니다.

여은이가 작년에 4시간 걸려 조악하게 만들었던 알까기 게임을 가끔씩 기억해내서 플레이해주는데, 다른 게임 없냐고 해서 즉석에서 만들어봤어요. 오버쿡드와 뱀파이버 서바이벌에서 모티브를 얻어, 핸드폰으로 Lovable 들어가서 프롬프트 3번 쳐서 시작했습니다.

Lovable에서 했던 첫 3번의 프롬프트는 다음과 같습니다.

프롬프트 1

8살 아이를 위한 피자 만들기 게임

대략적인 스펙
- 손님이 와서 주문을 함
- 주문에는 토핑 종류, 피자 크기(대중소), 치즈크러스트 여부, 씬(얇기) 여부 가 있음
- 주문하면 토핑을 준비하는 것부터 시작. 예를 들어 피망이면 피망 자르기, 버섯이면 버섯 자르기, 치즈크러스트면 치즈 꺼내서 말기 등
- 피자 크기와 얇기에 따라 밀가루 반죽을 얼마나 크게 만들고, 얼마나 오래 구워야 하는지 결정됨. 둘 다 어떤 버튼을 얼마동안 누르고 있냐로 조절
- 빨리 만들수록, 주문이 어려울수록, 주문과 일치할수록 돈을 많이 줌. (기본 금액은 같고 팁을 더 많이 받는 구조)
- 주문 하나 처리할 때마다 능력 업그레이드 가능(3개 랜덤으로 뜨고 선택 like 뱀파이버 서바이벌). 총 10개 능력. 칼질 더 빨리 하게 되고, 더 좋은 오븐 생기고 등등.
- 10명 손님 받으면 게임 종료. 받은 돈 합산으로 순위 매김. 대시보드 표시.
- 순위는 디비에 저장. 3등 안에 들면 이름 입력 가능. 
- 아기자기한 캐릭터 그림체, 귀여운 효과음.

프롬프트 2

몇 가지 개선사항
- 효과음, 배경음 필수!
- 100%가 넘으면 110% 처럼 나타내게 하자. 헷갈려함.
- 오븐 능력 2개 차이를 모르겠음.
- 각 능력이 적용 과정에서 더 시각적으로 드러나게 하자
- 칼질 능력 추가시 여전히 /5 칼질 이런 식으로 나옴
- 업그레이드시 오히려 페널티를 받는 느낌이 있다. 99%에서 한번 더 누르면 101% 가 되는 식으로? 업글했을 때 한번 더 누르면 100이 되는 조건에서는 100에 맞춰지게 하자. 
- 누적 금액을 우상단 등에 항상 표시하고, 피자 전달 완료시 돈 계산이 주르륵 올라가게 한다. 
- 핸드폰에서 살짝 스크롤을 내려야 맨 아래 버튼을 누를수 있게 되어서 살짝 불편. 레이아웃 개선하자.
- 버튼 누르고 있을 때 가끔 웹페이지 텍스트 선택되거나 하는 게 있음. 이거 user-select none으로 해결 되던가?
- 업그레이드 능력을 20개로 늘리고, 낮은 확률로 3개 중 2개, 더 낮은 확률로 3개 다 선택할 수 있게 하자. 그리고 얻은 능력들이 좌상단에 표시되게. "행운" 업글이 있으면 좋겠네. 토핑 갯수도 늘리자.
- 손님 캐릭터와 이름 더 다양하게 하고, 처음에 인사 더 다양하게 하고, 주문 성공 정도와 캐릭터에 맞게 주문 완료시 인사도 하도록.

프롬프트 3

버그
- 소리 전혀 안 나옴
- 마지막에 돈 받을 때 손님 메시지가 깜빡거리며 겹침
- 총 수입 금액이 내가 받은 금액보다 적음. 계산이 어떻게 되고 있는 거지?
- 능력을 1개만 선택 가능할 때에도 선택 완료(1개) 가 뜨니까 이상함. 여러 개 될 때는 버튼이 아니라 다른 UI로 더 기분좋게 표시되어야 함
- 자르기 속도가 올라갔을 때 (3/5) 90% 식으로 갯수와 퍼센트가 일치하지 않음

수정
- 능력 선택시 건너뛰기는 불필요
- 시작하면 능력 하나 선택하고 시작하자. 업그레이드를 좋아함
- 좌상단 능력 아이콘 누르면 (모바일은 호버) 능력 이름과 설명 툴팁으로 표시. 능력 너무 많아져도 적절하게 UI 표시
- 조사를 을/를 로 표시하는 대신 https://github.com/toss/es-hangul 설치해서 적절히 처리
- "목표: 대 사이즈 (90%)" 라는 표현이 있는데 여기도 퍼센트가 있고 정확도 퍼센트도 있으니 헷갈림. 퍼센트는 정확도만 표시
- 시간 초과로 실패시 팁은 0원. 손님 메시지도 험악하게. 전반적으로 여유로우니 시간을 (능력 없을 때) 좀 더 타이트하게 가자. 초기 시간 40초 정도?
- 전반적으로 버튼을 누르는 게 많은데 그보다는 실제로 하는 것과 유사하게 터치하면 좋겠다. 예를 들어 재료 자를 때 재료를 클릭해서 자르게 하는 식. 구울 때는 오븐을 누르지 않고 버튼을 누르는 게 자연스러운데 칼질은 재료로 가야 하니까. 마찬가지로 돈 받을 때도 "받기"가 따로 있을 필요 없음. 아이가 자꾸 총 수입 쪽을 누르더라.
- 행운 생긴 뒤로 변화를 못느끼겠다. 단순하게 가자. 50% 확률로 능력 2개 선택 가능하게. 
- 10명 중 2명은 VIP 손님으로 랜덤하게 나오게 하자. 주문은 매우 어렵게 하고, 대만족시키면 팁 2배, 능력 3개 모두 선택. VIP일 때 긴장감 넘치게 배경음악 변경, UI도 적절히 수정
- 내 아이만을 위한 게임이니 리더보드가 디비가 아니라 로컬스토리지면 좋겠다. 전체적으로 디비 지원 다 빼고 로컬스로리지만으로 동작 가능하게 하자.

어드민 메뉴 추가
- 게임 밸런스를 쉽게 조절할 수 있게, 게임 시작 전 어드민 메뉴 진입 가능. "나만의 피자 세계 만들기" 같은 느낌으로. 이런 설정은 기존 피자 세계를 수정하거나, 새 세계를 시작하는 식으로. 리더보드는 피자 세계 별로 기록. 
- 어드민에서의 변경은 로컬스토리지에 저장되며, import export 가능하다. 클립보드에 복사되게 하고, 가져오는 식.
- 여기서 능력들 목록 볼 수 있음. 이모지와 이름, 설명. 실제 능력 수치 변경도 가능하고, 능력 추가/삭제도 됨
- 기본 가격, 팁 정도, 제한시간 등 아무튼 숫자로 밸런스 조절 가능한 건 다 조절하도록
- 손님 이름과 메시지도 다 보고 수정 가능

이후 과정

여기까지 하고 나니 반복되는 버그도 있고 크레딧이 너무 아깝더군요. github과 2-way sync 켜서, 로컬에서 클로드 코드로 계속 고쳤습니다. 그 중 첫 프롬프트는 이런 식이었습니다.

몇 가지 문제 및 개선
- 손님 설명이, 이제 나올 손님이 아니라 지난 손님에 대한 설명이 나오고 있음
- 치즈 롤, 반죽 누르기도 토핑 자르기처럼 버튼이 아닌 판 자체를 터치하도록
- VIP는 2번째와 9번째 사이에만 나오도록
- VIP를 완벽하게 만족시키면 3개 능력 다 선택 가능해야 함
- 어드민에서 능력을 추가했는데 게임 내에 안 나오는 느낌임
- 100% 맞췄을 때 콤보 같은 보너스 점수가 있으면 좋을라나? 지금 너무 점수 편차가 적은 느낌이다.

이러한 문제들을 관찰했는데, 1) 내 말을 100% 그대로 믿진 말고 스스로 확인 2) 내가 관찰한 것 외에도, 위 문제로부터 짐작되는 다른 문제들도 면밀히 검토해서 해결해주세요.

고객인 여은이가 뭘 재밌어하고 뭘 헷갈려하는지 관찰한 게 아주 큰 도움이 되고 재미있었습니다. '능력 업그레이드'를 좋아한다는 걸 알고 처음부터 능력을 얻게 하고, 여러 개 업글할 수 있는 '행운' 능력도 추가하고, VIP는 만족시키면 여러 개 올릴 수 있게 하고... 밸런스 조절을 위해 어드민을 추가한 게 신의 한 수였어요. "나만의 피자 세계 만들기"를 아주 신기해하고 좋아하더군요. 자기가 직접 스킬 추가할 수 있으니 더 좋아하고요. 여은이가 며칠간 재미있게 플레이하고, 친구에게도 소개해주니 뿌듯해요.

다음은 한자 공부 앱입니다. 이것도 빨리 완성해야 할텐데 요즘 토큰 태워가며 하네스 깎는게 너무 재밌네요. 하나씩 글 올려보겠습니다.