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