유튜브 내비게이션 Flow & Component

 

유튜브 데스크탑 메인 화면의 GNB와 LNB(Drawer)의 내비게이션 구성과 플로우를 정리해보았다.

 

기본 메뉴부터 동영상 카테고리까지 과감하게 1 depth에 펼쳐 놓았는데 이는 클릭 두번 이내에 모든 메뉴에 접근할 수 있도록 위함이다.

 

 

 

 

 

 

| 몇가지 깨알같은 특징

 

1) 해상도 무관 동일한 UI

 

△ 1920 화면

 

△ 1280 화면

 

평균적인 모니터 해상도인 1920에서는 햄버거 아이콘과 드로워메뉴가 펼쳐진 상태로 공존하고, 1280 이하에서는 주요 메뉴만 아이콘으로 간추려서 표시된다.

 

1920에서 드로워를 닫으면 컨텐츠 영역만 더 넓게 쓰는 것도 가능하고

1280에서 드로워를 열어서 컨텐츠 영역을 좁히고 1920과 동일한 모양으로도 사용 가능하다.

 

표로 정리하면 다음과 같다.

 

해상도	드로워 펼침/접힘 가능여부	드로워 기본상태
1330 이상	가능	펼침
1330 ~ 810	가능	접힘
810 이하	가능	접힘

보통의 경우, 해상도마다 내비게이션은 고정된 1개 UI를 쓰는데 일반적이다. 그러나 유튜브의 경우는 최초 접속시 디폴트값은 지정되어 있으나 해상도와 무관하게 동일한 UI 구조를 제공하고 있다.

 

드로워를 펼친채로 메뉴이동을 편히 할 것인지, 영상 컨텐츠 영역을 조금이라도 넓게 쓸 것인지는 유저의 선택에 맡긴 것이다. (But 사용자는 유튜브에 접속해 있는 동안물 흐르듯 무의식적으로두 가지 UI를 넘나든다. 나 또한 그랬음.)

 

 

 

 

2) 팝오버, 다이얼로그의 적극 사용

 

△ 동영상 추가 메뉴 (팝오버)

△ 고객센터 (다이얼로그)

 

유튜브 PC화면의 특징은 모바일과의 싱크로율에 있다. 핸드폰에서 접하던 컴포넌트를 데스크탑에서도 흡사하게 경험할 수 있게 옮겨다 놓았다. 그 특징 중 하나는 Material Design에 정의된 팝오버와 다이얼로그의 적극 활용이다. 추천 동영상 등 넓은 화면크기를 요구하는 개인화 메뉴를 제외하면, 이러한 웹 애플리케이션다움을 적극 어필하고 있다.

 

 

 

 

| 여담

 

개인적으로 모바일 시대 이전과 이후의 웹 UI의 가장 큰 차이점이라고 한다면, 기존에는 X값과 Y값 밖에 없던 평면에 Z값과 시간이라는 개념이 추가된 컴포넌트의 유무라고 생각한다. 플랫폼이라는 쌍방향 실시간 컨텐츠의 성격을 떠나서 순수하게 구조물 자체로서만 보자면, 이걸 디자인하는 디자이너에게조차 기존의 웹사이트는 인터랙션이 추가된 2차원 그래픽이라는 개념이 공고 했었다고 생각한다. (그렇지 않은 선구적인 사이트도 많았으나 그건 일종의 예술활동에 치우쳤지 실제 생활에 사용되는 사이트로는 인식되지 않았다.)

 

이러한 컴포넌트는 MS 워드같은 데스크탑 프로그램에서 흔히 볼 수 있는 전혀 특별할 게 없던 것이었지만, 일반 유저가 사용하는 웹사이트 프론트단에선 좀처럼 보기 힘든 것이었다. 그러나 점차 프로그램의 개념의 확장되고 경계가 허물어지고 있고 과거엔 디자이너들의 머릿 속 웹사이트는 프로그램과 별개의 Page라는 개념으로 인식 되었다면 현재는 프로그램의 세부장르로 받아들이게 되었다. 지금까지는 Product 라는 개념이 모바일 애플리케이션에 한정되어 있었다면 이제는 웹으로도 확장되고 있다.

 

트렌디의 최전선에 있는 모바일 UI와 달리, 전통적인 프로그램 UI 작업은 매니악한 저쪽 구석에서 그다지 멋지지도 크리에이티브하지도 않은 작업이란 인상이 큰데 그런 편견을 가지고 있어선 안 되겠단 생각이 든다. 웹 사이트도 웹 프로그램이라는 개념으로 접근하고 공부해야 할 것 같다.