brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 29. 2023

[HIG] Toolbars

자주 사용하는 명령에 빠르게 접근하는 툴바

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

Introduction

툴바(toolbar)는 현재 뷰와 관련된 작업을 수행하는 자주 사용하는 명령 및 컨트롤에 편리하게 접근할 수 있도록 해줍니다.

플랫폼에 따라 툴바의 모양과 동작이 다를 수 있습니다.

iOS에서는 툴바가 화면 하단에 표시됩니다. iOS 툴바는 커스터마이징 할 수 없으며 그룹핑(grouping)을 지원하지 않습니다.

iPadOS 및 macOS에서는 툴바가 화면 또는 창 상단에 나타납니다. 두 플랫폼 모두 커스터마이징 가능한 툴바와 그룹화된 툴바 항목을 지원합니다. macOS에서는 앱의 툴바를 숨길 수 있습니다.

watchOS에서는 툴바 자체가 표시되지 않지만 스크롤 뷰의 상단에 툴바 버튼이 표시될 수 있습니다. 일반적으로 툴바 버튼은 사용자가 위로 스크롤하여 표시할 때까지 내비게이션 바(navigation bar) 뒤에 숨겨져 있습니다.

Best practices

사람들이 주로 수행하는 작업을 지원하는 툴바 항목을 제공하세요. 일반적으로 사람들이 가장 많이 사용할 가능성이 높은 명령의 우선순위를 정하세요. 이러한 명령은 사람들이 자주 사용하는 명령인 경우가 많지만, 일부 앱에서는 가장 우선순위가 높거나 중요한 요소와 함께 매핑되는 명령을 우선시하는 것이 더 적절할 수 있습니다. macOS 앱에서는 우선순위 지정 방식에 따라 툴바의 항목을 순서대로 정렬하는 것이 좋습니다.

툴바에 너무 많은 항목을 표시하지 마세요. 사람들이 각 항목을 구분하고 활성화할 수 있어야 하므로 툴바가 너무 많으면 안 됩니다.

지원되는 경우 툴바 항목을 그룹화하는 것을 고려해 보세요. iPadOS 및 macOS에서는 항목의 논리적 그룹을 정의하여 사람들이 앱의 특정 하위 작업 또는 기능 영역과 관련된 명령을 쉽게 찾을 수 있도록 할 수 있습니다. 예를 들어, 키노트(Keynote)에는 프레젠테이션 수준 명령(presentation-level commands), 재생 명령(playback commands), 개체 삽입을 위한 그룹등 논리적으로 그룹핑되어있습니다. iPadOS에서는 그룹화를 사용하여 오버플로 메뉴에서 항목을 함께 유지할 수도 있습니다. 자세한 내용은 iPadOS 참고하세요.

각 툴바의 명령의 의미가 명확해야 합니다. 사람들이 항목의 기능을 쉽고 명확하게 이해할 수 있게 하세요. 각 항목에 대해 간단게 알아볼 수 있는 기호나 인터페이스 아이콘 또는 짧게 설명된 레이블을 제공하세요. macOS 앱에서는 사용자가 원하는 경우 툴바에서 기호와 레이블을 모두 볼 수 있도록 두 가지를 모두 제공하세요. 레이블을 제공하는 경우 보기, 삽입, 공유와 같은 동사 및 동사 구문을 사용하는 것이 좋습니다. 제목 스타일의 대문자를 사용하고 끝 문장 부호를 사용하지 않습니다.

시스템에서 제공하는 기호 또는 인터페이스 아이콘을 사용하는 것이 좋습니다. 시스템에서 제공하는 기호는 친숙하고, 적절한 색상이 자동으로 적용되며, 사용자 상호 작용과 생동감에 일관되게 반응합니다.

모든 툴바 항목에 일관된 모양을 사용하는 것이 좋습니다. 툴바는 모든 항목에 비슷한 시각적 스타일을 사용할 때 가장 보기 좋고 이해하기 쉽습니다.

