PUBG.OP.GG – 디자인 접근 방법

작년 11월에 OP.GG에서 배틀그라운드 전적 서비스인 PUBG.OP.GG를 출시했습니다. 서비스 시작 이후로 지금까지 꾸준히 사용자 수가 늘고 있죠. 이번 글에서는 PUBG.OP.GG 서비스 디자인의 접근 방법과 현재까지의 진행 과정에 관해 이야기하고자 합니다.

OP.GG는 한국을 기점으로 글로벌로 나아간 서비스입니다. 게임에 대한 한국인의 열정은 대단하죠. 그래서인지 PUBG.OP.GG도 한국 시장을 먼저 점유해야 한다는 생각이 강했습니다. 안타깝게도 PUBG.OP.GG는 배틀그라운드 출시보다 다소 늦게 프로젝트가 시작됐습니다. 이미 많은 전적 서비스들이 나와 있었죠. 그래서 우선 출시된 다른 서비스들을 통해 유저들의 니즈를 파악하기로 했습니다.

리서치

1. A사이트

A사이트는 한국에서 점유율이 높은 배틀그라운드 전적 서비스입니다. 핵심 페이지인 플레이어 페이지에 카드 UI를 활용하여 모든 게임 모드에 대한 스탯을 한 번에 보기 쉽게 배치했습니다. 그리고 사람들이 많이 보는 스탯인 ‘K/D’와 ‘평균 딜량’ 수치에 색상을 넣어 시각적으로 강조한 게 특징이죠.

2. B사이트

B사이트는 어두운 테마의 전적 서비스입니다. 색상 활용이 돋보이는 사이트로 SNS로 전적을 공유하기가 쉽게 되어있습니다. 사이트 내에 무기 또는 플레이어를 서로 비교하는 기능이 있는데요. 스탯 비교를 톤 다운된 색상을 통해 깔끔하고 안정적인 느낌으로 전달하고 있죠. 스탯 텍스트 대신 레이블에 색상을 넣은 것이 특징입니다.

그 이외에도 여러 가지 서비스들을 살펴보았습니다. 리서치를 통해 많은 서비스가 플레이어 페이지에 많은 공을 들이는 것을 알 수 있었습니다. 해당 페이지의 데이터 종류는 정말 많죠. 놀랍게도 유저들은 더 많은 데이터를 원했습니다. 이 많은 데이터를 어떻게 보기 쉽고 이해하기 편하도록 배치할지가 우리의 과제가 되었습니다.

디자인 접근 방법

레이아웃

PUBG.OP.GG는 OP.GG의 패밀리 사이트입니다. 기존 OP.GG의 패밀리 사이트에는 롤 전적 서비스인 op.gg, 오버워치 전적 서비스인 overwatch.op.gg, 롤 esports 서비스인 best.gg가 있죠. 해당 서비스들의 전적 페이지를 보면 화면 좌측에는 플레이어의 전반적인 게임 성향 및 동향을 볼 수 있는 데이터가 요약본으로 들어가고, 우측에는 매 게임에 대한 자세한 데이터가 들어가는 레이아웃으로 구성되어 있습니다.

여기서 우리는 서비스를 사용할 유저들을 예상해봤습니다. 롤 커뮤니티를 보면 배틀그라운드에 대한 흥미가 상당히 높았습니다. 그리고 배틀그라운드는 오버워치와 같은(플레이 면에서는 다른 점이 있긴 하지만…) FPS 장르의 게임이죠. 그래서 OP.GG의 서비스를 사용하던 유저들이 배틀그라운드로 많이 유입될 것으로 가정하고, UI 친숙도를 높이기 위해 통일된 레이아웃을 가져갔습니다.

좌측에는 배틀그라운드의 게임 모드인 솔로, 듀오, 스쿼드에 대한 스탯을 세로로 배치했습니다. 모드별 게임 스탯은 플레이어의 게임 트렌드를 보여주는 가장 기본이 되는 지표이기 때문이죠. 어떤 모드를 더 많이 플레이했는지에 따라 플레이 성향을 알 수 있고, 디테일한 스탯을 통해 어떤 모드에서 개인적인 능력이 뛰어난지 알 수 있습니다.

데이터

기존 배틀그라운드 전적 서비스들은 API에서 주는 데이터를 텍스트 형식 그대로 보여줬습니다. 처음 사용하는 유저들은 전적을 펼쳐보았을 때 수 많은 데이터 중 어떤 것을 먼저 봐야 하는지 알기 어렵겠죠. 배틀그라운드처럼 출시한 지 얼마 안 된 게임이라면 더욱 혼란스러워할 것입니다.

