Contextual Command Surface

쓰는 곳#

글로벌 검색, 빠른 이동, 행 액션, 텍스트 선택 후 AI 작업, 차트 내보내기, 카드별 더보기처럼 사용자가 현재 맥락에서 가능한 행동을 빠르게 찾고 실행해야 하는 표면에 씁니다.

적용 현황#

기준서

완료

포털 적용

이 문서의 문서 검토 명령 조합 데모에 1차 적용

재사용 구현

Popover compact sheet 표현 옵션과 포털 조합 데모 있음

배포 패키지

@wds/ui-web Popover·BottomSheet API에 반영

다음 조치

행 액션·AI 명령·차트 내보내기 반복 적용 가능성 검토

구조#

Command Palette

전역 이동·검색·명령. 키보드 중심

Context Popover

버튼·선택 영역·행에 붙는 짧은 액션

BottomSheet

모바일에서 선택 항목에 대한 짧은 명령 묶음

Drawer

필터·정렬·AI 도구처럼 조작이 많은 명령 묶음

웹 규칙#

전역 명령

Command Palette. ⌘K/Ctrl+K와 버튼 진입 둘 다 제공

짧은 행 액션

DropdownMenu 또는 Popover

위치 의존 메뉴

Anchor Positioning 가능한 Popover. 트리거와 시각적 연결 유지

위험 명령

메뉴 안 즉시 실행 금지. Modal 또는 확인 단계

반복 작업

최근 명령·즐겨찾기·검색어를 상단에 노출

모바일 규칙#

짧은 액션

BottomSheet. 44px 이상 터치 타깃

조작이 많은 명령

Drawer 또는 BottomSheet

전역 검색

전체 화면 Command Surface. 키보드가 뜬 뒤 결과가 가리지 않음

위험 명령

destructive action은 하단 고정 CTA가 아니라 확인 sheet로 분리

선택 기반 명령

선택 대상 이름은 본문 첫 줄에 두고, sheet 제목은 중복되면 접근성 이름으로만 남김

닫기 경로

드래그·배경 클릭·Esc 닫기가 유지될 때만 시각 닫기 버튼을 생략

상태#

기본

명령 그룹 + 단축키 또는 설명

검색 중

명령 필터링, 결과 없음 상태

실행 중

실행한 항목은 busy 표시, 표면은 필요 시 닫지 않음

성공

Toast 또는 inline status

실패

명령 위치 근처 FormMessage 또는 sheet 내 오류

접근성#

• 메뉴, 리스트박스, 다이얼로그 역할을 표면 성격에 맞게 고릅니다.
• Popover는 트리거로 포커스 복귀, Modal/Sheet는 focus trap을 적용합니다.
• 단축키는 보조 수단입니다. 버튼 또는 메뉴 진입이 반드시 있어야 합니다.
• 모바일 sheet는 접근성 제목과 Esc/뒤로가기 동작을 갖습니다. 시각 제목·닫기 버튼은 표면 밀도에 따라 생략할 수 있습니다.
• 명령 이름은 동사로 시작하고, 같은 화면에서 같은 동작은 같은 이름을 씁니다.

사용 컴포넌트#

Command · Popover · DropdownMenu · BottomSheet · Drawer · Modal · Toast

검수 기준#

키보드

전역 명령은 단축키와 버튼 모두로 열림

위치

Popover가 트리거와 분리되어 떠 보이지 않음

모바일

화면 하단 sheet가 키보드와 겹치지 않음

위험 행동

삭제·회수·초기화는 2단계 확인

포커스

닫힌 뒤 트리거 또는 합리적인 위치로 복귀

참고 기준#

• CSS Anchor Positioning
• Popover API
• Apple Human Interface Guidelines