BEST.GG – 전적 페이지 디자인

BEST.GG는 OP.GG의 패밀리사이트로 얼마 전 베타 버전을 오픈했습니다. OP.GG는 롤을 플레이하는 전 세계 모든 유저들에 대한 전적을 보는 사이트였죠. 그에 반해 BEST.GG는 과거부터 현재까지 프로 리그를 뛰고 있는 선수들과 팀에 대한 전적을 보는 사이트입니다. 여러 지표를 분석한 통계를 바탕으로 저희만의 기준을 만들어 팀 순위 및 선수 순위에 대한 데이터를 제공하고 있으며, 실제 선수들이 경기에서 사용하는 룬, 특성에 대한 데이터도 볼 수 있습니다.

 

BEST.GG는 OP.GG와 롤 전적을 제공한다는 점에서 유사하지만, 접근방법에 있어 다른 사이트입니다. 다루는 데이터의 대상이 다르기 때문이죠. 개인 유저와 프로 선수, 어떤 점들이 다를까요? 그리고 프로 선수, 팀에 대한 데이터를 다룰 때 특별히 고려해야 할 사항들은 어떠한 것들이 있는지 고민해보았습니다.

 

개인 유저와 프로 선수 전적의 다른 점

1. 게임이 단판이 아니다.

롤은 전 세계적으로 여러 리그가 존재합니다. 그래서 단판승제(Bo1), 2판(Bo2), 3판 2선승제(Bo3), 5판 3선승제(Bo5) 등 어떤 대회인지에 따라, 어느 리그인가에 따라서 한 매치의 승패에 대한 각기 다른 기준을 가지고 있습니다.

 

한 매치에 세트의 개수가 각각 다르다. 그에 따라 승패의 기준도 달라진다.

(Bo2의 경우, 각 팀이 1승씩 할 경우에 무승부가 나오기도 한다.)

 

즉, 게임 로그를 OP.GG처럼 하나의 박스로 표현할 수 없습니다. OP.GG는 위 개념으로 말하자면 Bo1의 경우만 존재하는 것이죠. BEST.GG에는 매치와 세트에 대한 개념이 존재하기 때문에 각 세트를 하나의 박스로 구성하고, 여러 세트가 모여 매치가 되는 디자인이 필요합니다.

 

2. Bo3의 한 매치에서 모든 세트를 한 선수가 플레이하지 않는다.

같은 매치여도 팀 전적 페이지와 선수 전적 페이지에서 보이는 결과가 다를 수 있습니다. 프로 경기에서는 ‘후보 선수’가 존재하기 때문에 같은 포지션에 여러 명의 선수들이 Roster에 들어갈 수 있습니다. 예를 들어, Bo3의 매치에서 1세트를 A 선수가 플레이하고, 2세트는 B 선수가, 3세트는 다시 A 선수가 플레이하는 등의 경우가 자주 있습니다.

1팀과 2팀 모두 미드 포지션에 후보 선수가 존재할 경우, 위 같은 경우가 발생할 수 있다.

 

위와 같은 로직 상에서는 A 선수의 전적 페이지에는 B 선수가 플레이한 세트의 기록이 보이지 않겠죠. B 선수의 전적 페이지에서는 A 선수가 플레이한 세트의 기록이 보여지지 않고요. 하지만 매치에 대한 결과는 똑같이 보이게 됩니다. 같은 매치 안에서 세트만 다른 경우니까요.

 

디자인 진행

프로 선수들의 전적이 개인 유저들과 크게 다른 점은 매치와 세트라는 개념의 존재입니다. 그래서 매치와 세트에 대한 승패의 확실한 구분이 필요합니다. B 선수가 두 번째 세트에서 패배했더라도 A 선수가 플레이한 1, 3세트를 승리하여 결과적으로 매치 자체는 승리할 수 있기 때문이죠. 매치와 세트의 승패 구분을 위한 디자인을 진행할 때 유의해야 할 사항들을 살펴보도록 합시다.

 

1. 매치와 세트의 승패 구분

