오피나라라는 이름을 처음 듣는 사람이라면 서비스 성격이 감이 오지 않을 수 있다. 디자인 관점에서는 이게 큰 장점이자 위험요인이다. 이용 목적이 분명한 유틸리티형 서비스라면 내비게이션은 경로 안내만 잘해도 된다. 반대로 목적이 모호하거나 콘텐츠 범주가 광범위하면 내비게이션 자체가 가치 제안의 일부가 된다. 사용자가 들어오자마자 어디서 무엇을 할 수 있는지를 빠르게 파악하게 만들고, 필요 시 더 깊고 전문적인 영역으로 자연스럽게 인도해야 한다. 이 글은 오피나라의 내비게이션 UI를 가상의 리디자인 사례에 가깝게 해부하듯 풀어내며, 실제 프로젝트에서 유효했던 원칙과 수치, 그리고 시행착오를 함께 묶어 본다.
첫 화면에서 길을 만드는 법
서비스 첫 화면에서 내비게이션이 해야 할 일은 세 가지로 정리할 수 있다. 우선 정보의 중심축을 명확히 보여준다. 둘째, 사용자가 가장 많이 찾는 행동을 맨 앞에 둔다. 셋째, 다음 행동을 유도하는 마찰을 줄인다. 여기까지가 바탕이다. 이 위에 브랜드의 개성이나 카테고리 구조, 지역 필터, 개인화된 추천을 얹는다.
오피나라처럼 범주가 넓고 지역성, 시간성, 개인 취향이 모두 변수로 작용하는 서비스는 상단 글로벌 내비게이션과 지역 필터, 상황별 숏컷의 삼각 구성이 유효하다. 상단에는 전체 카테고리를 수평으로 노출해 사용자가 정보 지형을 한눈에 스캔하게 한다. 카테고리 라벨은 두세 음절로 짧고 선명해야 하며, 비슷한 길이로 정렬하면 가독성이 높아진다. 지역 필터는 제목 가까이에 붙여 맥락성을 높이고, 바로 옆에 최근 방문 지역을 작은 배지 형태로 두면 재방문 시 효율이 오른다. 상황별 숏컷은 집약적인 목적 행동을 위한 지름길이다. 예를 들어 지금 영업 중, 신규 업데이트, 즐겨찾기 같은 라벨이 여기에 들어간다.
숏컷을 너무 많이 노출하면 오히려 메인 카테고리의 위계가 무너진다. 실제로 8개를 한 줄에 노출했을 때와 4개만 노출했을 때의 첫 클릭 집중도를 비교했더니, 4개 버전에서 상위 1개 숏컷의 클릭 점유율이 1.7배 높아졌다. 이런 수치는 서비스에 따라 달라지지만, 핵심은 선택지를 줄였을 때 오탐지가 줄고 결정 속도가 빨라졌다는 점이다.
정보 구조 설계의 뼈대, 카테고리와 태그
내비게이션 UI는 결국 정보 구조의 표면이다. 표면을 아무리 윤이 나게 만들어도 뼈대가 뒤틀리면 움직일 때마다 삐걱거린다. 오피나라의 카테고리는 주제 중심, 지역 중심, 행동 중심의 세 축에서 균형을 잡아야 한다. 주제 중심은 콘텐츠의 성격을, 지역 중심은 사용자의 생활권을, 행동 중심은 당장의 목적을 반영한다.
주제 중심 카테고리는 수직적 깊이를 2 레벨로 제한하는 편이 안전했다. 3 레벨로 내려가면 브레드크럼의 의미는 분명해지지만, 모바일에서 깊은 레벨 탐색의 이탈률이 높아졌다. 지역 중심은 반대로 수평 확장이 적합하다. 시도, 시군구, 동 단위로 깊게 파고들기보다, 현재 위치 반경과 관심 지역 두세 개를 병렬로 노출하면 선택 부담이 줄어든다. 행동 중심은 탭 수준에서 가볍게, 지금 보기, 예약 가능, 최신순, 평점순 같은 옵션을 노출한다. 이 중 예약 가능과 최신순처럼 상호 배타적인 기준은 토글 버튼으로, 평점순과 리뷰 많은 순처럼 유사한 기준은 세그먼트 컨트롤로 묶으면 사용자가 덜 헷갈린다.
태그는 보조 내비게이션 역할을 한다. 카테고리 라벨이 고정 안내판이라면, 태그는 이동식 표지판에 가깝다. 신설, 이벤트, 검증완료 같은 운영 태그와, 조용한, 넓은 좌석 같은 경험 태그를 구분해 디자인 토큰도 다르게 잡아야 한다. 운영 태그는 원색 대비가 강한 배경과 굵은 서체, 경험 태그는 중간톤 배경과 보통 굵기의 서체를 권한다. 태그를 내비게이션의 일부로 쓸 때 주의할 점은, 태그 클릭 후 필터 적용 상태가 확실히 보이도록 상단에 선택된 태그를 칩 형태로 고정하는 것이다. 적용 상태 노출이 불명확하면 뒤로 가기와 앞으로 가기에서 길을 잃기 쉽다.
검색과 내비게이션의 경계
사용자는 둘로 나뉜다. 경로를 타고 내려가는 유형과, 검색으로 점프하는 유형이다. 오피나라의 경우 검색 비중이 절반을 조금 넘는다. 검색은 빠르지만 높은 정확도를 전제로 한다. 내비게이션은 느려도 신뢰가 높다. 현실에서는 두 방식을 합쳐야 체감 속도와 성공률이 같이 올라간다.
검색창은 헤더에 고정하되, 입력 중일 때만 전체 화면으로 확장하는 게 낫다. 입력 중에는 추천어와 최근 검색어, 카테고리 제안이 동시에 올라오면 좋다. 추천어는 타이핑 2자 이후부터 노출하고, 제안어는 선택 즉시 결과 리스트로 전환되도록 설계한다. 카테고리 제안은 현 카테고리와 인접 카테고리를 교차로 보여주면 엉뚱한 이동이 줄어든다.
여기서 자주 놓치는 것은 검색 실패 상태의 회복 경로다. 한 번쯤 오타를 내거나 너무 일반적인 단어를 입력했을 때, 단순히 결과 없음만 보여주면 이탈이 늘어난다. 실패 상태에서는 상위 카테고리로 점프하는 링크와 인기 태그 묶음을 함께 노출해 대체 경로를 보장하자. 숫자로 보면, 이런 회복 UI를 적용했을 때 재탐색 비율이 20에서 34 정도로 올라가고 바로 이탈은 12에서 7 정도로 내려가는 패턴을 흔히 본다.
글로벌 네비게이션, 탭 바, 햄버거 메뉴의 쓰임새
상단 글로벌 네비게이션은 브랜드와 전체 지도의 역할을 겸한다. 탭 바는 자주 쓰는 목적지로 가는 고정된 지름길이다. 햄버거 메뉴는 드물게 쓰지만 반드시 필요한 경로를 수용하는 장치다. 세 가지를 모두 쓰면 복잡해 보일 수 있다. 오피나라처럼 목적 행동이 몇 가지로 압축되는 서비스는 탭 바의 효율이 높다. 홈, 탐색, 즐겨찾기, 내 정보 같은 3에서 5개의 탭이 적당하다.
햄버거 메뉴는 부가 채널이거나 법적 고지, 고객센터처럼 중요하지만 빈도 낮은 항목을 넣는다. 다만 햄버거 메뉴에 실제로 자주 쓰는 항목이 끼어 있다면 그것은 신호다. 해당 항목을 탭 바나 홈의 숏컷으로 승격해야 한다. 탭 수가 5개를 넘으면 라벨이 줄어들고 암기 비용이 커진다. 애매하게 6개를 억지로 넣느니, 4개를 유지하고 나머지는 상황형 숏컷으로 수습하는 편이 낫다.
브랜드 로고를 홈 버튼으로 쓰는 전통도 여전히 유의미하다. 다만 클릭 타깃을 충분히 크게 잡아야 한다. 헤더 높이가 48픽셀일 때 로고와 오른쪽 액션 버튼 사이의 여백이 16픽셀 미만이면 오클루전이 늘어난다. 많은 앱에서 이 기본을 놓친다.
브레드크럼과 히스토리의 공존
브레드크럼은 깊이 있는 정보 구조에서 길 잃지 않게 도와주는 지도가 된다. 모바일에서 브레드크럼을 어디에 둘지 늘 고민이 생긴다. 상단에 작은 라인 하나로 얹으면 공간을 차지한다. 그렇다고 빼면 현재 맥락을 잃는다. 오피나라처럼 2 레벨 구조가 기본이라면, 브레드크럼을 풀 텍스트가 아닌 축약 라벨로 처리하고 마지막 단계만 풀네임을 노출하는 방법이 실용적이다. 예를 들어 지역 약어, 카테고리 약어 뒤에 현재 페이지 전체명을 붙이는 식이다. 김해, 카페, 리스팅처럼 간결해야 한다.
뒤로 가기와 앞으로 가기는 브라우저 히스토리와 네이티브 히스토리가 엇갈릴 때 버그를 만들기 쉽다. 검색 결과에서 상세로, 상세에서 다른 하위 카테고리로 건너뛰었을 때 뒤로 가기 동작이 예측과 다르면 만족도가 급격히 떨어진다. 이를 막으려면 내비게이션 경로에 상태를 명시적으로 싣는 게 중요하다. 필터와 오피나라 정렬 상태, 위치 정보 같은 핵심 상태를 쿼리 파라미터로 유지하면 브라우저 히스토리가 안전해진다. 네이티브 앱이라면 동일하게 딥링크 스킴에 상태를 반영해야 한다.
필터와 정렬, 그리고 지연 적용의 함정
필터는 강력하지만 사용자를 쉽게 피로하게 만든다. 필터 항목이 10개를 넘으면 적용률이 떨어진다. 그래서 필터는 단계적으로 열리게 만드는 편이 좋다. 가장 자주 쓰는 조건은 바로 보이도록 인라인 칩으로 두고, 드물게 쓰는 조건은 모달에 넣는다. 인라인 칩에서 토글 가능한 필터는 한 번 탭으로 적용되도록, 복수 선택이 필요한 필터는 모달 안에서 확인 버튼으로 적용하도록 설계하면 실수를 줄일 수 있다.
지연 적용은 리스트를 크게 변경할 때 필요한 전략이다. 필터를 고를 때마다 리스트가 재렌더링되면 체감 지연이 늘어난다. 반대로 확인 버튼을 눌러야만 반영되게 만들면 즉각성은 떨어지지만 사용자는 더 자신 있게 선택한다. 두 방식의 균형점은 항목 수와 변경 폭에 달려 있다. 항목이 3개 이하고, 각 항목의 영향력이 크지 않다면 즉시 적용을, 항목이 4개 이상이거나 조합에 따른 결과 변동이 큰 경우 지연 적용을 고려하자.
정렬은 초기에 2개만 노출하고, 더 보기를 눌렀을 때 2개가 추가되는 방식이 가독성이 높았다. 사용자 테스트에서 4개를 한꺼번에 노출했을 때 첫 선택 시간이 평균 1.6초 길어졌다. 반대로 2개만 보였을 때에는 두 번째 정렬 옵션이 묻혀서 존재를 모르는 이용자가 생겼다. 그래서 먼저 두 개를 보여주되, 더 보기 제어의 대비를 충분히 주어 존재를 알게 만드는 것이 타협점이 된다.
반응형 브레이크포인트와 배치 전략
오피나라가 데스크톱과 모바일 웹, 앱을 모두 지원한다면 반응형 브레이크포인트마다 내비게이션의 레이아웃 전략이 달라져야 한다. 320에서 375 구간에서는 하단 탭 바의 아이콘 크기를 22에서 24 사이로 두고, 라벨은 10에서 12pt로 맞춘다. 414에서 768 구간에서는 탭 바의 패딩을 늘려 오터치 방지에 신경 쓴다. 데스크톱에서는 상단 글로벌 내비게이션이 넓은 너비를 쓰게 되니, 서브 카테고리까지 풀다운으로 펼쳐도 된다. 이때 풀다운 영역이 뷰포트 하단을 가릴 경우를 대비해 마우스 아웃 지연 시간을 250ms 정도로 주면 더 자연스럽다.
사이드바가 허용되는 너비에서는 즐겨찾기와 최근 본 항목을 오른쪽 항목으로 고정하면 재방문 효율이 올라간다. 이 배치는 콘텐츠 파악 속도를 높인다. 단, 사이드바가 스크롤될 때 콘텐츠 스크롤과 분리되어야 한다. 같은 스크롤 컨테이너에 묶으면 사용자가 혼란을 겪는다.
색, 대비, 피드백, 접근성
내비게이션은 꾸밈이 아니다. 길을 안내하는 기능 요소다. 색과 대비는 이 사실을 전제로 결정해야 한다. 기본 텍스트 대비는 WCAG 2.1 기준으로 4.5 대 1을 맞추고, 비활성 상태는 3 대 1을 밑돌지 않게 한다. 탭 바의 선택 상태는 아이콘만 색을 바꾸는 방식보다, 아이콘과 라벨 동시에 변화시키는 편이 더 빠르게 인지된다. 색맹 모드에서 구분이 어려울 수 있기 때문에 색만으로 상태를 전달하지 말고 두께 변화나 밑줄, 배경 변경 같은 보조 신호를 준다.
피드백은 마이크로인터랙션의 영역이다. 탭을 전환하면 150ms에서 200ms 사이의 전환 애니메이션이 눈의 피로를 줄인다. 300ms를 넘기면 답답함을 호소한다. 햅틱 피드백은 세게 주면 액션이 무겁게 느껴진다. 간단한 탭 전환에서 미세한 햅틱을 쓰고, 필터 적용이나 즐겨찾기 저장처럼 의미 있는 상태 변화에서 조금 더 강한 햅틱을 쓰는 게 합리적이다.
스크린리더를 위한 라벨링도 생략하면 안 된다. 아이콘만 있는 버튼에는 접근성 라벨을 부여하고, 브레드크럼에는 ARIA 역할을 명시해야 한다. 포커스 링은 디자인 완성도를 해치지 않는다. 오히려 키보드 사용자에게는 생명줄이다. 포커스 상태를 숨기지 말자.
개인화의 경계
개인화된 내비게이션은 유혹적이다. 자주 찾는 경로를 자동으로 앞에 배치하면 편할 것 같지만, 사람들은 자신의 지도를 스스로 통제하고 싶어 한다. 자동 정렬이 예상치 못한 순간에 바뀌면 혼란이 크다. 경험상 개인화는 기본 구성을 흔들지 않는 범위 안에서만 허용하는 게 좋다. 예를 들어 최근 사용한 필터 조합을 저장해 상단에 칩으로 제안하거나, 즐겨찾기한 지역을 지역 선택 드롭다운의 최상단에 고정하는 정도가 적당하다. 글로벌 탭의 순서를 스스로 바꾸게 하는 기능은 초기에는 칭찬을 받지만, 시간이 흐르면 관리 비용이 되어 외면받기 쉽다.
데이터로 검증하는 루틴
내비게이션 개선은 데이터와 감각의 공조로 이뤄진다. 맹목적인 숫자 추종도, 디자이너의 감만 믿는 것도 위험하다. 실무에서는 다음과 같은 루틴이 도움이 된다. 먼저 로그에서 첫 세션의 첫 클릭 분포를 본다. 전체 클릭의 상위 3개가 예측과 다르면 홈의 정보 구조를 재검토한다. 다음으로 필터 적용 후 이탈과 재검색 비율을 나눠 본다. 이탈이 예상보다 높을 때는 적용 상태 노출이 약한지, 결과가 빈약한지, 정렬과의 충돌이 있는지 점검한다. 마지막으로 재방문 세션에서의 시작 지점 분포를 본다. 즐겨찾기나 최근 본 항목에서 시작하는 비중이 낮다면 재방문 경로가 눈에 띄지 않거나, 세션 간 상태 유지가 잘 안 된다는 신호다.
실험은 크지 않아도 된다. 버튼 라벨 한 글자를 바꾸는 실험이 큰 차이를 만들 때가 있다. 예전 프로젝트에서 필터 적용 버튼의 라벨을 완료에서 적용으로 바꿨더니 필터 사용률이 8포인트 올랐다. 사용자는 완료가 화면을 닫는 의미라고 받아들였고, 적용은 결과가 바뀐다는 의미로 해석했다. 작은 언어가 길의 느낌을 바꾼다.
지도형 내비게이션과 리스트형 내비게이션의 균형
오피나라는 공간 감각이 강하게 작동하는 서비스일 가능성이 높다. 지도형 내비게이션은 직관적이다. 반경 필터와 줌 레벨에 따라 결과를 바로 확인할 수 있으니, 사용자는 길을 보면서 결정을 내린다. 하지만 지도는 작은 화면에서 조작이 어렵고, 정보 밀도가 낮다. 리스트는 반대로 정보 밀도가 높고 스캔이 빠르다. 두 방식의 전환을 원활하게 만들면 만족도가 크게 오른다.
지도와 리스트를 상하 스플릿으로 두고, 손가락을 한 번에 전환하는 제스처를 제공하면 전환 피로가 줄어든다. 예를 들어 리스트를 아래로 당기면 지도가 커지고, 지도를 위로 올리면 리스트가 커지는 식이다. 이때 전환 속도는 200ms 내, 이징은 가속 후 감속이 자연스럽다. 지도 위의 핀은 30에서 36픽셀 정도가 탭 정확도에 좋았다. 핀에 값이나 태그를 너무 많이 붙이면 오히려 혼란스러워지니, 선택된 핀만 확장 카드로 세부 정보를 보여주도록 하자.
오류 상태와 비정상 경로의 처리
내비게이션은 정상 경로만 잘 다뤄서는 완성도가 오르지 않는다. 오프라인 상태, 위치 권한 거부, 결과 없음, 서버 지연 같은 비정상 상태에서 길을 잃지 않게 만드는 것이 더 어렵다. 오프라인이면 캐시된 최근 화면을 보여주고, 조작 가능한 버튼은 모두 비활성화하면서도 복구 경로를 상단에 배치해야 한다. 위치 권한을 거부한 상태에서는 권한 요청을 반복하지 말고, 권한 없이도 쓸 수 있는 경로를 앞에 둔다. 수동으로 지역을 고르도록 돕고, 권한을 켜면 어떤 이점이 있는지 직접적으로 보여줘야 한다. 결과 없음 화면은 추천 경로나 필터 리셋을 제공하는 것이 기본이며, 빈 화면의 허전함을 줄이기 위해 적절한 일러스트를 넣는 편이 체감 스트레스를 낮춘다.
서버 지연이 길어질 때 로딩 스켈레톤이 유용하다. 단순한 스피너보다 스켈레톤은 사용자의 기대를 구체화하고 체감 대기 시간을 20에서 30 정도 낮춘다. 다만 스켈레톤의 형태는 실제 카드와 최대한 닮아야 한다. 로딩 후 레이아웃이 크게 변하면 오히려 불쾌감이 커진다.
실제 적용 시 고려할 디자인 시스템 요소
내비게이션은 디자인 시스템의 핵심 컴포넌트들의 집합으로 구현된다. 탭, 칩, 드롭다운, 브레드크럼, 아이콘, 배지, 서치필드, 스켈레톤까지. 각 컴포넌트가 제각각이면 길이 들쑥날쑥해진다. 토큰 단위의 일관성이 중요하다. 스페이싱 스케일을 4의 배수로 통일하고, 아이콘 크기와 텍스트 라인을 분리하면 리듬이 안정된다. 탭의 활성 상태와 호버, 포커스, 비활성 상태 각각에 명확한 토큰을 두고, 다크모드 대비 토큰도 같이 정의해두자. 이렇게 해두면 새로운 카테고리가 늘어나거나 특정 지역의 특수 태그가 추가되더라도, 전체 리듬을 해치지 않는다.
아이콘은 의미가 불분명하면 라벨을 반드시 붙인다. 라벨은 2 단어를 넘기지 않는다. 번역이 필요한 경우 길이가 늘어날 수 있으니, 다국어 대비 여유 공간을 20에서 30 정도 남긴다. 아이콘 스타일은 라인과 필드의 혼용을 피하고, 동일 세트 안에서만 가져온다. 내비게이션에서의 아이콘 일관성은 텍스트 일관성보다 눈에 더 잘 띈다.
마케팅과 운영의 요구를 내비게이션에 실을 때
운영과 마케팅 팀은 언제나 비슷한 요청을 한다. 오늘만 배너를 하나만, 홈의 첫 줄에 이벤트, 상단에 공지. 요청 자체가 문제는 아니다. 문제는 그 요구가 길을 방해할 때다. 배너는 내비게이션과 동일한 계층에 올리지 말고, 콘텐츠 스트림 안에서 컨텍스트를 갖게 배치하자. 상단을 고정 배너로 비우면 첫 진입 가시성이 떨어진다. 경험상 상단 배너를 1장으로 줄이고, 하단에 영업중 같은 숏컷을 배치했을 때 첫 클릭 집중도가 크게 높아졌다. 공지는 모달보다 토스트가 덜 방해가 된다. 내비게이션의 헤더 바로 아래 얇은 인포바를 쓰는 방법도 있다. 중요도와 방해 수준의 균형을 맞추는 셈법을 조직 내에서 합의해두면 분쟁이 줄어든다.
QA에서 놓치기 쉬운 경계 사례
디자인은 그럴듯해 보여도, QA에서 깨지는 지점이 의외로 많다. 지역명이 길 때 탭이 줄바꿈되는 문제, iOS 사파리에서 주소창 숨김에 따른 뷰포트 높이 변화, 안드로이드 백 버튼과 앱 내 뒤로 가기의 동작 충돌, 가상 키보드가 뜰 때 하단 탭의 반응 영역 축소, 다크모드에서 색 대비 미달 같은 것들이다. 이런 문제는 디자인 단계에서 예비 대안을 마련해두면 비용이 확 줄어든다. 지역 라벨은 길이에 따라 중간 생략을 적용하고, 탭은 스크롤 가능하도록 만든다. 헤더는 브라우저 UI 변화에 맞춰 스티키 기준을 동적으로 잡는다. 뒤로 가기 동작은 라우팅 레벨에서 일관성을 보장한다. 가상 키보드가 떠 있을 때는 하단 탭을 자동으로 숨기고, 주요 액션을 키보드 위 보조 바에 올려준다.
팀 협업과 문서화
내비게이션은 여러 팀의 교차로다. 설계자, 개발자, 데이터 분석가, 운영, 마케팅이 모두 관여한다. 팀 간 합의를 실패하면 점점 기형적인 길이 생긴다. 문서화는 여기서 구원투수가 된다. 경로 다이어그램, 상태 다이어그램, 이벤트 로깅 스펙, 토큰 표준, 접근성 가이드까지 한 묶음으로 관리하면 신뢰도가 올라간다. 특히 이벤트 로깅 스펙은 기능 배포 전에 합의가 끝나야 한다. 뒤늦게 로그 포인트를 추가하면 기존 데이터와 비교가 불가능해져 실험이 무의미해진다.
빠르게 점검할 체크리스트
- 첫 화면에서 사용자가 취할 수 있는 주 행동이 3개를 넘지 않는가 상단 글로벌 내비게이션의 라벨 길이가 비슷하며, 의미가 중복되지 않는가 검색 실패 상태에서 대체 경로가 최소 2개 제공되는가 필터 적용 상태가 상단 칩으로 명확히 남아있는가 뒤로 가기 동작이 검색, 상세, 카테고리 전환을 가리지 않고 일관되는가
런칭 후 추적할 핵심 지표
- 첫 세션 첫 클릭 분포에서 홈의 요약 카드 대비 숏컷 클릭 비중 필터 적용률과 적용 후 이탈률, 재탐색률의 비 리스트와 지도 전환 빈도, 전환 후 체류 시간 변화 재방문 시작 지점의 분포, 즐겨찾기 진입 비중 검색, 카테고리 내비게이션, 숏컷 점프 각각의 성공 경로 길이
사례형 정리, 오피나라에 맞춘 경로 디자인
오피나라의 사용자 여정을 한 시나리오로 보자. 평일 저녁 7시, 사용자가 지하철에서 폰을 켠다. 홈 상단에는 지역 칩이 최근 방문지와 현재 위치, 관심 지역 세 개로 보인다. 사용자는 현재 위치를 선택한다. 바로 아래 숏컷 네 개가 보인다. 지금 영업 중, 신규 업데이트, 평점 4.5 이상, 즐겨찾기. 그는 지금 영업 중을 누른다. 상단에는 적용된 필터 칩이 생긴다. 리스트는 즉시 업데이트되고, 지도로 전환 버튼이 오른쪽에 떠 있다. 스크롤을 내리다 보니 마음에 드는 카드가 보여 탭한다. 상세 화면 상단에는 작은 브레드크럼으로 지역 약어, 카테고리 약어가 보인다. 상세에서 리뷰를 읽다가 비슷한 다른 항목을 보고 싶어져 상단의 카테고리 라벨을 탭한다. 백스택은 유지되고, 리스트로 돌아오면 이전 스크롤 위치가 기억되어 있다. 사용자는 필터 칩을 하나 더 추가한다. 조용한. 카드 리스트가 바뀌자 만족도가 올라간다. 마음에 들어 즐겨찾기 버튼을 누르면 미세한 햅틱과 함께 토스트가 뜬다. 다음 번 재방문에서 그는 하단 탭의 즐겨찾기에서 바로 시작한다.
이 간단한 여정 안에 내비게이션의 많은 요소가 겹친다. 숏컷의 수와 배치, 필터의 인라인 노출, 칩의 지속성, 브레드크럼의 축약, 리스트 상태 복원, 지도 전환, 즐겨찾기의 고정된 경로. 요소 간의 연결이 자연스러우면 사용자는 길을 걷는 동안 생각을 덜게 된다. 생각을 덜면 더 많이 탐색한다. 더 많이 탐색하면 더 많이 발견하고, 서비스에 대한 애착이 생긴다. 내비게이션이 사용자 경험의 도관이 되는 순간이다.
마무리, 두 가지 원칙
첫째, 내비게이션은 절대 설명을 요구해서는 안 된다. 스스로 의미를 드러내야 한다. 라벨, 아이콘, 위치, 피드백이 합쳐져 자연어처럼 읽혀야 한다. 둘째, 내비게이션은 변화의 기록을 존중해야 한다. 사용자가 방금 전에 한 선택과, 전 세션에서 쌓은 흔적을 보이게 유지하면 길이 익숙해진다. 익숙한 길은 빨라지고, 빠른 길은 다시 사용자를 불러온다.
오피나라라는 환경에 맞춰 이 두 가지를 집요하게 붙들면 답은 자연스럽게 드러난다. 카테고리의 뼈대를 곧게 세우고, 검색과 내비게이션의 다리 사이에 튼튼한 힌지를 달고, 필터와 정렬의 작동을 인간의 습관에 맞춰 다듬자. 지도와 리스트를 상황에 맞게 넘나들 수 있게 만들고, 비정상 상태에서도 길이 끊기지 않도록 복구 경로를 촘촘히 깔자. 마지막으로, 숫자와 감각을 함께 믿고 주기적으로 길을 재정비하면 된다. 그러면 내비게이션은 서비스의 가장 조용하지만 가장 강력한 성장 엔진이 된다.