애플 휴먼 인터페이스 가이드라인(50) Views -10 Tables

Tables
테이블

A table presents data as a scrolling, single-column list of rows that can be divided into sections or groups. Use a table to display large or small amounts of information cleanly and efficiently in the form of a list. Generally speaking, tables are ideal for text-based content, and often appear as a means of navigation on one side of a split view, with related content shown on the opposite side. For guidance, see Split Views.

 

테이블은 스크롤 가능한 단일 열의 리스트로 데이터를 보여줍니다. 이 때 행은 섹션이나 그룹으로 나눠집니다. 테이블을 사용하면, 크거나 작은 양의 정보를 리스트 양식을 통해 명확하고 효율적으로 보여줄 수 있습니다. 일반적으로 테이블은 텍스트 기반의 콘텐츠를 보여주는데 가장 이상적이나, 스플릿 뷰의 한쪽 사이드 네비게이션이 되어 반대쪽의 화면과 관련된 콘텐츠를 보여주기도 합니다. 가이드는 스플릿 뷰에서 확인하세요.

 

iOS provides three styles of table: plain, grouped, and inset grouped.

iOS는 세가지 종류의 테이블을 제공합니다: 플레인, 그룹, 인셋 그룹

 

Plain. Rows can be separated into labeled sections, and an optional index can appear vertically along the right edge of the table. A header can appear before the first item in a section, and a footer can appear after the last item.

플레인. 각 줄은 라벨된 섹션으로 나뉘고, 인덱스가 선택적으로 테이블의 오른쪽 끝에 수직으로 배치될 수 있습니다. 헤더는 섹션의 첫번째 아이템 전에 보여지고, 푸터는 마지막 아이템 뒤에 나옵니다.

Plain

Grouped. Rows are displayed in groups, which can be preceded by a header and followed by a footer. This style of table always contains at least one group and each group always contains at least one row. A grouped table doesn’t include an index.

그룹. 각 줄은 그룹으로 묶여 나타나는데, 헤더나 푸터를 앞세울 수 있습니다. 이런 스타일은 항상 한개 이상의 그룹을 포함하며, 각 그룹은 한줄 이상을 포함합니다. 그룹 테이블은 인덱스를 포함하지 않습니다.

Grouped

Inset grouped. Rows are displayed in groups that have rounded corners and are inset from the edges of the parent view (as shown on the right of the image above). This style of table always contains at least one group and each group always contains at least one row and can be preceded by a header and followed by a footer. An inset grouped table doesn’t include an index. The inset grouped style works best in a regular width environment. Because there's less space in a compact environment, an inset grouped table can cause text wrapping, especially when content is localized.

 

인셋 그룹. 각 줄은 그룹으로 보여지고, 이 그룹은 둥근 모서리가 있으며 모체 뷰의 가장자리보다 안쪽으로 끼어 들어와있습니다. (이미지의 오른쪽에 보여지는 것 처럼) 이런 스타일은 항상 한개 이상의 그룹을 포함하며, 각 그룹은 한개 이상의 줄을 포함하며, 헤더나 푸터를 앞세울 수 있습니다. 인셋 그룹 테이블은 인덱스를 포함하지 않습니다. 인셋 그룹은 일반적인 너비의 환경에서 가장 잘 작동합니다. 좁은 환경에선 적절한 공간이 없어, 콘텐츠가 로컬라이징 되었을 때 텍스트래핑*이 생길 수 있기 때문입니다.

Inset Grouped

*텍스트 래핑 예시. 텍스트가 콘텐츠를 감싼다.

Think about table width. Thin tables can cause truncation and wrapping, making them hard to read and scan quickly at a distance. Wide tables can also be difficult to read and scan, and can take away space from content.

테이블 너비를 고려하세요. 너무 짧은 테이블은 텍스트가 잘리거나 래핑되는 문제를 일으킬 수 있고, 이렇게 되면 멀리서 빠르게 읽고 스캔하기 어렵게 됩니다. 너무 긴 테이블 또한 읽고 스캔하기 어렵게 되는데, 콘텐츠에서 적절한 여백이 없어지기 때문입니다.

 