그래서 우리는 유저들이 원하는 데이터를 보기 쉽게 정리했습니다. 커뮤니티 혹은 인게임에서 많이 회자 되는 키워드를 중심으로 중요한 데이터를 추려내어 게임 모드별로 보여주었습니다. 그리고 추려낸 핵심 데이터의 텍스트에 붉은색(매우 잘하는) – 주황색(잘하는) – 회색(보통) 순의 3단계의 기준을 두어 어느 능력치가 뛰어난지 쉽게 구별할 수 있도록 했습니다.

등급

전적 서비스를 사용하는 유저들은 자신의 실력이 어느 정도 되는지, 실력을 향상하려면 어떻게 해야 하는지 항상 궁금해합니다. 관련 커뮤니티에 자주 올라오는 단골 주제죠. 우리는 이러한 유저들의 니즈를 충족시키기 위해 PUBG.OP.GG만의 ‘티어(등급)’를 만들었습니다.

배틀그라운드의 기본 레이팅은 ‘점수’와 같은 개념으로 플레이어들의 실력을 얘기할 때 자주 언급되는 지표이긴 하나 숫자보다는 좀 더 와닿는 무언가가 필요하다고 생각했습니다. 그래서 성적 개념인 S,A,B,C… 의 알파벳 등급을 활용하여 PUBG.OP.GG만의 티어를 만들었습니다. 글로벌 유저들을 고려하면 전 세계적으로 통하는 개념이 필요했고, 성적 등급이 가장 적합하다고 생각했습니다.

배틀그라운드의 기본 레이팅과는 달리 PUBG.OP.GG의 티어에는 여러 데이터가 함축되어 있습니다. 최소 10경기를 플레이하면 레이팅 및 게임 내 퍼포먼스를 측정할 수 있는 데이터를 산출하여 종합 등급으로 보여주고 있죠. 배틀그라운드의 레이팅은 게임을 플레이할 때마다 웬만하면 점수가 떨어지지 않는 구조로 되어있어 ‘실력’ 지표로서는 다소 부족한 부분이 있었습니다. 이 부분에 대한 유저의 니즈를 충족시키고자 독자적인 티어를 만들게 되었습니다.

색상

배틀그라운드 전적 서비스는 다른 게임 서비스들보다 숫자와 텍스트가 많습니다. 게임 한 판에 100명이 들어갈 수 있으니까요…! 아이디만 적어도 100줄이 넘습니다. 게임 한 판에 얻을 수 있는 데이터양도 막대하죠. 그래서 최대한 아이콘이나 색상을 활용할 수 있는 부분은 텍스트를 간소화하여 디자인하기로 했습니다.

배틀그라운드 게임 내에서 가장 상위 분류개념에는 게임 모드가 있습니다. 현재까지는 솔로, 듀오, 스쿼드, 솔로 FPP, 듀오 FPP, 스쿼드 FPP 이렇게 6가지 게임 모드가 존재합니다. 이후에 게임 업데이트에 따라 게임 모드가 늘어날 확률도 높죠. 게임 모드는 전적 페이지에서 가장 많이 사용될 중요 UI입니다. 따라서 확실하게 구분되는 색상과 아이콘을 통해 게임 모드를 분리했습니다.

게임 결과에 대해서도 3가지의 분류가 있습니다. 바로 1등, 즉 ‘승리’와 ‘TOP 10’, ‘그 외 등수’를 의미하죠. OP.GG의 전적 서비스에는 타임라인의 background에 색상을 넣어 게임의 결과를 명확하게 보여주는 디자인을 꾸준히 사용하고 있습니다. 플레이어라면 최근 자신의 전반적인 게임 기록에 대해 가장 궁금해하겠죠. (혹은 다른 플레이어일 수도 있고요) 실제로 커뮤니티에서 OP.GG의 전적 스크린샷과 함께 ‘전적이 빨갛다’라는 의미의 글을 올리면 ‘패한 게임이 많다’라고 바로 인지가 되는 경우가 많습니다. PUBG.OP.GG에서도 이 공식(?)을 활용하여 각 게임의 결과에 background 색상을 지정했습니다. 솔로, 듀오, 스쿼드에 적용된 색상과 구분되면서도 텍스트를 해치지 않을 정도의 명도를 가진 색상으로 말이죠.

고유 색상을 가진 카테고리가 6개 정도로 나누어지니 한 페이지에서 보이는 색상 종류가 다소 많았습니다. 그래서 전반적인 톤을 수정하고 색상끼리 잘 어울릴 수 있도록 조정하는 작업이 오래 걸렸었죠. 전체적으로 톤을 다운시키니 배틀그라운드 게임의 look&feel과도 어느 정도 조화를 이루게 되었습니다.

