[연쇄개발자] 젤다:왕국의 눈물 사당 위치 알려주는 "사당지도" 개발기

오늘은 젤다 왕국의 눈물 게임 속 사당 위치를 알려주는 "사당지도" 앱 개발기를 작성해볼게요.

 

안녕하세요. 연쇄개발자 류찬규입니다.

 

젤다 사당지도 로고

 

이글을 보고 계신다면 일본 게임인 젤다를 좋아하거나 한번이라도 들어본 적이 있는 분이시겠죠?

사실 저는 이 앱을 개발할 당시 한번도 젤다를 플레이 해본적도, 어떤 내용의 게임인지도 잘 몰랐습니다.ㅎㅎㅎ;;;

 

그런 제가 어떻게 젤다와 관련된 서비스를 만들었을지 지금 부터 이야기 해볼게요~

 

 

사당지도 - 왕눈, 사당백과, 왕국의 눈물 - Google Play 앱

 

 

문제도출 & 기획

앞서 말씀드린 것 처럼 저는 젤다를 직접 플레이해본적이 없지만, 작년 이 앱을 개발할 당시 젤다: 왕국의 눈물이 릴리즈 되면서 엄청난 화제와 인기를 끌었어요.

그러다보니 자연스럽게 저도 젤다에 관심을 가질 수 밖에 없었던 것 같아요. 어떤 게임인지 왜 이게 그렇게 인기인지? 나도 젤다 게임팩을 사야하나? 하고 이것저것 찾아봤던 것 같아요.

 

젤다의 흥행

 

유튜브를 보니 이 젤다 게임의 플레이 시간을 줄여주는 방법은 맵 곳곳에 위치한 미션 장소(= 사당)를 빠르게 찾고 퀘스트를 하는 것 이더라구요.

 

그렇다면 이런 공략 지도가 필요하지 않을까? 라는 생각이 들었고, 찾아보니 해외에서는 이미 이런 비슷한 서비스들이 존재하고 있더라구요.

하지만 한국에서도 그런 서비스들 알고 있지만 그런 서비스들은 일본어/영어로 만들어져 있어 많은 사람들이 사용하기에는 어려움이 있을 것 같았어요.

해외의 비슷한 서비스 - 젤다 던전

 

이런 서비스들이 존재하는 것만 봐도 이미 게임 유저들의 니즈는 어느정도 검증 되었다고 생각이 들었고, 이 서비스들을 한글화만 해도 필요로 하는 사람들이 많이 있을 것 같다고 생각했어요.

 

그렇기 때문에 우선 게임 내 미션을 수행하는 장소인 사당 위치만 알려줘도 유저들이 사용하고 싶을 것 같다고 생각해서 MVP로 사당의 위치만 표기하고 지도를 한글화 하는 것을 목표로 개발해보기로 했어요.

 

 

젤다 사당지도 기술 스택

React Native & React JS

 

이 서비스 또한 기존에 하이브리드 웹앱 개발을 위해 만들어둔 RN & React 보일러 플레이트가 존재하기 때문에, 자연스럽게 이 기술스택을 사용해 개발하게 되었어요.

 

젤다 맵 확대/축소 기능 개발

이번 서비스의 경우 큰 맵이미지를 확대/축소하면서 실제 핀의 위치를 확인하는 기능 구현이 필요했어요.

기존에 이런 지도 관련 서비스를 개발할 때는 Kakao Map, Naver Map 등 SDK를 통해 손쉽게 개발을 했었는데요. 이번의 경우에는 실제 지도가 아닌 게임 맵 지도이기 때문에 기존 SDK를 사용할 수 없었어요.

 

그래서 다른 방법으로 직접 구현이 필요했습니다.

구현 방법을 생각해보니 그냥 단순하게 젤다의 맵이 현실보다 넓은 맵이 아니기 때문에 지도를 단순한 이미지로 두고, 이미지를 핀치 줌 인&아웃 시키면 되지 않을까? 라고 생각했고, react-zoom-pan-pinch 라이브러리를 사용해 줌 인 아웃 기능을 개발했어요.

 

젤다 사당지도 확대 / 축소 기능

 

마커의 경우에는 이미지 위에 이미지 위에 CSS positon: absolute로 직접 마커별 포지션을 잡아주는 방식으로 구현했습니다.

기존에 지도 위에 마커를 표시하고 핸들링 하는 기능을 개발해본 경험이 있어 어렵지 않게 개발했던 것 같습니다.

 

 

 

젤다 사당지도 주요기능

사당 위치 확인

전체 사당 위치 지도

 

