OP.GG 사이트 내 컬러 이슈

OP.GG는 ‘리그 오브 레전드(이하 롤)’라는 게임에 대한 통계 및 전적 검색 사이트입니다. 게임 기반의 사이트라 화려하고 색이 많은 이미지를 그대로 보여줘야 하기 때문에 수많은 통계들과 이미지, 그리고 색상 사이의 균형이 중요한 이슈로 여겨집니다. 

‘팀’과 ‘승패’에 대한 색상

기존 롤에서는 진영에 따라 블루팀과 퍼플팀 2개의 팀으로 구분되어 있었습니다. 그러나 몇 년 전에 퍼플팀이 레드팀으로 바뀌면서 블루팀, 레드팀이라는 새로운 구분이 생겼죠.

OP.GG에서는 게임에 승리했을 시 Blue를, 패배했을 시 Red를 background 색상으로 사용하며 게임의 결과를 명확하게 보여줍니다. 기존에는 팀과 승패의 구분색상이 달랐기 때문에 이슈가 없었으나, 퍼플팀이 레드팀으로 바뀌면서 각 색상의 의미가 어떤 것인지에 대한 오해의 여지가 생겼습니다. 또한, 각 팀의 데이터를 기반으로 한 여러 가지 그래프를 제공하려는 계획이 있었기 때문에 색상 이슈가 더욱 중요해졌습니다.

저희는 실제 데이터를 기반의 통계를 제공하는 사이트이기 때문에 유저들에게 명확한 정보를 제공해야 할 의무가 있습니다. 그래서 이와 같은 컬러 이슈들을 분석하고 개선하고자 했습니다.

타 사이트 분석하기

들어가기에 앞서 전 세계적으로 많은 롤 전적 사이트들이 어떤 방식으로 ‘팀’과 ‘승패’에 접근하고 있는지 조사해보았습니다.

1. 경쟁 사이트 LOL****

‘LOL****’의 상단에 표시된 매치 타이틀 부분을 살펴보면, 승패에 따른 Blue, Red색상을 아이콘과 텍스트에 활용했습니다. 게임의 승패에 집중한 결과를 보여줍니다.

detail 화면을 보면 승리팀, 패배팀(Winning Team/Losing Team) 및 팀 구분(블루팀/퍼플팀)을 색상과 텍스트를 함께 사용하여 명시했습니다. 블루팀과 레드팀으로 팀 명칭이 바뀐 지 오래되었지만 아직 블루팀과 퍼플팀으로 표시되어있었습니다.

하위 다른 데이터들은 블루팀/퍼플팀으로 구분하는 색상을 활용하여 표시했습니다. 이러한 시각적인 요소들은 자신의 데이터에 대한 색상이 Blue(승리) 혹은 Red(패배)임을 인지하고 들어온 유저들에게 혼란을 줄 수 있습니다.

전체적으로 깔끔하게 데이터들을 보여주지만, 색상의 구분이 명확하지 않은 점과 같은 Blue 색상을 다른 라벨에서 각각 사용하고 있다는 점에서 아쉬운 부분이 있었습니다.

2. 경쟁 사이트 LOL****

‘LOL****’는 승리를 Blue, 패배를 Grey로 명확한 채도 차이를 주면서 전체적으로 다운된 컬러를 사용하고 있습니다. 팀 명칭을 블루팀과 퍼플팀으로 사용하고 있었고, 특징적인 색상 없이 텍스트로만 팀을 구분하여 표시하고 있습니다.

그러나 자세한 데이터를 얻고자 ‘기록 분석’을 눌렀을 때, 각 팀을 Blue와 Purple 색상으로 구분하면서 overview와는 다른 기준을 사용합니다. 승리에 쓰인 Blue와 블루팀에 쓰인 Blue는 명도와 채도의 차이가 심해서 다른 의미를 가진 색상이라는 것을 짐작할 수 있었지만, 각 색상에 대한 라벨이 없어 그래프를 이해하기 불편했습니다.

3.LoL Official Site

마지막으로 롤 공식 사이트를 살펴보았습니다. overview 페이지에서는 Green, Red 색상으로 승패를 표현함으로써 명확하게 게임의 결과를 보여줍니다.

그러나 detail view에서는 승패를 Black 색상의 텍스트로만 표시했습니다. 그리고 블루팀은 Blue, 퍼플팀(레드팀이지만 패치되지 않은듯)은 Red 색상으로 표현하면서 페이지에서 중요하게 보이는 주요 색상이 Green, Red에서 Blue, Red로 바뀌었다는 것을 알 수 있습니다. ‘전적 보기’라는 같은 역할을 가진 페이지에서 해당 팀의 메인 색상을 각기 다른 색상으로 표시하고 있었습니다.