피드백

PUBG.OP.GG가 출시되고 많은 유저 피드백이 들어왔습니다. 그리고 디자인에 대한 피드백도 들어왔죠. 블루홀 쪽에서 받은 데이터로 다양한 컨텐츠를 만들게 되어 서비스에 대한 긍정적인 반응들이 있었지만, 디자인적으로 부정적인 의견들이 많았습니다. (T. T) 이러한 피드백까지 경청해서 더 많은 유저들이 공감할 수 있는 좋은 서비스를 만들어야겠죠. 디자인 피드백들은 하나의 공통적인 의견을 가지고 있었습니다. 바로…

“가독성이 좋지 않다.”

비슷한 사이트인 ‘A사이트’를 언급하며 가독성이 좋지 않다는 이야기를 들었습니다. 우리는 가독성에 대해 생각해 보았습니다. 가독성은 얼마나 쉽게 읽을 수 있는지에 대한 정도를 뜻하는 말이죠. 유저들은 어떤 의미에서 타 서비스가 가독성이 더 좋다고 한 것일까요?

레이아웃

유저들은 타 서비스인 ‘A사이트’의 게임 모드별 데이터 레이아웃이 가로 형태인 것을 언급했습니다. PUBG.OP.GG는 게임 모드별 데이터를 세로 형태로 보여주고 있었죠.

이 피드백을 통해 서비스를 만들 때 세웠던 우리의 가정에 문제가 있다는 것을 깨달았습니다. 바로 롤과 오버워치를 하는 유저들 대다수가 배틀그라운드를 플레이할 것이라는 점이죠. 롤과 오버워치와 배틀그라운드는 각각의 고유한 특징을 가지고 있습니다. 서로 맥락은 비슷하지만, 핵심은 다르죠. 따라서 각 게임에 적합한 데이터 형식이나 레이아웃이 필요했습니다. 롤은 출시한 지 오래되어 어느 정도 자리를 잡았기 때문에 유저들은 데이터를 보고 생각하고 분석하는 환경에 익숙합니다. 여러 롤 전적 서비스들을 살펴보면 레이아웃 또한 분석에 최적화된 구조로 정형화되어있습니다. 반면에 배그는 이제 막 출시한 게임입니다. 유저들이 어떤 데이터를 원하는지 전적 서비스를 만드는 입장에서도 100% 명확하지 않죠. 하지만 이미 출시된 서비스들을 보면 게임 모드별 데이터가 가장 부각되어 있고, 유저들에게 중요하게 다가가는 데이터라는 점을 유추할 수 있습니다.

레이아웃에 대한 이슈는 기존 유저들의 경험보다 ‘OP.GG의 전적 서비스’라는 점을 더 중요하게 생각하여 간과된 부분입니다. 우리가 가장 자신 있는 매 게임의 전적 데이터를 화면에 더 많이 보여줄 수 있기 때문에 세로 레이아웃을 채택한 이유도 있었지만, 게임마다 유저가 가지고 있는 사고방식과 경험이 다르다는 점을 놓쳤던 것이죠.

데이터

A사이트는 특정 데이터, 즉 ‘K/D’와 ‘평균 딜량’을 제외한 나머지 데이터들의 텍스트 색상이 한 색상으로만 이루어져 있습니다. 수많은 데이터 중 위 2가지 데이터에 시각을 집중시키는 효과가 있죠. 유저들에게 ‘K/D’와 ‘평균 딜량’이 가장 중요한 수치이고, 플레이어의 능력을 판단하기에 근거가 충분한 데이터라고 인식시켜 줍니다. 그리고 나머지 데이터는 특정 색상 없이 나열했습니다.

우리는 각 데이터의 수치에 대해 플레이어가 얼마나 잘하는지 알고 싶다고 생각했습니다. 그래서 각각 데이터의 텍스트에 붉은색(매우 잘하는) – 주황색(잘하는) – 회색(보통) 순의 3단계의 기준을 두어 어느 능력치가 뛰어난지 쉽게 구별할 수 있도록 했죠. 이 점이 유저들에게 혼란을 주었습니다. 예를 들어, 한 유저에게 ‘최다 킬’은 중요한 데이터가 아닙니다. 하지만 그 유저의 ‘최다 킬’ 수치가 높다면 붉은색으로 표기되어 강조되겠죠. 이러한 상황은 데이터의 의미에 대해 혼란의 여지를 줄 수도 있습니다. ‘최다 킬’이 의미하는 정도가 서비스 제공자 입장과 유저의 입장에서 차이가 날 수 있는 것이죠. 또한, 잘하는 유저들의 페이지에는 모든 데이터가 붉은색으로 표기됩니다. 이론상 맞는 상황이지만 주변 환경보다 너무 부각되어 시선을 지나치게 집중시킬 여지가 있고, 어떤 데이터를 먼저 봐야 하는지 그 순서가 명확하게 보이지 않습니다.

