brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 29. 2023

[HIG] Pull-down buttons

목적과 직접적으로 관련된 메뉴 풀다운 버튼

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

Introduction

풀다운 버튼은 버튼의 목적과 직접적으로 관련된 항목 또는 행동(action)에 대한 메뉴를 표시합니다.

풀다운 버튼의 메뉴에서 항목을 선택하면 메뉴가 닫히고 앱이 선택한 작업을 수행합니다.

역자 설명 : 하단의 이미지는 풀다운 버튼 예시입니다.

날씨앱, 연락처앱, 홈앱, 음악(애플뮤직) 앱

Best practices

풀다운 버튼을 사용하여 버튼의 동작과 직접 관련된 명령이나 항목을 표시할 수 있습니다. 이 메뉴를 사용하면 인터페이스에 추가 버튼을 만들지 않고도 버튼의 대상을 명확히 하거나 버튼의 동작을 사용자 지정할 수 있습니다. 예를 들어

추가 버튼에는 추가하려는 항목을 지정할 수 있는 메뉴가 표시될 수 있습니다.

정렬 버튼은 메뉴를 사용하여 사람들이 정렬할 속성을 선택할 수 있도록 할 수 있습니다.

뒤로 버튼은 사람들이 이전 위치를 여는 대신 다시 방문할 특정 위치를 선택할 수 있도록 할 수 있습니다.

명령이 아닌 상호 배타적인 선택 목록을 제공해야 하는 경우에는 팝업 버튼을 대신 사용하세요.

역자 설명 : 하단의 설명과 이미지는 풀다운 버튼, 팝업 버튼에 대한 예시와 설명입니다.

풀다운 버튼 : 버튼의 동작과 직접 관련된 명령이나 항목

ex) ‘추가’ 버튼 클릭 시, 추가하려는 항목 지정 아이폰 > 연락처 앱 > 우측 상단 ‘목록 추가’ 버튼 클릭 > 추가 동작과 직접 관련된 항목인 ‘iCloud’, ‘Gmail’을 옵션으로 보여줌

ex) ‘정렬’ 버튼 클릭 시, 정렬 속성 선택 가능 아이폰 > 애플뮤직 앱 > 보관함 > 노래 > 우측 상단 ‘정렬’ 버튼 클릭 > 정렬 동작과 직접 관련된 항목인 ‘제목’, ‘최근 추가된 항목’, ‘ 아티스트’ 보여줌

ex) ‘편집’ 버튼 클릭 시, 편집 동작에 직접 관련된 명령을 보여줌 아이폰 > iMessage 앱 > 좌측 상단 ‘편집’ 버튼 클릭 > 편집 동작에 직접 관련된 명령인 ‘메시지 선택’, ‘고정 편집’, ‘이름 및 사진 편집’을 옵션으로 보여줌

아이폰 연락처앱, 애플뮤직앱, iMessage 앱

팝업버튼: 상호 배타적인 선택 목록

ex) 맥북 > System Preferences > General에서 Highlight color: 팝업 버튼으로 ‘Accent Color’, ‘Blue’, ‘Purple’ 등 보여줌 Default web browser: 팝업 버튼으로 ‘구글크롬’, ‘사파리’, ‘네이버 웨일’ 보여줌

ex) (SIM 두 개 쓰는 경우) 아이폰 > 전화앱 > 팝업버튼으로 Primary line 쓸 건지 Secondary line 쓸 건지 두 개의 상호배타적인 선택 항목을 옵션으로 제공해 줌

(Mac) 팝업버튼 vs 풀다운 버튼

뷰의 모든 동작을 하나의 풀다운 버튼에 넣지 마세요. 뷰의 기본 동작은 쉽게 찾을 수 있어야 하므로 사람들이 어떤 작업을 수행하기 전에 열어야 하는 풀다운 버튼에 숨기고 싶지 않을 것입니다.

메뉴 길이와 사용 편의성의 균형을 맞추세요. 풀다운 버튼을 눌렀을 때 어떠한 메뉴가 나오는지 알지 못하는 채로 풀다운 버튼을 누르기 때문에, 최소 3개 이상의 항목이 있는 것이 사람들에게 있어 풀다운 버튼을 누를만한 가치가 있다고 느끼게 도와줍니다. 한두 개의 항목만 나열해야 하는 경우에는 작업을 활성화하는 버튼, 선택 항목을 표시하는 토글 또는 스위치와 같은 대체 구성 요소를 사용하여 항목을 표시하는 것이 좋습니다. 반대로 풀다운 버튼의 메뉴에 너무 많은 항목을 나열하면 특정 항목을 찾는 데 시간이 오래 걸리기 때문에 속도가 느려질 수 있습니다.

