#08. 내비게이션UI(3)-스프링보드,갤러리,리스트
서비스 종류에 맞는 메인 화면 선택
#08. 내비게이션UI(3)-스프링보드,갤러리,리스트
내비게이션 UI의 대표적인 스타일인 탭과 사이드 드로어 외의 내비게이션 UI로 스프링보드, 리스트, 갤러리를 살펴보며 내비게이션 UI에 대한 지겨운 포스팅은 마무리 지으려고 한다 ^^
1. 스프링보드(Springboard)
스프링보드 혹은 런치패드(launchpad)라고도 불리는 내비게이션 패턴은 그리드 형태에 기반한 UI며, 모든 플랫폼에서 잘 작동되는 장점을 갖고 있어서 2011년에는 대표적인 내비게이션 형태였다(https://goo.gl/W356CT). (스프링보드는 원래 iOS 홈스크린을 관리하는 표준 애플리케이션을 지칭하는데 본래의 그리드 모양을 착안하였기에 모바일 애플리케이션에서도 같은 이름으로 불리는 듯)
2011년 페이스북의 스프링보드 UI페이스북도 2011년 당시에는 스프링보드 형태의 내비게이션 UI를 사용하였다. 화면 하단에 점으로 표현된 페이지 인디케이터(paging indicator)를 추가함으로써 접근 가능한 메뉴의 수를 확장했다.
탭과 스프링보드 UI를 함께 사용하는 FoursquareFoursquare는 탭과 스프링보드를 함께 사용한다. 상단 탭의 추가 메뉴를 터치하면 스프링보드 형태로 다양한 카테고리가 제시된다.
배달의 민족, 여기어때, 굿닥 어플한국의 서비스들은 탭 + 스프링보드 형태의 UI를 많이 사용한다. 배달의 민족, 여기 어때는 광고 영역인 배너, 스프링보드, 탭 바를 첫 화면에 제시하며, 굿닥은 탭 바대 신 사이드 드로어를 사용한다. 첫 화면으로 스프링보드 UI를 적용하면 잘 정리되어있다는 느낌을 제공함과 동시에 서치를 즉각적으로 유도하는 효과가 있는 반면 콘텐츠가 실시간으로 업데이트된다는 느낌은 적다. (이는 뒤에서 살펴볼 갤러리 UI와 대비되는 효과를 갖는다.)
2. 리스트(List Menu)
스프링보드와 유사하게 어느 메뉴로도 이동이 가능한 내비게이션 UI인 리스트. 설정을 눌렀을 때 나타나는 화면이 대표적이다.
내비게이션 UI로 리스트를 사용하는 설정 메뉴애플리케이션에서는 리스트 메뉴가 주 내비게이션 UI로 사용되는 경우는 거의 드문 듯하다. 오히려 리스트는 햄버거 메뉴(사이드 드로어)를 눌렀을 때 출연하는 보조 내비게이션 UI로 자리 잡은 듯.
3. 갤러리(Gallery)
갤러리는 뉴스, 맛집, 사진과 같은 콘텐츠들을 실시간으로 제시하는데 바둑판 식으로 이미지가 나열된 (1) 그리드 형과 슬라이드 형태도 이미지를 보여주는 (2) 캐러셀(carousel) 형으로 분류할 수 있다. 그리드형 갤러리가 나열식으로 콘텐츠를 보여준다면 캐러셀형은 콘텐츠의 분류가 가능하다.
(좌)그리드형 갤러리 핀터레스트 /(우)캐러셀형 갤러리 에어비앤비갤러리 형태는 자주 업데이트되는 콘텐츠에 적합하다. 그래서 같은 음식과 관련된 앱이라고 할지라도 맛집을 보여주는 '망고플레이트'의 경우에는 갤러리 형태의 UI를, 음식 주문을 하는 '배달의 민족'의 경우에는 스프링보드형의 UI를 택하고 있는 것을 확인할 수 있다. 나아가 제작자가 골라서 콘텐츠를 제시하는 큐레이션 형태의 서비스에는 갤러리가 사용자가 직접 검색하는 행위가 주가 되는 서칭 중심의 서비스에는 스프링보드 형태가 더 적합하다고도 볼 수 있다.
(좌)갤러리형 망고플레이트 / (우)스프링보드형 배달의 민족이 정도면 지난 포스팅에 이어( 탭 바와 사이드 드로어 ) 걸쳐 모바일 애플리케이션 메인화면에 등장하는 내비게이션 UI 들은 대부분 살펴본 듯하다. 서비스의 목적이 무엇이냐, 어떤 주기능을 제공할 것인가, 메뉴의 기능과 구조가 무엇인가를 총체적으로 살펴 내비게이션 화면의 패턴을 선택해야지 요즘 카드 형태가 유행이라고 무조건적으로 갤러리 형태를 적용하는 등의 행위는 지양해야 할 것이다.
내비게이션을 설명한답시고 질질 끌어온 경향이 없지 않아 있는데~ 그 내용은 그리 딱딱하지도 않은데 딱딱한 틀에 맞추어 쓰려니 내가 지겹고 지친다 ㅜㅜ 고로 다음부터는 좀 더 캐주얼하고 쉽게 쉽게 던지는 형태로 풀어갈 예정 ㅋㅋ
