Lists and tables present data in one or more columns of rows.
리스트와 테이블은 하나 이상의 행과 열을 통해 데이터를 표현합니다.
A table or list can represent data that’s organized in groups or hierarchies, and it can support user interactions like selecting, adding, deleting, and reordering. Apps and games in all platforms can use tables to present content and options; many apps use lists to express an overall information hierarchy and help people navigate it. For example, iOS Settings uses a hierarchy of lists to help people choose options, and several apps — such as Mail in iPadOS and macOS — use a table within a split view.
테이블이나 리스트는 그룹이나 계층으로 구조화된 데이터를 보여주며, 선택, 추가, 삭제, 재정렬 등의 사용자 인터랙션을 지원합니다. 모든 플랫폼의 앱과 게임은 테이블을 이용해 컨텐츠와 옵션을 보여줍니다. 많은 앱들은 리스트를 통해 사용자가 전체적인 정보를 확인하고 이동할 수 있도록 합니다. 예를 들어, iOS 설정 앱은 계층화된 리스트들을 사용해 사용자가 옵션을 고를 수 있도록 합니다. 또한, iPadOS와 macOS의 메인앱은 split view에서 테이블을 사용합니다.
Sometimes, people need to work with complex data in a multicolumn table or a spreadsheet. Apps that offer productivity tasks often use a table to represent various characteristics or attributes of the data in separate, sortable columns.
사용자들은 가끔 복잡한 데이터가 들어있는 여러 열로 이루어진 테이블 또는 스프레드시트를 사용합니다. 생산성 작업을 지원하는 앱들은 테이블을 이용해 데이터의 여러 속성 또는 성질을 이용해 열로 나눕니다.
Prefer displaying text in a list or table. A table can include any type of content, but the row-based format is especially well suited to making text easy to scan and read. If you have items that vary widely in size — or you need to display a large number of images — consider using a collection instead.
리스트 또는 테이블에서는 텍스트를 선호하세요. 테이블은 어떤 종류의 컨텐츠든 넣을 수 있지만, 행을 기반으로 하는 이 포맷은 텍스트를 찾고 읽는 것에 최적화되어 있습니다. 매우 넓은 아이템 또는 큰 이미지들을 넣고 싶다면, collection을 사용하는 것을 고려해보세요.
→ 테이블은 텍스트 표시에 가장 적합합니다.
Let people edit a table when it makes sense. People appreciate being able to reorder a list, even if they can’t add or remove items. In iOS and iPadOS, people must enter an edit mode before they can select table items.
필요한 경우 사용자가 테이블을 수정할 수 있게 하세요. 사용자는 리스트에 아이템을 추가하거나 제거할 수 없더라도 재정렬하는 것을 필요로 합니다. iOS와 iPadOS에서는 사용자가 테이블 항목을 선택하기 위해서는 반드시 편집 모드로 진입해야 합니다.
Provide appropriate feedback when people select a list item. The feedback can vary depending on whether selecting the item reveals a new view or toggles the item’s state. In general, a table that helps people navigate through a hierarchy persistently highlights the selected row to clarify the path people are taking. In contrast, a table that lists options often highlights a row only briefly before adding an image — such as a checkmark — indicating that the item is selected.
사용자가 리스트 항목을 선택하면, 적절한 피드백을 제공하세요. 피드백은 항목 선택 시 어떤 일이 일어나는지에 따라 다를 수 있습니다. 일반적으로, 사용자가 계층 구조를 탐색하며 사용하는 테이블은 선택된 행을 지속적으로 강조해 사용자가 가는 경로를 보여줍니다. 대조적으로, 옵션들을 나열하는 테이블은 체크마크같은 이미지가 더해지기 전에 행을 아주 짧게 강조해 어떤 항목이 선택되었는지 보여줍니다.
Keep item text succinct so row content is comfortable to read. Short, succinct text can help minimize truncation and wrapping, making text easier to read and scan. If each item consists of a large amount of text, consider alternatives that help you avoid displaying over-large table rows. For example, you could list item titles only, letting people choose an item to reveal its content in a detail view.
행의 컨텐츠가 읽기 쉽도록 텍스트를 간결하게 유지하세요. 짧고 간결한 텍스트는 생략되거나 래핑되는 양을 줄이고, 가독성을 높입니다. 각 항목이 많은 양의 텍스트를 포함한다면, 이것을 테이블에 그대로 나타내지 말고 다른 대안을 생각해 보세요. 예를 들어, 항목의 제목만을 나타냄으로써 사용자들이 세부 뷰에서 컨텐츠를 볼 수 있게 할 수 있습니다.
Consider ways to preserve readability of text that might otherwise get clipped or truncated. When a table is narrow — for example, if people can vary its width — you want content to remain recognizable and easy to read. Sometimes, an ellipsis in the middle of text can make an item easier to distinguish because it preserves both the beginning and the end of the content.
잘리거나 생략될 수도 있는 텍스트의 가독성을 보장하기 위한 방법을 생각해 보세요. 예를 들어, 사용자가 테이블의 너비를 아주 좁게 만들었을 때, 컨텐츠의 가독성을 유지하고 싶을 것입니다. 텍스트의 중간을 ellipsis(말줄임표)로 만들어 컨텐츠의 시작과 마지막을 보존하는 것이 항목을 구별하기 쉬울 수도 있습니다.
Use descriptive column headings in a multicolumn table. Use nouns or short noun phrases with title-style capitalization, and don’t add ending punctuation. If you don’t include a column heading in a single-column table view, use a label or a header to help people understand the context.
여러 열을 가진 테이블이라면, 열을 설명하는 column heading을 사용하세요. title-style capitalization 형식을 따르는 명사를 사용하세요. 끝에 온점을 찍으면 안됩니다. 한 열로 이루어진 테이블 뷰에 column heading을 추가하지 않는다면, 사용자가 컨텍스트를 이해할 수 있도록 레이블 또는 헤더를 사용하세요.
Choose a table or list style that coordinates with your data and platform. Some styles use visual details to help communicate grouping and hierarchy or to provide specific experiences. In iOS and iPadOS, for example, the grouped style uses headers, footers, and additional space to separate groups of data; the elliptical style available in watchOS makes items appear as if they’re rolling off a rounded surface as people scroll; and macOS defines a bordered style that uses alternating row backgrounds to help make large tables easier to use. For developer guidance, see ListStyle.
데이터와 플랫폼에 맞는 테이블 또는 리스트 스타일을 선택하세요. 그룹화 또는 계층화를 돕거나, 특정 경험을 제공하는 스타일들이 있습니다. 예를 들어, iOS와 iPadOS에서 grouped 스타일은 헤더, 푸터, 그리고 그룹화된 데이터를 나눠두기 위한 여백을 사용합니다. watchOS에서는 사용자가 스크롤하면 둥그런 표면을 따라 내려오는 것처럼 나타나는 elliptical 스타일도 제공합니다. macOS는 bordered 스타일을 제공하는데, 큰 테이블들을 더 사용하기 쉽도록 행의 background를 변경할 수 있습니다. 개발자 지침은 ListStyle을 참고하세요.
→ 컨텐츠를 잘 보여주기 위한 스타일을 잘 적용하세요.
역자 첨언
Choose a row style that fits the information you need to display. For example, you might need to display a small image in the leading end of a row, followed by a brief explanatory label. Some platforms provide built-in row styles you can use to arrange content in list rows, such as the UIListContentConfiguration API you can use to lay out content in a list’s rows, headers, and footers in iOS, iPadOS, and tvOS.
나타내고자 하는 정보에 맞게 행 스타일을 변경하세요. 예를 들어, 행의 선두에 작은 이미지를 짧은 설명 레이블과 함께 나타내고자 합니다. UIListContentConfiguration같이 빌트인 행 스타일을 제공하는 플랫폼도 있습니다. 이 스타일은 iOS, iPadOS, tvOS에서 리스트의 행, 헤더, 푸터에 컨텐츠를 표시할 수 있도록 해 줍니다.
역자 첨언
Use an info button only to reveal more information about a row’s content. An info button — called a detail disclosure button when it appears in a list row — doesn’t support navigation through a hierarchical table or list. If you need to let people drill into a list or table row’s subviews, use a disclosure indicator accessory control. For developer guidance, see UITableViewCell.AccessoryType.disclosureIndicator.
정보 버튼은 행의 컨텐츠에 대한 추가적인 정보를 제공할 때만 사용하세요. 정보 버튼은 계층 구조의 테이블이나 리스트에서의 이동을 지원하지 않습니다. 리스트나 테이블 행의 하위 뷰로 이동시키려면 disclosure indicator(>) 를 사용하세요. 개발자 지침은 UITableViewCell.AccessoryType.disclosureIndicator을 참고하세요.
정보 버튼은 리스트 항목의 디테일을 보여줄 뿐이지, 이동은 지원하지 않습니다.
disclosure indicator는 계층에서 다음 레벨을 나타냅니다. 항목의 디테일을 보여주지 않습니다.
Avoid adding an index to a table that displays controls — like disclosure indicators — in the trailing ends of its rows. An index typically consists of the letters in an alphabet, displayed vertically at the trailing side of a list. People can jump to a specific section in the list by choosing the index letter that maps to it. Because both the index and elements like disclosure indicators appear on the trailing side of a list, it can be difficult for people to use one element without activating the other.
테이블에 disclosure indicator같은 컨트롤을 표시할 때 인덱스를 함께 나타내는 것을 피하세요. 일반적으로 인덱스는 알파벳으로 구성되어 리스트의 뒤쪽에 수직으로 표시됩니다. 사용자들은 해당 리스트에 대응하는 인덱스 문자를 선택하여 특정 섹션으로 이동할 수 있습니다. 그러나 인덱스와 disclosure indicator 같은 요소는 모두 목록의 뒷 부분에 나타나므로 한 요소를 활성화시키지 않고 다른 요소를 사용하는 것이 어려울 수 있습니다.
When it provides value, let people click a column heading to sort a table view based on that column. If people click the heading of a column that’s already sorted, re-sort the data in the opposite direction.
값을 제공할 때, column heading을 클릭해 테이블 뷰를 정렬할 수 있도록 해 주세요. column heading으로 정렬돼 있는 것을 다시 클릭한다면, 그것의 반대로 데이터를 재정렬해주세요.
Let people resize columns. Data displayed in a table view often varies in width. People appreciate resizing columns to help them focus on different areas or reveal clipped data.
사용자가 열의 크기를 조절할 수 있도록 하세요. 테이블 뷰에 나타나는 데이터는 너비가 다를 수 있습니다. 사용자는 열 크기를 조절해 다른 곳에 집중하거나, 잘려진 데이터를 보고 싶어할 수 있습니다.
Consider using alternating row colors in a multicolumn table. Alternating colors can help people track row values across columns, especially in a wide table.
여러 열로 이루어진 테이블은 다른 행 색상을 사용하는 것을 고려해 보세요. 대비되는 색상들은 특히 넓은 테이블에서 행 값들을 열을 따라 추적하는 데 도움이 될 수 있습니다.
Use an outline view instead of a table view to present hierarchical data. An outline view looks like a table view, but includes disclosure triangles for exposing nested levels of data. For example, an outline view might display folders and the items they contain.
계층적 데이터를 제공하기 위해 테이블 뷰 대신 아웃라인 뷰를 사용하세요. outline view는 테이블 뷰와 비슷해 보이지만, 중첩된 데이터 수준을 노출하는 disclosure triangle을 포함합니다. 예를 들어, 아웃라인 뷰는 폴더와 그들이 포함하는 항목을 표시할 수 있습니다.
Confirm that images near a table still look good as each row highlights and slightly increases in size when it becomes focused. A focused row’s corners can also become rounded, which may affect the appearance of images on either side of it. Account for this effect as you prepare images, and don’t add your own masks to round the corners.
테이블 근처의 이미지가 각 행이 강조되고 크기가 약간 커지는 경우에도 잘 보이도록 확인하세요. 강조된 행의 모서리는 둥글어질 수 있으며, 이는 그 옆의 이미지의 모양에 영향을 줄 수 있습니다. 이미지를 준비할 때 이 효과를 고려하고 자체적으로 모서리를 둥글게 만들지 마세요.
When possible, limit the number of rows. Short lists are easier for people to scan, but sometimes people expect a long list of items. For example, if people subscribe to a large number of podcasts, they might think something’s wrong if they can’t view all their items. You can help make a long list more manageable by listing the most relevant items and providing a way for people to view more.
가능하다면, 행 수를 제한하세요. 짧은 리스트는 사람들이 탐색하기 쉽지만 때로는 사람들이 긴 리스트를 기대할 수 있습니다. 예를 들어, 사람들이 많은 팟캐스트를 구독하는 경우 모든 항목을 볼 수 없으면 뭔가 잘못되었다고 생각할 수 있습니다. 가장 관련성 있는 항목을 나열하고 사람들이 더 많은 항목을 볼 수 있도록 하는 방법을 제공하여 긴 리스트를 더 관리하기 쉽게 할 수 있습니다.
Constrain the length of detail views if you want to support vertical page-based navigation. People use vertical page-based navigation to swipe vertically among the detail items of different list rows. Navigating in this way saves time because people don’t need to return to the list to tap a new detail item, but it works only when detail views are short. If your detail views scroll, people won’t be able to use vertical page-based navigation to swipe among them.
세로 페이지 기반 탐색을 지원하려면 상세 보기의 길이를 제한하세요. 사용자는 서로 다른 리스트의 행의 상세 항목을 세로로 스와이프하여 탐색하는 세로 페이지 기반 탐색을 사용합니다. 이 방법으로 탐색하면 새로운 상세 항목을 탭하기 위해 리스트로 돌아갈 필요가 없으므로 시간을 절약할 수 있지만 상세 보기가 스크롤되면 세로 페이지 기반 탐색을 사용할 수 없습니다.
List - SwiftUI
Tables - SwiftUI
UITableView - UIKit
NSTableView - AppKit
Change log
작성 날짜 | 작성자 | 수정사항 |
2023/9/12 | 디온 | 초기 번역 |