OP.GG에는 많은 표(table)가 쓰이고 있습니다. 표는 많은 정보를 정리해서 보여줄 수 있는 가장 쉽고 빠른 방법이며, 보통은 리스트라는 이름으로 불립니다.
그러나 너무 일반적이고 많이 쓰이는 요소라 어떻게 보면 크게 신경쓰지 않는 부분일 수도 있습니다.
이렇게 얘기할 수 있는 이유는… OP.GG 에서 리스트가 바뀐 지 몇개월이 지났는데 이 변화를 감지하신 분은 많지 않은 것 같습니다.
만약 전적 검색을 사용하면서 이 작은 변화를 눈치채셨다면, OP.GG 사이트에 애정을 가지고 사용하시는 분이라 감히 얘기하겠습니다.
리스트의 변화는 작지만 아래의 Before와 After 를 비교하신다면 “오~” 라고 느낄 수 있다고 생각합니다.
테이블을 개선할 때 고려했던 사항은 다음과 같습니다.
- 정보 분류
- 정보 가시성 – 각각의 정보가 독립적으로 보이면서 전체로 이해될 수 있게 도와줌
정보 가시성을 높일 수 있는 방법
- Header(레이블)와 Content(정보) 분리
- 폰트 사이즈 변화
- 폰트 weight 조절 ex) Helvetica Light, Regular, Bold, Black etc
- 표의 height 변화 (보통 height이 클때 주목성이 높아짐)
- 셀 간격 조절 (하나의 정보와 그 다음 정보와의 간격)
- 정렬 방법 (왼쪽, 가운데, 오른쪽 정렬)
- 배경색
예제 1: 같이 플레이한 소환사 List of summoners recently played with
| Before | After |
 |
 |
홀짝수 배경색 변화를 통해 한 줄 읽는 가독성을 높였습니다.
예제 2: 챔피언 분석의 밴률 Ban Rate on Champion Analytics
| Before | After |
 |
 |
레이블과 정보를 구분하고 정보 리스트에서도 홀수 짝수 줄에 들어가는 배경색을 추가
예제 3: 챔피언 분석의 룬페이지 Runes on Champion Analytics
| Before |
 |
| After |
 |
룬 테이블의 경우는 홀짝수 행에 배경색을 넣고 행간을 조정해서 한 세트의 룬을 보기 쉽게 했습니다. 아쉬운 부분이라하면 룬 이름이 길어서 넓지 않은 셀안에 넣다보니 이름이 4~6줄 내려가는 게 살짝 어색해보입니다. 다음에 개선할 때는 이런 부분을 좀 더 신경써서 봐야 할 것 같네요.
결과적으로 테이블 row에 배경색을 넣는 방법이 가독성을 높이는데 도움이 됐습니다.
배경색으로 개선이 까다로운 경우는
1. 리스트 안에 막대, 원 그래프가 들어가 있거나
2. 리스트가 페이지 전체로 구성 되어있고 데이터가 여백없이 많이 들어가 있는 경우였습니다.
OP.GG에 있는 모든 테이블을 이 방법으로 개선할 수는 없었으나 작은 변화로 가독성을 높일 수 있는 팁이란 생각에 공유합니다.
