OP.GG App – 리뉴얼

2018년 10월 22일에 OP.GG 통합 앱이 리뉴얼되었습니다. 2018년이 끝나가는 시점에 제게 큰 프로젝트였던 통합 앱 리뉴얼을 회고하며 그 과정과 배운 점을 정리하고자 합니다.

왜 리뉴얼인가

OP.GG는 서비스 트래픽의 70%가 PC 사용자입니다. 그래서 모바일은 PC보다 작업의 우선순위 또는 중요도가 낮았습니다. 모바일은 주로 웹의 정보를 작은 화면에 최대한 끼워 맞춘 형식으로 운영되었습니다. 앱 환경에 맞는 UX 및 구성에 대해서 생각할 수 있는 여유가 없었죠.

하지만 모바일 시대에서 OP.GG가 진정으로 게이머의 삶에 녹아들기 위해서는 앱에 대한 연구가 필요한 시점이었습니다. 그리고 여러 개발자와 디자이너의 손을 거쳐 간 프로젝트에는 불필요한 리소스 정리도 필요했죠. 2018년 7월, 우리는 모바일 팀을 만들었고 OP.GG 통합 앱 리뉴얼 프로젝트를 시작했습니다.

우리의 목표

모바일 팀은 기획자 1명, 디자이너 1명, 안드로이드 개발자 1명, iOS 개발자 1명으로 구성된 팀입니다. 당시 개발팀의 상황이 서버 개발자가 모바일 앱을 위해서 추가적인 API 등에 대해서 지원해줄 수 있는 리소스가 부족한 상황이었습니다. 그래서 우리는 서버 개발자가 없는 상황을 고려하여 목표를 설정했습니다. 여러 번의 회의와 피드백을 거쳐 우리의 목표는 2가지로 좁혀졌습니다. 안정화와 모바일 트래픽을 늘리기. 플레이어가 중심이 되는 개인화 서비스는 OP.GG의 큰 목표 중 하나입니다. 그래서 이번에 앱을 리뉴얼 하면서 개인화에 대한 기능을 넣어 모바일 트래픽 유도를 이끌 수 있도록 노력했습니다.

디자이너로서 어떻게 해결했는가

1. 확장성

기존 통합 앱은 게임마다 독자적인 레이아웃과 구성을 가져가는 형식이었고, OP.GG의 정체성보다 게임의 비주얼을 최대한 보여주고자 했습니다. 초반에 트래픽이 없을 경우를 대비하여 공식 서비스처럼 보이기 위함도 있었죠.

하지만 앞으로 OP.GG에는 더 많은 게임이 지속해서 추가될 것입니다. 현재는 롤, 배틀그라운드, 오버워치 3가지 게임밖에 없지만, 전적 서비스 플랫폼을 만들기 위해서는 앞으로 게임이 추가되는 속도가 더 빨라져야겠죠. 따라서 게임에 우선 종속되는 전적 서비스가 아닌 OP.GG의 전적 서비스라는 인식이 필요했습니다.

그래서 우리는 OP.GG만의 템플릿을 만들고자 했습니다. 3rd party 특성상 게임에 받는 영향이 있을 수밖에 없기 때문에 업데이트에 따라 UI가 변경될 수 있는 부분을 최소화하고자 했으며, 이후에 다른 게임이 들어와도 이미 만들어진 구조에 맞게 들어갈 수 있도록 화면을 설계했습니다.

2. 효율성

기존에는 게임의 아이덴티티를 최대한 보여주고자 했던 방향 때문에 서비스에 이용되는 색상 값이 자주 바뀌기도 하고, 추가되기도 했었습니다. 하지만 앞으로 게임이 더 추가될 상황과 OP.GG 서비스의 정체성을 고려해 봤을 때, 우리만의 색상 체계를 가져가야 할 필요성을 느꼈죠. 따라서 각 게임에 적용될 수 있는 색상 값을 미리 정리하여 적용했습니다.

게임과 관련된 서비스의 특성상 어두운 환경이 익숙한 게이머들은 OP.GG에 다크모드에 대한 니즈가 꾸준했습니다. 색상 체계를 미리 만들어 놓는다면 이후에 다크모드 같은 기능들을 쉽게 적용할 수 있겠죠. 또한 OP.GG는 수치에 민감한 서비스이기 때문에 각 게임의 각 수치에 따른 색상을 정리하여 개발자분들께 전달했습니다. 한 아트보드에 정리하면 보기도 쉽고 관리하기에도 편리하죠.

기존 통합 앱에서는 같은 기능을 가진 아이콘이어도 그 형태가 가지각색이었습니다. 예를 들어 전적을 펼치는 화살표 아이콘은 같은 기능을 가지고 있었지만, 그 형태가 게임마다 달랐죠. 따라서 공통으로 들어가는 아이콘을 정의하고 통일했습니다. 그리고 게임마다 들어갈 수 있는 아이콘들도 정리하여 개발자분들에게 전달했습니다.