역자 설명 : 풀다운 버튼 눌러서 하나의 옵션만 보여줄 거면 바로 그 옵션에 대한 버튼 보여주는 것이 나을 수도 있습니다.

ex) 더 보기 풀다운 버튼 눌러서 ‘삭제’ 옵션만 있을 거면 더 보기 버튼 대신 삭제 버튼을 보여주는 게 낫습니다.

풀다운 버튼에 메뉴가 많은 경우 separator를 써서 그룹화할 수 있습니다.

풀다운 버튼을 클릭해서 나오는 메인 메뉴 밑에 하위 메뉴(submenu)를 만들기도 합니다.

의미를 더하는 경우에만 간결한 메뉴 제목을 표시하세요. 일반적으로 풀다운 버튼의 콘텐츠는 설명이 포함된 메뉴 항목과 함께 사용자에게 필요한 모든 컨텍스트를 제공하므로 메뉴 제목은 불필요합니다.

풀다운 버튼의 메뉴 항목이 파괴적인 경우 사용자에게 알리고 의도를 확인하도록 요청하세요. 빨간색 텍스트를 사용하여 잠재적으로 파괴적인 것으로 식별되는 작업을 강조 표시합니다. 사용자가 파괴적인 동작을 선택하면 시스템에서 action sheet(iOS) 또는 popover(iPadOS)를 표시하여 선택을 확인하거나 동작을 취소할 수 있습니다. 액션 시트는 메뉴와 다른 위치에 표시되며 의도적으로 해제해야 하므로 실수로 데이터를 잃는 것을 방지하는 데 도움이 됩니다.

역자 설명 : 아래의 세 가지 경우에서 모두 데이터를 잃을 수 있는 활동은 빨간색으로 경고의 의미를 담아서 보여줍니다.

첫 번째 예시 : 음악 앱(Apple Music) > 보관함 > 노래 > 노래 리스트 화면에서 특정 노래 우측의 ‘…’ 버튼 클릭 시

두 번째 예시 : 음악 앱(Apple Music) > 보관함 > 플레이리스트 > 특정 플레이리스트 선택 > 해당 플레이리스트에 소속된 음악들의 리스트 화면에서 우측 상단의 ‘…’ 버튼 클릭 시

세 번째 예시 : 미리 알림(Reminders) > 나의 목록 > 특정 목록 선택 > 우측상단 ‘…’ 버튼 클릭

빨간색으로 표시된 삭제 버튼을 눌렀을 경우, 아래와 같이 액션 시트로 정말 삭제할 것인지를 다시 한번 확인합니다.

메뉴 항목이 가치를 제공하는 경우 메뉴 항목과 함께 인터페이스 아이콘을 포함하세요. 항목의 의미를 명확히 해야 하는 경우 레이블 뒤에 interface icon이나 이미지를 표시할 수 있습니다. 이 용도로 SF symbol을 사용하면 친숙한 경험을 제공하는 동시에 심벌이 모든 배율에서 텍스트와 정렬되도록 할 수 있습니다.

Platform considerations

macOS에 대한 추가 고려 사항은 없습니다. tvOS 또는 watchOS에서는 지원되지 않습니다.

iOS, iPadOS

Note : 참고 버튼에서 특정 제스처를 수행하여 풀다운 메뉴를 표시하도록 할 수도 있습니다. 예를 들어, iOS 14 이상에서 Safari는 탭 버튼을 길게 터치하면 새 탭 및 모든 탭 닫기와 같은 탭 관련 동작 메뉴를 표시하여 응답합니다.

역자 설명 : 위의 ‘참고’에 대한 화면입니다.

첫 번째 예시 기본 Safari 화면

두 번째 예시 (하나의 탭만 있을 때) Safari에서 탭 버튼 길게 터치했을 경우

세 번째 예시 (여러 개의 탭이 있을 때) Safari에서 탭 버튼 길게 터치했을 경우

더 보기 풀다운 버튼(More pull-down button)을 사용하여 기본 인터페이스에서 눈에 잘 띄는 위치가 필요하지 않은 항목을 표시하는 것이 좋습니다. 더 보기 버튼은 공간이 제한된 곳에서 다양한 항목을 제공하는 데 도움이 될 수 있지만, 검색을 방해할 수도 있습니다. 사람들은 일반적으로 더 보기 버튼이 현재 컨텍스트와 관련된 추가 기능을 제공한다는 것을 이해하지만, 줄임표 아이콘이 반드시 그 내용을 예측하는 데 도움이 되지는 않습니다. 효과적인 더 보기 버튼을 디자인하려면 버튼 크기의 편의성과 검색 기능에 미치는 영향을 비교하여 앱에 적합한 균형을 찾아야 합니다. 줄임표. 원(ellipsis.circle) 기호를 사용하여 더 보기 버튼을 만듭니다.