최근 20게임 overview 개편

모스트 챔피언 및 포지션 정보 추가

OP.GG의 가장 중요한 기능을 담당하고 있는 전적검색 페이지에서 최근 20게임 overview에 대한 디자인이 변경되었습니다. 기존에는 승률 및 KDA에 관련된 정보만 제공하고 있었죠. 그러나 롤에 대한 데이터들이 점차 고도화되면서, 유저들은 최근 전적에 대한 보다 다양한 통계를 원하고 있습니다. 최근 20게임에 대한 데이터 개편의 필요성을 느낀 저희는 리뉴얼 작업을 진행하기로 했습니다. 어떠한 과정을 거쳐 디자인이 바뀌었는지 여러분께 공유하고자 합니다.

챔피언 및 포지션 정보의 필요성

OP.GG 유저들은 롤을 플레이하는 데 도움을 얻기 위해, 또는 전적에 대한 데이터들을 쉽고 명확하게 보기 위해 사이트에 접속합니다. 현재 전적검색 페이지에는 승률과 KDA에 대한 정보만 있어서 게임에 대한 전체적인 통계를 보기에는 부족했었죠.

게임과 관련된 정보

• 승률
• KDA (+킬 관여율)
• 모스트 챔피언
• 모스트 포지션
• CS
• 골드
• 가한 피해량/받은 피해량

여러 정보 가운데 포지션에 구애받지 않고 독립적인 성격을 가진 데이터들을 추려서 보여주기로 했습니다. 승률, KDA, 모스트 챔피언, 모스트 포지션이 가장 적합한 데이터로 선택되었습니다. 기존 OP.GG에는 없었던 모스트 챔피언, 포지션에 대한 정보는 타 사이트에서도 필수적으로 보이는 요소로 중요도가 상승한 지표이기도 하죠.

사실 모스트 포지션은 라이엇에서 제공해주는 데이터가 있습니다. 그러나 한 게임에 정글러가 3명으로 잡히는 등 정확도가 높지 않다는 것이 이슈였습니다. 그래서 이번에 저희만의 기준을 만들었습니다. 개발자분들과 기획자분들의 노고 끝에 게임별 포지션 정확도를 99%까지 끌어올리게 되었죠. 다음에 개발자분께서 포지션을 결정하는 기준과 자세한 수치들에 대한 글을 써주실 예정이니 기대해주세요!

데이터를 어느 정도의 범위까지 보여줄 것인가?

모스트 챔피언

개인의 챔프 폭에 따라 개수가 다르겠지만, 일상적인 대화에서 자신의 모스트 챔피언에 관해 이야기한다고 가정해보면 평균적으로 2-3개 정도의 챔피언을 손꼽을 수 있겠죠. 전적검색 페이지에는 챔피언과 관련된 세밀한 수치들을 볼 수 있는 페이지가 이미 존재하기 때문에 3개 정도의 챔피언만 보여주어도 유저들의 요구를 충족할 수 있다고 생각했습니다.

모스트 포지션

현재 랭크게임에서는 자신이 원하는 2가지 포지션을 미리 선택해서 입장할 수 있게 되어있습니다. 종종 탑, 정글, 미드, 원딜, 서포터 이외에 ‘상관없음’이라는 랜덤 옵션을 선택하여 게임을 시작하는 경우도 있습니다. 하지만  2가지의 포지션을 선택할 수 있는 인게임의 선택지에 중점을 두어 포지션 정보를 최대 2개까지 보여주기로 했습니다.

모든 정보들을 제공할 필요는 없습니다. 유저들은 적정한 양의 정보들이 제공되는 환경 속에서 더욱 쉽고 자유롭게 자신이 원하는 정보를 얻을 수 있으니까요.

디자인 진행 과정

포지션 표시 방법

1. 그래프

포지션에 대한 데이터를 그래프로 표현하니 텍스트로 보여줘야 할 항목들의 공간이 부족했습니다. 또한, 여러 데이터를 효율적으로 비교할 수 있는 막대 그래프의 특성상 2-3개 정도의 데이터를 비교하기 위해 사용하는 것은 적절하지 않다고 생각했습니다.