툴바 항목이 두 가지 상태 사이를 전환하는 경우 항목이 현재 상태를 명확하게 전달하는지 확인하세요. 항목의 색상과 레이블을 변경하여 현재 상태를 명확하게 표시할 수 있습니다. 예를 들어 macOS 메일 툴바에서 온라인-오프라인 전환 버튼은 계정이 온라인 상태일 때는 파란색 아이콘과 오프라인으로 전환 레이블을 표시하고, 계정이 오프라인 상태일 때는 회색 아이콘과 온라인 전환 레이블을 표시합니다.

iPadOS 및 macOS 앱에서는 사용자가 툴바를 사용자 지정할 수 있도록 하는 것이 좋습니다. 툴바 사용자 지정은 많은 항목을 제공하거나 모든 사람에게 필요하지 않은 고급 기능을 포함하는 앱과 사람들이 장시간 사용하는 앱에서 사용하기 좋습니다. 예를 들어, 사람들은 작업 스타일과 현재 프로젝트에 따라 다양한 유형의 편집 명령을 사용하는 경우가 많으므로 툴바 사용자 지정에 다양한 편집 작업을 사용할 수 있도록 하는 것이 효과적입니다.

툴바 아래에 콘텐츠가 표시될 때 툴바가 반투명해지는 것에 대비하세요. 스크롤 화면 위에 배치하거나 창을 전체 크기 콘텐츠 화면으로 구성하면 툴바가 자동으로 반투명하게 설정됩니다. 예를 들어 iOS에서 툴바는 기본적으로 반투명하며, 콘텐츠가 뒤에 표시될 때만 배경 머티리얼을 사용하고 뷰가 아래쪽으로 스크롤되면 머티리얼을 제거합니다. 자세한 내용은 Material을 참조하십시오.

(좌) 메일 툴바는 배경 소재를 사용하여 그 뒤에 있는 사서함과 구분됩니다. (우) 툴바 뒤에 사서함이 표시되지 않으면 배경 자료가 나타나지 않습니다.

Platform considerations

No additional considerations for tvOS.

iOS

툴바와 탭 모음은 모두 화면 하단에 표시되지만 각각 다른 용도로 사용됩니다.

툴바에는 항목 만들기, 항목 필터링, 콘텐츠 마크업 등 화면과 관련된 작업을 수행할 수 있는 버튼이 있습니다.

탭 바를 사용하면 시계 앱의 알람, 스톱워치 및 타이머 탭과 같이 앱의 여러 영역 사이를 이동할 수 있습니다. 툴바와 탭 모음은 동일한 보기에 함께 표시되지 않습니다.

툴바에서 세그먼트 컨트롤을 사용하지 마세요. 세그먼트 컨트롤을 사용하면 컨텍스트를 전환할 수 있지만 툴바의 동작은 현재 화면에 한정됩니다.

버튼이 3개 이하인 툴바에서는 명확성을 높이기 위해 기호 대신 간결한 텍스트 레이블을 사용하는 것이 좋습니다. 예를 들어 캘린더에서는 오늘, 캘린더 및 받은 편지함 레이블을 사용합니다. 레이블이 함께 실행되지 않도록 하려면 버튼 사이에 고정 공백을 삽입하면 됩니다. 개발자 가이드라인은 UIBarButtonSystemItemFixedSpace를 참고하세요.

버튼이 3개 이상인 툴바에서는 공간을 절약하기 위해 기호를 사용하는 것이 좋습니다. SF Symbols는 앱에서 작업을 나타내는 데 사용할 수 있는 다양한 사용자 지정 가능한 심벌을 제공합니다. 툴바 버튼에 대한 사용자 지정 인터페이스 아이콘을 만들어야 하는 경우 다음 크기를 사용하고 필요에 따라 균형을 맞춰 조정합니다. 가이드라인은 Icons를 참고하세요.

iPadOS

iPadOS에서 툴바는 문서별 기능, 뒤로 버튼 및 사람들이 언제든지 수행할 수 있는 중요한 작업과 함께 현재 작업에 영향을 주는 일반적으로 사용되는 작업을 제공합니다. 이와 대조적으로 내비게이션 바(navigation bar)에는 일반적으로 문서별 기능이 포함되지 않는 대신 앱을 탐색할 수 있고, 사람들이 콘텐츠를 관리하는 데 도움이 되는 작업을 제공하며, 검색 필드를 포함할 수 있습니다.

