brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 17. 2023

[HIG] Disclosure controls

정보 및 기능을 숨기는 디스클로저 컨트롤

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


Introduction


디스클로저 컨트롤(Disclosure control)은 해당 컨트롤 또는 화면과 관련된 정보 및 기능을 나타내거나 숨깁니다.


Best Practices


세부 기능들을 숨기기 위해 디스클로저 컨트롤(Disclosure control)을 사용합니다. 사용자가 가장 많이 사용할 만한 컨트롤을 디스클로저(disclosure)의 최상단에 배치해 항상 볼 수 있도록 하고, 세부 기능들은 기본적으로 숨겨져 있도록 합니다. 이러한 구조는 사용자가 너무 많은 세부 기능들로 인해 부담을 느끼지 않고, 필수 기능들에 먼저 집중할 수 있도록 돕습니다.


Disclosure triangles


디스클로저 트라이앵글(Disclosure triangle)은 화면 또는 아이템 목록과 관련된 정보 및 기능을 표시하거나 숨깁니다. 예를 들어 Keynotes는 프레젠테이션을 내보낼 때 디스클로저 컨트롤(disclosure control)을 사용하여 고급 옵션을 표시하고 Finder는 목록 보기에서 폴더 구조를 탐색할 때 디스클로저 컨트롤(disclosure control)을 사용하여 단계적으로 계층을 표시합니다.


디스크로저 트라이앵글(Disclosure triangle)은 콘텐츠가 숨겨져 있을 때 앞쪽(leading)을 향하고 콘텐츠를 표시할 때 아래쪽을 향합니다. 디스크로저 컨트롤 9 disclosure control)을 클릭하거나 탭 하면 두 상태가 전환되고, 화면은 내용에 적합하게 펼쳐지거나 접힙니다.


디스클로저 트라이앵글(Disclosure triangle)을 사용할 때는 설명 레이블을 제공합니다. 레이블에는 “고급 옵션” 과 같이 어떤 내용이 표시되거나 숨겨지는지 나타냅니다.


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


Disclosure buttons


디스클로저 버튼(Disclosure button)은 특정 컨트롤과 관련된 기능을 표시하거나 숨깁니다. 예를 들어, macOS의 저장 시트는 “위치” 텍스트 필드 옆에 디스클로저 버튼(disclosure button)을 표시합니다. 사용자가 이 버튼을 클릭하거나 탭 하면 저장 대화상자가 확장되어 문서의 저장 위치를 선택할 수 있는 고급 탐색 옵션을 제공합니다.


디스클로저 버튼(Disclosure button)은 콘텐츠가 숨겨져 있을 때 아래쪽을 향하고 콘텐츠를 표시할 때 위쪽을 향합니다. 디스클로저 버튼(disclosure button)을 클릭하거나 탭 하면 두 상태가 전환되고, 화면은 내용에 적합하게 펼쳐지거나 접힙니다.


디스클로저 버튼(Disclosure button)을 표시하거나 숨길 내용 근처에 위치시킵니다. 디스클로저 버튼(disclosure button)과 사용자가 버튼을 누르거나 탭할 때 나타나는 확장된 선택 항목 간의 명확한 관계를 설정합니다.


하나의 화면에 한 개 보다 많은 디스클로저 버튼(disclosure button)을 사용할 수 없습니다. 여러 개의 디스클로저 버튼(disclosure button)은 복잡도를 높이고 혼란을 일으킬 수 있습니다.


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


Platform considerations


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


iOS, iPadOS

디스클로저 컨트롤(Disclosure controls)은 SwiftUI의 DisclosureGroup 뷰가 사용된 iOS 및 iPadOS에서 사용할 수 있습니다.


Resources


Related   

Outline views

Lists and tables

Buttons


Developer documentation   

DisclosureGroup — SwiftUI

NSBezelStyleRoundedDisclosure — AppKit

NSBezelStyleDisclosure — AppKit


Videos

Stacks, Grids, and Outlines in SwiftUI WWDC 2020

작가의 이전글 [HIG] Column views
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari