전국 200여 개의 매장을 운영하며 숯불닭갈비 업계를 선도하는 팔각도와 플렉스튜디오 팀이 손잡고 ‘888을 잡아라’ 게임을 선보이게 되었어요! 팔각도는 단순히 맛있는 음식만 제공하는 것이 아니라, 고객들에게 다채로운 즐거움을 선사하기 위해 끊임없이 노력하고 있답니다. 이번 게임 제작도 그러한 노력의 일환으로 고객들이 매장 뿐 아니라 어디서든 즐거운 시간을 보낼 수 있도록 특별히 기획 됐어요.
플렉스튜디오 팀은 이전에도 로우코드 개발 플랫폼인 플렉스튜디오의 다양한 활용 가능성을 보여주기 위해 여러 게임을 제작했었는데요, 그중에서도 가장 완벽한 원을 세 번 안에 그리는 ‘동그라미 챌린지’가 큰 인기를 얻었죠! 이 게임을 통해 팔각도에서 플렉스튜디오를 찾게 되었어요. 동그라미 챌린지를 통해 인연을 맺게 되었다니 정말 놀랍죠?
팔각도 고객들을 위한 게임 개발에서 가장 중요한 것은 바로 ‘재미’였습니다. 남녀노소 누구나 쉽게 즐길 수 있도록 간단한 조작법을 채택하고, 중독성 있는 게임으로 만들어 자연스럽게 입소문이 나도록 기획했죠. 또한, 팔각도의 상징인 팔각형 불판을 게임 디자인에 활용하여 브랜딩 효과까지 놓치지 않는 것이 목표였답니다. 여러 차례의 논의 끝에, 팔각형 불판을 따라 8.88초를 맞추는 스톱워치 게임으로 최종 결정되었어요.
게임 화면을 디자인 하는데 있어, 디테일하게 두 가지 사항을 중점적으로 고려하였는데요. 먼저, 타이머가 돌아갈 때 불투명 검정 원을 화면에 올려 컴퍼스처럼 돌아 가게끔 하였어요. 이를 통해 타이머만 작동하는게 아닌, 게임이 더 동적인 느낌이 날 수 있도록 제작했어요.
그리고 숫자가 빠르게 카운팅 되면서, 화면이 좌우로 흔들리는 경우가 있었는데요. 이를 바로 잡기 위해 폰트를 여러가지 변경하면서 디자인을 진행하였어요. 이에 더해 게임 결과를 쉽게 공유하고 널리 알릴 수 있도록 화면 곳곳 ‘공유’ 버튼도 추가했어요.
‘888을 잡아라’ 게임 순서는 다음과 같아요.
플렉스튜디오는 로우코드 개발 플랫폼의 장점을 십분 활용하여 복잡한 코딩 작업을 최소화하고 개발 기간을 단축했어요. 또한, 플렉스튜디오 플랫폼 내에 게임 개발, 배포 및 운영에 필요한 모든 인프라가 갖춰져 있어 ‘888을 잡아라’ 게임을 신속하게 출시할 수 있었습니다.
다만, ‘888을 잡아라’ 게임의 목적에 부합할 수 있도록 몇 가지 동작들을 수정하는 작업을 거쳤는데요. ‘888을 잡아라’는 하나의 화면에서 여러가지 상호작용, 즉 변경이 일어납니다. 초도 계속해서 바뀌고, 팔각형의 테두리가 초에 맞춰 동시에 움직이죠. 이러한 ‘동적인’ 사항들을 자연스럽게 구현하는 것에 초점을 맞춰 개발을 진행하였어요.
이에 플렉스튜디오의 컨트롤 중 하나인 ‘embed’를 활용해 HTML의 <canvas> 를 구현했어요. <canvas>는 웹페이지에 그래픽을 그릴 수 있게 해주는 요소로, 쉽게 말해 Javascript를 이용하여 그림을 그릴 수 있는 빈 도화지에요. 여기에 여러 동적인 요소를 입혀 게임이 자연스럽게 구현되도록 했어요.
또한 시나리오 전반에 걸쳐 공통으로 사용할 수 있는 함수를 관리하는 _v 함수를 활용해 개발 효율성을 높였어요. 각기 다른 화면이라도 공통으로 적용되는 사항들이 있기 때문에 이를 _v 함수 안에 정의하고 필요할 때 마다 꺼내 쓸 수 있도록 했죠.
초에 맞춰 팔각형 테두리가 움직이는 기능은 기존 플렉스튜디오에 없던 기능으로, 이를 구현하기 위해 canvas를 사용하여 애니메이션을 그렸습니다. 또한, 반복 사용될 항목들은 시나리오의 전역 변수 기능인 _v에 정의하여 일관된 값을 유지하도록 하였으며, 필요한 이벤트에서 해당 값을 활용하고 있습니다.
일련의 과정으로 팔각도와 플렉스튜디오팀의 첫 게임 프로젝트가 완성되었어요. 함께 공들여 만든 만큼, 많은 분들이 ‘888을 잡아라’를 통해 많은 즐거움을 얻어가셨으면 좋겠어요.
특히나 팔각도는 더 많은 고객들이 게임에 참여하고 즐거움을 누릴 수 있도록, 올해 연말까지 랭킹 300위 안에 드는 분들께 팔각도 모바일 상품권 10,000원권을 증정한다고 해요. 어서 게임에 참여하고 상품도 받아 가세요!