brunch

You can make anything
by writing

C.S.Lewis

by Lawn Jun 06. 2023

[HIG] Sidebars

쉽게 앱을 탐색할 수 있는 사이드바

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

사이드바(sidebar)를 통해서 앱을 탐색할 수 있고, 최상위 수준(top-level)의 앱이나 게임 관련 콘텐츠 모음에 빠르게 접근할 수 있습니다.

사이드바(sidebar)는 최상위 수준(top-level)의 앱과 컬렉션을 보여주는 목록(list)을 의미하며, 대부분 분할 화면(split view)을 구성하는 기본 창 안에서 표시됩니다. 사람들이 사이드바(sidebar)에서 어떤 항목(item)을 선택했을 때, 선택한 항목(item)에 대한 세부 정보는 분할 화면(split view) 안의 보조 창에서 표시됩니다. 만약 항목(item)에 목록(list)이 추가로 포함된 경우는, 두 번째 보조 창에 목록(list)이 표시되고, 세 번째 창에 세부 정보가 표시됩니다. 예를 들어 iOS, iPadOS 및 macOS에서 메일은 사이드바 스타일 및 동작을 통해 계정과 사서함 목록(list)을 표시하는데, 일반적으로 메시지의 목록을 두 번째 창에, 메시지의 내용을 세 번째 창에 표시합니다.

역자설명 : 최상위 수준의 섹션(top-level sections)이란, 앱 정보 계층에서 가장 상위에 위치하는 정보계층을 말합니다.

사이드바 레이아웃(sidebar layout)은 특히 사이드바(sidebar)와 같이 제공되는 창을 동시에 화면에 표시하려는 경우에 수평적 공간을 많이 차지할 수 있습니다. 소형 인터페이스 환경에서는 탭바(tab bar)와 같은 대체 구성 요소를 고려하는 것이 좋습니다.

역자설명 : 하단의 이미지는 macOS sidebar와 iOS tab bar의 예시입니다.

macOS sidebar

iOS tab bar

DEVELOPER NOTE : SwiftUI를 사용할 때, 사이드바(sidebar)의 인터페이스를 개발하기 위해서 사이드바(sidebar)에 적합한 모양과 동작을 제공하는 자동 플랫폼을 사용해야 합니다. 개발자 가이드라인은 NavigationSplitView를 참고하세요. SwiftUI를 사용하지 않는 경우 대신에 UISplitViewController 또는 NSSplitViewController를 사용할 수 있습니다.

Best practices

사이드바(sidebar)를 통해 앱의 주요한 영역이나 폴더 및 플레이리스트 같은 최상위 콘텐츠 모음에 빠르게 이동할 수 있습니다. 사이드바(sidebar)는 사용자가 보는 정보의 계층을 일차원적으로 표시하여 사용자가 이해하는데 도움을 주며, 사용자는 정보가 담긴 카테고리 내에서 각각의 정보나 모드에 동시에 접근할 수 있습니다.

가능한 경우, 사이드바(sidebar)의 내용을 사용자가 정의할 수 있도록 하는 것이 좋습니다. 사이드바(sidebar)를 사용하면 사용자가 앱의 중요한 영역으로 이동할 수 있으므로 사용자가 가장 중요한 영역과 표시할 순서를 결정할 수 있게 하는 것이 좋습니다.

사람들이 사이드바(sidebar)를 숨기도록 하는 것을 고려해 보세요. 사람들은 때때로 더 넓은 공간에서 콘텐츠의 세부사항을 표시하기 위해 사이드바(sidebar)를 숨기고 싶어 합니다. 가능한 경우, 사용자가 이미 알고 있는 플랫폼별 인터렉션 기능을 사용하여 사이드바(sidebar)를 숨기고 표시하도록 유도합니다. 예를 들어, 사람들은 iPadOS에서는 기본으로 제공하는 에지 스와이프 제스처를 사용할 것으로 예상합니다. macOS에서는 ‘표시/숨기기’ 버튼을 포함하거나 ‘사이드바(sidebar) 표시 및 사이드바(sidebar) 숨기기’에 대한 명령을 앱 화면 메뉴에 추가할 수 있습니다. 검색이 가능한 환경을 유지하려면 사이드바(sidebar)를 기본적으로 숨기지 않는 것이 좋습니다.

일반적으로 사이드바(sidebar)에서는 세 단계 이하의 계층을 표시합니다. 데이터 계층이 두 단계보다 많은 경우, 분할 화면(split view) 안에 사이드바 항목(sidebar items)과 상세 화면(detail view)을 표시하고, 이 두 화면 사이에 내용 목록(content list)을 포함하는 것이 좋습니다.

사이드바(sidebar)에 두 단계의 계층을 포함해야 하는 경우, 간결한 기능을 설명하는 레이블을 사용하여 각 그룹의 제목을 지정합니다. 레이블을 짧게 유지하려면 불필요한 단어를 생략합니다. 예를 들어, 메일은 ‘플래그 지정 및 초안(Flagged and Drafts)’과 같은 더 간결한 용어를 사용하여 각 사서함 제목에서 ‘메시지’라는 단어를 생략합니다.

Platform considerations

No additional considerations for tvOS. Not supported in watchOS.

