Daily UI 019 / Leaderboard 리더보드

19번째 과제: Leaderboard 리더보드 UI

 

Leaderboard란?

리더보드는 특정 기준에 따라 순위를 매긴 목록이다. 이는 경쟁적인 환경에서 개인이나 팀의 성과를 비교하고 순위를 매기기 위해 사용된다.

 

 

- 공교롭게도 저번 과제 주제랑 겹쳐서 같은 포맷으로 제작해 보았다.

- 사이드바에 컬러를 줘서 본문 부분과 좀 더 구분되게 UI를 수정하였다.

- 표에서 가로 구분선을 넣어서 좀더 정보가 명확히 구분되게 하였다.

- 선택한 지표에 따라 순위가 정렬되는 시스템이고, 선택한 지표에는 메인 컬러 및 백그라운드로 하이라이트를 주었다.

- 지표가 약 25개 정도 되기 때문에, 한 번에 다 보여주기는 어렵다. 따라서 좌우 버튼을 넣었다. 인디케이터로 지금 어느 범위의 지표들을 보여주고 있는지 볼 수 있다. 기본적으로 지표들이 연관되는 순서대로 배치되어 있어서 좌우 버튼 / 슬라이더로 연속적으로 보는 것이 유의미하다.

- 내가 원하는 지표들만 선택해서 볼 수 있는 필터 기능을 넣어도 좋을 것 같다.