Begin showing table content quickly. Don’t wait for extensive table content to load before showing something. Fill onscreen rows with textual data immediately and show more complex data—such as images—as it becomes available. This technique gives people useful information right away and increases the perceived responsiveness of your app. In some cases, showing stale, older data may make sense until fresh, new data arrives.

테이블 콘텐츠를 빨리 보여주세요. 뭘 보여주기 전에 대규모의 테이블 콘텐츠가 로드되길 기다리지 마세요. 화면의 줄을 텍스트 데이터로 즉시 채우고, 이미지와 같이 복잡한 데이터는 사용가능할 때 나중에 보여주세요. 이런 기술은 사용자들에게 유용한 정보를 즉시 주고, 책임 지각을 높입니다. 몇몇 경우엔 오래된 데이터를 새 데이터가 로드되기 전에 보여주는게 논리적일 수도 있습니다.

 

Communicate progress as content loads. If a table’s data takes time to load, show a progress bar or spinning activity indicator to reassure people that your app is still running.

콘텐츠가 로드되는 동안 진행과정을 보여주세요. 만약 테이블의 데이터가 로드되는데 시간이 걸린다면, 프로그레스 바나 스피닝 인디네이터를 보여줘 사용자들에게 앱이 지금 일 진행중이라는걸 알려주세요.

 

Keep content fresh. Consider updating your table’s content regularly to reflect newer data. Just don’t change the scrolling position. Instead, add the content to the beginning or end of the table, and let people scroll to it when they’re ready. Some apps display an indicator when new data has been added, and provide a control for jumping right to it. It’s also a good idea to include a refresh control, so people can manually perform an update at any time. See Refresh Content Controls.

콘텐츠는 최신으로 유지하세요. 테이블의 콘텐츠를 주기적으로 업데이트해 더 최신의 데이터를 보여주세요. 스크롤 포지션을 단순히 바꾸지 마세요. 대신, 테이블의 시작과 끝에 콘텐츠를 더해 사용자들이 준비되었을 때 스크롤할 수 있게 하세요. 몇 앱은 인티케이터를 보여줘 새 데이터가 추가되었다는 걸 알려주며, 바로 이동할 수 있는 컨트롤을 제공합니다. 또 새로고침 컨트롤을 포함하는 것은 좋은 방법인데, 사용자들이 직접 수동으로 언제든 업데이트할 수 있기 때문입니다. 콘텐츠 새로고침 컨트롤을 확인하세요.

 

Avoid combining an index with table rows containing right-aligned elements. An index is controlled by performing large swiping gestures. If other interactive elements reside nearby, such as disclosure indicators, it may be difficult to discern the user’s intent when a gesture occurs and the wrong element may be activated.

For developer guidance, see UITableView.

인덱스를 오른정렬된 테이블 줄에 넣지 마세요. 인덱스는 큰 스와이프 제스처로 작동됩니다. 만약 보여주기 인디케이터 같이 상호작용 가능한 다른 요소가 주변에 있다면, 어떤 제스처가 발생했을 때 사용자들의 의도를 확실히 알아채기 어려울 것이고, 원치 않는 요소가 활성화될 수 있습니다.

Table Rows

You use standard table cell styles to define how content appears in table rows.

표준 테이블 셀 스타일을 사용해 테이블 줄에 어떻게 콘텐츠가 보여질지 정할 수 있습니다.

Basic (Default). An optional image on the left side of the row, followed by a left-aligned title. It’s a good option for displaying items that don’t require supplementary information. For developer guidance, see the UITableViewCellStyleDefault constant of UITableViewCell.

베이직 (기본). 옵션 이미지가 줄의 왼편에 있으며, 왼쪽 정렬된 타이틀이 붙습니다. 추가 정보가 필요없는 아이템을 보여줄 때 좋은 선택입니다.

