BEST.GG – 디자인 구조

오늘은 BEST.GG의 구조에 대해서 얘기해보려고 합니다. 페이지의 전체적인 레이아웃과 내용에 맞는 UI 구성을 잡아가면서 BEST.GG만의 규칙을 만들어가는 과정이었죠.   1. 그리드 (Grid)   BEST.GG의 구조를 짤 때 가장 중요시했던 부분은 통일된 그리드를 통해 전반적인 사이트의 구성을 탄탄하게 가져가고자 함이었습니다. 작업하면서 몇 가지 불가피한 예외사항들이 있어 100% 완벽하게 적용했다고 하기에는 어렵지만, 작업에 들어가기에 앞서 그리드를 정해놓았기 때문에 […]

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

본 이야기는 OP.GG에 챔피언 분석 디자인 리뉴얼에 대한 이야기를 담고 있습니다. 크게는 이번 리뉴얼디자인에 대한 접근 방법부터 작게는 어떠한 고민을 담고 있는지 이 이야기는 여러 편에 거쳐 쓸 예정이며 본 편은 프롤로그 정도로 보면 될 것 같습니다.   챔피언 분석부터 OP.GG가 앞으로 PC 서비스의 디자인의 새로운 방향성입니다. 모바일과 PC는 각각 뚜렷한 목적으로 접근하여야 하고 우선 […]

Segmented Controls (세그먼트 컨트롤)

간혹 디자인 회의를 할 때 동료 디자이너들과 User Interface (UI)에 대한 관점이 다른 경우가 있습니다. 디자인의 Look&Feel을 논의할 때는 서로의 의견이 다른 경우, 관점이 다르더라도 자기의 생각이 주관적임을 인식하고 얘기하기 때문에 이해할 수 있다라고 생각하는데 반해 UI의 경우는 상대방을 설득하기가 쉽지 않습니다. 여러가지 이유가 있겠지만 가장 큰 이유는 UI는 주관적이 아니라 객관적이고 보편적이라고 생각하기 때문이 아닌가 […]

첫 웹사이트 작업기

BEST.GG는 UI 디자인을 시작하게 된 지 6개월 정도 되던 시점부터 만든 사이트입니다. (!) 신입 디자이너가 사이트를 만드는 일은 아마 흔한 일이 아닐 겁니다… 그래서 오늘은 BEST.GG 프로젝트를 시작하겠다고 들었던 당시의 기억을 되살려 글을 써보려고 합니다. 초기에 아무런 구상 없이 무작정 만들기만 했었던 디자인 시안을 다시 보면 무슨 생각으로 저렇게 했었지? 라는 생각이 들기도 하는데요… ㅎㅎ […]

티어 그래프

소환사 페이지에 있는 티어 그래프를 보시나요?   티어그래프는 자신의 티어 변동 (LP 변동)을 한 눈에 보기 쉽게 만든 그래프입니다. 티어그래프는 플레이어 전적 페이지 상단 솔랭 MMR 버튼 옆에 위치하고 있습니다. (상단 화면은 개선전이라 티어 그래프가 MMR 체크 옆에 위치해 있습니다) Problems & Solutions 티어 그래프를 개선한 지 살짝 시간이 지나서 기억을 더듬으면서 정리해 보겠습니다. 상단 […]

BEST.GG – 전적 페이지 디자인

BEST.GG는 OP.GG의 패밀리사이트로 얼마 전 베타 버전을 오픈했습니다. OP.GG는 롤을 플레이하는 전 세계 모든 유저들에 대한 전적을 보는 사이트였죠. 그에 반해 BEST.GG는 과거부터 현재까지 프로 리그를 뛰고 있는 선수들과 팀에 대한 전적을 보는 사이트입니다. 여러 지표를 분석한 통계를 바탕으로 저희만의 기준을 만들어 팀 순위 및 선수 순위에 대한 데이터를 제공하고 있으며, 실제 선수들이 경기에서 사용하는 […]

탭 이야기

Tabs in the past 과거의 탭은 탭이라는 사실이 너무 명확하게 디자인되었습니다. 기억하시는지요? 아래와 같은 UI 디자인이 성행했던 2000년대 … 아마존, 구글도 탭을 메인으로 사용한 디자인을 했습니다. 탭은 유저에게 메뉴라는 걸 인지시키고 정보를 효과적으로 분류 할 수 있는 아주 효율적인 방법입니다.     Tabs in present 현재까지도 많이 사용하는 UI 중에 하나입니다. 단지 최근에 와서는 옛날과 […]

최근 20게임 overview 개편

모스트 챔피언 및 포지션 정보 추가 OP.GG의 가장 중요한 기능을 담당하고 있는 전적검색 페이지에서 최근 20게임 overview에 대한 디자인이 변경되었습니다. 기존에는 승률 및 KDA에 관련된 정보만 제공하고 있었죠. 그러나 롤에 대한 데이터들이 점차 고도화되면서, 유저들은 최근 전적에 대한 보다 다양한 통계를 원하고 있습니다. 최근 20게임에 대한 데이터 개편의 필요성을 느낀 저희는 리뉴얼 작업을 진행하기로 했습니다. […]

테이블 디자인 개선하기

OP.GG에는 많은 표(table)가 쓰이고 있습니다. 표는 많은 정보를 정리해서 보여줄 수 있는 가장 쉽고 빠른 방법이며, 보통은 리스트라는 이름으로 불립니다. 그러나 너무 일반적이고 많이 쓰이는 요소라 어떻게 보면 크게 신경쓰지 않는 부분일 수도 있습니다. 이렇게 얘기할 수 있는 이유는… OP.GG 에서 리스트가 바뀐 지 몇개월이 지났는데 이 변화를 감지하신 분은 많지 않은 것 같습니다. 만약 […]

OP.GG 롤 영상 콘텐츠 이야기

롤 영상 콘텐츠의 필요성 리그 오브 레전드(이하 ‘롤’)는 브론즈부터 챌린저까지 다양한 티어로 나뉘어 있으며 상대적으로 낮은 티어유저들은 높은 티어를 얻기 위해 고군분투합니다. 그 과정에서 실력이 뛰어난 유저의 활약을 시청하는 것만으로도 큰 도움이 됩니다. 그렇기에 롤과 관련된 영상 콘텐츠는 좋은 실력의 유저가 플레이한 것 또는 멋진 플레이를 모아놓은 콘셉트가 주를 이루며, 이는 롤이 출시된 2009년 10월 27일부터 8년이 […]