[HIG] Panels
추가적인 조작과 정보를 제공하는 패널
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
macOS 앱에서 패널은 열려있는 다른 창 위에 떠서 활성 창 또는 선택과 관련된 추가적인 제어, 옵션 그리고 정보를 제공합니다.
일반적으로 패널은 앱의 메인 창(main window)보다 눈에 잘 띄지 않게 보입니다. 상황에 따라 패널은 어둡고 반투명한 스타일을 사용하여 헤드업 디스플레이(또는 HUD) 사용 경험을 사용자에게 제공할 수 있습니다.
앱이 다른 플랫폼에서 실행되는 경우 모달 뷰를 사용하여 현재 작업 또는 선택과 관련된 보충 콘텐츠를 표시하는 것을 고려해 보세요. 가이드는 Modality을 참고하세요.
Best practices
패널을 사용하면, 작업 중인 콘텐츠와 관련된 중요한 컨트롤 또는 정보에 빠르게 접근할 수 있습니다. 예를 들어, 패널을 사용하여 사용 중인 문서 또는 창에서 선택한 항목에 영향을 주는 컨트롤 또는 설정을 제공할 수 있습니다.
패널을 사용해 인스펙터(inspector) 기능을 사용자에게 보여주는 것을 고려해 보세요. 인스펙터(inspector)는 현재 선택한 항목의 세부 정보를 보여주고, 항목이 변경되거나 사람들이 새 항목을 선택하면 내용을 자동으로 업데이트합니다. 반대로 선택한 항목이 변경되더라도 항상 동일한 내용을 보여줘야 하는 정보 창의 경우 패널이 아닌 일반 창을 사용하는 것이 좋습니다. 앱의 레이아웃에 따라 분할 보기(split view) 창을 사용하여 인스펙터를 보여줄 수도 있습니다.
패널에서 간단한 조정 컨트롤(adjustment controls)을 선호합니다. 가능한 텍스트를 입력하거나 실행할 항목을 선택해야 하는 컨트롤은 여러 단계가 필요할 수 있기 때문에 포함하지 마세요. 대신 슬라이더(slider) 및 스테퍼(stepper)와 같은 컨트롤을 사용하는 것이 좋습니다. 이런 컨트롤을 사용하면 사람들이 더 직접적으로 제어할 수 있습니다.
패널의 목적을 설명하는 간단한 제목을 제공하세요. 패널은 종종 앱에서 열려 있는 다른 창 위에 떠 있기 때문에 사람들이 원하는 위치에 패널을 배치할 수 있도록 제목 표시줄이 필요합니다. 사람들이 화면에서 패널을 찾는데 도움이 되는 명사 또는 제목 스타일의 대문자(title-style capitalization)가 있는 명사구를 사용하여 짧은 제목을 만듭니다. 예를 들어 macOS는 "Fonts" 및 "Colors"라는 친숙한 패널을 제공하며 많은 앱에서 "Inspector"라는 제목을 사용합니다.
적절한 방법으로 패널을 보여주거나 숨깁니다. 앱이 활성화되면 패널이 열렸을 때 기존에 사용 중인 창에 관계없이 모든 패널을 전면으로 보여줍니다. 앱이 비활성화되면 모든 패널을 숨깁니다.
창 메뉴의 문서 리스트(Window menu’s documents list)에 패널을 포함하지 마세요. 창 메뉴(Window menu)에 패널을 보여주거나 숨기는 명령어를 제공하는 것은 좋지만 패널은 문서나 표준적인 앱의 창이 아니며 창 메뉴 목록에 속하지 않습니다.
역자설명 : 하단의 이미지는 창 메뉴의 문서 리스트입니다. 패널에 대한 명령어를 제외한 항목을 리스트에 포함시키지 않습니다.
일반적으로 패널에서 최소화 버튼을 비활성화합니다. 패널은 필요할 때만 보이고, 앱이 비활성화되면 사라지기 때문에 일반적으로 패널을 최소화할 필요가 없습니다.
인터페이스 및 도움말에서 제목별로 패널을 참조(비교해서 확인)하세요. 메뉴에서 "글꼴 표시(Show Fonts)", "색상 표시(Show Colors)" 및 "검사기 표시(Show Inspector)"와 같은 용어를 사용하지 않고 패널의 제목을 작성합니다. 도움말에서 "패널"을 다른 유형의 창으로 설명하는 것은 사람들에게 혼란을 줄 수 있습니다. 따라서 제목으로 패널을 참조하거나 제목에 창을 추가하여 패널을 참조하는 것이 가장 좋습니다. 예를 들어 "Inspector"라는 제목은 그 자체로 충분한 명확성을 제공하는 반면 "Fonts" 및 "Colors" 대신 "Fonts window" 및 "Colors window"를 사용하는 것이 더 명확할 수 있습니다.
HUD-style panels
HUD 스타일 패널은 표준 패널과 동일한 기능을 수행하지만 형태가 더 어둡고 반투명합니다. HUD는 시각적인 콘텐츠에 중점을 두거나 미디어 편집 또는 전체 화면 슬라이드 쇼와 같은 몰입형 경험을 제공하는 앱에서 사용하는 것이 좋습니다. 예를 들어 QuickTime Player는 HUD를 사용하여 콘텐츠를 가리지 않고 인스펙터(inspector) 정보를 보여줍니다.
표준 패널을 사용하는 것이 좋습니다. HUD의 사용에 대한 논리적인 근거가 없으면, 오히려 HUD로 인해 사람들은 주의가 산만해지거나 혼란스러움을 느낄 수 있습니다. 또한 HUD가 현재 스타일의 설정과 맞지 않을 수 있습니다. 일반적으로 다음과 같은 상황에서 HUD를 사용하세요.
동영상, 사진 또는 슬라이드에 초점을 맞춘 미디어 지향 앱
표준 패널이 필수적인 정보를 모호하게 만드는 경우
컨트롤을 포함할 필요가 없는 경우 — 디스클로저 트라이앵글(disclosure triangle)을 제외하고 대부분의 시스템 제공 컨트롤은 HUD의 스타일과 맞지 않습니다.
역자설명 : 디스클로저 트라이앵글(disclosure triangle)은 하단의 이미지에 폴더 우측 삼각형처럼 폴더의 내용을 보이거나 숨길 때 사용하는 컨트롤입니다.
출처 - Apple Developer앱이 모드를 전환할 때 하나의 패널 스타일을 유지하세요. 예를 들어 앱이 전체 화면 모드일 때 HUD를 사용하는 경우 사람들이 전체 화면 모드를 끝낼 때도 HUD 스타일을 유지하는 것이 좋습니다.
HUD에서 색상을 적게 사용하세요. HUD의 어두운 외관에 색상이 너무 많으면 주의가 산만해질 수 있습니다. 종종 HUD에서 중요한 정보를 강조하기 위해 적은 양의 고대비 색상만 있으면 됩니다.
HUD를 작게 보여주세요. HUD는 눈에 잘 띄지 않게 설계되었으므로 너무 크면 사용 목적과 맞지 않습니다. HUD가 조정하는 콘텐츠를 가리지 않도록 하고 사람들에게 콘텐츠를 더 잘 보여줄 수 있도록 하세요.
개발자 가이드라인은 NSWindowStyleMaskHUDWindow를 참고하세요.
Platform considerations
Not supported in iOS, iPadOS, tvOS, or watchOS.
