OP.GG App – 홈 화면 개선

OP.GG는 웹으로 처음 시작한 서비스입니다. 처음에는 리소스가 부족해서 웹뷰로 보여주는 앱을 런칭했었습니다. 하지만 모바일 시대가 도래하면서 모바일에서의 사용자 경험이 중요시되는 환경이 조성되었고, 앱을 활용한 효율적인 마케팅 방안들이 생기면서 앱의 필요성이 대두되었습니다.

 

OP.GG = 게임 전적 서비스

OP.GG는 유저가 게임을 플레이하고 있을 때 가장 활발한 서비스입니다. 인게임에 대한 정보들을 확인하거나, 게임에 필요한 빌드를 확인하기 위함이죠. 게임은 PC에서 이루어지기 때문에 웹을 사용하는 행동이 자연스럽게 이어지게 됩니다. 그래서 OP.GG는 줄곧 모바일 사용자보다 웹 사용자가 훨씬 많았습니다. 하지만 계속 웹에만 집중한다면, 게임을 플레이하지 않는 나머지 시간대에서 유저와 상호작용할 수 있는 연결고리가 전혀 없게 되죠. 서비스는 유저들의 라이프 스타일에 녹아들어 자연스럽게 생활의 한 부분으로 자리 잡아야 합니다. 즉, OP.GG는 웹과 모바일 환경 모두에서 게임과 연관된 경험을 선사해야 하죠. 그래서 OP.GG 앱의 사용성을 높이기 위해 점차 개선작업을 진행하기로 했습니다. 올해 여름에는 ‘OP.GG = 게임 전적 서비스’라는 명확한 지향점이 설정되면서 여러 전적 서비스가 하나의 앱에 통합되면서 큰 변화가 있었죠. 이번 글에서는 앱의 얼굴이 되는 홈 화면을 중심으로 이야기하고자 합니다.

 

분석

개선을 하기 위해서 먼저 기존 화면을 살펴보겠습니다.

기존 OP.GG – LoL 홈 화면

기존 모바일 앱의 홈 화면은 OP.GG 뉴스였습니다. 에디터분들이 OP.GG만의 컨텐츠로 기사를 만드시고, 각종 대회나 패치에 관한 소식들을 전하는 공간이였습니다. 위의 검색창을 클릭하면 최근 검색과 즐겨찾기 리스트가 간단하게 보이게 됩니다. 하지만 올해 초에 해당 탭이 없어지게 되었고, 위 이미지의 오른쪽 화면인 즐겨찾기와 최근 검색 리스트를 보여주는 형식만 남게 되었습니다.

이 화면은 유저가 무엇을 할 수 있는지 상당히 명확하게 보여주고 있습니다. 하지만 앱의 첫 화면이고, OP.GG의 가장 핵심 기능인 전적 화면으로 넘어가는 절차 중 하나이지만 그에 대한 충분한 clue가 제공되지 않아 그 역할을 충분히 수행하고 있지 못했죠. 또한, 서비스의 정체성을 보여주는 게임적인 요소가 부족합니다.

 

OP.GG의 모바일 사용자는 아침 시간대에 가장 많습니다. 저녁에 게임을 플레이하고, 다음 날 친구들과 자신의 전적에 관해 이야기할 때 많이 사용하기 때문이죠. 즉, 게임을 플레이하는 도중에 OP.GG를 사용하는 유저들은 인게임 정보 기능을 통해 다른 사람들의 전적을 확인하는 데 반해 게임 외의 시간에 OP.GG를 이용하는 유저들은 자신의 전적을 확인하기 위해 사용합니다. 그래서 위의 문제점들을 해결하면서 사용자 ‘개인’에 초점을 맞추어 디자인을 개선하기로 했습니다.

 

개인화된 홈 화면

자신의 전적을 자주 확인하는 모바일 유저들의 편의성을 위해 개인화된 정보를 압축해서 보여주기로 했습니다. 또한, 기존 화면에 있던 즐겨찾기와 최근 검색은 전적 서비스의 중요한 요소인 ‘검색’을 편리하게 해주기 때문에 유지하기로 했습니다.

개선된 OP.GG – LoL 홈 화면

