brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 22. 2023

[HIG] Lists and tables

정보를 보여주는 리스트 & 테이블

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

Introduction

리스트와 테이블은 하나 이상의 행 열(columns of rows)에 정보를 보여줍니다.

역자설명 : 행은(row)은 가로 항목 스타일, 열(column)은 세로 항목 스타일을 나타냅니다.

‘List’는 ‘목록’이라는 뜻으로 나열하는 형태를 말하고, ‘Table’은 ‘표’라는 뜻으로 나열하는 형태를 표시한 그래프를 말합니다.

테이블 또는 리스트를 사용하여 그룹이나 계층으로 구성된 정보를 나타낼 수 있으며 선택, 추가, 삭제 및 순서 변경과 같은 사용자와 상호작용하기 위해 사용할 수 있습니다. 많은 앱들은 리스트를 통해 정보의 계층을 표현하고, 탐색을 가능하게 합니다. 예를 들어 iOS 설정 앱은 리스트의 계층을 통해 사람들이 손쉽게 옵션을 선택할 수 있도록 합니다. 또한 iPadOS 및 macOS의 메일과 같은 여러 앱은 분할 뷰(split view)와 그 안에서 테이블 뷰를 사용합니다.

역자설명 : 하단의 이미지는 분할 뷰(split view)의 예시입니다.

사람들은 다중 열 테이블(multicolumn table)이나 스프레드시트(spreadsheet)로 복잡한 정보를 다루고 작업해야 하는 경우가 있습니다. 이러한 작업을 가능하게 하는 앱은 테이블을 사용하여 정보의 다양한 특성이나 속성을 별도의 정렬 가능한 열로 사용자에게 보여줍니다.

Best practices

리스트 또는 테이블에 텍스트를 넣는 것이 좋습니다. 테이블은 모든 유형의 내용을 포함할 수 있지만, 그중 행 기반 형식(row-based format)은 텍스트를 스캔하고 읽기 쉽게 만드는 데 적합합니다. 크기가 매우 다양하거나 많은 이미지를 표시해야 하는 항목이 있는 경우 컬렉션(collection)을 대신 사용하는 것이 좋습니다.

역자설명 : 하단의 이미지는 컬렉션(collection)의 예시입니다.

사람들이 맥락에 따라 테이블을 편집할 수 있도록 합니다. 사람들은 항목을 추가하거나 제거할 수는 없더라도 목록을 재정렬 할 수 있기를 원합니다. iOS와 아이패드 OS에서 사람들은 테이블 항목을 선택하기 전에 편집 모드로 들어가야 합니다.

사용자가 리스트의 항목을 선택할 시 적절한 피드백을 제공합니다. 리스트의 항목을 선택한 후, 새로운 뷰가 나타나는지 아니면 상태가 바뀌는지에 따라 피드백이 달라질 수 있습니다. 일반적인 테이블(계층을 통한 탐색을 가능하게 하는)은 선택한 행을 지속적으로 강조 표시하여 사용자의 진행 경로를 명확히 보여줍니다. 반대로 옵션이 나열된 테이블은 이미지(예: 체크 표시)를 추가하기 전에 항목이 선택되었음을 행을 짧게 강조하여 보여주는 경우가 많습니다.

Content

행(row) 내용을 쉽게 읽을 수 있도록 텍스트를 간결하게 제공하는 것이 좋습니다. 짧고 간결한 텍스트는 잘림과 래핑(wrapping=text drag)을 최소화하여 사람들이 텍스트를 읽고 찾기 쉽게 합니다. 각 항목이 많은 양의 텍스트로 구성된 경우 너무 큰 테이블 행을 사용하지 않는 대안을 생각해 봐야 합니다. 예를 들어, 항목의 제목만 나열하여 사용자가 항목을 선택하면 세부 보기를 통해 내용을 보여주는 방식이 있습니다.