Subtitle. A left-aligned title on one line and a left-aligned subtitle on the next. This style works well in a table where rows are visually similar. The additional subtitle helps distinguish rows from one another. For developer guidance, see the UITableViewCellStyleSubtitle constant of UITableViewCell.

서브타이틀. 왼쪽 정렬된 한줄의 타이틀과 왼쪽 정렬된 서브타이틀이 그 다음에 표시됩니다. 이 스타일은 각 줄들이 시각적으로 비슷한 경우 잘 작동합니다. 추가 서브타이틀이 해당 줄과 다른 줄을 구분하는데 도움을 줍니다.

Right Detail (Value 1). A left-aligned title with a right-aligned subtitle on the same line. For developer guidance, see the UITableViewCellStyleValue1 constant of UITableViewCell.

오른편 디테일 (값 1). 왼쪽정렬된 타이틀과 오른쪽정렬된 서브타이틀이 같은 줄에 있습니다.

Left Detail (Value 2). A right-aligned title, followed by a left-aligned subtitle on the same line. For developer guidance, see UITableViewCellStyleValue2 constant of UITableViewCell.

왼편 디테일 (값 2). 오른쪽정렬된 타이틀과 왼쪽정렬된 서브타이틀이 같은 줄이 있습니다.

 

All standard table cell styles also allow graphical elements, such as a checkmark or disclosure indicator. Of course, adding these elements decreases the space available for titles and subtitles.

모든 표준 테이블 셀 스타일은 체크마크(v)나 표시자(>)와 같은 그래픽 요소도 포함합니다. 물론, 이런 요소를 포함시키면 타이틀과 서브타이틀을 위한 영역은 줄게 됩니다.

 

Keep text succinct to avoid clipping. Truncated words and phrases are hard to scan and decipher. Text truncation is automatic in all table cell styles, but it can present more or less of a problem depending on which cell style you use and where truncation occurs.

텍스트를 간결하게 유지하고, 잘리지 않게 주의하세요. 잘린 단어와 구는 스캔하고 판독하기 어렵습니다. 텍스트 잘림은 모든 테이블 셀 스타일에서 자동으로 발생하는데, 어떤 셀 스타일을 사용하고 잘림이 어디서 발생하는지에 따라 더 크거나 작은 문제가 될 수 있습니다.

 

Consider using a custom title for a Delete button. If a row supports deletion and it helps provide clarity, replace the system-provided Delete title with a custom title.

삭제 버튼 타이틀은 직접 쓰는걸 고려해보세요. 만약 한 줄에서 삭제를 지원하고, 이가 명료성을 제공한다면, 시스템에서 제공되는 삭제 타이틀을 다른 단어로 대체하세요.

 

Provide feedback when a selection is made. People expect a row to highlight briefly when its content is tapped. Then, people expect a new view to appear or something to change, such as a checkmark appearing, that indicates a selection has been made.

사용자가 어떤 선택을 하면, 피드백을 제공하세요. 사용자들은 콘텐츠를 탭하면 그 줄이 짧게 하이라이트 되길 기대합니다. 그리고, 사용자들은 뷰가 새로 보여지거나 체크마크 등 변화가 일어나 어떤 선택이 일어났다는걸 알려주길 기대합니다.

 

Design a custom table cell style for nonstandard table rows. Standard styles are great for use in a variety of common scenarios, but some content or your overall app design may call for a heavily customized table appearance. To learn how to create your own cells, see Customizing Cells in Table View Programming Guide for iOS.

For developer guidance, see UITableViewCell.

테이블 셀 스타일을 새로 만들어 비표준 테이블 줄을 디자인하세요. 표준 스타일은 여러가지 일반적인 시나리오에서 잘 쓰일 수 있으나, 몇몇 콘텐츠나 전반적인 앱 디자인에선 색다르게 커스텀된 테이블 외형이 필요할 수도 있습니다. 새로운 셀을 만드는 것은 Table View Programming Guide for iOS 의 Customizing Cells 를 참고하세요.