유저의 정보를 카드 형식의 레이아웃 안에 간단하게 보여줍니다. 상단에 놓이는 카드는 유저가 가장 관심 있어 하고 보고 싶어 하는 카드로 추가적인 정보들과 함께 아이콘이나 그래프를 활용한 시각적인 요소들을 통해 강조되어 보입니다. 그 아래로 좀 더 단순한 카드들이 위치하게 됩니다. 각 카드를 클릭하면 전적 페이지로 이동합니다. 스크롤을 통해 즐겨찾기 한 유저들의 랭크를 간단하게 비교할 수 있습니다. 스크롤을 가장 하단으로 내리면 또 다른 즐겨찾기 카드를 추가할 수 있습니다.

 

게임의 분리

앱이 모든 게임의 전적 서비스를 통합하는 버전으로 리뉴얼되면서 각 게임의 요소를 명확하게 보여줄 필요가 있었습니다. 하나의 앱 안에서 여러 개의 홈 화면이 생겨나기 때문에 지금 내가 보고 있는 화면이 어떤 게임의 화면인지 명확하게 구분되어야 했죠.

통합된 OP.GG – Overwatch 홈 화면

우선 상단에 게임 아이콘과 함께 게임의 이름을 보여줍니다. 그리고 이 화면이 어떤 게임의 OP.GG 홈 인지 명시해주죠. 어떤 게임이든 상단에 보이는 카드는 게임이 가지고 있는 고유 색상과 함께 강조되어 보입니다. 게임마다 데이터가 다르기 때문에 카드에 들어가는 내용은 각 게임에 맞게 설정됩니다. 하지만 즐겨찾기를 하고, 검색하는 공통적인 액션에 대한 UX는 동일하게 가져갑니다.

 

통합된 OP.GG – BATTLEGROUNDS 홈 화면

곧 추가될 배틀그라운드 화면도 통합 앱의 규칙에 맞게 들어갈 예정이니 기대해주세요!

 

공통 화면

통합 앱으로 개편되면서 모든 홈 화면에 공통으로 들어가는 버튼이 생겼습니다. 게임을 변경하는 버튼과 계정에 관한 아이콘이죠.

OP.GG LoL – 게임 변경하기

게임을 변경하는 버튼은 왼쪽 위에 위치합니다. 누르면 현재 서비스하고 있는 게임들의 목록과 곧 추가될 게임이 보이죠. 또한, 유저가 각 게임의 홈 화면에서 가장 상단에 배치한 카드에 대한 정보들이 간단하게 보입니다. 계속해서 게임이 늘어나고 자신의 아이디가 각 게임 카드에 채워진다면 이 화면은 유저 개인에 대한 종합적인 게임 프로필을 볼 수 있는 화면이 되겠죠.

 

OP.GG LoL – 계정

오른쪽 위에는 계정과 관련한 정보들을 볼 수 있는 버튼이 위치합니다. OP.GG가 서비스하는 게임은 여러 개지만 통합된 계정 관리가 필요하기 때문에 상단에 배치했습니다. 결과적으로 홈 화면의 상단은 OP.GG 전체 서비스를 아우르는 게이트 역할을 한다고 볼 수 있죠.

전체적으로 OP.GG는 아래 이미지와 같은 구조를 가지게 되었습니다.

 

 

마치며

홈 화면 개선은 올여름부터 가을까지 진행된 작업이었습니다. 롤만 서비스하던 OP.GG가 이제 가속도를 붙여 여러 게임을 다룰 예정이었고, 앱에서도 자연스럽게 여러 게임이 붙게 되었죠. 어떤 게임이 추가될지는 예상할 수 없습니다. 그래서 각 게임을 넣을 때 색상과 레이아웃을 신중하게 고려해야 하죠. 이번 개선을 통해 좋은 피드백을 많이 받게 되었습니다. 부족했던 개인화 부분을 조금이나마 채울 수 있게 되었죠. 내부적으로도 개인화된 세부적인 데이터에 대한 개발을 진행 중이기 때문에 앞으로 강화될 기능 중 하나가 될 것입니다. 지속해서 발전해가는 OP.GG에 많은 관심 부탁드립니다 ^^/

 

OP.GG 앱을 다운받아보세요!

Android: https://play.google.com/store/apps/details?id=gg.op.lol.android

iOS: https://itunes.apple.com/us/app/op-gg/id605722237?mt=8

 

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.