소환사 페이지에 있는 티어 그래프를 보시나요?
티어그래프는 자신의 티어 변동 (LP 변동)을 한 눈에 보기 쉽게 만든 그래프입니다.
티어그래프는 플레이어 전적 페이지 상단 솔랭 MMR 버튼 옆에 위치하고 있습니다. (상단 화면은 개선전이라 티어 그래프가 MMR 체크 옆에 위치해 있습니다)
Problems & Solutions
티어 그래프를 개선한 지 살짝 시간이 지나서 기억을 더듬으면서 정리해 보겠습니다.
상단 화면에서 티어 그래프의 문제점
1. 각 점들이 눈에 잘 들어오지 않음
2. 티어 변화를 한눈에 알기 어려움
3. 숫자가 많아 보이고 번잡해 보임
해결방법
위의 문제점을 해결하는 방법은 여러가지 있을 수 있으나 그래프의 노출 위치와 뜨는 방법(아래로 컨텐츠를 밀면서 height이 넓어지는방식), 크기 조절에 제한이 있어 다음과 같은 해결 방법을 생각했습니다.
1. 각 점들이 눈에 잘 들어오지 않음 → 점 크기, 여백 조절하고 배경과 대비
2. 티어 변화를 한눈에 알기 어려움 → 색상 사용
3. 숫자가 많고 번잡해 보임 → 숫자 분리, 날자와 티어 구분, 행간 조절
현재 그래프가 하나의 넓은 배경에 있어서 각 점들을 보기보다 전체적인 모양새에 집중하게끔 되어 있습니다. 우선 각 점들이 잘 눈에 들어오게 하기 위해 각 점들에게 일정 영역의 배경색을 넣음으로서 각각의 점에 좀 더 집중할 수 있게 만들었습니다. 이 테크닉(?)은 테이블 개선에도 활용되었습니다.
티어 변화를 한눈에 알기 어려운 문제는 티어가 바뀔때 색이 바뀌는 것으로 시각적으로 좀 더 눈에 띄는 변화를 강조했습니다. 각각의 티어 색은 티어별 통계에 사용된 색을 계승했습니다. (티어 색 부분도 색 톤에 대한 개선이 이루어질 필요가 있어 보이지만 이 부분을 개선하면 대공사가 될 수 있으므로 추후에 개선해야할 아이템으로 제 머리 속에만 있습니다)
숫자가 많아 보이는 부분은 날자 영역을 분리하는 것으로 텍스트 양을 조절하고 티어정보와 LP 사이의 행간 조절과 폰트 weight 조정으로 가독성을 높였습니다.
아래 화면은 개선된 티어 그래프입니다.
* 현재 op.gg에 제공되는 티어그래프는 최고 티어 제공이 아직인 관계로 지금 보는 디자인과는 차이가 있습니다.
Experiments
티어 그래프를 개선하면서 선 그래프와 텍스트 배치 실험을 해 볼 수 있었습니다. 기존의 그래프에서 숫자가 많아 보이고 번잡해 보이는 이유 중에 하나가 점들을 따라다니는 티어와 LP숫자라는 생각이 들어 고정위치에 티어와 LP를 구성해 보았습니다.
위 상단 2개의 화면 중에 어떤 그래프가 더 눈에 잘 들어오시나요?
제 눈에는 티어정보와 LP가 그래프 위치를 표시하는 동그라미가 있는 지점에서 나오는 것이 좀 더 그래프를 인지하는데 도움이 되었습니다. 티어와 LP를 상단에 고정시켰을 때는 시각적으로 단정한 느낌을 주지만 그래프의 변화를 인지하는 데는 효과가 떨어지는 것 같습니다. 이 외에도 백그라운드의 배경 폭을 다르게 하면 점들이 좀 더 부각되는 효과가 있지 않을까라는 생각을 했었는데 배경색의 다름이 더 눈에 보여서 별 도움이 되지 않았습니다.
Thoughts on design
티어 그래프 개선 이후로 그래프 가독성이 좋아졌다는 말을 들었을 때 매우 기뻤습니다. 때때로 디자인 바꿔서 얼마나 많이 바뀌겠어라고 생각하는 사람들을 만나기도 합니다. 저도 한때는 디자인보다는 새로운 기능이 들어가야 뭔가 진짜 바뀐게 아닌가라고 생각했었습니다. 박스의 위치를 상단에 놓을 건지 오른쪽/왼쪽에 배치할 건지 테두리를 넣을 건지 말건지, 배경색을 넣을 건지, 넣는다면 어떤 색을 사용할 건지, 가운데 정렬을 할 건지 왼쪽 정렬을 할 건지…그리고 1px의 여백과 씨름하다보면… 내가 지금 뭐하는 건가란 생각이 들 때도 있습니다. 디자인이 어려운 건 정답이 없기 때문이라고들 합니다. 요즘과 같이 UI 패턴화가 이루어지고 있는 상황에서는 더더욱 UI 디자인을 잘 하기 어렵습니다. 그러면 UI 디자인 quality를 어떻게 논할 것인가?
제 생각에는 서비스의 content를 이해하고 그것을 사용자 입장에서 해석해서 표현하는 게 핵심이 아닌가 합니다. 이 디자인 결정이 누구를 위한 건지 무엇을 나타내는 건지에 대한 이해가 없다면 디테일을 표현하는데 있어 확실히 차이가 있습니다. 티어 그래프로 예를 들자면 롤 티어에 대한 이해가 있고, 사용자가 왜 그것을 보며 중요하다고 생각하는지 알고 접근하는 것과 변화하는 숫자를 그래프로 나타낸다라고 접근하는 것의 차이에서 오지 않을까… 오피지지에서 일하면서 가장 어려운 부분 중에 하나가 이것인 것 같습니다. 게임(contents)과 게이머(users)에 대한 이해가 높지 않아 그냥 아는 만큼 현재의 최선을 하는 거. 아직도 배울게 산더미란 생각을 하면서 글을 마칩니다.
