UI 가이드요소
커맨드 팔레트Command Palette
커맨드 팔레트는 ⌘K(또는 Ctrl+K)로 여는 검색창 형태의 통합 실행 UI입니다. 메뉴를 뒤지는 대신 몇 글자를 입력해 앱의 모든 기능·페이지·데이터에 도달하게 해 줍니다.
- 이렇게 생겼습니다
- ⌘K를 누르면 화면 중앙 위에 뜨는 검색창과 결과 목록.
- 프롬프트에 쓰는 이름
- Command Palette · 다른 이름: ⌘K, 커맨드 메뉴, Command Menu, 퀵 오픈
화가의 팔레트처럼 '명령(command)들을 한곳에 모아 둔 판'이라는 뜻입니다. VS Code의 ⌘⇧P, Slack·Notion·Linear·Vercel의 ⌘K가 전부 이것입니다. 파워 유저용 기능이었지만 이제는 SaaS의 표준 장비가 됐습니다.
버튼을 누르거나 ⌘K(Ctrl+K)를 눌러 보세요.
왜 강력한가요
메뉴 구조는 만든 사람의 분류를 사용자가 외워야 하지만, 커맨드 팔레트는 사용자가 아는 단어로 검색하면 됩니다. 기능이 늘어날수록 메뉴는 깊어지지만 팔레트는 그대로입니다. 그리고 키보드에서 손을 떼지 않게 해 줍니다.
구성 요소는 네 가지입니다. 트리거 단축키(⌘K) → 오버레이 위 검색 입력 → 퍼지 검색 결과 목록 → 방향키 이동 + Enter 실행. 최근 사용 항목을 검색 전에 보여주면 더 좋습니다.
AI에게 시키기
⌘K로 열리는 커맨드 팔레트를 만들어줘.
- 오버레이 중앙 상단에 검색 입력 + 결과 목록
- 퍼지 검색으로 페이지 이동·주요 액션(새 글, 설정 등) 검색
- 방향키로 이동, Enter로 실행, ESC로 닫기
- 열리면 입력에 자동 포커스, 최근 사용 5개를 기본 표시
React라면 "cmdk 라이브러리 기반으로"라고 덧붙이면 훨씬 완성도 높게 나옵니다. Vercel이 만든 사실상의 표준 라이브러리입니다.
혼동 주의
- 검색창(Search): 콘텐츠(데이터)만 찾습니다. 커맨드 팔레트는 기능(동사)까지 실행합니다.
- 모달: 커맨드 팔레트도 모달의 일종이지만, 응답을 강요하는 것이 아니라 빠른 실행이 목적입니다.