2. 아이콘

그래서 그래프 대신에 인게임에서 활용되고 있는 아이콘으로 포지션 정보를 보여주기로 했습니다. 포지션 정보 영역의 가로 길이가 넓어지면서 모스트 챔피언의 디테일한 KDA는 생략하게 되었지만, 모스트 포지션의 주요 정보들을 숨김없이 보여줄 수 있게 되었죠. 이로써 승률과 KDA, 모스트 포지션, 모스트 챔피언에 대한 정보들의 공간 분리가 가능해지게 됐습니다.

데이터에 따른 case 정리

• 모스트 챔피언 3개 + 모스트 포지션 2가지

• 모스트 챔피언 1개 + 모스트 포지션 1가지

• 모스트 챔피언 없음 + 모스트 포지션 없음

case들을 정리하면서 가장 우선시됐던 사항은 다양한 유저들의 전적 페이지를 자유롭게 넘나드는 flow에서 디자인이 어색하지 않게끔 보이는 것이었습니다.

130개가 넘는 많은 챔피언을 보유한 롤에서 최근 20게임 내에 1~2개의 챔피언만 사용한 경우는 드물겠지만, ‘장인’이라는 타이틀이 존재하는 게임 세계에서 충분히 나올 수 있는 경우죠. 그래서 기존에 롤에서 사용되고 있는 ‘챔피언’ 아이콘과 적절한 문구를 표기했습니다.

모스트 포지션의 경우, ‘칼바람 나락’ 또는 ‘뒤틀린 숲’ 등 포지션이 존재하지 않는 게임 타입들이 존재하기 때문에 유저가 최근 20게임 동안 해당 타입의 게임들만 플레이했을 경우에는 포지션 정보를 보여줄 수 없게 됩니다. 그리고 포지션 2가지를 선택하여 시작되는 랭크게임의 특성상 포지션 정보는 2가지로 보이는 것이 대다수겠죠. 보이는 가짓수를 최대 2가지로 잡았지만, 좌측의 챔피언 정보들과의 균형을 생각하면 포지션 정보는 가짓수가 줄어듦에 따라 보이지 않게끔 하는 것이 시각적으로 더 보기 편하다고 생각했습니다.

마치며

이번 작업을 진행하면서 가장 고민했던 부분은 ‘유저들에게 모든 정보를 제공해야 하는가’ 였습니다. 이미 저희 사이트에는 많은 데이터가 존재합니다. 롤 자체에 챔피언 개수가 130개가 넘고, 포지션은 5가지이며 스킬 및 아이템 등 여러 가지 요소들이 존재하기 때문입니다.

최근 전적 페이지는 유저 한 명에 대한 데이터를 보기 위한 페이지입니다. ‘챔피언 분석’이나 ‘통계’처럼 모든 데이터를 보여줄 필요가 없죠. 또한, 최근 20게임이라는 정해진 기간이 있습니다. 그래서 제한된 정보를 제공해주되 인게임 상황을 고려하여 니즈를 충족할 수 있을 정도의 데이터를 보여주기로 했습니다. 적정한 양의 정보 제공을 통해 시각적인 부담을 없앨 수 있고, 다른 데이터로 자유롭게 넘어가는 것을 유도하기 위함이죠.

롤은 팀 게임이기 때문에 게임에 들어가기 전 픽창에서 각 팀원에 대한 정보를 빠르게 아는 것이 중요합니다. 챔피언 상성에 따른 조합을 짜고, 포지션을 조율하면서 진행될 게임의 승률을 높일 수 있겠죠. 최근 20게임에 대한 데이터는 유저의 가장 최근 동향을 살펴볼 수 있는 지표로 구성되어있기 때문에 현재 플레이할 게임에 도움이 되는 정보라고 할 수 있습니다. 앞으로 OP.GG의 유저들이 이 데이터를 통해 승률을 높일 수 있다면 좋을 것 같습니다.