[TIL] 20230106: Modality/Navigation

본문은 야곰 아카데미 커리어 스타터 캠프를 통해 학습한 내용을 회고한 글입니다.

---

모달/네비게이션 Modality/ Navigation

모달 Modality

사용자에게 일시적으로 집중을 요하는 컨텐츠를 표시할 때 사용한다. 즉, 연속성이 없고 중요한 것을 나타낼 때 사용한다. 모달로 띄운 화면이 필요하고, 이것이 중요한 경우에는 액션이 요구됨을 알려준다. 모달을 이용한 화면을 나가기 위해서는 명확한 행동이 요구된다. 가령 닫기 버튼이나 화면 스와이프 다운과 같은 것들 말이다.

 

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

• alert

 

• activity views/share sheet

 

• action sheets

 

 

개발자가 직접 제공해주는 모달 스타일

• automatic
  • 시스템에게 스타일을 결정할 권한을 넘기는 것
  • iOS에서 automatic을 설정하면 대체적으로 pageSheet 형태로 뜸
• fullscreen
  • 꽉찬 화면
• popover
• page sheet and form sheet
  • 반 정도 올라오는 화면
  • bottom sheet라고 부르기도 함
• current context
• custom

 

네비게이션 Navigation

사용자가 당황하지 않게끔 지나왔던 곳을 돌아가게끔 도와준다. 네비게이션을 이용할 때는 뎁스가 너무 깊게 들어가지 않는 것이 중요하다. 나오는 데에 복잡함이 있고 구현할 때 있어서도 정보 전달는데에 있어서 복잡성이 생기기 때문이다.

 

주요 스타일

이러한 스타일들을 앱 안에서 복합적으로 사용함

• Hierarchial Navigation
  • 화면을 선택하면 다음 화면으로 넘어감
  • 많은 서비스가 선택하는 스타일
  • ex. 설정 앱
• Flat Navigation
  • 여러 콘텐츠 카테고리 사이에서 변경되는 스타일(탭바를 사용하는 앱)
  • ex.애플 뮤직, 앱스토어
• Content-Driven or Experience-Driven Navigation
  • 콘텐츠 자체가 네비게이션 스타일을 결정함
  • ex. 게임, 북스

 

주요 원칙

• 사용자가 언제나 명확한 이동경로를 파악할 수 있게 디자인할 것
• 사용자가 정보 구조를 이해하기 쉽고 빠르게 접근하도록 디자인할 것
• 사용자 제스쳐를 충분히 사용할 것
  • ex. 스와이프백
• iOS에서 제공하는 네비게이션 위주로 사용할 것
  • ex. 네비게이션 컨트롤러, 탭바 컨트롤러
• 네비게이션바를 이용하여 현재 어떤 컨텍스트인지 나타낼 것
• 탭바를 이요해서 카테고리, 또는 기능별로 나누어서 표시할 것
• 여러 페이지가 있는 경우, 페이지 컨트롤을 사용할 것

 

 

 

 

 

참조

https://fastcampus.co.kr/courses/210504/clips/

패스트캠퍼스 온라인 강의 - 초격차 패키지 : 왕초보를 위한 한 번에 끝내는 iOS 앱 개발 바이블

https://developer.apple.com/design/human-interface-guidelines/components/presentation/alerts

Alerts - Presentation - Components - Human Interface Guidelines - Design - Apple Developer

https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/activity-views/

Activity views - Menus and actions - Components - Human Interface Guidelines - Design - Apple Developer

https://developer.apple.com/design/human-interface-guidelines/components/presentation/action-sheets/

Action sheets - Presentation - Components - Human Interface Guidelines - Design - Apple Developer