텍스트 잘림을 고려하여 텍스트의 가독성을 유지하는 것이 좋습니다. 테이블이 좁을 때(예: 사용자가 너비를 변경할 수 있는 경우) 사용자들이 내용을 이해할 수 있고 읽기 쉽게 보여줘야 합니다. 때때로 텍스트 중간에 생략부호(ex.(…))는 내용의 시작과 끝을 보여주기 때문에 사용자들이 항목을 쉽게 구분할 수 있습니다.

다중 열 테이블(multicolumn table)에는 열을 설명하는 제목(descriptive column headings)을 사용합니다. 명사 또는 짧은 명사구를 큰 제목 스타일의 대문자와 함께 사용하고, 끝 문장 부호(예 :.’.’)를 사용하지 않는 것이 좋습니다. 단일 열 테이블 뷰에 열 제목을 포함하지 않을 경우, 사람들이 테이블을 이해할 수 있도록 레이블 또는 머리글을 사용하세요.

Style

데이터 및 플랫폼에 맞는 테이블 또는 목록 스타일을 사용합니다. 일부 스타일은 시각적 세부 정보를 사용하여 그룹화 및 계층 구조를 전달하거나 특정 사용자 경험을 제공합니다. 예를 들어 iOS와 iPadOS에서 그룹화된 스타일은 머리글(headers), 바닥글(footers) 그리고 추가 공간을 사용하여 데이터 그룹을 구분합니다. watchOS에서 사용할 수 있는 타원형 스타일은 사람들이 컨트롤을 돌려 스크롤할 때 여러 항목을 보여줍니다. macOS는 큰 테이블을 더 쉽게 사용할 수 있도록 교차 행 배경을 사용하는 테두리 스타일을 제공합니다. 개발자 가이드라인은 ListStyle을 참고하세요.

데이터 및 플랫폼에 맞는 표 또는 목록 스타일을 선택하세요. 일부 스타일은 시각적 세부 정보를 사용하여 그룹화 및 계층 구조를 전달하거나 특정 경험을 활성화합니다. 예를 들어 iOS 및 iPadOS에서 그룹화된 스타일은 머리글, 바닥글 및 추가 공간을 사용하여 데이터 그룹을 구분합니다. watchOS에서 사용할 수 있는 타원형 스타일은 사람들이 스크롤할 때 항목이 둥근 표면에서 굴러가는 경우 항목을 표시합니다. macOS는 큰 테이블을 더 쉽게 사용할 수 있도록 교차 행 배경을 사용하는 테두리 스타일을 정의합니다. 개발자 지침은 ListStyle을 참조하십시오.

표시해야 하는 정보에 맞는 행(row) 스타일을 선택합니다. 예를 들어, 행의 맨 앞에 작은 이미지를 표시한 다음 간단한 설명 레이블을 제공해야 할 수 있습니다. 일부 플랫폼은 iOS, iPadOS 및 TVOS에서 리스트의 행, 머리글(headers) 및 바닥글(footers)에 콘텐츠를 배치하는 데 사용할 수 있는 UIListContentConfiguration API와 같이 콘텐츠를 정렬하는 데 사용하는 기본 행 스타일을 제공합니다.

Platform considerations

iOS, iPadOS

콘텐츠의 추가 정보를 보여줄 때만 정보 버튼(info button)을 사용하세요. 정보 버튼은 계층구조의 테이블 또는 리스트를 탐색할 수 없습니다. 사용자가 리스트 또는 테이블 행의 하위 보기를 볼 수 있도록 하려면 노출 표시기 보조프로그램 컨트롤(disclosure indicator accessory control)을 사용하세요. 개발자 가이드라인은 disclosureIndicator를 참고하세요.

(좌) 정보 버튼은 리스트 항목에 대한 세부 정보를 표시하며, 탐색을 사용하지 않습니다. (우) 노출 표시기는 계층의 다음 단계를 표시하며, 세부 정보를 표시하지 않습니다.

역자설명 : 정보 버튼이란, 리스트 행의 우측 끝에 ‘세부 정보 노출 버튼(detail disclosure button)’을 말합니다.

