안티그래비티로 수중 링 던지기(링 토스) 게임 만들기

https://drawerrer.github.io/ringinwater.html

 

어제 부트캠프 휴강일이어서 뭘 하면 시간을 알차게 보냈다고 소문이 날까.. 싶어서 게임을 만들어보기로 했다. 이유는 모르겠지만 얼마 전부터 어렸을 때 했던 게임인 '수중 링 던지기 게임(ring toss)'이 생각나서 이걸 만들어봐야겠다 싶었다.

 

놀랍게도 위 이미지가 여태까지의 최종본이고요.. 모션이나 요소에 현실감을 주려고 해봤는데 잘 안 된다. Gemini-Pro3 를 사용해서 저기까지 구현해뒀는데, 'quota limit' 에 걸려서 27일까지 안티그래비티를 사용할 수 없게 되었다.. 이런. 아쉬운대로 제미나이 무료버전을 사용해서 디벨롭해보려고 했는데, 내 프롬프트가 이상해서인지 자꾸 내 게임을 망쳐가길래.. 그냥 됐다 하고 여태까지 어떻게 프롬프트를 입력하고 디벨롭해왔는지 과정을 기록해보려 한다. 지금와서야 생각난 거지만, 프롬프트 입력했을 때마다 변화하는 과정 캡처해둘걸... 27일부터는 캡처해가면서 수정해야겠다.

 

수중 링 던지기 게임 프롬프트

당신은 10년차 개발자입니다. 오늘은 '휴대용 물 링 던지기 게임기' 를 만들려고 합니다. 해당 게임을 온라인에 구현할 수 있도록 코드를 출력해주세요. 제가 첨부한 이미지를 바탕으로 게임 코드를 만들어주세요.

[물 링 던지기 게임의 원리]
물 링 던지기 게임의 핵심은 손가락으로 버튼을 눌렀을 때 기포가 빠져나가면서 물 안에 들어있는 링들이 발사되는 원리입니다. 버튼을 누를 때마다 기포가 물 안으로 발사되고, 물 안에 있던 링 10개가 위쪽으로 발사되듯 튀어오르면서 물 안에 설치되어있는 막대 안으로 통과되게 만드는 게임입니다.

[꼭 필요한 요소]
마우스로 클릭할 버튼 1개
링 10개 (색깔 서로 다름)
링이 들어갈 막대 2개

 

위 이미지와 함께 첫 프롬프트를 입력했다. 초기 디자인은 아래와 같은 느낌이다. 아래 이미지도 완전 초기 버전은 아니다.

 

[완전 초기 버전]

1. 버튼 한 개

2. 막대에 링이 걸렸을 때 그대로 통과됨

3. 모션이 센 느낌 -> 버튼을 눌렀을 때 링의 움직임이 너무 산만함

 

[1차 수정 프롬프트]

잘 만들어주셔서 감사합니다! 제가 직접 작동시켜보고, 수정해주셨으면 하는 부분을 '아래' 에 첨부합니다.

'아래':
1. 링이 한번 고리에 들어가면 잘 빠져나오지 않을 수 있도록 고리 하단 부분을 막아주세요. 그치만 여전히 물 안에 있다는 느낌이 들도록 'PUSH' 버튼을 눌렀을 때 링이 흔들리는 모션은 유지해주세요.
2. 푸쉬 버튼을 눌렀을 때 기포의 압력이 너무 센 것 같습니다. 압력을 조금 줄여주세요.
3. 버튼을 1개 -> 2개로 늘려주시고, 하나는 왼쪽 하나는 오른쪽에 배치해주세요. 각각의 버튼을 눌렀을 때 각 방향에서 기포의 압력을 받을 수 있도록 조정해주세요.

 

1차 수정을 하고 느낀 점은 상상한 걸 최대한 구체적으로 전달해야한다는 점이었다.

 

고리에서 링이 빠져나오지 않도록 하단을 막아달라고 했는데, 내 머릿속에서는 'T' 가 거꾸로 뒤집어진 모양으로 하단부를 막아달라고 한 것이었다. 그치만 구현해준 화면을 봤을 땐 기능적으로는 막혀있었지만, 여전히 'ㅣ' 자 고리였다. 이 게임을 엄마한테 해보라고 줬는데, 엄마도 "고리 밑이 막혀있다는 걸 보여주기 위해서 뭔가 있어야하는 거 아니야?" 라고 했다. 그리고 게임이 어려워서 짜증난다고 했다 ㅋㅋㅋ 이미 고리 안에 들어간 링들은 안 빠져나오게 해야하는 것 아니냐고 했는데, 그럼 게임이 너무 쉬워질 것 같아서 우선 반영하진 않았다. 

 

