쉬프트 공부방

쉬프트 공부방

네비게이션, 모달

슆공부·2022년 7월 2일

0

💡 네비게이션과 모달, 왜 알아야 해?

앱에서 제공해주고 싶은 기능은 많고,
각 기능은 여러 화면을 통해서 기능을 제공해줌
화면 전환간에 사용 context 깨지지 않게 잘 전달하고 싶음
결국, 사용자가 서비스 제공자의 의도를 잘 인지하게 도와주고, 앱 사용성을 쉽게 이해하게 도와주기 위해서

💡네비게이션과 모달, 좀 더 자세하게 얘기해봐

HIG(Human Interface Guideline) 에서는 크게 두가지 카테고리를 나누어서 화면전환을 설명해주고 있음

첫째, Modality

모달은 사용자에게 일시적으로 집중을 요하는 컨텐츠 표시할때 사용
따라서, 사용자에게 모달로 띄운 화면이 중요하고, 필요한 경우 액션이 요구 됨을 알려줌
화면 나가기 위한 명확한 행동이 요구됨 (닫기 버튼, 화면 스와이프 다운 등)

보통 사용자들은 앱의 기능을 탐색할때, 타고 타고 들어가다가 빠져 나올때 당황하거나 어려움을 겪음 (앱의 개미지옥 현상)
네비게이션 지옥 (인스타 검색)
이때 네비게이션은 사용자가 당황하지 않게끔, 자연스럽게 지나왔던 곳을 돌아가게끔 도와주는 것

케이스 스터디 (유투브 뮤직)

탐색(네비게이션)과 재생(모달) 사용자 플로우

빨간색
- 새로운 앨범 찾는 컨텍스트 시작
- 앨범 찾아가면서 컨텍스트 뎁스가 깊어짐
파란색
- 찾다가 호기심 가는 곡 나오면, 재생뷰로 전환 (컨텍스트 전환 + 사용자 집중이 필요함)

네, 모(네비게이션과 모달)

💡 네+모, 어떤것이 있고, 어떻게 구현해?

첫째, Modality

🔥 iOS 에서 제공해주는 시스템 모달

🔥 개발자가 직접 제공해주는 모달

위에 플레이어뷰를 띄우는 케이스 생각하시면 쉬움
직접 제공해주는 경우, 모달 띄우는 스타일도 정해야함
- automatic 😲 여기서 잠깐
  - iOS 에서 automatic 을 설정하면, pageSheet 형태로 뜸
  - 즉, automatic 으로 하면 시스템이 “응, 내가 알아서 할께 근데, iOS 에서는 page sheet로 띄워야겠다”
- fullscreen
- popover
- page sheet and form sheet
- current context
- custom

🔥 구현

뷰컨트롤러의 **present(_:animated:completion:) 메소드를 사용

🔥 iOS 에서 주요 네비게이션 스타일 3가지

Hierarchical Navigation
- 주로 화면에서 하나 선택하면 다음 화면으로 넘어감
- 많은 서비스가 선택하는 스타일
  - 예) 설정앱
Flat Navigation
- 여러 콘텐츠 카테고리 사이에서 변경되는 스타일 (탭바를 사용하는 앱)
  - 예) 애플 뮤직, 앱스토어
Content-Drive or Experience-Driven Navigation
- 콘텐츠 자체가 네비게이션 스타일을 정의하는 스타일 (추천 로직이 들어간 앱)
  - 예) 게임, 북스
결국 여러 스타일을 나누긴 했지만, 앱내에서는 각 스타일을 복합적으로 사용함

🔥 주요 원칙

사용자가 언제나 명확한 이동경로를 파악할수 있게 해라 🔥🔥🔥
정보 구조를 사용자가 이해하기 쉽고 빠르게 접근하도록 디자인 해야함
사용자 제스쳐를 충분히 사용해라
- 예를 들면, 스와이프백
iOS 에서 제공하는 네비게이션 주로 사용할것
- 네비게이션 컨트롤러, 탭바컨트롤러 등등
네비게이션바를 이용해서 현재 어떤 컨텍스트인지 잘 보여주기
탭바를 이용해서 카테고리, 또는 기능별로 나누어서 표시해라
아이패드에서는 탭바 보다, 스플릿 뷰를 써라
여러 페이지가 있는 경우, 페이지 컨트롤을 써라

🔥 구현

탭바 (TabbarController) ✅
네비게이션 컨트롤러 (NavigationController) 👌

💡 요약

사용자가 앱내에서 화면전환간에 헤매지 않도록 도와주어야함
크게는 네비게이션과, 모달을 적절히 사용해서 도움
모달은 “집중집중”을
네비게이션은 “개미지옥 탈출”을 도와줌

참고

이전 포스트

Diffable DataSource & Compositional Layout

다음 포스트

CaseIterable

0개의 댓글