색상으로 승패를 구분하는 방식은 OP.GG에서 통용되고 있던 규칙입니다. 색상은 가장 명확하고 쉬운 시각적 구분 방법이기 때문이죠. OP.GG처럼 각 게임의 박스 배경 색상을 통해 승패를 보여주면 간단하다고 생각하실지도 모르지만 BEST.GG에는 매치와 세트의 개념이 있었죠. 그래서 승패의 색상을 사용하되 다르게 보여주어야 했습니다.

 

1안. 매치 승패 박스에는 배경 색상을 넣고, 세트 승패 박스에는 배경 색상을 넣지 않는다.

 

첫 번째 시안은 매치를 강조하고 세트가 종속된 느낌을 살리는 디자인입니다. 기존 OP.GG와는 다른 새로운 UI로 색다른 느낌을 선사하지만, 세트의 결과가 텍스트로 이루어져 있어 시각적으로 약하게 보이는 이슈가 있습니다. 하지만 결과적으로 팀이 리그에서 승리하고 패배하는 결과는 매치의 결과로 결정됩니다. 매치를 강조한 시안은 프로 경기의 기준에 무게를 둔 결과물이라고 할 수 있죠.

 

2안. 매치 승패 박스와 세트 승패 박스 모두 배경 색상을 넣는다.

 

두 번째 시안은 박스 배경 색상을 통해 승패를 표현하는 OP.GG의 규칙을 사용하여 패밀리사이트라는 느낌이 확실합니다. 유저들이 몇 년 동안 봐왔던 UI이기 때문에 친숙하기도 하죠. 또한, 넓은 영역의 배경 색상이 존재하기 때문에 텍스트를 읽지 않아도 색상으로 인한 직관적인 인지가 가능합니다. 다만 매치와 세트의 시각적 대비가 극명하지 않기 때문에 수십 개의 전적이 나열되는 것을 생각하면 과연 구분을 쉽게 할 수 있는지가 이슈였습니다.

 

BEST.GG는 한 페이지 내에 여러 가지 데이터들을 보여주기 때문에 색상, 영역, 텍스트의 적절한 활용으로 데이터를 구분하고 인지를 쉽게 해야 합니다. 따라서 사이트에 대한 첫인상이 ‘데이터가 너무 많아 읽기 어렵다’라는 느낌을 반드시 피해야 했죠. 그래서 ‘직관적인 인지’가 가장 중요한 키워드로 부상되었습니다. ‘프로 전적 페이지’는 저희 사이트의 메인이기 때문에 위 조건들이 반드시 충족되어야 하는 공간이죠.

 

최종 디자인이 적용된 현재 사이트의 모습. 최근에 있었던 Faker 선수의 전적 +_+

 

최종적으로 두 번째 시안으로 승패를 보여주기로 했습니다. 폰트 크기 및 라벨들의 위치 조정을 통해 위와 같은 결과물이 나오게 되었죠. 두 번째 시안의 이슈였던 세트와 매치의 구분은 매치의 header 영역을 넓힘으로써 보완되었습니다. 승패에 대한 문구를 크고 넓은 공간에 배치하여 직관적인 인지도 가능하게 했습니다.

 

2. 색상의 종류

특이하게도 북미 챌린저스 리그에는 Bo2가 존재합니다. 한 매치에 2개의 세트가 존재하는 경우죠. 따라서 두 팀이 각각 1세트씩 승리할 경우 무승부로 처리됩니다. 즉, 승패 이외에 무승부에 대한 색상이 필요하다는 점을 염두에 둬야 했죠.

무승부에는 중립적인 성격을 가진 회색을 사용했습니다. 매치와 세트에 대한 구분이 확실하고, 우측에 해당 매치의 결과를 보여주는 태그를 붙여 오해의 소지가 없게끔 진행했습니다. 아래는 색상 규칙이 적용된 실제 버전입니다.

 

1. Faker 선수가 Bo3에서 1, 2, 3세트를 모두 뛰고 결과적으로 매치에 승리한 경우

 

2. Secret 선수가 Bo3에서 2세트를 뛰고 승리했지만, 결과적으로 팀이 매치에서 패배한 경우

 

3. Madlife 선수가 Bo2에서 1, 2세트 모두 뛰고, 각 팀이 한 번씩 승리하여 매치가 무승부로 끝난 경우

 

 