DEVELOPER NOTE : iPadOS에서는 UINavigationBar를 사용해서 툴바를 생성하세요.

iPadOS 16 이상에서는 툴바의 여러 영역에 서로 다른 유형의 항목이 표시될 수 있습니다.

맨 앞쪽 끝(Leading end). 이전 문서로 돌아가거나 사이드바를 표시하거나 숨길 수 있는 요소는 맨 앞쪽 끝에 표시되며, 그다음에는 문서 제목이 표시됩니다. 제목 옆에는 복제, 이름 바꾸기, 이동, 내보내기 등 문서 전체에 영향을 주는 표준 및 앱별 명령이 포함된 문서 메뉴가 툴바에 포함될 수 있습니다. 창 크기에 관계없이 이러한 항목을 항상 사용할 수 있도록 하기 위해 툴바 맨 앞쪽의 항목은 사용자 지정할 수 없습니다.

중앙 영역(Center area). 자주 사용하는 항목은 중앙 영역에 표시되며, 여기에서 항목을 추가, 제거 및 재정렬할 수 있습니다. 창 크기가 충분히 줄어들면 중앙 섹션의 항목은 시스템에서 관리하는 오버플로 메뉴로 자동으로 축소됩니다.

후행 끝(Trailing end). 툴바의 뒤쪽 끝에는 계속 사용할 수 있어야 하는 중요한 항목, 주변 인스펙터를 여는 버튼, 선택적 검색 필드, 숨겨진 항목을 표시하고 툴바를 사용자 지정할 수 있는 오버플로 메뉴가 포함됩니다. 후행 끝에 있는 항목은 모든 창 크기에서 계속 표시됩니다.

화면 상단 가장자리에 툴바를 배치하세요. iPad는 디스플레이가 커서 사람들이 원하는 기능을 위한 충분한 공간을 제공하면서도 작은 창 크기에서도 가장 중요한 명령에 대한 접근성을 유지할 수 있습니다. iPhone 앱을 iPad에서 실행하도록 전환하는 경우, iOS 화면 하단에 있는 툴바 버튼을 iPadOS 화면 상단으로 이동해야 합니다.

문서 메뉴를 사용하여 문서 전체에 영향을 주는 명령을 제공하세요. 예를 들어 복제, 이름 바꾸기, 이동 및 인쇄와 같은 명령을 포함할 수 있습니다. 문서 메뉴에 편집 명령을 나열하지 말고 대신 이러한 작업을 툴바의 중앙 영역으로 끌어올리는 것이 좋습니다. 또한 공유 메뉴에서는 이미 메시지를 사용하여 다른 사람에게 문서를 보내거나, 다른 앱에서 문서를 열거나, 읽기 목록에 추가하는 등의 작업을 수행할 수 있으므로 다른 앱에서 문서를 여는 명령도 제공하지 마세요.

사람들이 콘텐츠에 적극적으로 참여하는 동안 가장 많이 사용할 가능성이 높은 명령은 가운데 영역을 사용하는 것이 좋습니다. 가운데 영역은 창이 전체 크기로 표시될 때 항상 사용할 수 있으므로 창 콘텐츠에 영향을 주는 명령 및 기타 작업을 편집하기에 편리한 위치입니다. 또한 중앙 영역의 항목을 사용자 지정하여 개인 작업 스타일을 지원할 수 있습니다. 사람들이 창을 더 작게 만들면 툴바의 중앙 섹션에 있는 항목이 더 이상 표시할 공간이 부족해지면 툴바에서 관리하는 오버플로 메뉴로 자동으로 전환됩니다.

모든 창 크기에 표시되어야 하는 중요한 항목은 툴바의 맨 뒤에 배치하는 것이 좋습니다. 예를 들어, 사람들이 문서를 확장하지 않고 문서 전체에 대해 작업을 수행하려는 경우가 많기 때문에 Pages에서는 이 영역에 공유 메뉴를 제공합니다. 툴바의 뒤쪽 끝은 창의 뒤쪽에 있는 패널을 표시하는 검사기 단추를 직관적으로 배치할 수 있는 위치이기도 합니다.

