[Apple HIG] Human Interface Guidelines 시리즈 - Split Views

안녕하세요. 애플사이다입니다.

 

iPad를 사용하면 Split Views 형태를 자주 보게 되는데요.

Apple의 공식 문서인 Human Interface Guidelines의 Split Views 내용을 정리해보겠습니다.

 

✅ HIG를 처음 들어봤다면 Human Interface Guidelines를 왜 읽어야 할까? 포스팅을 꼭 읽어주세요.

*Split View란?

• 보통 왼쪽 column에는 List (Sidebar)가 있고, 오른쪽 column에는 컨텐츠가 들어있는 화면 구성을 뜻한다.
• Size Class (Compact / Regular) 중에서 Regular에 해당하면 Split View를 구현할 수 있다.
  - iPad는 가로 모드에서 디스플레이가 넓어서 Regular Width에 속하므로 Split View를 사용 가능하다.
  - iPhone 7 Plus는 가로 모드에서 Regular Width에 속하므로 iPad처럼 Split View를 사용 가능하다.

---

Split Views

Split View는 앱의 최상위 수준에서 계층적인 (hierarchical) 컨텐츠를 표현한다.

 

Split View는 2개 또는 3개 column으로 구성하는데, 3개 column이면 1) 기본 column, 2) 보조 column (optional), 3) 컨텐츠 보조화면과 같은 형태로 구성할 수 있다. (아래 사진 참고)

보통 기본 column에 따라 보조 column이 변경되고, 그로 인해 컨텐츠에 영향을 미친다.

 

✅ Split View는 Mail 앱에서 메일함 및 메시지를 확인하는 상황처럼 여러 계층의 컨텐츠를 탐색 (Navigating)할 때 유용하다.

Split View (3개 column) 예시 - Mail 앱

✅ 보통 Mail 앱처럼 Split View를 사용해서 "Sidebar"가 있는 인터페이스를 만든다.

이 유형의 인터페이스에서 기본 column에는 Sidebar를, 보조 column에서는 List view를, 컨텐츠 보조화면에서는 선택된 컨텐츠의 세부내용을 표시한다.

*Sidebar에 대한 내용은 Human Interface Guidelines 시리즈 - Sidebars 포스트를 참고

 

• On iPad, use a split view instead of a tab bar.
  넓은 디스플레이를 가진 iPad의 장점을 살리려면, Tab bar보다 Split View가 낫다.
• Choose the appropriate style for each type of column.
  Mail 앱처럼 기본 column에 Sidebar를 나타내려면, sidebar appearance를 사용한다.
  ✅ 보조 column에 List view를 표시하려면, plain sidebar appearance를 사용한다.
  *Sidebar의 appearances 종류는 plain, grouped, insetGrouped, sidebar, sidebarPlain이 있다. (UICollectionLayoutListConfiguration.Appearance)
  

  

  

  Sidebar의 appearances 종류

• Persistently highlight the active selection in the primary and supplementary columns.
  보조 column 및 컨텐츠 보조화면에서 cell을 선택하여 활성화된 상태라면 하이라이트 효과를 유지해야 한다.
  ex. 위의 Mail 앱처럼 메일 내용 (컨텐츠)에 관련된 column을 명시하기 위해 cell의 바탕색을 회색/파란색으로 표시하고 있다.
• If appropriate, allow people to drag and drop content between columns.
  사용자는 계층적 구조를 한눈에 볼 수 있다. 따라서 화면의 특정 item을 drag and drop하여 다른 column으로 이동시킬 수 있게 하는 것이 좋다.

개발자라면 UISplitViewController를 읽어보면 된다. 

*구현 방법은 UISplitViewController - 코드 예시 및 공식문서 요약 포스팅 참고!!

 

- Reference

• Apple Developer Documentation > Human Interface Guidelines > iOS
• Apple Design > Human Interface Guidelines > iOS > Views > Split Views 
• Apple Design > Human Interface Guidelines > iOS > Bars > SideBars
• Blog > Creating Lists with Collection View (Sidebar의 appearances 종류)

 

🍎 포스트가 도움이 되었다면, 공감🤍 / 구독🍹 / 공유🔗 / 댓글✏️ 로 응원해주세요. 감사합니다.