React Toolbar

툴바는 사용자가 현재 보고 있는 뷰나 수행 중인 작업과 관련해 자주 쓰는 동작을 한곳에 모아주는 컴포넌트예요. 에디터에서의 텍스트 서식 지정 같은 반복적인 작업을 빠르게 처리할 수 있도록 도와주죠. 이 페이지에서는 툴바의 오버플로 동작, 레이아웃 구성, 접근성, 콘텐츠 작성 기준까지 함께 살펴볼게요.

출처: 문서

본문

동작 (Behavior)

오버플로 (Overflow)

툴바는 부모 컨테이너에 맞춰 자라지만 절대 두 번째 줄로 넘어가지 않아요. 항목이 공간에 다 들어가지 못하는 경우에는 overflow 유틸리티를 사용해요. 이 유틸리티는 마지막 항목을 오버플로 메뉴 버튼으로 바꿔서 나머지 툴바 항목을 드러내줘요. 오버플로 메뉴에는 툴바 항목 아이콘과 함께 텍스트 라벨을 사용하세요.

레이아웃 (Layout)

논리적인 그룹 만들기

툴바의 동작들은 사람들이 관련된 하위 작업을 찾기 쉽도록 논리적으로 그룹 지어야 해요. 구분선과 여백을 활용해 그룹을 표현하세요. 예를 들어 굵게, 기울임, 취소선 같은 텍스트 장식 옵션을 묶은 다음, 구분선으로 들여쓰기나 목록 같은 문단 서식 옵션과 분리하세요.

파괴적인 동작이나 누군가의 작업 상태에 영향을 줄 수 있는 동작이 있다면 다른 옵션들과 떨어뜨려 묶으세요.

툴바는 주요 작업을 지원해요

사람들이 필요로 할 때 쓸 수 있도록, 가장 원하는 명령들을 갖춘 위치에 툴바를 배치하세요. 예를 들어 사용자가 항상 콘텐츠 작성에 집중하는 텍스트 편집 앱이라면, 서식 옵션이 담긴 툴바를 앱 상단에 고정해 두는 것이 자연스러워요.

툴바가 주요 작업을 지원하지 않을 때는 숨길 수 있는 옵션을 추가해서 집중에 방해가 되지 않게 하세요.

접근성 (Accessibility)

여러 툴바 식별하기

앱에 툴바가 두 개 이상 있다면 각각을 aria-label 또는 사용 가능한 텍스트 라벨이 있을 때 aria-labelledby로 라벨링해야 해요.

아이콘을 버튼 라벨로 사용하기

제시해야 할 옵션이 많을 때는 공간 절약을 위해 툴바가 아이콘을 버튼 라벨로 사용할 수 있어요. 친숙한 아이콘을 사용해서 각 아이콘이 무엇을 하는지 사람들이 헷갈리지 않게 하는 것이 중요해요. 시각 사용자에게는 툴팁으로, 스크린 리더 사용자에게는 aria-labels로 텍스트 라벨을 반드시 제공하세요.

콘텐츠 (Content)

툴바 버튼이나 툴팁의 텍스트 라벨은 간결하게 유지하세요. 해당 옵션을 선택하면 어떤 일이 일어날지 분명하게 전달해야 해요. 문장형 대문자(sentence case)를 사용하고 끝에 구두점을 쓰지 마세요.