3. 하나의 앱에서 동일한 경험

OP.GG 통합 앱은 전적을 위한 서비스입니다. 하지만 각 게임에 따라 같은 기능이라도 아이콘의 형태 혹은 UX가 다르게 들어가는 부분이 많았죠. 게임마다 각각의 앱이 아닌 통합된 하나의 앱이기 때문에 이런 부분이 개선돼야 할 필요가 있다고 생각했습니다. 따라서 게임마다 다르게 적용된 부분들을 정리하고 통일했습니다.

여기 게임별 전적 화면이 있습니다. 기존에는 전체적인 톤이나 화면 구조, UX가 각자 다르게 작동하고 있었죠. 예를 들어, 게임마다 랭크(티어)라는 것이 존재합니다. 롤은 게임 모드별로 화살표를 클릭하여 랭크를 확인할 수 있었고, 배틀그라운드는 반원형의 그래프와 함께 랭크 점수, 그리고 8가지 항목에 대한 데이터를 볼 수 있었습니다. 오버워치는 랭크와 함께 플레이 비중에 따른 역할 군 분포를 보여주고 있죠. 가장 중요한 화면인 전적 페이지에서조차도 어떤 데이터가 메인인지 모호한 구조였습니다.

우리는 앞으로 추가될 게임들과 효율적인 리소스 관리를 고려하여 새로운 화면 구조를 만들었습니다. 상단 프로필 영역과 화면 전체를 아우르는 필터, 각 게임에 맞는 랭크 카드와 전적 순으로 화면을 구성했습니다. 게임에 필요한 필터가 2가지라면 롤처럼 화면을 그리면 되고, 필터가 1가지라면 배틀그라운드처럼 화면을 만들 수 있습니다. 게임에 랭크 카드가 1가지만 필요하다면 오버워치의 화면을 차용할 수 있겠죠.

전적 화면의 가장 메인 기능인 전적 리스트는 각 게임에 맞는 레이아웃을 가져가되, 큰 틀은 공통으로 가져갑니다. 좌측에는 게임 혹은 데이터에 대한 결과의 값을 배경 색상과 함께 보여줍니다. 우측에는 게임 혹은 데이터에 대한 부수적인 정보들을 나열합니다. 그 이외의 화면 구성은 각 게임에 맞게 유연하게 가져갑니다.

전적 디테일 화면도 같은 규칙을 따라갑니다. 상단에는 공통된 App bar가 들어가고, 하위에 탭 형식의 UI가 위치합니다. 각 게임에 맞는 데이터를 보여주기 위해 하위 레이아웃 구성은 다를 수 있지만, 전체적인 무드는 동일하게 가져가고자 했습니다.

마치며

OP.GG의 앱은 하나지만 사실상 들어가는 게임의 개수를 따지면 앱 3개 정도를 동시에 운영하는 상황이었습니다. 심지어 각 게임은 1주 혹은 2주 정도의 기간에 따라 패치를 진행하죠. 어떨 때에는 서버의 구조가 왕창 변경돼야 할 시점도 있었습니다. 따라서 디자이너로서 앞으로의 모바일 앱 운영과 리소스 측면에서 효율적인 방안을 추구할 수 있도록 노력했습니다.

하지만 지금에 와서 돌이켜보니 그 당시에 너무 ‘우리’에 집중해서 생각한 것이 아닐까 싶습니다. 결국 앱을 사용하는 사람은 사용자입니다. 앱을 출시한 후 2달여 동안 피드백을 받아본 결과, 다운로드 수도 많이 늘었고, 좋은 리뷰도 많이 받았습니다. 하지만 놓치고 간 부분들이 분명 있었죠. 예를 들어, 통일성과 간결함을 우선시하여 게임에 공통으로 들어가는 정보들이 아니면 그 중요도를 간과했었습니다. 롤을 예시로 보면, ‘최근 20게임 분석’과 ‘분당 CS’, ‘KDA 표시’에 대한 복구를 요청하는 피드백을 많이 받았습니다. 출시한 후 1달 동안 이런 부분들에 대해 빠르게 반영했고, 결과적으로 좋은 피드백도 받았습니다. 피드백에 대한 빠른 대응은 OP.GG의 장점 중 하나이죠.

그동안 쌓여왔던 정리되지 않는 구조와 리소스를 생각해보면 ‘우리’에 대해 한 번 집중해야 할 시점이 필요하긴 했지만 유저와 우리 사이에 그 비중이 적절하게 고려되었는지에 대해서 아쉬운 부분이 많습니다.

예전에 디자인 팀에서 우리가 디자이너로서 가야 할 방향에 관해서 이야기한 적이 있습니다. 그중에서 가장 기억에 남는 말은 ‘게임 사용자로서의 나와 OP.GG를 만드는 디자이너로서의 나’를 구분하여 생각할 줄 알아야 한다는 것입니다. 그 경계에 대해서 다시금 생각해봐야 할 시점인 것 같습니다.