대신, 고리 안에 들어간 링들이 상대적으로 덜 빠져나오게 하기 위해 꼼수를 부렸다. 

 

[2차 수정 프롬프트]

잘 수정해주셨어요! 한가지 더 수정사항을 입력할 테니 반영해주세요.

[수정사항]
화면의 아래쪽으로 갈수록 기포의 압력을 세게 받고, 위쪽으로 올라갈수록 압력의 정도를 낮춰주세요. 이런 수정사항을 요청하는 이유는 여전히 고리 안에 걸린 링이 너무도 쉽게 밖으로 빠져나오기 때문입니다.

 

버튼과 가까운 쪽일수록 압력을 크게 받고, 위쪽으로 올라갈수록 압력을 적게 받도록 요청한 것이다.

 

물리적으로 봤을 때도 기포가 올라오는 쪽과 가까울수록 물의 압력이 커야하는 건 당연하다. 아마 실제 게임에서도 그랬지 않을까. 말하고보니 꼼수는 아니었던 걸로 ^^ 전보다는 덜하지만, 여전히 고리 안에 들어있는 링이 잘 빠져나오긴 하더라. 이걸 보정하기 위해서 또 한 번의 수정을 거쳤다. 

 

[3차 수정 프롬프트]

제가 이번에 해결하고 싶은 문제는 모바일에서 게임을 할 때, 기기를 좌 우 방향으로 틀 때마다 링에 물리적 힘을 가하고 싶은 것입니다. 기기를 왼쪽으로 기울이면 오른쪽에서 미세한 압력이 가해지고, 오른쪽으로 기울이면 왼쪽에서 미세한 압력이 가해지도록 파일을 수정해주세요.

 

실제 링토스 게임을 할 때 내가 게임기를 손에 쥐고 있기 때문에 왼쪽 오른쪽으로 움직일 수가 있다. 그러면 물의 방향이 바뀌어서 링이 내가 의도한 방향대로 살짝 틀어지는 걸 볼 수 있다. 지금 맥락에서 내가 이 물리적 기능을 추가한 이유는 방향을 조절하면서 링과 고리 간의 마찰력을 생기게 해서 링이 고리에서 덜 빠져나오게 하기 위함이었다. 

 

이 기능을 추가하면서 새롭게 알게 된 점은 IOS 에서 이러한 모션 기능을 이용하려면 사용자의 '허가' 를 받아야 한다는 점이었다. 보안 정책상 그렇다고 하고, 안드로이드에서는 허가 없이도 모션 기능이 작동한다고 했다. 이후에 링이 고리에 들어갔을 때 미세한 진동을 주기 위해서 '진동 기능' 도 넣었었는데, 이것도 허가를 받아야한다고 뜨더라.

 

그런데 한 가지 문제가 생겼다. 왼쪽 오른쪽으로 기울일 때 물살의 방향이 조절되는 것까지는 구현했는데 예상치 못한 오류가 발생한 거다. 게임하다가 자꾸 링이 천장 위로 올라가 버린다는 것. 이 오류는 아직도 왜 생겼는지 이해를 못했다. 일련의 수정 작업 중.. 자연스럽게 없어지긴 했는데 원인이 뭐였는지 찾아봐야겠다.

 

3차 수정 이후로도 몇 번의 자잘한 수정을 거쳤다. 예를 들면, 좌우에서 받는 물살의 영향이 아래에서 위로 올라오는 압력보다 커서, 버튼을 누르고 있는데도 폰을 좌우로 기울이면 과속하는 버스 안에 탄 승객마냥 링들이 거침없이 흔들렸던 적이 있다. 이걸 해결하기 위해 좌우 압력을 상하 압력의 1/2 수준으로 낮춰달라고 요청했다. 어느정도 수준으로 낮춰야할지 감이 안 와서 1/2이라고 했는데, 저걸로도 부족해서 한 번 더 동일한 프롬프트를 입력했다. 

 

그리고 조금 더 현실감을 주기 위해 링이 쌓이는 모양을 수정했다. 수정 이전에는 고리 안에 링이 쌓일 때 2개가 쌓이든, 3개가 쌓이든 겹쳐져서 1개로 보였기 때문이다. 

 

 

좌측 이미지를 보면 보라색 링 1개만 보이지만, 실제로는 4개가 쌓여있다. 이걸 우측 이미지로 바꾸는 프롬프트를 입력했다.

 