테이블의 행 끝에 컨트롤(예 : 노출 표시기)을 표시하는 테이블에 색인(index)을 추가하지 않도록 합니다. 색인(index)은 일반적으로 알파벳 문자로 구성되며 리스트의 뒷부분에 수직으로 표시됩니다. 사용자는 리스트에 매핑되는 색인(index)을 선택하여 리스트의 특정 섹션으로 이동할 수 있습니다. 색인(index)에 포함된 요소가 모두 목록의 뒷부분에 나타나기 때문에, 사람들은 다른 요소를 활성화하지 않고는 사용하기 어려울 수 있습니다.

macOS

값을 제공하는 경우 열(column) 제목을 눌러 해당 열을 기준으로 테이블 뷰를 정렬할 수 있습니다. 사용자가 이미 정렬된 열의 제목을 클릭하는 경우 데이터를 반대 방향으로 다시 정렬합니다.

사용자가 열(column) 크기를 조정할 수 있습니다. 테이블 뷰에 표시되는 정보의 너비(width)는 다양합니다. 사람들은 다른 영역의 정보를 확인하거나 잘린 장보를 볼 수 있도록 열 크기를 조정할 수 있기를 원합니다.

다중 열 테이블(multicolumn table)에서 행(row) 색상을 번갈아 사용하는 것을 고려하세요. 색상을 번갈아 사용하면 넓은 테이블에서 행의 값을 확인하는 데 도움을 줄 수 있습니다.

테이블 뷰 대신 아우트라인 뷰(outline view)를 사용하여 정보의 계층을 보여주세요. 아우트라인 뷰(outline view)는 테이블 뷰처럼 보이지만 중첩된 정보 수준을 보여주기 위한 디스클로저 트라이앵글(disclosure triangles)을 제공합니다. 예를 들어, 아우트라인 뷰(outline view)는 폴더와 폴더에 포함된 항목을 보여줄 수 있습니다.

역자설명 : 하단의 이미지는 아우트라인 뷰(outline view)의 예시입니다. 디스크로저 트라이앵글(disclosure triangles)을 통해 폴더와 폴더에 포함된 항목을 볼 수 있습니다.

tvOS

각 행(row)이 강조되고 약간의 크기가 증가할 때, 테이블 근처의 이미지가 잘 보이는지 확인하세요. 행(row)의 모서리가 둥글게 되어 양쪽에 있는 이미지의 모양에 영향을 줄 수 있습니다. 이미지를 준비할 때 이 효과를 고려하고 모서리에 마스크를 추가하지 않는 것이 좋습니다.

watchOS

가능한 경우 행(row) 수를 제한합니다. 짧은 리스트는 사람들이 한눈에 보기 더 쉽지만, 사람들이 긴 항목의 리스트를 원할 때가 있습니다. 예를 들어, 사람들이 팟캐스트를 많이 구독하는 경우 구독한 항목을 전부 확인할 수없다면 불편함을 느낄 수 있습니다. 가장 관련성이 높은 항목을 나열하고 사람들이 더 많이 볼 수 있는 방법을 제공하여 긴 리스트를 보다 쉽게 관리하세요.

수직 페이지 기반 탐색(vertical page-based navigation)을 지원하려면 상세 뷰의 길이를 제한하세요. 사람들은 수직 페이지 기반 탐색(vertical page-based navigation)을 사용하여 서로 다른 리스트 행의 세부 항목 사이를 수직으로 스와이프 합니다. 이 방법으로 탐색하면 사용자가 리스트로 돌아가 새 상세 항목을 누를 필요가 없으므로 시간이 절약되지만 상세 뷰가 짧은 경우에만 잘 보입니다. 세부 정보의 뷰가 스크롤되면 사용자가 수직 페이지 기반 탐색(vertical page-based navigation)을 사용하여 세부 정보 뷰 사이를 스와이프 할 수 없습니다.