brunch

You can make anything
by writing

C.S.Lewis

by 우디 Aug 05. 2019

내비게이션과 탭

앱을 사용하다 보면 탭과 내비게이션이 동시에 존재하는 UI가 있습니다. 탭은 보통 내비게이션 특정 메뉴에 귀속되는 경우가 많은데, 시각적 위계 차이를 잘 설정하지 못하면 내비게이션이 두 개처럼 보이는 경우가 있습니다.(여기서의 탭/내비게이션 구분은 ios/android를 따르지 않았습니다.)

개인적 애정으로 선택된 마켓 컬리

마켓 컬리로 보는 탭/내비게이션

국내 커머스 프로덕트 중 탭과 내비게이션이 공존하는 UI에서, 마켓 컬리의 경우 사용성이 좋은 편에 속한다고 생각합니다. 이를 바탕으로 탭과 내비게이션을 가르는 오래된 정의들을 따라가다 보니 아래와 같은 형태로 정의되었습니다.

Tab : 서로 관련 있는 것들끼리의 논리적 묶음. 유저는 관습상 탭 내 다른 메뉴를 클릭하면 페이지는 전환되지만 의미상 유사한 페이지로 이동할 것이라 예측. 탭에서는 메뉴 간 연속성이 중요하기 때문에 만들어낸 신조어로 탭명을 사용하는 것은 지양.

Navigation : 내비게이션 메뉴들은 탭과 달리 의미상 확연히 다른 페이지로 이동할 것이라 예측. 메뉴 간 연속성이 있으면 오히려 혼란의 가능성 야기. 아이콘 형태의 경우 관습성을 이용하는 것을 권장.

유저 머릿속에서 추상화되는 탭과 내비게이션

마켓 컬리 유저가 상하단을 각기 탭/내비게이션 영역으로 인식하려 한다면, 탭은 연속성 있는 논리적 묶음으로, 내비게이션은 개별적 링크를 가진 단독성 강한 페이지로 인식한다는 가설을 세울 수 있습니다. 유저 입장에서 탭/내비를 인식하는 형태를 위와 같이 추상화시킬 수 있을 것 같습니다. 특히 탭 간 이동에 사용된 슬라이드 애니메이션은, 상품 큐레이션이라는 논리적 묶음의 강한 시각적 단서가 되기도 합니다.

상황은 다르지만 SSGPAY의 경우도 살펴볼 만합니다. SSGPAY는 햄버거 메뉴 속 수많은 메뉴가 삽입되어 있습니다. 노출된 메뉴 4개는 사실상 프로덕트의 킬러 콘텐츠라고 느껴집니다. 그렇기 때문에 탭이나 내비게이션으로 정의되기 어려운 점이 있습니다. 메뉴 4개를 혜택적 성격이 강한 묶음이라고 할 수 있겠지만, 탭이라기엔 메뉴 간 예측 가능성이 떨어집니다. 이러한 측면을 활성화 밑줄과 메뉴 간 슬라이딩 애니메이션이 탭처럼 보이게 보완해주는 것 같습니다.

밑줄과 슬라이드 애니메이션은 탭처럼 느껴지는 강한 시각적 장치입니다.

명칭과 레이아웃과 공간 기억

유저는 대체로 명칭과 레이아웃을 연결해 공간 기억(Spatial Memory)화 시키려는 경향이 있습니다. 공간 기억 차원에서 마켓 컬리 탭 내 레이아웃은 3가지 패턴으로 나뉩니다. 탭명과 레이아웃이 시각적으로 쉽게 연결되어, 앱 종료 후에도 구조가 선명히 기억에 남습니다. 다만 신상품-베스트-알뜰 쇼핑 간 레이아웃 차이가 아예 없어, 탭 간 이동하고 있다는 느낌이 떨어지는 경향이 있습니다.

내비게이션 시각 경향성

평소 내비게이션 사용성이 좋다고 생각했던 프로덕트 5개를 기준으로, 내비게이션 높이 값을 비교해보았습니다. 상단 탭이 없는 에어비앤비 빼고는 모두 50 이하 픽셀을 유지하고 있었습니다.

내비게이션 높이 값 경향성

데일리 호텔의 경우 아이콘/글자 스케일감이 상대적으로 4개에 비해 작습니다. 하지만 활성화 상태를 색면으로 처리, 시각 비중을 커 보이게 한 점이 눈에 띕니다. 마켓 컬리의 경우 활성화 상태 퍼플 컬러의 명도가 비활성화 상태의 회색도와 크게 차이 나지 않아 식별성에서 조금 아쉬웠습니다. 이 사례에는 없지만 대부분 내비게이션 비활성화 상태는 회색도에서 판가름 나기에 포인트로 고명도 컬러는 지양하는 편이 나을 듯합니다.(명시도 역전 현상이 일어남)