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

배그 하시나요?
최근에 배틀그라운드 게임이 오피지지의 전적 서비스로 추가되었습니다.  그 전까지는 2017년 1월에 오픈한 베스트지지를 포함해서 오피지지는 3개의 서비스를 운영하고 있었습니다.
– 오피지지 op.gg
– 오버로그 overwatch.op.gg
– 베스트지지 best.gg

작년 11월에 오픈한 pubg.op.gg가 오피지지의 4번째 서비스가 되었는데요. 이렇게 서비스가 늘어나다 보니 오피지지의 서비스를 유기적으로 연결해야 하는 것이 중요한 이슈로 떠올랐습니다. 자연스럽게 글로벌 네비게이션 바 (Global Navigation Bar: GNB)공간 활용에 대한 이야기가 활발해졌습니다.

리서치를 바탕으로 저희랑 비슷한 비지니스 컨셉으로 가는 서비스를 정리해봤습니다. Zam의 롤킹도 그렇고 Curse 의 리그피디아 등 여러가지 게임 서비스를 하나로 묶어보자는 컨셉 시도가 third party services에서 드물지 않다는 사실을 알았습니다.

패턴 1: drop down

부모 로고를 두고 아래 서비스 브랜드가 나열되는 형태

패턴 2: 로고 추가 형태

부모의 로고를 기존 서비스 로고에 추가해서 family임을 강조

패턴 3 인벤 방식

정형화된 템플릿 사용으로 서로 다른 게임에 일관된 레이아웃과 룻앤필을 강조

패턴 4 아이콘 방식

드랍 다운과 같은 형식이지만 서비스의 종류가 많아질 때 시각적 표현이 용이한 아이콘 방식

저희가 논의한 방식은 Hybrid 형식인데 현재까지는 롤, 오버워치, 배그, 베스트지지 이렇게 4개이기 때문에 아이콘이나 드랍 다운 형태의 옵션을 사용하지 않고 모두 다 나열하는 방법을 사용했습니다. 이유는 여러가지가 있었지만 가장 큰 이유는 사용자 접근성에 있어서 감추어진 메뉴보다는 노출된 메뉴에 대한 사용자들의 클릭률이 훨씬 좋다는 점이였습니다. 그렇게해서 GNB의 왼쪽 영역은 공간이 허락하는 한 우리의 서비스를 나열했습니다. 오른쪽 영역은 검색필드와 한국서버에만 존재하는 로그인과 회원가입 메뉴를 배치했습니다.

검색 필드의 위치는 시각적 편의성과 리서치에 기반해서 정해졌습니다. 오피지지에서 검색이 정말로 중요한 일을 담당하고 있습니다. 그래서인지 검색창의 위치나 크기 그리고 오피지지의 역사를 담고있는 로고 일러스트레이션과의 밀접한 관계로 인해 생각보다는 많은 제약(?)을 안고 구조적인 배치가 이뤄졌습니다.
우선 홈에서의 GNB에는 검색필드가 없습니다. 홈에서 가장 중요한 content인 검색이 바로 사용자의 시선에 꽂히는 정중앙에 위치해 있습니다. 인덱스 페이지가 아닌 페이지에 들어가면 GNB에서 검색창이 오른쪽에 치우쳐진 위치에 놓였습니다. 처음 디자인을 할때는 검색창의 위치에 대해 큰 이견이 없었습니다. 하지만, 사용하는 사람에 따라 검색창의 위치 때문에 컨텐츠를 가리거나 불편할 수 있다는 의견을 듣게 되었습니다. 그래서 좀더 검색창 위치에 관련한 리서치를 하다, 검색창이 중요해 질수록 그 위치는 왼쪽으로 이동한다는 사실을 알았습니다.

예제 1 : facebook (왼쪽: 과거, 오른쪽: 현재)

예제 2: Linkedin (왼쪽: 과거, 오른쪽: 현재)

위의 예제를 보시면 아시겠지만 8년 전쯤의 페이스북과 링크드인의 검색 창 위치를 보시면 좀 더 이해하기 쉬우실 거라 생각합니다. 시선이 시작되는 왼쪽 로고 다음에 바로 검색창이 배치되어 있습니다. 오피지지도 검색의 중요성을 생각하면 왼쪽에 위치하는게 맞는게 아닌가란 생각을 할 수 있는데 오피지지가 앞으로 나아가고자 하는 플랫폼을 만드는데 좀 더 비중을 두고, 현재의 디자인이 선택되었습니다.

오피지지 GNB

GNB에 대한 정리 후에는 Local Navigation Bar (LNB) 를 정비하였습니다. LNB는 각각의 게임 서비스들이 가지고 있는 자체 메뉴들입니다. 예를 들면 현재 pubg.op.gg에는 홈과 리더보드라는 2개의 메뉴가 있지만 overwatch.op.gg에는 홈, 영웅통계, 순위표, 즐겨찾기, 비교하기까지 모두 5개의 메뉴가 있습니다. 게임의 성격과 제공하는 정보의 양과 범위가 다르기 때문에 LBN의 정보 통일성 보다는 시각적 일관성에 초점을 둬서 오피지지를 한번이라도 사용한 사람이라면 각각의 서비스를 이용하는데 있어 어색함이 없도록 메뉴 배치와 시각적 구성 방법을 단일화했습니다.

롤 GNB + LNB

오버워치 GNB + LNB

배그 GNB + LNB

베스트지지에는 저희가 만든 GNB로 통일하지 못했는데요. 아직 베스트지지가 롤에 국한되어 있고 앞으로의 방향성에 대해 논의중이라 우선은 독립적인 이스포츠 영역으로 두었습니다.

이번 글에서는 GNB라는 다소 작은 영역에 대해 얘기를 했는데요. 생각보다 도전해야 할 일이 많다는 말을 드리고 싶습니다. 왜냐면 이제 긴 제목의 게임이 하나만 늘어나도 GNB가 복잡다단해 질 수 있는 여지가 있기 때문인데요. 이 부분에 대해서는 저를 포함한 오피지지의 모든 디자이너가 최적의 해결 방안을 위해 오늘도 롤과 오버워치, 배그, 그리고 아직 서비스 할 지 모르는 수많은 PC, 모바일 게임을 플레이하면서 생각하고 있는 디자인 과제입니다. (왜 게임을 하면서 디자인을 한다고 말하는 거지란 생각하실 수 있는데… 단언컨대 게임을 모르고서는 절대 좋은 디자인을 할 수 없기 때문입니다) 어떻게 효과적으로 현재의 전적 서비스와 미래의 서비스를 연결할지, 나아가서는 서로 다른 게임의 identity를 유지하면서 오피지지라는 하나의 이름으로 플랫폼화해서 브랜딩할 수 있을지…… GNB는 그 시작이고 정답은 모르지만 사용자들에게 보여지지 않은 수십, 수백개의 스케치와 아이디어 001, 002, 003, 004….란 이름으로 패기될 시안들을 통해 게이머들이 편하게 사용할 수 있는 서비스를 만들지 않을까란 생각을 해봅니다.

Reference

• Examining User Expectations for the Location of Common E-Commerce Web Objects (2002년)
• Where’s the Search? Re-examining User Expectations of Web Objects  (2006년)
• Does Search need to be in the upper right? (2006년)
• 위키피디아가 검색창 위치를 바꾼 이유 (2010년)
• Should the search box be on the left or the right side (2013년)