brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 23. 2023

[HIG] Split views

여러 구성요소를 보여주는 스플릿 뷰

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

Introduction

스플릿 뷰(Split view)는 표, 컬렉션, 이미지 및 커스텀 뷰(Custom view)를 비롯한 다양한 구성 요소들을 보여주는 여러 인접 콘텐츠 영역을 관리합니다.

일반적으로, 정보 계층을 통한 탐색을 지원하기 위해 스플릿 뷰(split view)를 사용합니다. 첫 번째 영역에서 특정 항목을 선택하면 두 번째 영역에 항목의 콘텐츠가 보입니다. 추가로 두 번째 영역에서 추가 콘텐츠가 있는 경우 스플릿 뷰(split view)를 통해 세 번째 영역을 보여줄 수 있습니다.

일반적으로 스플릿 뷰를 사용해 사이드 바(sidebar) 인터페이스를 만들 수 있습니다. 여기서 주 영역은 앱의 최상위 항목이나 컬렉션을 나열해서 보여주고, 두 번째 영역과 선택 사항인 세 번째 영역에서 하위 컬렉션과 항목의 세부 정보를 보여줄 수 있습니다. 예를 들어, iPadOS의 Mail 앱에서는 주 영역에 계정들과 메일함을, 선택된 메일함의 이메일들을 두 번째 영역에 나열합니다. 그리고 선택된 이메일의 내용을 세 번째 영역에 나타냅니다. 드물지만, 스플릿 뷰(split view)를 사용해 주 영역을 보조하는 기능 그룹을 보여줄 수도 있습니다. 예를 들어, MacOS의 Keynote는 스플릿 뷰(split view) 영역을 사용해 슬라이드 캔버스를 둘러싼 영역에 슬라이드 탐색기, 발표자 메모 및 속성 영역을 보여줍니다.

역자 설명 : Keynote의 레이아웃은 가운데의 슬라이드 캔버스를 둘러싸는 스플릿 뷰들로 이루어져 있습니다. 아래 사진과 같이 좌측에는 슬라이드 탐색기, 하단에는 발표자 메모, 우측에는 속성 영역을 표시합니다.

Best Practices

소형(iPhone 등)이 아닌 일반적인 플랫폼에서 스플릿 뷰(Split view)를 사용하는 것이 좋습니다. 스플릿 뷰(Split view)는 여러 영역을 보여줄 수평 공간이 필요합니다. 세로 방향의 iPhone과 같은 소형 플랫폼에서 스플릿 뷰(Split view)는 콘텐츠를 둘러싸거나 잘라내지 않고 보여주기 어렵기 때문에 가독성이 떨어지고 사용자와 상호작용이 어렵습니다.

탐색을 사용하려면 상세 보기로 이어지는 각 단계에서 현재 선택된 항목을 지속적으로 강조해서 보여줘야 합니다. 선택 항목 표시는 각 영역에 있는 콘텐츠 간의 관계를 명확하게 하고 사용자들이 길을 잃지 않도록 돕습니다.

사용자들이 각 영역 간에 드래그 앤 드롭(drag and drop)을 할 수 있게 하는 것을 고려해 보세요. 스플릿 뷰(split view)는 다양한 계층 간의 접근을 제공하기 때문에, 사용자들은 항목을 다른 영역으로 드래그해서 앱의 다른 영역으로 편리하게 이동시킬 수 있습니다.

Platform Considerations

No additional considerations for iOS or iPadOS. Not supported in watchOS.

macOS

macOS에서는 스플릿 뷰(split view)의 영역을 가로, 세로 혹은 동시에 나타낼 수 있습니다. 스플릿 뷰(split view)는 각 영역 사이에 드래그해서 크기를 조정할 수 있는 구분선(divider)을 제공합니다. 개발자 가이드라인은 HSplitView 그리고 VSplitView를 참고하세요.

최소 및 최대 창의 크기에 대한 적절한 기본값을 설정하세요. 사용자가 앱의 스플릿 뷰(split view)에서 영역의 크기를 조정할 수 있는 경우, 구분선을 쉽게 찾을 수 있어야 합니다. 영역이 너무 작아지면 구분선이 사라진 것처럼 보이기 때문에 사용하기 어려워집니다.

필요하다면 사용자들이 영역을 숨길 수 있도록 하는 것을 고려해 보세요. 예를 들어, 앱에 편집 영역이 포함되어 있는 경우 다른 영역을 숨길 수 있도록 허용해 간결하고, 더 넓은 편집 영역을 사용하게 할 수 있습니다. Keynote에서 사용자들은 슬라이드 내용을 편집하고자 할 때 탐색기와 발표자 메모 영역을 숨길 수 있습니다.

숨겨진 영역을 다시 나타나게 하는 여러 방법을 제공하세요. 예를 들어 사용자가 숨겨진 영역을 복원할 때 사용하는 툴바 버튼 또는 키보드 단축키를 포함하는 메뉴 명령어를 제공할 수 있습니다.

얇은 구분선(divider) 스타일을 사용하는 것이 좋습니다. 너비가 1포인트인 얇은 구분선을 사용하면, 사용자가 사용하기 쉬우면서도 콘텐츠를 공간을 충분히 제공할 수 있습니다. 특별한 이유가 없으면 두꺼운 구분선 스타일을 사용하지 않는 것이 좋습니다. 예를 들어, 구분선의 양쪽에 구분선을 사용자들이 알아보기 어렵게 만드는 표가 있는 경우, 두꺼운 구분선을 사용하는 것이 좋을 수 있습니다. 개발자 가이드라인은 NSSplitView.DividerStyle을 참고하세요.

tvOS

tvOS에서는 스플릿 뷰(split view)를 사용해 콘텐츠 필터링을 사용할 수 있습니다. 사용자가 주 영역에서 필터 카테고리를 선택하면 앱은 보조 영역에 필터링 항목을 보여줄 수 있습니다.

영역이 균형 있어 보이도록 유지하는 스플릿 뷰(split view) 레이아웃을 선택하세요. 기본적으로 스플릿 뷰(split view)는 화면 너비의 1/3을 주 영역으로, 2/3을 보조 영역으로 사용하지만 반반 레이아웃으로도 지정할 수 있습니다.

스플릿 뷰(split view) 상단에 단일 제목을 표시해서 사용자가 전체 콘텐츠를 이해할 수 있도록 합니다. 사용자는 스플릿 뷰(split view)를 사용해 내용을 탐색하고 필터링하는 방법을 이미 알고 있기 때문에 각 창에 포함된 내용을 설명하는 제목은 불필요합니다.

보조 영역에 포함된 콘텐츠의 유형에 따라 제목의 정렬을 선택합니다. 특히, 보조 영역에 콘텐츠 컬렉션이 포함되어 있는 경우 제목을 창의 가운데에 배치하는 것을 고려해 보세요. 반대로, 보조 영역에 중요한 단일 콘텐츠가 포함되어 있는 경우 콘텐츠를 위한 더 많은 공간을 제공하기 위해 주 영역 상단에 제목을 배치하는 것을 고려해 보세요.