선택과 집중 X 챔피언 분석 X 두번째 이야기


챔피언 분석은 어떤 모습으로 사용자들에게 보일까? 그리고 기존 UI와 변경되어야 할 UI에 대한 물음에서 해당 디자인리뉴얼을 시작하게 되었습니다.
OP.GG의 서비스는 전적검색데이터를 바탕으로 인게임분석을 사용자들에게 다양한 방법으로 보여드리고 있습니다. 챔피언 분석은 전적검색이라는 부분에서 떨어져 한 차원더깊은 분석데이터를 사용자에게 보여주는 콘텐츠로 이번 리뉴얼을 통해 작지만, 디자인개선으로 더욱 더 좋은 사용자 인터페이스를 끌어내고자 하였습니다.
자 그럼 어디가 어떻게 바뀌었는지 한번 살펴볼까요?

feature 1
Wide Screen Resolution

 

 

해상도 사이즈의 변화

앞서 1부에서 간략하게 정의를 하였습니다. 오늘날 디바이스의 해상도 변화가 커짐에 따라 큰 해상도에서 기존의 970px의 사이즈는 콘텐츠를 담아내는 데 있어서 영역이 비좁았습니다. 더 넓은 영역의 확보로 폰트의 크기나 콘텐츠의 표현방법도 다르게 보여드릴 수 있게 되었습니다.

 

챔피언 분석의 인덱스 첫 화면입니다. 기존 챔피언의 숫자는 한 줄에 6명, 개선 후 한 줄에 7명의 챔피언을 표현하고, 오른쪽에 챔피언 순위에서는 승률과 픽률의 구분을 좀 더 명확하게 표현할 수 있게 되었습니다.

작은 차이지만, 사람이 눈으로 인지할 수 있는 영역의 개선이라고 말씀드릴 수 있을 것 같습니다.
(예: 사람이 눈으로 인지할 수 있는 객체의 개수는 7~9개를 기준으로 하고 있습니다. 134846870 해당 9개의 숫자를 순서대로 기억 할 수 있는 순간 기억력을 기초로 콘텐츠의 모습을 개선하고 있다고 보시면 될 것 같습니다. 해당 이야기는 밀러의 매직넘버7 이라는 논문데이터를 참고해서 인용하였지만 절대적인 내용으로 보고있지는 않습니다. 다만 어느정도 기준이라는 부분을 세우고 디자인을 이어나가는 부분에서 참고할 수 있는 내용이다 라는 정도로 말씀드릴 수 있을것 같습니다.)

 

 

명도단계의 색상변화

기존의 콘텐츠와 배경색상에 대한 부분도 함께 개선되었습니다.
어두운 색상 위에 밝은 색상으로 콘텐츠 영역 구분을 좀 더 명확하게 하려고 회색 배경에 콘텐츠를 흰색으로 표현하고 있습니다.

명도 단계가 명확하지 않아, 컨텐츠의 구분이 모호한 부분이 있었습니다. 밝다와 어둡다를 명확한 구분을 좀 더 개선하고자 하였습니다.
이는 글을 읽을때 밝은 색상위에 텍스트의 가독성을 높여줄뿐만이 아니라 눈의 피로를 덜어줄 수 있는 하나의 요소이기도 합니다.

(예: 우리의 눈은 색의 3속성 중에서도 명도에 대한 반응이 가장 예민하므로 만일 두 색 사이에 명도, 채도, 색상, 대비 등이 동시에 일어난다면 명도 대비의 현상이 가장 강하게 나타납니다. 명도>색상>채도 명도 대비가 강하면 선명하고 산뜻하고 명쾌한 느낌을 얻을 수 있고, 전체적으로 밝은 명도를 사용하면서 명도 대비가 약하면 밝고 가벼우면서 부드러운 느낌을 얻을 수 있습니다.)

 

feature 2
New Layout

 

 

챔피언 프로필

챔피언의 프로필 디자인입니다. 기본의 챔피언 프로필 페이지는 단계와 영역의 구분이 명확하지 않았습니다. 또한, 데이터의 흐름이 자유로웠죠. 흐름에 맞는 데이터를 보여주고자 하는 부분이 가장 중요한 부분이었습니다.

또한, 챔피언의 데이터라는 부분이 명확하게 표현되는 방향으로 디자인을 반영하기 위해 전반적인 디자인 톤 앤 매너를 개선하였습니다. 인게임과 동떨어진 디자인이 아니라 닮아 있는 페이지를 표현하여 익숙한 형태를 갖추어 반영하려고 했습니다.