앞서 소개해드린 기획과 기능 구현 방법에서 소개해드린 것 처럼 이 서비스에는 "전체 사당 위치 확인" 기능이 있는데요.

젤다는 지하/지상/하늘 3개의 맵으로 나눠져 있는데 그 모든 맵의 사당 위치를 알려주고 있어요. 사당의 위치는 모든 위치를 찾고 X, Y position을 찾아 한글화 한 사당의 이름을 JSON 형태의 데이터로 저장하는 노가다 작업으로 만들었습니다.

 

클리어한 사당 저장

클리어 사당 저장

사당의 위치에 방문해 퀘스트를 클리어한 경우에는 해당 사당에 더이상 방문할 이유가 없죠.

그래서 클리어한 사당위치는 따로 저장하고 분리해서 확인할 수 있는 기능을 추가했어요.

 

저장 기능에 맞춰 클리어 사당을 필터링 할 수 있는 기능도 같이 개발해 두었어요.

방문 사당 필터링

 

 

 

유저의 요청) 동굴 / 코로그 / 라이넬 지도 추가

배포 당시에는 사당의 위치만 표기해 서비스 했지만, 이후에 유저들로 부터 동굴/코로그/라이넬의 위치까지 볼 수 있으면 좋겠다는 피드백이 있었고, 발 빠르게 기능을 추가해 배포하게 되었습니다.

 

동굴 / 코로그 / 라이넬 지도

 

 

사당지도 배포

이번 서비스는 하이브리드웹앱으로 개발해 안드로이드 플레이 스토어에 배포를 진행했습니다.

그 후 젤다 게임 유저들이 활발히 활동하는 DC 인사이드 젤다 갤러리와 루리웹 젤다 갤러리에 홍보를 했습니다.

 

 

배포 이후 댓글을 통해 반응을 보고 피드백을 받았는데요.

커뮤니티 댓글 반응

 

 

양 쪽 커뮤니티 모두 댓글 반응이 나쁘지 않았고, 댓글 중에는 제가 기획하면서 "기존 사당 지도가 일본어/영어로 되어져 있어 불편함을 겪고 있을 것이고, 한글화를 필요로 하는 유저가 있을 것이다" 라는 가설에 딱 들어맞는 유저의 피드백이 있어서 더욱 신이 났던 것 같습니다.

 

 

 

 

 

배포 이후 홍보한 커뮤니티에서 괜찮은 반응이 있고 난 뒤 설치한 전체 유저수는 계속해서 증가했고, 23년 8월 쯤 3300여명의 다운로드 수를 찍고 천천히 내려와 현재는 횡보를 유지하고 있는 상태입니다.

 

젤다 & 젤다 왕국의 눈물 키워드 검색량 추이

 

아무래도 젤다 왕국의 눈물 게임의 인기가 줄어듬에 따라 자연스럽게 낮아질 수 밖에 없는 상황이라고 생각이 되어집니다.

 

 

개발기를 마치며

 

이번 사당지도 개발과 운영을 통해 알 수 있었던 점은 해외에서 잘 돌아가고 있는 서비스는 한국에 적절한 로컬라이제이션을 하면 충분이 잘 돌아갈 수 있다는 점을 몸소 알게 되었던 프로젝트 였다고 생각합니다.

 

추가로 이번 서비스에 광고를 달았는데 빈도를 적절히 설정하지 못해 유저의 광고 관련 피드백이 꽤 있었는데 적절한 시기에 대응을 못한 것이 조금 아쉬웠습니다.

 

3300여명이 다운로드 받았을 시점 더 그로스 할 수 있을 만한 것들이 있을까 고민을 해봤는데 이 시기에도 적절히 대응하지 못한 것도 아쉽게 느껴집니다. 이 시기에 그로스를 위해 직접 게임을 장시간 플레이 해본다거나, 유저 인터뷰나 유저 피드백을 더 적극적으로 반영하는 등의 추가 작업을 진행했으면 어땠을까 하는 생각이 듭니다.

 

그럼 이상으로 연쇄개발자 프로젝트의 젤다 "사당지도" 개발기를 마치겠습니다.

젤다를 플레이 하시는 분이라면 제 서비스 한번 사용해보시는건 어떤가용?

 

 

 

사당지도 - 왕눈, 사당백과, 왕국의 눈물 - Google Play 앱

 

 

 

 

다른 "연쇄개발자" 프로젝트의 서비스와 개발기를 보시고 싶으시다면

아래 카테고리도 확인해주세요~

👇🏻👇🏻👇🏻👇🏻