모던 iOS 네비게이션 패턴 📱

Frank Rausch님의 블로그를 요역/의역한 글입니다. --- iOS 앱에서 흔히 보이는 네비게이션 패턴들에 대해 정리한 페이지입니다. 구조적 구조적 네비게이션은 고정된 형식으로 주로 여러 개의 계층으로 나뉘어져 있습니다. 사용자들은 계층의 구조를 어느 정도 예측할 수 있으며 원하는 계층으로 쉽게 돌아갈 수 있습니다. 예시로는, 드릴 다운, 플랫, 피라미드, 허브 앤 스포크 구조가 있습니다. 1. 드릴 다운 * 계층 별로 탐색할 수 있도록 트리 구조를 가짐 * 애니메이션은 주로 가로 움직임. 오른쪽으로 갈 수록 계층 깊숙이 감 * 드릴 다운 구조는 네비게이션 하는데 방해되는 요소가 없음 (ex. “정말 나가시겠습니까?” 같은 모달) * 네비게이션 바는 항상 현재 스크린의 이름을 표기함 * disclosure indicator (>) 는 더 탐색할 수 있음을 의미함 * 백 버튼 (<) 은 공간이 된다면 일반적인 “Back”보다 부모 스크린의 이름을 띄움 * 왼쪽에서 오른쪽으로 스와이프를 하면 백 버튼을 누른 것과 동일하게 동작함. 커스텀 제스처를 만들 경우 iOS 제스처 기준을 준수해야함 * 우횡서인 언어의 경우, 제스쳐와 레이아웃이 반대로 적용되어야함 * 트리 구조는 필요에 따라 동적으로 구성될 수 있음. 예를 들면, 음악 앱에서 앨범 스크린으로 이동하는 방법이 여러가지라도 모두 다 같은 앨범 스크린으로 이동할 수 있어야 함 2. 플랫 * 루트 레벨에서 구조를 나누고 보통 탭이나 사이드 바 형태로 나뉜 계층을 표시 함 * 탭/사이드 바 아이템은 주로 사용자가 앱에서 할 수 있는 앱의 주요 기능들로 나뉘어져 있음 * 탭/사이드 바 아이템 중 하나는 항상 선택된 상태임. 선택된 아이템이 현재 스크린에 무엇이 띄워져 있는지 알려줌 * 현재 선택된 아이템은 사용자의 상호작용 없이 바뀌지 않음 * 탭/사이드 바는 앱을 사용하는 모든 스크린에서 보여짐 * 탭/사이드 바는 필터 용도로도 사용 될 수 있음 * 각 섹션은 각자의 네비게이션 상태를 가지고 있음. ex) 탭 A와 탭 B는 서로 다른 네비게이션 상태를 가짐 * 탭/사이드 바 아이템은 항상 예상 가능한 방식으로 작동해야 함 * 2015년 쯤 탭/사이드 바 대신 쓰였던 햄버거 메뉴는 각 섹션이 감춰져 있어서 탐색 경험이 좋지 않음 3. 피라미드 * 피라미드 구조는, 부모 스크린으로 돌아가는 단계 없이, 같은 계층의 자매 스크린 간 네비게이션을 쉽게 할 수 있게함 * 가로 스와이프 제스쳐로 자매 스크린 간 이동함 * iOS 기본 사진 앱이 피라미드 구조. 사진 하나를 열면 좌우로 이동이 자유로움 * 페이지 컨트롤 요소를 사용해서 현재 위치가 어디쯤 인지 표시함. ex) 사진 앱 하단에 현재 사진이 목록에서 어디쯤인지 파란 테두리로 표시함. 4. 허브 앤 스포크 * 방대한 양의 서로 관련 없는 앱 컬렉션을 보여줄 때 많이 사용함. 앱을 전환할 때 항상 허브가 되는 메인 스크린으로 돌아와서 전환함. ex) iOS의 홈 화면 * 앱 내에서는 거의 사용하지 않음 오버레이 오버레이는 사용자의 관심이 필요할 때 많이 쓰입니다. 모달 오버레이는 사용자의 상호 작용이 있어야 사라집니다. 앱의 성격을 순간적으로 전환하며 모달 뒤에 보이는 요소는 블로킹 상태가 됩니다. 일반 오버레이는 앱을 블로킹 하지 않습니다. 1. High-Friction 모달 * 여러 선택지가 있는 시트, 얼럿 다이얼로그 등 사용자가 상호작용을 끝내기 전까지 뒤에 요소를 블로킹 함 * 선택을 해야 사라짐 * “취소” 버튼은 즉각적인 데이터 삭제로 이어지면 안됨 2. Low-Friction 모달 * 뒤에 요소를 블로킹 하지만, 양자택일 성격의 요소가 없는 모달 * 사라지게 하기 쉬운 성격을 가짐 * 단일 액션 얼럿은 사용자의 흐름을 방해해서 지양하는게 좋음. 대부분 일반 오버레이로 대체 가능함 3. 일반 * 스크린의 일부를 가리지만 뒤에 있는 요소를 블로킹하지 않음 * 앱 외부의 상호작용으로 트리거 될 수 있음. ex) 알림 * 자동으로 사라지는 요소라면 한눈에 필요한 정보를 전달 할 수 있어야함 * 선택적으로 상호작용 요소가 있을 수 있음. ex) 알림을 누르면 특정 스크린으로 이동 * 전체 앱을 블로킹하지 않고, 자동으로 보여지고/사리지지 않는다면 - 팔레트라는 이름으로도 불림. 엠베드 iOS의 구조적 모델을 준수하려면 엠베드 패턴은 좀 더 각별한 주의가 필요합니다. 주로, 모달이나 앱 내의 잘 정의된 특정 공간을 활용해 새로운 뷰에서 엠베드 패턴을 구현합니다. 1. 상태 변경 * 단일 뷰가 별다른 네비게이션 없이 여러가지 상태를 가질 수 있음. ex) 로딩, empty, 리스트 상태 * 단일 뷰의 상태 변화에 전체 화면 성격의 전환 애니메이션은 지양함 2. 단계별 * 여러 스크린을 선형적 흐름으로 연결 시키는 형태 * 드릴 다운과 다른 점은 앞뒤 스크린 이동이 구조적으로 다 같은 계층임 * 주로 “완료”나 “닫기”로 단계를 끝내고 원래 화면으로 돌아갈 수 있음 * 단계별 스크린 네비게이션은 사용자에게 피로감을 줄 수 있음 3. 컨텐츠 주도 * 하이퍼링크, 버튼 등으로 사용자를 특정 스크린으로 이동 시킬 수 있음. 웹 브라우저가 동작하는 방식 * iOS 앱에서 이런 패턴은 (특정 유즈케이스 외에) 지양해야 함 * 만약 사용해야 한다면, 브라우저 인터페이스로 엠베딩 하는 것이 좋음. 기존 네비게이션 구조에서 하이퍼링크를 통한 스크린 이동을 하게 되면, 네비게이션 구조가 꼬이기 때문에 사용자에게 혼란을 줄 수 있음 * 딥링크로 네비게이션 구조를 준수하면서 특정 스크린으로 이동 시킬 수 있음 --- 원글에 이해에 도움이 되는 그림들이 있으니 궁금하신 분들은 참고하세요 🙂 원글: https://frankrausch.com/ios-navigation#tidwell2020