위에서부터 아래로 데이터의 흐름을 잡아내기 위해 기존의 UI를 개선합니다. 챔피언의 기본정보를 중심으로 포지션을 선택하고, 인게임 이전과 이후 데이터로 구분하였습니다. 이는 게임을 플레이하기 이전에 보여주는 데이터 룬세팅, 특성, 소환사 주문을 먼저 상단에 보여주고, 인게임에서 참고할 수 있는 데이터 스킬빌드, 아이템빌드를 순서대로 보여줌으로써 사용자가 해당 챔피언을 인게임 전후를 기준으로 데이터를 반영할 수 있도록 흐름을 잡아낸 것입니다.

이는 수많은 챔피언 공략을 쓰고, 공유 하고있는 여러 사람들의 페이지를 방문해 보고 알아낸 사실로 대부분의 사용자들이 챔피언공략을 찾아 세팅하는 과정에서 위와 같은 순서로 보고 있다는 걸 알 수 있었습니다.
데이터의 흐름을 어떤식으로 보여줄지가 정해지고 다음 모든 데이터의 표현하는 테이블의 개선을 이어 나갔습니다. 선택과 집중이라는 부분이 기존 데이터 테이블에는 다소 약하게 표현된 부분이 많습니다.  테이블의 타이틀이 구분이 되지않아 해당 내용을 인지하는데 익숙해 지지않으면 매우 불편한 디자인으로 구성이 되어 있었습니다.

우리는 테이블디자인을 공통적으로 반영할 수 있도록 익숙하고 구분이 명확한 디자인을 만들어 이후 신규 페이지나 리뉴얼되는 디자인에 해당 테이블 디자인을 반영하기로 합니다.

테이블디자인

해당 테이블 디자인은 테이블의 타이틀과 담고 있는 내용을 명확하게 표현합니다. 하나의 테이블에 하나의 내용을 담고 있습니다. 이는 기존의 하나의 테이블의 여러 개의 내용을 표현하면서 인지할 수 있는 콘텐츠의 개수를 구분하여 표현하는데 훨씬 효과적인 형태를 갖추고 있습니다.

선택과 집중

챔피언 프로필 페이지의 단계구조는 다음 화면과 같이 콘텐츠 흐름에 맞게 사용자가 선택과 집중을 할 수 있는 구조로 만들어졌습니다. 이는 기존에 UI 흐름이 매끄럽지 못한 부분을 개선하기 위함으로 진행되었습니다. 탭은 좀 더 탭의 형태를 갖추고, 영역의 구분은 내용을 담고 있는 콘텐츠를 명확하게 구분하며, 각 역할을 하는 UI가 좀 더 돋보이도록 말입니다.

기존의 UI와 새롭게 바뀌는 UI 무엇이 정답인가?

이번 디자인 리뉴얼을 진행하면서기존 UI를 어떻게 변경하여야 할까 라는 점이 가장 고민했던 문제입니다.  당연히 최우선으로 생각해야 하는 부분은 사용자 경험이 바탕이 되어야 한다는 것 입니다. 그렇다면 어떻게 바꿔야 할까, 그동안 경험상 리뉴얼이라는 부분에서 많은 사람이 잘못 생각하는 부분이 무조건 바꾸는 것이 정답이라고 생각하는 것입니다. 그게 과연 그게 정답일까요? 무조건 바꾸는 것이 정답은 아닙니다. 좋은 UI는 지속되여야 하고 불편함을 개선하고자 할 때 필요한 부분만 바꾸는 것이 디자인 리뉴얼을 할 때 가장 많이 고민해야 하는 부분이라고 생각합니다.

한 번에 성공적인 디자인 리뉴얼은 없습니다. 실패할 수도 있고, 성공할 수도 있고, 항상 가능성을 열어두고 고민 하는것이 정답에 가까운 디자인 리뉴얼 방식이 아닐까 생각합니다.

하루에 방문자가 4.000.000명인 네이버 같은 경우도 문제가 생기는 부분에서 디자인을 바로 변경을 하는 것이아니라 점진적으로 최대의 사용자를 위한 최소의 변화로 디자인을 하고 있습니다. 이는 개편이라는 과제가 바라보는 관점이 사용자 중심에 무게가 맞춰져 있기 때문이 아닐까 생각합니다.

저희 OP.GG역시 하루에 수많은 방문자가 방문 하고 있습니다. 그만큼 디자인에 대한 여러가지 이야기와 사용성에 대한 이야기를 듣고 있습니다. 개인마다 생각하는 부분이 다르므로 그 중심에서 중립적인 디자인 사고를 하려고 노력하고 있습니다. 앞으로도 꾸준히 발전하는 OP.GG의 디자인을 보여드릴 수 있도록 좋은 모습으로 찾아뵐 것을 약속드리며 이번 챔피언 리뉴얼에 대한 이야기를 여기서 마칩니다.

다음이야기는 OP.GG 인덱스 페이지 디자인 이야기를 하게 될것 같습니다.

감사합니다.

답글 남기기

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