또한, 롤 공식 사이트에서는 해당 팀의 색상으로 데이터를 표시하는데, overview 페이지에서 승리=Green/패배=Red를 인지하고 들어온 유저들에게 해당 그래프는 직관적이지 않습니다. 레드팀으로 승리할 경우 자신의 데이터가 모두 red 색상으로 표현될 텐데 이전 페이지의 ‘패배’ 색상이기 때문이죠. 게다가 그래프 주변에 해당 색상이 무엇을 의미하는지에 대한 라벨이 없으므로 이해하기가 어렵습니다.  

분석 정리

‘색상’의 구분으로 데이터를 읽는 것은 시각적으로 쉬운 방법이기 때문에 이를 통해 유저들에게 혼란을 최소화해야겠다고 생각했습니다. 우선 간단하게 정리를 해보았습니다. 이 외에도 블루팀,레드팀을 아예 표시를 안해주거나 승패 색상을 Blue,Red가 아닌 전혀 다른 색상으로 표현하는 등 다양한 방식으로 전적을 보여주는 사이트들이 있었습니다.

해결방안

방안 1. OP.GG에서 사용하던 승패의 색상을 Blue&Red에서 Green&Red로 바꾼다.

• 적록 색약 유저들은 보기 어렵다.
• 기존 색상에 익숙해져 있던 유저들은 큰 변화가 부담스럽다. (전적검색기능은 OP.GG에서 가장 큰 기능이기 때문에 background 색상을 바꾸는 것은 큰 변화)
• Red 색상은 여전히 다른 의미로 2번 사용된다. (패배의 Red, 레드팀의 Red)

방안 2. 블루팀,레드팀의 정의가 승패의 정의보다 큰 의미가 있을까?

리서치를 통해 대부분의 사이트에서 detail view를 보려고 해야만 팀의 이름이 등장한다는 것을 알 수 있었습니다. 승패는 무언가를 클릭해보지 않아도 우선적으로 보이는 결과로서 팀의 구분보다 우위에 있는 항목임이 증명되었죠.

각 항목들을 표현할 방법들은 뭐가 있을까?

1. 승패는 색상으로 표현하고, 팀 이름은 텍스트로 정리
2. 승패는 색상으로 표현하고, 팀 이름은 아이콘으로 정리 > 아이콘을 알아보기 어렵다. (기존에 오피셜로 사용하는 아이콘이 존재하지 않음)

고민한 결과 해결방안 2의 1번으로 디자인을 진행하기로 했습니다.

게임에 대한 데이터는 오로지 승패, 그리고 승리팀, 패배팀의 구분을 통해 쉽게 이해할 수 있습니다. 진영에 따른 팀 이름인 블루팀과 레드팀은 텍스트로만 존재하고, 승리와 패배의 개념을 가진 항목에만 색상을 사용함으로써 데이터 구분을 명확하게 했습니다.

새로운 규칙 만들기

2-1번을 통해 항목들의 구분을 명확하게 하기 위해서는 2가지 규칙이 필수로 존재해야 합니다.

• Blue, Red색상이 의미하는 문구를 화면마다 텍스트 혹은 라벨로 보여주어야 한다. (ex. 승리, 패배 / 승리팀, 패배팀) 즉, 승패와 관련된 것이라는 확실한 메시지가 필요하다.

• 블루팀, 레드팀 항목은 색상과 함께 라벨처럼 사용하지 않는다.

유저들에게 많은 항목을 한 번에 보여주어야 할 때, ‘텍스트’는 의미를 명확하게 전달하는 수단 중 하나입니다. 여러 가지의 색상 또는 아이콘, 이미지가 혼재된 상황일 경우 텍스트가 과연 제일 나은 방법인가 하는 고민이 있기도 하지만, 현재로써는 가장 명확한 방안이 아닌가 생각합니다.

마치며

이번 OP.GG의 ‘전적 보기’ 페이지 개선을 통해 디자인 작업 과정을 정리할 기회가 되었습니다. 우선 이미 많은 유저들을 보유하고 있는 사이트 내에서 큰 비중을 가진 페이지를 수정한다고 계획할 때, 기존 유저들과 새로 유입될 신규 유저들의 사이트에 대한 친숙도를 고려하여 디자인을 진행해야 한다는 것입니다.

또한, 색상에 대한 고정관념이 생각보다 사람들에게 큰 영향을 주고 있다는 사실을 알았습니다. Blue, Red색상이 이미 ‘승패’의 개념이라는 경험을 통한 무의식적인 인지가 이번 작업의 방향을 결정하는 큰 요인이 되었습니다.

앞으로도 유저들에게 정확한 데이터를 제공하는 역할을 충실히 수행하면서 더 나은 OP.GG의 모습을 보여드리겠습니다 🙂