macOS

macOS 앱에서 툴바는 창 상단의 프레임에 위치하며, 제목 표시줄 아래 또는 제목 표시줄과 통합되어 있습니다. macOS 11부터는 창 제목이 컨트롤과 함께 인라인으로 표시될 수 있으며, 툴바 항목에 베젤(bezel)이 포함되지 않습니다.

가로 공간이 제한되어 있는 경우 툴바에 검색 막대 대신 검색 버튼이 표시될 수 있습니다. 사용자가 검색 버튼을 클릭하면 막대가 확장되고, 창의 다른 곳을 클릭하면 검색 막대가 축소되고 툴바에 버튼이 다시 표시됩니다.

설정 창에서 툴바는 기본 창의 모양과 조화를 이루도록 SF Symbols를 사용할 수 있지만 제목 위치는 툴바 버튼 위에 유지됩니다. 명확성을 위해 필요한 경우 개별 툴바 버튼에 색상을 포함할 수 있습니다. 활성 창을 표시하기 위해 창은 선택한 툴바 버튼에 시스템에서 제공하는 선택 모양을 적용합니다.

모든 툴바 항목을 메뉴 모음에서 명령으로 사용할 수 있도록 설정하세요. 사람들이 툴바를 사용자 지정하거나 숨길 수 있으므로 툴바에만 명령을 표시할 수는 없습니다. 반대로 모든 메뉴 명령이 툴바에 공간을 차지할 만큼 중요하거나 자주 사용되는 것은 아니므로 모든 메뉴 항목에 대해 툴바 항목을 제공하는 것은 합리적이지 않습니다.

DEVELOPER NOTE : 툴바 항목은 자동으로 큰 컨트롤 크기를 사용합니다. 예외적으로 Safari 창과 같이 통합된 툴바-제목 표시줄 영역은 일반 제어기 크기를 계속 사용합니다. 툴바 컨트롤의 최소 또는 최대 크기를 지정해야 하는 경우 제약 조건을 사용할 수 있습니다.

툴바 항목에 대한 사용자 지정 이미지를 만들어야 하는 경우 권장 크기를 사용하세요. 사용자 지정 인터페이스 아이콘을 만들려면 최대 크기인 19x19픽셀(38x38픽셀 @2x)을 사용하세요. 풀컬러 독립형 툴바 아이콘을 만들려면 PNG 형식을 사용하고 32x32 픽셀 크기의 @1x 버전과 64x64 픽셀 크기의 @2x 버전을 제공하세요. 다른 곳에서 알아볼 수 있는 풀컬러 아이콘을 사용하는 경우 아이콘의 모양이나 원근감을 변경하지 마세요.

일반적으로 툴바 항목에 지속적으로 선택된 모양을 지정하지 마세요. 시스템에서는 사용자가 포인터를 항목 위로 이동하거나 선택할 때만 항목에 둥근 직사각형 배경을 추가하고, 항목이 작업을 수행하거나 포인터가 멀어지면 배경을 제거합니다. 이 동작에는 두 가지 예외가 있습니다. 하나는 Finder 윈도 툴바의 보기 컨트롤과 같이 컨트롤 컨텍스트 내에서 선택된 모양을 지속적으로 표시하는 세그먼트 컨트롤이고, 다른 하나는 툴바 항목을 패널 전환기로 사용하는 설정 창입니다.

