[Apple HIG] Human Interface Guidelines 시리즈 - Sidebars

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

 

iPad 앱을 살펴보면 화면 왼쪽에 List 형태로 된 Sidebars를 자주 사용하고 있습니다.

그리고 Sidebars는 Split Views에서 매우 많이 사용합니다.

Apple의 공식 문서인 Human Interface Guidelines를 통해 Sidebars를 알아보겠습니다.

 

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

---

Sidebars

✅ Sidebar를 통해 앱 수준의 탐색 (navigation), 최상위 컨텐츠에 대한 빠른 접근이 가능하다.

Sidebar의 item을 선택하면 특정 컨텐츠를 확인할 수 있다. 

 

예를 들어 Mail 앱을 보면, 왼쪽의 Sidebar를 통해 메일함의 List를 한눈에 표시한다.

사용자는 특정 메일함을 선택해서 관련된 메일 메시지에 접근할 수 있고, 메시지를 선택하여 컨텐츠 보조화면에 나타낼 수 있다.

Sidebar 예시 - Photo 앱

✅ Split View의 기본 column에다가 sidebar를 배치하면 된다.

*Split View에 대한 내용은 Human Interface Guidelines 시리즈 - iPad의 Split Views 포스팅 참고

 

• Apply the correct appearance to a sidebar.
  UICollectionLayoutListConfiguration.Appearance를 참고하여 적절한 sidebar appearance를 사용한다.
  *Sidebar의 appearances 종류는 plain, grouped, insetGrouped, sidebar, sidebarPlain이 있다. 
  

  

  

  Sidebar의 appearances 종류

  
  
• Use a sidebar to organize information at the app level.
  사용자가 한눈에 컨텐츠 계층구조 (hierarchy)를 파악할 수 있으므로 Sidebar를 통해 사용자에게 앱의 구조를 보여줄 수 있다.
  ex. 최상위 수준의 정보인 카테고리, modes, 폴더, playlists 등을 표시하기에 적합하다.
• Whenever possible, let people customize the contents of a sidebar.
  사용자가 Sidebar에 들어갈 컨텐츠를 선택할 수 있으면 좋다.
  ex. Favorite (즐겨찾기) 항목을 통해 사용자에게 중요한 정보를 사용자 스스로 정할 수 있게 한다.
• Don't prevent people from hiding the sidebar.
  사용자가 Sidebar를 hide/show 할 수 있으면 좋다. edge swipe 제스처를 활용할 수 있다.
  default로 hide하는 것은 피해야 한다.
• Keep titles in the sidebar clear and concise.
  ex. Mail 앱에서 각 메일함의 title을 표시할 때, "Messages" 보다 "Flagged", "Drafts" 같은 명확한 단어를 쓴다.
  

  

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

  
  
• In general, refrain from exposing more than two levels of hierarchy within a sidebar.
  계층구조는 최대 2개 단계로 나타낸다.
  그보다 더 깊은 구조를 표현하고 싶으면 Split View의 보조 column의 List view를 활용하면 된다.

List View를 구현한다면 CollectionView의 UICollectionLayoutListConfiguration를 참고하면 된다.

 

 

- Reference

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

 

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