[기업협업] 회고록

Jihoon Han·2021년 12월 12일

회고록

협업 기업 Planz-coffee

실력있는 로스터와 바리스타의 커피를 제공하는 무인 카페
키오스크 화면을 통해서 다양한 음료를 주문할 수 있다.

프로젝트 진행 목적

이용자들이 커피값 몰아주기를 하는 경우가 자주 있는데, 키오스크 화면으로 간단한 게임을 즐길 수 있도록 하기 위해

멤버

본인 포함 프론트엔드 2명

프로젝트 기간

2021.11.15~2021.12.9(4주)

1주차: React-spring 세미나 발표
2주차: 프로젝트 기획, 게임 구현
3주차: 디자인 적용, 애니메이션 구현
4주차: 배경음 및 효과음 추가, 테스트, 서비스 시작

사용한 기술

React, React-spring, Gatsby

기획

포인트

이용자들이 게임에 참여하도록 호기심을 불러일으키는가?
진행 시간이 길지 않고, 한번에 결과를 보여 줄 수 있는가?
2~6명의 다양한 인원이 참여할 수 있는가?
게임 진행이 시각, 청각적으로 지루하지 않은가?

후보 게임들

사다리타기 (사다리를 고르는 시간이 길고, 게임에 참여하는 느낌이 약함)
하마 이빨 누르기 (여러 사람이 키오스크 앞에서 돌아가면서 참여해야하는 점, 2D로 구현할 수 있는 극적인 애니메이션 효과가 힘듬)
경마 (사행성, 게임 진행이 오래 걸릴 수 있음, 말의 움직임이나 경기장의 느낌을 애니메이션으로 구현하는데 주어진 시간이 부족함)
테이블 구슬치기(여러 사람이 키오스크 앞에서 돌아가면서 참여해야하는 점, 게임 진행이 오래 걸림)

결정된 게임

카드 뒤집기 (사전 작업이 필요없고, 카드에 번호가 있어서 한 명만 키오스크 앞에서 카드를 고를 수 있음, 게임 진행이 빠르고 카드에 애니메이션과 효과음을 추가해서 시청각적으로 조금이나마 재미를 줄 수 있음)

개발의 요구사항

키오스크에서 게임 시작을 누르면 게임의 url을 iframe으로 띄운다
게임 시작을 누르면 장바구니에 담은 음료의 잔수를 게임 url에 파라미터로 넘기고, 전달받은 파라미터에 따라 몇 장의 카드로 게임을 진행할지 결정한다
유저의 게임 참여도에 대한 데이터를 얻기 위해 '게임 중단'과 '게임 완료' 여부를 iframe에서 부모창(키오스크)에 전달한다.
화면 전환마다 자연스러운 애니메이션을 넣는다
카드가 뿌려진 상태에서 다양한 애니메이션이 개별적으로 동작한다

게임의 진행

참여 인원이 4명 이하면 9장, 5명 이상이면 12장의 카드 출력
게임 시작 시 당첨 카드의 존재를 보여준다
카드가 섞이고 다시 뿌려지며 당첨 카드의 위치가 바뀐다
그만두기를 누르거나 카운트다운이 종료되면 게임이 중단된다
카드를 클릭할 때마다 임의의 카드에 애니메이션이 발생한다
당첨됐을 때 눈에 띄는 이벤트가 발생한다
게임이 완료되면 결제 화면으로 넘어간다

동작 화면

게임 url

밑의 링크에서 누구나 플레이할 수 있다. (화면 배율을 줄여주세요!)
play card game!

🤔 어려웠던 기능

카드 개별 애니메이션 효과 추가

우선, 애니메이션 종류는 bounce, shake, shine 3가지로 정했다.
카드 배열에 map을 돌려서 각각의 애니메이션 여부를 false로 주고, click할 때마다 랜덤한 카드에 하나의 애니메이션을 true로 바꿔주는 식으로 구현할 생각이었다.

❗️첫번째 문제 발생

