뷰티마블
제작시기: 2026.06 ~ 2026.07
여의도 더현대 화장품 팝업 스토어에서 행사진행을 위한 웹 게임을 제작했습니다.
code.fuenter.com
[배경]
'더 현대' 에서 진행한 '뷰티마블' 이라는 팝업스토어 행사에서 이용하기 위한 웹게임을 제작했습니다.
게임에서 주사위를 굴려 말이 이동한 부스로 사람이 직접 이동하여 미션을 수행하고 상품을 받는 형식의 게임입니다.
현장과 연계하기 위하여 QR 코드를 적용해 미션완료와 상품을 수령하였음을 서버에 저장할 수 있습니다.
[과정]
클라이언트께서 바이브코딩으로 작성해주신 프로토타입을 바탕으로 개발 방향을 제시드리고,
여건상 상대적으로 불필요할 것으로 판단되는 '관리자 기능'을 삭제하고 운영으로 대응하는 방향으로 기간과 비용을 맞추고자 하였습니다.
디자인의 경우 저희가 제안드린 시안 중 클라이언트께서 원하시는 느낌이 나오지 않아, 예상보다 많은 시간이 지나갔습니다.
클라이언트께서 제안주신대로, 클라이언트가 직접 AI로 생성한 디자인 원본을 바탕으로 저희측에서 기존 컨셉과 어울리게 다듬어 적용하는 방향으로 진행했습니다.
[기술적 이슈와 해결]
- 게임 진행 상태 보존 문제
방문자들은 '회원가입'이나 '로그인'에 거부감이 있기 때문에 로그인 없이 회원의 정보를 유지하는 것이 주요 기술적 문제였습니다.
고객들은 게임을 한 화면에서 계속 진행할수도 있고, 브라우저를 완전히 껐다가 재접속할 수도 있으며, 게임이 진행중인지 모른채 '기본카메라'를 통해 새 창을 또 띄울수도 있습니다.
이를 해결하기 위해 초기 CRM 입력시 id에 해당하는 userKey를 자동 발급하고, 게임 상태를 로컬 스토리지에 저장하여 창을 완전히 닫거나, 새창을 연 경우에도 게임 상태가 지속되도록 하였습니다.
- 다중 접속 문제
인게임 카메라가 아닌 기본 카메라 앱으로 접속하는 경우. 아예 새창으로 접속하는 경우 한 기기에서 게임이 동시에 각각 돌아갈 수 있는 문제가 있습니다.
이를 해결하기 위해 새창이 뜨는 경우 기본 세션에서는 '새 창에서 게임이 진행중입니다.' 안내를 적용하고 게임이 진행되지 않게 막는 방법으로 자연스럽게 1기기 1게임이 지켜지도록 구현하였습니다.
- 저사양 기기의 3D 렌더링 문제
현장에서는 다양한 기종으로 접속합니다. 3D는 화려하지만 기종에 따라 계산성능이 부족헤 '렉'이 걸릴 수 있습니다. 이는 사용자의 경험을 저해하는 것은 물론, 팝업스토어에 대한 이미지도 저해할 수 있다고 판단하였습니다.
주사위를 고급스럽게 표현하기 위하여 쉐이더가 적용된 주사위를 제공하되, 주사위 회전 애니메이션을 미리 렌더링하여 2D sprite로 변환하는 방식으로 저성능 모바일기기에서도 고급 이미지를 제공받을 수 있도록 하였습니다.
- 아이폰 메모리 문제
웹 게임 제작시 고질적인 문제인 아이폰의 까다로운 정책 맞추기 문제중 하나였습니다. 게임 특성상 초반에 애셋들을 로딩하는데 아이폰에서는 이 때 로드하는 용량이 일정수치를 넘어갈 경우 거부하며 새로고침을 반복하는 문제가 있습니다.
이를 해결하기 위해 압축률이 높은 포맷을 채택하고, 압축이 필요할때만 인코딩/디코딩 하여 고화질의 애니메이션도 서비스할 수 있도록 하였습니다.
code.fuenter.com
[배경]
'더 현대' 에서 진행한 '뷰티마블' 이라는 팝업스토어 행사에서 이용하기 위한 웹게임을 제작했습니다.
게임에서 주사위를 굴려 말이 이동한 부스로 사람이 직접 이동하여 미션을 수행하고 상품을 받는 형식의 게임입니다.
현장과 연계하기 위하여 QR 코드를 적용해 미션완료와 상품을 수령하였음을 서버에 저장할 수 있습니다.
[과정]
클라이언트께서 바이브코딩으로 작성해주신 프로토타입을 바탕으로 개발 방향을 제시드리고,
여건상 상대적으로 불필요할 것으로 판단되는 '관리자 기능'을 삭제하고 운영으로 대응하는 방향으로 기간과 비용을 맞추고자 하였습니다.
디자인의 경우 저희가 제안드린 시안 중 클라이언트께서 원하시는 느낌이 나오지 않아, 예상보다 많은 시간이 지나갔습니다.
클라이언트께서 제안주신대로, 클라이언트가 직접 AI로 생성한 디자인 원본을 바탕으로 저희측에서 기존 컨셉과 어울리게 다듬어 적용하는 방향으로 진행했습니다.
[기술적 이슈와 해결]
- 게임 진행 상태 보존 문제
방문자들은 '회원가입'이나 '로그인'에 거부감이 있기 때문에 로그인 없이 회원의 정보를 유지하는 것이 주요 기술적 문제였습니다.
고객들은 게임을 한 화면에서 계속 진행할수도 있고, 브라우저를 완전히 껐다가 재접속할 수도 있으며, 게임이 진행중인지 모른채 '기본카메라'를 통해 새 창을 또 띄울수도 있습니다.
이를 해결하기 위해 초기 CRM 입력시 id에 해당하는 userKey를 자동 발급하고, 게임 상태를 로컬 스토리지에 저장하여 창을 완전히 닫거나, 새창을 연 경우에도 게임 상태가 지속되도록 하였습니다.
- 다중 접속 문제
인게임 카메라가 아닌 기본 카메라 앱으로 접속하는 경우. 아예 새창으로 접속하는 경우 한 기기에서 게임이 동시에 각각 돌아갈 수 있는 문제가 있습니다.
이를 해결하기 위해 새창이 뜨는 경우 기본 세션에서는 '새 창에서 게임이 진행중입니다.' 안내를 적용하고 게임이 진행되지 않게 막는 방법으로 자연스럽게 1기기 1게임이 지켜지도록 구현하였습니다.
- 저사양 기기의 3D 렌더링 문제
현장에서는 다양한 기종으로 접속합니다. 3D는 화려하지만 기종에 따라 계산성능이 부족헤 '렉'이 걸릴 수 있습니다. 이는 사용자의 경험을 저해하는 것은 물론, 팝업스토어에 대한 이미지도 저해할 수 있다고 판단하였습니다.
주사위를 고급스럽게 표현하기 위하여 쉐이더가 적용된 주사위를 제공하되, 주사위 회전 애니메이션을 미리 렌더링하여 2D sprite로 변환하는 방식으로 저성능 모바일기기에서도 고급 이미지를 제공받을 수 있도록 하였습니다.
- 아이폰 메모리 문제
웹 게임 제작시 고질적인 문제인 아이폰의 까다로운 정책 맞추기 문제중 하나였습니다. 게임 특성상 초반에 애셋들을 로딩하는데 아이폰에서는 이 때 로드하는 용량이 일정수치를 넘어갈 경우 거부하며 새로고침을 반복하는 문제가 있습니다.
이를 해결하기 위해 압축률이 높은 포맷을 채택하고, 압축이 필요할때만 인코딩/디코딩 하여 고화질의 애니메이션도 서비스할 수 있도록 하였습니다.
