글로벌 네비게이션 바 (GNB)

배그 하시나요? 최근에 배틀그라운드 게임이 오피지지의 전적 서비스로 추가되었습니다.  그 전까지는 2017년 1월에 오픈한 베스트지지를 포함해서 오피지지는 3개의 서비스를 운영하고 있었습니다. – 오피지지 op.gg – 오버로그 overwatch.op.gg – 베스트지지 best.gg 작년 11월에 오픈한 pubg.op.gg가 오피지지의 4번째 서비스가 되었는데요. 이렇게 서비스가 늘어나다 보니 오피지지의 서비스를 유기적으로 연결해야 하는 것이 중요한 이슈로 떠올랐습니다. 자연스럽게 글로벌 네비게이션 바 […]

전적 UI

발단 올 7월, 라이엇 API에서 랭크게임이 아닌 게임에 대해서 소환사 이름을 제공하지 않을 거라는 정보를 입수했습니다. 이것을 안 순간 제 머리속에서는 소환사 페이지에 대한 걱정이 시작되었습니다. 현재의 전적 UI는 소환사 개인의 통계를 비롯해 solid 정보를 제공하고 있습니다. 만약 여기서 한개의 정보라도 빠진다면 사용자의 불편(?)과 불평은 겪어보지 않아도 상상할 수 있습니다.  아.. 어떡하지? 란 무거운 생각으로 […]

색상 이야기

디자이너로서 색에 대한 고민은 항상 어려운 부분이라고 생각합니다. 하지만 시대가 바뀌어 색에 대한 좋은 샘플을 찾는 것이 어렵지 않고, 조화로운 색 조합을 만드는 색상 툴을 사용하면서 색 사용에 대한 스트레스가 적어졌습니다. 그런데, 오피지지 서비스를 하면서 색에 대한 조화로움과는 또 다른 고민이 생겼는데 그건 바로 게임, 문화, 익숙함에서 오는 색에 대한 인지였습니다. 색 사용이 어렵다고 느낀 […]

Segmented Controls (세그먼트 컨트롤)

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

티어 그래프

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

탭 이야기

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

테이블 디자인 개선하기

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