brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 23. 2023

[HIG] Outline views

계층 정보를 보여주는 아웃라인 뷰

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

Introduction

아웃라인 뷰(outline view)는 열과 행으로 구성되어 있는 계층 정보를 스크롤이 가능한 목록으로 보여줍니다.

아웃라인 뷰(outline view)는 상위 컨테이너와 내부의 컨테이너가 공유하는 계층 데이터인 열(column)을 한 개 이상 가지고 있습니다. 필요하다면 사용자는 열(column)을 추가하여 크기나 수정 날짜와 같이 기본 테이터의 속성을 표시할 수 있습니다. 상위 컨테이너에 있는 삼각형 아이콘으로 하위 컨테이너를 확장하여 볼 수 있습니다.

파인더(finder) 창은 파일 시스템을 탐색하기 위한 아웃라인 뷰(outline view)를 제공합니다.

역자설명 : 하단의 이미지는 아웃라인 뷰의 예시입니다.

Best Practices

아웃라인 뷰(outline view)는 텍스트기반의 콘텐츠를 표시하는데 적합하며 주로 스플릿 뷰(split view)에서 앞쪽에 표시되고 관련 콘텐츠는 반대쪽에 보입니다.

비계층적 데이터를 표시할 경우에는 아웃라인 뷰(outline view) 대신 테이블(table)을 사용하는 것이 좋습니다. 자세한 내용은 Lists and tables를 확인하세요.

첫 번째 열(column)에만 계층 데이터를 표시합니다. 다른 열(column)에서는 첫 번째 열(column)의 계층적 데이터에 적용되는 속성을 표시할 수 있습니다.

설명이 포함된 열(column) 제목으로 사용 맥락을 제공합니다. title-style capitalization으로 명사나 명사구를 사용하며 구두점과 콜론은 사용하지 않는 것이 좋습니다. 다중 열(column) 아웃라인 뷰(outline view)에서는 항상 열(column)의 제목을 제공하세요. 단일 열(column) 아웃라인 뷰(outline view)의 경우 열(column) 제목을 제공하지 않는다면 레이블을 사용하거나 사용자들이 사용 맥락을 충분히 이해할 수 있도록 다른 방법을 사용하는 것이 좋습니다.

사람들이 열(column) 제목을 클릭하여 아웃라인 뷰(outline view)를 정렬할 수 있습니다. 정렬 가능한 아웃라인 뷰(outline view)에서 사람들은 열(column) 제목을 클릭하여 해당 열(column)을 기준으로 오름차순 또는 내림차순으로 정렬할 수 있습니다. 필요한 경우에는 뒤의 보조 열(column)을 기준으로 추가 정렬을 할 수도 있습니다. 사람들이 기본 열(column) 제목을 클릭한다면 각 계층 단계에서 항목이 정렬됩니다. 예를 들어 파인더(finder)에서는 모든 최상위 폴더가 정렬되고 각 폴더 내의 항목들이 정렬됩니다. 만약 사람들이 이미 정렬된 열(column) 제목을 클릭한다면 폴더와 콘텐츠들이 반대 방향으로 다시 정렬됩니다.

사람들이 열(column) 사이즈를 조정할 수 있게 하세요. 아웃라인 뷰(outline view)에서 표시되는 데이터는 너비가 다양한 경우가 많습니다. 열(column)의 너비보다 넓은 데이터 표시를 위해 사람들이 필요에 따라 너비를 조정하도록 하는 것이 중요합니다.

사용자가 중첩된 컨테이너를 쉽게 확장하거나 축소할 수 있도록 하는 것이 좋습니다. 예를 들어 파인더(finder) 창 폴더의 삼각형 아이콘을 누르면 해당 폴더의 창만 확장되지만 키보드 옵션 버튼을 누른 상태로 클릭하면 모든 하위 폴더들이 확장됩니다.

사람들이 확장시킨 경로를 기억하고 유지하세요. 사람들이 아웃라인 뷰(outline view)의 여러 단계를 거쳐 특정 경로에 도달하는 경우, 사용자가 단계를 반복하지 않게 상태를 기억하고 저장하세요.

다중 열(column) 아웃라인 뷰(outline view)에서 행(row)의 색상을 번갈아 사용하는 것이 좋습니다. 색상을 번갈아 사용하면 사람들은 넓은 아웃라인 뷰(outline view)의 열(column)에서 행(row) 값을 찾기가 쉬워집니다.

앱에서 데이터 편집이 가능한 경우 데이터 편집을 사용합니다. 사람들은 편집 가능한 아웃라인 뷰(outline view)의 셀에서 클릭 한 번으로 내용을 편집할 수 있기를 원합니다. 더블 클릭에는 셀이 다르게 반응할 수 있습니다. 예를 들어 아웃라인 뷰(outline view) 파일 목록에서 사람들은 파일 이름을 한번 클릭하여 편집하지만 더블 클릭하면 파일을 열 수 있습니다. 또한 필요하다면 사람들은 행을 재정렬하고 추가, 삭제할 수도 있습니다.

셀 텍스트를 줄일 때 잘라내는 대신 생략 부호를 사용하는 것이 좋습니다. 중간 생략 부호는 셀 텍스트의 앞부분과 뒷부분을 보여주므로 텍스트를 잘라내는 것보다 콘텐츠를 사용자가 명확하게 이해할 수 있습니다.

사람들이 긴 아웃라인 뷰(outline view)에서 빠르게 찾을 수 있도록 검색 필드 제공을 고려해 보세요. 아웃라인 뷰(outline view)가 기본 기능인 창은 보통 검색 필드가 툴바에 포함됩니다. 자세한 내용은 Search fields를 확인하세요.