iOS, iPadOS

iOS 앱에서 사이드바(sidebar) 대신 탭 바(tab bar)를 사용하는 것을 고려해 보세요. 사이드바(sidebar)의 인터페이스는 수평적 공간을 많이 필요로 할 수 있으며, 이는 특히 세로 방향인 아이폰에서 정보가 복잡하게 표시될 수 있습니다. 반면에 탭 바(tab bar)는 각 섹션 내에서 현재의 탐색 상태를 유지하면서, 앱의 최상위 섹션(top-level sections) 사이를 빠르게 전환할 수 있게 해 줍니다.

필요한 경우, 사이드바(sidebar)에 올바른 모양을 적용합니다. SwiftUI를 사용하지 않는 경우, ‘사이드바 형태의 컬렉션 뷰 리스트 레이아웃(sidebar appearance of a collection view list layout)’을 사용할 수 있습니다. 개발자 가이드라인은 UICollectionLayoutListConfiguration. Appearance를 참고하세요.

macOS

macOS에서 사이드바(sidebar)(소스 목록(source list)이라고도 함)는 인터페이스가 창 전체 높이까지 확장되며, 리스트 중 선택한 항목에 대해 강조표시 하기 위해 둥근 모서리(rounded-corner) 모양을 사용합니다.

사이드바의 행(가로 리스트)의 높이, 텍스트 및 문자 크기는 전체 크기에 따라 달라지며, 크기 종류는 소형(small), 중형(medium), 대형(large)이 있습니다. 크기는 프로그래밍으로 설정할 수 있지만, 사람들이 일반 설정에서 사이드바 아이콘 크기를 다른 종류로 선택하여 변경할 수도 있습니다. 아래 표는 macOS의 사이드바(sidebar)에 대한 기본 측정 기준을 보여줍니다.

역자설명 : 하단의 예시처럼 다양한 크기 종류의 사이드바(sidebar)가 있습니다.

친밀한 기호를 사용하여 사이드바(sidebar)의 항목(items)을 나타내도록 고려해 보세요. SF 기호는 사이드 바(sidebar) 안에서 앱 항목(items)을 나타내는 데 사용할 수 있으며, 사용자 지정이 가능할 뿐 아니라 다양한 범 위한 기호를 제공합니다. 사이드바(sidebar)에 대한 사용자 지정 인터페이스 아이콘을 만들기 위해서 비트맵 이미지를 사용해야 하는 경우, @1x 및 @2x 해상도와 위 표에 표시된 소형, 중형, 대형 크기를 참고하여 이미지를 만드는 것이 좋습니다.

사이드바(sidebar)를 스타일화 할 때, 모든 아이콘에 고정 색상을 지정하지 않은 것이 좋습니다. 기본적으로 사이드바 아이콘은 현재 설정된 강조 색상(accent color)을 사용하여 모든 앱에서 사용자가 선택한 항목에 대해 강조 색상(accent color)을 볼 수 있도록 합니다. 고정된 색상은 아이콘의 의미를 명확히 하는 데 도움이 될 수 있지만, 대부분의 사이드바(sidebar) 아이콘은 사용자가 선택한 항목에 대해 색상으로 표시합니다.

필요한 경우, 사이드바(sidebar)에 올바른 배경 모양을 적용합니다. SwiftUI를 사용하지 않는 경우, macOS 앱에 사이드바(sidebar)를 만들기 위해서는 창에 둘 이상의 사이드바(sidebar)가 있거나, 패널 또는 설정 창에서 사이드바(sidebar)를 사용할 때 불투명한 배경을 지정하는 것이 좋습니다. 다른 모든 사용 사례에서는 사이드바(sidebar)에 반투명 배경을 사용하는 것이 좋습니다.

컨테이너 창(container window)의 크기가 조정될 때 사이드바(sidebar)를 자동으로 숨기거나 표시하는 것을 고려해 보세요. 예를 들어, 메일 뷰어 창의 크기를 줄이면, 사이드바(sidebar)가 자동으로 축소되어 메시지 내용을 저장할 수 있는 공간이 늘어나게 할 수 있습니다.

편집 가능한 사이드바에서, 편집 버튼을 화면의 아래쪽 가장자리에 배치하지 않는 것이 좋습니다. 항목들(items)에 대한 ‘정보 추가, 제거, 조작 또는 가져오기’에 대한 버튼을 제공하는 것을 고려해 보세요. 표시된 화면이 전체 화면보다 작아서 내용이 가려질 때, 사이드바(sidebar) 하단의 항목을 숨길 수 있습니다. 사용자가 새 사이드바(sidebar)에 그룹을 추가할 수 있도록 하려면, 그룹 레이블의 뒤에 있는 삼각형 버튼(disclosure triangle) 옆에 플러스(+) 버튼을 포함합니다. 다른 작업을 활성화하기 위해 컨텍스트 메뉴(context menu) 또는 메뉴 모음 메뉴(bar menu)에서 제거와 같은 작업을 수행할 수 있습니다. 예를 들어 컨텍스트 메뉴(context menu)에서 새 사서함 명령을 제공하는 것 외에도, 메일은 사서함 메뉴에도 해당 명령을 나열해 표시합니다.