brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 25. 2023

[HIG] Pop-up buttons

상호 배타적인 옵션을 가진 팝업 버튼

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

Introduction

팝업 버튼은 상호 배타적인 옵션을 가진 메뉴를 표시합니다.

팝업 버튼의 메뉴에서 항목을 선택하면, 메뉴가 닫히고, 버튼이 현재 선택된 항목을 표시하도록 콘텐츠를 업데이트합니다.

역자 설명 : 하단의 이미지는 전화 앱의 pop-up button의 예시입니다.

출처 : WWDC21 - Meet the UIKit button system

두 개의 SIM을 쓸 때, 전화 앱에서 어떤 SIM으로 쓸지 선택하는 pop-up 버튼입니다.

항목을 선택하면, 메뉴가 닫히고, 버튼이 현재 선택된 항목인 ‘Secondary’로 업데이트됩니다.

역자 설명 : 하단의 gif는 mac에서 Highlight color를 바꾸는 pop-up 버튼입니다.

출처: https://sarunw.com/posts/popup-buttons-in-swiftui/

Best practices

팝업 버튼을 사용하여 상호 배타적인 옵션 또는 상태의 flat list를 나타내세요. 팝업 버튼은 사람들이 콘텐츠 또는 주변 화면(surrounding view)에 영향을 미치는 선택을 할 수 있도록 도와줍니다. 아래의 경우에는 팝업 버튼 대신 pull-down button을 사용하세요:

행동(action) 목록 제공

사람들이 여러 항목을 선택하도록 허용할 때

하위 메뉴를 포함할 때

역자 설명 : 팝업 버튼은 사실 풀다운 버튼의 연장선상에 있습니다. 하단의 블로그에 개발 코드 및 자세한 설명이 되어있으니 참고하시면 좋습니다. [iOS] Pull Down Button과 Pop Up Button

역자설명 : 하단의 이미지는 macOS에서의 풀다운 버튼, 팝업 버튼, 토글 버튼의 예시입니다.

유용한 기본 선택 항목을 제공하세요. 팝업 버튼은 현재 선택 항목을 식별할 수 있도록 콘텐츠를 업데이트할 수 있지만, 사람들이 아직 선택하지 않은 경우에는 지정한 기본(default) 항목을 표시합니다. 가능하면 대부분의 사람들이 원할 가능성이 높은 항목을 기본 선택 항목으로 설정하세요.

역자 설명 : 하단의 이미지는 전화 앱의 기본(default) 항목인 Use primary line입니다.

출처 : WWDC21 - Meet the UIKit button system

사람들이 팝업 버튼을 열지 않고도 팝업 버튼의 옵션을 예측할 수 있는 방법을 제공하세요. 예를 들어 버튼의 효과를 설명하는 소개 레이블이나 버튼 레이블을 사용하여 옵션에 대한 컨텍스트를 제공할 수 있습니다.

공간이 제한되어 있어 모든 옵션을 항상 표시할 수가 없는 경우 팝업 버튼을 사용하는 것이 좋습니다. 팝업 버튼은 다양한 선택 사항을 표시할 수 있는 효율적인 공간 사용 방법입니다.

필요한 경우 팝업 버튼의 메뉴에 사용자 지정 옵션을 포함시켜 상황에 따라 유용한 추가 항목을 제공하세요. 사용자 지정 옵션을 제공하면 가끔씩만 필요한 항목이나 컨트롤로 인터페이스가 복잡해지는 것을 방지할 수 있습니다. 목록 아래에 설명 텍스트를 표시하여 사람들이 옵션의 작동 방식을 이해하는 데 도움을 줄 수도 있습니다.

Platform considerations

No additional considerations for iOS or macOS. Not supported in tvOS or watchOS.

iPadOS

팝업 또는 모달 보기 내에서 공개 표시기 대신 팝업 버튼을 사용하여 목록 항목에 대한 여러 옵션을 표시하는 것이 좋습니다. 예를 들어 사람들은 세부 정보 보기로 이동하지 않고도 팝업 버튼의 메뉴에서 옵션을 빠르게 선택할 수 있습니다. 메뉴에서 잘 작동하는 비교적 작고 잘 정의된 옵션 집합이 있는 경우 이 시나리오에서 팝업 버튼을 사용하는 것을 고려하세요.