배틀그라운드는 아직 서비스한 지 오래되지 않았습니다. 전적 서비스를 제공하는 입장에서 가장 쉽게 데이터를 파악할 수 있는 환경을 제공해야 하죠. 추려낸 9개의 데이터 중에서도 어떤 데이터가 더 중요한지 명확한 우선순위가 필요했습니다.

수정

우리는 위와 같은 피드백을 통해 전적 페이지를 개선하기로 했습니다. 배틀그라운드 전적 서비스를 이용하는 기존 유저들에게 친숙한 레이아웃을 사용하고, 데이터의 우선순위를 보다 명확하게 하기로 했죠.

우선 좌측에 있던 게임 모드별 데이터를 상단으로 배치했습니다. 유저들이 전적 페이지에 들어왔을 때 가장 먼저 보이기를 기대하는 정보이죠. 카드 UI 안에는 ‘K/D’와 ‘경기 당 데미지’를 다른 데이터들보다 크게 표기했습니다. 여러 데이터 안에서도 해당 2가지의 데이터가 플레이어의 실력을 판단하기에 의미 있는 지표이기 때문입니다. 데이터에 따른 ‘빨강-주황-회색’의 단계 표시도 ‘K/D’와 ‘경기 당 데미지’에만 적용됩니다. 해당 데이터를 더 부각하기 위한 장치이기도 하며 나머지 데이터들을 보는 데 시각적으로 지장이 없기 위함입니다.

기존에 상단에 있던 최근 20게임에 대한 정보들은 좌측에 배치됩니다. 좌측에 두는 것이 오른쪽에 있는 전적 로그들과 비교하면서 보기가 용이하기 때문입니다.

전체적으로 필터들은 바뀌는 데이터 바로 위에 위치하게 됩니다. 배틀그라운드 게임 특성상 게임 모드도 많고, 한 플레이어가 여러 서버를 플레이할 수도 있기 때문에 필터가 많이 존재합니다. 따라서 데이터들의 타이틀 역할로서 필터를 상단에 배치하도록 디자인했습니다.

마치며

아직 PUBG.OP.GG에는 처음에 의도했던 많은 기능이 들어가 있지 않습니다. 우리는 계속해서 더 많은 유저들이 서비스를 이용하고 좋아해 주실 수 있도록 끊임없이 고민하고 있습니다. 서비스 운영 초반에 들어오던 디자인적인 피드백도 페이지가 전반적으로 바뀐 이후로 많이 줄어들었습니다.

디자인을 개선하면서 ‘왜 이 부분을 미처 살피지 못했을까, 왜 좀 더 객관적으로 생각하지 못했을까’하는 아쉬움이 많이 들었습니다. 서비스 초반에는 새로운 기능들을 빠르게 개발하여 출시하는 것이 중요한데, 디자인 개선 때문에 개발 일정을 할애해야 된다는 점도 안타깝기도 했습니다. 결과적으로 좋은 피드백을 많이 받았지만, 서비스 디자인을 시작하기에 앞서 사전에 좀 더 많은 공부가 필요했었죠.

이미 기존에 많은 서비스가 있을 때, 디자이너로서 뭔가 다르게 보여주고 싶다는 생각을 했습니다. 레이아웃이 될 수도 있고, 색상이 될 수도 있죠. 디자인적으로 서비스만의 개성을 가져가는 것은 좋다고 생각합니다. 하지만 그 바탕에 유저의 경험이 가장 우선시되어야 한다는 점… 이번 작업을 통해 그 점을 다시 한번 상기시키게 되었습니다.

서비스 오픈 due date가 정해진 상황에서 어떻게 하면 좀 더 효율적인 시간 관리를 통해 아쉬움을 조금이나마 덜 수 있을지… 어떻게 하면 유저들의 경험을 유지한 채 서비스 본연의 디자인 look&feel을 조화롭게 맞춰나갈 수 있을지… 앞으로 더 많은 사람들이 OP.GG 서비스와 함께 게임 실력을 키워나갈 수 있기를 바라면서 글을 마칩니다.