10년차 모바일 게임의 패러다임을 전환하다
작은 모바일 화면 위에서 펼쳐지는 메이플스토리M의 모험에는 화려한 스킬과 수많은 몬스터 외에도, 용사님과 세계를 이어주는 보이지 않는 연결고리가 있습니다. 바로 손끝이 닿는 모든 순간을 안내하는 UI/UX입니다. 서비스 10주년을 맞이해 화면 전체를 다시 설계하는 일은, 단순히 세련된 스킨을 덧입히는 것을 넘어 10년 동안 켜켜이 쌓여온 팝업 구조와 얽혀 있는 기술적 관성을 정면으로 마주하는 일이었습니다. 1픽셀(Pixel)의 비율과 버튼 하나가 주는 텐션감까지 집요하게 파고든 이들의 치열한 고민을 관통하는 공통점은 하나입니다. '어떻게 하면 용사님들의 시야에 불편함을 최소화하고, 캐릭터와 모험을 가장 눈부시게 돋보이게 할 것인가'를 끊임없이 묻는다는 것입니다. 오늘은 메이플스토리M의 10년 된 익숙함을 과감히 걷어내고, 용사님들의 새로운 플레이 시야를 열어준 UI/UX 담당자들의 이야기를 들려드리려고 합니다.
새 눈으로 바라보기
Q1. 익숙한 것에서 새로움을 찾는 것만큼 어려운 것은 없죠. 메이플스토리M은 10주년을 맞이한 만큼 UI/UX 담당자로서 모든 위치를 외울 수 있을 정도로 익숙한 화면일텐데요. 이번 대규모 개편을 진행하면서 익숙함에서 한 발 떨어져 작업하시는 건 쉽지 않았을 것 같습니다. 파격적인 변화를 결심하게 된 첫 시작이 궁금합니다.
김서방 : 디자인 컨셉을 유지하면서의 편의성 개선이나 볼륨이 큰 개선의 업데이트는 꾸준히 있었으나, 이번처럼 콘텐츠들의 UI/UX 전면적인 개편과 디자인 컨셉까지 전체를 리뉴얼하는 결정은 쉽지 않았습니다. 이번의 큰 변화는 메이플스토리M 10주년을 맞이하여 기획자 분들의 제안으로 시작된 것 같습니다.
오래된 게임이라 오랜 시간 유지해 온 기능도 많고, 얽힌 기술도 많은지라 어디서부터 어떻게 풀어가야 할지 막막했던 순간이 떠오르네요. 생각해야 할 포인트들이 굉장히 많았는데요. 예를 들어, 10년 동안 끊임없이 라이브 서비스를 이어오다 보니, 정보에 정보가 추가되는 경우들이 많아서 게임 UI 화면의 밀도가 많이 높았고, 만들어 내는 엔진의 UI 구조도 복잡한 상태였습니다. 또 과거 모바일 환경에 맞춰 모든 UI가 ‘중앙 정렬 고정’ 방식이었던 점 등 좀 ‘예스러운’ 느낌을 가진 경우가 더러 있었어요.
예를 들자면, 스마트폰은 노치(화면의 파인 부분, Notch), 다이나믹 아일랜드(화면 상단의 상태 표시 영역, Dynamic Island), 라운드 코너(화면의 둥근 모서리) 등 디스플레이 영역에 대한 디자인이 워낙 다양하고, 해상도와 비율도 천차만별이니, 트렌드를 따라 가지 못하는 부분들이 있었습니다. 과거에는 이러한 화면 왜곡과 iOS(아이폰)에서는 홈 바(인디케이터) 간섭을 피하려고 게임 전체 팝업(화면)일 땐 강제로 96%로 축소해 띄울 수 밖에 없었습니다. 이 때문에 픽셀이 1:1로 매칭되지 못하고 미세하게 뭉개지는 현상이 있었습니다.
이런 식으로 하나 하나 뜯어보다보니, 메이플스토리M이 10주년을 맞이한 만큼 “마음먹고 크게 업데이트 해 보자” 싶었던 것 같아요.
Q2. 네, 말씀만 들어도 고려해야 할 내용들이 굉장히 많으셨을 것 같네요. 특히 어떤 부분을 좀 신경 써서 바꿀 부분들을 고민하셨나요?
김서방 : 가장 먼저 생각나는 건 메이플스토리M이 ‘도트(Pixel) 기반 게임’이라는 점인데요. 해당 특성 때문에 기술적/디자인적으로 흔치 않은 고민들을 하게 된 것 같습니다. 일반적인 일러스트형 게임은 벡터나 양감이 있는 그래픽이라 UI 크기를 원하는 대로 자유롭게 리사이징할 수 있는데요. 메이플스토리M의 경우는 원작의 PC메이플의 가이드를 따르다 보니 스킬이나 인벤토리 아이콘 등 모든 도트 리소스가 원본 리소스를 기준으로 정배율로 스케일 업 되어야 했습니다.
픽셀의 배율을 유지하면서 그 외 UI 디자인 구성 버튼, 텍스트 크기나 위치 등에 최적하는 작업도 까다로운 부분이었습니다. 앞에서 말씀드린 iOS(아이폰)에서 전체 팝업(화면)일때 실행되는 96% 강제 축소 방식을 빼고, 기기들의 콘텐츠 안전 영역(Safe Area)를 계산하여 iOS에서도 도트 이미지들이 선명하게 보여 질 수 있도록 디테일을 고려해야 하는게 쉽지 않았던 것 같습니다. 게다가 ‘정말 이 많은 팝업을 다 리뉴얼 할 수 있을까?’ 하는 걱정도 공존했던 것 같아요.
익숙함 빼기 -
Q3. 시각적으로 가장 드라마틱한 변화는 단연 ‘톤앤매너’입니다. 오랫동안 유지해 온 특유의 밝은 스킨을 과감히 버리고 차분한 ‘다크 톤’으로 방향을 튼 의사 결정 과정이 궁금해요.
김서방 : 톤을 바꾸는 건 개편에서 제일 큰 고민을 차지했던 영역입니다. 기존에 가지고 있던 밝은 이미지가 워낙 컸기 때문에 톤에 큰 변화를 주면 유저분들이 어떻게 받아들일 수 있을까 걱정도 했고, 톤을 바꿈으로 인해 해결해 나가야 할 과제들도 아주 많았기 때문에 시작하기도 전에 많은 부담을 안고 가야 하는 상황이였습니다.
그럼에도 불구하고 톤 다운을 도전하게 된 배경은 지금 아니면 톤엔매너의 변화 시도가 쉽지 않을 것 같았고, 메이플스토리M이 가지고 있는 디자인 요소들의 특징 때문인 것 같습니다. 메이플스토리M이 가지고 있는 디자인 요소들은 화려한 스킬 이펙트와 아기자기하고 복잡한 도트 캐릭터가 그 특징이라고 할 수 있을 것 같은데요. 용사님들은 작은 모바일 화면에서 그 화려한 콘텐츠들을 마주하기 때문에 눈에 피로도가 쌓일 수 있다고 생각했습니다.
그래서 UI 자체는 차분하고 어두운 다크 톤과 화면 블러처리로 시각적 소음을 줄이고, 그 위에서 움직이는 캐릭터와 스킬, 픽셀 아이템들이 본래의 화려한 색감을 뽐내며 ‘주인공’으로 돋보일 수 있도록 화면의 컨셉과 구성을 완전히 재설계했다고 볼 수 있을 것 같아요.
캐릭터 선택 구버전/신버전
HUD 구버전/신버전
신버전 보스/퀘스트
Q4. 버튼 인터랙션이나 화면을 가리던 불필요한 요소들을 비워내는 과정에서도 세심한 디테일의 변화가 있었다고 들었어요.
김서방 : 예전에는 버튼을 터치하면 버튼이 확대되며 피드백을 주는 방식이 많았습니다. 그런데 모바일 기기 해상도가 다양해지고 버튼들이 오밀조밀 배치되다 보니, 버튼이 커지면서 주변 UI를 가리거나 화면 밖으로 삐져나가 잘려 보이는 문제가 발생하곤 했어요. 그래서 이번에는 버튼이 커지는 과한 연출을 빼고, 터치 시 살짝 작아지며 눌리는 현대적인 텐션감을 부여해 주변 간섭을 없앴습니다.
더불어 스킬 창에서 쓰지 않는 단축키나 불필요한 UI 텍스트들을 화면에서 숨길 수 있는 기능을 추가해, 용사님들이 플레이하실 때 오직 전장의 시야에만 온전히 집중할 수 있도록 화면의 여백을 확보했습니다.
눈에 확 띄는 변화들은 아닐 수 있지만 개선 과정에서 크고, 작게 기능적 변화들이 계속 되었다고 말씀 드리고 싶어요. 터치 영역의 확대, 스크롤의 영역 개선, 텍스트 영역 공간 확보, 전체 화면 BG의 해상도 대응과 블러처리 등등 작은 요소들까지 꼼꼼히 확인하여 전체적인 퀄리티가 올라갈 수 있도록 열심히 고민했습니다.
새로움 한 스푼 +
Q5. 톤을 어둡게 누르고 세련미를 더하는 과정에서, 메이플스토리 특유의 ‘귀엽고 아기자기한 감성’이 흐려질까 봐 고민도 깊으셨을 것 같습니다. 정체성을 지키기 위해 어떤 노력을 기울이셨나요?
김서방 : 내부에서도 UI 리뉴얼 시안을 여러 개 만들어 보고, 어두운 컨셉으로 최종 결정되면서 ‘어두운 톤으로 가면 메이플스토리M 고유의 발랄하고 귀여운 매력이 사라지지 않을까?’ 하는 고민이 정말 많았습니다.
그래서 전체적인 프레임 스킨은 차분하게 가라앉히되, 그 안에 들어가는 아이콘, 상태 표시 픽토그램, 팝업의 작은 디테일 요소들에는 메이플스토리M 특유의 아기자기하고 위트 있는 조형감을 그대로 살려내려고 노력했습니다.
예를 들어 귀여움을 유지하기 위해 버튼 모양의 양감을 강조하고자 좀 더 둥글게 구현하고, 스트로크(선, Stroke) 굵기에 대해서도 오래 고민한 것 같아요. 묵직한 다크 톤의 UI 배경 덕분에 오히려 작고 섬세하게 찍힌 도트 리소스들이 더욱 선명하고 반짝이게 돋보이는 시각적 대비를 만들어낼 수 있었습니다.
신캐릭터 생성 구버전/신버전
Q6. 새롭게 더해진 기능 중 유저 경험(UX) 측면에서 가장 자랑하고 싶은 부분은 무엇인가요?
김서방 : 앵커(Anchor) 시스템 구축을 통해, 복잡했던 햄버거 메뉴와 퀵 메뉴의 자유도를 높인 부분을 언급하고 싶어요. 우선 해상도 대응, 앵커 시스템에 대해 설명이 필요할 것 같은데요. 앵커 시스템은 쉽게 말하면 화면 크기가 바뀌더라도 UI 요소의 위치 관계를 유지하는 기준점 시스템이라고 할 수 있을 것 같습니다. 화면이 달라지더라도 유지되어야 하는 요소들을 설정하는 거죠.
기존엔 HUD에만 해상도 대응을 하고, 전체 팝업(화면)일 땐 1280*720 기준으로만 늘어나다 보니 ‘중앙 정렬’ 되는 제약이 있었는데요, 해상도가 넓은 폰들은 사방의 외곽이 뚫린 채로 화면이 나타났습니다.
메인메뉴 구버전/신버전
왼쪽부터 순서대로 안드로이드 버전 구 화면, 아이폰 버전 구 화면(96%), 현재 버전
어떤 화면 비율에서도 버튼과 정보가 화면 외곽에 안정적으로 정렬되는 바로 이 ‘앵커 시스템’을 새롭게 구축했다고 봐 주시면 좋을 것 같아요.
이를 바탕으로 우측 상단 햄버거 메뉴를 시원한 전체 화면으로 확장하고, 용사님들이 자주 찾는 메뉴를 직접 등록하는 ‘퀵 메뉴’와 일일/주간/스토리별 콘텐츠 큐레이션을 더했습니다. 용사님들이 수많은 팝업 사이에서 길을 잃지 않고, 자신이 원하는 플레이 동선을 직접 커스터마이징하며 훨씬 빠르고 쾌적하게 게임에 진입할 수 있게 변화를 주었다는 점이 가장 큰 특징일 것 같습니다.
그리고 전체 팝업(화면)일 때 다른 간섭 없이 오로지 화면에 집중할 수 있도록 하고 싶었습니다. 또한 블러 시스템이 구축되면서 단순히 어두운 톤만 있는 게 아닌 실시간 배경 컬러값을 반영하면서 그 안의 콘텐츠와 메이플스토리M의 색감이 자연스럽게 주인공이 될 수 있는 환경을 만드는 것이 이번 블러 시스템 구축으로 얻을 수 있는 가장 큰 이점이였습니다.
패러다임의 변화
Q7. 이번 대개편은 단순히 디자인 스킨만 바꾸는 작업이 아니었기에, 유관 부서와의 유기적인 호흡이 무엇보다 중요했을 것 같습니다. 협업 과정에서 기억에 남는 시너지가 있다면요?
김서방 : 그간 서비스해 오면서 방대하게 쌓인 콘텐츠들과 리뉴얼에 대한 우선 순위를 파악하고, 위에서 이야기한 새로운 시스템들을 구축해 주고 계시기 때문에 시작할 수 있고 지금 그 과정에 들어와 있는 상태인 것 같습니다.
기존 프리팹(Prefab)들을 하나하나 뜯어 고치는 방대한 수작업을 진행하는 동시에, 한국·글로벌·중국 빌드마다 조금씩 다른 기능적 차이를 조율해야 했거든요. 게다가 정기 업데이트와 라이브 이벤트 UI 대응까지 동시에 챙겨야 하는 ‘선택과 집중’의 연속이었습니다.
톤을 완전히 바꿔버리면서도 프리팹(Prefab) 조율 작업을 한다는 게, 해상도가 없던 것을 새롭게 만들고, 앵커(Anchor) 대응도 없던 것을 있게 한다는 게 여간 쉬운 일이 아니거든요. 프로그래머 분들과 끊임없이 핑퐁을 주고받으며 유니티(Unity) 엔진 기반의 새로운 앵커 툴과 해상도 대응 시스템을 함께 구축해 나갔고, 이 과정에서 서로의 기술적 이해도와 신뢰가 한 층 더 깊어지는 값진 시너지를 경험했습니다.
Q8. 치열한 과정을 거쳐 완성된 새로운 UI/UX가, 앞으로 용사님들의 메이플스토리M 여정에 어떤 ‘새로운 플레이 패러다임’으로 기억되기를 바라시나요?
김서방 : UI는 게임과 유저를 연결해주는 연결고리라고 생각합니다. 콘텐츠를 불편함 없이 이용하게 하는 UI가 좋은 UI라고 생각하지만, 참 쉽지 않은 일이라고도 생각합니다. 앞으로도 여전히 개선해 나가야 하는 과정에 있다고 느끼고, 업무 과정에서 겪는 우여곡절도 많지만 많은 분들과 함께 고민하며 열심히 하고 있어요.
이번 UI 개편은 비교적 짧은 일정 안에서 진행된 대규모 작업이었고 아직 진행 중에 있습니다. 개편 범위가 넓은 만큼 모든 내용을 처음부터 완벽하게 정리된 형태로 진행하기보다는, 개발 과정에서 필요한 사항을 지속적으로 확인하고 보완해 나가며 작업을 하고 있어요. 개발 일정과 기존 시스템 구조를 고려해야 했기 때문에, 모든 영역을 이상적인 방식으로 변경하기보다는 현재 구조를 최대한 안정적으로 유지하면서 UI 측에서 대응할 수 있는 방법을 찾는 방향으로 고민 중입니다. 우선 현재 필요한 개선을 적용하고 이후 실제 플레이 환경과 피드백을 바탕으로 지속적으로 다듬어 나가는 것이 중요하다고 생각했습니다. 그 과정에서 기존에 예상하지 못했던 요소들을 추가로 확인하거나, 실제 게임 환경에 맞춰 구현 방식을 조정해야 하는 부분들도 마주하고 있습니다.
UI 때문에 용사님들의 모험이 방해 받았다는 생각이 들지 않으셨으면 하는 생각으로 작업을 하고 있으며, 새롭게 바뀐 UI/UX와 함께 더욱 모험을 즐겨 주시면 좋을 것 같습니다. (웃음) 복잡한 조작과 화면 피로감은 내려가고, 내 캐릭터가 성장하는 쾌감과 메이플스토리M의 아름다운 그래픽에 즐거움은 올라가길 바라봅니다.
인터뷰 중이신 김서방 님
지금까지 용사님과 메이플스토리M을 이어주는 가장 선명한 연결고리인 UI/UX 디자이너 김서방 님의 인터뷰였습니다. 1픽셀(Pixel)의 디테일 뒤에는 용사님들의 시야를 가로막던 시각적 아쉬움을 덜어내고 오직 게임의 몰입감만을 남기려는 치열한 고민이 돋보인 것 같아요.
눈부시게 리뉴얼된 새로운 화면 뒤에는, 실제로 그 안에서 캐릭터가 어떻게 성장하고 어떤 규칙에 따라 모험을 이어갈지 '보이지 않는 바탕'을 완전히 새롭게 조립해 나간 또 다른 주역들이 존재합니다. 화면 전체를 다시 그리는 파격적인 도전은 눈에 보이는 '비주얼의 변화' 뿐만 아니라 다른 관점에서의 고민이 필요한데요.
이런 변화를 제안한 메이플스토리M의 기획자들이 왜 이런 고민을 하게 되었는지, 그 뒷 이야기가 궁금하지 않으신가요? 그 거대한 패러다임의 변화를 이끈 분들의 치열한 목소리는 다음 이야기에서 이어집니다.