[1차] 제가 첨부한 이미지는 링이 고리위에 쌓일 때 물리적으로 어떻게 보이는지를 나타내는 레퍼런스입니다. 정면('O' 모양)이 아니라, 링의 측면이 보이도록 디자인을 조정해주세요.

[2차] 링이 고리 위에 쌓였을 때, 1개처럼 보이지 않고, 링 위에 링이 쌓이도록 만들어주세요

 

1차에 '링이 쌓인' 이미지를 함께 입력해서 수정에 참고하게끔 했다. 아마도 이때 구현이 잘 안 되어서 2차 프롬프트를 입력했던 것 같다. 다행히 2차 프롬프트에서 지금과 같은 모습이 되었다.

 

그리고, 링들이 '물 속' 에 있다는 걸 부각시키기 위해 버튼을 누를 때마다 기포가 나오는 효과도 넣었다 !

버튼을 누를 때마다 화면 하단에서 기포가 조금 발생하는 모션을 추가해주세요

 

와.. 이 한 줄 만으로 기포가 올라오는 모션이 정확히 내가 생각했던대로 구현됐다.

 

이렇게 모션을 어느정도 구현해놓은 다음 오늘은 야심차게 디자인을 대거 수정해보려는 계획을 세웠으나...

 

 

완전히 실패.. 아니 배경에 저 이미지를 까는 것부터 난관이었다. 내가 입력한 레퍼런스에 따라 나노 바나나가 만들어준 이미지인데 잘 나가다가 뜬금없이 요상한 단상? 같은 걸 생성한 거다. (우측 이미지 참고) 내가 저거 없애달라고 하니까 고리가 무슨 폴댄스 봉마냥 바닥에 콕 쳐박혀버렸다..

 

게다가 튜브의 움직임도 조금 더 사실적으로 만들려다가 살짝 망해버렸다. 튜브 쌓이는 꼬라지 보이시나요..? 요지경이 되... 튜브 움직임을 수정하려던 방식은 링토스 게임 영상을 첨부하고 그 움직임을 학습해서 내 게임에 구현해달라고 요청한 것이다.

 

[링 모션 수정 프롬프트]

이제부터 복제한 파일에 새로운 디자인을 적용해주세요. 먼저 링의 움직임부터 조절하고자 합니다. 파일에서 '시연.mp4' 영상을 참고해서 링의 움직임을 실제처럼 보정해주세요.

 

'복제한 파일'에 새로운 디자인을 적용해달라 부탁한 이유는 혹시 수정하다가 잘못된 길을 걸어서.. 아주 게임을 못쓰게 될까봐 그랬다. 잘한 선택이었지 뭐. 

 

 

마우스가 바빠보이는 건 기분 탓이겠지.. 어때요 제법 모션이 비슷한가요..? 원래는 제일 우측처럼 움직였던 게 영상을 학습하면서 가운데 모션처럼 바뀐 거다. 

 

여기까지 수정하고 배경 + 고리 모양을 바꾼 다음 안티그래비티 사용이 제한되었다. 아쉬운대로 코드를 그대로 긁어다가 제미나이 무료버전과 함께 디자인 작업을 해보려고 했는데.. 시키지도 않은 부분을 자기 혼자서 수정하는 바람에 배경은 3번이나 바뀌어서 아래 이미지처럼 되었고, 레퍼런스로 넣었던 튜브 이미지를 복사하는 바람에 링 형태도 바뀌었다. 버튼 위치도 처음 봤을 땐 수정한 위치가 나은가? 싶었는데, 링이 고리에 걸렸을 때 정확히 그 위치에 버튼이 있어서 잘 안 보이는 문제점이 있었다. 

 

 

길고 긴 수정의 여정.. 명색이 UX 디자이너 지망생인데 디자인이 이렇게나 구린 게 제일 문제다. 피그마메이크처럼 시안을 주면 그대로라도 작업해줄까 싶어서 피그마에서 직접 디자인 잡아서 넣어보기도 했는데.. 무료버전이라 그런지 실패했다. 내가 넣은 시안과 추구미는 아래 이미지를 참고하시라.

 

좌: 시안 / 우: 무드보드

 

이게 될까..? 내가 프롬프트를 잘 못 작성하고 있을수도 있겠다는 생각이 든다. 디자인 수정 정확도를 높이는 프롬프트 작성법에 대해서 탐구해봐야겠다. 내가 원하는 감도의 게임을 할 수 있을 때까지 수정해보겠어 ! 아참, 저처럼 링토스 게임을 좋아하시는 분들을 위해 제가 만든 게임 사이트 주소도 남겨둡니다. 마음껏 해보시고 피드백이 있다면 부탁혀요.. https://drawerrer.github.io/ringinwater.html