전체 화면 모드에서 자동으로 툴바를 숨기는 것 외에 사용자가 직접 툴바를 숨길 수 있도록 하는 것도 고려해 보세요. 툴바를 숨겨서 방해 요소를 최소화하거나 더 많은 콘텐츠를 표시할 수 있으면 좋겠다는 의견이 있을 수 있습니다. 이 작업을 지원하려면 보기 메뉴에서 툴바를 숨기고 표시하는 명령을 제공하세요. 전체 화면 모드에서는 집중된 작업을 수행하는 데 툴바가 필요하지 않은 경우 툴바를 숨기는 것이 효과적일 수 있습니다. 예를 들어, 미리 보기는 사람들이 콘텐츠에 주석을 달기보다는 콘텐츠를 볼 가능성이 높기 때문에 전체 화면 창에서 툴바를 숨깁니다. 전체 화면 창에서 툴바를 숨기는 경우 포인터가 화면 상단으로 이동하면 메뉴 모음과 함께 툴바가 표시됩니다.

창이 비활성 상태일 때 사람들이 비파괴 툴바 항목을 클릭할 수 있도록 하는 것도 고려해 보세요. 일반적으로 비활성 창의 툴바를 클릭하면 창이 전면으로 표시됩니다. 경우에 따라 사용자가 다른 창에서 작업에 집중할 수 있도록 창을 전면으로 가져오지 않고 툴바 항목을 호출할 수 있도록 하는 것이 유용할 수 있습니다. 표준 글꼴 패널의 툴바는 이러한 방식으로 작동합니다.

툴바 항목에 스프링 로딩 지원을 추가하는 것이 좋습니다. 매직 트랙패드가 있는 시스템과 같이 압력에 민감한 시스템에서는 스프링 로딩을 사용하면 항목을 드래그하여 버튼이나 분할된 제어 세그먼트를 활성화하고 항목을 떨어뜨리지 않고도 강제로 클릭(즉, 더 세게 누르는 것)할 수 있습니다. 그런 다음 항목을 계속 드래그하여 추가 작업을 수행할 수 있습니다. 예를 들어 캘린더에서는 이벤트를 툴바에서 일, 주, 월 또는 연도 세그먼트 위로 끌어다 놓을 수 있습니다. 세그먼트를 강제로 클릭하면 이벤트를 놓지 않고 캘린더 보기가 전환되므로 사용자는 새 캘린더 보기에서 원하는 위치에 이벤트를 놓을 수 있습니다.

watchOS

툴바 버튼을 사용하면 관련 콘텐츠를 표시하는 보기에서 중요한 앱 기능을 제공할 수 있습니다. 스크롤 뷰의 상단에 위치한 툴바 버튼은 사용자가 위로 스크롤하여 표시할 때까지 내비게이션 바 뒤에 숨겨져 있을 수 있습니다.

툴바 버튼은 watchOS 7 이상에서 사용할 수 있으며, 개발자 지침은 ToolbarItemPlacement.primaryAction을 참조하세요.

스크롤 보기에만 툴바 버튼을 배치하세요. 사람들은 스크롤 보기의 상단으로 스크롤하는 경우가 많으므로 툴바 버튼을 거의 자동으로 찾을 수 있습니다. 스크롤하지 않는 뷰에 툴바 버튼을 배치하면 영구적으로 표시되므로 필요하지 않을 때 숨길 수 있는 이점이 사라집니다.

앱의 기본 기능이 아닌 중요한 작업에는 툴바 버튼을 사용하세요. 툴바 버튼을 사용하면 주요 목적이 해당 기능과 관련이 있지만 동일하지 않을 수 있는 뷰에서 중요한 기능을 유연하게 제공할 수 있습니다. 예를 들어 메일은 받은 편지함 보기의 상단에 있는 툴바 버튼에 필수적인 새 메시지 작업을 제공합니다. 받은 편지함의 주요 목적은 스크롤 가능한 이메일 메시지 목록을 표시하는 것이므로 뷰 상단의 툴바 버튼에 밀접하게 관련된 작성 작업을 제공하는 것이 좋습니다.

전체 너비의 단일 툴바 버튼을 선호합니다. 여러 개의 툴바 버튼을 겹쳐서 표시하거나 나란히 표시하면 뷰가 복잡해지고 사람들이 선택하기 전에 전체 작업 집합을 확인해야 할 수 있습니다. 두 개 이상의 툴바 버튼을 고려하고 있다면 앱에서 이러한 필수 작업을 활성화하기 위해 별도의 보기가 필요한지 여부도 고려하세요.