마치며

이번 작업을 통해 느낀 몇 가지 사항들을 정리해보았습니다.

 

1.데이터의 대상

이미 OP.GG라는 개인 유저 기반의 전적 서비스를 경험해봤기 때문에 BEST.GG를 큰 어려움 없이 진행할 수 있을 것 같았는데, 생각보다 고려해야 할 사항들이 많았습니다. 데이터를 시각화할 대상이 다르기 때문이겠죠. 동일한 게임에 대한 비슷한 데이터를 보여주는데도 대상이 다르므로 시각적 요소들이 달라져야 했고, 프로 선수들이 가진 데이터의 종류도 개인 유저일때보다 다양하므로 레이아웃 상에서 고민해야 할 부분이 많았습니다. 결과적으로 OP.GG에서 차용할 수 있는 부분들을 적극적으로 활용하고, 프로 선수들에 집중한 데이터들은 패밀리사이트라는 통일성 안에서 적절하게 변형하면서 디자인을 진행했고, 좋은 결과물이 나온 것 같습니다.

 

2.데이터에 대한 이해

작업을 시작하기 전에는 LCK를 보는 팬으로서 좋아하는 프로 선수와 팀이 있고, 롤 방송도 자주 보는 한 명의 유저였습니다. 그러나 BEST.GG는 라이트 유저부터 하드 유저까지, 롤을 즐기는 전 세계의 팬들이 쉽게 이해할 수 있는 데이터를 볼 수 있는 공간을 만들자는 취지에서 시작한 사이트입니다. 그렇기에 사이트를 방문할 모든 유저들의 입장에서 사이트를 바라보는 시각이 필요했죠.

BEST.GG는 한국 유저들만을 위한 사이트가 아닙니다. 그래서 한국 이외의 리그들은 어떤 것들이 있는지, 어떤 규칙들을 가지고 운영하는지… 기존에는 몰랐던 많은 사실을 알아야 했습니다. 예를 들어, 여태까지 LCK만 접해왔던 터라 Bo1, Bo3, Bo5 방식 이외에 Bo2가 있다는 것에 놀랐습니다. 실제로 북미 챌린저스 리그는 Bo2 방식의 매치가 존재합니다. (2016년의 유럽 리그도 Bo2를 도입했었습니다) 그리고 유럽 리그는 올해부터 중국 리그와 같은 양대 리그 방식을 채택했습니다. 10개 팀을 A, B조로 나누고 같은 그룹 안의 팀들과 2번, 다른 조의 팀들과는 1번씩 경기를 치뤄 포스트 시즌에 출전하는 팀들을 가리는 방식입니다. 위와 같은 사실들을 몰랐다면 Bo2를 위한 디자인, 그리고 팀 순위가 A, B조로 나누어져 보이는 디자인을 고려하지 않았겠죠.

리그는 BEST.GG의 데이터 조각들을 묶는 제일 큰 단위라고 볼 수 있습니다. 그래서 리그에 대한 이해가 첫 번째였습니다. 리그의 개수도 많고, 그 안의 규칙들도 다양하므로 디자인을 하기에 앞서 위와 같은 사항들을 미리 조사할 필요가 있었죠. 처음부터 모든 것을 숙지하는 것은 어렵지만, 적어도 해당 데이터를 이해하고자 하는 노력과 구조적인 접근방식을 통해 디자인 작업을 진행했습니다.

 

OP.GG는 짧은 시간에 많은 경기 로그들을 파악하고 싶어하는 유저들의 요구가 커서 height을 많이 차지하면 안 된다는 이슈가 항상 존재해왔습니다. 그러나 BEST.GG는 정규 리그를 다루기 때문에 데이터가 쌓이는 속도가 OP.GG와 다르고, 그만큼 로그 개수가 적기 때문에 OP.GG보다 height 이슈가 적어 디자인의 자유도가 높았습니다. 덕분에 이전보다 색다른 디자인을 시도해 볼 수 있었죠 ^ ^

다음에는 BEST.GG의 디자인에서 구조적인 부분에 초점을 맞춰 글을 진행해보고자 합니다. 그럼 이만…

 

 

 

 

답글 남기기

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