brunch

You can make anything
by writing

C.S.Lewis

by Lawn Apr 04. 2024

[HIG] Pickers

스크롤 가능한 목록의 값을 보여주는 피커

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

Introduction

선택기(pickers)는 사람들이 선택할 수 있는 하나 이상의 스크롤 가능한 목록의 값을 표시합니다.

시스템에서는 여러 가지 스타일의 선택기(picker)를 제공하며, 각 선택기(picker)마다 선택 가능한 값의 유형이 다르고 모양도 다릅니다. 선택기(picker)에 표시되는 정확한 값과 그 순서는 디바이스 언어에 따라 다릅니다.

선택기(picker)는 사용자가 단일 또는 여러 부분의 값을 선택할 수 있도록 하여 정보를 입력하는 데 도움을 줍니다. 특히 날짜 선택기는 달력 보기에서 날짜를 선택하거나 숫자 키패드를 사용하여 날짜와 시간을 입력하는 등 값을 선택할 수 있는 추가적인 방법을 제공합니다.

Best practices

긴 목록의 항목들은 선택기(picker)를 사용하는 것이 좋습니다. 선택 목록 중 짧은 항목을 표시해야 하는 경우에는 선택기 대신 풀다운 버튼(pull-down button)을 사용하는 것이 좋습니다. 선택기를 사용하면 많은 항목을 빠르게 스크롤할 수 있지만, 짧은 선택 항목에 사용자들의 시선이 쏠릴 수 있습니다. 반면에 매우 큰 항목 집합을 표시해야 하는 경우에는 목록이나 표(list or table)를 사용하는 것이 좋습니다. 목록과 표는 높이를 조절할 수 있고 표에는 색인을 포함할 수 있으므로 목록의 섹션을 훨씬 더 빠르게 타기팅할 수 있습니다.

사람들이 예측하기 쉽고, 논리적으로 정렬된 방식을 사용하세요. 사람들이 선택기와 상호 작용하기 전 값을 표시하지 않고 숨길 수 있습니다. 알파벳순으로 나열된 국가 목록처럼 사람들이 숨겨진 값이 무엇인지 예측하기 쉽게 정렬시키면 항목을 빠르게 탐색할 수 있도록 도울 수 있습니다.

선택기(picker)를 표시하기 위해 보기를 전환하지 마세요. 선택기는 사람들이 편집 중인 필드 아래 또는 근처에서 사용 맥락에 맞게 표시될 때 가장 효과적입니다. 선택기는 일반적으로 창 하단이나 팝오버에 표시됩니다.

날짜 선택기(date picker)에서 분을 지정할 때는 세분화시키지 않는 것이 좋습니다. 기본적으로 분 목록에는 60개의 값(0~59)이 포함됩니다. 분 간격이 60으로 균등하게 나뉘는 한 선택적으로 분 간격을 늘릴 수 있습니다. 예를 들어 분기별 간격(0, 15, 30, 45)이 필요할 수 있습니다.

Platform considerations

No additional considerations for visionOS.

iOS, iPadOS

날짜 선택기(date picker)는 터치, 키보드 또는 포인팅 장치를 사용하여 특정 날짜, 시간 또는 둘 다를 선택할 수 있는 효율적인 인터페이스입니다. 날짜 선택기는 다음 스타일 중 하나로 표시할 수 있습니다:

콤팩트(Compact) - 편집 가능한 날짜 및 시간 콘텐츠를 모달 뷰로 표시하는 버튼입니다.

인라인(Inline) - 시간에 대해서만 데이터 휠을 표시하는 버튼이며, 날짜와 시간에 대해서는 인라인 캘린더 뷰를 표시합니다.

휠(Wheels) - 내장 또는 외부 키보드를 통한 데이터 입력도 지원하는 스크롤 휠 세트입니다.

자동(Automatic) - 현재 플랫폼 및 날짜 선택기 모드에 따라 시스템에서 결정한 스타일입니다.

날짜 선택기(date picker)에는 네 가지 모드가 있으며 각 모드마다 선택 가능한 데이터의 집합이 다릅니다.

날짜(Date) - 월, 월, 일, 연도를 표시합니다.

시간(Time) - 시간, 분 및 (선택 사항으로) 오전/오후 지정을 표시합니다.

날짜 및 시간(Date and time) - 날짜, 시간, 분 및 (선택 사항으로) 오전/오후 지정을 표시합니다.

카운트다운 타이머(Countdown timer) - 최대 23시간 59분까지 시와 분을 표시합니다. 이 모드는 인라인 또는 콤팩트 스타일에서는 사용할 수 없습니다.

날짜 선택기(date picker)에 표시되는 정확한 값과 그 순서는 디바이스 위치에 따라 달라집니다.

다음은 다양한 스타일과 모드의 조합을 보여주는 날짜 선택기의 몇 가지 예입니다.

콤팩트(Compact)

인라인(Inline)

휠(Wheels)

공간이 협소한 경우 콤팩트(compact)한 날짜 선택기(date picker)를 사용하세요. 콤팩트 스타일은 앱의 강조 색상(accent color)으로 현재 값을 보여주는 버튼을 표시합니다. 사용자가 버튼을 탭 하면 날짜 선택기가 모달 뷰를 열어 익숙한 달력 스타일의 편집기 및 시간 선택기에 액세스 할 수 있습니다. 모달 뷰 내에서 사용자는 날짜와 시간을 여러 번 수정한 후 보기 외부를 탭 하여 선택 사항을 확인할 수 있습니다.

macOS

앱에 맞는 날짜 선택기(date picker) 스타일을 사용하세요. macOS에는 텍스트와 그래픽의 두 가지 날짜 선택기 스타일이 있습니다. 텍스트 스타일은 제한된 공간에서 작업할 때 사람들이 특정 날짜와 시간을 선택해야 할 때 유용합니다. 그래픽 스타일은 달력에서 날짜를 탐색하거나 날짜 범위를 선택할 수 있는 옵션을 제공하려는 경우 또는 시계 화면 모양이 앱에 적합한 경우에 유용합니다.

개발자 가이드라인은 NSDatePicker를 참고하세요.

tvOS

선택기(picker)는 SwiftUI가 설치된 tvOS에서 사용할 수 있습니다. 개발자 가이드라인은 선택기(Picker)를 참고하세요.

whatchOS

선택기(picker)는 사람들이 디지털 크라운을 통해 탐색하는 항목의 목록을 표시하여 사람들이 정확하고 효과적인 방식으로 선택 항목을 관리할 수 있도록 도와줍니다.

선택기(picker)는 휠(wheels) 스타일을 사용하여 항목 목록을 표시할 수 있으며, watchOS에서는 휠 스타일을 사용하여 날짜 및 시간 선택기(time picker)를 표시할 수도 있습니다. 개발자 가이드라인은 선택기(Picker) 및 날짜 선택기(DatePicker)를 참고하세요.

개요, 캡션 및 스크롤 표시기를 표시하도록 선택기를 구성할 수 있습니다.

긴 목록의 경우 탐색 링크(navigaion link)에 선택기(picker)가 버튼으로 표시됩니다. 사용자가 버튼을 탭 하면 시스템에 옵션 목록이 표시됩니다. 버튼을 탭 하지 않고도 디지털 크라운을 사용하여 옵션을 스크러빙할 수도 있습니다. 개발자 가이드라인은 탐색 링크(navigationLink)를 참고하세요.