이미 카드에 뒤집히는 애니메이션과 흩어지는 애니메이션이 있어서인지 새로 추가한 애니메이션이 동작하지 않았다.
🤩 해결 방법
추가 애니메이션만 동작하는 카드 세트를 추가했다. 카드가 모여젔다가 다시 뿌려지면 당첨여부가 적힌 카드 세트, 뒷면 카드 세트는 display를 none으로 해주고, 애니메이션을 할 카드 세트만 보이게 한다. 사실상 게임 화면에선 3개의 카드덱이 겹쳐져 있는 셈이다. 카드를 클릭하면 애니메이션 카드는 display가 none이 되고, 당첨 카드 세트, 뒷면 카드 세트의 display는 none에서 flex가 되서 화면에 보이고, 뒤집히는 모션을 하게 된다.

❗️두번째 문제 발생

카드에 세 개의 spring 애니메이션을 style에 props로 넘겨주면 첫번째 애니메이션만 동작하는 것(react-spring의 한계인 것 같다).
조건부로 style에 props로 넘겨주는 식으로 해도 마찬가지였다.
이를 해결하기 위해 함수로 카드마다 애니메이션을 추가하는 식으로 시도했으나, react-spring은 component함수가 아닌, useEffect나 콜백 함수 안에서 동작하지 않는다.
🤩 해결 방법
애니메이션 추가에 대한 고민이 길어져서 후순위로 미루고 있다가 어느날 문득 떠올랐다. 하나의 spring 애니메이션에 모든 동작을 집어 넣고, 조건에 따라 카드의 애니메이션이 true일 경우에만 해당 동작만 실행되게 했다.

부모창에서 iframe url에 파라미터 전달

처음 구현했던 방법은, iframe과 부모창이 postMessage로 서로 데이터를 주고받도록 했으나, 부모창에서 음료 잔수를 iframe의 url에 파라미터로 넘기는 식으로 바꿔달라는 요청이 있었다.
🤩 해결 방법
gatsby의 location기능을 이용했다. 부모창이 iframe의 url에 현재 음료 잔수를 추가해서 보내면 iframe은 query에 담긴 변수를 받을 수 있었다. gatsby를 사용한 적이 없어서 이 기능만 이용했는데, 차후에 좀 더 알아볼 계획이다.

추가 게임

카드 게임의 디자인이 나오기까지 하루 정도의 공백이 있어서 (악어 게임으로 익혀 알려진)하마 게임을 만들기 시작했지만, 아직 완성하지는 못했다. 틈틈히 작업해서 완성할 생각이다. (하마 얼굴은 샌드박스에 있는 하마 애니메이션을 참고했다)

구체적인 구현 계획

게임이 시작되면 나뭇잎이 걷어지면서 하마의 얼굴로 클로즈업 된다
하마가 입을 벌리고, 이빨이 4~8개 드러난다
눈동자가 아래쪽을 바라보며 좌우로 계속 움직인다
이를 누를 때마다 하마의 눈이 >< 모양으로 바뀐다
당첨되는 이빨을 누르면 입을 벌린채로 빠르게 클로즈업되고 입을 닫으면서 얼굴이 전체적으로 흔들린다.
하마의 얼굴이 물 속으로 들어가면서 게임이 종료된다.

협업을 하면서 든 생각

프론트엔드 개발자라면 애니메이션도 할 줄 알아야겠다

지금까지 프로젝트에서는 애니메이션을 넣을 생각을 못했지만, 이번 협업을 하면서 codesandbox에서 정말 멋진 애니메이션을 많이 봤고 나도 해보고 싶다는 욕구가 뿜뿜했다. svg에 대해서도 알아보고 공부한다면 정말 유용하게 쓸 수 있을 것 같다.

더 적극적으로 말을 할걸

cto님과의 커뮤니케이션이 좀 더 즉각적으로 자주 있었다면, 팀원과 의사소통 하면서 역할 분담을 더 제대로 했다면, 더 빠르게 프로젝트를 진행했을 것 같고, 어쩌면 두번째 게임도 구현이 가능하지 않았을까 싶다.

서비스의 성취감

마지막 날, 키오스크에서 베타서비스를 시작하고, 이용자가 단체주문을 할 때마다 두근두근 하면서 게임을 플레이 하실지 기대했었고, 첫 이용자는 신기했다는 반응이었다. 다행히 버그는 없었고, 앞으로 내가 개발한 게임이 수백명이 이용하게 된다는 생각에 나도 모르게 하루종일 싱글벙글 했다.