명령 팔레트 시스템
목적
명령 팔레트 시스템은 전역적이고 키보드로 트리거되는 오버레이 메뉴(일반적으로 Cmd+K 또는 Ctrl+K로 호출)를 위한 디자인 및 공간 프레임워크를 제공합니다. 현대의 고밀도 웹 애플리케이션, 개발자 플랫폼, 콘텐츠가 풍부한 문서 포털에서는 표준 탐색 모음이 쉽게 과부하됩니다. 명령 팔레트는 '커맨드 센터' 역할을 하여, 파워 유저에게 검색, 탐색, 작업 실행을 위한 직접적이고 마찰 없는 키보드 경로를 제공함과 동시에 키보드 단축키의 대화형 사전 역할도 합니다.
이 스킬은 명령 팔레트가 공간적으로 인체공학적이고, 인지 피로를 방지하도록 시각적으로 구조화되며, 고급 접근성 사양(WCAG 2.2 AA)을 완전히 준수하도록 보장합니다.
사용 사례
- SaaS 대시보드를 위한 글로벌 단축키 기반 워크스페이스 컨트롤러 설계.
- 개발자 중심 포털 및 문서 검색 포털(예: API 참조) 구조화.
- 엔터프라이즈 CRM 또는 CMS 플랫폼을 위한 신속한 작업 관리 패널 구현.
- 복잡한 다계층 웹 제품 내 통합 커맨드라인 인터페이스(CLI) 생성.
사용하지 말아야 할 경우
- 정적 마케팅 랜딩 페이지: 사용자 의도가 순전히 탐색 및 전환에 초점을 맞춘 경우; 글로벌 탐색 모음과 명확한 클릭 유도 문구(CTA)가 더 효과적입니다.
- 얕은 정보 제공 사이트(15페이지 미만): 명령 팔레트를 구현하고 가르치는 오버헤드가 길 찾기 이점보다 큰 경우.
- 단순 모바일 소비자 사이트: 화면 공간이 제한적이고 사용자가 외부 물리적 키보드 없이 터치 상호작용에만 의존하는 경우.
입력
- 명령 및 작업 인벤토리: 검색 가능한 작업, 페이지, 설정, 문서의 포괄적인 분류 체계.
- 컨텍스트 매핑 규칙: 명령이 전역인지 특정 컨텍스트에서만 사용 가능한지(예: 프로젝트를 보고 있을 때만 '프로젝트 삭제' 표시) 결정하는 규칙.
- 키보드 단축키 시스템: 작업을 물리적 키보드 단축키(예:
G다음D는 "대시보드로 이동")에 매핑하는 시스템. - 브랜드 디자인 토큰: 타이포그래피 스케일, 색상, 간격 비율, 그림자 토큰(
fluid-spacing-system및fluid-typography-system에서 가져옴).
출력
- 트리거 어포던스 사양: 지속적인 진입점 및 키보드 단축키 배지의 시각적 디자인.
- 팔레트 레이아웃 아키텍처: 오버레이 모달, 결과 그룹화, 카테고리 탐색, 도움말 푸터를 위한 그리드 구조.
- 명령 행 시각적 사양: 아이콘, 명령 제목, 카테고리 배지, 단축키 주석에 대한 계층 구조 사양.
- 키보드 및 접근성 사양: ARIA APG 콤보박스 패턴과 일치하는 정확한 키보드 이벤트 매핑 및 ARIA 상태 사양.
워크플로우
1. 팔레트 트리거 및 진입점 설정
명령 팔레트는 기본적으로 숨겨져 있으므로, 발견 가능한 진입점을 디자인해야 합니다:
- 지속적인 헤더 트리거: 글로벌 헤더에서 검색창을 모방한 버튼. 돋보기 아이콘, 텍스트 레이블(예: "명령 검색 또는 실행..."), 그리고 오른쪽 정렬된 물리적 키보드 단축키 배지(예:
⌘K또는Ctrl+K)를 포함합니다. - 플로팅 명령 버튼: 대시보드 집약적이거나 전체 화면 뷰포트의 경우, 뷰포트 오른쪽 하단 모서리에 미묘한 트리거 버튼을 배치합니다.
- 보이지 않는 글로벌 리스너: 문서 어디에서나(텍스트 입력에 포커스가 없는 경우)
Cmd+K(macOS) 또는Ctrl+K(Windows/Linux)를 누르면 즉시 팔레트가 열리도록 합니다.
2. 모달 오버레이 및 배경(스크림) 설계
- 배경(스크림): 고대비 반투명 배경(예:
rgba(15, 23, 42, 0.4))을 사용하여 배경 페이지를 어둡게 하고 사용자의 주의를 전적으로 활성 작업에 집중시킵니다. - 수직 배치: 모달을 수평으로 중앙에 배치하되, 뷰포트 상단 10%–15% 에 고정합니다. 절대적인 수직 중앙보다 이 위치가 자연스러운 시선 높이와 일치하며 터치 스크린에서 물리적 가상 키보드를 위한 공간을 남겨줍니다.
- 크기 경계: 너비는 편안한 스캔 범위인 600px에서 680px 사이로 제한합니다. 높이는 동적으로 조정되며 450px에서 550px를 최대로 설정하여 작은 노트북 화면에서도 넘치지 않도록 합니다.
3. 내부 레이아웃 그리드 구조화
명령 팔레트를 4개의 뚜렷한 수평 영역으로 나눕니다:
- 검색 및 필터 영역: 테두리 없는 전체 너비 입력 필드와 눈에 띄는 검색 아이콘(최소 20px). 사용자를 안내하는 플레이스홀더 텍스트(예: "명령 또는 검색어 입력...")를 사용합니다.
- 카테고리 필터 바(선택 사항): 사용자가 검색하기 전에 결과를 필터링할 수 있는 소형 칩 또는 분할 컨트롤의 가로 행(예: "전체", "작업", "페이지", "사용자").
- 결과 피드(스크롤 컨테이너): 그룹화된 헤더(예: "최근", "탐색", "시스템 설정")가 있는 스크롤 가능한 목록 상자.
- 도움말 푸터: 키보드 가이드(예:
↑↓ 탐색,↵ 선택,esc 닫기)를 보여주는 저대비 상태 표시줄.
+-----------------------------------------------------------+
| [검색 아이콘] 명령 또는 검색어 입력... [ESC] |
+-----------------------------------------------------------+
| ( 전체 ) ( 작업 ) ( 페이지 ) ( 멤버 ) ( 도움말 ) |
+-----------------------------------------------------------+
| 최근 검색 |
| [아이콘] 결제로 이동 [ ⌘ G ] [ B ]|
| [아이콘] 새 인보이스 생성 [ ⌘ N ] |
| |
| 탐색 |
| [아이콘] 대시보드 |
| [아이콘] 팀 설정 [ ⌘ , ] |
+-----------------------------------------------------------+
| ↑↓ 탐색 | ↵ 선택 | esc 닫기 | ? 도움말 문서 |
+-----------------------------------------------------------+
4. 명령 행 시각적 계층 구조 생성
결과 목록의 각 항목은 밀리초 내에 스캔 가능해야 합니다:
- 왼쪽 정렬 아이콘: 항목 유형을 나타내는 명시적이고 고대비 아이콘(예: 문서의 파일 아이콘, 작업의 설정 기어, 사람의 사용자 아바타).
- 기본 레이블: 명령 자체의 세미볼드, 기본 색상 텍스트(예: "팀원 초대").
- 보조 하위 레이블(선택 사항): 기본 레이블 아래 또는 옆에 컨텍스트를 제공하는 흐릿하고 작은 설명(예: "설정 > 조직").
- 오른쪽 정렬 단축키 배지: 작고 고대비 키 입력 배지(예:
⌥I)를 사용하여 해당 명령과 연결된 물리적 키보드 단축키를 표시합니다.
5. 상호작용 상태 및 키보드 선택 정의
명령 팔레트는 주로 키보드로 작동되므로, 키보드 선택 상태가 마우스 호버보다 우선합니다:
- 활성/포커스된 항목 상태: 화살표 키를 사용하여 항목을 탐색할 때 기본 밝은 색상 토큰(예:
var(--color-primary-light))을 사용하여 눈에 띄는 배경 채우기 변경과 왼쪽 테두리 표시기를 적용합니다. 기본 텍스트는 브랜드 색상으로 변경되어야 합니다. - 호버 상태(마우스): 활성 키보드 상태를 미러링합니다. 항목 위로 마우스를 움직이면 이중 포커스 상태를 방지하기 위해 키보드 선택이 업데이트되어야 합니다.
- 빈 상태: 검색 결과가 없을 때 대안적인 작업을 제안하는 깔끔하고 설명적인 빈 상태를 표시합니다(예: "명령을 찾을 수 없습니다. 대신 도움말 센터를 검색해 보세요"와 검색 링크).
- 로딩 상태: 검색 쿼리 결과가 비동기적으로 가져와지는 경우, 검색 입력 하단에 미묘한 선형 로딩 표시기를 표시하고 레이아웃 이동을 유발하는 스켈레톤 카드는 피합니다.
결정 규칙
- "Cmd+K 대 지속적 검색" 규칙: 사이트의 주요 가치가 구조화된 콘텐츠(예: 전자상거래 카탈로그)를 소비하는 것이라면 지속적인 검색창을 사용하십시오. 가치가 관리 워크플로우, 명령 실행 또는 밀집된 탐색이라면
Cmd+K명령 팔레트를 사용하십시오. - 그룹화 제한 규칙: 동시에 3~4개 이상의 명령 카테고리를 표시하지 마십시오. 각 카테고리의 최대 표시 항목은 5개로 유지하고, 더 많은 항목이 있으면 "더 보기..." 옵션을 제공하십시오.
- "키 입력 수" 규칙: 명령 옆에 표시되는 물리적 키보드 단축키는 3개 키를 초과할 수 없습니다(예:
Ctrl+Shift+P는 허용 가능,Ctrl+Alt+Shift+Z는 너무 복잡함). - 동적 컨텍스트 규칙: 활성 경로에 따라 명령을 동적으로 필터링하십시오. 사용자가 청구 페이지에 있는 경우 기본(입력되지 않은) 결과 목록 상단에 "신용 카드 업데이트" 또는 "인보이스 PDF 다운로드"를 우선 표시하십시오.
제약 조건
1. 접근성(WCAG 2.2 AA 최소)
- ARIA 콤보박스 패턴: 마크업을 ARIA 저작 관행 가이드(APG)를 엄격히 따라 구성해야 합니다:
- 입력 컨테이너는
role="combobox",aria-expanded="true",aria-autocomplete="list",aria-controls="command-listbox-id"를 가져야 합니다. - 결과 목록은
role="listbox"를 가져야 하며, 각 명령 행은role="option"을 가져야 합니다. - 사용자가 화살표 키를 누를 때, 입력은
aria-activedescendant를 활성 옵션의 ID로 업데이트해야 하며, 해당 옵션은aria-selected="true"를 가져야 합니다.
- 입력 컨테이너는
- 포커스 관리: 팔레트를 열면 키보드 포커스를 오버레이 내에 가둬야 합니다.
Tab키를 누르면 팔레트 내에서 순환하도록 가로채거나 완전히 비활성화해야 합니다(옵션 탐색에는 화살표 키를 선호). 팔레트를 닫으면 포커스를 정확히 트리거 요소로 되돌려야 합니다. - 스크린 리더 알림: 입력 옆에
aria-live="polite"및aria-atomic="true"가 있는 보이지 않는div를 배치합니다. 검색 시 결과 상태(예: "12개의 결과를 찾았습니다. 위/아래 화살표 키를 사용하여 탐색하세요")를 동적으로 채웁니다. - 대비 비율: 모든 텍스트, 단축키 배지, 포커스 표시기는 WCAG AA(일반 텍스트의 경우 4.5:1 이상, UI 테두리 및 선택 표시기의 경우 3:1 이상)를 충족해야 합니다.
- 배경 잠금: 팔레트가 활성화되면 애플리케이션의 나머지 부분은
inert로 렌더링되고 스크린 리더에서 숨겨져야 합니다.<dialog>.showModal()을 사용하여 포커스 트래핑, 배경 어둡게 하기, 기본Escape닫기를 기본적으로 달성합니다.
2. 반응형 및 터치 적응
- 터치 뷰포트 조정: 모바일 화면에서 명령 팔레트는 전체 화면 오버레이 또는 하단 슬라이딩 서랍으로 전환되어야 합니다.
- 가상 키보드 처리: 열릴 때 검색 입력에 자동 포커스를 설정하고,
inputmode="search"를 사용하여 모바일 장치가 가상 키보드에 올바른 "검색" 작업 버튼을 표시하도록 합니다. - 물리적 힌트 숨기기: 터치 전용 장치에서는 관련이 없고 시각적 혼란을 유발하는 물리적 키보드 단축키 배지(예:
⌘K또는⌥I)를 숨깁니다. - 터치 대상 크기: 제거 가능한 태그, 카테고리 칩, 목록 행은 터치 화면에서 손가락 탭을 수용하기 위해 최소 44px 높이를 가져야 하며, 이는 WCAG 2.2 SC 2.5.8을 준수합니다.
일반적인 실패 패턴
- "무한 스크롤" 함정: 스크롤 컨테이너 없이 결과 피드가 100개 이상의 일치 항목을 렌더링하여 화면을 넘치게 하고 푸터 가이드에 접근할 수 없게 만드는 경우.
- 배경 스크롤 잠금 부재: 사용자가 명령 팔레트를 스크롤 탐색하는 동안 배경 문서가 스크롤되어 레이아웃 방향 감각을 잃게 하는 경우.
- 입력 포커스 상실: 카테고리 칩 또는 결과 옵션을 클릭하고 텍스트 입력에서 키보드 포커스를 잃어 키보드 사용자가 다시 탭해야 하는 경우.
- 이해할 수 없는 모바일 디스플레이: 320px 모바일 화면에 작은 데스크톱 중앙 모달을 유지하여 기본 레이블과 단축키 배지를 잘라내는 경우.
- 트리거 상태 미러링 누락: 지속적인 헤더 버튼에 키보드 단축키가 표시되지 않아 키보드 사용자가 명령 팔레트의 존재를 알지 못하는 경우.
검증 기준
- 헤더에
Cmd+K/Ctrl+K시각적 단축키 배지가 있는 지속적인 트리거 버튼이 있습니다. - 페이지 어디에서나
Cmd+K또는Ctrl+K를 누르면 모달이 열립니다. - 키보드 포커스가 즉시 검색 입력으로 이동하고 배경 페이지 스크롤이 잠깁니다.
- 옵션 탐색은 위/아래 화살표 키로 이루어지며, 매우 가시적인 포커스 활성 상태가 있습니다.
- 옵션 행은 구조화된 계층: 왼쪽 아이콘, 굵은 작업 제목, 컨텍스트 경로 계층, 오른쪽 단축키 배지를 갖습니다.
- ARIA APG 콤보박스 패턴이 완전히 지정되었습니다. 여기에는
role="combobox",role="listbox",role="option",aria-activedescendant가 포함됩니다. -
aria-live="polite"영역이 있어 스크린 리더에 검색 결과 수 변경을 알립니다. - 모바일 뷰포트에서 팔레트가 전체 화면 또는 하단 서랍으로 적응하며, 물리적 단축키 배지를 숨기고 행 높이를 최소 44px로 조정합니다.
-
Escape키를 누르거나 배경 스크림을 클릭하면 팔레트가 닫히고 포커스가 트리거 버튼으로 돌아갑니다.