@askewly/design 0.1.0 → 0.3.0

package/data/terms.json

@@ -1 +1 @@
-[{"id":"text-field","status":"draft","category":"input","group":"input-text","ko":{"name":"입력창","aliases":["텍스트 필드","인풋","입력 요소"]},"en":{"name":"Text field","aliases":["Input","Text input"]},"one_liner":"짧은 텍스트를 한 줄로 입력받는 요소.","description":"이름, 제목, 이메일처럼 짧은 문자열을 사용자가 직접 입력할 때 쓴다.","visual_anatomy":["label or placeholder","rectangular input container","text caret","optional helper text"],"when_to_use":["짧은 값을 직접 입력받을 때","폼에서 사용자가 값을 수정해야 할 때"],"anti_use":["긴 본문에는 textarea를 쓴다","정해진 보기 중 선택이면 select나 radio group을 검토한다"],"prompt_phrases":["이름을 입력하는 text field를 넣어줘","검색어 입력창을 상단에 배치해줘"]},{"id":"search-field","status":"draft","category":"input","group":"input-search-command","ko":{"name":"검색창","aliases":["검색 입력창","search input","서치바"]},"en":{"name":"Search field","aliases":["Search input","Search bar"]},"one_liner":"검색어를 입력해 목록이나 콘텐츠를 찾는 입력 요소.","description":"돋보기 아이콘, placeholder, 지우기 버튼이 함께 쓰이는 경우가 많다.","visual_anatomy":["magnifying glass icon","input container","placeholder text","optional clear button"],"when_to_use":["리스트나 데이터가 많아 사용자가 빠르게 찾게 할 때","이름이나 키워드로 필터링할 때"],"anti_use":["항목 수가 적으면 category filter가 더 단순할 수 있다","복잡한 조건 검색은 filter panel을 쓴다"],"prompt_phrases":["카드 목록 위에 검색창을 넣어줘","검색창 안에 돋보기 아이콘을 넣어줘"]},{"id":"textarea","status":"draft","category":"input","group":"input-text","ko":{"name":"텍스트영역","aliases":["긴 글 입력창","여러 줄 입력","textarea"]},"en":{"name":"Textarea","aliases":["Multiline text field","Text area"]},"one_liner":"여러 줄의 긴 텍스트를 입력받는 요소.","description":"메모, 소개글, 문의 내용처럼 길이가 길거나 줄바꿈이 필요한 입력에 쓴다.","visual_anatomy":["label","multiline box","resize corner or fixed height","helper text"],"when_to_use":["사용자가 문장이나 본문을 입력할 때","줄바꿈이 의미 있는 내용을 받을 때"],"anti_use":["한 줄 값에는 text field가 더 적합하다","rich formatting이 필요하면 editor를 쓴다"],"prompt_phrases":["문의 내용을 쓰는 textarea를 넣어줘","긴 설명 입력 영역을 만들어줘"]},{"id":"select","status":"draft","category":"input","group":"input-pickers","ko":{"name":"선택창","aliases":["셀렉트","드롭다운 선택","select box"]},"en":{"name":"Select","aliases":["Select box","Dropdown select"]},"one_liner":"정해진 보기 중 하나를 선택하는 입력 요소.","description":"현재 선택값과 펼침 화살표를 보여주고, 클릭하면 옵션 목록을 연다.","visual_anatomy":["selected value","trigger container","chevron icon","option list"],"when_to_use":["선택지가 정해져 있고 하나만 고를 때","공간을 아껴야 할 때"],"anti_use":["선택지가 2-4개면 radio group이나 segmented control이 더 잘 보인다","검색이 필요하면 combobox를 쓴다"],"prompt_phrases":["카테고리를 고르는 select를 넣어줘","옵션 목록에서 하나 고르는 드롭다운을 만들어줘"],"related":[{"id":"combobox","relation":"compare","note":"옵션이 많거나 검색 입력이 필요하면 select보다 combobox가 맞다."},{"id":"dropdown-menu","relation":"compare","note":"값을 고르는 입력이면 select, 명령을 숨겨 실행하는 목록이면 dropdown menu다."},{"id":"radio-group","relation":"alternative","note":"선택지가 적고 모두 보여줘야 하면 select보다 radio group이 더 명확하다."},{"id":"segmented-control","relation":"alternative","note":"2-5개의 보기 모드를 즉시 전환하면 segmented control이 더 빠르다."}]},{"id":"combobox","status":"draft","category":"input","group":"input-pickers","ko":{"name":"콤보박스","aliases":["검색 가능한 선택창","자동완성 선택","combobox"]},"en":{"name":"Combobox","aliases":["Autocomplete select","Searchable select"]},"one_liner":"입력과 선택을 함께 제공하는 검색 가능한 선택 요소.","description":"사용자가 텍스트를 입력해 옵션을 필터링하고 목록에서 값을 고를 수 있다.","visual_anatomy":["input trigger","typed query","filtered option list","highlighted option"],"when_to_use":["선택지가 많아 검색이 필요할 때","사용자가 값을 입력하며 고르게 할 때"],"anti_use":["선택지가 적으면 select나 radio group이 더 단순하다","자유 입력만 필요하면 text field를 쓴다"],"prompt_phrases":["국가를 검색해서 고르는 combobox를 넣어줘","옵션이 많은 선택창은 검색 가능하게 만들어줘"],"related":[{"id":"select","relation":"compare","note":"검색 없이 정해진 값 하나만 고르면 combobox보다 select가 단순하다."},{"id":"autocomplete","relation":"compare","note":"추천 입력과 검색 선택이 핵심이면 autocomplete와 겹치므로 입력 자유도와 선택 강도를 먼저 정한다."},{"id":"dropdown-menu","relation":"compare","note":"combobox는 값을 입력/선택하는 control이고 dropdown menu는 명령 목록이다."}]},{"id":"checkbox","status":"draft","category":"selection","group":"selection-options","ko":{"name":"체크박스","aliases":["checkbox","다중 선택 체크"]},"en":{"name":"Checkbox","aliases":["Check box"]},"one_liner":"여러 항목을 각각 켜거나 선택할 수 있는 작은 체크 요소.","description":"동의, 옵션 선택, 다중 선택 리스트에서 쓰이며 체크 표시로 상태를 보여준다.","visual_anatomy":["square control","check mark","label","optional indeterminate state"],"when_to_use":["여러 옵션을 동시에 선택할 수 있을 때","약관 동의처럼 yes/no 상태가 필요할 때"],"anti_use":["상호 배타적 선택에는 radio group을 쓴다","즉시 켜고 끄는 설정에는 switch가 더 자연스럽다"],"prompt_phrases":["약관 동의 체크박스를 넣어줘","여러 개 선택 가능한 checkbox 목록을 만들어줘"],"related":[{"id":"switch","relation":"compare","note":"즉시 켜고 끄는 설정이면 switch, 제출 전 선택값이면 checkbox가 더 명확하다."},{"id":"radio-group","relation":"compare","note":"여러 개 선택할 수 있으면 checkbox, 정확히 하나만 골라야 하면 radio group이다."}]},{"id":"radio-group","status":"draft","category":"selection","group":"selection-options","ko":{"name":"라디오그룹","aliases":["라디오 버튼","하나만 선택","radio"]},"en":{"name":"Radio group","aliases":["Radio buttons"]},"one_liner":"여러 선택지 중 정확히 하나를 고르는 요소 묶음.","description":"각 옵션 앞에 원형 버튼이 있고, 하나를 선택하면 다른 선택은 해제된다.","visual_anatomy":["group label","circular controls","selected dot","option labels"],"when_to_use":["선택지가 적고 모두 보여줘야 할 때","사용자가 하나만 선택해야 할 때"],"anti_use":["여러 개 선택 가능하면 checkbox를 쓴다","선택지가 많으면 select를 검토한다"],"prompt_phrases":["요금제를 하나 고르는 radio group을 넣어줘","결제 방식을 라디오 버튼으로 선택하게 해줘"],"related":[{"id":"checkbox","relation":"compare","note":"하나만 선택하면 radio group, 여러 개 선택 가능하면 checkbox를 쓴다."},{"id":"select","relation":"alternative","note":"선택지가 많거나 공간을 아껴야 하면 select가 더 적합하다."},{"id":"segmented-control","relation":"alternative","note":"보기 모드처럼 즉시 전환되는 소수 옵션은 segmented control이 더 compact하다."}]},{"id":"switch","status":"draft","category":"selection","group":"selection-options","ko":{"name":"스위치","aliases":["토글","toggle","켜기 끄기"]},"en":{"name":"Switch","aliases":["Toggle switch","Toggle"]},"one_liner":"설정을 즉시 켜거나 끄는 요소.","description":"손잡이가 좌우로 움직이며 on/off 상태를 직관적으로 보여준다.","visual_anatomy":["track","thumb","on/off position","label"],"when_to_use":["설정을 바로 활성화하거나 비활성화할 때","변경 결과가 즉시 적용될 때"],"anti_use":["폼 제출 전까지 확정되지 않는 값에는 checkbox가 더 명확할 수 있다","여러 선택지 중 하나는 radio group을 쓴다"],"prompt_phrases":["알림을 켜고 끄는 toggle switch를 넣어줘","다크모드 스위치를 만들어줘"],"related":[{"id":"checkbox","relation":"compare","note":"스위치는 즉시 적용되는 on/off 설정에 쓰고, checkbox는 폼 안 선택값에 더 적합하다."},{"id":"toggle-group","relation":"compare","note":"여러 버튼형 상태를 묶어 켜고 끄면 toggle group이 더 낫다."}]},{"id":"slider","status":"draft","category":"selection","group":"selection-options","ko":{"name":"슬라이더","aliases":["range slider","값 조절 바"]},"en":{"name":"Slider","aliases":["Range slider"]},"one_liner":"연속적인 값이나 범위를 손잡이로 조절하는 요소.","description":"트랙 위 thumb를 움직여 볼륨, 가격, 강도 같은 값을 조정한다.","visual_anatomy":["track","filled range","thumb","value label"],"when_to_use":["정확한 숫자보다 대략적인 조절이 중요할 때","값의 크기를 시각적으로 보여주고 싶을 때"],"anti_use":["정확한 숫자 입력이 필요하면 number input을 쓴다","선택지가 이산적이면 segmented control이나 radio를 쓴다"],"prompt_phrases":["볼륨을 조절하는 slider를 넣어줘","가격 범위를 고르는 range slider를 만들어줘"]},{"id":"date-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"날짜 선택","aliases":["데이트피커","달력 입력","date picker"]},"en":{"name":"Date picker","aliases":["Calendar picker"]},"one_liner":"달력 UI로 날짜를 선택하는 입력 요소.","description":"날짜 입력창과 달력 팝오버를 함께 제공해 날짜를 직접 고르게 한다.","visual_anatomy":["date input","calendar icon","calendar popover","selected day"],"when_to_use":["예약일이나 마감일처럼 날짜를 고르게 할 때","날짜 형식 오류를 줄이고 싶을 때"],"anti_use":["연도나 월만 고르면 simpler select가 낫다","자유 텍스트 날짜는 오류가 많다"],"prompt_phrases":["예약 날짜를 고르는 date picker를 넣어줘","달력으로 마감일을 선택하게 해줘"]},{"id":"file-upload","status":"draft","category":"input","group":"input-file-media","ko":{"name":"파일 업로드","aliases":["파일 선택","첨부","upload input"]},"en":{"name":"File upload","aliases":["File input","Upload button"]},"one_liner":"사용자가 로컬 파일을 선택하거나 끌어다 놓게 하는 입력 요소.","description":"파일 선택 버튼, 드롭존, 선택된 파일 이름을 함께 보여주는 경우가 많다.","visual_anatomy":["upload icon","file button or dropzone","filename","optional progress"],"when_to_use":["이미지나 문서를 첨부받을 때","파일 업로드 상태를 보여줘야 할 때"],"anti_use":["단순 링크 입력에는 text field를 쓴다","대용량 업로드는 별도 progress와 error recovery가 필요하다"],"prompt_phrases":["프로필 이미지를 올리는 file upload를 넣어줘","파일 선택 버튼과 업로드 상태를 보여줘"]},{"id":"tabs","status":"draft","category":"selection","group":"selection-options","ko":{"name":"탭","aliases":["탭 메뉴","tab"]},"en":{"name":"Tabs","aliases":["Tab list"]},"one_liner":"같은 영역 안에서 관련 화면이나 패널을 전환하는 요소.","description":"탭 목록과 선택된 탭 패널로 구성되며 현재 위치를 강조한다.","visual_anatomy":["tab list","active tab","inactive tabs","tab panel"],"when_to_use":["같은 맥락의 콘텐츠를 몇 개 섹션으로 나눌 때","화면 이동 없이 내용을 전환할 때"],"anti_use":["서로 관련 없는 페이지 이동에는 navigation을 쓴다","탭이 너무 많으면 overflow나 다른 구조를 검토한다"],"prompt_phrases":["상세 화면에 탭 메뉴를 넣어줘","개요와 설정을 tabs로 전환하게 해줘"],"related":[{"id":"segmented-control","relation":"compare","note":"콘텐츠 패널을 나누면 tabs, 보기 모드나 필터 값을 빠르게 바꾸면 segmented control이 맞다."},{"id":"tab-bar","relation":"compare","note":"모바일 앱의 최상위 destination 전환이면 tab bar라는 이름이 더 자연스럽다."}]},{"id":"segmented-control","status":"draft","category":"selection","group":"selection-options","ko":{"name":"세그먼트 버튼","aliases":["분할 버튼","segmented control","옵션 토글"]},"en":{"name":"Segmented control","aliases":["Segmented button"]},"one_liner":"몇 개의 선택지를 버튼처럼 나란히 보여주고 하나를 선택하는 요소.","description":"필터 모드나 보기 방식을 빠르게 전환할 때 쓰며 선택된 segment를 강조한다.","visual_anatomy":["group container","segments","active segment","labels"],"when_to_use":["2-5개 정도의 선택지를 항상 보여주고 싶을 때","보기 모드나 필터를 빠르게 바꿀 때"],"anti_use":["선택지가 많으면 select를 쓴다","다중 선택이면 checkbox나 chips를 검토한다"],"prompt_phrases":["일간 주간 월간을 고르는 segmented control을 넣어줘","보기 방식을 세그먼트 버튼으로 전환하게 해줘"],"related":[{"id":"tabs","relation":"compare","note":"패널 구조가 명확하면 tabs, 같은 화면의 보기 방식만 바꾸면 segmented control이 더 적합하다."},{"id":"toggle-group","relation":"compare","note":"하나만 선택되는 모드 전환이면 segmented control, 여러 pressed state가 필요하면 toggle group이다."},{"id":"radio-group","relation":"alternative","note":"폼 선택값을 명확히 제출해야 하면 radio group이 더 보수적이다."}]},{"id":"dropdown-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"드롭다운 메뉴","aliases":["더보기 메뉴","펼침 메뉴","dropdown"]},"en":{"name":"Dropdown menu","aliases":["Menu","Popup menu"]},"one_liner":"버튼을 누르면 아래로 펼쳐지는 명령 또는 선택 목록.","description":"숨겨진 동작이나 옵션을 한 곳에 모아 표시한다.","visual_anatomy":["trigger button","chevron or more icon","floating menu","menu items"],"when_to_use":["자주 쓰지 않는 명령을 숨길 때","공간을 아끼며 옵션을 제공할 때"],"anti_use":["중요한 주요 행동은 숨기지 않는다","값 선택이 목적이면 select나 combobox를 검토한다"],"prompt_phrases":["카드 오른쪽에 더보기 dropdown menu를 넣어줘","정렬 옵션을 드롭다운 메뉴로 보여줘"],"related":[{"id":"select","relation":"compare","note":"사용자가 값 하나를 선택하는 입력이면 select, 숨겨진 명령을 실행하면 dropdown menu다."},{"id":"popover","relation":"compare","note":"단순 명령 목록이면 dropdown menu, 작은 폼이나 보조 콘텐츠면 popover가 맞다."},{"id":"tooltip","relation":"compare","note":"설명을 잠깐 보여주는 용도면 tooltip이고, 클릭 가능한 명령 목록은 dropdown menu다."}]},{"id":"command-palette","status":"draft","category":"input","group":"input-search-command","ko":{"name":"커맨드 팔레트","aliases":["명령 검색창","command menu","빠른 실행"]},"en":{"name":"Command palette","aliases":["Command menu"]},"one_liner":"검색으로 화면 이동이나 명령 실행을 빠르게 찾는 오버레이.","description":"입력창과 결과 목록을 함께 보여주며 키보드 중심 탐색에 적합하다. 운영 도구에서는 현재 선택된 엔티티에 스코프를 좁혀 그 엔티티에만 적용되는 위험 액션만 노출하고, 파괴적 액션은 목록 안에서 시각적으로 분리하는 변형으로도 쓰인다.","visual_anatomy":["overlay panel","command input","grouped results","keyboard hint","entity-scoped action list when used as an ops variant","visually separated destructive actions in that variant"],"when_to_use":["기능이 많고 빠른 검색 실행이 필요할 때","파워 유저용 단축 흐름이 필요할 때","선택된 엔티티에 스코프된 운영 액션만 빠르게 찾아 실행해야 할 때"],"anti_use":["초보자에게 필수 기능을 숨기는 용도로 쓰지 않는다","항목이 적으면 일반 검색이나 메뉴가 더 쉽다"],"prompt_phrases":["Ctrl K로 여는 command palette를 넣어줘","명령어를 검색해서 실행하는 팔레트를 만들어줘"],"related":[{"id":"search-suggestions","relation":"compare","note":"문서 사이트의 Cmd/Ctrl+K 검색은 command-palette 오버레이 형태를 쓰되, 결과를 Docs/Guides/API 같은 섹션 헤더로 그룹핑한다는 점에서 순수 명령 실행 목록과 다르다 — 그룹핑 구조 자체는 search-suggestions의 추천 목록 개념과 더 가깝다."}]},{"id":"breadcrumb","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"브레드크럼","aliases":["현재 위치 경로","breadcrumb"]},"en":{"name":"Breadcrumb","aliases":["Breadcrumb navigation"]},"one_liner":"현재 페이지가 전체 구조에서 어디인지 보여주는 경로 표시.","description":"홈부터 현재 페이지까지 상위 경로를 링크로 나열한다.","visual_anatomy":["ancestor links","separators","current page label"],"when_to_use":["계층 구조가 깊은 사이트에서 현재 위치를 알려줄 때","상위 페이지로 돌아가기 쉽게 할 때"],"anti_use":["단일 페이지나 얕은 구조에는 불필요하다","주요 navigation을 대체하지 않는다"],"prompt_phrases":["상단에 홈 > 대시보드 > 설정 breadcrumb를 넣어줘","현재 위치 경로를 브레드크럼으로 보여줘"],"related":[{"id":"pagination","relation":"use-with","note":"문서 사이트에서는 상단 breadcrumb(계층 위치)와 하단 prev/next pagination(선형 이동)이 한 세트로 쓰여 순서가 있는 학습 경로를 만든다."}]},{"id":"pagination","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"페이지네이션","aliases":["페이지 이동","pagination"]},"en":{"name":"Pagination","aliases":["Page navigation"]},"one_liner":"긴 목록을 여러 페이지로 나누고 이동하게 하는 요소.","description":"이전/다음, 페이지 번호, 현재 페이지 표시로 구성된다.","visual_anatomy":["previous button","page numbers","active page","next button"],"when_to_use":["데이터가 많아 한 번에 모두 보여주기 어려울 때","사용자가 위치를 유지하며 탐색해야 할 때"],"anti_use":["끊김 없는 탐색이 더 중요하면 infinite scroll을 검토한다","적은 항목에는 불필요하다"],"prompt_phrases":["테이블 아래에 pagination을 넣어줘","이전 다음 버튼과 페이지 번호를 보여줘"],"related":[{"id":"breadcrumb","relation":"use-with","note":"문서 페이지 하단의 이전/다음 문서 링크(prev/next)는 pagination의 한 형태로, 상단 breadcrumb와 함께 쓰여 선형 학습 경로를 만든다."}]},{"id":"stepper","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"스테퍼","aliases":["단계 표시","progress steps","단계 네비게이션"]},"en":{"name":"Stepper","aliases":["Progress steps","Wizard steps"]},"one_liner":"여러 단계로 된 절차에서 현재 진행 단계를 보여주는 요소.","description":"가입, 결제, 설정 마법사처럼 순서가 있는 과정을 단계로 표시한다.","visual_anatomy":["step indicators","completed state","active step","connecting line"],"when_to_use":["사용자가 몇 단계 중 어디에 있는지 알아야 할 때","순서대로 완료하는 흐름일 때"],"anti_use":["단일 화면 작업에는 과하다","순서가 자유로운 탐색에는 tabs가 더 적합할 수 있다"],"prompt_phrases":["가입 절차를 보여주는 stepper를 넣어줘","현재 2단계가 강조된 단계 표시를 만들어줘"]},{"id":"navigation-rail","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"내비게이션 레일","aliases":["좌측 아이콘 메뉴","nav rail"]},"en":{"name":"Navigation rail","aliases":["Nav rail"]},"one_liner":"화면 한쪽에 세로로 배치된 주요 목적지 이동 영역.","description":"아이콘과 짧은 라벨로 주요 섹션을 전환하며 데스크톱/태블릿 레이아웃에서 자주 쓰인다.","visual_anatomy":["vertical rail","destination icons","active indicator","optional labels"],"when_to_use":["앱의 주요 섹션이 3-7개일 때","콘텐츠 영역을 넓게 유지하고 싶을 때"],"anti_use":["복잡한 계층 메뉴는 sidebar가 낫다","모바일 하단 navigation과 경쟁시키지 않는다"],"prompt_phrases":["왼쪽에 아이콘 중심 navigation rail을 넣어줘","현재 메뉴가 강조된 세로 내비게이션을 만들어줘"]},{"id":"sidebar-nav","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"사이드바 내비게이션","aliases":["사이드 메뉴","sidebar menu"]},"en":{"name":"Sidebar navigation","aliases":["Side navigation","Sidebar menu"]},"one_liner":"화면 옆에 메뉴 목록을 세로로 배치한 내비게이션.","description":"섹션, 하위 메뉴, active 상태를 함께 보여주며 관리 도구에 자주 쓰인다.","visual_anatomy":["side panel","nav items","active item","optional nested groups"],"when_to_use":["대시보드나 관리 화면처럼 반복 탐색이 필요할 때","메뉴 계층을 계속 보여줘야 할 때"],"anti_use":["단순 랜딩 페이지에는 과하다","좁은 모바일에서는 drawer나 bottom nav로 바꾼다"],"prompt_phrases":["대시보드 왼쪽에 sidebar navigation을 넣어줘","활성 메뉴가 표시된 사이드 메뉴를 만들어줘"]},{"id":"chip","status":"draft","category":"selection","group":"selection-options","ko":{"name":"칩","aliases":["태그 버튼","pill","chip"]},"en":{"name":"Chip","aliases":["Pill","Tag chip"]},"one_liner":"작은 알약 모양으로 선택, 필터, 속성을 표시하는 요소.","description":"라벨, 선택 상태, 삭제 아이콘을 조합해 필터나 태그를 표현한다.","visual_anatomy":["rounded pill container","text label","selected state","optional remove icon"],"when_to_use":["선택된 필터를 보여줄 때","항목의 짧은 속성이나 태그를 표시할 때"],"anti_use":["긴 설명 문장을 담지 않는다","주요 CTA 버튼처럼 쓰지 않는다"],"prompt_phrases":["선택된 필터를 chip으로 보여줘","삭제 가능한 태그 칩을 넣어줘"]},{"id":"button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"버튼","aliases":["button","실행 버튼"]},"en":{"name":"Button","aliases":["Action button"]},"one_liner":"사용자가 눌러 명령이나 동작을 실행하는 요소.","description":"라벨과 스타일로 행동의 의미와 중요도를 전달한다.","visual_anatomy":["button container","label","optional icon","hover or pressed state"],"when_to_use":["사용자가 명확한 행동을 실행해야 할 때","폼 제출이나 저장 같은 명령이 있을 때"],"anti_use":["페이지 이동만 의미하면 link를 검토한다","상태 전환은 switch나 checkbox가 더 명확할 수 있다"],"prompt_phrases":["저장 버튼을 오른쪽 아래에 넣어줘","폼 제출용 button을 만들어줘"]},{"id":"primary-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"주요 버튼","aliases":["primary button","메인 CTA"]},"en":{"name":"Primary button","aliases":["Primary action","CTA button"]},"one_liner":"화면에서 가장 중요한 행동을 강조하는 버튼.","description":"색상, 채움, 대비로 다른 버튼보다 강하게 보이게 만든다.","visual_anatomy":["filled container","high contrast label","optional leading icon"],"when_to_use":["사용자가 가장 먼저 해야 할 행동이 하나일 때","저장 제출 시작 같은 핵심 CTA가 있을 때"],"anti_use":["한 화면에 너무 많이 두면 중요도가 흐려진다","위험 행동은 destructive button으로 구분한다"],"prompt_phrases":["가장 중요한 행동은 primary button으로 강조해줘","시작하기 CTA를 파란색 주요 버튼으로 넣어줘"]},{"id":"secondary-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"보조 버튼","aliases":["secondary button","outline button"]},"en":{"name":"Secondary button","aliases":["Outline button","Secondary action"]},"one_liner":"주요 행동보다 덜 중요한 선택지를 제공하는 버튼.","description":"테두리나 낮은 대비 스타일로 primary action보다 약하게 보인다.","visual_anatomy":["outlined or subtle container","label","lower visual weight"],"when_to_use":["취소","나중에 하기","보조 행동처럼 덜 중요한 명령이 있을 때"],"anti_use":["화면의 핵심 CTA를 secondary로 숨기지 않는다","단순 링크는 link 스타일을 검토한다"],"prompt_phrases":["취소는 secondary button으로 넣어줘","주요 버튼 옆에 보조 버튼을 배치해줘"]},{"id":"destructive-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"위험 버튼","aliases":["삭제 버튼","destructive button","danger button"]},"en":{"name":"Destructive button","aliases":["Danger button","Delete button"]},"one_liner":"삭제나 되돌리기 어려운 위험한 행동을 나타내는 버튼.","description":"보통 빨간색 계열과 경고 문맥으로 사용자가 위험을 인지하게 한다.","visual_anatomy":["danger color container or text","warning label","optional trash icon"],"when_to_use":["삭제","초기화","권한 해제처럼 손실 가능성이 있는 행동일 때"],"anti_use":["일반 실패 상태 강조에 남용하지 않는다","위험 행동에는 확인 dialog를 함께 검토한다"],"prompt_phrases":["계정 삭제는 destructive button으로 표시해줘","위험한 삭제 버튼은 빨간색으로 구분해줘"]},{"id":"icon-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"아이콘 버튼","aliases":["icon button","아이콘만 있는 버튼"]},"en":{"name":"Icon button","aliases":["Icon-only button"]},"one_liner":"텍스트 대신 아이콘으로 행동을 표현하는 버튼.","description":"좋아요, 닫기, 검색, 설정처럼 익숙한 행동에 작은 공간으로 쓴다.","visual_anatomy":["square or circular hit area","centered icon","hover state","accessible label"],"when_to_use":["아이콘 의미가 명확하고 공간이 좁을 때","반복 카드 안의 빠른 행동이 필요할 때"],"anti_use":["낯선 아이콘은 텍스트 라벨이나 tooltip을 붙인다","접근성 라벨 없이 쓰지 않는다"],"prompt_phrases":["카드 오른쪽에 하트 icon button을 넣어줘","닫기 아이콘 버튼에는 tooltip을 붙여줘"]},{"id":"floating-action-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"플로팅 버튼","aliases":["FAB","floating action button","떠 있는 버튼","라벨 FAB","extended FAB"]},"en":{"name":"Floating action button","aliases":["FAB","Extended FAB"]},"one_liner":"화면 위에 떠 있는 핵심 행동 버튼.","description":"보통 둥글거나 확장형이며 새 항목 만들기 같은 주요 행동을 항상 보이게 한다. 아이콘과 텍스트 라벨을 함께 보여주는 넓은 pill 형태(extended FAB)도 같은 개념의 변형이며, 스크롤 시 라벨을 접어 아이콘만 남기는 방식으로 의미를 유지할 수 있다.","visual_anatomy":["floating circular button","elevation shadow","icon","fixed position","optional text label pill variant","collapse-to-icon on scroll"],"when_to_use":["모바일이나 앱 화면에서 가장 중요한 생성 행동을 빠르게 제공할 때"],"anti_use":["여러 개를 남발하지 않는다","일반 폼 제출 버튼 대신 쓰지 않는다"],"prompt_phrases":["오른쪽 아래에 플러스 FAB를 넣어줘","새 글 작성 floating action button을 만들어줘"],"related":[{"id":"speed-dial","relation":"compare","note":"단일 FAB가 눌렸을 때 보조 행동 3-4개로 펼쳐지는 조합은 speed-dial 쪽 전개-펼침 전환이며, 펼침 중 배경 스크림을 둘지는 주 행동과 보조 행동의 위계에 따라 결정한다."}]},{"id":"link","status":"draft","category":"action","group":"action-buttons","ko":{"name":"링크","aliases":["텍스트 링크","link"]},"en":{"name":"Link","aliases":["Text link","Hyperlink"]},"one_liner":"다른 위치나 페이지로 이동하는 텍스트 요소.","description":"밑줄, 색상, 화살표 등으로 클릭 가능한 이동을 나타낸다.","visual_anatomy":["text label","link color","underline or arrow","hover state"],"when_to_use":["페이지 이동이나 외부 문서 열기처럼 navigation이 목적일 때"],"anti_use":["명령 실행에는 button을 쓴다","중요한 CTA를 작은 링크로 숨기지 않는다"],"prompt_phrases":["자세히 보기 link를 카드 아래에 넣어줘","외부 문서로 이동하는 텍스트 링크를 추가해줘"]},{"id":"toolbar","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"툴바","aliases":["도구막대","toolbar"]},"en":{"name":"Toolbar","aliases":["Action toolbar"]},"one_liner":"관련 명령 버튼들을 한 줄이나 한 영역에 모은 도구 영역.","description":"편집, 정렬, 필터, 보기 전환 같은 반복 행동을 한 곳에 배치한다.","visual_anatomy":["horizontal action group","icon buttons","separators","optional dropdowns"],"when_to_use":["여러 명령을 빠르게 반복 실행해야 할 때","편집기나 데이터 화면의 도구를 모을 때"],"anti_use":["명령이 한두 개뿐이면 과하다","서로 무관한 행동을 한 툴바에 섞지 않는다"],"prompt_phrases":["표 위에 필터와 정렬 toolbar를 넣어줘","에디터 상단에 아이콘 툴바를 만들어줘"]},{"id":"split-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"스플릿 버튼","aliases":["분리 버튼","split button"]},"en":{"name":"Split button","aliases":["Button with menu"]},"one_liner":"기본 행동과 추가 옵션 메뉴를 한 버튼 안에 나눈 요소.","description":"왼쪽은 기본 실행, 오른쪽 화살표는 관련 옵션 목록을 여는 식으로 구성된다.","visual_anatomy":["primary action segment","divider","chevron segment","optional menu"],"when_to_use":["가장 흔한 행동은 즉시 실행하고 변형 옵션도 제공해야 할 때"],"anti_use":["사용자가 기본 행동을 혼동할 수 있으면 일반 dropdown menu가 낫다","모바일 좁은 영역에는 부담스럽다"],"prompt_phrases":["내보내기 버튼을 split button으로 만들어서 CSV와 PDF 옵션을 넣어줘"]},{"id":"menu-item","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"메뉴 항목","aliases":["menu item","메뉴 아이템"]},"en":{"name":"Menu item","aliases":["Menu option"]},"one_liner":"메뉴 안에서 하나의 명령이나 선택지를 나타내는 행.","description":"라벨, 아이콘, 단축키, 위험 상태 등을 한 줄에 표시한다.","visual_anatomy":["row container","optional icon","label","shortcut or checkmark"],"when_to_use":["dropdown menu나 command menu 안의 개별 행동을 보여줄 때"],"anti_use":["독립적인 주요 행동은 메뉴 안에 숨기지 않는다","긴 설명을 메뉴 항목에 넣지 않는다"],"prompt_phrases":["드롭다운 안에 삭제 menu item을 넣어줘","메뉴 항목 오른쪽에 단축키를 보여줘"]},{"id":"card","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"카드","aliases":["card","정보 카드"]},"en":{"name":"Card","aliases":["Content card"]},"one_liner":"관련 정보를 하나의 박스 안에 묶어 보여주는 컨테이너.","description":"제목, 설명, 이미지, 행동 버튼을 한 덩어리로 묶어 스캔하기 쉽게 한다.","visual_anatomy":["container","title","body text","optional media","optional actions"],"when_to_use":["반복되는 항목을 목록이나 그리드로 보여줄 때","하나의 주제를 독립적으로 묶을 때"],"anti_use":["페이지 섹션 전체를 카드처럼 중첩하지 않는다","단순 텍스트 한 줄만 담기에는 과하다"],"prompt_phrases":["각 기능을 card로 묶어서 보여줘","이미지와 설명이 있는 정보 카드를 만들어줘"]},{"id":"dialog","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"모달","aliases":["다이얼로그","modal","dialog"]},"en":{"name":"Dialog","aliases":["Modal","Modal dialog"]},"one_liner":"현재 화면 위에 떠서 사용자의 집중 행동을 요구하는 창.","description":"배경을 덮고 제목, 내용, 행동 버튼을 보여주며 닫기 전까지 주의를 모은다.","visual_anatomy":["backdrop","dialog surface","title","content","action buttons","close button"],"when_to_use":["확인","입력","중요한 결정을 화면 흐름 위에서 처리할 때"],"anti_use":["단순 안내는 toast나 banner가 낫다","긴 복잡한 작업은 별도 페이지나 drawer가 적합할 수 있다"],"prompt_phrases":["삭제 확인 modal을 띄워줘","화면 중앙에 dialog를 열고 취소와 삭제 버튼을 넣어줘"],"related":[{"id":"drawer","relation":"compare","note":"즉시 결정이나 확인을 막고 받아야 하면 dialog, 현재 화면 맥락을 유지하며 보조 작업을 하면 drawer가 낫다."},{"id":"side-sheet","relation":"alternative","note":"넓은 화면에서 상세나 편집을 옆으로 열면 side sheet가 더 작업 친화적이다."},{"id":"modal-bottom-sheet","relation":"alternative","note":"모바일에서 짧은 선택을 하단에서 받으면 modal bottom sheet가 더 자연스럽다."}]},{"id":"drawer","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"드로어","aliases":["시트","사이드 패널","drawer","sheet"]},"en":{"name":"Drawer","aliases":["Sheet","Side panel"]},"one_liner":"화면 한쪽에서 밀려 나오는 보조 패널.","description":"세부 정보, 필터, 편집 폼을 현재 화면 맥락 안에서 보여준다.","visual_anatomy":["side or bottom panel","backdrop optional","handle or close button","content area"],"when_to_use":["현재 목록을 유지한 채 상세나 설정을 보여줄 때","필터 패널을 옆에서 열 때"],"anti_use":["사용자의 즉각 확인이 필요한 경고에는 dialog가 더 명확하다","전체 작업 흐름은 page가 낫다"],"prompt_phrases":["오른쪽에서 열리는 drawer에 상세 정보를 보여줘","모바일에서는 bottom sheet로 열리게 해줘"],"related":[{"id":"dialog","relation":"compare","note":"사용자 결정을 막고 받아야 하면 dialog, 화면 맥락을 유지한 보조 패널이면 drawer다."},{"id":"side-sheet","relation":"compare","note":"drawer는 탐색/패널 전반을 넓게 부르고, side sheet는 작업 맥락의 측면 표면에 더 가깝다."},{"id":"modal-bottom-sheet","relation":"alternative","note":"모바일 하단에서 배경을 막아 선택을 받으면 modal bottom sheet를 쓴다."}]},{"id":"popover","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"팝오버","aliases":["작은 떠있는 패널","popover"]},"en":{"name":"Popover","aliases":["Floating panel"]},"one_liner":"특정 트리거 근처에 뜨는 작은 보조 패널.","description":"날짜 선택, 간단한 설정, 보조 정보를 현재 위치 근처에서 보여준다.","visual_anatomy":["trigger","floating panel","arrow optional","compact content"],"when_to_use":["작은 입력이나 보조 정보를 주변 맥락에서 보여줄 때"],"anti_use":["중요한 결정이나 긴 내용은 dialog나 drawer가 낫다","hover-only 정보는 tooltip을 검토한다"],"prompt_phrases":["버튼을 누르면 작은 popover가 열리게 해줘","날짜 선택기를 팝오버로 띄워줘"],"related":[{"id":"dropdown-menu","relation":"compare","note":"명령 목록이면 dropdown menu, 작은 폼이나 보조 콘텐츠가 있으면 popover가 적합하다."},{"id":"tooltip","relation":"compare","note":"hover/focus의 짧은 설명만 필요하면 tooltip이고, 상호작용 콘텐츠가 있으면 popover다."},{"id":"dialog","relation":"alternative","note":"중요한 결정이나 긴 내용은 popover보다 dialog가 안전하다."}]},{"id":"header","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"헤더","aliases":["상단바","top bar","header"]},"en":{"name":"Header","aliases":["Top bar","App header"]},"one_liner":"화면 상단에서 브랜드, 제목, 주요 동작을 담는 영역.","description":"로고, 페이지 제목, 검색, 내비게이션, 사용자 메뉴가 배치된다.","visual_anatomy":["top container","brand or title","navigation","actions","profile area"],"when_to_use":["페이지의 정체성과 주요 이동/행동을 항상 보여줘야 할 때"],"anti_use":["콘텐츠보다 과하게 커지면 작업 화면의 밀도가 낮아진다","모바일에서는 간결해야 한다"],"prompt_phrases":["상단에 로고와 검색창이 있는 header를 넣어줘","오른쪽에 사용자 메뉴가 있는 top bar를 만들어줘"]},{"id":"footer","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"푸터","aliases":["하단 영역","footer"]},"en":{"name":"Footer","aliases":["Page footer"]},"one_liner":"화면 하단에서 보조 링크와 메타 정보를 담는 영역.","description":"저작권, 정책 링크, 보조 navigation, 연락처 등을 정리한다.","visual_anatomy":["bottom container","link groups","metadata","optional social icons"],"when_to_use":["웹사이트 하단에 반복되는 보조 정보를 제공할 때"],"anti_use":["앱의 핵심 명령을 footer에 숨기지 않는다","모바일 고정 하단바와 혼동하지 않는다"],"prompt_phrases":["페이지 아래에 정책 링크가 있는 footer를 넣어줘","하단에 저작권과 보조 링크를 정리해줘"]},{"id":"grid","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"그리드","aliases":["격자 배치","grid layout"]},"en":{"name":"Grid","aliases":["Grid layout"]},"one_liner":"항목을 행과 열의 격자로 배치하는 레이아웃.","description":"카드, 이미지, 상품, 용어 목록처럼 반복 항목을 균일하게 보여준다.","visual_anatomy":["columns","rows","gutters","repeated items"],"when_to_use":["비슷한 항목을 한눈에 비교하거나 스캔하게 할 때"],"anti_use":["순서와 읽기 흐름이 중요하면 list가 낫다","항목 크기가 제각각이면 masonry나 다른 구조를 검토한다"],"prompt_phrases":["카드를 3열 grid로 배치해줘","용어 목록을 반응형 그리드로 보여줘"]},{"id":"list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"리스트","aliases":["목록","list"]},"en":{"name":"List","aliases":["List view"]},"one_liner":"항목을 세로로 나열해 읽고 선택하게 하는 구조.","description":"각 행은 텍스트, 아이콘, 보조 정보, 행동을 가질 수 있다.","visual_anatomy":["stacked rows","primary text","secondary text","optional leading icon"],"when_to_use":["항목을 순서대로 읽거나 비교해야 할 때","모바일에서 스캔 가능한 목록이 필요할 때"],"anti_use":["시각 비교가 중요하면 grid나 card layout이 낫다","표 형식의 행열 데이터는 table을 쓴다"],"prompt_phrases":["알림을 list로 세로 나열해줘","각 행에 아이콘과 설명이 있는 목록을 만들어줘"]},{"id":"accordion","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"아코디언","aliases":["접히는 목록","accordion"]},"en":{"name":"Accordion","aliases":["Disclosure list"]},"one_liner":"제목을 누르면 내용을 펼치거나 접는 구조.","description":"FAQ나 설정 그룹처럼 많은 내용을 압축해 보여준다.","visual_anatomy":["accordion item","trigger row","chevron","expanded content panel"],"when_to_use":["여러 섹션 중 필요한 내용만 펼쳐 보게 할 때","FAQ처럼 질문과 답변을 묶을 때"],"anti_use":["항상 비교해야 하는 정보는 접지 않는다","핵심 정보를 숨기는 용도로 쓰지 않는다"],"prompt_phrases":["FAQ를 accordion으로 만들어줘","각 항목을 접고 펼칠 수 있게 해줘"]},{"id":"carousel","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"캐러셀","aliases":["슬라이드 카드","carousel"]},"en":{"name":"Carousel","aliases":["Slider carousel"]},"one_liner":"여러 콘텐츠를 좌우로 넘겨 보는 구조.","description":"카드나 이미지를 한 번에 일부만 보여주고 이전/다음으로 이동한다.","visual_anatomy":["viewport","slides","previous and next controls","indicators"],"when_to_use":["추천 카드나 이미지 묶음을 제한된 공간에서 보여줄 때"],"anti_use":["중요 정보를 숨기기 쉽다","사용자가 반드시 봐야 하는 콘텐츠에는 부적합하다"],"prompt_phrases":["추천 카드를 carousel로 넘기게 해줘","좌우 화살표가 있는 슬라이드 영역을 만들어줘"]},{"id":"tooltip","status":"draft","category":"feedback","group":"feedback-confirmation-help","ko":{"name":"툴팁","aliases":["도움말 말풍선","tooltip"]},"en":{"name":"Tooltip","aliases":["Hint bubble"]},"one_liner":"hover나 focus 때 짧은 설명을 보여주는 작은 도움말.","description":"아이콘 버튼이나 낯선 용어의 의미를 짧게 보충한다. 문서 코드 블록 안에서는 트리거가 특정 토큰/줄에 고정된 어노테이션 마커가 되기도 하는데, 이때도 짧은 설명을 보여준다는 동작 자체는 같고 트리거가 코드 좌표에 앵커된다는 맥락만 다르다.","visual_anatomy":["trigger element","small floating bubble","short text","optional arrow","code-anchored marker variant for inline code annotations"],"when_to_use":["아이콘 의미를 보충할 때","짧은 보조 설명이 필요할 때","코드 블록의 특정 토큰/줄에 짧은 설명을 앵커해야 할 때"],"anti_use":["중요한 정보를 tooltip에만 숨기지 않는다","긴 설명이나 상호작용 요소를 넣지 않는다"],"prompt_phrases":["아이콘 버튼에 tooltip을 붙여줘","hover하면 짧은 도움말이 나오게 해줘"],"related":[{"id":"popover","relation":"compare","note":"짧은 설명만 보여주면 tooltip, 버튼이나 입력 같은 상호작용 콘텐츠가 있으면 popover다."},{"id":"dropdown-menu","relation":"compare","note":"선택하거나 실행할 항목 목록이면 tooltip이 아니라 dropdown menu다."}]},{"id":"toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"토스트","aliases":["스낵바","toast","snackbar"]},"en":{"name":"Toast","aliases":["Snackbar","Notification toast"]},"one_liner":"작업 결과를 잠깐 보여주고 사라지는 작은 알림.","description":"저장 완료, 복사 완료, 오류처럼 즉각적인 피드백을 화면 가장자리에서 보여준다.","visual_anatomy":["floating notification","message text","icon optional","close or action button"],"when_to_use":["사용자 행동 직후 결과를 짧게 알려줄 때","화면 흐름을 막지 않아야 할 때"],"anti_use":["중요한 결정이나 긴 오류 설명은 dialog나 alert를 쓴다","사용자가 반드시 읽어야 하는 정보를 자동으로 사라지게 하지 않는다"],"prompt_phrases":["저장되면 오른쪽 아래에 toast를 띄워줘","복사 완료 스낵바를 보여줘"],"related":[{"id":"snackbar","relation":"compare","note":"짧은 결과만 알리면 toast, 되돌리기 같은 한 가지 action이 중요하면 snackbar가 더 명확하다."},{"id":"alert","relation":"compare","note":"사용자가 계속 봐야 하는 상태나 오류는 자동으로 사라지는 toast보다 alert/banner가 낫다."},{"id":"dialog","relation":"alternative","note":"사용자 결정을 받아야 하는 위험 행동은 toast가 아니라 dialog를 쓴다."}]},{"id":"alert","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"알림 배너","aliases":["alert","banner","경고 박스"]},"en":{"name":"Alert","aliases":["Banner","Inline alert"]},"one_liner":"중요한 상태나 경고를 지속적으로 보여주는 메시지 영역.","description":"페이지 안에 배치되어 정보, 성공, 경고, 오류 상태를 설명한다.","visual_anatomy":["status icon","message","colored container","optional action"],"when_to_use":["사용자가 알아야 하는 상태를 화면 안에 유지해야 할 때","오류나 경고를 맥락 안에서 설명할 때"],"anti_use":["짧은 완료 피드백은 toast가 낫다","확인을 요구하는 위험 행동은 dialog를 검토한다"],"prompt_phrases":["상단에 오류 alert banner를 보여줘","결제 실패 안내를 inline alert로 넣어줘"],"related":[{"id":"toast","relation":"compare","note":"잠깐 보여도 되는 완료 피드백은 toast, 화면 안에 유지해야 하는 안내는 alert/banner다."},{"id":"snackbar","relation":"compare","note":"짧은 메시지와 한 가지 action이면 snackbar, 맥락 안에서 지속 표시하면 alert가 맞다."},{"id":"inline-alert","relation":"compare","note":"폼이나 섹션 내부 오류처럼 위치 맥락이 중요하면 inline alert로 좁혀 부른다."},{"id":"callout","relation":"compare","note":"문서 본문 중간에 삽입되는 note/warning/tip 등급 강조 박스는 callout이고, 앱 화면의 지속적 상태/오류 안내는 alert다."}]},{"id":"callout","status":"draft","category":"feedback","group":"feedback-alerts-toasts","kind":"block","ko":{"name":"콜아웃","aliases":["callout","admonition","강조 박스"]},"en":{"name":"Callout","aliases":["Admonition","Callout box"]},"one_liner":"문서 본문 중간에 note/tip/info/caution/danger 등급으로 구분해 삽입하는 강조 박스.","description":"좌측 컬러 바 또는 배경색과 아이콘, 등급 라벨로 문단 사이에 삽입되어 본문 흐름을 방해하지 않으면서 중요한 보충 정보를 강조한다. note/tip/info/caution/danger 5등급 명명은 Docusaurus 같은 문서 프레임워크의 admonition 관례를 따른다.","visual_anatomy":["left color bar or tinted background","grade icon","title label (Note/Tip/Info/Caution/Danger)","body text","full-width insertion between paragraphs"],"when_to_use":["문서 본문 중간에 보충 설명","팁","주의사항을 등급별로 구분해 강조해야 할 때"],"anti_use":["앱 화면의 지속적인 상태나 오류 안내는 alert/banner가 더 정확하다","잠깐 보여줄 완료 피드백은 toast를 쓴다"],"prompt_phrases":["문서 본문에 note/warning 등급의 callout box를 넣어줘","왼쪽 컬러 바가 있는 admonition 박스를 만들어줘"],"related":[{"id":"alert","relation":"compare","note":"callout은 문서 본문 저작 콘텐츠에 삽입되는 등급별 강조 박스이고, alert는 앱 화면의 상태/오류를 알리는 지속적 메시지 영역이다."}]},{"id":"badge","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"배지","aliases":["badge","숫자 표시","상태 표시"]},"en":{"name":"Badge","aliases":["Status badge","Count badge"]},"one_liner":"숫자나 짧은 상태를 작게 강조하는 표시.","description":"알림 개수, 상태, 라벨을 작고 눈에 띄게 보여준다.","visual_anatomy":["small pill or dot","count or label","status color"],"when_to_use":["읽지 않은 개수나 상태를 빠르게 표시할 때","카드나 메뉴 옆에 짧은 메타 정보를 붙일 때"],"anti_use":["긴 문장을 담지 않는다","주요 행동 버튼처럼 쓰지 않는다"],"prompt_phrases":["알림 아이콘 위에 숫자 badge를 붙여줘","상태를 초록색 배지로 표시해줘"]},{"id":"progress-bar","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"진행바","aliases":["프로그레스 바","progress bar"]},"en":{"name":"Progress bar","aliases":["Linear progress"]},"one_liner":"작업 진행 정도를 막대 길이로 보여주는 요소.","description":"업로드, 설치, 단계 진행처럼 전체 대비 현재 진행률을 시각화한다.","visual_anatomy":["track","filled indicator","optional percentage label"],"when_to_use":["진행률을 알 수 있고 사용자가 기다려야 할 때","긴 작업의 상태를 안정적으로 보여줄 때"],"anti_use":["진행률을 알 수 없으면 spinner나 indeterminate progress를 쓴다","짧은 즉시 동작에는 불필요하다"],"prompt_phrases":["업로드 진행률을 progress bar로 보여줘","65퍼센트가 채워진 진행바를 넣어줘"]},{"id":"spinner","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"로딩 스피너","aliases":["spinner","loading indicator"]},"en":{"name":"Spinner","aliases":["Loading spinner","Circular progress"]},"one_liner":"작업 중임을 회전 애니메이션으로 보여주는 로딩 표시.","description":"정확한 진행률은 모르지만 처리 중임을 알려야 할 때 쓴다.","visual_anatomy":["circular ring","rotating gap","loading label optional"],"when_to_use":["짧은 비동기 처리 중 상태를 알려야 할 때","진행률을 측정할 수 없을 때"],"anti_use":["긴 작업에는 설명과 progress bar를 함께 검토한다","화면 전체를 불필요하게 막지 않는다"],"prompt_phrases":["데이터 불러오는 동안 loading spinner를 보여줘","버튼 안에 작은 스피너를 넣어줘"]},{"id":"skeleton","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"스켈레톤","aliases":["skeleton loader","로딩 자리표시자"]},"en":{"name":"Skeleton","aliases":["Skeleton loader","Placeholder"]},"one_liner":"실제 콘텐츠가 들어올 자리의 형태를 미리 보여주는 로딩 UI.","description":"카드, 텍스트, 이미지 영역의 회색 블록을 보여줘 로딩 중 레이아웃을 예측하게 한다. 모바일 리스트 행에 쓸 때는 실제 행과 같은 아바타-텍스트-트레일링 3분할 구조를 반복하고, 로딩이 200ms 미만으로 끝나면 스켈레톤 자체를 아예 띄우지 않는다.","visual_anatomy":["placeholder blocks","text lines","media rectangle","subtle shimmer optional","avatar placeholder circle for list rows","two-line text placeholder for list rows","trailing action placeholder for list rows"],"when_to_use":["콘텐츠 구조를 알고 있고 로딩 시간이 체감될 때","레이아웃 점프를 줄이고 싶을 때","모바일 리스트/피드 행이 로딩되는 동안 실제 행 구조를 미리 보여줄 때"],"anti_use":["매우 짧은 로딩에는 과하다","실제 구조와 다른 skeleton은 혼란을 준다","로딩이 200ms 미만으로 끝나면 아예 표시하지 않는다"],"prompt_phrases":["카드 목록 로딩 중에는 skeleton loader를 보여줘","이미지와 텍스트 자리표시자를 넣어줘","모바일 리스트 행 로딩에 아바타-텍스트-트레일링 스켈레톤을 반복해줘"]},{"id":"empty-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"빈 상태","aliases":["empty state","데이터 없음 화면"]},"en":{"name":"Empty state","aliases":["No data state"]},"one_liner":"보여줄 데이터가 없을 때 이유와 다음 행동을 안내하는 화면.","description":"아이콘, 짧은 문구, 보조 설명, 생성 버튼으로 빈 화면을 의미 있게 만든다.","visual_anatomy":["empty icon or illustration","title","explanation","optional action button"],"when_to_use":["검색 결과가 없거나 아직 데이터가 없을 때","사용자가 다음 행동을 알아야 할 때"],"anti_use":["오류 상태와 섞지 않는다","빈 화면을 아무 설명 없이 방치하지 않는다"],"prompt_phrases":["데이터가 없을 때 empty state를 보여줘","빈 목록에는 새 항목 만들기 버튼을 넣어줘"]},{"id":"validation-message","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"검증 메시지","aliases":["입력 오류 문구","validation error","helper text"]},"en":{"name":"Validation message","aliases":["Error message","Helper text"]},"one_liner":"입력값의 오류나 도움말을 필드 근처에서 알려주는 문구.","description":"어떤 값이 왜 잘못됐고 어떻게 고쳐야 하는지 입력 요소 바로 아래에 표시한다.","visual_anatomy":["field","error color","message text","optional error icon"],"when_to_use":["폼 입력값이 잘못됐거나 형식 안내가 필요할 때"],"anti_use":["오류를 필드와 떨어진 곳에만 표시하지 않는다","모호한 문구만 쓰지 않는다"],"prompt_phrases":["이메일 형식이 틀리면 validation message를 입력창 아래에 보여줘"]},{"id":"status-indicator","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"상태 표시","aliases":["status indicator","상태 점","presence"]},"en":{"name":"Status indicator","aliases":["Presence indicator","Status dot"]},"one_liner":"온라인, 성공, 오류 같은 상태를 작은 색상 표시로 보여주는 요소.","description":"점, 라벨, 색상으로 항목이나 사용자의 현재 상태를 빠르게 전달한다.","visual_anatomy":["colored dot","short label","optional outline or pulse"],"when_to_use":["서버 상태","사용자 접속 상태","처리 상태를 빠르게 구분할 때"],"anti_use":["색상만으로 의미를 전달하지 않는다","복잡한 설명은 alert나 detail text를 함께 쓴다"],"prompt_phrases":["온라인 상태를 초록색 status indicator로 표시해줘","서버 상태 옆에 상태 점을 붙여줘"]},{"id":"table","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"테이블","aliases":["표","data table"]},"en":{"name":"Table","aliases":["Data table"]},"one_liner":"행과 열로 구조화된 데이터를 보여주는 요소.","description":"같은 속성을 가진 여러 항목을 비교, 정렬, 스캔하게 한다.","visual_anatomy":["header row","columns","data rows","cell borders or dividers"],"when_to_use":["여러 항목의 속성을 비교해야 할 때","정렬이나 행 선택이 필요한 데이터 화면에서"],"anti_use":["모바일에서 열이 너무 많으면 카드나 list로 바꾼다","단순 텍스트 목록에는 list가 낫다"],"prompt_phrases":["사용자 목록을 data table로 보여줘","행과 열이 있는 테이블을 만들어줘"]},{"id":"avatar","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"아바타","aliases":["프로필 이미지","avatar"]},"en":{"name":"Avatar","aliases":["User avatar","Profile image"]},"one_liner":"사용자나 조직을 나타내는 작은 이미지 또는 이니셜.","description":"프로필 사진, 이니셜, fallback 색상으로 사람이나 계정을 식별한다.","visual_anatomy":["circular or rounded image","fallback initials","optional status badge"],"when_to_use":["사용자 목록","댓글","프로필 메뉴에서 사람을 빠르게 구분할 때"],"anti_use":["장식 이미지처럼 쓰지 않는다","의미 없는 랜덤 이미지는 혼란을 줄 수 있다"],"prompt_phrases":["댓글 옆에 avatar를 넣어줘","프로필 이미지가 없으면 이니셜을 보여줘"]},{"id":"metric-card","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"지표 카드","aliases":["통계 카드","KPI card","metric card"]},"en":{"name":"Metric card","aliases":["Stat card","KPI card"]},"one_liner":"핵심 숫자와 변화량을 카드 형태로 보여주는 데이터 요소.","description":"매출, 방문자, 전환율 같은 지표를 제목, 숫자, 증감 표시로 요약한다.","visual_anatomy":["label","large value","trend indicator","supporting text"],"when_to_use":["대시보드에서 중요한 지표를 빠르게 훑게 할 때"],"anti_use":["원인 분석이나 상세 데이터는 chart나 table을 함께 제공한다","너무 많은 지표 카드는 집중을 흐린다"],"prompt_phrases":["대시보드 상단에 metric card 4개를 배치해줘","방문자 수와 증감률을 지표 카드로 보여줘"]},{"id":"chart","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"차트","aliases":["그래프","chart"]},"en":{"name":"Chart","aliases":["Graph","Data visualization"]},"one_liner":"숫자 데이터를 시각적 형태로 보여주는 요소.","description":"막대, 선, 영역, 원형 등 데이터 관계에 맞는 형태로 추세나 비교를 표현한다.","visual_anatomy":["plot area","axes or labels","data marks","legend optional"],"when_to_use":["추세","비교","분포를 숫자보다 빠르게 이해하게 할 때"],"anti_use":["값이 한두 개뿐이면 metric card나 plain text가 낫다","장식용 차트는 피한다"],"prompt_phrases":["월별 매출을 line chart로 보여줘","카테고리별 비중을 bar chart로 비교해줘"]},{"id":"timeline","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"타임라인","aliases":["이력 목록","timeline"]},"en":{"name":"Timeline","aliases":["Activity timeline"]},"one_liner":"시간 순서대로 사건이나 활동을 보여주는 구조.","description":"점, 선, 시간 라벨, 이벤트 카드로 변경 이력이나 진행 과정을 표현한다.","visual_anatomy":["vertical line","event dots","timestamps","event content"],"when_to_use":["작업 이력","배송 상태","활동 로그처럼 순서가 중요한 데이터를 보여줄 때"],"anti_use":["순서가 중요하지 않은 항목은 list나 table이 낫다","너무 많은 이벤트는 필터가 필요하다"],"prompt_phrases":["주문 상태를 timeline으로 보여줘","활동 로그를 시간순 타임라인으로 정리해줘"]},{"id":"kanban","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"칸반","aliases":["kanban board","보드"]},"en":{"name":"Kanban","aliases":["Kanban board","Board"]},"one_liner":"항목을 상태별 열로 나눠 보여주는 보드 구조.","description":"할 일, 진행 중, 완료처럼 상태 column과 draggable card로 작업 흐름을 표현한다.","visual_anatomy":["columns","column headers","cards","drag handles optional"],"when_to_use":["작업이나 후보를 상태별로 이동시키며 관리할 때"],"anti_use":["정렬과 숫자 비교가 핵심이면 table이 낫다","항목 수가 너무 많으면 필터와 검색이 필요하다"],"prompt_phrases":["작업을 할 일 진행 중 완료 kanban board로 보여줘","카드를 상태별 열에 배치해줘"]},{"id":"calendar-view","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"캘린더 뷰","aliases":["달력 화면","calendar view"]},"en":{"name":"Calendar view","aliases":["Calendar"]},"one_liner":"날짜 격자 위에 일정이나 이벤트를 보여주는 화면.","description":"월, 주, 일 단위로 날짜와 이벤트를 배치해 시간 기반 정보를 탐색하게 한다.","visual_anatomy":["date grid","weekday header","event chips","current day highlight"],"when_to_use":["예약","일정","마감처럼 날짜 위치가 중요한 데이터를 보여줄 때"],"anti_use":["단순 날짜 선택은 date picker가 충분하다","이벤트가 적으면 list가 더 읽기 쉽다"],"prompt_phrases":["마감 일정을 calendar view로 보여줘","월간 달력에 이벤트 chip을 배치해줘"]},{"id":"tree-view","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"트리 뷰","aliases":["계층 목록","tree view"]},"en":{"name":"Tree view","aliases":["Tree","Hierarchical list"]},"one_liner":"폴더처럼 계층 구조를 펼치고 접어 보는 목록.","description":"부모와 자식 항목을 indentation, chevron, expanded state로 표현한다.","visual_anatomy":["nested rows","disclosure chevrons","indentation","selected row"],"when_to_use":["폴더","카테고리","문서 구조처럼 계층이 중요한 데이터를 탐색할 때"],"anti_use":["계층이 얕으면 list나 accordion이 더 단순하다","너무 깊은 구조는 검색이 필요하다"],"prompt_phrases":["파일 목록을 tree view로 보여줘","카테고리를 펼치고 접는 계층 목록으로 만들어줘"]},{"id":"description-list","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"설명 목록","aliases":["key value list","속성 목록"]},"en":{"name":"Description list","aliases":["Key-value list","Detail list"]},"one_liner":"이름과 값을 짝지어 상세 정보를 보여주는 목록.","description":"프로필, 주문 상세, 설정 요약처럼 속성명과 값을 나란히 표시한다.","visual_anatomy":["term label","value text","repeated rows","optional separators"],"when_to_use":["한 객체의 여러 속성을 읽기 쉽게 보여줄 때"],"anti_use":["여러 객체를 비교해야 하면 table이 낫다","긴 본문에는 일반 text layout이 낫다"],"prompt_phrases":["주문 상세를 key-value list로 보여줘","사용자 정보를 설명 목록으로 정리해줘"]},{"id":"icon","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"아이콘","aliases":["icon","심볼","그림 기호"]},"en":{"name":"Icon","aliases":["Symbol","Glyph"]},"one_liner":"행동, 상태, 대상을 작은 그림 기호로 표현하는 요소.","description":"텍스트를 보조하거나 공간이 좁은 곳에서 의미를 빠르게 전달한다.","visual_anatomy":["simple pictogram","consistent stroke or fill","optional label","accessible name when interactive"],"when_to_use":["반복되는 행동이나 상태를 빠르게 인식시킬 때","버튼이나 메뉴의 의미를 보조할 때"],"anti_use":["낯선 아이콘을 라벨 없이 단독으로 쓰지 않는다","장식 아이콘에 의미를 부여하지 않는다"],"prompt_phrases":["저장 버튼 옆에 save icon을 넣어줘","메뉴 항목마다 의미를 보여주는 아이콘을 붙여줘"]},{"id":"label","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"라벨","aliases":["label","이름표","필드명"]},"en":{"name":"Label","aliases":["Field label","Text label"]},"one_liner":"입력값이나 UI 요소가 무엇을 의미하는지 이름을 붙이는 짧은 텍스트.","description":"입력창, 스위치, 체크박스, 값 옆에 붙어 사용자가 목적을 이해하게 한다.","visual_anatomy":["short text","associated control","optional required mark","helper relationship"],"when_to_use":["입력 요소의 의미를 명확히 알려야 할 때","아이콘이나 값만으로 의미가 부족할 때"],"anti_use":["placeholder만으로 label을 대체하지 않는다","너무 긴 설명은 helper text로 분리한다"],"prompt_phrases":["입력창 위에 이름 label을 붙여줘","스위치 오른쪽에 알림 받기 라벨을 넣어줘"]},{"id":"divider","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"구분선","aliases":["divider","separator","분리선"]},"en":{"name":"Divider","aliases":["Separator","Rule"]},"one_liner":"관련 영역이나 항목 사이를 얇은 선으로 구분하는 요소.","description":"목록, 메뉴, 카드 내부에서 정보 덩어리의 경계를 시각적으로 만든다.","visual_anatomy":["thin horizontal or vertical line","spacing around line","low contrast color"],"when_to_use":["항목 사이의 경계를 가볍게 보여줄 때","섹션이 붙어 보여 혼란스러울 때"],"anti_use":["간격만으로 충분하면 선을 남발하지 않는다","너무 강한 색상으로 시선을 빼앗지 않는다"],"prompt_phrases":["설정 항목 사이에 divider를 넣어줘","카드 제목과 본문 사이를 얇은 구분선으로 나눠줘"]},{"id":"spacer","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"여백","aliases":["spacing","spacer","간격"]},"en":{"name":"Spacer","aliases":["Spacing","Gap"]},"one_liner":"요소 사이에 의도적인 빈 공간을 만들어 구조와 리듬을 잡는 요소.","description":"실제 보이는 컴포넌트는 아니지만 UI의 묶음, 위계, 읽기 흐름을 결정한다.","visual_anatomy":["empty space","consistent gap size","alignment relationship"],"when_to_use":["요소가 너무 붙어 보여 읽기 어려울 때","그룹 사이의 관계를 표현할 때"],"anti_use":["아무 의미 없이 큰 빈 공간을 만들지 않는다","반응형에서 여백이 콘텐츠를 밀어내지 않게 한다"],"prompt_phrases":["카드 사이 여백을 넉넉하게 줘","버튼 그룹과 본문 사이에 spacer를 넣어줘"]},{"id":"typography","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"타이포그래피","aliases":["typography","글자 스타일","텍스트 스타일"]},"en":{"name":"Typography","aliases":["Text style","Type scale"]},"one_liner":"제목, 본문, 캡션처럼 글자의 크기와 굵기, 위계를 정하는 체계.","description":"화면의 정보 우선순위를 글자 크기, 굵기, 줄간격으로 전달한다.","visual_anatomy":["heading text","body text","caption text","weight and size contrast"],"when_to_use":["정보의 위계를 명확히 보여줘야 할 때","같은 종류의 텍스트 스타일을 반복 적용할 때"],"anti_use":["너무 많은 글자 크기를 섞지 않는다","작은 영역에 hero 크기 글자를 쓰지 않는다"],"prompt_phrases":["제목 본문 캡션이 구분되는 typography scale을 적용해줘","카드 제목은 더 굵게 보여줘"]},{"id":"image","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"이미지","aliases":["image","사진","그림"]},"en":{"name":"Image","aliases":["Picture","Media image"]},"one_liner":"사진이나 그림을 화면 안에 표시하는 시각 요소.","description":"제품, 프로필, 콘텐츠 미리보기처럼 텍스트보다 시각 확인이 중요한 정보를 보여준다.","visual_anatomy":["image frame","aspect ratio","alt text meaning","optional caption"],"when_to_use":["사용자가 실제 모습이나 분위기를 확인해야 할 때","카드나 상세 화면의 시각 자료가 필요할 때"],"anti_use":["의미 없는 stock 이미지를 장식으로 남발하지 않는다","비율이 깨지거나 중요한 부분이 잘리지 않게 한다"],"prompt_phrases":["카드 상단에 상품 image를 넣어줘","16대9 비율의 썸네일 이미지를 보여줘"]},{"id":"logo","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"로고","aliases":["logo","브랜드 마크","product mark"]},"en":{"name":"Logo","aliases":["Brand mark","Product mark"]},"one_liner":"제품이나 브랜드를 식별하게 하는 고유한 시각 표시.","description":"헤더, 로그인 화면, 빈 상태, 문서 표지에서 제품 정체성을 알려준다.","visual_anatomy":["brand mark","optional wordmark","clear space","consistent size"],"when_to_use":["사용자가 어느 제품이나 조직에 있는지 알아야 할 때","첫 화면에서 브랜드를 식별시킬 때"],"anti_use":["작은 버튼 아이콘처럼 남용하지 않는다","주변 여백 없이 찌그러뜨리지 않는다"],"prompt_phrases":["헤더 왼쪽에 logo를 넣어줘","로그인 화면 상단에 브랜드 마크를 크게 배치해줘"]},{"id":"favicon","status":"draft","category":"structure","group":"structure-misc","ko":{"name":"파비콘","aliases":["favicon","브라우저 탭 아이콘","사이트 아이콘"]},"en":{"name":"Favicon","aliases":["Site icon","Browser tab icon"]},"one_liner":"브라우저 탭, 북마크, 검색 결과에서 사이트를 식별하게 하는 작은 아이콘.","description":"제품 로고를 아주 작은 크기에서도 알아볼 수 있게 단순화한 웹사이트 식별 자산이다.","visual_anatomy":["small icon","browser tab","bookmark context","simplified brand mark"],"when_to_use":["웹사이트나 웹앱을 배포할 때","탭이나 북마크에서 제품을 구분시켜야 할 때"],"anti_use":["복잡한 로고 원본을 그대로 축소하지 않는다","작은 크기에서 글자가 뭉개지면 쓰지 않는다"],"prompt_phrases":["브라우저 탭에 보이는 favicon을 바꿔줘","작은 크기에서도 보이는 사이트 아이콘을 만들어줘"]},{"id":"thumbnail","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"썸네일","aliases":["thumbnail","미리보기 이미지","preview image"]},"en":{"name":"Thumbnail","aliases":["Preview image","Cover image"]},"one_liner":"콘텐츠를 빠르게 알아보게 하는 작은 미리보기 이미지.","description":"목록이나 카드에서 영상, 글, 파일, 상품의 대표 장면을 작게 보여준다.","visual_anatomy":["small image frame","fixed aspect ratio","optional overlay icon","fallback state"],"when_to_use":["콘텐츠가 시각적으로 구분될 때","목록에서 항목을 빠르게 찾게 할 때"],"anti_use":["모든 항목이 비슷한 이미지라면 정보 가치가 낮다","너무 작아 식별이 안 되면 의미가 없다"],"prompt_phrases":["게시글 카드 왼쪽에 thumbnail을 넣어줘","영상 썸네일 위에 재생 아이콘을 올려줘"]},{"id":"open-graph-image","status":"draft","category":"structure","group":"structure-misc","ko":{"name":"공유 미리보기 이미지","aliases":["Open Graph image","OG image","링크 썸네일","social preview image","link preview image"]},"en":{"name":"Open Graph image","aliases":["OG image","Social preview image","Link preview image"]},"one_liner":"링크를 공유했을 때 메신저나 SNS 카드에 표시되는 대표 이미지.","description":"페이지 제목과 설명만으로 부족한 맥락을 보완해 공유 카드에서 사이트나 콘텐츠를 한눈에 알아보게 한다.","visual_anatomy":["preview image canvas","title area","brand mark","page description","share card crop"],"when_to_use":["사이트 링크를 카카오톡","Slack","X","Facebook 등에 공유할 때","콘텐츠 대표 이미지를 통제하고 싶을 때"],"anti_use":["일반 썸네일과 혼동해 카드 내부 이미지로만 취급하지 않는다","너무 작은 글자나 잘릴 핵심 정보를 넣지 않는다"],"prompt_phrases":["링크 공유할 때 보이는 OG image를 추가해줘","카카오톡에 공유되는 social preview image를 만들어줘"],"related":[{"id":"thumbnail","relation":"compare","note":"thumbnail은 콘텐츠 목록 안의 작은 미리보기이고 OG image는 외부 공유 카드용 메타 이미지다"}]},{"id":"password-field","status":"draft","category":"input","group":"input-text","ko":{"name":"비밀번호 입력창","aliases":["password input","password field","비번 입력"]},"en":{"name":"Password field","aliases":["Password input","Secure text field"]},"one_liner":"입력한 문자를 가려서 비밀번호를 받는 입력 요소.","description":"보통 눈 아이콘으로 표시/숨김을 전환하고, 오류나 보안 조건 안내를 함께 보여준다.","visual_anatomy":["masked characters","secure input container","show-hide icon","optional validation text"],"when_to_use":["비밀번호나 민감한 인증 값을 입력받을 때"],"anti_use":["일반 텍스트 값에 쓰지 않는다","표시 전환 없이 복잡한 비밀번호 조건만 강요하지 않는다"],"prompt_phrases":["비밀번호를 입력하는 password field를 넣어줘","눈 아이콘으로 비밀번호 보기 전환을 만들어줘"]},{"id":"number-input","status":"draft","category":"input","group":"input-text","ko":{"name":"숫자 입력창","aliases":["number input","numeric field","수량 입력"]},"en":{"name":"Number input","aliases":["Numeric input","Number field"]},"one_liner":"숫자 값을 직접 입력하거나 증감 버튼으로 조절하는 입력 요소.","description":"수량, 나이, 금액처럼 숫자 형식이 필요한 값을 받는다.","visual_anatomy":["numeric value","input box","optional stepper buttons","min-max helper"],"when_to_use":["정확한 숫자를 입력받아야 할 때","범위나 단위가 명확한 값일 때"],"anti_use":["대략적인 값 조절에는 slider가 더 적합하다","전화번호처럼 숫자 모양의 문자열은 text field가 낫다"],"prompt_phrases":["수량을 입력하는 number input을 넣어줘","플러스 마이너스 버튼으로 숫자를 조절하게 해줘"]},{"id":"otp-input","status":"draft","category":"input","group":"input-pickers","ko":{"name":"인증번호 입력","aliases":["OTP 입력","verification code","코드 입력"]},"en":{"name":"OTP input","aliases":["One-time code input","Verification code input"]},"one_liner":"일회용 인증번호를 여러 칸에 나누어 입력받는 요소.","description":"SMS, 이메일, 2단계 인증 코드처럼 짧은 숫자/문자 코드를 빠르게 입력하게 한다.","visual_anatomy":["multiple small input boxes","focused box","fixed code length","paste behavior"],"when_to_use":["인증번호나 2FA 코드를 받을 때","코드 길이가 짧고 고정되어 있을 때"],"anti_use":["긴 문자열이나 자유 입력에는 쓰지 않는다","복사 붙여넣기를 막지 않는다"],"prompt_phrases":["6자리 인증번호 OTP input을 넣어줘","각 숫자가 한 칸씩 들어가는 코드 입력 UI를 만들어줘"]},{"id":"autocomplete","status":"draft","category":"input","group":"input-search-command","ko":{"name":"자동완성","aliases":["autocomplete","자동 추천","입력 제안"]},"en":{"name":"Autocomplete","aliases":["Typeahead","Autosuggest"]},"one_liner":"사용자가 입력하는 동안 관련 후보를 추천하는 입력 패턴.","description":"검색어, 주소, 사용자 이름처럼 후보가 많은 값을 빠르게 완성하게 돕는다.","visual_anatomy":["text input","suggestion list","highlighted match","keyboard selection"],"when_to_use":["입력 후보를 예측할 수 있을 때","사용자가 긴 값을 빠르게 입력해야 할 때"],"anti_use":["추천 품질이 낮으면 오히려 방해가 된다","선택만 필요한 경우 combobox와 구분한다"],"prompt_phrases":["검색어를 입력하면 autocomplete suggestions가 나오게 해줘","도시 이름 자동완성을 붙여줘"]},{"id":"search-suggestions","status":"draft","category":"input","group":"input-search-command","ko":{"name":"검색 제안","aliases":["search suggestions","추천 검색어","자동 추천 목록"]},"en":{"name":"Search suggestions","aliases":["Suggested searches","Query suggestions"]},"one_liner":"검색창 아래에 추천 검색어나 최근 검색어를 보여주는 목록.","description":"사용자가 무엇을 찾을지 빠르게 고르게 하고 오타나 빈 검색 상태를 줄인다.","visual_anatomy":["search field","suggestion rows","icons or history marker","highlighted query"],"when_to_use":["검색어 후보가 많거나 최근 검색 기록을 활용할 때","사용자가 검색 범위를 잘 모를 때"],"anti_use":["개인정보가 담긴 최근 검색어를 무심코 노출하지 않는다","결과 목록과 시각적으로 혼동시키지 않는다"],"prompt_phrases":["검색창 아래에 search suggestions를 보여줘","최근 검색어와 추천 검색어를 나눠서 표시해줘"],"related":[{"id":"command-palette","relation":"compare","note":"문서 사이트의 Cmd/Ctrl+K 검색 오버레이는 command-palette 셸을 쓰면서 결과를 섹션별로 그룹핑한다 — 그룹 헤더로 나뉜 결과 목록이라는 점이 여기의 추천/최근 검색어 그룹핑과 같은 축이다."}]},{"id":"inline-edit","status":"draft","category":"input","group":"input-editing","ko":{"name":"인라인 편집","aliases":["inline edit","바로 수정","직접 편집"]},"en":{"name":"Inline edit","aliases":["Inline editing","Editable text"]},"one_liner":"표시된 텍스트를 같은 자리에서 바로 입력 상태로 바꾸는 패턴.","description":"제목, 이름, 라벨처럼 짧은 값을 상세 화면 이동 없이 수정하게 한다.","visual_anatomy":["display text","edit affordance","focused input state","save or confirm behavior"],"when_to_use":["짧은 텍스트를 빠르게 수정해야 할 때","목록이나 상세 화면 맥락을 유지해야 할 때"],"anti_use":["복잡한 폼이나 검증이 많은 값에는 별도 편집 화면이 낫다","편집 가능 여부가 숨겨지면 안 된다"],"prompt_phrases":["제목을 클릭하면 inline edit로 바로 수정되게 해줘","이름 옆에 연필 아이콘을 넣어줘"],"related":[{"id":"data-grid","relation":"compare","note":"inline edit는 제목·이름 같은 단일 필드를 그 자리에서 바로 고치는 패턴이고, data grid는 셀 단위 편집에 키보드 탐색(Tab/Enter/Escape)과 행/셀 단위 저장 상태 표시까지 포함하는 더 넓은 그리드 전체의 편집 계약이다"}]},{"id":"rich-text-editor","status":"draft","category":"input","group":"input-editing","ko":{"name":"리치 텍스트 에디터","aliases":["rich text editor","WYSIWYG","서식 편집기"]},"en":{"name":"Rich text editor","aliases":["WYSIWYG editor","Formatting editor"]},"one_liner":"굵게, 링크, 목록 같은 서식을 포함해 글을 작성하는 입력 영역.","description":"본문 작성, 댓글, 문서 편집처럼 텍스트에 구조와 스타일을 넣어야 할 때 쓴다.","visual_anatomy":["formatting toolbar","editable area","selection state","placeholder"],"when_to_use":["사용자가 긴 글에 서식이나 링크를 넣어야 할 때"],"anti_use":["단순 메모에는 textarea가 더 가볍다","저장 형식과 접근성을 고려하지 않고 붙이지 않는다"],"prompt_phrases":["본문 작성용 rich text editor를 넣어줘","굵게 링크 목록 버튼이 있는 에디터를 만들어줘"]},{"id":"color-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"색상 선택기","aliases":["color picker","컬러 피커","색 선택"]},"en":{"name":"Color picker","aliases":["Color input","Swatch picker"]},"one_liner":"색상 값을 팔레트, 스와치, 입력값으로 고르는 요소.","description":"테마 색, 태그 색, 그래픽 편집처럼 시각적 색 선택이 필요한 곳에 쓴다.","visual_anatomy":["color swatch","palette grid","selected color","optional hex input"],"when_to_use":["사용자가 색상을 직접 선택해야 할 때","제한된 브랜드 색 중 하나를 골라야 할 때"],"anti_use":["색상 선택이 제품 사용에 불필요하면 복잡도를 늘리지 않는다","색상만으로 상태 의미를 정하지 않는다"],"prompt_phrases":["태그 색상을 고르는 color picker를 넣어줘","스와치 팔레트와 hex 입력을 함께 보여줘"]},{"id":"listbox","status":"draft","category":"selection","group":"selection-options","ko":{"name":"리스트박스","aliases":["listbox","선택 목록","옵션 리스트"]},"en":{"name":"Listbox","aliases":["Selection list","Option list"]},"one_liner":"여러 옵션을 펼쳐진 목록으로 보여주고 선택하게 하는 요소.","description":"select와 달리 목록이 화면에 직접 보이며 단일 또는 다중 선택을 지원할 수 있다.","visual_anatomy":["visible option list","selected option","focus highlight","optional multi-select marks"],"when_to_use":["옵션을 항상 보여줘야 할 때","키보드로 목록 선택이 중요할 때"],"anti_use":["공간이 좁으면 select가 낫다","단순 텍스트 목록에는 선택 상태를 억지로 붙이지 않는다"],"prompt_phrases":["옵션을 펼쳐진 listbox로 보여줘","선택된 항목이 강조되는 선택 목록을 만들어줘"]},{"id":"menu-bar","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"메뉴바","aliases":["menubar","상단 메뉴","앱 메뉴"]},"en":{"name":"Menubar","aliases":["Menu bar","Application menu"]},"one_liner":"여러 메뉴를 가로로 배치하고 각 메뉴에서 하위 명령을 여는 구조.","description":"데스크톱 앱처럼 파일, 편집, 보기 같은 명령 묶음을 제공할 때 쓴다.","visual_anatomy":["horizontal menu items","active menu","dropdown submenu","keyboard navigation"],"when_to_use":["명령이 많고 분류가 명확한 생산성 도구에서","데스크톱 앱과 비슷한 조작이 필요할 때"],"anti_use":["일반 웹사이트 내비게이션을 ARIA menubar처럼 과하게 만들지 않는다","모바일에서는 단순 메뉴가 낫다"],"prompt_phrases":["상단에 파일 편집 보기 menubar를 넣어줘","메뉴를 열면 하위 명령이 나오게 해줘"]},{"id":"bottom-navigation","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"하단 내비게이션","aliases":["bottom navigation","bottom nav","하단 탭"]},"en":{"name":"Bottom navigation","aliases":["Bottom nav","Navigation bar"]},"one_liner":"모바일 화면 하단에 주요 목적지를 아이콘과 라벨로 배치한 내비게이션.","description":"앱의 최상위 섹션을 엄지로 쉽게 전환하게 한다.","visual_anatomy":["bottom bar","destination icons","labels","active indicator","optional badge"],"when_to_use":["모바일 앱의 주요 섹션이 3-5개일 때","어디서든 최상위 목적지로 이동해야 할 때"],"anti_use":["일회성 행동이나 설정을 목적지로 넣지 않는다","항목이 너무 많으면 숨김 메뉴를 검토한다"],"prompt_phrases":["모바일 화면 아래에 bottom navigation을 넣어줘","홈 검색 프로필 3개 탭을 하단에 배치해줘"]},{"id":"tab-bar","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"탭 바","aliases":["tab bar","모바일 탭바","iOS 탭"]},"en":{"name":"Tab bar","aliases":["iOS tab bar","Mobile tab bar"]},"one_liner":"앱의 여러 섹션을 전환하는 하단 또는 상단 탭형 내비게이션.","description":"각 탭은 앱의 동등한 주요 영역으로 이동하며 아이콘과 라벨을 함께 쓰는 경우가 많다.","visual_anatomy":["bar container","tab icons","tab labels","selected tab","optional badge"],"when_to_use":["앱의 주요 섹션을 빠르게 오갈 때","현재 선택된 섹션을 계속 보여줘야 할 때"],"anti_use":["서로 관련 없는 행동 버튼을 탭으로 넣지 않는다","섹션이 너무 많으면 sidebar나 more 탭을 검토한다"],"prompt_phrases":["하단에 tab bar를 넣고 홈 검색 설정 탭을 보여줘","선택된 탭은 아이콘과 라벨을 강조해줘"]},{"id":"filter-chip","status":"draft","category":"selection","group":"selection-options","ko":{"name":"필터 칩","aliases":["filter chip","필터 태그","선택 칩"]},"en":{"name":"Filter chip","aliases":["Filter tag","Choice chip"]},"one_liner":"조건을 작은 칩 형태로 켜고 끄며 목록을 필터링하는 요소.","description":"카테고리, 상태, 태그 같은 여러 조건을 빠르게 선택하거나 해제하게 한다.","visual_anatomy":["pill shape","label","selected state","optional check or close icon"],"when_to_use":["필터 조건이 짧고 여러 개일 때","사용자가 조건을 빠르게 바꾸게 할 때"],"anti_use":["복잡한 범위나 다단 조건은 filter panel이 낫다","칩이 너무 많으면 스캔이 어려워진다"],"prompt_phrases":["목록 위에 filter chip들을 넣어줘","선택된 필터 칩에는 체크 아이콘을 보여줘"]},{"id":"toggle-button","status":"draft","category":"selection","group":"selection-options","ko":{"name":"토글 버튼","aliases":["toggle button","선택 버튼","pressed button"]},"en":{"name":"Toggle button","aliases":["Pressed button","Selectable button"]},"one_liner":"버튼처럼 보이지만 눌린 상태를 유지해 선택 여부를 표현하는 요소.","description":"굵게, 즐겨찾기, 보기 옵션처럼 on/off 상태를 버튼 형태로 보여준다.","visual_anatomy":["button container","icon or label","pressed state","optional group"],"when_to_use":["명령 버튼과 선택 상태가 연결되어 있을 때","툴바에서 기능을 켜고 끌 때"],"anti_use":["즉시 적용되는 설정은 switch가 더 명확할 수 있다","여러 독립 옵션은 checkbox와 비교한다"],"prompt_phrases":["즐겨찾기를 켜는 toggle button을 넣어줘","선택되면 눌린 상태가 유지되게 해줘"]},{"id":"disclosure","status":"draft","category":"selection","group":"selection-options","ko":{"name":"펼침 버튼","aliases":["disclosure","show hide","접기 펼치기"]},"en":{"name":"Disclosure","aliases":["Show-hide","Disclosure button"]},"one_liner":"버튼을 눌러 관련 내용을 펼치거나 접는 패턴.","description":"아코디언보다 단순하게 한 덩어리의 추가 정보를 열고 닫을 때 쓴다.","visual_anatomy":["trigger button","chevron","expanded state","revealed content"],"when_to_use":["보조 정보를 사용자가 필요할 때만 보게 할 때","설정의 세부 옵션을 접어둘 때"],"anti_use":["핵심 정보를 숨기는 용도로 쓰지 않는다","여러 항목을 체계적으로 접으려면 accordion을 검토한다"],"prompt_phrases":["상세 옵션을 disclosure로 접어둬","더보기 버튼을 누르면 설명이 펼쳐지게 해줘"]},{"id":"anchor-nav","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"앵커 내비게이션","aliases":["anchor nav","목차 링크","섹션 내비게이션"]},"en":{"name":"Anchor navigation","aliases":["In-page navigation","Table of contents nav"]},"one_liner":"같은 페이지 안의 섹션으로 이동하는 링크 목록.","description":"긴 문서나 설정 화면에서 현재 섹션을 보여주고 클릭하면 해당 위치로 스크롤한다. 문서 사이트의 우측 고정 rail은 IntersectionObserver 기반 scroll spy로 스크롤 위치에 따라 활성 섹션 항목을 자동으로 강조하는 형태로 자주 쓰인다.","visual_anatomy":["section links","active section","sticky side or top area","anchor targets","scroll-spy active highlight"],"when_to_use":["한 페이지가 길고 섹션이 명확할 때","사용자가 원하는 부분으로 바로 이동해야 할 때"],"anti_use":["페이지가 짧으면 불필요하다","앱의 주요 페이지 이동과 섞지 않는다"],"prompt_phrases":["문서 왼쪽에 anchor navigation을 넣어줘","스크롤 위치에 따라 현재 섹션을 강조해줘"]},{"id":"back-button","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"뒤로가기 버튼","aliases":["back button","이전 버튼","뒤로"]},"en":{"name":"Back button","aliases":["Back navigation","Previous button"]},"one_liner":"이전 화면이나 상위 화면으로 돌아가게 하는 내비게이션 버튼.","description":"상세 화면, 설정 하위 화면, 모바일 내비게이션에서 현재 흐름을 되돌린다.","visual_anatomy":["left arrow icon","optional label","top bar placement","navigation target"],"when_to_use":["사용자가 상세나 하위 화면에서 원래 위치로 돌아가야 할 때"],"anti_use":["취소나 닫기 행동과 의미를 섞지 않는다","브라우저 뒤로가기와 충돌하지 않게 한다"],"prompt_phrases":["상단 왼쪽에 back button을 넣어줘","뒤로가기 화살표와 이전 라벨을 보여줘"]},{"id":"navigation-bar","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"내비게이션 바","aliases":["navbar","nav bar","상단 메뉴"]},"en":{"name":"Navigation bar","aliases":["Navbar","Nav bar"]},"one_liner":"주요 페이지나 섹션으로 이동하는 링크를 한 줄로 배치한 영역.","description":"웹사이트나 앱 상단에서 브랜드, 메뉴, 행동 버튼을 함께 담는 경우가 많다.","visual_anatomy":["brand area","navigation links","active link","optional actions"],"when_to_use":["여러 주요 페이지를 반복적으로 이동해야 할 때","현재 섹션을 상단에서 보여줘야 할 때"],"anti_use":["명령 메뉴와 혼동하지 않는다","너무 많은 링크는 grouping이나 sidebar를 검토한다"],"prompt_phrases":["상단에 logo와 메뉴 링크가 있는 navigation bar를 넣어줘","현재 페이지 메뉴를 강조해줘"]},{"id":"button-group","status":"draft","category":"action","group":"action-buttons","ko":{"name":"버튼 그룹","aliases":["button group","액션 그룹","버튼 묶음"]},"en":{"name":"Button group","aliases":["Action group","Grouped buttons"]},"one_liner":"관련된 여러 버튼을 한 덩어리로 배치한 요소.","description":"저장/취소, 정렬/필터, 보기 전환처럼 연결된 행동을 가까이 묶는다.","visual_anatomy":["adjacent buttons","shared alignment","primary-secondary ordering","consistent spacing"],"when_to_use":["관련 행동을 한눈에 비교하고 선택하게 할 때","폼 하단의 제출과 취소를 함께 둘 때"],"anti_use":["서로 관련 없는 행동을 한 그룹으로 묶지 않는다","너무 많은 버튼을 한 줄에 밀어 넣지 않는다"],"prompt_phrases":["저장 취소 버튼을 button group으로 묶어줘","오른쪽 아래에 액션 버튼 그룹을 배치해줘"]},{"id":"copy-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"복사 버튼","aliases":["copy button","클립보드 버튼","복사 액션"]},"en":{"name":"Copy button","aliases":["Clipboard button","Copy action"]},"one_liner":"텍스트나 값을 클립보드에 복사하는 버튼.","description":"코드, 링크, API 키, 초대 URL 옆에 배치하고 복사 결과를 피드백으로 알려준다.","visual_anatomy":["copy icon","button hit area","copied state","toast or inline feedback"],"when_to_use":["사용자가 값을 다른 곳에 붙여넣어야 할 때","긴 텍스트를 직접 선택하기 어렵게 만들지 않을 때"],"anti_use":["복사 대상이 불명확하면 쓰지 않는다","복사 완료 피드백 없이 조용히 끝내지 않는다"],"prompt_phrases":["초대 링크 옆에 copy button을 넣어줘","복사되면 copied 상태와 toast를 보여줘"]},{"id":"download-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"다운로드 버튼","aliases":["download button","내려받기","파일 저장"]},"en":{"name":"Download button","aliases":["Download action","Save file button"]},"one_liner":"파일이나 데이터를 사용자의 기기로 내려받게 하는 버튼.","description":"PDF, CSV, 이미지, 첨부파일 다운로드처럼 결과물을 저장하는 행동에 쓴다.","visual_anatomy":["download icon","action label","file type hint","optional loading state"],"when_to_use":["사용자가 파일을 저장해야 할 때","내보내기 결과가 하나로 명확할 때"],"anti_use":["여러 형식 중 선택해야 하면 split button이나 menu를 검토한다","진행 시간이 길면 loading feedback을 붙인다"],"prompt_phrases":["우측 상단에 PDF download button을 넣어줘","CSV 내려받기 버튼에 다운로드 아이콘을 붙여줘"]},{"id":"share-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"공유 버튼","aliases":["share button","공유하기","share action"]},"en":{"name":"Share button","aliases":["Share action","Send button"]},"one_liner":"링크나 콘텐츠를 다른 사람이나 앱으로 보내는 버튼.","description":"공유 시트, 링크 복사, SNS 전송 같은 후속 옵션을 열 수 있다.","visual_anatomy":["share icon","button label","optional share sheet","success feedback"],"when_to_use":["사용자가 콘텐츠를 외부로 전달해야 할 때","링크 공유가 핵심 행동일 때"],"anti_use":["내부 저장이나 내보내기와 혼동하지 않는다","공유 권한이나 공개 범위를 숨기지 않는다"],"prompt_phrases":["게시글 카드에 share button을 넣어줘","공유 버튼을 누르면 공유 옵션 sheet가 열리게 해줘"]},{"id":"close-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"닫기 버튼","aliases":["close button","X 버튼","dismiss"]},"en":{"name":"Close button","aliases":["Dismiss button","X button"]},"one_liner":"모달, 배너, 패널 같은 임시 UI를 닫는 버튼.","description":"X 아이콘으로 표현되는 경우가 많고 현재 작업을 종료하거나 패널을 숨긴다.","visual_anatomy":["x icon","button hit area","top corner placement","accessible label"],"when_to_use":["사용자가 오버레이나 알림을 닫을 수 있어야 할 때"],"anti_use":["저장되지 않은 변경을 조용히 버리지 않는다","뒤로가기와 닫기의 의미를 섞지 않는다"],"prompt_phrases":["모달 오른쪽 위에 close button을 넣어줘","배너 끝에 닫기 X 버튼을 붙여줘"]},{"id":"overflow-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"더보기 버튼","aliases":["overflow button","kebab menu","more button"]},"en":{"name":"Overflow button","aliases":["More button","Kebab menu button"]},"one_liner":"추가 행동을 숨긴 메뉴로 여는 점 세 개 버튼.","description":"카드나 행 오른쪽에서 편집, 삭제, 복사 같은 덜 중요한 명령을 모아 연다.","visual_anatomy":["three-dot icon","button hit area","anchored menu","secondary actions"],"when_to_use":["공간이 좁고 보조 행동을 숨겨야 할 때","항목별 추가 메뉴가 필요할 때"],"anti_use":["주요 행동을 더보기 안에 숨기지 않는다","메뉴 항목이 하나뿐이면 직접 버튼이 낫다"],"prompt_phrases":["카드 오른쪽에 overflow button을 넣어줘","점 세 개 버튼을 누르면 편집 삭제 메뉴가 나오게 해줘"]},{"id":"top-app-bar","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"상단 앱 바","aliases":["top app bar","app bar","앱 상단바"]},"en":{"name":"Top app bar","aliases":["App bar","Top bar"]},"one_liner":"화면 상단에서 제목, 내비게이션, 주요 행동을 담는 앱 구조 요소.","description":"모바일/앱 화면에서 뒤로가기, 화면 제목, 검색이나 더보기 같은 행동을 배치한다.","visual_anatomy":["top bar container","navigation icon","title","action icons"],"when_to_use":["현재 화면의 제목과 주요 행동을 계속 보여줘야 할 때","앱 화면 간 이동이 있을 때"],"anti_use":["브랜드 웹사이트의 복잡한 전역 메뉴와 혼동하지 않는다","행동 아이콘을 너무 많이 넣지 않는다"],"prompt_phrases":["상단에 top app bar를 넣고 제목과 더보기 아이콘을 보여줘","앱 화면 상단바에 뒤로가기 버튼을 넣어줘"],"related":[{"id":"large-title-header","relation":"compare","note":"스크롤 시 바를 보이거나 숨기는 show/hide 규칙은 top-app-bar 자체의 일반 동작이며, large-title-header의 큰 제목 접힘과는 별개다. 스크린리더 활성 시에는 숨기지 않는 예외가 두 항목 모두에 적용된다."}]},{"id":"section","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"섹션","aliases":["section","화면 구역","콘텐츠 영역"]},"en":{"name":"Section","aliases":["Page section","Content section"]},"one_liner":"한 주제나 기능 단위를 묶는 화면의 큰 구역.","description":"제목, 설명, 콘텐츠 묶음을 함께 배치해 페이지를 읽기 쉬운 덩어리로 나눈다.","visual_anatomy":["section heading","supporting text optional","grouped content","vertical spacing"],"when_to_use":["한 화면에 여러 주제가 있을 때","콘텐츠를 스캔 가능한 덩어리로 나눌 때"],"anti_use":["카드처럼 과하게 테두리를 씌우지 않는다","너무 작은 요소마다 섹션을 만들지 않는다"],"prompt_phrases":["설정 화면을 여러 section으로 나눠줘","각 섹션에는 제목과 관련 카드들을 배치해줘"]},{"id":"container","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"컨테이너","aliases":["container","wrapper","내용 폭"]},"en":{"name":"Container","aliases":["Wrapper","Content container"]},"one_liner":"콘텐츠의 최대 폭과 좌우 여백을 잡아주는 레이아웃 영역.","description":"넓은 화면에서도 내용이 너무 퍼지지 않게 하고 정렬 기준을 만든다.","visual_anatomy":["max-width boundary","horizontal padding","centered content","responsive width"],"when_to_use":["페이지 전체 콘텐츠를 일정 폭 안에 정리할 때","데스크톱에서 읽기 폭을 제한해야 할 때"],"anti_use":["모든 작은 요소에 중첩 컨테이너를 만들지 않는다","데이터 테이블처럼 넓이가 필요한 콘텐츠를 억지로 좁히지 않는다"],"prompt_phrases":["본문을 가운데 정렬된 container 안에 넣어줘","최대 폭이 있는 콘텐츠 컨테이너를 만들어줘"]},{"id":"hero","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"히어로 영역","aliases":["hero","hero section","메인 비주얼"]},"en":{"name":"Hero section","aliases":["Hero","Lead section"]},"one_liner":"페이지 첫 화면에서 핵심 메시지와 대표 행동을 크게 보여주는 영역.","description":"랜딩 페이지나 제품 소개에서 제목, 설명, 주요 버튼, 대표 이미지를 가장 먼저 배치한다.","visual_anatomy":["large headline","supporting copy","primary action","hero image or media"],"when_to_use":["첫 화면에서 제품이나 제안의 핵심을 바로 전달해야 할 때"],"anti_use":["작업형 도구나 대시보드 첫 화면에 불필요하게 크게 만들지 않는다","실제 콘텐츠를 가리지 않는다"],"prompt_phrases":["첫 화면에 hero section을 만들고 제품 이름과 시작 버튼을 넣어줘","히어로 영역 배경에 실제 제품 이미지를 보여줘"]},{"id":"filter-bar","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"필터 바","aliases":["filter bar","검색 필터 영역","필터 툴바"]},"en":{"name":"Filter bar","aliases":["Filter toolbar","Search and filter bar"]},"one_liner":"목록 위에서 검색, 필터, 정렬 조건을 한 줄로 조작하는 영역.","description":"데이터 목록이나 카드 그리드의 결과를 좁히는 조건들을 모아 보여준다.","visual_anatomy":["search input","filter controls","sort control","active filter count"],"when_to_use":["목록 데이터가 많고 사용자가 조건으로 좁혀야 할 때"],"anti_use":["항목이 적으면 과하다","복잡한 필터는 별도 panel이나 drawer로 분리한다"],"prompt_phrases":["테이블 위에 search와 filter chip이 있는 filter bar를 넣어줘","목록 상단에 필터 바와 정렬 선택을 배치해줘"]},{"id":"sort-control","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"정렬 컨트롤","aliases":["sort control","sort dropdown","정렬 선택"]},"en":{"name":"Sort control","aliases":["Sort dropdown","Sort selector"]},"one_liner":"목록이나 테이블의 표시 순서를 바꾸는 선택 요소.","description":"최신순, 이름순, 가격순처럼 사용자가 데이터를 원하는 기준으로 재배열하게 한다.","visual_anatomy":["sort label","selected criterion","direction indicator","dropdown or button"],"when_to_use":["사용자가 목록 순서를 바꿔 탐색해야 할 때","여러 정렬 기준이 의미 있을 때"],"anti_use":["정렬 기준이 하나뿐이면 노출하지 않는다","필터와 정렬의 의미를 섞지 않는다"],"prompt_phrases":["목록 오른쪽에 sort control을 넣어줘","최신순 인기순을 고르는 정렬 드롭다운을 만들어줘"]},{"id":"data-grid","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"데이터 그리드","aliases":["data grid","고급 테이블","spreadsheet grid"]},"en":{"name":"Data grid","aliases":["Interactive grid","Spreadsheet grid"]},"one_liner":"행과 열 데이터를 선택, 편집, 정렬할 수 있는 고급 표 형태.","description":"단순 table보다 상호작용이 많고 키보드 탐색, 셀 선택, 대량 데이터 조작을 포함한다.","visual_anatomy":["column headers","row headers optional","selected cell","grid lines","keyboard focus"],"when_to_use":["대량 데이터를 표 안에서 탐색하거나 편집해야 할 때"],"anti_use":["단순 읽기용 데이터에는 table이 낫다","모바일에서는 복잡도가 크게 올라간다"],"prompt_phrases":["셀 선택이 가능한 data grid를 넣어줘","행 선택과 컬럼 정렬이 되는 고급 테이블을 만들어줘"],"related":[{"id":"inline-edit","relation":"compare","note":"data grid는 키보드 탐색과 셀/행 단위 저장 상태를 포함하는 그리드 전체의 편집 계약이고, inline edit는 제목·이름 같은 단일 필드를 그 자리에서 바로 고치는 더 가벼운 패턴이다"}]},{"id":"legend","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"범례","aliases":["legend","차트 범례","색상 설명"]},"en":{"name":"Legend","aliases":["Chart legend","Key"]},"one_liner":"차트나 지도에서 색상, 선, 기호가 무엇을 뜻하는지 설명하는 요소.","description":"여러 데이터 시리즈를 구분하고 사용자가 시각 부호의 의미를 해석하게 돕는다.","visual_anatomy":["color swatches","series labels","marker shapes","optional toggle behavior"],"when_to_use":["차트에 여러 색상이나 시리즈가 있을 때","색상 의미를 명확히 알려야 할 때"],"anti_use":["라벨을 직접 붙일 수 있으면 불필요할 수 있다","색상만으로 의미를 전달하지 않는다"],"prompt_phrases":["차트 아래에 legend를 넣어줘","색상별 범례로 매출과 비용을 구분해줘"]},{"id":"chart-axis","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"차트 축","aliases":["axis","x축","y축"]},"en":{"name":"Chart axis","aliases":["Axis","X-axis","Y-axis"]},"one_liner":"차트에서 값의 기준과 범위를 보여주는 가로·세로 기준선.","description":"데이터 위치가 어떤 값이나 범주를 의미하는지 눈금과 라벨로 설명한다.","visual_anatomy":["axis line","tick marks","tick labels","axis title optional"],"when_to_use":["숫자 규모나 범주 위치를 읽어야 하는 차트에서"],"anti_use":["작은 sparkline처럼 추세만 보여줄 때는 축을 줄일 수 있다","눈금이 너무 많으면 읽기 어렵다"],"prompt_phrases":["라인 차트에 x-axis와 y-axis 라벨을 넣어줘","축 눈금이 보이는 bar chart를 만들어줘"]},{"id":"error-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"오류 상태","aliases":["error state","실패 화면","오류 UI"]},"en":{"name":"Error state","aliases":["Failure state","Error UI"]},"one_liner":"작업이나 데이터 로딩이 실패했을 때 원인과 복구 행동을 보여주는 상태 화면.","description":"오류 메시지, 재시도 버튼, 대체 행동을 함께 제공해 사용자가 막히지 않게 한다.","visual_anatomy":["error icon","clear message","recovery action","optional detail text"],"when_to_use":["요청 실패","권한 문제","네트워크 오류처럼 사용자가 알아야 하는 실패가 발생했을 때"],"anti_use":["기술적인 에러 코드만 보여주지 않는다","사용자가 할 수 있는 행동 없이 막아두지 않는다"],"prompt_phrases":["데이터 로딩 실패 시 error state를 보여줘","재시도 버튼이 있는 오류 화면을 만들어줘"]},{"id":"success-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"성공 상태","aliases":["success state","완료 화면","성공 UI"]},"en":{"name":"Success state","aliases":["Completion state","Success UI"]},"one_liner":"작업이 성공적으로 끝났음을 확인시켜 주는 상태 화면이나 메시지.","description":"체크 아이콘, 완료 문구, 다음 행동을 제공해 사용자가 결과를 확신하게 한다.","visual_anatomy":["success icon","confirmation title","supporting text","next action"],"when_to_use":["결제","제출","업로드처럼 완료 확인이 중요한 작업 뒤에"],"anti_use":["사소한 저장 완료에는 toast가 충분할 수 있다","다음 단계 없이 막다른 화면을 만들지 않는다"],"prompt_phrases":["결제 완료 success state를 보여줘","체크 아이콘과 다음으로 버튼이 있는 완료 화면을 만들어줘"]},{"id":"warning-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"경고 상태","aliases":["warning state","주의 상태","warning UI"]},"en":{"name":"Warning state","aliases":["Caution state","Warning UI"]},"one_liner":"위험하거나 주의가 필요한 상황을 노란색 계열과 설명으로 알려주는 상태.","description":"삭제 전 확인, 할당량 초과 임박, 불완전한 설정처럼 즉시 실패는 아니지만 주의가 필요할 때 쓴다.","visual_anatomy":["warning icon","caution color","message text","optional action"],"when_to_use":["사용자가 계속 진행하기 전에 위험을 알아야 할 때"],"anti_use":["모든 안내를 warning으로 만들지 않는다","실제 오류는 error state나 alert로 구분한다"],"prompt_phrases":["저장되지 않은 변경사항 warning state를 보여줘","경고 아이콘과 노란 배너를 넣어줘"]},{"id":"info-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"정보 상태","aliases":["info state","안내 상태","informational message"]},"en":{"name":"Info state","aliases":["Informational state","Info message"]},"one_liner":"사용자가 알아두면 좋은 보조 정보를 중립적으로 보여주는 상태.","description":"기능 제한, 팁, 시스템 안내처럼 경고나 오류는 아니지만 맥락 설명이 필요할 때 쓴다.","visual_anatomy":["info icon","neutral container","concise message","optional link"],"when_to_use":["사용자에게 맥락이나 추가 설명을 제공해야 할 때"],"anti_use":["중요한 오류를 info처럼 약하게 표현하지 않는다","긴 도움말은 documentation link로 분리한다"],"prompt_phrases":["상단에 info state 안내 박스를 넣어줘","도움말 링크가 있는 정보 메시지를 보여줘"]},{"id":"loading-state","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"로딩 상태","aliases":["loading state","불러오는 중 화면","대기 상태"]},"en":{"name":"Loading state","aliases":["Loading UI","Pending state"]},"one_liner":"데이터나 화면이 준비되는 동안 사용자가 기다리고 있음을 보여주는 상태.","description":"spinner, skeleton, progress bar, 로딩 문구를 상황에 맞게 조합한다.","visual_anatomy":["loading indicator","placeholder area","optional message","disabled actions"],"when_to_use":["비동기 작업 때문에 콘텐츠를 즉시 보여줄 수 없을 때"],"anti_use":["빈 화면으로 방치하지 않는다","긴 작업에 이유나 예상 시간을 전혀 주지 않으면 불안하다"],"prompt_phrases":["목록을 불러오는 동안 loading state를 보여줘","skeleton과 로딩 문구를 함께 넣어줘"]},{"id":"textarea-autosize","status":"draft","category":"input","group":"input-text","ko":{"name":"자동 높이 텍스트영역","aliases":["autosize textarea","자동 확장 입력창","늘어나는 textarea"]},"en":{"name":"Autosize textarea","aliases":["Auto-growing textarea","Expanding textarea"]},"one_liner":"입력한 줄 수에 맞춰 높이가 늘어나는 여러 줄 입력 요소.","description":"댓글, 메모, 짧은 설명처럼 처음에는 작게 보이다가 내용이 늘면 입력 영역도 같이 커진다.","visual_anatomy":["multiline input","growing height","typed content","optional helper text"],"when_to_use":["입력 길이가 사용자의 상황마다 달라질 때","작은 폼 안에서 긴 입력도 허용해야 할 때"],"anti_use":["긴 문서 작성에는 rich text editor가 낫다","높이가 계속 커져 화면을 밀어내면 고정 높이 textarea를 쓴다"],"prompt_phrases":["입력 내용에 맞춰 높이가 늘어나는 autosize textarea를 넣어줘"]},{"id":"input-group","status":"draft","category":"input","group":"input-text","ko":{"name":"입력 그룹","aliases":["input group","입력 애드온","prefix suffix input"]},"en":{"name":"Input group","aliases":["Input addon","Affixed input"]},"one_liner":"입력창 앞뒤에 아이콘, 단위, 버튼 같은 보조 요소를 붙인 입력 묶음.","description":"금액 단위, URL prefix, 검색 아이콘, 복사 버튼처럼 입력값의 의미나 행동을 입력창과 함께 보여준다.","visual_anatomy":["input container","leading addon","trailing addon","typed value"],"when_to_use":["값의 단위나 맥락을 입력창 바로 옆에서 보여줘야 할 때","입력 옆에 작은 행동 버튼이 필요할 때"],"anti_use":["복잡한 여러 필드를 한 input group에 억지로 묶지 않는다"],"prompt_phrases":["왼쪽에 원화 단위가 붙은 input group을 넣어줘"]},{"id":"date-range-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"날짜 범위 선택","aliases":["date range picker","기간 선택","시작일 종료일 선택"]},"en":{"name":"Date range picker","aliases":["Range calendar","Start and end date picker"]},"one_liner":"시작 날짜와 종료 날짜를 함께 선택하는 날짜 입력 요소.","description":"예약 기간, 조회 기간, 리포트 기간처럼 두 날짜 사이의 범위를 지정할 때 쓴다.","visual_anatomy":["start date","end date","range highlight","calendar grid"],"when_to_use":["기간 검색이나 예약처럼 시작과 끝 날짜가 모두 필요할 때"],"anti_use":["하루만 고르면 date picker가 더 단순하다"],"prompt_phrases":["시작일과 종료일을 고르는 date range picker를 넣어줘"]},{"id":"time-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"시간 선택","aliases":["time picker","시간 입력","시각 선택"]},"en":{"name":"Time picker","aliases":["Time selector","Time input"]},"one_liner":"사용자가 시와 분 같은 시간을 고르게 하는 입력 요소.","description":"예약 시간, 알림 시간, 근무 시작 시간처럼 특정 시각을 선택할 때 사용한다.","visual_anatomy":["hour value","minute value","increment controls","selected time"],"when_to_use":["정해진 시간 값을 입력받아야 할 때"],"anti_use":["시간 범위나 일정 전체를 다루면 calendar view나 scheduler가 더 적합하다"],"prompt_phrases":["예약 시간을 고르는 time picker를 넣어줘"],"related":[{"id":"mobile-date-picker","relation":"compare","note":"예약 날짜와 시간을 함께 받아야 하면 하나의 bottom sheet 안에 이 피커와 mobile-date-picker를 순차적으로 이어붙인다."},{"id":"mobile-date-time-picker-sheet","relation":"use-with","note":"날짜와 시간을 하나의 bottom sheet 안에서 순차 선택하는 조합형 시트가 이 피커와 mobile-date-picker를 이어붙인 실제 구성이다."}]},{"id":"rating-input","status":"draft","category":"input","group":"input-pickers","ko":{"name":"평점 입력","aliases":["rating input","별점","star rating"]},"en":{"name":"Rating input","aliases":["Star rating","Rating control"]},"one_liner":"별이나 점수 기호를 눌러 만족도나 평가 점수를 입력하는 요소.","description":"리뷰, 피드백, 추천도처럼 숫자 평가를 빠르게 선택하게 한다.","visual_anatomy":["rating icons","selected count","hover or pressed state","numeric value"],"when_to_use":["사용자에게 간단한 점수 평가를 받을 때"],"anti_use":["정확한 숫자 입력이나 긴 설문에는 slider나 radio group을 검토한다"],"prompt_phrases":["리뷰 작성 폼에 5점 star rating input을 넣어줘"]},{"id":"tag-input","status":"draft","category":"input","group":"input-pickers","ko":{"name":"태그 입력","aliases":["tag input","chip input","태그 추가"]},"en":{"name":"Tag input","aliases":["Chip input","Token input"]},"one_liner":"여러 키워드를 작은 태그나 칩으로 추가하고 제거하는 입력 요소.","description":"관심사, 기술 스택, 수신자, 필터 조건처럼 여러 짧은 값을 모아 입력한다.","visual_anatomy":["chips","inline text input","remove buttons","add action"],"when_to_use":["사용자가 여러 개의 짧은 값을 자유롭게 추가해야 할 때"],"anti_use":["선택지가 고정되어 있으면 multi-select가 더 적합할 수 있다"],"prompt_phrases":["기술 스택을 여러 chip으로 추가하는 tag input을 넣어줘"]},{"id":"masked-input","status":"draft","category":"input","group":"input-text","ko":{"name":"마스크 입력","aliases":["masked input","형식 입력","포맷 입력창"]},"en":{"name":"Masked input","aliases":["Formatted input","Input mask"]},"one_liner":"전화번호나 카드번호처럼 정해진 형식에 맞춰 표시되는 입력창.","description":"사용자가 숫자를 입력하면 하이픈, 공백, 괄호 같은 구분자를 자동으로 넣어 읽기 쉽게 만든다.","visual_anatomy":["formatted value","fixed groups","caret","input container"],"when_to_use":["전화번호","카드번호","사업자번호처럼 형식이 정해진 값을 받을 때"],"anti_use":["자유 텍스트나 국가별 형식이 크게 다른 값에는 과한 제약이 될 수 있다"],"prompt_phrases":["전화번호가 자동으로 하이픈 포맷되는 masked input을 넣어줘"]},{"id":"toggle-group","status":"draft","category":"selection","group":"selection-options","ko":{"name":"토글 그룹","aliases":["toggle group","토글 버튼 묶음","다중 토글"]},"en":{"name":"Toggle group","aliases":["Toggle button group","Multi-toggle"]},"one_liner":"여러 토글 버튼을 한 묶음으로 보여주고 하나 이상을 켜는 선택 요소.","description":"텍스트 정렬, 서식, 필터 옵션처럼 버튼 모양 선택지를 눌린 상태로 유지한다.","visual_anatomy":["group container","toggle buttons","pressed state","icons or labels"],"when_to_use":["서식이나 보기 옵션처럼 즉시 켜고 끄는 선택지를 묶을 때"],"anti_use":["단 하나만 골라야 하면 segmented control이나 radio group이 더 명확하다"],"prompt_phrases":["굵게 기울임 밑줄을 고르는 toggle group을 넣어줘"],"related":[{"id":"segmented-control","relation":"compare","note":"하나의 보기 모드만 고르면 segmented control, 여러 버튼 상태를 동시에 켜면 toggle group이다."},{"id":"switch","relation":"compare","note":"개별 설정 하나를 즉시 켜고 끄면 switch, 여러 pressed button을 묶으면 toggle group이다."},{"id":"checkbox","relation":"alternative","note":"폼 제출용 다중 선택값이면 toggle group보다 checkbox가 더 명확하다."}]},{"id":"navigation-drawer","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"내비게이션 드로어","aliases":["navigation drawer","앱 메뉴 드로어","사이드 메뉴","모바일 내비게이션 드로어"]},"en":{"name":"Navigation drawer","aliases":["Nav drawer","App drawer","Mobile navigation drawer"]},"one_liner":"화면 한쪽에서 열려 앱의 주요 목적지 목록을 보여주는 내비게이션 패널.","description":"모바일이나 앱형 화면에서 메뉴 버튼을 눌러 전체 섹션 이동 목록을 펼친다.","visual_anatomy":["drawer surface","menu trigger","destination rows","active destination"],"when_to_use":["주요 이동 경로가 많고 항상 노출하기엔 공간이 부족할 때"],"anti_use":["핵심 목적지를 너무 깊게 숨기지 않는다"],"prompt_phrases":["메뉴 버튼을 누르면 왼쪽 navigation drawer가 열리게 해줘"]},{"id":"mega-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"메가 메뉴","aliases":["mega menu","대형 메뉴","다열 메뉴"]},"en":{"name":"Mega menu","aliases":["Large menu","Multi-column menu"]},"one_liner":"상단 메뉴에서 여러 카테고리와 링크를 큰 패널로 펼쳐 보여주는 메뉴.","description":"서비스, 제품군, 문서처럼 항목이 많을 때 2열 이상으로 구조화해 탐색하게 한다.","visual_anatomy":["top trigger","large panel","columns","grouped links"],"when_to_use":["전역 내비게이션의 하위 항목이 많고 구조를 한눈에 보여줘야 할 때"],"anti_use":["항목이 적으면 dropdown menu가 더 단순하다","모바일에서는 별도 drawer 구성이 필요하다"],"prompt_phrases":["상단 제품 메뉴를 누르면 3열 mega menu가 펼쳐지게 해줘"]},{"id":"context-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"컨텍스트 메뉴","aliases":["context menu","우클릭 메뉴","상황 메뉴"]},"en":{"name":"Context menu","aliases":["Right-click menu","Contextual menu"]},"one_liner":"특정 항목이나 영역의 상황에 맞는 명령을 띄우는 메뉴.","description":"파일, 카드, 셀 같은 대상 위에서 열리며 복사, 이름 변경, 삭제 같은 대상별 행동을 제공한다.","visual_anatomy":["target item","floating menu","command rows","selected command"],"when_to_use":["대상별 보조 명령이 많고 기본 화면에 모두 노출하기 어려울 때"],"anti_use":["중요한 행동을 우클릭에만 숨기지 않는다"],"prompt_phrases":["카드를 우클릭하면 편집 삭제 context menu가 나오게 해줘"],"related":[{"id":"long-press-menu","relation":"compare","note":"모바일에서 트리거 방식이 갈린다 — long-press-menu는 터치-홀드로 우연히 발견되고, 이 항목(툴바 버튼을 눌러 아래로 펼쳐지는 pull-down 방식 포함)은 명시적 버튼으로 발견 가능성이 더 높다. 항목 구성(icon+label 행, destructive 스타일)은 공유한다."}]},{"id":"loading-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"로딩 버튼","aliases":["loading button","pending button","처리 중 버튼"]},"en":{"name":"Loading button","aliases":["Pending button","Busy button"]},"one_liner":"클릭 후 작업 중임을 spinner나 문구로 보여주는 버튼.","description":"제출, 저장, 결제처럼 시간이 걸리는 행동에서 중복 클릭을 막고 처리 상태를 알려준다.","visual_anatomy":["button label","spinner","disabled state","completed state"],"when_to_use":["버튼 클릭 뒤 비동기 작업이 진행될 때"],"anti_use":["작업이 즉시 끝나면 로딩 상태를 불필요하게 보여주지 않는다"],"prompt_phrases":["저장 버튼을 누르면 spinner가 도는 loading button으로 바꿔줘"]},{"id":"copy-field","status":"draft","category":"input","group":"input-text","ko":{"name":"복사 필드","aliases":["copy field","복사 입력창","copyable field"]},"en":{"name":"Copy field","aliases":["Copyable field","Read-only copy input"]},"one_liner":"읽기 전용 값과 복사 버튼을 함께 제공하는 요소.","description":"초대 링크, API 키, 쿠폰 코드처럼 사용자가 값을 직접 편집하지 않고 복사해야 할 때 쓴다.","visual_anatomy":["read-only value","copy button","copied feedback","input-like container"],"when_to_use":["값을 보여주고 사용자가 클립보드로 가져가야 할 때"],"anti_use":["편집 가능한 입력창처럼 보이게 해서 혼동시키지 않는다"],"prompt_phrases":["초대 링크 옆에 복사 버튼이 있는 copy field를 넣어줘"]},{"id":"bulk-action-bar","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"일괄 작업 바","aliases":["bulk action bar","선택 작업 바","bulk actions"]},"en":{"name":"Bulk action bar","aliases":["Selection action bar","Bulk actions"]},"one_liner":"여러 항목을 선택했을 때 삭제, 이동, 내보내기 같은 일괄 행동을 보여주는 바.","description":"테이블이나 리스트에서 선택된 항목 수와 가능한 집합 행동을 한 영역에 표시한다.","visual_anatomy":["selected count","action buttons","clear selection","elevated bar"],"when_to_use":["여러 행이나 카드에 같은 행동을 한 번에 적용해야 할 때"],"anti_use":["항목 하나에만 적용되는 행동은 row action으로 두는 편이 낫다"],"prompt_phrases":["테이블에서 행을 선택하면 bulk action bar가 나타나게 해줘"]},{"id":"speed-dial","status":"draft","category":"action","group":"action-buttons","ko":{"name":"스피드 다이얼","aliases":["speed dial","확장 FAB","빠른 작업 메뉴","FAB 메뉴","확장 액션 메뉴"]},"en":{"name":"Speed dial","aliases":["Expandable FAB","Quick actions","FAB menu","Expanding action menu"]},"one_liner":"플로팅 버튼을 누르면 여러 빠른 행동 버튼이 펼쳐지는 요소.","description":"모바일이나 좁은 화면에서 하나의 주요 버튼 아래에 관련 작업 여러 개를 숨겨둔다. 배경을 어둡게 까는 스크림은 필수가 아니며, 주 행동과 보조 행동의 위계가 강할 때만 넣는다.","visual_anatomy":["main fab","expand transition","expanded action buttons","floating stack","labels optional","backdrop dim optional"],"when_to_use":["주요 행동과 관련 보조 행동을 좁은 화면에 배치해야 할 때"],"anti_use":["항동이 많아지면 메뉴나 toolbar가 더 낫다"],"prompt_phrases":["오른쪽 아래 FAB를 누르면 speed dial 액션들이 펼쳐지게 해줘"],"related":[{"id":"floating-action-button","relation":"compare","note":"단일 FAB의 라벨/아이콘 확장(extended FAB)과 달리, speed-dial은 탭 한 번으로 보조 행동 버튼 여러 개가 펼쳐지고 각 버튼은 독립된 44x44 이상 탭 타깃을 갖는다."}]},{"id":"app-shell","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"앱 셸","aliases":["app shell","앱 레이아웃","application shell"]},"en":{"name":"App shell","aliases":["Application shell","App layout frame"]},"one_liner":"헤더, 사이드바, 콘텐츠 영역처럼 앱의 고정 뼈대를 이루는 레이아웃.","description":"대시보드나 관리 도구에서 반복되는 전역 내비게이션과 작업 영역을 안정적으로 배치한다.","visual_anatomy":["top bar","sidebar","content area","persistent navigation"],"when_to_use":["여러 화면이 같은 앱 구조를 공유할 때"],"anti_use":["단일 랜딩 페이지처럼 앱 내비게이션이 필요 없는 화면에는 과하다"],"prompt_phrases":["왼쪽 사이드바와 상단바가 있는 app shell 레이아웃을 만들어줘"]},{"id":"split-pane","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"분할 패널","aliases":["split pane","split panel","좌우 분할"]},"en":{"name":"Split pane","aliases":["Split panel","Split layout"]},"one_liner":"화면을 두 개 이상의 패널로 나눠 동시에 보여주는 레이아웃.","description":"목록과 미리보기, 코드와 결과, 설정과 상세처럼 관련 영역을 나란히 비교하게 한다.","visual_anatomy":["left pane","divider","right pane","adjustable width optional"],"when_to_use":["두 정보를 함께 보며 작업해야 할 때"],"anti_use":["모바일 좁은 화면에서는 탭이나 드로어 전환이 더 낫다"],"prompt_phrases":["왼쪽 목록 오른쪽 미리보기로 나뉜 split pane을 만들어줘"]},{"id":"snackbar","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"스낵바","aliases":["snackbar","하단 알림","action toast"]},"en":{"name":"Snackbar","aliases":["Bottom notification","Action snackbar"]},"one_liner":"화면 하단에 잠깐 나타나 결과 메시지와 간단한 행동을 제공하는 알림.","description":"toast와 비슷하지만 하단 위치와 하나의 보조 action을 함께 제공하는 패턴으로 자주 쓰인다.","visual_anatomy":["bottom bar","message","optional action","dismiss or timeout"],"when_to_use":["작업 결과를 짧게 알리고 되돌리기 같은 한 가지 행동을 제공할 때"],"anti_use":["중요한 오류나 긴 안내에는 alert나 dialog를 쓴다"],"prompt_phrases":["저장 완료 후 하단 snackbar에 실행 취소 버튼을 보여줘"],"related":[{"id":"toast","relation":"compare","note":"action 없이 짧은 상태만 알리면 toast, 실행 취소 같은 action이 있으면 snackbar가 좋다."},{"id":"alert","relation":"compare","note":"사용자가 계속 읽어야 하는 오류나 안내는 snackbar보다 alert/banner로 유지한다."},{"id":"undo-toast","relation":"use-with","note":"삭제나 보관처럼 되돌릴 수 있는 작업 뒤에는 undo toast/snackbar 패턴을 함께 검토한다."}]},{"id":"undo-toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"실행 취소 토스트","aliases":["undo toast","되돌리기 알림","undo snackbar"]},"en":{"name":"Undo toast","aliases":["Undo snackbar","Reversible toast"]},"one_liner":"작업 완료 메시지와 함께 실행 취소 행동을 제공하는 짧은 알림.","description":"삭제, 보관, 이동처럼 즉시 되돌릴 수 있는 행동 뒤에 사용자가 실수를 복구하게 한다.","visual_anatomy":["message","undo action","transient container","dismiss affordance"],"when_to_use":["되돌릴 수 있는 파괴적 또는 이동 작업 직후"],"anti_use":["되돌릴 수 없는 작업에는 confirmation dialog가 먼저 필요하다"],"prompt_phrases":["삭제 후 undo toast를 띄워서 실행 취소할 수 있게 해줘"]},{"id":"row-selection","status":"draft","category":"selection","group":"selection-misc","ko":{"name":"행 선택","aliases":["row selection","테이블 행 선택","체크박스 행 선택"]},"en":{"name":"Row selection","aliases":["Selectable rows","Table row selection"]},"one_liner":"테이블이나 리스트의 행을 체크해 하나 이상 선택하는 패턴.","description":"선택된 행 수를 추적하고 일괄 작업, 삭제, 내보내기 같은 행동으로 이어진다.","visual_anatomy":["row checkboxes","selected rows","selected count","header checkbox"],"when_to_use":["사용자가 여러 데이터 항목을 골라 작업해야 할 때"],"anti_use":["단순 탐색 리스트에는 선택 체크박스가 불필요할 수 있다"],"prompt_phrases":["테이블 왼쪽에 row selection 체크박스를 넣어줘"]},{"id":"search-view","status":"draft","category":"input","group":"input-search-command","ko":{"name":"검색 뷰","aliases":["search view","전체 검색 화면","검색 패널"]},"en":{"name":"Search view","aliases":["Search surface","Search panel"]},"one_liner":"검색창, 제안, 결과를 한 화면이나 패널로 묶은 검색 전용 영역.","description":"단순 검색창보다 넓은 표면에서 추천어, 최근 검색어, 결과 목록을 함께 보여준다.","visual_anatomy":["search input","suggestions","result list","active query"],"when_to_use":["검색이 화면의 주요 작업일 때","제안과 결과를 함께 보여줘야 할 때"],"anti_use":["간단한 목록 필터에는 search field만으로 충분하다"],"prompt_phrases":["검색창과 추천 결과가 함께 보이는 search view를 만들어줘"]},{"id":"tree-navigation","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"트리 내비게이션","aliases":["tree navigation","계층 메뉴","폴더형 내비게이션"]},"en":{"name":"Tree navigation","aliases":["Navigation tree","Hierarchical navigation"]},"one_liner":"계층 구조를 펼치고 접으며 목적지로 이동하는 내비게이션.","description":"문서, 파일, 설정처럼 부모-자식 관계가 있는 항목을 탐색할 때 쓴다.","visual_anatomy":["parent node","disclosure icon","child nodes","active item"],"when_to_use":["정보 구조가 계층적이고 사용자가 하위 항목을 탐색해야 할 때"],"anti_use":["항목이 평면적이면 sidebar navigation이나 list가 단순하다"],"prompt_phrases":["문서 목차를 펼치고 접는 tree navigation으로 보여줘"]},{"id":"side-sheet","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"사이드 시트","aliases":["side sheet","측면 시트","side panel"]},"en":{"name":"Side sheet","aliases":["Side panel","Side surface"]},"one_liner":"화면 옆에서 열려 보조 작업이나 상세 정보를 담는 패널.","description":"drawer보다 작업 맥락이 강하고, 현재 화면을 유지한 채 폼이나 상세를 보여준다.","visual_anatomy":["side surface","header","close action","supporting content"],"when_to_use":["목록에서 상세를 빠르게 확인하거나 보조 작업을 해야 할 때"],"anti_use":["사용자 집중을 완전히 요구하면 dialog가 더 적합하다"],"prompt_phrases":["오른쪽 side sheet에서 선택 항목 상세를 보여줘"],"related":[{"id":"drawer","relation":"compare","note":"drawer는 넓은 패널 계열의 일반명이고, side sheet는 보조 작업을 담는 측면 표면에 더 가깝다."},{"id":"dialog","relation":"alternative","note":"사용자의 집중 결정이 필요하면 side sheet보다 dialog가 더 명확하다."},{"id":"modal-bottom-sheet","relation":"alternative","note":"모바일에서 같은 보조 작업을 하단에서 막아 처리하면 modal bottom sheet를 쓴다."}]},{"id":"breadcrumbs-menu","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"브레드크럼 메뉴","aliases":["breadcrumb menu","경로 메뉴","sibling path menu"]},"en":{"name":"Breadcrumbs menu","aliases":["Breadcrumb menu","Path menu"]},"one_liner":"브레드크럼의 한 경로 항목에서 형제 위치를 펼쳐 고르는 메뉴.","description":"현재 위치를 보여주면서 같은 깊이의 다른 섹션으로 빠르게 이동하게 한다.","visual_anatomy":["breadcrumb path","menu trigger","sibling options","current item"],"when_to_use":["계층 경로 안에서 형제 페이지 이동이 잦을 때"],"anti_use":["경로가 짧고 단순하면 일반 breadcrumb가 충분하다"],"prompt_phrases":["breadcrumb의 중간 항목을 누르면 sibling menu가 열리게 해줘"]},{"id":"icon-toggle-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"아이콘 토글 버튼","aliases":["icon toggle button","pressed icon button","즐겨찾기 버튼"]},"en":{"name":"Icon toggle button","aliases":["Pressed icon button","Toggle icon"]},"one_liner":"아이콘만 있는 버튼이 눌린 상태를 유지해 켜짐/꺼짐을 나타내는 요소.","description":"즐겨찾기, 북마크, 음소거, 표시/숨김처럼 작은 상태 전환 행동에 쓴다.","visual_anatomy":["icon button","pressed state","icon color change","accessible label"],"when_to_use":["아이콘으로 표현 가능한 이진 상태를 토글할 때"],"anti_use":["의미가 불명확하면 label이나 tooltip을 함께 제공한다"],"prompt_phrases":["하트 아이콘을 누르면 활성화되는 icon toggle button을 넣어줘"]},{"id":"resizable-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"크기 조절 패널","aliases":["resizable panel","resize handle","조절 가능한 패널"]},"en":{"name":"Resizable panel","aliases":["Resizable pane","Resize handle"]},"one_liner":"사용자가 경계선을 끌어 패널의 폭이나 높이를 조절하는 레이아웃.","description":"코드 에디터, 대시보드, 데이터 탐색 화면에서 영역 크기를 사용자가 조절하게 한다.","visual_anatomy":["two panels","resize handle","adjusted size","drag affordance"],"when_to_use":["사용자마다 필요한 정보 영역의 크기가 다를 때"],"anti_use":["간단한 콘텐츠에는 고정 레이아웃이 더 예측 가능하다"],"prompt_phrases":["좌우 패널 사이에 resize handle이 있는 resizable panel을 만들어줘"]},{"id":"master-detail","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"마스터-디테일","aliases":["master detail","목록 상세","list detail layout"]},"en":{"name":"Master-detail","aliases":["List-detail layout","Master detail view"]},"one_liner":"왼쪽 목록에서 항목을 고르면 오른쪽에 상세가 표시되는 레이아웃.","description":"이메일, 주문, 고객 관리처럼 많은 항목을 탐색하며 상세를 빠르게 확인할 때 쓴다.","visual_anatomy":["master list","selected item","detail pane","two-column layout"],"when_to_use":["목록과 상세를 오가며 비교하거나 편집해야 할 때"],"anti_use":["모바일에서는 단계 전환이나 bottom sheet가 더 적합할 수 있다"],"prompt_phrases":["왼쪽 목록 오른쪽 상세의 master-detail 레이아웃을 만들어줘"],"related":[{"id":"adaptive-split-view","relation":"compare","note":"창 크기에 따라 stack과 split을 오가며 목적지 커스터마이즈까지 필요하면 adaptive-split-view를 쓴다. master-detail은 고정 2열 레이아웃만 다룬다."}]},{"id":"adaptive-split-view","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"적응형 스플릿 뷰","aliases":["adaptive split view","사이드바 전환형 레이아웃","탭바 사이드바 전환"]},"en":{"name":"Adaptive split view","aliases":["Sidebar/tab bar convertible layout","Adaptive sidebar layout"]},"one_liner":"창 크기에 따라 탭 바가 사이드바로 바뀌거나 목록-상세가 나란히 붙는 적응형 레이아웃.","description":"좁은 화면에서는 화면 전환(stack) 또는 탭 바로 동작하다가, iPad 같은 넓은 화면에서는 사이드바나 나란한 목록-상세 분할로 전환된다. 사용자가 즐겨찾는 목적지를 골라 커스터마이즈할 수 있다는 점에서 정적 2열 레이아웃인 master-detail과 구분된다.","visual_anatomy":["adaptive container","compact stack view","regular split view","primary list pane","secondary detail pane","tab-bar-to-sidebar toggle"],"when_to_use":["같은 앱이 폰과 태블릿처럼 서로 다른 창 크기에서 동작해야 할 때","사용자가 목적지 목록을 커스터마이즈할 수 있어야 할 때"],"anti_use":["창 크기가 항상 고정된 데스크톱 전용 2열 화면이면 master-detail로 충분하다","목적지 전환 없이 순수 콘텐츠 레이아웃만 필요하면 과도한 추상화다"],"prompt_phrases":["폰에서는 탭바","태블릿에서는 사이드바로 바뀌는 adaptive split view를 만들어줘","창을 넓히면 목록과 상세가 나란히 보이게 해줘"],"related":[{"id":"master-detail","relation":"compare","note":"master-detail은 고정 2열 레이아웃만 다루고, 창 크기에 따른 stack/split 전환이나 목적지 커스터마이즈는 다루지 않는다."}]},{"id":"sticky-header","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"고정 헤더","aliases":["sticky header","fixed header","붙어있는 상단바"]},"en":{"name":"Sticky header","aliases":["Fixed header","Sticky top bar"]},"one_liner":"스크롤해도 화면 상단에 붙어 남아 있는 헤더.","description":"검색, 필터, 제목, 주요 행동을 계속 접근 가능하게 유지한다.","visual_anatomy":["top header","scroll content","sticky position","shadow or border"],"when_to_use":["긴 목록이나 문서에서 상단 행동이 계속 필요할 때"],"anti_use":["작은 화면에서 콘텐츠 공간을 과하게 차지하지 않게 한다"],"prompt_phrases":["스크롤해도 상단에 남는 sticky header를 넣어줘"]},{"id":"sticky-footer-bar","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"고정 하단 바","aliases":["sticky footer bar","bottom action bar","하단 액션바"]},"en":{"name":"Sticky footer bar","aliases":["Bottom action bar","Sticky bottom bar"]},"one_liner":"스크롤과 관계없이 화면 하단에 붙어 주요 행동을 제공하는 바.","description":"저장, 결제, 다음 단계처럼 완료 행동을 항상 보이게 할 때 쓴다.","visual_anatomy":["bottom bar","primary action","secondary action","sticky placement"],"when_to_use":["긴 폼이나 checkout에서 주요 행동을 계속 접근 가능하게 할 때"],"anti_use":["내용을 가리지 않도록 충분한 하단 여백을 둔다"],"prompt_phrases":["긴 폼 아래에 저장 버튼이 있는 sticky footer bar를 넣어줘"]},{"id":"sidebar-section","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"사이드바 섹션","aliases":["sidebar section","grouped sidebar","사이드바 그룹"]},"en":{"name":"Sidebar section","aliases":["Sidebar group","Navigation section"]},"one_liner":"사이드바 안에서 관련 메뉴를 제목과 함께 묶은 구역.","description":"많은 내비게이션 항목을 계층과 주제로 나눠 스캔하기 쉽게 만든다.","visual_anatomy":["section label","grouped nav items","active item","vertical spacing"],"when_to_use":["사이드바 항목이 많아 그룹화가 필요할 때"],"anti_use":["항목이 적으면 섹션 제목이 오히려 소음이 된다"],"prompt_phrases":["사이드바 메뉴를 관리와 설정 sidebar section으로 나눠줘"]},{"id":"inline-alert","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"인라인 알림","aliases":["inline alert","section alert","폼 내부 알림"]},"en":{"name":"Inline alert","aliases":["Section alert","Inline message"]},"one_liner":"폼이나 섹션 안에 직접 배치되는 짧은 알림 메시지.","description":"전체 화면 배너보다 좁은 범위의 오류, 안내, 경고를 해당 맥락 가까이에 보여준다.","visual_anatomy":["small alert container","icon","message","local placement"],"when_to_use":["특정 필드 묶음이나 섹션에만 관련된 안내가 있을 때"],"anti_use":["전역 문제는 alert banner나 dialog로 더 명확히 알린다"],"prompt_phrases":["결제 섹션 안에 inline alert로 카드 오류를 보여줘"]},{"id":"error-boundary","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"오류 경계 화면","aliases":["error boundary","fallback UI","컴포넌트 오류 화면"]},"en":{"name":"Error boundary","aliases":["Fallback UI","Component error fallback"]},"one_liner":"일부 UI가 실패했을 때 전체 앱 대신 해당 영역에 보여주는 복구 화면.","description":"컴포넌트 렌더 오류나 데이터 실패를 격리하고 다시 시도 행동을 제공한다.","visual_anatomy":["failed region","error message","retry action","contained fallback"],"when_to_use":["한 영역의 실패가 전체 화면을 망가뜨리지 않게 해야 할 때"],"anti_use":["사용자가 이해 못 하는 stack trace를 그대로 노출하지 않는다"],"prompt_phrases":["위젯 로딩 실패 시 retry 버튼이 있는 error boundary UI를 보여줘"]},{"id":"confirmation-dialog","status":"draft","category":"feedback","group":"feedback-confirmation-help","ko":{"name":"확인 다이얼로그","aliases":["confirmation dialog","confirm modal","확인 모달"]},"en":{"name":"Confirmation dialog","aliases":["Confirm dialog","Confirmation modal"]},"one_liner":"중요한 행동을 실행하기 전에 사용자의 명시적 확인을 받는 모달.","description":"삭제, 결제, 권한 변경처럼 되돌리기 어렵거나 영향이 큰 행동 앞에 쓴다.","visual_anatomy":["dialog title","risk message","cancel action","confirm action"],"when_to_use":["파괴적이거나 비용이 발생하는 행동 전에"],"anti_use":["사소한 행동마다 확인을 요구하면 사용자를 피로하게 한다"],"prompt_phrases":["삭제 전에 취소와 삭제 버튼이 있는 confirmation dialog를 띄워줘"]},{"id":"docs-feedback-widget","status":"draft","category":"feedback","group":"feedback-confirmation-help","kind":"block","ko":{"name":"문서 피드백 위젯","aliases":["was this helpful widget","도움이 되었나요 위젯","문서 평가 위젯"]},"en":{"name":"Docs feedback widget","aliases":["Was this helpful widget","Page feedback widget"]},"one_liner":"문서 페이지 하단에서 이 페이지가 도움이 되었는지 즉석으로 묻는 짧은 피드백 위젯.","description":"짧은 질문과 Yes/No 또는 아이콘 버튼 쌍으로 즉석 반응을 받고, 클릭 후 감사 메시지나 짧은 후속 텍스트 입력으로 상태를 전환한다.","visual_anatomy":["short question text","yes/no or icon button pair","post-click confirmation state","optional follow-up text input","bottom-of-page card"],"when_to_use":["문서 페이지가 실제로 도움이 되는지 가벼운 신호를 계속 수집해야 할 때"],"anti_use":["상품/서비스에 대한 평점과 리뷰는 reviews-summary-block 같은 커머스 리뷰 UI가 더 적합하다"],"prompt_phrases":["문서 페이지 하단에 도움이 되었나요 피드백 위젯을 넣어줘","Yes No 버튼과 후속 텍스트 입력이 있는 was-this-helpful 위젯을 만들어줘"]},{"id":"rate-limit-state","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"사용량 제한 상태","aliases":["rate limit state","제한 상태","retry after"]},"en":{"name":"Rate limit state","aliases":["Retry-after state","Limit reached state"]},"one_liner":"요청이 너무 많아 잠시 기다려야 함을 알려주는 상태 UI.","description":"남은 대기 시간, 다시 시도 버튼, 제한 이유를 함께 보여 사용자가 다음 행동을 알게 한다.","visual_anatomy":["limit message","countdown or retry time","retry action","neutral warning tone"],"when_to_use":["API 호출","로그인 시도","생성 요청 등 사용량 제한이 걸렸을 때"],"anti_use":["단순 네트워크 오류와 혼동하지 않는다"],"prompt_phrases":["요청 제한이 걸리면 남은 시간을 보여주는 rate limit state를 넣어줘"]},{"id":"data-table-toolbar","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"데이터 테이블 툴바","aliases":["data table toolbar","table toolbar","표 도구막대"]},"en":{"name":"Data table toolbar","aliases":["Table toolbar","Data grid toolbar"]},"one_liner":"테이블 위에서 검색, 필터, 보기 설정, 일괄 행동을 모아 제공하는 영역.","description":"데이터 테이블을 탐색하고 조작하는 주요 컨트롤을 한 줄에 배치한다.","visual_anatomy":["search field","filter button","view options","action buttons"],"when_to_use":["테이블의 검색/필터/내보내기/보기 설정이 필요할 때"],"anti_use":["컨트롤이 하나뿐이면 별도 toolbar가 과하다"],"prompt_phrases":["테이블 위에 검색 필터 내보내기 버튼이 있는 data table toolbar를 넣어줘"]},{"id":"column-header-menu","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"컬럼 헤더 메뉴","aliases":["column header menu","열 메뉴","컬럼 옵션"]},"en":{"name":"Column header menu","aliases":["Column menu","Header menu"]},"one_liner":"테이블 열 제목에서 정렬, 필터, 숨김 같은 열별 행동을 여는 메뉴.","description":"특정 컬럼에 적용되는 조작을 컬럼 헤더 근처에 모아둔다.","visual_anatomy":["column header","menu trigger","sort option","hide or filter action"],"when_to_use":["각 열마다 정렬/필터/숨김 행동이 필요할 때"],"anti_use":["단순 표에는 메뉴보다 직접 sort icon이 충분할 수 있다"],"prompt_phrases":["테이블 컬럼 헤더에 정렬과 숨김 column menu를 넣어줘"]},{"id":"faceted-filter","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"패싯 필터","aliases":["faceted filter","facet filter","다중 조건 필터","카테고리 필터","카테고리 필터 사이드바"]},"en":{"name":"Faceted filter","aliases":["Facet filter","Multi-facet filter","Category filter facets","Category filter sidebar"]},"one_liner":"상태, 카테고리, 가격대처럼 여러 속성별 조건을 조합하는 필터.","description":"쇼핑, 데이터 테이블, 검색 결과에서 사용자가 여러 차원의 조건을 선택해 결과를 좁힌다. 카테고리 페이지 좌측에 고정되는 사이드바 형태에서는 속성별 그룹을 아코디언이나 상시 펼침으로 두고, 적용된 조건을 칩으로 요약하며 결과 수를 실시간으로 갱신하고 한 번에 초기화하는 clear-all 행동을 함께 제공한다.","visual_anatomy":["filter groups","checkbox options","selected count","active chips","live result count","clear-all action"],"when_to_use":["데이터 속성이 다양하고 조합 검색이 필요할 때"],"anti_use":["조건이 1-2개면 단순 filter chip이나 select가 낫다"],"prompt_phrases":["상태와 카테고리를 고르는 faceted filter를 사이드바에 넣어줘","적용된 필터 칩과 실시간 결과 수가 있는 category filter sidebar를 만들어줘"]},{"id":"stat-list","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"지표 리스트","aliases":["stat list","metric list","통계 목록"]},"en":{"name":"Stat list","aliases":["Metric list","Stats list"]},"one_liner":"여러 핵심 숫자를 세로 목록으로 작게 정리해 보여주는 데이터 요소.","description":"카드보다 더 조밀하게 여러 지표와 변화량을 한 영역에서 비교한다.","visual_anatomy":["metric label","value","delta","stacked rows"],"when_to_use":["여러 작은 지표를 한눈에 비교해야 할 때"],"anti_use":["각 지표를 크게 강조해야 하면 metric card가 낫다"],"prompt_phrases":["방문자 전환율 매출을 stat list로 보여줘"]},{"id":"activity-feed","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"활동 피드","aliases":["activity feed","활동 내역","이벤트 피드"]},"en":{"name":"Activity feed","aliases":["Activity log","Event feed"]},"one_liner":"사용자나 시스템의 최근 활동을 시간순으로 보여주는 목록.","description":"누가 무엇을 했는지, 언제 바뀌었는지 추적하는 협업/관리 화면에 쓴다.","visual_anatomy":["actor","action text","timestamp","vertical list"],"when_to_use":["변경 이력이나 협업 활동을 시간순으로 보여줘야 할 때"],"anti_use":["정확한 감사 로그가 필요하면 audit log처럼 더 구조화한다"],"prompt_phrases":["최근 팀 활동을 activity feed로 보여줘"],"related":[{"id":"audit-log","relation":"compare","note":"activity feed는 협업 맥락의 소셜/최근 활동 스트림이고, audit log는 권한·결제·설정 변경처럼 추적 가능성이 중요한 이벤트를 actor-action-target-timestamp로 엄격히 구조화한 컴플라이언스급 불변 기록이다"}]},{"id":"map-marker","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"지도 마커","aliases":["map marker","지도 핀","location pin"]},"en":{"name":"Map marker","aliases":["Map pin","Location marker"]},"one_liner":"지도나 공간 화면에서 특정 위치를 표시하는 핀 형태 요소.","description":"장소, 배송 위치, 이벤트 위치처럼 좌표가 있는 항목을 시각적으로 표시한다.","visual_anatomy":["pin icon","map surface","selected marker","label optional"],"when_to_use":["위치 기반 정보를 지도 위에 표시해야 할 때"],"anti_use":["지도 없이 단순 주소 목록이면 list나 card가 더 적합하다"],"prompt_phrases":["지도 위에 선택된 장소를 map marker로 표시해줘"]},{"id":"scrubber","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"스크러버","aliases":["scrubber","재생 위치 바","timeline scrubber"]},"en":{"name":"Scrubber","aliases":["Timeline scrubber","Seek bar"]},"one_liner":"영상이나 오디오의 재생 위치를 드래그해 이동하는 컨트롤.","description":"현재 위치, 전체 길이, thumb를 함께 보여주며 사용자가 원하는 시점으로 이동한다.","visual_anatomy":["timeline track","current progress","draggable thumb","time labels"],"when_to_use":["미디어나 타임라인에서 위치를 빠르게 이동해야 할 때"],"anti_use":["단순 숫자 범위 조절에는 slider가 더 일반적이다"],"prompt_phrases":["동영상 하단에 재생 위치를 조절하는 scrubber를 넣어줘"]},{"id":"range-slider","status":"draft","category":"selection","group":"selection-options","ko":{"name":"범위 슬라이더","aliases":["range slider","양방향 슬라이더","가격 범위"]},"en":{"name":"Range slider","aliases":["Dual-thumb slider","Range control"]},"one_liner":"두 손잡이로 최소값과 최대값을 함께 조절하는 슬라이더.","description":"가격대, 기간, 점수 범위처럼 연속적인 범위를 선택할 때 쓴다.","visual_anatomy":["track","lower thumb","upper thumb","selected range"],"when_to_use":["최소/최대 범위를 시각적으로 조절해야 할 때"],"anti_use":["정확한 숫자 입력이 중요하면 number input을 함께 제공한다"],"prompt_phrases":["가격 최소 최대를 고르는 range slider를 넣어줘"]},{"id":"multi-select","status":"draft","category":"selection","group":"selection-options","ko":{"name":"다중 선택창","aliases":["multi select","multiple select","멀티셀렉트"]},"en":{"name":"Multi-select","aliases":["Multiple select","Multi select dropdown"]},"one_liner":"여러 옵션을 선택하고 선택값을 칩이나 목록으로 보여주는 선택 입력.","description":"역할, 태그, 카테고리처럼 고정된 보기 중 여러 개를 고르게 한다.","visual_anatomy":["select trigger","selected chips","option list","checkmarks"],"when_to_use":["정해진 보기 중 여러 값을 선택해야 할 때"],"anti_use":["자유 입력이 필요하면 tag input이 더 적합하다"],"prompt_phrases":["여러 카테고리를 고르는 multi-select를 넣어줘"]},{"id":"transfer-list","status":"draft","category":"selection","group":"selection-options","ko":{"name":"전송 리스트","aliases":["transfer list","dual listbox","좌우 이동 목록"]},"en":{"name":"Transfer list","aliases":["Dual listbox","Shuttle list"]},"one_liner":"왼쪽 목록의 항목을 오른쪽 목록으로 옮겨 선택 집합을 만드는 패턴.","description":"사용자 권한, 멤버 선택, 포함/제외 항목을 명확히 나눠 관리할 때 쓴다.","visual_anatomy":["source list","target list","move buttons","selected items"],"when_to_use":["선택 가능한 항목과 선택된 항목을 동시에 보여줘야 할 때"],"anti_use":["항목 수가 적으면 checkbox list가 더 단순하다"],"prompt_phrases":["사용자를 왼쪽에서 오른쪽으로 옮기는 transfer list를 만들어줘"]},{"id":"virtualized-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"가상화 리스트","aliases":["virtualized list","windowed list","대량 리스트"]},"en":{"name":"Virtualized list","aliases":["Windowed list","Virtual list"]},"one_liner":"많은 항목 중 화면에 보이는 일부만 렌더링하는 긴 목록 패턴.","description":"수천 개 항목을 빠르게 스크롤해야 할 때 성능을 위해 보이는 범위만 그린다.","visual_anatomy":["long scroll area","visible rows","scroll thumb","offscreen placeholders"],"when_to_use":["항목 수가 매우 많아 일반 list가 느려질 때"],"anti_use":["짧은 목록에는 구현 복잡도만 늘어난다"],"prompt_phrases":["수천 개 항목을 virtualized list로 빠르게 스크롤되게 해줘"]},{"id":"infinite-scroll","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"무한 스크롤","aliases":["infinite scroll","끝없는 목록","자동 더보기"]},"en":{"name":"Infinite scroll","aliases":["Endless scroll","Load on scroll"]},"one_liner":"목록 끝에 도달하면 다음 항목을 자동으로 불러오는 패턴.","description":"피드나 탐색 목록에서 페이지 버튼 없이 계속 콘텐츠를 이어 보여준다.","visual_anatomy":["list items","bottom loader","appended items","scroll position"],"when_to_use":["탐색형 콘텐츠를 연속적으로 소비하게 할 때"],"anti_use":["정확한 위치 이동이나 footer 접근이 중요하면 pagination이 낫다"],"prompt_phrases":["목록 끝에 도달하면 더 불러오는 infinite scroll을 넣어줘"]},{"id":"pull-to-refresh","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"당겨서 새로고침","aliases":["pull to refresh","swipe refresh","아래로 당겨 새로고침"]},"en":{"name":"Pull to refresh","aliases":["Swipe refresh","Pull refresh"]},"one_liner":"모바일에서 목록을 아래로 당겨 새 데이터를 불러오는 제스처 패턴.","description":"피드나 메시지 목록에서 최신 상태를 사용자가 직접 갱신하게 한다.","visual_anatomy":["pulled list","refresh indicator","release state","updated list"],"when_to_use":["모바일 목록에서 새 데이터를 수동 갱신해야 할 때"],"anti_use":["데스크톱 웹에서는 명시적 refresh button이 더 발견 가능하다"],"prompt_phrases":["모바일 피드에 pull-to-refresh 상태 표시를 넣어줘"]},{"id":"swipe-action","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"스와이프 액션","aliases":["swipe action","밀어서 삭제","swipe row action"]},"en":{"name":"Swipe action","aliases":["Swipe row action","Swipe command"]},"one_liner":"모바일 목록 항목을 옆으로 밀어 숨겨진 행동을 드러내는 패턴.","description":"삭제, 보관, 읽음 처리 같은 항목별 빠른 행동을 제스처로 제공한다.","visual_anatomy":["list row","dragged offset","revealed action","destructive color optional"],"when_to_use":["모바일 목록에서 항목별 빠른 행동이 자주 필요할 때"],"anti_use":["중요 행동을 스와이프에만 숨기지 않는다"],"prompt_phrases":["알림 리스트 항목을 왼쪽으로 밀면 삭제 swipe action이 보이게 해줘"]},{"id":"wizard","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"위저드","aliases":["wizard","단계형 폼","multi-step flow"]},"en":{"name":"Wizard","aliases":["Multi-step flow","Step-by-step form"]},"one_liner":"복잡한 작업을 여러 단계 화면으로 나눠 순서대로 진행하게 하는 흐름.","description":"가입, 설정, 결제처럼 한 번에 입력하기 많은 절차를 단계별로 줄인다.","visual_anatomy":["step indicator","current panel","next button","back button"],"when_to_use":["복잡한 작업을 순서대로 안내해야 할 때"],"anti_use":["간단한 폼을 불필요하게 여러 단계로 쪼개지 않는다"],"prompt_phrases":["가입 과정을 3단계 wizard로 만들어줘"]},{"id":"toast-stack","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"토스트 스택","aliases":["toast stack","stacked toasts","알림 묶음"]},"en":{"name":"Toast stack","aliases":["Stacked toasts","Notification stack"]},"one_liner":"여러 개의 토스트 알림이 겹치거나 쌓여 나타나는 상태.","description":"짧은 알림이 연속 발생할 때 위치와 순서를 유지해 사용자가 놓치지 않게 한다.","visual_anatomy":["multiple toast cards","stacking offset","close actions","newest item"],"when_to_use":["짧은 알림이 동시에 여러 개 발생할 수 있을 때"],"anti_use":["중요한 알림을 토스트 더미 속에 묻지 않는다"],"prompt_phrases":["오른쪽 아래에 여러 toast가 쌓이는 toast stack을 보여줘"]},{"id":"skeleton-table","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"테이블 스켈레톤","aliases":["skeleton table","table skeleton","표 로딩 자리표시자"]},"en":{"name":"Skeleton table","aliases":["Table skeleton","Loading table skeleton"]},"one_liner":"테이블 데이터가 로딩되는 동안 행과 열 형태를 미리 보여주는 스켈레톤.","description":"실제 표가 들어올 구조를 유지해 로딩 중에도 화면 흔들림을 줄인다.","visual_anatomy":["header placeholders","row placeholders","column grid","loading shimmer optional"],"when_to_use":["테이블 데이터를 불러오는 동안 구조를 먼저 보여주고 싶을 때"],"anti_use":["로딩 시간이 매우 짧으면 spinner나 아무 표시 없이도 충분할 수 있다"],"prompt_phrases":["테이블 데이터를 불러오는 동안 skeleton table을 보여줘"]},{"id":"empty-table","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"빈 테이블","aliases":["empty table","빈 표","no rows table"]},"en":{"name":"Empty table","aliases":["No rows table","Empty data table"]},"one_liner":"테이블에 표시할 행이 없을 때 빈 상태와 다음 행동을 보여주는 패턴.","description":"단순히 빈 표만 보여주지 않고 이유, 검색 초기화, 새 항목 추가 같은 행동을 함께 제공한다.","visual_anatomy":["table header","empty body","message","recovery action"],"when_to_use":["필터 결과가 없거나 아직 데이터가 없는 테이블에서"],"anti_use":["오류로 데이터를 못 불러온 상황은 error state로 구분한다"],"prompt_phrases":["테이블에 데이터가 없으면 empty table 상태와 추가 버튼을 보여줘"]},{"id":"table-density-control","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"테이블 밀도 조절","aliases":["table density","density control","행 높이 조절"]},"en":{"name":"Table density control","aliases":["Density control","Row density selector"]},"one_liner":"테이블 행 간격을 compact, default, spacious처럼 바꾸는 컨트롤.","description":"데이터 밀도와 읽기 편안함 사이를 사용자가 선택하게 한다.","visual_anatomy":["density buttons","table rows","row height change","selected density"],"when_to_use":["데이터를 조밀하게 보거나 여유 있게 읽는 요구가 모두 있을 때"],"anti_use":["일반 카드 목록에는 밀도 조절이 과할 수 있다"],"prompt_phrases":["테이블 우측에 compact comfortable density control을 넣어줘"]},{"id":"column-visibility-menu","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"컬럼 표시 메뉴","aliases":["column visibility","컬럼 숨김","표시할 열"]},"en":{"name":"Column visibility menu","aliases":["Show columns menu","Column chooser"]},"one_liner":"테이블에서 어떤 열을 보이거나 숨길지 선택하는 메뉴.","description":"사용자가 자신의 작업에 필요한 컬럼만 남겨 표를 단순하게 만든다.","visual_anatomy":["menu trigger","column checkboxes","visible columns","table preview"],"when_to_use":["컬럼이 많고 사용자마다 필요한 정보가 다를 때"],"anti_use":["컬럼이 적으면 숨김 메뉴가 불필요하다"],"prompt_phrases":["테이블 설정에 column visibility menu를 넣어줘"]},{"id":"saved-view-tabs","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"저장된 뷰 탭","aliases":["saved views","view tabs","저장 필터 탭"]},"en":{"name":"Saved view tabs","aliases":["Saved views","View presets"]},"one_liner":"자주 쓰는 필터나 정렬 조합을 탭처럼 저장해 전환하는 패턴.","description":"전체, 내 작업, 보관됨처럼 목록의 보기 조건을 빠르게 바꾼다. 개인만 보는 뷰와 팀에 공유된 뷰를 함께 저장하는 내부 도구에서는 각 뷰에 personal/shared 배지를 붙여 소유 범위를 구분한다.","visual_anatomy":["tabs","saved filter names","active view","list count","personal or shared scope badge","default view indicator"],"when_to_use":["사용자가 같은 조건 조합을 반복해서 볼 때","팀원과 같은 필터 조합을 공유해야 할 때"],"anti_use":["일회성 필터는 filter chip이나 faceted filter가 낫다"],"prompt_phrases":["전체 내 작업 보관됨 saved view tabs를 테이블 위에 넣어줘","개인 뷰와 팀 공유 뷰를 구분하는 saved view tabs를 만들어줘"],"related":[{"id":"workspace-switcher","relation":"use-with","note":"saved view tabs의 personal/shared 스코프는 workspace switcher가 정하는 현재 팀·조직 컨텍스트 안에서 해석된다 — 뷰 자체를 전환하는 것과 작업 공간을 전환하는 것은 별개의 조작이다"}]},{"id":"filter-panel","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"필터 패널","aliases":["filter panel","filter drawer","필터 사이드 패널"]},"en":{"name":"Filter panel","aliases":["Filter drawer","Filter sidebar"]},"one_liner":"검색 결과나 목록의 여러 필터 조건을 별도 패널에 모아둔 영역.","description":"조건이 많아 한 줄 필터 바에 담기 어려울 때 사이드 패널이나 드로어로 제공한다.","visual_anatomy":["panel surface","filter groups","apply button","reset action"],"when_to_use":["필터 조건이 많고 세부 옵션이 필요할 때"],"anti_use":["간단한 필터 두세 개는 filter bar가 더 빠르다"],"prompt_phrases":["목록 오른쪽에 조건을 고르는 filter panel을 열어줘"]},{"id":"advanced-filter-builder","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"고급 필터 빌더","aliases":["advanced filter","filter builder","조건 빌더"]},"en":{"name":"Advanced filter builder","aliases":["Filter builder","Conditional filter"]},"one_liner":"필드, 연산자, 값을 조합해 복잡한 필터 조건을 만드는 UI.","description":"상태가 활성이고 금액이 10만원 이상 같은 조건식을 사용자가 직접 구성하게 한다.","visual_anatomy":["field selector","operator selector","value input","add condition"],"when_to_use":["데이터 탐색 조건이 다양하고 조합이 복잡할 때"],"anti_use":["초보자용 단순 목록에는 지나치게 어렵다"],"prompt_phrases":["필드 연산자 값을 조합하는 advanced filter builder를 넣어줘"]},{"id":"query-builder","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"쿼리 빌더","aliases":["query builder","조건식 빌더","rules builder"]},"en":{"name":"Query builder","aliases":["Rules builder","Condition builder"]},"one_liner":"여러 조건 그룹을 AND/OR로 묶어 검색 규칙을 만드는 고급 UI.","description":"필터 빌더보다 더 구조화된 규칙 집합을 만들 때 쓴다.","visual_anatomy":["condition rows","and-or selector","nested group","run query action"],"when_to_use":["사용자가 복잡한 검색 규칙을 저장하거나 재사용해야 할 때"],"anti_use":["일반 사용자의 간단한 검색에는 search field가 낫다"],"prompt_phrases":["AND OR 조건을 추가하는 query builder를 만들어줘"]},{"id":"grouped-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"그룹 리스트","aliases":["grouped list","sectioned list","묶음 목록"]},"en":{"name":"Grouped list","aliases":["Sectioned list","Grouped rows"]},"one_liner":"목록 항목을 날짜, 상태, 카테고리 같은 제목 아래에 묶어 보여주는 리스트.","description":"긴 목록을 의미 있는 덩어리로 나눠 스캔하기 쉽게 만든다.","visual_anatomy":["group header","grouped rows","row separators","counts optional"],"when_to_use":["항목이 많고 자연스러운 그룹 기준이 있을 때"],"anti_use":["그룹당 항목이 하나뿐이면 오히려 복잡하다"],"prompt_phrases":["알림을 오늘 어제로 나누는 grouped list로 보여줘"]},{"id":"nested-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"중첩 리스트","aliases":["nested list","하위 목록","nested rows"]},"en":{"name":"Nested list","aliases":["Sublist","Nested rows"]},"one_liner":"목록 안의 항목 아래에 하위 항목을 들여쓰기해 보여주는 구조.","description":"댓글 답글, 카테고리 하위 항목, 작업 subtasks처럼 부모-자식 관계를 표현한다.","visual_anatomy":["parent row","indented child rows","expand state","hierarchy spacing"],"when_to_use":["목록 항목 사이에 위계가 있을 때"],"anti_use":["깊이가 깊어지면 tree view가 더 명확하다"],"prompt_phrases":["작업과 하위 작업을 nested list로 보여줘"]},{"id":"draggable-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"드래그 리스트","aliases":["draggable list","reorderable list","순서 변경 목록"]},"en":{"name":"Draggable list","aliases":["Reorderable list","Drag list"]},"one_liner":"항목을 드래그해 순서를 바꿀 수 있는 목록.","description":"우선순위, 메뉴 순서, 재생목록처럼 사용자가 항목 순서를 직접 정한다.","visual_anatomy":["drag handles","list rows","selected row","reorder position"],"when_to_use":["순서 자체가 중요한 목록에서"],"anti_use":["정렬 기준이 명확하면 sort control이 더 예측 가능하다"],"prompt_phrases":["항목을 드래그해서 순서를 바꾸는 draggable list를 만들어줘"]},{"id":"reorder-handle","status":"draft","category":"action","group":"action-misc","ko":{"name":"순서 변경 핸들","aliases":["reorder handle","drag handle","잡고 끄는 핸들"]},"en":{"name":"Reorder handle","aliases":["Drag handle","Move handle"]},"one_liner":"항목을 잡고 끌어 순서를 바꿀 수 있음을 나타내는 작은 핸들.","description":"점이나 줄 아이콘으로 표현되며 리스트 항목의 왼쪽에 자주 놓인다.","visual_anatomy":["handle icon","row","drag affordance","moved state"],"when_to_use":["행 전체 클릭과 드래그 행동을 구분해야 할 때"],"anti_use":["드래그가 지원되지 않으면 장식으로 두지 않는다"],"prompt_phrases":["리스트 항목 왼쪽에 reorder handle을 넣어줘"]},{"id":"selection-summary","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"선택 요약","aliases":["selection summary","selected summary","선택 개수 표시"]},"en":{"name":"Selection summary","aliases":["Selected summary","Selection count"]},"one_liner":"현재 선택된 항목 수와 적용 가능한 행동을 요약해 보여주는 영역.","description":"row selection이나 multi-select 후 사용자가 선택 상태를 파악하고 해제할 수 있게 한다.","visual_anatomy":["selected count","clear action","bulk action","summary bar"],"when_to_use":["여러 항목 선택 후 사용자가 현재 선택 범위를 알아야 할 때"],"anti_use":["선택 상태가 하나뿐이면 별도 요약이 필요 없다"],"prompt_phrases":["3개 선택됨과 전체 해제가 있는 selection summary를 보여줘"]},{"id":"comparison-table","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"비교 테이블","aliases":["comparison table","비교표","기능 비교"]},"en":{"name":"Comparison table","aliases":["Feature comparison table","Compare table"]},"one_liner":"여러 상품이나 옵션의 속성을 열로 나란히 비교하는 표.","description":"요금제, 제품, 기능 차이를 한눈에 비교하게 한다.","visual_anatomy":["comparison columns","feature rows","checkmarks","highlighted plan"],"when_to_use":["사용자가 여러 선택지를 비교해 결정해야 할 때"],"anti_use":["선택지가 하나뿐이면 일반 description list가 낫다"],"prompt_phrases":["Basic Pro Enterprise를 비교하는 comparison table을 넣어줘"]},{"id":"pivot-table","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"피벗 테이블","aliases":["pivot table","요약 테이블","cross table"]},"en":{"name":"Pivot table","aliases":["Cross table","Summary table"]},"one_liner":"행과 열 기준을 바꿔 데이터를 집계하고 요약하는 고급 테이블.","description":"지역별 월별 매출처럼 차원을 교차해 합계와 소계를 보여준다.","visual_anatomy":["row groups","column groups","aggregate cells","totals"],"when_to_use":["다차원 데이터를 요약 분석해야 할 때"],"anti_use":["단순 행 목록에는 data table이 더 적합하다"],"prompt_phrases":["월별 지역별 매출을 pivot table로 보여줘"]},{"id":"tree-table","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"트리 테이블","aliases":["tree table","treegrid","계층 테이블"]},"en":{"name":"Tree table","aliases":["Treegrid","Hierarchical table"]},"one_liner":"테이블 행이 계층 구조를 갖고 펼치거나 접을 수 있는 데이터 표.","description":"폴더, 조직도, 계정 구조처럼 행에 부모-자식 관계가 있을 때 사용한다.","visual_anatomy":["expandable row","indentation","columns","child rows"],"when_to_use":["계층 데이터와 열 데이터를 동시에 보여줘야 할 때"],"anti_use":["위계만 중요하면 tree view가 더 단순하다"],"prompt_phrases":["폴더 구조를 펼칠 수 있는 tree table로 보여줘"]},{"id":"expandable-row","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"펼침 행","aliases":["expandable row","expandable table row","상세 펼침 행"]},"en":{"name":"Expandable row","aliases":["Expandable table row","Row disclosure"]},"one_liner":"테이블이나 리스트 행을 펼쳐 추가 정보를 같은 자리에서 보여주는 패턴.","description":"별도 상세 화면으로 이동하지 않고 요약 행 아래에 상세를 드러낸다.","visual_anatomy":["row trigger","chevron","expanded content","nested area"],"when_to_use":["행별 상세가 짧고 현재 맥락에서 바로 확인해야 할 때"],"anti_use":["상세가 길거나 편집이 복잡하면 detail panel이 낫다"],"prompt_phrases":["테이블 행을 클릭하면 상세가 펼쳐지는 expandable row를 넣어줘"]},{"id":"detail-row","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"상세 행","aliases":["detail row","row details","테이블 상세 행"]},"en":{"name":"Detail row","aliases":["Row details","Detail panel row"]},"one_liner":"선택된 행 아래에 추가 세부 정보를 별도 행처럼 표시하는 영역.","description":"expandable row의 확장 영역으로, 메타데이터나 보조 액션을 보여준다.","visual_anatomy":["selected row","detail area","metadata","secondary actions"],"when_to_use":["테이블 행의 보조 정보를 빠르게 보여줘야 할 때"],"anti_use":["상세 정보가 많으면 side sheet나 master-detail이 낫다"],"prompt_phrases":["주문 행 아래에 배송 정보 detail row를 펼쳐줘"]},{"id":"audit-log","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"감사 로그","aliases":["audit log","변경 이력","보안 로그"]},"en":{"name":"Audit log","aliases":["Change log","Security log"]},"one_liner":"누가 언제 어떤 중요한 변경을 했는지 구조적으로 기록해 보여주는 목록.","description":"활동 피드보다 더 엄격하게 actor, action, target, timestamp를 보여준다.","visual_anatomy":["actor","action","target","timestamp","filter controls"],"when_to_use":["권한","결제","설정 변경처럼 추적 가능성이 중요한 이벤트에서"],"anti_use":["가벼운 소셜 활동에는 activity feed가 더 자연스럽다"],"prompt_phrases":["관리자 설정 변경 내역을 audit log로 보여줘"],"related":[{"id":"activity-feed","relation":"compare","note":"audit log는 컴플라이언스급 불변 기록으로 actor-action-target-timestamp를 엄격히 구조화하고, activity feed는 협업 맥락의 소셜/최근 활동 스트림으로 더 가볍게 보여준다"}]},{"id":"workspace-switcher","status":"draft","category":"selection","group":"selection-context","ko":{"name":"워크스페이스 전환기","aliases":["workspace switcher","조직 전환","팀 전환"]},"en":{"name":"Workspace switcher","aliases":["Organization switcher","Team switcher"]},"one_liner":"현재 작업 공간이나 조직을 선택하고 다른 공간으로 전환하는 메뉴.","description":"SaaS 앱에서 개인/팀/조직 컨텍스트를 바꾸는 상단 또는 사이드바 컨트롤이다.","visual_anatomy":["current workspace","avatar or logo","dropdown menu","workspace list"],"when_to_use":["사용자가 여러 조직이나 프로젝트 공간을 오갈 때"],"anti_use":["단일 조직 앱에는 필요 없다"],"prompt_phrases":["사이드바 상단에 현재 팀을 바꾸는 workspace switcher를 넣어줘"]},{"id":"account-switcher","status":"draft","category":"selection","group":"selection-context","ko":{"name":"계정 전환기","aliases":["account switcher","프로필 전환","사용자 전환"]},"en":{"name":"Account switcher","aliases":["Profile switcher","User switcher"]},"one_liner":"현재 로그인 계정을 확인하고 다른 계정으로 전환하는 메뉴.","description":"사용자 아바타와 이메일, 계정 목록, 로그아웃 같은 행동을 함께 제공한다.","visual_anatomy":["avatar","current account","account list","sign out action"],"when_to_use":["여러 계정 사용이나 프로필 관리가 필요한 앱에서"],"anti_use":["인증이 없는 앱에는 불필요하다"],"prompt_phrases":["우측 상단 아바타를 누르면 account switcher가 열리게 해줘"]},{"id":"versioned-docs-switcher","status":"draft","category":"selection","group":"selection-context","kind":"block","ko":{"name":"문서 버전 스위처","aliases":["versioned docs switcher","문서 버전 전환","버전 드롭다운"]},"en":{"name":"Versioned docs switcher","aliases":["Docs version switcher","Version dropdown with stale banner"]},"one_liner":"navbar 버전 드롭다운과 과거/미출시 버전 경고 배너로 구성된 문서 버전 전환 패턴.","description":"여러 버전이 공존하는 문서 사이트에서 현재 보고 있는 버전을 드롭다운으로 바꾸고, 최신이 아닌 버전을 볼 때 상단에 안내 배너를 띄운다. 선택한 버전에 따라 사이드바 트리 전체가 교체된다. 교체된 트리 내부에서는 최상위 그룹은 항상 펼쳐진 채로, 하위 그룹만 개별적으로 펼침/접힘 기본값을 가진다 — 버전 전환은 어떤 트리를 보여줄지 정하고, 펼침/접힘은 그 트리를 어떻게 보여줄지 정하는 별개의 축이다.","visual_anatomy":["navbar version dropdown","latest-selected default","stale version banner","link to latest version","sidebar tree swap","top-level group always expanded","nested group collapse/expand toggle with a per-group default"],"when_to_use":["제품/문서가 여러 메이저 버전을 동시에 공개하고 사용자가 과거 버전 문서를 볼 수 있어야 할 때"],"anti_use":["단일 버전만 유지되는 문서에는 불필요하다","조직/워크스페이스 전환은 workspace-switcher를 쓴다"],"prompt_phrases":["navbar에 문서 버전 드롭다운을 넣어줘","오래된 버전을 보고 있으면 상단에 경고 배너를 띄워줘"],"related":[{"id":"workspace-switcher","relation":"compare","note":"workspace-switcher는 조직/팀 컨텍스트를 바꾸고, versioned-docs-switcher는 같은 문서의 다른 버전 스냅샷으로 전환한다 — 대상이 조직이 아니라 문서 버전이라는 점이 다르다."}]},{"id":"global-header","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"전역 헤더","aliases":["global header","글로벌 헤더","최상단 헤더"]},"en":{"name":"Global header","aliases":["App header","Global navigation header"]},"one_liner":"앱 전체에 공통으로 고정되는 최상단 탐색과 계정 영역.","description":"제품 로고, 전역 탐색, 검색, 알림, 계정 메뉴처럼 모든 화면에서 필요한 항목을 배치한다.","visual_anatomy":["brand","primary navigation","global search","utility actions","account menu"],"when_to_use":["여러 페이지를 가진 앱에서 전역 이동과 계정 행동이 필요할 때"],"anti_use":["단일 화면 위젯에는 별도 global header가 과하다"],"prompt_phrases":["로고 검색 알림 아바타가 있는 global header를 만들어줘"]},{"id":"utility-bar","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"유틸리티 바","aliases":["utility bar","보조 도구 바","상단 보조 바"]},"en":{"name":"Utility bar","aliases":["Utility toolbar","Secondary app bar"]},"one_liner":"현재 화면의 보조 도구, 상태, 빠른 설정을 한 줄로 모은 영역.","description":"필터, 보기 방식, 동기화 상태, 도움말처럼 전역 탐색보다 낮은 우선순위의 기능을 제공한다.","visual_anatomy":["secondary controls","status text","quick actions","compact layout"],"when_to_use":["페이지마다 자주 쓰는 보조 도구가 여러 개 있을 때"],"anti_use":["주요 CTA를 숨기는 잡다한 버튼 모음으로 쓰지 않는다"],"prompt_phrases":["필터 보기 옵션 동기화 상태가 있는 utility bar를 넣어줘"]},{"id":"command-bar","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"커맨드 바","aliases":["command bar","명령 바","액션 바"]},"en":{"name":"Command bar","aliases":["Action command bar","Command toolbar"]},"one_liner":"선택된 문서나 데이터에 적용할 주요 명령을 한 줄로 모은 도구 막대.","description":"저장, 공유, 복제, 삭제처럼 현재 작업 대상에 대한 명령을 빠르게 실행하게 한다.","visual_anatomy":["primary command","secondary commands","overflow menu","target context"],"when_to_use":["편집기나 관리 화면에서 명령이 여러 개 반복적으로 쓰일 때"],"anti_use":["전역 탐색 링크를 command bar에 섞지 않는다"],"prompt_phrases":["저장 공유 삭제와 더보기 메뉴가 있는 command bar를 만들어줘"]},{"id":"status-bar","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"상태 표시줄","aliases":["status bar","상태 바","하단 상태줄"]},"en":{"name":"Status bar","aliases":["Bottom status bar","Editor status bar"]},"one_liner":"현재 문서, 연결, 저장, 선택 상태를 작게 지속 표시하는 막대.","description":"편집기나 대시보드 하단에서 저장됨, 온라인, 선택 수, 좌표 같은 주변 상태 정보를 제공한다.","visual_anatomy":["status segments","connection state","selection count","compact indicators"],"when_to_use":["작업 중 계속 참고해야 하는 보조 상태가 있을 때"],"anti_use":["중요 오류나 확인 요청을 작게 묻어두지 않는다"],"prompt_phrases":["화면 하단에 온라인과 저장됨을 표시하는 status bar를 넣어줘"]},{"id":"breadcrumb-header","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"브레드크럼 헤더","aliases":["breadcrumb header","경로 헤더","위치 헤더"]},"en":{"name":"Breadcrumb header","aliases":["Path header","Location header"]},"one_liner":"상단 제목 영역에 현재 위치 경로와 페이지 제목을 함께 보여주는 헤더.","description":"깊은 정보 구조에서 사용자가 현재 위치를 확인하고 상위 경로로 이동할 수 있게 한다.","visual_anatomy":["breadcrumb trail","page title","optional actions","hierarchy context"],"when_to_use":["문서","설정","관리 화면처럼 깊은 계층이 있을 때"],"anti_use":["평면 구조 앱에서 장식용 경로를 만들지 않는다"],"prompt_phrases":["브레드크럼과 페이지 제목이 같이 있는 breadcrumb header를 넣어줘"]},{"id":"page-title-bar","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"페이지 제목 바","aliases":["page title bar","페이지 헤더","타이틀 바"]},"en":{"name":"Page title bar","aliases":["Page header bar","Title bar"]},"one_liner":"페이지 제목, 설명, 주요 액션을 한 영역에 묶는 상단 헤더.","description":"화면이 무엇인지 설명하고 가장 중요한 생성, 저장, 내보내기 같은 액션을 가까이 둔다.","visual_anatomy":["page title","supporting text","primary action","secondary actions"],"when_to_use":["목록","설정","리포트 화면의 목적과 주요 행동을 명확히 해야 할 때"],"anti_use":["이미 global header가 화면 제목을 충분히 설명하면 중복하지 않는다"],"prompt_phrases":["제목 설명 새로 만들기 버튼이 있는 page title bar를 만들어줘"]},{"id":"content-tabs","status":"draft","category":"selection","group":"selection-options","ko":{"name":"콘텐츠 탭","aliases":["content tabs","section tabs","내부 탭"]},"en":{"name":"Content tabs","aliases":["Section tabs","In-page tabs"]},"one_liner":"같은 페이지 안에서 관련 콘텐츠 섹션을 탭으로 전환하는 패턴.","description":"전역 네비게이션이 아니라 상세 화면 안의 개요, 활동, 설정 같은 하위 콘텐츠를 나눈다.","visual_anatomy":["tab list","active tab","content panel","section scope"],"when_to_use":["한 리소스 안의 관련 정보를 짧은 섹션으로 나눌 때"],"anti_use":["서로 다른 페이지 이동은 navigation tab이나 sidebar가 낫다"],"prompt_phrases":["상세 화면에 개요 활동 설정 content tabs를 넣어줘"]},{"id":"right-rail","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"우측 레일","aliases":["right rail","오른쪽 보조 패널","사이드 레일"]},"en":{"name":"Right rail","aliases":["Side rail","Right sidebar"]},"one_liner":"본문 오른쪽에 보조 정보나 도구를 세로로 배치하는 좁은 영역.","description":"관련 항목, 도움말, 속성 요약처럼 본문을 방해하지 않고 참고해야 하는 정보를 둔다.","visual_anatomy":["main content","narrow right column","supporting cards","sticky area"],"when_to_use":["본문과 함께 참고해야 할 보조 정보가 있을 때"],"anti_use":["핵심 작업을 좁은 rail 안에 가두지 않는다"],"prompt_phrases":["본문 오른쪽에 관련 문서와 상태를 보여주는 right rail을 넣어줘"]},{"id":"inspector-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"인스펙터 패널","aliases":["inspector panel","검사 패널","선택 항목 패널"]},"en":{"name":"Inspector panel","aliases":["Object inspector","Selection inspector"]},"one_liner":"선택한 객체의 속성과 상태를 오른쪽에서 확인하고 조정하는 패널.","description":"디자인 도구, 빌더, 관리 도구에서 현재 선택 항목의 세부 정보를 보여준다.","visual_anatomy":["selected object title","property groups","controls","preview metadata"],"when_to_use":["캔버스나 리스트에서 선택한 대상의 속성을 편집해야 할 때"],"anti_use":["전역 설정처럼 선택 대상과 무관한 정보는 settings panel이 낫다"],"prompt_phrases":["선택한 카드의 속성을 보여주는 inspector panel을 만들어줘"]},{"id":"properties-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"속성 패널","aliases":["properties panel","프로퍼티 패널","속성 편집 영역"]},"en":{"name":"Properties panel","aliases":["Property panel","Property editor"]},"one_liner":"선택 항목이나 설정 대상의 값을 폼 컨트롤로 편집하는 패널.","description":"인스펙터보다 편집 폼 성격이 강하며 라벨, 입력, 토글, 셀렉트가 그룹으로 배치된다.","visual_anatomy":["property labels","form controls","grouped sections","apply state"],"when_to_use":["사용자가 대상의 여러 속성을 한곳에서 조정해야 할 때"],"anti_use":["단일 값만 바꾸면 inline edit이나 popover가 더 가볍다"],"prompt_phrases":["오른쪽에 색상 크기 공개 여부를 바꾸는 properties panel을 넣어줘"]},{"id":"preview-pane","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"미리보기 패널","aliases":["preview pane","프리뷰 패널","미리보기 영역"]},"en":{"name":"Preview pane","aliases":["Preview panel","Reading pane"]},"one_liner":"목록이나 편집 결과를 선택 즉시 옆에서 미리 보여주는 영역.","description":"이메일, 파일, 템플릿, 리포트처럼 선택 결과를 열기 전에 확인할 수 있게 한다.","visual_anatomy":["source list","preview area","title","content snapshot"],"when_to_use":["항목을 빠르게 훑고 비교해야 할 때"],"anti_use":["미리보기 내용이 복잡한 전체 작업이면 detail page가 낫다"],"prompt_phrases":["왼쪽 목록을 고르면 오른쪽에 preview pane이 바뀌게 해줘"]},{"id":"canvas-toolbar","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"캔버스 툴바","aliases":["canvas toolbar","작업 캔버스 도구막대","편집 툴바"]},"en":{"name":"Canvas toolbar","aliases":["Editor toolbar","Canvas tool palette"]},"one_liner":"캔버스 위나 옆에서 선택, 그리기, 확대 같은 편집 도구를 제공하는 막대.","description":"디자인 편집기나 화이트보드에서 현재 도구 모드와 캔버스 조작을 빠르게 바꾼다.","visual_anatomy":["tool buttons","selected tool","zoom control","canvas context"],"when_to_use":["사용자가 캔버스 객체를 직접 만들고 조작할 때"],"anti_use":["일반 목록 화면의 액션을 캔버스 툴처럼 표현하지 않는다"],"prompt_phrases":["캔버스 왼쪽에 선택 펜 도형 도구가 있는 canvas toolbar를 붙여줘"]},{"id":"floating-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"플로팅 패널","aliases":["floating panel","떠 있는 패널","floating palette"]},"en":{"name":"Floating panel","aliases":["Floating palette","Floating inspector"]},"one_liner":"화면 흐름 위에 떠서 이동 가능한 보조 도구나 정보를 담는 패널.","description":"캔버스나 지도처럼 넓은 작업면 위에서 맥락 도구를 가볍게 제공한다.","visual_anatomy":["floating surface","shadow","compact controls","draggable affordance"],"when_to_use":["작업면을 유지한 채 보조 도구를 가까이 두고 싶을 때"],"anti_use":["읽기 화면에서 장식 패널을 띄워 본문을 가리지 않는다"],"prompt_phrases":["캔버스 위에 이동 가능한 floating panel을 만들어줘"]},{"id":"dockable-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"도킹 패널","aliases":["dockable panel","고정 가능한 패널","dock panel"]},"en":{"name":"Dockable panel","aliases":["Dock panel","Docked panel"]},"one_liner":"떠 있는 패널을 화면 가장자리나 레이아웃 안에 고정할 수 있는 패턴.","description":"전문 도구에서 사용자가 작업 방식에 맞춰 패널을 붙이거나 분리해 배치한다.","visual_anatomy":["panel surface","dock target","attached state","undocked state"],"when_to_use":["고급 사용자가 작업 공간 배치를 자주 바꾸는 생산성 도구에서"],"anti_use":["초보자용 단순 앱에서는 배치 자유도가 오히려 부담이다"],"prompt_phrases":["오른쪽에 붙이거나 띄울 수 있는 dockable panel을 구현해줘"]},{"id":"collapsible-sidebar","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"접이식 사이드바","aliases":["collapsible sidebar","접히는 사이드바","collapse nav"]},"en":{"name":"Collapsible sidebar","aliases":["Collapsible navigation","Expandable sidebar"]},"one_liner":"넓은 메뉴를 아이콘만 남기거나 다시 펼칠 수 있는 좌측 탐색 영역.","description":"화면 공간을 아끼면서도 앱의 주요 탐색 구조를 유지한다.","visual_anatomy":["expanded sidebar","collapsed rail","toggle control","nav items"],"when_to_use":["데스크톱 앱에서 탐색 메뉴가 크고 작업 공간도 넓게 필요할 때"],"anti_use":["모바일에서는 drawer나 bottom navigation이 더 자연스럽다"],"prompt_phrases":["좌측 사이드바를 접으면 아이콘만 남는 collapsible sidebar로 만들어줘"]},{"id":"mini-sidebar","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"미니 사이드바","aliases":["mini sidebar","아이콘 사이드바","compact sidebar"]},"en":{"name":"Mini sidebar","aliases":["Icon sidebar","Compact sidebar"]},"one_liner":"아이콘 중심의 매우 좁은 세로 탐색 영역.","description":"상세 라벨 대신 툴팁이나 선택 상태로 주요 섹션 이동을 제공한다.","visual_anatomy":["icon rail","active item","compact width","optional tooltip"],"when_to_use":["사용자가 아이콘 의미를 익힌 반복 사용 앱에서"],"anti_use":["초보자에게 처음 보이는 주요 탐색에는 라벨 없는 아이콘만 쓰지 않는다"],"prompt_phrases":["왼쪽에 아이콘만 있는 mini sidebar를 넣어줘"]},{"id":"responsive-stack","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"반응형 스택","aliases":["responsive stack","responsive layout stack","모바일 스택"]},"en":{"name":"Responsive stack","aliases":["Stacked responsive layout","Mobile stack"]},"one_liner":"데스크톱의 가로 배치를 좁은 화면에서 세로로 쌓는 레이아웃 패턴.","description":"카드, 폼, 패널이 화면 폭에 따라 열 구조에서 단일 열 구조로 바뀐다.","visual_anatomy":["wide columns","narrow stacked layout","breakpoint","consistent spacing"],"when_to_use":["같은 콘텐츠를 데스크톱과 모바일에서 모두 읽기 쉽게 보여줘야 할 때"],"anti_use":["정보 우선순위가 바뀌어야 하면 단순 stack만으로 해결하지 않는다"],"prompt_phrases":["데스크톱에서는 3열","모바일에서는 세로로 쌓이는 responsive stack을 만들어줘"]},{"id":"mobile-bottom-sheet","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 바텀 시트","aliases":["mobile bottom sheet","바텀시트","하단 시트"]},"en":{"name":"Mobile bottom sheet","aliases":["Bottom sheet","Modal bottom sheet"]},"one_liner":"모바일 화면 하단에서 올라오는 작업 또는 선택 패널.","description":"작은 화면에서 추가 선택지, 필터, 간단한 폼을 현재 맥락 위에 표시한다.","visual_anatomy":["scrim","bottom surface","drag handle","action rows"],"when_to_use":["모바일에서 현재 화면을 유지한 채 보조 선택을 받아야 할 때"],"anti_use":["복잡한 긴 폼은 별도 화면이나 dialog가 낫다"],"prompt_phrases":["모바일에서 필터를 누르면 bottom sheet가 올라오게 해줘"]},{"id":"safe-area","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"안전 영역","aliases":["safe area","세이프 에어리어","노치 여백","홈 인디케이터 여백","세이프 에어리어 레이아웃 패턴"]},"en":{"name":"Safe area","aliases":["Safe area inset","System inset","Safe area layout pattern"]},"one_liner":"노치, 둥근 모서리, 홈 인디케이터에 가려지지 않도록 비워두는 모바일 화면 영역.","description":"모바일 화면의 상단과 하단 시스템 영역을 피해 콘텐츠와 버튼을 배치하게 해준다.","visual_anatomy":["phone frame","top inset","bottom home indicator inset","content safe bounds"],"when_to_use":["모바일 화면 가장자리에 버튼이나 입력창을 배치할 때","전체 화면 레이아웃에서 시스템 UI와 겹침을 피해야 할 때"],"anti_use":["데스크톱 웹 레이아웃의 일반 margin과 혼동하지 않는다","safe area 안쪽 콘텐츠를 과하게 좁히지 않는다"],"prompt_phrases":["모바일 화면에서 safe area를 고려해서 하단 버튼이 홈 인디케이터와 겹치지 않게 해줘"]},{"id":"mobile-status-bar","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 상태 바","aliases":["mobile status bar","상단 시스템 바","시간 배터리 영역"]},"en":{"name":"Mobile status bar","aliases":["Status bar","System status bar"]},"one_liner":"모바일 화면 맨 위에서 시간, 신호, 배터리 같은 시스템 상태를 보여주는 영역.","description":"앱 콘텐츠 위에 놓이는 시스템 chrome이라서 헤더와 콘텐츠가 이 영역을 침범하지 않도록 고려해야 한다.","visual_anatomy":["time","signal indicator","battery indicator","top system strip"],"when_to_use":["모바일 mockup에서 실제 폰 화면 맥락을 보여줄 때","상단 app bar와 시스템 영역을 구분해야 할 때"],"anti_use":["앱 내부 상태 표시줄인 status-bar와 혼동하지 않는다","중요한 앱 알림을 시스템 상태 바에 넣지 않는다"],"prompt_phrases":["모바일 목업 상단에 시간과 배터리가 보이는 status bar를 넣어줘"]},{"id":"mobile-app-bar","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 앱 바","aliases":["mobile app bar","모바일 상단바","앱 상단바","top app bar"]},"en":{"name":"Mobile app bar","aliases":["Top app bar","Mobile top bar"]},"one_liner":"모바일 화면 상단에서 제목, 뒤로가기나 메뉴, 주요 액션을 담는 앱 내부 헤더.","description":"현재 화면의 위치와 기본 행동을 작은 화면 상단에 고정해 사용자가 맥락을 잃지 않게 한다.","visual_anatomy":["top bar surface","title","navigation icon","trailing action icons"],"when_to_use":["모바일 앱의 각 화면 제목과 기본 액션을 보여줄 때","뒤로가기나 메뉴 버튼이 필요한 화면에서"],"anti_use":["웹사이트의 넓은 navigation bar처럼 많은 링크를 넣지 않는다","하단 탭과 같은 목적지 전환을 대신하지 않는다"],"prompt_phrases":["모바일 화면 상단에 제목과 뒤로가기 아이콘이 있는 app bar를 넣어줘"]},{"id":"large-title-header","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"큰 제목 헤더","aliases":["large title header","라지 타이틀","큰 타이틀 상단바","접히는 큰 제목","내비게이션 스택 헤더"]},"en":{"name":"Large title header","aliases":["Large title navigation bar","Collapsing large title","Navigation stack header"]},"one_liner":"모바일 화면 상단에서 큰 제목을 보여주고 스크롤 시 작게 접히는 헤더 패턴.","description":"목록이나 홈 화면에서 현재 섹션을 강하게 드러내다가, 스크롤 후에는 공간을 아껴 compact header처럼 동작한다. 계층형 드릴다운 화면에서는 뒤로가기 버튼과 함께 쓰이며, 뒤로가기는 시트 dismiss와 혼동해서는 안 되는 별개의 동작이다.","visual_anatomy":["large title text","top safe area","collapsing header","content list below","optional back button"],"when_to_use":["모바일 앱의 첫 화면이나 주요 목록에서 섹션 이름을 크게 보여줄 때"],"anti_use":["작업 폼이나 밀도 높은 화면에는 공간을 많이 차지할 수 있다","데스크톱 hero headline과 혼동하지 않는다"],"prompt_phrases":["모바일 목록 화면 상단에 스크롤하면 접히는 large title header를 넣어줘"],"related":[{"id":"top-app-bar","relation":"compare","note":"스크롤 방향에 따라 바가 나타나거나 사라지는 show/hide 규칙은 large-title-header의 큰 제목 접힘과 별개로 top-app-bar 자체에도 적용된다. 스크린리더가 활성 상태일 때는 스크롤로 바를 숨기지 않는 접근성 예외가 두 항목 모두에 적용된다."}]},{"id":"bottom-app-bar","status":"draft","category":"action","group":"action-buttons","ko":{"name":"하단 앱 바","aliases":["bottom app bar","하단 액션 바","모바일 하단바"]},"en":{"name":"Bottom app bar","aliases":["Bottom action bar","Mobile bottom bar"]},"one_liner":"모바일 화면 아래에서 주요 행동과 보조 명령을 담는 고정 액션 바.","description":"엄지로 누르기 쉬운 하단 영역에 메뉴, FAB, 주요 액션을 배치해 반복 행동을 빠르게 실행하게 한다.","visual_anatomy":["bottom bar surface","primary action","secondary icons","safe-area spacing"],"when_to_use":["모바일에서 주요 액션을 항상 접근 가능하게 둘 때","상단보다 하단 조작이 더 편한 화면에서"],"anti_use":["최상위 목적지 전환에는 bottom navigation이나 tab bar가 더 적합하다","너무 많은 행동을 넣지 않는다"],"prompt_phrases":["모바일 화면 하단에 주요 추가 버튼이 있는 bottom app bar를 넣어줘"]},{"id":"mobile-search-header","status":"draft","category":"input","group":"input-search-command","ko":{"name":"모바일 검색 헤더","aliases":["mobile search header","상단 검색창","검색 상단바","검색 헤더"]},"en":{"name":"Mobile search header","aliases":["Search app bar","Search header"]},"one_liner":"모바일 화면 상단 헤더 영역에 검색 입력창을 직접 배치한 패턴.","description":"목록, 장소, 메시지처럼 검색이 화면의 핵심 행동일 때 제목 대신 검색창을 상단에 고정한다.","visual_anatomy":["top search field","search icon","placeholder","optional clear button","result list below"],"when_to_use":["모바일에서 사용자가 화면 진입 직후 검색해야 할 때","검색 결과 목록과 입력을 함께 유지해야 할 때"],"anti_use":["간단한 보조 검색이면 일반 search-field를 콘텐츠 안에 둘 수 있다","복잡한 검색 흐름은 mobile-search-sheet가 낫다"],"prompt_phrases":["모바일 목록 화면 상단을 검색창으로 만든 search header를 넣어줘"]},{"id":"mobile-segmented-tabs","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"모바일 세그먼트 탭","aliases":["mobile segmented tabs","상단 세그먼트 탭","모바일 구분 탭","세그먼트 뷰 전환기"]},"en":{"name":"Mobile segmented tabs","aliases":["Segmented tabs","Mobile segmented control","Segmented view switcher"]},"one_liner":"모바일 화면 상단에서 같은 화면 안의 하위 보기들을 짧은 세그먼트 버튼으로 전환하는 패턴.","description":"전체/인기/내 항목처럼 같은 맥락의 보기만 빠르게 바꿀 때, 탭보다 compact한 형태로 쓴다.","visual_anatomy":["segmented container","two to four options","selected segment","content below"],"when_to_use":["모바일에서 같은 화면의 하위 필터나 보기 모드를 전환할 때"],"anti_use":["앱의 최상위 목적지 전환에는 tab bar나 bottom navigation을 쓴다","옵션이 많으면 chip group이나 dropdown을 검토한다"],"prompt_phrases":["모바일 화면 상단에 전체 인기 내 글을 바꾸는 segmented tabs를 넣어줘"]},{"id":"standard-bottom-sheet","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"표준 바텀 시트","aliases":["standard bottom sheet","아래에서 올라오는 창","하단 패널","바텀시트"]},"en":{"name":"Standard bottom sheet","aliases":["Bottom sheet","Persistent bottom sheet"]},"one_liner":"모바일 화면 아래에서 올라와 보조 정보나 선택지를 보여주는 비차단 시트.","description":"현재 화면 맥락을 유지하면서 필터, 세부 정보, 간단한 선택지를 하단에서 보여준다.","visual_anatomy":["phone screen","bottom sheet surface","drag handle","content rows","underlying page"],"when_to_use":["모바일에서 현재 화면을 유지한 채 보조 선택지를 보여줄 때","지도나 목록 위에 요약 패널을 붙일 때"],"anti_use":["사용자 결정을 반드시 막아야 하면 modal-bottom-sheet나 dialog를 쓴다"],"prompt_phrases":["아래에서 올라오는 standard bottom sheet에 필터 옵션을 보여줘"]},{"id":"modal-bottom-sheet","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모달 바텀 시트","aliases":["modal bottom sheet","막는 바텀시트","아래에서 뜨는 모달","하단 모달"]},"en":{"name":"Modal bottom sheet","aliases":["Blocking bottom sheet","Modal sheet"]},"one_liner":"배경을 어둡게 막고 하단에서 올라와 사용자의 선택을 요구하는 모바일 시트.","description":"중요한 선택, 확인, 짧은 폼처럼 완료 전까지 현재 화면 조작을 막아야 할 때 쓴다.","visual_anatomy":["scrim","bottom sheet","drag handle","primary action","underlying page"],"when_to_use":["모바일에서 짧지만 집중이 필요한 선택이나 폼을 받을 때"],"anti_use":["긴 작업 흐름은 full-screen-dialog나 별도 화면이 더 적합하다"],"prompt_phrases":["배경을 어둡게 깔고 아래에서 modal bottom sheet가 올라오게 해줘"],"related":[{"id":"dialog","relation":"compare","note":"중앙 집중 창이면 dialog, 모바일 하단에서 올라오는 짧은 선택/폼이면 modal bottom sheet가 자연스럽다."},{"id":"drawer","relation":"compare","note":"측면 패널이면 drawer, 하단에서 배경을 막고 올라오면 modal bottom sheet다."},{"id":"side-sheet","relation":"alternative","note":"데스크톱의 보조 상세/편집 패널은 side sheet가 더 적합할 수 있다."}]},{"id":"action-sheet","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"액션 시트","aliases":["action sheet","작업 시트","하단 액션 메뉴","모바일 액션 메뉴"]},"en":{"name":"Action sheet","aliases":["Action menu sheet","Bottom action menu"]},"one_liner":"모바일 화면 하단에서 여러 작업 명령을 목록으로 보여주는 메뉴형 시트.","description":"공유, 복사, 삭제처럼 현재 항목에 대한 행동을 엄지 조작 영역에 모아 보여준다.","visual_anatomy":["bottom sheet surface","action rows","destructive action","cancel or close area"],"when_to_use":["모바일에서 한 항목에 대한 여러 행동을 선택하게 할 때"],"anti_use":["최상위 탐색에는 쓰지 않는다","자주 쓰는 단일 행동은 버튼으로 노출한다"],"prompt_phrases":["카드 더보기 버튼을 누르면 아래에서 action sheet가 올라오게 해줘"]},{"id":"share-sheet","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"공유 시트","aliases":["share sheet","공유 패널","공유 대상 선택","모바일 공유창"]},"en":{"name":"Share sheet","aliases":["Sharing sheet","Share panel"]},"one_liner":"링크나 콘텐츠를 보낼 대상과 공유 행동을 모바일 하단 패널로 보여주는 UI.","description":"사용자에게 메시지, 메일, 링크 복사 같은 공유 대상을 빠르게 선택하게 한다.","visual_anatomy":["share title","share targets","action icons","bottom sheet surface"],"when_to_use":["콘텐츠","상품","장소","문서를 다른 앱이나 사람에게 보내게 할 때"],"anti_use":["앱 내부 단순 초대 흐름이면 전용 invite form이 더 명확할 수 있다"],"prompt_phrases":["공유 버튼을 누르면 share sheet가 열리고 링크 복사와 메일 보내기를 보여줘"]},{"id":"full-screen-dialog","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"전체 화면 다이얼로그","aliases":["full-screen dialog","전체 화면 모달","모바일 전체 화면 편집"]},"en":{"name":"Full-screen dialog","aliases":["Fullscreen dialog","Full-screen modal"]},"one_liner":"모바일에서 복잡한 작업을 별도 화면처럼 전체 화면으로 여는 모달.","description":"작은 dialog나 bottom sheet에 담기 어려운 편집, 작성, 설정 흐름을 현재 맥락 위의 전체 화면 작업으로 만든다.","visual_anatomy":["full-screen surface","close button","title","save action","form content"],"when_to_use":["모바일에서 작성이나 편집처럼 집중 작업이 필요할 때"],"anti_use":["단순 확인에는 alert dialog나 bottom sheet가 더 가볍다"],"prompt_phrases":["모바일에서 프로필 편집을 full-screen dialog로 열어줘"]},{"id":"permission-prompt","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"권한 요청 프롬프트","aliases":["permission prompt","권한 요청 화면","권한 요청 팝업","알림 권한 요청","위치 권한 요청"]},"en":{"name":"Permission prompt","aliases":["Permission request prompt","System permission prompt"]},"one_liner":"카메라, 위치, 알림 같은 권한 허용을 사용자에게 묻는 모바일 프롬프트.","description":"실제 시스템 권한 요청 전후로 앱이 사용자에게 권한의 필요성과 선택을 보여주는 화면 요소다.","visual_anatomy":["system-like dialog","permission icon","allow action","deny action","dimmed background"],"when_to_use":["권한 없이는 기능을 쓸 수 없을 때","사용자의 명시적 허용이 필요한 기능에서"],"anti_use":["맥락 없이 앱 시작 직후 모든 권한을 한꺼번에 요구하지 않는다"],"prompt_phrases":["알림 기능을 켤 때 permission prompt를 띄워서 허용 여부를 물어봐줘"],"related":[{"id":"permission-education-screen","relation":"use-with","note":"온보딩에서 여러 권한이 필요하면, 권한마다 permission-education-screen(soft-ask) 뒤에 이 시스템 프롬프트를 이어붙이되, 모든 권한을 한 번에 몰아 묻지 않고 해당 기능을 실제로 쓰는 시점마다 하나씩 순차 요청한다."}]},{"id":"permission-education-screen","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"권한 안내 화면","aliases":["permission education screen","권한 요청 화면","권한 설명 화면","권한 전 안내","pre-permission screen"]},"en":{"name":"Permission education screen","aliases":["Pre-permission screen","Permission explainer"]},"one_liner":"시스템 권한을 요청하기 전에 왜 필요한지 앱 안에서 먼저 설명하는 모바일 화면.","description":"권한 요청의 이유와 사용자 이득을 설명해 갑작스러운 시스템 팝업보다 이해하기 쉽게 만든다.","visual_anatomy":["permission icon","benefit headline","explanation text","continue button"],"when_to_use":["권한 거부율을 낮추고 싶을 때","카메라나 위치처럼 민감한 권한을 요청하기 전"],"anti_use":["실제 권한 요청을 숨기거나 강제로 유도하는 dark pattern으로 쓰지 않는다"],"prompt_phrases":["위치 권한을 요청하기 전에 왜 필요한지 설명하는 permission education screen을 넣어줘"],"related":[{"id":"permission-prompt","relation":"use-with","note":"온보딩에서 여러 권한이 필요하면, 이 soft-ask 화면 뒤에 permission-prompt를 이어붙이되, 모든 권한을 한 번에 몰아 묻지 않고 해당 기능을 실제로 쓰는 시점마다 하나씩 순차 요청한다."}]},{"id":"mobile-snackbar","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"모바일 스낵바","aliases":["mobile snackbar","하단 스낵바","하단 피드백 바","액션 스낵바"]},"en":{"name":"Mobile snackbar","aliases":["Bottom snackbar","Action snackbar","Snackbar with action"]},"one_liner":"모바일 화면 하단, 내비게이션 위에 잠깐 나타나 결과와 짧은 행동을 보여주는 피드백.","description":"저장됨, 실행 취소, 재시도처럼 작업 직후의 상태와 보조 행동을 엄지 영역 근처에 보여준다.","visual_anatomy":["bottom message bar","short text","optional action","navigation-safe placement"],"when_to_use":["모바일에서 작업 결과를 방해 없이 알려줄 때","실행 취소 같은 짧은 행동을 함께 줄 때"],"anti_use":["중요 확인이나 오류 복구를 짧게 사라지는 snackbar에만 의존하지 않는다"],"prompt_phrases":["저장 후 화면 아래에 실행 취소가 있는 mobile snackbar를 보여줘"]},{"id":"mobile-toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"모바일 토스트","aliases":["mobile toast","작은 모바일 알림","복사됨 토스트"]},"en":{"name":"Mobile toast","aliases":["Mobile notification toast","Floating toast"]},"one_liner":"모바일 화면 위에 작게 떠서 매우 짧은 상태를 알려주는 비차단 알림.","description":"복사됨, 저장됨처럼 사용자의 흐름을 끊지 않아도 되는 짧은 피드백을 보여준다.","visual_anatomy":["small floating pill","short message","temporary visibility"],"when_to_use":["사용자가 이미 결과를 예상할 수 있는 작은 작업 성공을 알려줄 때"],"anti_use":["사용자가 행동해야 하는 오류나 경고에는 alert","snackbar action","inline message를 쓴다"],"prompt_phrases":["복사 버튼을 누르면 중앙에 작게 mobile toast로 복사됨을 보여줘"]},{"id":"mobile-alert-dialog","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"모바일 경고 다이얼로그","aliases":["mobile alert dialog","모바일 알림창","삭제 확인창","확인 팝업"]},"en":{"name":"Mobile alert dialog","aliases":["Alert dialog","Confirmation alert"]},"one_liner":"모바일 화면 중앙에 떠서 중요한 확인이나 선택을 요구하는 작은 차단 dialog.","description":"삭제, 로그아웃, 권한 실패처럼 사용자가 명확히 결정을 내려야 하는 순간에 쓴다.","visual_anatomy":["scrim","compact dialog","title","message","confirm action","cancel action"],"when_to_use":["되돌리기 어렵거나 중요한 선택을 확인해야 할 때"],"anti_use":["일상적인 안내나 성공 메시지에는 toast나 snackbar가 더 가볍다"],"prompt_phrases":["삭제 버튼을 누르면 mobile alert dialog로 정말 삭제할지 물어봐줘"]},{"id":"mobile-popover-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"모바일 팝오버 메뉴","aliases":["mobile popover menu","점 세개 메뉴","더보기 메뉴","anchored menu"]},"en":{"name":"Mobile popover menu","aliases":["Anchored menu","Overflow popover"]},"one_liner":"모바일 화면의 아이콘이나 더보기 버튼 근처에 작게 붙어 뜨는 명령 메뉴.","description":"현재 항목에 대한 수정, 공유, 삭제 같은 짧은 명령을 앵커 위치 가까이에 보여준다.","visual_anatomy":["anchor icon","floating menu surface","menu items","small shadow"],"when_to_use":["명령 수가 적고 현재 항목과의 위치 관계를 유지하고 싶을 때"],"anti_use":["화면 아래 엄지 영역에서 선택하게 해야 하면 action-sheet가 더 편할 수 있다"],"prompt_phrases":["카드 오른쪽 위 점 세개 버튼을 누르면 mobile popover menu를 띄워줘"]},{"id":"sheet-drag-handle","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"시트 드래그 핸들","aliases":["sheet drag handle","바텀시트 손잡이","grabber","드래그 바"]},"en":{"name":"Sheet drag handle","aliases":["Drag handle","Grabber","Bottom sheet handle"]},"one_liner":"바텀 시트를 끌어올리거나 내릴 수 있음을 알려주는 작은 손잡이 표시.","description":"하단 시트 상단에 짧은 막대 형태로 놓여 사용자가 드래그 가능한 레이어임을 인식하게 한다.","visual_anatomy":["rounded handle bar","sheet top edge","draggable surface","expanded/collapsed states"],"when_to_use":["바텀 시트를 드래그로 확장하거나 닫을 수 있을 때"],"anti_use":["드래그가 불가능한 일반 카드나 dialog에 장식처럼 붙이지 않는다"],"prompt_phrases":["바텀시트 상단에 드래그 가능한 sheet drag handle을 넣어줘"]},{"id":"pull-to-refresh-indicator","status":"draft","category":"input","group":"input-pickers","ko":{"name":"당겨서 새로고침 표시","aliases":["pull to refresh indicator","끌어내려 새로고침","아래로 당기면 새로고침","새로고침 스피너"]},"en":{"name":"Pull-to-refresh indicator","aliases":["Refresh spinner","Pull refresh indicator"]},"one_liner":"사용자가 목록을 아래로 당겼을 때 새로고침 가능 상태와 진행을 보여주는 표시.","description":"모바일 목록 상단에서 당기는 거리와 새로고침 진행 상태를 스피너나 아이콘으로 알려준다.","visual_anatomy":["top refresh area","spinner","pulled offset","list content below"],"when_to_use":["모바일 피드나 목록을 최신 상태로 갱신할 때","사용자가 제스처로 새로고침할 수 있음을 보여줄 때"],"anti_use":["데스크톱 데이터 새로고침에는 명시적 refresh button이 더 낫다","자동 갱신 중인 화면에 중복으로 넣지 않는다"],"prompt_phrases":["목록을 끌어내리면 pull-to-refresh indicator가 보이고 새로고침되게 해줘"]},{"id":"swipe-to-delete","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"밀어서 삭제","aliases":["swipe to delete","옆으로 밀어서 삭제","스와이프 삭제","밀면 삭제 버튼"]},"en":{"name":"Swipe to delete","aliases":["Swipe delete","Delete swipe action"]},"one_liner":"모바일 리스트 항목을 옆으로 밀어 삭제 명령을 드러내는 패턴.","description":"항목 전체를 열지 않고 목록 안에서 빠르게 삭제할 수 있도록 빨간 삭제 영역을 노출한다.","visual_anatomy":["list row","horizontal offset","revealed delete action","destructive color"],"when_to_use":["모바일 목록에서 항목별 삭제를 빠르게 제공할 때"],"anti_use":["삭제가 위험하거나 복구 불가능하면 확인 dialog나 undo snackbar를 함께 고려한다"],"prompt_phrases":["리스트 항목을 옆으로 밀어서 삭제 버튼이 드러나는 swipe to delete를 넣어줘"]},{"id":"swipe-action-row","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"스와이프 액션 행","aliases":["swipe action row","옆으로 미는 행","좌우 스와이프 명령","리스트 스와이프 액션"]},"en":{"name":"Swipe action row","aliases":["Swipe row action","Leading trailing swipe action"]},"one_liner":"리스트 행을 좌우로 밀어 보관, 완료, 삭제 같은 명령을 드러내는 모바일 행.","description":"한 방향 삭제뿐 아니라 양쪽 방향에 서로 다른 명령을 숨겨두는 목록 상호작용이다.","visual_anatomy":["row surface","leading action","trailing action","horizontal reveal","action icons"],"when_to_use":["목록 항목마다 빠른 보조 명령이 두세 개 있을 때"],"anti_use":["명령을 발견하기 어려운 사용자에게는 더보기 메뉴나 명시 버튼을 함께 제공한다"],"prompt_phrases":["메시지 행을 좌우로 밀면 완료와 삭제 액션이 드러나는 swipe action row를 만들어줘"]},{"id":"long-press-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"길게 누르기 메뉴","aliases":["long press menu","롱프레스 메뉴","길게 누르면 메뉴","터치 컨텍스트 메뉴"]},"en":{"name":"Long press menu","aliases":["Touch context menu","Press-and-hold menu"]},"one_liner":"모바일에서 항목을 길게 눌렀을 때 나타나는 문맥 명령 메뉴.","description":"마우스 우클릭이 없는 터치 환경에서 복사, 공유, 삭제 같은 보조 명령을 숨겨둘 때 쓴다.","visual_anatomy":["pressed item","floating context menu","command rows","touch anchor"],"when_to_use":["주요 화면을 복잡하게 만들지 않고 항목별 보조 행동을 제공할 때"],"anti_use":["핵심 행동을 long press 안에만 숨기면 발견성이 낮다"],"prompt_phrases":["카드를 길게 누르면 복사 공유 삭제가 나오는 long press menu를 넣어줘"],"related":[{"id":"context-menu","relation":"compare","note":"트리거 위치와 발견 가능성이 다르다 — 이 항목은 터치-홀드로 우연히 발견되고, context-menu(툴바 버튼 아래로 펼쳐지는 pull-down 방식 포함)는 명시적 버튼으로 발견된다. 항목 구성(icon+label 행, destructive 스타일)은 공유한다."}]},{"id":"drag-to-reorder-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"드래그 순서 변경 목록","aliases":["drag to reorder list","끌어서 순서 변경","모바일 순서 바꾸기","reorder list"]},"en":{"name":"Drag-to-reorder list","aliases":["Reorderable list","Drag reorder list"]},"one_liner":"모바일 목록 항목을 길게 잡고 끌어 순서를 바꾸는 리스트 패턴.","description":"사용자가 우선순위, 메뉴 순서, 체크리스트 순서를 직접 재배치할 수 있게 한다.","visual_anatomy":["list rows","grab handles","lifted row","reordered position"],"when_to_use":["사용자 정의 순서가 중요한 목록에서","항목 수가 적거나 중간 정도일 때"],"anti_use":["정렬 기준이 명확한 데이터 테이블에는 sort control이 더 낫다"],"prompt_phrases":["모바일 체크리스트를 길게 잡고 끌어서 순서 변경할 수 있게 해줘"]},{"id":"grab-handle","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"잡기 핸들","aliases":["grab handle","드래그 핸들","잡고 끄는 손잡이","이동 핸들"]},"en":{"name":"Grab handle","aliases":["Drag handle","Move handle"]},"one_liner":"항목이나 패널을 잡고 움직일 수 있음을 보여주는 작은 손잡이 affordance.","description":"점, 막대, 그립 아이콘으로 드래그 가능한 영역을 명확히 표시한다.","visual_anatomy":["grip dots or bars","draggable item","active drag state"],"when_to_use":["항목 이동이나 패널 크기 변경처럼 직접 조작이 가능한 곳에서"],"anti_use":["클릭만 가능한 요소에 장식처럼 붙이지 않는다","sheet-drag-handle과 용도를 구분한다"],"prompt_phrases":["각 리스트 항목 왼쪽에 잡고 끌 수 있는 grab handle을 넣어줘"]},{"id":"page-control","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"페이지 컨트롤","aliases":["page control","페이지 점","인디케이터 점","온보딩 점"]},"en":{"name":"Page control","aliases":["Page indicator dots","Pagination dots"]},"one_liner":"좌우로 넘기는 모바일 화면에서 현재 페이지 위치를 점으로 보여주는 컨트롤.","description":"온보딩, 스토리, 캐러셀처럼 짧은 페이지 묶음에서 사용자가 현재 위치를 알게 한다.","visual_anatomy":["dot indicators","active dot","page count","swipeable page"],"when_to_use":["모바일에서 2-5개 정도의 페이지나 카드 묶음을 넘길 때"],"anti_use":["페이지 수가 많거나 임의 접근이 중요하면 pagination이나 tabs가 더 명확하다"],"prompt_phrases":["온보딩 화면 아래에 현재 위치를 보여주는 page control 점을 넣어줘"]},{"id":"carousel-peek","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"피크 캐러셀","aliases":["carousel peek","옆 카드 살짝 보이기","카드 피크","다음 카드 보임"]},"en":{"name":"Carousel peek","aliases":["Peeking carousel","Partial next card"]},"one_liner":"다음 카드가 화면 가장자리에 살짝 보여 좌우 스와이프 가능함을 암시하는 모바일 캐러셀.","description":"사용자가 가로 스크롤 가능한 콘텐츠임을 직관적으로 알아차리게 하는 시각적 힌트다.","visual_anatomy":["active card","partially visible next card","horizontal overflow","swipe direction cue"],"when_to_use":["모바일에서 카드 목록이 가로로 더 있음을 보여주고 싶을 때"],"anti_use":["정확한 비교가 필요한 표나 긴 텍스트 카드에는 부적합하다"],"prompt_phrases":["다음 카드가 오른쪽에 살짝 보이는 carousel peek 레이아웃으로 만들어줘"]},{"id":"edge-swipe-back","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"가장자리 스와이프 뒤로가기","aliases":["edge swipe back","화면 왼쪽에서 밀어 뒤로가기","스와이프 백","뒤로가기 제스처","가장자리 스와이프 백 제스처"]},"en":{"name":"Edge swipe back","aliases":["Swipe back gesture","Back edge gesture","Edge swipe back gesture"]},"one_liner":"화면 가장자리에서 안쪽으로 밀어 이전 화면으로 돌아가는 모바일 내비게이션 제스처.","description":"뒤로가기 버튼 없이도 화면 계층을 자연스럽게 빠져나가게 하는 플랫폼 관습이다.","visual_anatomy":["screen edge","back chevron cue","shifted page surface","previous screen hint"],"when_to_use":["모바일 앱의 상세 화면에서 이전 화면으로 돌아가는 흐름을 설명할 때"],"anti_use":["앱 내부 가로 스와이프와 충돌하지 않게 한다","중요한 닫기 행동은 명시 버튼도 고려한다"],"prompt_phrases":["상세 화면에서 왼쪽 가장자리를 밀면 뒤로가는 edge swipe back 제스처를 고려해줘"]},{"id":"pinch-zoom-viewer","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"핀치 줌 뷰어","aliases":["pinch zoom viewer","두 손가락 확대","이미지 확대 뷰어","지도 확대"]},"en":{"name":"Pinch zoom viewer","aliases":["Pinch-to-zoom viewer","Zoomable viewer"]},"one_liner":"이미지나 지도 같은 콘텐츠를 두 손가락 제스처로 확대/축소하는 모바일 뷰어.","description":"작은 화면에서 세부 내용을 살펴볼 수 있도록 콘텐츠 자체를 확대 가능한 표면으로 만든다.","visual_anatomy":["zoomable surface","image or map content","zoom scale","pinch gesture affordance"],"when_to_use":["이미지","지도","문서처럼 세부 탐색이 필요한 콘텐츠에서"],"anti_use":["일반 카드나 버튼 크기 문제를 pinch zoom으로 해결하지 않는다"],"prompt_phrases":["상품 이미지를 두 손가락으로 확대할 수 있는 pinch zoom viewer로 보여줘"]},{"id":"scrim","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"스크림","aliases":["scrim","dim overlay","어두운 배경","모달 배경막"]},"en":{"name":"Scrim","aliases":["Dim overlay","Modal overlay","Backdrop"]},"one_liner":"모달이나 시트 뒤의 배경을 어둡게 덮어 현재 레이어에 집중시키는 반투명 막.","description":"뒤쪽 화면이 비활성화되었고 앞쪽 dialog나 sheet가 현재 작업 대상임을 알려준다.","visual_anatomy":["translucent overlay","underlying content","foreground modal or sheet"],"when_to_use":["모달 dialog","modal bottom sheet","drawer처럼 배경 조작을 막아야 할 때"],"anti_use":["단순 hover 설명이나 작은 non-modal popover에는 과할 수 있다"],"prompt_phrases":["모달이 열릴 때 뒤 화면에 어두운 scrim을 깔아줘"]},{"id":"touch-ripple","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"터치 리플","aliases":["touch ripple","터치 피드백","누름 효과","ripple effect"]},"en":{"name":"Touch ripple","aliases":["Ripple effect","Touch feedback"]},"one_liner":"모바일에서 버튼이나 항목을 눌렀음을 물결처럼 보여주는 즉각적인 터치 피드백.","description":"사용자의 탭이 인식되었음을 빠르게 알려 주어 터치 인터페이스의 반응성을 높인다.","visual_anatomy":["pressed control","expanding ripple","highlight layer","touch target"],"when_to_use":["모바일의 tappable item이나 icon button에 즉각 반응을 보여줄 때"],"anti_use":["애니메이션이 과하면 피로감을 준다","비활성 요소에는 적용하지 않는다"],"prompt_phrases":["아이콘 버튼을 누르면 touch ripple 피드백이 보이게 해줘"]},{"id":"otp-code-input","status":"draft","category":"input","group":"input-text","ko":{"name":"OTP 코드 입력","aliases":["otp code input","인증번호 입력","문자 인증 코드","verification code input"]},"en":{"name":"OTP code input","aliases":["Verification code input","One-time password input"]},"one_liner":"SMS나 이메일로 받은 일회용 인증번호를 각 자리별 칸에 입력하는 모바일 입력.","description":"숫자 코드의 길이와 현재 입력 위치를 명확히 보여줘 인증 흐름을 빠르게 끝내게 한다.","visual_anatomy":["separated digit boxes","focused digit","numeric code","submit-ready state"],"when_to_use":["회원가입","로그인","결제 확인에서 일회용 인증번호를 받을 때"],"anti_use":["긴 비밀번호나 자유 텍스트에는 쓰지 않는다","자동 입력을 막는 과도한 분리는 피한다"],"prompt_phrases":["SMS 인증번호 6자리를 입력하는 OTP code input을 모바일 화면에 넣어줘"]},{"id":"passcode-keypad","status":"draft","category":"input","group":"input-text","ko":{"name":"패스코드 키패드","aliases":["passcode keypad","숫자 비밀번호","PIN 키패드","잠금해제 키패드"]},"en":{"name":"Passcode keypad","aliases":["PIN keypad","Numeric passcode input"]},"one_liner":"모바일 잠금 해제나 보안 확인에 쓰는 숫자 키패드와 코드 점 표시.","description":"사용자가 화면 안의 숫자 키를 눌러 PIN이나 패스코드를 입력하게 한다.","visual_anatomy":["code dots","numeric keypad","delete key","secure entry"],"when_to_use":["앱 잠금 해제","결제 확인","보안 설정 진입처럼 짧은 숫자 코드가 필요할 때"],"anti_use":["일반 숫자 입력 폼에는 number input이 더 단순하다"],"prompt_phrases":["앱 잠금 해제 화면에 숫자 passcode keypad를 넣어줘"]},{"id":"biometric-prompt","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"생체 인증 프롬프트","aliases":["biometric prompt","Face ID","지문 인증","생체 인증 팝업"]},"en":{"name":"Biometric prompt","aliases":["Face ID prompt","Fingerprint prompt","Biometric authentication"]},"one_liner":"얼굴 인식이나 지문으로 사용자를 확인하는 모바일 인증 프롬프트.","description":"민감한 행동을 실행하기 전에 시스템 생체 인증을 통해 사용자의 의도를 확인한다.","visual_anatomy":["biometric icon","authentication message","confirm state","modal prompt"],"when_to_use":["결제","잠금 해제","비밀번호 보기처럼 높은 신뢰가 필요한 행동에서"],"anti_use":["일반 설정 변경처럼 낮은 위험 작업에는 과하다"],"prompt_phrases":["결제 전에 Face ID biometric prompt로 본인 인증을 하게 해줘"]},{"id":"mobile-date-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"모바일 날짜 선택","aliases":["mobile date picker","모바일 달력 선택","날짜 선택 화면","calendar picker"]},"en":{"name":"Mobile date picker","aliases":["Mobile calendar picker","Date selector"]},"one_liner":"작은 화면에서 터치로 날짜를 고르게 만든 모바일 최적화 달력 입력.","description":"날짜 셀, 월 이동, 선택된 날짜를 손가락으로 누르기 쉬운 크기로 보여준다.","visual_anatomy":["month header","calendar grid","selected day","touch-sized date cells"],"when_to_use":["예약일","생년월일","일정 날짜를 모바일에서 고를 때"],"anti_use":["정확한 시간까지 필요하면 time picker나 datetime flow를 함께 쓴다"],"prompt_phrases":["예약 날짜를 고르는 mobile date picker를 바텀시트 안에 넣어줘"],"related":[{"id":"time-picker","relation":"compare","note":"예약처럼 날짜와 시간을 함께 골라야 하면 하나의 bottom sheet 안에 이 두 피커를 순차적으로 이어붙인다."},{"id":"mobile-date-time-picker-sheet","relation":"use-with","note":"날짜와 시간을 하나의 bottom sheet 안에서 순차 선택하는 조합형 시트가 이 피커와 time-picker를 이어붙인 실제 구성이다."}]},{"id":"mobile-date-time-picker-sheet","status":"draft","category":"input","group":"input-pickers","ko":{"name":"모바일 날짜·시간 선택 시트","aliases":["mobile date time picker sheet","날짜시간 바텀시트","예약 날짜시간 선택"]},"en":{"name":"Mobile date time picker sheet","aliases":["Combined date-time bottom sheet","Sequential date time picker"]},"one_liner":"예약처럼 날짜와 시간을 하나의 bottom sheet 안에서 순차적으로 고르게 하는 조합형 피커.","description":"mobile-date-picker와 time-picker를 하나의 시트 안에서 날짜 단계 다음 시간 단계로 이어붙인 2단계 구성이다. 각 단계에서 이전 단계로 되돌아가는 back 어포던스를 제공하며, OS 네이티브의 Date and time 단일 화면 동시 노출 모드와는 다른, 순차 단계 시트 구조에 한정한다.","visual_anatomy":["bottom sheet container","date wheel or calendar step","time wheel step","step indicator or back","confirm cta"],"when_to_use":["예약이나 약속처럼 날짜와 시간을 함께 받아야 할 때","두 피커를 하나의 시트 흐름으로 이어붙여야 할 때"],"anti_use":["날짜와 시간을 한 화면에 동시에 노출하는 OS 네이티브 Date and time 단일 모드는 이 순차 시트 구조와 다르다","날짜만 또는 시간만 필요하면 각각 mobile-date-picker/time-picker만 쓴다"],"prompt_phrases":["예약 날짜와 시간을 하나의 bottom sheet에서 순서대로 고르게 해줘","날짜 단계 다음에 시간 단계로 넘어가고 뒤로가기도 되게 해줘"],"related":[{"id":"mobile-date-picker","relation":"use-with","note":"이 시트의 첫 단계가 mobile-date-picker의 달력 그리드 구조를 그대로 재사용한다."},{"id":"time-picker","relation":"use-with","note":"이 시트의 두 번째 단계가 time-picker의 시/분 선택 구조를 그대로 재사용한다."}]},{"id":"wheel-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"휠 피커","aliases":["wheel picker","스크롤 선택","iOS 휠 선택","돌리는 선택창"]},"en":{"name":"Wheel picker","aliases":["Picker wheel","Spinning picker"]},"one_liner":"값을 세로로 굴려 가운데 줄에 맞춰 선택하는 모바일 피커.","description":"크기, 날짜 일부, 숫자처럼 순서가 있는 값을 손가락 스크롤로 빠르게 선택하게 한다.","visual_anatomy":["scrolling value column","center selection band","adjacent values"],"when_to_use":["값의 범위가 정해져 있고 사용자가 순서대로 훑으며 고를 때"],"anti_use":["옵션이 적고 비교가 중요하면 radio group이나 segmented control이 더 명확하다"],"prompt_phrases":["사이즈를 S M L로 고르는 wheel picker를 만들어줘"]},{"id":"time-wheel-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"시간 휠 피커","aliases":["time wheel picker","시간 스크롤 선택","시각 휠","모바일 시간 선택"]},"en":{"name":"Time wheel picker","aliases":["Wheel time picker","Spinning time picker"]},"one_liner":"시와 분을 각각 휠처럼 굴려 모바일에서 시간을 고르는 입력.","description":"손가락으로 시/분 컬럼을 스크롤해 정확한 시간을 빠르게 맞추게 한다.","visual_anatomy":["hour wheel","minute wheel","center selected row","time separator"],"when_to_use":["알람","예약","일정 시간처럼 시각을 모바일에서 선택할 때"],"anti_use":["시간 범위를 고르는 경우에는 range picker나 별도 duration control을 검토한다"],"prompt_phrases":["예약 시간을 고르는 time wheel picker를 넣어줘"]},{"id":"mobile-search-sheet","status":"draft","category":"input","group":"input-search-command","ko":{"name":"모바일 검색 시트","aliases":["mobile search sheet","전체 검색 시트","검색 바텀시트","검색 화면"]},"en":{"name":"Mobile search sheet","aliases":["Search sheet","Full-screen search sheet"]},"one_liner":"모바일에서 검색 입력과 추천/결과를 별도 시트나 전체 화면으로 여는 검색 표면.","description":"작은 화면에서 검색에 집중할 수 있도록 현재 화면 위에 검색 전용 레이어를 만든다. 입력 전에는 최근 검색어 칩을, 입력 중에는 실시간 제안을, 제출 후에는 결과 목록을 보여주는 3단계 상태 전환이며, 최근 검색어는 칩 단위로 개별 삭제할 수 있다.","visual_anatomy":["search input autofocus","clear button","recent searches chips pre-query","live suggestions post-query","results list post-submit","empty no-results state"],"when_to_use":["목록 화면에서 검색을 열 때 결과와 추천을 넓게 보여줘야 할 때","최근 검색어를 재사용하게 하고 싶을 때"],"anti_use":["항상 검색이 핵심이면 mobile-search-header가 더 직접적이다"],"prompt_phrases":["검색 아이콘을 누르면 mobile search sheet가 열리고 추천 검색어를 보여줘","입력 전에는 최근 검색어 칩을 보여주고 입력하면 제안으로 바뀌게 해줘"],"related":[{"id":"search-suggestions","relation":"use-with","note":"입력 중 단계의 실시간 제안 목록은 search-suggestions의 추천/최근 검색어 구조를 그대로 재사용하며, mobile-search-sheet는 그 앞뒤로 입력 전 최근 검색어 단계와 제출 후 결과 단계까지 포함한 전체 화면 표면이다."}]},{"id":"chip-input-mobile","status":"draft","category":"input","group":"input-pickers","ko":{"name":"모바일 칩 입력","aliases":["chip input mobile","모바일 태그 입력","토큰 입력","태그 칩"]},"en":{"name":"Mobile chip input","aliases":["Mobile tag input","Tokenized input"]},"one_liner":"모바일 입력창 안에서 여러 값을 칩 형태로 추가하고 지우는 입력 패턴.","description":"관심사, 수신자, 태그처럼 여러 짧은 값을 작은 화면에서도 구분해 편집하게 한다.","visual_anatomy":["input container","chips","remove affordance","add token button"],"when_to_use":["여러 태그","사람","키워드를 모바일에서 입력할 때"],"anti_use":["값이 많아지면 좁은 화면에서 복잡해지므로 별도 선택 화면을 검토한다"],"prompt_phrases":["관심사를 여러 개 추가하는 mobile chip input을 넣어줘"]},{"id":"contact-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"연락처 선택","aliases":["contact picker","사람 선택","연락처 목록","친구 선택"]},"en":{"name":"Contact picker","aliases":["People picker","Contact selector"]},"one_liner":"모바일에서 사람이나 연락처를 검색하고 선택하는 목록형 입력.","description":"초대, 공유, 송금처럼 사람을 대상으로 하는 흐름에서 이름과 아바타를 보고 고르게 한다.","visual_anatomy":["contact rows","avatar","name","selected contact","optional search"],"when_to_use":["친구 초대","수신자 선택","담당자 선택처럼 사람을 골라야 할 때"],"anti_use":["단순 텍스트 이름 입력에는 text field가 더 빠를 수 있다"],"prompt_phrases":["친구를 선택하는 contact picker를 모바일 화면으로 만들어줘"]},{"id":"address-autocomplete","status":"draft","category":"input","group":"input-search-command","ko":{"name":"주소 자동완성","aliases":["address autocomplete","주소 검색","위치 자동완성","주소 제안"]},"en":{"name":"Address autocomplete","aliases":["Address search autocomplete","Location autocomplete"]},"one_liner":"사용자가 주소 일부를 입력하면 후보 위치나 주소를 제안하는 모바일 입력.","description":"배달, 지도, 프로필 주소 입력에서 긴 주소를 끝까지 치지 않고 선택하게 한다.","visual_anatomy":["address input","location icon","suggestion rows","highlighted match"],"when_to_use":["주소","장소","위치를 모바일에서 빠르게 입력해야 할 때"],"anti_use":["정확한 법정 주소 검증이 필요하면 후속 확인 단계를 둔다"],"prompt_phrases":["주소를 입력하면 후보가 뜨는 address autocomplete를 넣어줘"]},{"id":"voice-input-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"음성 입력 버튼","aliases":["voice input button","마이크 버튼","음성 검색","말로 입력"]},"en":{"name":"Voice input button","aliases":["Microphone button","Voice search button"]},"one_liner":"모바일 입력창이나 검색 화면에서 음성으로 텍스트를 넣게 하는 마이크 버튼.","description":"타이핑이 불편한 상황에서 음성 검색, 메시지 입력, 명령 입력을 시작하는 affordance다.","visual_anatomy":["microphone icon","circular touch target","listening state","optional waveform"],"when_to_use":["검색","메시지","접근성 보조 입력에서 음성 입력을 제공할 때"],"anti_use":["조용해야 하는 맥락이나 개인정보가 민감한 입력에서는 기본값으로 강요하지 않는다"],"prompt_phrases":["검색창 오른쪽에 voice input button을 넣고 누르면 듣는 상태로 바뀌게 해줘"]},{"id":"clear-text-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"텍스트 지우기 버튼","aliases":["clear text button","입력 지우기","X 버튼","검색어 지우기"]},"en":{"name":"Clear text button","aliases":["Clear input button","Clear search button"]},"one_liner":"모바일 입력창 안의 현재 텍스트를 한 번에 지우는 작은 X 버튼.","description":"검색어나 짧은 입력을 빠르게 비워 다시 입력할 수 있게 한다.","visual_anatomy":["text field","trailing x icon","filled text","cleared state"],"when_to_use":["검색창","주소 입력","짧은 text field에서 사용자가 자주 다시 입력할 때"],"anti_use":["긴 폼 전체 초기화에는 별도 reset action이 더 명확하다"],"prompt_phrases":["검색창 오른쪽에 입력값을 지우는 clear text button을 넣어줘"]},{"id":"feed-card-mobile","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"모바일 피드 카드","aliases":["feed card mobile","피드 카드","모바일 콘텐츠 카드","세로 피드 카드"]},"en":{"name":"Mobile feed card","aliases":["Feed card","Mobile content card"]},"one_liner":"모바일 피드 안에서 이미지, 본문, 반응 버튼을 세로로 묶어 보여주는 카드.","description":"SNS, 뉴스, 커뮤니티처럼 스크롤 흐름 안에서 콘텐츠 하나를 독립 단위로 보여준다.","visual_anatomy":["thumbnail or media area","title/body lines","reaction actions","vertical card"],"when_to_use":["모바일 피드에서 게시물이나 콘텐츠 항목을 반복해서 보여줄 때"],"anti_use":["한 화면에서 많은 항목을 비교해야 하면 compact list가 더 낫다"],"prompt_phrases":["모바일 피드에 이미지와 좋아요 버튼이 있는 feed card를 넣어줘"]},{"id":"story-rail","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"스토리 레일","aliases":["story rail","스토리 목록","원형 아바타 레일","story carousel"]},"en":{"name":"Story rail","aliases":["Stories rail","Avatar story carousel"]},"one_liner":"모바일 피드 상단에 원형 아바타들을 가로로 나열해 스토리를 여는 패턴.","description":"짧은 임시 콘텐츠나 사용자별 스토리를 가로 스크롤 가능한 원형 목록으로 보여준다.","visual_anatomy":["horizontal rail","circular avatars","active ring","story labels"],"when_to_use":["사용자별 짧은 콘텐츠나 상태 업데이트를 모바일 피드 위에 둘 때"],"anti_use":["영구 콘텐츠나 복잡한 카드 목록에는 일반 carousel이나 list가 더 적합하다"],"prompt_phrases":["홈 피드 상단에 원형 아바타가 있는 story rail을 넣어줘"]},{"id":"story-viewer","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"스토리 뷰어","aliases":["story viewer","스토리 화면","탭해서 넘기는 화면","풀스크린 스토리"]},"en":{"name":"Story viewer","aliases":["Full-screen story viewer","Story screen"]},"one_liner":"화면 전체를 써서 짧은 콘텐츠를 보여주고 탭이나 스와이프로 넘기는 모바일 뷰어.","description":"진행 바, 작성자, 미디어 영역을 함께 보여주며 사용자가 다음 스토리로 빠르게 넘길 수 있다.","visual_anatomy":["full-screen media","progress bars","profile header","tap zones"],"when_to_use":["짧은 이미지/영상 콘텐츠를 몰입형으로 빠르게 소비하게 할 때"],"anti_use":["긴 글이나 상세 비교가 필요한 콘텐츠에는 부적합하다"],"prompt_phrases":["탭하면 다음 화면으로 넘어가는 full-screen story viewer를 만들어줘"]},{"id":"media-lightbox-mobile","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 미디어 라이트박스","aliases":["media lightbox mobile","모바일 이미지 뷰어","전체 화면 사진 보기"]},"en":{"name":"Mobile media lightbox","aliases":["Mobile image viewer","Full-screen media viewer"]},"one_liner":"모바일에서 이미지나 영상을 전체 화면으로 열어 집중해서 보게 하는 뷰어.","description":"닫기, 현재 순서, 제스처 확대 같은 컨트롤을 최소한으로 유지해 미디어를 크게 보여준다.","visual_anatomy":["full-screen dark surface","media content","close button","page count"],"when_to_use":["사진","상품 이미지","첨부 미디어를 크게 확인해야 할 때"],"anti_use":["단순 썸네일 목록에는 과하다","편집 기능은 별도 editor가 필요하다"],"prompt_phrases":["상품 이미지를 누르면 모바일 전체 화면 media lightbox로 열어줘"]},{"id":"comment-composer","status":"draft","category":"input","group":"input-text","ko":{"name":"댓글 작성 바","aliases":["comment composer","댓글 입력 바","하단 댓글창","답글 입력"]},"en":{"name":"Comment composer","aliases":["Comment input bar","Reply composer"]},"one_liner":"모바일 화면 하단에 고정되어 댓글이나 답글을 바로 작성하는 입력 바.","description":"피드나 상세 콘텐츠를 보면서 맥락을 잃지 않고 짧은 반응을 입력하게 한다.","visual_anatomy":["sticky bottom input","placeholder","send button","safe-area spacing"],"when_to_use":["게시물","영상","채팅형 상세 화면에서 댓글을 바로 받을 때"],"anti_use":["긴 리뷰나 서식 있는 글쓰기는 별도 작성 화면이 더 낫다"],"prompt_phrases":["게시물 상세 하단에 고정된 comment composer를 넣어줘"]},{"id":"bottom-cta-bar","status":"draft","category":"action","group":"action-buttons","ko":{"name":"하단 CTA 바","aliases":["bottom CTA bar","고정 하단 버튼","하단 구매 버튼","sticky CTA"]},"en":{"name":"Bottom CTA bar","aliases":["Sticky CTA bar","Bottom action bar"]},"one_liner":"모바일 화면 아래에 주요 행동 버튼을 고정해 언제든 실행할 수 있게 하는 바.","description":"신청하기, 구매하기, 계속하기처럼 한 화면의 핵심 행동을 엄지 영역에 지속 노출한다.","visual_anatomy":["sticky bottom container","primary button","safe-area padding","optional price or summary"],"when_to_use":["모바일 상세 화면에서 주요 전환 행동을 계속 보여줘야 할 때"],"anti_use":["탐색 목적지 전환에는 bottom navigation을 쓴다","여러 행동을 과하게 넣지 않는다"],"prompt_phrases":["상품 상세 하단에 구매하기 bottom CTA bar를 고정해줘"]},{"id":"product-option-sheet","status":"draft","category":"input","group":"input-pickers","ko":{"name":"상품 옵션 시트","aliases":["product option sheet","상품 옵션 바텀시트","옵션 선택 시트","사이즈 선택"]},"en":{"name":"Product option sheet","aliases":["Variant option sheet","Commerce option sheet"]},"one_liner":"모바일 커머스에서 사이즈, 색상, 수량 같은 상품 옵션을 하단 시트로 고르는 패턴.","description":"상품 상세를 유지한 채 구매 전 필요한 변형 옵션을 좁은 화면에서 선택하게 한다.","visual_anatomy":["bottom sheet","option chips","selected variant","quantity or CTA"],"when_to_use":["모바일 상품 상세에서 옵션 선택 후 장바구니나 구매로 이어질 때"],"anti_use":["옵션 조합이 매우 복잡하면 별도 구성 화면이 더 명확하다"],"prompt_phrases":["사이즈와 색상을 고르는 product option sheet를 아래에서 올려줘"],"related":[{"id":"variant-selector-buttons","relation":"compare","note":"product option sheet는 모바일 하단 시트로 옵션을 감싸는 래퍼이고, variant selector buttons는 시트 없이 데스크톱 인라인에 바로 놓이는 버튼형 선택 컨트롤 자체를 가리킨다."}]},{"id":"cart-summary-bar","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"장바구니 요약 바","aliases":["cart summary bar","하단 장바구니 바","주문 요약 바","결제 바"]},"en":{"name":"Cart summary bar","aliases":["Cart bottom bar","Checkout summary bar"]},"one_liner":"모바일 화면 하단에 장바구니 수량, 금액, 결제 버튼을 압축해 보여주는 바.","description":"사용자가 상품을 둘러보는 동안 현재 장바구니 상태와 다음 행동을 계속 확인하게 한다.","visual_anatomy":["item count","total price","checkout action","sticky bottom bar"],"when_to_use":["모바일 쇼핑","음식 주문","예약 흐름에서 누적 선택 상태를 보여줄 때"],"anti_use":["상세한 비용 내역은 cart-summary나 checkout screen에 따로 보여준다"],"prompt_phrases":["화면 아래에 수량과 총액이 보이는 cart summary bar를 고정해줘"],"related":[{"id":"cart-summary","relation":"compare","note":"browsing 중 누적 상태를 보여주는 하단 바는 cart summary bar고, checkout 단계에서 세금·배송비까지 포함해 스크롤과 무관하게 고정 노출하는 최종 총액(sticky order total 개념, `recipes/commerce/checkout-order-summary.md` 참고)은 cart summary와 항상 일치해야 한다."}]},{"id":"checkout-progress-header","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"결제 진행 헤더","aliases":["checkout progress header","결제 단계 헤더","주문 단계 표시","결제 진행바"]},"en":{"name":"Checkout progress header","aliases":["Checkout step header","Checkout progress bar"]},"one_liner":"모바일 결제 흐름 상단에서 현재 단계와 남은 단계를 보여주는 헤더.","description":"주소, 결제, 확인처럼 여러 단계의 checkout에서 사용자가 위치를 잃지 않게 한다.","visual_anatomy":["header title","current step number","progress segments","back affordance"],"when_to_use":["모바일 결제나 예약처럼 여러 단계가 있는 전환 흐름에서"],"anti_use":["단일 화면 결제에는 과할 수 있다"],"prompt_phrases":["결제 화면 상단에 3단계 checkout progress header를 넣어줘"]},{"id":"delivery-tracker","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"배송 추적","aliases":["delivery tracker","배달 추적","배송 상태 타임라인","주문 추적","주문 추적 타임라인"]},"en":{"name":"Delivery tracker","aliases":["Order tracker","Delivery status timeline","Order tracking timeline"]},"one_liner":"주문이 접수, 준비, 이동, 도착 중 어디에 있는지 단계로 보여주는 모바일 상태 UI.","description":"사용자가 기다리는 동안 현재 처리 상태와 다음 단계를 시간 순서로 이해하게 한다. 각 단계에 타임스탬프를 붙이고 배송사 추적 번호와 외부 링크를 함께 노출하는 데스크톱/세로 타임라인 변형도 같은 개념이다.","visual_anatomy":["status steps","active step","timeline dots","delivery labels","per-step timestamp","carrier tracking number and link"],"when_to_use":["배달","배송","픽업","예약 진행 상태를 모바일에서 보여줄 때"],"anti_use":["단순 완료 여부만 있으면 status chip이나 toast로 충분하다"],"prompt_phrases":["주문 상태를 접수 조리 배달 단계로 보여주는 delivery tracker를 넣어줘","배송사 추적 번호와 도착 예정일이 있는 order tracking timeline을 넣어줘"]},{"id":"map-bottom-panel","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"지도 하단 패널","aliases":["map bottom panel","지도 아래 패널","지도 바텀시트","장소 정보 패널"]},"en":{"name":"Map bottom panel","aliases":["Map bottom sheet","Place details panel"]},"one_liner":"모바일 지도 위에 하단에서 올라와 장소나 경로 정보를 보여주는 패널.","description":"지도 조작을 유지하면서 선택한 장소, 경로, 주문 위치 같은 세부 정보를 하단에서 확인하게 한다.","visual_anatomy":["map background","marker","draggable bottom panel","place summary"],"when_to_use":["지도 기반 검색","배달 추적","장소 상세를 모바일에서 보여줄 때"],"anti_use":["지도와 무관한 일반 상세 정보에는 standard-bottom-sheet가 더 적합하다"],"prompt_phrases":["지도 아래에 드래그 가능한 map bottom panel로 장소 정보를 보여줘"]},{"id":"location-permission-empty","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"위치 권한 빈 상태","aliases":["location permission empty","위치 권한 필요 화면","주변 장소 없음","위치 허용 안내"]},"en":{"name":"Location permission empty state","aliases":["Location permission empty","Location access empty state"]},"one_liner":"위치 권한이 없어 지도나 주변 결과를 보여줄 수 없을 때 나타나는 빈 상태.","description":"왜 위치 권한이 필요한지 설명하고 권한 요청 행동을 제공한다.","visual_anatomy":["location icon","empty message","permission CTA","map/list placeholder"],"when_to_use":["주변 장소","배달 주소","지도 기능이 위치 권한 없이 비어 있을 때"],"anti_use":["권한이 아니라 데이터가 없는 경우에는 일반 empty-state를 쓴다"],"prompt_phrases":["위치 권한이 없을 때 location permission empty state를 보여주고 허용 버튼을 넣어줘"]},{"id":"onboarding-pager","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"온보딩 페이저","aliases":["onboarding pager","온보딩 넘김 화면","시작 화면 점","튜토리얼 페이지"]},"en":{"name":"Onboarding pager","aliases":["Onboarding carousel","Intro pager"]},"one_liner":"앱 첫 사용 흐름에서 여러 소개 화면을 좌우로 넘기고 점으로 위치를 보여주는 패턴.","description":"핵심 가치나 초기 설정을 짧은 페이지 묶음으로 설명하고 다음 행동으로 이어준다.","visual_anatomy":["illustration area","headline","page dots","next or start button"],"when_to_use":["새 사용자가 앱의 핵심 기능을 처음 이해해야 할 때"],"anti_use":["사용자가 바로 써야 하는 도구에서 긴 온보딩을 강제하지 않는다"],"prompt_phrases":["앱 첫 실행에 3장짜리 onboarding pager를 넣고 하단에 점을 보여줘"]},{"id":"onboarding-carousel-skip-pattern","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"건너뛰기 있는 온보딩 페이저","aliases":["onboarding skip pattern","온보딩 건너뛰기","스킵 가능한 온보딩"]},"en":{"name":"Onboarding carousel skip pattern","aliases":["Skippable onboarding flow","Onboarding skip rule"]},"one_liner":"온보딩 모든 페이지에서 항상 건너뛰기가 가능하고, 한 번 건너뛰면 다음 실행부터 다시 노출되지 않는 규칙.","description":"onboarding-pager의 페이지 넘김 구조 위에, 언제나 접근 가능한 건너뛰기 버튼과 건너뛴 뒤 재실행 시 자동으로 다시 보여주지 않는 규칙, 그리고 도움말/설정에서 다시 찾아볼 수 있는 경로까지 묶은 상태 계약이다. onboarding-pager 자체의 anatomy는 점과 다음 버튼만 서술하며 건너뛰기 상태나 재노출 금지 규칙은 명시하지 않는다.","visual_anatomy":["illustration per page","headline per page","page dots indicator","persistent skip button top-trailing","primary cta last page"],"when_to_use":["첫 실행 온보딩에서 사용자가 언제든 이탈할 수 있어야 할 때","건너뛴 온보딩을 다음 실행부터 다시 보여주지 않아야 할 때"],"anti_use":["건너뛰기 버튼을 특정 페이지에서만 노출하지 않는다","건너뛴 뒤에도 매 실행마다 다시 노출하지 않는다"],"prompt_phrases":["온보딩 모든 페이지에서 건너뛰기 버튼이 보이게 해줘","건너뛰면 다음 실행부터는 온보딩을 다시 보여주지 마"],"related":[{"id":"onboarding-pager","relation":"compare","note":"onboarding-pager는 점과 다음 버튼으로 이루어진 페이지 넘김 구조 자체를 가리키고, 이 항목은 그 위에 언제나 접근 가능한 건너뛰기와 재노출 금지 규칙을 추가한 상태 계약이다."}]},{"id":"coach-mark","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"코치마크","aliases":["coach mark","기능 힌트","튜토리얼 말풍선","spotlight hint"]},"en":{"name":"Coach mark","aliases":["Feature hint","Spotlight hint","Guided tip"]},"one_liner":"특정 UI 요소를 강조하고 사용법을 짧게 알려주는 안내 오버레이.","description":"새 기능이나 중요한 버튼을 처음 보여줄 때, 화면 위에 힌트 말풍선과 강조 영역을 덧씌운다.","visual_anatomy":["highlighted target","overlay hint","pointer","dismiss action"],"when_to_use":["사용자가 놓치기 쉬운 새 기능이나 첫 사용 행동을 안내할 때"],"anti_use":["모든 기능을 코치마크로 설명하면 방해가 된다","반복 노출은 피한다"],"prompt_phrases":["새 추가 버튼을 강조하는 coach mark를 한 번만 보여줘"]},{"id":"mobile-empty-feed","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"모바일 빈 피드","aliases":["mobile empty feed","빈 피드 화면","첫 게시물 없음","피드 없음"]},"en":{"name":"Mobile empty feed","aliases":["Empty feed state","Feed empty state"]},"one_liner":"모바일 피드에 아직 콘텐츠가 없을 때 첫 행동을 안내하는 빈 상태.","description":"글 없음, 팔로잉 없음, 사진 없음 같은 상태에서 사용자가 무엇을 하면 되는지 명확히 알려준다.","visual_anatomy":["empty illustration","empty message","starter CTA","feed background"],"when_to_use":["새 계정","검색 결과 없음","팔로잉 없음처럼 피드가 비어 있을 때"],"anti_use":["로딩 중에는 skeleton이나 spinner를 쓰고 empty feed로 오해시키지 않는다"],"prompt_phrases":["아직 글이 없을 때 첫 글 작성 버튼이 있는 mobile empty feed를 보여줘"]},{"id":"page-layout","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"페이지 레이아웃","aliases":["page layout","화면 레이아웃","page frame"]},"en":{"name":"Page layout","aliases":["Page frame","Content layout"]},"one_liner":"헤더, 사이드바, 본문, 보조 영역처럼 페이지의 큰 영역 배치를 정한 구조.","description":"개별 컴포넌트보다 상위 수준에서 화면의 정보 영역과 행동 영역을 나눈다.","visual_anatomy":["header area","navigation area","main content","supporting region"],"when_to_use":["앱 화면을 처음 설계하며 큰 영역을 먼저 정해야 할 때"],"anti_use":["작은 카드 하나를 설명할 때 page layout이라고 부르지 않는다"],"prompt_phrases":["헤더 사이드바 본문 우측 보조영역이 있는 page layout을 잡아줘"]},{"id":"dashboard-grid","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"대시보드 그리드","aliases":["dashboard grid","위젯 그리드","카드 대시보드"]},"en":{"name":"Dashboard grid","aliases":["Widget grid","Card dashboard grid"]},"one_liner":"여러 지표 카드와 차트 위젯을 격자로 배치하는 대시보드 구조.","description":"크기가 다른 카드와 차트를 일관된 컬럼과 간격으로 정렬해 한눈에 비교하게 한다.","visual_anatomy":["metric cards","chart widgets","grid columns","responsive rows"],"when_to_use":["여러 지표와 시각화를 동시에 모니터링해야 할 때"],"anti_use":["단일 리포트나 긴 본문 콘텐츠에는 일반 page layout이 낫다"],"prompt_phrases":["지표 카드와 차트를 12컬럼 dashboard grid로 배치해줘"]},{"id":"permission-state","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"권한 필요 상태","aliases":["permission state","권한 없음 화면","접근 권한 안내"]},"en":{"name":"Permission state","aliases":["Permission required state","Access denied state"]},"one_liner":"현재 기능을 쓰려면 권한 요청이나 관리자 승인이 필요하다고 안내하는 상태.","description":"왜 접근할 수 없는지, 어떤 권한이 필요한지, 요청 행동은 무엇인지 보여준다.","visual_anatomy":["lock icon","permission explanation","request access action","contact hint"],"when_to_use":["사용자가 볼 수 있지만 권한이 없어 접근하지 못하는 기능에서"],"anti_use":["기능 자체가 없거나 유료 제한이면 upgrade prompt가 더 정확하다"],"prompt_phrases":["권한 요청 버튼이 있는 permission state를 보여줘"]},{"id":"locked-state","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"잠금 상태","aliases":["locked state","잠긴 화면","잠금 안내"]},"en":{"name":"Locked state","aliases":["Locked content state","Read-only locked state"]},"one_liner":"콘텐츠나 설정이 현재 조건에서 잠겨 있음을 알려주는 상태.","description":"편집 권한, 플랜, 워크플로 단계 때문에 조작할 수 없는 영역을 명확히 표시한다.","visual_anatomy":["lock indicator","disabled content","reason text","unlock hint"],"when_to_use":["콘텐츠는 보이지만 수정이나 사용이 막혀 있을 때"],"anti_use":["권한 요청이 가능한 경우에는 permission state가 더 구체적이다"],"prompt_phrases":["잠긴 설정 카드에 locked state를 표시해줘"]},{"id":"offline-state","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"오프라인 상태","aliases":["offline state","네트워크 끊김 상태","offline banner"]},"en":{"name":"Offline state","aliases":["No connection state","Offline banner"]},"one_liner":"인터넷 연결이 없어 일부 기능이 제한된다는 상태 표시.","description":"사용자가 문제 원인을 네트워크로 이해하고 재연결 또는 오프라인 사용 가능 범위를 알게 한다. 모바일에서는 상단 헤더/앱바 바로 아래에 고정 배치해 하단 nav/tab bar 영역과 겹치지 않게 하고, 재연결이 감지되면 사용자 조작 없이 자동으로 사라진다.","visual_anatomy":["connection icon","offline message","retry action","limited mode hint","top-pinned placement below header on mobile","auto-dismiss on reconnect"],"when_to_use":["네트워크 연결이 필요한 데이터를 불러오지 못할 때"],"anti_use":["서버 오류는 error state나 retry panel로 구분한다","사용자가 직접 닫아야 하는 mobile-snackbar와 달리 네트워크가 실제로 복구되기 전까지는 닫히지 않아야 한다"],"prompt_phrases":["상단에 오프라인 상태 배너와 다시 시도 버튼을 넣어줘","헤더 바로 아래에 고정하고 재연결되면 자동으로 사라지게 해줘"]},{"id":"maintenance-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"점검 상태","aliases":["maintenance state","서비스 점검 화면","maintenance page"]},"en":{"name":"Maintenance state","aliases":["Service maintenance state","Maintenance page"]},"one_liner":"서비스나 기능이 계획된 점검 중임을 알려주는 상태 화면.","description":"예상 종료 시간, 영향 범위, 상태 페이지 링크를 제공해 불확실성을 줄인다.","visual_anatomy":["maintenance icon","schedule","affected area","status link"],"when_to_use":["계획된 서비스 점검이나 배포로 기능이 일시 중단될 때"],"anti_use":["예상치 못한 실패는 error state나 retry panel이 맞다"],"prompt_phrases":["예상 종료 시간이 있는 maintenance state를 만들어줘"]},{"id":"syncing-state","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"동기화 중 상태","aliases":["syncing state","동기화 표시","syncing indicator"]},"en":{"name":"Syncing state","aliases":["Sync status","Syncing indicator"]},"one_liner":"로컬 변경이나 원격 데이터가 동기화 중임을 보여주는 상태.","description":"사용자가 저장 완료와 아직 동기화 중인 상태를 구분하게 한다.","visual_anatomy":["sync spinner","status label","last synced hint","progress feedback"],"when_to_use":["백그라운드 동기화가 사용자 작업 결과에 영향을 줄 때"],"anti_use":["단순 로딩은 loading state가 더 간단하다"],"prompt_phrases":["문서 상단에 syncing state와 마지막 동기화 시간을 보여줘"]},{"id":"saving-indicator","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"저장 표시기","aliases":["saving indicator","저장 중 표시","autosave status"]},"en":{"name":"Saving indicator","aliases":["Autosave indicator","Save status"]},"one_liner":"입력 내용이 저장 중인지 저장 완료인지 작게 보여주는 상태 표시.","description":"자동 저장 편집기에서 사용자가 닫기 전에 저장 상태를 확인할 수 있게 한다.","visual_anatomy":["saving spinner","saved check","compact label","timestamp"],"when_to_use":["자동 저장이나 비동기 저장이 있는 편집 화면에서"],"anti_use":["저장 실패는 error toast나 inline alert로 더 명확히 알려야 한다"],"prompt_phrases":["우측 상단에 저장 중에서 저장됨으로 바뀌는 saving indicator를 넣어줘"]},{"id":"unsaved-changes-banner","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"저장 안 된 변경 배너","aliases":["unsaved changes banner","변경사항 배너","저장 필요 배너"]},"en":{"name":"Unsaved changes banner","aliases":["Unsaved changes bar","Dirty state banner"]},"one_liner":"저장되지 않은 변경이 있음을 알리고 저장 또는 취소 행동을 제공하는 배너.","description":"편집 화면에서 사용자가 변경 상태를 잃지 않도록 명확한 행동을 제공한다.","visual_anatomy":["dirty state text","save action","discard action","sticky placement"],"when_to_use":["저장 전 변경을 잃을 위험이 있는 설정이나 폼에서"],"anti_use":["자동 저장이 즉시 완료되면 saving indicator만으로 충분하다"],"prompt_phrases":["하단에 저장 안 된 변경 배너와 저장 취소 버튼을 넣어줘"]},{"id":"session-expired-dialog","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"세션 만료 다이얼로그","aliases":["session expired dialog","로그인 만료 모달","세션 만료 창"]},"en":{"name":"Session expired dialog","aliases":["Session timeout dialog","Login expired modal"]},"one_liner":"로그인 세션이 만료되어 다시 인증해야 함을 알리는 모달.","description":"사용자가 현재 작업을 잃지 않도록 재로그인 행동과 취소 가능성을 명확히 한다.","visual_anatomy":["modal surface","timeout message","sign in action","secondary action"],"when_to_use":["보안 세션이 만료되어 API 요청이나 저장이 막혔을 때"],"anti_use":["일반 권한 부족은 permission state가 더 정확하다"],"prompt_phrases":["세션이 만료되면 재로그인 버튼이 있는 dialog를 띄워줘"]},{"id":"upgrade-prompt","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"업그레이드 유도","aliases":["upgrade prompt","유료 플랜 안내","paywall prompt"]},"en":{"name":"Upgrade prompt","aliases":["Plan upgrade prompt","Paywall prompt"]},"one_liner":"현재 플랜에서 제한된 기능을 상위 플랜으로 안내하는 UI.","description":"기능 가치와 제한 이유를 설명하고 업그레이드 CTA를 제공한다.","visual_anatomy":["locked feature","value message","plan label","upgrade action"],"when_to_use":["유료 플랜 차이 때문에 기능 접근이 제한될 때"],"anti_use":["권한 문제나 오류를 과금 유도처럼 보이게 만들지 않는다"],"prompt_phrases":["고급 분석 기능에 upgrade prompt를 보여줘"]},{"id":"quota-warning","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"사용량 경고","aliases":["quota warning","한도 경고","usage warning"]},"en":{"name":"Quota warning","aliases":["Usage limit warning","Quota alert"]},"one_liner":"저장공간, API 호출, 크레딧 같은 사용 한도에 가까워졌음을 알려주는 경고.","description":"현재 사용량, 한도, 남은 양, 업그레이드나 정리 행동을 함께 제공한다.","visual_anatomy":["usage meter","warning text","limit value","action link"],"when_to_use":["사용자가 한도 초과 전에 조치할 수 있어야 할 때"],"anti_use":["이미 차단된 상태면 rate-limit state나 locked state가 더 직접적이다"],"prompt_phrases":["월 사용량 80% quota warning을 표시해줘"]},{"id":"trial-banner","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"체험판 배너","aliases":["trial banner","무료 체험 배너","trial notice"]},"en":{"name":"Trial banner","aliases":["Free trial banner","Trial notice"]},"one_liner":"무료 체험 기간, 남은 일수, 전환 행동을 상단이나 하단에 표시하는 배너.","description":"현재 계정의 체험 상태와 종료 전 필요한 행동을 지속적으로 알려준다.","visual_anatomy":["trial days left","plan action","dismiss or learn link","banner placement"],"when_to_use":["체험 기간이 제품 사용 맥락에 영향을 줄 때"],"anti_use":["일회성 마케팅 메시지는 announcement banner가 더 적합하다"],"prompt_phrases":["상단에 5일 남음 trial banner를 넣어줘"]},{"id":"destructive-confirmation","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"파괴적 작업 확인","aliases":["destructive confirmation","삭제 확인","위험 작업 확인"]},"en":{"name":"Destructive confirmation","aliases":["Delete confirmation","Dangerous action confirmation"]},"one_liner":"삭제나 초기화처럼 되돌리기 어려운 행동 전 사용자의 명시 확인을 받는 UI.","description":"위험한 결과를 설명하고 취소와 실행 버튼을 명확히 구분한다.","visual_anatomy":["danger message","object name","cancel action","destructive action"],"when_to_use":["데이터 삭제","권한 제거","결제 취소처럼 영향이 큰 행동에서"],"anti_use":["되돌리기 쉬운 사소한 행동마다 confirmation을 띄우지 않는다"],"prompt_phrases":["프로젝트 삭제 전에 destructive confirmation dialog를 띄워줘"]},{"id":"success-toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"성공 토스트","aliases":["success toast","완료 토스트","성공 알림"]},"en":{"name":"Success toast","aliases":["Success notification","Completion toast"]},"one_liner":"작업이 성공적으로 끝났음을 짧게 알려주는 비차단 알림.","description":"저장, 복사, 업로드 완료처럼 즉시 확인만 필요한 성공 상태를 표시한다.","visual_anatomy":["check icon","success message","optional undo or close","transient surface"],"when_to_use":["사용자가 결과 확인만 하면 되는 짧은 성공 피드백에서"],"anti_use":["다음 행동이 필수라면 dialog나 inline result가 더 적절하다"],"prompt_phrases":["저장되면 success toast가 잠깐 뜨게 해줘"]},{"id":"error-toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"오류 토스트","aliases":["error toast","실패 토스트","에러 알림"]},"en":{"name":"Error toast","aliases":["Error notification","Failure toast"]},"one_liner":"가벼운 작업 실패를 짧게 알리고 재시도 같은 행동을 제공하는 알림.","description":"저장 실패나 복사 실패처럼 맥락은 유지하되 즉시 피드백이 필요한 오류에 쓴다.","visual_anatomy":["error icon","failure message","retry action","close action"],"when_to_use":["오류가 현재 화면 전체를 막지는 않지만 사용자가 알아야 할 때"],"anti_use":["화면을 사용할 수 없는 심각한 오류는 error state나 retry panel이 낫다"],"prompt_phrases":["업로드 실패 시 다시 시도 버튼이 있는 error toast를 보여줘"]},{"id":"notification-center","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"알림 센터","aliases":["notification center","알림함","notification panel"]},"en":{"name":"Notification center","aliases":["Notifications panel","Notification drawer"]},"one_liner":"여러 알림을 모아 읽고 상태를 관리하는 패널.","description":"읽음 처리, 필터, 알림 목록, 설정 이동을 한곳에서 제공한다.","visual_anatomy":["trigger badge","notification panel","unread count","notification rows"],"when_to_use":["알림이 누적되고 사용자가 나중에 다시 확인해야 할 때"],"anti_use":["한 번 보고 사라질 메시지는 toast나 snackbar가 가볍다"],"prompt_phrases":["벨을 누르면 unread 알림이 보이는 notification center를 열어줘"]},{"id":"notification-list","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"알림 목록","aliases":["notification list","알림 리스트","notification feed"]},"en":{"name":"Notification list","aliases":["Notification feed","Alerts list"]},"one_liner":"알림 항목을 시간순이나 상태별로 나열한 목록.","description":"각 알림의 제목, 설명, 시간, 읽음 상태, 관련 행동을 행 단위로 보여준다.","visual_anatomy":["notification row","unread marker","timestamp","row action"],"when_to_use":["알림 센터나 활동 피드 안에서 알림을 구조적으로 보여줄 때"],"anti_use":["사용자 활동 전체를 보여주려면 activity feed가 더 넓은 개념이다"],"prompt_phrases":["읽지 않은 점과 시간이 있는 notification list를 만들어줘"]},{"id":"status-chip","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"상태 칩","aliases":["status chip","상태 태그","state chip"]},"en":{"name":"Status chip","aliases":["State chip","Status tag"]},"one_liner":"항목의 상태를 작은 pill 형태로 표시하는 컴팩트 라벨.","description":"진행중, 승인됨, 보류, 실패 같은 상태를 리스트나 테이블 안에서 빠르게 구분한다.","visual_anatomy":["pill shape","state color","short label","optional icon"],"when_to_use":["테이블이나 카드에서 항목 상태를 짧게 보여줄 때"],"anti_use":["긴 설명이나 조치가 필요하면 alert나 inline message가 낫다"],"prompt_phrases":["테이블 상태 열에 승인됨 보류 status chip을 넣어줘"]},{"id":"health-indicator","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"헬스 인디케이터","aliases":["health indicator","상태등","서비스 상태 표시"]},"en":{"name":"Health indicator","aliases":["Service health indicator","Health status"]},"one_liner":"시스템이나 서비스의 정상, 경고, 장애 상태를 색과 라벨로 보여주는 표시.","description":"운영 대시보드에서 서비스 상태를 빠르게 스캔할 수 있게 한다.","visual_anatomy":["health dot","status label","severity color","service name"],"when_to_use":["서버","API","작업 큐 같은 시스템 상태를 모니터링할 때"],"anti_use":["사용자 작업 성공 여부는 success/error toast가 더 적합하다"],"prompt_phrases":["API 정상 경고 장애를 health indicator로 보여줘"]},{"id":"connection-status","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"연결 상태","aliases":["connection status","연결 표시","네트워크 상태"]},"en":{"name":"Connection status","aliases":["Connectivity status","Network status"]},"one_liner":"실시간 연결, 재연결, 끊김 상태를 사용자에게 보여주는 표시.","description":"채팅, 협업 편집, 스트리밍처럼 연결 상태가 기능 동작에 직접 영향을 줄 때 쓴다.","visual_anatomy":["connection dot","label","reconnecting state","last update"],"when_to_use":["실시간 연결이 끊기면 사용자가 바로 알아야 하는 화면에서"],"anti_use":["일반 오프라인 안내는 offline state가 더 넓은 패턴이다"],"prompt_phrases":["상단에 연결됨 재연결중 연결 끊김 connection status를 보여줘"]},{"id":"retry-panel","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"재시도 패널","aliases":["retry panel","다시 시도 영역","실패 복구 패널"]},"en":{"name":"Retry panel","aliases":["Retry state panel","Recovery panel"]},"one_liner":"데이터 로드나 작업 실패 후 원인과 다시 시도 행동을 제공하는 패널.","description":"사용자가 화면을 떠나지 않고 오류를 복구할 수 있도록 실패 메시지와 재시도 버튼을 둔다.","visual_anatomy":["error message","retry action","support hint","optional details"],"when_to_use":["목록이나 카드 영역 일부가 실패했지만 재요청 가능할 때"],"anti_use":["전체 앱 장애나 점검은 maintenance state로 분리한다"],"prompt_phrases":["데이터 로드 실패 영역에 retry panel을 넣어줘"],"related":[{"id":"background-job-queue-monitor","relation":"compare","note":"retry panel은 하나의 실패 상태를 복구하는 단일 패널이고, background job queue monitor는 여러 비동기 작업의 큐 상태를 목록으로 감시하며 건별 재시도를 제공하는 별도 구조다"}]},{"id":"background-job-queue-monitor","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"백그라운드 작업 큐 모니터","aliases":["job queue monitor","배치 작업 모니터","백그라운드 작업 상태"]},"en":{"name":"Background job queue monitor","aliases":["Job queue monitor","Background task monitor"]},"one_liner":"배치, 마이그레이션, 이메일 발송 같은 비동기 작업들을 대기중/실행중/성공/실패 상태로 나열하고 실패 건을 개별 재시도하는 운영 모니터.","description":"여러 백그라운드 작업의 큐 상태를 목록형으로 보여주고, 상태 필터와 건별 재시도 액션을 제공한다. 단일 실패 패널이 아니라 여러 작업을 한 화면에서 감시하는 목록형 모니터다.","visual_anatomy":["row per job with id and type","status badge","started time and duration","retry count","status filter","per-row retry action for failed jobs"],"when_to_use":["비동기 배치나 마이그레이션이나 발송 작업 다수를 운영자가 한 화면에서 감시하고 실패 건만 개별 재시도해야 할 때"],"anti_use":["단일 작업의 실패 원인과 재시도만 보여주면 되는 좁은 화면에는 retry panel이 더 적합하다"],"prompt_phrases":["배치 작업들의 큐 상태를 pending running succeeded failed로 보여주는 job queue monitor를 만들어줘","실패한 작업만 재시도할 수 있는 백그라운드 작업 모니터를 넣어줘"],"related":[{"id":"retry-panel","relation":"compare","note":"retry panel은 하나의 실패 상태를 복구하는 단일 패널이고, background job queue monitor는 여러 비동기 작업의 큐 상태를 목록으로 감시하며 건별 재시도를 제공하는 별도 구조다"}]},{"id":"media-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"미디어 카드","aliases":["media card","콘텐츠 카드","이미지 카드"]},"en":{"name":"Media card","aliases":["Content card","Image card"]},"one_liner":"이미지나 영상 썸네일과 제목, 메타 정보를 묶어 보여주는 카드.","description":"콘텐츠 목록에서 시각 자료를 먼저 보여주고 제목, 설명, 행동을 함께 배치한다.","visual_anatomy":["thumbnail","title","metadata","action area"],"when_to_use":["동영상","글","이미지 자료처럼 썸네일이 선택에 중요한 콘텐츠에서"],"anti_use":["텍스트 속성 비교가 핵심이면 table이나 list가 낫다"],"prompt_phrases":["썸네일 제목 조회수가 있는 media card를 만들어줘"]},{"id":"video-player-controls","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"비디오 플레이어 컨트롤","aliases":["video player controls","영상 컨트롤","재생 컨트롤"]},"en":{"name":"Video player controls","aliases":["Video controls","Player controls"]},"one_liner":"영상 재생, 일시정지, 진행바, 음량, 전체화면을 조작하는 컨트롤 묶음.","description":"영상 위나 아래에 배치되어 사용자가 재생 상태와 위치를 직접 제어하게 한다.","visual_anatomy":["play pause button","timeline","time label","volume","fullscreen action"],"when_to_use":["앱 안에서 사용자가 동영상을 직접 재생해야 할 때"],"anti_use":["단순 썸네일 미리보기에는 play overlay만으로 충분하다"],"prompt_phrases":["재생 버튼과 타임라인이 있는 video player controls를 넣어줘"]},{"id":"audio-player-controls","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"오디오 플레이어 컨트롤","aliases":["audio player controls","음악 컨트롤","음성 재생 컨트롤"]},"en":{"name":"Audio player controls","aliases":["Audio controls","Music player controls"]},"one_liner":"오디오 재생, 진행, 시간, 음량을 조작하는 compact 컨트롤.","description":"팟캐스트, 음성 메모, 음악 같은 오디오 콘텐츠의 재생 상태를 보여준다.","visual_anatomy":["play pause button","waveform or progress","time","volume"],"when_to_use":["오디오 파일이나 음성 콘텐츠를 화면 안에서 재생할 때"],"anti_use":["다운로드 링크만 제공할 파일에는 불필요하다"],"prompt_phrases":["파형과 재생 버튼이 있는 audio player controls를 만들어줘"]},{"id":"image-gallery","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"이미지 갤러리","aliases":["image gallery","사진 갤러리","gallery grid","상품 이미지 갤러리"]},"en":{"name":"Image gallery","aliases":["Photo gallery","Gallery grid","Product gallery"]},"one_liner":"여러 이미지를 격자나 썸네일 목록으로 탐색하는 UI.","description":"사진, 제품 이미지, 포트폴리오처럼 이미지 묶음을 빠르게 훑고 선택하게 한다.","visual_anatomy":["image grid","selected thumbnail","preview","navigation controls"],"when_to_use":["여러 이미지를 비교하거나 선택해야 할 때"],"anti_use":["하나의 대표 이미지만 있으면 image나 media card가 더 단순하다"],"prompt_phrases":["썸네일을 누르면 선택되는 image gallery를 넣어줘"]},{"id":"lightbox","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"라이트박스","aliases":["lightbox","이미지 확대 모달","갤러리 모달"]},"en":{"name":"Lightbox","aliases":["Image lightbox","Media overlay"]},"one_liner":"이미지나 미디어를 화면 위 오버레이로 크게 보여주는 패턴.","description":"배경을 어둡게 하고 미디어, 닫기, 이전/다음 탐색을 제공한다.","visual_anatomy":["scrim","enlarged media","close button","previous next controls"],"when_to_use":["목록의 미디어를 현재 맥락 위에서 크게 확인해야 할 때"],"anti_use":["복잡한 편집은 별도 detail page나 editor가 낫다"],"prompt_phrases":["이미지를 클릭하면 lightbox로 크게 열리게 해줘"]},{"id":"cropper","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"크롭퍼","aliases":["cropper","이미지 자르기","crop tool"]},"en":{"name":"Cropper","aliases":["Image cropper","Crop tool"]},"one_liner":"이미지의 자를 영역을 선택하고 비율을 조정하는 편집 컨트롤.","description":"프로필 사진, 썸네일, 업로드 이미지의 사용 영역을 사용자가 직접 지정한다.","visual_anatomy":["image canvas","crop box","handles","aspect ratio control","apply action"],"when_to_use":["사용자 업로드 이미지를 특정 비율에 맞춰야 할 때"],"anti_use":["단순 파일 첨부만 필요하면 upload dropzone이 적합하다"],"prompt_phrases":["아바타 업로드 뒤 cropper로 정사각형 영역을 고르게 해줘"]},{"id":"upload-dropzone","status":"draft","category":"input","group":"input-file-media","ko":{"name":"업로드 드롭존","aliases":["upload dropzone","드래그 업로드 영역","파일 드롭 영역"]},"en":{"name":"Upload dropzone","aliases":["Dropzone","File drop area"]},"one_liner":"파일을 클릭 선택하거나 끌어다 놓아 업로드하는 큰 입력 영역.","description":"허용 파일 형식, 크기 제한, 드래그 상태, 업로드 행동을 명확히 보여준다.","visual_anatomy":["drop area","upload icon","instruction text","file constraints","drag state"],"when_to_use":["파일 업로드가 화면의 주요 행동일 때"],"anti_use":["작은 첨부만 필요하면 file upload button이나 attachment list가 낫다"],"prompt_phrases":["PDF를 끌어다 놓는 upload dropzone을 만들어줘"]},{"id":"attachment-list","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"첨부파일 목록","aliases":["attachment list","첨부 목록","파일 첨부 리스트"]},"en":{"name":"Attachment list","aliases":["File attachments list","Attachment rows"]},"one_liner":"첨부된 파일을 이름, 크기, 상태, 제거 행동과 함께 나열하는 목록.","description":"메시지, 폼, 이슈, 문서에 붙은 파일을 업로드 상태와 함께 관리한다.","visual_anatomy":["file icon","filename","size","upload status","remove action"],"when_to_use":["여러 첨부파일을 확인하거나 삭제해야 할 때"],"anti_use":["파일 자체가 주요 콘텐츠면 file card나 gallery가 더 잘 보인다"],"prompt_phrases":["업로드 진행 상태가 있는 attachment list를 넣어줘"]},{"id":"file-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"파일 카드","aliases":["file card","문서 카드","파일 타일"]},"en":{"name":"File card","aliases":["Document card","File tile"]},"one_liner":"파일 하나를 아이콘, 이름, 메타데이터, 액션과 함께 카드로 보여주는 UI.","description":"드라이브, 문서함, 업로드 결과에서 파일을 시각적으로 선택하게 한다.","visual_anatomy":["file icon","filename","metadata","preview area","actions"],"when_to_use":["파일을 카드/타일 뷰로 탐색해야 할 때"],"anti_use":["열 정렬과 대량 작업이 중요하면 table이 낫다"],"prompt_phrases":["PDF 아이콘과 더보기 메뉴가 있는 file card를 만들어줘"]},{"id":"product-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"상품 카드","aliases":["product card","제품 카드","commerce card"]},"en":{"name":"Product card","aliases":["Commerce card","Item card"]},"one_liner":"상품 이미지, 이름, 가격, 평점, 장바구니 행동을 묶은 카드.","description":"커머스 목록에서 사용자가 상품을 훑고 선택하거나 바로 담을 수 있게 한다.","visual_anatomy":["product image","title","price","rating","add action"],"when_to_use":["상품 목록이나 추천 영역을 카드로 보여줄 때"],"anti_use":["상품 속성 비교가 핵심이면 comparison table이 낫다"],"prompt_phrases":["이미지 가격 장바구니 버튼이 있는 product card를 만들어줘"],"related":[{"id":"cross-sell-related-strip","relation":"use-with","note":"상품 상세나 장바구니 하단의 cross-sell related strip은 이 product card를 그대로 재사용하는 캐러셀 조합이다."}]},{"id":"price-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"가격 카드","aliases":["price card","요금 카드","pricing card"]},"en":{"name":"Price card","aliases":["Pricing card","Price plan card"]},"one_liner":"요금제나 상품 가격, 핵심 혜택, 선택 행동을 보여주는 카드.","description":"가격과 주요 조건을 빠르게 비교하고 사용자가 선택 행동으로 이어지게 한다.","visual_anatomy":["plan name","price","billing period","feature bullets","select action"],"when_to_use":["요금제나 상품 옵션을 카드 형태로 제시할 때"],"anti_use":["세부 기능 비교가 많으면 comparison table과 함께 쓴다"],"prompt_phrases":["월 가격과 시작하기 버튼이 있는 price card를 넣어줘"]},{"id":"plan-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"플랜 카드","aliases":["plan card","요금제 카드","subscription plan card"]},"en":{"name":"Plan card","aliases":["Subscription plan card","Tier card"]},"one_liner":"구독 플랜의 이름, 대상, 기능, 현재 선택 상태를 보여주는 카드.","description":"price card보다 구독 tier의 차이와 현재 플랜 표시가 중심이다.","visual_anatomy":["tier name","current badge","feature summary","upgrade or select action"],"when_to_use":["구독 플랜을 선택하거나 변경하는 설정 화면에서"],"anti_use":["단순 가격 노출만 필요하면 price card가 더 직접적이다"],"prompt_phrases":["현재 플랜 배지가 있는 plan card 목록을 보여줘"]},{"id":"feature-comparison","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"기능 비교","aliases":["feature comparison","기능 비교표","플랜 비교"]},"en":{"name":"Feature comparison","aliases":["Feature comparison table","Plan comparison"]},"one_liner":"플랜이나 제품별 기능 제공 여부를 행과 열로 비교하는 UI.","description":"comparison table의 커머스/플랜 특화 형태로 체크, 제한, 강조 열을 사용한다.","visual_anatomy":["feature rows","plan columns","checkmarks","highlighted tier"],"when_to_use":["사용자가 플랜별 기능 차이를 근거로 선택해야 할 때"],"anti_use":["기능이 3개 이하이면 plan card 안 요약으로 충분하다"],"prompt_phrases":["Basic Pro Team 기능 차이를 feature comparison으로 보여줘"]},{"id":"coupon-field","status":"draft","category":"input","group":"input-pickers","ko":{"name":"쿠폰 입력 필드","aliases":["coupon field","프로모션 코드 입력","할인 코드"]},"en":{"name":"Coupon field","aliases":["Promo code field","Discount code input"]},"one_liner":"쿠폰이나 프로모션 코드를 입력하고 적용하는 입력+버튼 조합.","description":"결제 요약 근처에서 코드 입력, 적용, 성공/실패 상태를 보여준다.","visual_anatomy":["code input","apply button","validation state","discount feedback"],"when_to_use":["체크아웃이나 결제 화면에서 할인 코드를 받을 때"],"anti_use":["일반 검색이나 인증 코드를 coupon field라고 부르지 않는다"],"prompt_phrases":["결제 요약 아래에 적용 버튼이 있는 coupon field를 넣어줘"]},{"id":"quantity-stepper","status":"draft","category":"input","group":"input-pickers","ko":{"name":"수량 스테퍼","aliases":["quantity stepper","수량 조절기","plus minus input","터치 수량 스테퍼"]},"en":{"name":"Quantity stepper","aliases":["Quantity input stepper","Plus minus input","Touch quantity stepper"]},"one_liner":"빼기/더하기 버튼으로 상품 수량 같은 숫자를 조절하는 입력.","description":"직접 입력보다 작은 정수 범위를 빠르게 늘리거나 줄이게 한다.","visual_anatomy":["minus button","quantity value","plus button","min max constraints"],"when_to_use":["장바구니 수량","인원수","티켓 수처럼 작은 정수를 조절할 때"],"anti_use":["큰 범위나 연속 값은 slider나 number input이 낫다"],"prompt_phrases":["장바구니에 plus minus quantity stepper를 넣어줘"]},{"id":"cart-summary","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"장바구니 요약","aliases":["cart summary","주문 요약","checkout summary"]},"en":{"name":"Cart summary","aliases":["Order summary","Checkout summary"]},"one_liner":"상품 합계, 배송비, 할인, 총 결제 금액을 요약하는 영역.","description":"결제 전 사용자가 비용 구성을 확인하고 다음 단계로 이동하게 한다.","visual_anatomy":["line items","subtotal","discount","shipping","total","checkout action"],"when_to_use":["장바구니나 체크아웃에서 결제 금액을 확인해야 할 때"],"anti_use":["주문 완료 이후에는 order status나 receipt가 더 적절하다"],"prompt_phrases":["소계 배송비 할인 총액이 있는 cart summary를 만들어줘"]},{"id":"checkout-step","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"체크아웃 단계","aliases":["checkout step","결제 단계","주문 단계"]},"en":{"name":"Checkout step","aliases":["Checkout stepper","Purchase step"]},"one_liner":"배송, 결제, 확인처럼 구매 흐름의 현재 단계를 보여주는 구조.","description":"사용자가 결제 흐름에서 어디에 있고 다음에 무엇을 해야 하는지 알게 한다.","visual_anatomy":["step indicator","current step","completed steps","step content"],"when_to_use":["구매나 가입처럼 여러 단계가 순서대로 진행될 때"],"anti_use":["한 화면에서 끝나는 간단 결제에는 stepper가 과하다"],"prompt_phrases":["배송 결제 확인 checkout step을 상단에 보여줘"]},{"id":"payment-method-card","status":"draft","category":"selection","group":"selection-context","ko":{"name":"결제수단 카드","aliases":["payment method card","카드 선택 UI","결제 카드"]},"en":{"name":"Payment method card","aliases":["Payment card selector","Billing method card"]},"one_liner":"신용카드나 계좌 같은 결제수단을 선택하고 관리하는 카드.","description":"브랜드, 마지막 번호, 만료일, 기본 결제수단 여부, 선택 상태를 보여준다.","visual_anatomy":["payment brand","masked number","expiry","selected state","manage action"],"when_to_use":["여러 결제수단 중 하나를 선택하거나 기본값을 관리할 때"],"anti_use":["카드 정보 입력 폼은 별도 payment form으로 구분한다"],"prompt_phrases":["기본 배지가 있는 payment method card를 선택 가능하게 만들어줘"]},{"id":"address-card","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"주소 카드","aliases":["address card","배송지 카드","address selector"]},"en":{"name":"Address card","aliases":["Shipping address card","Address selector"]},"one_liner":"배송지나 청구지 주소를 카드 형태로 표시하고 선택하는 UI.","description":"수령인, 주소, 전화번호, 기본 주소 배지, 편집 행동을 함께 보여준다.","visual_anatomy":["recipient","address lines","default badge","selected state","edit action"],"when_to_use":["여러 배송지나 청구지 중 하나를 고를 때"],"anti_use":["주소를 새로 입력하는 폼은 address form으로 분리한다"],"prompt_phrases":["기본 배송지 배지가 있는 address card를 만들어줘"]},{"id":"order-status","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"주문 상태","aliases":["order status","배송 상태","주문 진행상태"]},"en":{"name":"Order status","aliases":["Delivery status","Fulfillment status"]},"one_liner":"주문 접수, 결제, 배송, 완료 같은 진행 상태를 표시하는 UI.","description":"현재 주문이 어디까지 진행됐는지와 예상 도착일, 다음 행동을 알려준다.","visual_anatomy":["status label","progress steps","timestamp","delivery estimate"],"when_to_use":["구매 후 주문이나 배송 진행을 추적해야 할 때"],"anti_use":["결제 전 단계 안내는 checkout step이 더 정확하다"],"prompt_phrases":["주문 접수 배송중 완료 order status를 보여줘"]},{"id":"calendar-event-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"캘린더 이벤트 카드","aliases":["calendar event card","일정 카드","이벤트 카드"]},"en":{"name":"Calendar event card","aliases":["Event card","Schedule card"]},"one_liner":"일정 하나의 제목, 시간, 장소, 참석 상태를 카드처럼 보여주는 UI.","description":"캘린더나 일정 목록에서 이벤트를 빠르게 확인하고 선택하게 한다.","visual_anatomy":["event title","time range","location","attendee status","color marker"],"when_to_use":["일정 목록이나 캘린더 상세에서 이벤트 단위를 보여줄 때"],"anti_use":["월/주 전체 배치는 calendar view가 더 정확하다"],"prompt_phrases":["시간 장소 참석자가 있는 calendar event card를 만들어줘"]},{"id":"kanban-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"칸반 카드","aliases":["kanban card","보드 카드","작업 카드"]},"en":{"name":"Kanban card","aliases":["Board card","Task card"]},"one_liner":"칸반 보드의 한 작업을 제목, 라벨, 담당자, 상태로 보여주는 카드.","description":"보드 컬럼 안에서 드래그하거나 열어볼 수 있는 작업 단위다.","visual_anatomy":["task title","labels","assignee avatar","metadata","drag affordance"],"when_to_use":["작업 보드에서 항목 하나를 표현할 때"],"anti_use":["보드 전체 구조는 kanban이나 board column으로 부른다"],"prompt_phrases":["라벨과 담당자 아바타가 있는 kanban card를 넣어줘"]},{"id":"board-column","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"보드 컬럼","aliases":["board column","칸반 컬럼","lane"]},"en":{"name":"Board column","aliases":["Kanban column","Board lane"]},"one_liner":"칸반 보드에서 같은 상태의 카드를 세로로 묶는 열.","description":"할 일, 진행 중, 완료 같은 상태를 기준으로 카드 묶음을 보여준다.","visual_anatomy":["column header","item count","card stack","add card action"],"when_to_use":["작업 상태별로 카드를 이동시키는 보드 화면에서"],"anti_use":["단순 목록 그룹은 grouped list가 더 자연스럽다"],"prompt_phrases":["할 일 진행 중 완료 board column을 만들어줘"]},{"id":"empty-search-result","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"검색 결과 없음","aliases":["empty search result","no results","검색 빈 상태"]},"en":{"name":"Empty search result","aliases":["No results state","Empty results"]},"one_liner":"검색어에 맞는 결과가 없을 때 다음 행동을 안내하는 빈 상태.","description":"검색어 확인, 필터 해제, 새 항목 생성 같은 복구 행동을 제공한다.","visual_anatomy":["empty icon","query echo","suggestion text","clear filters action"],"when_to_use":["검색이나 필터 결과가 0개일 때"],"anti_use":["아직 데이터가 전혀 없는 상태는 empty state와 구분한다"],"prompt_phrases":["검색어와 필터 초기화 버튼이 있는 empty search result를 보여줘"]},{"id":"onboarding-checklist","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"온보딩 체크리스트","aliases":["onboarding checklist","시작 체크리스트","setup checklist"]},"en":{"name":"Onboarding checklist","aliases":["Setup checklist","Getting started checklist"]},"one_liner":"사용자가 시작에 필요한 여러 작업을 순서대로 완료하게 돕는 체크리스트.","description":"계정 설정, 초대, 첫 프로젝트 생성 같은 초기 행동을 진행률과 함께 보여준다.","visual_anatomy":["checklist rows","completed check","progress count","next action"],"when_to_use":["신규 사용자가 초기 설정을 마쳐야 제품 가치를 볼 수 있을 때"],"anti_use":["단순 도움말 링크 목록은 help center card가 더 적합하다"],"prompt_phrases":["3단계 온보딩 체크리스트와 진행률을 넣어줘"]},{"id":"setup-progress","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"설정 진행률","aliases":["setup progress","설정 완료도","setup completion"]},"en":{"name":"Setup progress","aliases":["Setup completion","Configuration progress"]},"one_liner":"제품 설정이나 계정 준비가 몇 퍼센트 완료됐는지 보여주는 상태.","description":"남은 설정 항목과 완료율을 보여줘 다음 행동을 유도한다.","visual_anatomy":["progress meter","completed count","remaining task","continue action"],"when_to_use":["초기 설정이나 연동 설정이 여러 단계로 나뉠 때"],"anti_use":["일회성 로딩 진행률에는 progress bar가 더 정확하다"],"prompt_phrases":["설정 완료도 60% setup progress를 보여줘"]},{"id":"help-center-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"도움말 센터 카드","aliases":["help center card","도움말 카드","support card"]},"en":{"name":"Help center card","aliases":["Support card","Help article card"]},"one_liner":"도움말 문서나 지원 주제를 카드로 안내하는 UI.","description":"제목, 설명, 카테고리, 이동 행동을 통해 사용자를 관련 도움말로 보낸다.","visual_anatomy":["help icon","title","description","category","link action"],"when_to_use":["설정이나 빈 상태에서 사용자가 도움말로 이동해야 할 때"],"anti_use":["질문과 답을 바로 펼치려면 FAQ list가 더 적합하다"],"prompt_phrases":["결제 도움말로 이동하는 help center card를 넣어줘"]},{"id":"faq-list","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"FAQ 목록","aliases":["faq list","자주 묻는 질문","질문 목록"]},"en":{"name":"FAQ list","aliases":["Frequently asked questions list","Q&A list"]},"one_liner":"자주 묻는 질문을 접고 펼칠 수 있는 질문/답변 목록.","description":"사용자가 도움말 페이지 안에서 짧은 답을 빠르게 확인하게 한다.","visual_anatomy":["question row","expand icon","answer panel","grouped topics"],"when_to_use":["반복 질문에 대한 짧은 답을 페이지 안에서 제공할 때"],"anti_use":["긴 문서는 help article이나 documentation page로 분리한다"],"prompt_phrases":["질문을 누르면 답이 펼쳐지는 FAQ list를 만들어줘"]},{"id":"announcement-banner","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"공지 배너","aliases":["announcement banner","공지사항 배너","notice banner"]},"en":{"name":"Announcement banner","aliases":["Notice banner","Announcement bar"]},"one_liner":"제품 공지, 변경사항, 이벤트를 눈에 띄게 알리는 배너.","description":"중요한 안내를 페이지 상단이나 섹션 상단에 배치하고 자세히 보기 행동을 제공한다.","visual_anatomy":["announcement text","icon","link action","dismiss action"],"when_to_use":["사용자가 알아야 하는 제품 공지나 일시적 안내가 있을 때"],"anti_use":["사용자 작업 실패나 오류에는 error toast/alert가 더 정확하다"],"prompt_phrases":["상단에 닫을 수 있는 announcement banner를 넣어줘"]},{"id":"release-note-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"릴리즈 노트 카드","aliases":["release note card","업데이트 카드","변경사항 카드"]},"en":{"name":"Release note card","aliases":["Update card","Changelog card"]},"one_liner":"제품 업데이트 내용을 버전, 날짜, 주요 변경과 함께 보여주는 카드.","description":"변경 이력이나 새 기능 안내에서 항목 하나를 구조적으로 보여준다.","visual_anatomy":["version label","date","change summary","tags","read more action"],"when_to_use":["제품 업데이트나 changelog 항목을 카드로 나열할 때"],"anti_use":["감사/보안 로그는 audit log가 더 엄격하다"],"prompt_phrases":["버전 날짜 변경 요약이 있는 release note card를 만들어줘"],"related":[{"id":"docs-changelog-page","relation":"use-with","note":"release-note-card는 항목 하나의 카드 단위이고, docs-changelog-page는 그 카드를 날짜별로 그룹핑하고 카테고리 필터/pagination을 더한 페이지 전체 구성이다."}]},{"id":"docs-changelog-page","status":"draft","category":"data-display","group":"data-display-misc","kind":"block","ko":{"name":"체인지로그 페이지","aliases":["changelog page","릴리즈 노트 페이지","업데이트 히스토리 페이지"]},"en":{"name":"Changelog page","aliases":["Release notes page","Update history page"]},"one_liner":"날짜별로 묶인 릴리즈 항목을 카테고리 필터와 함께 나열하는 changelog 전용 페이지.","description":"release-note-card 단위 항목들을 날짜 헤더 아래 그룹핑하고, 상단 카테고리 필터 chip과 하단 more-보기 페이지네이션으로 긴 변경 이력을 탐색 가능하게 만든다.","visual_anatomy":["date header groups","release note cards per group","category filter chips","search field","show-more pagination"],"when_to_use":["제품의 전체 변경 이력을 날짜/카테고리별로 탐색 가능한 한 페이지로 제공해야 할 때"],"anti_use":["항목이 몇 개뿐이면 release-note-card 목록만으로 충분하고 별도 페이지 레이아웃은 과하다"],"prompt_phrases":["날짜별로 묶이고 카테고리 필터가 있는 changelog 페이지를 만들어줘","릴리즈 노트를 최신순으로 나열하고 더보기 버튼을 넣어줘"],"related":[{"id":"release-note-card","relation":"use-with","note":"docs-changelog-page는 release-note-card를 날짜 그룹으로 배치하는 페이지 레이아웃이다."}]},{"id":"profile-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"프로필 카드","aliases":["profile card","사용자 카드","person card"]},"en":{"name":"Profile card","aliases":["User card","Person card"]},"one_liner":"사용자 아바타, 이름, 역할, 연락 행동을 묶은 카드.","description":"팀, 작성자, 고객, 담당자 정보를 카드 형태로 보여준다.","visual_anatomy":["avatar","name","role","metadata","contact action"],"when_to_use":["사람 정보를 눈에 띄는 카드로 보여줘야 할 때"],"anti_use":["테이블 행 안의 짧은 사용자 정보는 avatar와 text만으로 충분하다"],"prompt_phrases":["아바타 이름 역할 버튼이 있는 profile card를 만들어줘"]},{"id":"team-member-row","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"팀원 행","aliases":["team member row","멤버 행","user row"]},"en":{"name":"Team member row","aliases":["Member row","User row"]},"one_liner":"팀원 한 명의 아바타, 이름, 이메일, 역할, 상태를 한 줄로 보여주는 행.","description":"멤버 관리 화면에서 권한 변경, 초대 상태, 제거 행동을 함께 제공한다.","visual_anatomy":["avatar","name and email","role selector","status","row actions"],"when_to_use":["팀 관리 목록에서 사용자별 정보를 조작해야 할 때"],"anti_use":["사람을 홍보하거나 소개하는 영역은 profile card가 더 적합하다"],"prompt_phrases":["역할 셀렉트와 초대 상태가 있는 team member row를 만들어줘"]},{"id":"role-badge","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"역할 배지","aliases":["role badge","권한 배지","member role badge"]},"en":{"name":"Role badge","aliases":["Permission badge","Member role badge"]},"one_liner":"관리자, 편집자, 뷰어 같은 사용자 역할을 작은 배지로 표시하는 UI.","description":"팀원 목록, 댓글, 프로필에서 사용자 권한 수준을 빠르게 구분한다.","visual_anatomy":["role label","badge shape","permission tone","optional icon"],"when_to_use":["역할이 화면 이해나 조작 권한에 중요할 때"],"anti_use":["상태 진행을 표현하려면 status chip이 더 일반적이다"],"prompt_phrases":["관리자 편집자 뷰어 role badge를 표시해줘"]},{"id":"api-key-field","status":"draft","category":"input","group":"input-text","ko":{"name":"API 키 필드","aliases":["api key field","secret key field","키 표시 필드"]},"en":{"name":"API key field","aliases":["Secret key field","Token field"]},"one_liner":"민감한 API 키를 숨김 표시하고 복사하거나 재생성할 수 있는 필드.","description":"개발자 설정에서 키 값을 노출하지 않으면서 필요한 행동을 제공한다.","visual_anatomy":["masked value","reveal toggle","copy action","rotate action"],"when_to_use":["토큰이나 secret을 사용자가 확인/복사해야 할 때"],"anti_use":["일반 텍스트 값은 copy field가 더 단순하다"],"prompt_phrases":["숨김 표시와 복사 버튼이 있는 API key field를 넣어줘"]},{"id":"webhook-endpoint-row","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"웹훅 엔드포인트 행","aliases":["webhook endpoint row","webhook row","엔드포인트 행"]},"en":{"name":"Webhook endpoint row","aliases":["Webhook row","Endpoint row"]},"one_liner":"웹훅 URL, 이벤트, 상태, 마지막 전송 결과를 한 줄로 보여주는 행.","description":"개발자 설정에서 웹훅 연결 상태와 테스트/비활성화 행동을 관리한다.","visual_anatomy":["endpoint url","event tags","status","last delivery","actions"],"when_to_use":["여러 웹훅 엔드포인트를 관리하는 설정 화면에서"],"anti_use":["단일 URL 입력만 필요하면 text field나 copy field로 충분하다"],"prompt_phrases":["이벤트 태그와 테스트 버튼이 있는 webhook endpoint row를 만들어줘"],"related":[{"id":"webhook-delivery-log-with-retry","relation":"compare","note":"webhook endpoint row는 엔드포인트 설정 한 줄이고, webhook delivery log with retry는 그 엔드포인트의 개별 전송 시도 이력을 상태 코드와 함께 상세히 보여주는 별도 화면이다"}]},{"id":"webhook-delivery-log-with-retry","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"웹훅 전송 로그","aliases":["webhook delivery log","웹훅 재전송 로그","전송 시도 로그"]},"en":{"name":"Webhook delivery log with retry","aliases":["Webhook delivery attempts","Webhook retry log"]},"one_liner":"웹훅 엔드포인트 한 곳의 개별 전송 시도를 HTTP 상태, 응답 시간, 페이로드와 함께 나열하고 실패 건을 수동 재전송하는 로그.","description":"webhook endpoint row가 엔드포인트 설정 한 줄이라면, 이 로그는 그 엔드포인트의 전송 이력을 상태 코드 중심으로 상세히 보여주는 별도 화면이다.","visual_anatomy":["delivery attempt row with timestamp","HTTP status","response time","retry button","payload preview on row expand","status and event type filter"],"when_to_use":["특정 웹훅 엔드포인트의 전송 성공과 실패 이력을 확인하고 실패 건을 수동으로 재전송해야 할 때"],"anti_use":["엔드포인트 자체의 설정과 상태만 보여주면 되면 webhook endpoint row로 충분하다"],"prompt_phrases":["HTTP 상태와 응답 시간이 있는 webhook delivery log를 만들어줘","실패한 전송 시도를 수동으로 재전송할 수 있는 웹훅 로그를 넣어줘"],"related":[{"id":"webhook-endpoint-row","relation":"compare","note":"webhook endpoint row는 엔드포인트 설정 한 줄이고, 이 로그는 그 엔드포인트의 개별 전송 시도 이력을 상태 코드와 함께 상세히 보여주는 별도 화면이다"}]},{"id":"integration-card","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"연동 카드","aliases":["integration card","앱 연동 카드","integration tile"]},"en":{"name":"Integration card","aliases":["App integration card","Integration tile"]},"one_liner":"외부 서비스 연동의 로고, 이름, 설명, 연결 행동을 보여주는 카드.","description":"Slack, Notion, GitHub 같은 연동을 탐색하고 연결 상태를 확인하게 한다.","visual_anatomy":["service logo","integration name","description","connect action","status"],"when_to_use":["여러 외부 연동 옵션을 카드로 보여줄 때"],"anti_use":["이미 연결된 인스턴스 하나는 connection card가 더 구체적이다"],"prompt_phrases":["Slack 로고와 연결 버튼이 있는 integration card를 만들어줘"]},{"id":"connection-card","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"연결 카드","aliases":["connection card","연결된 계정 카드","connected account card"]},"en":{"name":"Connection card","aliases":["Connected account card","Account connection card"]},"one_liner":"이미 연결된 외부 계정이나 서비스 인스턴스의 상태를 보여주는 카드.","description":"계정명, 연결 상태, 동기화 시각, 연결 해제 행동을 제공한다.","visual_anatomy":["service identity","connected account","sync status","disconnect action"],"when_to_use":["연결된 외부 계정의 상태와 관리 행동이 필요할 때"],"anti_use":["연동 후보 목록은 integration card가 더 적합하다"],"prompt_phrases":["연결됨 상태와 해제 버튼이 있는 connection card를 넣어줘"]},{"id":"billing-summary","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"결제 요약","aliases":["billing summary","청구 요약","billing overview"]},"en":{"name":"Billing summary","aliases":["Billing overview","Subscription summary"]},"one_liner":"현재 플랜, 다음 청구일, 결제 금액, 결제수단을 요약하는 영역.","description":"계정 설정에서 구독과 청구 상태를 한눈에 확인하게 한다.","visual_anatomy":["current plan","next invoice date","amount","payment method","manage action"],"when_to_use":["구독 설정이나 계정 결제 화면의 상단 요약에서"],"anti_use":["장바구니 결제 전 합계는 cart summary가 더 정확하다"],"prompt_phrases":["플랜 다음 청구일 결제수단이 있는 billing summary를 만들어줘"]},{"id":"invoice-row","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"인보이스 행","aliases":["invoice row","청구서 행","billing row"]},"en":{"name":"Invoice row","aliases":["Billing row","Invoice list row"]},"one_liner":"청구서의 날짜, 금액, 상태, 다운로드 행동을 한 줄로 보여주는 행.","description":"결제 내역 목록에서 각 인보이스를 확인하고 PDF를 내려받게 한다.","visual_anatomy":["invoice date","amount","status","invoice number","download action"],"when_to_use":["청구 내역이나 영수증 목록을 보여줄 때"],"anti_use":["결제 예정 요약은 billing summary가 더 적합하다"],"prompt_phrases":["상태 배지와 PDF 다운로드가 있는 invoice row를 넣어줘"]},{"id":"version-history-list","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"버전 히스토리 목록","aliases":["version history list","버전 기록","revision list"]},"en":{"name":"Version history list","aliases":["Revision list","Version history"]},"one_liner":"문서나 디자인의 저장 버전을 시간순으로 보여주는 목록.","description":"버전 시간, 작성자, 변경 요약, 복원 행동을 함께 제공한다.","visual_anatomy":["version timestamp","author","change summary","restore action"],"when_to_use":["문서","디자인","설정의 이전 버전을 확인하거나 복원해야 할 때"],"anti_use":["보안 추적 목적이면 audit log가 더 엄격하다"],"prompt_phrases":["복원 버튼이 있는 version history list를 만들어줘"]},{"id":"mobile-filter-bottom-sheet","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 필터 바텀 시트","aliases":["필터 시트","모바일 필터 패널","filter bottom sheet"]},"en":{"name":"Mobile filter bottom sheet","aliases":["Filter sheet","Filter bottom sheet"]},"one_liner":"모바일 목록 화면에서 필터 옵션을 아래에서 올라오는 시트로 고르는 패턴.","description":"검색 결과, 상품 목록, 지도 목록처럼 필터 조건이 많지만 화면 공간이 좁을 때 사용한다.","visual_anatomy":["bottom sheet container","drag handle","filter groups","apply button","clear filters action"],"when_to_use":["모바일에서 필터 조건이 여러 그룹으로 나뉠 때","목록을 보면서 조건을 조정해야 할 때"],"anti_use":["필터가 1-2개뿐이면 filter chip이나 segmented tabs가 더 빠르다"],"prompt_phrases":["상품 목록 아래에서 올라오는 mobile filter bottom sheet를 만들어줘"]},{"id":"inline-date-range-chip","status":"draft","category":"selection","group":"selection-options","ko":{"name":"인라인 날짜 범위 칩","aliases":["날짜 필터 칩","기간 칩","date range chip"]},"en":{"name":"Inline date range chip","aliases":["Date range filter chip","Date chip"]},"one_liner":"선택된 기간을 작은 칩으로 표시하고 눌러 수정할 수 있는 필터 요소.","description":"대시보드나 리스트 상단에서 현재 적용 중인 기간 조건을 compact하게 보여준다.","visual_anatomy":["pill container","calendar icon","date range label","remove or edit affordance"],"when_to_use":["현재 적용된 날짜 필터를 계속 보여줘야 할 때","필터 바 공간을 아껴야 할 때"],"anti_use":["날짜를 처음 입력하는 주 흐름에는 date range picker가 더 명확하다"],"prompt_phrases":["지난 7일 기간을 보여주는 inline date range chip을 넣어줘"]},{"id":"floating-search-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"플로팅 검색 버튼","aliases":["떠 있는 검색 버튼","search FAB","floating search"]},"en":{"name":"Floating search button","aliases":["Search FAB","Floating search action"]},"one_liner":"스크롤 중에도 검색 화면을 열 수 있게 떠 있는 검색 행동 버튼.","description":"지도, 피드, 긴 목록처럼 상단 검색창이 화면 밖으로 사라지는 모바일 화면에서 사용한다.","visual_anatomy":["floating circular button","search icon","elevated surface","bottom or corner placement"],"when_to_use":["검색이 핵심 행동이지만 상단 공간을 계속 차지하면 방해될 때"],"anti_use":["검색이 항상 핵심이면 mobile search header가 더 직접적이다"],"prompt_phrases":["목록 오른쪽 아래에 floating search button을 넣어줘"]},{"id":"avatar-group","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"아바타 그룹","aliases":["겹친 아바타","사용자 묶음","avatar stack"]},"en":{"name":"Avatar group","aliases":["Avatar stack","Facepile"]},"one_liner":"여러 사용자의 아바타를 겹치거나 나란히 보여주는 사람 묶음 표시.","description":"공유 문서, 팀 공간, 댓글 참여자처럼 여러 사람의 존재를 compact하게 보여준다.","visual_anatomy":["overlapping avatars","overflow count","optional tooltip","participant order"],"when_to_use":["참여자나 담당자가 여러 명일 때","공간을 아끼며 사람 수를 보여줘야 할 때"],"anti_use":["각 사람의 역할과 상태를 조작해야 하면 team member row가 더 적합하다"],"prompt_phrases":["공유 중인 사람들을 avatar group으로 보여줘"]},{"id":"info-label","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"정보 라벨","aliases":["설명 아이콘 라벨","info label","도움말 라벨"]},"en":{"name":"Info label","aliases":["Label with info","Help label"]},"one_liner":"라벨 옆에 작은 정보 아이콘을 붙여 보조 설명을 열 수 있게 하는 요소.","description":"폼 필드나 설정 항목의 뜻을 짧게 보충하되 화면을 복잡하게 만들고 싶지 않을 때 사용한다.","visual_anatomy":["label text","info icon","hover or focus popover","short explanation"],"when_to_use":["전문 용어나 설정 의미를 짧게 설명해야 할 때"],"anti_use":["항상 읽어야 하는 중요한 설명은 helper text나 inline alert로 노출한다"],"prompt_phrases":["설정 이름 옆에 info label을 넣어 설명을 보여줘"]},{"id":"message-bar","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"메시지 바","aliases":["message bar","상태 메시지 바","제품 알림 바"]},"en":{"name":"Message bar","aliases":["MessageBar","Status message bar"]},"one_liner":"화면 상단이나 섹션 안에서 상태, 경고, 성공, 정보 메시지를 가로 바 형태로 보여주는 요소.","description":"토스트보다 오래 남고, alert보다 제품 UI 안에 자연스럽게 붙는 안내 메시지다.","visual_anatomy":["tone icon","message text","optional action","dismiss button","horizontal container"],"when_to_use":["사용자가 읽고 조치해야 하는 상태 메시지를 화면 안에 유지할 때"],"anti_use":["짧은 저장 완료 피드백은 toast나 snackbar가 더 가볍다"],"prompt_phrases":["동기화 실패를 알려주는 dismissible message bar를 상단에 넣어줘"]},{"id":"spin-button","status":"draft","category":"input","group":"input-text","ko":{"name":"스핀 버튼 입력","aliases":["증감 입력","spin button","stepper input"]},"en":{"name":"Spin button","aliases":["Spinbutton","Stepper input"]},"one_liner":"숫자 입력칸에 위/아래 또는 +/- 버튼을 붙여 값을 한 단계씩 조절하는 입력.","description":"직접 숫자를 입력하거나 버튼으로 증감할 수 있어 정확성과 빠른 조절을 함께 제공한다.","visual_anatomy":["numeric input","increment button","decrement button","current value","optional bounds"],"when_to_use":["수량","인원","반복 횟수처럼 작은 정수 값을 조절할 때"],"anti_use":["상품 수량만 compact하게 조절하면 quantity stepper가 더 자연스럽다"],"prompt_phrases":["인원 수를 입력하는 spin button을 넣어줘"]},{"id":"scope-bar","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"스코프 바","aliases":["검색 범위 바","scope tabs","scope bar"]},"en":{"name":"Scope bar","aliases":["Search scope bar","Scope tabs"]},"one_liner":"검색이나 필터 결과의 범위를 상단에서 빠르게 전환하는 선택 막대.","description":"전체, 파일, 사람, 메시지처럼 검색 범주를 좁히는 iOS/macOS 계열 탐색 패턴이다.","visual_anatomy":["segmented scope options","selected scope","result context","compact horizontal bar"],"when_to_use":["검색 결과를 몇 개의 명확한 범주로 빠르게 전환해야 할 때"],"anti_use":["일반 화면 콘텐츠 전환에는 tabs나 segmented control이 더 보편적이다"],"prompt_phrases":["검색 결과 위에 전체 파일 사람 scope bar를 넣어줘"]},{"id":"structured-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"구조화 목록","aliases":["structured list","행 목록","구조 목록"]},"en":{"name":"Structured list","aliases":["StructuredList","Property list"]},"one_liner":"여러 행을 같은 열 구조로 정리하지만 완전한 데이터 테이블보다 가벼운 목록.","description":"제목, 설명, 상태, 보조 메타데이터를 반복 행으로 보여주는 설정/요약 화면에 적합하다.","visual_anatomy":["row container","aligned columns","primary text","secondary metadata","optional action"],"when_to_use":["테이블만큼 복잡하지 않은 구조화 정보를 반복해서 보여줄 때"],"anti_use":["정렬","필터","열 조작이 중요하면 table이나 data grid를 쓴다"],"prompt_phrases":["설정 항목을 structured list로 정리해줘"]},{"id":"inline-loading","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"인라인 로딩","aliases":["inline loading","작은 로딩 상태","행 안 로딩"]},"en":{"name":"Inline loading","aliases":["Inline loading state","Inline spinner"]},"one_liner":"버튼, 행, 작은 영역 안에서 처리 중임을 짧은 텍스트와 스피너로 보여주는 상태.","description":"전체 화면 로딩이 아니라 특정 작업 하나가 진행 중임을 그 자리에서 알려준다.","visual_anatomy":["small spinner","status text","inline placement","optional success state"],"when_to_use":["저장","업로드","동기화처럼 작은 단위 작업의 진행 상태를 보여줄 때"],"anti_use":["페이지 전체 데이터를 불러오면 skeleton이나 loading state가 더 적합하다"],"prompt_phrases":["저장 중 문구가 붙은 inline loading을 버튼 옆에 보여줘"]},{"id":"tag-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"태그 선택기","aliases":["tag picker","태그 고르기","칩 선택 입력"]},"en":{"name":"Tag picker","aliases":["Tag picker input","Tag selector"]},"one_liner":"검색하거나 입력해서 여러 태그를 선택하고 칩으로 쌓는 입력 패턴.","description":"프로젝트 라벨, 관심사, 담당 역할처럼 여러 개의 짧은 분류값을 고르게 한다.","visual_anatomy":["input field","selected tag chips","suggestion list","remove icons"],"when_to_use":["태그 후보가 많고 여러 개를 선택해야 할 때"],"anti_use":["자유 텍스트 태그 생성만 필요하면 tag input이 더 단순하다"],"prompt_phrases":["라벨을 검색해서 여러 개 고르는 tag picker를 넣어줘"]},{"id":"disclosure-group","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"디스클로저 그룹","aliases":["펼침 그룹","disclosure group","접힘 섹션"]},"en":{"name":"Disclosure group","aliases":["Disclosure group","Expandable group"]},"one_liner":"섹션 제목을 눌러 하위 내용을 접거나 펼치는 구조 패턴.","description":"설정, FAQ, 세부 옵션처럼 사용자가 필요할 때만 볼 정보를 단계적으로 드러낸다.","visual_anatomy":["section header","chevron","expanded content","collapsed state"],"when_to_use":["한 화면에 정보가 많아 점진적으로 보여줘야 할 때"],"anti_use":["질문/답변 목록 자체는 accordion이나 FAQ list가 더 정확하다"],"prompt_phrases":["고급 설정을 접고 펼치는 disclosure group으로 만들어줘"]},{"id":"contained-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"컨테인드 리스트","aliases":["contained list","박스형 목록","bordered list"]},"en":{"name":"Contained list","aliases":["ContainedList","Boxed list"]},"one_liner":"목록 전체를 하나의 경계 박스 안에 넣어 행들을 묶어 보여주는 리스트.","description":"카드보다 반복성이 강하고, 일반 list보다 그룹 경계가 명확해야 하는 설정/관리 화면에 쓴다.","visual_anatomy":["outer container","list rows","row dividers","optional row actions"],"when_to_use":["관련 항목 여러 개를 하나의 그룹으로 묶어 보여줄 때"],"anti_use":["각 항목을 독립적으로 강조해야 하면 card list가 더 낫다"],"prompt_phrases":["알림 설정 항목을 contained list로 묶어줘"]},{"id":"email-verification-banner","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"이메일 인증 배너","aliases":["메일 인증 안내","이메일 확인 배너"]},"en":{"name":"Email verification banner","aliases":["Verify email banner","Email confirmation notice"]},"one_liner":"아직 이메일을 인증하지 않은 사용자에게 상단에서 인증을 요청하는 배너.","description":"가입 직후나 계정 설정 화면에서 이메일 인증이 필요한 상태를 계속 알려주고 재전송 행동을 제공한다.","visual_anatomy":["inline banner","verification message","resend action","dismiss optional"],"when_to_use":["이메일 인증 전에도 일부 화면을 사용할 수 있지만 인증 완료를 유도해야 할 때"],"anti_use":["인증 없이는 진행할 수 없는 차단 상황이면 verification-required-screen이 더 명확하다"],"prompt_phrases":["상단에 이메일 인증 배너를 넣고 인증 메일 재전송 버튼을 보여줘"]},{"id":"verification-required-screen","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"인증 필요 화면","aliases":["이메일 인증 필요","계정 인증 필요 화면"]},"en":{"name":"Verification required screen","aliases":["Email verification required","Account verification gate"]},"one_liner":"이메일이나 계정 인증을 완료해야 다음 화면으로 갈 수 있음을 보여주는 차단 화면.","description":"보안이나 신뢰가 필요한 기능 앞에서 사용자가 무엇을 인증해야 하는지와 다음 행동을 분명히 보여준다.","visual_anatomy":["centered gate panel","verification icon","explanation text","primary verify action","secondary resend link"],"when_to_use":["인증이 완료되기 전에는 핵심 기능을 사용할 수 없을 때"],"anti_use":["단순 알림이면 email-verification-banner가 덜 방해된다"],"prompt_phrases":["이메일 인증 전에는 verification required screen을 보여주고 인증 메일 다시 보내기 버튼을 넣어줘"]},{"id":"magic-link-sent-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"매직 링크 전송 상태","aliases":["로그인 링크 전송됨","이메일 로그인 대기 화면"]},"en":{"name":"Magic link sent state","aliases":["Sign-in link sent","Email link sent state"]},"one_liner":"로그인 링크를 이메일로 보낸 뒤 사용자가 메일함을 확인하도록 안내하는 상태 화면.","description":"비밀번호 없는 로그인 흐름에서 전송된 이메일 주소, 재전송, 이메일 변경 행동을 함께 보여준다.","visual_anatomy":["mail icon","sent address","check inbox message","resend timer","change email link"],"when_to_use":["매직 링크나 이메일 로그인 링크를 보낸 뒤 사용자가 앱 밖에서 확인해야 할 때"],"anti_use":["앱 안에서 코드를 바로 입력받는 흐름이면 otp-code-input이 더 적합하다"],"prompt_phrases":["로그인 링크를 보낸 뒤 magic link sent state를 보여주고 30초 후 재전송 버튼을 활성화해줘"]},{"id":"passkey-enrollment-prompt","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"패스키 등록 유도","aliases":["패스키 설정 안내","passkey 등록 프롬프트"]},"en":{"name":"Passkey enrollment prompt","aliases":["Set up passkey prompt","Passkey setup prompt"]},"one_liner":"사용자가 비밀번호 대신 패스키를 등록하도록 유도하는 보안 설정 프롬프트.","description":"로그인 이후나 보안 설정 화면에서 더 빠르고 안전한 로그인 방법을 제안한다.","visual_anatomy":["security icon","passkey benefit text","set up action","skip action"],"when_to_use":["계정 보안을 강화하거나 비밀번호 없는 로그인을 도입할 때"],"anti_use":["이미 인증이 필요한 순간에는 biometric-prompt나 passkey-sign-in-sheet가 더 직접적이다"],"prompt_phrases":["로그인 후 패스키를 등록하라는 passkey enrollment prompt를 보여줘"]},{"id":"passkey-sign-in-sheet","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"패스키 로그인 시트","aliases":["패스키 인증 시트","passkey 로그인"]},"en":{"name":"Passkey sign-in sheet","aliases":["Passkey authentication sheet","Passkey login sheet"]},"one_liner":"패스키로 로그인할 계정과 인증 행동을 보여주는 로그인 시트.","description":"사용자가 저장된 패스키를 선택하거나 기기 인증을 진행하는 순간에 쓰는 집중형 인증 UI다.","visual_anatomy":["bottom or modal sheet","account identity","passkey icon","continue action","fallback link"],"when_to_use":["패스키 인증을 시작했지만 계정 선택이나 fallback이 필요할 때"],"anti_use":["패스키 등록을 제안하는 마케팅성 안내에는 passkey-enrollment-prompt가 낫다"],"prompt_phrases":["패스키로 로그인하는 passkey sign-in sheet를 만들고 다른 방법으로 로그인 링크를 넣어줘"]},{"id":"mfa-enrollment-card","status":"draft","category":"data-display","group":"data-account-support","ko":{"name":"2단계 인증 등록 카드","aliases":["MFA 설정 카드","이중 인증 등록"]},"en":{"name":"MFA enrollment card","aliases":["Two-factor setup card","2FA enrollment card"]},"one_liner":"사용자가 2단계 인증을 설정하도록 보안 상태와 등록 행동을 보여주는 카드.","description":"보안 설정, 관리자 콘솔, 계정 점검 화면에서 아직 설정하지 않은 보호 수단을 안내한다.","visual_anatomy":["security method icon","setup status","benefit text","set up button"],"when_to_use":["선택형 보안 기능을 사용자가 직접 켜야 할 때"],"anti_use":["인증 코드를 입력하는 순간에는 otp-code-input을 쓴다"],"prompt_phrases":["보안 설정에 2단계 인증 등록 카드를 넣고 아직 설정 안 됨 상태를 보여줘"]},{"id":"recovery-code-panel","status":"draft","category":"data-display","group":"data-account-support","ko":{"name":"복구 코드 패널","aliases":["백업 코드 패널","recovery codes"]},"en":{"name":"Recovery code panel","aliases":["Backup code panel","Recovery codes list"]},"one_liner":"2단계 인증 복구 코드를 보여주고 저장 또는 복사하도록 하는 보안 패널.","description":"MFA 설정 직후 사용자가 계정 복구용 코드를 안전하게 보관하도록 돕는다.","visual_anatomy":["code list","masked or grouped codes","copy action","download action","warning text"],"when_to_use":["2단계 인증 설정 후 복구 수단을 사용자가 보관해야 할 때"],"anti_use":["짧은 일회용 인증번호 입력에는 otp-code-input을 쓴다"],"prompt_phrases":["2단계 인증 설정 후 recovery code panel을 보여주고 복사와 다운로드 버튼을 넣어줘"]},{"id":"recovery-code-warning","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"복구 코드 경고","aliases":["백업 코드 저장 경고","recovery code warning"]},"en":{"name":"Recovery code warning","aliases":["Backup code warning","Save recovery codes warning"]},"one_liner":"복구 코드를 저장하지 않으면 계정 복구가 어려울 수 있음을 강조하는 경고.","description":"사용자가 보안 설정을 완료하기 전에 중요한 백업 행동을 놓치지 않게 한다.","visual_anatomy":["warning callout","risk statement","confirm checkbox or action","continue button"],"when_to_use":["사용자가 복구 코드를 저장하지 않고 다음 단계로 넘어가려 할 때"],"anti_use":["일반 주의 문구는 warning-state나 inline alert가 충분하다"],"prompt_phrases":["복구 코드를 저장하지 않고 넘어가려 할 때 recovery code warning을 보여줘"]},{"id":"trusted-device-prompt","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"신뢰 기기 등록 프롬프트","aliases":["이 기기 기억하기","trusted device prompt"]},"en":{"name":"Trusted device prompt","aliases":["Remember this device prompt","Trust this device"]},"one_liner":"로그인 후 현재 기기를 신뢰할지 물어 다음 인증 빈도를 줄이는 프롬프트.","description":"사용자가 개인 기기에서 반복 인증을 줄일 수 있게 하되 공용 기기에서는 건너뛰도록 안내한다.","visual_anatomy":["device icon","trust explanation","trust action","not now action","safety note"],"when_to_use":["2단계 인증 이후 현재 기기를 기억할지 선택하게 할 때"],"anti_use":["단순 로그인 성공 알림에는 success-toast가 더 가볍다"],"prompt_phrases":["2단계 인증 후 이 기기를 신뢰할지 묻는 trusted device prompt를 보여줘"]},{"id":"device-approval-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"기기 승인 대기 상태","aliases":["새 기기 승인 대기","device approval"]},"en":{"name":"Device approval state","aliases":["New device approval state","Waiting for device approval"]},"one_liner":"새 기기 로그인이나 접근 요청이 다른 기기에서 승인되기를 기다리는 상태.","description":"사용자가 현재 화면에서 대기해야 하는 이유, 승인할 위치, 만료 시간을 알려준다.","visual_anatomy":["device illustration","waiting status","countdown or expiry","resend or cancel action"],"when_to_use":["보안상 다른 기기나 관리자 승인이 필요한 로그인 흐름에서"],"anti_use":["일반 로딩이면 loading-state를 쓰고 승인 주체가 없으면 pending-approval-state가 더 넓다"],"prompt_phrases":["새 기기 로그인 승인 대기 device approval state를 보여주고 만료 시간을 표시해줘"]},{"id":"access-request-panel","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"접근 요청 패널","aliases":["리소스 접근 요청","access request"]},"en":{"name":"Access request panel","aliases":["Request access panel","Resource access request"]},"one_liner":"접근 권한이 없는 리소스에서 관리자에게 권한을 요청하는 패널.","description":"사용자가 왜 막혔는지, 어떤 권한을 요청하는지, 누구에게 요청되는지 확인하게 한다.","visual_anatomy":["locked resource message","requested role","optional reason field","request access button"],"when_to_use":["문서","프로젝트","워크스페이스 접근 권한이 없지만 요청할 수 있을 때"],"anti_use":["권한 요청 자체가 불가능하면 locked-state가 더 적합하다"],"prompt_phrases":["접근 권한이 없을 때 사유 입력이 있는 access request panel을 보여줘"]},{"id":"access-pending-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"접근 승인 대기 상태","aliases":["권한 승인 대기","access pending"]},"en":{"name":"Access pending state","aliases":["Request pending state","Waiting for access approval"]},"one_liner":"접근 요청을 보낸 뒤 승인 전까지 현재 상태와 다음 가능 행동을 보여주는 화면.","description":"요청이 접수되었음을 확인시키고 승인자, 예상 처리, 요청 취소나 다시 알림 같은 행동을 제공한다.","visual_anatomy":["pending icon","request summary","approver hint","cancel or notify action"],"when_to_use":["권한 요청 후 즉시 접근할 수 없고 승인 처리를 기다려야 할 때"],"anti_use":["요청 전에는 access-request-panel이 맞고","기술적 지연은 loading-state가 맞다"],"prompt_phrases":["권한 요청 후 access pending state를 보여주고 승인자 정보를 표시해줘"]},{"id":"invite-acceptance-screen","status":"draft","category":"structure","group":"structure-auth-layouts","ko":{"name":"초대 수락 화면","aliases":["워크스페이스 초대 수락","invite acceptance"]},"en":{"name":"Invite acceptance screen","aliases":["Invitation acceptance screen","Join workspace screen"]},"one_liner":"초대 링크로 들어온 사용자가 초대 대상과 참여 행동을 확인하는 화면.","description":"초대한 조직, 역할, 이메일 주소, 수락/거절 행동을 한 화면에서 보여준다.","visual_anatomy":["workspace identity","inviter or role","invited email","accept action","decline action"],"when_to_use":["팀","워크스페이스","프로젝트 초대를 링크나 이메일로 처리할 때"],"anti_use":["이미 로그인한 사용자의 단순 팀 전환은 account-switcher가 더 적합하다"],"prompt_phrases":["워크스페이스 초대 링크를 열면 invite acceptance screen을 보여줘"]},{"id":"invite-expired-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"초대 만료 상태","aliases":["만료된 초대 링크","invite expired"]},"en":{"name":"Invite expired state","aliases":["Expired invitation state","Expired invite link"]},"one_liner":"초대 링크가 만료되었거나 사용할 수 없을 때 재요청 행동을 제공하는 상태 화면.","description":"사용자가 링크가 왜 실패했는지 이해하고 새 초대를 요청하거나 관리자에게 문의할 수 있게 한다.","visual_anatomy":["expired icon","invalid link message","request new invite action","contact support link"],"when_to_use":["초대 링크가 만료","취소","이미 사용됨 상태일 때"],"anti_use":["일반 링크 오류는 error-state나 retry-panel이 충분하다"],"prompt_phrases":["초대 링크가 만료되면 invite expired state와 새 초대 요청 버튼을 보여줘"]},{"id":"workspace-join-request","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"워크스페이스 참여 요청","aliases":["팀 참여 요청","join request"]},"en":{"name":"Workspace join request","aliases":["Team join request","Request to join workspace"]},"one_liner":"사용자가 조직이나 워크스페이스에 참여 요청을 보내는 UI.","description":"도메인 기반 조직 발견이나 제한된 워크스페이스에서 가입 사유와 요청 행동을 보여준다.","visual_anatomy":["workspace card","membership status","optional reason field","request to join button"],"when_to_use":["사용자가 바로 참여할 수 없고 관리자 승인이 필요한 워크스페이스일 때"],"anti_use":["초대 링크가 이미 있으면 invite-acceptance-screen이 더 직접적이다"],"prompt_phrases":["회사 도메인으로 찾은 워크스페이스에 참여 요청하는 workspace join request를 만들어줘"]},{"id":"welcome-choice-screen","status":"draft","category":"structure","group":"structure-auth-layouts","ko":{"name":"시작 선택 화면","aliases":["웰컴 선택 화면","시작 방식 선택"]},"en":{"name":"Welcome choice screen","aliases":["Start choice screen","Welcome option screen"]},"one_liner":"새 사용자가 템플릿 선택, 새로 만들기, 가져오기처럼 시작 방식을 고르는 첫 화면.","description":"빈 제품에 바로 떨어뜨리지 않고 사용자의 의도에 맞는 첫 경로를 선택하게 한다.","visual_anatomy":["welcome headline","option cards","recommended option","skip or later link"],"when_to_use":["처음 시작할 수 있는 경로가 여러 개이고 사용자의 목적을 먼저 알아야 할 때"],"anti_use":["단순 소개 슬라이드는 onboarding-pager가 더 적합하다"],"prompt_phrases":["첫 방문자에게 새로 만들기 가져오기 템플릿 선택이 있는 welcome choice screen을 보여줘"]},{"id":"import-data-choice","status":"draft","category":"selection","group":"selection-options","ko":{"name":"데이터 가져오기 선택","aliases":["가져오기 방식 선택","import choice"]},"en":{"name":"Import data choice","aliases":["Import method choice","Data import option picker"]},"one_liner":"사용자가 CSV, 직접 입력, 외부 서비스 연결 중 데이터 시작 방법을 고르는 선택 UI.","description":"온보딩이나 빈 상태에서 첫 데이터를 만드는 방법을 여러 경로로 제안한다.","visual_anatomy":["import option cards","method icons","effort hint","recommended badge","continue action"],"when_to_use":["제품 사용을 시작하려면 먼저 데이터나 계정을 연결해야 할 때"],"anti_use":["이미 연결된 서비스 상태는 connection-card가 더 적합하다"],"prompt_phrases":["처음 시작할 때 CSV 업로드 직접 입력 서비스 연결을 고르는 import data choice를 보여줘"]},{"id":"setup-blocker-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"설정 차단 상태","aliases":["설정 미완료 차단","setup blocker"]},"en":{"name":"Setup blocker state","aliases":["Setup required blocker","Configuration required state"]},"one_liner":"필수 설정이 끝나지 않아 현재 기능을 사용할 수 없음을 보여주는 차단 상태.","description":"사용자가 어떤 설정을 완료해야 막힌 기능이 열리는지와 바로 이동할 행동을 제공한다.","visual_anatomy":["blocked feature area","missing setup item","go to setup action","help link"],"when_to_use":["결제","연동","권한","초기 설정이 완료되어야 기능을 사용할 수 있을 때"],"anti_use":["진행률만 보여주면 setup-progress가 충분하고 오류 상황은 error-state가 맞다"],"prompt_phrases":["연동 설정 전에는 setup blocker state를 보여주고 설정으로 이동 버튼을 넣어줘"]},{"id":"reconnect-account-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"계정 재연결 상태","aliases":["연동 만료 상태","reconnect account"]},"en":{"name":"Reconnect account state","aliases":["Account disconnected state","Reconnect integration state"]},"one_liner":"외부 계정 연결이 만료되거나 끊겼을 때 다시 연결하도록 안내하는 상태.","description":"연동 카드나 데이터 영역에서 동기화가 멈춘 이유와 재연결 행동을 명확히 보여준다.","visual_anatomy":["disconnected icon","service name","last sync or expiry text","reconnect button"],"when_to_use":["OAuth 토큰 만료","외부 서비스 연결 해제","동기화 권한 변경이 발생했을 때"],"anti_use":["정상 연결 정보를 보여주는 경우에는 connection-card가 맞다"],"prompt_phrases":["Google 계정 연결이 끊기면 reconnect account state와 다시 연결 버튼을 보여줘"]},{"id":"consent-review-screen","status":"draft","category":"structure","group":"structure-auth-layouts","ko":{"name":"동의 검토 화면","aliases":["권한 동의 검토","consent review"]},"en":{"name":"Consent review screen","aliases":["Permission consent review","Data consent review"]},"one_liner":"사용자가 연결이나 가입 전에 제공할 데이터와 권한 범위를 검토하는 화면.","description":"민감한 권한이나 데이터 접근을 요청하기 전에 항목별 범위와 이유를 확인하게 한다.","visual_anatomy":["consent summary","permission list","data scope rows","accept action","back action"],"when_to_use":["외부 계정 연결","개인정보 제공","조직 권한 승인 전에 범위 확인이 필요할 때"],"anti_use":["브라우저나 OS 시스템 권한은 permission-prompt가 처리한다"],"prompt_phrases":["외부 계정 연결 전에 접근 범위를 보여주는 consent review screen을 만들어줘"]},{"id":"aspect-ratio-box","status":"draft","category":"structure","group":"structure-content-elements","ko":{"name":"비율 고정 박스","aliases":["aspect ratio","종횡비 박스","비율 컨테이너"]},"en":{"name":"Aspect ratio box","aliases":["AspectRatio","Ratio container"]},"one_liner":"이미지나 영상 영역을 16:9, 4:3처럼 일정한 비율로 유지하는 레이아웃 컨테이너.","description":"카드 썸네일, 영상 프리뷰, 갤러리 이미지처럼 로딩 전후에도 같은 화면 비율을 유지해야 할 때 쓴다.","visual_anatomy":["fixed-ratio frame","media placeholder","crop-safe content","stable width"],"when_to_use":["미디어 영역의 높이가 콘텐츠 로딩 전후에 흔들리면 안 될 때","썸네일 목록의 비율을 통일해야 할 때"],"anti_use":["콘텐츠 높이가 자연스럽게 늘어나야 하는 본문 영역에는 쓰지 않는다"],"prompt_phrases":["카드 썸네일을 16대9 aspect ratio box로 고정해줘"]},{"id":"hover-card","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"호버 카드","aliases":["hover card","마우스오버 카드","미리보기 카드"]},"en":{"name":"Hover card","aliases":["HoverCard","Hover preview card"]},"one_liner":"항목 위에 마우스를 올렸을 때 짧은 프로필, 설명, 미리보기를 보여주는 떠 있는 카드.","description":"링크, 사용자, 용어, 파일처럼 클릭 전에 더 많은 맥락을 살짝 보여주고 싶을 때 쓴다.","visual_anatomy":["trigger text or avatar","floating card","title","supporting metadata","optional arrow"],"when_to_use":["데스크톱에서 hover로 보조 정보를 미리 보여줄 때","tooltip보다 긴 콘텐츠가 필요할 때"],"anti_use":["모바일 주요 정보에는 hover가 없으므로 popover나 detail view를 쓴다","한 줄 도움말은 tooltip이 더 가볍다"],"prompt_phrases":["사용자 아바타에 마우스를 올리면 프로필 hover card가 뜨게 해줘"],"related":[{"id":"tooltip","relation":"compare","note":"짧은 한 줄 설명이면 tooltip, 여러 줄 정보나 미리보기면 hover card가 맞다."},{"id":"popover","relation":"compare","note":"클릭해서 열고 상호작용해야 하면 popover가 더 적합하다."}]},{"id":"scroll-area","status":"draft","category":"structure","group":"structure-content-elements","ko":{"name":"스크롤 영역","aliases":["scroll area","내부 스크롤 영역","커스텀 스크롤"]},"en":{"name":"Scroll area","aliases":["ScrollArea","Custom scroll area"]},"one_liner":"페이지 전체가 아니라 특정 패널이나 목록 안에서만 스크롤되도록 만든 영역.","description":"사이드바, 알림 목록, 긴 메뉴처럼 고정된 크기 안에서 내용만 스크롤해야 할 때 사용한다.","visual_anatomy":["fixed-height container","scrollable content","scrollbar","clipped overflow"],"when_to_use":["패널 크기는 유지하면서 내부 목록만 스크롤해야 할 때","사이드바 안에 긴 메뉴가 들어갈 때"],"anti_use":["페이지 전체 흐름을 자연스럽게 읽는 콘텐츠에는 별도 scroll area를 남용하지 않는다"],"prompt_phrases":["알림 목록을 고정 높이 scroll area 안에서만 스크롤되게 해줘"]},{"id":"native-select","status":"draft","category":"input","group":"input-pickers","ko":{"name":"네이티브 선택창","aliases":["native select","기본 select","브라우저 선택창"]},"en":{"name":"Native select","aliases":["NativeSelect","HTML select"]},"one_liner":"브라우저나 OS 기본 선택 UI를 그대로 사용하는 단순 선택 입력.","description":"커스텀 드롭다운보다 가볍고 접근성/모바일 기본 동작을 우선할 때 쓴다.","visual_anatomy":["native select control","selected option","platform chevron","option list"],"when_to_use":["스타일보다 기본 접근성과 모바일 네이티브 동작이 중요할 때","단순한 선택 입력이 필요할 때"],"anti_use":["검색, 커스텀 옵션 렌더링, 복잡한 그룹이 필요하면 select나 combobox를 쓴다"],"prompt_phrases":["모바일에서도 기본 동작이 자연스러운 native select로 언어를 고르게 해줘"],"related":[{"id":"select","relation":"compare","note":"커스텀 스타일과 옵션 렌더링이 필요하면 select, 기본 플랫폼 동작을 우선하면 native select가 낫다."}]},{"id":"keyboard-shortcut-key","status":"draft","category":"data-display","group":"data-account-support","ko":{"name":"키보드 단축키 키","aliases":["kbd","단축키 키캡","키보드 키 표시"]},"en":{"name":"Keyboard shortcut key","aliases":["Kbd","Keyboard key","Shortcut keycap"]},"one_liner":"Cmd, Ctrl, K 같은 키보드 입력을 작은 키캡 모양으로 보여주는 표시 요소.","description":"메뉴 항목, command palette, 도움말에서 단축키를 실제 키처럼 읽히게 보여준다.","visual_anatomy":["small keycap container","key label","subtle border","inline placement"],"when_to_use":["명령이나 메뉴 옆에 키보드 단축키를 안내할 때","도움말에서 조합키를 보여줄 때"],"anti_use":["클릭 가능한 버튼처럼 쓰지 않는다","긴 설명 문장 전체를 kbd로 감싸지 않는다"],"prompt_phrases":["command palette 항목 오른쪽에 Cmd K kbd 키캡을 보여줘"]},{"id":"navigation-menu","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"내비게이션 메뉴","aliases":["navigation menu","상단 메가 메뉴","제품 내비게이션 메뉴"]},"en":{"name":"Navigation menu","aliases":["NavigationMenu","Top navigation menu"]},"one_liner":"상단 내비게이션 항목을 누르거나 hover했을 때 하위 링크 패널을 보여주는 메뉴.","description":"제품, 리소스, 솔루션처럼 상위 항목 아래에 여러 링크 그룹이 있는 웹사이트 내비게이션에 적합하다.","visual_anatomy":["top nav trigger","active item","dropdown panel","grouped links","viewport transition"],"when_to_use":["마케팅 사이트나 문서 사이트의 상단 메뉴에 여러 하위 링크 그룹을 넣을 때"],"anti_use":["앱 내부 주요 이동은 sidebar navigation이나 tabs가 더 적합할 수 있다","단순 명령 목록은 dropdown menu를 쓴다"],"prompt_phrases":["상단에 제품과 리소스가 펼쳐지는 navigation menu를 만들어줘"],"related":[{"id":"mega-menu","relation":"compare","note":"콘텐츠가 더 크고 마케팅형이면 mega menu, shadcn식 상단 링크 패널은 navigation menu라고 부른다."},{"id":"sidebar-nav","relation":"alternative","note":"앱 내부 반복 사용 내비게이션은 sidebar navigation이 더 일반적이다."}]},{"id":"mobile-form-field-stack","status":"draft","category":"input","group":"input-text","ko":{"name":"모바일 폼 필드 스택","aliases":["mobile form field stack","모바일 입력 필드 묶음","세로 폼 필드 스택"]},"en":{"name":"Mobile form field stack","aliases":["Stacked mobile form fields","Mobile form stack"]},"one_liner":"48x48 이상 터치 타깃과 필드별 helper/error 텍스트를 갖춘, 세로로 쌓인 모바일 폼 필드 구성.","description":"좁은 화면에서 필드 밀도를 낮추지 않으면서 터치 타깃을 확보하고, 포커스 이동과 제출을 키보드 액션으로 이어주는 모바일 전용 폼 구성이다. 데스크톱 `field-group`과 같은 라벨-입력-helper 단위를 쌓지만, 최소 터치 타깃 크기와 다음 필드로 넘어가는 키보드 액션 설계가 핵심 제약으로 추가된다.","visual_anatomy":["stacked text fields","label plus helper or error text per field","48x48 minimum touch target","focus ring","next-field keyboard action","submit cta pinned or inline"],"when_to_use":["모바일 화면에서 여러 입력 필드를 세로로 나열해야 할 때","터치 타깃과 키보드 흐름을 함께 설계해야 할 때"],"anti_use":["필드가 하나뿐이면 단일 text-field로 충분하다","데스크톱 전용 화면에는 일반 field-group을 쓴다"],"prompt_phrases":["모바일 가입 폼을 필드별 최소 터치 타깃을 지키는 mobile form field stack으로 만들어줘"],"related":[{"id":"field-group","relation":"compare","note":"같은 라벨-입력-helper 단위를 쓰지만, field-group은 데스크톱/범용 폼 구성이고 이 항목은 48x48 최소 터치 타깃과 다음 필드 키보드 액션처럼 모바일 전용 제약이 추가된 구성이다."}]},{"id":"field-group","status":"draft","category":"input","group":"input-text","ko":{"name":"필드 그룹","aliases":["field group","폼 필드 그룹","입력 그룹 묶음"]},"en":{"name":"Field group","aliases":["FieldGroup","Form field group"]},"one_liner":"라벨, 설명, 입력, 오류 메시지를 한 단위로 묶어 폼을 구성하는 패턴.","description":"shadcn form에서는 raw div보다 Field/FieldGroup으로 입력 요소의 구조와 상태를 일관되게 만든다.","visual_anatomy":["field label","input control","description text","validation message","vertical grouping"],"when_to_use":["폼 입력을 일관된 라벨/설명/오류 구조로 만들 때","여러 입력 필드를 같은 간격으로 묶을 때"],"anti_use":["단일 입력의 시각 요소 자체를 말할 때는 text field나 select를 쓴다"],"prompt_phrases":["로그인 폼을 field group으로 구성하고 이메일 필드 아래에 설명 문구를 넣어줘"],"related":[{"id":"mobile-form-field-stack","relation":"compare","note":"같은 라벨-입력-helper 단위를 쓰지만, 모바일 화면에서는 48x48 최소 터치 타깃과 다음 필드로 넘어가는 키보드 액션 제약이 추가된 mobile-form-field-stack을 쓴다."}]},{"id":"item-row","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"아이템 행","aliases":["item","item row","리스트 아이템 행"]},"en":{"name":"Item row","aliases":["Item","List item row"]},"one_liner":"아이콘, 제목, 설명, 보조 액션을 한 줄 카드처럼 정렬한 반복 행.","description":"설정 항목, 계정 옵션, 알림 항목처럼 작은 정보 단위를 일관된 행 구조로 보여준다.","visual_anatomy":["leading icon","title","description","trailing action or metadata","row container"],"when_to_use":["목록 안의 각 항목이 제목과 설명, 보조 액션을 함께 가져야 할 때"],"anti_use":["복잡한 열 정렬과 정렬/필터가 필요하면 table이나 data grid를 쓴다"],"prompt_phrases":["설정 목록을 아이콘과 설명이 있는 item row로 만들어줘"]},{"id":"sonner-toast","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"소너 토스트","aliases":["sonner","sonner toast","shadcn toast"]},"en":{"name":"Sonner toast","aliases":["Sonner","Toast notification"]},"one_liner":"shadcn에서 자주 쓰는 Sonner 기반의 가벼운 토스트 알림.","description":"저장 완료, 복사됨, 실패 같은 짧은 결과를 화면 가장자리의 임시 알림으로 보여준다.","visual_anatomy":["toast surface","short message","optional icon","optional action","stack position"],"when_to_use":["사용자의 작업 결과를 짧게 알려줄 때","여러 toast가 stack될 수 있을 때"],"anti_use":["화면을 막아야 하는 중요한 결정은 dialog나 alert dialog를 쓴다","긴 설명은 alert가 낫다"],"prompt_phrases":["저장 완료 후 오른쪽 아래에 sonner toast를 띄워줘"],"related":[{"id":"toast","relation":"compare","note":"toast는 일반 패턴명이고 sonner toast는 shadcn에서 쓰는 구현/스타일 이름이다."}]},{"id":"direction-provider","status":"draft","category":"accessibility","group":"accessibility-focus-motion","ko":{"name":"방향성 제공자","aliases":["direction provider","RTL provider","텍스트 방향 제공자"]},"en":{"name":"Direction provider","aliases":["DirectionProvider","RTL provider"]},"one_liner":"UI 전체나 일부 영역의 읽기 방향을 LTR 또는 RTL로 지정하는 보이지 않는 구조 요소.","description":"아랍어, 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 지원할 때 컴포넌트 방향성을 일관되게 전달한다.","visual_anatomy":["direction boundary","ltr or rtl label","mirrored layout hint","child component area"],"when_to_use":["다국어 제품에서 RTL 레이아웃을 지원해야 할 때","특정 영역만 방향성을 바꿔야 할 때"],"anti_use":["단순 텍스트 정렬을 바꾸는 용도로 남용하지 않는다","일반 사용자는 보이는 컴포넌트명보다 RTL layout이라고 말하는 편이 낫다"],"prompt_phrases":["아랍어 화면을 위해 전체 앱을 RTL direction provider 안에 넣어줘"]},{"id":"login-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"로그인 폼","aliases":["login form","로그인 창","sign in form"]},"en":{"name":"Login form","aliases":["Sign in form","Authentication form"]},"one_liner":"이메일 또는 아이디와 비밀번호로 사용자를 로그인시키는 기본 인증 폼.","description":"인증 화면의 가장 표준적인 패턴으로, 계정 입력, 비밀번호 입력, 로그인 버튼, 보조 링크를 함께 배치한다.","visual_anatomy":["email or username field","password field","submit button","forgot password link","signup link"],"when_to_use":["기존 계정으로 제품에 들어오게 할 때","이메일/비밀번호 인증이 기본 로그인 방식일 때"],"anti_use":["비밀번호 없는 로그인만 제공하면 magic-link-login-form이나 passkey-login-form이 더 정확하다"],"prompt_phrases":["이메일과 비밀번호가 있는 login form을 카드 안에 만들어줘"],"related":[{"id":"password-field","relation":"use-with","note":"비밀번호 입력은 login form 안의 핵심 field다."},{"id":"auth-card","relation":"use-with","note":"로그인 폼을 독립 카드로 감싸면 auth card가 된다."}]},{"id":"signup-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"회원가입 폼","aliases":["signup form","가입 폼","sign up form"]},"en":{"name":"Signup form","aliases":["Sign up form","Registration form"]},"one_liner":"새 사용자가 이메일, 비밀번호, 이름 같은 정보를 입력해 계정을 만드는 폼.","description":"신규 계정 생성에 필요한 입력과 약관 동의, 가입 버튼, 로그인 링크를 함께 제공한다.","visual_anatomy":["name or email fields","password field","terms consent","create account button","existing account link"],"when_to_use":["사용자가 직접 계정을 만들 수 있어야 할 때"],"anti_use":["초대 링크를 통해 가입하면 invite-signup-form이 더 정확하다"],"prompt_phrases":["이름 이메일 비밀번호와 약관 동의가 있는 signup form을 만들어줘"]},{"id":"forgot-password-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"비밀번호 찾기 폼","aliases":["forgot password form","비밀번호 재설정 요청","reset link form"]},"en":{"name":"Forgot password form","aliases":["Password reset request form","Reset link form"]},"one_liner":"사용자가 이메일을 입력해 비밀번호 재설정 링크를 요청하는 폼.","description":"로그인에 실패했거나 비밀번호를 잊은 사용자가 계정 이메일로 복구 절차를 시작하게 한다.","visual_anatomy":["email field","explanation text","send reset link button","back to login link"],"when_to_use":["비밀번호 재설정 이메일을 보내야 할 때"],"anti_use":["새 비밀번호를 직접 입력하는 단계는 reset-password-form이 맞다"],"prompt_phrases":["이메일을 입력하면 재설정 링크를 보내는 forgot password form을 만들어줘"]},{"id":"reset-password-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"비밀번호 재설정 폼","aliases":["reset password form","새 비밀번호 설정","password reset form"]},"en":{"name":"Reset password form","aliases":["New password form","Password reset form"]},"one_liner":"복구 링크나 인증 후 새 비밀번호를 입력하고 확인하는 폼.","description":"새 비밀번호와 확인 입력, 강도 안내, 저장 버튼을 통해 안전하게 비밀번호를 바꾸게 한다.","visual_anatomy":["new password field","confirm password field","password requirements","submit button"],"when_to_use":["비밀번호 복구 링크를 연 뒤 새 비밀번호를 설정할 때"],"anti_use":["로그인된 사용자가 기존 비밀번호를 바꾸는 설정 화면은 change-password-form이 더 정확하다"],"prompt_phrases":["새 비밀번호와 확인 입력이 있는 reset password form을 만들어줘"]},{"id":"change-password-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"비밀번호 변경 폼","aliases":["change password form","계정 비밀번호 변경"]},"en":{"name":"Change password form","aliases":["Account password change form","Update password form"]},"one_liner":"로그인된 사용자가 기존 비밀번호와 새 비밀번호를 입력해 비밀번호를 변경하는 폼.","description":"계정 설정 안에서 현재 비밀번호 확인, 새 비밀번호 입력, 저장 버튼을 제공한다.","visual_anatomy":["current password field","new password field","confirm password field","save button"],"when_to_use":["계정 설정에서 사용자가 비밀번호를 바꾸게 할 때"],"anti_use":["비밀번호를 잊은 사용자의 복구 흐름은 forgot-password-form과 reset-password-form을 쓴다"],"prompt_phrases":["현재 비밀번호와 새 비밀번호를 입력하는 change password form을 만들어줘"]},{"id":"magic-link-login-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"매직 링크 로그인 폼","aliases":["magic link login","이메일 링크 로그인","passwordless login form"]},"en":{"name":"Magic link login form","aliases":["Passwordless login form","Email link sign in form"]},"one_liner":"이메일만 입력하면 로그인 링크를 보내는 비밀번호 없는 로그인 폼.","description":"비밀번호 입력 없이 이메일 주소를 받아 로그인 링크를 발송하고, 발송 후에는 대기 상태로 전환한다.","visual_anatomy":["email field","send magic link button","password login alternative","sent state link"],"when_to_use":["비밀번호 없는 로그인 경험을 제공할 때"],"anti_use":["사용자가 앱 안에서 코드를 입력해야 하면 otp-challenge-form이 더 적합하다"],"prompt_phrases":["이메일만 입력하면 로그인 링크를 보내는 magic link login form을 만들어줘"],"related":[{"id":"magic-link-sent-state","relation":"use-with","note":"링크를 보낸 뒤에는 magic link sent state로 이어진다."}]},{"id":"sso-login-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"SSO 로그인 폼","aliases":["sso login","조직 로그인","single sign-on form"]},"en":{"name":"SSO login form","aliases":["Single sign-on form","Organization login form"]},"one_liner":"회사 도메인이나 조직 식별자를 입력해 SSO 인증으로 이동하는 로그인 폼.","description":"B2B 제품에서 이메일 도메인, workspace slug, 조직 이름을 받아 SSO provider로 넘긴다.","visual_anatomy":["organization or email field","continue with SSO button","password login fallback","help link"],"when_to_use":["기업 고객이 SAML, OIDC, Google Workspace 같은 SSO로 로그인해야 할 때"],"anti_use":["개인 사용자 로그인만 있으면 일반 login-form이 더 단순하다"],"prompt_phrases":["회사 이메일을 입력하고 SSO로 계속하는 sso login form을 만들어줘"]},{"id":"social-login-button-group","status":"draft","category":"action","group":"action-buttons","kind":"form-pattern","ko":{"name":"소셜 로그인 버튼 그룹","aliases":["social login buttons","OAuth 로그인 버튼","continue with buttons"]},"en":{"name":"Social login button group","aliases":["OAuth button group","Continue with buttons"]},"one_liner":"Kakao, Google, Email, GitHub 같은 로그인 선택지를 한 화면에 묶어 보여주는 버튼 그룹.","description":"인증 폼 상단이나 하단에서 OAuth provider 선택지를 일관된 버튼 그룹으로 제공한다.","visual_anatomy":["provider buttons","provider icons","provider-specific button color","email login alternative"],"when_to_use":["여러 외부 로그인 provider를 제공할 때"],"anti_use":["provider가 하나뿐이면 단일 primary/secondary button으로 충분하다"],"prompt_phrases":["Kakao Google Email GitHub로 계속하기 social login button group을 넣어줘"]},{"id":"otp-challenge-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"OTP 인증 폼","aliases":["otp challenge form","인증번호 확인 폼","verification code form"]},"en":{"name":"OTP challenge form","aliases":["Verification code form","One-time code challenge"]},"one_liner":"이메일, 문자, 인증 앱에서 받은 일회용 코드를 입력해 본인 확인을 완료하는 폼.","description":"코드 입력 필드, 남은 시간, 재전송, 확인 버튼을 함께 배치한다.","visual_anatomy":["OTP code input","destination hint","verify button","resend code link","expiry timer"],"when_to_use":["로그인, 가입, 계정 변경에서 일회용 코드를 확인해야 할 때"],"anti_use":["보안 키나 생체 인증은 passkey-login-form이나 biometric-prompt가 더 맞다"],"prompt_phrases":["6자리 인증번호를 입력하는 otp challenge form을 만들어줘"],"related":[{"id":"otp-code-input","relation":"use-with","note":"OTP code input은 이 폼 안의 핵심 입력 컴포넌트다."}]},{"id":"mfa-challenge-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"2단계 인증 폼","aliases":["MFA challenge form","2FA form","이중 인증 폼"]},"en":{"name":"MFA challenge form","aliases":["Two-factor challenge form","2FA form"]},"one_liner":"로그인 후 두 번째 인증 수단을 확인하는 보안 폼.","description":"인증 앱 코드, SMS 코드, 복구 코드, 다른 방법 선택 같은 MFA 선택지를 포함할 수 있다.","visual_anatomy":["challenge title","code input","verify action","use another method link","recovery code link"],"when_to_use":["비밀번호 이후 추가 인증이 필요한 로그인 흐름에서"],"anti_use":["단순 이메일 인증만이면 otp-challenge-form이 더 구체적이다"],"prompt_phrases":["인증 앱 코드를 입력하고 다른 방법을 선택할 수 있는 mfa challenge form을 만들어줘"]},{"id":"passkey-login-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"패스키 로그인 폼","aliases":["passkey login form","패스키 로그인","passwordless passkey form"]},"en":{"name":"Passkey login form","aliases":["Passkey sign-in form","Passwordless passkey form"]},"one_liner":"패스키를 기본 로그인 방식으로 제안하고 다른 로그인 방법으로 fallback하는 폼.","description":"패스키 로그인 버튼, 계정 힌트, 비밀번호/이메일 로그인 대체 링크를 제공한다.","visual_anatomy":["passkey primary action","account hint","fallback login link","security explanation"],"when_to_use":["패스키가 제품의 권장 로그인 방식일 때"],"anti_use":["패스키 등록을 유도하는 설정 흐름은 passkey-enrollment-prompt가 더 정확하다"],"prompt_phrases":["패스키로 계속하기를 기본으로 둔 passkey login form을 만들어줘"],"related":[{"id":"passkey-sign-in-sheet","relation":"use-with","note":"실제 인증이 시작되면 passkey sign-in sheet가 열릴 수 있다."}]},{"id":"invite-signup-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"초대 가입 폼","aliases":["invite signup form","초대 수락 가입","invitation signup"]},"en":{"name":"Invite signup form","aliases":["Invitation signup form","Join by invite form"]},"one_liner":"초대받은 사용자가 계정 정보를 입력하고 팀이나 워크스페이스에 합류하는 가입 폼.","description":"초대 대상 이메일, 팀 이름, 역할을 보여주면서 이름/비밀번호 설정 또는 소셜 로그인을 제공한다.","visual_anatomy":["invitation summary","invited email","name field","password or provider action","accept invite button"],"when_to_use":["초대 링크를 통해 새 사용자를 팀에 합류시킬 때"],"anti_use":["초대 수락만 확인하고 계정 입력이 없으면 invite-acceptance-screen이 더 맞다"],"prompt_phrases":["팀 초대 정보를 보여주고 계정을 만드는 invite signup form을 만들어줘"],"related":[{"id":"invite-acceptance-screen","relation":"compare","note":"초대 정보를 확인만 하면 invite acceptance screen, 계정 생성 입력까지 있으면 invite signup form이다."}]},{"id":"account-creation-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"계정 생성 폼","aliases":["account creation form","create account form","계정 만들기 폼"]},"en":{"name":"Account creation form","aliases":["Create account form","New account form"]},"one_liner":"제품 가입 초기에 최소 정보로 계정을 생성하는 간단한 폼.","description":"signup-form보다 일반적인 이름으로, 이메일 또는 소셜 계정 기반의 계정 생성 첫 단계를 말한다.","visual_anatomy":["email field","create account action","provider alternatives","terms hint"],"when_to_use":["가입 첫 단계를 최소 입력으로 시작할 때"],"anti_use":["이름, 비밀번호, 약관 등 전체 가입 흐름을 말하면 signup-form이 더 구체적이다"],"prompt_phrases":["이메일만 먼저 받는 account creation form을 만들어줘"]},{"id":"email-change-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"이메일 변경 폼","aliases":["email change form","계정 이메일 변경","change email form"]},"en":{"name":"Email change form","aliases":["Change email form","Account email update form"]},"one_liner":"로그인된 사용자가 계정 이메일 주소를 바꾸고 새 주소 인증을 시작하는 폼.","description":"현재 이메일, 새 이메일 입력, 비밀번호 재확인 또는 인증 안내를 함께 보여준다.","visual_anatomy":["current email display","new email field","password or reauth field","send verification action"],"when_to_use":["계정 설정에서 로그인 이메일을 변경해야 할 때"],"anti_use":["단순 이메일 인증 상태 안내는 email-verification-banner가 더 가볍다"],"prompt_phrases":["현재 이메일과 새 이메일 입력이 있는 email change form을 만들어줘"]},{"id":"reauthentication-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"재인증 폼","aliases":["reauthentication form","민감 작업 재로그인","confirm identity form"]},"en":{"name":"Reauthentication form","aliases":["Confirm identity form","Re-login form"]},"one_liner":"결제, 삭제, 보안 설정처럼 민감한 작업 전에 사용자의 신원을 다시 확인하는 폼.","description":"비밀번호, 패스키, OTP 중 하나로 현재 사용자가 맞는지 확인하고 작업을 계속하게 한다.","visual_anatomy":["security explanation","password or passkey action","confirm button","cancel action"],"when_to_use":["민감한 계정 변경이나 결제/삭제 작업 전에 재확인이 필요할 때"],"anti_use":["세션이 완전히 만료된 상황은 session-expired-dialog가 더 명확하다"],"prompt_phrases":["계정 삭제 전에 비밀번호를 다시 입력하는 reauthentication form을 보여줘"]},{"id":"auth-method-choice","status":"draft","category":"selection","group":"selection-options","kind":"form-pattern","ko":{"name":"인증 방식 선택","aliases":["auth method choice","로그인 방식 선택","choose sign-in method"]},"en":{"name":"Auth method choice","aliases":["Sign-in method choice","Choose login method"]},"one_liner":"비밀번호, SSO, 매직 링크, 패스키 중 어떤 방식으로 인증할지 고르는 선택 패턴.","description":"여러 인증 옵션을 모두 보여주되 사용자가 현재 상황에 맞는 방법을 선택하게 한다.","visual_anatomy":["method option cards","recommended method","provider icons","continue action"],"when_to_use":["하나의 제품이 여러 로그인 방식을 제공할 때"],"anti_use":["로그인 방식이 하나뿐이면 해당 form을 바로 보여주는 편이 낫다"],"prompt_phrases":["비밀번호 SSO 패스키 중 고르는 auth method choice 화면을 만들어줘"]},{"id":"auth-card","status":"draft","category":"structure","group":"structure-auth-layouts","kind":"block","ko":{"name":"인증 카드","aliases":["auth card","로그인 카드","authentication card"]},"en":{"name":"Auth card","aliases":["Authentication card","Login card"]},"one_liner":"로그인, 가입, 비밀번호 복구 폼을 하나의 중앙 카드로 감싸는 인증 화면 블록.","description":"인증 페이지의 핵심 폼을 로고, 제목, 설명, 보조 링크와 함께 카드 형태로 묶는다.","visual_anatomy":["centered card","logo or product name","auth form","secondary links","optional provider buttons"],"when_to_use":["인증 폼을 독립적인 카드로 집중시켜 보여줄 때"],"anti_use":["전체 페이지 레이아웃과 마케팅 패널까지 포함하면 split-auth-layout이나 login-page가 더 맞다"],"prompt_phrases":["중앙에 로고와 login form이 들어간 auth card를 만들어줘"]},{"id":"login-page","status":"draft","category":"structure","group":"structure-auth-layouts","kind":"block","ko":{"name":"로그인 페이지","aliases":["login page","sign in page","로그인 화면"]},"en":{"name":"Login page","aliases":["Sign in page","Authentication page"]},"one_liner":"사용자가 제품에 들어오기 전 로그인 폼과 브랜드 요소를 함께 보는 전체 페이지.","description":"auth card, 배경, 로고, 약관 링크, 보조 CTA를 포함하는 인증 목적의 독립 페이지다.","visual_anatomy":["page background","logo area","auth card or form","legal links","signup or support link"],"when_to_use":["제품 진입 전에 별도 로그인 화면이 필요할 때"],"anti_use":["현재 작업 위에서 잠깐 재인증만 필요하면 login-dialog나 reauthentication-form이 더 적합하다"],"prompt_phrases":["중앙 로그인 카드와 하단 약관 링크가 있는 login page를 만들어줘"]},{"id":"split-auth-layout","status":"draft","category":"structure","group":"structure-auth-layouts","kind":"block","ko":{"name":"분할 인증 레이아웃","aliases":["split auth layout","좌우 분할 로그인","auth split screen"]},"en":{"name":"Split auth layout","aliases":["Auth split screen","Split login layout"]},"one_liner":"한쪽에는 로그인/가입 폼, 다른 쪽에는 브랜드 이미지나 설명을 배치한 인증 페이지 레이아웃.","description":"B2B SaaS나 브랜드 강조가 필요한 제품에서 인증 폼과 제품 메시지를 나란히 보여준다.","visual_anatomy":["form column","brand or illustration panel","logo","responsive stacking"],"when_to_use":["인증 화면에서 제품 가치나 브랜드 이미지를 함께 보여주고 싶을 때"],"anti_use":["단순하고 빠른 로그인만 필요하면 auth-card나 login-page가 더 가볍다"],"prompt_phrases":["왼쪽은 로그인 폼 오른쪽은 제품 소개가 있는 split auth layout을 만들어줘"]},{"id":"login-dialog","status":"draft","category":"structure","group":"structure-auth-layouts","kind":"block","ko":{"name":"로그인 다이얼로그","aliases":["login dialog","로그인 모달","sign in modal"]},"en":{"name":"Login dialog","aliases":["Sign in modal","Authentication dialog"]},"one_liner":"현재 페이지를 떠나지 않고 로그인 폼을 모달로 띄우는 인증 블록.","description":"댓글 작성, 저장, 구매처럼 특정 행동 직전에 로그인 필요 상태를 빠르게 처리한다.","visual_anatomy":["modal surface","dialog title","login form","close action","signup link"],"when_to_use":["사용자가 하던 맥락을 유지한 채 로그인만 요구해야 할 때"],"anti_use":["인증이 제품 진입의 첫 화면이면 login-page가 더 명확하다"],"prompt_phrases":["저장 버튼을 누르면 현재 페이지 위에 login dialog가 뜨게 해줘"]},{"id":"dashboard-overview-page","status":"draft","category":"structure","group":"structure-app-layout","kind":"block","ko":{"name":"대시보드 개요 페이지","aliases":["dashboard block","dashboard overview","dashboard-01"]},"en":{"name":"Dashboard overview page","aliases":["Dashboard block","Overview dashboard","dashboard-01"]},"one_liner":"사이드바, 주요 지표, 차트, 데이터 테이블을 한 화면에 배치한 관리형 대시보드 페이지.","description":"제품 운영, 분석, 관리자 화면처럼 반복 확인해야 하는 상태와 표 작업을 한 화면에서 처리한다.","visual_anatomy":["app sidebar","page header","metric cards","chart panel","data table"],"when_to_use":["관리자가 지표와 목록을 동시에 확인해야 할 때","제품의 홈 화면이 운영 현황 요약이어야 할 때"],"anti_use":["단일 지표만 보여주면 metric-card나 chart가 더 가볍다"],"prompt_phrases":["사이드바와 차트, 데이터 테이블이 있는 dashboard overview page를 만들어줘"]},{"id":"sidebar-dashboard-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"사이드바 대시보드 레이아웃","aliases":["sidebar block","sidebar-01","dashboard sidebar"]},"en":{"name":"Sidebar dashboard layout","aliases":["Sidebar block","sidebar-01","Dashboard sidebar"]},"one_liner":"왼쪽 사이드바와 오른쪽 작업 영역으로 구성된 대시보드 기본 레이아웃.","description":"여러 메뉴를 가진 SaaS, 관리자, 내부 도구에서 앱의 기본 골격으로 쓴다.","visual_anatomy":["persistent sidebar","grouped navigation","content header","main panel"],"when_to_use":["앱의 주요 목적지가 많고 항상 보이는 내비게이션이 필요할 때"],"anti_use":["모바일 중심의 단순 화면에는 bottom-navigation이나 top-app-bar가 더 적합하다"],"prompt_phrases":["왼쪽 사이드바와 메인 콘텐츠가 있는 sidebar dashboard layout을 만들어줘"]},{"id":"collapsible-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"접이식 사이드바 레이아웃","aliases":["collapsible sidebar block","sidebar-02","sidebar-05"]},"en":{"name":"Collapsible sidebar layout","aliases":["Collapsible sidebar block","sidebar-02","sidebar-05"]},"one_liner":"섹션이나 하위 메뉴를 접고 펼칠 수 있는 사이드바 중심 앱 레이아웃.","description":"메뉴 깊이가 깊거나 팀, 프로젝트, 설정처럼 그룹화된 목적지가 많을 때 탐색 밀도를 조절한다.","visual_anatomy":["collapsible groups","nested menu items","active item","main content"],"when_to_use":["사이드바 항목이 많아 섹션별 접기가 필요할 때"],"anti_use":["메뉴가 5개 이하라면 일반 sidebar-dashboard-layout이 더 명확하다"],"prompt_phrases":["하위 메뉴를 접고 펼치는 collapsible sidebar layout을 만들어줘"]},{"id":"icon-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"아이콘 사이드바 레이아웃","aliases":["icon sidebar","sidebar-07","collapsed icon rail"]},"en":{"name":"Icon sidebar layout","aliases":["Icon sidebar","sidebar-07","Collapsed icon rail"]},"one_liner":"사이드바를 아이콘 폭으로 접어 화면 공간을 확보하는 앱 레이아웃.","description":"화면 폭이 좁거나 작업 영역을 넓게 쓰는 도구에서 내비게이션 접근성을 유지하면서 공간을 절약한다.","visual_anatomy":["narrow icon rail","active icon","optional expanded label","content canvas"],"when_to_use":["데이터 테이블, 캔버스, 편집기처럼 메인 영역이 넓어야 할 때"],"anti_use":["아이콘 의미가 불명확하면 텍스트가 있는 사이드바를 쓴다"],"prompt_phrases":["아이콘만 남기고 접히는 icon sidebar layout을 만들어줘"]},{"id":"inset-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"인셋 사이드바 레이아웃","aliases":["inset sidebar","sidebar-08","inset app shell"]},"en":{"name":"Inset sidebar layout","aliases":["Inset sidebar","sidebar-08","Inset app shell"]},"one_liner":"사이드바와 콘텐츠를 페이지 가장자리에서 살짝 띄워 카드형 앱 셸처럼 보이게 하는 레이아웃.","description":"내부 도구보다 제품형 SaaS 느낌이 강한 대시보드에서 여백과 경계를 더 부드럽게 만든다.","visual_anatomy":["inset sidebar panel","rounded content shell","secondary navigation","page header"],"when_to_use":["대시보드를 더 제품화된 앱 셸처럼 보이게 하고 싶을 때"],"anti_use":["매우 조밀한 운영 도구에서는 일반 app-shell이 더 효율적이다"],"prompt_phrases":["둥근 메인 패널과 inset sidebar layout을 만들어줘"]},{"id":"right-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"오른쪽 사이드바 레이아웃","aliases":["right sidebar","sidebar-14","inspector sidebar"]},"en":{"name":"Right sidebar layout","aliases":["Right sidebar","sidebar-14","Inspector sidebar"]},"one_liner":"보조 정보나 설정 패널을 화면 오른쪽에 고정한 작업 레이아웃.","description":"본문이나 캔버스를 중심에 두고 선택 항목의 속성, 활동, 미리보기를 오른쪽에서 계속 보여준다.","visual_anatomy":["main workspace","right rail","inspector sections","sticky header"],"when_to_use":["선택한 항목의 속성이나 보조 맥락을 항상 옆에서 봐야 할 때"],"anti_use":["주 내비게이션이라면 왼쪽 sidebar-dashboard-layout이 더 익숙하다"],"prompt_phrases":["오른쪽에 속성 패널이 붙은 right sidebar layout을 만들어줘"]},{"id":"dual-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"양쪽 사이드바 레이아웃","aliases":["dual sidebar","left and right sidebar","sidebar-15"]},"en":{"name":"Dual sidebar layout","aliases":["Dual sidebar","Left and right sidebar","sidebar-15"]},"one_liner":"왼쪽에는 내비게이션, 오른쪽에는 보조 패널을 두고 중앙 작업 영역을 감싸는 레이아웃.","description":"편집기, 분석 도구, CRM처럼 탐색과 상세 맥락을 동시에 유지해야 하는 복잡한 앱에 쓴다.","visual_anatomy":["left navigation","center workspace","right inspector","resizable zones"],"when_to_use":["화면 양쪽에 서로 다른 보조 맥락이 필요할 때"],"anti_use":["콘텐츠 폭이 좁아지면 모바일이나 작은 데스크톱에서 부담이 크다"],"prompt_phrases":["왼쪽 메뉴와 오른쪽 inspector가 있는 dual sidebar layout을 만들어줘"]},{"id":"file-tree-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"파일 트리 사이드바 레이아웃","aliases":["file tree sidebar","sidebar-11","explorer sidebar"]},"en":{"name":"File tree sidebar layout","aliases":["File tree sidebar","sidebar-11","Explorer sidebar"]},"one_liner":"폴더와 파일 계층을 사이드바에 두고 선택한 문서나 화면을 메인 영역에 여는 레이아웃.","description":"문서 관리, 코드 편집기, 디자인 파일 탐색처럼 계층 구조를 계속 탐색해야 할 때 쓴다.","visual_anatomy":["collapsible file tree","folder rows","selected file","editor or preview panel"],"when_to_use":["사용자가 파일이나 문서 계층을 자주 오가야 할 때"],"anti_use":["평면 목록이면 list나 table이 더 단순하다"],"prompt_phrases":["왼쪽에 파일 트리가 있는 file tree sidebar layout을 만들어줘"]},{"id":"calendar-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"캘린더 사이드바 레이아웃","aliases":["calendar sidebar","sidebar-12","schedule sidebar"]},"en":{"name":"Calendar sidebar layout","aliases":["Calendar sidebar","sidebar-12","Schedule sidebar"]},"one_liner":"사이드바에 작은 캘린더나 일정 필터를 두고 메인 영역에서 일정 콘텐츠를 보는 레이아웃.","description":"예약, 일정, 프로젝트 마감 화면에서 날짜 맥락을 항상 유지하면서 목록이나 상세를 탐색한다.","visual_anatomy":["sidebar calendar","date filters","schedule list","content detail"],"when_to_use":["날짜 선택이 화면 탐색의 핵심 축일 때"],"anti_use":["단일 날짜 입력만 필요하면 date-picker가 더 적합하다"],"prompt_phrases":["사이드바에 달력이 있는 calendar sidebar layout을 만들어줘"]},{"id":"sidebar-dialog-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"다이얼로그 안 사이드바 레이아웃","aliases":["sidebar in dialog","sidebar-13","dialog sidebar"]},"en":{"name":"Sidebar in dialog layout","aliases":["Sidebar in dialog","sidebar-13","Dialog sidebar"]},"one_liner":"설정이나 선택 흐름을 모달 안에서 사이드바와 여러 패널로 나누는 레이아웃.","description":"전체 페이지를 떠나지 않고 복잡한 설정, 계정, 권한 흐름을 단계별 패널로 다룬다.","visual_anatomy":["modal shell","dialog title","side navigation","active settings panel"],"when_to_use":["현재 화면 맥락을 유지하면서 여러 설정 섹션을 편집해야 할 때"],"anti_use":["깊은 작업이나 긴 폼은 별도 settings page가 더 안정적이다"],"prompt_phrases":["모달 안에 설정 사이드바가 있는 sidebar dialog layout을 만들어줘"]},{"id":"area-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"영역 차트 카드","aliases":["area chart card","chart-area-default","chart-area-gradient"]},"en":{"name":"Area chart card","aliases":["Area chart card","chart-area-default","chart-area-gradient"]},"one_liner":"시간에 따른 추세와 누적 변화를 영역으로 채워 보여주는 차트 카드.","description":"방문자, 매출, 사용량처럼 흐름과 규모감을 동시에 보여줘야 하는 지표에 쓴다.","visual_anatomy":["card title","time range","filled area chart","summary value"],"when_to_use":["기간별 추세와 총량의 느낌을 함께 보여줄 때"],"anti_use":["정확한 항목 비교는 bar-chart-card가 더 읽기 쉽다"],"prompt_phrases":["기간별 트래픽을 보여주는 area chart card를 만들어줘"]},{"id":"bar-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"막대 차트 카드","aliases":["bar chart card","chart-bar-default","chart-bar-horizontal"]},"en":{"name":"Bar chart card","aliases":["Bar chart card","chart-bar-default","chart-bar-horizontal"]},"one_liner":"항목이나 기간별 값을 막대 길이로 비교하는 차트 카드.","description":"카테고리별 매출, 월별 가입자, 상태별 건수처럼 값의 차이를 빠르게 비교한다.","visual_anatomy":["card title","category axis","value bars","optional labels"],"when_to_use":["여러 항목의 크기 차이를 명확히 비교해야 할 때"],"anti_use":["비율 구성이 핵심이면 pie-chart-card나 radial-chart-card가 더 적합하다"],"prompt_phrases":["월별 매출을 비교하는 bar chart card를 만들어줘"]},{"id":"line-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"선 차트 카드","aliases":["line chart card","chart-line-default","chart-line-multiple"]},"en":{"name":"Line chart card","aliases":["Line chart card","chart-line-default","chart-line-multiple"]},"one_liner":"시간 흐름에 따른 하나 이상의 지표 변화를 선으로 보여주는 차트 카드.","description":"변화 추세, 피크, 감소 구간을 읽어야 하는 분석 화면에서 기본 지표 카드로 쓴다.","visual_anatomy":["card title","line series","x axis","tooltip point"],"when_to_use":["기간에 따른 증감 패턴을 보여줘야 할 때"],"anti_use":["단일 현재값만 중요하면 metric-card가 더 빠르다"],"prompt_phrases":["가입자 추이를 보여주는 line chart card를 만들어줘"]},{"id":"pie-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"파이 차트 카드","aliases":["pie chart card","donut chart card","chart-pie-donut"]},"en":{"name":"Pie chart card","aliases":["Pie chart card","Donut chart card","chart-pie-donut"]},"one_liner":"전체에서 각 항목이 차지하는 비율을 원형이나 도넛 형태로 보여주는 차트 카드.","description":"유입 채널, 플랜 구성, 카테고리 비율처럼 부분-전체 관계를 짧게 보여준다.","visual_anatomy":["circular chart","segment colors","center label","legend"],"when_to_use":["소수의 항목이 전체에서 차지하는 비중을 보여줄 때"],"anti_use":["항목이 많거나 작은 차이를 비교해야 하면 bar-chart-card가 낫다"],"prompt_phrases":["유입 채널 비율을 보여주는 donut pie chart card를 만들어줘"]},{"id":"radar-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"레이더 차트 카드","aliases":["radar chart card","chart-radar-default","spider chart"]},"en":{"name":"Radar chart card","aliases":["Radar chart card","chart-radar-default","Spider chart"]},"one_liner":"여러 축의 점수를 방사형으로 연결해 프로필이나 역량 균형을 보여주는 차트 카드.","description":"제품 속성, 팀 역량, 평가 기준처럼 여러 차원의 균형을 한눈에 비교한다.","visual_anatomy":["radial grid","axis labels","polygon area","legend"],"when_to_use":["여러 기준의 균형이나 편차를 보여줘야 할 때"],"anti_use":["정확한 수치 비교가 중요하면 table이나 bar-chart-card가 낫다"],"prompt_phrases":["역량 점수를 보여주는 radar chart card를 만들어줘"]},{"id":"radial-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"방사형 차트 카드","aliases":["radial chart card","radial progress chart","chart-radial-simple"]},"en":{"name":"Radial chart card","aliases":["Radial chart card","Radial progress chart","chart-radial-simple"]},"one_liner":"진행률이나 비율을 원형 호 형태로 강조해 보여주는 차트 카드.","description":"목표 달성률, 사용량, 점수처럼 하나의 핵심 비율을 시각적으로 강조한다.","visual_anatomy":["circular arc","center value","label","supporting caption"],"when_to_use":["하나의 비율이나 진행률을 카드의 핵심으로 보여줄 때"],"anti_use":["여러 항목 비교에는 bar-chart-card가 더 명확하다"],"prompt_phrases":["목표 달성률을 보여주는 radial chart card를 만들어줘"]},{"id":"interactive-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"인터랙티브 차트 카드","aliases":["interactive chart card","chart-area-interactive","chart-line-interactive"]},"en":{"name":"Interactive chart card","aliases":["Interactive chart card","chart-area-interactive","chart-line-interactive"]},"one_liner":"기간, 지표, 범례를 조작해 차트 데이터를 바꿔 볼 수 있는 분석 카드.","description":"사용자가 최근 7일/30일, 데스크톱/모바일, 매출/주문 같은 관점을 전환하며 탐색한다.","visual_anatomy":["chart canvas","segmented time control","hover tooltip","active series"],"when_to_use":["차트를 단순 표시가 아니라 탐색 도구로 써야 할 때"],"anti_use":["정적 리포트에는 불필요한 조작이 될 수 있다"],"prompt_phrases":["기간을 바꿀 수 있는 interactive chart card를 만들어줘"]},{"id":"stacked-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"누적 차트 카드","aliases":["stacked chart card","chart-area-stacked","chart-bar-stacked"]},"en":{"name":"Stacked chart card","aliases":["Stacked chart card","chart-area-stacked","chart-bar-stacked"]},"one_liner":"여러 시리즈를 한 막대나 영역 안에 쌓아 전체와 구성 비율을 함께 보여주는 차트 카드.","description":"총량이 변하는 동시에 구성 항목이 어떻게 달라지는지 확인하는 분석 화면에 쓴다.","visual_anatomy":["stacked series","color legend","total scale","tooltip breakdown"],"when_to_use":["전체 추세와 세부 구성의 변화를 동시에 보여줘야 할 때"],"anti_use":["각 시리즈의 정확한 개별 추세 비교에는 line-chart-card가 낫다"],"prompt_phrases":["데스크톱과 모바일 사용량을 쌓아서 보여주는 stacked chart card를 만들어줘"]},{"id":"chart-tooltip-pattern","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"차트 툴팁 패턴","aliases":["chart tooltip","chart-tooltip-default","chart-tooltip-advanced"]},"en":{"name":"Chart tooltip pattern","aliases":["Chart tooltip","chart-tooltip-default","chart-tooltip-advanced"]},"one_liner":"차트의 특정 점이나 구간에 마우스를 올렸을 때 상세 값과 시리즈 정보를 보여주는 패턴.","description":"차트 자체는 간결하게 유지하면서 hover나 focus 시점에 정확한 날짜, 값, 비교 정보를 제공한다.","visual_anatomy":["hovered point","floating tooltip","series markers","formatted values"],"when_to_use":["차트 위에서 정확한 값을 읽어야 할 때"],"anti_use":["항상 보여야 하는 핵심 수치는 card header나 metric-card에 둔다"],"prompt_phrases":["차트에 hover하면 값과 범례가 나오는 chart tooltip pattern을 넣어줘"]},{"id":"chart-kpi-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"KPI 차트 카드","aliases":["chart KPI card","metric chart card","dashboard chart card"]},"en":{"name":"KPI chart card","aliases":["Chart KPI card","Metric chart card","Dashboard chart card"]},"one_liner":"핵심 숫자, 변화율, 작은 차트를 한 카드 안에 묶어 보여주는 대시보드 카드.","description":"대시보드 상단에서 숫자만 있는 metric-card보다 추세까지 함께 보여주고 싶을 때 쓴다.","visual_anatomy":["KPI value","change badge","compact chart","period label"],"when_to_use":["핵심 지표와 추세를 한눈에 보여줘야 할 때"],"anti_use":["상세 분석이 필요하면 더 큰 line-chart-card나 area-chart-card를 쓴다"],"prompt_phrases":["KPI 숫자와 작은 추세 차트가 있는 chart KPI card를 만들어줘"]},{"id":"chat-message","status":"draft","category":"data-display","group":"data-chat-messaging","kind":"component","ko":{"name":"채팅 메시지","aliases":["message","chat message","대화 메시지"]},"en":{"name":"Chat message","aliases":["Message","Conversation message"]},"one_liner":"대화에서 한 발화의 아바타, 정렬, 말풍선, 헤더, 푸터를 함께 배치하는 메시지 행.","description":"사람과 AI, 사용자와 상담원처럼 대화 주체가 번갈아 등장하는 화면에서 한 메시지 단위를 구성한다.","visual_anatomy":["avatar slot","message content","optional header","bubble surface","footer or actions"],"when_to_use":["채팅이나 AI 대화 화면에서 한 발화를 행 단위로 보여줄 때","보낸 사람과 받은 사람의 정렬을 구분해야 할 때"],"anti_use":["단순 알림 문구는 message-bar나 toast가 더 적합하다"],"prompt_phrases":["아바타와 말풍선이 있는 chat message를 만들어줘"]},{"id":"chat-bubble","status":"draft","category":"data-display","group":"data-chat-messaging","kind":"component","ko":{"name":"채팅 말풍선","aliases":["bubble","message bubble","대화 말풍선"]},"en":{"name":"Chat bubble","aliases":["Bubble","Message bubble"]},"one_liner":"채팅 메시지의 실제 텍스트나 콘텐츠를 감싸는 둥근 말풍선 표면.","description":"메시지 행 안에서 발화 내용만 시각적으로 묶고, 보낸 사람에 따라 좌우 정렬이나 색상을 다르게 둔다.","visual_anatomy":["rounded surface","bubble content","start or end alignment","optional grouped bubbles"],"when_to_use":["같은 대화 안에서 메시지 본문을 명확히 구분해야 할 때"],"anti_use":["카드형 정보 묶음은 card나 chat-attachment가 더 적합하다"],"prompt_phrases":["사용자 메시지는 오른쪽에 정렬된 chat bubble로 보여줘"]},{"id":"chat-attachment","status":"draft","category":"data-display","group":"data-chat-messaging","kind":"component","ko":{"name":"채팅 첨부 파일","aliases":["attachment","message attachment","대화 첨부"]},"en":{"name":"Chat attachment","aliases":["Attachment","Message attachment"]},"one_liner":"채팅 메시지나 입력창 안에서 파일, 이미지, 업로드 상태와 액션을 보여주는 첨부 요소.","description":"파일명, 형식, 용량, 미리보기, 제거/다운로드 행동을 한 덩어리로 보여준다.","visual_anatomy":["media icon or preview","file title","metadata","upload state","actions"],"when_to_use":["대화 중 파일이나 이미지를 주고받을 때","업로드 진행률이나 실패 상태를 첨부 카드 안에 표시해야 할 때"],"anti_use":["일반 파일 목록 화면은 attachment-list나 file-card가 더 적합하다"],"prompt_phrases":["채팅 메시지 아래에 PDF chat attachment를 보여줘"]},{"id":"conversation-marker","status":"draft","category":"feedback","group":"feedback-status-notifications","kind":"component","ko":{"name":"대화 마커","aliases":["marker","conversation marker","대화 상태 마커"]},"en":{"name":"Conversation marker","aliases":["Marker","Conversation status marker"]},"one_liner":"대화 흐름 사이에 상태, 시스템 노트, 구분선을 인라인으로 표시하는 작은 행.","description":"대화 압축, 도구 실행, 파일 탐색, 날짜 구분처럼 메시지는 아니지만 흐름 안에 남겨야 하는 사건을 표시한다.","visual_anatomy":["optional icon","marker content","inline or bordered row","optional separator lines"],"when_to_use":["채팅 중 상태 업데이트나 시스템 이벤트를 메시지 사이에 보여줄 때","스트리밍 중 진행 상태를 접근성 있게 알릴 때"],"anti_use":["사용자 발화는 chat-message를 쓴다"],"prompt_phrases":["대화 중간에 파일 4개를 읽었다는 conversation marker를 넣어줘"]},{"id":"message-scroller","status":"draft","category":"structure","group":"structure-content-elements","kind":"component","ko":{"name":"메시지 스크롤러","aliases":["message scroller","chat scroller","대화 스크롤 컨테이너"]},"en":{"name":"Message scroller","aliases":["Chat scroller","Conversation scroll container"]},"one_liner":"스트리밍 채팅에서 스크롤 위치, 새 메시지 따라가기, 이전 기록 로딩을 관리하는 대화 컨테이너.","description":"AI 답변이 스트리밍되는 동안 사용자가 읽던 위치를 보존하고, 필요할 때만 최신 메시지로 이동하도록 돕는다.","visual_anatomy":["scroll container","message stack","jump to latest control","history loading boundary"],"when_to_use":["AI 채팅이나 긴 대화에서 새 메시지와 이전 기록을 안정적으로 스크롤해야 할 때"],"anti_use":["짧은 고정 목록은 scroll-area만으로 충분하다"],"prompt_phrases":["스트리밍 답변 중에도 위치가 튀지 않는 message scroller를 만들어줘"]},{"id":"react-hook-form-pattern","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"React Hook Form 패턴","aliases":["react hook form","RHF form","controller form"]},"en":{"name":"React Hook Form pattern","aliases":["RHF form","Controller form"]},"one_liner":"React Hook Form의 `useForm`과 `Controller`를 shadcn Field 구성과 연결하는 폼 구현 패턴.","description":"Zod 같은 스키마 검증, controlled input, 필드 오류 표시를 조합해 접근성 있는 폼을 만든다.","visual_anatomy":["form schema","useForm instance","Controller","Field and FieldError","submit action"],"when_to_use":["React Hook Form 기반으로 성능 좋은 클라이언트 폼을 구현할 때"],"anti_use":["라이브러리 없는 단순 폼이면 기본 field-group만으로 충분할 수 있다"],"prompt_phrases":["React Hook Form과 Zod로 검증하는 form pattern을 만들어줘"]},{"id":"tanstack-form-pattern","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"TanStack Form 패턴","aliases":["tanstack form","headless form","render prop form"]},"en":{"name":"TanStack Form pattern","aliases":["Headless form","Render prop form"]},"one_liner":"TanStack Form의 headless form state와 shadcn Field UI를 연결하는 폼 구현 패턴.","description":"`form.Field` 렌더 prop으로 필드 상태와 오류를 읽고, Zod 검증과 실시간 피드백을 조합한다.","visual_anatomy":["useForm instance","form.Field render prop","field state","validation errors","accessible Field UI"],"when_to_use":["필드 상태를 세밀하게 제어하는 headless 폼이 필요할 때"],"anti_use":["React Hook Form 기반 코드베이스라면 react-hook-form-pattern이 더 자연스럽다"],"prompt_phrases":["TanStack Form으로 실시간 검증이 있는 form pattern을 만들어줘"]},{"id":"formisch-form-pattern","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"Formisch 폼 패턴","aliases":["formisch form","valibot form","schema-first form"]},"en":{"name":"Formisch form pattern","aliases":["Valibot form","Schema-first form"]},"one_liner":"Formisch와 Valibot을 사용해 스키마를 중심으로 타입 안전한 폼을 만드는 패턴.","description":"Formisch의 form store, render-prop field, Valibot schema를 shadcn Field 구성과 함께 사용한다.","visual_anatomy":["Valibot schema","Formisch form store","render-prop field","Field validation state","reset and submit actions"],"when_to_use":["Valibot 기반의 가벼운 schema-first 폼을 선호할 때"],"anti_use":["팀 표준이 Zod와 React Hook Form이면 react-hook-form-pattern이 더 익숙하다"],"prompt_phrases":["Formisch와 Valibot으로 schema-first form pattern을 만들어줘"]},{"id":"scroll-fade","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"스크롤 페이드","aliases":["scroll fade","edge fade","스크롤 가장자리 페이드"]},"en":{"name":"Scroll fade","aliases":["Edge fade","Scroll edge fade"]},"one_liner":"스크롤 가능한 영역의 가장자리에 페이드 효과를 넣어 더 볼 콘텐츠가 있음을 암시하는 시각 효과.","description":"가로 첨부 목록, 채팅 기록, 카드 레일처럼 경계 밖 콘텐츠가 이어지는 영역에서 스크롤 가능성을 부드럽게 보여준다.","visual_anatomy":["scroll container","fading edge","clipped content","optional snap row"],"when_to_use":["스크롤바 없이도 추가 콘텐츠가 있음을 알려야 할 때"],"anti_use":["콘텐츠가 잘리면 안 되는 핵심 정보 영역에는 쓰지 않는다"],"prompt_phrases":["가로 카드 목록 양끝에 scroll fade를 넣어줘"]},{"id":"shimmer-effect","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"쉬머 효과","aliases":["shimmer","shimmer text","반짝임 로딩"]},"en":{"name":"Shimmer effect","aliases":["Shimmer","Shimmer text"]},"one_liner":"텍스트나 로딩 표면 위에 은은히 흐르는 빛 효과를 주어 진행 중 상태를 표현하는 효과.","description":"AI가 생각 중이거나 파일을 처리 중일 때 정적인 로딩 문구보다 생동감 있게 진행 상태를 보여준다.","visual_anatomy":["shimmering text","animated highlight","loading marker","muted base color"],"when_to_use":["스트리밍이나 처리 중 상태를 짧은 문구로 보여줄 때","conversation-marker나 skeleton과 함께 진행감을 줄 때"],"anti_use":["완료된 정보나 긴 본문에는 주의를 분산시킨다"],"prompt_phrases":["Thinking 문구에 shimmer effect를 적용해줘"]},{"id":"floating-label-field","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"플로팅 라벨 필드","aliases":["floating label","떠오르는 라벨","플로팅 라벨 입력"]},"en":{"name":"Floating label field","aliases":["Floating label input","Float label field"]},"one_liner":"입력을 시작하면 placeholder처럼 보이던 라벨이 입력창 위로 작게 떠오르는 필드.","description":"라벨 공간을 줄이면서도 입력 후에 필드 의미를 계속 남겨야 할 때 쓰는 입력 조합이다.","visual_anatomy":["input container","label that moves above value","current value","focus or filled state"],"when_to_use":["좁은 폼에서 라벨을 항상 보이게 유지하고 싶을 때","입력값이 있어도 필드 의미를 잃지 않아야 할 때"],"anti_use":["접근성과 가독성이 더 중요하면 일반 label + text-field가 더 명확하다"],"prompt_phrases":["이메일 입력창을 floating label field로 만들어줘"],"related":[{"id":"text-field","relation":"compare","note":"일반 text field는 라벨 위치가 고정되고, floating label field는 입력 상태에 따라 라벨 위치가 바뀐다."}]},{"id":"clearable-input","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"지우기 버튼 입력창","aliases":["clearable input","지울 수 있는 입력창","입력 지우기 버튼"]},"en":{"name":"Clearable input","aliases":["Input with clear button","Clear field"]},"one_liner":"입력값이 있을 때 오른쪽에 X 버튼을 보여 한 번에 내용을 비우는 입력창.","description":"검색어, 필터 키워드, 임시 입력처럼 사용자가 자주 다시 입력하는 필드에서 입력 삭제 행동을 가까이 둔다.","visual_anatomy":["text input","current value","clear icon button","empty or filled state"],"when_to_use":["검색어나 필터 값을 빠르게 지워야 할 때","모바일에서 긴 값을 백스페이스로 지우기 번거로울 때"],"anti_use":["저장된 중요한 값을 실수로 지우면 안 되는 필드에는 쓰지 않는다"],"prompt_phrases":["검색창 오른쪽에 입력을 지우는 clear button을 넣어줘"],"related":[{"id":"search-field","relation":"compare","note":"search field는 검색 목적의 입력이고, clearable input은 값 삭제 행동이 핵심이다."}]},{"id":"inline-submit-field","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"인라인 제출 필드","aliases":["inline submit input","입력창 안 제출 버튼","붙어 있는 제출 필드"]},"en":{"name":"Inline submit field","aliases":["Input with inline submit","Joined submit input"]},"one_liner":"입력창과 제출 버튼을 한 줄 안에 붙여 짧은 값을 바로 제출하게 하는 필드.","description":"이메일 구독, 초대 코드, 쿠폰 코드처럼 값 하나를 입력하고 즉시 적용하는 작은 폼에 쓴다.","visual_anatomy":["input value","attached submit button","shared border or grouped surface","optional loading state"],"when_to_use":["값 하나를 입력하고 바로 적용하는 마이크로 폼이 필요할 때","입력과 CTA가 분리되면 흐름이 느려지는 경우"],"anti_use":["여러 필드를 검토한 뒤 제출해야 하는 폼에는 일반 form layout이 더 적합하다"],"prompt_phrases":["이메일 구독을 inline submit field로 만들어줘"],"related":[{"id":"input-group","relation":"compare","note":"input group은 prefix/suffix 정보를 붙이는 조합이고, inline submit field는 제출 행동을 입력 옆에 붙인다."}]},{"id":"character-count-field","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"글자 수 카운터 필드","aliases":["character count field","글자수 표시 입력창","입력 길이 카운터"]},"en":{"name":"Character count field","aliases":["Input with character counter","Textarea counter"]},"one_liner":"입력 가능한 길이와 현재 글자 수를 입력창 아래나 오른쪽에 보여주는 필드.","description":"제목, 소개글, 메시지처럼 길이 제한이 있는 입력에서 사용자가 제한에 가까워지는지 확인하게 한다.","visual_anatomy":["input or textarea","current count","maximum count","warning threshold"],"when_to_use":["글자 수 제한이 명확한 입력을 받을 때","제한 초과 전에 사용자가 스스로 조절해야 할 때"],"anti_use":["길이 제한이 없거나 중요하지 않으면 보조 텍스트가 더 단순하다"],"prompt_phrases":["소개글 textarea 아래에 120자 character counter를 보여줘"]},{"id":"password-strength-meter","status":"draft","category":"feedback","group":"feedback-status-notifications","kind":"component","ko":{"name":"비밀번호 강도 미터","aliases":["password strength","비밀번호 강도","password meter"]},"en":{"name":"Password strength meter","aliases":["Password meter","Strength meter"]},"one_liner":"비밀번호 입력값의 강도를 막대, 단계, 안내 문구로 보여주는 피드백 요소.","description":"사용자가 더 안전한 비밀번호를 만들도록 길이, 다양성, 예측 가능성 같은 기준을 입력 중에 알려준다.","visual_anatomy":["password field","strength bars","strength label","requirement hints"],"when_to_use":["새 비밀번호를 만들거나 변경하는 폼에서 보안 기준을 안내할 때"],"anti_use":["로그인처럼 이미 만든 비밀번호를 입력하는 화면에는 보통 필요 없다"],"prompt_phrases":["회원가입 비밀번호 필드 아래에 password strength meter를 넣어줘"],"related":[{"id":"password-field","relation":"compare","note":"password field는 값을 숨기는 입력이고, password strength meter는 새 비밀번호 품질을 알려주는 피드백이다."}]},{"id":"fieldset","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"필드셋","aliases":["fieldset","필드 묶음","폼 그룹 제목"]},"en":{"name":"Fieldset","aliases":["Field set","Form fieldset"]},"one_liner":"관련된 여러 입력을 제목과 설명으로 묶는 폼 그룹.","description":"주소, 결제 정보, 알림 설정처럼 한 주제로 묶인 필드들을 시각적·의미적으로 그룹화한다.","visual_anatomy":["legend or group title","description","grouped fields","optional border or section spacing"],"when_to_use":["폼이 길고 입력들을 의미 있는 섹션으로 나눠야 할 때","체크박스나 라디오 묶음에 공통 질문이 있을 때"],"anti_use":["입력이 하나뿐이면 label과 helper text로 충분하다"],"prompt_phrases":["배송 주소 입력들을 fieldset으로 묶고 제목을 붙여줘"],"related":[{"id":"field-group","relation":"compare","note":"field group은 시각적 묶음에 가깝고, fieldset은 여러 필드의 의미 그룹과 legend가 핵심이다."}]},{"id":"checkbox-card","status":"draft","category":"selection","group":"selection-options","kind":"component","ko":{"name":"체크박스 카드","aliases":["checkbox card","선택 카드","카드형 체크박스"]},"en":{"name":"Checkbox card","aliases":["Selectable checkbox card","Card checkbox"]},"one_liner":"카드 전체를 체크박스 선택 영역으로 만들어 옵션 설명과 선택 상태를 함께 보여주는 요소.","description":"요금제 기능, 알림 채널, 권한 범위처럼 옵션마다 설명이 필요할 때 체크박스를 카드 형태로 확장한다.","visual_anatomy":["card surface","checkbox control","option title","option description","selected border"],"when_to_use":["여러 옵션을 동시에 고르되 각 옵션 설명이 길 때","작은 체크박스만으로는 선택 영역이 너무 좁을 때"],"anti_use":["옵션 텍스트가 짧으면 checkbox나 checkbox group이 더 단순하다"],"prompt_phrases":["알림 채널을 checkbox card 목록으로 보여줘"],"related":[{"id":"checkbox","relation":"compare","note":"checkbox card는 체크박스를 카드 표면으로 확장해 설명과 큰 클릭 영역을 제공한다."}]},{"id":"date-preset-picker","status":"draft","category":"input","group":"input-pickers","kind":"component","ko":{"name":"날짜 프리셋 선택기","aliases":["date preset picker","빠른 날짜 선택","기간 프리셋"]},"en":{"name":"Date preset picker","aliases":["Date picker with presets","Range presets"]},"one_liner":"직접 날짜를 고르기 전에 오늘, 이번 주, 지난 30일 같은 빠른 기간을 제공하는 날짜 선택기.","description":"대시보드, 로그, 매출 조회처럼 반복적으로 쓰는 기간을 빠르게 고르게 한다.","visual_anatomy":["date picker trigger","preset list","calendar panel","selected range"],"when_to_use":["사용자가 자주 쓰는 기간을 반복해서 선택할 때","직접 달력을 조작하기 전에 빠른 선택지를 제공하고 싶을 때"],"anti_use":["임의의 하루만 고르면 date-picker가 충분하다"],"prompt_phrases":["지난 7일과 이번 달 프리셋이 있는 date preset picker를 넣어줘"],"related":[{"id":"date-range-picker","relation":"compare","note":"date range picker는 기간 선택 자체이고, date preset picker는 자주 쓰는 기간 shortcut이 핵심이다."}]},{"id":"navbar-menu","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"내비게이션 메뉴","aliases":["navbar menu","상단 내비 메뉴","헤더 메뉴"]},"en":{"name":"Navbar menu","aliases":["Header navigation menu","Top nav menu"]},"one_liner":"상단 내비게이션 바 안에서 주요 섹션 링크와 드롭다운 항목을 보여주는 메뉴 영역.","description":"제품, 가격, 문서, 리소스처럼 사이트의 큰 목적지를 헤더 안에서 빠르게 탐색하게 한다.","visual_anatomy":["navbar container","top-level links","active item","optional dropdown panel"],"when_to_use":["웹사이트의 상위 섹션을 헤더에서 탐색해야 할 때"],"anti_use":["앱 내부의 깊은 좌측 메뉴는 sidebar-nav나 navigation-rail이 더 적합하다"],"prompt_phrases":["헤더에 제품과 문서 링크가 있는 navbar menu를 넣어줘"],"related":[{"id":"navigation-bar","relation":"compare","note":"navigation bar는 전체 헤더 구조이고, navbar menu는 그 안의 링크/메뉴 묶음이다."}]},{"id":"nav-user-menu","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"사용자 메뉴","aliases":["user menu","profile menu","계정 메뉴"]},"en":{"name":"User menu","aliases":["Profile menu","Account menu"]},"one_liner":"아바타나 사용자 이름을 눌러 계정, 설정, 로그아웃 같은 개인 메뉴를 여는 패턴.","description":"전역 내비게이션에서 현재 사용자와 계정 관련 행동을 한곳에 모은다.","visual_anatomy":["avatar or name trigger","dropdown menu","account metadata","menu actions"],"when_to_use":["로그인된 앱에서 계정 설정과 로그아웃을 제공할 때"],"anti_use":["알림 목록은 notification-center가 더 적합하다"],"prompt_phrases":["오른쪽 상단 아바타를 누르면 user menu가 열리게 해줘"],"related":[{"id":"dropdown-menu","relation":"compare","note":"user menu는 dropdown-menu의 계정 전용 사용 패턴이다."}]},{"id":"breadcrumb-overflow","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"축약 브레드크럼","aliases":["breadcrumb overflow","collapsed breadcrumb","생략 경로"]},"en":{"name":"Breadcrumb overflow","aliases":["Collapsed breadcrumb","Overflow breadcrumb"]},"one_liner":"긴 경로의 중간 항목을 말줄임이나 메뉴로 접어 좁은 공간에서도 현재 위치를 보여주는 브레드크럼.","description":"폴더, 문서, 설정처럼 계층이 깊은 화면에서 상위 경로를 모두 나열하지 않고 필요한 만큼만 펼치게 한다.","visual_anatomy":["first crumb","overflow trigger","current crumb","hidden crumb menu"],"when_to_use":["브레드크럼 경로가 길어 헤더 폭을 밀어낼 때"],"anti_use":["경로가 짧으면 일반 breadcrumb가 더 명확하다"],"prompt_phrases":["긴 문서 경로는 가운데를 접은 breadcrumb overflow로 보여줘"],"related":[{"id":"breadcrumbs-menu","relation":"compare","note":"breadcrumbs-menu는 특정 crumb의 형제 항목을 고르는 메뉴이고, breadcrumb overflow는 긴 경로를 접는 구조다."}]},{"id":"popover-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"팝오버 폼","aliases":["popover form","팝오버 입력폼","작은 플로팅 폼"]},"en":{"name":"Popover form","aliases":["Floating form","Inline popover form"]},"one_liner":"버튼이나 항목을 눌렀을 때 작은 팝오버 안에서 짧은 입력과 저장 행동을 처리하는 폼.","description":"이름 변경, 빠른 필터 저장, 라벨 추가처럼 현재 화면을 떠나지 않아도 되는 작은 입력 작업에 쓴다.","visual_anatomy":["trigger","floating popover surface","compact fields","save or cancel action"],"when_to_use":["짧은 값을 빠르게 입력하고 현재 맥락으로 돌아와야 할 때"],"anti_use":["검토가 필요한 긴 폼은 dialog나 drawer가 더 안전하다"],"prompt_phrases":["필터 저장 버튼을 누르면 이름을 입력하는 popover form을 열어줘"],"related":[{"id":"popover","relation":"compare","note":"popover는 떠 있는 표면 자체이고, popover form은 그 안에서 입력과 제출까지 처리하는 패턴이다."}]},{"id":"disclosure-card","status":"draft","category":"structure","group":"structure-panels","kind":"component","ko":{"name":"펼침 카드","aliases":["disclosure card","expandable card","접히는 카드"]},"en":{"name":"Disclosure card","aliases":["Expandable card","Collapsible card"]},"one_liner":"카드 헤더를 눌러 세부 내용을 펼치거나 접는 카드형 disclosure.","description":"설정 요약, FAQ, 요금제 세부 기능처럼 기본 정보는 보이고 자세한 내용은 필요할 때 펼치게 한다.","visual_anatomy":["card header","chevron indicator","summary content","expandable body"],"when_to_use":["카드 목록에서 각 항목의 상세 정보를 필요할 때만 보여줄 때"],"anti_use":["단순 텍스트 목록이면 accordion이 더 표준적이다"],"prompt_phrases":["설정 항목을 펼칠 수 있는 disclosure card로 보여줘"],"related":[{"id":"disclosure","relation":"compare","note":"disclosure는 펼침/접힘 동작이고, disclosure card는 그 동작을 카드 표면에 적용한 조합이다."}]},{"id":"pagination-jump","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"페이지 점프 입력","aliases":["pagination jump","page jump","페이지 번호 입력"]},"en":{"name":"Pagination jump","aliases":["Page jump input","Go to page"]},"one_liner":"페이지네이션 옆에 페이지 번호를 직접 입력해 특정 페이지로 이동하는 컨트롤.","description":"데이터가 많아 숫자 버튼만으로는 멀리 이동하기 어려울 때 사용자가 페이지 번호를 직접 입력하게 한다.","visual_anatomy":["pagination controls","page number input","go action","total pages label"],"when_to_use":["수십 페이지 이상을 빠르게 이동해야 할 때"],"anti_use":["페이지 수가 적으면 일반 pagination이 충분하다"],"prompt_phrases":["테이블 하단에 원하는 페이지로 바로 가는 pagination jump를 넣어줘"],"related":[{"id":"pagination","relation":"compare","note":"pagination jump는 일반 페이지 이동에 직접 번호 입력 행동을 추가한다."}]},{"id":"avatar-stack","status":"draft","category":"data-display","group":"data-people-integrations","kind":"component","ko":{"name":"아바타 스택","aliases":["avatar stack","겹친 아바타","팀 아바타"]},"en":{"name":"Avatar stack","aliases":["Avatar group","Stacked avatars"]},"one_liner":"여러 사용자의 아바타를 겹쳐 보여 팀, 참여자, 공유 대상을 요약하는 요소.","description":"모든 사람을 목록으로 펼치지 않고 참여자 수와 일부 대표 사용자를 작게 보여준다.","visual_anatomy":["overlapping avatars","border ring","overflow count","optional tooltip"],"when_to_use":["카드나 테이블 행에서 참여자 여러 명을 compact하게 보여줄 때"],"anti_use":["이름과 역할을 읽어야 하면 team-member-row나 table이 더 적합하다"],"prompt_phrases":["프로젝트 카드 오른쪽에 참여자 avatar stack을 넣어줘"],"related":[{"id":"avatar","relation":"compare","note":"avatar는 한 사람이고, avatar stack은 여러 사람을 겹쳐 요약한다."}]},{"id":"status-avatar","status":"draft","category":"data-display","group":"data-people-integrations","kind":"component","ko":{"name":"상태 아바타","aliases":["status avatar","presence avatar","접속 상태 아바타"]},"en":{"name":"Status avatar","aliases":["Presence avatar","Avatar with status"]},"one_liner":"아바타 위에 온라인, 자리비움, 오류 같은 작은 상태 점을 붙인 사용자 표시.","description":"채팅, 협업, 담당자 목록에서 사람 자체와 현재 상태를 한 번에 보여준다.","visual_anatomy":["avatar image or initials","status dot","status color","optional accessible label"],"when_to_use":["사용자 목록에서 현재 접속 상태나 가용성을 보여줄 때"],"anti_use":["상태만 보여주면 status-indicator가 더 직접적이다"],"prompt_phrases":["담당자 아바타에 온라인 상태 dot이 있는 status avatar를 넣어줘"],"related":[{"id":"status-indicator","relation":"compare","note":"status indicator는 상태만 표시하고, status avatar는 사람 식별과 상태를 결합한다."}]},{"id":"badge-group","status":"draft","category":"data-display","group":"data-people-integrations","kind":"component","ko":{"name":"배지 그룹","aliases":["badge group","태그 배지 묶음","상태 배지 묶음"]},"en":{"name":"Badge group","aliases":["Badge cluster","Tag badge group"]},"one_liner":"여러 배지를 한 줄이나 묶음으로 배치해 속성, 상태, 태그를 compact하게 보여주는 요소.","description":"카드나 테이블 행에서 카테고리, 상태, 권한 같은 여러 짧은 메타데이터를 함께 표시한다.","visual_anatomy":["badge chips","wrapping row","optional overflow count","consistent color semantics"],"when_to_use":["한 항목에 여러 짧은 속성을 보여줘야 할 때"],"anti_use":["사용자가 직접 선택하거나 제거해야 하면 chip이나 tag-input이 더 적합하다"],"prompt_phrases":["카드 상단에 New, Beta, Admin badge group을 보여줘"],"related":[{"id":"badge","relation":"compare","note":"badge group은 여러 badge를 의미 있는 묶음으로 정렬한다."}]},{"id":"meter","status":"draft","category":"feedback","group":"feedback-status-notifications","kind":"component","ko":{"name":"미터","aliases":["meter","수치 미터","사용량 미터"]},"en":{"name":"Meter","aliases":["Usage meter","Gauge meter"]},"one_liner":"알려진 범위 안에서 현재 값이 어느 정도인지 보여주는 수치 표시 막대.","description":"저장공간, 할당량, 품질 점수처럼 전체 범위와 현재 값의 비율을 보여준다.","visual_anatomy":["value label","minimum and maximum range","filled track","threshold color"],"when_to_use":["진행 중인 작업보다 현재 사용량이나 상태 값을 보여줄 때"],"anti_use":["작업 완료 진행률은 progress-bar가 더 적합하다"],"prompt_phrases":["저장공간 사용량을 72% meter로 보여줘"],"related":[{"id":"progress-bar","relation":"compare","note":"progress bar는 작업 진행을, meter는 정해진 범위 안의 현재 값을 보여준다."}]},{"id":"table-row-actions","status":"draft","category":"action","group":"action-command-bars","kind":"component","ko":{"name":"테이블 행 액션","aliases":["table row actions","row actions","행 작업 메뉴"]},"en":{"name":"Table row actions","aliases":["Row actions","Row action menu"]},"one_liner":"테이블의 각 행 끝에 보기, 수정, 삭제 같은 해당 행 전용 작업을 배치하는 액션 영역.","description":"데이터 행마다 가능한 작업이 다를 때 메뉴 버튼이나 아이콘 버튼 묶음으로 행 단위 행동을 제공한다.","visual_anatomy":["table row","trailing action button","action menu","destructive action separation"],"when_to_use":["목록 행마다 세부 보기, 편집, 삭제 같은 작업을 제공할 때"],"anti_use":["여러 행을 한 번에 처리하면 bulk-action-bar가 더 적합하다"],"prompt_phrases":["사용자 테이블 각 행 끝에 table row actions 메뉴를 넣어줘"],"related":[{"id":"data-table-toolbar","relation":"compare","note":"data-table-toolbar는 테이블 전체 작업이고, table row actions는 개별 행 작업이다."}]},{"id":"empty-filter-state","status":"draft","category":"feedback","group":"feedback-empty-error","kind":"component","ko":{"name":"필터 결과 없음 상태","aliases":["empty filter state","필터 빈 상태","검색 결과 없음"]},"en":{"name":"Empty filter state","aliases":["Filtered empty state","No matching results"]},"one_liner":"필터나 검색 조건 때문에 결과가 없을 때 조건 해제와 재검색 행동을 함께 보여주는 빈 상태.","description":"데이터가 아예 없는 것이 아니라 현재 조건에 맞는 항목이 없다는 점을 알려주고 필터 초기화를 돕는다.","visual_anatomy":["empty illustration or icon","filter-specific message","clear filters action","optional suggested query"],"when_to_use":["검색어 또는 필터 적용 후 결과가 0개일 때"],"anti_use":["데이터 자체가 없으면 empty-state나 empty-table이 더 적합하다"],"prompt_phrases":["필터 결과가 없을 때 clear filters 버튼이 있는 empty filter state를 보여줘"],"related":[{"id":"empty-state","relation":"compare","note":"empty filter state는 조건 때문에 비어 있음을 설명하고, 조건 해제를 주요 행동으로 둔다."}]},{"id":"notification-inbox-row","status":"draft","category":"data-display","group":"data-chat-messaging","kind":"component","ko":{"name":"알림 인박스 행","aliases":["notification inbox row","알림 행","읽지 않은 알림 행"]},"en":{"name":"Notification inbox row","aliases":["Notification row","Inbox notification item"]},"one_liner":"알림함 안에서 읽음 상태, 아이콘, 본문, 시간, 행 작업을 한 줄에 보여주는 항목.","description":"여러 알림을 목록으로 스캔하고 읽음/안읽음 상태와 관련 작업을 바로 파악하게 한다.","visual_anatomy":["unread marker","notification icon","title and body","timestamp","row action"],"when_to_use":["알림 센터나 인박스에서 알림을 목록으로 보여줄 때"],"anti_use":["일회성 완료 메시지는 toast가 더 적합하다"],"prompt_phrases":["알림함에 unread dot이 있는 notification inbox row를 보여줘"],"related":[{"id":"notification-list","relation":"compare","note":"notification-list는 목록 전체이고, notification inbox row는 그 안의 개별 행 구조다."}]},{"id":"progress-stepper","status":"draft","category":"feedback","group":"feedback-status-notifications","kind":"component","ko":{"name":"진행 스테퍼","aliases":["progress stepper","단계 진행 표시","step progress"]},"en":{"name":"Progress stepper","aliases":["Step progress","Step indicator"]},"one_liner":"여러 단계 중 현재 단계와 완료된 단계를 점, 선, 라벨로 보여주는 진행 표시.","description":"주문, 온보딩, 설정 마법사처럼 순서가 있는 흐름에서 전체 진행 위치를 보여준다.","visual_anatomy":["ordered steps","completed step marker","active step marker","connector line"],"when_to_use":["사용자가 다단계 흐름에서 현재 위치를 알아야 할 때"],"anti_use":["단계 이동 자체가 핵심이면 stepper나 wizard가 더 적합하다"],"prompt_phrases":["결제 흐름 상단에 현재 단계가 보이는 progress stepper를 넣어줘"],"related":[{"id":"stepper","relation":"compare","note":"stepper는 단계 이동 컨트롤이고, progress stepper는 진행 상태 표시가 중심이다."}]},{"id":"pricing-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"가격 섹션","aliases":["pricing section","요금제 섹션","가격표 블록"]},"en":{"name":"Pricing section","aliases":["Pricing block","Plans section"]},"one_liner":"여러 요금제 카드와 추천 플랜, CTA를 한 화면 섹션으로 묶은 가격 안내 블록.","description":"랜딩 페이지나 SaaS 구매 흐름에서 무료/프로/팀 요금제를 비교하고 선택하게 한다.","visual_anatomy":["section heading","pricing cards","highlighted plan","feature rows","CTA buttons"],"when_to_use":["서비스 요금제를 비교하고 가입 또는 업그레이드를 유도할 때"],"anti_use":["단일 상품 가격만 보여주면 price-card가 충분하다"],"prompt_phrases":["요금제 3개가 나란히 있는 pricing section을 만들어줘"],"related":[{"id":"price-card","relation":"compare","note":"price-card는 단일 가격 카드이고 pricing-section은 여러 플랜 비교 섹션이다."}]},{"id":"testimonial-section","status":"draft","category":"structure","group":"structure-misc","kind":"block","ko":{"name":"후기 섹션","aliases":["testimonial section","고객 후기 섹션","리뷰 블록"]},"en":{"name":"Testimonial section","aliases":["Testimonials block","Review section"]},"one_liner":"고객 인용문, 이름, 역할, 아바타를 묶어 신뢰를 보여주는 랜딩 페이지 섹션.","description":"제품의 사회적 증거를 보여주기 위해 여러 고객 후기를 카드나 그리드로 배치한다.","visual_anatomy":["quote cards","avatar","name and role","rating optional","section heading"],"when_to_use":["랜딩 페이지에서 실제 사용자 만족이나 신뢰를 보여줄 때"],"anti_use":["상품별 개별 리뷰 목록은 review-list나 data table 형태가 더 적합하다"],"prompt_phrases":["고객 인용문 3개가 있는 testimonial section을 넣어줘"]},{"id":"feature-grid-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"기능 그리드 섹션","aliases":["feature grid","기능 카드 그리드","feature section"]},"en":{"name":"Feature grid section","aliases":["Feature cards section","Feature block"]},"one_liner":"제품 기능 여러 개를 아이콘, 제목, 설명 카드의 그리드로 보여주는 섹션.","description":"랜딩 페이지에서 핵심 기능을 빠르게 훑게 하기 위해 반복 카드로 구성한다.","visual_anatomy":["section heading","feature cards","icon","title","short description"],"when_to_use":["제품의 주요 기능을 3개 이상 한 번에 소개할 때"],"anti_use":["기능 간 수치 비교가 필요하면 feature-comparison이 더 적합하다"],"prompt_phrases":["아이콘과 설명이 있는 feature grid section을 만들어줘"]},{"id":"integration-grid-section","status":"draft","category":"data-display","group":"data-people-integrations","kind":"block","ko":{"name":"연동 그리드 섹션","aliases":["integration grid","integrations section","연동 앱 섹션"]},"en":{"name":"Integration grid section","aliases":["Integrations grid","Logo integration section"]},"one_liner":"외부 서비스 로고와 연동 상태를 카드 그리드로 보여주는 섹션.","description":"제품이 어떤 도구와 연결되는지 보여주고 설치, 연결, 자세히 보기 행동을 제공한다.","visual_anatomy":["integration cards","logo","service name","connection status","action"],"when_to_use":["SaaS 앱에서 지원 연동 목록이나 마켓플레이스를 보여줄 때"],"anti_use":["단일 연동 설정은 integration-card가 더 직접적이다"],"prompt_phrases":["Slack","GitHub","Notion이 있는 integration grid section을 만들어줘"],"related":[{"id":"integration-card","relation":"compare","note":"integration-card는 단일 연동 카드이고 integration-grid-section은 여러 연동을 탐색하는 섹션이다."}]},{"id":"settings-page-layout","status":"draft","category":"structure","group":"structure-app-layout","kind":"block","ko":{"name":"설정 페이지 레이아웃","aliases":["settings page","settings layout","설정 화면 레이아웃"]},"en":{"name":"Settings page layout","aliases":["Settings layout","Settings screen"]},"one_liner":"설정 카테고리 내비게이션과 설정 폼 카드들을 함께 배치한 페이지 구조.","description":"계정, 보안, 결제, 알림처럼 여러 설정 영역을 탐색하고 수정하게 한다.","visual_anatomy":["settings nav","active category","form cards","save actions","helper text"],"when_to_use":["제품 내부에서 사용자가 계정이나 워크스페이스 설정을 관리할 때"],"anti_use":["설정 항목 하나만 바꾸면 popover-form이나 dialog가 더 가볍다"],"prompt_phrases":["왼쪽 설정 메뉴와 오른쪽 form card가 있는 settings page layout을 만들어줘"]},{"id":"profile-settings-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"프로필 설정 폼","aliases":["profile settings form","프로필 편집 폼","account profile form"]},"en":{"name":"Profile settings form","aliases":["Profile form","Account profile form"]},"one_liner":"이름, 아바타, 소개, 연락처 같은 개인 프로필 정보를 편집하는 설정 폼.","description":"계정 설정 안에서 사용자 정체성 정보를 보여주고 변경 저장 흐름을 제공한다.","visual_anatomy":["avatar upload","name fields","bio field","email field","save button"],"when_to_use":["사용자가 자신의 표시 이름과 프로필 정보를 수정해야 할 때"],"anti_use":["로그인이나 가입 입력은 auth-form 계열이 더 적합하다"],"prompt_phrases":["아바타 업로드와 이름 입력이 있는 profile settings form을 만들어줘"]},{"id":"billing-settings-page","status":"draft","category":"structure","group":"structure-app-layout","kind":"block","ko":{"name":"결제 설정 페이지","aliases":["billing settings","billing page","결제 관리 화면"]},"en":{"name":"Billing settings page","aliases":["Billing page","Subscription settings"]},"one_liner":"현재 플랜, 결제 수단, 청구 내역, 업그레이드 행동을 모은 설정 페이지.","description":"SaaS 앱에서 구독 상태와 결제 관련 작업을 한 화면에서 관리하게 한다.","visual_anatomy":["current plan summary","payment method card","invoices list","upgrade action"],"when_to_use":["사용자가 요금제와 결제 정보를 관리해야 할 때"],"anti_use":["한 장의 결제 요약만 필요하면 billing-summary가 더 단순하다"],"prompt_phrases":["현재 플랜과 invoice row가 있는 billing settings page를 만들어줘"],"related":[{"id":"billing-summary","relation":"compare","note":"billing-summary는 요약 카드이고 billing-settings-page는 결제 관리 화면 전체다."}]},{"id":"onboarding-flow-page","status":"draft","category":"structure","group":"structure-app-layout","kind":"block","ko":{"name":"온보딩 플로우 페이지","aliases":["onboarding flow","onboarding page","초기 설정 흐름"]},"en":{"name":"Onboarding flow page","aliases":["Onboarding page","Setup flow"]},"one_liner":"새 사용자가 제품 사용을 시작하기 위해 단계별 선택과 설정을 완료하는 페이지.","description":"팀 생성, 역할 선택, 데이터 가져오기, 첫 작업 생성처럼 초기 설정을 안내한다.","visual_anatomy":["progress stepper","setup form","choice cards","continue action","skip option"],"when_to_use":["가입 직후 사용자가 첫 성공 경험까지 안내가 필요할 때"],"anti_use":["단순 안내 목록이면 onboarding-checklist가 더 가볍다"],"prompt_phrases":["팀 생성부터 데이터 가져오기까지 이어지는 onboarding flow page를 만들어줘"],"related":[{"id":"wizard","relation":"compare","note":"wizard는 단계형 컨트롤이고 onboarding-flow-page는 첫 사용 설정 경험 전체다."}]},{"id":"newsletter-section","status":"draft","category":"input","group":"input-auth-forms","kind":"block","ko":{"name":"뉴스레터 섹션","aliases":["newsletter section","구독 섹션","이메일 구독 블록"]},"en":{"name":"Newsletter section","aliases":["Email signup section","Subscribe block"]},"one_liner":"이메일 입력과 구독 CTA를 랜딩 페이지 섹션으로 배치한 블록.","description":"방문자가 업데이트, 제품 소식, 리소스를 받기 위해 이메일을 남기게 한다.","visual_anatomy":["section copy","email field","inline submit","privacy note","optional illustration"],"when_to_use":["랜딩 페이지에서 이메일 구독 전환을 유도할 때"],"anti_use":["앱 내부의 작은 이메일 입력은 inline-submit-field가 충분하다"],"prompt_phrases":["랜딩 하단에 이메일 구독 newsletter section을 넣어줘"],"related":[{"id":"inline-submit-field","relation":"compare","note":"inline-submit-field는 입력 조합이고 newsletter-section은 카피와 CTA를 포함한 섹션이다."}]},{"id":"cta-section","status":"draft","category":"action","group":"action-buttons","kind":"block","ko":{"name":"CTA 섹션","aliases":["call to action section","CTA block","행동 유도 섹션"]},"en":{"name":"CTA section","aliases":["Call to action section","CTA block"]},"one_liner":"한 가지 핵심 행동을 유도하기 위해 헤드라인, 설명, 버튼을 크게 배치한 섹션.","description":"랜딩 페이지 중간이나 끝에서 시작하기, 문의하기, 데모 보기 같은 전환 행동을 집중시킨다.","visual_anatomy":["headline","supporting copy","primary CTA","secondary action optional","background"],"when_to_use":["사용자가 다음 행동으로 넘어가도록 명확한 전환 지점이 필요할 때"],"anti_use":["여러 기능을 설명하려면 feature-grid-section이 더 적합하다"],"prompt_phrases":["페이지 하단에 무료로 시작하기 CTA section을 넣어줘"]},{"id":"animated-gradient-background","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"애니메이션 그라디언트 배경","aliases":["animated gradient","움직이는 그라디언트","gradient background"]},"en":{"name":"Animated gradient background","aliases":["Moving gradient background","Gradient animation"]},"one_liner":"배경의 색상 흐름이 천천히 움직이며 화면에 동적인 분위기를 주는 효과.","description":"히어로, 빈 상태, 로딩 화면에서 정적인 배경보다 부드러운 움직임을 줄 때 사용한다.","visual_anatomy":["gradient surface","animated color stops","soft motion","content overlay"],"when_to_use":["랜딩이나 AI 화면에서 배경에 은은한 동적 분위기를 줄 때"],"anti_use":["업무용 밀도 높은 폼이나 표 화면에서는 집중을 방해할 수 있다"],"prompt_phrases":["히어로 배경에 은은한 animated gradient background를 넣어줘"]},{"id":"marquee-row","status":"draft","category":"style","group":"style-decorative-effects","kind":"motion-pattern","ko":{"name":"마키 행","aliases":["marquee row","흐르는 카드 행","자동 스크롤 행","로고 마키"]},"en":{"name":"Marquee row","aliases":["Scrolling marquee","Auto-scrolling row","Logo marquee"]},"one_liner":"로고, 후기, 카드가 가로로 계속 흐르며 반복되는 자동 스크롤 행.","description":"많은 항목을 압축해서 보여주거나 랜딩 페이지에 움직임을 줄 때 사용한다.","visual_anatomy":["horizontal track","repeated items","masked edges","continuous motion"],"when_to_use":["로고 목록이나 후기 카드를 흐르는 형태로 보여줄 때"],"anti_use":["사용자가 항목을 읽고 선택해야 하면 carousel이나 grid가 더 낫다"],"prompt_phrases":["고객 로고가 천천히 흐르는 marquee row를 넣어줘"]},{"id":"border-beam","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"보더 빔","aliases":["border beam","빛나는 테두리","animated border"]},"en":{"name":"Border beam","aliases":["Animated border beam","Glowing border"]},"one_liner":"카드나 버튼 테두리를 따라 빛이 이동하는 강조 효과.","description":"새 기능, 추천 플랜, AI 응답 카드처럼 특정 표면을 은은하게 강조할 때 쓴다.","visual_anatomy":["surface border","moving highlight","rounded corners","focused content"],"when_to_use":["중요한 카드나 CTA를 과하지 않게 강조할 때"],"anti_use":["상태나 오류를 전달해야 하면 alert나 status-indicator가 더 명확하다"],"prompt_phrases":["추천 플랜 카드에 border beam 효과를 넣어줘"]},{"id":"orbiting-icons","status":"draft","category":"style","group":"style-decorative-effects","kind":"motion-pattern","ko":{"name":"궤도 아이콘","aliases":["orbiting icons","orbit icons","회전 아이콘"]},"en":{"name":"Orbiting icons","aliases":["Orbit icons","Icon orbit"]},"one_liner":"중심 대상 주변을 여러 아이콘이 원형 궤도로 배치되거나 회전하는 시각 패턴.","description":"제품이 여러 도구와 연결되거나 중심 기능 주변에 생태계가 있음을 상징적으로 보여준다.","visual_anatomy":["center object","circular orbit","icon nodes","motion path"],"when_to_use":["연동","생태계","AI agent 주변 도구를 시각적으로 보여줄 때"],"anti_use":["정확한 관계나 상태를 읽어야 하면 integration-grid-section이 더 명확하다"],"prompt_phrases":["AI 로고 주변에 도구 아이콘이 도는 orbiting icons를 만들어줘"]},{"id":"spotlight-card","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"스포트라이트 카드","aliases":["spotlight card","마우스 빛 카드","hover spotlight"]},"en":{"name":"Spotlight card","aliases":["Hover spotlight card","Cursor spotlight"]},"one_liner":"마우스 위치나 hover 상태에 따라 카드 표면에 빛 번짐이 나타나는 카드 효과.","description":"기능 카드나 갤러리 카드에 상호작용감을 주되 카드 정보 구조는 유지한다.","visual_anatomy":["card surface","radial highlight","hover area","content stack"],"when_to_use":["마케팅 카드에 hover 반응과 깊이를 주고 싶을 때"],"anti_use":["데이터 테이블이나 반복 업무 UI에서는 시각 noise가 될 수 있다"],"prompt_phrases":["feature card에 hover spotlight card 효과를 넣어줘"]},{"id":"grid-pattern-background","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"그리드 패턴 배경","aliases":["grid pattern background","격자 배경","grid background"]},"en":{"name":"Grid pattern background","aliases":["Grid background","Graph paper background"]},"one_liner":"얇은 격자선을 배경에 깔아 기술적이거나 구조적인 분위기를 주는 배경 패턴.","description":"히어로, 빈 상태, 개발자 도구 화면에서 공간감을 주되 콘텐츠를 방해하지 않게 한다.","visual_anatomy":["repeating grid lines","muted color","content overlay","optional fade mask"],"when_to_use":["기술 제품 랜딩이나 캔버스형 화면의 배경을 만들 때"],"anti_use":["글이 많은 본문이나 폼에서는 가독성을 해칠 수 있다"],"prompt_phrases":["히어로 섹션 뒤에 흐린 grid pattern background를 넣어줘"]},{"id":"typing-text-effect","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"타이핑 텍스트 효과","aliases":["typing effect","타자 효과","typewriter text"]},"en":{"name":"Typing text effect","aliases":["Typewriter effect","Typing animation"]},"one_liner":"글자가 한 글자씩 입력되는 것처럼 나타나는 텍스트 애니메이션.","description":"AI 응답, 히어로 카피, 데모 문구가 생성되거나 말해지는 느낌을 줄 때 사용한다.","visual_anatomy":["text string","cursor","staged reveal","optional loop"],"when_to_use":["AI나 자동 생성 메시지의 등장감을 표현할 때"],"anti_use":["중요 안내문이나 긴 본문에는 읽기 속도를 방해한다"],"prompt_phrases":["AI가 답하는 문구에 typing text effect를 적용해줘"]},{"id":"number-ticker","status":"draft","category":"data-display","group":"data-motion-content","kind":"motion-pattern","ko":{"name":"숫자 티커","aliases":["number ticker","count up","숫자 카운트업"]},"en":{"name":"Number ticker","aliases":["Count up number","Animated number"]},"one_liner":"숫자가 목표 값까지 올라가거나 바뀌며 지표 변화를 보여주는 애니메이션 숫자.","description":"통계, KPI, 사용자 수처럼 숫자 자체를 강조하고 증가감을 보여줄 때 사용한다.","visual_anatomy":["numeric value","animated digits","unit label","optional trend"],"when_to_use":["랜딩 페이지나 대시보드에서 핵심 수치를 강조할 때"],"anti_use":["정확한 표 형식 비교는 table이나 metric-card가 더 적합하다"],"prompt_phrases":["총 사용자 수가 올라가는 number ticker를 넣어줘"]},{"id":"blur-fade-in","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"블러 페이드 인","aliases":["blur fade","blur fade in","흐림 페이드 등장"]},"en":{"name":"Blur fade in","aliases":["Blur fade","Soft reveal"]},"one_liner":"요소가 흐린 상태에서 선명해지며 부드럽게 나타나는 등장 애니메이션.","description":"카드, 이미지, 문단을 순차적으로 드러낼 때 갑작스러운 등장보다 부드러운 인상을 준다.","visual_anatomy":["blurred start","opacity transition","final sharp state","stagger optional"],"when_to_use":["랜딩 페이지 카드나 이미지가 스크롤에 맞춰 등장할 때"],"anti_use":["상태 변화가 즉시 인지되어야 하는 컨트롤에는 쓰지 않는다"],"prompt_phrases":["기능 카드들이 blur fade in으로 순서대로 나타나게 해줘"]},{"id":"animated-shiny-text","status":"draft","category":"style","group":"style-typography","kind":"visual-effect","ko":{"name":"샤이니 텍스트","aliases":["shiny text","빛나는 텍스트","animated shiny text"]},"en":{"name":"Animated shiny text","aliases":["Shiny text","Text shimmer"]},"one_liner":"텍스트 위로 빛이 지나가는 듯한 하이라이트를 반복하는 텍스트 효과.","description":"배지, 새 기능 라벨, AI 상태 문구처럼 짧은 텍스트를 눈에 띄게 한다.","visual_anatomy":["short text","moving highlight","muted base","loop animation"],"when_to_use":["짧은 마케팅 문구나 새 기능 라벨을 강조할 때"],"anti_use":["긴 문장이나 본문에는 shimmer-effect보다 더 산만할 수 있다"],"prompt_phrases":["New feature 배지에 animated shiny text를 적용해줘"],"related":[{"id":"shimmer-effect","relation":"compare","note":"shimmer-effect는 로딩/진행 표면에도 쓰이고, animated shiny text는 짧은 텍스트 강조에 초점이 있다."}]},{"id":"dot-pattern-background","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"점 패턴 배경","aliases":["dot pattern","dotted background","점 배경"]},"en":{"name":"Dot pattern background","aliases":["Dotted background","Dot grid"]},"one_liner":"작은 점들이 반복되는 배경 패턴으로 빈 공간에 질서 있는 질감을 주는 요소.","description":"히어로, empty state, feature section 뒤에 배경 질감을 추가하되 콘텐츠 위계를 유지한다.","visual_anatomy":["repeating dots","muted contrast","fade mask","content layer"],"when_to_use":["미니멀한 화면에 가벼운 배경 질감이 필요할 때"],"anti_use":["복잡한 카드 그리드 뒤에서는 시각적 혼잡을 만든다"],"prompt_phrases":["빈 상태 뒤에 연한 dot pattern background를 깔아줘"]},{"id":"bento-grid","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"벤토 그리드","aliases":["bento grid","벤토 카드 그리드","비대칭 기능 그리드"]},"en":{"name":"Bento grid","aliases":["Bento layout","Bento feature grid"]},"one_liner":"서로 다른 크기의 카드들을 격자에 배치해 기능이나 콘텐츠를 풍부하게 보여주는 레이아웃.","description":"랜딩 페이지에서 핵심 기능을 단조로운 동일 카드 대신 크기와 강조도가 다른 묶음으로 보여준다.","visual_anatomy":["asymmetric grid","feature cards","large highlight card","small supporting cards"],"when_to_use":["기능 여러 개 중 일부를 더 크게 강조하고 싶을 때"],"anti_use":["동등한 항목 비교에는 feature-grid-section이 더 명확하다"],"prompt_phrases":["AI 기능들을 큰 카드와 작은 카드가 섞인 bento grid로 보여줘"]},{"id":"sticky-scroll-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"스티키 스크롤 섹션","aliases":["sticky scroll","고정 스크롤 섹션","sticky reveal"]},"en":{"name":"Sticky scroll section","aliases":["Sticky scroll reveal","Pinned scroll section"]},"one_liner":"한쪽 콘텐츠가 화면에 고정된 채 스크롤에 따라 설명이나 미디어가 바뀌는 섹션.","description":"제품 기능을 단계별로 설명하면서 시각 자료를 고정해 맥락을 유지한다.","visual_anatomy":["sticky media panel","scrolling text steps","active state","section height"],"when_to_use":["긴 설명을 단계별 제품 데모처럼 보여줄 때"],"anti_use":["짧은 기능 목록에는 feature-grid-section이 더 빠르다"],"prompt_phrases":["스크롤하면 오른쪽 미리보기가 바뀌는 sticky scroll section을 만들어줘"]},{"id":"floating-navbar","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"플로팅 내비게이션 바","aliases":["floating navbar","떠 있는 nav","floating nav"]},"en":{"name":"Floating navbar","aliases":["Floating navigation bar","Floating nav"]},"one_liner":"페이지 상단에 고정되지 않고 떠 있는 pill 형태로 배치되는 내비게이션 바.","description":"포트폴리오나 랜딩 페이지에서 화면 위에 가볍게 떠 있는 주요 링크를 제공한다.","visual_anatomy":["floating pill surface","nav links","shadow","centered or top placement"],"when_to_use":["랜딩 페이지에서 nav가 콘텐츠 위에 떠 있는 느낌을 주고 싶을 때"],"anti_use":["복잡한 제품 앱의 전역 내비게이션은 navigation-bar나 sidebar가 더 안정적이다"],"prompt_phrases":["히어로 위에 떠 있는 floating navbar를 넣어줘"]},{"id":"three-d-card","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"3D 카드","aliases":["3d card","tilt card","기울어지는 카드"]},"en":{"name":"3D card","aliases":["Tilt card","3D hover card"]},"one_liner":"hover나 마우스 위치에 따라 입체적으로 기울어지는 카드 효과.","description":"포트폴리오, 제품 카드, 랜딩 feature card에 깊이감과 상호작용감을 준다.","visual_anatomy":["card surface","perspective tilt","hover depth","layered content"],"when_to_use":["마케팅 카드나 포트폴리오 카드에 입체 반응을 주고 싶을 때"],"anti_use":["정확한 읽기와 반복 작업이 중요한 admin UI에는 피한다"],"prompt_phrases":["제품 카드에 hover하면 기울어지는 3D card 효과를 넣어줘"]},{"id":"hover-card-stack","status":"draft","category":"style","group":"style-misc","kind":"visual-effect","ko":{"name":"호버 카드 스택","aliases":["card stack hover","hover card stack","겹친 카드 효과"]},"en":{"name":"Hover card stack","aliases":["Card stack hover","Stacked cards"]},"one_liner":"여러 카드가 겹쳐 있다가 hover나 스크롤에 따라 펼쳐지는 카드 묶음 효과.","description":"사례, 이미지, 기능 미리보기를 압축해서 보여주고 상호작용 시 레이어를 드러낸다.","visual_anatomy":["stacked cards","offset layers","hover reveal","depth shadow"],"when_to_use":["여러 미리보기를 한 공간에 압축해 보여줄 때"],"anti_use":["각 카드를 비교해야 하면 grid나 carousel이 더 명확하다"],"prompt_phrases":["프로젝트 미리보기를 겹친 hover card stack으로 보여줘"]},{"id":"background-beams","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"배경 빔","aliases":["background beams","beam background","빛줄기 배경"]},"en":{"name":"Background beams","aliases":["Beam background","Light beams"]},"one_liner":"배경에 흐르는 빛줄기나 선형 광선을 깔아 공간감과 움직임을 주는 효과.","description":"히어로나 CTA 섹션에서 미래적이고 기술적인 분위기를 만들 때 사용한다.","visual_anatomy":["beam lines","soft glow","dark or light surface","content overlay"],"when_to_use":["AI/개발자 도구 랜딩의 첫 화면에 강한 시각 신호가 필요할 때"],"anti_use":["텍스트 가독성이 중요한 본문 섹션에는 쓰지 않는다"],"prompt_phrases":["AI 제품 hero 뒤에 background beams 효과를 넣어줘"]},{"id":"aurora-background","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"오로라 배경","aliases":["aurora background","오로라 그라디언트","aurora effect"]},"en":{"name":"Aurora background","aliases":["Aurora effect","Aurora gradient"]},"one_liner":"오로라처럼 넓은 색 덩어리가 부드럽게 흐르는 랜딩 페이지 배경 효과.","description":"차분하지만 인상적인 첫 화면이나 제품 소개 섹션에 큰 분위기를 만든다.","visual_anatomy":["soft color bands","large blur","animated drift","foreground content"],"when_to_use":["브랜드 랜딩의 hero 배경을 강하게 만들 때"],"anti_use":["색 대비가 낮아지면 CTA와 본문 가독성이 떨어질 수 있다"],"prompt_phrases":["첫 화면 배경을 부드러운 aurora background로 만들어줘"]},{"id":"spotlight-hero","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"스포트라이트 히어로","aliases":["spotlight hero","spotlight hero section","빛 집중 히어로"]},"en":{"name":"Spotlight hero","aliases":["Spotlight hero section","Hero spotlight"]},"one_liner":"중앙 카피나 제품명을 강한 스포트라이트 배경으로 강조하는 히어로 섹션.","description":"어두운 배경이나 단순한 hero에서 브랜드/제품 이름에 시선을 집중시키는 효과형 섹션이다.","visual_anatomy":["hero headline","spotlight glow","supporting copy","CTA","dark or muted background"],"when_to_use":["제품 이름과 한 문장을 첫 화면에서 강하게 각인시키고 싶을 때"],"anti_use":["정보 밀도가 높은 앱 첫 화면에는 일반 hero나 dashboard가 더 적합하다"],"prompt_phrases":["제품명 뒤에 빛이 모이는 spotlight hero를 만들어줘"],"related":[{"id":"hero","relation":"compare","note":"hero는 일반 첫 화면 영역이고 spotlight-hero는 배경 조명 효과가 핵심인 hero 변형이다."}]},{"id":"infinite-moving-cards","status":"draft","category":"data-display","group":"data-motion-content","kind":"motion-pattern","ko":{"name":"무한 이동 카드","aliases":["infinite moving cards","무한 스크롤 카드","moving cards"]},"en":{"name":"Infinite moving cards","aliases":["Infinite cards","Moving card loop"]},"one_liner":"카드 목록이 끊김 없이 반복 이동하며 여러 후기나 항목을 보여주는 패턴.","description":"후기, 로고, 사용 사례를 정적인 그리드보다 생동감 있게 노출한다.","visual_anatomy":["card row","repeated cards","seamless loop","masked edges"],"when_to_use":["랜딩 페이지에서 많은 카드형 증거를 압축해 보여줄 때"],"anti_use":["사용자가 카드를 선택하거나 상세히 읽어야 하면 static grid가 더 낫다"],"prompt_phrases":["후기 카드들이 무한히 흐르는 infinite moving cards 섹션을 넣어줘"],"related":[{"id":"marquee-row","relation":"compare","note":"marquee-row는 일반 자동 흐름 행이고 infinite-moving-cards는 카드형 콘텐츠 루프에 초점이 있다."}]},{"id":"canvas-reveal-card","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"캔버스 리빌 카드","aliases":["canvas reveal card","reveal card","캔버스 효과 카드"]},"en":{"name":"Canvas reveal card","aliases":["Reveal card","Canvas hover card"]},"one_liner":"hover 시 캔버스 기반 패턴이나 빛 효과가 드러나는 인터랙티브 카드.","description":"기능 카드나 팀 카드에 일반 hover보다 강한 시각적 reveal을 주는 마케팅 효과다.","visual_anatomy":["card surface","hidden canvas effect","hover reveal","foreground content"],"when_to_use":["랜딩 카드에 고유한 hover reveal 효과를 주고 싶을 때"],"anti_use":["정적인 정보 카드나 접근성이 중요한 업무 화면에는 과하다"],"prompt_phrases":["서비스 카드에 hover하면 패턴이 드러나는 canvas reveal card를 넣어줘"]},{"id":"tracing-beam-section","status":"draft","category":"style","group":"style-decorative-effects","kind":"motion-pattern","ko":{"name":"트레이싱 빔 섹션","aliases":["tracing beam","scroll tracing beam","스크롤 빔"]},"en":{"name":"Tracing beam section","aliases":["Scroll tracing beam","Timeline beam"]},"one_liner":"스크롤 진행에 따라 세로 빛줄기나 선이 콘텐츠 옆을 따라 내려가는 섹션.","description":"긴 설명, 스토리, 로드맵을 읽는 동안 현재 위치를 시각적으로 따라가게 한다.","visual_anatomy":["vertical beam","scroll progress","content sections","active highlight"],"when_to_use":["긴 랜딩 설명이나 타임라인형 스토리에 진행감을 주고 싶을 때"],"anti_use":["짧은 카드 목록에는 단순 divider나 timeline이 더 명확하다"],"prompt_phrases":["스크롤하면 왼쪽 빔이 따라오는 tracing beam section을 만들어줘"]},{"id":"opacity","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"투명도","aliases":["opacity","불투명도","투명 처리"]},"en":{"name":"Opacity","aliases":["Transparency","Alpha"]},"one_liner":"요소가 얼마나 투명하거나 불투명하게 보이는지를 조절하는 시각 속성.","description":"비활성 상태, 배경 레이어, hover 전후 상태처럼 강도를 낮춰 위계를 만들 때 쓴다.","visual_anatomy":["same element repeated","opacity levels","visible background","emphasis difference"],"when_to_use":["비활성 상태를 약하게 보이게 할 때","배경 위의 보조 정보를 덜 강조할 때"],"anti_use":["중요 텍스트의 대비를 낮춰 가독성을 해치면 안 된다"],"prompt_phrases":["비활성 카드는 opacity를 낮춰서 덜 강조되게 해줘"]},{"id":"backdrop-blur","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"백드롭 블러","aliases":["backdrop blur","배경 흐림","유리 효과"]},"en":{"name":"Backdrop blur","aliases":["Glass blur","Backdrop filter"]},"one_liner":"반투명 표면 뒤쪽의 배경을 흐리게 만들어 레이어감을 주는 처리.","description":"sticky header, modal overlay, floating panel에서 뒤 콘텐츠와 앞 레이어를 분리한다.","visual_anatomy":["blurred background","translucent surface","foreground content","soft border"],"when_to_use":["떠 있는 패널이 뒤 콘텐츠와 겹칠 때","glassmorphism 느낌을 줄 때"],"anti_use":["저사양 환경이나 복잡한 배경에서 성능과 가독성이 떨어질 수 있다"],"prompt_phrases":["상단 고정 헤더에 backdrop blur를 넣어 뒤 내용이 흐리게 보이게 해줘"]},{"id":"shadow-elevation","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"그림자 깊이","aliases":["shadow elevation","elevation","box shadow","그림자 단계"]},"en":{"name":"Shadow elevation","aliases":["Elevation","Box shadow"]},"one_liner":"그림자 강도로 카드나 패널이 화면 위에 떠 있는 정도를 표현하는 처리.","description":"기본 카드, hover 카드, modal처럼 레이어 위계를 시각적으로 구분한다.","visual_anatomy":["surface","shadow","elevation steps","surrounding background"],"when_to_use":["카드 hover나 floating panel의 깊이를 보여줄 때"],"anti_use":["테두리만으로 충분한 밀집 UI에서 그림자를 과하게 쓰면 산만하다"],"prompt_phrases":["hover된 카드에 shadow elevation을 조금 더 줘"]},{"id":"border-radius","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"모서리 반경","aliases":["border radius","radius","둥근 모서리"]},"en":{"name":"Border radius","aliases":["Corner radius","Rounded corners"]},"one_liner":"사각형 요소의 모서리를 얼마나 둥글게 만들지 정하는 시각 속성.","description":"버튼, 카드, 입력창의 형태 언어를 맞추고 브랜드의 부드럽거나 단단한 인상을 조절한다.","visual_anatomy":["rectangular surfaces","corner radius comparison","consistent shape language"],"when_to_use":["디자인 시스템의 버튼과 카드 형태를 통일할 때"],"anti_use":["같은 화면에서 radius 단계가 너무 많으면 일관성이 깨진다"],"prompt_phrases":["카드와 버튼의 border radius를 같은 단계로 맞춰줘"]},{"id":"gradient-fill","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"그라디언트 채움","aliases":["gradient fill","gradient","색상 그라디언트"]},"en":{"name":"Gradient fill","aliases":["Gradient","Linear gradient"]},"one_liner":"단색 대신 두 개 이상의 색이 이어지는 채움 방식.","description":"버튼, 배경, 강조 카드에 방향성과 브랜드감을 주지만 본문 가독성은 유지해야 한다.","visual_anatomy":["color stops","direction","filled surface","foreground contrast"],"when_to_use":["히어로나 CTA처럼 시각 신호가 필요한 표면에 분위기를 줄 때"],"anti_use":["정보를 오래 읽는 영역의 배경으로 쓰면 피로해질 수 있다"],"prompt_phrases":["CTA 버튼에 subtle gradient fill을 적용해줘"]},{"id":"color-contrast","status":"draft","category":"accessibility","group":"accessibility-focus-motion","kind":"visual-treatment","ko":{"name":"색 대비","aliases":["color contrast","contrast","텍스트 대비"]},"en":{"name":"Color contrast","aliases":["Contrast ratio","Text contrast"]},"one_liner":"텍스트와 배경처럼 두 색이 얼마나 구분되어 읽히는지를 나타내는 기준.","description":"버튼 라벨, 입력 안내, 비활성 텍스트가 실제로 읽히는지 판단하는 핵심 접근성 기준이다.","visual_anatomy":["foreground text","background surface","pass example","fail example"],"when_to_use":["색을 바꾸거나 opacity를 낮출 때 가독성을 확인할 때"],"anti_use":["색상 취향만 보고 대비가 낮은 조합을 선택하면 접근성이 떨어진다"],"prompt_phrases":["본문과 버튼 텍스트가 충분한 color contrast를 갖게 조정해줘"]},{"id":"transition","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"전환","aliases":["transition","CSS transition","상태 전환"]},"en":{"name":"Transition","aliases":["CSS transition","State transition"]},"one_liner":"요소의 상태 변화가 즉시 바뀌지 않고 일정 시간에 걸쳐 이어지게 하는 모션.","description":"hover, focus, open 상태 변화가 갑자기 튀지 않도록 색, 위치, 투명도 변화를 부드럽게 연결한다.","visual_anatomy":["start state","changed property","duration","end state"],"when_to_use":["버튼 hover나 패널 열림처럼 짧은 상태 변화를 부드럽게 만들 때"],"anti_use":["사용자 입력 결과가 즉시 보여야 하는 중요한 상태를 느리게 만들지 않는다"],"prompt_phrases":["버튼 hover에 180ms transition을 넣어줘"]},{"id":"duration","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"지속 시간","aliases":["duration","animation duration","transition duration"]},"en":{"name":"Duration","aliases":["Animation duration","Transition duration"]},"one_liner":"전환이나 애니메이션이 시작해서 끝날 때까지 걸리는 시간.","description":"짧은 micro interaction은 빠르게, 페이지 전환이나 큰 패널 이동은 조금 길게 잡아 움직임의 무게를 맞춘다.","visual_anatomy":["same motion","fast duration","slow duration","timing label"],"when_to_use":["모션이 너무 튀거나 느릴 때 시간을 조정할 때"],"anti_use":["모든 모션에 같은 시간을 강제로 쓰면 크기와 목적에 맞지 않을 수 있다"],"prompt_phrases":["drawer 열림 duration을 조금 더 빠르게 줄여줘"]},{"id":"easing","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"이징","aliases":["easing","ease","cubic-bezier","가속 곡선"]},"en":{"name":"Easing","aliases":["Ease curve","Cubic bezier"]},"one_liner":"모션이 일정 속도로 움직일지, 빠르게 출발하거나 천천히 멈출지를 정하는 속도 곡선.","description":"같은 duration이라도 easing에 따라 자연스럽거나 기계적인 느낌이 달라진다.","visual_anatomy":["motion curve","start speed","end speed","moving object"],"when_to_use":["패널","카드","메뉴 움직임을 자연스럽게 조정할 때"],"anti_use":["복잡한 custom curve를 남발하면 제품 전체 모션 언어가 흐트러진다"],"prompt_phrases":["sheet가 열릴 때 ease-out 느낌의 easing을 적용해줘"]},{"id":"fade-transition","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"페이드 전환","aliases":["fade transition","fade in","fade out","opacity transition"]},"en":{"name":"Fade transition","aliases":["Fade in","Fade out","Opacity transition"]},"one_liner":"요소가 투명도 변화를 통해 나타나거나 사라지는 전환.","description":"modal backdrop, toast, tooltip처럼 위치 이동보다 존재감만 부드럽게 바꾸고 싶을 때 쓴다.","visual_anatomy":["transparent start","opacity change","visible end","optional overlay"],"when_to_use":["가벼운 안내나 배경 레이어를 부드럽게 표시할 때"],"anti_use":["공간 변화가 중요한 drawer나 sheet에는 slide transition이 더 명확하다"],"prompt_phrases":["tooltip이 fade transition으로 나타나게 해줘"]},{"id":"slide-transition","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"슬라이드 전환","aliases":["slide transition","slide in","slide out","밀려 나오는 전환"]},"en":{"name":"Slide transition","aliases":["Slide in","Slide out"]},"one_liner":"요소가 화면 가장자리나 기준 위치에서 밀려 들어오거나 나가는 전환.","description":"drawer, sheet, mobile bottom sheet처럼 방향과 출처가 중요한 레이어에 적합하다.","visual_anatomy":["offscreen start","direction","translated surface","settled state"],"when_to_use":["패널이 어느 방향에서 열리는지 보여줘야 할 때"],"anti_use":["작은 badge나 tooltip에는 움직임이 과하게 느껴질 수 있다"],"prompt_phrases":["오른쪽 drawer가 slide transition으로 열리게 해줘"]},{"id":"scale-transition","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"스케일 전환","aliases":["scale transition","zoom transition","크기 전환"]},"en":{"name":"Scale transition","aliases":["Zoom transition","Scale animation"]},"one_liner":"요소가 커지거나 작아지며 등장, 선택, 강조 상태를 표현하는 전환.","description":"버튼 press, selected card, popover 등장처럼 중심에서 변화하는 느낌을 줄 때 쓴다.","visual_anatomy":["initial scale","transform origin","scaled surface","final size"],"when_to_use":["작은 인터랙션에 즉각적인 반응감을 줄 때"],"anti_use":["텍스트 레이아웃이 흔들릴 정도로 크게 확대하면 안정성이 떨어진다"],"prompt_phrases":["선택된 카드가 살짝 scale transition으로 커지게 해줘"]},{"id":"reduced-motion","status":"draft","category":"accessibility","group":"accessibility-focus-motion","kind":"motion-pattern","ko":{"name":"모션 줄이기","aliases":["reduced motion","prefers-reduced-motion","움직임 최소화"]},"en":{"name":"Reduced motion","aliases":["Prefers reduced motion","Motion reduction"]},"one_liner":"움직임에 민감한 사용자를 위해 애니메이션을 줄이거나 제거하는 접근성 대응.","description":"운영체제의 reduced motion 설정을 존중해 큰 이동, 반복 애니메이션, 깜빡임을 최소화한다.","visual_anatomy":["motion setting","normal animation","reduced alternative","accessible state"],"when_to_use":["반복 모션이나 큰 화면 이동을 구현할 때 항상 함께 고려한다"],"anti_use":["모션을 줄인다고 상태 변화 자체를 숨기면 안 된다"],"prompt_phrases":["prefers-reduced-motion 사용자는 애니메이션을 거의 끄도록 처리해줘"]},{"id":"hover-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"호버 상태","aliases":["hover state","마우스 오버","hover"]},"en":{"name":"Hover state","aliases":["Mouse hover","Hover effect"]},"one_liner":"포인터가 요소 위에 올라갔을 때 보여주는 반응 상태.","description":"버튼, 카드, 메뉴 항목이 클릭 가능하거나 현재 포인터 대상임을 색, 그림자, 이동으로 보여준다.","visual_anatomy":["default surface","pointer target","hover styling","transition"],"when_to_use":["데스크톱에서 클릭 가능한 요소임을 더 명확히 할 때"],"anti_use":["터치 기기에서는 hover에만 핵심 정보를 숨기면 안 된다"],"prompt_phrases":["카드에 hover state를 추가해서 클릭 가능해 보이게 해줘"]},{"id":"focus-ring","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"포커스 링","aliases":["focus ring","focus outline","키보드 포커스"]},"en":{"name":"Focus ring","aliases":["Focus outline","Keyboard focus indicator"]},"one_liner":"키보드나 보조기술로 현재 선택된 요소를 보여주는 윤곽선.","description":"탭 이동 중 현재 조작 대상이 어디인지 알려주는 접근성 핵심 시각 신호다.","visual_anatomy":["interactive element","visible outline","offset or ring","focus state"],"when_to_use":["버튼","입력창","링크 등 모든 키보드 조작 요소에 필요하다"],"anti_use":["outline을 없애고 대체 표시를 제공하지 않으면 접근성이 크게 떨어진다"],"prompt_phrases":["모든 버튼에 명확한 focus ring을 넣어줘"]},{"id":"active-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"활성 상태","aliases":["active state","현재 상태","활성 탭"]},"en":{"name":"Active state","aliases":["Current state","Active item"]},"one_liner":"현재 선택되어 적용 중인 탭, 메뉴, 항목을 나타내는 상태.","description":"사용자가 현재 위치나 선택된 범위를 잃지 않도록 배경, 텍스트 색, indicator로 표시한다.","visual_anatomy":["item list","active item","indicator","inactive siblings"],"when_to_use":["탭","nav","segmented control에서 현재 선택을 보여줄 때"],"anti_use":["hover나 focus와 같은 임시 상태와 시각 표현이 너무 비슷하면 혼란스럽다"],"prompt_phrases":["현재 선택된 탭에 active state를 분명히 표시해줘"]},{"id":"disabled-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"비활성 상태","aliases":["disabled state","disabled","사용할 수 없음"]},"en":{"name":"Disabled state","aliases":["Unavailable state","Disabled control"]},"one_liner":"현재 조건에서는 조작할 수 없는 컨트롤임을 보여주는 상태.","description":"권한, 입력 누락, 로딩 중 같은 이유로 버튼이나 필드가 동작하지 않음을 명확히 한다.","visual_anatomy":["disabled control","reduced emphasis","cursor or aria disabled","explanatory context"],"when_to_use":["조건이 충족되기 전까지 행동을 막아야 할 때"],"anti_use":["왜 비활성인지 설명 없이 막으면 사용자가 다음 행동을 알기 어렵다"],"prompt_phrases":["필수 입력 전에는 제출 버튼을 disabled state로 보여줘"]},{"id":"selected-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"선택 상태","aliases":["selected state","selected","선택됨"]},"en":{"name":"Selected state","aliases":["Selected item","Selection state"]},"one_liner":"여러 항목 중 사용자가 선택한 항목임을 나타내는 상태.","description":"checkbox, list item, chip, 카드 선택에서 현재 선택값을 표시하고 다음 행동의 맥락을 만든다.","visual_anatomy":["item group","selected item","check mark or highlight","unselected items"],"when_to_use":["목록이나 카드 중 하나 이상을 선택할 때"],"anti_use":["active navigation state와 selected data state를 같은 의미로 섞지 않는다"],"prompt_phrases":["선택된 카드에는 selected state와 체크 표시를 보여줘"]},{"id":"drag-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"드래그 상태","aliases":["drag state","dragging","끌기 상태"]},"en":{"name":"Drag state","aliases":["Dragging state","Drag feedback"]},"one_liner":"사용자가 항목을 끌고 있는 동안 원본과 이동 대상을 보여주는 상태.","description":"리스트 재정렬, 칸반 이동, 파일 업로드에서 어떤 항목이 움직이는지 그림자와 투명도로 알려준다.","visual_anatomy":["grabbed item","lifted surface","placeholder","pointer movement"],"when_to_use":["항목을 위치 이동하거나 업로드 영역으로 끌 수 있을 때"],"anti_use":["키보드 대체 조작이 없으면 접근성이 부족해질 수 있다"],"prompt_phrases":["리스트 항목을 끌 때 drag state를 그림자와 placeholder로 보여줘"]},{"id":"drop-target","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"드롭 대상","aliases":["drop target","드롭존","놓을 위치"]},"en":{"name":"Drop target","aliases":["Drop zone","Drop area"]},"one_liner":"드래그 중인 항목을 놓을 수 있는 영역을 강조해 보여주는 대상.","description":"파일 업로드나 칸반 보드에서 항목을 어디에 놓을 수 있는지 border, 배경, 안내 문구로 표시한다.","visual_anatomy":["target area","dashed border","active highlight","drag item"],"when_to_use":["사용자가 끌고 있는 항목을 특정 영역에 놓아야 할 때"],"anti_use":["단순 클릭 업로드만 있으면 file-upload나 upload-dropzone이 더 직접적이다"],"prompt_phrases":["파일을 끌어오면 drop target 영역을 강조해줘"]},{"id":"z-index","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"Z-인덱스","aliases":["z-index","쌓임 순서","레이어 순서"]},"en":{"name":"Z-index","aliases":["Stacking order","Layer order"]},"one_liner":"겹친 요소 중 어떤 것이 앞에 보일지 정하는 CSS 레이어 순서 값.","description":"modal, popover, sticky header가 서로 가려지지 않도록 레이어 우선순위를 관리한다.","visual_anatomy":["overlapping layers","front layer","back layer","z order labels"],"when_to_use":["팝오버나 고정 헤더가 다른 요소 뒤에 숨길 때"],"anti_use":["값을 무작정 크게 올리면 전체 레이어 체계가 깨진다"],"prompt_phrases":["modal이 header 뒤에 숨지 않게 z-index 체계를 정리해줘"]},{"id":"stacking-context","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"스태킹 컨텍스트","aliases":["stacking context","쌓임 맥락","레이어 컨텍스트"]},"en":{"name":"Stacking context","aliases":["Stacking context","Layering context"]},"one_liner":"z-index가 비교되는 독립적인 레이어 그룹.","description":"transform, opacity, positioned element 같은 조건 때문에 z-index가 예상대로 작동하지 않을 때 원인이 된다.","visual_anatomy":["parent layer group","child layers","isolated stacking","outside layer"],"when_to_use":["z-index를 올렸는데도 요소가 앞으로 나오지 않는 문제를 설명할 때"],"anti_use":["단순 겹침 문제를 모두 z-index 숫자 문제로만 보면 원인을 놓칠 수 있다"],"prompt_phrases":["tooltip이 카드 안에 갇히는 stacking context 문제를 해결해줘"]},{"id":"overflow","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"오버플로","aliases":["overflow","넘침 처리","스크롤 넘침"]},"en":{"name":"Overflow","aliases":["Content overflow","Overflow clipping"]},"one_liner":"콘텐츠가 컨테이너보다 클 때 보일지, 잘릴지, 스크롤될지 정하는 처리.","description":"긴 텍스트, 표, 카드 목록이 지정된 영역을 넘을 때 레이아웃이 무너지지 않게 한다.","visual_anatomy":["container boundary","overflowing content","clipping or scroll","scrollbar optional"],"when_to_use":["콘텐츠 길이가 가변적인 카드나 패널을 만들 때"],"anti_use":["중요한 내용이 잘리는지 모른 채 overflow hidden을 쓰면 정보가 사라진다"],"prompt_phrases":["긴 목록은 컨테이너 안에서 overflow scroll로 처리해줘"]},{"id":"clipping-mask","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"클리핑 마스크","aliases":["clipping mask","clip path","마스크 처리"]},"en":{"name":"Clipping mask","aliases":["Clip path","Masking"]},"one_liner":"요소의 보이는 영역을 특정 모양이나 경계 안으로 제한하는 처리.","description":"이미지 썸네일, 아바타, decorative shape처럼 콘텐츠를 원하는 형태로 잘라 보여준다.","visual_anatomy":["source shape","mask boundary","clipped content","hidden outside"],"when_to_use":["이미지나 배경을 원형","카드형","비정형 형태로 잘라야 할 때"],"anti_use":["텍스트나 필수 UI를 잘라 조작 가능 영역을 모호하게 만들면 안 된다"],"prompt_phrases":["프로필 이미지를 원형 clipping mask로 잘라줘"]},{"id":"breakpoint","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"브레이크포인트","aliases":["breakpoint","반응형 분기점","responsive breakpoint"]},"en":{"name":"Breakpoint","aliases":["Responsive breakpoint","Media query breakpoint"]},"one_liner":"화면 너비 같은 조건에 따라 레이아웃이나 스타일이 바뀌는 기준점.","description":"모바일, 태블릿, 데스크톱에서 같은 콘텐츠가 다른 열 수나 배치로 보이도록 분기한다.","visual_anatomy":["small viewport","large viewport","layout change","threshold marker"],"when_to_use":["화면 크기에 따라 navigation이나 grid 구조를 바꿀 때"],"anti_use":["기기 이름만 기준으로 잡고 실제 콘텐츠 폭을 확인하지 않으면 깨질 수 있다"],"prompt_phrases":["768px breakpoint부터 카드 그리드를 2열로 바꿔줘"]},{"id":"responsive-layout","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"반응형 레이아웃","aliases":["responsive layout","반응형 UI","responsive design"]},"en":{"name":"Responsive layout","aliases":["Responsive design","Adaptive layout"]},"one_liner":"화면 크기와 입력 환경에 맞춰 배치, 크기, 탐색 구조가 조정되는 레이아웃.","description":"같은 기능이 모바일에서는 단일 열, 데스크톱에서는 다중 열과 사이드바로 보이게 한다.","visual_anatomy":["mobile layout","desktop layout","reflowed content","navigation adaptation"],"when_to_use":["웹앱을 모바일과 데스크톱에서 모두 자연스럽게 써야 할 때"],"anti_use":["단순 축소만 하고 터치 크기나 읽기 폭을 조정하지 않으면 반응형이 아니다"],"prompt_phrases":["이 대시보드를 mobile-first responsive layout으로 정리해줘"]},{"id":"sticky-position","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"스티키 위치","aliases":["sticky position","position sticky","고정되는 요소"]},"en":{"name":"Sticky position","aliases":["Position sticky","Sticky element"]},"one_liner":"스크롤하다가 기준 위치에 닿으면 화면에 붙어 따라오는 배치 방식.","description":"table header, section nav, top bar처럼 긴 콘텐츠를 탐색할 때 맥락을 유지하게 한다.","visual_anatomy":["scroll container","sticky element","threshold","stuck state"],"when_to_use":["긴 목록이나 문서에서 현재 헤더나 액션을 계속 보여줘야 할 때"],"anti_use":["sticky 요소가 너무 많으면 화면 공간을 잠식하고 겹침 문제가 생긴다"],"prompt_phrases":["테이블 헤더를 sticky position으로 고정해줘"]},{"id":"glassmorphism","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"글래스모피즘","aliases":["glassmorphism","유리 느낌","유리 패널","프로스트 글래스"]},"en":{"name":"Glassmorphism","aliases":["Glass morphism","Frosted glass style","Glass surface"]},"one_liner":"반투명 표면, 배경 흐림, 얇은 테두리, 그림자를 함께 써서 유리처럼 보이게 하는 스타일 패키지.","description":"카드, 헤더, floating panel을 배경 위에 올릴 때 뒤쪽 색과 형태가 살짝 비치도록 만들어 깊이와 분위기를 준다.","visual_anatomy":["translucent surface","backdrop blur","soft border","subtle shadow","visible background"],"when_to_use":["히어로나 floating panel에 가벼운 유리 질감을 주고 싶을 때","배경과 앞 레이어를 부드럽게 연결할 때"],"anti_use":["본문을 오래 읽는 영역에서 대비가 낮아지면 쓰지 않는다","복잡한 배경 위에서 텍스트가 흐려지면 단순 surface가 낫다"],"prompt_phrases":["히어로 위 카드에 glassmorphism 스타일을 적용해줘"],"related":[{"id":"backdrop-blur","relation":"use-with","note":"backdrop-blur는 글래스모피즘을 만드는 핵심 처리지만 그 자체가 전체 스타일 패키지는 아니다"},{"id":"opacity","relation":"use-with","note":"반투명 표면의 강도를 조절할 때 함께 본다"},{"id":"shadow-elevation","relation":"use-with","note":"유리 표면이 배경 위에 떠 보이도록 깊이를 보완한다"},{"id":"color-contrast","relation":"use-with","note":"반투명 표면 위 텍스트가 충분히 읽히는지 확인해야 한다"}]},{"id":"translucent-surface","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"반투명 표면","aliases":["translucent surface","투명한 표면","반투명 패널"]},"en":{"name":"Translucent surface","aliases":["Semi-transparent surface","Translucent panel","Alpha surface"]},"one_liner":"배경이 일부 비쳐 보이도록 색상이나 투명도를 낮춘 UI 표면.","description":"카드나 패널을 완전히 불투명하게 막지 않고 뒤 배경과 연결된 느낌을 줄 때 쓰는 표면 처리다.","visual_anatomy":["foreground surface","alpha fill","visible background","foreground content"],"when_to_use":["배경 이미지나 그라디언드 위에 가벼운 패널을 올릴 때","레이어감을 주되 무겁게 막고 싶지 않을 때"],"anti_use":["텍스트 대비가 부족하거나 배경이 너무 복잡하면 불투명 표면을 쓴다"],"prompt_phrases":["카드를 반투명 surface로 만들어 배경이 살짝 비치게 해줘"],"related":[{"id":"opacity","relation":"use-with","note":"투명도는 반투명 표면을 만드는 기본 속성이다"},{"id":"glassmorphism","relation":"compare","note":"글래스모피즘은 반투명 표면에 blur, border, shadow를 더한 스타일 패키지다"},{"id":"color-contrast","relation":"use-with","note":"반투명 표면은 배경에 따라 대비가 달라지므로 함께 확인한다"}]},{"id":"hairline-border","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"헤어라인 보더","aliases":["hairline border","얇은 테두리","1px border","미세 테두리"]},"en":{"name":"Hairline border","aliases":["Thin border","One pixel border","Fine border"]},"one_liner":"표면의 경계를 아주 얇은 선으로만 구분하는 미세한 테두리 처리.","description":"카드, 패널, 입력창을 그림자 없이 조용하게 구분하거나 glassmorphism 표면의 가장자리를 잡을 때 쓴다.","visual_anatomy":["thin border","adjacent surface","subtle contrast","rounded corner optional"],"when_to_use":["밀도 높은 UI에서 그림자 대신 경계를 살짝 보여줄 때","반투명 표면의 가장자리를 정리할 때"],"anti_use":["배경과 선 색이 너무 비슷해 경계가 보이지 않으면 대비를 높인다"],"prompt_phrases":["카드에 그림자 대신 얇은 hairline border를 넣어줘"],"related":[{"id":"shadow-elevation","relation":"alternative","note":"그림자 대신 조용한 경계만 필요하면 hairline border가 낫다"},{"id":"color-contrast","relation":"use-with","note":"얇은 선은 대비가 낮으면 보이지 않는다"}]},{"id":"inner-shadow","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"내부 그림자","aliases":["inner shadow","inset shadow","안쪽 그림자"]},"en":{"name":"Inner shadow","aliases":["Inset shadow","Recessed shadow"]},"one_liner":"요소 안쪽 가장자리에 그림자를 넣어 파인 듯한 깊이나 눌린 표면을 만드는 처리.","description":"입력창, 눌린 버튼, inset panel처럼 바깥으로 뜨기보다 안쪽으로 들어간 표면감을 보여줄 때 쓴다.","visual_anatomy":["inset surface","inner edge shadow","content area","depressed depth"],"when_to_use":["입력 영역이나 pressed surface가 안으로 들어간 느낌을 줘야 할 때"],"anti_use":["작은 텍스트 주변에 과하게 넣으면 흐릿하고 낡아 보일 수 있다"],"prompt_phrases":["검색 입력창 안쪽에 은은한 inner shadow를 넣어줘"],"related":[{"id":"shadow-elevation","relation":"compare","note":"shadow elevation은 표면이 밖으로 뜨는 느낌이고 inner shadow는 안쪽으로 파인 느낌이다"},{"id":"active-state","relation":"use-with","note":"눌린 상태를 표현할 때 함께 쓸 수 있다"}]},{"id":"noise-texture","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"노이즈 텍스처","aliases":["noise texture","grain texture","입자 질감","그레인"]},"en":{"name":"Noise texture","aliases":["Grain texture","Noise overlay","Grain overlay"]},"one_liner":"평평한 색이나 그라디언트 위에 아주 미세한 입자감을 더하는 표면 질감.","description":"넓은 배경이나 반투명 표면이 너무 밋밋하거나 banding이 보일 때 약한 질감을 더해 깊이를 만든다.","visual_anatomy":["base surface","fine grain","low opacity texture","foreground content"],"when_to_use":["히어로 배경이나 glass surface에 미세한 질감을 더하고 싶을 때"],"anti_use":["업무용 데이터 화면에서 정보보다 질감이 먼저 보이면 빼는 편이 낫다"],"prompt_phrases":["그라디언트 배경 위에 아주 약한 noise texture를 깔아줘"],"related":[{"id":"gradient-fill","relation":"use-with","note":"넓은 그라디언트의 banding을 줄이거나 질감을 줄 때 함께 쓴다"},{"id":"glassmorphism","relation":"use-with","note":"유리 표면에 미세한 질감을 더해 밋밋함을 줄일 수 있다"}]},{"id":"highlight-stroke","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"하이라이트 스트로크","aliases":["highlight stroke","edge highlight","빛 테두리","상단 하이라이트"]},"en":{"name":"Highlight stroke","aliases":["Edge highlight","Light stroke","Top highlight"]},"one_liner":"표면 가장자리에 밝은 선을 더해 빛을 받은 듯한 입체감을 주는 처리.","description":"어두운 카드나 glass surface의 상단/외곽에 얇은 밝은 선을 넣어 표면 방향과 깊이를 강조한다.","visual_anatomy":["surface edge","bright stroke","darker body","directional light"],"when_to_use":["어두운 표면이나 유리 표면이 배경과 섞여 경계가 약할 때"],"anti_use":["모든 카드에 강하게 넣으면 과장된 glossy UI처럼 보일 수 있다"],"prompt_phrases":["어두운 카드 위쪽에 은은한 highlight stroke를 넣어줘"],"related":[{"id":"hairline-border","relation":"compare","note":"hairline border는 경계 전체를 균일하게 잡고 highlight stroke는 빛 방향을 표현한다"},{"id":"glassmorphism","relation":"use-with","note":"유리 표면의 가장자리와 빛 반사를 강조할 때 함께 쓴다"}]},{"id":"font-weight","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"글자 굵기","aliases":["font weight","폰트 굵기","weight","볼드 단계"]},"en":{"name":"Font weight","aliases":["Weight","Boldness","Type weight"]},"one_liner":"텍스트가 얼마나 얇거나 굵게 보이는지 정하는 타이포그래피 속성.","description":"제목, 라벨, 강조 문구의 위계를 만들 때 크기만 키우지 않고 굵기로 중요도를 조절한다.","visual_anatomy":["same text","light weight","regular weight","bold weight"],"when_to_use":["제목과 본문 위계를 분명히 할 때","버튼이나 라벨을 더 강하게 보이게 할 때"],"anti_use":["모든 텍스트를 굵게 만들면 위계가 사라지고 읽기 피로가 커진다"],"prompt_phrases":["섹션 제목은 font-weight를 높여서 본문과 구분해줘"]},{"id":"line-height","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"줄 높이","aliases":["line height","행간","줄 간격"]},"en":{"name":"Line height","aliases":["Leading","Text leading"]},"one_liner":"여러 줄 텍스트에서 줄과 줄 사이의 세로 간격을 정하는 속성.","description":"본문, 카드 설명, 긴 안내 문구가 답답하거나 흩어져 보이지 않도록 읽기 리듬을 조절한다.","visual_anatomy":["multi-line text","compact leading","comfortable leading","line box"],"when_to_use":["본문이나 설명 문구가 두 줄 이상일 때","모바일에서 읽기 폭이 좁을 때"],"anti_use":["단일 라벨이나 버튼 안에서는 line-height가 높으면 정렬이 어색해질 수 있다"],"prompt_phrases":["카드 설명의 line-height를 조금 넉넉하게 잡아줘"]},{"id":"letter-spacing","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"자간","aliases":["letter spacing","글자 간격","tracking"]},"en":{"name":"Letter spacing","aliases":["Tracking","Character spacing"]},"one_liner":"글자 사이의 가로 간격을 넓히거나 좁히는 타이포그래피 속성.","description":"작은 대문자 라벨, 숫자, 섹션 eyebrow처럼 짧은 텍스트의 밀도와 분위기를 조절한다.","visual_anatomy":["same word","tight spacing","normal spacing","loose spacing"],"when_to_use":["짧은 라벨이나 코드성 텍스트를 더 또렷하게 만들 때"],"anti_use":["한글 본문 전체에 과한 자간을 주면 읽기 흐름이 깨진다"],"prompt_phrases":["작은 섹션 라벨에 살짝 넓은 letter spacing을 줘"]},{"id":"text-overflow","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"텍스트 넘침 처리","aliases":["text overflow","말줄임","ellipsis"]},"en":{"name":"Text overflow","aliases":["Ellipsis","Overflow text"]},"one_liner":"긴 텍스트가 한 줄 영역을 넘을 때 자르거나 말줄임표로 표시하는 처리.","description":"테이블 셀, 카드 제목, 사이드바 항목처럼 폭이 제한된 곳에서 레이아웃을 깨지 않게 한다.","visual_anatomy":["fixed width text box","overflowing title","ellipsis","clipped text"],"when_to_use":["행 높이나 카드 폭을 유지하면서 긴 제목을 보여줘야 할 때"],"anti_use":["중요 정보를 말줄임으로 숨기면 tooltip이나 상세 보기 같은 보완이 필요하다"],"prompt_phrases":["긴 카드 제목은 text-overflow ellipsis로 한 줄 처리해줘"]},{"id":"line-clamp","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"줄 수 제한","aliases":["line clamp","multi-line ellipsis","여러 줄 말줄임"]},"en":{"name":"Line clamp","aliases":["Multi-line truncation","Multi-line ellipsis"]},"one_liner":"여러 줄 텍스트를 정해진 줄 수까지만 보이고 나머지를 말줄임 처리하는 패턴.","description":"카드 설명이나 목록 요약의 높이를 맞추면서 긴 문장이 레이아웃을 밀지 않게 한다.","visual_anatomy":["text block","visible line count","fade or ellipsis","fixed card height"],"when_to_use":["카드 그리드에서 설명 길이가 제각각일 때","요약 목록의 높이를 일정하게 유지할 때"],"anti_use":["법적 고지나 오류 원인처럼 전문을 읽어야 하는 내용에는 쓰지 않는다"],"prompt_phrases":["상품 설명은 2줄 line-clamp로 카드 높이를 맞춰줘"]},{"id":"gap","status":"draft","category":"layout-rendering","group":"layout-spacing-sizing","kind":"visual-treatment","ko":{"name":"갭","aliases":["gap","간격","grid gap","flex gap"]},"en":{"name":"Gap","aliases":["Grid gap","Flex gap","Item gap"]},"one_liner":"flex나 grid 안에서 인접한 항목 사이의 간격을 정하는 레이아웃 속성.","description":"카드, 버튼 그룹, 폼 필드 사이의 리듬을 일관되게 만들고 margin 조합을 줄인다.","visual_anatomy":["sibling items","equal spacing","layout container","gap label"],"when_to_use":["같은 컨테이너 안의 반복 항목 사이 간격을 통일할 때"],"anti_use":["컨테이너 바깥 여백까지 gap으로 해결하려고 하면 구조가 모호해진다"],"prompt_phrases":["카드 그리드 항목 사이에 consistent gap을 줘"]},{"id":"padding","status":"draft","category":"layout-rendering","group":"layout-spacing-sizing","kind":"visual-treatment","ko":{"name":"패딩","aliases":["padding","안쪽 여백","내부 여백"]},"en":{"name":"Padding","aliases":["Inner spacing","Inset spacing"]},"one_liner":"표면의 테두리와 내부 콘텐츠 사이에 두는 안쪽 여백.","description":"버튼, 카드, 입력창이 답답하지 않도록 콘텐츠 주변에 숨 쉴 공간을 만든다.","visual_anatomy":["surface boundary","inner content","padded area","spacing measurement"],"when_to_use":["카드나 버튼 안의 텍스트가 테두리에 붙어 보일 때"],"anti_use":["항목 사이 간격은 padding보다 gap이나 margin이 더 명확할 수 있다"],"prompt_phrases":["카드 안쪽 padding을 조금 늘려서 답답하지 않게 해줘"]},{"id":"aspect-ratio","status":"draft","category":"layout-rendering","group":"layout-spacing-sizing","kind":"visual-treatment","ko":{"name":"종횡비","aliases":["aspect ratio","비율 고정","화면 비율"]},"en":{"name":"Aspect ratio","aliases":["Fixed ratio","Width height ratio"]},"one_liner":"이미지나 카드 같은 영역의 가로와 세로 비율을 일정하게 유지하는 제약.","description":"썸네일, 영상, 미리보기 카드가 로딩 상태나 화면 크기 변화에도 같은 형태를 유지하게 한다.","visual_anatomy":["fixed ratio frame","image placeholder","width height label","responsive size"],"when_to_use":["이미지 카드나 비디오 영역의 높이가 흔들리지 않아야 할 때"],"anti_use":["콘텐츠 자체의 비율이 다양해야 의미가 있는 갤러리에서는 과하게 통일하지 않는다"],"prompt_phrases":["썸네일은 16:9 aspect-ratio로 고정해줘"]},{"id":"container-query","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"컨테이너 쿼리","aliases":["container query","컨테이너 기준 반응형","component query"]},"en":{"name":"Container query","aliases":["Component query","Container-based responsive style"]},"one_liner":"화면 전체가 아니라 부모 컨테이너 크기에 따라 컴포넌트 스타일을 바꾸는 반응형 조건.","description":"같은 카드가 사이드바, 그리드, 상세 패널 안에서 서로 다른 폭에 맞춰 재배치되게 한다.","visual_anatomy":["same component","narrow container","wide container","internal layout change"],"when_to_use":["컴포넌트가 놓이는 영역 폭에 따라 내부 배치를 바꿔야 할 때"],"anti_use":["페이지 전체 breakpoint 하나로 충분하면 container query가 과할 수 있다"],"prompt_phrases":["카드 컴포넌트는 container query로 좁은 영역에서 세로 배치되게 해줘"],"related":[{"id":"breakpoint","relation":"compare","note":"breakpoint는 viewport 기준이고 container query는 컴포넌트가 들어간 영역 기준이다"}]},{"id":"layout-shift","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"레이아웃 이동","aliases":["layout shift","누적 레이아웃 이동","CLS"]},"en":{"name":"Layout shift","aliases":["Cumulative layout shift","CLS"]},"one_liner":"이미지, 광고, 동적 콘텐츠가 늦게 들어오면서 기존 화면 요소가 갑자기 밀리는 현상.","description":"예약된 크기, aspect-ratio, skeleton을 사용해 사용자가 읽거나 누르던 위치가 튀지 않게 막는다.","visual_anatomy":["before position","late content","shifted element","reserved space"],"when_to_use":["이미지나 비동기 데이터 때문에 카드 높이가 나중에 바뀔 때"],"anti_use":["의도적인 expand/collapse 전환과 성능 문제인 layout shift를 섞어 부르지 않는다"],"prompt_phrases":["이미지 로딩 때문에 layout shift가 생기지 않게 영역을 미리 잡아줘"],"related":[{"id":"aspect-ratio","relation":"use-with","note":"media 영역의 비율을 미리 잡아 layout shift를 줄인다"}]},{"id":"aria-expanded","status":"draft","category":"accessibility","group":"accessibility-aria-screen-reader","kind":"component","ko":{"name":"확장 상태 ARIA","aliases":["aria-expanded","펼침 상태","접힘 상태"]},"en":{"name":"ARIA expanded state","aliases":["aria-expanded","Expanded state","Collapsed state"]},"one_liner":"아코디언, disclosure, 메뉴처럼 열리고 닫히는 UI의 현재 펼침 상태를 보조기술에 알리는 속성.","description":"시각적으로 열린 상태뿐 아니라 screen reader에도 해당 컨트롤이 확장되었는지 전달한다.","visual_anatomy":["toggle control","expanded panel","expanded label","collapsed alternative"],"when_to_use":["버튼이 숨겨진 패널이나 메뉴를 열고 닫을 때"],"anti_use":["실제로 펼칠 대상이 없는 단순 링크나 버튼에는 붙이지 않는다"],"prompt_phrases":["accordion trigger에 aria-expanded 상태가 맞게 반영되게 해줘"]},{"id":"aria-invalid","status":"draft","category":"accessibility","group":"accessibility-aria-screen-reader","kind":"component","ko":{"name":"오류 입력 ARIA","aliases":["aria-invalid","invalid state","입력 오류 상태"]},"en":{"name":"ARIA invalid state","aliases":["aria-invalid","Invalid input state","Error state attribute"]},"one_liner":"입력값이 유효하지 않음을 보조기술과 UI 상태에 함께 전달하는 속성.","description":"validation message와 함께 사용해 사용자가 어떤 필드에 오류가 있는지 키보드와 screen reader로도 알 수 있게 한다.","visual_anatomy":["input field","error border","error message","invalid attribute"],"when_to_use":["폼 검증 실패 후 특정 입력 필드가 잘못되었음을 표시할 때"],"anti_use":["검증 전부터 모든 필드를 invalid로 표시하면 사용자가 불필요하게 압박을 받는다"],"prompt_phrases":["이메일 오류가 나면 aria-invalid와 validation message를 같이 보여줘"],"related":[{"id":"validation-message","relation":"use-with","note":"오류 상태는 보통 입력창 근처의 검증 메시지와 함께 설명한다"}]},{"id":"aria-live","status":"draft","category":"accessibility","group":"accessibility-aria-screen-reader","kind":"component","ko":{"name":"라이브 영역 ARIA","aliases":["aria-live","live region","실시간 알림 영역"]},"en":{"name":"ARIA live region","aliases":["aria-live","Live region","Announced update"]},"one_liner":"화면 일부가 동적으로 바뀔 때 그 변경 내용을 보조기술에 알리는 영역.","description":"toast, 저장 완료, 검색 결과 수 변경처럼 포커스를 옮기지 않고 알려야 하는 상태 변화에 쓴다.","visual_anatomy":["status message","dynamic update","announcement area","polite or assertive mode"],"when_to_use":["비동기 작업 결과나 상태 메시지를 screen reader 사용자에게 알려야 할 때"],"anti_use":["자주 바뀌는 값 전체를 계속 announce하면 방해가 된다"],"prompt_phrases":["저장 완료 메시지는 aria-live 영역으로도 announce되게 해줘"],"related":[{"id":"toast","relation":"use-with","note":"toast가 시각 알림이면 live region은 보조기술 알림 역할을 한다"}]},{"id":"sr-only","status":"draft","category":"accessibility","group":"accessibility-aria-screen-reader","kind":"component","ko":{"name":"스크린리더 전용 텍스트","aliases":["sr-only","visually hidden","보이지 않는 접근성 텍스트"]},"en":{"name":"Screen-reader-only text","aliases":["sr-only","Visually hidden text","Assistive text"]},"one_liner":"화면에는 보이지 않지만 screen reader에는 읽히도록 남기는 보조 텍스트.","description":"아이콘 버튼, 상태 점, 축약 라벨처럼 시각 정보만으로는 의미가 부족한 UI에 숨은 설명을 더한다.","visual_anatomy":["visible icon","hidden text label","accessibility name","assistive output"],"when_to_use":["아이콘만 있는 버튼이나 시각적 상태에 이름을 붙여야 할 때"],"anti_use":["화면에 필요한 설명을 sr-only로 숨겨 시각 사용자에게 정보를 빼앗으면 안 된다"],"prompt_phrases":["아이콘 버튼에는 sr-only label을 넣어 접근성 이름을 제공해줘"]},{"id":"focus-trap","status":"draft","category":"accessibility","group":"accessibility-focus-motion","kind":"component","ko":{"name":"포커스 트랩","aliases":["focus trap","포커스 가두기","modal focus loop"]},"en":{"name":"Focus trap","aliases":["Modal focus trap","Focus loop"]},"one_liner":"모달이나 dialog가 열렸을 때 키보드 포커스가 그 안에서만 순환하도록 하는 접근성 패턴.","description":"배경 화면으로 포커스가 빠져 사용자가 현재 작업 맥락을 잃지 않도록 막고, 닫힌 뒤 원래 위치로 돌려야 한다.","visual_anatomy":["modal surface","focusable controls","loop arrow","blocked background"],"when_to_use":["modal dialog처럼 배경 조작을 막는 레이어를 열 때"],"anti_use":["non-modal popover처럼 배경 조작이 가능한 UI에는 포커스를 강제로 가두지 않는다"],"prompt_phrases":["모달이 열리면 focus trap을 적용하고 닫을 때 이전 버튼으로 포커스를 돌려줘"],"related":[{"id":"dialog","relation":"use-with","note":"모달은 키보드 포커스가 내부에서 순환해야 한다"}]},{"id":"mobile-first","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"모바일 우선","aliases":["mobile first","모바일 퍼스트","작은 화면 우선"]},"en":{"name":"Mobile-first","aliases":["Mobile first design","Small-screen-first"]},"one_liner":"작은 화면을 기본으로 설계한 뒤 넓은 화면에서 레이아웃을 확장하는 반응형 접근.","description":"핵심 정보와 조작을 먼저 압축해 정리하고, desktop에서는 사이드바나 다중 열을 추가한다.","visual_anatomy":["mobile single column","desktop enhancement","shared content","breakpoint growth"],"when_to_use":["모바일 사용 비중이 높거나 작은 화면에서도 모든 핵심 흐름이 작동해야 할 때"],"anti_use":["복잡한 전문 업무 화면에서 desktop density가 핵심이면 별도 desktop 설계가 필요할 수 있다"],"prompt_phrases":["이 화면은 mobile-first로 만들고 desktop에서는 2열로 확장해줘"],"related":[{"id":"responsive-layout","relation":"use-with","note":"mobile-first는 responsive layout을 설계하는 한 접근 방식이다"}]},{"id":"fluid-layout","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"유동 레이아웃","aliases":["fluid layout","fluid UI","유연한 레이아웃"]},"en":{"name":"Fluid layout","aliases":["Fluid UI","Flexible layout"]},"one_liner":"고정 폭 대신 사용 가능한 공간에 맞춰 크기와 간격이 자연스럽게 변하는 레이아웃.","description":"breakpoint 사이에서도 카드 폭, 컨테이너, 타이포 크기가 뚝뚝 끊기지 않고 부드럽게 적응하게 한다.","visual_anatomy":["narrow width","medium width","wide width","continuous resizing"],"when_to_use":["다양한 화면 폭에서 같은 콘텐츠가 자연스럽게 늘고 줄어야 할 때"],"anti_use":["최소/최대 폭 제한 없이 무한히 늘리면 읽기 폭이 망가진다"],"prompt_phrases":["카드 그리드는 fluid layout으로 폭에 맞게 자연스럽게 바뀌게 해줘"]},{"id":"dynamic-viewport-unit","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"동적 뷰포트 단위","aliases":["dynamic viewport unit","dvh","svh","lvh"]},"en":{"name":"Dynamic viewport unit","aliases":["dvh","svh","lvh","Dynamic viewport height"]},"one_liner":"모바일 브라우저 주소창처럼 변하는 viewport 높이를 반영하는 CSS 단위.","description":"full-height 화면, bottom sheet, 모바일 앱 셸이 주소창 표시 변화 때문에 잘리거나 튀지 않도록 한다.","visual_anatomy":["mobile viewport","browser chrome","stable height","dynamic height"],"when_to_use":["모바일에서 100vh 영역이 주소창 때문에 잘리거나 흔들릴 때"],"anti_use":["단순 콘텐츠 페이지에는 일반 min-height와 자연 스크롤이 더 단순할 수 있다"],"prompt_phrases":["모바일 full-height 화면은 100dvh 기준으로 잘리지 않게 해줘"]},{"id":"safe-area-inset","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"안전 영역 인셋","aliases":["safe area inset","notch inset","홈 인디케이터 여백"]},"en":{"name":"Safe-area inset","aliases":["Safe area padding","Notch inset","Home indicator inset"]},"one_liner":"노치, 둥근 모서리, 홈 인디케이터에 UI가 가려지지 않도록 더하는 기기 안전 여백.","description":"모바일 하단 CTA, bottom navigation, full-screen panel이 시스템 영역과 겹치지 않게 한다.","visual_anatomy":["device edge","unsafe area","padded control","safe area label"],"when_to_use":["모바일 하단 고정 버튼이나 전체 화면 레이아웃을 만들 때"],"anti_use":["일반 desktop layout에서는 불필요한 빈 공간이 될 수 있다"],"prompt_phrases":["하단 CTA 바에 safe-area inset padding을 적용해줘"]},{"id":"scroll-snap","status":"draft","category":"layout-rendering","group":"layout-scroll-behavior","kind":"motion-pattern","ko":{"name":"스크롤 스냅","aliases":["scroll snap","스냅 스크롤","snap carousel"]},"en":{"name":"Scroll snap","aliases":["Snap scrolling","Scroll snapping"]},"one_liner":"스크롤이 특정 카드나 섹션 위치에 자연스럽게 맞춰 멈추도록 하는 패턴.","description":"모바일 carousel, 온보딩 페이지, 가로 카드 레일에서 항목이 어정쩡하게 걸치지 않게 한다.","visual_anatomy":["scroll container","snap points","centered item","partial neighbors"],"when_to_use":["가로 카드나 페이지 단위 콘텐츠를 한 항목씩 읽게 하고 싶을 때"],"anti_use":["긴 문서 읽기처럼 자유로운 스크롤이 중요한 화면에서는 방해가 될 수 있다"],"prompt_phrases":["모바일 카드 carousel은 scroll snap으로 한 장씩 맞춰 멈추게 해줘"]},{"id":"tap-feedback","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"탭 피드백","aliases":["tap feedback","터치 피드백","누름 반응"]},"en":{"name":"Tap feedback","aliases":["Touch feedback","Press feedback"]},"one_liner":"터치나 클릭이 인식되었음을 색, 크기, 리플, 진동감 있는 변화로 즉시 보여주는 반응.","description":"모바일에서 사용자가 버튼이나 행을 눌렀는지 확신할 수 있도록 아주 짧은 시각 반응을 준다.","visual_anatomy":["touch target","pressed frame","feedback ripple or color","release state"],"when_to_use":["터치 대상이 즉시 반응해야 하는 버튼","리스트 행","카드에"],"anti_use":["비활성 요소나 오래 지속되는 상태 표시를 tap feedback으로 착각하게 만들지 않는다"],"prompt_phrases":["모바일 리스트 항목을 누르면 즉시 tap feedback이 보이게 해줘"],"related":[{"id":"touch-ripple","relation":"compare","note":"touch ripple은 tap feedback의 한 구체적 표현이다"}]},{"id":"optimistic-update","status":"draft","category":"feedback","group":"feedback-accessibility-states","kind":"component","ko":{"name":"낙관적 업데이트","aliases":["optimistic update","optimistic UI","선반영 UI"]},"en":{"name":"Optimistic update","aliases":["Optimistic UI","Optimistic state"]},"one_liner":"서버 응답을 기다리기 전에 성공할 것으로 보고 UI를 먼저 바꾸는 인터랙션 패턴.","description":"좋아요, 저장, 체크 완료처럼 실패 가능성이 낮은 행동에서 반응 속도를 빠르게 느끼게 한다.","visual_anatomy":["user action","immediate UI change","pending marker","rollback optional"],"when_to_use":["실패 가능성이 낮고 되돌리기 쉬운 작은 행동을 빠르게 반영할 때"],"anti_use":["결제","삭제","권한 변경처럼 실패나 부작용이 큰 행동에는 신중해야 한다"],"prompt_phrases":["좋아요 버튼은 optimistic update로 즉시 선택 상태를 보여줘"]},{"id":"pending-state","status":"draft","category":"feedback","group":"feedback-accessibility-states","kind":"component","ko":{"name":"대기 상태","aliases":["pending state","처리 중 상태","요청 대기"]},"en":{"name":"Pending state","aliases":["In-flight state","Waiting state"]},"one_liner":"사용자의 요청이 접수되었지만 아직 완료나 실패가 확정되지 않은 중간 상태.","description":"버튼, 행, 카드에 spinner, disabled, 임시 문구를 붙여 중복 클릭과 불확실성을 줄인다.","visual_anatomy":["submitted action","temporary indicator","disabled control","unresolved result"],"when_to_use":["저장","업로드","승인 요청처럼 결과를 기다리는 동안"],"anti_use":["너무 오래 지속되면 진행률","취소","재시도 정보를 제공해야 한다"],"prompt_phrases":["저장 요청 중에는 버튼을 pending state로 바꾸고 중복 클릭을 막아줘"]},{"id":"hover-reveal","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"호버 리빌","aliases":["hover reveal","hover actions","마우스오버 노출"]},"en":{"name":"Hover reveal","aliases":["Hover actions","Revealed on hover"]},"one_liner":"평소에는 숨겨 둔 보조 정보나 액션을 hover 때만 드러내는 패턴.","description":"카드 액션, 행 메뉴, 보조 메타를 화면 밀도 안에서 조용히 숨기되 발견 가능성을 유지한다.","visual_anatomy":["default card","hidden action","hover state","revealed control"],"when_to_use":["데스크톱에서 반복 항목의 보조 액션을 덜 시끄럽게 보여줄 때"],"anti_use":["모바일이나 키보드 사용자에게 같은 액션 접근 경로가 없으면 쓰면 안 된다"],"prompt_phrases":["카드 오른쪽 액션은 hover reveal로 나타나게 해줘"],"related":[{"id":"hover-state","relation":"use-with","note":"hover reveal은 hover state를 이용해 숨은 내용을 노출한다"}]},{"id":"gesture-hint","status":"draft","category":"feedback","group":"feedback-accessibility-states","kind":"component","ko":{"name":"제스처 힌트","aliases":["gesture hint","스와이프 힌트","조작 힌트"]},"en":{"name":"Gesture hint","aliases":["Swipe hint","Interaction hint"]},"one_liner":"스와이프, 드래그, 핀치 같은 숨은 제스처를 사용자가 발견하도록 보여주는 작은 단서.","description":"살짝 보이는 다음 카드, 핸들, 방향 화살표, 짧은 안내 문구로 가능한 조작을 암시한다.","visual_anatomy":["gesture target","directional cue","partial next item","optional label"],"when_to_use":["제스처가 주요 조작인데 화면만 봐서는 알기 어려울 때"],"anti_use":["표준 버튼으로 충분히 명확한 행동을 숨겨 제스처에만 의존하지 않는다"],"prompt_phrases":["카드가 옆으로 더 있다는 gesture hint를 살짝 보여줘"]},{"id":"outline","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"아웃라인","aliases":["outline","외곽선","윤곽선"]},"en":{"name":"Outline","aliases":["Outer outline","Focus outline"]},"one_liner":"요소 바깥쪽에 그려지는 윤곽선으로 경계나 포커스 상태를 보여주는 처리.","description":"focus ring, 선택 영역, 강조 상태를 border와 별도로 표시해 레이아웃 크기를 바꾸지 않고 상태를 드러낸다.","visual_anatomy":["element boundary","outside outline","offset gap","highlighted state"],"when_to_use":["포커스나 선택 상태를 레이아웃 흔들림 없이 표시할 때"],"anti_use":["outline을 없애고 대체 표시를 제공하지 않으면 접근성이 나빠진다"],"prompt_phrases":["키보드 focus 상태에는 선명한 outline을 남겨줘"],"related":[{"id":"focus-ring","relation":"use-with","note":"focus ring은 outline이나 ring으로 구현되는 대표 접근성 상태다"}]},{"id":"blend-mode","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"블렌드 모드","aliases":["blend mode","mix-blend-mode","합성 모드"]},"en":{"name":"Blend mode","aliases":["Mix blend mode","Compositing mode"]},"one_liner":"겹친 색이나 이미지가 서로 어떻게 섞일지 정하는 시각 합성 방식.","description":"배경 이미지 위 텍스트, 장식 레이어, hover 효과에서 단순 투명도와 다른 색 섞임을 만든다.","visual_anatomy":["background color","foreground layer","blended overlap","contrast result"],"when_to_use":["브랜드 그래픽이나 hero 배경에서 레이어 색이 자연스럽게 섞여야 할 때"],"anti_use":["본문 가독성이나 접근성 대비가 불안정해지면 쓰지 않는다"],"prompt_phrases":["히어로 이미지 위 그래픽에 subtle blend mode를 적용해줘"]},{"id":"object-fit","status":"draft","category":"layout-rendering","group":"layout-spacing-sizing","kind":"visual-treatment","ko":{"name":"오브젝트 맞춤","aliases":["object fit","이미지 맞춤","cover contain"]},"en":{"name":"Object fit","aliases":["Image fit","Cover fit","Contain fit"]},"one_liner":"이미지나 비디오가 고정된 프레임 안에서 잘릴지, 맞춰질지, 늘어날지를 정하는 처리.","description":"썸네일과 프로필 이미지가 프레임을 채우면서도 왜곡되지 않도록 cover, contain 같은 방식을 고른다.","visual_anatomy":["image frame","cover crop","contain fit","empty area or crop"],"when_to_use":["이미지 카드","아바타","미디어 썸네일의 비율이 제각각일 때"],"anti_use":["중요한 이미지 일부가 잘리면 contain이나 수동 crop을 검토해야 한다"],"prompt_phrases":["상품 이미지는 object-fit cover로 카드 프레임을 채우게 해줘"],"related":[{"id":"aspect-ratio","relation":"use-with","note":"프레임 비율은 aspect-ratio로 잡고 내부 이미지는 object-fit으로 맞춘다"}]},{"id":"semantic-color","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"의미 색상","aliases":["semantic color","semantic token","의미 기반 색"]},"en":{"name":"Semantic color","aliases":["Semantic token","Meaning-based color"]},"one_liner":"파랑, 회색 같은 실제 색값이 아니라 성공, 위험, 배경, 본문처럼 의미로 이름 붙인 색상.","description":"테마나 브랜드가 바뀌어도 UI 의도는 `destructive`, `muted`, `primary` 같은 의미 이름으로 유지한다.","visual_anatomy":["semantic labels","color swatches","UI states","token mapping"],"when_to_use":["디자인 시스템에서 상태와 역할 중심으로 색을 관리할 때"],"anti_use":["일회성 장식 색까지 모두 semantic token으로 만들면 관리 비용이 커진다"],"prompt_phrases":["삭제 버튼은 red가 아니라 destructive semantic color를 쓰게 해줘"],"related":[{"id":"color-contrast","relation":"use-with","note":"semantic color도 실제 배경과 텍스트 대비를 만족해야 한다"}]},{"id":"theme-token","status":"draft","category":"style","group":"style-tokens","kind":"visual-treatment","ko":{"name":"테마 토큰","aliases":["theme token","design token","테마 변수"]},"en":{"name":"Theme token","aliases":["Design token","Theme variable"]},"one_liner":"색, 간격, radius, shadow 같은 디자인 값을 코드에서 재사용하도록 이름 붙인 변수.","description":"light/dark mode, 브랜드 변경, 컴포넌트 일관성을 위해 원시 값 대신 토큰 이름을 참조한다.","visual_anatomy":["token names","mapped values","component usage","theme switch"],"when_to_use":["여러 컴포넌트가 같은 시각 규칙을 공유하고 테마 전환이 필요할 때"],"anti_use":["한 번만 쓰는 값까지 모두 토큰화하면 시스템이 불필요하게 복잡해진다"],"prompt_phrases":["버튼 색은 하드코딩하지 말고 theme token을 참조하게 해줘"],"related":[{"id":"semantic-color","relation":"use-with","note":"semantic color는 색상 theme token의 대표 형태다"}]},{"id":"blog-post-card","status":"draft","category":"data-display","group":"data-display-misc","kind":"component","ko":{"name":"블로그 포스트 카드","aliases":["blog post card","블로그 카드","article card"]},"en":{"name":"Blog post card","aliases":["Article card","Post preview card"]},"one_liner":"블로그 글 하나를 썸네일과 요약으로 미리 보여주는 카드.","description":"블로그 목록이나 그리드에서 글 제목, 요약, 작성자, 날짜를 함께 보여줘 클릭 전에 내용을 가늠하게 한다.","visual_anatomy":["cover image","category tag","title","excerpt","author avatar","date"],"when_to_use":["블로그 목록에서 여러 글을 미리보기로 나열할 때","관련 글 추천 영역을 만들 때"],"anti_use":["본문 전체를 카드에 담지 않는다","단일 공지나 안내는 banner나 alert가 더 적합하다"],"prompt_phrases":["썸네일과 요약이 있는 blog post card를 만들어줘","작성자와 날짜가 보이는 블로그 카드를 그리드에 배치해줘"]},{"id":"blog-grid-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"블로그 그리드 섹션","aliases":["blog grid","블로그 목록 섹션","article grid section"]},"en":{"name":"Blog grid section","aliases":["Blog list section","Article grid"]},"one_liner":"여러 블로그 포스트 카드를 그리드로 모아 보여주는 섹션.","description":"랜딩 페이지나 블로그 홈에서 최신 글이나 추천 글을 카드 그리드로 나열해 탐색을 돕는다.","visual_anatomy":["section heading","blog post card grid","optional category filter","view all link"],"when_to_use":["최신 글이나 인기 글을 한 화면에서 훑게 할 때"],"anti_use":["글이 하나뿐이면 featured-post-card 하나로 충분하다"],"prompt_phrases":["최신 글 6개가 그리드로 있는 blog grid section을 만들어줘"],"related":[{"id":"blog-post-card","relation":"compare","note":"blog-post-card는 개별 카드이고 blog-grid-section은 여러 카드를 모은 섹션이다."}]},{"id":"featured-post-card","status":"draft","category":"data-display","group":"data-display-misc","kind":"component","ko":{"name":"대표 포스트 카드","aliases":["featured post card","추천 글 카드","강조 포스트 카드"]},"en":{"name":"Featured post card","aliases":["Highlighted post card","Spotlight article card"]},"one_liner":"블로그 글 중 하나를 크게 강조해서 보여주는 대표 카드.","description":"블로그 홈 상단에서 가장 중요한 글 하나를 큰 이미지와 긴 요약으로 눈에 띄게 배치한다.","visual_anatomy":["large cover image","title","longer excerpt","author","date","prominent placement"],"when_to_use":["블로그 홈 최상단에서 신작이나 대표 글을 강조할 때"],"anti_use":["일반 글 목록에는 blog-post-card 그리드가 더 적합하다"],"prompt_phrases":["상단에 큰 이미지로 강조된 featured post card를 넣어줘"],"related":[{"id":"blog-post-card","relation":"compare","note":"blog-post-card는 표준 카드이고 featured-post-card는 그 중 하나를 크게 강조한 변형이다."}]},{"id":"contact-form-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"문의 폼 섹션","aliases":["contact form section","문의하기 섹션","contact us section"]},"en":{"name":"Contact form section","aliases":["Contact us section","Get in touch section"]},"one_liner":"이름, 이메일, 메시지를 입력해 문의를 보내는 폼 중심의 랜딩 섹션.","description":"마케팅 페이지에서 방문자가 회사나 팀에 직접 연락할 수 있도록 입력 필드와 전송 버튼을 묶어 보여준다.","visual_anatomy":["section heading","name field","email field","message field","submit button","optional side info panel"],"when_to_use":["방문자가 폼을 채워 문의나 상담을 요청해야 할 때"],"anti_use":["단순 이메일 주소 안내만 필요하면 contact-info-panel 하나로 충분하다"],"prompt_phrases":["이름","이메일","메시지 입력창이 있는 contact form section을 만들어줘"],"related":[{"id":"contact-info-panel","relation":"compare","note":"contact-info-panel은 연락처 정보 안내이고 contact-form-section은 실제 입력 폼 중심 섹션이다."}]},{"id":"contact-info-panel","status":"draft","category":"data-display","group":"data-display-misc","kind":"component","ko":{"name":"연락처 정보 패널","aliases":["contact info panel","연락처 안내 패널","오피스 정보 패널"]},"en":{"name":"Contact info panel","aliases":["Contact details panel","Get in touch panel"]},"one_liner":"이메일, 전화번호, 주소 같은 연락 채널을 보여주는 정보 패널.","description":"문의 폼 옆이나 푸터 근처에서 회사가 연락받는 다른 채널들을 정리해 보여준다.","visual_anatomy":["icon","label","contact value","optional map or social links"],"when_to_use":["문의 폼과 함께 다른 연락 채널을 안내할 때","오피스 위치나 소셜 링크를 보여줄 때"],"anti_use":["사용자 입력을 받아야 하면 contact-form-section이 필요하다"],"prompt_phrases":["이메일과 전화번호","주소가 있는 contact info panel을 폼 옆에 넣어줘"],"related":[{"id":"contact-form-section","relation":"compare","note":"contact-form-section은 입력을 받는 폼이고 contact-info-panel은 읽기 전용 연락처 안내다."}]},{"id":"office-location-card","status":"draft","category":"data-display","group":"data-display-misc","kind":"component","ko":{"name":"오피스 위치 카드","aliases":["office location card","지점 카드","오피스 카드"]},"en":{"name":"Office location card","aliases":["Location card","Office card"]},"one_liner":"회사의 특정 오피스나 지점 하나의 주소와 정보를 보여주는 카드.","description":"여러 지사가 있는 회사에서 각 오피스의 주소, 사진, 연락처를 개별 카드로 나열한다.","visual_anatomy":["office photo","city or branch name","address","contact info","map link"],"when_to_use":["회사가 여러 지점을 갖고 있어 각각 소개해야 할 때"],"anti_use":["지점이 하나뿐이면 contact-info-panel 하나로 충분하다"],"prompt_phrases":["서울","도쿄 지점이 각각 카드로 있는 office location card 목록을 만들어줘"],"related":[{"id":"contact-info-panel","relation":"compare","note":"contact-info-panel은 일반 연락처 정보이고 office-location-card는 지점별 위치 정보에 초점이 있다."}]},{"id":"content-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"콘텐츠 섹션","aliases":["content section","본문 콘텐츠 섹션","텍스트 이미지 섹션"]},"en":{"name":"Content section","aliases":["Prose section","Text and image section"]},"one_liner":"제목, 본문 텍스트, 이미지를 묶어 하나의 주제를 설명하는 랜딩 섹션.","description":"랜딩 페이지나 소개 페이지에서 기능이나 스토리 하나를 긴 설명과 이미지로 풀어낸다.","visual_anatomy":["section heading","body copy","supporting image","optional link or button"],"when_to_use":["제품 스토리나 기능 하나를 자세한 글과 이미지로 설명할 때"],"anti_use":["사용자가 직접 글을 입력하고 편집해야 하면 rich-text-editor가 필요하다","단순히 화면을 나누기만 하면 범용 section으로 충분하다"],"prompt_phrases":["왼쪽에 이미지","오른쪽에 설명 글이 있는 content section을 만들어줘"],"related":[{"id":"section","relation":"compare","note":"section은 화면을 나누는 범용 구조 개념이고 content-section은 본문 글과 이미지를 담는 구체적인 마케팅 블록이다."},{"id":"rich-text-editor","relation":"compare","note":"rich-text-editor는 사용자가 글을 직접 작성하는 입력 위젯이고 content-section은 이미 작성된 콘텐츠를 보여주는 정적 섹션이다."}]},{"id":"split-content-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"분할 콘텐츠 섹션","aliases":["split content section","좌우 분할 섹션","이미지 텍스트 분할 섹션"]},"en":{"name":"Split content section","aliases":["Split section","Image-text split layout"]},"one_liner":"화면을 좌우로 나눠 한쪽엔 이미지, 다른 한쪽엔 텍스트를 배치하는 콘텐츠 섹션.","description":"content-section의 변형으로, 이미지와 텍스트를 명확한 좌우 2분할 그리드로 정렬해 대비를 준다.","visual_anatomy":["two-column grid","image half","text half","alternating alignment"],"when_to_use":["이미지와 설명을 나란히 대비시켜 보여줄 때","여러 content-section을 좌우 교차로 배치할 때"],"anti_use":["이미지 없이 글만 있으면 일반 content-section이 더 단순하다"],"prompt_phrases":["왼쪽 이미지","오른쪽 텍스트가 번갈아 나오는 split content section을 만들어줘"],"related":[{"id":"content-section","relation":"compare","note":"content-section은 자유 배치이고 split-content-section은 좌우 2분할 그리드로 고정된 변형이다."}]},{"id":"logo-cloud-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"로고 클라우드 섹션","aliases":["logo cloud section","로고 그리드 섹션","고객사 로고 섹션"]},"en":{"name":"Logo cloud section","aliases":["Logo cloud","Client logos section","Trusted by section"]},"one_liner":"고객사나 파트너 로고 여러 개를 한 화면에 모아 신뢰를 보여주는 섹션.","description":"랜딩 페이지에서 \"이런 회사들이 쓴다\"는 사회적 증거를 브랜드 로고 그리드로 보여준다.","visual_anatomy":["optional section heading","logo grid","consistent logo sizing","muted or grayscale treatment"],"when_to_use":["제품을 사용하는 유명 고객사나 파트너를 신뢰 요소로 보여줄 때"],"anti_use":["로고 하나만 필요하면 logo를 그대로 쓴다","연동 상태나 설치 행동이 필요하면 integration-grid-section이 더 적합하다"],"prompt_phrases":["고객사 로고 6개가 나열된 logo cloud section을 만들어줘"],"related":[{"id":"logo","relation":"compare","note":"logo는 단일 브랜드 마크이고 logo-cloud-section은 여러 로고를 신뢰 요소로 모은 섹션이다."},{"id":"integration-grid-section","relation":"compare","note":"integration-grid-section은 연동 상태와 설치 행동이 있는 SaaS 목록이고 logo-cloud-section은 신뢰 증거용 정적 로고 나열이다."}]},{"id":"reviews-summary-block","status":"draft","category":"data-display","group":"data-commerce-billing","kind":"block","ko":{"name":"리뷰 요약 블록","aliases":["reviews summary block","리뷰 평점 요약","상품 리뷰 요약"]},"en":{"name":"Reviews summary block","aliases":["Review summary block","Rating summary block"]},"one_liner":"평균 평점과 별점 분포, 개별 리뷰 목록을 한 블록에 묶어 구매 결정을 돕는 UI.","description":"상품 상세 페이지에서 평균 평점과 분포 막대 같은 요약 지표를 개별 리뷰 목록과 함께 배치해 신뢰를 만든다.","visual_anatomy":["average rating number","star distribution bars","review count","individual review cards","verified purchase badge"],"when_to_use":["상품 상세에서 평점 요약과 실제 리뷰를 함께 보여줘야 할 때"],"anti_use":["평점 분포 없이 인용문만 나열하는 마케팅 신뢰 섹션은 testimonial section이 더 적합하다"],"prompt_phrases":["평균 평점과 별점 분포","개별 리뷰가 있는 reviews summary block을 상품 상세에 넣어줘"],"related":[{"id":"testimonial-section","relation":"compare","note":"마케팅 신뢰용 고객 인용문 나열은 testimonial section, 평점 분포와 실제 상품 리뷰 목록을 함께 보여줘야 하면 reviews summary block이다."},{"id":"review-list-with-filters","relation":"compare","note":"평점 분포 요약과 리뷰 목록을 한 블록으로 묶어 보여주는 것이 reviews summary block이고, 평점/사진 유무/구매 인증 여부로 리뷰를 걸러내고 정렬하는 상호작용이 핵심이면 review list with filters다."}]},{"id":"order-history-list","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"주문 내역 목록","aliases":["order history list","주문 이력","지난 주문 목록"]},"en":{"name":"Order history list","aliases":["Order list","Purchase history list"]},"one_liner":"과거 주문들을 날짜·금액·상태로 훑어보고 상세나 재주문으로 이어지는 목록.","description":"계정의 여러 주문을 행 단위로 나열해 사용자가 과거 구매를 스캔하고 상세 확인이나 재주문을 시작하게 한다.","visual_anatomy":["order row","date and order number","item thumbnails","total price","status chip","view detail or reorder action"],"when_to_use":["계정이나 마이페이지에서 여러 주문을 한 번에 훑어봐야 할 때"],"anti_use":["단일 주문 하나의 진행 상태만 보여줄 때는 order status가 더 적합하다"],"prompt_phrases":["날짜 금액 상태 칩이 있는 order history list를 마이페이지에 넣어줘"],"related":[{"id":"order-status","relation":"compare","note":"단일 주문의 진행 상태 표시는 order status, 여러 주문을 스캔 가능한 행으로 나열하는 목록 뷰는 order history list다."}]},{"id":"product-quickview-modal","status":"draft","category":"structure","group":"structure-panels","kind":"block","ko":{"name":"상품 퀵뷰 모달","aliases":["product quickview modal","퀵뷰","상품 미리보기 모달"]},"en":{"name":"Product quickview modal","aliases":["Quick view modal","Product preview modal"]},"one_liner":"카테고리 그리드를 벗어나지 않고 모달로 상품 핵심 정보를 미리 보여주는 패턴.","description":"상품 그리드나 검색 결과에서 상세 페이지로 이동하지 않고 이미지, 가격, 옵션, 담기 같은 핵심 구매 정보만 압축해 보여준다. 담기를 누른 뒤에는 모달을 바로 닫지 않고 미니 카트 미리보기나 토스트로 담기 완료를 확인시키고, 계속 둘러보기와 장바구니로 이동하기 중 하나를 고르게 하는 post-add 확인 상태로 이어질 수 있다.","visual_anatomy":["modal overlay","compact product image","title and price","variant selector","quantity stepper","add to cart action","view full details link","post-add confirmation state","continue-shopping vs go-to-cart choice"],"when_to_use":["카테고리나 그리드 컨텍스트를 유지한 채 빠르게 상품을 확인하고 담게 할 때"],"anti_use":["옵션이 많거나 설명이 길면 전체 상품 상세 페이지로 이동시키는 편이 낫다"],"prompt_phrases":["그리드에서 벗어나지 않고 이미지 가격 담기 버튼을 보여주는 product quickview modal을 만들어줘","담기 완료 후 미니 카트 미리보기와 계속 둘러보기 선택지를 보여주는 quickview add flow를 만들어줘"],"related":[{"id":"product-card","relation":"use-with","note":"그리드의 product card에서 퀵뷰 진입점을 눌러 product quickview modal을 여는 조합이 흔하다."},{"id":"modal-bottom-sheet","relation":"compare","note":"데스크톱 그리드 컨텍스트 유지가 목적이면 product quickview modal, 모바일에서 배경을 막고 아래에서 올라오는 짧은 선택이면 modal bottom sheet다."}]},{"id":"incentive-trust-strip","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"혜택·신뢰 스트립","aliases":["incentive trust strip","신뢰 배지 스트립","무료배송 안내 스트립"]},"en":{"name":"Incentive / trust strip","aliases":["Trust badge strip","Shipping and returns strip"]},"one_liner":"무료배송, 반품 정책, 보안 결제 같은 구매 장벽을 낮추는 짧은 아이콘+텍스트 항목을 나열하는 스트립.","description":"장바구니나 체크아웃 근처에 서너 개의 짧은 아이콘과 한 줄 텍스트로 신뢰 신호를 압축해 보여준다.","visual_anatomy":["icon","short label","optional policy link","3-4 item row or grid"],"when_to_use":["카트","체크아웃","상품 상세 근처에서 구매를 망설이게 하는 장벽을 짧게 해소해야 할 때"],"anti_use":["설명이 길거나 법적 고지가 필요하면 별도 정책 페이지나 FAQ로 연결한다"],"prompt_phrases":["무료배송 반품 보안결제 아이콘이 있는 incentive trust strip을 카트 근처에 넣어줘"]},{"id":"review-list-with-filters","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"필터 리뷰 목록","aliases":["review list with filters","리뷰 필터 목록","후기 필터링 목록"]},"en":{"name":"Review list with filters","aliases":["Filterable review list","Review filter and sort list"]},"one_liner":"평점, 사진 유무, 구매 인증 여부로 개별 리뷰를 걸러내고 정렬하는 목록.","description":"필터 칩과 정렬 컨트롤을 목록 위에 두어 사용자가 원하는 리뷰만 좁혀보게 한다. `reviews-summary-block`이 평점 분포 요약과 리뷰 목록을 한 블록으로 묶는 term이라면, 이 term은 그 목록 안에서의 필터/정렬 상호작용 자체가 핵심이다.","visual_anatomy":["filter chips for rating/has-photo/verified-purchase","sort control","review row with rating/author/date/body/photos","pagination or load-more"],"when_to_use":["상품 상세의 리뷰가 많아 사용자가 평점이나 사진","구매 인증 여부로 좁혀봐야 할 때"],"anti_use":["리뷰 수가 적으면 필터 없이 reviews-summary-block만으로 충분하다"],"prompt_phrases":["평점 사진 유무 구매인증으로 거르는 review list with filters를 만들어줘","최근순 도움순 정렬이 있는 필터 리뷰 목록을 넣어줘"],"related":[{"id":"reviews-summary-block","relation":"compare","note":"평점 분포 요약과 리뷰 목록을 한 블록으로 묶어 보여주는 것이 reviews summary block이고, 평점/사진 유무/구매 인증 여부로 리뷰를 걸러내고 정렬하는 상호작용이 핵심이면 review list with filters다."}]},{"id":"variant-selector-buttons","status":"draft","category":"selection","group":"selection-options","kind":"component","ko":{"name":"변형 선택 버튼 그룹","aliases":["variant selector buttons","사이즈 색상 선택 버튼","변형 옵션 버튼"]},"en":{"name":"Size/color variant selector","aliases":["Variant selector buttons","Swatch and size button group"]},"one_liner":"색상 스와치나 사이즈 버튼을 나열해 재고 유무를 즉시 드러내는 인라인 선택 컨트롤.","description":"드롭다운 뒤에 옵션을 숨기지 않고 버튼 그룹으로 노출해, 선택 상태와 품절 변형을 한눈에 보여준다. Baymard 연구는 사이즈 선택에 드롭다운을 쓰는 사이트가 57%에 달한다고 지목하며 이를 안티패턴으로 본다.","visual_anatomy":["swatch or button group per variant axis","selected state with border or checkmark","disabled state for out-of-stock variant with reason","color swatch shows actual color","size button shows label"],"when_to_use":["상품 상세에서 색상이나 사이즈 같은 변형 옵션을 데스크톱 인라인으로 바로 선택하게 할 때"],"anti_use":["변형 축이 많아 버튼이 화면을 넘치게 하면 별도 구성 화면이나 product-option-sheet가 더 적합하다"],"prompt_phrases":["드롭다운 대신 버튼으로 사이즈를 고르는 variant selector buttons를 넣어줘","품절 사이즈는 흐리게 표시하고 이유를 보여줘"],"related":[{"id":"product-option-sheet","relation":"compare","note":"product option sheet는 모바일 하단 시트로 옵션을 감싸는 래퍼이고, variant selector buttons는 시트 없이 데스크톱 인라인에 바로 놓이는 버튼형 선택 컨트롤 자체를 가리킨다."}]},{"id":"wishlist-management-view","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"위시리스트 관리 화면","aliases":["wishlist management view","찜 목록 관리","저장한 상품 목록"]},"en":{"name":"Wishlist management view","aliases":["Saved items view","Wishlist page"]},"one_liner":"저장한 상품을 모아보고 재고·가격 변동을 확인하며 장바구니로 옮기거나 삭제하는 전용 화면.","description":"Baymard 연구에 따르면 사이트의 60%가 위시리스트 사용에 계정 생성을 강제해 이탈을 유발한다. guest 저장을 허용하고 품절·가격 변동 알림을 목록 안에서 바로 보여주는 것이 핵심 권고다.","visual_anatomy":["grid or list of saved items with thumbnail/title/price/availability","price-drop or back-in-stock indicator","move-to-cart action per item","remove action per item","guest-accessible state"],"when_to_use":["계정이나 마이페이지에서 사용자가 저장해둔 상품을 모아 관리해야 할 때"],"anti_use":["단순히 하트 아이콘으로 찜 여부만 토글하는 것은 이 term의 범위가 아니다 — 저장 목록 전용 화면 자체를 가리킨다"],"prompt_phrases":["가격 변동과 재입고 알림이 있는 wishlist management view를 마이페이지에 만들어줘","로그인 없이도 담을 수 있는 위시리스트 화면을 보여줘"]},{"id":"cross-sell-related-strip","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"연관 상품 추천 스트립","aliases":["cross-sell related strip","함께 구매하면 좋은 상품","관련 상품 스트립"]},"en":{"name":"Cross-sell / related products strip","aliases":["Related products strip","You may also like strip"]},"one_liner":"상품 상세나 장바구니 하단에서 관련·추천 상품을 소규모 캐러셀로 보여주는 스트립.","description":"함께 구매하면 좋은 상품이나 관련 상품 같은 섹션 헤딩 아래 기존 product-card를 가로 스크롤 캐러셀로 나열한다. 추천 로직 자체는 이 term의 범위 밖이며 UI 구조만 다룬다.","visual_anatomy":["section heading","horizontal scrollable row of product-card items","scroll affordance","optional quick add-to-cart action per item"],"when_to_use":["상품 상세나 장바구니 하단에서 관련·연관 상품을 짧게 노출해야 할 때"],"anti_use":["추천 로직 자체나 개인화 전략을 설명해야 하면 이 term의 범위 밖이다"],"prompt_phrases":["상품 상세 하단에 관련 상품 캐러셀인 cross-sell related strip을 넣어줘","장바구니 아래 함께 구매하면 좋은 상품 스트립을 보여줘"],"related":[{"id":"product-card","relation":"use-with","note":"상품 상세나 장바구니 하단의 cross-sell related strip은 이 product card를 그대로 재사용하는 캐러셀 조합이다."}]},{"id":"permission-matrix-editor","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"권한 매트릭스 편집기","aliases":["permission matrix editor","역할 권한 매트릭스","권한표"]},"en":{"name":"Permission matrix editor","aliases":["Role permission matrix","Access matrix editor"]},"one_liner":"역할을 열, 권한·모듈을 행으로 배치해 체크박스로 접근 범위를 부여하는 매트릭스 편집기.","description":"ERP, CRM, 내부 어드민 도구에서 역할별로 어떤 모듈에 어떤 권한을 허용할지 표 형태로 한눈에 편집하게 한다.","visual_anatomy":["role columns","permission rows grouped by module","checkbox or toggle cell","select-all in row/column","role inheritance indicator","duplicate role as base action","default-deny visualization"],"when_to_use":["역할별 접근 범위를 여러 모듈에 걸쳐 한 화면에서 관리해야 할 때"],"anti_use":["역할이 하나뿐이거나 권한이 단순하면 개별 permission-prompt나 role-badge 정도로 충분하다"],"prompt_phrases":["역할을 열로 권한을 행으로 배치한 permission matrix editor를 만들어줘","체크박스로 모듈별 접근 권한을 켜고 끄는 권한 매트릭스를 넣어줘"],"related":[{"id":"role-badge","relation":"compare","note":"role badge는 한 사용자의 역할을 작은 배지로 보여주는 표시 전용 요소이고, permission matrix editor는 여러 역할과 모듈 조합의 접근 권한 자체를 표 형태로 편집하는 도구다"}]},{"id":"danger-zone","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"위험 구역","aliases":["danger zone","삭제 구역","위험한 설정 섹션"]},"en":{"name":"Danger zone","aliases":["Destructive settings section","Advanced destructive actions"]},"one_liner":"삭제, 소유권 이전, 아카이브처럼 되돌릴 수 없는 작업을 설정 페이지 하단에 격리해 담는 섹션.","description":"위치와 경고 색으로 실수 클릭을 구조적으로 어렵게 만들고, 각 행동은 다단계 확인을 거치게 한다.","visual_anatomy":["warning-bordered section","danger zone heading label","action row with short description","outlined destructive button","typed-confirmation modal","consequence explainer text"],"when_to_use":["설정 페이지에 삭제·소유권 이전·아카이브처럼 되돌릴 수 없는 행동이 있을 때"],"anti_use":["되돌릴 수 있는 일반 설정 변경까지 여기 넣으면 진짜 위험한 행동의 무게가 희석된다"],"prompt_phrases":["설정 페이지 맨 아래에 삭제와 소유권 이전이 있는 danger zone 섹션을 만들어줘","위험한 설정을 빨간 테두리로 분리한 danger zone을 넣어줘"],"related":[{"id":"destructive-confirmation","relation":"use-with","note":"danger zone의 각 행동 버튼은 즉시 실행되지 않고 destructive confirmation(이름 재입력 등 typed confirmation)을 거쳐야 한다"}]},{"id":"impersonation-session-banner","status":"draft","category":"feedback","group":"feedback-access-limits","kind":"block","ko":{"name":"임퍼스네이션 세션 배너","aliases":["impersonation banner","로그인 대행 배너","대리 로그인 표시"]},"en":{"name":"Impersonation session banner","aliases":["Login-as banner","Support impersonation banner"]},"one_liner":"지원팀이 다른 사용자로 임시 로그인했을 때 화면 전역에 고정 노출되는 경고 배너.","description":"임퍼스네이션 상태, 대상 사용자, 세션 종료 버튼을 항상 볼 수 있게 해 위험 모드를 구조적으로 인지시킨다. 진입 시에는 대상 사용자 이름을 밝히는 확인 다이얼로그를 먼저 거치고, 종료 시에는 원래 계정으로 즉시 복귀하는 단일 액션을 제공한다.","visual_anatomy":["entry confirmation dialog naming the impersonated user","persistent top banner","impersonation icon or distinct color","impersonated user identity","remaining session time","exit or end session button"],"when_to_use":["지원팀이 고객 계정으로 임시 로그인해 문제를 재현하거나 대신 조작할 때"],"anti_use":["일반 계정 전환에는 account-switcher가 낫다 — impersonation banner는 위험·대리 모드 전용이다"],"prompt_phrases":["지원팀이 다른 사용자로 로그인하면 상단에 impersonation banner를 고정해줘","세션 종료 버튼이 있는 대리 로그인 배너를 넣어줘","진입 확인 다이얼로그와 종료 버튼이 있는 임퍼스네이션 흐름을 만들어줘"]},{"id":"config-environment-diff-view","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"환경 설정 비교 뷰","aliases":["config diff view","environment diff","환경 설정 diff"]},"en":{"name":"Environment / config diff view","aliases":["Config diff view","Environment comparison view"]},"one_liner":"staging/production 같은 두 환경의 설정값을 나란히 비교해 추가·삭제·변경을 색으로 구분하는 뷰.","description":"두 환경 사이의 설정 드리프트를 좌우 비교 레이아웃으로 보여주고, 시크릿 값은 마스킹한 채 다른 환경으로 동기화하는 행동을 함께 제공한다.","visual_anatomy":["two-column environment comparison","key name column","added or removed or changed color coding","masked secret value","sync or copy-to-other-environment action","missing-in-target warning"],"when_to_use":["두 환경의 설정이나 변수 차이를 점검하고 동기화해야 할 때"],"anti_use":["환경이 하나뿐이거나 값이 몇 개 안 되면 단순 목록으로 충분하다"],"prompt_phrases":["staging과 production 설정을 좌우로 비교하는 config diff view를 만들어줘","값이 다르면 색으로 표시되는 환경 설정 비교 화면을 넣어줘"]},{"id":"data-import-wizard-validation-preview","status":"draft","category":"selection","group":"selection-navigation","kind":"block","ko":{"name":"데이터 임포트 검증 위저드","aliases":["import wizard","CSV 임포트 마법사","데이터 가져오기 검증 미리보기"]},"en":{"name":"Data import wizard with validation preview","aliases":["CSV import wizard","Import validation wizard"]},"one_liner":"파일 업로드부터 컬럼 매핑, 행 단위 검증 미리보기, 결과 요약까지 이어지는 다단계 데이터 임포트 흐름.","description":"CSV·파일 업로드 이후 컬럼을 자동·수동으로 매핑하고, 제출 전 행·열 단위 오류를 미리보기에서 강조해 실패를 줄인다.","visual_anatomy":["file upload step","auto-detected column mapping table","manual remap control per column","when-blank default choice","preview table with row-level error highlighting","inline fix affordance","import summary count"],"when_to_use":["사용자가 대량의 외부 데이터를 업로드해 시스템에 반영해야 할 때"],"anti_use":["시작 방법 자체를 고르는 단계라면 import-data-choice가 더 적합하다 — 이 위저드는 방법을 고른 이후의 실제 임포트 실행 흐름이다"],"prompt_phrases":["CSV 업로드 후 컬럼 매핑과 오류 미리보기가 있는 data import wizard를 만들어줘","행 단위 오류를 강조하는 임포트 검증 미리보기를 넣어줘"],"related":[{"id":"wizard","relation":"compare","note":"wizard는 다단계 흐름의 일반 패턴이고, 이 항목은 파일 업로드→컬럼 매핑→행 단위 검증 미리보기→제출 요약으로 이어지는 데이터 임포트에 특화된 구체적 인스턴스다"},{"id":"import-data-choice","relation":"compare","note":"import-data-choice는 CSV·직접 입력·외부 연결 중 시작 방법을 고르는 선택 UI이고, 이 위저드는 그 방법을 고른 이후 실제 파일을 매핑·검증·제출하는 다단계 실행 흐름이다"}]},{"id":"interactive-api-playground","status":"draft","category":"structure","group":"structure-content-elements","kind":"block","ko":{"name":"인터랙티브 API 플레이그라운드","aliases":["interactive api playground","API 플레이그라운드","try it 위젯"]},"en":{"name":"Interactive API playground","aliases":["API try-it widget","Embedded API console"]},"one_liner":"문서 페이지 안에서 실제 파라미터를 입력해 API 요청을 바로 실행하고 응답을 확인하는 임베디드 위젯.","description":"파라미터 입력 폼, Send/Try it 버튼, 실제 응답(상태 코드+JSON)을 한 화면에 묶고, 입력값에 따라 옆의 언어별 코드 샘플이 동기화된다.","visual_anatomy":["parameter input form","send/try-it button","response status code","response body panel","synced code sample"],"when_to_use":["문서 안에서 실제 API 호출을 실행해보고 응답을 즉시 확인해야 할 때"],"anti_use":["실행 없이 코드만 보여주면 api-reference-three-column-layout 정도의 정적 레퍼런스로 충분하다"],"prompt_phrases":["문서 페이지에 파라미터를 입력하고 바로 실행하는 API 플레이그라운드를 넣어줘","Try it 버튼으로 실제 응답을 보여주는 임베디드 API 콘솔을 만들어줘"]},{"id":"docs-landing-hub-category-cards","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"문서 랜딩 허브 카드","aliases":["docs landing hub","문서 홈 카테고리 카드","문서 진입 페이지"]},"en":{"name":"Docs landing hub page with category cards","aliases":["Docs home category cards","Documentation hub page"]},"one_liner":"문서 루트 진입 페이지에서 하위 카테고리를 아이콘과 설명이 있는 카드로 나열해 다음 탐색 지점을 고르게 하는 허브 페이지.","description":"문서 사이트의 최상위 진입점에서 Getting Started, API, Guides 같은 하위 카테고리를 카드 그리드로 보여준다. 각 카드는 사이드바 최상위 그룹과 1:1로 대응해, 카드를 고르는 것이 사이드바의 한 그룹으로 진입하는 것과 같다.","visual_anatomy":["hub page header","category card grid","per-card icon","per-card title and short description","optional item-count or auto-generated excerpt"],"when_to_use":["문서가 여러 하위 카테고리로 나뉘어 있고 방문자가 첫 진입에서 목적지를 골라야 할 때","사이드바 트리를 보여주기 전에 상위 개요를 먼저 제공하고 싶을 때"],"anti_use":["카테고리가 하나뿐이거나 문서 규모가 작으면 바로 article-documentation-layout으로 진입시키는 편이 낫다"],"prompt_phrases":["문서 루트에 카테고리 카드 그리드가 있는 허브 페이지를 만들어줘","Getting Started/API/Guides를 아이콘 카드로 나열한 문서 홈을 만들어줘"]},{"id":"api-error-reference-table","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"API 에러 레퍼런스 테이블","aliases":["api error reference table","에러 코드 테이블","에러 참조표"]},"en":{"name":"API error reference table","aliases":["Error code reference table","Error reference table"]},"one_liner":"에러 코드, 타입, HTTP 상태, 설명을 행으로 나열해 실패 케이스를 스캔 가능하게 만든 참조 테이블.","description":"API 레퍼런스 문서에서 파라미터 표와는 별도로, 발생 가능한 에러를 코드/타입/HTTP 상태 배지/설명 열로 나열한다. 각 행은 anchor id를 가져 특정 에러로 바로 딥링크할 수 있다. 상태 열은 badge 용어의 색상 구분 배지를 그대로 재사용한다.","visual_anatomy":["error code column (monospace)","error type column","HTTP status badge column","description column","per-row anchor id for deep-linking"],"when_to_use":["API가 반환하는 에러 코드/상태를 체계적으로 스캔 가능한 표로 문서화해야 할 때"],"anti_use":["에러가 2~3종뿐이면 표 대신 본문 설명이나 callout으로 충분하다"],"prompt_phrases":["에러 코드/타입/HTTP 상태를 나열한 API 에러 레퍼런스 테이블을 만들어줘","각 에러 행에 anchor id가 있어서 딥링크할 수 있는 에러 코드 표를 만들어줘"],"related":[{"id":"badge","relation":"use-with","note":"api-error-reference-table의 HTTP 상태 열은 badge 용어의 색상 구분 배지를 그대로 재사용한다 — 별도 배지 컴포넌트를 새로 정의하지 않는다."}]}]
+[{"id":"text-field","status":"draft","category":"input","group":"input-text","ko":{"name":"입력창","aliases":["텍스트 필드","인풋","입력 요소"]},"en":{"name":"Text field","aliases":["Input","Text input"]},"one_liner":"짧은 텍스트를 한 줄로 입력받는 요소.","description":"이름, 제목, 이메일처럼 짧은 문자열을 사용자가 직접 입력할 때 쓴다.","visual_anatomy":["label or placeholder","rectangular input container","text caret","optional helper text"],"when_to_use":["짧은 값을 직접 입력받을 때","폼에서 사용자가 값을 수정해야 할 때"],"anti_use":["긴 본문에는 textarea를 쓴다","정해진 보기 중 선택이면 select나 radio group을 검토한다"],"prompt_phrases":["이름을 입력하는 text field를 넣어줘","검색어 입력창을 상단에 배치해줘"]},{"id":"search-field","status":"draft","category":"input","group":"input-search-command","ko":{"name":"검색창","aliases":["검색 입력창","search input","서치바"]},"en":{"name":"Search field","aliases":["Search input","Search bar"]},"one_liner":"검색어를 입력해 목록이나 콘텐츠를 찾는 입력 요소.","description":"돋보기 아이콘, placeholder, 지우기 버튼이 함께 쓰이는 경우가 많다.","visual_anatomy":["magnifying glass icon","input container","placeholder text","optional clear button"],"when_to_use":["리스트나 데이터가 많아 사용자가 빠르게 찾게 할 때","이름이나 키워드로 필터링할 때"],"anti_use":["항목 수가 적으면 category filter가 더 단순할 수 있다","복잡한 조건 검색은 filter panel을 쓴다"],"prompt_phrases":["카드 목록 위에 검색창을 넣어줘","검색창 안에 돋보기 아이콘을 넣어줘"]},{"id":"textarea","status":"draft","category":"input","group":"input-text","ko":{"name":"텍스트영역","aliases":["긴 글 입력창","여러 줄 입력","textarea"]},"en":{"name":"Textarea","aliases":["Multiline text field","Text area"]},"one_liner":"여러 줄의 긴 텍스트를 입력받는 요소.","description":"메모, 소개글, 문의 내용처럼 길이가 길거나 줄바꿈이 필요한 입력에 쓴다.","visual_anatomy":["label","multiline box","resize corner or fixed height","helper text"],"when_to_use":["사용자가 문장이나 본문을 입력할 때","줄바꿈이 의미 있는 내용을 받을 때"],"anti_use":["한 줄 값에는 text field가 더 적합하다","rich formatting이 필요하면 editor를 쓴다"],"prompt_phrases":["문의 내용을 쓰는 textarea를 넣어줘","긴 설명 입력 영역을 만들어줘"]},{"id":"select","status":"draft","category":"input","group":"input-pickers","ko":{"name":"선택창","aliases":["셀렉트","드롭다운 선택","select box"]},"en":{"name":"Select","aliases":["Select box","Dropdown select"]},"one_liner":"정해진 보기 중 하나를 선택하는 입력 요소.","description":"현재 선택값과 펼침 화살표를 보여주고, 클릭하면 옵션 목록을 연다.","visual_anatomy":["selected value","trigger container","chevron icon","option list"],"when_to_use":["선택지가 정해져 있고 하나만 고를 때","공간을 아껴야 할 때"],"anti_use":["선택지가 2-4개면 radio group이나 segmented control이 더 잘 보인다","검색이 필요하면 combobox를 쓴다"],"prompt_phrases":["카테고리를 고르는 select를 넣어줘","옵션 목록에서 하나 고르는 드롭다운을 만들어줘"],"related":[{"id":"combobox","relation":"compare","note":"옵션이 많거나 검색 입력이 필요하면 select보다 combobox가 맞다."},{"id":"dropdown-menu","relation":"compare","note":"값을 고르는 입력이면 select, 명령을 숨겨 실행하는 목록이면 dropdown menu다."},{"id":"radio-group","relation":"alternative","note":"선택지가 적고 모두 보여줘야 하면 select보다 radio group이 더 명확하다."},{"id":"segmented-control","relation":"alternative","note":"2-5개의 보기 모드를 즉시 전환하면 segmented control이 더 빠르다."}]},{"id":"combobox","status":"draft","category":"input","group":"input-pickers","ko":{"name":"콤보박스","aliases":["검색 가능한 선택창","자동완성 선택","combobox"]},"en":{"name":"Combobox","aliases":["Autocomplete select","Searchable select"]},"one_liner":"입력과 선택을 함께 제공하는 검색 가능한 선택 요소.","description":"사용자가 텍스트를 입력해 옵션을 필터링하고 목록에서 값을 고를 수 있다.","visual_anatomy":["input trigger","typed query","filtered option list","highlighted option"],"when_to_use":["선택지가 많아 검색이 필요할 때","사용자가 값을 입력하며 고르게 할 때"],"anti_use":["선택지가 적으면 select나 radio group이 더 단순하다","자유 입력만 필요하면 text field를 쓴다"],"prompt_phrases":["국가를 검색해서 고르는 combobox를 넣어줘","옵션이 많은 선택창은 검색 가능하게 만들어줘"],"related":[{"id":"select","relation":"compare","note":"검색 없이 정해진 값 하나만 고르면 combobox보다 select가 단순하다."},{"id":"autocomplete","relation":"compare","note":"추천 입력과 검색 선택이 핵심이면 autocomplete와 겹치므로 입력 자유도와 선택 강도를 먼저 정한다."},{"id":"dropdown-menu","relation":"compare","note":"combobox는 값을 입력/선택하는 control이고 dropdown menu는 명령 목록이다."}]},{"id":"checkbox","status":"draft","category":"selection","group":"selection-options","ko":{"name":"체크박스","aliases":["checkbox","다중 선택 체크"]},"en":{"name":"Checkbox","aliases":["Check box"]},"one_liner":"여러 항목을 각각 켜거나 선택할 수 있는 작은 체크 요소.","description":"동의, 옵션 선택, 다중 선택 리스트에서 쓰이며 체크 표시로 상태를 보여준다.","visual_anatomy":["square control","check mark","label","optional indeterminate state"],"when_to_use":["여러 옵션을 동시에 선택할 수 있을 때","약관 동의처럼 yes/no 상태가 필요할 때"],"anti_use":["상호 배타적 선택에는 radio group을 쓴다","즉시 켜고 끄는 설정에는 switch가 더 자연스럽다"],"prompt_phrases":["약관 동의 체크박스를 넣어줘","여러 개 선택 가능한 checkbox 목록을 만들어줘"],"related":[{"id":"switch","relation":"compare","note":"즉시 켜고 끄는 설정이면 switch, 제출 전 선택값이면 checkbox가 더 명확하다."},{"id":"radio-group","relation":"compare","note":"여러 개 선택할 수 있으면 checkbox, 정확히 하나만 골라야 하면 radio group이다."}]},{"id":"radio-group","status":"draft","category":"selection","group":"selection-options","ko":{"name":"라디오그룹","aliases":["라디오 버튼","하나만 선택","radio"]},"en":{"name":"Radio group","aliases":["Radio buttons"]},"one_liner":"여러 선택지 중 정확히 하나를 고르는 요소 묶음.","description":"각 옵션 앞에 원형 버튼이 있고, 하나를 선택하면 다른 선택은 해제된다.","visual_anatomy":["group label","circular controls","selected dot","option labels"],"when_to_use":["선택지가 적고 모두 보여줘야 할 때","사용자가 하나만 선택해야 할 때"],"anti_use":["여러 개 선택 가능하면 checkbox를 쓴다","선택지가 많으면 select를 검토한다"],"prompt_phrases":["요금제를 하나 고르는 radio group을 넣어줘","결제 방식을 라디오 버튼으로 선택하게 해줘"],"related":[{"id":"checkbox","relation":"compare","note":"하나만 선택하면 radio group, 여러 개 선택 가능하면 checkbox를 쓴다."},{"id":"select","relation":"alternative","note":"선택지가 많거나 공간을 아껴야 하면 select가 더 적합하다."},{"id":"segmented-control","relation":"alternative","note":"보기 모드처럼 즉시 전환되는 소수 옵션은 segmented control이 더 compact하다."}]},{"id":"switch","status":"draft","category":"selection","group":"selection-options","ko":{"name":"스위치","aliases":["토글","toggle","켜기 끄기"]},"en":{"name":"Switch","aliases":["Toggle switch","Toggle"]},"one_liner":"설정을 즉시 켜거나 끄는 요소.","description":"손잡이가 좌우로 움직이며 on/off 상태를 직관적으로 보여준다.","visual_anatomy":["track","thumb","on/off position","label"],"when_to_use":["설정을 바로 활성화하거나 비활성화할 때","변경 결과가 즉시 적용될 때"],"anti_use":["폼 제출 전까지 확정되지 않는 값에는 checkbox가 더 명확할 수 있다","여러 선택지 중 하나는 radio group을 쓴다"],"prompt_phrases":["알림을 켜고 끄는 toggle switch를 넣어줘","다크모드 스위치를 만들어줘"],"related":[{"id":"checkbox","relation":"compare","note":"스위치는 즉시 적용되는 on/off 설정에 쓰고, checkbox는 폼 안 선택값에 더 적합하다."},{"id":"toggle-group","relation":"compare","note":"여러 버튼형 상태를 묶어 켜고 끄면 toggle group이 더 낫다."}]},{"id":"slider","status":"draft","category":"selection","group":"selection-options","ko":{"name":"슬라이더","aliases":["range slider","값 조절 바"]},"en":{"name":"Slider","aliases":["Range slider"]},"one_liner":"연속적인 값이나 범위를 손잡이로 조절하는 요소.","description":"트랙 위 thumb를 움직여 볼륨, 가격, 강도 같은 값을 조정한다.","visual_anatomy":["track","filled range","thumb","value label"],"when_to_use":["정확한 숫자보다 대략적인 조절이 중요할 때","값의 크기를 시각적으로 보여주고 싶을 때"],"anti_use":["정확한 숫자 입력이 필요하면 number input을 쓴다","선택지가 이산적이면 segmented control이나 radio를 쓴다"],"prompt_phrases":["볼륨을 조절하는 slider를 넣어줘","가격 범위를 고르는 range slider를 만들어줘"]},{"id":"date-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"날짜 선택","aliases":["데이트피커","달력 입력","date picker"]},"en":{"name":"Date picker","aliases":["Calendar picker"]},"one_liner":"달력 UI로 날짜를 선택하는 입력 요소.","description":"날짜 입력창과 달력 팝오버를 함께 제공해 날짜를 직접 고르게 한다.","visual_anatomy":["date input","calendar icon","calendar popover","selected day"],"when_to_use":["예약일이나 마감일처럼 날짜를 고르게 할 때","날짜 형식 오류를 줄이고 싶을 때"],"anti_use":["연도나 월만 고르면 simpler select가 낫다","자유 텍스트 날짜는 오류가 많다"],"prompt_phrases":["예약 날짜를 고르는 date picker를 넣어줘","달력으로 마감일을 선택하게 해줘"]},{"id":"file-upload","status":"draft","category":"input","group":"input-file-media","ko":{"name":"파일 업로드","aliases":["파일 선택","첨부","upload input"]},"en":{"name":"File upload","aliases":["File input","Upload button"]},"one_liner":"사용자가 로컬 파일을 선택하거나 끌어다 놓게 하는 입력 요소.","description":"파일 선택 버튼, 드롭존, 선택된 파일 이름을 함께 보여주는 경우가 많다.","visual_anatomy":["upload icon","file button or dropzone","filename","optional progress"],"when_to_use":["이미지나 문서를 첨부받을 때","파일 업로드 상태를 보여줘야 할 때"],"anti_use":["단순 링크 입력에는 text field를 쓴다","대용량 업로드는 별도 progress와 error recovery가 필요하다"],"prompt_phrases":["프로필 이미지를 올리는 file upload를 넣어줘","파일 선택 버튼과 업로드 상태를 보여줘"]},{"id":"tabs","status":"draft","category":"selection","group":"selection-options","ko":{"name":"탭","aliases":["탭 메뉴","tab"]},"en":{"name":"Tabs","aliases":["Tab list"]},"one_liner":"같은 영역 안에서 관련 화면이나 패널을 전환하는 요소.","description":"탭 목록과 선택된 탭 패널로 구성되며 현재 위치를 강조한다.","visual_anatomy":["tab list","active tab","inactive tabs","tab panel"],"when_to_use":["같은 맥락의 콘텐츠를 몇 개 섹션으로 나눌 때","화면 이동 없이 내용을 전환할 때"],"anti_use":["서로 관련 없는 페이지 이동에는 navigation을 쓴다","탭이 너무 많으면 overflow나 다른 구조를 검토한다"],"prompt_phrases":["상세 화면에 탭 메뉴를 넣어줘","개요와 설정을 tabs로 전환하게 해줘"],"related":[{"id":"segmented-control","relation":"compare","note":"콘텐츠 패널을 나누면 tabs, 보기 모드나 필터 값을 빠르게 바꾸면 segmented control이 맞다."},{"id":"tab-bar","relation":"compare","note":"모바일 앱의 최상위 destination 전환이면 tab bar라는 이름이 더 자연스럽다."}]},{"id":"segmented-control","status":"draft","category":"selection","group":"selection-options","ko":{"name":"세그먼트 버튼","aliases":["분할 버튼","segmented control","옵션 토글"]},"en":{"name":"Segmented control","aliases":["Segmented button"]},"one_liner":"몇 개의 선택지를 버튼처럼 나란히 보여주고 하나를 선택하는 요소.","description":"필터 모드나 보기 방식을 빠르게 전환할 때 쓰며 선택된 segment를 강조한다.","visual_anatomy":["group container","segments","active segment","labels"],"when_to_use":["2-5개 정도의 선택지를 항상 보여주고 싶을 때","보기 모드나 필터를 빠르게 바꿀 때"],"anti_use":["선택지가 많으면 select를 쓴다","다중 선택이면 checkbox나 chips를 검토한다"],"prompt_phrases":["일간 주간 월간을 고르는 segmented control을 넣어줘","보기 방식을 세그먼트 버튼으로 전환하게 해줘"],"related":[{"id":"tabs","relation":"compare","note":"패널 구조가 명확하면 tabs, 같은 화면의 보기 방식만 바꾸면 segmented control이 더 적합하다."},{"id":"toggle-group","relation":"compare","note":"하나만 선택되는 모드 전환이면 segmented control, 여러 pressed state가 필요하면 toggle group이다."},{"id":"radio-group","relation":"alternative","note":"폼 선택값을 명확히 제출해야 하면 radio group이 더 보수적이다."}]},{"id":"dropdown-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"드롭다운 메뉴","aliases":["더보기 메뉴","펼침 메뉴","dropdown"]},"en":{"name":"Dropdown menu","aliases":["Menu","Popup menu"]},"one_liner":"버튼을 누르면 아래로 펼쳐지는 명령 또는 선택 목록.","description":"숨겨진 동작이나 옵션을 한 곳에 모아 표시한다.","visual_anatomy":["trigger button","chevron or more icon","floating menu","menu items"],"when_to_use":["자주 쓰지 않는 명령을 숨길 때","공간을 아끼며 옵션을 제공할 때"],"anti_use":["중요한 주요 행동은 숨기지 않는다","값 선택이 목적이면 select나 combobox를 검토한다"],"prompt_phrases":["카드 오른쪽에 더보기 dropdown menu를 넣어줘","정렬 옵션을 드롭다운 메뉴로 보여줘"],"related":[{"id":"select","relation":"compare","note":"사용자가 값 하나를 선택하는 입력이면 select, 숨겨진 명령을 실행하면 dropdown menu다."},{"id":"popover","relation":"compare","note":"단순 명령 목록이면 dropdown menu, 작은 폼이나 보조 콘텐츠면 popover가 맞다."},{"id":"tooltip","relation":"compare","note":"설명을 잠깐 보여주는 용도면 tooltip이고, 클릭 가능한 명령 목록은 dropdown menu다."}]},{"id":"command-palette","status":"draft","category":"input","group":"input-search-command","ko":{"name":"커맨드 팔레트","aliases":["명령 검색창","command menu","빠른 실행"]},"en":{"name":"Command palette","aliases":["Command menu"]},"one_liner":"검색으로 화면 이동이나 명령 실행을 빠르게 찾는 오버레이.","description":"입력창과 결과 목록을 함께 보여주며 키보드 중심 탐색에 적합하다. 운영 도구에서는 현재 선택된 엔티티에 스코프를 좁혀 그 엔티티에만 적용되는 위험 액션만 노출하고, 파괴적 액션은 목록 안에서 시각적으로 분리하는 변형으로도 쓰인다.","visual_anatomy":["overlay panel","command input","grouped results","keyboard hint","entity-scoped action list when used as an ops variant","visually separated destructive actions in that variant"],"when_to_use":["기능이 많고 빠른 검색 실행이 필요할 때","파워 유저용 단축 흐름이 필요할 때","선택된 엔티티에 스코프된 운영 액션만 빠르게 찾아 실행해야 할 때"],"anti_use":["초보자에게 필수 기능을 숨기는 용도로 쓰지 않는다","항목이 적으면 일반 검색이나 메뉴가 더 쉽다"],"prompt_phrases":["Ctrl K로 여는 command palette를 넣어줘","명령어를 검색해서 실행하는 팔레트를 만들어줘"],"related":[{"id":"search-suggestions","relation":"compare","note":"문서 사이트의 Cmd/Ctrl+K 검색은 command-palette 오버레이 형태를 쓰되, 결과를 Docs/Guides/API 같은 섹션 헤더로 그룹핑한다는 점에서 순수 명령 실행 목록과 다르다 — 그룹핑 구조 자체는 search-suggestions의 추천 목록 개념과 더 가깝다."}]},{"id":"breadcrumb","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"브레드크럼","aliases":["현재 위치 경로","breadcrumb"]},"en":{"name":"Breadcrumb","aliases":["Breadcrumb navigation"]},"one_liner":"현재 페이지가 전체 구조에서 어디인지 보여주는 경로 표시.","description":"홈부터 현재 페이지까지 상위 경로를 링크로 나열한다.","visual_anatomy":["ancestor links","separators","current page label"],"when_to_use":["계층 구조가 깊은 사이트에서 현재 위치를 알려줄 때","상위 페이지로 돌아가기 쉽게 할 때"],"anti_use":["단일 페이지나 얕은 구조에는 불필요하다","주요 navigation을 대체하지 않는다"],"prompt_phrases":["상단에 홈 > 대시보드 > 설정 breadcrumb를 넣어줘","현재 위치 경로를 브레드크럼으로 보여줘"],"related":[{"id":"pagination","relation":"use-with","note":"문서 사이트에서는 상단 breadcrumb(계층 위치)와 하단 prev/next pagination(선형 이동)이 한 세트로 쓰여 순서가 있는 학습 경로를 만든다."}]},{"id":"pagination","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"페이지네이션","aliases":["페이지 이동","pagination"]},"en":{"name":"Pagination","aliases":["Page navigation"]},"one_liner":"긴 목록을 여러 페이지로 나누고 이동하게 하는 요소.","description":"이전/다음, 페이지 번호, 현재 페이지 표시로 구성된다.","visual_anatomy":["previous button","page numbers","active page","next button"],"when_to_use":["데이터가 많아 한 번에 모두 보여주기 어려울 때","사용자가 위치를 유지하며 탐색해야 할 때"],"anti_use":["끊김 없는 탐색이 더 중요하면 infinite scroll을 검토한다","적은 항목에는 불필요하다"],"prompt_phrases":["테이블 아래에 pagination을 넣어줘","이전 다음 버튼과 페이지 번호를 보여줘"],"related":[{"id":"breadcrumb","relation":"use-with","note":"문서 페이지 하단의 이전/다음 문서 링크(prev/next)는 pagination의 한 형태로, 상단 breadcrumb와 함께 쓰여 선형 학습 경로를 만든다."}]},{"id":"stepper","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"스테퍼","aliases":["단계 표시","progress steps","단계 네비게이션"]},"en":{"name":"Stepper","aliases":["Progress steps","Wizard steps"]},"one_liner":"여러 단계로 된 절차에서 현재 진행 단계를 보여주는 요소.","description":"가입, 결제, 설정 마법사처럼 순서가 있는 과정을 단계로 표시한다.","visual_anatomy":["step indicators","completed state","active step","connecting line"],"when_to_use":["사용자가 몇 단계 중 어디에 있는지 알아야 할 때","순서대로 완료하는 흐름일 때"],"anti_use":["단일 화면 작업에는 과하다","순서가 자유로운 탐색에는 tabs가 더 적합할 수 있다"],"prompt_phrases":["가입 절차를 보여주는 stepper를 넣어줘","현재 2단계가 강조된 단계 표시를 만들어줘"]},{"id":"navigation-rail","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"내비게이션 레일","aliases":["좌측 아이콘 메뉴","nav rail"]},"en":{"name":"Navigation rail","aliases":["Nav rail"]},"one_liner":"화면 한쪽에 세로로 배치된 주요 목적지 이동 영역.","description":"아이콘과 짧은 라벨로 주요 섹션을 전환하며 데스크톱/태블릿 레이아웃에서 자주 쓰인다.","visual_anatomy":["vertical rail","destination icons","active indicator","optional labels"],"when_to_use":["앱의 주요 섹션이 3-7개일 때","콘텐츠 영역을 넓게 유지하고 싶을 때"],"anti_use":["복잡한 계층 메뉴는 sidebar가 낫다","모바일 하단 navigation과 경쟁시키지 않는다"],"prompt_phrases":["왼쪽에 아이콘 중심 navigation rail을 넣어줘","현재 메뉴가 강조된 세로 내비게이션을 만들어줘"]},{"id":"sidebar-nav","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"사이드바 내비게이션","aliases":["사이드 메뉴","sidebar menu"]},"en":{"name":"Sidebar navigation","aliases":["Side navigation","Sidebar menu"]},"one_liner":"화면 옆에 메뉴 목록을 세로로 배치한 내비게이션.","description":"섹션, 하위 메뉴, active 상태를 함께 보여주며 관리 도구에 자주 쓰인다.","visual_anatomy":["side panel","nav items","active item","optional nested groups"],"when_to_use":["대시보드나 관리 화면처럼 반복 탐색이 필요할 때","메뉴 계층을 계속 보여줘야 할 때"],"anti_use":["단순 랜딩 페이지에는 과하다","좁은 모바일에서는 drawer나 bottom nav로 바꾼다"],"prompt_phrases":["대시보드 왼쪽에 sidebar navigation을 넣어줘","활성 메뉴가 표시된 사이드 메뉴를 만들어줘"]},{"id":"chip","status":"draft","category":"selection","group":"selection-options","ko":{"name":"칩","aliases":["태그 버튼","pill","chip"]},"en":{"name":"Chip","aliases":["Pill","Tag chip"]},"one_liner":"작은 알약 모양으로 선택, 필터, 속성을 표시하는 요소.","description":"라벨, 선택 상태, 삭제 아이콘을 조합해 필터나 태그를 표현한다.","visual_anatomy":["rounded pill container","text label","selected state","optional remove icon"],"when_to_use":["선택된 필터를 보여줄 때","항목의 짧은 속성이나 태그를 표시할 때"],"anti_use":["긴 설명 문장을 담지 않는다","주요 CTA 버튼처럼 쓰지 않는다"],"prompt_phrases":["선택된 필터를 chip으로 보여줘","삭제 가능한 태그 칩을 넣어줘"]},{"id":"button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"버튼","aliases":["button","실행 버튼"]},"en":{"name":"Button","aliases":["Action button"]},"one_liner":"사용자가 눌러 명령이나 동작을 실행하는 요소.","description":"라벨과 스타일로 행동의 의미와 중요도를 전달한다.","visual_anatomy":["button container","label","optional icon","hover or pressed state"],"when_to_use":["사용자가 명확한 행동을 실행해야 할 때","폼 제출이나 저장 같은 명령이 있을 때"],"anti_use":["페이지 이동만 의미하면 link를 검토한다","상태 전환은 switch나 checkbox가 더 명확할 수 있다"],"prompt_phrases":["저장 버튼을 오른쪽 아래에 넣어줘","폼 제출용 button을 만들어줘"]},{"id":"primary-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"주요 버튼","aliases":["primary button","메인 CTA"]},"en":{"name":"Primary button","aliases":["Primary action","CTA button"]},"one_liner":"화면에서 가장 중요한 행동을 강조하는 버튼.","description":"색상, 채움, 대비로 다른 버튼보다 강하게 보이게 만든다.","visual_anatomy":["filled container","high contrast label","optional leading icon"],"when_to_use":["사용자가 가장 먼저 해야 할 행동이 하나일 때","저장 제출 시작 같은 핵심 CTA가 있을 때"],"anti_use":["한 화면에 너무 많이 두면 중요도가 흐려진다","위험 행동은 destructive button으로 구분한다"],"prompt_phrases":["가장 중요한 행동은 primary button으로 강조해줘","시작하기 CTA를 파란색 주요 버튼으로 넣어줘"]},{"id":"secondary-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"보조 버튼","aliases":["secondary button","outline button"]},"en":{"name":"Secondary button","aliases":["Outline button","Secondary action"]},"one_liner":"주요 행동보다 덜 중요한 선택지를 제공하는 버튼.","description":"테두리나 낮은 대비 스타일로 primary action보다 약하게 보인다.","visual_anatomy":["outlined or subtle container","label","lower visual weight"],"when_to_use":["취소","나중에 하기","보조 행동처럼 덜 중요한 명령이 있을 때"],"anti_use":["화면의 핵심 CTA를 secondary로 숨기지 않는다","단순 링크는 link 스타일을 검토한다"],"prompt_phrases":["취소는 secondary button으로 넣어줘","주요 버튼 옆에 보조 버튼을 배치해줘"]},{"id":"destructive-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"위험 버튼","aliases":["삭제 버튼","destructive button","danger button"]},"en":{"name":"Destructive button","aliases":["Danger button","Delete button"]},"one_liner":"삭제나 되돌리기 어려운 위험한 행동을 나타내는 버튼.","description":"보통 빨간색 계열과 경고 문맥으로 사용자가 위험을 인지하게 한다.","visual_anatomy":["danger color container or text","warning label","optional trash icon"],"when_to_use":["삭제","초기화","권한 해제처럼 손실 가능성이 있는 행동일 때"],"anti_use":["일반 실패 상태 강조에 남용하지 않는다","위험 행동에는 확인 dialog를 함께 검토한다"],"prompt_phrases":["계정 삭제는 destructive button으로 표시해줘","위험한 삭제 버튼은 빨간색으로 구분해줘"]},{"id":"icon-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"아이콘 버튼","aliases":["icon button","아이콘만 있는 버튼"]},"en":{"name":"Icon button","aliases":["Icon-only button"]},"one_liner":"텍스트 대신 아이콘으로 행동을 표현하는 버튼.","description":"좋아요, 닫기, 검색, 설정처럼 익숙한 행동에 작은 공간으로 쓴다.","visual_anatomy":["square or circular hit area","centered icon","hover state","accessible label"],"when_to_use":["아이콘 의미가 명확하고 공간이 좁을 때","반복 카드 안의 빠른 행동이 필요할 때"],"anti_use":["낯선 아이콘은 텍스트 라벨이나 tooltip을 붙인다","접근성 라벨 없이 쓰지 않는다"],"prompt_phrases":["카드 오른쪽에 하트 icon button을 넣어줘","닫기 아이콘 버튼에는 tooltip을 붙여줘"]},{"id":"floating-action-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"플로팅 버튼","aliases":["FAB","floating action button","떠 있는 버튼","라벨 FAB","extended FAB"]},"en":{"name":"Floating action button","aliases":["FAB","Extended FAB"]},"one_liner":"화면 위에 떠 있는 핵심 행동 버튼.","description":"보통 둥글거나 확장형이며 새 항목 만들기 같은 주요 행동을 항상 보이게 한다. 아이콘과 텍스트 라벨을 함께 보여주는 넓은 pill 형태(extended FAB)도 같은 개념의 변형이며, 스크롤 시 라벨을 접어 아이콘만 남기는 방식으로 의미를 유지할 수 있다.","visual_anatomy":["floating circular button","elevation shadow","icon","fixed position","optional text label pill variant","collapse-to-icon on scroll"],"when_to_use":["모바일이나 앱 화면에서 가장 중요한 생성 행동을 빠르게 제공할 때"],"anti_use":["여러 개를 남발하지 않는다","일반 폼 제출 버튼 대신 쓰지 않는다"],"prompt_phrases":["오른쪽 아래에 플러스 FAB를 넣어줘","새 글 작성 floating action button을 만들어줘"],"related":[{"id":"speed-dial","relation":"compare","note":"단일 FAB가 눌렸을 때 보조 행동 3-4개로 펼쳐지는 조합은 speed-dial 쪽 전개-펼침 전환이며, 펼침 중 배경 스크림을 둘지는 주 행동과 보조 행동의 위계에 따라 결정한다."}]},{"id":"link","status":"draft","category":"action","group":"action-buttons","ko":{"name":"링크","aliases":["텍스트 링크","link"]},"en":{"name":"Link","aliases":["Text link","Hyperlink"]},"one_liner":"다른 위치나 페이지로 이동하는 텍스트 요소.","description":"밑줄, 색상, 화살표 등으로 클릭 가능한 이동을 나타낸다.","visual_anatomy":["text label","link color","underline or arrow","hover state"],"when_to_use":["페이지 이동이나 외부 문서 열기처럼 navigation이 목적일 때"],"anti_use":["명령 실행에는 button을 쓴다","중요한 CTA를 작은 링크로 숨기지 않는다"],"prompt_phrases":["자세히 보기 link를 카드 아래에 넣어줘","외부 문서로 이동하는 텍스트 링크를 추가해줘"]},{"id":"toolbar","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"툴바","aliases":["도구막대","toolbar"]},"en":{"name":"Toolbar","aliases":["Action toolbar"]},"one_liner":"관련 명령 버튼들을 한 줄이나 한 영역에 모은 도구 영역.","description":"편집, 정렬, 필터, 보기 전환 같은 반복 행동을 한 곳에 배치한다.","visual_anatomy":["horizontal action group","icon buttons","separators","optional dropdowns"],"when_to_use":["여러 명령을 빠르게 반복 실행해야 할 때","편집기나 데이터 화면의 도구를 모을 때"],"anti_use":["명령이 한두 개뿐이면 과하다","서로 무관한 행동을 한 툴바에 섞지 않는다"],"prompt_phrases":["표 위에 필터와 정렬 toolbar를 넣어줘","에디터 상단에 아이콘 툴바를 만들어줘"]},{"id":"split-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"스플릿 버튼","aliases":["분리 버튼","split button"]},"en":{"name":"Split button","aliases":["Button with menu"]},"one_liner":"기본 행동과 추가 옵션 메뉴를 한 버튼 안에 나눈 요소.","description":"왼쪽은 기본 실행, 오른쪽 화살표는 관련 옵션 목록을 여는 식으로 구성된다.","visual_anatomy":["primary action segment","divider","chevron segment","optional menu"],"when_to_use":["가장 흔한 행동은 즉시 실행하고 변형 옵션도 제공해야 할 때"],"anti_use":["사용자가 기본 행동을 혼동할 수 있으면 일반 dropdown menu가 낫다","모바일 좁은 영역에는 부담스럽다"],"prompt_phrases":["내보내기 버튼을 split button으로 만들어서 CSV와 PDF 옵션을 넣어줘"]},{"id":"menu-item","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"메뉴 항목","aliases":["menu item","메뉴 아이템"]},"en":{"name":"Menu item","aliases":["Menu option"]},"one_liner":"메뉴 안에서 하나의 명령이나 선택지를 나타내는 행.","description":"라벨, 아이콘, 단축키, 위험 상태 등을 한 줄에 표시한다.","visual_anatomy":["row container","optional icon","label","shortcut or checkmark"],"when_to_use":["dropdown menu나 command menu 안의 개별 행동을 보여줄 때"],"anti_use":["독립적인 주요 행동은 메뉴 안에 숨기지 않는다","긴 설명을 메뉴 항목에 넣지 않는다"],"prompt_phrases":["드롭다운 안에 삭제 menu item을 넣어줘","메뉴 항목 오른쪽에 단축키를 보여줘"]},{"id":"card","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"카드","aliases":["card","정보 카드"]},"en":{"name":"Card","aliases":["Content card"]},"one_liner":"관련 정보를 하나의 박스 안에 묶어 보여주는 컨테이너.","description":"제목, 설명, 이미지, 행동 버튼을 한 덩어리로 묶어 스캔하기 쉽게 한다.","visual_anatomy":["container","title","body text","optional media","optional actions"],"when_to_use":["반복되는 항목을 목록이나 그리드로 보여줄 때","하나의 주제를 독립적으로 묶을 때"],"anti_use":["페이지 섹션 전체를 카드처럼 중첩하지 않는다","단순 텍스트 한 줄만 담기에는 과하다"],"prompt_phrases":["각 기능을 card로 묶어서 보여줘","이미지와 설명이 있는 정보 카드를 만들어줘"]},{"id":"dialog","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"모달","aliases":["다이얼로그","modal","dialog"]},"en":{"name":"Dialog","aliases":["Modal","Modal dialog"]},"one_liner":"현재 화면 위에 떠서 사용자의 집중 행동을 요구하는 창.","description":"배경을 덮고 제목, 내용, 행동 버튼을 보여주며 닫기 전까지 주의를 모은다.","visual_anatomy":["backdrop","dialog surface","title","content","action buttons","close button"],"when_to_use":["확인","입력","중요한 결정을 화면 흐름 위에서 처리할 때"],"anti_use":["단순 안내는 toast나 banner가 낫다","긴 복잡한 작업은 별도 페이지나 drawer가 적합할 수 있다"],"prompt_phrases":["삭제 확인 modal을 띄워줘","화면 중앙에 dialog를 열고 취소와 삭제 버튼을 넣어줘"],"related":[{"id":"drawer","relation":"compare","note":"즉시 결정이나 확인을 막고 받아야 하면 dialog, 현재 화면 맥락을 유지하며 보조 작업을 하면 drawer가 낫다."},{"id":"side-sheet","relation":"alternative","note":"넓은 화면에서 상세나 편집을 옆으로 열면 side sheet가 더 작업 친화적이다."},{"id":"modal-bottom-sheet","relation":"alternative","note":"모바일에서 짧은 선택을 하단에서 받으면 modal bottom sheet가 더 자연스럽다."}]},{"id":"drawer","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"드로어","aliases":["시트","사이드 패널","drawer","sheet"]},"en":{"name":"Drawer","aliases":["Sheet","Side panel"]},"one_liner":"화면 한쪽에서 밀려 나오는 보조 패널.","description":"세부 정보, 필터, 편집 폼을 현재 화면 맥락 안에서 보여준다.","visual_anatomy":["side or bottom panel","backdrop optional","handle or close button","content area"],"when_to_use":["현재 목록을 유지한 채 상세나 설정을 보여줄 때","필터 패널을 옆에서 열 때"],"anti_use":["사용자의 즉각 확인이 필요한 경고에는 dialog가 더 명확하다","전체 작업 흐름은 page가 낫다"],"prompt_phrases":["오른쪽에서 열리는 drawer에 상세 정보를 보여줘","모바일에서는 bottom sheet로 열리게 해줘"],"related":[{"id":"dialog","relation":"compare","note":"사용자 결정을 막고 받아야 하면 dialog, 화면 맥락을 유지한 보조 패널이면 drawer다."},{"id":"side-sheet","relation":"compare","note":"drawer는 탐색/패널 전반을 넓게 부르고, side sheet는 작업 맥락의 측면 표면에 더 가깝다."},{"id":"modal-bottom-sheet","relation":"alternative","note":"모바일 하단에서 배경을 막아 선택을 받으면 modal bottom sheet를 쓴다."}]},{"id":"popover","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"팝오버","aliases":["작은 떠있는 패널","popover"]},"en":{"name":"Popover","aliases":["Floating panel"]},"one_liner":"특정 트리거 근처에 뜨는 작은 보조 패널.","description":"날짜 선택, 간단한 설정, 보조 정보를 현재 위치 근처에서 보여준다.","visual_anatomy":["trigger","floating panel","arrow optional","compact content"],"when_to_use":["작은 입력이나 보조 정보를 주변 맥락에서 보여줄 때"],"anti_use":["중요한 결정이나 긴 내용은 dialog나 drawer가 낫다","hover-only 정보는 tooltip을 검토한다"],"prompt_phrases":["버튼을 누르면 작은 popover가 열리게 해줘","날짜 선택기를 팝오버로 띄워줘"],"related":[{"id":"dropdown-menu","relation":"compare","note":"명령 목록이면 dropdown menu, 작은 폼이나 보조 콘텐츠가 있으면 popover가 적합하다."},{"id":"tooltip","relation":"compare","note":"hover/focus의 짧은 설명만 필요하면 tooltip이고, 상호작용 콘텐츠가 있으면 popover다."},{"id":"dialog","relation":"alternative","note":"중요한 결정이나 긴 내용은 popover보다 dialog가 안전하다."}]},{"id":"header","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"헤더","aliases":["상단바","top bar","header"]},"en":{"name":"Header","aliases":["Top bar","App header"]},"one_liner":"화면 상단에서 브랜드, 제목, 주요 동작을 담는 영역.","description":"로고, 페이지 제목, 검색, 내비게이션, 사용자 메뉴가 배치된다.","visual_anatomy":["top container","brand or title","navigation","actions","profile area"],"when_to_use":["페이지의 정체성과 주요 이동/행동을 항상 보여줘야 할 때"],"anti_use":["콘텐츠보다 과하게 커지면 작업 화면의 밀도가 낮아진다","모바일에서는 간결해야 한다"],"prompt_phrases":["상단에 로고와 검색창이 있는 header를 넣어줘","오른쪽에 사용자 메뉴가 있는 top bar를 만들어줘"]},{"id":"footer","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"푸터","aliases":["하단 영역","footer"]},"en":{"name":"Footer","aliases":["Page footer"]},"one_liner":"화면 하단에서 보조 링크와 메타 정보를 담는 영역.","description":"저작권, 정책 링크, 보조 navigation, 연락처 등을 정리한다.","visual_anatomy":["bottom container","link groups","metadata","optional social icons"],"when_to_use":["웹사이트 하단에 반복되는 보조 정보를 제공할 때"],"anti_use":["앱의 핵심 명령을 footer에 숨기지 않는다","모바일 고정 하단바와 혼동하지 않는다"],"prompt_phrases":["페이지 아래에 정책 링크가 있는 footer를 넣어줘","하단에 저작권과 보조 링크를 정리해줘"]},{"id":"grid","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"그리드","aliases":["격자 배치","grid layout"]},"en":{"name":"Grid","aliases":["Grid layout"]},"one_liner":"항목을 행과 열의 격자로 배치하는 레이아웃.","description":"카드, 이미지, 상품, 용어 목록처럼 반복 항목을 균일하게 보여준다.","visual_anatomy":["columns","rows","gutters","repeated items"],"when_to_use":["비슷한 항목을 한눈에 비교하거나 스캔하게 할 때"],"anti_use":["순서와 읽기 흐름이 중요하면 list가 낫다","항목 크기가 제각각이면 masonry나 다른 구조를 검토한다"],"prompt_phrases":["카드를 3열 grid로 배치해줘","용어 목록을 반응형 그리드로 보여줘"]},{"id":"list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"리스트","aliases":["목록","list"]},"en":{"name":"List","aliases":["List view"]},"one_liner":"항목을 세로로 나열해 읽고 선택하게 하는 구조.","description":"각 행은 텍스트, 아이콘, 보조 정보, 행동을 가질 수 있다.","visual_anatomy":["stacked rows","primary text","secondary text","optional leading icon"],"when_to_use":["항목을 순서대로 읽거나 비교해야 할 때","모바일에서 스캔 가능한 목록이 필요할 때"],"anti_use":["시각 비교가 중요하면 grid나 card layout이 낫다","표 형식의 행열 데이터는 table을 쓴다"],"prompt_phrases":["알림을 list로 세로 나열해줘","각 행에 아이콘과 설명이 있는 목록을 만들어줘"]},{"id":"accordion","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"아코디언","aliases":["접히는 목록","accordion"]},"en":{"name":"Accordion","aliases":["Disclosure list"]},"one_liner":"제목을 누르면 내용을 펼치거나 접는 구조.","description":"FAQ나 설정 그룹처럼 많은 내용을 압축해 보여준다.","visual_anatomy":["accordion item","trigger row","chevron","expanded content panel"],"when_to_use":["여러 섹션 중 필요한 내용만 펼쳐 보게 할 때","FAQ처럼 질문과 답변을 묶을 때"],"anti_use":["항상 비교해야 하는 정보는 접지 않는다","핵심 정보를 숨기는 용도로 쓰지 않는다"],"prompt_phrases":["FAQ를 accordion으로 만들어줘","각 항목을 접고 펼칠 수 있게 해줘"]},{"id":"carousel","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"캐러셀","aliases":["슬라이드 카드","carousel"]},"en":{"name":"Carousel","aliases":["Slider carousel"]},"one_liner":"여러 콘텐츠를 좌우로 넘겨 보는 구조.","description":"카드나 이미지를 한 번에 일부만 보여주고 이전/다음으로 이동한다.","visual_anatomy":["viewport","slides","previous and next controls","indicators"],"when_to_use":["추천 카드나 이미지 묶음을 제한된 공간에서 보여줄 때"],"anti_use":["중요 정보를 숨기기 쉽다","사용자가 반드시 봐야 하는 콘텐츠에는 부적합하다"],"prompt_phrases":["추천 카드를 carousel로 넘기게 해줘","좌우 화살표가 있는 슬라이드 영역을 만들어줘"]},{"id":"tooltip","status":"draft","category":"feedback","group":"feedback-confirmation-help","ko":{"name":"툴팁","aliases":["도움말 말풍선","tooltip"]},"en":{"name":"Tooltip","aliases":["Hint bubble"]},"one_liner":"hover나 focus 때 짧은 설명을 보여주는 작은 도움말.","description":"아이콘 버튼이나 낯선 용어의 의미를 짧게 보충한다. 문서 코드 블록 안에서는 트리거가 특정 토큰/줄에 고정된 어노테이션 마커가 되기도 하는데, 이때도 짧은 설명을 보여준다는 동작 자체는 같고 트리거가 코드 좌표에 앵커된다는 맥락만 다르다.","visual_anatomy":["trigger element","small floating bubble","short text","optional arrow","code-anchored marker variant for inline code annotations"],"when_to_use":["아이콘 의미를 보충할 때","짧은 보조 설명이 필요할 때","코드 블록의 특정 토큰/줄에 짧은 설명을 앵커해야 할 때"],"anti_use":["중요한 정보를 tooltip에만 숨기지 않는다","긴 설명이나 상호작용 요소를 넣지 않는다"],"prompt_phrases":["아이콘 버튼에 tooltip을 붙여줘","hover하면 짧은 도움말이 나오게 해줘"],"related":[{"id":"popover","relation":"compare","note":"짧은 설명만 보여주면 tooltip, 버튼이나 입력 같은 상호작용 콘텐츠가 있으면 popover다."},{"id":"dropdown-menu","relation":"compare","note":"선택하거나 실행할 항목 목록이면 tooltip이 아니라 dropdown menu다."}]},{"id":"toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"토스트","aliases":["스낵바","toast","snackbar"]},"en":{"name":"Toast","aliases":["Snackbar","Notification toast"]},"one_liner":"작업 결과를 잠깐 보여주고 사라지는 작은 알림.","description":"저장 완료, 복사 완료, 오류처럼 즉각적인 피드백을 화면 가장자리에서 보여준다.","visual_anatomy":["floating notification","message text","icon optional","close or action button"],"when_to_use":["사용자 행동 직후 결과를 짧게 알려줄 때","화면 흐름을 막지 않아야 할 때"],"anti_use":["중요한 결정이나 긴 오류 설명은 dialog나 alert를 쓴다","사용자가 반드시 읽어야 하는 정보를 자동으로 사라지게 하지 않는다"],"prompt_phrases":["저장되면 오른쪽 아래에 toast를 띄워줘","복사 완료 스낵바를 보여줘"],"related":[{"id":"snackbar","relation":"compare","note":"짧은 결과만 알리면 toast, 되돌리기 같은 한 가지 action이 중요하면 snackbar가 더 명확하다."},{"id":"alert","relation":"compare","note":"사용자가 계속 봐야 하는 상태나 오류는 자동으로 사라지는 toast보다 alert/banner가 낫다."},{"id":"dialog","relation":"alternative","note":"사용자 결정을 받아야 하는 위험 행동은 toast가 아니라 dialog를 쓴다."}]},{"id":"alert","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"알림 배너","aliases":["alert","banner","경고 박스"]},"en":{"name":"Alert","aliases":["Banner","Inline alert"]},"one_liner":"중요한 상태나 경고를 지속적으로 보여주는 메시지 영역.","description":"페이지 안에 배치되어 정보, 성공, 경고, 오류 상태를 설명한다.","visual_anatomy":["status icon","message","colored container","optional action"],"when_to_use":["사용자가 알아야 하는 상태를 화면 안에 유지해야 할 때","오류나 경고를 맥락 안에서 설명할 때"],"anti_use":["짧은 완료 피드백은 toast가 낫다","확인을 요구하는 위험 행동은 dialog를 검토한다"],"prompt_phrases":["상단에 오류 alert banner를 보여줘","결제 실패 안내를 inline alert로 넣어줘"],"related":[{"id":"toast","relation":"compare","note":"잠깐 보여도 되는 완료 피드백은 toast, 화면 안에 유지해야 하는 안내는 alert/banner다."},{"id":"snackbar","relation":"compare","note":"짧은 메시지와 한 가지 action이면 snackbar, 맥락 안에서 지속 표시하면 alert가 맞다."},{"id":"inline-alert","relation":"compare","note":"폼이나 섹션 내부 오류처럼 위치 맥락이 중요하면 inline alert로 좁혀 부른다."},{"id":"callout","relation":"compare","note":"문서 본문 중간에 삽입되는 note/warning/tip 등급 강조 박스는 callout이고, 앱 화면의 지속적 상태/오류 안내는 alert다."}]},{"id":"callout","status":"draft","category":"feedback","group":"feedback-alerts-toasts","kind":"block","ko":{"name":"콜아웃","aliases":["callout","admonition","강조 박스"]},"en":{"name":"Callout","aliases":["Admonition","Callout box"]},"one_liner":"문서 본문 중간에 note/tip/info/caution/danger 등급으로 구분해 삽입하는 강조 박스.","description":"좌측 컬러 바 또는 배경색과 아이콘, 등급 라벨로 문단 사이에 삽입되어 본문 흐름을 방해하지 않으면서 중요한 보충 정보를 강조한다. note/tip/info/caution/danger 5등급 명명은 Docusaurus 같은 문서 프레임워크의 admonition 관례를 따른다.","visual_anatomy":["left color bar or tinted background","grade icon","title label (Note/Tip/Info/Caution/Danger)","body text","full-width insertion between paragraphs"],"when_to_use":["문서 본문 중간에 보충 설명","팁","주의사항을 등급별로 구분해 강조해야 할 때"],"anti_use":["앱 화면의 지속적인 상태나 오류 안내는 alert/banner가 더 정확하다","잠깐 보여줄 완료 피드백은 toast를 쓴다"],"prompt_phrases":["문서 본문에 note/warning 등급의 callout box를 넣어줘","왼쪽 컬러 바가 있는 admonition 박스를 만들어줘"],"related":[{"id":"alert","relation":"compare","note":"callout은 문서 본문 저작 콘텐츠에 삽입되는 등급별 강조 박스이고, alert는 앱 화면의 상태/오류를 알리는 지속적 메시지 영역이다."}]},{"id":"badge","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"배지","aliases":["badge","숫자 표시","상태 표시"]},"en":{"name":"Badge","aliases":["Status badge","Count badge"]},"one_liner":"숫자나 짧은 상태를 작게 강조하는 표시.","description":"알림 개수, 상태, 라벨을 작고 눈에 띄게 보여준다.","visual_anatomy":["small pill or dot","count or label","status color"],"when_to_use":["읽지 않은 개수나 상태를 빠르게 표시할 때","카드나 메뉴 옆에 짧은 메타 정보를 붙일 때"],"anti_use":["긴 문장을 담지 않는다","주요 행동 버튼처럼 쓰지 않는다"],"prompt_phrases":["알림 아이콘 위에 숫자 badge를 붙여줘","상태를 초록색 배지로 표시해줘"]},{"id":"progress-bar","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"진행바","aliases":["프로그레스 바","progress bar"]},"en":{"name":"Progress bar","aliases":["Linear progress"]},"one_liner":"작업 진행 정도를 막대 길이로 보여주는 요소.","description":"업로드, 설치, 단계 진행처럼 전체 대비 현재 진행률을 시각화한다.","visual_anatomy":["track","filled indicator","optional percentage label"],"when_to_use":["진행률을 알 수 있고 사용자가 기다려야 할 때","긴 작업의 상태를 안정적으로 보여줄 때"],"anti_use":["진행률을 알 수 없으면 spinner나 indeterminate progress를 쓴다","짧은 즉시 동작에는 불필요하다"],"prompt_phrases":["업로드 진행률을 progress bar로 보여줘","65퍼센트가 채워진 진행바를 넣어줘"]},{"id":"spinner","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"로딩 스피너","aliases":["spinner","loading indicator"]},"en":{"name":"Spinner","aliases":["Loading spinner","Circular progress"]},"one_liner":"작업 중임을 회전 애니메이션으로 보여주는 로딩 표시.","description":"정확한 진행률은 모르지만 처리 중임을 알려야 할 때 쓴다.","visual_anatomy":["circular ring","rotating gap","loading label optional"],"when_to_use":["짧은 비동기 처리 중 상태를 알려야 할 때","진행률을 측정할 수 없을 때"],"anti_use":["긴 작업에는 설명과 progress bar를 함께 검토한다","화면 전체를 불필요하게 막지 않는다"],"prompt_phrases":["데이터 불러오는 동안 loading spinner를 보여줘","버튼 안에 작은 스피너를 넣어줘"]},{"id":"skeleton","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"스켈레톤","aliases":["skeleton loader","로딩 자리표시자"]},"en":{"name":"Skeleton","aliases":["Skeleton loader","Placeholder"]},"one_liner":"실제 콘텐츠가 들어올 자리의 형태를 미리 보여주는 로딩 UI.","description":"카드, 텍스트, 이미지 영역의 회색 블록을 보여줘 로딩 중 레이아웃을 예측하게 한다. 모바일 리스트 행에 쓸 때는 실제 행과 같은 아바타-텍스트-트레일링 3분할 구조를 반복하고, 로딩이 200ms 미만으로 끝나면 스켈레톤 자체를 아예 띄우지 않는다.","visual_anatomy":["placeholder blocks","text lines","media rectangle","subtle shimmer optional","avatar placeholder circle for list rows","two-line text placeholder for list rows","trailing action placeholder for list rows"],"when_to_use":["콘텐츠 구조를 알고 있고 로딩 시간이 체감될 때","레이아웃 점프를 줄이고 싶을 때","모바일 리스트/피드 행이 로딩되는 동안 실제 행 구조를 미리 보여줄 때"],"anti_use":["매우 짧은 로딩에는 과하다","실제 구조와 다른 skeleton은 혼란을 준다","로딩이 200ms 미만으로 끝나면 아예 표시하지 않는다"],"prompt_phrases":["카드 목록 로딩 중에는 skeleton loader를 보여줘","이미지와 텍스트 자리표시자를 넣어줘","모바일 리스트 행 로딩에 아바타-텍스트-트레일링 스켈레톤을 반복해줘"]},{"id":"empty-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"빈 상태","aliases":["empty state","데이터 없음 화면"]},"en":{"name":"Empty state","aliases":["No data state"]},"one_liner":"보여줄 데이터가 없을 때 이유와 다음 행동을 안내하는 화면.","description":"아이콘, 짧은 문구, 보조 설명, 생성 버튼으로 빈 화면을 의미 있게 만든다.","visual_anatomy":["empty icon or illustration","title","explanation","optional action button"],"when_to_use":["검색 결과가 없거나 아직 데이터가 없을 때","사용자가 다음 행동을 알아야 할 때"],"anti_use":["오류 상태와 섞지 않는다","빈 화면을 아무 설명 없이 방치하지 않는다"],"prompt_phrases":["데이터가 없을 때 empty state를 보여줘","빈 목록에는 새 항목 만들기 버튼을 넣어줘"]},{"id":"validation-message","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"검증 메시지","aliases":["입력 오류 문구","validation error","helper text"]},"en":{"name":"Validation message","aliases":["Error message","Helper text"]},"one_liner":"입력값의 오류나 도움말을 필드 근처에서 알려주는 문구.","description":"어떤 값이 왜 잘못됐고 어떻게 고쳐야 하는지 입력 요소 바로 아래에 표시한다.","visual_anatomy":["field","error color","message text","optional error icon"],"when_to_use":["폼 입력값이 잘못됐거나 형식 안내가 필요할 때"],"anti_use":["오류를 필드와 떨어진 곳에만 표시하지 않는다","모호한 문구만 쓰지 않는다"],"prompt_phrases":["이메일 형식이 틀리면 validation message를 입력창 아래에 보여줘"]},{"id":"status-indicator","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"상태 표시","aliases":["status indicator","상태 점","presence"]},"en":{"name":"Status indicator","aliases":["Presence indicator","Status dot"]},"one_liner":"온라인, 성공, 오류 같은 상태를 작은 색상 표시로 보여주는 요소.","description":"점, 라벨, 색상으로 항목이나 사용자의 현재 상태를 빠르게 전달한다.","visual_anatomy":["colored dot","short label","optional outline or pulse"],"when_to_use":["서버 상태","사용자 접속 상태","처리 상태를 빠르게 구분할 때"],"anti_use":["색상만으로 의미를 전달하지 않는다","복잡한 설명은 alert나 detail text를 함께 쓴다"],"prompt_phrases":["온라인 상태를 초록색 status indicator로 표시해줘","서버 상태 옆에 상태 점을 붙여줘"]},{"id":"table","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"테이블","aliases":["표","data table"]},"en":{"name":"Table","aliases":["Data table"]},"one_liner":"행과 열로 구조화된 데이터를 보여주는 요소.","description":"같은 속성을 가진 여러 항목을 비교, 정렬, 스캔하게 한다.","visual_anatomy":["header row","columns","data rows","cell borders or dividers"],"when_to_use":["여러 항목의 속성을 비교해야 할 때","정렬이나 행 선택이 필요한 데이터 화면에서"],"anti_use":["모바일에서 열이 너무 많으면 카드나 list로 바꾼다","단순 텍스트 목록에는 list가 낫다"],"prompt_phrases":["사용자 목록을 data table로 보여줘","행과 열이 있는 테이블을 만들어줘"]},{"id":"avatar","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"아바타","aliases":["프로필 이미지","avatar"]},"en":{"name":"Avatar","aliases":["User avatar","Profile image"]},"one_liner":"사용자나 조직을 나타내는 작은 이미지 또는 이니셜.","description":"프로필 사진, 이니셜, fallback 색상으로 사람이나 계정을 식별한다.","visual_anatomy":["circular or rounded image","fallback initials","optional status badge"],"when_to_use":["사용자 목록","댓글","프로필 메뉴에서 사람을 빠르게 구분할 때"],"anti_use":["장식 이미지처럼 쓰지 않는다","의미 없는 랜덤 이미지는 혼란을 줄 수 있다"],"prompt_phrases":["댓글 옆에 avatar를 넣어줘","프로필 이미지가 없으면 이니셜을 보여줘"]},{"id":"metric-card","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"지표 카드","aliases":["통계 카드","KPI card","metric card"]},"en":{"name":"Metric card","aliases":["Stat card","KPI card"]},"one_liner":"핵심 숫자와 변화량을 카드 형태로 보여주는 데이터 요소.","description":"매출, 방문자, 전환율 같은 지표를 제목, 숫자, 증감 표시로 요약한다.","visual_anatomy":["label","large value","trend indicator","supporting text"],"when_to_use":["대시보드에서 중요한 지표를 빠르게 훑게 할 때"],"anti_use":["원인 분석이나 상세 데이터는 chart나 table을 함께 제공한다","너무 많은 지표 카드는 집중을 흐린다"],"prompt_phrases":["대시보드 상단에 metric card 4개를 배치해줘","방문자 수와 증감률을 지표 카드로 보여줘"]},{"id":"chart","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"차트","aliases":["그래프","chart"]},"en":{"name":"Chart","aliases":["Graph","Data visualization"]},"one_liner":"숫자 데이터를 시각적 형태로 보여주는 요소.","description":"막대, 선, 영역, 원형 등 데이터 관계에 맞는 형태로 추세나 비교를 표현한다.","visual_anatomy":["plot area","axes or labels","data marks","legend optional"],"when_to_use":["추세","비교","분포를 숫자보다 빠르게 이해하게 할 때"],"anti_use":["값이 한두 개뿐이면 metric card나 plain text가 낫다","장식용 차트는 피한다"],"prompt_phrases":["월별 매출을 line chart로 보여줘","카테고리별 비중을 bar chart로 비교해줘"]},{"id":"timeline","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"타임라인","aliases":["이력 목록","timeline"]},"en":{"name":"Timeline","aliases":["Activity timeline"]},"one_liner":"시간 순서대로 사건이나 활동을 보여주는 구조.","description":"점, 선, 시간 라벨, 이벤트 카드로 변경 이력이나 진행 과정을 표현한다.","visual_anatomy":["vertical line","event dots","timestamps","event content"],"when_to_use":["작업 이력","배송 상태","활동 로그처럼 순서가 중요한 데이터를 보여줄 때"],"anti_use":["순서가 중요하지 않은 항목은 list나 table이 낫다","너무 많은 이벤트는 필터가 필요하다"],"prompt_phrases":["주문 상태를 timeline으로 보여줘","활동 로그를 시간순 타임라인으로 정리해줘"]},{"id":"kanban","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"칸반","aliases":["kanban board","보드"]},"en":{"name":"Kanban","aliases":["Kanban board","Board"]},"one_liner":"항목을 상태별 열로 나눠 보여주는 보드 구조.","description":"할 일, 진행 중, 완료처럼 상태 column과 draggable card로 작업 흐름을 표현한다.","visual_anatomy":["columns","column headers","cards","drag handles optional"],"when_to_use":["작업이나 후보를 상태별로 이동시키며 관리할 때"],"anti_use":["정렬과 숫자 비교가 핵심이면 table이 낫다","항목 수가 너무 많으면 필터와 검색이 필요하다"],"prompt_phrases":["작업을 할 일 진행 중 완료 kanban board로 보여줘","카드를 상태별 열에 배치해줘"]},{"id":"calendar-view","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"캘린더 뷰","aliases":["달력 화면","calendar view"]},"en":{"name":"Calendar view","aliases":["Calendar"]},"one_liner":"날짜 격자 위에 일정이나 이벤트를 보여주는 화면.","description":"월, 주, 일 단위로 날짜와 이벤트를 배치해 시간 기반 정보를 탐색하게 한다.","visual_anatomy":["date grid","weekday header","event chips","current day highlight"],"when_to_use":["예약","일정","마감처럼 날짜 위치가 중요한 데이터를 보여줄 때"],"anti_use":["단순 날짜 선택은 date picker가 충분하다","이벤트가 적으면 list가 더 읽기 쉽다"],"prompt_phrases":["마감 일정을 calendar view로 보여줘","월간 달력에 이벤트 chip을 배치해줘"]},{"id":"tree-view","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"트리 뷰","aliases":["계층 목록","tree view"]},"en":{"name":"Tree view","aliases":["Tree","Hierarchical list"]},"one_liner":"폴더처럼 계층 구조를 펼치고 접어 보는 목록.","description":"부모와 자식 항목을 indentation, chevron, expanded state로 표현한다.","visual_anatomy":["nested rows","disclosure chevrons","indentation","selected row"],"when_to_use":["폴더","카테고리","문서 구조처럼 계층이 중요한 데이터를 탐색할 때"],"anti_use":["계층이 얕으면 list나 accordion이 더 단순하다","너무 깊은 구조는 검색이 필요하다"],"prompt_phrases":["파일 목록을 tree view로 보여줘","카테고리를 펼치고 접는 계층 목록으로 만들어줘"]},{"id":"description-list","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"설명 목록","aliases":["key value list","속성 목록"]},"en":{"name":"Description list","aliases":["Key-value list","Detail list"]},"one_liner":"이름과 값을 짝지어 상세 정보를 보여주는 목록.","description":"프로필, 주문 상세, 설정 요약처럼 속성명과 값을 나란히 표시한다.","visual_anatomy":["term label","value text","repeated rows","optional separators"],"when_to_use":["한 객체의 여러 속성을 읽기 쉽게 보여줄 때"],"anti_use":["여러 객체를 비교해야 하면 table이 낫다","긴 본문에는 일반 text layout이 낫다"],"prompt_phrases":["주문 상세를 key-value list로 보여줘","사용자 정보를 설명 목록으로 정리해줘"]},{"id":"icon","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"아이콘","aliases":["icon","심볼","그림 기호"]},"en":{"name":"Icon","aliases":["Symbol","Glyph"]},"one_liner":"행동, 상태, 대상을 작은 그림 기호로 표현하는 요소.","description":"텍스트를 보조하거나 공간이 좁은 곳에서 의미를 빠르게 전달한다.","visual_anatomy":["simple pictogram","consistent stroke or fill","optional label","accessible name when interactive"],"when_to_use":["반복되는 행동이나 상태를 빠르게 인식시킬 때","버튼이나 메뉴의 의미를 보조할 때"],"anti_use":["낯선 아이콘을 라벨 없이 단독으로 쓰지 않는다","장식 아이콘에 의미를 부여하지 않는다"],"prompt_phrases":["저장 버튼 옆에 save icon을 넣어줘","메뉴 항목마다 의미를 보여주는 아이콘을 붙여줘"]},{"id":"label","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"라벨","aliases":["label","이름표","필드명"]},"en":{"name":"Label","aliases":["Field label","Text label"]},"one_liner":"입력값이나 UI 요소가 무엇을 의미하는지 이름을 붙이는 짧은 텍스트.","description":"입력창, 스위치, 체크박스, 값 옆에 붙어 사용자가 목적을 이해하게 한다.","visual_anatomy":["short text","associated control","optional required mark","helper relationship"],"when_to_use":["입력 요소의 의미를 명확히 알려야 할 때","아이콘이나 값만으로 의미가 부족할 때"],"anti_use":["placeholder만으로 label을 대체하지 않는다","너무 긴 설명은 helper text로 분리한다"],"prompt_phrases":["입력창 위에 이름 label을 붙여줘","스위치 오른쪽에 알림 받기 라벨을 넣어줘"]},{"id":"divider","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"구분선","aliases":["divider","separator","분리선"]},"en":{"name":"Divider","aliases":["Separator","Rule"]},"one_liner":"관련 영역이나 항목 사이를 얇은 선으로 구분하는 요소.","description":"목록, 메뉴, 카드 내부에서 정보 덩어리의 경계를 시각적으로 만든다.","visual_anatomy":["thin horizontal or vertical line","spacing around line","low contrast color"],"when_to_use":["항목 사이의 경계를 가볍게 보여줄 때","섹션이 붙어 보여 혼란스러울 때"],"anti_use":["간격만으로 충분하면 선을 남발하지 않는다","너무 강한 색상으로 시선을 빼앗지 않는다"],"prompt_phrases":["설정 항목 사이에 divider를 넣어줘","카드 제목과 본문 사이를 얇은 구분선으로 나눠줘"]},{"id":"spacer","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"여백","aliases":["spacing","spacer","간격"]},"en":{"name":"Spacer","aliases":["Spacing","Gap"]},"one_liner":"요소 사이에 의도적인 빈 공간을 만들어 구조와 리듬을 잡는 요소.","description":"실제 보이는 컴포넌트는 아니지만 UI의 묶음, 위계, 읽기 흐름을 결정한다.","visual_anatomy":["empty space","consistent gap size","alignment relationship"],"when_to_use":["요소가 너무 붙어 보여 읽기 어려울 때","그룹 사이의 관계를 표현할 때"],"anti_use":["아무 의미 없이 큰 빈 공간을 만들지 않는다","반응형에서 여백이 콘텐츠를 밀어내지 않게 한다"],"prompt_phrases":["카드 사이 여백을 넉넉하게 줘","버튼 그룹과 본문 사이에 spacer를 넣어줘"]},{"id":"typography","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"타이포그래피","aliases":["typography","글자 스타일","텍스트 스타일"]},"en":{"name":"Typography","aliases":["Text style","Type scale"]},"one_liner":"제목, 본문, 캡션처럼 글자의 크기와 굵기, 위계를 정하는 체계.","description":"화면의 정보 우선순위를 글자 크기, 굵기, 줄간격으로 전달한다.","visual_anatomy":["heading text","body text","caption text","weight and size contrast"],"when_to_use":["정보의 위계를 명확히 보여줘야 할 때","같은 종류의 텍스트 스타일을 반복 적용할 때"],"anti_use":["너무 많은 글자 크기를 섞지 않는다","작은 영역에 hero 크기 글자를 쓰지 않는다"],"prompt_phrases":["제목 본문 캡션이 구분되는 typography scale을 적용해줘","카드 제목은 더 굵게 보여줘"]},{"id":"image","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"이미지","aliases":["image","사진","그림"]},"en":{"name":"Image","aliases":["Picture","Media image"]},"one_liner":"사진이나 그림을 화면 안에 표시하는 시각 요소.","description":"제품, 프로필, 콘텐츠 미리보기처럼 텍스트보다 시각 확인이 중요한 정보를 보여준다.","visual_anatomy":["image frame","aspect ratio","alt text meaning","optional caption"],"when_to_use":["사용자가 실제 모습이나 분위기를 확인해야 할 때","카드나 상세 화면의 시각 자료가 필요할 때"],"anti_use":["의미 없는 stock 이미지를 장식으로 남발하지 않는다","비율이 깨지거나 중요한 부분이 잘리지 않게 한다"],"prompt_phrases":["카드 상단에 상품 image를 넣어줘","16대9 비율의 썸네일 이미지를 보여줘"]},{"id":"logo","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"로고","aliases":["logo","브랜드 마크","product mark"]},"en":{"name":"Logo","aliases":["Brand mark","Product mark"]},"one_liner":"제품이나 브랜드를 식별하게 하는 고유한 시각 표시.","description":"헤더, 로그인 화면, 빈 상태, 문서 표지에서 제품 정체성을 알려준다.","visual_anatomy":["brand mark","optional wordmark","clear space","consistent size"],"when_to_use":["사용자가 어느 제품이나 조직에 있는지 알아야 할 때","첫 화면에서 브랜드를 식별시킬 때"],"anti_use":["작은 버튼 아이콘처럼 남용하지 않는다","주변 여백 없이 찌그러뜨리지 않는다"],"prompt_phrases":["헤더 왼쪽에 logo를 넣어줘","로그인 화면 상단에 브랜드 마크를 크게 배치해줘"]},{"id":"favicon","status":"draft","category":"structure","group":"structure-misc","ko":{"name":"파비콘","aliases":["favicon","브라우저 탭 아이콘","사이트 아이콘"]},"en":{"name":"Favicon","aliases":["Site icon","Browser tab icon"]},"one_liner":"브라우저 탭, 북마크, 검색 결과에서 사이트를 식별하게 하는 작은 아이콘.","description":"제품 로고를 아주 작은 크기에서도 알아볼 수 있게 단순화한 웹사이트 식별 자산이다.","visual_anatomy":["small icon","browser tab","bookmark context","simplified brand mark"],"when_to_use":["웹사이트나 웹앱을 배포할 때","탭이나 북마크에서 제품을 구분시켜야 할 때"],"anti_use":["복잡한 로고 원본을 그대로 축소하지 않는다","작은 크기에서 글자가 뭉개지면 쓰지 않는다"],"prompt_phrases":["브라우저 탭에 보이는 favicon을 바꿔줘","작은 크기에서도 보이는 사이트 아이콘을 만들어줘"]},{"id":"thumbnail","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"썸네일","aliases":["thumbnail","미리보기 이미지","preview image"]},"en":{"name":"Thumbnail","aliases":["Preview image","Cover image"]},"one_liner":"콘텐츠를 빠르게 알아보게 하는 작은 미리보기 이미지.","description":"목록이나 카드에서 영상, 글, 파일, 상품의 대표 장면을 작게 보여준다.","visual_anatomy":["small image frame","fixed aspect ratio","optional overlay icon","fallback state"],"when_to_use":["콘텐츠가 시각적으로 구분될 때","목록에서 항목을 빠르게 찾게 할 때"],"anti_use":["모든 항목이 비슷한 이미지라면 정보 가치가 낮다","너무 작아 식별이 안 되면 의미가 없다"],"prompt_phrases":["게시글 카드 왼쪽에 thumbnail을 넣어줘","영상 썸네일 위에 재생 아이콘을 올려줘"]},{"id":"open-graph-image","status":"draft","category":"structure","group":"structure-misc","ko":{"name":"공유 미리보기 이미지","aliases":["Open Graph image","OG image","링크 썸네일","social preview image","link preview image"]},"en":{"name":"Open Graph image","aliases":["OG image","Social preview image","Link preview image"]},"one_liner":"링크를 공유했을 때 메신저나 SNS 카드에 표시되는 대표 이미지.","description":"페이지 제목과 설명만으로 부족한 맥락을 보완해 공유 카드에서 사이트나 콘텐츠를 한눈에 알아보게 한다.","visual_anatomy":["preview image canvas","title area","brand mark","page description","share card crop"],"when_to_use":["사이트 링크를 카카오톡","Slack","X","Facebook 등에 공유할 때","콘텐츠 대표 이미지를 통제하고 싶을 때"],"anti_use":["일반 썸네일과 혼동해 카드 내부 이미지로만 취급하지 않는다","너무 작은 글자나 잘릴 핵심 정보를 넣지 않는다"],"prompt_phrases":["링크 공유할 때 보이는 OG image를 추가해줘","카카오톡에 공유되는 social preview image를 만들어줘"],"related":[{"id":"thumbnail","relation":"compare","note":"thumbnail은 콘텐츠 목록 안의 작은 미리보기이고 OG image는 외부 공유 카드용 메타 이미지다"}]},{"id":"password-field","status":"draft","category":"input","group":"input-text","ko":{"name":"비밀번호 입력창","aliases":["password input","password field","비번 입력"]},"en":{"name":"Password field","aliases":["Password input","Secure text field"]},"one_liner":"입력한 문자를 가려서 비밀번호를 받는 입력 요소.","description":"보통 눈 아이콘으로 표시/숨김을 전환하고, 오류나 보안 조건 안내를 함께 보여준다.","visual_anatomy":["masked characters","secure input container","show-hide icon","optional validation text"],"when_to_use":["비밀번호나 민감한 인증 값을 입력받을 때"],"anti_use":["일반 텍스트 값에 쓰지 않는다","표시 전환 없이 복잡한 비밀번호 조건만 강요하지 않는다"],"prompt_phrases":["비밀번호를 입력하는 password field를 넣어줘","눈 아이콘으로 비밀번호 보기 전환을 만들어줘"]},{"id":"number-input","status":"draft","category":"input","group":"input-text","ko":{"name":"숫자 입력창","aliases":["number input","numeric field","수량 입력"]},"en":{"name":"Number input","aliases":["Numeric input","Number field"]},"one_liner":"숫자 값을 직접 입력하거나 증감 버튼으로 조절하는 입력 요소.","description":"수량, 나이, 금액처럼 숫자 형식이 필요한 값을 받는다.","visual_anatomy":["numeric value","input box","optional stepper buttons","min-max helper"],"when_to_use":["정확한 숫자를 입력받아야 할 때","범위나 단위가 명확한 값일 때"],"anti_use":["대략적인 값 조절에는 slider가 더 적합하다","전화번호처럼 숫자 모양의 문자열은 text field가 낫다"],"prompt_phrases":["수량을 입력하는 number input을 넣어줘","플러스 마이너스 버튼으로 숫자를 조절하게 해줘"]},{"id":"otp-input","status":"draft","category":"input","group":"input-pickers","ko":{"name":"인증번호 입력","aliases":["OTP 입력","verification code","코드 입력"]},"en":{"name":"OTP input","aliases":["One-time code input","Verification code input"]},"one_liner":"일회용 인증번호를 여러 칸에 나누어 입력받는 요소.","description":"SMS, 이메일, 2단계 인증 코드처럼 짧은 숫자/문자 코드를 빠르게 입력하게 한다.","visual_anatomy":["multiple small input boxes","focused box","fixed code length","paste behavior"],"when_to_use":["인증번호나 2FA 코드를 받을 때","코드 길이가 짧고 고정되어 있을 때"],"anti_use":["긴 문자열이나 자유 입력에는 쓰지 않는다","복사 붙여넣기를 막지 않는다"],"prompt_phrases":["6자리 인증번호 OTP input을 넣어줘","각 숫자가 한 칸씩 들어가는 코드 입력 UI를 만들어줘"]},{"id":"autocomplete","status":"draft","category":"input","group":"input-search-command","ko":{"name":"자동완성","aliases":["autocomplete","자동 추천","입력 제안"]},"en":{"name":"Autocomplete","aliases":["Typeahead","Autosuggest"]},"one_liner":"사용자가 입력하는 동안 관련 후보를 추천하는 입력 패턴.","description":"검색어, 주소, 사용자 이름처럼 후보가 많은 값을 빠르게 완성하게 돕는다.","visual_anatomy":["text input","suggestion list","highlighted match","keyboard selection"],"when_to_use":["입력 후보를 예측할 수 있을 때","사용자가 긴 값을 빠르게 입력해야 할 때"],"anti_use":["추천 품질이 낮으면 오히려 방해가 된다","선택만 필요한 경우 combobox와 구분한다"],"prompt_phrases":["검색어를 입력하면 autocomplete suggestions가 나오게 해줘","도시 이름 자동완성을 붙여줘"]},{"id":"search-suggestions","status":"draft","category":"input","group":"input-search-command","ko":{"name":"검색 제안","aliases":["search suggestions","추천 검색어","자동 추천 목록"]},"en":{"name":"Search suggestions","aliases":["Suggested searches","Query suggestions"]},"one_liner":"검색창 아래에 추천 검색어나 최근 검색어를 보여주는 목록.","description":"사용자가 무엇을 찾을지 빠르게 고르게 하고 오타나 빈 검색 상태를 줄인다.","visual_anatomy":["search field","suggestion rows","icons or history marker","highlighted query"],"when_to_use":["검색어 후보가 많거나 최근 검색 기록을 활용할 때","사용자가 검색 범위를 잘 모를 때"],"anti_use":["개인정보가 담긴 최근 검색어를 무심코 노출하지 않는다","결과 목록과 시각적으로 혼동시키지 않는다"],"prompt_phrases":["검색창 아래에 search suggestions를 보여줘","최근 검색어와 추천 검색어를 나눠서 표시해줘"],"related":[{"id":"command-palette","relation":"compare","note":"문서 사이트의 Cmd/Ctrl+K 검색 오버레이는 command-palette 셸을 쓰면서 결과를 섹션별로 그룹핑한다 — 그룹 헤더로 나뉜 결과 목록이라는 점이 여기의 추천/최근 검색어 그룹핑과 같은 축이다."}]},{"id":"inline-edit","status":"draft","category":"input","group":"input-editing","ko":{"name":"인라인 편집","aliases":["inline edit","바로 수정","직접 편집"]},"en":{"name":"Inline edit","aliases":["Inline editing","Editable text"]},"one_liner":"표시된 텍스트를 같은 자리에서 바로 입력 상태로 바꾸는 패턴.","description":"제목, 이름, 라벨처럼 짧은 값을 상세 화면 이동 없이 수정하게 한다.","visual_anatomy":["display text","edit affordance","focused input state","save or confirm behavior"],"when_to_use":["짧은 텍스트를 빠르게 수정해야 할 때","목록이나 상세 화면 맥락을 유지해야 할 때"],"anti_use":["복잡한 폼이나 검증이 많은 값에는 별도 편집 화면이 낫다","편집 가능 여부가 숨겨지면 안 된다"],"prompt_phrases":["제목을 클릭하면 inline edit로 바로 수정되게 해줘","이름 옆에 연필 아이콘을 넣어줘"],"related":[{"id":"data-grid","relation":"compare","note":"inline edit는 제목·이름 같은 단일 필드를 그 자리에서 바로 고치는 패턴이고, data grid는 셀 단위 편집에 키보드 탐색(Tab/Enter/Escape)과 행/셀 단위 저장 상태 표시까지 포함하는 더 넓은 그리드 전체의 편집 계약이다"}]},{"id":"rich-text-editor","status":"draft","category":"input","group":"input-editing","ko":{"name":"리치 텍스트 에디터","aliases":["rich text editor","WYSIWYG","서식 편집기"]},"en":{"name":"Rich text editor","aliases":["WYSIWYG editor","Formatting editor"]},"one_liner":"굵게, 링크, 목록 같은 서식을 포함해 글을 작성하는 입력 영역.","description":"본문 작성, 댓글, 문서 편집처럼 텍스트에 구조와 스타일을 넣어야 할 때 쓴다.","visual_anatomy":["formatting toolbar","editable area","selection state","placeholder"],"when_to_use":["사용자가 긴 글에 서식이나 링크를 넣어야 할 때"],"anti_use":["단순 메모에는 textarea가 더 가볍다","저장 형식과 접근성을 고려하지 않고 붙이지 않는다"],"prompt_phrases":["본문 작성용 rich text editor를 넣어줘","굵게 링크 목록 버튼이 있는 에디터를 만들어줘"]},{"id":"color-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"색상 선택기","aliases":["color picker","컬러 피커","색 선택"]},"en":{"name":"Color picker","aliases":["Color input","Swatch picker"]},"one_liner":"색상 값을 팔레트, 스와치, 입력값으로 고르는 요소.","description":"테마 색, 태그 색, 그래픽 편집처럼 시각적 색 선택이 필요한 곳에 쓴다.","visual_anatomy":["color swatch","palette grid","selected color","optional hex input"],"when_to_use":["사용자가 색상을 직접 선택해야 할 때","제한된 브랜드 색 중 하나를 골라야 할 때"],"anti_use":["색상 선택이 제품 사용에 불필요하면 복잡도를 늘리지 않는다","색상만으로 상태 의미를 정하지 않는다"],"prompt_phrases":["태그 색상을 고르는 color picker를 넣어줘","스와치 팔레트와 hex 입력을 함께 보여줘"]},{"id":"listbox","status":"draft","category":"selection","group":"selection-options","ko":{"name":"리스트박스","aliases":["listbox","선택 목록","옵션 리스트"]},"en":{"name":"Listbox","aliases":["Selection list","Option list"]},"one_liner":"여러 옵션을 펼쳐진 목록으로 보여주고 선택하게 하는 요소.","description":"select와 달리 목록이 화면에 직접 보이며 단일 또는 다중 선택을 지원할 수 있다.","visual_anatomy":["visible option list","selected option","focus highlight","optional multi-select marks"],"when_to_use":["옵션을 항상 보여줘야 할 때","키보드로 목록 선택이 중요할 때"],"anti_use":["공간이 좁으면 select가 낫다","단순 텍스트 목록에는 선택 상태를 억지로 붙이지 않는다"],"prompt_phrases":["옵션을 펼쳐진 listbox로 보여줘","선택된 항목이 강조되는 선택 목록을 만들어줘"]},{"id":"menu-bar","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"메뉴바","aliases":["menubar","상단 메뉴","앱 메뉴"]},"en":{"name":"Menubar","aliases":["Menu bar","Application menu"]},"one_liner":"여러 메뉴를 가로로 배치하고 각 메뉴에서 하위 명령을 여는 구조.","description":"데스크톱 앱처럼 파일, 편집, 보기 같은 명령 묶음을 제공할 때 쓴다.","visual_anatomy":["horizontal menu items","active menu","dropdown submenu","keyboard navigation"],"when_to_use":["명령이 많고 분류가 명확한 생산성 도구에서","데스크톱 앱과 비슷한 조작이 필요할 때"],"anti_use":["일반 웹사이트 내비게이션을 ARIA menubar처럼 과하게 만들지 않는다","모바일에서는 단순 메뉴가 낫다"],"prompt_phrases":["상단에 파일 편집 보기 menubar를 넣어줘","메뉴를 열면 하위 명령이 나오게 해줘"]},{"id":"bottom-navigation","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"하단 내비게이션","aliases":["bottom navigation","bottom nav","하단 탭"]},"en":{"name":"Bottom navigation","aliases":["Bottom nav","Navigation bar"]},"one_liner":"모바일 화면 하단에 주요 목적지를 아이콘과 라벨로 배치한 내비게이션.","description":"앱의 최상위 섹션을 엄지로 쉽게 전환하게 한다.","visual_anatomy":["bottom bar","destination icons","labels","active indicator","optional badge"],"when_to_use":["모바일 앱의 주요 섹션이 3-5개일 때","어디서든 최상위 목적지로 이동해야 할 때"],"anti_use":["일회성 행동이나 설정을 목적지로 넣지 않는다","항목이 너무 많으면 숨김 메뉴를 검토한다"],"prompt_phrases":["모바일 화면 아래에 bottom navigation을 넣어줘","홈 검색 프로필 3개 탭을 하단에 배치해줘"]},{"id":"tab-bar","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"탭 바","aliases":["tab bar","모바일 탭바","iOS 탭"]},"en":{"name":"Tab bar","aliases":["iOS tab bar","Mobile tab bar"]},"one_liner":"앱의 여러 섹션을 전환하는 하단 또는 상단 탭형 내비게이션.","description":"각 탭은 앱의 동등한 주요 영역으로 이동하며 아이콘과 라벨을 함께 쓰는 경우가 많다.","visual_anatomy":["bar container","tab icons","tab labels","selected tab","optional badge"],"when_to_use":["앱의 주요 섹션을 빠르게 오갈 때","현재 선택된 섹션을 계속 보여줘야 할 때"],"anti_use":["서로 관련 없는 행동 버튼을 탭으로 넣지 않는다","섹션이 너무 많으면 sidebar나 more 탭을 검토한다"],"prompt_phrases":["하단에 tab bar를 넣고 홈 검색 설정 탭을 보여줘","선택된 탭은 아이콘과 라벨을 강조해줘"]},{"id":"filter-chip","status":"draft","category":"selection","group":"selection-options","ko":{"name":"필터 칩","aliases":["filter chip","필터 태그","선택 칩"]},"en":{"name":"Filter chip","aliases":["Filter tag","Choice chip"]},"one_liner":"조건을 작은 칩 형태로 켜고 끄며 목록을 필터링하는 요소.","description":"카테고리, 상태, 태그 같은 여러 조건을 빠르게 선택하거나 해제하게 한다.","visual_anatomy":["pill shape","label","selected state","optional check or close icon"],"when_to_use":["필터 조건이 짧고 여러 개일 때","사용자가 조건을 빠르게 바꾸게 할 때"],"anti_use":["복잡한 범위나 다단 조건은 filter panel이 낫다","칩이 너무 많으면 스캔이 어려워진다"],"prompt_phrases":["목록 위에 filter chip들을 넣어줘","선택된 필터 칩에는 체크 아이콘을 보여줘"]},{"id":"toggle-button","status":"draft","category":"selection","group":"selection-options","ko":{"name":"토글 버튼","aliases":["toggle button","선택 버튼","pressed button"]},"en":{"name":"Toggle button","aliases":["Pressed button","Selectable button"]},"one_liner":"버튼처럼 보이지만 눌린 상태를 유지해 선택 여부를 표현하는 요소.","description":"굵게, 즐겨찾기, 보기 옵션처럼 on/off 상태를 버튼 형태로 보여준다.","visual_anatomy":["button container","icon or label","pressed state","optional group"],"when_to_use":["명령 버튼과 선택 상태가 연결되어 있을 때","툴바에서 기능을 켜고 끌 때"],"anti_use":["즉시 적용되는 설정은 switch가 더 명확할 수 있다","여러 독립 옵션은 checkbox와 비교한다"],"prompt_phrases":["즐겨찾기를 켜는 toggle button을 넣어줘","선택되면 눌린 상태가 유지되게 해줘"]},{"id":"disclosure","status":"draft","category":"selection","group":"selection-options","ko":{"name":"펼침 버튼","aliases":["disclosure","show hide","접기 펼치기"]},"en":{"name":"Disclosure","aliases":["Show-hide","Disclosure button"]},"one_liner":"버튼을 눌러 관련 내용을 펼치거나 접는 패턴.","description":"아코디언보다 단순하게 한 덩어리의 추가 정보를 열고 닫을 때 쓴다.","visual_anatomy":["trigger button","chevron","expanded state","revealed content"],"when_to_use":["보조 정보를 사용자가 필요할 때만 보게 할 때","설정의 세부 옵션을 접어둘 때"],"anti_use":["핵심 정보를 숨기는 용도로 쓰지 않는다","여러 항목을 체계적으로 접으려면 accordion을 검토한다"],"prompt_phrases":["상세 옵션을 disclosure로 접어둬","더보기 버튼을 누르면 설명이 펼쳐지게 해줘"]},{"id":"anchor-nav","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"앵커 내비게이션","aliases":["anchor nav","목차 링크","섹션 내비게이션"]},"en":{"name":"Anchor navigation","aliases":["In-page navigation","Table of contents nav"]},"one_liner":"같은 페이지 안의 섹션으로 이동하는 링크 목록.","description":"긴 문서나 설정 화면에서 현재 섹션을 보여주고 클릭하면 해당 위치로 스크롤한다. 문서 사이트의 우측 고정 rail은 IntersectionObserver 기반 scroll spy로 스크롤 위치에 따라 활성 섹션 항목을 자동으로 강조하는 형태로 자주 쓰인다.","visual_anatomy":["section links","active section","sticky side or top area","anchor targets","scroll-spy active highlight"],"when_to_use":["한 페이지가 길고 섹션이 명확할 때","사용자가 원하는 부분으로 바로 이동해야 할 때"],"anti_use":["페이지가 짧으면 불필요하다","앱의 주요 페이지 이동과 섞지 않는다"],"prompt_phrases":["문서 왼쪽에 anchor navigation을 넣어줘","스크롤 위치에 따라 현재 섹션을 강조해줘"]},{"id":"back-button","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"뒤로가기 버튼","aliases":["back button","이전 버튼","뒤로"]},"en":{"name":"Back button","aliases":["Back navigation","Previous button"]},"one_liner":"이전 화면이나 상위 화면으로 돌아가게 하는 내비게이션 버튼.","description":"상세 화면, 설정 하위 화면, 모바일 내비게이션에서 현재 흐름을 되돌린다.","visual_anatomy":["left arrow icon","optional label","top bar placement","navigation target"],"when_to_use":["사용자가 상세나 하위 화면에서 원래 위치로 돌아가야 할 때"],"anti_use":["취소나 닫기 행동과 의미를 섞지 않는다","브라우저 뒤로가기와 충돌하지 않게 한다"],"prompt_phrases":["상단 왼쪽에 back button을 넣어줘","뒤로가기 화살표와 이전 라벨을 보여줘"]},{"id":"navigation-bar","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"내비게이션 바","aliases":["navbar","nav bar","상단 메뉴"]},"en":{"name":"Navigation bar","aliases":["Navbar","Nav bar"]},"one_liner":"주요 페이지나 섹션으로 이동하는 링크를 한 줄로 배치한 영역.","description":"웹사이트나 앱 상단에서 브랜드, 메뉴, 행동 버튼을 함께 담는 경우가 많다.","visual_anatomy":["brand area","navigation links","active link","optional actions"],"when_to_use":["여러 주요 페이지를 반복적으로 이동해야 할 때","현재 섹션을 상단에서 보여줘야 할 때"],"anti_use":["명령 메뉴와 혼동하지 않는다","너무 많은 링크는 grouping이나 sidebar를 검토한다"],"prompt_phrases":["상단에 logo와 메뉴 링크가 있는 navigation bar를 넣어줘","현재 페이지 메뉴를 강조해줘"]},{"id":"button-group","status":"draft","category":"action","group":"action-buttons","ko":{"name":"버튼 그룹","aliases":["button group","액션 그룹","버튼 묶음"]},"en":{"name":"Button group","aliases":["Action group","Grouped buttons"]},"one_liner":"관련된 여러 버튼을 한 덩어리로 배치한 요소.","description":"저장/취소, 정렬/필터, 보기 전환처럼 연결된 행동을 가까이 묶는다.","visual_anatomy":["adjacent buttons","shared alignment","primary-secondary ordering","consistent spacing"],"when_to_use":["관련 행동을 한눈에 비교하고 선택하게 할 때","폼 하단의 제출과 취소를 함께 둘 때"],"anti_use":["서로 관련 없는 행동을 한 그룹으로 묶지 않는다","너무 많은 버튼을 한 줄에 밀어 넣지 않는다"],"prompt_phrases":["저장 취소 버튼을 button group으로 묶어줘","오른쪽 아래에 액션 버튼 그룹을 배치해줘"]},{"id":"copy-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"복사 버튼","aliases":["copy button","클립보드 버튼","복사 액션"]},"en":{"name":"Copy button","aliases":["Clipboard button","Copy action"]},"one_liner":"텍스트나 값을 클립보드에 복사하는 버튼.","description":"코드, 링크, API 키, 초대 URL 옆에 배치하고 복사 결과를 피드백으로 알려준다.","visual_anatomy":["copy icon","button hit area","copied state","toast or inline feedback"],"when_to_use":["사용자가 값을 다른 곳에 붙여넣어야 할 때","긴 텍스트를 직접 선택하기 어렵게 만들지 않을 때"],"anti_use":["복사 대상이 불명확하면 쓰지 않는다","복사 완료 피드백 없이 조용히 끝내지 않는다"],"prompt_phrases":["초대 링크 옆에 copy button을 넣어줘","복사되면 copied 상태와 toast를 보여줘"]},{"id":"download-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"다운로드 버튼","aliases":["download button","내려받기","파일 저장"]},"en":{"name":"Download button","aliases":["Download action","Save file button"]},"one_liner":"파일이나 데이터를 사용자의 기기로 내려받게 하는 버튼.","description":"PDF, CSV, 이미지, 첨부파일 다운로드처럼 결과물을 저장하는 행동에 쓴다.","visual_anatomy":["download icon","action label","file type hint","optional loading state"],"when_to_use":["사용자가 파일을 저장해야 할 때","내보내기 결과가 하나로 명확할 때"],"anti_use":["여러 형식 중 선택해야 하면 split button이나 menu를 검토한다","진행 시간이 길면 loading feedback을 붙인다"],"prompt_phrases":["우측 상단에 PDF download button을 넣어줘","CSV 내려받기 버튼에 다운로드 아이콘을 붙여줘"]},{"id":"share-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"공유 버튼","aliases":["share button","공유하기","share action"]},"en":{"name":"Share button","aliases":["Share action","Send button"]},"one_liner":"링크나 콘텐츠를 다른 사람이나 앱으로 보내는 버튼.","description":"공유 시트, 링크 복사, SNS 전송 같은 후속 옵션을 열 수 있다.","visual_anatomy":["share icon","button label","optional share sheet","success feedback"],"when_to_use":["사용자가 콘텐츠를 외부로 전달해야 할 때","링크 공유가 핵심 행동일 때"],"anti_use":["내부 저장이나 내보내기와 혼동하지 않는다","공유 권한이나 공개 범위를 숨기지 않는다"],"prompt_phrases":["게시글 카드에 share button을 넣어줘","공유 버튼을 누르면 공유 옵션 sheet가 열리게 해줘"]},{"id":"close-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"닫기 버튼","aliases":["close button","X 버튼","dismiss"]},"en":{"name":"Close button","aliases":["Dismiss button","X button"]},"one_liner":"모달, 배너, 패널 같은 임시 UI를 닫는 버튼.","description":"X 아이콘으로 표현되는 경우가 많고 현재 작업을 종료하거나 패널을 숨긴다.","visual_anatomy":["x icon","button hit area","top corner placement","accessible label"],"when_to_use":["사용자가 오버레이나 알림을 닫을 수 있어야 할 때"],"anti_use":["저장되지 않은 변경을 조용히 버리지 않는다","뒤로가기와 닫기의 의미를 섞지 않는다"],"prompt_phrases":["모달 오른쪽 위에 close button을 넣어줘","배너 끝에 닫기 X 버튼을 붙여줘"]},{"id":"overflow-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"더보기 버튼","aliases":["overflow button","kebab menu","more button"]},"en":{"name":"Overflow button","aliases":["More button","Kebab menu button"]},"one_liner":"추가 행동을 숨긴 메뉴로 여는 점 세 개 버튼.","description":"카드나 행 오른쪽에서 편집, 삭제, 복사 같은 덜 중요한 명령을 모아 연다.","visual_anatomy":["three-dot icon","button hit area","anchored menu","secondary actions"],"when_to_use":["공간이 좁고 보조 행동을 숨겨야 할 때","항목별 추가 메뉴가 필요할 때"],"anti_use":["주요 행동을 더보기 안에 숨기지 않는다","메뉴 항목이 하나뿐이면 직접 버튼이 낫다"],"prompt_phrases":["카드 오른쪽에 overflow button을 넣어줘","점 세 개 버튼을 누르면 편집 삭제 메뉴가 나오게 해줘"]},{"id":"top-app-bar","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"상단 앱 바","aliases":["top app bar","app bar","앱 상단바"]},"en":{"name":"Top app bar","aliases":["App bar","Top bar"]},"one_liner":"화면 상단에서 제목, 내비게이션, 주요 행동을 담는 앱 구조 요소.","description":"모바일/앱 화면에서 뒤로가기, 화면 제목, 검색이나 더보기 같은 행동을 배치한다.","visual_anatomy":["top bar container","navigation icon","title","action icons"],"when_to_use":["현재 화면의 제목과 주요 행동을 계속 보여줘야 할 때","앱 화면 간 이동이 있을 때"],"anti_use":["브랜드 웹사이트의 복잡한 전역 메뉴와 혼동하지 않는다","행동 아이콘을 너무 많이 넣지 않는다"],"prompt_phrases":["상단에 top app bar를 넣고 제목과 더보기 아이콘을 보여줘","앱 화면 상단바에 뒤로가기 버튼을 넣어줘"],"related":[{"id":"large-title-header","relation":"compare","note":"스크롤 시 바를 보이거나 숨기는 show/hide 규칙은 top-app-bar 자체의 일반 동작이며, large-title-header의 큰 제목 접힘과는 별개다. 스크린리더 활성 시에는 숨기지 않는 예외가 두 항목 모두에 적용된다."}]},{"id":"section","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"섹션","aliases":["section","화면 구역","콘텐츠 영역"]},"en":{"name":"Section","aliases":["Page section","Content section"]},"one_liner":"한 주제나 기능 단위를 묶는 화면의 큰 구역.","description":"제목, 설명, 콘텐츠 묶음을 함께 배치해 페이지를 읽기 쉬운 덩어리로 나눈다.","visual_anatomy":["section heading","supporting text optional","grouped content","vertical spacing"],"when_to_use":["한 화면에 여러 주제가 있을 때","콘텐츠를 스캔 가능한 덩어리로 나눌 때"],"anti_use":["카드처럼 과하게 테두리를 씌우지 않는다","너무 작은 요소마다 섹션을 만들지 않는다"],"prompt_phrases":["설정 화면을 여러 section으로 나눠줘","각 섹션에는 제목과 관련 카드들을 배치해줘"]},{"id":"container","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"컨테이너","aliases":["container","wrapper","내용 폭"]},"en":{"name":"Container","aliases":["Wrapper","Content container"]},"one_liner":"콘텐츠의 최대 폭과 좌우 여백을 잡아주는 레이아웃 영역.","description":"넓은 화면에서도 내용이 너무 퍼지지 않게 하고 정렬 기준을 만든다.","visual_anatomy":["max-width boundary","horizontal padding","centered content","responsive width"],"when_to_use":["페이지 전체 콘텐츠를 일정 폭 안에 정리할 때","데스크톱에서 읽기 폭을 제한해야 할 때"],"anti_use":["모든 작은 요소에 중첩 컨테이너를 만들지 않는다","데이터 테이블처럼 넓이가 필요한 콘텐츠를 억지로 좁히지 않는다"],"prompt_phrases":["본문을 가운데 정렬된 container 안에 넣어줘","최대 폭이 있는 콘텐츠 컨테이너를 만들어줘"]},{"id":"hero","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"히어로 영역","aliases":["hero","hero section","메인 비주얼"]},"en":{"name":"Hero section","aliases":["Hero","Lead section"]},"one_liner":"페이지 첫 화면에서 핵심 메시지와 대표 행동을 크게 보여주는 영역.","description":"랜딩 페이지나 제품 소개에서 제목, 설명, 주요 버튼, 대표 이미지를 가장 먼저 배치한다.","visual_anatomy":["large headline","supporting copy","primary action","hero image or media"],"when_to_use":["첫 화면에서 제품이나 제안의 핵심을 바로 전달해야 할 때"],"anti_use":["작업형 도구나 대시보드 첫 화면에 불필요하게 크게 만들지 않는다","실제 콘텐츠를 가리지 않는다"],"prompt_phrases":["첫 화면에 hero section을 만들고 제품 이름과 시작 버튼을 넣어줘","히어로 영역 배경에 실제 제품 이미지를 보여줘"]},{"id":"filter-bar","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"필터 바","aliases":["filter bar","검색 필터 영역","필터 툴바"]},"en":{"name":"Filter bar","aliases":["Filter toolbar","Search and filter bar"]},"one_liner":"목록 위에서 검색, 필터, 정렬 조건을 한 줄로 조작하는 영역.","description":"데이터 목록이나 카드 그리드의 결과를 좁히는 조건들을 모아 보여준다.","visual_anatomy":["search input","filter controls","sort control","active filter count"],"when_to_use":["목록 데이터가 많고 사용자가 조건으로 좁혀야 할 때"],"anti_use":["항목이 적으면 과하다","복잡한 필터는 별도 panel이나 drawer로 분리한다"],"prompt_phrases":["테이블 위에 search와 filter chip이 있는 filter bar를 넣어줘","목록 상단에 필터 바와 정렬 선택을 배치해줘"]},{"id":"sort-control","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"정렬 컨트롤","aliases":["sort control","sort dropdown","정렬 선택"]},"en":{"name":"Sort control","aliases":["Sort dropdown","Sort selector"]},"one_liner":"목록이나 테이블의 표시 순서를 바꾸는 선택 요소.","description":"최신순, 이름순, 가격순처럼 사용자가 데이터를 원하는 기준으로 재배열하게 한다.","visual_anatomy":["sort label","selected criterion","direction indicator","dropdown or button"],"when_to_use":["사용자가 목록 순서를 바꿔 탐색해야 할 때","여러 정렬 기준이 의미 있을 때"],"anti_use":["정렬 기준이 하나뿐이면 노출하지 않는다","필터와 정렬의 의미를 섞지 않는다"],"prompt_phrases":["목록 오른쪽에 sort control을 넣어줘","최신순 인기순을 고르는 정렬 드롭다운을 만들어줘"]},{"id":"data-grid","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"데이터 그리드","aliases":["data grid","고급 테이블","spreadsheet grid"]},"en":{"name":"Data grid","aliases":["Interactive grid","Spreadsheet grid"]},"one_liner":"행과 열 데이터를 선택, 편집, 정렬할 수 있는 고급 표 형태.","description":"단순 table보다 상호작용이 많고 키보드 탐색, 셀 선택, 대량 데이터 조작을 포함한다.","visual_anatomy":["column headers","row headers optional","selected cell","grid lines","keyboard focus"],"when_to_use":["대량 데이터를 표 안에서 탐색하거나 편집해야 할 때"],"anti_use":["단순 읽기용 데이터에는 table이 낫다","모바일에서는 복잡도가 크게 올라간다"],"prompt_phrases":["셀 선택이 가능한 data grid를 넣어줘","행 선택과 컬럼 정렬이 되는 고급 테이블을 만들어줘"],"related":[{"id":"inline-edit","relation":"compare","note":"data grid는 키보드 탐색과 셀/행 단위 저장 상태를 포함하는 그리드 전체의 편집 계약이고, inline edit는 제목·이름 같은 단일 필드를 그 자리에서 바로 고치는 더 가벼운 패턴이다"}]},{"id":"legend","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"범례","aliases":["legend","차트 범례","색상 설명"]},"en":{"name":"Legend","aliases":["Chart legend","Key"]},"one_liner":"차트나 지도에서 색상, 선, 기호가 무엇을 뜻하는지 설명하는 요소.","description":"여러 데이터 시리즈를 구분하고 사용자가 시각 부호의 의미를 해석하게 돕는다.","visual_anatomy":["color swatches","series labels","marker shapes","optional toggle behavior"],"when_to_use":["차트에 여러 색상이나 시리즈가 있을 때","색상 의미를 명확히 알려야 할 때"],"anti_use":["라벨을 직접 붙일 수 있으면 불필요할 수 있다","색상만으로 의미를 전달하지 않는다"],"prompt_phrases":["차트 아래에 legend를 넣어줘","색상별 범례로 매출과 비용을 구분해줘"]},{"id":"chart-axis","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"차트 축","aliases":["axis","x축","y축"]},"en":{"name":"Chart axis","aliases":["Axis","X-axis","Y-axis"]},"one_liner":"차트에서 값의 기준과 범위를 보여주는 가로·세로 기준선.","description":"데이터 위치가 어떤 값이나 범주를 의미하는지 눈금과 라벨로 설명한다.","visual_anatomy":["axis line","tick marks","tick labels","axis title optional"],"when_to_use":["숫자 규모나 범주 위치를 읽어야 하는 차트에서"],"anti_use":["작은 sparkline처럼 추세만 보여줄 때는 축을 줄일 수 있다","눈금이 너무 많으면 읽기 어렵다"],"prompt_phrases":["라인 차트에 x-axis와 y-axis 라벨을 넣어줘","축 눈금이 보이는 bar chart를 만들어줘"]},{"id":"error-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"오류 상태","aliases":["error state","실패 화면","오류 UI"]},"en":{"name":"Error state","aliases":["Failure state","Error UI"]},"one_liner":"작업이나 데이터 로딩이 실패했을 때 원인과 복구 행동을 보여주는 상태 화면.","description":"오류 메시지, 재시도 버튼, 대체 행동을 함께 제공해 사용자가 막히지 않게 한다.","visual_anatomy":["error icon","clear message","recovery action","optional detail text"],"when_to_use":["요청 실패","권한 문제","네트워크 오류처럼 사용자가 알아야 하는 실패가 발생했을 때"],"anti_use":["기술적인 에러 코드만 보여주지 않는다","사용자가 할 수 있는 행동 없이 막아두지 않는다"],"prompt_phrases":["데이터 로딩 실패 시 error state를 보여줘","재시도 버튼이 있는 오류 화면을 만들어줘"]},{"id":"success-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"성공 상태","aliases":["success state","완료 화면","성공 UI"]},"en":{"name":"Success state","aliases":["Completion state","Success UI"]},"one_liner":"작업이 성공적으로 끝났음을 확인시켜 주는 상태 화면이나 메시지.","description":"체크 아이콘, 완료 문구, 다음 행동을 제공해 사용자가 결과를 확신하게 한다.","visual_anatomy":["success icon","confirmation title","supporting text","next action"],"when_to_use":["결제","제출","업로드처럼 완료 확인이 중요한 작업 뒤에"],"anti_use":["사소한 저장 완료에는 toast가 충분할 수 있다","다음 단계 없이 막다른 화면을 만들지 않는다"],"prompt_phrases":["결제 완료 success state를 보여줘","체크 아이콘과 다음으로 버튼이 있는 완료 화면을 만들어줘"]},{"id":"warning-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"경고 상태","aliases":["warning state","주의 상태","warning UI"]},"en":{"name":"Warning state","aliases":["Caution state","Warning UI"]},"one_liner":"위험하거나 주의가 필요한 상황을 노란색 계열과 설명으로 알려주는 상태.","description":"삭제 전 확인, 할당량 초과 임박, 불완전한 설정처럼 즉시 실패는 아니지만 주의가 필요할 때 쓴다.","visual_anatomy":["warning icon","caution color","message text","optional action"],"when_to_use":["사용자가 계속 진행하기 전에 위험을 알아야 할 때"],"anti_use":["모든 안내를 warning으로 만들지 않는다","실제 오류는 error state나 alert로 구분한다"],"prompt_phrases":["저장되지 않은 변경사항 warning state를 보여줘","경고 아이콘과 노란 배너를 넣어줘"]},{"id":"info-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"정보 상태","aliases":["info state","안내 상태","informational message"]},"en":{"name":"Info state","aliases":["Informational state","Info message"]},"one_liner":"사용자가 알아두면 좋은 보조 정보를 중립적으로 보여주는 상태.","description":"기능 제한, 팁, 시스템 안내처럼 경고나 오류는 아니지만 맥락 설명이 필요할 때 쓴다.","visual_anatomy":["info icon","neutral container","concise message","optional link"],"when_to_use":["사용자에게 맥락이나 추가 설명을 제공해야 할 때"],"anti_use":["중요한 오류를 info처럼 약하게 표현하지 않는다","긴 도움말은 documentation link로 분리한다"],"prompt_phrases":["상단에 info state 안내 박스를 넣어줘","도움말 링크가 있는 정보 메시지를 보여줘"]},{"id":"loading-state","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"로딩 상태","aliases":["loading state","불러오는 중 화면","대기 상태"]},"en":{"name":"Loading state","aliases":["Loading UI","Pending state"]},"one_liner":"데이터나 화면이 준비되는 동안 사용자가 기다리고 있음을 보여주는 상태.","description":"spinner, skeleton, progress bar, 로딩 문구를 상황에 맞게 조합한다.","visual_anatomy":["loading indicator","placeholder area","optional message","disabled actions"],"when_to_use":["비동기 작업 때문에 콘텐츠를 즉시 보여줄 수 없을 때"],"anti_use":["빈 화면으로 방치하지 않는다","긴 작업에 이유나 예상 시간을 전혀 주지 않으면 불안하다"],"prompt_phrases":["목록을 불러오는 동안 loading state를 보여줘","skeleton과 로딩 문구를 함께 넣어줘"]},{"id":"textarea-autosize","status":"draft","category":"input","group":"input-text","ko":{"name":"자동 높이 텍스트영역","aliases":["autosize textarea","자동 확장 입력창","늘어나는 textarea"]},"en":{"name":"Autosize textarea","aliases":["Auto-growing textarea","Expanding textarea"]},"one_liner":"입력한 줄 수에 맞춰 높이가 늘어나는 여러 줄 입력 요소.","description":"댓글, 메모, 짧은 설명처럼 처음에는 작게 보이다가 내용이 늘면 입력 영역도 같이 커진다.","visual_anatomy":["multiline input","growing height","typed content","optional helper text"],"when_to_use":["입력 길이가 사용자의 상황마다 달라질 때","작은 폼 안에서 긴 입력도 허용해야 할 때"],"anti_use":["긴 문서 작성에는 rich text editor가 낫다","높이가 계속 커져 화면을 밀어내면 고정 높이 textarea를 쓴다"],"prompt_phrases":["입력 내용에 맞춰 높이가 늘어나는 autosize textarea를 넣어줘"]},{"id":"input-group","status":"draft","category":"input","group":"input-text","ko":{"name":"입력 그룹","aliases":["input group","입력 애드온","prefix suffix input"]},"en":{"name":"Input group","aliases":["Input addon","Affixed input"]},"one_liner":"입력창 앞뒤에 아이콘, 단위, 버튼 같은 보조 요소를 붙인 입력 묶음.","description":"금액 단위, URL prefix, 검색 아이콘, 복사 버튼처럼 입력값의 의미나 행동을 입력창과 함께 보여준다.","visual_anatomy":["input container","leading addon","trailing addon","typed value"],"when_to_use":["값의 단위나 맥락을 입력창 바로 옆에서 보여줘야 할 때","입력 옆에 작은 행동 버튼이 필요할 때"],"anti_use":["복잡한 여러 필드를 한 input group에 억지로 묶지 않는다"],"prompt_phrases":["왼쪽에 원화 단위가 붙은 input group을 넣어줘"]},{"id":"date-range-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"날짜 범위 선택","aliases":["date range picker","기간 선택","시작일 종료일 선택"]},"en":{"name":"Date range picker","aliases":["Range calendar","Start and end date picker"]},"one_liner":"시작 날짜와 종료 날짜를 함께 선택하는 날짜 입력 요소.","description":"예약 기간, 조회 기간, 리포트 기간처럼 두 날짜 사이의 범위를 지정할 때 쓴다.","visual_anatomy":["start date","end date","range highlight","calendar grid"],"when_to_use":["기간 검색이나 예약처럼 시작과 끝 날짜가 모두 필요할 때"],"anti_use":["하루만 고르면 date picker가 더 단순하다"],"prompt_phrases":["시작일과 종료일을 고르는 date range picker를 넣어줘"]},{"id":"time-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"시간 선택","aliases":["time picker","시간 입력","시각 선택"]},"en":{"name":"Time picker","aliases":["Time selector","Time input"]},"one_liner":"사용자가 시와 분 같은 시간을 고르게 하는 입력 요소.","description":"예약 시간, 알림 시간, 근무 시작 시간처럼 특정 시각을 선택할 때 사용한다.","visual_anatomy":["hour value","minute value","increment controls","selected time"],"when_to_use":["정해진 시간 값을 입력받아야 할 때"],"anti_use":["시간 범위나 일정 전체를 다루면 calendar view나 scheduler가 더 적합하다"],"prompt_phrases":["예약 시간을 고르는 time picker를 넣어줘"],"related":[{"id":"mobile-date-picker","relation":"compare","note":"예약 날짜와 시간을 함께 받아야 하면 하나의 bottom sheet 안에 이 피커와 mobile-date-picker를 순차적으로 이어붙인다."},{"id":"mobile-date-time-picker-sheet","relation":"use-with","note":"날짜와 시간을 하나의 bottom sheet 안에서 순차 선택하는 조합형 시트가 이 피커와 mobile-date-picker를 이어붙인 실제 구성이다."}]},{"id":"rating-input","status":"draft","category":"input","group":"input-pickers","ko":{"name":"평점 입력","aliases":["rating input","별점","star rating"]},"en":{"name":"Rating input","aliases":["Star rating","Rating control"]},"one_liner":"별이나 점수 기호를 눌러 만족도나 평가 점수를 입력하는 요소.","description":"리뷰, 피드백, 추천도처럼 숫자 평가를 빠르게 선택하게 한다.","visual_anatomy":["rating icons","selected count","hover or pressed state","numeric value"],"when_to_use":["사용자에게 간단한 점수 평가를 받을 때"],"anti_use":["정확한 숫자 입력이나 긴 설문에는 slider나 radio group을 검토한다"],"prompt_phrases":["리뷰 작성 폼에 5점 star rating input을 넣어줘"]},{"id":"tag-input","status":"draft","category":"input","group":"input-pickers","ko":{"name":"태그 입력","aliases":["tag input","chip input","태그 추가"]},"en":{"name":"Tag input","aliases":["Chip input","Token input"]},"one_liner":"여러 키워드를 작은 태그나 칩으로 추가하고 제거하는 입력 요소.","description":"관심사, 기술 스택, 수신자, 필터 조건처럼 여러 짧은 값을 모아 입력한다.","visual_anatomy":["chips","inline text input","remove buttons","add action"],"when_to_use":["사용자가 여러 개의 짧은 값을 자유롭게 추가해야 할 때"],"anti_use":["선택지가 고정되어 있으면 multi-select가 더 적합할 수 있다"],"prompt_phrases":["기술 스택을 여러 chip으로 추가하는 tag input을 넣어줘"]},{"id":"masked-input","status":"draft","category":"input","group":"input-text","ko":{"name":"마스크 입력","aliases":["masked input","형식 입력","포맷 입력창"]},"en":{"name":"Masked input","aliases":["Formatted input","Input mask"]},"one_liner":"전화번호나 카드번호처럼 정해진 형식에 맞춰 표시되는 입력창.","description":"사용자가 숫자를 입력하면 하이픈, 공백, 괄호 같은 구분자를 자동으로 넣어 읽기 쉽게 만든다.","visual_anatomy":["formatted value","fixed groups","caret","input container"],"when_to_use":["전화번호","카드번호","사업자번호처럼 형식이 정해진 값을 받을 때"],"anti_use":["자유 텍스트나 국가별 형식이 크게 다른 값에는 과한 제약이 될 수 있다"],"prompt_phrases":["전화번호가 자동으로 하이픈 포맷되는 masked input을 넣어줘"]},{"id":"toggle-group","status":"draft","category":"selection","group":"selection-options","ko":{"name":"토글 그룹","aliases":["toggle group","토글 버튼 묶음","다중 토글"]},"en":{"name":"Toggle group","aliases":["Toggle button group","Multi-toggle"]},"one_liner":"여러 토글 버튼을 한 묶음으로 보여주고 하나 이상을 켜는 선택 요소.","description":"텍스트 정렬, 서식, 필터 옵션처럼 버튼 모양 선택지를 눌린 상태로 유지한다.","visual_anatomy":["group container","toggle buttons","pressed state","icons or labels"],"when_to_use":["서식이나 보기 옵션처럼 즉시 켜고 끄는 선택지를 묶을 때"],"anti_use":["단 하나만 골라야 하면 segmented control이나 radio group이 더 명확하다"],"prompt_phrases":["굵게 기울임 밑줄을 고르는 toggle group을 넣어줘"],"related":[{"id":"segmented-control","relation":"compare","note":"하나의 보기 모드만 고르면 segmented control, 여러 버튼 상태를 동시에 켜면 toggle group이다."},{"id":"switch","relation":"compare","note":"개별 설정 하나를 즉시 켜고 끄면 switch, 여러 pressed button을 묶으면 toggle group이다."},{"id":"checkbox","relation":"alternative","note":"폼 제출용 다중 선택값이면 toggle group보다 checkbox가 더 명확하다."}]},{"id":"navigation-drawer","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"내비게이션 드로어","aliases":["navigation drawer","앱 메뉴 드로어","사이드 메뉴","모바일 내비게이션 드로어"]},"en":{"name":"Navigation drawer","aliases":["Nav drawer","App drawer","Mobile navigation drawer"]},"one_liner":"화면 한쪽에서 열려 앱의 주요 목적지 목록을 보여주는 내비게이션 패널.","description":"모바일이나 앱형 화면에서 메뉴 버튼을 눌러 전체 섹션 이동 목록을 펼친다.","visual_anatomy":["drawer surface","menu trigger","destination rows","active destination"],"when_to_use":["주요 이동 경로가 많고 항상 노출하기엔 공간이 부족할 때"],"anti_use":["핵심 목적지를 너무 깊게 숨기지 않는다"],"prompt_phrases":["메뉴 버튼을 누르면 왼쪽 navigation drawer가 열리게 해줘"]},{"id":"mega-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"메가 메뉴","aliases":["mega menu","대형 메뉴","다열 메뉴"]},"en":{"name":"Mega menu","aliases":["Large menu","Multi-column menu"]},"one_liner":"상단 메뉴에서 여러 카테고리와 링크를 큰 패널로 펼쳐 보여주는 메뉴.","description":"서비스, 제품군, 문서처럼 항목이 많을 때 2열 이상으로 구조화해 탐색하게 한다.","visual_anatomy":["top trigger","large panel","columns","grouped links"],"when_to_use":["전역 내비게이션의 하위 항목이 많고 구조를 한눈에 보여줘야 할 때"],"anti_use":["항목이 적으면 dropdown menu가 더 단순하다","모바일에서는 별도 drawer 구성이 필요하다"],"prompt_phrases":["상단 제품 메뉴를 누르면 3열 mega menu가 펼쳐지게 해줘"]},{"id":"context-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"컨텍스트 메뉴","aliases":["context menu","우클릭 메뉴","상황 메뉴"]},"en":{"name":"Context menu","aliases":["Right-click menu","Contextual menu"]},"one_liner":"특정 항목이나 영역의 상황에 맞는 명령을 띄우는 메뉴.","description":"파일, 카드, 셀 같은 대상 위에서 열리며 복사, 이름 변경, 삭제 같은 대상별 행동을 제공한다.","visual_anatomy":["target item","floating menu","command rows","selected command"],"when_to_use":["대상별 보조 명령이 많고 기본 화면에 모두 노출하기 어려울 때"],"anti_use":["중요한 행동을 우클릭에만 숨기지 않는다"],"prompt_phrases":["카드를 우클릭하면 편집 삭제 context menu가 나오게 해줘"],"related":[{"id":"long-press-menu","relation":"compare","note":"모바일에서 트리거 방식이 갈린다 — long-press-menu는 터치-홀드로 우연히 발견되고, 이 항목(툴바 버튼을 눌러 아래로 펼쳐지는 pull-down 방식 포함)은 명시적 버튼으로 발견 가능성이 더 높다. 항목 구성(icon+label 행, destructive 스타일)은 공유한다."}]},{"id":"loading-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"로딩 버튼","aliases":["loading button","pending button","처리 중 버튼"]},"en":{"name":"Loading button","aliases":["Pending button","Busy button"]},"one_liner":"클릭 후 작업 중임을 spinner나 문구로 보여주는 버튼.","description":"제출, 저장, 결제처럼 시간이 걸리는 행동에서 중복 클릭을 막고 처리 상태를 알려준다.","visual_anatomy":["button label","spinner","disabled state","completed state"],"when_to_use":["버튼 클릭 뒤 비동기 작업이 진행될 때"],"anti_use":["작업이 즉시 끝나면 로딩 상태를 불필요하게 보여주지 않는다"],"prompt_phrases":["저장 버튼을 누르면 spinner가 도는 loading button으로 바꿔줘"]},{"id":"copy-field","status":"draft","category":"input","group":"input-text","ko":{"name":"복사 필드","aliases":["copy field","복사 입력창","copyable field"]},"en":{"name":"Copy field","aliases":["Copyable field","Read-only copy input"]},"one_liner":"읽기 전용 값과 복사 버튼을 함께 제공하는 요소.","description":"초대 링크, API 키, 쿠폰 코드처럼 사용자가 값을 직접 편집하지 않고 복사해야 할 때 쓴다.","visual_anatomy":["read-only value","copy button","copied feedback","input-like container"],"when_to_use":["값을 보여주고 사용자가 클립보드로 가져가야 할 때"],"anti_use":["편집 가능한 입력창처럼 보이게 해서 혼동시키지 않는다"],"prompt_phrases":["초대 링크 옆에 복사 버튼이 있는 copy field를 넣어줘"]},{"id":"bulk-action-bar","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"일괄 작업 바","aliases":["bulk action bar","선택 작업 바","bulk actions"]},"en":{"name":"Bulk action bar","aliases":["Selection action bar","Bulk actions"]},"one_liner":"여러 항목을 선택했을 때 삭제, 이동, 내보내기 같은 일괄 행동을 보여주는 바.","description":"테이블이나 리스트에서 선택된 항목 수와 가능한 집합 행동을 한 영역에 표시한다.","visual_anatomy":["selected count","action buttons","clear selection","elevated bar"],"when_to_use":["여러 행이나 카드에 같은 행동을 한 번에 적용해야 할 때"],"anti_use":["항목 하나에만 적용되는 행동은 row action으로 두는 편이 낫다"],"prompt_phrases":["테이블에서 행을 선택하면 bulk action bar가 나타나게 해줘"]},{"id":"speed-dial","status":"draft","category":"action","group":"action-buttons","ko":{"name":"스피드 다이얼","aliases":["speed dial","확장 FAB","빠른 작업 메뉴","FAB 메뉴","확장 액션 메뉴"]},"en":{"name":"Speed dial","aliases":["Expandable FAB","Quick actions","FAB menu","Expanding action menu"]},"one_liner":"플로팅 버튼을 누르면 여러 빠른 행동 버튼이 펼쳐지는 요소.","description":"모바일이나 좁은 화면에서 하나의 주요 버튼 아래에 관련 작업 여러 개를 숨겨둔다. 배경을 어둡게 까는 스크림은 필수가 아니며, 주 행동과 보조 행동의 위계가 강할 때만 넣는다.","visual_anatomy":["main fab","expand transition","expanded action buttons","floating stack","labels optional","backdrop dim optional"],"when_to_use":["주요 행동과 관련 보조 행동을 좁은 화면에 배치해야 할 때"],"anti_use":["항동이 많아지면 메뉴나 toolbar가 더 낫다"],"prompt_phrases":["오른쪽 아래 FAB를 누르면 speed dial 액션들이 펼쳐지게 해줘"],"related":[{"id":"floating-action-button","relation":"compare","note":"단일 FAB의 라벨/아이콘 확장(extended FAB)과 달리, speed-dial은 탭 한 번으로 보조 행동 버튼 여러 개가 펼쳐지고 각 버튼은 독립된 44x44 이상 탭 타깃을 갖는다."}]},{"id":"app-shell","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"앱 셸","aliases":["app shell","앱 레이아웃","application shell"]},"en":{"name":"App shell","aliases":["Application shell","App layout frame"]},"one_liner":"헤더, 사이드바, 콘텐츠 영역처럼 앱의 고정 뼈대를 이루는 레이아웃.","description":"대시보드나 관리 도구에서 반복되는 전역 내비게이션과 작업 영역을 안정적으로 배치한다.","visual_anatomy":["top bar","sidebar","content area","persistent navigation"],"when_to_use":["여러 화면이 같은 앱 구조를 공유할 때"],"anti_use":["단일 랜딩 페이지처럼 앱 내비게이션이 필요 없는 화면에는 과하다"],"prompt_phrases":["왼쪽 사이드바와 상단바가 있는 app shell 레이아웃을 만들어줘"]},{"id":"split-pane","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"분할 패널","aliases":["split pane","split panel","좌우 분할"]},"en":{"name":"Split pane","aliases":["Split panel","Split layout"]},"one_liner":"화면을 두 개 이상의 패널로 나눠 동시에 보여주는 레이아웃.","description":"목록과 미리보기, 코드와 결과, 설정과 상세처럼 관련 영역을 나란히 비교하게 한다.","visual_anatomy":["left pane","divider","right pane","adjustable width optional"],"when_to_use":["두 정보를 함께 보며 작업해야 할 때"],"anti_use":["모바일 좁은 화면에서는 탭이나 드로어 전환이 더 낫다"],"prompt_phrases":["왼쪽 목록 오른쪽 미리보기로 나뉜 split pane을 만들어줘"]},{"id":"snackbar","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"스낵바","aliases":["snackbar","하단 알림","action toast"]},"en":{"name":"Snackbar","aliases":["Bottom notification","Action snackbar"]},"one_liner":"화면 하단에 잠깐 나타나 결과 메시지와 간단한 행동을 제공하는 알림.","description":"toast와 비슷하지만 하단 위치와 하나의 보조 action을 함께 제공하는 패턴으로 자주 쓰인다.","visual_anatomy":["bottom bar","message","optional action","dismiss or timeout"],"when_to_use":["작업 결과를 짧게 알리고 되돌리기 같은 한 가지 행동을 제공할 때"],"anti_use":["중요한 오류나 긴 안내에는 alert나 dialog를 쓴다"],"prompt_phrases":["저장 완료 후 하단 snackbar에 실행 취소 버튼을 보여줘"],"related":[{"id":"toast","relation":"compare","note":"action 없이 짧은 상태만 알리면 toast, 실행 취소 같은 action이 있으면 snackbar가 좋다."},{"id":"alert","relation":"compare","note":"사용자가 계속 읽어야 하는 오류나 안내는 snackbar보다 alert/banner로 유지한다."},{"id":"undo-toast","relation":"use-with","note":"삭제나 보관처럼 되돌릴 수 있는 작업 뒤에는 undo toast/snackbar 패턴을 함께 검토한다."}]},{"id":"undo-toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"실행 취소 토스트","aliases":["undo toast","되돌리기 알림","undo snackbar"]},"en":{"name":"Undo toast","aliases":["Undo snackbar","Reversible toast"]},"one_liner":"작업 완료 메시지와 함께 실행 취소 행동을 제공하는 짧은 알림.","description":"삭제, 보관, 이동처럼 즉시 되돌릴 수 있는 행동 뒤에 사용자가 실수를 복구하게 한다.","visual_anatomy":["message","undo action","transient container","dismiss affordance"],"when_to_use":["되돌릴 수 있는 파괴적 또는 이동 작업 직후"],"anti_use":["되돌릴 수 없는 작업에는 confirmation dialog가 먼저 필요하다"],"prompt_phrases":["삭제 후 undo toast를 띄워서 실행 취소할 수 있게 해줘"]},{"id":"row-selection","status":"draft","category":"selection","group":"selection-misc","ko":{"name":"행 선택","aliases":["row selection","테이블 행 선택","체크박스 행 선택"]},"en":{"name":"Row selection","aliases":["Selectable rows","Table row selection"]},"one_liner":"테이블이나 리스트의 행을 체크해 하나 이상 선택하는 패턴.","description":"선택된 행 수를 추적하고 일괄 작업, 삭제, 내보내기 같은 행동으로 이어진다.","visual_anatomy":["row checkboxes","selected rows","selected count","header checkbox"],"when_to_use":["사용자가 여러 데이터 항목을 골라 작업해야 할 때"],"anti_use":["단순 탐색 리스트에는 선택 체크박스가 불필요할 수 있다"],"prompt_phrases":["테이블 왼쪽에 row selection 체크박스를 넣어줘"]},{"id":"search-view","status":"draft","category":"input","group":"input-search-command","ko":{"name":"검색 뷰","aliases":["search view","전체 검색 화면","검색 패널"]},"en":{"name":"Search view","aliases":["Search surface","Search panel"]},"one_liner":"검색창, 제안, 결과를 한 화면이나 패널로 묶은 검색 전용 영역.","description":"단순 검색창보다 넓은 표면에서 추천어, 최근 검색어, 결과 목록을 함께 보여준다.","visual_anatomy":["search input","suggestions","result list","active query"],"when_to_use":["검색이 화면의 주요 작업일 때","제안과 결과를 함께 보여줘야 할 때"],"anti_use":["간단한 목록 필터에는 search field만으로 충분하다"],"prompt_phrases":["검색창과 추천 결과가 함께 보이는 search view를 만들어줘"]},{"id":"tree-navigation","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"트리 내비게이션","aliases":["tree navigation","계층 메뉴","폴더형 내비게이션"]},"en":{"name":"Tree navigation","aliases":["Navigation tree","Hierarchical navigation"]},"one_liner":"계층 구조를 펼치고 접으며 목적지로 이동하는 내비게이션.","description":"문서, 파일, 설정처럼 부모-자식 관계가 있는 항목을 탐색할 때 쓴다.","visual_anatomy":["parent node","disclosure icon","child nodes","active item"],"when_to_use":["정보 구조가 계층적이고 사용자가 하위 항목을 탐색해야 할 때"],"anti_use":["항목이 평면적이면 sidebar navigation이나 list가 단순하다"],"prompt_phrases":["문서 목차를 펼치고 접는 tree navigation으로 보여줘"]},{"id":"side-sheet","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"사이드 시트","aliases":["side sheet","측면 시트","side panel"]},"en":{"name":"Side sheet","aliases":["Side panel","Side surface"]},"one_liner":"화면 옆에서 열려 보조 작업이나 상세 정보를 담는 패널.","description":"drawer보다 작업 맥락이 강하고, 현재 화면을 유지한 채 폼이나 상세를 보여준다.","visual_anatomy":["side surface","header","close action","supporting content"],"when_to_use":["목록에서 상세를 빠르게 확인하거나 보조 작업을 해야 할 때"],"anti_use":["사용자 집중을 완전히 요구하면 dialog가 더 적합하다"],"prompt_phrases":["오른쪽 side sheet에서 선택 항목 상세를 보여줘"],"related":[{"id":"drawer","relation":"compare","note":"drawer는 넓은 패널 계열의 일반명이고, side sheet는 보조 작업을 담는 측면 표면에 더 가깝다."},{"id":"dialog","relation":"alternative","note":"사용자의 집중 결정이 필요하면 side sheet보다 dialog가 더 명확하다."},{"id":"modal-bottom-sheet","relation":"alternative","note":"모바일에서 같은 보조 작업을 하단에서 막아 처리하면 modal bottom sheet를 쓴다."}]},{"id":"breadcrumbs-menu","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"브레드크럼 메뉴","aliases":["breadcrumb menu","경로 메뉴","sibling path menu"]},"en":{"name":"Breadcrumbs menu","aliases":["Breadcrumb menu","Path menu"]},"one_liner":"브레드크럼의 한 경로 항목에서 형제 위치를 펼쳐 고르는 메뉴.","description":"현재 위치를 보여주면서 같은 깊이의 다른 섹션으로 빠르게 이동하게 한다.","visual_anatomy":["breadcrumb path","menu trigger","sibling options","current item"],"when_to_use":["계층 경로 안에서 형제 페이지 이동이 잦을 때"],"anti_use":["경로가 짧고 단순하면 일반 breadcrumb가 충분하다"],"prompt_phrases":["breadcrumb의 중간 항목을 누르면 sibling menu가 열리게 해줘"]},{"id":"icon-toggle-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"아이콘 토글 버튼","aliases":["icon toggle button","pressed icon button","즐겨찾기 버튼"]},"en":{"name":"Icon toggle button","aliases":["Pressed icon button","Toggle icon"]},"one_liner":"아이콘만 있는 버튼이 눌린 상태를 유지해 켜짐/꺼짐을 나타내는 요소.","description":"즐겨찾기, 북마크, 음소거, 표시/숨김처럼 작은 상태 전환 행동에 쓴다.","visual_anatomy":["icon button","pressed state","icon color change","accessible label"],"when_to_use":["아이콘으로 표현 가능한 이진 상태를 토글할 때"],"anti_use":["의미가 불명확하면 label이나 tooltip을 함께 제공한다"],"prompt_phrases":["하트 아이콘을 누르면 활성화되는 icon toggle button을 넣어줘"]},{"id":"resizable-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"크기 조절 패널","aliases":["resizable panel","resize handle","조절 가능한 패널"]},"en":{"name":"Resizable panel","aliases":["Resizable pane","Resize handle"]},"one_liner":"사용자가 경계선을 끌어 패널의 폭이나 높이를 조절하는 레이아웃.","description":"코드 에디터, 대시보드, 데이터 탐색 화면에서 영역 크기를 사용자가 조절하게 한다.","visual_anatomy":["two panels","resize handle","adjusted size","drag affordance"],"when_to_use":["사용자마다 필요한 정보 영역의 크기가 다를 때"],"anti_use":["간단한 콘텐츠에는 고정 레이아웃이 더 예측 가능하다"],"prompt_phrases":["좌우 패널 사이에 resize handle이 있는 resizable panel을 만들어줘"]},{"id":"master-detail","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"마스터-디테일","aliases":["master detail","목록 상세","list detail layout"]},"en":{"name":"Master-detail","aliases":["List-detail layout","Master detail view"]},"one_liner":"왼쪽 목록에서 항목을 고르면 오른쪽에 상세가 표시되는 레이아웃.","description":"이메일, 주문, 고객 관리처럼 많은 항목을 탐색하며 상세를 빠르게 확인할 때 쓴다.","visual_anatomy":["master list","selected item","detail pane","two-column layout"],"when_to_use":["목록과 상세를 오가며 비교하거나 편집해야 할 때"],"anti_use":["모바일에서는 단계 전환이나 bottom sheet가 더 적합할 수 있다"],"prompt_phrases":["왼쪽 목록 오른쪽 상세의 master-detail 레이아웃을 만들어줘"],"related":[{"id":"adaptive-split-view","relation":"compare","note":"창 크기에 따라 stack과 split을 오가며 목적지 커스터마이즈까지 필요하면 adaptive-split-view를 쓴다. master-detail은 고정 2열 레이아웃만 다룬다."}]},{"id":"adaptive-split-view","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"적응형 스플릿 뷰","aliases":["adaptive split view","사이드바 전환형 레이아웃","탭바 사이드바 전환"]},"en":{"name":"Adaptive split view","aliases":["Sidebar/tab bar convertible layout","Adaptive sidebar layout"]},"one_liner":"창 크기에 따라 탭 바가 사이드바로 바뀌거나 목록-상세가 나란히 붙는 적응형 레이아웃.","description":"좁은 화면에서는 화면 전환(stack) 또는 탭 바로 동작하다가, iPad 같은 넓은 화면에서는 사이드바나 나란한 목록-상세 분할로 전환된다. 사용자가 즐겨찾는 목적지를 골라 커스터마이즈할 수 있다는 점에서 정적 2열 레이아웃인 master-detail과 구분된다.","visual_anatomy":["adaptive container","compact stack view","regular split view","primary list pane","secondary detail pane","tab-bar-to-sidebar toggle"],"when_to_use":["같은 앱이 폰과 태블릿처럼 서로 다른 창 크기에서 동작해야 할 때","사용자가 목적지 목록을 커스터마이즈할 수 있어야 할 때"],"anti_use":["창 크기가 항상 고정된 데스크톱 전용 2열 화면이면 master-detail로 충분하다","목적지 전환 없이 순수 콘텐츠 레이아웃만 필요하면 과도한 추상화다"],"prompt_phrases":["폰에서는 탭바","태블릿에서는 사이드바로 바뀌는 adaptive split view를 만들어줘","창을 넓히면 목록과 상세가 나란히 보이게 해줘"],"related":[{"id":"master-detail","relation":"compare","note":"master-detail은 고정 2열 레이아웃만 다루고, 창 크기에 따른 stack/split 전환이나 목적지 커스터마이즈는 다루지 않는다."}]},{"id":"sticky-header","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"고정 헤더","aliases":["sticky header","fixed header","붙어있는 상단바"]},"en":{"name":"Sticky header","aliases":["Fixed header","Sticky top bar"]},"one_liner":"스크롤해도 화면 상단에 붙어 남아 있는 헤더.","description":"검색, 필터, 제목, 주요 행동을 계속 접근 가능하게 유지한다.","visual_anatomy":["top header","scroll content","sticky position","shadow or border"],"when_to_use":["긴 목록이나 문서에서 상단 행동이 계속 필요할 때"],"anti_use":["작은 화면에서 콘텐츠 공간을 과하게 차지하지 않게 한다"],"prompt_phrases":["스크롤해도 상단에 남는 sticky header를 넣어줘"]},{"id":"sticky-footer-bar","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"고정 하단 바","aliases":["sticky footer bar","bottom action bar","하단 액션바"]},"en":{"name":"Sticky footer bar","aliases":["Bottom action bar","Sticky bottom bar"]},"one_liner":"스크롤과 관계없이 화면 하단에 붙어 주요 행동을 제공하는 바.","description":"저장, 결제, 다음 단계처럼 완료 행동을 항상 보이게 할 때 쓴다.","visual_anatomy":["bottom bar","primary action","secondary action","sticky placement"],"when_to_use":["긴 폼이나 checkout에서 주요 행동을 계속 접근 가능하게 할 때"],"anti_use":["내용을 가리지 않도록 충분한 하단 여백을 둔다"],"prompt_phrases":["긴 폼 아래에 저장 버튼이 있는 sticky footer bar를 넣어줘"]},{"id":"sidebar-section","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"사이드바 섹션","aliases":["sidebar section","grouped sidebar","사이드바 그룹"]},"en":{"name":"Sidebar section","aliases":["Sidebar group","Navigation section"]},"one_liner":"사이드바 안에서 관련 메뉴를 제목과 함께 묶은 구역.","description":"많은 내비게이션 항목을 계층과 주제로 나눠 스캔하기 쉽게 만든다.","visual_anatomy":["section label","grouped nav items","active item","vertical spacing"],"when_to_use":["사이드바 항목이 많아 그룹화가 필요할 때"],"anti_use":["항목이 적으면 섹션 제목이 오히려 소음이 된다"],"prompt_phrases":["사이드바 메뉴를 관리와 설정 sidebar section으로 나눠줘"]},{"id":"inline-alert","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"인라인 알림","aliases":["inline alert","section alert","폼 내부 알림"]},"en":{"name":"Inline alert","aliases":["Section alert","Inline message"]},"one_liner":"폼이나 섹션 안에 직접 배치되는 짧은 알림 메시지.","description":"전체 화면 배너보다 좁은 범위의 오류, 안내, 경고를 해당 맥락 가까이에 보여준다.","visual_anatomy":["small alert container","icon","message","local placement"],"when_to_use":["특정 필드 묶음이나 섹션에만 관련된 안내가 있을 때"],"anti_use":["전역 문제는 alert banner나 dialog로 더 명확히 알린다"],"prompt_phrases":["결제 섹션 안에 inline alert로 카드 오류를 보여줘"]},{"id":"error-boundary","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"오류 경계 화면","aliases":["error boundary","fallback UI","컴포넌트 오류 화면"]},"en":{"name":"Error boundary","aliases":["Fallback UI","Component error fallback"]},"one_liner":"일부 UI가 실패했을 때 전체 앱 대신 해당 영역에 보여주는 복구 화면.","description":"컴포넌트 렌더 오류나 데이터 실패를 격리하고 다시 시도 행동을 제공한다.","visual_anatomy":["failed region","error message","retry action","contained fallback"],"when_to_use":["한 영역의 실패가 전체 화면을 망가뜨리지 않게 해야 할 때"],"anti_use":["사용자가 이해 못 하는 stack trace를 그대로 노출하지 않는다"],"prompt_phrases":["위젯 로딩 실패 시 retry 버튼이 있는 error boundary UI를 보여줘"]},{"id":"confirmation-dialog","status":"draft","category":"feedback","group":"feedback-confirmation-help","ko":{"name":"확인 다이얼로그","aliases":["confirmation dialog","confirm modal","확인 모달"]},"en":{"name":"Confirmation dialog","aliases":["Confirm dialog","Confirmation modal"]},"one_liner":"중요한 행동을 실행하기 전에 사용자의 명시적 확인을 받는 모달.","description":"삭제, 결제, 권한 변경처럼 되돌리기 어렵거나 영향이 큰 행동 앞에 쓴다.","visual_anatomy":["dialog title","risk message","cancel action","confirm action"],"when_to_use":["파괴적이거나 비용이 발생하는 행동 전에"],"anti_use":["사소한 행동마다 확인을 요구하면 사용자를 피로하게 한다"],"prompt_phrases":["삭제 전에 취소와 삭제 버튼이 있는 confirmation dialog를 띄워줘"]},{"id":"docs-feedback-widget","status":"draft","category":"feedback","group":"feedback-confirmation-help","kind":"block","ko":{"name":"문서 피드백 위젯","aliases":["was this helpful widget","도움이 되었나요 위젯","문서 평가 위젯"]},"en":{"name":"Docs feedback widget","aliases":["Was this helpful widget","Page feedback widget"]},"one_liner":"문서 페이지 하단에서 이 페이지가 도움이 되었는지 즉석으로 묻는 짧은 피드백 위젯.","description":"짧은 질문과 Yes/No 또는 아이콘 버튼 쌍으로 즉석 반응을 받고, 클릭 후 감사 메시지나 짧은 후속 텍스트 입력으로 상태를 전환한다.","visual_anatomy":["short question text","yes/no or icon button pair","post-click confirmation state","optional follow-up text input","bottom-of-page card"],"when_to_use":["문서 페이지가 실제로 도움이 되는지 가벼운 신호를 계속 수집해야 할 때"],"anti_use":["상품/서비스에 대한 평점과 리뷰는 reviews-summary-block 같은 커머스 리뷰 UI가 더 적합하다"],"prompt_phrases":["문서 페이지 하단에 도움이 되었나요 피드백 위젯을 넣어줘","Yes No 버튼과 후속 텍스트 입력이 있는 was-this-helpful 위젯을 만들어줘"]},{"id":"rate-limit-state","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"사용량 제한 상태","aliases":["rate limit state","제한 상태","retry after"]},"en":{"name":"Rate limit state","aliases":["Retry-after state","Limit reached state"]},"one_liner":"요청이 너무 많아 잠시 기다려야 함을 알려주는 상태 UI.","description":"남은 대기 시간, 다시 시도 버튼, 제한 이유를 함께 보여 사용자가 다음 행동을 알게 한다.","visual_anatomy":["limit message","countdown or retry time","retry action","neutral warning tone"],"when_to_use":["API 호출","로그인 시도","생성 요청 등 사용량 제한이 걸렸을 때"],"anti_use":["단순 네트워크 오류와 혼동하지 않는다"],"prompt_phrases":["요청 제한이 걸리면 남은 시간을 보여주는 rate limit state를 넣어줘"]},{"id":"data-table-toolbar","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"데이터 테이블 툴바","aliases":["data table toolbar","table toolbar","표 도구막대"]},"en":{"name":"Data table toolbar","aliases":["Table toolbar","Data grid toolbar"]},"one_liner":"테이블 위에서 검색, 필터, 보기 설정, 일괄 행동을 모아 제공하는 영역.","description":"데이터 테이블을 탐색하고 조작하는 주요 컨트롤을 한 줄에 배치한다.","visual_anatomy":["search field","filter button","view options","action buttons"],"when_to_use":["테이블의 검색/필터/내보내기/보기 설정이 필요할 때"],"anti_use":["컨트롤이 하나뿐이면 별도 toolbar가 과하다"],"prompt_phrases":["테이블 위에 검색 필터 내보내기 버튼이 있는 data table toolbar를 넣어줘"]},{"id":"column-header-menu","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"컬럼 헤더 메뉴","aliases":["column header menu","열 메뉴","컬럼 옵션"]},"en":{"name":"Column header menu","aliases":["Column menu","Header menu"]},"one_liner":"테이블 열 제목에서 정렬, 필터, 숨김 같은 열별 행동을 여는 메뉴.","description":"특정 컬럼에 적용되는 조작을 컬럼 헤더 근처에 모아둔다.","visual_anatomy":["column header","menu trigger","sort option","hide or filter action"],"when_to_use":["각 열마다 정렬/필터/숨김 행동이 필요할 때"],"anti_use":["단순 표에는 메뉴보다 직접 sort icon이 충분할 수 있다"],"prompt_phrases":["테이블 컬럼 헤더에 정렬과 숨김 column menu를 넣어줘"]},{"id":"faceted-filter","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"패싯 필터","aliases":["faceted filter","facet filter","다중 조건 필터","카테고리 필터","카테고리 필터 사이드바"]},"en":{"name":"Faceted filter","aliases":["Facet filter","Multi-facet filter","Category filter facets","Category filter sidebar"]},"one_liner":"상태, 카테고리, 가격대처럼 여러 속성별 조건을 조합하는 필터.","description":"쇼핑, 데이터 테이블, 검색 결과에서 사용자가 여러 차원의 조건을 선택해 결과를 좁힌다. 카테고리 페이지 좌측에 고정되는 사이드바 형태에서는 속성별 그룹을 아코디언이나 상시 펼침으로 두고, 적용된 조건을 칩으로 요약하며 결과 수를 실시간으로 갱신하고 한 번에 초기화하는 clear-all 행동을 함께 제공한다.","visual_anatomy":["filter groups","checkbox options","selected count","active chips","live result count","clear-all action"],"when_to_use":["데이터 속성이 다양하고 조합 검색이 필요할 때"],"anti_use":["조건이 1-2개면 단순 filter chip이나 select가 낫다"],"prompt_phrases":["상태와 카테고리를 고르는 faceted filter를 사이드바에 넣어줘","적용된 필터 칩과 실시간 결과 수가 있는 category filter sidebar를 만들어줘"]},{"id":"stat-list","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"지표 리스트","aliases":["stat list","metric list","통계 목록"]},"en":{"name":"Stat list","aliases":["Metric list","Stats list"]},"one_liner":"여러 핵심 숫자를 세로 목록으로 작게 정리해 보여주는 데이터 요소.","description":"카드보다 더 조밀하게 여러 지표와 변화량을 한 영역에서 비교한다.","visual_anatomy":["metric label","value","delta","stacked rows"],"when_to_use":["여러 작은 지표를 한눈에 비교해야 할 때"],"anti_use":["각 지표를 크게 강조해야 하면 metric card가 낫다"],"prompt_phrases":["방문자 전환율 매출을 stat list로 보여줘"]},{"id":"activity-feed","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"활동 피드","aliases":["activity feed","활동 내역","이벤트 피드"]},"en":{"name":"Activity feed","aliases":["Activity log","Event feed"]},"one_liner":"사용자나 시스템의 최근 활동을 시간순으로 보여주는 목록.","description":"누가 무엇을 했는지, 언제 바뀌었는지 추적하는 협업/관리 화면에 쓴다.","visual_anatomy":["actor","action text","timestamp","vertical list"],"when_to_use":["변경 이력이나 협업 활동을 시간순으로 보여줘야 할 때"],"anti_use":["정확한 감사 로그가 필요하면 audit log처럼 더 구조화한다"],"prompt_phrases":["최근 팀 활동을 activity feed로 보여줘"],"related":[{"id":"audit-log","relation":"compare","note":"activity feed는 협업 맥락의 소셜/최근 활동 스트림이고, audit log는 권한·결제·설정 변경처럼 추적 가능성이 중요한 이벤트를 actor-action-target-timestamp로 엄격히 구조화한 컴플라이언스급 불변 기록이다"}]},{"id":"map-marker","status":"draft","category":"data-display","group":"data-metrics-charts","ko":{"name":"지도 마커","aliases":["map marker","지도 핀","location pin"]},"en":{"name":"Map marker","aliases":["Map pin","Location marker"]},"one_liner":"지도나 공간 화면에서 특정 위치를 표시하는 핀 형태 요소.","description":"장소, 배송 위치, 이벤트 위치처럼 좌표가 있는 항목을 시각적으로 표시한다.","visual_anatomy":["pin icon","map surface","selected marker","label optional"],"when_to_use":["위치 기반 정보를 지도 위에 표시해야 할 때"],"anti_use":["지도 없이 단순 주소 목록이면 list나 card가 더 적합하다"],"prompt_phrases":["지도 위에 선택된 장소를 map marker로 표시해줘"]},{"id":"scrubber","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"스크러버","aliases":["scrubber","재생 위치 바","timeline scrubber"]},"en":{"name":"Scrubber","aliases":["Timeline scrubber","Seek bar"]},"one_liner":"영상이나 오디오의 재생 위치를 드래그해 이동하는 컨트롤.","description":"현재 위치, 전체 길이, thumb를 함께 보여주며 사용자가 원하는 시점으로 이동한다.","visual_anatomy":["timeline track","current progress","draggable thumb","time labels"],"when_to_use":["미디어나 타임라인에서 위치를 빠르게 이동해야 할 때"],"anti_use":["단순 숫자 범위 조절에는 slider가 더 일반적이다"],"prompt_phrases":["동영상 하단에 재생 위치를 조절하는 scrubber를 넣어줘"]},{"id":"range-slider","status":"draft","category":"selection","group":"selection-options","ko":{"name":"범위 슬라이더","aliases":["range slider","양방향 슬라이더","가격 범위"]},"en":{"name":"Range slider","aliases":["Dual-thumb slider","Range control"]},"one_liner":"두 손잡이로 최소값과 최대값을 함께 조절하는 슬라이더.","description":"가격대, 기간, 점수 범위처럼 연속적인 범위를 선택할 때 쓴다.","visual_anatomy":["track","lower thumb","upper thumb","selected range"],"when_to_use":["최소/최대 범위를 시각적으로 조절해야 할 때"],"anti_use":["정확한 숫자 입력이 중요하면 number input을 함께 제공한다"],"prompt_phrases":["가격 최소 최대를 고르는 range slider를 넣어줘"]},{"id":"multi-select","status":"draft","category":"selection","group":"selection-options","ko":{"name":"다중 선택창","aliases":["multi select","multiple select","멀티셀렉트"]},"en":{"name":"Multi-select","aliases":["Multiple select","Multi select dropdown"]},"one_liner":"여러 옵션을 선택하고 선택값을 칩이나 목록으로 보여주는 선택 입력.","description":"역할, 태그, 카테고리처럼 고정된 보기 중 여러 개를 고르게 한다.","visual_anatomy":["select trigger","selected chips","option list","checkmarks"],"when_to_use":["정해진 보기 중 여러 값을 선택해야 할 때"],"anti_use":["자유 입력이 필요하면 tag input이 더 적합하다"],"prompt_phrases":["여러 카테고리를 고르는 multi-select를 넣어줘"]},{"id":"transfer-list","status":"draft","category":"selection","group":"selection-options","ko":{"name":"전송 리스트","aliases":["transfer list","dual listbox","좌우 이동 목록"]},"en":{"name":"Transfer list","aliases":["Dual listbox","Shuttle list"]},"one_liner":"왼쪽 목록의 항목을 오른쪽 목록으로 옮겨 선택 집합을 만드는 패턴.","description":"사용자 권한, 멤버 선택, 포함/제외 항목을 명확히 나눠 관리할 때 쓴다.","visual_anatomy":["source list","target list","move buttons","selected items"],"when_to_use":["선택 가능한 항목과 선택된 항목을 동시에 보여줘야 할 때"],"anti_use":["항목 수가 적으면 checkbox list가 더 단순하다"],"prompt_phrases":["사용자를 왼쪽에서 오른쪽으로 옮기는 transfer list를 만들어줘"]},{"id":"virtualized-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"가상화 리스트","aliases":["virtualized list","windowed list","대량 리스트"]},"en":{"name":"Virtualized list","aliases":["Windowed list","Virtual list"]},"one_liner":"많은 항목 중 화면에 보이는 일부만 렌더링하는 긴 목록 패턴.","description":"수천 개 항목을 빠르게 스크롤해야 할 때 성능을 위해 보이는 범위만 그린다.","visual_anatomy":["long scroll area","visible rows","scroll thumb","offscreen placeholders"],"when_to_use":["항목 수가 매우 많아 일반 list가 느려질 때"],"anti_use":["짧은 목록에는 구현 복잡도만 늘어난다"],"prompt_phrases":["수천 개 항목을 virtualized list로 빠르게 스크롤되게 해줘"]},{"id":"infinite-scroll","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"무한 스크롤","aliases":["infinite scroll","끝없는 목록","자동 더보기"]},"en":{"name":"Infinite scroll","aliases":["Endless scroll","Load on scroll"]},"one_liner":"목록 끝에 도달하면 다음 항목을 자동으로 불러오는 패턴.","description":"피드나 탐색 목록에서 페이지 버튼 없이 계속 콘텐츠를 이어 보여준다.","visual_anatomy":["list items","bottom loader","appended items","scroll position"],"when_to_use":["탐색형 콘텐츠를 연속적으로 소비하게 할 때"],"anti_use":["정확한 위치 이동이나 footer 접근이 중요하면 pagination이 낫다"],"prompt_phrases":["목록 끝에 도달하면 더 불러오는 infinite scroll을 넣어줘"]},{"id":"pull-to-refresh","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"당겨서 새로고침","aliases":["pull to refresh","swipe refresh","아래로 당겨 새로고침"]},"en":{"name":"Pull to refresh","aliases":["Swipe refresh","Pull refresh"]},"one_liner":"모바일에서 목록을 아래로 당겨 새 데이터를 불러오는 제스처 패턴.","description":"피드나 메시지 목록에서 최신 상태를 사용자가 직접 갱신하게 한다.","visual_anatomy":["pulled list","refresh indicator","release state","updated list"],"when_to_use":["모바일 목록에서 새 데이터를 수동 갱신해야 할 때"],"anti_use":["데스크톱 웹에서는 명시적 refresh button이 더 발견 가능하다"],"prompt_phrases":["모바일 피드에 pull-to-refresh 상태 표시를 넣어줘"]},{"id":"swipe-action","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"스와이프 액션","aliases":["swipe action","밀어서 삭제","swipe row action"]},"en":{"name":"Swipe action","aliases":["Swipe row action","Swipe command"]},"one_liner":"모바일 목록 항목을 옆으로 밀어 숨겨진 행동을 드러내는 패턴.","description":"삭제, 보관, 읽음 처리 같은 항목별 빠른 행동을 제스처로 제공한다.","visual_anatomy":["list row","dragged offset","revealed action","destructive color optional"],"when_to_use":["모바일 목록에서 항목별 빠른 행동이 자주 필요할 때"],"anti_use":["중요 행동을 스와이프에만 숨기지 않는다"],"prompt_phrases":["알림 리스트 항목을 왼쪽으로 밀면 삭제 swipe action이 보이게 해줘"]},{"id":"wizard","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"위저드","aliases":["wizard","단계형 폼","multi-step flow"]},"en":{"name":"Wizard","aliases":["Multi-step flow","Step-by-step form"]},"one_liner":"복잡한 작업을 여러 단계 화면으로 나눠 순서대로 진행하게 하는 흐름.","description":"가입, 설정, 결제처럼 한 번에 입력하기 많은 절차를 단계별로 줄인다.","visual_anatomy":["step indicator","current panel","next button","back button"],"when_to_use":["복잡한 작업을 순서대로 안내해야 할 때"],"anti_use":["간단한 폼을 불필요하게 여러 단계로 쪼개지 않는다"],"prompt_phrases":["가입 과정을 3단계 wizard로 만들어줘"]},{"id":"toast-stack","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"토스트 스택","aliases":["toast stack","stacked toasts","알림 묶음"]},"en":{"name":"Toast stack","aliases":["Stacked toasts","Notification stack"]},"one_liner":"여러 개의 토스트 알림이 겹치거나 쌓여 나타나는 상태.","description":"짧은 알림이 연속 발생할 때 위치와 순서를 유지해 사용자가 놓치지 않게 한다.","visual_anatomy":["multiple toast cards","stacking offset","close actions","newest item"],"when_to_use":["짧은 알림이 동시에 여러 개 발생할 수 있을 때"],"anti_use":["중요한 알림을 토스트 더미 속에 묻지 않는다"],"prompt_phrases":["오른쪽 아래에 여러 toast가 쌓이는 toast stack을 보여줘"]},{"id":"skeleton-table","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"테이블 스켈레톤","aliases":["skeleton table","table skeleton","표 로딩 자리표시자"]},"en":{"name":"Skeleton table","aliases":["Table skeleton","Loading table skeleton"]},"one_liner":"테이블 데이터가 로딩되는 동안 행과 열 형태를 미리 보여주는 스켈레톤.","description":"실제 표가 들어올 구조를 유지해 로딩 중에도 화면 흔들림을 줄인다.","visual_anatomy":["header placeholders","row placeholders","column grid","loading shimmer optional"],"when_to_use":["테이블 데이터를 불러오는 동안 구조를 먼저 보여주고 싶을 때"],"anti_use":["로딩 시간이 매우 짧으면 spinner나 아무 표시 없이도 충분할 수 있다"],"prompt_phrases":["테이블 데이터를 불러오는 동안 skeleton table을 보여줘"]},{"id":"empty-table","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"빈 테이블","aliases":["empty table","빈 표","no rows table"]},"en":{"name":"Empty table","aliases":["No rows table","Empty data table"]},"one_liner":"테이블에 표시할 행이 없을 때 빈 상태와 다음 행동을 보여주는 패턴.","description":"단순히 빈 표만 보여주지 않고 이유, 검색 초기화, 새 항목 추가 같은 행동을 함께 제공한다.","visual_anatomy":["table header","empty body","message","recovery action"],"when_to_use":["필터 결과가 없거나 아직 데이터가 없는 테이블에서"],"anti_use":["오류로 데이터를 못 불러온 상황은 error state로 구분한다"],"prompt_phrases":["테이블에 데이터가 없으면 empty table 상태와 추가 버튼을 보여줘"]},{"id":"table-density-control","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"테이블 밀도 조절","aliases":["table density","density control","행 높이 조절"]},"en":{"name":"Table density control","aliases":["Density control","Row density selector"]},"one_liner":"테이블 행 간격을 compact, default, spacious처럼 바꾸는 컨트롤.","description":"데이터 밀도와 읽기 편안함 사이를 사용자가 선택하게 한다.","visual_anatomy":["density buttons","table rows","row height change","selected density"],"when_to_use":["데이터를 조밀하게 보거나 여유 있게 읽는 요구가 모두 있을 때"],"anti_use":["일반 카드 목록에는 밀도 조절이 과할 수 있다"],"prompt_phrases":["테이블 우측에 compact comfortable density control을 넣어줘"]},{"id":"column-visibility-menu","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"컬럼 표시 메뉴","aliases":["column visibility","컬럼 숨김","표시할 열"]},"en":{"name":"Column visibility menu","aliases":["Show columns menu","Column chooser"]},"one_liner":"테이블에서 어떤 열을 보이거나 숨길지 선택하는 메뉴.","description":"사용자가 자신의 작업에 필요한 컬럼만 남겨 표를 단순하게 만든다.","visual_anatomy":["menu trigger","column checkboxes","visible columns","table preview"],"when_to_use":["컬럼이 많고 사용자마다 필요한 정보가 다를 때"],"anti_use":["컬럼이 적으면 숨김 메뉴가 불필요하다"],"prompt_phrases":["테이블 설정에 column visibility menu를 넣어줘"]},{"id":"saved-view-tabs","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"저장된 뷰 탭","aliases":["saved views","view tabs","저장 필터 탭"]},"en":{"name":"Saved view tabs","aliases":["Saved views","View presets"]},"one_liner":"자주 쓰는 필터나 정렬 조합을 탭처럼 저장해 전환하는 패턴.","description":"전체, 내 작업, 보관됨처럼 목록의 보기 조건을 빠르게 바꾼다. 개인만 보는 뷰와 팀에 공유된 뷰를 함께 저장하는 내부 도구에서는 각 뷰에 personal/shared 배지를 붙여 소유 범위를 구분한다.","visual_anatomy":["tabs","saved filter names","active view","list count","personal or shared scope badge","default view indicator"],"when_to_use":["사용자가 같은 조건 조합을 반복해서 볼 때","팀원과 같은 필터 조합을 공유해야 할 때"],"anti_use":["일회성 필터는 filter chip이나 faceted filter가 낫다"],"prompt_phrases":["전체 내 작업 보관됨 saved view tabs를 테이블 위에 넣어줘","개인 뷰와 팀 공유 뷰를 구분하는 saved view tabs를 만들어줘"],"related":[{"id":"workspace-switcher","relation":"use-with","note":"saved view tabs의 personal/shared 스코프는 workspace switcher가 정하는 현재 팀·조직 컨텍스트 안에서 해석된다 — 뷰 자체를 전환하는 것과 작업 공간을 전환하는 것은 별개의 조작이다"}]},{"id":"filter-panel","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"필터 패널","aliases":["filter panel","filter drawer","필터 사이드 패널"]},"en":{"name":"Filter panel","aliases":["Filter drawer","Filter sidebar"]},"one_liner":"검색 결과나 목록의 여러 필터 조건을 별도 패널에 모아둔 영역.","description":"조건이 많아 한 줄 필터 바에 담기 어려울 때 사이드 패널이나 드로어로 제공한다.","visual_anatomy":["panel surface","filter groups","apply button","reset action"],"when_to_use":["필터 조건이 많고 세부 옵션이 필요할 때"],"anti_use":["간단한 필터 두세 개는 filter bar가 더 빠르다"],"prompt_phrases":["목록 오른쪽에 조건을 고르는 filter panel을 열어줘"]},{"id":"advanced-filter-builder","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"고급 필터 빌더","aliases":["advanced filter","filter builder","조건 빌더"]},"en":{"name":"Advanced filter builder","aliases":["Filter builder","Conditional filter"]},"one_liner":"필드, 연산자, 값을 조합해 복잡한 필터 조건을 만드는 UI.","description":"상태가 활성이고 금액이 10만원 이상 같은 조건식을 사용자가 직접 구성하게 한다.","visual_anatomy":["field selector","operator selector","value input","add condition"],"when_to_use":["데이터 탐색 조건이 다양하고 조합이 복잡할 때"],"anti_use":["초보자용 단순 목록에는 지나치게 어렵다"],"prompt_phrases":["필드 연산자 값을 조합하는 advanced filter builder를 넣어줘"]},{"id":"query-builder","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"쿼리 빌더","aliases":["query builder","조건식 빌더","rules builder"]},"en":{"name":"Query builder","aliases":["Rules builder","Condition builder"]},"one_liner":"여러 조건 그룹을 AND/OR로 묶어 검색 규칙을 만드는 고급 UI.","description":"필터 빌더보다 더 구조화된 규칙 집합을 만들 때 쓴다.","visual_anatomy":["condition rows","and-or selector","nested group","run query action"],"when_to_use":["사용자가 복잡한 검색 규칙을 저장하거나 재사용해야 할 때"],"anti_use":["일반 사용자의 간단한 검색에는 search field가 낫다"],"prompt_phrases":["AND OR 조건을 추가하는 query builder를 만들어줘"]},{"id":"grouped-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"그룹 리스트","aliases":["grouped list","sectioned list","묶음 목록"]},"en":{"name":"Grouped list","aliases":["Sectioned list","Grouped rows"]},"one_liner":"목록 항목을 날짜, 상태, 카테고리 같은 제목 아래에 묶어 보여주는 리스트.","description":"긴 목록을 의미 있는 덩어리로 나눠 스캔하기 쉽게 만든다.","visual_anatomy":["group header","grouped rows","row separators","counts optional"],"when_to_use":["항목이 많고 자연스러운 그룹 기준이 있을 때"],"anti_use":["그룹당 항목이 하나뿐이면 오히려 복잡하다"],"prompt_phrases":["알림을 오늘 어제로 나누는 grouped list로 보여줘"]},{"id":"nested-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"중첩 리스트","aliases":["nested list","하위 목록","nested rows"]},"en":{"name":"Nested list","aliases":["Sublist","Nested rows"]},"one_liner":"목록 안의 항목 아래에 하위 항목을 들여쓰기해 보여주는 구조.","description":"댓글 답글, 카테고리 하위 항목, 작업 subtasks처럼 부모-자식 관계를 표현한다.","visual_anatomy":["parent row","indented child rows","expand state","hierarchy spacing"],"when_to_use":["목록 항목 사이에 위계가 있을 때"],"anti_use":["깊이가 깊어지면 tree view가 더 명확하다"],"prompt_phrases":["작업과 하위 작업을 nested list로 보여줘"]},{"id":"draggable-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"드래그 리스트","aliases":["draggable list","reorderable list","순서 변경 목록"]},"en":{"name":"Draggable list","aliases":["Reorderable list","Drag list"]},"one_liner":"항목을 드래그해 순서를 바꿀 수 있는 목록.","description":"우선순위, 메뉴 순서, 재생목록처럼 사용자가 항목 순서를 직접 정한다.","visual_anatomy":["drag handles","list rows","selected row","reorder position"],"when_to_use":["순서 자체가 중요한 목록에서"],"anti_use":["정렬 기준이 명확하면 sort control이 더 예측 가능하다"],"prompt_phrases":["항목을 드래그해서 순서를 바꾸는 draggable list를 만들어줘"]},{"id":"reorder-handle","status":"draft","category":"action","group":"action-misc","ko":{"name":"순서 변경 핸들","aliases":["reorder handle","drag handle","잡고 끄는 핸들"]},"en":{"name":"Reorder handle","aliases":["Drag handle","Move handle"]},"one_liner":"항목을 잡고 끌어 순서를 바꿀 수 있음을 나타내는 작은 핸들.","description":"점이나 줄 아이콘으로 표현되며 리스트 항목의 왼쪽에 자주 놓인다.","visual_anatomy":["handle icon","row","drag affordance","moved state"],"when_to_use":["행 전체 클릭과 드래그 행동을 구분해야 할 때"],"anti_use":["드래그가 지원되지 않으면 장식으로 두지 않는다"],"prompt_phrases":["리스트 항목 왼쪽에 reorder handle을 넣어줘"]},{"id":"selection-summary","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"선택 요약","aliases":["selection summary","selected summary","선택 개수 표시"]},"en":{"name":"Selection summary","aliases":["Selected summary","Selection count"]},"one_liner":"현재 선택된 항목 수와 적용 가능한 행동을 요약해 보여주는 영역.","description":"row selection이나 multi-select 후 사용자가 선택 상태를 파악하고 해제할 수 있게 한다.","visual_anatomy":["selected count","clear action","bulk action","summary bar"],"when_to_use":["여러 항목 선택 후 사용자가 현재 선택 범위를 알아야 할 때"],"anti_use":["선택 상태가 하나뿐이면 별도 요약이 필요 없다"],"prompt_phrases":["3개 선택됨과 전체 해제가 있는 selection summary를 보여줘"]},{"id":"comparison-table","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"비교 테이블","aliases":["comparison table","비교표","기능 비교"]},"en":{"name":"Comparison table","aliases":["Feature comparison table","Compare table"]},"one_liner":"여러 상품이나 옵션의 속성을 열로 나란히 비교하는 표.","description":"요금제, 제품, 기능 차이를 한눈에 비교하게 한다.","visual_anatomy":["comparison columns","feature rows","checkmarks","highlighted plan"],"when_to_use":["사용자가 여러 선택지를 비교해 결정해야 할 때"],"anti_use":["선택지가 하나뿐이면 일반 description list가 낫다"],"prompt_phrases":["Basic Pro Enterprise를 비교하는 comparison table을 넣어줘"]},{"id":"pivot-table","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"피벗 테이블","aliases":["pivot table","요약 테이블","cross table"]},"en":{"name":"Pivot table","aliases":["Cross table","Summary table"]},"one_liner":"행과 열 기준을 바꿔 데이터를 집계하고 요약하는 고급 테이블.","description":"지역별 월별 매출처럼 차원을 교차해 합계와 소계를 보여준다.","visual_anatomy":["row groups","column groups","aggregate cells","totals"],"when_to_use":["다차원 데이터를 요약 분석해야 할 때"],"anti_use":["단순 행 목록에는 data table이 더 적합하다"],"prompt_phrases":["월별 지역별 매출을 pivot table로 보여줘"]},{"id":"tree-table","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"트리 테이블","aliases":["tree table","treegrid","계층 테이블"]},"en":{"name":"Tree table","aliases":["Treegrid","Hierarchical table"]},"one_liner":"테이블 행이 계층 구조를 갖고 펼치거나 접을 수 있는 데이터 표.","description":"폴더, 조직도, 계정 구조처럼 행에 부모-자식 관계가 있을 때 사용한다.","visual_anatomy":["expandable row","indentation","columns","child rows"],"when_to_use":["계층 데이터와 열 데이터를 동시에 보여줘야 할 때"],"anti_use":["위계만 중요하면 tree view가 더 단순하다"],"prompt_phrases":["폴더 구조를 펼칠 수 있는 tree table로 보여줘"]},{"id":"expandable-row","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"펼침 행","aliases":["expandable row","expandable table row","상세 펼침 행"]},"en":{"name":"Expandable row","aliases":["Expandable table row","Row disclosure"]},"one_liner":"테이블이나 리스트 행을 펼쳐 추가 정보를 같은 자리에서 보여주는 패턴.","description":"별도 상세 화면으로 이동하지 않고 요약 행 아래에 상세를 드러낸다.","visual_anatomy":["row trigger","chevron","expanded content","nested area"],"when_to_use":["행별 상세가 짧고 현재 맥락에서 바로 확인해야 할 때"],"anti_use":["상세가 길거나 편집이 복잡하면 detail panel이 낫다"],"prompt_phrases":["테이블 행을 클릭하면 상세가 펼쳐지는 expandable row를 넣어줘"]},{"id":"detail-row","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"상세 행","aliases":["detail row","row details","테이블 상세 행"]},"en":{"name":"Detail row","aliases":["Row details","Detail panel row"]},"one_liner":"선택된 행 아래에 추가 세부 정보를 별도 행처럼 표시하는 영역.","description":"expandable row의 확장 영역으로, 메타데이터나 보조 액션을 보여준다.","visual_anatomy":["selected row","detail area","metadata","secondary actions"],"when_to_use":["테이블 행의 보조 정보를 빠르게 보여줘야 할 때"],"anti_use":["상세 정보가 많으면 side sheet나 master-detail이 낫다"],"prompt_phrases":["주문 행 아래에 배송 정보 detail row를 펼쳐줘"]},{"id":"audit-log","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"감사 로그","aliases":["audit log","변경 이력","보안 로그"]},"en":{"name":"Audit log","aliases":["Change log","Security log"]},"one_liner":"누가 언제 어떤 중요한 변경을 했는지 구조적으로 기록해 보여주는 목록.","description":"활동 피드보다 더 엄격하게 actor, action, target, timestamp를 보여준다.","visual_anatomy":["actor","action","target","timestamp","filter controls"],"when_to_use":["권한","결제","설정 변경처럼 추적 가능성이 중요한 이벤트에서"],"anti_use":["가벼운 소셜 활동에는 activity feed가 더 자연스럽다"],"prompt_phrases":["관리자 설정 변경 내역을 audit log로 보여줘"],"related":[{"id":"activity-feed","relation":"compare","note":"audit log는 컴플라이언스급 불변 기록으로 actor-action-target-timestamp를 엄격히 구조화하고, activity feed는 협업 맥락의 소셜/최근 활동 스트림으로 더 가볍게 보여준다"}]},{"id":"workspace-switcher","status":"draft","category":"selection","group":"selection-context","ko":{"name":"워크스페이스 전환기","aliases":["workspace switcher","조직 전환","팀 전환"]},"en":{"name":"Workspace switcher","aliases":["Organization switcher","Team switcher"]},"one_liner":"현재 작업 공간이나 조직을 선택하고 다른 공간으로 전환하는 메뉴.","description":"SaaS 앱에서 개인/팀/조직 컨텍스트를 바꾸는 상단 또는 사이드바 컨트롤이다.","visual_anatomy":["current workspace","avatar or logo","dropdown menu","workspace list"],"when_to_use":["사용자가 여러 조직이나 프로젝트 공간을 오갈 때"],"anti_use":["단일 조직 앱에는 필요 없다"],"prompt_phrases":["사이드바 상단에 현재 팀을 바꾸는 workspace switcher를 넣어줘"]},{"id":"account-switcher","status":"draft","category":"selection","group":"selection-context","ko":{"name":"계정 전환기","aliases":["account switcher","프로필 전환","사용자 전환"]},"en":{"name":"Account switcher","aliases":["Profile switcher","User switcher"]},"one_liner":"현재 로그인 계정을 확인하고 다른 계정으로 전환하는 메뉴.","description":"사용자 아바타와 이메일, 계정 목록, 로그아웃 같은 행동을 함께 제공한다.","visual_anatomy":["avatar","current account","account list","sign out action"],"when_to_use":["여러 계정 사용이나 프로필 관리가 필요한 앱에서"],"anti_use":["인증이 없는 앱에는 불필요하다"],"prompt_phrases":["우측 상단 아바타를 누르면 account switcher가 열리게 해줘"]},{"id":"versioned-docs-switcher","status":"draft","category":"selection","group":"selection-context","kind":"block","ko":{"name":"문서 버전 스위처","aliases":["versioned docs switcher","문서 버전 전환","버전 드롭다운"]},"en":{"name":"Versioned docs switcher","aliases":["Docs version switcher","Version dropdown with stale banner"]},"one_liner":"navbar 버전 드롭다운과 과거/미출시 버전 경고 배너로 구성된 문서 버전 전환 패턴.","description":"여러 버전이 공존하는 문서 사이트에서 현재 보고 있는 버전을 드롭다운으로 바꾸고, 최신이 아닌 버전을 볼 때 상단에 안내 배너를 띄운다. 선택한 버전에 따라 사이드바 트리 전체가 교체된다. 교체된 트리 내부에서는 최상위 그룹은 항상 펼쳐진 채로, 하위 그룹만 개별적으로 펼침/접힘 기본값을 가진다 — 버전 전환은 어떤 트리를 보여줄지 정하고, 펼침/접힘은 그 트리를 어떻게 보여줄지 정하는 별개의 축이다.","visual_anatomy":["navbar version dropdown","latest-selected default","stale version banner","link to latest version","sidebar tree swap","top-level group always expanded","nested group collapse/expand toggle with a per-group default"],"when_to_use":["제품/문서가 여러 메이저 버전을 동시에 공개하고 사용자가 과거 버전 문서를 볼 수 있어야 할 때"],"anti_use":["단일 버전만 유지되는 문서에는 불필요하다","조직/워크스페이스 전환은 workspace-switcher를 쓴다"],"prompt_phrases":["navbar에 문서 버전 드롭다운을 넣어줘","오래된 버전을 보고 있으면 상단에 경고 배너를 띄워줘"],"related":[{"id":"workspace-switcher","relation":"compare","note":"workspace-switcher는 조직/팀 컨텍스트를 바꾸고, versioned-docs-switcher는 같은 문서의 다른 버전 스냅샷으로 전환한다 — 대상이 조직이 아니라 문서 버전이라는 점이 다르다."}]},{"id":"global-header","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"전역 헤더","aliases":["global header","글로벌 헤더","최상단 헤더"]},"en":{"name":"Global header","aliases":["App header","Global navigation header"]},"one_liner":"앱 전체에 공통으로 고정되는 최상단 탐색과 계정 영역.","description":"제품 로고, 전역 탐색, 검색, 알림, 계정 메뉴처럼 모든 화면에서 필요한 항목을 배치한다.","visual_anatomy":["brand","primary navigation","global search","utility actions","account menu"],"when_to_use":["여러 페이지를 가진 앱에서 전역 이동과 계정 행동이 필요할 때"],"anti_use":["단일 화면 위젯에는 별도 global header가 과하다"],"prompt_phrases":["로고 검색 알림 아바타가 있는 global header를 만들어줘"]},{"id":"utility-bar","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"유틸리티 바","aliases":["utility bar","보조 도구 바","상단 보조 바"]},"en":{"name":"Utility bar","aliases":["Utility toolbar","Secondary app bar"]},"one_liner":"현재 화면의 보조 도구, 상태, 빠른 설정을 한 줄로 모은 영역.","description":"필터, 보기 방식, 동기화 상태, 도움말처럼 전역 탐색보다 낮은 우선순위의 기능을 제공한다.","visual_anatomy":["secondary controls","status text","quick actions","compact layout"],"when_to_use":["페이지마다 자주 쓰는 보조 도구가 여러 개 있을 때"],"anti_use":["주요 CTA를 숨기는 잡다한 버튼 모음으로 쓰지 않는다"],"prompt_phrases":["필터 보기 옵션 동기화 상태가 있는 utility bar를 넣어줘"]},{"id":"command-bar","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"커맨드 바","aliases":["command bar","명령 바","액션 바"]},"en":{"name":"Command bar","aliases":["Action command bar","Command toolbar"]},"one_liner":"선택된 문서나 데이터에 적용할 주요 명령을 한 줄로 모은 도구 막대.","description":"저장, 공유, 복제, 삭제처럼 현재 작업 대상에 대한 명령을 빠르게 실행하게 한다.","visual_anatomy":["primary command","secondary commands","overflow menu","target context"],"when_to_use":["편집기나 관리 화면에서 명령이 여러 개 반복적으로 쓰일 때"],"anti_use":["전역 탐색 링크를 command bar에 섞지 않는다"],"prompt_phrases":["저장 공유 삭제와 더보기 메뉴가 있는 command bar를 만들어줘"]},{"id":"status-bar","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"상태 표시줄","aliases":["status bar","상태 바","하단 상태줄"]},"en":{"name":"Status bar","aliases":["Bottom status bar","Editor status bar"]},"one_liner":"현재 문서, 연결, 저장, 선택 상태를 작게 지속 표시하는 막대.","description":"편집기나 대시보드 하단에서 저장됨, 온라인, 선택 수, 좌표 같은 주변 상태 정보를 제공한다.","visual_anatomy":["status segments","connection state","selection count","compact indicators"],"when_to_use":["작업 중 계속 참고해야 하는 보조 상태가 있을 때"],"anti_use":["중요 오류나 확인 요청을 작게 묻어두지 않는다"],"prompt_phrases":["화면 하단에 온라인과 저장됨을 표시하는 status bar를 넣어줘"]},{"id":"breadcrumb-header","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"브레드크럼 헤더","aliases":["breadcrumb header","경로 헤더","위치 헤더"]},"en":{"name":"Breadcrumb header","aliases":["Path header","Location header"]},"one_liner":"상단 제목 영역에 현재 위치 경로와 페이지 제목을 함께 보여주는 헤더.","description":"깊은 정보 구조에서 사용자가 현재 위치를 확인하고 상위 경로로 이동할 수 있게 한다.","visual_anatomy":["breadcrumb trail","page title","optional actions","hierarchy context"],"when_to_use":["문서","설정","관리 화면처럼 깊은 계층이 있을 때"],"anti_use":["평면 구조 앱에서 장식용 경로를 만들지 않는다"],"prompt_phrases":["브레드크럼과 페이지 제목이 같이 있는 breadcrumb header를 넣어줘"]},{"id":"page-title-bar","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"페이지 제목 바","aliases":["page title bar","페이지 헤더","타이틀 바"]},"en":{"name":"Page title bar","aliases":["Page header bar","Title bar"]},"one_liner":"페이지 제목, 설명, 주요 액션을 한 영역에 묶는 상단 헤더.","description":"화면이 무엇인지 설명하고 가장 중요한 생성, 저장, 내보내기 같은 액션을 가까이 둔다.","visual_anatomy":["page title","supporting text","primary action","secondary actions"],"when_to_use":["목록","설정","리포트 화면의 목적과 주요 행동을 명확히 해야 할 때"],"anti_use":["이미 global header가 화면 제목을 충분히 설명하면 중복하지 않는다"],"prompt_phrases":["제목 설명 새로 만들기 버튼이 있는 page title bar를 만들어줘"]},{"id":"content-tabs","status":"draft","category":"selection","group":"selection-options","ko":{"name":"콘텐츠 탭","aliases":["content tabs","section tabs","내부 탭"]},"en":{"name":"Content tabs","aliases":["Section tabs","In-page tabs"]},"one_liner":"같은 페이지 안에서 관련 콘텐츠 섹션을 탭으로 전환하는 패턴.","description":"전역 네비게이션이 아니라 상세 화면 안의 개요, 활동, 설정 같은 하위 콘텐츠를 나눈다.","visual_anatomy":["tab list","active tab","content panel","section scope"],"when_to_use":["한 리소스 안의 관련 정보를 짧은 섹션으로 나눌 때"],"anti_use":["서로 다른 페이지 이동은 navigation tab이나 sidebar가 낫다"],"prompt_phrases":["상세 화면에 개요 활동 설정 content tabs를 넣어줘"]},{"id":"right-rail","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"우측 레일","aliases":["right rail","오른쪽 보조 패널","사이드 레일"]},"en":{"name":"Right rail","aliases":["Side rail","Right sidebar"]},"one_liner":"본문 오른쪽에 보조 정보나 도구를 세로로 배치하는 좁은 영역.","description":"관련 항목, 도움말, 속성 요약처럼 본문을 방해하지 않고 참고해야 하는 정보를 둔다.","visual_anatomy":["main content","narrow right column","supporting cards","sticky area"],"when_to_use":["본문과 함께 참고해야 할 보조 정보가 있을 때"],"anti_use":["핵심 작업을 좁은 rail 안에 가두지 않는다"],"prompt_phrases":["본문 오른쪽에 관련 문서와 상태를 보여주는 right rail을 넣어줘"]},{"id":"inspector-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"인스펙터 패널","aliases":["inspector panel","검사 패널","선택 항목 패널"]},"en":{"name":"Inspector panel","aliases":["Object inspector","Selection inspector"]},"one_liner":"선택한 객체의 속성과 상태를 오른쪽에서 확인하고 조정하는 패널.","description":"디자인 도구, 빌더, 관리 도구에서 현재 선택 항목의 세부 정보를 보여준다.","visual_anatomy":["selected object title","property groups","controls","preview metadata"],"when_to_use":["캔버스나 리스트에서 선택한 대상의 속성을 편집해야 할 때"],"anti_use":["전역 설정처럼 선택 대상과 무관한 정보는 settings panel이 낫다"],"prompt_phrases":["선택한 카드의 속성을 보여주는 inspector panel을 만들어줘"]},{"id":"properties-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"속성 패널","aliases":["properties panel","프로퍼티 패널","속성 편집 영역"]},"en":{"name":"Properties panel","aliases":["Property panel","Property editor"]},"one_liner":"선택 항목이나 설정 대상의 값을 폼 컨트롤로 편집하는 패널.","description":"인스펙터보다 편집 폼 성격이 강하며 라벨, 입력, 토글, 셀렉트가 그룹으로 배치된다.","visual_anatomy":["property labels","form controls","grouped sections","apply state"],"when_to_use":["사용자가 대상의 여러 속성을 한곳에서 조정해야 할 때"],"anti_use":["단일 값만 바꾸면 inline edit이나 popover가 더 가볍다"],"prompt_phrases":["오른쪽에 색상 크기 공개 여부를 바꾸는 properties panel을 넣어줘"]},{"id":"preview-pane","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"미리보기 패널","aliases":["preview pane","프리뷰 패널","미리보기 영역"]},"en":{"name":"Preview pane","aliases":["Preview panel","Reading pane"]},"one_liner":"목록이나 편집 결과를 선택 즉시 옆에서 미리 보여주는 영역.","description":"이메일, 파일, 템플릿, 리포트처럼 선택 결과를 열기 전에 확인할 수 있게 한다.","visual_anatomy":["source list","preview area","title","content snapshot"],"when_to_use":["항목을 빠르게 훑고 비교해야 할 때"],"anti_use":["미리보기 내용이 복잡한 전체 작업이면 detail page가 낫다"],"prompt_phrases":["왼쪽 목록을 고르면 오른쪽에 preview pane이 바뀌게 해줘"]},{"id":"canvas-toolbar","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"캔버스 툴바","aliases":["canvas toolbar","작업 캔버스 도구막대","편집 툴바"]},"en":{"name":"Canvas toolbar","aliases":["Editor toolbar","Canvas tool palette"]},"one_liner":"캔버스 위나 옆에서 선택, 그리기, 확대 같은 편집 도구를 제공하는 막대.","description":"디자인 편집기나 화이트보드에서 현재 도구 모드와 캔버스 조작을 빠르게 바꾼다.","visual_anatomy":["tool buttons","selected tool","zoom control","canvas context"],"when_to_use":["사용자가 캔버스 객체를 직접 만들고 조작할 때"],"anti_use":["일반 목록 화면의 액션을 캔버스 툴처럼 표현하지 않는다"],"prompt_phrases":["캔버스 왼쪽에 선택 펜 도형 도구가 있는 canvas toolbar를 붙여줘"]},{"id":"floating-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"플로팅 패널","aliases":["floating panel","떠 있는 패널","floating palette"]},"en":{"name":"Floating panel","aliases":["Floating palette","Floating inspector"]},"one_liner":"화면 흐름 위에 떠서 이동 가능한 보조 도구나 정보를 담는 패널.","description":"캔버스나 지도처럼 넓은 작업면 위에서 맥락 도구를 가볍게 제공한다.","visual_anatomy":["floating surface","shadow","compact controls","draggable affordance"],"when_to_use":["작업면을 유지한 채 보조 도구를 가까이 두고 싶을 때"],"anti_use":["읽기 화면에서 장식 패널을 띄워 본문을 가리지 않는다"],"prompt_phrases":["캔버스 위에 이동 가능한 floating panel을 만들어줘"]},{"id":"dockable-panel","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"도킹 패널","aliases":["dockable panel","고정 가능한 패널","dock panel"]},"en":{"name":"Dockable panel","aliases":["Dock panel","Docked panel"]},"one_liner":"떠 있는 패널을 화면 가장자리나 레이아웃 안에 고정할 수 있는 패턴.","description":"전문 도구에서 사용자가 작업 방식에 맞춰 패널을 붙이거나 분리해 배치한다.","visual_anatomy":["panel surface","dock target","attached state","undocked state"],"when_to_use":["고급 사용자가 작업 공간 배치를 자주 바꾸는 생산성 도구에서"],"anti_use":["초보자용 단순 앱에서는 배치 자유도가 오히려 부담이다"],"prompt_phrases":["오른쪽에 붙이거나 띄울 수 있는 dockable panel을 구현해줘"]},{"id":"collapsible-sidebar","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"접이식 사이드바","aliases":["collapsible sidebar","접히는 사이드바","collapse nav"]},"en":{"name":"Collapsible sidebar","aliases":["Collapsible navigation","Expandable sidebar"]},"one_liner":"넓은 메뉴를 아이콘만 남기거나 다시 펼칠 수 있는 좌측 탐색 영역.","description":"화면 공간을 아끼면서도 앱의 주요 탐색 구조를 유지한다.","visual_anatomy":["expanded sidebar","collapsed rail","toggle control","nav items"],"when_to_use":["데스크톱 앱에서 탐색 메뉴가 크고 작업 공간도 넓게 필요할 때"],"anti_use":["모바일에서는 drawer나 bottom navigation이 더 자연스럽다"],"prompt_phrases":["좌측 사이드바를 접으면 아이콘만 남는 collapsible sidebar로 만들어줘"]},{"id":"mini-sidebar","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"미니 사이드바","aliases":["mini sidebar","아이콘 사이드바","compact sidebar"]},"en":{"name":"Mini sidebar","aliases":["Icon sidebar","Compact sidebar"]},"one_liner":"아이콘 중심의 매우 좁은 세로 탐색 영역.","description":"상세 라벨 대신 툴팁이나 선택 상태로 주요 섹션 이동을 제공한다.","visual_anatomy":["icon rail","active item","compact width","optional tooltip"],"when_to_use":["사용자가 아이콘 의미를 익힌 반복 사용 앱에서"],"anti_use":["초보자에게 처음 보이는 주요 탐색에는 라벨 없는 아이콘만 쓰지 않는다"],"prompt_phrases":["왼쪽에 아이콘만 있는 mini sidebar를 넣어줘"]},{"id":"responsive-stack","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"반응형 스택","aliases":["responsive stack","responsive layout stack","모바일 스택"]},"en":{"name":"Responsive stack","aliases":["Stacked responsive layout","Mobile stack"]},"one_liner":"데스크톱의 가로 배치를 좁은 화면에서 세로로 쌓는 레이아웃 패턴.","description":"카드, 폼, 패널이 화면 폭에 따라 열 구조에서 단일 열 구조로 바뀐다.","visual_anatomy":["wide columns","narrow stacked layout","breakpoint","consistent spacing"],"when_to_use":["같은 콘텐츠를 데스크톱과 모바일에서 모두 읽기 쉽게 보여줘야 할 때"],"anti_use":["정보 우선순위가 바뀌어야 하면 단순 stack만으로 해결하지 않는다"],"prompt_phrases":["데스크톱에서는 3열","모바일에서는 세로로 쌓이는 responsive stack을 만들어줘"]},{"id":"mobile-bottom-sheet","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 바텀 시트","aliases":["mobile bottom sheet","바텀시트","하단 시트"]},"en":{"name":"Mobile bottom sheet","aliases":["Bottom sheet","Modal bottom sheet"]},"one_liner":"모바일 화면 하단에서 올라오는 작업 또는 선택 패널.","description":"작은 화면에서 추가 선택지, 필터, 간단한 폼을 현재 맥락 위에 표시한다.","visual_anatomy":["scrim","bottom surface","drag handle","action rows"],"when_to_use":["모바일에서 현재 화면을 유지한 채 보조 선택을 받아야 할 때"],"anti_use":["복잡한 긴 폼은 별도 화면이나 dialog가 낫다"],"prompt_phrases":["모바일에서 필터를 누르면 bottom sheet가 올라오게 해줘"]},{"id":"safe-area","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"안전 영역","aliases":["safe area","세이프 에어리어","노치 여백","홈 인디케이터 여백","세이프 에어리어 레이아웃 패턴"]},"en":{"name":"Safe area","aliases":["Safe area inset","System inset","Safe area layout pattern"]},"one_liner":"노치, 둥근 모서리, 홈 인디케이터에 가려지지 않도록 비워두는 모바일 화면 영역.","description":"모바일 화면의 상단과 하단 시스템 영역을 피해 콘텐츠와 버튼을 배치하게 해준다.","visual_anatomy":["phone frame","top inset","bottom home indicator inset","content safe bounds"],"when_to_use":["모바일 화면 가장자리에 버튼이나 입력창을 배치할 때","전체 화면 레이아웃에서 시스템 UI와 겹침을 피해야 할 때"],"anti_use":["데스크톱 웹 레이아웃의 일반 margin과 혼동하지 않는다","safe area 안쪽 콘텐츠를 과하게 좁히지 않는다"],"prompt_phrases":["모바일 화면에서 safe area를 고려해서 하단 버튼이 홈 인디케이터와 겹치지 않게 해줘"]},{"id":"mobile-status-bar","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 상태 바","aliases":["mobile status bar","상단 시스템 바","시간 배터리 영역"]},"en":{"name":"Mobile status bar","aliases":["Status bar","System status bar"]},"one_liner":"모바일 화면 맨 위에서 시간, 신호, 배터리 같은 시스템 상태를 보여주는 영역.","description":"앱 콘텐츠 위에 놓이는 시스템 chrome이라서 헤더와 콘텐츠가 이 영역을 침범하지 않도록 고려해야 한다.","visual_anatomy":["time","signal indicator","battery indicator","top system strip"],"when_to_use":["모바일 mockup에서 실제 폰 화면 맥락을 보여줄 때","상단 app bar와 시스템 영역을 구분해야 할 때"],"anti_use":["앱 내부 상태 표시줄인 status-bar와 혼동하지 않는다","중요한 앱 알림을 시스템 상태 바에 넣지 않는다"],"prompt_phrases":["모바일 목업 상단에 시간과 배터리가 보이는 status bar를 넣어줘"]},{"id":"mobile-app-bar","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 앱 바","aliases":["mobile app bar","모바일 상단바","앱 상단바","top app bar"]},"en":{"name":"Mobile app bar","aliases":["Top app bar","Mobile top bar"]},"one_liner":"모바일 화면 상단에서 제목, 뒤로가기나 메뉴, 주요 액션을 담는 앱 내부 헤더.","description":"현재 화면의 위치와 기본 행동을 작은 화면 상단에 고정해 사용자가 맥락을 잃지 않게 한다.","visual_anatomy":["top bar surface","title","navigation icon","trailing action icons"],"when_to_use":["모바일 앱의 각 화면 제목과 기본 액션을 보여줄 때","뒤로가기나 메뉴 버튼이 필요한 화면에서"],"anti_use":["웹사이트의 넓은 navigation bar처럼 많은 링크를 넣지 않는다","하단 탭과 같은 목적지 전환을 대신하지 않는다"],"prompt_phrases":["모바일 화면 상단에 제목과 뒤로가기 아이콘이 있는 app bar를 넣어줘"]},{"id":"large-title-header","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"큰 제목 헤더","aliases":["large title header","라지 타이틀","큰 타이틀 상단바","접히는 큰 제목","내비게이션 스택 헤더"]},"en":{"name":"Large title header","aliases":["Large title navigation bar","Collapsing large title","Navigation stack header"]},"one_liner":"모바일 화면 상단에서 큰 제목을 보여주고 스크롤 시 작게 접히는 헤더 패턴.","description":"목록이나 홈 화면에서 현재 섹션을 강하게 드러내다가, 스크롤 후에는 공간을 아껴 compact header처럼 동작한다. 계층형 드릴다운 화면에서는 뒤로가기 버튼과 함께 쓰이며, 뒤로가기는 시트 dismiss와 혼동해서는 안 되는 별개의 동작이다.","visual_anatomy":["large title text","top safe area","collapsing header","content list below","optional back button"],"when_to_use":["모바일 앱의 첫 화면이나 주요 목록에서 섹션 이름을 크게 보여줄 때"],"anti_use":["작업 폼이나 밀도 높은 화면에는 공간을 많이 차지할 수 있다","데스크톱 hero headline과 혼동하지 않는다"],"prompt_phrases":["모바일 목록 화면 상단에 스크롤하면 접히는 large title header를 넣어줘"],"related":[{"id":"top-app-bar","relation":"compare","note":"스크롤 방향에 따라 바가 나타나거나 사라지는 show/hide 규칙은 large-title-header의 큰 제목 접힘과 별개로 top-app-bar 자체에도 적용된다. 스크린리더가 활성 상태일 때는 스크롤로 바를 숨기지 않는 접근성 예외가 두 항목 모두에 적용된다."}]},{"id":"bottom-app-bar","status":"draft","category":"action","group":"action-buttons","ko":{"name":"하단 앱 바","aliases":["bottom app bar","하단 액션 바","모바일 하단바"]},"en":{"name":"Bottom app bar","aliases":["Bottom action bar","Mobile bottom bar"]},"one_liner":"모바일 화면 아래에서 주요 행동과 보조 명령을 담는 고정 액션 바.","description":"엄지로 누르기 쉬운 하단 영역에 메뉴, FAB, 주요 액션을 배치해 반복 행동을 빠르게 실행하게 한다.","visual_anatomy":["bottom bar surface","primary action","secondary icons","safe-area spacing"],"when_to_use":["모바일에서 주요 액션을 항상 접근 가능하게 둘 때","상단보다 하단 조작이 더 편한 화면에서"],"anti_use":["최상위 목적지 전환에는 bottom navigation이나 tab bar가 더 적합하다","너무 많은 행동을 넣지 않는다"],"prompt_phrases":["모바일 화면 하단에 주요 추가 버튼이 있는 bottom app bar를 넣어줘"]},{"id":"mobile-search-header","status":"draft","category":"input","group":"input-search-command","ko":{"name":"모바일 검색 헤더","aliases":["mobile search header","상단 검색창","검색 상단바","검색 헤더"]},"en":{"name":"Mobile search header","aliases":["Search app bar","Search header"]},"one_liner":"모바일 화면 상단 헤더 영역에 검색 입력창을 직접 배치한 패턴.","description":"목록, 장소, 메시지처럼 검색이 화면의 핵심 행동일 때 제목 대신 검색창을 상단에 고정한다.","visual_anatomy":["top search field","search icon","placeholder","optional clear button","result list below"],"when_to_use":["모바일에서 사용자가 화면 진입 직후 검색해야 할 때","검색 결과 목록과 입력을 함께 유지해야 할 때"],"anti_use":["간단한 보조 검색이면 일반 search-field를 콘텐츠 안에 둘 수 있다","복잡한 검색 흐름은 mobile-search-sheet가 낫다"],"prompt_phrases":["모바일 목록 화면 상단을 검색창으로 만든 search header를 넣어줘"]},{"id":"mobile-segmented-tabs","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"모바일 세그먼트 탭","aliases":["mobile segmented tabs","상단 세그먼트 탭","모바일 구분 탭","세그먼트 뷰 전환기"]},"en":{"name":"Mobile segmented tabs","aliases":["Segmented tabs","Mobile segmented control","Segmented view switcher"]},"one_liner":"모바일 화면 상단에서 같은 화면 안의 하위 보기들을 짧은 세그먼트 버튼으로 전환하는 패턴.","description":"전체/인기/내 항목처럼 같은 맥락의 보기만 빠르게 바꿀 때, 탭보다 compact한 형태로 쓴다.","visual_anatomy":["segmented container","two to four options","selected segment","content below"],"when_to_use":["모바일에서 같은 화면의 하위 필터나 보기 모드를 전환할 때"],"anti_use":["앱의 최상위 목적지 전환에는 tab bar나 bottom navigation을 쓴다","옵션이 많으면 chip group이나 dropdown을 검토한다"],"prompt_phrases":["모바일 화면 상단에 전체 인기 내 글을 바꾸는 segmented tabs를 넣어줘"]},{"id":"standard-bottom-sheet","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"표준 바텀 시트","aliases":["standard bottom sheet","아래에서 올라오는 창","하단 패널","바텀시트"]},"en":{"name":"Standard bottom sheet","aliases":["Bottom sheet","Persistent bottom sheet"]},"one_liner":"모바일 화면 아래에서 올라와 보조 정보나 선택지를 보여주는 비차단 시트.","description":"현재 화면 맥락을 유지하면서 필터, 세부 정보, 간단한 선택지를 하단에서 보여준다.","visual_anatomy":["phone screen","bottom sheet surface","drag handle","content rows","underlying page"],"when_to_use":["모바일에서 현재 화면을 유지한 채 보조 선택지를 보여줄 때","지도나 목록 위에 요약 패널을 붙일 때"],"anti_use":["사용자 결정을 반드시 막아야 하면 modal-bottom-sheet나 dialog를 쓴다"],"prompt_phrases":["아래에서 올라오는 standard bottom sheet에 필터 옵션을 보여줘"]},{"id":"modal-bottom-sheet","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모달 바텀 시트","aliases":["modal bottom sheet","막는 바텀시트","아래에서 뜨는 모달","하단 모달"]},"en":{"name":"Modal bottom sheet","aliases":["Blocking bottom sheet","Modal sheet"]},"one_liner":"배경을 어둡게 막고 하단에서 올라와 사용자의 선택을 요구하는 모바일 시트.","description":"중요한 선택, 확인, 짧은 폼처럼 완료 전까지 현재 화면 조작을 막아야 할 때 쓴다.","visual_anatomy":["scrim","bottom sheet","drag handle","primary action","underlying page"],"when_to_use":["모바일에서 짧지만 집중이 필요한 선택이나 폼을 받을 때"],"anti_use":["긴 작업 흐름은 full-screen-dialog나 별도 화면이 더 적합하다"],"prompt_phrases":["배경을 어둡게 깔고 아래에서 modal bottom sheet가 올라오게 해줘"],"related":[{"id":"dialog","relation":"compare","note":"중앙 집중 창이면 dialog, 모바일 하단에서 올라오는 짧은 선택/폼이면 modal bottom sheet가 자연스럽다."},{"id":"drawer","relation":"compare","note":"측면 패널이면 drawer, 하단에서 배경을 막고 올라오면 modal bottom sheet다."},{"id":"side-sheet","relation":"alternative","note":"데스크톱의 보조 상세/편집 패널은 side sheet가 더 적합할 수 있다."}]},{"id":"action-sheet","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"액션 시트","aliases":["action sheet","작업 시트","하단 액션 메뉴","모바일 액션 메뉴"]},"en":{"name":"Action sheet","aliases":["Action menu sheet","Bottom action menu"]},"one_liner":"모바일 화면 하단에서 여러 작업 명령을 목록으로 보여주는 메뉴형 시트.","description":"공유, 복사, 삭제처럼 현재 항목에 대한 행동을 엄지 조작 영역에 모아 보여준다.","visual_anatomy":["bottom sheet surface","action rows","destructive action","cancel or close area"],"when_to_use":["모바일에서 한 항목에 대한 여러 행동을 선택하게 할 때"],"anti_use":["최상위 탐색에는 쓰지 않는다","자주 쓰는 단일 행동은 버튼으로 노출한다"],"prompt_phrases":["카드 더보기 버튼을 누르면 아래에서 action sheet가 올라오게 해줘"]},{"id":"share-sheet","status":"draft","category":"action","group":"action-command-bars","ko":{"name":"공유 시트","aliases":["share sheet","공유 패널","공유 대상 선택","모바일 공유창"]},"en":{"name":"Share sheet","aliases":["Sharing sheet","Share panel"]},"one_liner":"링크나 콘텐츠를 보낼 대상과 공유 행동을 모바일 하단 패널로 보여주는 UI.","description":"사용자에게 메시지, 메일, 링크 복사 같은 공유 대상을 빠르게 선택하게 한다.","visual_anatomy":["share title","share targets","action icons","bottom sheet surface"],"when_to_use":["콘텐츠","상품","장소","문서를 다른 앱이나 사람에게 보내게 할 때"],"anti_use":["앱 내부 단순 초대 흐름이면 전용 invite form이 더 명확할 수 있다"],"prompt_phrases":["공유 버튼을 누르면 share sheet가 열리고 링크 복사와 메일 보내기를 보여줘"]},{"id":"full-screen-dialog","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"전체 화면 다이얼로그","aliases":["full-screen dialog","전체 화면 모달","모바일 전체 화면 편집"]},"en":{"name":"Full-screen dialog","aliases":["Fullscreen dialog","Full-screen modal"]},"one_liner":"모바일에서 복잡한 작업을 별도 화면처럼 전체 화면으로 여는 모달.","description":"작은 dialog나 bottom sheet에 담기 어려운 편집, 작성, 설정 흐름을 현재 맥락 위의 전체 화면 작업으로 만든다.","visual_anatomy":["full-screen surface","close button","title","save action","form content"],"when_to_use":["모바일에서 작성이나 편집처럼 집중 작업이 필요할 때"],"anti_use":["단순 확인에는 alert dialog나 bottom sheet가 더 가볍다"],"prompt_phrases":["모바일에서 프로필 편집을 full-screen dialog로 열어줘"]},{"id":"permission-prompt","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"권한 요청 프롬프트","aliases":["permission prompt","권한 요청 화면","권한 요청 팝업","알림 권한 요청","위치 권한 요청"]},"en":{"name":"Permission prompt","aliases":["Permission request prompt","System permission prompt"]},"one_liner":"카메라, 위치, 알림 같은 권한 허용을 사용자에게 묻는 모바일 프롬프트.","description":"실제 시스템 권한 요청 전후로 앱이 사용자에게 권한의 필요성과 선택을 보여주는 화면 요소다.","visual_anatomy":["system-like dialog","permission icon","allow action","deny action","dimmed background"],"when_to_use":["권한 없이는 기능을 쓸 수 없을 때","사용자의 명시적 허용이 필요한 기능에서"],"anti_use":["맥락 없이 앱 시작 직후 모든 권한을 한꺼번에 요구하지 않는다"],"prompt_phrases":["알림 기능을 켤 때 permission prompt를 띄워서 허용 여부를 물어봐줘"],"related":[{"id":"permission-education-screen","relation":"use-with","note":"온보딩에서 여러 권한이 필요하면, 권한마다 permission-education-screen(soft-ask) 뒤에 이 시스템 프롬프트를 이어붙이되, 모든 권한을 한 번에 몰아 묻지 않고 해당 기능을 실제로 쓰는 시점마다 하나씩 순차 요청한다."}]},{"id":"permission-education-screen","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"권한 안내 화면","aliases":["permission education screen","권한 요청 화면","권한 설명 화면","권한 전 안내","pre-permission screen"]},"en":{"name":"Permission education screen","aliases":["Pre-permission screen","Permission explainer"]},"one_liner":"시스템 권한을 요청하기 전에 왜 필요한지 앱 안에서 먼저 설명하는 모바일 화면.","description":"권한 요청의 이유와 사용자 이득을 설명해 갑작스러운 시스템 팝업보다 이해하기 쉽게 만든다.","visual_anatomy":["permission icon","benefit headline","explanation text","continue button"],"when_to_use":["권한 거부율을 낮추고 싶을 때","카메라나 위치처럼 민감한 권한을 요청하기 전"],"anti_use":["실제 권한 요청을 숨기거나 강제로 유도하는 dark pattern으로 쓰지 않는다"],"prompt_phrases":["위치 권한을 요청하기 전에 왜 필요한지 설명하는 permission education screen을 넣어줘"],"related":[{"id":"permission-prompt","relation":"use-with","note":"온보딩에서 여러 권한이 필요하면, 이 soft-ask 화면 뒤에 permission-prompt를 이어붙이되, 모든 권한을 한 번에 몰아 묻지 않고 해당 기능을 실제로 쓰는 시점마다 하나씩 순차 요청한다."}]},{"id":"mobile-snackbar","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"모바일 스낵바","aliases":["mobile snackbar","하단 스낵바","하단 피드백 바","액션 스낵바"]},"en":{"name":"Mobile snackbar","aliases":["Bottom snackbar","Action snackbar","Snackbar with action"]},"one_liner":"모바일 화면 하단, 내비게이션 위에 잠깐 나타나 결과와 짧은 행동을 보여주는 피드백.","description":"저장됨, 실행 취소, 재시도처럼 작업 직후의 상태와 보조 행동을 엄지 영역 근처에 보여준다.","visual_anatomy":["bottom message bar","short text","optional action","navigation-safe placement"],"when_to_use":["모바일에서 작업 결과를 방해 없이 알려줄 때","실행 취소 같은 짧은 행동을 함께 줄 때"],"anti_use":["중요 확인이나 오류 복구를 짧게 사라지는 snackbar에만 의존하지 않는다"],"prompt_phrases":["저장 후 화면 아래에 실행 취소가 있는 mobile snackbar를 보여줘"]},{"id":"mobile-toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"모바일 토스트","aliases":["mobile toast","작은 모바일 알림","복사됨 토스트"]},"en":{"name":"Mobile toast","aliases":["Mobile notification toast","Floating toast"]},"one_liner":"모바일 화면 위에 작게 떠서 매우 짧은 상태를 알려주는 비차단 알림.","description":"복사됨, 저장됨처럼 사용자의 흐름을 끊지 않아도 되는 짧은 피드백을 보여준다.","visual_anatomy":["small floating pill","short message","temporary visibility"],"when_to_use":["사용자가 이미 결과를 예상할 수 있는 작은 작업 성공을 알려줄 때"],"anti_use":["사용자가 행동해야 하는 오류나 경고에는 alert","snackbar action","inline message를 쓴다"],"prompt_phrases":["복사 버튼을 누르면 중앙에 작게 mobile toast로 복사됨을 보여줘"]},{"id":"mobile-alert-dialog","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"모바일 경고 다이얼로그","aliases":["mobile alert dialog","모바일 알림창","삭제 확인창","확인 팝업"]},"en":{"name":"Mobile alert dialog","aliases":["Alert dialog","Confirmation alert"]},"one_liner":"모바일 화면 중앙에 떠서 중요한 확인이나 선택을 요구하는 작은 차단 dialog.","description":"삭제, 로그아웃, 권한 실패처럼 사용자가 명확히 결정을 내려야 하는 순간에 쓴다.","visual_anatomy":["scrim","compact dialog","title","message","confirm action","cancel action"],"when_to_use":["되돌리기 어렵거나 중요한 선택을 확인해야 할 때"],"anti_use":["일상적인 안내나 성공 메시지에는 toast나 snackbar가 더 가볍다"],"prompt_phrases":["삭제 버튼을 누르면 mobile alert dialog로 정말 삭제할지 물어봐줘"]},{"id":"mobile-popover-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"모바일 팝오버 메뉴","aliases":["mobile popover menu","점 세개 메뉴","더보기 메뉴","anchored menu"]},"en":{"name":"Mobile popover menu","aliases":["Anchored menu","Overflow popover"]},"one_liner":"모바일 화면의 아이콘이나 더보기 버튼 근처에 작게 붙어 뜨는 명령 메뉴.","description":"현재 항목에 대한 수정, 공유, 삭제 같은 짧은 명령을 앵커 위치 가까이에 보여준다.","visual_anatomy":["anchor icon","floating menu surface","menu items","small shadow"],"when_to_use":["명령 수가 적고 현재 항목과의 위치 관계를 유지하고 싶을 때"],"anti_use":["화면 아래 엄지 영역에서 선택하게 해야 하면 action-sheet가 더 편할 수 있다"],"prompt_phrases":["카드 오른쪽 위 점 세개 버튼을 누르면 mobile popover menu를 띄워줘"]},{"id":"sheet-drag-handle","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"시트 드래그 핸들","aliases":["sheet drag handle","바텀시트 손잡이","grabber","드래그 바"]},"en":{"name":"Sheet drag handle","aliases":["Drag handle","Grabber","Bottom sheet handle"]},"one_liner":"바텀 시트를 끌어올리거나 내릴 수 있음을 알려주는 작은 손잡이 표시.","description":"하단 시트 상단에 짧은 막대 형태로 놓여 사용자가 드래그 가능한 레이어임을 인식하게 한다.","visual_anatomy":["rounded handle bar","sheet top edge","draggable surface","expanded/collapsed states"],"when_to_use":["바텀 시트를 드래그로 확장하거나 닫을 수 있을 때"],"anti_use":["드래그가 불가능한 일반 카드나 dialog에 장식처럼 붙이지 않는다"],"prompt_phrases":["바텀시트 상단에 드래그 가능한 sheet drag handle을 넣어줘"]},{"id":"pull-to-refresh-indicator","status":"draft","category":"input","group":"input-pickers","ko":{"name":"당겨서 새로고침 표시","aliases":["pull to refresh indicator","끌어내려 새로고침","아래로 당기면 새로고침","새로고침 스피너"]},"en":{"name":"Pull-to-refresh indicator","aliases":["Refresh spinner","Pull refresh indicator"]},"one_liner":"사용자가 목록을 아래로 당겼을 때 새로고침 가능 상태와 진행을 보여주는 표시.","description":"모바일 목록 상단에서 당기는 거리와 새로고침 진행 상태를 스피너나 아이콘으로 알려준다.","visual_anatomy":["top refresh area","spinner","pulled offset","list content below"],"when_to_use":["모바일 피드나 목록을 최신 상태로 갱신할 때","사용자가 제스처로 새로고침할 수 있음을 보여줄 때"],"anti_use":["데스크톱 데이터 새로고침에는 명시적 refresh button이 더 낫다","자동 갱신 중인 화면에 중복으로 넣지 않는다"],"prompt_phrases":["목록을 끌어내리면 pull-to-refresh indicator가 보이고 새로고침되게 해줘"]},{"id":"swipe-to-delete","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"밀어서 삭제","aliases":["swipe to delete","옆으로 밀어서 삭제","스와이프 삭제","밀면 삭제 버튼"]},"en":{"name":"Swipe to delete","aliases":["Swipe delete","Delete swipe action"]},"one_liner":"모바일 리스트 항목을 옆으로 밀어 삭제 명령을 드러내는 패턴.","description":"항목 전체를 열지 않고 목록 안에서 빠르게 삭제할 수 있도록 빨간 삭제 영역을 노출한다.","visual_anatomy":["list row","horizontal offset","revealed delete action","destructive color"],"when_to_use":["모바일 목록에서 항목별 삭제를 빠르게 제공할 때"],"anti_use":["삭제가 위험하거나 복구 불가능하면 확인 dialog나 undo snackbar를 함께 고려한다"],"prompt_phrases":["리스트 항목을 옆으로 밀어서 삭제 버튼이 드러나는 swipe to delete를 넣어줘"]},{"id":"swipe-action-row","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"스와이프 액션 행","aliases":["swipe action row","옆으로 미는 행","좌우 스와이프 명령","리스트 스와이프 액션"]},"en":{"name":"Swipe action row","aliases":["Swipe row action","Leading trailing swipe action"]},"one_liner":"리스트 행을 좌우로 밀어 보관, 완료, 삭제 같은 명령을 드러내는 모바일 행.","description":"한 방향 삭제뿐 아니라 양쪽 방향에 서로 다른 명령을 숨겨두는 목록 상호작용이다.","visual_anatomy":["row surface","leading action","trailing action","horizontal reveal","action icons"],"when_to_use":["목록 항목마다 빠른 보조 명령이 두세 개 있을 때"],"anti_use":["명령을 발견하기 어려운 사용자에게는 더보기 메뉴나 명시 버튼을 함께 제공한다"],"prompt_phrases":["메시지 행을 좌우로 밀면 완료와 삭제 액션이 드러나는 swipe action row를 만들어줘"]},{"id":"long-press-menu","status":"draft","category":"selection","group":"selection-menus","ko":{"name":"길게 누르기 메뉴","aliases":["long press menu","롱프레스 메뉴","길게 누르면 메뉴","터치 컨텍스트 메뉴"]},"en":{"name":"Long press menu","aliases":["Touch context menu","Press-and-hold menu"]},"one_liner":"모바일에서 항목을 길게 눌렀을 때 나타나는 문맥 명령 메뉴.","description":"마우스 우클릭이 없는 터치 환경에서 복사, 공유, 삭제 같은 보조 명령을 숨겨둘 때 쓴다.","visual_anatomy":["pressed item","floating context menu","command rows","touch anchor"],"when_to_use":["주요 화면을 복잡하게 만들지 않고 항목별 보조 행동을 제공할 때"],"anti_use":["핵심 행동을 long press 안에만 숨기면 발견성이 낮다"],"prompt_phrases":["카드를 길게 누르면 복사 공유 삭제가 나오는 long press menu를 넣어줘"],"related":[{"id":"context-menu","relation":"compare","note":"트리거 위치와 발견 가능성이 다르다 — 이 항목은 터치-홀드로 우연히 발견되고, context-menu(툴바 버튼 아래로 펼쳐지는 pull-down 방식 포함)는 명시적 버튼으로 발견된다. 항목 구성(icon+label 행, destructive 스타일)은 공유한다."}]},{"id":"drag-to-reorder-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"드래그 순서 변경 목록","aliases":["drag to reorder list","끌어서 순서 변경","모바일 순서 바꾸기","reorder list"]},"en":{"name":"Drag-to-reorder list","aliases":["Reorderable list","Drag reorder list"]},"one_liner":"모바일 목록 항목을 길게 잡고 끌어 순서를 바꾸는 리스트 패턴.","description":"사용자가 우선순위, 메뉴 순서, 체크리스트 순서를 직접 재배치할 수 있게 한다.","visual_anatomy":["list rows","grab handles","lifted row","reordered position"],"when_to_use":["사용자 정의 순서가 중요한 목록에서","항목 수가 적거나 중간 정도일 때"],"anti_use":["정렬 기준이 명확한 데이터 테이블에는 sort control이 더 낫다"],"prompt_phrases":["모바일 체크리스트를 길게 잡고 끌어서 순서 변경할 수 있게 해줘"]},{"id":"grab-handle","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"잡기 핸들","aliases":["grab handle","드래그 핸들","잡고 끄는 손잡이","이동 핸들"]},"en":{"name":"Grab handle","aliases":["Drag handle","Move handle"]},"one_liner":"항목이나 패널을 잡고 움직일 수 있음을 보여주는 작은 손잡이 affordance.","description":"점, 막대, 그립 아이콘으로 드래그 가능한 영역을 명확히 표시한다.","visual_anatomy":["grip dots or bars","draggable item","active drag state"],"when_to_use":["항목 이동이나 패널 크기 변경처럼 직접 조작이 가능한 곳에서"],"anti_use":["클릭만 가능한 요소에 장식처럼 붙이지 않는다","sheet-drag-handle과 용도를 구분한다"],"prompt_phrases":["각 리스트 항목 왼쪽에 잡고 끌 수 있는 grab handle을 넣어줘"]},{"id":"page-control","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"페이지 컨트롤","aliases":["page control","페이지 점","인디케이터 점","온보딩 점"]},"en":{"name":"Page control","aliases":["Page indicator dots","Pagination dots"]},"one_liner":"좌우로 넘기는 모바일 화면에서 현재 페이지 위치를 점으로 보여주는 컨트롤.","description":"온보딩, 스토리, 캐러셀처럼 짧은 페이지 묶음에서 사용자가 현재 위치를 알게 한다.","visual_anatomy":["dot indicators","active dot","page count","swipeable page"],"when_to_use":["모바일에서 2-5개 정도의 페이지나 카드 묶음을 넘길 때"],"anti_use":["페이지 수가 많거나 임의 접근이 중요하면 pagination이나 tabs가 더 명확하다"],"prompt_phrases":["온보딩 화면 아래에 현재 위치를 보여주는 page control 점을 넣어줘"]},{"id":"carousel-peek","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"피크 캐러셀","aliases":["carousel peek","옆 카드 살짝 보이기","카드 피크","다음 카드 보임"]},"en":{"name":"Carousel peek","aliases":["Peeking carousel","Partial next card"]},"one_liner":"다음 카드가 화면 가장자리에 살짝 보여 좌우 스와이프 가능함을 암시하는 모바일 캐러셀.","description":"사용자가 가로 스크롤 가능한 콘텐츠임을 직관적으로 알아차리게 하는 시각적 힌트다.","visual_anatomy":["active card","partially visible next card","horizontal overflow","swipe direction cue"],"when_to_use":["모바일에서 카드 목록이 가로로 더 있음을 보여주고 싶을 때"],"anti_use":["정확한 비교가 필요한 표나 긴 텍스트 카드에는 부적합하다"],"prompt_phrases":["다음 카드가 오른쪽에 살짝 보이는 carousel peek 레이아웃으로 만들어줘"]},{"id":"edge-swipe-back","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"가장자리 스와이프 뒤로가기","aliases":["edge swipe back","화면 왼쪽에서 밀어 뒤로가기","스와이프 백","뒤로가기 제스처","가장자리 스와이프 백 제스처"]},"en":{"name":"Edge swipe back","aliases":["Swipe back gesture","Back edge gesture","Edge swipe back gesture"]},"one_liner":"화면 가장자리에서 안쪽으로 밀어 이전 화면으로 돌아가는 모바일 내비게이션 제스처.","description":"뒤로가기 버튼 없이도 화면 계층을 자연스럽게 빠져나가게 하는 플랫폼 관습이다.","visual_anatomy":["screen edge","back chevron cue","shifted page surface","previous screen hint"],"when_to_use":["모바일 앱의 상세 화면에서 이전 화면으로 돌아가는 흐름을 설명할 때"],"anti_use":["앱 내부 가로 스와이프와 충돌하지 않게 한다","중요한 닫기 행동은 명시 버튼도 고려한다"],"prompt_phrases":["상세 화면에서 왼쪽 가장자리를 밀면 뒤로가는 edge swipe back 제스처를 고려해줘"]},{"id":"pinch-zoom-viewer","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"핀치 줌 뷰어","aliases":["pinch zoom viewer","두 손가락 확대","이미지 확대 뷰어","지도 확대"]},"en":{"name":"Pinch zoom viewer","aliases":["Pinch-to-zoom viewer","Zoomable viewer"]},"one_liner":"이미지나 지도 같은 콘텐츠를 두 손가락 제스처로 확대/축소하는 모바일 뷰어.","description":"작은 화면에서 세부 내용을 살펴볼 수 있도록 콘텐츠 자체를 확대 가능한 표면으로 만든다.","visual_anatomy":["zoomable surface","image or map content","zoom scale","pinch gesture affordance"],"when_to_use":["이미지","지도","문서처럼 세부 탐색이 필요한 콘텐츠에서"],"anti_use":["일반 카드나 버튼 크기 문제를 pinch zoom으로 해결하지 않는다"],"prompt_phrases":["상품 이미지를 두 손가락으로 확대할 수 있는 pinch zoom viewer로 보여줘"]},{"id":"scrim","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"스크림","aliases":["scrim","dim overlay","어두운 배경","모달 배경막"]},"en":{"name":"Scrim","aliases":["Dim overlay","Modal overlay","Backdrop"]},"one_liner":"모달이나 시트 뒤의 배경을 어둡게 덮어 현재 레이어에 집중시키는 반투명 막.","description":"뒤쪽 화면이 비활성화되었고 앞쪽 dialog나 sheet가 현재 작업 대상임을 알려준다.","visual_anatomy":["translucent overlay","underlying content","foreground modal or sheet"],"when_to_use":["모달 dialog","modal bottom sheet","drawer처럼 배경 조작을 막아야 할 때"],"anti_use":["단순 hover 설명이나 작은 non-modal popover에는 과할 수 있다"],"prompt_phrases":["모달이 열릴 때 뒤 화면에 어두운 scrim을 깔아줘"]},{"id":"touch-ripple","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"터치 리플","aliases":["touch ripple","터치 피드백","누름 효과","ripple effect"]},"en":{"name":"Touch ripple","aliases":["Ripple effect","Touch feedback"]},"one_liner":"모바일에서 버튼이나 항목을 눌렀음을 물결처럼 보여주는 즉각적인 터치 피드백.","description":"사용자의 탭이 인식되었음을 빠르게 알려 주어 터치 인터페이스의 반응성을 높인다.","visual_anatomy":["pressed control","expanding ripple","highlight layer","touch target"],"when_to_use":["모바일의 tappable item이나 icon button에 즉각 반응을 보여줄 때"],"anti_use":["애니메이션이 과하면 피로감을 준다","비활성 요소에는 적용하지 않는다"],"prompt_phrases":["아이콘 버튼을 누르면 touch ripple 피드백이 보이게 해줘"]},{"id":"otp-code-input","status":"draft","category":"input","group":"input-text","ko":{"name":"OTP 코드 입력","aliases":["otp code input","인증번호 입력","문자 인증 코드","verification code input"]},"en":{"name":"OTP code input","aliases":["Verification code input","One-time password input"]},"one_liner":"SMS나 이메일로 받은 일회용 인증번호를 각 자리별 칸에 입력하는 모바일 입력.","description":"숫자 코드의 길이와 현재 입력 위치를 명확히 보여줘 인증 흐름을 빠르게 끝내게 한다.","visual_anatomy":["separated digit boxes","focused digit","numeric code","submit-ready state"],"when_to_use":["회원가입","로그인","결제 확인에서 일회용 인증번호를 받을 때"],"anti_use":["긴 비밀번호나 자유 텍스트에는 쓰지 않는다","자동 입력을 막는 과도한 분리는 피한다"],"prompt_phrases":["SMS 인증번호 6자리를 입력하는 OTP code input을 모바일 화면에 넣어줘"]},{"id":"passcode-keypad","status":"draft","category":"input","group":"input-text","ko":{"name":"패스코드 키패드","aliases":["passcode keypad","숫자 비밀번호","PIN 키패드","잠금해제 키패드"]},"en":{"name":"Passcode keypad","aliases":["PIN keypad","Numeric passcode input"]},"one_liner":"모바일 잠금 해제나 보안 확인에 쓰는 숫자 키패드와 코드 점 표시.","description":"사용자가 화면 안의 숫자 키를 눌러 PIN이나 패스코드를 입력하게 한다.","visual_anatomy":["code dots","numeric keypad","delete key","secure entry"],"when_to_use":["앱 잠금 해제","결제 확인","보안 설정 진입처럼 짧은 숫자 코드가 필요할 때"],"anti_use":["일반 숫자 입력 폼에는 number input이 더 단순하다"],"prompt_phrases":["앱 잠금 해제 화면에 숫자 passcode keypad를 넣어줘"]},{"id":"biometric-prompt","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"생체 인증 프롬프트","aliases":["biometric prompt","Face ID","지문 인증","생체 인증 팝업"]},"en":{"name":"Biometric prompt","aliases":["Face ID prompt","Fingerprint prompt","Biometric authentication"]},"one_liner":"얼굴 인식이나 지문으로 사용자를 확인하는 모바일 인증 프롬프트.","description":"민감한 행동을 실행하기 전에 시스템 생체 인증을 통해 사용자의 의도를 확인한다.","visual_anatomy":["biometric icon","authentication message","confirm state","modal prompt"],"when_to_use":["결제","잠금 해제","비밀번호 보기처럼 높은 신뢰가 필요한 행동에서"],"anti_use":["일반 설정 변경처럼 낮은 위험 작업에는 과하다"],"prompt_phrases":["결제 전에 Face ID biometric prompt로 본인 인증을 하게 해줘"]},{"id":"mobile-date-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"모바일 날짜 선택","aliases":["mobile date picker","모바일 달력 선택","날짜 선택 화면","calendar picker"]},"en":{"name":"Mobile date picker","aliases":["Mobile calendar picker","Date selector"]},"one_liner":"작은 화면에서 터치로 날짜를 고르게 만든 모바일 최적화 달력 입력.","description":"날짜 셀, 월 이동, 선택된 날짜를 손가락으로 누르기 쉬운 크기로 보여준다.","visual_anatomy":["month header","calendar grid","selected day","touch-sized date cells"],"when_to_use":["예약일","생년월일","일정 날짜를 모바일에서 고를 때"],"anti_use":["정확한 시간까지 필요하면 time picker나 datetime flow를 함께 쓴다"],"prompt_phrases":["예약 날짜를 고르는 mobile date picker를 바텀시트 안에 넣어줘"],"related":[{"id":"time-picker","relation":"compare","note":"예약처럼 날짜와 시간을 함께 골라야 하면 하나의 bottom sheet 안에 이 두 피커를 순차적으로 이어붙인다."},{"id":"mobile-date-time-picker-sheet","relation":"use-with","note":"날짜와 시간을 하나의 bottom sheet 안에서 순차 선택하는 조합형 시트가 이 피커와 time-picker를 이어붙인 실제 구성이다."}]},{"id":"mobile-date-time-picker-sheet","status":"draft","category":"input","group":"input-pickers","ko":{"name":"모바일 날짜·시간 선택 시트","aliases":["mobile date time picker sheet","날짜시간 바텀시트","예약 날짜시간 선택"]},"en":{"name":"Mobile date time picker sheet","aliases":["Combined date-time bottom sheet","Sequential date time picker"]},"one_liner":"예약처럼 날짜와 시간을 하나의 bottom sheet 안에서 순차적으로 고르게 하는 조합형 피커.","description":"mobile-date-picker와 time-picker를 하나의 시트 안에서 날짜 단계 다음 시간 단계로 이어붙인 2단계 구성이다. 각 단계에서 이전 단계로 되돌아가는 back 어포던스를 제공하며, OS 네이티브의 Date and time 단일 화면 동시 노출 모드와는 다른, 순차 단계 시트 구조에 한정한다.","visual_anatomy":["bottom sheet container","date wheel or calendar step","time wheel step","step indicator or back","confirm cta"],"when_to_use":["예약이나 약속처럼 날짜와 시간을 함께 받아야 할 때","두 피커를 하나의 시트 흐름으로 이어붙여야 할 때"],"anti_use":["날짜와 시간을 한 화면에 동시에 노출하는 OS 네이티브 Date and time 단일 모드는 이 순차 시트 구조와 다르다","날짜만 또는 시간만 필요하면 각각 mobile-date-picker/time-picker만 쓴다"],"prompt_phrases":["예약 날짜와 시간을 하나의 bottom sheet에서 순서대로 고르게 해줘","날짜 단계 다음에 시간 단계로 넘어가고 뒤로가기도 되게 해줘"],"related":[{"id":"mobile-date-picker","relation":"use-with","note":"이 시트의 첫 단계가 mobile-date-picker의 달력 그리드 구조를 그대로 재사용한다."},{"id":"time-picker","relation":"use-with","note":"이 시트의 두 번째 단계가 time-picker의 시/분 선택 구조를 그대로 재사용한다."}]},{"id":"wheel-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"휠 피커","aliases":["wheel picker","스크롤 선택","iOS 휠 선택","돌리는 선택창"]},"en":{"name":"Wheel picker","aliases":["Picker wheel","Spinning picker"]},"one_liner":"값을 세로로 굴려 가운데 줄에 맞춰 선택하는 모바일 피커.","description":"크기, 날짜 일부, 숫자처럼 순서가 있는 값을 손가락 스크롤로 빠르게 선택하게 한다.","visual_anatomy":["scrolling value column","center selection band","adjacent values"],"when_to_use":["값의 범위가 정해져 있고 사용자가 순서대로 훑으며 고를 때"],"anti_use":["옵션이 적고 비교가 중요하면 radio group이나 segmented control이 더 명확하다"],"prompt_phrases":["사이즈를 S M L로 고르는 wheel picker를 만들어줘"]},{"id":"time-wheel-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"시간 휠 피커","aliases":["time wheel picker","시간 스크롤 선택","시각 휠","모바일 시간 선택"]},"en":{"name":"Time wheel picker","aliases":["Wheel time picker","Spinning time picker"]},"one_liner":"시와 분을 각각 휠처럼 굴려 모바일에서 시간을 고르는 입력.","description":"손가락으로 시/분 컬럼을 스크롤해 정확한 시간을 빠르게 맞추게 한다.","visual_anatomy":["hour wheel","minute wheel","center selected row","time separator"],"when_to_use":["알람","예약","일정 시간처럼 시각을 모바일에서 선택할 때"],"anti_use":["시간 범위를 고르는 경우에는 range picker나 별도 duration control을 검토한다"],"prompt_phrases":["예약 시간을 고르는 time wheel picker를 넣어줘"]},{"id":"mobile-search-sheet","status":"draft","category":"input","group":"input-search-command","ko":{"name":"모바일 검색 시트","aliases":["mobile search sheet","전체 검색 시트","검색 바텀시트","검색 화면"]},"en":{"name":"Mobile search sheet","aliases":["Search sheet","Full-screen search sheet"]},"one_liner":"모바일에서 검색 입력과 추천/결과를 별도 시트나 전체 화면으로 여는 검색 표면.","description":"작은 화면에서 검색에 집중할 수 있도록 현재 화면 위에 검색 전용 레이어를 만든다. 입력 전에는 최근 검색어 칩을, 입력 중에는 실시간 제안을, 제출 후에는 결과 목록을 보여주는 3단계 상태 전환이며, 최근 검색어는 칩 단위로 개별 삭제할 수 있다.","visual_anatomy":["search input autofocus","clear button","recent searches chips pre-query","live suggestions post-query","results list post-submit","empty no-results state"],"when_to_use":["목록 화면에서 검색을 열 때 결과와 추천을 넓게 보여줘야 할 때","최근 검색어를 재사용하게 하고 싶을 때"],"anti_use":["항상 검색이 핵심이면 mobile-search-header가 더 직접적이다"],"prompt_phrases":["검색 아이콘을 누르면 mobile search sheet가 열리고 추천 검색어를 보여줘","입력 전에는 최근 검색어 칩을 보여주고 입력하면 제안으로 바뀌게 해줘"],"related":[{"id":"search-suggestions","relation":"use-with","note":"입력 중 단계의 실시간 제안 목록은 search-suggestions의 추천/최근 검색어 구조를 그대로 재사용하며, mobile-search-sheet는 그 앞뒤로 입력 전 최근 검색어 단계와 제출 후 결과 단계까지 포함한 전체 화면 표면이다."}]},{"id":"chip-input-mobile","status":"draft","category":"input","group":"input-pickers","ko":{"name":"모바일 칩 입력","aliases":["chip input mobile","모바일 태그 입력","토큰 입력","태그 칩"]},"en":{"name":"Mobile chip input","aliases":["Mobile tag input","Tokenized input"]},"one_liner":"모바일 입력창 안에서 여러 값을 칩 형태로 추가하고 지우는 입력 패턴.","description":"관심사, 수신자, 태그처럼 여러 짧은 값을 작은 화면에서도 구분해 편집하게 한다.","visual_anatomy":["input container","chips","remove affordance","add token button"],"when_to_use":["여러 태그","사람","키워드를 모바일에서 입력할 때"],"anti_use":["값이 많아지면 좁은 화면에서 복잡해지므로 별도 선택 화면을 검토한다"],"prompt_phrases":["관심사를 여러 개 추가하는 mobile chip input을 넣어줘"]},{"id":"contact-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"연락처 선택","aliases":["contact picker","사람 선택","연락처 목록","친구 선택"]},"en":{"name":"Contact picker","aliases":["People picker","Contact selector"]},"one_liner":"모바일에서 사람이나 연락처를 검색하고 선택하는 목록형 입력.","description":"초대, 공유, 송금처럼 사람을 대상으로 하는 흐름에서 이름과 아바타를 보고 고르게 한다.","visual_anatomy":["contact rows","avatar","name","selected contact","optional search"],"when_to_use":["친구 초대","수신자 선택","담당자 선택처럼 사람을 골라야 할 때"],"anti_use":["단순 텍스트 이름 입력에는 text field가 더 빠를 수 있다"],"prompt_phrases":["친구를 선택하는 contact picker를 모바일 화면으로 만들어줘"]},{"id":"address-autocomplete","status":"draft","category":"input","group":"input-search-command","ko":{"name":"주소 자동완성","aliases":["address autocomplete","주소 검색","위치 자동완성","주소 제안"]},"en":{"name":"Address autocomplete","aliases":["Address search autocomplete","Location autocomplete"]},"one_liner":"사용자가 주소 일부를 입력하면 후보 위치나 주소를 제안하는 모바일 입력.","description":"배달, 지도, 프로필 주소 입력에서 긴 주소를 끝까지 치지 않고 선택하게 한다.","visual_anatomy":["address input","location icon","suggestion rows","highlighted match"],"when_to_use":["주소","장소","위치를 모바일에서 빠르게 입력해야 할 때"],"anti_use":["정확한 법정 주소 검증이 필요하면 후속 확인 단계를 둔다"],"prompt_phrases":["주소를 입력하면 후보가 뜨는 address autocomplete를 넣어줘"]},{"id":"voice-input-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"음성 입력 버튼","aliases":["voice input button","마이크 버튼","음성 검색","말로 입력"]},"en":{"name":"Voice input button","aliases":["Microphone button","Voice search button"]},"one_liner":"모바일 입력창이나 검색 화면에서 음성으로 텍스트를 넣게 하는 마이크 버튼.","description":"타이핑이 불편한 상황에서 음성 검색, 메시지 입력, 명령 입력을 시작하는 affordance다.","visual_anatomy":["microphone icon","circular touch target","listening state","optional waveform"],"when_to_use":["검색","메시지","접근성 보조 입력에서 음성 입력을 제공할 때"],"anti_use":["조용해야 하는 맥락이나 개인정보가 민감한 입력에서는 기본값으로 강요하지 않는다"],"prompt_phrases":["검색창 오른쪽에 voice input button을 넣고 누르면 듣는 상태로 바뀌게 해줘"]},{"id":"clear-text-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"텍스트 지우기 버튼","aliases":["clear text button","입력 지우기","X 버튼","검색어 지우기"]},"en":{"name":"Clear text button","aliases":["Clear input button","Clear search button"]},"one_liner":"모바일 입력창 안의 현재 텍스트를 한 번에 지우는 작은 X 버튼.","description":"검색어나 짧은 입력을 빠르게 비워 다시 입력할 수 있게 한다.","visual_anatomy":["text field","trailing x icon","filled text","cleared state"],"when_to_use":["검색창","주소 입력","짧은 text field에서 사용자가 자주 다시 입력할 때"],"anti_use":["긴 폼 전체 초기화에는 별도 reset action이 더 명확하다"],"prompt_phrases":["검색창 오른쪽에 입력값을 지우는 clear text button을 넣어줘"]},{"id":"feed-card-mobile","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"모바일 피드 카드","aliases":["feed card mobile","피드 카드","모바일 콘텐츠 카드","세로 피드 카드"]},"en":{"name":"Mobile feed card","aliases":["Feed card","Mobile content card"]},"one_liner":"모바일 피드 안에서 이미지, 본문, 반응 버튼을 세로로 묶어 보여주는 카드.","description":"SNS, 뉴스, 커뮤니티처럼 스크롤 흐름 안에서 콘텐츠 하나를 독립 단위로 보여준다.","visual_anatomy":["thumbnail or media area","title/body lines","reaction actions","vertical card"],"when_to_use":["모바일 피드에서 게시물이나 콘텐츠 항목을 반복해서 보여줄 때"],"anti_use":["한 화면에서 많은 항목을 비교해야 하면 compact list가 더 낫다"],"prompt_phrases":["모바일 피드에 이미지와 좋아요 버튼이 있는 feed card를 넣어줘"]},{"id":"story-rail","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"스토리 레일","aliases":["story rail","스토리 목록","원형 아바타 레일","story carousel"]},"en":{"name":"Story rail","aliases":["Stories rail","Avatar story carousel"]},"one_liner":"모바일 피드 상단에 원형 아바타들을 가로로 나열해 스토리를 여는 패턴.","description":"짧은 임시 콘텐츠나 사용자별 스토리를 가로 스크롤 가능한 원형 목록으로 보여준다.","visual_anatomy":["horizontal rail","circular avatars","active ring","story labels"],"when_to_use":["사용자별 짧은 콘텐츠나 상태 업데이트를 모바일 피드 위에 둘 때"],"anti_use":["영구 콘텐츠나 복잡한 카드 목록에는 일반 carousel이나 list가 더 적합하다"],"prompt_phrases":["홈 피드 상단에 원형 아바타가 있는 story rail을 넣어줘"]},{"id":"story-viewer","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"스토리 뷰어","aliases":["story viewer","스토리 화면","탭해서 넘기는 화면","풀스크린 스토리"]},"en":{"name":"Story viewer","aliases":["Full-screen story viewer","Story screen"]},"one_liner":"화면 전체를 써서 짧은 콘텐츠를 보여주고 탭이나 스와이프로 넘기는 모바일 뷰어.","description":"진행 바, 작성자, 미디어 영역을 함께 보여주며 사용자가 다음 스토리로 빠르게 넘길 수 있다.","visual_anatomy":["full-screen media","progress bars","profile header","tap zones"],"when_to_use":["짧은 이미지/영상 콘텐츠를 몰입형으로 빠르게 소비하게 할 때"],"anti_use":["긴 글이나 상세 비교가 필요한 콘텐츠에는 부적합하다"],"prompt_phrases":["탭하면 다음 화면으로 넘어가는 full-screen story viewer를 만들어줘"]},{"id":"media-lightbox-mobile","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 미디어 라이트박스","aliases":["media lightbox mobile","모바일 이미지 뷰어","전체 화면 사진 보기"]},"en":{"name":"Mobile media lightbox","aliases":["Mobile image viewer","Full-screen media viewer"]},"one_liner":"모바일에서 이미지나 영상을 전체 화면으로 열어 집중해서 보게 하는 뷰어.","description":"닫기, 현재 순서, 제스처 확대 같은 컨트롤을 최소한으로 유지해 미디어를 크게 보여준다.","visual_anatomy":["full-screen dark surface","media content","close button","page count"],"when_to_use":["사진","상품 이미지","첨부 미디어를 크게 확인해야 할 때"],"anti_use":["단순 썸네일 목록에는 과하다","편집 기능은 별도 editor가 필요하다"],"prompt_phrases":["상품 이미지를 누르면 모바일 전체 화면 media lightbox로 열어줘"]},{"id":"comment-composer","status":"draft","category":"input","group":"input-text","ko":{"name":"댓글 작성 바","aliases":["comment composer","댓글 입력 바","하단 댓글창","답글 입력"]},"en":{"name":"Comment composer","aliases":["Comment input bar","Reply composer"]},"one_liner":"모바일 화면 하단에 고정되어 댓글이나 답글을 바로 작성하는 입력 바.","description":"피드나 상세 콘텐츠를 보면서 맥락을 잃지 않고 짧은 반응을 입력하게 한다.","visual_anatomy":["sticky bottom input","placeholder","send button","safe-area spacing"],"when_to_use":["게시물","영상","채팅형 상세 화면에서 댓글을 바로 받을 때"],"anti_use":["긴 리뷰나 서식 있는 글쓰기는 별도 작성 화면이 더 낫다"],"prompt_phrases":["게시물 상세 하단에 고정된 comment composer를 넣어줘"]},{"id":"bottom-cta-bar","status":"draft","category":"action","group":"action-buttons","ko":{"name":"하단 CTA 바","aliases":["bottom CTA bar","고정 하단 버튼","하단 구매 버튼","sticky CTA"]},"en":{"name":"Bottom CTA bar","aliases":["Sticky CTA bar","Bottom action bar"]},"one_liner":"모바일 화면 아래에 주요 행동 버튼을 고정해 언제든 실행할 수 있게 하는 바.","description":"신청하기, 구매하기, 계속하기처럼 한 화면의 핵심 행동을 엄지 영역에 지속 노출한다.","visual_anatomy":["sticky bottom container","primary button","safe-area padding","optional price or summary"],"when_to_use":["모바일 상세 화면에서 주요 전환 행동을 계속 보여줘야 할 때"],"anti_use":["탐색 목적지 전환에는 bottom navigation을 쓴다","여러 행동을 과하게 넣지 않는다"],"prompt_phrases":["상품 상세 하단에 구매하기 bottom CTA bar를 고정해줘"]},{"id":"product-option-sheet","status":"draft","category":"input","group":"input-pickers","ko":{"name":"상품 옵션 시트","aliases":["product option sheet","상품 옵션 바텀시트","옵션 선택 시트","사이즈 선택"]},"en":{"name":"Product option sheet","aliases":["Variant option sheet","Commerce option sheet"]},"one_liner":"모바일 커머스에서 사이즈, 색상, 수량 같은 상품 옵션을 하단 시트로 고르는 패턴.","description":"상품 상세를 유지한 채 구매 전 필요한 변형 옵션을 좁은 화면에서 선택하게 한다.","visual_anatomy":["bottom sheet","option chips","selected variant","quantity or CTA"],"when_to_use":["모바일 상품 상세에서 옵션 선택 후 장바구니나 구매로 이어질 때"],"anti_use":["옵션 조합이 매우 복잡하면 별도 구성 화면이 더 명확하다"],"prompt_phrases":["사이즈와 색상을 고르는 product option sheet를 아래에서 올려줘"],"related":[{"id":"variant-selector-buttons","relation":"compare","note":"product option sheet는 모바일 하단 시트로 옵션을 감싸는 래퍼이고, variant selector buttons는 시트 없이 데스크톱 인라인에 바로 놓이는 버튼형 선택 컨트롤 자체를 가리킨다."}]},{"id":"cart-summary-bar","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"장바구니 요약 바","aliases":["cart summary bar","하단 장바구니 바","주문 요약 바","결제 바"]},"en":{"name":"Cart summary bar","aliases":["Cart bottom bar","Checkout summary bar"]},"one_liner":"모바일 화면 하단에 장바구니 수량, 금액, 결제 버튼을 압축해 보여주는 바.","description":"사용자가 상품을 둘러보는 동안 현재 장바구니 상태와 다음 행동을 계속 확인하게 한다.","visual_anatomy":["item count","total price","checkout action","sticky bottom bar"],"when_to_use":["모바일 쇼핑","음식 주문","예약 흐름에서 누적 선택 상태를 보여줄 때"],"anti_use":["상세한 비용 내역은 cart-summary나 checkout screen에 따로 보여준다"],"prompt_phrases":["화면 아래에 수량과 총액이 보이는 cart summary bar를 고정해줘"],"related":[{"id":"cart-summary","relation":"compare","note":"browsing 중 누적 상태를 보여주는 하단 바는 cart summary bar고, checkout 단계에서 세금·배송비까지 포함해 스크롤과 무관하게 고정 노출하는 최종 총액(sticky order total 개념, `recipes/commerce/checkout-order-summary.md` 참고)은 cart summary와 항상 일치해야 한다."}]},{"id":"checkout-progress-header","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"결제 진행 헤더","aliases":["checkout progress header","결제 단계 헤더","주문 단계 표시","결제 진행바"]},"en":{"name":"Checkout progress header","aliases":["Checkout step header","Checkout progress bar"]},"one_liner":"모바일 결제 흐름 상단에서 현재 단계와 남은 단계를 보여주는 헤더.","description":"주소, 결제, 확인처럼 여러 단계의 checkout에서 사용자가 위치를 잃지 않게 한다.","visual_anatomy":["header title","current step number","progress segments","back affordance"],"when_to_use":["모바일 결제나 예약처럼 여러 단계가 있는 전환 흐름에서"],"anti_use":["단일 화면 결제에는 과할 수 있다"],"prompt_phrases":["결제 화면 상단에 3단계 checkout progress header를 넣어줘"]},{"id":"delivery-tracker","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"배송 추적","aliases":["delivery tracker","배달 추적","배송 상태 타임라인","주문 추적","주문 추적 타임라인"]},"en":{"name":"Delivery tracker","aliases":["Order tracker","Delivery status timeline","Order tracking timeline"]},"one_liner":"주문이 접수, 준비, 이동, 도착 중 어디에 있는지 단계로 보여주는 모바일 상태 UI.","description":"사용자가 기다리는 동안 현재 처리 상태와 다음 단계를 시간 순서로 이해하게 한다. 각 단계에 타임스탬프를 붙이고 배송사 추적 번호와 외부 링크를 함께 노출하는 데스크톱/세로 타임라인 변형도 같은 개념이다.","visual_anatomy":["status steps","active step","timeline dots","delivery labels","per-step timestamp","carrier tracking number and link"],"when_to_use":["배달","배송","픽업","예약 진행 상태를 모바일에서 보여줄 때"],"anti_use":["단순 완료 여부만 있으면 status chip이나 toast로 충분하다"],"prompt_phrases":["주문 상태를 접수 조리 배달 단계로 보여주는 delivery tracker를 넣어줘","배송사 추적 번호와 도착 예정일이 있는 order tracking timeline을 넣어줘"]},{"id":"map-bottom-panel","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"지도 하단 패널","aliases":["map bottom panel","지도 아래 패널","지도 바텀시트","장소 정보 패널"]},"en":{"name":"Map bottom panel","aliases":["Map bottom sheet","Place details panel"]},"one_liner":"모바일 지도 위에 하단에서 올라와 장소나 경로 정보를 보여주는 패널.","description":"지도 조작을 유지하면서 선택한 장소, 경로, 주문 위치 같은 세부 정보를 하단에서 확인하게 한다.","visual_anatomy":["map background","marker","draggable bottom panel","place summary"],"when_to_use":["지도 기반 검색","배달 추적","장소 상세를 모바일에서 보여줄 때"],"anti_use":["지도와 무관한 일반 상세 정보에는 standard-bottom-sheet가 더 적합하다"],"prompt_phrases":["지도 아래에 드래그 가능한 map bottom panel로 장소 정보를 보여줘"]},{"id":"location-permission-empty","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"위치 권한 빈 상태","aliases":["location permission empty","위치 권한 필요 화면","주변 장소 없음","위치 허용 안내"]},"en":{"name":"Location permission empty state","aliases":["Location permission empty","Location access empty state"]},"one_liner":"위치 권한이 없어 지도나 주변 결과를 보여줄 수 없을 때 나타나는 빈 상태.","description":"왜 위치 권한이 필요한지 설명하고 권한 요청 행동을 제공한다.","visual_anatomy":["location icon","empty message","permission CTA","map/list placeholder"],"when_to_use":["주변 장소","배달 주소","지도 기능이 위치 권한 없이 비어 있을 때"],"anti_use":["권한이 아니라 데이터가 없는 경우에는 일반 empty-state를 쓴다"],"prompt_phrases":["위치 권한이 없을 때 location permission empty state를 보여주고 허용 버튼을 넣어줘"]},{"id":"onboarding-pager","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"온보딩 페이저","aliases":["onboarding pager","온보딩 넘김 화면","시작 화면 점","튜토리얼 페이지"]},"en":{"name":"Onboarding pager","aliases":["Onboarding carousel","Intro pager"]},"one_liner":"앱 첫 사용 흐름에서 여러 소개 화면을 좌우로 넘기고 점으로 위치를 보여주는 패턴.","description":"핵심 가치나 초기 설정을 짧은 페이지 묶음으로 설명하고 다음 행동으로 이어준다.","visual_anatomy":["illustration area","headline","page dots","next or start button"],"when_to_use":["새 사용자가 앱의 핵심 기능을 처음 이해해야 할 때"],"anti_use":["사용자가 바로 써야 하는 도구에서 긴 온보딩을 강제하지 않는다"],"prompt_phrases":["앱 첫 실행에 3장짜리 onboarding pager를 넣고 하단에 점을 보여줘"]},{"id":"onboarding-carousel-skip-pattern","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"건너뛰기 있는 온보딩 페이저","aliases":["onboarding skip pattern","온보딩 건너뛰기","스킵 가능한 온보딩"]},"en":{"name":"Onboarding carousel skip pattern","aliases":["Skippable onboarding flow","Onboarding skip rule"]},"one_liner":"온보딩 모든 페이지에서 항상 건너뛰기가 가능하고, 한 번 건너뛰면 다음 실행부터 다시 노출되지 않는 규칙.","description":"onboarding-pager의 페이지 넘김 구조 위에, 언제나 접근 가능한 건너뛰기 버튼과 건너뛴 뒤 재실행 시 자동으로 다시 보여주지 않는 규칙, 그리고 도움말/설정에서 다시 찾아볼 수 있는 경로까지 묶은 상태 계약이다. onboarding-pager 자체의 anatomy는 점과 다음 버튼만 서술하며 건너뛰기 상태나 재노출 금지 규칙은 명시하지 않는다.","visual_anatomy":["illustration per page","headline per page","page dots indicator","persistent skip button top-trailing","primary cta last page"],"when_to_use":["첫 실행 온보딩에서 사용자가 언제든 이탈할 수 있어야 할 때","건너뛴 온보딩을 다음 실행부터 다시 보여주지 않아야 할 때"],"anti_use":["건너뛰기 버튼을 특정 페이지에서만 노출하지 않는다","건너뛴 뒤에도 매 실행마다 다시 노출하지 않는다"],"prompt_phrases":["온보딩 모든 페이지에서 건너뛰기 버튼이 보이게 해줘","건너뛰면 다음 실행부터는 온보딩을 다시 보여주지 마"],"related":[{"id":"onboarding-pager","relation":"compare","note":"onboarding-pager는 점과 다음 버튼으로 이루어진 페이지 넘김 구조 자체를 가리키고, 이 항목은 그 위에 언제나 접근 가능한 건너뛰기와 재노출 금지 규칙을 추가한 상태 계약이다."}]},{"id":"coach-mark","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"코치마크","aliases":["coach mark","기능 힌트","튜토리얼 말풍선","spotlight hint"]},"en":{"name":"Coach mark","aliases":["Feature hint","Spotlight hint","Guided tip"]},"one_liner":"특정 UI 요소를 강조하고 사용법을 짧게 알려주는 안내 오버레이.","description":"새 기능이나 중요한 버튼을 처음 보여줄 때, 화면 위에 힌트 말풍선과 강조 영역을 덧씌운다.","visual_anatomy":["highlighted target","overlay hint","pointer","dismiss action"],"when_to_use":["사용자가 놓치기 쉬운 새 기능이나 첫 사용 행동을 안내할 때"],"anti_use":["모든 기능을 코치마크로 설명하면 방해가 된다","반복 노출은 피한다"],"prompt_phrases":["새 추가 버튼을 강조하는 coach mark를 한 번만 보여줘"]},{"id":"mobile-empty-feed","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"모바일 빈 피드","aliases":["mobile empty feed","빈 피드 화면","첫 게시물 없음","피드 없음"]},"en":{"name":"Mobile empty feed","aliases":["Empty feed state","Feed empty state"]},"one_liner":"모바일 피드에 아직 콘텐츠가 없을 때 첫 행동을 안내하는 빈 상태.","description":"글 없음, 팔로잉 없음, 사진 없음 같은 상태에서 사용자가 무엇을 하면 되는지 명확히 알려준다.","visual_anatomy":["empty illustration","empty message","starter CTA","feed background"],"when_to_use":["새 계정","검색 결과 없음","팔로잉 없음처럼 피드가 비어 있을 때"],"anti_use":["로딩 중에는 skeleton이나 spinner를 쓰고 empty feed로 오해시키지 않는다"],"prompt_phrases":["아직 글이 없을 때 첫 글 작성 버튼이 있는 mobile empty feed를 보여줘"]},{"id":"page-layout","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"페이지 레이아웃","aliases":["page layout","화면 레이아웃","page frame"]},"en":{"name":"Page layout","aliases":["Page frame","Content layout"]},"one_liner":"헤더, 사이드바, 본문, 보조 영역처럼 페이지의 큰 영역 배치를 정한 구조.","description":"개별 컴포넌트보다 상위 수준에서 화면의 정보 영역과 행동 영역을 나눈다.","visual_anatomy":["header area","navigation area","main content","supporting region"],"when_to_use":["앱 화면을 처음 설계하며 큰 영역을 먼저 정해야 할 때"],"anti_use":["작은 카드 하나를 설명할 때 page layout이라고 부르지 않는다"],"prompt_phrases":["헤더 사이드바 본문 우측 보조영역이 있는 page layout을 잡아줘"]},{"id":"dashboard-grid","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"대시보드 그리드","aliases":["dashboard grid","위젯 그리드","카드 대시보드"]},"en":{"name":"Dashboard grid","aliases":["Widget grid","Card dashboard grid"]},"one_liner":"여러 지표 카드와 차트 위젯을 격자로 배치하는 대시보드 구조.","description":"크기가 다른 카드와 차트를 일관된 컬럼과 간격으로 정렬해 한눈에 비교하게 한다.","visual_anatomy":["metric cards","chart widgets","grid columns","responsive rows"],"when_to_use":["여러 지표와 시각화를 동시에 모니터링해야 할 때"],"anti_use":["단일 리포트나 긴 본문 콘텐츠에는 일반 page layout이 낫다"],"prompt_phrases":["지표 카드와 차트를 12컬럼 dashboard grid로 배치해줘"]},{"id":"permission-state","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"권한 필요 상태","aliases":["permission state","권한 없음 화면","접근 권한 안내"]},"en":{"name":"Permission state","aliases":["Permission required state","Access denied state"]},"one_liner":"현재 기능을 쓰려면 권한 요청이나 관리자 승인이 필요하다고 안내하는 상태.","description":"왜 접근할 수 없는지, 어떤 권한이 필요한지, 요청 행동은 무엇인지 보여준다.","visual_anatomy":["lock icon","permission explanation","request access action","contact hint"],"when_to_use":["사용자가 볼 수 있지만 권한이 없어 접근하지 못하는 기능에서"],"anti_use":["기능 자체가 없거나 유료 제한이면 upgrade prompt가 더 정확하다"],"prompt_phrases":["권한 요청 버튼이 있는 permission state를 보여줘"]},{"id":"locked-state","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"잠금 상태","aliases":["locked state","잠긴 화면","잠금 안내"]},"en":{"name":"Locked state","aliases":["Locked content state","Read-only locked state"]},"one_liner":"콘텐츠나 설정이 현재 조건에서 잠겨 있음을 알려주는 상태.","description":"편집 권한, 플랜, 워크플로 단계 때문에 조작할 수 없는 영역을 명확히 표시한다.","visual_anatomy":["lock indicator","disabled content","reason text","unlock hint"],"when_to_use":["콘텐츠는 보이지만 수정이나 사용이 막혀 있을 때"],"anti_use":["권한 요청이 가능한 경우에는 permission state가 더 구체적이다"],"prompt_phrases":["잠긴 설정 카드에 locked state를 표시해줘"]},{"id":"offline-state","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"오프라인 상태","aliases":["offline state","네트워크 끊김 상태","offline banner"]},"en":{"name":"Offline state","aliases":["No connection state","Offline banner"]},"one_liner":"인터넷 연결이 없어 일부 기능이 제한된다는 상태 표시.","description":"사용자가 문제 원인을 네트워크로 이해하고 재연결 또는 오프라인 사용 가능 범위를 알게 한다. 모바일에서는 상단 헤더/앱바 바로 아래에 고정 배치해 하단 nav/tab bar 영역과 겹치지 않게 하고, 재연결이 감지되면 사용자 조작 없이 자동으로 사라진다.","visual_anatomy":["connection icon","offline message","retry action","limited mode hint","top-pinned placement below header on mobile","auto-dismiss on reconnect"],"when_to_use":["네트워크 연결이 필요한 데이터를 불러오지 못할 때"],"anti_use":["서버 오류는 error state나 retry panel로 구분한다","사용자가 직접 닫아야 하는 mobile-snackbar와 달리 네트워크가 실제로 복구되기 전까지는 닫히지 않아야 한다"],"prompt_phrases":["상단에 오프라인 상태 배너와 다시 시도 버튼을 넣어줘","헤더 바로 아래에 고정하고 재연결되면 자동으로 사라지게 해줘"]},{"id":"maintenance-state","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"점검 상태","aliases":["maintenance state","서비스 점검 화면","maintenance page"]},"en":{"name":"Maintenance state","aliases":["Service maintenance state","Maintenance page"]},"one_liner":"서비스나 기능이 계획된 점검 중임을 알려주는 상태 화면.","description":"예상 종료 시간, 영향 범위, 상태 페이지 링크를 제공해 불확실성을 줄인다.","visual_anatomy":["maintenance icon","schedule","affected area","status link"],"when_to_use":["계획된 서비스 점검이나 배포로 기능이 일시 중단될 때"],"anti_use":["예상치 못한 실패는 error state나 retry panel이 맞다"],"prompt_phrases":["예상 종료 시간이 있는 maintenance state를 만들어줘"]},{"id":"syncing-state","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"동기화 중 상태","aliases":["syncing state","동기화 표시","syncing indicator"]},"en":{"name":"Syncing state","aliases":["Sync status","Syncing indicator"]},"one_liner":"로컬 변경이나 원격 데이터가 동기화 중임을 보여주는 상태.","description":"사용자가 저장 완료와 아직 동기화 중인 상태를 구분하게 한다.","visual_anatomy":["sync spinner","status label","last synced hint","progress feedback"],"when_to_use":["백그라운드 동기화가 사용자 작업 결과에 영향을 줄 때"],"anti_use":["단순 로딩은 loading state가 더 간단하다"],"prompt_phrases":["문서 상단에 syncing state와 마지막 동기화 시간을 보여줘"]},{"id":"saving-indicator","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"저장 표시기","aliases":["saving indicator","저장 중 표시","autosave status"]},"en":{"name":"Saving indicator","aliases":["Autosave indicator","Save status"]},"one_liner":"입력 내용이 저장 중인지 저장 완료인지 작게 보여주는 상태 표시.","description":"자동 저장 편집기에서 사용자가 닫기 전에 저장 상태를 확인할 수 있게 한다.","visual_anatomy":["saving spinner","saved check","compact label","timestamp"],"when_to_use":["자동 저장이나 비동기 저장이 있는 편집 화면에서"],"anti_use":["저장 실패는 error toast나 inline alert로 더 명확히 알려야 한다"],"prompt_phrases":["우측 상단에 저장 중에서 저장됨으로 바뀌는 saving indicator를 넣어줘"]},{"id":"unsaved-changes-banner","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"저장 안 된 변경 배너","aliases":["unsaved changes banner","변경사항 배너","저장 필요 배너"]},"en":{"name":"Unsaved changes banner","aliases":["Unsaved changes bar","Dirty state banner"]},"one_liner":"저장되지 않은 변경이 있음을 알리고 저장 또는 취소 행동을 제공하는 배너.","description":"편집 화면에서 사용자가 변경 상태를 잃지 않도록 명확한 행동을 제공한다.","visual_anatomy":["dirty state text","save action","discard action","sticky placement"],"when_to_use":["저장 전 변경을 잃을 위험이 있는 설정이나 폼에서"],"anti_use":["자동 저장이 즉시 완료되면 saving indicator만으로 충분하다"],"prompt_phrases":["하단에 저장 안 된 변경 배너와 저장 취소 버튼을 넣어줘"]},{"id":"session-expired-dialog","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"세션 만료 다이얼로그","aliases":["session expired dialog","로그인 만료 모달","세션 만료 창"]},"en":{"name":"Session expired dialog","aliases":["Session timeout dialog","Login expired modal"]},"one_liner":"로그인 세션이 만료되어 다시 인증해야 함을 알리는 모달.","description":"사용자가 현재 작업을 잃지 않도록 재로그인 행동과 취소 가능성을 명확히 한다.","visual_anatomy":["modal surface","timeout message","sign in action","secondary action"],"when_to_use":["보안 세션이 만료되어 API 요청이나 저장이 막혔을 때"],"anti_use":["일반 권한 부족은 permission state가 더 정확하다"],"prompt_phrases":["세션이 만료되면 재로그인 버튼이 있는 dialog를 띄워줘"]},{"id":"upgrade-prompt","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"업그레이드 유도","aliases":["upgrade prompt","유료 플랜 안내","paywall prompt"]},"en":{"name":"Upgrade prompt","aliases":["Plan upgrade prompt","Paywall prompt"]},"one_liner":"현재 플랜에서 제한된 기능을 상위 플랜으로 안내하는 UI.","description":"기능 가치와 제한 이유를 설명하고 업그레이드 CTA를 제공한다.","visual_anatomy":["locked feature","value message","plan label","upgrade action"],"when_to_use":["유료 플랜 차이 때문에 기능 접근이 제한될 때"],"anti_use":["권한 문제나 오류를 과금 유도처럼 보이게 만들지 않는다"],"prompt_phrases":["고급 분석 기능에 upgrade prompt를 보여줘"]},{"id":"quota-warning","status":"draft","category":"feedback","group":"feedback-access-limits","ko":{"name":"사용량 경고","aliases":["quota warning","한도 경고","usage warning"]},"en":{"name":"Quota warning","aliases":["Usage limit warning","Quota alert"]},"one_liner":"저장공간, API 호출, 크레딧 같은 사용 한도에 가까워졌음을 알려주는 경고.","description":"현재 사용량, 한도, 남은 양, 업그레이드나 정리 행동을 함께 제공한다.","visual_anatomy":["usage meter","warning text","limit value","action link"],"when_to_use":["사용자가 한도 초과 전에 조치할 수 있어야 할 때"],"anti_use":["이미 차단된 상태면 rate-limit state나 locked state가 더 직접적이다"],"prompt_phrases":["월 사용량 80% quota warning을 표시해줘"]},{"id":"trial-banner","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"체험판 배너","aliases":["trial banner","무료 체험 배너","trial notice"]},"en":{"name":"Trial banner","aliases":["Free trial banner","Trial notice"]},"one_liner":"무료 체험 기간, 남은 일수, 전환 행동을 상단이나 하단에 표시하는 배너.","description":"현재 계정의 체험 상태와 종료 전 필요한 행동을 지속적으로 알려준다.","visual_anatomy":["trial days left","plan action","dismiss or learn link","banner placement"],"when_to_use":["체험 기간이 제품 사용 맥락에 영향을 줄 때"],"anti_use":["일회성 마케팅 메시지는 announcement banner가 더 적합하다"],"prompt_phrases":["상단에 5일 남음 trial banner를 넣어줘"]},{"id":"destructive-confirmation","status":"draft","category":"action","group":"action-bulk-danger","ko":{"name":"파괴적 작업 확인","aliases":["destructive confirmation","삭제 확인","위험 작업 확인"]},"en":{"name":"Destructive confirmation","aliases":["Delete confirmation","Dangerous action confirmation"]},"one_liner":"삭제나 초기화처럼 되돌리기 어려운 행동 전 사용자의 명시 확인을 받는 UI.","description":"위험한 결과를 설명하고 취소와 실행 버튼을 명확히 구분한다.","visual_anatomy":["danger message","object name","cancel action","destructive action"],"when_to_use":["데이터 삭제","권한 제거","결제 취소처럼 영향이 큰 행동에서"],"anti_use":["되돌리기 쉬운 사소한 행동마다 confirmation을 띄우지 않는다"],"prompt_phrases":["프로젝트 삭제 전에 destructive confirmation dialog를 띄워줘"]},{"id":"success-toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"성공 토스트","aliases":["success toast","완료 토스트","성공 알림"]},"en":{"name":"Success toast","aliases":["Success notification","Completion toast"]},"one_liner":"작업이 성공적으로 끝났음을 짧게 알려주는 비차단 알림.","description":"저장, 복사, 업로드 완료처럼 즉시 확인만 필요한 성공 상태를 표시한다.","visual_anatomy":["check icon","success message","optional undo or close","transient surface"],"when_to_use":["사용자가 결과 확인만 하면 되는 짧은 성공 피드백에서"],"anti_use":["다음 행동이 필수라면 dialog나 inline result가 더 적절하다"],"prompt_phrases":["저장되면 success toast가 잠깐 뜨게 해줘"]},{"id":"error-toast","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"오류 토스트","aliases":["error toast","실패 토스트","에러 알림"]},"en":{"name":"Error toast","aliases":["Error notification","Failure toast"]},"one_liner":"가벼운 작업 실패를 짧게 알리고 재시도 같은 행동을 제공하는 알림.","description":"저장 실패나 복사 실패처럼 맥락은 유지하되 즉시 피드백이 필요한 오류에 쓴다.","visual_anatomy":["error icon","failure message","retry action","close action"],"when_to_use":["오류가 현재 화면 전체를 막지는 않지만 사용자가 알아야 할 때"],"anti_use":["화면을 사용할 수 없는 심각한 오류는 error state나 retry panel이 낫다"],"prompt_phrases":["업로드 실패 시 다시 시도 버튼이 있는 error toast를 보여줘"]},{"id":"notification-center","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"알림 센터","aliases":["notification center","알림함","notification panel"]},"en":{"name":"Notification center","aliases":["Notifications panel","Notification drawer"]},"one_liner":"여러 알림을 모아 읽고 상태를 관리하는 패널.","description":"읽음 처리, 필터, 알림 목록, 설정 이동을 한곳에서 제공한다.","visual_anatomy":["trigger badge","notification panel","unread count","notification rows"],"when_to_use":["알림이 누적되고 사용자가 나중에 다시 확인해야 할 때"],"anti_use":["한 번 보고 사라질 메시지는 toast나 snackbar가 가볍다"],"prompt_phrases":["벨을 누르면 unread 알림이 보이는 notification center를 열어줘"]},{"id":"notification-list","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"알림 목록","aliases":["notification list","알림 리스트","notification feed"]},"en":{"name":"Notification list","aliases":["Notification feed","Alerts list"]},"one_liner":"알림 항목을 시간순이나 상태별로 나열한 목록.","description":"각 알림의 제목, 설명, 시간, 읽음 상태, 관련 행동을 행 단위로 보여준다.","visual_anatomy":["notification row","unread marker","timestamp","row action"],"when_to_use":["알림 센터나 활동 피드 안에서 알림을 구조적으로 보여줄 때"],"anti_use":["사용자 활동 전체를 보여주려면 activity feed가 더 넓은 개념이다"],"prompt_phrases":["읽지 않은 점과 시간이 있는 notification list를 만들어줘"]},{"id":"status-chip","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"상태 칩","aliases":["status chip","상태 태그","state chip"]},"en":{"name":"Status chip","aliases":["State chip","Status tag"]},"one_liner":"항목의 상태를 작은 pill 형태로 표시하는 컴팩트 라벨.","description":"진행중, 승인됨, 보류, 실패 같은 상태를 리스트나 테이블 안에서 빠르게 구분한다.","visual_anatomy":["pill shape","state color","short label","optional icon"],"when_to_use":["테이블이나 카드에서 항목 상태를 짧게 보여줄 때"],"anti_use":["긴 설명이나 조치가 필요하면 alert나 inline message가 낫다"],"prompt_phrases":["테이블 상태 열에 승인됨 보류 status chip을 넣어줘"]},{"id":"health-indicator","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"헬스 인디케이터","aliases":["health indicator","상태등","서비스 상태 표시"]},"en":{"name":"Health indicator","aliases":["Service health indicator","Health status"]},"one_liner":"시스템이나 서비스의 정상, 경고, 장애 상태를 색과 라벨로 보여주는 표시.","description":"운영 대시보드에서 서비스 상태를 빠르게 스캔할 수 있게 한다.","visual_anatomy":["health dot","status label","severity color","service name"],"when_to_use":["서버","API","작업 큐 같은 시스템 상태를 모니터링할 때"],"anti_use":["사용자 작업 성공 여부는 success/error toast가 더 적합하다"],"prompt_phrases":["API 정상 경고 장애를 health indicator로 보여줘"]},{"id":"connection-status","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"연결 상태","aliases":["connection status","연결 표시","네트워크 상태"]},"en":{"name":"Connection status","aliases":["Connectivity status","Network status"]},"one_liner":"실시간 연결, 재연결, 끊김 상태를 사용자에게 보여주는 표시.","description":"채팅, 협업 편집, 스트리밍처럼 연결 상태가 기능 동작에 직접 영향을 줄 때 쓴다.","visual_anatomy":["connection dot","label","reconnecting state","last update"],"when_to_use":["실시간 연결이 끊기면 사용자가 바로 알아야 하는 화면에서"],"anti_use":["일반 오프라인 안내는 offline state가 더 넓은 패턴이다"],"prompt_phrases":["상단에 연결됨 재연결중 연결 끊김 connection status를 보여줘"]},{"id":"retry-panel","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"재시도 패널","aliases":["retry panel","다시 시도 영역","실패 복구 패널"]},"en":{"name":"Retry panel","aliases":["Retry state panel","Recovery panel"]},"one_liner":"데이터 로드나 작업 실패 후 원인과 다시 시도 행동을 제공하는 패널.","description":"사용자가 화면을 떠나지 않고 오류를 복구할 수 있도록 실패 메시지와 재시도 버튼을 둔다.","visual_anatomy":["error message","retry action","support hint","optional details"],"when_to_use":["목록이나 카드 영역 일부가 실패했지만 재요청 가능할 때"],"anti_use":["전체 앱 장애나 점검은 maintenance state로 분리한다"],"prompt_phrases":["데이터 로드 실패 영역에 retry panel을 넣어줘"],"related":[{"id":"background-job-queue-monitor","relation":"compare","note":"retry panel은 하나의 실패 상태를 복구하는 단일 패널이고, background job queue monitor는 여러 비동기 작업의 큐 상태를 목록으로 감시하며 건별 재시도를 제공하는 별도 구조다"}]},{"id":"background-job-queue-monitor","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"백그라운드 작업 큐 모니터","aliases":["job queue monitor","배치 작업 모니터","백그라운드 작업 상태"]},"en":{"name":"Background job queue monitor","aliases":["Job queue monitor","Background task monitor"]},"one_liner":"배치, 마이그레이션, 이메일 발송 같은 비동기 작업들을 대기중/실행중/성공/실패 상태로 나열하고 실패 건을 개별 재시도하는 운영 모니터.","description":"여러 백그라운드 작업의 큐 상태를 목록형으로 보여주고, 상태 필터와 건별 재시도 액션을 제공한다. 단일 실패 패널이 아니라 여러 작업을 한 화면에서 감시하는 목록형 모니터다.","visual_anatomy":["row per job with id and type","status badge","started time and duration","retry count","status filter","per-row retry action for failed jobs"],"when_to_use":["비동기 배치나 마이그레이션이나 발송 작업 다수를 운영자가 한 화면에서 감시하고 실패 건만 개별 재시도해야 할 때"],"anti_use":["단일 작업의 실패 원인과 재시도만 보여주면 되는 좁은 화면에는 retry panel이 더 적합하다"],"prompt_phrases":["배치 작업들의 큐 상태를 pending running succeeded failed로 보여주는 job queue monitor를 만들어줘","실패한 작업만 재시도할 수 있는 백그라운드 작업 모니터를 넣어줘"],"related":[{"id":"retry-panel","relation":"compare","note":"retry panel은 하나의 실패 상태를 복구하는 단일 패널이고, background job queue monitor는 여러 비동기 작업의 큐 상태를 목록으로 감시하며 건별 재시도를 제공하는 별도 구조다"}]},{"id":"media-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"미디어 카드","aliases":["media card","콘텐츠 카드","이미지 카드"]},"en":{"name":"Media card","aliases":["Content card","Image card"]},"one_liner":"이미지나 영상 썸네일과 제목, 메타 정보를 묶어 보여주는 카드.","description":"콘텐츠 목록에서 시각 자료를 먼저 보여주고 제목, 설명, 행동을 함께 배치한다.","visual_anatomy":["thumbnail","title","metadata","action area"],"when_to_use":["동영상","글","이미지 자료처럼 썸네일이 선택에 중요한 콘텐츠에서"],"anti_use":["텍스트 속성 비교가 핵심이면 table이나 list가 낫다"],"prompt_phrases":["썸네일 제목 조회수가 있는 media card를 만들어줘"]},{"id":"video-player-controls","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"비디오 플레이어 컨트롤","aliases":["video player controls","영상 컨트롤","재생 컨트롤"]},"en":{"name":"Video player controls","aliases":["Video controls","Player controls"]},"one_liner":"영상 재생, 일시정지, 진행바, 음량, 전체화면을 조작하는 컨트롤 묶음.","description":"영상 위나 아래에 배치되어 사용자가 재생 상태와 위치를 직접 제어하게 한다.","visual_anatomy":["play pause button","timeline","time label","volume","fullscreen action"],"when_to_use":["앱 안에서 사용자가 동영상을 직접 재생해야 할 때"],"anti_use":["단순 썸네일 미리보기에는 play overlay만으로 충분하다"],"prompt_phrases":["재생 버튼과 타임라인이 있는 video player controls를 넣어줘"]},{"id":"audio-player-controls","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"오디오 플레이어 컨트롤","aliases":["audio player controls","음악 컨트롤","음성 재생 컨트롤"]},"en":{"name":"Audio player controls","aliases":["Audio controls","Music player controls"]},"one_liner":"오디오 재생, 진행, 시간, 음량을 조작하는 compact 컨트롤.","description":"팟캐스트, 음성 메모, 음악 같은 오디오 콘텐츠의 재생 상태를 보여준다.","visual_anatomy":["play pause button","waveform or progress","time","volume"],"when_to_use":["오디오 파일이나 음성 콘텐츠를 화면 안에서 재생할 때"],"anti_use":["다운로드 링크만 제공할 파일에는 불필요하다"],"prompt_phrases":["파형과 재생 버튼이 있는 audio player controls를 만들어줘"]},{"id":"image-gallery","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"이미지 갤러리","aliases":["image gallery","사진 갤러리","gallery grid","상품 이미지 갤러리"]},"en":{"name":"Image gallery","aliases":["Photo gallery","Gallery grid","Product gallery"]},"one_liner":"여러 이미지를 격자나 썸네일 목록으로 탐색하는 UI.","description":"사진, 제품 이미지, 포트폴리오처럼 이미지 묶음을 빠르게 훑고 선택하게 한다.","visual_anatomy":["image grid","selected thumbnail","preview","navigation controls"],"when_to_use":["여러 이미지를 비교하거나 선택해야 할 때"],"anti_use":["하나의 대표 이미지만 있으면 image나 media card가 더 단순하다"],"prompt_phrases":["썸네일을 누르면 선택되는 image gallery를 넣어줘"]},{"id":"lightbox","status":"draft","category":"structure","group":"structure-panels","ko":{"name":"라이트박스","aliases":["lightbox","이미지 확대 모달","갤러리 모달"]},"en":{"name":"Lightbox","aliases":["Image lightbox","Media overlay"]},"one_liner":"이미지나 미디어를 화면 위 오버레이로 크게 보여주는 패턴.","description":"배경을 어둡게 하고 미디어, 닫기, 이전/다음 탐색을 제공한다.","visual_anatomy":["scrim","enlarged media","close button","previous next controls"],"when_to_use":["목록의 미디어를 현재 맥락 위에서 크게 확인해야 할 때"],"anti_use":["복잡한 편집은 별도 detail page나 editor가 낫다"],"prompt_phrases":["이미지를 클릭하면 lightbox로 크게 열리게 해줘"]},{"id":"cropper","status":"draft","category":"action","group":"action-editor-media","ko":{"name":"크롭퍼","aliases":["cropper","이미지 자르기","crop tool"]},"en":{"name":"Cropper","aliases":["Image cropper","Crop tool"]},"one_liner":"이미지의 자를 영역을 선택하고 비율을 조정하는 편집 컨트롤.","description":"프로필 사진, 썸네일, 업로드 이미지의 사용 영역을 사용자가 직접 지정한다.","visual_anatomy":["image canvas","crop box","handles","aspect ratio control","apply action"],"when_to_use":["사용자 업로드 이미지를 특정 비율에 맞춰야 할 때"],"anti_use":["단순 파일 첨부만 필요하면 upload dropzone이 적합하다"],"prompt_phrases":["아바타 업로드 뒤 cropper로 정사각형 영역을 고르게 해줘"]},{"id":"upload-dropzone","status":"draft","category":"input","group":"input-file-media","ko":{"name":"업로드 드롭존","aliases":["upload dropzone","드래그 업로드 영역","파일 드롭 영역"]},"en":{"name":"Upload dropzone","aliases":["Dropzone","File drop area"]},"one_liner":"파일을 클릭 선택하거나 끌어다 놓아 업로드하는 큰 입력 영역.","description":"허용 파일 형식, 크기 제한, 드래그 상태, 업로드 행동을 명확히 보여준다.","visual_anatomy":["drop area","upload icon","instruction text","file constraints","drag state"],"when_to_use":["파일 업로드가 화면의 주요 행동일 때"],"anti_use":["작은 첨부만 필요하면 file upload button이나 attachment list가 낫다"],"prompt_phrases":["PDF를 끌어다 놓는 upload dropzone을 만들어줘"]},{"id":"attachment-list","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"첨부파일 목록","aliases":["attachment list","첨부 목록","파일 첨부 리스트"]},"en":{"name":"Attachment list","aliases":["File attachments list","Attachment rows"]},"one_liner":"첨부된 파일을 이름, 크기, 상태, 제거 행동과 함께 나열하는 목록.","description":"메시지, 폼, 이슈, 문서에 붙은 파일을 업로드 상태와 함께 관리한다.","visual_anatomy":["file icon","filename","size","upload status","remove action"],"when_to_use":["여러 첨부파일을 확인하거나 삭제해야 할 때"],"anti_use":["파일 자체가 주요 콘텐츠면 file card나 gallery가 더 잘 보인다"],"prompt_phrases":["업로드 진행 상태가 있는 attachment list를 넣어줘"]},{"id":"file-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"파일 카드","aliases":["file card","문서 카드","파일 타일"]},"en":{"name":"File card","aliases":["Document card","File tile"]},"one_liner":"파일 하나를 아이콘, 이름, 메타데이터, 액션과 함께 카드로 보여주는 UI.","description":"드라이브, 문서함, 업로드 결과에서 파일을 시각적으로 선택하게 한다.","visual_anatomy":["file icon","filename","metadata","preview area","actions"],"when_to_use":["파일을 카드/타일 뷰로 탐색해야 할 때"],"anti_use":["열 정렬과 대량 작업이 중요하면 table이 낫다"],"prompt_phrases":["PDF 아이콘과 더보기 메뉴가 있는 file card를 만들어줘"]},{"id":"product-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"상품 카드","aliases":["product card","제품 카드","commerce card"]},"en":{"name":"Product card","aliases":["Commerce card","Item card"]},"one_liner":"상품 이미지, 이름, 가격, 평점, 장바구니 행동을 묶은 카드.","description":"커머스 목록에서 사용자가 상품을 훑고 선택하거나 바로 담을 수 있게 한다.","visual_anatomy":["product image","title","price","rating","add action"],"when_to_use":["상품 목록이나 추천 영역을 카드로 보여줄 때"],"anti_use":["상품 속성 비교가 핵심이면 comparison table이 낫다"],"prompt_phrases":["이미지 가격 장바구니 버튼이 있는 product card를 만들어줘"],"related":[{"id":"cross-sell-related-strip","relation":"use-with","note":"상품 상세나 장바구니 하단의 cross-sell related strip은 이 product card를 그대로 재사용하는 캐러셀 조합이다."}]},{"id":"price-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"가격 카드","aliases":["price card","요금 카드","pricing card"]},"en":{"name":"Price card","aliases":["Pricing card","Price plan card"]},"one_liner":"요금제나 상품 가격, 핵심 혜택, 선택 행동을 보여주는 카드.","description":"가격과 주요 조건을 빠르게 비교하고 사용자가 선택 행동으로 이어지게 한다.","visual_anatomy":["plan name","price","billing period","feature bullets","select action"],"when_to_use":["요금제나 상품 옵션을 카드 형태로 제시할 때"],"anti_use":["세부 기능 비교가 많으면 comparison table과 함께 쓴다"],"prompt_phrases":["월 가격과 시작하기 버튼이 있는 price card를 넣어줘"]},{"id":"plan-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"플랜 카드","aliases":["plan card","요금제 카드","subscription plan card"]},"en":{"name":"Plan card","aliases":["Subscription plan card","Tier card"]},"one_liner":"구독 플랜의 이름, 대상, 기능, 현재 선택 상태를 보여주는 카드.","description":"price card보다 구독 tier의 차이와 현재 플랜 표시가 중심이다.","visual_anatomy":["tier name","current badge","feature summary","upgrade or select action"],"when_to_use":["구독 플랜을 선택하거나 변경하는 설정 화면에서"],"anti_use":["단순 가격 노출만 필요하면 price card가 더 직접적이다"],"prompt_phrases":["현재 플랜 배지가 있는 plan card 목록을 보여줘"]},{"id":"feature-comparison","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"기능 비교","aliases":["feature comparison","기능 비교표","플랜 비교"]},"en":{"name":"Feature comparison","aliases":["Feature comparison table","Plan comparison"]},"one_liner":"플랜이나 제품별 기능 제공 여부를 행과 열로 비교하는 UI.","description":"comparison table의 커머스/플랜 특화 형태로 체크, 제한, 강조 열을 사용한다.","visual_anatomy":["feature rows","plan columns","checkmarks","highlighted tier"],"when_to_use":["사용자가 플랜별 기능 차이를 근거로 선택해야 할 때"],"anti_use":["기능이 3개 이하이면 plan card 안 요약으로 충분하다"],"prompt_phrases":["Basic Pro Team 기능 차이를 feature comparison으로 보여줘"]},{"id":"coupon-field","status":"draft","category":"input","group":"input-pickers","ko":{"name":"쿠폰 입력 필드","aliases":["coupon field","프로모션 코드 입력","할인 코드"]},"en":{"name":"Coupon field","aliases":["Promo code field","Discount code input"]},"one_liner":"쿠폰이나 프로모션 코드를 입력하고 적용하는 입력+버튼 조합.","description":"결제 요약 근처에서 코드 입력, 적용, 성공/실패 상태를 보여준다.","visual_anatomy":["code input","apply button","validation state","discount feedback"],"when_to_use":["체크아웃이나 결제 화면에서 할인 코드를 받을 때"],"anti_use":["일반 검색이나 인증 코드를 coupon field라고 부르지 않는다"],"prompt_phrases":["결제 요약 아래에 적용 버튼이 있는 coupon field를 넣어줘"]},{"id":"quantity-stepper","status":"draft","category":"input","group":"input-pickers","ko":{"name":"수량 스테퍼","aliases":["quantity stepper","수량 조절기","plus minus input","터치 수량 스테퍼"]},"en":{"name":"Quantity stepper","aliases":["Quantity input stepper","Plus minus input","Touch quantity stepper"]},"one_liner":"빼기/더하기 버튼으로 상품 수량 같은 숫자를 조절하는 입력.","description":"직접 입력보다 작은 정수 범위를 빠르게 늘리거나 줄이게 한다.","visual_anatomy":["minus button","quantity value","plus button","min max constraints"],"when_to_use":["장바구니 수량","인원수","티켓 수처럼 작은 정수를 조절할 때"],"anti_use":["큰 범위나 연속 값은 slider나 number input이 낫다"],"prompt_phrases":["장바구니에 plus minus quantity stepper를 넣어줘"]},{"id":"cart-summary","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"장바구니 요약","aliases":["cart summary","주문 요약","checkout summary"]},"en":{"name":"Cart summary","aliases":["Order summary","Checkout summary"]},"one_liner":"상품 합계, 배송비, 할인, 총 결제 금액을 요약하는 영역.","description":"결제 전 사용자가 비용 구성을 확인하고 다음 단계로 이동하게 한다.","visual_anatomy":["line items","subtotal","discount","shipping","total","checkout action"],"when_to_use":["장바구니나 체크아웃에서 결제 금액을 확인해야 할 때"],"anti_use":["주문 완료 이후에는 order status나 receipt가 더 적절하다"],"prompt_phrases":["소계 배송비 할인 총액이 있는 cart summary를 만들어줘"]},{"id":"checkout-step","status":"draft","category":"structure","group":"structure-app-layout","ko":{"name":"체크아웃 단계","aliases":["checkout step","결제 단계","주문 단계"]},"en":{"name":"Checkout step","aliases":["Checkout stepper","Purchase step"]},"one_liner":"배송, 결제, 확인처럼 구매 흐름의 현재 단계를 보여주는 구조.","description":"사용자가 결제 흐름에서 어디에 있고 다음에 무엇을 해야 하는지 알게 한다.","visual_anatomy":["step indicator","current step","completed steps","step content"],"when_to_use":["구매나 가입처럼 여러 단계가 순서대로 진행될 때"],"anti_use":["한 화면에서 끝나는 간단 결제에는 stepper가 과하다"],"prompt_phrases":["배송 결제 확인 checkout step을 상단에 보여줘"]},{"id":"payment-method-card","status":"draft","category":"selection","group":"selection-context","ko":{"name":"결제수단 카드","aliases":["payment method card","카드 선택 UI","결제 카드"]},"en":{"name":"Payment method card","aliases":["Payment card selector","Billing method card"]},"one_liner":"신용카드나 계좌 같은 결제수단을 선택하고 관리하는 카드.","description":"브랜드, 마지막 번호, 만료일, 기본 결제수단 여부, 선택 상태를 보여준다.","visual_anatomy":["payment brand","masked number","expiry","selected state","manage action"],"when_to_use":["여러 결제수단 중 하나를 선택하거나 기본값을 관리할 때"],"anti_use":["카드 정보 입력 폼은 별도 payment form으로 구분한다"],"prompt_phrases":["기본 배지가 있는 payment method card를 선택 가능하게 만들어줘"]},{"id":"address-card","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"주소 카드","aliases":["address card","배송지 카드","address selector"]},"en":{"name":"Address card","aliases":["Shipping address card","Address selector"]},"one_liner":"배송지나 청구지 주소를 카드 형태로 표시하고 선택하는 UI.","description":"수령인, 주소, 전화번호, 기본 주소 배지, 편집 행동을 함께 보여준다.","visual_anatomy":["recipient","address lines","default badge","selected state","edit action"],"when_to_use":["여러 배송지나 청구지 중 하나를 고를 때"],"anti_use":["주소를 새로 입력하는 폼은 address form으로 분리한다"],"prompt_phrases":["기본 배송지 배지가 있는 address card를 만들어줘"]},{"id":"order-status","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"주문 상태","aliases":["order status","배송 상태","주문 진행상태"]},"en":{"name":"Order status","aliases":["Delivery status","Fulfillment status"]},"one_liner":"주문 접수, 결제, 배송, 완료 같은 진행 상태를 표시하는 UI.","description":"현재 주문이 어디까지 진행됐는지와 예상 도착일, 다음 행동을 알려준다.","visual_anatomy":["status label","progress steps","timestamp","delivery estimate"],"when_to_use":["구매 후 주문이나 배송 진행을 추적해야 할 때"],"anti_use":["결제 전 단계 안내는 checkout step이 더 정확하다"],"prompt_phrases":["주문 접수 배송중 완료 order status를 보여줘"]},{"id":"calendar-event-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"캘린더 이벤트 카드","aliases":["calendar event card","일정 카드","이벤트 카드"]},"en":{"name":"Calendar event card","aliases":["Event card","Schedule card"]},"one_liner":"일정 하나의 제목, 시간, 장소, 참석 상태를 카드처럼 보여주는 UI.","description":"캘린더나 일정 목록에서 이벤트를 빠르게 확인하고 선택하게 한다.","visual_anatomy":["event title","time range","location","attendee status","color marker"],"when_to_use":["일정 목록이나 캘린더 상세에서 이벤트 단위를 보여줄 때"],"anti_use":["월/주 전체 배치는 calendar view가 더 정확하다"],"prompt_phrases":["시간 장소 참석자가 있는 calendar event card를 만들어줘"]},{"id":"kanban-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"칸반 카드","aliases":["kanban card","보드 카드","작업 카드"]},"en":{"name":"Kanban card","aliases":["Board card","Task card"]},"one_liner":"칸반 보드의 한 작업을 제목, 라벨, 담당자, 상태로 보여주는 카드.","description":"보드 컬럼 안에서 드래그하거나 열어볼 수 있는 작업 단위다.","visual_anatomy":["task title","labels","assignee avatar","metadata","drag affordance"],"when_to_use":["작업 보드에서 항목 하나를 표현할 때"],"anti_use":["보드 전체 구조는 kanban이나 board column으로 부른다"],"prompt_phrases":["라벨과 담당자 아바타가 있는 kanban card를 넣어줘"]},{"id":"board-column","status":"draft","category":"structure","group":"structure-navigation","ko":{"name":"보드 컬럼","aliases":["board column","칸반 컬럼","lane"]},"en":{"name":"Board column","aliases":["Kanban column","Board lane"]},"one_liner":"칸반 보드에서 같은 상태의 카드를 세로로 묶는 열.","description":"할 일, 진행 중, 완료 같은 상태를 기준으로 카드 묶음을 보여준다.","visual_anatomy":["column header","item count","card stack","add card action"],"when_to_use":["작업 상태별로 카드를 이동시키는 보드 화면에서"],"anti_use":["단순 목록 그룹은 grouped list가 더 자연스럽다"],"prompt_phrases":["할 일 진행 중 완료 board column을 만들어줘"]},{"id":"empty-search-result","status":"draft","category":"feedback","group":"feedback-empty-error","ko":{"name":"검색 결과 없음","aliases":["empty search result","no results","검색 빈 상태"]},"en":{"name":"Empty search result","aliases":["No results state","Empty results"]},"one_liner":"검색어에 맞는 결과가 없을 때 다음 행동을 안내하는 빈 상태.","description":"검색어 확인, 필터 해제, 새 항목 생성 같은 복구 행동을 제공한다.","visual_anatomy":["empty icon","query echo","suggestion text","clear filters action"],"when_to_use":["검색이나 필터 결과가 0개일 때"],"anti_use":["아직 데이터가 전혀 없는 상태는 empty state와 구분한다"],"prompt_phrases":["검색어와 필터 초기화 버튼이 있는 empty search result를 보여줘"]},{"id":"onboarding-checklist","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"온보딩 체크리스트","aliases":["onboarding checklist","시작 체크리스트","setup checklist"]},"en":{"name":"Onboarding checklist","aliases":["Setup checklist","Getting started checklist"]},"one_liner":"사용자가 시작에 필요한 여러 작업을 순서대로 완료하게 돕는 체크리스트.","description":"계정 설정, 초대, 첫 프로젝트 생성 같은 초기 행동을 진행률과 함께 보여준다.","visual_anatomy":["checklist rows","completed check","progress count","next action"],"when_to_use":["신규 사용자가 초기 설정을 마쳐야 제품 가치를 볼 수 있을 때"],"anti_use":["단순 도움말 링크 목록은 help center card가 더 적합하다"],"prompt_phrases":["3단계 온보딩 체크리스트와 진행률을 넣어줘"]},{"id":"setup-progress","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"설정 진행률","aliases":["setup progress","설정 완료도","setup completion"]},"en":{"name":"Setup progress","aliases":["Setup completion","Configuration progress"]},"one_liner":"제품 설정이나 계정 준비가 몇 퍼센트 완료됐는지 보여주는 상태.","description":"남은 설정 항목과 완료율을 보여줘 다음 행동을 유도한다.","visual_anatomy":["progress meter","completed count","remaining task","continue action"],"when_to_use":["초기 설정이나 연동 설정이 여러 단계로 나뉠 때"],"anti_use":["일회성 로딩 진행률에는 progress bar가 더 정확하다"],"prompt_phrases":["설정 완료도 60% setup progress를 보여줘"]},{"id":"help-center-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"도움말 센터 카드","aliases":["help center card","도움말 카드","support card"]},"en":{"name":"Help center card","aliases":["Support card","Help article card"]},"one_liner":"도움말 문서나 지원 주제를 카드로 안내하는 UI.","description":"제목, 설명, 카테고리, 이동 행동을 통해 사용자를 관련 도움말로 보낸다.","visual_anatomy":["help icon","title","description","category","link action"],"when_to_use":["설정이나 빈 상태에서 사용자가 도움말로 이동해야 할 때"],"anti_use":["질문과 답을 바로 펼치려면 FAQ list가 더 적합하다"],"prompt_phrases":["결제 도움말로 이동하는 help center card를 넣어줘"]},{"id":"faq-list","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"FAQ 목록","aliases":["faq list","자주 묻는 질문","질문 목록"]},"en":{"name":"FAQ list","aliases":["Frequently asked questions list","Q&A list"]},"one_liner":"자주 묻는 질문을 접고 펼칠 수 있는 질문/답변 목록.","description":"사용자가 도움말 페이지 안에서 짧은 답을 빠르게 확인하게 한다.","visual_anatomy":["question row","expand icon","answer panel","grouped topics"],"when_to_use":["반복 질문에 대한 짧은 답을 페이지 안에서 제공할 때"],"anti_use":["긴 문서는 help article이나 documentation page로 분리한다"],"prompt_phrases":["질문을 누르면 답이 펼쳐지는 FAQ list를 만들어줘"]},{"id":"announcement-banner","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"공지 배너","aliases":["announcement banner","공지사항 배너","notice banner"]},"en":{"name":"Announcement banner","aliases":["Notice banner","Announcement bar"]},"one_liner":"제품 공지, 변경사항, 이벤트를 눈에 띄게 알리는 배너.","description":"중요한 안내를 페이지 상단이나 섹션 상단에 배치하고 자세히 보기 행동을 제공한다.","visual_anatomy":["announcement text","icon","link action","dismiss action"],"when_to_use":["사용자가 알아야 하는 제품 공지나 일시적 안내가 있을 때"],"anti_use":["사용자 작업 실패나 오류에는 error toast/alert가 더 정확하다"],"prompt_phrases":["상단에 닫을 수 있는 announcement banner를 넣어줘"]},{"id":"release-note-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"릴리즈 노트 카드","aliases":["release note card","업데이트 카드","변경사항 카드"]},"en":{"name":"Release note card","aliases":["Update card","Changelog card"]},"one_liner":"제품 업데이트 내용을 버전, 날짜, 주요 변경과 함께 보여주는 카드.","description":"변경 이력이나 새 기능 안내에서 항목 하나를 구조적으로 보여준다.","visual_anatomy":["version label","date","change summary","tags","read more action"],"when_to_use":["제품 업데이트나 changelog 항목을 카드로 나열할 때"],"anti_use":["감사/보안 로그는 audit log가 더 엄격하다"],"prompt_phrases":["버전 날짜 변경 요약이 있는 release note card를 만들어줘"],"related":[{"id":"docs-changelog-page","relation":"use-with","note":"release-note-card는 항목 하나의 카드 단위이고, docs-changelog-page는 그 카드를 날짜별로 그룹핑하고 카테고리 필터/pagination을 더한 페이지 전체 구성이다."}]},{"id":"docs-changelog-page","status":"draft","category":"data-display","group":"data-display-misc","kind":"block","ko":{"name":"체인지로그 페이지","aliases":["changelog page","릴리즈 노트 페이지","업데이트 히스토리 페이지"]},"en":{"name":"Changelog page","aliases":["Release notes page","Update history page"]},"one_liner":"날짜별로 묶인 릴리즈 항목을 카테고리 필터와 함께 나열하는 changelog 전용 페이지.","description":"release-note-card 단위 항목들을 날짜 헤더 아래 그룹핑하고, 상단 카테고리 필터 chip과 하단 more-보기 페이지네이션으로 긴 변경 이력을 탐색 가능하게 만든다.","visual_anatomy":["date header groups","release note cards per group","category filter chips","search field","show-more pagination"],"when_to_use":["제품의 전체 변경 이력을 날짜/카테고리별로 탐색 가능한 한 페이지로 제공해야 할 때"],"anti_use":["항목이 몇 개뿐이면 release-note-card 목록만으로 충분하고 별도 페이지 레이아웃은 과하다"],"prompt_phrases":["날짜별로 묶이고 카테고리 필터가 있는 changelog 페이지를 만들어줘","릴리즈 노트를 최신순으로 나열하고 더보기 버튼을 넣어줘"],"related":[{"id":"release-note-card","relation":"use-with","note":"docs-changelog-page는 release-note-card를 날짜 그룹으로 배치하는 페이지 레이아웃이다."}]},{"id":"profile-card","status":"draft","category":"data-display","group":"data-display-misc","ko":{"name":"프로필 카드","aliases":["profile card","사용자 카드","person card"]},"en":{"name":"Profile card","aliases":["User card","Person card"]},"one_liner":"사용자 아바타, 이름, 역할, 연락 행동을 묶은 카드.","description":"팀, 작성자, 고객, 담당자 정보를 카드 형태로 보여준다.","visual_anatomy":["avatar","name","role","metadata","contact action"],"when_to_use":["사람 정보를 눈에 띄는 카드로 보여줘야 할 때"],"anti_use":["테이블 행 안의 짧은 사용자 정보는 avatar와 text만으로 충분하다"],"prompt_phrases":["아바타 이름 역할 버튼이 있는 profile card를 만들어줘"]},{"id":"team-member-row","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"팀원 행","aliases":["team member row","멤버 행","user row"]},"en":{"name":"Team member row","aliases":["Member row","User row"]},"one_liner":"팀원 한 명의 아바타, 이름, 이메일, 역할, 상태를 한 줄로 보여주는 행.","description":"멤버 관리 화면에서 권한 변경, 초대 상태, 제거 행동을 함께 제공한다.","visual_anatomy":["avatar","name and email","role selector","status","row actions"],"when_to_use":["팀 관리 목록에서 사용자별 정보를 조작해야 할 때"],"anti_use":["사람을 홍보하거나 소개하는 영역은 profile card가 더 적합하다"],"prompt_phrases":["역할 셀렉트와 초대 상태가 있는 team member row를 만들어줘"]},{"id":"role-badge","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"역할 배지","aliases":["role badge","권한 배지","member role badge"]},"en":{"name":"Role badge","aliases":["Permission badge","Member role badge"]},"one_liner":"관리자, 편집자, 뷰어 같은 사용자 역할을 작은 배지로 표시하는 UI.","description":"팀원 목록, 댓글, 프로필에서 사용자 권한 수준을 빠르게 구분한다.","visual_anatomy":["role label","badge shape","permission tone","optional icon"],"when_to_use":["역할이 화면 이해나 조작 권한에 중요할 때"],"anti_use":["상태 진행을 표현하려면 status chip이 더 일반적이다"],"prompt_phrases":["관리자 편집자 뷰어 role badge를 표시해줘"]},{"id":"api-key-field","status":"draft","category":"input","group":"input-text","ko":{"name":"API 키 필드","aliases":["api key field","secret key field","키 표시 필드"]},"en":{"name":"API key field","aliases":["Secret key field","Token field"]},"one_liner":"민감한 API 키를 숨김 표시하고 복사하거나 재생성할 수 있는 필드.","description":"개발자 설정에서 키 값을 노출하지 않으면서 필요한 행동을 제공한다.","visual_anatomy":["masked value","reveal toggle","copy action","rotate action"],"when_to_use":["토큰이나 secret을 사용자가 확인/복사해야 할 때"],"anti_use":["일반 텍스트 값은 copy field가 더 단순하다"],"prompt_phrases":["숨김 표시와 복사 버튼이 있는 API key field를 넣어줘"]},{"id":"webhook-endpoint-row","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"웹훅 엔드포인트 행","aliases":["webhook endpoint row","webhook row","엔드포인트 행"]},"en":{"name":"Webhook endpoint row","aliases":["Webhook row","Endpoint row"]},"one_liner":"웹훅 URL, 이벤트, 상태, 마지막 전송 결과를 한 줄로 보여주는 행.","description":"개발자 설정에서 웹훅 연결 상태와 테스트/비활성화 행동을 관리한다.","visual_anatomy":["endpoint url","event tags","status","last delivery","actions"],"when_to_use":["여러 웹훅 엔드포인트를 관리하는 설정 화면에서"],"anti_use":["단일 URL 입력만 필요하면 text field나 copy field로 충분하다"],"prompt_phrases":["이벤트 태그와 테스트 버튼이 있는 webhook endpoint row를 만들어줘"],"related":[{"id":"webhook-delivery-log-with-retry","relation":"compare","note":"webhook endpoint row는 엔드포인트 설정 한 줄이고, webhook delivery log with retry는 그 엔드포인트의 개별 전송 시도 이력을 상태 코드와 함께 상세히 보여주는 별도 화면이다"}]},{"id":"webhook-delivery-log-with-retry","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"웹훅 전송 로그","aliases":["webhook delivery log","웹훅 재전송 로그","전송 시도 로그"]},"en":{"name":"Webhook delivery log with retry","aliases":["Webhook delivery attempts","Webhook retry log"]},"one_liner":"웹훅 엔드포인트 한 곳의 개별 전송 시도를 HTTP 상태, 응답 시간, 페이로드와 함께 나열하고 실패 건을 수동 재전송하는 로그.","description":"webhook endpoint row가 엔드포인트 설정 한 줄이라면, 이 로그는 그 엔드포인트의 전송 이력을 상태 코드 중심으로 상세히 보여주는 별도 화면이다.","visual_anatomy":["delivery attempt row with timestamp","HTTP status","response time","retry button","payload preview on row expand","status and event type filter"],"when_to_use":["특정 웹훅 엔드포인트의 전송 성공과 실패 이력을 확인하고 실패 건을 수동으로 재전송해야 할 때"],"anti_use":["엔드포인트 자체의 설정과 상태만 보여주면 되면 webhook endpoint row로 충분하다"],"prompt_phrases":["HTTP 상태와 응답 시간이 있는 webhook delivery log를 만들어줘","실패한 전송 시도를 수동으로 재전송할 수 있는 웹훅 로그를 넣어줘"],"related":[{"id":"webhook-endpoint-row","relation":"compare","note":"webhook endpoint row는 엔드포인트 설정 한 줄이고, 이 로그는 그 엔드포인트의 개별 전송 시도 이력을 상태 코드와 함께 상세히 보여주는 별도 화면이다"}]},{"id":"integration-card","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"연동 카드","aliases":["integration card","앱 연동 카드","integration tile"]},"en":{"name":"Integration card","aliases":["App integration card","Integration tile"]},"one_liner":"외부 서비스 연동의 로고, 이름, 설명, 연결 행동을 보여주는 카드.","description":"Slack, Notion, GitHub 같은 연동을 탐색하고 연결 상태를 확인하게 한다.","visual_anatomy":["service logo","integration name","description","connect action","status"],"when_to_use":["여러 외부 연동 옵션을 카드로 보여줄 때"],"anti_use":["이미 연결된 인스턴스 하나는 connection card가 더 구체적이다"],"prompt_phrases":["Slack 로고와 연결 버튼이 있는 integration card를 만들어줘"]},{"id":"connection-card","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"연결 카드","aliases":["connection card","연결된 계정 카드","connected account card"]},"en":{"name":"Connection card","aliases":["Connected account card","Account connection card"]},"one_liner":"이미 연결된 외부 계정이나 서비스 인스턴스의 상태를 보여주는 카드.","description":"계정명, 연결 상태, 동기화 시각, 연결 해제 행동을 제공한다.","visual_anatomy":["service identity","connected account","sync status","disconnect action"],"when_to_use":["연결된 외부 계정의 상태와 관리 행동이 필요할 때"],"anti_use":["연동 후보 목록은 integration card가 더 적합하다"],"prompt_phrases":["연결됨 상태와 해제 버튼이 있는 connection card를 넣어줘"]},{"id":"billing-summary","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"결제 요약","aliases":["billing summary","청구 요약","billing overview"]},"en":{"name":"Billing summary","aliases":["Billing overview","Subscription summary"]},"one_liner":"현재 플랜, 다음 청구일, 결제 금액, 결제수단을 요약하는 영역.","description":"계정 설정에서 구독과 청구 상태를 한눈에 확인하게 한다.","visual_anatomy":["current plan","next invoice date","amount","payment method","manage action"],"when_to_use":["구독 설정이나 계정 결제 화면의 상단 요약에서"],"anti_use":["장바구니 결제 전 합계는 cart summary가 더 정확하다"],"prompt_phrases":["플랜 다음 청구일 결제수단이 있는 billing summary를 만들어줘"]},{"id":"invoice-row","status":"draft","category":"data-display","group":"data-commerce-billing","ko":{"name":"인보이스 행","aliases":["invoice row","청구서 행","billing row"]},"en":{"name":"Invoice row","aliases":["Billing row","Invoice list row"]},"one_liner":"청구서의 날짜, 금액, 상태, 다운로드 행동을 한 줄로 보여주는 행.","description":"결제 내역 목록에서 각 인보이스를 확인하고 PDF를 내려받게 한다.","visual_anatomy":["invoice date","amount","status","invoice number","download action"],"when_to_use":["청구 내역이나 영수증 목록을 보여줄 때"],"anti_use":["결제 예정 요약은 billing summary가 더 적합하다"],"prompt_phrases":["상태 배지와 PDF 다운로드가 있는 invoice row를 넣어줘"]},{"id":"version-history-list","status":"draft","category":"data-display","group":"data-timeline-history","ko":{"name":"버전 히스토리 목록","aliases":["version history list","버전 기록","revision list"]},"en":{"name":"Version history list","aliases":["Revision list","Version history"]},"one_liner":"문서나 디자인의 저장 버전을 시간순으로 보여주는 목록.","description":"버전 시간, 작성자, 변경 요약, 복원 행동을 함께 제공한다.","visual_anatomy":["version timestamp","author","change summary","restore action"],"when_to_use":["문서","디자인","설정의 이전 버전을 확인하거나 복원해야 할 때"],"anti_use":["보안 추적 목적이면 audit log가 더 엄격하다"],"prompt_phrases":["복원 버튼이 있는 version history list를 만들어줘"]},{"id":"mobile-filter-bottom-sheet","status":"draft","category":"structure","group":"structure-mobile","ko":{"name":"모바일 필터 바텀 시트","aliases":["필터 시트","모바일 필터 패널","filter bottom sheet"]},"en":{"name":"Mobile filter bottom sheet","aliases":["Filter sheet","Filter bottom sheet"]},"one_liner":"모바일 목록 화면에서 필터 옵션을 아래에서 올라오는 시트로 고르는 패턴.","description":"검색 결과, 상품 목록, 지도 목록처럼 필터 조건이 많지만 화면 공간이 좁을 때 사용한다.","visual_anatomy":["bottom sheet container","drag handle","filter groups","apply button","clear filters action"],"when_to_use":["모바일에서 필터 조건이 여러 그룹으로 나뉠 때","목록을 보면서 조건을 조정해야 할 때"],"anti_use":["필터가 1-2개뿐이면 filter chip이나 segmented tabs가 더 빠르다"],"prompt_phrases":["상품 목록 아래에서 올라오는 mobile filter bottom sheet를 만들어줘"]},{"id":"inline-date-range-chip","status":"draft","category":"selection","group":"selection-options","ko":{"name":"인라인 날짜 범위 칩","aliases":["날짜 필터 칩","기간 칩","date range chip"]},"en":{"name":"Inline date range chip","aliases":["Date range filter chip","Date chip"]},"one_liner":"선택된 기간을 작은 칩으로 표시하고 눌러 수정할 수 있는 필터 요소.","description":"대시보드나 리스트 상단에서 현재 적용 중인 기간 조건을 compact하게 보여준다.","visual_anatomy":["pill container","calendar icon","date range label","remove or edit affordance"],"when_to_use":["현재 적용된 날짜 필터를 계속 보여줘야 할 때","필터 바 공간을 아껴야 할 때"],"anti_use":["날짜를 처음 입력하는 주 흐름에는 date range picker가 더 명확하다"],"prompt_phrases":["지난 7일 기간을 보여주는 inline date range chip을 넣어줘"]},{"id":"floating-search-button","status":"draft","category":"action","group":"action-buttons","ko":{"name":"플로팅 검색 버튼","aliases":["떠 있는 검색 버튼","search FAB","floating search"]},"en":{"name":"Floating search button","aliases":["Search FAB","Floating search action"]},"one_liner":"스크롤 중에도 검색 화면을 열 수 있게 떠 있는 검색 행동 버튼.","description":"지도, 피드, 긴 목록처럼 상단 검색창이 화면 밖으로 사라지는 모바일 화면에서 사용한다.","visual_anatomy":["floating circular button","search icon","elevated surface","bottom or corner placement"],"when_to_use":["검색이 핵심 행동이지만 상단 공간을 계속 차지하면 방해될 때"],"anti_use":["검색이 항상 핵심이면 mobile search header가 더 직접적이다"],"prompt_phrases":["목록 오른쪽 아래에 floating search button을 넣어줘"]},{"id":"avatar-group","status":"draft","category":"data-display","group":"data-people-integrations","ko":{"name":"아바타 그룹","aliases":["겹친 아바타","사용자 묶음","avatar stack"]},"en":{"name":"Avatar group","aliases":["Avatar stack","Facepile"]},"one_liner":"여러 사용자의 아바타를 겹치거나 나란히 보여주는 사람 묶음 표시.","description":"공유 문서, 팀 공간, 댓글 참여자처럼 여러 사람의 존재를 compact하게 보여준다.","visual_anatomy":["overlapping avatars","overflow count","optional tooltip","participant order"],"when_to_use":["참여자나 담당자가 여러 명일 때","공간을 아끼며 사람 수를 보여줘야 할 때"],"anti_use":["각 사람의 역할과 상태를 조작해야 하면 team member row가 더 적합하다"],"prompt_phrases":["공유 중인 사람들을 avatar group으로 보여줘"]},{"id":"info-label","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"정보 라벨","aliases":["설명 아이콘 라벨","info label","도움말 라벨"]},"en":{"name":"Info label","aliases":["Label with info","Help label"]},"one_liner":"라벨 옆에 작은 정보 아이콘을 붙여 보조 설명을 열 수 있게 하는 요소.","description":"폼 필드나 설정 항목의 뜻을 짧게 보충하되 화면을 복잡하게 만들고 싶지 않을 때 사용한다.","visual_anatomy":["label text","info icon","hover or focus popover","short explanation"],"when_to_use":["전문 용어나 설정 의미를 짧게 설명해야 할 때"],"anti_use":["항상 읽어야 하는 중요한 설명은 helper text나 inline alert로 노출한다"],"prompt_phrases":["설정 이름 옆에 info label을 넣어 설명을 보여줘"]},{"id":"message-bar","status":"draft","category":"feedback","group":"feedback-alerts-toasts","ko":{"name":"메시지 바","aliases":["message bar","상태 메시지 바","제품 알림 바"]},"en":{"name":"Message bar","aliases":["MessageBar","Status message bar"]},"one_liner":"화면 상단이나 섹션 안에서 상태, 경고, 성공, 정보 메시지를 가로 바 형태로 보여주는 요소.","description":"토스트보다 오래 남고, alert보다 제품 UI 안에 자연스럽게 붙는 안내 메시지다.","visual_anatomy":["tone icon","message text","optional action","dismiss button","horizontal container"],"when_to_use":["사용자가 읽고 조치해야 하는 상태 메시지를 화면 안에 유지할 때"],"anti_use":["짧은 저장 완료 피드백은 toast나 snackbar가 더 가볍다"],"prompt_phrases":["동기화 실패를 알려주는 dismissible message bar를 상단에 넣어줘"]},{"id":"spin-button","status":"draft","category":"input","group":"input-text","ko":{"name":"스핀 버튼 입력","aliases":["증감 입력","spin button","stepper input"]},"en":{"name":"Spin button","aliases":["Spinbutton","Stepper input"]},"one_liner":"숫자 입력칸에 위/아래 또는 +/- 버튼을 붙여 값을 한 단계씩 조절하는 입력.","description":"직접 숫자를 입력하거나 버튼으로 증감할 수 있어 정확성과 빠른 조절을 함께 제공한다.","visual_anatomy":["numeric input","increment button","decrement button","current value","optional bounds"],"when_to_use":["수량","인원","반복 횟수처럼 작은 정수 값을 조절할 때"],"anti_use":["상품 수량만 compact하게 조절하면 quantity stepper가 더 자연스럽다"],"prompt_phrases":["인원 수를 입력하는 spin button을 넣어줘"]},{"id":"scope-bar","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"스코프 바","aliases":["검색 범위 바","scope tabs","scope bar"]},"en":{"name":"Scope bar","aliases":["Search scope bar","Scope tabs"]},"one_liner":"검색이나 필터 결과의 범위를 상단에서 빠르게 전환하는 선택 막대.","description":"전체, 파일, 사람, 메시지처럼 검색 범주를 좁히는 iOS/macOS 계열 탐색 패턴이다.","visual_anatomy":["segmented scope options","selected scope","result context","compact horizontal bar"],"when_to_use":["검색 결과를 몇 개의 명확한 범주로 빠르게 전환해야 할 때"],"anti_use":["일반 화면 콘텐츠 전환에는 tabs나 segmented control이 더 보편적이다"],"prompt_phrases":["검색 결과 위에 전체 파일 사람 scope bar를 넣어줘"]},{"id":"structured-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"구조화 목록","aliases":["structured list","행 목록","구조 목록"]},"en":{"name":"Structured list","aliases":["StructuredList","Property list"]},"one_liner":"여러 행을 같은 열 구조로 정리하지만 완전한 데이터 테이블보다 가벼운 목록.","description":"제목, 설명, 상태, 보조 메타데이터를 반복 행으로 보여주는 설정/요약 화면에 적합하다.","visual_anatomy":["row container","aligned columns","primary text","secondary metadata","optional action"],"when_to_use":["테이블만큼 복잡하지 않은 구조화 정보를 반복해서 보여줄 때"],"anti_use":["정렬","필터","열 조작이 중요하면 table이나 data grid를 쓴다"],"prompt_phrases":["설정 항목을 structured list로 정리해줘"]},{"id":"inline-loading","status":"draft","category":"feedback","group":"feedback-loading-progress","ko":{"name":"인라인 로딩","aliases":["inline loading","작은 로딩 상태","행 안 로딩"]},"en":{"name":"Inline loading","aliases":["Inline loading state","Inline spinner"]},"one_liner":"버튼, 행, 작은 영역 안에서 처리 중임을 짧은 텍스트와 스피너로 보여주는 상태.","description":"전체 화면 로딩이 아니라 특정 작업 하나가 진행 중임을 그 자리에서 알려준다.","visual_anatomy":["small spinner","status text","inline placement","optional success state"],"when_to_use":["저장","업로드","동기화처럼 작은 단위 작업의 진행 상태를 보여줄 때"],"anti_use":["페이지 전체 데이터를 불러오면 skeleton이나 loading state가 더 적합하다"],"prompt_phrases":["저장 중 문구가 붙은 inline loading을 버튼 옆에 보여줘"]},{"id":"tag-picker","status":"draft","category":"input","group":"input-pickers","ko":{"name":"태그 선택기","aliases":["tag picker","태그 고르기","칩 선택 입력"]},"en":{"name":"Tag picker","aliases":["Tag picker input","Tag selector"]},"one_liner":"검색하거나 입력해서 여러 태그를 선택하고 칩으로 쌓는 입력 패턴.","description":"프로젝트 라벨, 관심사, 담당 역할처럼 여러 개의 짧은 분류값을 고르게 한다.","visual_anatomy":["input field","selected tag chips","suggestion list","remove icons"],"when_to_use":["태그 후보가 많고 여러 개를 선택해야 할 때"],"anti_use":["자유 텍스트 태그 생성만 필요하면 tag input이 더 단순하다"],"prompt_phrases":["라벨을 검색해서 여러 개 고르는 tag picker를 넣어줘"]},{"id":"disclosure-group","status":"draft","category":"structure","group":"structure-sections","ko":{"name":"디스클로저 그룹","aliases":["펼침 그룹","disclosure group","접힘 섹션"]},"en":{"name":"Disclosure group","aliases":["Disclosure group","Expandable group"]},"one_liner":"섹션 제목을 눌러 하위 내용을 접거나 펼치는 구조 패턴.","description":"설정, FAQ, 세부 옵션처럼 사용자가 필요할 때만 볼 정보를 단계적으로 드러낸다.","visual_anatomy":["section header","chevron","expanded content","collapsed state"],"when_to_use":["한 화면에 정보가 많아 점진적으로 보여줘야 할 때"],"anti_use":["질문/답변 목록 자체는 accordion이나 FAQ list가 더 정확하다"],"prompt_phrases":["고급 설정을 접고 펼치는 disclosure group으로 만들어줘"]},{"id":"contained-list","status":"draft","category":"data-display","group":"data-tables-lists","ko":{"name":"컨테인드 리스트","aliases":["contained list","박스형 목록","bordered list"]},"en":{"name":"Contained list","aliases":["ContainedList","Boxed list"]},"one_liner":"목록 전체를 하나의 경계 박스 안에 넣어 행들을 묶어 보여주는 리스트.","description":"카드보다 반복성이 강하고, 일반 list보다 그룹 경계가 명확해야 하는 설정/관리 화면에 쓴다.","visual_anatomy":["outer container","list rows","row dividers","optional row actions"],"when_to_use":["관련 항목 여러 개를 하나의 그룹으로 묶어 보여줄 때"],"anti_use":["각 항목을 독립적으로 강조해야 하면 card list가 더 낫다"],"prompt_phrases":["알림 설정 항목을 contained list로 묶어줘"]},{"id":"email-verification-banner","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"이메일 인증 배너","aliases":["메일 인증 안내","이메일 확인 배너"]},"en":{"name":"Email verification banner","aliases":["Verify email banner","Email confirmation notice"]},"one_liner":"아직 이메일을 인증하지 않은 사용자에게 상단에서 인증을 요청하는 배너.","description":"가입 직후나 계정 설정 화면에서 이메일 인증이 필요한 상태를 계속 알려주고 재전송 행동을 제공한다.","visual_anatomy":["inline banner","verification message","resend action","dismiss optional"],"when_to_use":["이메일 인증 전에도 일부 화면을 사용할 수 있지만 인증 완료를 유도해야 할 때"],"anti_use":["인증 없이는 진행할 수 없는 차단 상황이면 verification-required-screen이 더 명확하다"],"prompt_phrases":["상단에 이메일 인증 배너를 넣고 인증 메일 재전송 버튼을 보여줘"]},{"id":"verification-required-screen","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"인증 필요 화면","aliases":["이메일 인증 필요","계정 인증 필요 화면"]},"en":{"name":"Verification required screen","aliases":["Email verification required","Account verification gate"]},"one_liner":"이메일이나 계정 인증을 완료해야 다음 화면으로 갈 수 있음을 보여주는 차단 화면.","description":"보안이나 신뢰가 필요한 기능 앞에서 사용자가 무엇을 인증해야 하는지와 다음 행동을 분명히 보여준다.","visual_anatomy":["centered gate panel","verification icon","explanation text","primary verify action","secondary resend link"],"when_to_use":["인증이 완료되기 전에는 핵심 기능을 사용할 수 없을 때"],"anti_use":["단순 알림이면 email-verification-banner가 덜 방해된다"],"prompt_phrases":["이메일 인증 전에는 verification required screen을 보여주고 인증 메일 다시 보내기 버튼을 넣어줘"]},{"id":"magic-link-sent-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"매직 링크 전송 상태","aliases":["로그인 링크 전송됨","이메일 로그인 대기 화면"]},"en":{"name":"Magic link sent state","aliases":["Sign-in link sent","Email link sent state"]},"one_liner":"로그인 링크를 이메일로 보낸 뒤 사용자가 메일함을 확인하도록 안내하는 상태 화면.","description":"비밀번호 없는 로그인 흐름에서 전송된 이메일 주소, 재전송, 이메일 변경 행동을 함께 보여준다.","visual_anatomy":["mail icon","sent address","check inbox message","resend timer","change email link"],"when_to_use":["매직 링크나 이메일 로그인 링크를 보낸 뒤 사용자가 앱 밖에서 확인해야 할 때"],"anti_use":["앱 안에서 코드를 바로 입력받는 흐름이면 otp-code-input이 더 적합하다"],"prompt_phrases":["로그인 링크를 보낸 뒤 magic link sent state를 보여주고 30초 후 재전송 버튼을 활성화해줘"]},{"id":"passkey-enrollment-prompt","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"패스키 등록 유도","aliases":["패스키 설정 안내","passkey 등록 프롬프트"]},"en":{"name":"Passkey enrollment prompt","aliases":["Set up passkey prompt","Passkey setup prompt"]},"one_liner":"사용자가 비밀번호 대신 패스키를 등록하도록 유도하는 보안 설정 프롬프트.","description":"로그인 이후나 보안 설정 화면에서 더 빠르고 안전한 로그인 방법을 제안한다.","visual_anatomy":["security icon","passkey benefit text","set up action","skip action"],"when_to_use":["계정 보안을 강화하거나 비밀번호 없는 로그인을 도입할 때"],"anti_use":["이미 인증이 필요한 순간에는 biometric-prompt나 passkey-sign-in-sheet가 더 직접적이다"],"prompt_phrases":["로그인 후 패스키를 등록하라는 passkey enrollment prompt를 보여줘"]},{"id":"passkey-sign-in-sheet","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"패스키 로그인 시트","aliases":["패스키 인증 시트","passkey 로그인"]},"en":{"name":"Passkey sign-in sheet","aliases":["Passkey authentication sheet","Passkey login sheet"]},"one_liner":"패스키로 로그인할 계정과 인증 행동을 보여주는 로그인 시트.","description":"사용자가 저장된 패스키를 선택하거나 기기 인증을 진행하는 순간에 쓰는 집중형 인증 UI다.","visual_anatomy":["bottom or modal sheet","account identity","passkey icon","continue action","fallback link"],"when_to_use":["패스키 인증을 시작했지만 계정 선택이나 fallback이 필요할 때"],"anti_use":["패스키 등록을 제안하는 마케팅성 안내에는 passkey-enrollment-prompt가 낫다"],"prompt_phrases":["패스키로 로그인하는 passkey sign-in sheet를 만들고 다른 방법으로 로그인 링크를 넣어줘"]},{"id":"mfa-enrollment-card","status":"draft","category":"data-display","group":"data-account-support","ko":{"name":"2단계 인증 등록 카드","aliases":["MFA 설정 카드","이중 인증 등록"]},"en":{"name":"MFA enrollment card","aliases":["Two-factor setup card","2FA enrollment card"]},"one_liner":"사용자가 2단계 인증을 설정하도록 보안 상태와 등록 행동을 보여주는 카드.","description":"보안 설정, 관리자 콘솔, 계정 점검 화면에서 아직 설정하지 않은 보호 수단을 안내한다.","visual_anatomy":["security method icon","setup status","benefit text","set up button"],"when_to_use":["선택형 보안 기능을 사용자가 직접 켜야 할 때"],"anti_use":["인증 코드를 입력하는 순간에는 otp-code-input을 쓴다"],"prompt_phrases":["보안 설정에 2단계 인증 등록 카드를 넣고 아직 설정 안 됨 상태를 보여줘"]},{"id":"recovery-code-panel","status":"draft","category":"data-display","group":"data-account-support","ko":{"name":"복구 코드 패널","aliases":["백업 코드 패널","recovery codes"]},"en":{"name":"Recovery code panel","aliases":["Backup code panel","Recovery codes list"]},"one_liner":"2단계 인증 복구 코드를 보여주고 저장 또는 복사하도록 하는 보안 패널.","description":"MFA 설정 직후 사용자가 계정 복구용 코드를 안전하게 보관하도록 돕는다.","visual_anatomy":["code list","masked or grouped codes","copy action","download action","warning text"],"when_to_use":["2단계 인증 설정 후 복구 수단을 사용자가 보관해야 할 때"],"anti_use":["짧은 일회용 인증번호 입력에는 otp-code-input을 쓴다"],"prompt_phrases":["2단계 인증 설정 후 recovery code panel을 보여주고 복사와 다운로드 버튼을 넣어줘"]},{"id":"recovery-code-warning","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"복구 코드 경고","aliases":["백업 코드 저장 경고","recovery code warning"]},"en":{"name":"Recovery code warning","aliases":["Backup code warning","Save recovery codes warning"]},"one_liner":"복구 코드를 저장하지 않으면 계정 복구가 어려울 수 있음을 강조하는 경고.","description":"사용자가 보안 설정을 완료하기 전에 중요한 백업 행동을 놓치지 않게 한다.","visual_anatomy":["warning callout","risk statement","confirm checkbox or action","continue button"],"when_to_use":["사용자가 복구 코드를 저장하지 않고 다음 단계로 넘어가려 할 때"],"anti_use":["일반 주의 문구는 warning-state나 inline alert가 충분하다"],"prompt_phrases":["복구 코드를 저장하지 않고 넘어가려 할 때 recovery code warning을 보여줘"]},{"id":"trusted-device-prompt","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"신뢰 기기 등록 프롬프트","aliases":["이 기기 기억하기","trusted device prompt"]},"en":{"name":"Trusted device prompt","aliases":["Remember this device prompt","Trust this device"]},"one_liner":"로그인 후 현재 기기를 신뢰할지 물어 다음 인증 빈도를 줄이는 프롬프트.","description":"사용자가 개인 기기에서 반복 인증을 줄일 수 있게 하되 공용 기기에서는 건너뛰도록 안내한다.","visual_anatomy":["device icon","trust explanation","trust action","not now action","safety note"],"when_to_use":["2단계 인증 이후 현재 기기를 기억할지 선택하게 할 때"],"anti_use":["단순 로그인 성공 알림에는 success-toast가 더 가볍다"],"prompt_phrases":["2단계 인증 후 이 기기를 신뢰할지 묻는 trusted device prompt를 보여줘"]},{"id":"device-approval-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"기기 승인 대기 상태","aliases":["새 기기 승인 대기","device approval"]},"en":{"name":"Device approval state","aliases":["New device approval state","Waiting for device approval"]},"one_liner":"새 기기 로그인이나 접근 요청이 다른 기기에서 승인되기를 기다리는 상태.","description":"사용자가 현재 화면에서 대기해야 하는 이유, 승인할 위치, 만료 시간을 알려준다.","visual_anatomy":["device illustration","waiting status","countdown or expiry","resend or cancel action"],"when_to_use":["보안상 다른 기기나 관리자 승인이 필요한 로그인 흐름에서"],"anti_use":["일반 로딩이면 loading-state를 쓰고 승인 주체가 없으면 pending-approval-state가 더 넓다"],"prompt_phrases":["새 기기 로그인 승인 대기 device approval state를 보여주고 만료 시간을 표시해줘"]},{"id":"access-request-panel","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"접근 요청 패널","aliases":["리소스 접근 요청","access request"]},"en":{"name":"Access request panel","aliases":["Request access panel","Resource access request"]},"one_liner":"접근 권한이 없는 리소스에서 관리자에게 권한을 요청하는 패널.","description":"사용자가 왜 막혔는지, 어떤 권한을 요청하는지, 누구에게 요청되는지 확인하게 한다.","visual_anatomy":["locked resource message","requested role","optional reason field","request access button"],"when_to_use":["문서","프로젝트","워크스페이스 접근 권한이 없지만 요청할 수 있을 때"],"anti_use":["권한 요청 자체가 불가능하면 locked-state가 더 적합하다"],"prompt_phrases":["접근 권한이 없을 때 사유 입력이 있는 access request panel을 보여줘"]},{"id":"access-pending-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"접근 승인 대기 상태","aliases":["권한 승인 대기","access pending"]},"en":{"name":"Access pending state","aliases":["Request pending state","Waiting for access approval"]},"one_liner":"접근 요청을 보낸 뒤 승인 전까지 현재 상태와 다음 가능 행동을 보여주는 화면.","description":"요청이 접수되었음을 확인시키고 승인자, 예상 처리, 요청 취소나 다시 알림 같은 행동을 제공한다.","visual_anatomy":["pending icon","request summary","approver hint","cancel or notify action"],"when_to_use":["권한 요청 후 즉시 접근할 수 없고 승인 처리를 기다려야 할 때"],"anti_use":["요청 전에는 access-request-panel이 맞고","기술적 지연은 loading-state가 맞다"],"prompt_phrases":["권한 요청 후 access pending state를 보여주고 승인자 정보를 표시해줘"]},{"id":"invite-acceptance-screen","status":"draft","category":"structure","group":"structure-auth-layouts","ko":{"name":"초대 수락 화면","aliases":["워크스페이스 초대 수락","invite acceptance"]},"en":{"name":"Invite acceptance screen","aliases":["Invitation acceptance screen","Join workspace screen"]},"one_liner":"초대 링크로 들어온 사용자가 초대 대상과 참여 행동을 확인하는 화면.","description":"초대한 조직, 역할, 이메일 주소, 수락/거절 행동을 한 화면에서 보여준다.","visual_anatomy":["workspace identity","inviter or role","invited email","accept action","decline action"],"when_to_use":["팀","워크스페이스","프로젝트 초대를 링크나 이메일로 처리할 때"],"anti_use":["이미 로그인한 사용자의 단순 팀 전환은 account-switcher가 더 적합하다"],"prompt_phrases":["워크스페이스 초대 링크를 열면 invite acceptance screen을 보여줘"]},{"id":"invite-expired-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"초대 만료 상태","aliases":["만료된 초대 링크","invite expired"]},"en":{"name":"Invite expired state","aliases":["Expired invitation state","Expired invite link"]},"one_liner":"초대 링크가 만료되었거나 사용할 수 없을 때 재요청 행동을 제공하는 상태 화면.","description":"사용자가 링크가 왜 실패했는지 이해하고 새 초대를 요청하거나 관리자에게 문의할 수 있게 한다.","visual_anatomy":["expired icon","invalid link message","request new invite action","contact support link"],"when_to_use":["초대 링크가 만료","취소","이미 사용됨 상태일 때"],"anti_use":["일반 링크 오류는 error-state나 retry-panel이 충분하다"],"prompt_phrases":["초대 링크가 만료되면 invite expired state와 새 초대 요청 버튼을 보여줘"]},{"id":"workspace-join-request","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"워크스페이스 참여 요청","aliases":["팀 참여 요청","join request"]},"en":{"name":"Workspace join request","aliases":["Team join request","Request to join workspace"]},"one_liner":"사용자가 조직이나 워크스페이스에 참여 요청을 보내는 UI.","description":"도메인 기반 조직 발견이나 제한된 워크스페이스에서 가입 사유와 요청 행동을 보여준다.","visual_anatomy":["workspace card","membership status","optional reason field","request to join button"],"when_to_use":["사용자가 바로 참여할 수 없고 관리자 승인이 필요한 워크스페이스일 때"],"anti_use":["초대 링크가 이미 있으면 invite-acceptance-screen이 더 직접적이다"],"prompt_phrases":["회사 도메인으로 찾은 워크스페이스에 참여 요청하는 workspace join request를 만들어줘"]},{"id":"welcome-choice-screen","status":"draft","category":"structure","group":"structure-auth-layouts","ko":{"name":"시작 선택 화면","aliases":["웰컴 선택 화면","시작 방식 선택"]},"en":{"name":"Welcome choice screen","aliases":["Start choice screen","Welcome option screen"]},"one_liner":"새 사용자가 템플릿 선택, 새로 만들기, 가져오기처럼 시작 방식을 고르는 첫 화면.","description":"빈 제품에 바로 떨어뜨리지 않고 사용자의 의도에 맞는 첫 경로를 선택하게 한다.","visual_anatomy":["welcome headline","option cards","recommended option","skip or later link"],"when_to_use":["처음 시작할 수 있는 경로가 여러 개이고 사용자의 목적을 먼저 알아야 할 때"],"anti_use":["단순 소개 슬라이드는 onboarding-pager가 더 적합하다"],"prompt_phrases":["첫 방문자에게 새로 만들기 가져오기 템플릿 선택이 있는 welcome choice screen을 보여줘"]},{"id":"import-data-choice","status":"draft","category":"selection","group":"selection-options","ko":{"name":"데이터 가져오기 선택","aliases":["가져오기 방식 선택","import choice"]},"en":{"name":"Import data choice","aliases":["Import method choice","Data import option picker"]},"one_liner":"사용자가 CSV, 직접 입력, 외부 서비스 연결 중 데이터 시작 방법을 고르는 선택 UI.","description":"온보딩이나 빈 상태에서 첫 데이터를 만드는 방법을 여러 경로로 제안한다.","visual_anatomy":["import option cards","method icons","effort hint","recommended badge","continue action"],"when_to_use":["제품 사용을 시작하려면 먼저 데이터나 계정을 연결해야 할 때"],"anti_use":["이미 연결된 서비스 상태는 connection-card가 더 적합하다"],"prompt_phrases":["처음 시작할 때 CSV 업로드 직접 입력 서비스 연결을 고르는 import data choice를 보여줘"]},{"id":"setup-blocker-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"설정 차단 상태","aliases":["설정 미완료 차단","setup blocker"]},"en":{"name":"Setup blocker state","aliases":["Setup required blocker","Configuration required state"]},"one_liner":"필수 설정이 끝나지 않아 현재 기능을 사용할 수 없음을 보여주는 차단 상태.","description":"사용자가 어떤 설정을 완료해야 막힌 기능이 열리는지와 바로 이동할 행동을 제공한다.","visual_anatomy":["blocked feature area","missing setup item","go to setup action","help link"],"when_to_use":["결제","연동","권한","초기 설정이 완료되어야 기능을 사용할 수 있을 때"],"anti_use":["진행률만 보여주면 setup-progress가 충분하고 오류 상황은 error-state가 맞다"],"prompt_phrases":["연동 설정 전에는 setup blocker state를 보여주고 설정으로 이동 버튼을 넣어줘"]},{"id":"reconnect-account-state","status":"draft","category":"feedback","group":"feedback-auth-security","ko":{"name":"계정 재연결 상태","aliases":["연동 만료 상태","reconnect account"]},"en":{"name":"Reconnect account state","aliases":["Account disconnected state","Reconnect integration state"]},"one_liner":"외부 계정 연결이 만료되거나 끊겼을 때 다시 연결하도록 안내하는 상태.","description":"연동 카드나 데이터 영역에서 동기화가 멈춘 이유와 재연결 행동을 명확히 보여준다.","visual_anatomy":["disconnected icon","service name","last sync or expiry text","reconnect button"],"when_to_use":["OAuth 토큰 만료","외부 서비스 연결 해제","동기화 권한 변경이 발생했을 때"],"anti_use":["정상 연결 정보를 보여주는 경우에는 connection-card가 맞다"],"prompt_phrases":["Google 계정 연결이 끊기면 reconnect account state와 다시 연결 버튼을 보여줘"]},{"id":"consent-review-screen","status":"draft","category":"structure","group":"structure-auth-layouts","ko":{"name":"동의 검토 화면","aliases":["권한 동의 검토","consent review"]},"en":{"name":"Consent review screen","aliases":["Permission consent review","Data consent review"]},"one_liner":"사용자가 연결이나 가입 전에 제공할 데이터와 권한 범위를 검토하는 화면.","description":"민감한 권한이나 데이터 접근을 요청하기 전에 항목별 범위와 이유를 확인하게 한다.","visual_anatomy":["consent summary","permission list","data scope rows","accept action","back action"],"when_to_use":["외부 계정 연결","개인정보 제공","조직 권한 승인 전에 범위 확인이 필요할 때"],"anti_use":["브라우저나 OS 시스템 권한은 permission-prompt가 처리한다"],"prompt_phrases":["외부 계정 연결 전에 접근 범위를 보여주는 consent review screen을 만들어줘"]},{"id":"aspect-ratio-box","status":"draft","category":"structure","group":"structure-content-elements","ko":{"name":"비율 고정 박스","aliases":["aspect ratio","종횡비 박스","비율 컨테이너"]},"en":{"name":"Aspect ratio box","aliases":["AspectRatio","Ratio container"]},"one_liner":"이미지나 영상 영역을 16:9, 4:3처럼 일정한 비율로 유지하는 레이아웃 컨테이너.","description":"카드 썸네일, 영상 프리뷰, 갤러리 이미지처럼 로딩 전후에도 같은 화면 비율을 유지해야 할 때 쓴다.","visual_anatomy":["fixed-ratio frame","media placeholder","crop-safe content","stable width"],"when_to_use":["미디어 영역의 높이가 콘텐츠 로딩 전후에 흔들리면 안 될 때","썸네일 목록의 비율을 통일해야 할 때"],"anti_use":["콘텐츠 높이가 자연스럽게 늘어나야 하는 본문 영역에는 쓰지 않는다"],"prompt_phrases":["카드 썸네일을 16대9 aspect ratio box로 고정해줘"]},{"id":"hover-card","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"호버 카드","aliases":["hover card","마우스오버 카드","미리보기 카드"]},"en":{"name":"Hover card","aliases":["HoverCard","Hover preview card"]},"one_liner":"항목 위에 마우스를 올렸을 때 짧은 프로필, 설명, 미리보기를 보여주는 떠 있는 카드.","description":"링크, 사용자, 용어, 파일처럼 클릭 전에 더 많은 맥락을 살짝 보여주고 싶을 때 쓴다.","visual_anatomy":["trigger text or avatar","floating card","title","supporting metadata","optional arrow"],"when_to_use":["데스크톱에서 hover로 보조 정보를 미리 보여줄 때","tooltip보다 긴 콘텐츠가 필요할 때"],"anti_use":["모바일 주요 정보에는 hover가 없으므로 popover나 detail view를 쓴다","한 줄 도움말은 tooltip이 더 가볍다"],"prompt_phrases":["사용자 아바타에 마우스를 올리면 프로필 hover card가 뜨게 해줘"],"related":[{"id":"tooltip","relation":"compare","note":"짧은 한 줄 설명이면 tooltip, 여러 줄 정보나 미리보기면 hover card가 맞다."},{"id":"popover","relation":"compare","note":"클릭해서 열고 상호작용해야 하면 popover가 더 적합하다."}]},{"id":"scroll-area","status":"draft","category":"structure","group":"structure-content-elements","ko":{"name":"스크롤 영역","aliases":["scroll area","내부 스크롤 영역","커스텀 스크롤"]},"en":{"name":"Scroll area","aliases":["ScrollArea","Custom scroll area"]},"one_liner":"페이지 전체가 아니라 특정 패널이나 목록 안에서만 스크롤되도록 만든 영역.","description":"사이드바, 알림 목록, 긴 메뉴처럼 고정된 크기 안에서 내용만 스크롤해야 할 때 사용한다.","visual_anatomy":["fixed-height container","scrollable content","scrollbar","clipped overflow"],"when_to_use":["패널 크기는 유지하면서 내부 목록만 스크롤해야 할 때","사이드바 안에 긴 메뉴가 들어갈 때"],"anti_use":["페이지 전체 흐름을 자연스럽게 읽는 콘텐츠에는 별도 scroll area를 남용하지 않는다"],"prompt_phrases":["알림 목록을 고정 높이 scroll area 안에서만 스크롤되게 해줘"]},{"id":"native-select","status":"draft","category":"input","group":"input-pickers","ko":{"name":"네이티브 선택창","aliases":["native select","기본 select","브라우저 선택창"]},"en":{"name":"Native select","aliases":["NativeSelect","HTML select"]},"one_liner":"브라우저나 OS 기본 선택 UI를 그대로 사용하는 단순 선택 입력.","description":"커스텀 드롭다운보다 가볍고 접근성/모바일 기본 동작을 우선할 때 쓴다.","visual_anatomy":["native select control","selected option","platform chevron","option list"],"when_to_use":["스타일보다 기본 접근성과 모바일 네이티브 동작이 중요할 때","단순한 선택 입력이 필요할 때"],"anti_use":["검색, 커스텀 옵션 렌더링, 복잡한 그룹이 필요하면 select나 combobox를 쓴다"],"prompt_phrases":["모바일에서도 기본 동작이 자연스러운 native select로 언어를 고르게 해줘"],"related":[{"id":"select","relation":"compare","note":"커스텀 스타일과 옵션 렌더링이 필요하면 select, 기본 플랫폼 동작을 우선하면 native select가 낫다."}]},{"id":"keyboard-shortcut-key","status":"draft","category":"data-display","group":"data-account-support","ko":{"name":"키보드 단축키 키","aliases":["kbd","단축키 키캡","키보드 키 표시"]},"en":{"name":"Keyboard shortcut key","aliases":["Kbd","Keyboard key","Shortcut keycap"]},"one_liner":"Cmd, Ctrl, K 같은 키보드 입력을 작은 키캡 모양으로 보여주는 표시 요소.","description":"메뉴 항목, command palette, 도움말에서 단축키를 실제 키처럼 읽히게 보여준다.","visual_anatomy":["small keycap container","key label","subtle border","inline placement"],"when_to_use":["명령이나 메뉴 옆에 키보드 단축키를 안내할 때","도움말에서 조합키를 보여줄 때"],"anti_use":["클릭 가능한 버튼처럼 쓰지 않는다","긴 설명 문장 전체를 kbd로 감싸지 않는다"],"prompt_phrases":["command palette 항목 오른쪽에 Cmd K kbd 키캡을 보여줘"]},{"id":"navigation-menu","status":"draft","category":"selection","group":"selection-navigation","ko":{"name":"내비게이션 메뉴","aliases":["navigation menu","상단 메가 메뉴","제품 내비게이션 메뉴"]},"en":{"name":"Navigation menu","aliases":["NavigationMenu","Top navigation menu"]},"one_liner":"상단 내비게이션 항목을 누르거나 hover했을 때 하위 링크 패널을 보여주는 메뉴.","description":"제품, 리소스, 솔루션처럼 상위 항목 아래에 여러 링크 그룹이 있는 웹사이트 내비게이션에 적합하다.","visual_anatomy":["top nav trigger","active item","dropdown panel","grouped links","viewport transition"],"when_to_use":["마케팅 사이트나 문서 사이트의 상단 메뉴에 여러 하위 링크 그룹을 넣을 때"],"anti_use":["앱 내부 주요 이동은 sidebar navigation이나 tabs가 더 적합할 수 있다","단순 명령 목록은 dropdown menu를 쓴다"],"prompt_phrases":["상단에 제품과 리소스가 펼쳐지는 navigation menu를 만들어줘"],"related":[{"id":"mega-menu","relation":"compare","note":"콘텐츠가 더 크고 마케팅형이면 mega menu, shadcn식 상단 링크 패널은 navigation menu라고 부른다."},{"id":"sidebar-nav","relation":"alternative","note":"앱 내부 반복 사용 내비게이션은 sidebar navigation이 더 일반적이다."}]},{"id":"mobile-form-field-stack","status":"draft","category":"input","group":"input-text","ko":{"name":"모바일 폼 필드 스택","aliases":["mobile form field stack","모바일 입력 필드 묶음","세로 폼 필드 스택"]},"en":{"name":"Mobile form field stack","aliases":["Stacked mobile form fields","Mobile form stack"]},"one_liner":"48x48 이상 터치 타깃과 필드별 helper/error 텍스트를 갖춘, 세로로 쌓인 모바일 폼 필드 구성.","description":"좁은 화면에서 필드 밀도를 낮추지 않으면서 터치 타깃을 확보하고, 포커스 이동과 제출을 키보드 액션으로 이어주는 모바일 전용 폼 구성이다. 데스크톱 `field-group`과 같은 라벨-입력-helper 단위를 쌓지만, 최소 터치 타깃 크기와 다음 필드로 넘어가는 키보드 액션 설계가 핵심 제약으로 추가된다.","visual_anatomy":["stacked text fields","label plus helper or error text per field","48x48 minimum touch target","focus ring","next-field keyboard action","submit cta pinned or inline"],"when_to_use":["모바일 화면에서 여러 입력 필드를 세로로 나열해야 할 때","터치 타깃과 키보드 흐름을 함께 설계해야 할 때"],"anti_use":["필드가 하나뿐이면 단일 text-field로 충분하다","데스크톱 전용 화면에는 일반 field-group을 쓴다"],"prompt_phrases":["모바일 가입 폼을 필드별 최소 터치 타깃을 지키는 mobile form field stack으로 만들어줘"],"related":[{"id":"field-group","relation":"compare","note":"같은 라벨-입력-helper 단위를 쓰지만, field-group은 데스크톱/범용 폼 구성이고 이 항목은 48x48 최소 터치 타깃과 다음 필드 키보드 액션처럼 모바일 전용 제약이 추가된 구성이다."}]},{"id":"field-group","status":"draft","category":"input","group":"input-text","ko":{"name":"필드 그룹","aliases":["field group","폼 필드 그룹","입력 그룹 묶음"]},"en":{"name":"Field group","aliases":["FieldGroup","Form field group"]},"one_liner":"라벨, 설명, 입력, 오류 메시지를 한 단위로 묶어 폼을 구성하는 패턴.","description":"shadcn form에서는 raw div보다 Field/FieldGroup으로 입력 요소의 구조와 상태를 일관되게 만든다.","visual_anatomy":["field label","input control","description text","validation message","vertical grouping"],"when_to_use":["폼 입력을 일관된 라벨/설명/오류 구조로 만들 때","여러 입력 필드를 같은 간격으로 묶을 때"],"anti_use":["단일 입력의 시각 요소 자체를 말할 때는 text field나 select를 쓴다"],"prompt_phrases":["로그인 폼을 field group으로 구성하고 이메일 필드 아래에 설명 문구를 넣어줘"],"related":[{"id":"mobile-form-field-stack","relation":"compare","note":"같은 라벨-입력-helper 단위를 쓰지만, 모바일 화면에서는 48x48 최소 터치 타깃과 다음 필드로 넘어가는 키보드 액션 제약이 추가된 mobile-form-field-stack을 쓴다."}]},{"id":"item-row","status":"draft","category":"data-display","group":"data-basic-content-elements","ko":{"name":"아이템 행","aliases":["item","item row","리스트 아이템 행"]},"en":{"name":"Item row","aliases":["Item","List item row"]},"one_liner":"아이콘, 제목, 설명, 보조 액션을 한 줄 카드처럼 정렬한 반복 행.","description":"설정 항목, 계정 옵션, 알림 항목처럼 작은 정보 단위를 일관된 행 구조로 보여준다.","visual_anatomy":["leading icon","title","description","trailing action or metadata","row container"],"when_to_use":["목록 안의 각 항목이 제목과 설명, 보조 액션을 함께 가져야 할 때"],"anti_use":["복잡한 열 정렬과 정렬/필터가 필요하면 table이나 data grid를 쓴다"],"prompt_phrases":["설정 목록을 아이콘과 설명이 있는 item row로 만들어줘"]},{"id":"sonner-toast","status":"draft","category":"feedback","group":"feedback-status-notifications","ko":{"name":"소너 토스트","aliases":["sonner","sonner toast","shadcn toast"]},"en":{"name":"Sonner toast","aliases":["Sonner","Toast notification"]},"one_liner":"shadcn에서 자주 쓰는 Sonner 기반의 가벼운 토스트 알림.","description":"저장 완료, 복사됨, 실패 같은 짧은 결과를 화면 가장자리의 임시 알림으로 보여준다.","visual_anatomy":["toast surface","short message","optional icon","optional action","stack position"],"when_to_use":["사용자의 작업 결과를 짧게 알려줄 때","여러 toast가 stack될 수 있을 때"],"anti_use":["화면을 막아야 하는 중요한 결정은 dialog나 alert dialog를 쓴다","긴 설명은 alert가 낫다"],"prompt_phrases":["저장 완료 후 오른쪽 아래에 sonner toast를 띄워줘"],"related":[{"id":"toast","relation":"compare","note":"toast는 일반 패턴명이고 sonner toast는 shadcn에서 쓰는 구현/스타일 이름이다."}]},{"id":"direction-provider","status":"draft","category":"accessibility","group":"accessibility-focus-motion","ko":{"name":"방향성 제공자","aliases":["direction provider","RTL provider","텍스트 방향 제공자"]},"en":{"name":"Direction provider","aliases":["DirectionProvider","RTL provider"]},"one_liner":"UI 전체나 일부 영역의 읽기 방향을 LTR 또는 RTL로 지정하는 보이지 않는 구조 요소.","description":"아랍어, 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 지원할 때 컴포넌트 방향성을 일관되게 전달한다.","visual_anatomy":["direction boundary","ltr or rtl label","mirrored layout hint","child component area"],"when_to_use":["다국어 제품에서 RTL 레이아웃을 지원해야 할 때","특정 영역만 방향성을 바꿔야 할 때"],"anti_use":["단순 텍스트 정렬을 바꾸는 용도로 남용하지 않는다","일반 사용자는 보이는 컴포넌트명보다 RTL layout이라고 말하는 편이 낫다"],"prompt_phrases":["아랍어 화면을 위해 전체 앱을 RTL direction provider 안에 넣어줘"]},{"id":"login-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"로그인 폼","aliases":["login form","로그인 창","sign in form"]},"en":{"name":"Login form","aliases":["Sign in form","Authentication form"]},"one_liner":"이메일 또는 아이디와 비밀번호로 사용자를 로그인시키는 기본 인증 폼.","description":"인증 화면의 가장 표준적인 패턴으로, 계정 입력, 비밀번호 입력, 로그인 버튼, 보조 링크를 함께 배치한다.","visual_anatomy":["email or username field","password field","submit button","forgot password link","signup link"],"when_to_use":["기존 계정으로 제품에 들어오게 할 때","이메일/비밀번호 인증이 기본 로그인 방식일 때"],"anti_use":["비밀번호 없는 로그인만 제공하면 magic-link-login-form이나 passkey-login-form이 더 정확하다"],"prompt_phrases":["이메일과 비밀번호가 있는 login form을 카드 안에 만들어줘"],"related":[{"id":"password-field","relation":"use-with","note":"비밀번호 입력은 login form 안의 핵심 field다."},{"id":"auth-card","relation":"use-with","note":"로그인 폼을 독립 카드로 감싸면 auth card가 된다."}]},{"id":"signup-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"회원가입 폼","aliases":["signup form","가입 폼","sign up form"]},"en":{"name":"Signup form","aliases":["Sign up form","Registration form"]},"one_liner":"새 사용자가 이메일, 비밀번호, 이름 같은 정보를 입력해 계정을 만드는 폼.","description":"신규 계정 생성에 필요한 입력과 약관 동의, 가입 버튼, 로그인 링크를 함께 제공한다.","visual_anatomy":["name or email fields","password field","terms consent","create account button","existing account link"],"when_to_use":["사용자가 직접 계정을 만들 수 있어야 할 때"],"anti_use":["초대 링크를 통해 가입하면 invite-signup-form이 더 정확하다"],"prompt_phrases":["이름 이메일 비밀번호와 약관 동의가 있는 signup form을 만들어줘"]},{"id":"forgot-password-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"비밀번호 찾기 폼","aliases":["forgot password form","비밀번호 재설정 요청","reset link form"]},"en":{"name":"Forgot password form","aliases":["Password reset request form","Reset link form"]},"one_liner":"사용자가 이메일을 입력해 비밀번호 재설정 링크를 요청하는 폼.","description":"로그인에 실패했거나 비밀번호를 잊은 사용자가 계정 이메일로 복구 절차를 시작하게 한다.","visual_anatomy":["email field","explanation text","send reset link button","back to login link"],"when_to_use":["비밀번호 재설정 이메일을 보내야 할 때"],"anti_use":["새 비밀번호를 직접 입력하는 단계는 reset-password-form이 맞다"],"prompt_phrases":["이메일을 입력하면 재설정 링크를 보내는 forgot password form을 만들어줘"]},{"id":"reset-password-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"비밀번호 재설정 폼","aliases":["reset password form","새 비밀번호 설정","password reset form"]},"en":{"name":"Reset password form","aliases":["New password form","Password reset form"]},"one_liner":"복구 링크나 인증 후 새 비밀번호를 입력하고 확인하는 폼.","description":"새 비밀번호와 확인 입력, 강도 안내, 저장 버튼을 통해 안전하게 비밀번호를 바꾸게 한다.","visual_anatomy":["new password field","confirm password field","password requirements","submit button"],"when_to_use":["비밀번호 복구 링크를 연 뒤 새 비밀번호를 설정할 때"],"anti_use":["로그인된 사용자가 기존 비밀번호를 바꾸는 설정 화면은 change-password-form이 더 정확하다"],"prompt_phrases":["새 비밀번호와 확인 입력이 있는 reset password form을 만들어줘"]},{"id":"change-password-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"비밀번호 변경 폼","aliases":["change password form","계정 비밀번호 변경"]},"en":{"name":"Change password form","aliases":["Account password change form","Update password form"]},"one_liner":"로그인된 사용자가 기존 비밀번호와 새 비밀번호를 입력해 비밀번호를 변경하는 폼.","description":"계정 설정 안에서 현재 비밀번호 확인, 새 비밀번호 입력, 저장 버튼을 제공한다.","visual_anatomy":["current password field","new password field","confirm password field","save button"],"when_to_use":["계정 설정에서 사용자가 비밀번호를 바꾸게 할 때"],"anti_use":["비밀번호를 잊은 사용자의 복구 흐름은 forgot-password-form과 reset-password-form을 쓴다"],"prompt_phrases":["현재 비밀번호와 새 비밀번호를 입력하는 change password form을 만들어줘"]},{"id":"magic-link-login-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"매직 링크 로그인 폼","aliases":["magic link login","이메일 링크 로그인","passwordless login form"]},"en":{"name":"Magic link login form","aliases":["Passwordless login form","Email link sign in form"]},"one_liner":"이메일만 입력하면 로그인 링크를 보내는 비밀번호 없는 로그인 폼.","description":"비밀번호 입력 없이 이메일 주소를 받아 로그인 링크를 발송하고, 발송 후에는 대기 상태로 전환한다.","visual_anatomy":["email field","send magic link button","password login alternative","sent state link"],"when_to_use":["비밀번호 없는 로그인 경험을 제공할 때"],"anti_use":["사용자가 앱 안에서 코드를 입력해야 하면 otp-challenge-form이 더 적합하다"],"prompt_phrases":["이메일만 입력하면 로그인 링크를 보내는 magic link login form을 만들어줘"],"related":[{"id":"magic-link-sent-state","relation":"use-with","note":"링크를 보낸 뒤에는 magic link sent state로 이어진다."}]},{"id":"sso-login-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"SSO 로그인 폼","aliases":["sso login","조직 로그인","single sign-on form"]},"en":{"name":"SSO login form","aliases":["Single sign-on form","Organization login form"]},"one_liner":"회사 도메인이나 조직 식별자를 입력해 SSO 인증으로 이동하는 로그인 폼.","description":"B2B 제품에서 이메일 도메인, workspace slug, 조직 이름을 받아 SSO provider로 넘긴다.","visual_anatomy":["organization or email field","continue with SSO button","password login fallback","help link"],"when_to_use":["기업 고객이 SAML, OIDC, Google Workspace 같은 SSO로 로그인해야 할 때"],"anti_use":["개인 사용자 로그인만 있으면 일반 login-form이 더 단순하다"],"prompt_phrases":["회사 이메일을 입력하고 SSO로 계속하는 sso login form을 만들어줘"]},{"id":"social-login-button-group","status":"draft","category":"action","group":"action-buttons","kind":"form-pattern","ko":{"name":"소셜 로그인 버튼 그룹","aliases":["social login buttons","OAuth 로그인 버튼","continue with buttons"]},"en":{"name":"Social login button group","aliases":["OAuth button group","Continue with buttons"]},"one_liner":"Kakao, Google, Email, GitHub 같은 로그인 선택지를 한 화면에 묶어 보여주는 버튼 그룹.","description":"인증 폼 상단이나 하단에서 OAuth provider 선택지를 일관된 버튼 그룹으로 제공한다.","visual_anatomy":["provider buttons","provider icons","provider-specific button color","email login alternative"],"when_to_use":["여러 외부 로그인 provider를 제공할 때"],"anti_use":["provider가 하나뿐이면 단일 primary/secondary button으로 충분하다"],"prompt_phrases":["Kakao Google Email GitHub로 계속하기 social login button group을 넣어줘"]},{"id":"otp-challenge-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"OTP 인증 폼","aliases":["otp challenge form","인증번호 확인 폼","verification code form"]},"en":{"name":"OTP challenge form","aliases":["Verification code form","One-time code challenge"]},"one_liner":"이메일, 문자, 인증 앱에서 받은 일회용 코드를 입력해 본인 확인을 완료하는 폼.","description":"코드 입력 필드, 남은 시간, 재전송, 확인 버튼을 함께 배치한다.","visual_anatomy":["OTP code input","destination hint","verify button","resend code link","expiry timer"],"when_to_use":["로그인, 가입, 계정 변경에서 일회용 코드를 확인해야 할 때"],"anti_use":["보안 키나 생체 인증은 passkey-login-form이나 biometric-prompt가 더 맞다"],"prompt_phrases":["6자리 인증번호를 입력하는 otp challenge form을 만들어줘"],"related":[{"id":"otp-code-input","relation":"use-with","note":"OTP code input은 이 폼 안의 핵심 입력 컴포넌트다."}]},{"id":"mfa-challenge-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"2단계 인증 폼","aliases":["MFA challenge form","2FA form","이중 인증 폼"]},"en":{"name":"MFA challenge form","aliases":["Two-factor challenge form","2FA form"]},"one_liner":"로그인 후 두 번째 인증 수단을 확인하는 보안 폼.","description":"인증 앱 코드, SMS 코드, 복구 코드, 다른 방법 선택 같은 MFA 선택지를 포함할 수 있다.","visual_anatomy":["challenge title","code input","verify action","use another method link","recovery code link"],"when_to_use":["비밀번호 이후 추가 인증이 필요한 로그인 흐름에서"],"anti_use":["단순 이메일 인증만이면 otp-challenge-form이 더 구체적이다"],"prompt_phrases":["인증 앱 코드를 입력하고 다른 방법을 선택할 수 있는 mfa challenge form을 만들어줘"]},{"id":"passkey-login-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"패스키 로그인 폼","aliases":["passkey login form","패스키 로그인","passwordless passkey form"]},"en":{"name":"Passkey login form","aliases":["Passkey sign-in form","Passwordless passkey form"]},"one_liner":"패스키를 기본 로그인 방식으로 제안하고 다른 로그인 방법으로 fallback하는 폼.","description":"패스키 로그인 버튼, 계정 힌트, 비밀번호/이메일 로그인 대체 링크를 제공한다.","visual_anatomy":["passkey primary action","account hint","fallback login link","security explanation"],"when_to_use":["패스키가 제품의 권장 로그인 방식일 때"],"anti_use":["패스키 등록을 유도하는 설정 흐름은 passkey-enrollment-prompt가 더 정확하다"],"prompt_phrases":["패스키로 계속하기를 기본으로 둔 passkey login form을 만들어줘"],"related":[{"id":"passkey-sign-in-sheet","relation":"use-with","note":"실제 인증이 시작되면 passkey sign-in sheet가 열릴 수 있다."}]},{"id":"invite-signup-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"초대 가입 폼","aliases":["invite signup form","초대 수락 가입","invitation signup"]},"en":{"name":"Invite signup form","aliases":["Invitation signup form","Join by invite form"]},"one_liner":"초대받은 사용자가 계정 정보를 입력하고 팀이나 워크스페이스에 합류하는 가입 폼.","description":"초대 대상 이메일, 팀 이름, 역할을 보여주면서 이름/비밀번호 설정 또는 소셜 로그인을 제공한다.","visual_anatomy":["invitation summary","invited email","name field","password or provider action","accept invite button"],"when_to_use":["초대 링크를 통해 새 사용자를 팀에 합류시킬 때"],"anti_use":["초대 수락만 확인하고 계정 입력이 없으면 invite-acceptance-screen이 더 맞다"],"prompt_phrases":["팀 초대 정보를 보여주고 계정을 만드는 invite signup form을 만들어줘"],"related":[{"id":"invite-acceptance-screen","relation":"compare","note":"초대 정보를 확인만 하면 invite acceptance screen, 계정 생성 입력까지 있으면 invite signup form이다."}]},{"id":"account-creation-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"계정 생성 폼","aliases":["account creation form","create account form","계정 만들기 폼"]},"en":{"name":"Account creation form","aliases":["Create account form","New account form"]},"one_liner":"제품 가입 초기에 최소 정보로 계정을 생성하는 간단한 폼.","description":"signup-form보다 일반적인 이름으로, 이메일 또는 소셜 계정 기반의 계정 생성 첫 단계를 말한다.","visual_anatomy":["email field","create account action","provider alternatives","terms hint"],"when_to_use":["가입 첫 단계를 최소 입력으로 시작할 때"],"anti_use":["이름, 비밀번호, 약관 등 전체 가입 흐름을 말하면 signup-form이 더 구체적이다"],"prompt_phrases":["이메일만 먼저 받는 account creation form을 만들어줘"]},{"id":"email-change-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"이메일 변경 폼","aliases":["email change form","계정 이메일 변경","change email form"]},"en":{"name":"Email change form","aliases":["Change email form","Account email update form"]},"one_liner":"로그인된 사용자가 계정 이메일 주소를 바꾸고 새 주소 인증을 시작하는 폼.","description":"현재 이메일, 새 이메일 입력, 비밀번호 재확인 또는 인증 안내를 함께 보여준다.","visual_anatomy":["current email display","new email field","password or reauth field","send verification action"],"when_to_use":["계정 설정에서 로그인 이메일을 변경해야 할 때"],"anti_use":["단순 이메일 인증 상태 안내는 email-verification-banner가 더 가볍다"],"prompt_phrases":["현재 이메일과 새 이메일 입력이 있는 email change form을 만들어줘"]},{"id":"reauthentication-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"재인증 폼","aliases":["reauthentication form","민감 작업 재로그인","confirm identity form"]},"en":{"name":"Reauthentication form","aliases":["Confirm identity form","Re-login form"]},"one_liner":"결제, 삭제, 보안 설정처럼 민감한 작업 전에 사용자의 신원을 다시 확인하는 폼.","description":"비밀번호, 패스키, OTP 중 하나로 현재 사용자가 맞는지 확인하고 작업을 계속하게 한다.","visual_anatomy":["security explanation","password or passkey action","confirm button","cancel action"],"when_to_use":["민감한 계정 변경이나 결제/삭제 작업 전에 재확인이 필요할 때"],"anti_use":["세션이 완전히 만료된 상황은 session-expired-dialog가 더 명확하다"],"prompt_phrases":["계정 삭제 전에 비밀번호를 다시 입력하는 reauthentication form을 보여줘"]},{"id":"auth-method-choice","status":"draft","category":"selection","group":"selection-options","kind":"form-pattern","ko":{"name":"인증 방식 선택","aliases":["auth method choice","로그인 방식 선택","choose sign-in method"]},"en":{"name":"Auth method choice","aliases":["Sign-in method choice","Choose login method"]},"one_liner":"비밀번호, SSO, 매직 링크, 패스키 중 어떤 방식으로 인증할지 고르는 선택 패턴.","description":"여러 인증 옵션을 모두 보여주되 사용자가 현재 상황에 맞는 방법을 선택하게 한다.","visual_anatomy":["method option cards","recommended method","provider icons","continue action"],"when_to_use":["하나의 제품이 여러 로그인 방식을 제공할 때"],"anti_use":["로그인 방식이 하나뿐이면 해당 form을 바로 보여주는 편이 낫다"],"prompt_phrases":["비밀번호 SSO 패스키 중 고르는 auth method choice 화면을 만들어줘"]},{"id":"auth-card","status":"draft","category":"structure","group":"structure-auth-layouts","kind":"block","ko":{"name":"인증 카드","aliases":["auth card","로그인 카드","authentication card"]},"en":{"name":"Auth card","aliases":["Authentication card","Login card"]},"one_liner":"로그인, 가입, 비밀번호 복구 폼을 하나의 중앙 카드로 감싸는 인증 화면 블록.","description":"인증 페이지의 핵심 폼을 로고, 제목, 설명, 보조 링크와 함께 카드 형태로 묶는다.","visual_anatomy":["centered card","logo or product name","auth form","secondary links","optional provider buttons"],"when_to_use":["인증 폼을 독립적인 카드로 집중시켜 보여줄 때"],"anti_use":["전체 페이지 레이아웃과 마케팅 패널까지 포함하면 split-auth-layout이나 login-page가 더 맞다"],"prompt_phrases":["중앙에 로고와 login form이 들어간 auth card를 만들어줘"]},{"id":"login-page","status":"draft","category":"structure","group":"structure-auth-layouts","kind":"block","ko":{"name":"로그인 페이지","aliases":["login page","sign in page","로그인 화면"]},"en":{"name":"Login page","aliases":["Sign in page","Authentication page"]},"one_liner":"사용자가 제품에 들어오기 전 로그인 폼과 브랜드 요소를 함께 보는 전체 페이지.","description":"auth card, 배경, 로고, 약관 링크, 보조 CTA를 포함하는 인증 목적의 독립 페이지다.","visual_anatomy":["page background","logo area","auth card or form","legal links","signup or support link"],"when_to_use":["제품 진입 전에 별도 로그인 화면이 필요할 때"],"anti_use":["현재 작업 위에서 잠깐 재인증만 필요하면 login-dialog나 reauthentication-form이 더 적합하다"],"prompt_phrases":["중앙 로그인 카드와 하단 약관 링크가 있는 login page를 만들어줘"]},{"id":"split-auth-layout","status":"draft","category":"structure","group":"structure-auth-layouts","kind":"block","ko":{"name":"분할 인증 레이아웃","aliases":["split auth layout","좌우 분할 로그인","auth split screen"]},"en":{"name":"Split auth layout","aliases":["Auth split screen","Split login layout"]},"one_liner":"한쪽에는 로그인/가입 폼, 다른 쪽에는 브랜드 이미지나 설명을 배치한 인증 페이지 레이아웃.","description":"B2B SaaS나 브랜드 강조가 필요한 제품에서 인증 폼과 제품 메시지를 나란히 보여준다.","visual_anatomy":["form column","brand or illustration panel","logo","responsive stacking"],"when_to_use":["인증 화면에서 제품 가치나 브랜드 이미지를 함께 보여주고 싶을 때"],"anti_use":["단순하고 빠른 로그인만 필요하면 auth-card나 login-page가 더 가볍다"],"prompt_phrases":["왼쪽은 로그인 폼 오른쪽은 제품 소개가 있는 split auth layout을 만들어줘"]},{"id":"login-dialog","status":"draft","category":"structure","group":"structure-auth-layouts","kind":"block","ko":{"name":"로그인 다이얼로그","aliases":["login dialog","로그인 모달","sign in modal"]},"en":{"name":"Login dialog","aliases":["Sign in modal","Authentication dialog"]},"one_liner":"현재 페이지를 떠나지 않고 로그인 폼을 모달로 띄우는 인증 블록.","description":"댓글 작성, 저장, 구매처럼 특정 행동 직전에 로그인 필요 상태를 빠르게 처리한다.","visual_anatomy":["modal surface","dialog title","login form","close action","signup link"],"when_to_use":["사용자가 하던 맥락을 유지한 채 로그인만 요구해야 할 때"],"anti_use":["인증이 제품 진입의 첫 화면이면 login-page가 더 명확하다"],"prompt_phrases":["저장 버튼을 누르면 현재 페이지 위에 login dialog가 뜨게 해줘"]},{"id":"dashboard-overview-page","status":"draft","category":"structure","group":"structure-app-layout","kind":"block","ko":{"name":"대시보드 개요 페이지","aliases":["dashboard block","dashboard overview","dashboard-01"]},"en":{"name":"Dashboard overview page","aliases":["Dashboard block","Overview dashboard","dashboard-01"]},"one_liner":"사이드바, 주요 지표, 차트, 데이터 테이블을 한 화면에 배치한 관리형 대시보드 페이지.","description":"제품 운영, 분석, 관리자 화면처럼 반복 확인해야 하는 상태와 표 작업을 한 화면에서 처리한다.","visual_anatomy":["app sidebar","page header","metric cards","chart panel","data table"],"when_to_use":["관리자가 지표와 목록을 동시에 확인해야 할 때","제품의 홈 화면이 운영 현황 요약이어야 할 때"],"anti_use":["단일 지표만 보여주면 metric-card나 chart가 더 가볍다"],"prompt_phrases":["사이드바와 차트, 데이터 테이블이 있는 dashboard overview page를 만들어줘"]},{"id":"sidebar-dashboard-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"사이드바 대시보드 레이아웃","aliases":["sidebar block","sidebar-01","dashboard sidebar"]},"en":{"name":"Sidebar dashboard layout","aliases":["Sidebar block","sidebar-01","Dashboard sidebar"]},"one_liner":"왼쪽 사이드바와 오른쪽 작업 영역으로 구성된 대시보드 기본 레이아웃.","description":"여러 메뉴를 가진 SaaS, 관리자, 내부 도구에서 앱의 기본 골격으로 쓴다.","visual_anatomy":["persistent sidebar","grouped navigation","content header","main panel"],"when_to_use":["앱의 주요 목적지가 많고 항상 보이는 내비게이션이 필요할 때"],"anti_use":["모바일 중심의 단순 화면에는 bottom-navigation이나 top-app-bar가 더 적합하다"],"prompt_phrases":["왼쪽 사이드바와 메인 콘텐츠가 있는 sidebar dashboard layout을 만들어줘"]},{"id":"collapsible-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"접이식 사이드바 레이아웃","aliases":["collapsible sidebar block","sidebar-02","sidebar-05"]},"en":{"name":"Collapsible sidebar layout","aliases":["Collapsible sidebar block","sidebar-02","sidebar-05"]},"one_liner":"섹션이나 하위 메뉴를 접고 펼칠 수 있는 사이드바 중심 앱 레이아웃.","description":"메뉴 깊이가 깊거나 팀, 프로젝트, 설정처럼 그룹화된 목적지가 많을 때 탐색 밀도를 조절한다.","visual_anatomy":["collapsible groups","nested menu items","active item","main content"],"when_to_use":["사이드바 항목이 많아 섹션별 접기가 필요할 때"],"anti_use":["메뉴가 5개 이하라면 일반 sidebar-dashboard-layout이 더 명확하다"],"prompt_phrases":["하위 메뉴를 접고 펼치는 collapsible sidebar layout을 만들어줘"]},{"id":"icon-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"아이콘 사이드바 레이아웃","aliases":["icon sidebar","sidebar-07","collapsed icon rail"]},"en":{"name":"Icon sidebar layout","aliases":["Icon sidebar","sidebar-07","Collapsed icon rail"]},"one_liner":"사이드바를 아이콘 폭으로 접어 화면 공간을 확보하는 앱 레이아웃.","description":"화면 폭이 좁거나 작업 영역을 넓게 쓰는 도구에서 내비게이션 접근성을 유지하면서 공간을 절약한다.","visual_anatomy":["narrow icon rail","active icon","optional expanded label","content canvas"],"when_to_use":["데이터 테이블, 캔버스, 편집기처럼 메인 영역이 넓어야 할 때"],"anti_use":["아이콘 의미가 불명확하면 텍스트가 있는 사이드바를 쓴다"],"prompt_phrases":["아이콘만 남기고 접히는 icon sidebar layout을 만들어줘"]},{"id":"inset-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"인셋 사이드바 레이아웃","aliases":["inset sidebar","sidebar-08","inset app shell"]},"en":{"name":"Inset sidebar layout","aliases":["Inset sidebar","sidebar-08","Inset app shell"]},"one_liner":"사이드바와 콘텐츠를 페이지 가장자리에서 살짝 띄워 카드형 앱 셸처럼 보이게 하는 레이아웃.","description":"내부 도구보다 제품형 SaaS 느낌이 강한 대시보드에서 여백과 경계를 더 부드럽게 만든다.","visual_anatomy":["inset sidebar panel","rounded content shell","secondary navigation","page header"],"when_to_use":["대시보드를 더 제품화된 앱 셸처럼 보이게 하고 싶을 때"],"anti_use":["매우 조밀한 운영 도구에서는 일반 app-shell이 더 효율적이다"],"prompt_phrases":["둥근 메인 패널과 inset sidebar layout을 만들어줘"]},{"id":"right-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"오른쪽 사이드바 레이아웃","aliases":["right sidebar","sidebar-14","inspector sidebar"]},"en":{"name":"Right sidebar layout","aliases":["Right sidebar","sidebar-14","Inspector sidebar"]},"one_liner":"보조 정보나 설정 패널을 화면 오른쪽에 고정한 작업 레이아웃.","description":"본문이나 캔버스를 중심에 두고 선택 항목의 속성, 활동, 미리보기를 오른쪽에서 계속 보여준다.","visual_anatomy":["main workspace","right rail","inspector sections","sticky header"],"when_to_use":["선택한 항목의 속성이나 보조 맥락을 항상 옆에서 봐야 할 때"],"anti_use":["주 내비게이션이라면 왼쪽 sidebar-dashboard-layout이 더 익숙하다"],"prompt_phrases":["오른쪽에 속성 패널이 붙은 right sidebar layout을 만들어줘"]},{"id":"dual-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"양쪽 사이드바 레이아웃","aliases":["dual sidebar","left and right sidebar","sidebar-15"]},"en":{"name":"Dual sidebar layout","aliases":["Dual sidebar","Left and right sidebar","sidebar-15"]},"one_liner":"왼쪽에는 내비게이션, 오른쪽에는 보조 패널을 두고 중앙 작업 영역을 감싸는 레이아웃.","description":"편집기, 분석 도구, CRM처럼 탐색과 상세 맥락을 동시에 유지해야 하는 복잡한 앱에 쓴다.","visual_anatomy":["left navigation","center workspace","right inspector","resizable zones"],"when_to_use":["화면 양쪽에 서로 다른 보조 맥락이 필요할 때"],"anti_use":["콘텐츠 폭이 좁아지면 모바일이나 작은 데스크톱에서 부담이 크다"],"prompt_phrases":["왼쪽 메뉴와 오른쪽 inspector가 있는 dual sidebar layout을 만들어줘"]},{"id":"file-tree-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"파일 트리 사이드바 레이아웃","aliases":["file tree sidebar","sidebar-11","explorer sidebar"]},"en":{"name":"File tree sidebar layout","aliases":["File tree sidebar","sidebar-11","Explorer sidebar"]},"one_liner":"폴더와 파일 계층을 사이드바에 두고 선택한 문서나 화면을 메인 영역에 여는 레이아웃.","description":"문서 관리, 코드 편집기, 디자인 파일 탐색처럼 계층 구조를 계속 탐색해야 할 때 쓴다.","visual_anatomy":["collapsible file tree","folder rows","selected file","editor or preview panel"],"when_to_use":["사용자가 파일이나 문서 계층을 자주 오가야 할 때"],"anti_use":["평면 목록이면 list나 table이 더 단순하다"],"prompt_phrases":["왼쪽에 파일 트리가 있는 file tree sidebar layout을 만들어줘"]},{"id":"calendar-sidebar-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"캘린더 사이드바 레이아웃","aliases":["calendar sidebar","sidebar-12","schedule sidebar"]},"en":{"name":"Calendar sidebar layout","aliases":["Calendar sidebar","sidebar-12","Schedule sidebar"]},"one_liner":"사이드바에 작은 캘린더나 일정 필터를 두고 메인 영역에서 일정 콘텐츠를 보는 레이아웃.","description":"예약, 일정, 프로젝트 마감 화면에서 날짜 맥락을 항상 유지하면서 목록이나 상세를 탐색한다.","visual_anatomy":["sidebar calendar","date filters","schedule list","content detail"],"when_to_use":["날짜 선택이 화면 탐색의 핵심 축일 때"],"anti_use":["단일 날짜 입력만 필요하면 date-picker가 더 적합하다"],"prompt_phrases":["사이드바에 달력이 있는 calendar sidebar layout을 만들어줘"]},{"id":"sidebar-dialog-layout","status":"draft","category":"structure","group":"structure-sidebar-layouts","kind":"block","ko":{"name":"다이얼로그 안 사이드바 레이아웃","aliases":["sidebar in dialog","sidebar-13","dialog sidebar"]},"en":{"name":"Sidebar in dialog layout","aliases":["Sidebar in dialog","sidebar-13","Dialog sidebar"]},"one_liner":"설정이나 선택 흐름을 모달 안에서 사이드바와 여러 패널로 나누는 레이아웃.","description":"전체 페이지를 떠나지 않고 복잡한 설정, 계정, 권한 흐름을 단계별 패널로 다룬다.","visual_anatomy":["modal shell","dialog title","side navigation","active settings panel"],"when_to_use":["현재 화면 맥락을 유지하면서 여러 설정 섹션을 편집해야 할 때"],"anti_use":["깊은 작업이나 긴 폼은 별도 settings page가 더 안정적이다"],"prompt_phrases":["모달 안에 설정 사이드바가 있는 sidebar dialog layout을 만들어줘"]},{"id":"area-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"영역 차트 카드","aliases":["area chart card","chart-area-default","chart-area-gradient"]},"en":{"name":"Area chart card","aliases":["Area chart card","chart-area-default","chart-area-gradient"]},"one_liner":"시간에 따른 추세와 누적 변화를 영역으로 채워 보여주는 차트 카드.","description":"방문자, 매출, 사용량처럼 흐름과 규모감을 동시에 보여줘야 하는 지표에 쓴다.","visual_anatomy":["card title","time range","filled area chart","summary value"],"when_to_use":["기간별 추세와 총량의 느낌을 함께 보여줄 때"],"anti_use":["정확한 항목 비교는 bar-chart-card가 더 읽기 쉽다"],"prompt_phrases":["기간별 트래픽을 보여주는 area chart card를 만들어줘"]},{"id":"bar-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"막대 차트 카드","aliases":["bar chart card","chart-bar-default","chart-bar-horizontal"]},"en":{"name":"Bar chart card","aliases":["Bar chart card","chart-bar-default","chart-bar-horizontal"]},"one_liner":"항목이나 기간별 값을 막대 길이로 비교하는 차트 카드.","description":"카테고리별 매출, 월별 가입자, 상태별 건수처럼 값의 차이를 빠르게 비교한다.","visual_anatomy":["card title","category axis","value bars","optional labels"],"when_to_use":["여러 항목의 크기 차이를 명확히 비교해야 할 때"],"anti_use":["비율 구성이 핵심이면 pie-chart-card나 radial-chart-card가 더 적합하다"],"prompt_phrases":["월별 매출을 비교하는 bar chart card를 만들어줘"]},{"id":"line-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"선 차트 카드","aliases":["line chart card","chart-line-default","chart-line-multiple"]},"en":{"name":"Line chart card","aliases":["Line chart card","chart-line-default","chart-line-multiple"]},"one_liner":"시간 흐름에 따른 하나 이상의 지표 변화를 선으로 보여주는 차트 카드.","description":"변화 추세, 피크, 감소 구간을 읽어야 하는 분석 화면에서 기본 지표 카드로 쓴다.","visual_anatomy":["card title","line series","x axis","tooltip point"],"when_to_use":["기간에 따른 증감 패턴을 보여줘야 할 때"],"anti_use":["단일 현재값만 중요하면 metric-card가 더 빠르다"],"prompt_phrases":["가입자 추이를 보여주는 line chart card를 만들어줘"]},{"id":"pie-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"파이 차트 카드","aliases":["pie chart card","donut chart card","chart-pie-donut"]},"en":{"name":"Pie chart card","aliases":["Pie chart card","Donut chart card","chart-pie-donut"]},"one_liner":"전체에서 각 항목이 차지하는 비율을 원형이나 도넛 형태로 보여주는 차트 카드.","description":"유입 채널, 플랜 구성, 카테고리 비율처럼 부분-전체 관계를 짧게 보여준다.","visual_anatomy":["circular chart","segment colors","center label","legend"],"when_to_use":["소수의 항목이 전체에서 차지하는 비중을 보여줄 때"],"anti_use":["항목이 많거나 작은 차이를 비교해야 하면 bar-chart-card가 낫다"],"prompt_phrases":["유입 채널 비율을 보여주는 donut pie chart card를 만들어줘"]},{"id":"radar-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"레이더 차트 카드","aliases":["radar chart card","chart-radar-default","spider chart"]},"en":{"name":"Radar chart card","aliases":["Radar chart card","chart-radar-default","Spider chart"]},"one_liner":"여러 축의 점수를 방사형으로 연결해 프로필이나 역량 균형을 보여주는 차트 카드.","description":"제품 속성, 팀 역량, 평가 기준처럼 여러 차원의 균형을 한눈에 비교한다.","visual_anatomy":["radial grid","axis labels","polygon area","legend"],"when_to_use":["여러 기준의 균형이나 편차를 보여줘야 할 때"],"anti_use":["정확한 수치 비교가 중요하면 table이나 bar-chart-card가 낫다"],"prompt_phrases":["역량 점수를 보여주는 radar chart card를 만들어줘"]},{"id":"radial-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"방사형 차트 카드","aliases":["radial chart card","radial progress chart","chart-radial-simple"]},"en":{"name":"Radial chart card","aliases":["Radial chart card","Radial progress chart","chart-radial-simple"]},"one_liner":"진행률이나 비율을 원형 호 형태로 강조해 보여주는 차트 카드.","description":"목표 달성률, 사용량, 점수처럼 하나의 핵심 비율을 시각적으로 강조한다.","visual_anatomy":["circular arc","center value","label","supporting caption"],"when_to_use":["하나의 비율이나 진행률을 카드의 핵심으로 보여줄 때"],"anti_use":["여러 항목 비교에는 bar-chart-card가 더 명확하다"],"prompt_phrases":["목표 달성률을 보여주는 radial chart card를 만들어줘"]},{"id":"interactive-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"인터랙티브 차트 카드","aliases":["interactive chart card","chart-area-interactive","chart-line-interactive"]},"en":{"name":"Interactive chart card","aliases":["Interactive chart card","chart-area-interactive","chart-line-interactive"]},"one_liner":"기간, 지표, 범례를 조작해 차트 데이터를 바꿔 볼 수 있는 분석 카드.","description":"사용자가 최근 7일/30일, 데스크톱/모바일, 매출/주문 같은 관점을 전환하며 탐색한다.","visual_anatomy":["chart canvas","segmented time control","hover tooltip","active series"],"when_to_use":["차트를 단순 표시가 아니라 탐색 도구로 써야 할 때"],"anti_use":["정적 리포트에는 불필요한 조작이 될 수 있다"],"prompt_phrases":["기간을 바꿀 수 있는 interactive chart card를 만들어줘"]},{"id":"stacked-chart-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"누적 차트 카드","aliases":["stacked chart card","chart-area-stacked","chart-bar-stacked"]},"en":{"name":"Stacked chart card","aliases":["Stacked chart card","chart-area-stacked","chart-bar-stacked"]},"one_liner":"여러 시리즈를 한 막대나 영역 안에 쌓아 전체와 구성 비율을 함께 보여주는 차트 카드.","description":"총량이 변하는 동시에 구성 항목이 어떻게 달라지는지 확인하는 분석 화면에 쓴다.","visual_anatomy":["stacked series","color legend","total scale","tooltip breakdown"],"when_to_use":["전체 추세와 세부 구성의 변화를 동시에 보여줘야 할 때"],"anti_use":["각 시리즈의 정확한 개별 추세 비교에는 line-chart-card가 낫다"],"prompt_phrases":["데스크톱과 모바일 사용량을 쌓아서 보여주는 stacked chart card를 만들어줘"]},{"id":"chart-tooltip-pattern","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"차트 툴팁 패턴","aliases":["chart tooltip","chart-tooltip-default","chart-tooltip-advanced"]},"en":{"name":"Chart tooltip pattern","aliases":["Chart tooltip","chart-tooltip-default","chart-tooltip-advanced"]},"one_liner":"차트의 특정 점이나 구간에 마우스를 올렸을 때 상세 값과 시리즈 정보를 보여주는 패턴.","description":"차트 자체는 간결하게 유지하면서 hover나 focus 시점에 정확한 날짜, 값, 비교 정보를 제공한다.","visual_anatomy":["hovered point","floating tooltip","series markers","formatted values"],"when_to_use":["차트 위에서 정확한 값을 읽어야 할 때"],"anti_use":["항상 보여야 하는 핵심 수치는 card header나 metric-card에 둔다"],"prompt_phrases":["차트에 hover하면 값과 범례가 나오는 chart tooltip pattern을 넣어줘"]},{"id":"chart-kpi-card","status":"draft","category":"data-display","group":"data-metrics-charts","kind":"block","ko":{"name":"KPI 차트 카드","aliases":["chart KPI card","metric chart card","dashboard chart card"]},"en":{"name":"KPI chart card","aliases":["Chart KPI card","Metric chart card","Dashboard chart card"]},"one_liner":"핵심 숫자, 변화율, 작은 차트를 한 카드 안에 묶어 보여주는 대시보드 카드.","description":"대시보드 상단에서 숫자만 있는 metric-card보다 추세까지 함께 보여주고 싶을 때 쓴다.","visual_anatomy":["KPI value","change badge","compact chart","period label"],"when_to_use":["핵심 지표와 추세를 한눈에 보여줘야 할 때"],"anti_use":["상세 분석이 필요하면 더 큰 line-chart-card나 area-chart-card를 쓴다"],"prompt_phrases":["KPI 숫자와 작은 추세 차트가 있는 chart KPI card를 만들어줘"]},{"id":"chat-message","status":"draft","category":"data-display","group":"data-chat-messaging","kind":"component","ko":{"name":"채팅 메시지","aliases":["message","chat message","대화 메시지"]},"en":{"name":"Chat message","aliases":["Message","Conversation message"]},"one_liner":"대화에서 한 발화의 아바타, 정렬, 말풍선, 헤더, 푸터를 함께 배치하는 메시지 행.","description":"사람과 AI, 사용자와 상담원처럼 대화 주체가 번갈아 등장하는 화면에서 한 메시지 단위를 구성한다.","visual_anatomy":["avatar slot","message content","optional header","bubble surface","footer or actions"],"when_to_use":["채팅이나 AI 대화 화면에서 한 발화를 행 단위로 보여줄 때","보낸 사람과 받은 사람의 정렬을 구분해야 할 때"],"anti_use":["단순 알림 문구는 message-bar나 toast가 더 적합하다"],"prompt_phrases":["아바타와 말풍선이 있는 chat message를 만들어줘"]},{"id":"chat-bubble","status":"draft","category":"data-display","group":"data-chat-messaging","kind":"component","ko":{"name":"채팅 말풍선","aliases":["bubble","message bubble","대화 말풍선"]},"en":{"name":"Chat bubble","aliases":["Bubble","Message bubble"]},"one_liner":"채팅 메시지의 실제 텍스트나 콘텐츠를 감싸는 둥근 말풍선 표면.","description":"메시지 행 안에서 발화 내용만 시각적으로 묶고, 보낸 사람에 따라 좌우 정렬이나 색상을 다르게 둔다.","visual_anatomy":["rounded surface","bubble content","start or end alignment","optional grouped bubbles"],"when_to_use":["같은 대화 안에서 메시지 본문을 명확히 구분해야 할 때"],"anti_use":["카드형 정보 묶음은 card나 chat-attachment가 더 적합하다"],"prompt_phrases":["사용자 메시지는 오른쪽에 정렬된 chat bubble로 보여줘"]},{"id":"chat-attachment","status":"draft","category":"data-display","group":"data-chat-messaging","kind":"component","ko":{"name":"채팅 첨부 파일","aliases":["attachment","message attachment","대화 첨부"]},"en":{"name":"Chat attachment","aliases":["Attachment","Message attachment"]},"one_liner":"채팅 메시지나 입력창 안에서 파일, 이미지, 업로드 상태와 액션을 보여주는 첨부 요소.","description":"파일명, 형식, 용량, 미리보기, 제거/다운로드 행동을 한 덩어리로 보여준다.","visual_anatomy":["media icon or preview","file title","metadata","upload state","actions"],"when_to_use":["대화 중 파일이나 이미지를 주고받을 때","업로드 진행률이나 실패 상태를 첨부 카드 안에 표시해야 할 때"],"anti_use":["일반 파일 목록 화면은 attachment-list나 file-card가 더 적합하다"],"prompt_phrases":["채팅 메시지 아래에 PDF chat attachment를 보여줘"]},{"id":"conversation-marker","status":"draft","category":"feedback","group":"feedback-status-notifications","kind":"component","ko":{"name":"대화 마커","aliases":["marker","conversation marker","대화 상태 마커"]},"en":{"name":"Conversation marker","aliases":["Marker","Conversation status marker"]},"one_liner":"대화 흐름 사이에 상태, 시스템 노트, 구분선을 인라인으로 표시하는 작은 행.","description":"대화 압축, 도구 실행, 파일 탐색, 날짜 구분처럼 메시지는 아니지만 흐름 안에 남겨야 하는 사건을 표시한다.","visual_anatomy":["optional icon","marker content","inline or bordered row","optional separator lines"],"when_to_use":["채팅 중 상태 업데이트나 시스템 이벤트를 메시지 사이에 보여줄 때","스트리밍 중 진행 상태를 접근성 있게 알릴 때"],"anti_use":["사용자 발화는 chat-message를 쓴다"],"prompt_phrases":["대화 중간에 파일 4개를 읽었다는 conversation marker를 넣어줘"]},{"id":"message-scroller","status":"draft","category":"structure","group":"structure-content-elements","kind":"component","ko":{"name":"메시지 스크롤러","aliases":["message scroller","chat scroller","대화 스크롤 컨테이너"]},"en":{"name":"Message scroller","aliases":["Chat scroller","Conversation scroll container"]},"one_liner":"스트리밍 채팅에서 스크롤 위치, 새 메시지 따라가기, 이전 기록 로딩을 관리하는 대화 컨테이너.","description":"AI 답변이 스트리밍되는 동안 사용자가 읽던 위치를 보존하고, 필요할 때만 최신 메시지로 이동하도록 돕는다.","visual_anatomy":["scroll container","message stack","jump to latest control","history loading boundary"],"when_to_use":["AI 채팅이나 긴 대화에서 새 메시지와 이전 기록을 안정적으로 스크롤해야 할 때"],"anti_use":["짧은 고정 목록은 scroll-area만으로 충분하다"],"prompt_phrases":["스트리밍 답변 중에도 위치가 튀지 않는 message scroller를 만들어줘"]},{"id":"react-hook-form-pattern","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"React Hook Form 패턴","aliases":["react hook form","RHF form","controller form"]},"en":{"name":"React Hook Form pattern","aliases":["RHF form","Controller form"]},"one_liner":"React Hook Form의 `useForm`과 `Controller`를 shadcn Field 구성과 연결하는 폼 구현 패턴.","description":"Zod 같은 스키마 검증, controlled input, 필드 오류 표시를 조합해 접근성 있는 폼을 만든다.","visual_anatomy":["form schema","useForm instance","Controller","Field and FieldError","submit action"],"when_to_use":["React Hook Form 기반으로 성능 좋은 클라이언트 폼을 구현할 때"],"anti_use":["라이브러리 없는 단순 폼이면 기본 field-group만으로 충분할 수 있다"],"prompt_phrases":["React Hook Form과 Zod로 검증하는 form pattern을 만들어줘"]},{"id":"tanstack-form-pattern","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"TanStack Form 패턴","aliases":["tanstack form","headless form","render prop form"]},"en":{"name":"TanStack Form pattern","aliases":["Headless form","Render prop form"]},"one_liner":"TanStack Form의 headless form state와 shadcn Field UI를 연결하는 폼 구현 패턴.","description":"`form.Field` 렌더 prop으로 필드 상태와 오류를 읽고, Zod 검증과 실시간 피드백을 조합한다.","visual_anatomy":["useForm instance","form.Field render prop","field state","validation errors","accessible Field UI"],"when_to_use":["필드 상태를 세밀하게 제어하는 headless 폼이 필요할 때"],"anti_use":["React Hook Form 기반 코드베이스라면 react-hook-form-pattern이 더 자연스럽다"],"prompt_phrases":["TanStack Form으로 실시간 검증이 있는 form pattern을 만들어줘"]},{"id":"formisch-form-pattern","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"Formisch 폼 패턴","aliases":["formisch form","valibot form","schema-first form"]},"en":{"name":"Formisch form pattern","aliases":["Valibot form","Schema-first form"]},"one_liner":"Formisch와 Valibot을 사용해 스키마를 중심으로 타입 안전한 폼을 만드는 패턴.","description":"Formisch의 form store, render-prop field, Valibot schema를 shadcn Field 구성과 함께 사용한다.","visual_anatomy":["Valibot schema","Formisch form store","render-prop field","Field validation state","reset and submit actions"],"when_to_use":["Valibot 기반의 가벼운 schema-first 폼을 선호할 때"],"anti_use":["팀 표준이 Zod와 React Hook Form이면 react-hook-form-pattern이 더 익숙하다"],"prompt_phrases":["Formisch와 Valibot으로 schema-first form pattern을 만들어줘"]},{"id":"scroll-fade","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"스크롤 페이드","aliases":["scroll fade","edge fade","스크롤 가장자리 페이드"]},"en":{"name":"Scroll fade","aliases":["Edge fade","Scroll edge fade"]},"one_liner":"스크롤 가능한 영역의 가장자리에 페이드 효과를 넣어 더 볼 콘텐츠가 있음을 암시하는 시각 효과.","description":"가로 첨부 목록, 채팅 기록, 카드 레일처럼 경계 밖 콘텐츠가 이어지는 영역에서 스크롤 가능성을 부드럽게 보여준다.","visual_anatomy":["scroll container","fading edge","clipped content","optional snap row"],"when_to_use":["스크롤바 없이도 추가 콘텐츠가 있음을 알려야 할 때"],"anti_use":["콘텐츠가 잘리면 안 되는 핵심 정보 영역에는 쓰지 않는다"],"prompt_phrases":["가로 카드 목록 양끝에 scroll fade를 넣어줘"]},{"id":"shimmer-effect","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"쉬머 효과","aliases":["shimmer","shimmer text","반짝임 로딩"]},"en":{"name":"Shimmer effect","aliases":["Shimmer","Shimmer text"]},"one_liner":"텍스트나 로딩 표면 위에 은은히 흐르는 빛 효과를 주어 진행 중 상태를 표현하는 효과.","description":"AI가 생각 중이거나 파일을 처리 중일 때 정적인 로딩 문구보다 생동감 있게 진행 상태를 보여준다.","visual_anatomy":["shimmering text","animated highlight","loading marker","muted base color"],"when_to_use":["스트리밍이나 처리 중 상태를 짧은 문구로 보여줄 때","conversation-marker나 skeleton과 함께 진행감을 줄 때"],"anti_use":["완료된 정보나 긴 본문에는 주의를 분산시킨다"],"prompt_phrases":["Thinking 문구에 shimmer effect를 적용해줘"]},{"id":"floating-label-field","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"플로팅 라벨 필드","aliases":["floating label","떠오르는 라벨","플로팅 라벨 입력"]},"en":{"name":"Floating label field","aliases":["Floating label input","Float label field"]},"one_liner":"입력을 시작하면 placeholder처럼 보이던 라벨이 입력창 위로 작게 떠오르는 필드.","description":"라벨 공간을 줄이면서도 입력 후에 필드 의미를 계속 남겨야 할 때 쓰는 입력 조합이다.","visual_anatomy":["input container","label that moves above value","current value","focus or filled state"],"when_to_use":["좁은 폼에서 라벨을 항상 보이게 유지하고 싶을 때","입력값이 있어도 필드 의미를 잃지 않아야 할 때"],"anti_use":["접근성과 가독성이 더 중요하면 일반 label + text-field가 더 명확하다"],"prompt_phrases":["이메일 입력창을 floating label field로 만들어줘"],"related":[{"id":"text-field","relation":"compare","note":"일반 text field는 라벨 위치가 고정되고, floating label field는 입력 상태에 따라 라벨 위치가 바뀐다."}]},{"id":"clearable-input","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"지우기 버튼 입력창","aliases":["clearable input","지울 수 있는 입력창","입력 지우기 버튼"]},"en":{"name":"Clearable input","aliases":["Input with clear button","Clear field"]},"one_liner":"입력값이 있을 때 오른쪽에 X 버튼을 보여 한 번에 내용을 비우는 입력창.","description":"검색어, 필터 키워드, 임시 입력처럼 사용자가 자주 다시 입력하는 필드에서 입력 삭제 행동을 가까이 둔다.","visual_anatomy":["text input","current value","clear icon button","empty or filled state"],"when_to_use":["검색어나 필터 값을 빠르게 지워야 할 때","모바일에서 긴 값을 백스페이스로 지우기 번거로울 때"],"anti_use":["저장된 중요한 값을 실수로 지우면 안 되는 필드에는 쓰지 않는다"],"prompt_phrases":["검색창 오른쪽에 입력을 지우는 clear button을 넣어줘"],"related":[{"id":"search-field","relation":"compare","note":"search field는 검색 목적의 입력이고, clearable input은 값 삭제 행동이 핵심이다."}]},{"id":"inline-submit-field","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"인라인 제출 필드","aliases":["inline submit input","입력창 안 제출 버튼","붙어 있는 제출 필드"]},"en":{"name":"Inline submit field","aliases":["Input with inline submit","Joined submit input"]},"one_liner":"입력창과 제출 버튼을 한 줄 안에 붙여 짧은 값을 바로 제출하게 하는 필드.","description":"이메일 구독, 초대 코드, 쿠폰 코드처럼 값 하나를 입력하고 즉시 적용하는 작은 폼에 쓴다.","visual_anatomy":["input value","attached submit button","shared border or grouped surface","optional loading state"],"when_to_use":["값 하나를 입력하고 바로 적용하는 마이크로 폼이 필요할 때","입력과 CTA가 분리되면 흐름이 느려지는 경우"],"anti_use":["여러 필드를 검토한 뒤 제출해야 하는 폼에는 일반 form layout이 더 적합하다"],"prompt_phrases":["이메일 구독을 inline submit field로 만들어줘"],"related":[{"id":"input-group","relation":"compare","note":"input group은 prefix/suffix 정보를 붙이는 조합이고, inline submit field는 제출 행동을 입력 옆에 붙인다."}]},{"id":"character-count-field","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"글자 수 카운터 필드","aliases":["character count field","글자수 표시 입력창","입력 길이 카운터"]},"en":{"name":"Character count field","aliases":["Input with character counter","Textarea counter"]},"one_liner":"입력 가능한 길이와 현재 글자 수를 입력창 아래나 오른쪽에 보여주는 필드.","description":"제목, 소개글, 메시지처럼 길이 제한이 있는 입력에서 사용자가 제한에 가까워지는지 확인하게 한다.","visual_anatomy":["input or textarea","current count","maximum count","warning threshold"],"when_to_use":["글자 수 제한이 명확한 입력을 받을 때","제한 초과 전에 사용자가 스스로 조절해야 할 때"],"anti_use":["길이 제한이 없거나 중요하지 않으면 보조 텍스트가 더 단순하다"],"prompt_phrases":["소개글 textarea 아래에 120자 character counter를 보여줘"]},{"id":"password-strength-meter","status":"draft","category":"feedback","group":"feedback-status-notifications","kind":"component","ko":{"name":"비밀번호 강도 미터","aliases":["password strength","비밀번호 강도","password meter"]},"en":{"name":"Password strength meter","aliases":["Password meter","Strength meter"]},"one_liner":"비밀번호 입력값의 강도를 막대, 단계, 안내 문구로 보여주는 피드백 요소.","description":"사용자가 더 안전한 비밀번호를 만들도록 길이, 다양성, 예측 가능성 같은 기준을 입력 중에 알려준다.","visual_anatomy":["password field","strength bars","strength label","requirement hints"],"when_to_use":["새 비밀번호를 만들거나 변경하는 폼에서 보안 기준을 안내할 때"],"anti_use":["로그인처럼 이미 만든 비밀번호를 입력하는 화면에는 보통 필요 없다"],"prompt_phrases":["회원가입 비밀번호 필드 아래에 password strength meter를 넣어줘"],"related":[{"id":"password-field","relation":"compare","note":"password field는 값을 숨기는 입력이고, password strength meter는 새 비밀번호 품질을 알려주는 피드백이다."}]},{"id":"fieldset","status":"draft","category":"input","group":"input-text","kind":"component","ko":{"name":"필드셋","aliases":["fieldset","필드 묶음","폼 그룹 제목"]},"en":{"name":"Fieldset","aliases":["Field set","Form fieldset"]},"one_liner":"관련된 여러 입력을 제목과 설명으로 묶는 폼 그룹.","description":"주소, 결제 정보, 알림 설정처럼 한 주제로 묶인 필드들을 시각적·의미적으로 그룹화한다.","visual_anatomy":["legend or group title","description","grouped fields","optional border or section spacing"],"when_to_use":["폼이 길고 입력들을 의미 있는 섹션으로 나눠야 할 때","체크박스나 라디오 묶음에 공통 질문이 있을 때"],"anti_use":["입력이 하나뿐이면 label과 helper text로 충분하다"],"prompt_phrases":["배송 주소 입력들을 fieldset으로 묶고 제목을 붙여줘"],"related":[{"id":"field-group","relation":"compare","note":"field group은 시각적 묶음에 가깝고, fieldset은 여러 필드의 의미 그룹과 legend가 핵심이다."}]},{"id":"checkbox-card","status":"draft","category":"selection","group":"selection-options","kind":"component","ko":{"name":"체크박스 카드","aliases":["checkbox card","선택 카드","카드형 체크박스"]},"en":{"name":"Checkbox card","aliases":["Selectable checkbox card","Card checkbox"]},"one_liner":"카드 전체를 체크박스 선택 영역으로 만들어 옵션 설명과 선택 상태를 함께 보여주는 요소.","description":"요금제 기능, 알림 채널, 권한 범위처럼 옵션마다 설명이 필요할 때 체크박스를 카드 형태로 확장한다.","visual_anatomy":["card surface","checkbox control","option title","option description","selected border"],"when_to_use":["여러 옵션을 동시에 고르되 각 옵션 설명이 길 때","작은 체크박스만으로는 선택 영역이 너무 좁을 때"],"anti_use":["옵션 텍스트가 짧으면 checkbox나 checkbox group이 더 단순하다"],"prompt_phrases":["알림 채널을 checkbox card 목록으로 보여줘"],"related":[{"id":"checkbox","relation":"compare","note":"checkbox card는 체크박스를 카드 표면으로 확장해 설명과 큰 클릭 영역을 제공한다."}]},{"id":"date-preset-picker","status":"draft","category":"input","group":"input-pickers","kind":"component","ko":{"name":"날짜 프리셋 선택기","aliases":["date preset picker","빠른 날짜 선택","기간 프리셋"]},"en":{"name":"Date preset picker","aliases":["Date picker with presets","Range presets"]},"one_liner":"직접 날짜를 고르기 전에 오늘, 이번 주, 지난 30일 같은 빠른 기간을 제공하는 날짜 선택기.","description":"대시보드, 로그, 매출 조회처럼 반복적으로 쓰는 기간을 빠르게 고르게 한다.","visual_anatomy":["date picker trigger","preset list","calendar panel","selected range"],"when_to_use":["사용자가 자주 쓰는 기간을 반복해서 선택할 때","직접 달력을 조작하기 전에 빠른 선택지를 제공하고 싶을 때"],"anti_use":["임의의 하루만 고르면 date-picker가 충분하다"],"prompt_phrases":["지난 7일과 이번 달 프리셋이 있는 date preset picker를 넣어줘"],"related":[{"id":"date-range-picker","relation":"compare","note":"date range picker는 기간 선택 자체이고, date preset picker는 자주 쓰는 기간 shortcut이 핵심이다."}]},{"id":"navbar-menu","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"내비게이션 메뉴","aliases":["navbar menu","상단 내비 메뉴","헤더 메뉴"]},"en":{"name":"Navbar menu","aliases":["Header navigation menu","Top nav menu"]},"one_liner":"상단 내비게이션 바 안에서 주요 섹션 링크와 드롭다운 항목을 보여주는 메뉴 영역.","description":"제품, 가격, 문서, 리소스처럼 사이트의 큰 목적지를 헤더 안에서 빠르게 탐색하게 한다.","visual_anatomy":["navbar container","top-level links","active item","optional dropdown panel"],"when_to_use":["웹사이트의 상위 섹션을 헤더에서 탐색해야 할 때"],"anti_use":["앱 내부의 깊은 좌측 메뉴는 sidebar-nav나 navigation-rail이 더 적합하다"],"prompt_phrases":["헤더에 제품과 문서 링크가 있는 navbar menu를 넣어줘"],"related":[{"id":"navigation-bar","relation":"compare","note":"navigation bar는 전체 헤더 구조이고, navbar menu는 그 안의 링크/메뉴 묶음이다."}]},{"id":"nav-user-menu","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"사용자 메뉴","aliases":["user menu","profile menu","계정 메뉴"]},"en":{"name":"User menu","aliases":["Profile menu","Account menu"]},"one_liner":"아바타나 사용자 이름을 눌러 계정, 설정, 로그아웃 같은 개인 메뉴를 여는 패턴.","description":"전역 내비게이션에서 현재 사용자와 계정 관련 행동을 한곳에 모은다.","visual_anatomy":["avatar or name trigger","dropdown menu","account metadata","menu actions"],"when_to_use":["로그인된 앱에서 계정 설정과 로그아웃을 제공할 때"],"anti_use":["알림 목록은 notification-center가 더 적합하다"],"prompt_phrases":["오른쪽 상단 아바타를 누르면 user menu가 열리게 해줘"],"related":[{"id":"dropdown-menu","relation":"compare","note":"user menu는 dropdown-menu의 계정 전용 사용 패턴이다."}]},{"id":"breadcrumb-overflow","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"축약 브레드크럼","aliases":["breadcrumb overflow","collapsed breadcrumb","생략 경로"]},"en":{"name":"Breadcrumb overflow","aliases":["Collapsed breadcrumb","Overflow breadcrumb"]},"one_liner":"긴 경로의 중간 항목을 말줄임이나 메뉴로 접어 좁은 공간에서도 현재 위치를 보여주는 브레드크럼.","description":"폴더, 문서, 설정처럼 계층이 깊은 화면에서 상위 경로를 모두 나열하지 않고 필요한 만큼만 펼치게 한다.","visual_anatomy":["first crumb","overflow trigger","current crumb","hidden crumb menu"],"when_to_use":["브레드크럼 경로가 길어 헤더 폭을 밀어낼 때"],"anti_use":["경로가 짧으면 일반 breadcrumb가 더 명확하다"],"prompt_phrases":["긴 문서 경로는 가운데를 접은 breadcrumb overflow로 보여줘"],"related":[{"id":"breadcrumbs-menu","relation":"compare","note":"breadcrumbs-menu는 특정 crumb의 형제 항목을 고르는 메뉴이고, breadcrumb overflow는 긴 경로를 접는 구조다."}]},{"id":"popover-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"팝오버 폼","aliases":["popover form","팝오버 입력폼","작은 플로팅 폼"]},"en":{"name":"Popover form","aliases":["Floating form","Inline popover form"]},"one_liner":"버튼이나 항목을 눌렀을 때 작은 팝오버 안에서 짧은 입력과 저장 행동을 처리하는 폼.","description":"이름 변경, 빠른 필터 저장, 라벨 추가처럼 현재 화면을 떠나지 않아도 되는 작은 입력 작업에 쓴다.","visual_anatomy":["trigger","floating popover surface","compact fields","save or cancel action"],"when_to_use":["짧은 값을 빠르게 입력하고 현재 맥락으로 돌아와야 할 때"],"anti_use":["검토가 필요한 긴 폼은 dialog나 drawer가 더 안전하다"],"prompt_phrases":["필터 저장 버튼을 누르면 이름을 입력하는 popover form을 열어줘"],"related":[{"id":"popover","relation":"compare","note":"popover는 떠 있는 표면 자체이고, popover form은 그 안에서 입력과 제출까지 처리하는 패턴이다."}]},{"id":"disclosure-card","status":"draft","category":"structure","group":"structure-panels","kind":"component","ko":{"name":"펼침 카드","aliases":["disclosure card","expandable card","접히는 카드"]},"en":{"name":"Disclosure card","aliases":["Expandable card","Collapsible card"]},"one_liner":"카드 헤더를 눌러 세부 내용을 펼치거나 접는 카드형 disclosure.","description":"설정 요약, FAQ, 요금제 세부 기능처럼 기본 정보는 보이고 자세한 내용은 필요할 때 펼치게 한다.","visual_anatomy":["card header","chevron indicator","summary content","expandable body"],"when_to_use":["카드 목록에서 각 항목의 상세 정보를 필요할 때만 보여줄 때"],"anti_use":["단순 텍스트 목록이면 accordion이 더 표준적이다"],"prompt_phrases":["설정 항목을 펼칠 수 있는 disclosure card로 보여줘"],"related":[{"id":"disclosure","relation":"compare","note":"disclosure는 펼침/접힘 동작이고, disclosure card는 그 동작을 카드 표면에 적용한 조합이다."}]},{"id":"pagination-jump","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"페이지 점프 입력","aliases":["pagination jump","page jump","페이지 번호 입력"]},"en":{"name":"Pagination jump","aliases":["Page jump input","Go to page"]},"one_liner":"페이지네이션 옆에 페이지 번호를 직접 입력해 특정 페이지로 이동하는 컨트롤.","description":"데이터가 많아 숫자 버튼만으로는 멀리 이동하기 어려울 때 사용자가 페이지 번호를 직접 입력하게 한다.","visual_anatomy":["pagination controls","page number input","go action","total pages label"],"when_to_use":["수십 페이지 이상을 빠르게 이동해야 할 때"],"anti_use":["페이지 수가 적으면 일반 pagination이 충분하다"],"prompt_phrases":["테이블 하단에 원하는 페이지로 바로 가는 pagination jump를 넣어줘"],"related":[{"id":"pagination","relation":"compare","note":"pagination jump는 일반 페이지 이동에 직접 번호 입력 행동을 추가한다."}]},{"id":"avatar-stack","status":"draft","category":"data-display","group":"data-people-integrations","kind":"component","ko":{"name":"아바타 스택","aliases":["avatar stack","겹친 아바타","팀 아바타"]},"en":{"name":"Avatar stack","aliases":["Avatar group","Stacked avatars"]},"one_liner":"여러 사용자의 아바타를 겹쳐 보여 팀, 참여자, 공유 대상을 요약하는 요소.","description":"모든 사람을 목록으로 펼치지 않고 참여자 수와 일부 대표 사용자를 작게 보여준다.","visual_anatomy":["overlapping avatars","border ring","overflow count","optional tooltip"],"when_to_use":["카드나 테이블 행에서 참여자 여러 명을 compact하게 보여줄 때"],"anti_use":["이름과 역할을 읽어야 하면 team-member-row나 table이 더 적합하다"],"prompt_phrases":["프로젝트 카드 오른쪽에 참여자 avatar stack을 넣어줘"],"related":[{"id":"avatar","relation":"compare","note":"avatar는 한 사람이고, avatar stack은 여러 사람을 겹쳐 요약한다."}]},{"id":"status-avatar","status":"draft","category":"data-display","group":"data-people-integrations","kind":"component","ko":{"name":"상태 아바타","aliases":["status avatar","presence avatar","접속 상태 아바타"]},"en":{"name":"Status avatar","aliases":["Presence avatar","Avatar with status"]},"one_liner":"아바타 위에 온라인, 자리비움, 오류 같은 작은 상태 점을 붙인 사용자 표시.","description":"채팅, 협업, 담당자 목록에서 사람 자체와 현재 상태를 한 번에 보여준다.","visual_anatomy":["avatar image or initials","status dot","status color","optional accessible label"],"when_to_use":["사용자 목록에서 현재 접속 상태나 가용성을 보여줄 때"],"anti_use":["상태만 보여주면 status-indicator가 더 직접적이다"],"prompt_phrases":["담당자 아바타에 온라인 상태 dot이 있는 status avatar를 넣어줘"],"related":[{"id":"status-indicator","relation":"compare","note":"status indicator는 상태만 표시하고, status avatar는 사람 식별과 상태를 결합한다."}]},{"id":"badge-group","status":"draft","category":"data-display","group":"data-people-integrations","kind":"component","ko":{"name":"배지 그룹","aliases":["badge group","태그 배지 묶음","상태 배지 묶음"]},"en":{"name":"Badge group","aliases":["Badge cluster","Tag badge group"]},"one_liner":"여러 배지를 한 줄이나 묶음으로 배치해 속성, 상태, 태그를 compact하게 보여주는 요소.","description":"카드나 테이블 행에서 카테고리, 상태, 권한 같은 여러 짧은 메타데이터를 함께 표시한다.","visual_anatomy":["badge chips","wrapping row","optional overflow count","consistent color semantics"],"when_to_use":["한 항목에 여러 짧은 속성을 보여줘야 할 때"],"anti_use":["사용자가 직접 선택하거나 제거해야 하면 chip이나 tag-input이 더 적합하다"],"prompt_phrases":["카드 상단에 New, Beta, Admin badge group을 보여줘"],"related":[{"id":"badge","relation":"compare","note":"badge group은 여러 badge를 의미 있는 묶음으로 정렬한다."}]},{"id":"meter","status":"draft","category":"feedback","group":"feedback-status-notifications","kind":"component","ko":{"name":"미터","aliases":["meter","수치 미터","사용량 미터"]},"en":{"name":"Meter","aliases":["Usage meter","Gauge meter"]},"one_liner":"알려진 범위 안에서 현재 값이 어느 정도인지 보여주는 수치 표시 막대.","description":"저장공간, 할당량, 품질 점수처럼 전체 범위와 현재 값의 비율을 보여준다.","visual_anatomy":["value label","minimum and maximum range","filled track","threshold color"],"when_to_use":["진행 중인 작업보다 현재 사용량이나 상태 값을 보여줄 때"],"anti_use":["작업 완료 진행률은 progress-bar가 더 적합하다"],"prompt_phrases":["저장공간 사용량을 72% meter로 보여줘"],"related":[{"id":"progress-bar","relation":"compare","note":"progress bar는 작업 진행을, meter는 정해진 범위 안의 현재 값을 보여준다."}]},{"id":"table-row-actions","status":"draft","category":"action","group":"action-command-bars","kind":"component","ko":{"name":"테이블 행 액션","aliases":["table row actions","row actions","행 작업 메뉴"]},"en":{"name":"Table row actions","aliases":["Row actions","Row action menu"]},"one_liner":"테이블의 각 행 끝에 보기, 수정, 삭제 같은 해당 행 전용 작업을 배치하는 액션 영역.","description":"데이터 행마다 가능한 작업이 다를 때 메뉴 버튼이나 아이콘 버튼 묶음으로 행 단위 행동을 제공한다.","visual_anatomy":["table row","trailing action button","action menu","destructive action separation"],"when_to_use":["목록 행마다 세부 보기, 편집, 삭제 같은 작업을 제공할 때"],"anti_use":["여러 행을 한 번에 처리하면 bulk-action-bar가 더 적합하다"],"prompt_phrases":["사용자 테이블 각 행 끝에 table row actions 메뉴를 넣어줘"],"related":[{"id":"data-table-toolbar","relation":"compare","note":"data-table-toolbar는 테이블 전체 작업이고, table row actions는 개별 행 작업이다."}]},{"id":"empty-filter-state","status":"draft","category":"feedback","group":"feedback-empty-error","kind":"component","ko":{"name":"필터 결과 없음 상태","aliases":["empty filter state","필터 빈 상태","검색 결과 없음"]},"en":{"name":"Empty filter state","aliases":["Filtered empty state","No matching results"]},"one_liner":"필터나 검색 조건 때문에 결과가 없을 때 조건 해제와 재검색 행동을 함께 보여주는 빈 상태.","description":"데이터가 아예 없는 것이 아니라 현재 조건에 맞는 항목이 없다는 점을 알려주고 필터 초기화를 돕는다.","visual_anatomy":["empty illustration or icon","filter-specific message","clear filters action","optional suggested query"],"when_to_use":["검색어 또는 필터 적용 후 결과가 0개일 때"],"anti_use":["데이터 자체가 없으면 empty-state나 empty-table이 더 적합하다"],"prompt_phrases":["필터 결과가 없을 때 clear filters 버튼이 있는 empty filter state를 보여줘"],"related":[{"id":"empty-state","relation":"compare","note":"empty filter state는 조건 때문에 비어 있음을 설명하고, 조건 해제를 주요 행동으로 둔다."}]},{"id":"notification-inbox-row","status":"draft","category":"data-display","group":"data-chat-messaging","kind":"component","ko":{"name":"알림 인박스 행","aliases":["notification inbox row","알림 행","읽지 않은 알림 행"]},"en":{"name":"Notification inbox row","aliases":["Notification row","Inbox notification item"]},"one_liner":"알림함 안에서 읽음 상태, 아이콘, 본문, 시간, 행 작업을 한 줄에 보여주는 항목.","description":"여러 알림을 목록으로 스캔하고 읽음/안읽음 상태와 관련 작업을 바로 파악하게 한다.","visual_anatomy":["unread marker","notification icon","title and body","timestamp","row action"],"when_to_use":["알림 센터나 인박스에서 알림을 목록으로 보여줄 때"],"anti_use":["일회성 완료 메시지는 toast가 더 적합하다"],"prompt_phrases":["알림함에 unread dot이 있는 notification inbox row를 보여줘"],"related":[{"id":"notification-list","relation":"compare","note":"notification-list는 목록 전체이고, notification inbox row는 그 안의 개별 행 구조다."}]},{"id":"progress-stepper","status":"draft","category":"feedback","group":"feedback-status-notifications","kind":"component","ko":{"name":"진행 스테퍼","aliases":["progress stepper","단계 진행 표시","step progress"]},"en":{"name":"Progress stepper","aliases":["Step progress","Step indicator"]},"one_liner":"여러 단계 중 현재 단계와 완료된 단계를 점, 선, 라벨로 보여주는 진행 표시.","description":"주문, 온보딩, 설정 마법사처럼 순서가 있는 흐름에서 전체 진행 위치를 보여준다.","visual_anatomy":["ordered steps","completed step marker","active step marker","connector line"],"when_to_use":["사용자가 다단계 흐름에서 현재 위치를 알아야 할 때"],"anti_use":["단계 이동 자체가 핵심이면 stepper나 wizard가 더 적합하다"],"prompt_phrases":["결제 흐름 상단에 현재 단계가 보이는 progress stepper를 넣어줘"],"related":[{"id":"stepper","relation":"compare","note":"stepper는 단계 이동 컨트롤이고, progress stepper는 진행 상태 표시가 중심이다."}]},{"id":"pricing-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"가격 섹션","aliases":["pricing section","요금제 섹션","가격표 블록"]},"en":{"name":"Pricing section","aliases":["Pricing block","Plans section"]},"one_liner":"여러 요금제 카드와 추천 플랜, CTA를 한 화면 섹션으로 묶은 가격 안내 블록.","description":"랜딩 페이지나 SaaS 구매 흐름에서 무료/프로/팀 요금제를 비교하고 선택하게 한다.","visual_anatomy":["section heading","pricing cards","highlighted plan","feature rows","CTA buttons"],"when_to_use":["서비스 요금제를 비교하고 가입 또는 업그레이드를 유도할 때"],"anti_use":["단일 상품 가격만 보여주면 price-card가 충분하다"],"prompt_phrases":["요금제 3개가 나란히 있는 pricing section을 만들어줘"],"related":[{"id":"price-card","relation":"compare","note":"price-card는 단일 가격 카드이고 pricing-section은 여러 플랜 비교 섹션이다."}]},{"id":"testimonial-section","status":"draft","category":"structure","group":"structure-misc","kind":"block","ko":{"name":"후기 섹션","aliases":["testimonial section","고객 후기 섹션","리뷰 블록"]},"en":{"name":"Testimonial section","aliases":["Testimonials block","Review section"]},"one_liner":"고객 인용문, 이름, 역할, 아바타를 묶어 신뢰를 보여주는 랜딩 페이지 섹션.","description":"제품의 사회적 증거를 보여주기 위해 여러 고객 후기를 카드나 그리드로 배치한다.","visual_anatomy":["quote cards","avatar","name and role","rating optional","section heading"],"when_to_use":["랜딩 페이지에서 실제 사용자 만족이나 신뢰를 보여줄 때"],"anti_use":["상품별 개별 리뷰 목록은 review-list나 data table 형태가 더 적합하다"],"prompt_phrases":["고객 인용문 3개가 있는 testimonial section을 넣어줘"]},{"id":"feature-grid-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"기능 그리드 섹션","aliases":["feature grid","기능 카드 그리드","feature section"]},"en":{"name":"Feature grid section","aliases":["Feature cards section","Feature block"]},"one_liner":"제품 기능 여러 개를 아이콘, 제목, 설명 카드의 그리드로 보여주는 섹션.","description":"랜딩 페이지에서 핵심 기능을 빠르게 훑게 하기 위해 반복 카드로 구성한다.","visual_anatomy":["section heading","feature cards","icon","title","short description"],"when_to_use":["제품의 주요 기능을 3개 이상 한 번에 소개할 때"],"anti_use":["기능 간 수치 비교가 필요하면 feature-comparison이 더 적합하다"],"prompt_phrases":["아이콘과 설명이 있는 feature grid section을 만들어줘"]},{"id":"integration-grid-section","status":"draft","category":"data-display","group":"data-people-integrations","kind":"block","ko":{"name":"연동 그리드 섹션","aliases":["integration grid","integrations section","연동 앱 섹션"]},"en":{"name":"Integration grid section","aliases":["Integrations grid","Logo integration section"]},"one_liner":"외부 서비스 로고와 연동 상태를 카드 그리드로 보여주는 섹션.","description":"제품이 어떤 도구와 연결되는지 보여주고 설치, 연결, 자세히 보기 행동을 제공한다.","visual_anatomy":["integration cards","logo","service name","connection status","action"],"when_to_use":["SaaS 앱에서 지원 연동 목록이나 마켓플레이스를 보여줄 때"],"anti_use":["단일 연동 설정은 integration-card가 더 직접적이다"],"prompt_phrases":["Slack","GitHub","Notion이 있는 integration grid section을 만들어줘"],"related":[{"id":"integration-card","relation":"compare","note":"integration-card는 단일 연동 카드이고 integration-grid-section은 여러 연동을 탐색하는 섹션이다."}]},{"id":"settings-page-layout","status":"draft","category":"structure","group":"structure-app-layout","kind":"block","ko":{"name":"설정 페이지 레이아웃","aliases":["settings page","settings layout","설정 화면 레이아웃"]},"en":{"name":"Settings page layout","aliases":["Settings layout","Settings screen"]},"one_liner":"설정 카테고리 내비게이션과 설정 폼 카드들을 함께 배치한 페이지 구조.","description":"계정, 보안, 결제, 알림처럼 여러 설정 영역을 탐색하고 수정하게 한다.","visual_anatomy":["settings nav","active category","form cards","save actions","helper text"],"when_to_use":["제품 내부에서 사용자가 계정이나 워크스페이스 설정을 관리할 때"],"anti_use":["설정 항목 하나만 바꾸면 popover-form이나 dialog가 더 가볍다"],"prompt_phrases":["왼쪽 설정 메뉴와 오른쪽 form card가 있는 settings page layout을 만들어줘"]},{"id":"profile-settings-form","status":"draft","category":"input","group":"input-auth-forms","kind":"form-pattern","ko":{"name":"프로필 설정 폼","aliases":["profile settings form","프로필 편집 폼","account profile form"]},"en":{"name":"Profile settings form","aliases":["Profile form","Account profile form"]},"one_liner":"이름, 아바타, 소개, 연락처 같은 개인 프로필 정보를 편집하는 설정 폼.","description":"계정 설정 안에서 사용자 정체성 정보를 보여주고 변경 저장 흐름을 제공한다.","visual_anatomy":["avatar upload","name fields","bio field","email field","save button"],"when_to_use":["사용자가 자신의 표시 이름과 프로필 정보를 수정해야 할 때"],"anti_use":["로그인이나 가입 입력은 auth-form 계열이 더 적합하다"],"prompt_phrases":["아바타 업로드와 이름 입력이 있는 profile settings form을 만들어줘"]},{"id":"billing-settings-page","status":"draft","category":"structure","group":"structure-app-layout","kind":"block","ko":{"name":"결제 설정 페이지","aliases":["billing settings","billing page","결제 관리 화면"]},"en":{"name":"Billing settings page","aliases":["Billing page","Subscription settings"]},"one_liner":"현재 플랜, 결제 수단, 청구 내역, 업그레이드 행동을 모은 설정 페이지.","description":"SaaS 앱에서 구독 상태와 결제 관련 작업을 한 화면에서 관리하게 한다.","visual_anatomy":["current plan summary","payment method card","invoices list","upgrade action"],"when_to_use":["사용자가 요금제와 결제 정보를 관리해야 할 때"],"anti_use":["한 장의 결제 요약만 필요하면 billing-summary가 더 단순하다"],"prompt_phrases":["현재 플랜과 invoice row가 있는 billing settings page를 만들어줘"],"related":[{"id":"billing-summary","relation":"compare","note":"billing-summary는 요약 카드이고 billing-settings-page는 결제 관리 화면 전체다."}]},{"id":"onboarding-flow-page","status":"draft","category":"structure","group":"structure-app-layout","kind":"block","ko":{"name":"온보딩 플로우 페이지","aliases":["onboarding flow","onboarding page","초기 설정 흐름"]},"en":{"name":"Onboarding flow page","aliases":["Onboarding page","Setup flow"]},"one_liner":"새 사용자가 제품 사용을 시작하기 위해 단계별 선택과 설정을 완료하는 페이지.","description":"팀 생성, 역할 선택, 데이터 가져오기, 첫 작업 생성처럼 초기 설정을 안내한다.","visual_anatomy":["progress stepper","setup form","choice cards","continue action","skip option"],"when_to_use":["가입 직후 사용자가 첫 성공 경험까지 안내가 필요할 때"],"anti_use":["단순 안내 목록이면 onboarding-checklist가 더 가볍다"],"prompt_phrases":["팀 생성부터 데이터 가져오기까지 이어지는 onboarding flow page를 만들어줘"],"related":[{"id":"wizard","relation":"compare","note":"wizard는 단계형 컨트롤이고 onboarding-flow-page는 첫 사용 설정 경험 전체다."}]},{"id":"newsletter-section","status":"draft","category":"input","group":"input-auth-forms","kind":"block","ko":{"name":"뉴스레터 섹션","aliases":["newsletter section","구독 섹션","이메일 구독 블록"]},"en":{"name":"Newsletter section","aliases":["Email signup section","Subscribe block"]},"one_liner":"이메일 입력과 구독 CTA를 랜딩 페이지 섹션으로 배치한 블록.","description":"방문자가 업데이트, 제품 소식, 리소스를 받기 위해 이메일을 남기게 한다.","visual_anatomy":["section copy","email field","inline submit","privacy note","optional illustration"],"when_to_use":["랜딩 페이지에서 이메일 구독 전환을 유도할 때"],"anti_use":["앱 내부의 작은 이메일 입력은 inline-submit-field가 충분하다"],"prompt_phrases":["랜딩 하단에 이메일 구독 newsletter section을 넣어줘"],"related":[{"id":"inline-submit-field","relation":"compare","note":"inline-submit-field는 입력 조합이고 newsletter-section은 카피와 CTA를 포함한 섹션이다."}]},{"id":"cta-section","status":"draft","category":"action","group":"action-buttons","kind":"block","ko":{"name":"CTA 섹션","aliases":["call to action section","CTA block","행동 유도 섹션"]},"en":{"name":"CTA section","aliases":["Call to action section","CTA block"]},"one_liner":"한 가지 핵심 행동을 유도하기 위해 헤드라인, 설명, 버튼을 크게 배치한 섹션.","description":"랜딩 페이지 중간이나 끝에서 시작하기, 문의하기, 데모 보기 같은 전환 행동을 집중시킨다.","visual_anatomy":["headline","supporting copy","primary CTA","secondary action optional","background"],"when_to_use":["사용자가 다음 행동으로 넘어가도록 명확한 전환 지점이 필요할 때"],"anti_use":["여러 기능을 설명하려면 feature-grid-section이 더 적합하다"],"prompt_phrases":["페이지 하단에 무료로 시작하기 CTA section을 넣어줘"]},{"id":"animated-gradient-background","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"애니메이션 그라디언트 배경","aliases":["animated gradient","움직이는 그라디언트","gradient background"]},"en":{"name":"Animated gradient background","aliases":["Moving gradient background","Gradient animation"]},"one_liner":"배경의 색상 흐름이 천천히 움직이며 화면에 동적인 분위기를 주는 효과.","description":"히어로, 빈 상태, 로딩 화면에서 정적인 배경보다 부드러운 움직임을 줄 때 사용한다.","visual_anatomy":["gradient surface","animated color stops","soft motion","content overlay"],"when_to_use":["랜딩이나 AI 화면에서 배경에 은은한 동적 분위기를 줄 때"],"anti_use":["업무용 밀도 높은 폼이나 표 화면에서는 집중을 방해할 수 있다"],"prompt_phrases":["히어로 배경에 은은한 animated gradient background를 넣어줘"]},{"id":"marquee-row","status":"draft","category":"style","group":"style-decorative-effects","kind":"motion-pattern","ko":{"name":"마키 행","aliases":["marquee row","흐르는 카드 행","자동 스크롤 행","로고 마키"]},"en":{"name":"Marquee row","aliases":["Scrolling marquee","Auto-scrolling row","Logo marquee"]},"one_liner":"로고, 후기, 카드가 가로로 계속 흐르며 반복되는 자동 스크롤 행.","description":"많은 항목을 압축해서 보여주거나 랜딩 페이지에 움직임을 줄 때 사용한다.","visual_anatomy":["horizontal track","repeated items","masked edges","continuous motion"],"when_to_use":["로고 목록이나 후기 카드를 흐르는 형태로 보여줄 때"],"anti_use":["사용자가 항목을 읽고 선택해야 하면 carousel이나 grid가 더 낫다"],"prompt_phrases":["고객 로고가 천천히 흐르는 marquee row를 넣어줘"]},{"id":"border-beam","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"보더 빔","aliases":["border beam","빛나는 테두리","animated border"]},"en":{"name":"Border beam","aliases":["Animated border beam","Glowing border"]},"one_liner":"카드나 버튼 테두리를 따라 빛이 이동하는 강조 효과.","description":"새 기능, 추천 플랜, AI 응답 카드처럼 특정 표면을 은은하게 강조할 때 쓴다.","visual_anatomy":["surface border","moving highlight","rounded corners","focused content"],"when_to_use":["중요한 카드나 CTA를 과하지 않게 강조할 때"],"anti_use":["상태나 오류를 전달해야 하면 alert나 status-indicator가 더 명확하다"],"prompt_phrases":["추천 플랜 카드에 border beam 효과를 넣어줘"]},{"id":"orbiting-icons","status":"draft","category":"style","group":"style-decorative-effects","kind":"motion-pattern","ko":{"name":"궤도 아이콘","aliases":["orbiting icons","orbit icons","회전 아이콘"]},"en":{"name":"Orbiting icons","aliases":["Orbit icons","Icon orbit"]},"one_liner":"중심 대상 주변을 여러 아이콘이 원형 궤도로 배치되거나 회전하는 시각 패턴.","description":"제품이 여러 도구와 연결되거나 중심 기능 주변에 생태계가 있음을 상징적으로 보여준다.","visual_anatomy":["center object","circular orbit","icon nodes","motion path"],"when_to_use":["연동","생태계","AI agent 주변 도구를 시각적으로 보여줄 때"],"anti_use":["정확한 관계나 상태를 읽어야 하면 integration-grid-section이 더 명확하다"],"prompt_phrases":["AI 로고 주변에 도구 아이콘이 도는 orbiting icons를 만들어줘"]},{"id":"spotlight-card","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"스포트라이트 카드","aliases":["spotlight card","마우스 빛 카드","hover spotlight"]},"en":{"name":"Spotlight card","aliases":["Hover spotlight card","Cursor spotlight"]},"one_liner":"마우스 위치나 hover 상태에 따라 카드 표면에 빛 번짐이 나타나는 카드 효과.","description":"기능 카드나 갤러리 카드에 상호작용감을 주되 카드 정보 구조는 유지한다.","visual_anatomy":["card surface","radial highlight","hover area","content stack"],"when_to_use":["마케팅 카드에 hover 반응과 깊이를 주고 싶을 때"],"anti_use":["데이터 테이블이나 반복 업무 UI에서는 시각 noise가 될 수 있다"],"prompt_phrases":["feature card에 hover spotlight card 효과를 넣어줘"]},{"id":"grid-pattern-background","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"그리드 패턴 배경","aliases":["grid pattern background","격자 배경","grid background"]},"en":{"name":"Grid pattern background","aliases":["Grid background","Graph paper background"]},"one_liner":"얇은 격자선을 배경에 깔아 기술적이거나 구조적인 분위기를 주는 배경 패턴.","description":"히어로, 빈 상태, 개발자 도구 화면에서 공간감을 주되 콘텐츠를 방해하지 않게 한다.","visual_anatomy":["repeating grid lines","muted color","content overlay","optional fade mask"],"when_to_use":["기술 제품 랜딩이나 캔버스형 화면의 배경을 만들 때"],"anti_use":["글이 많은 본문이나 폼에서는 가독성을 해칠 수 있다"],"prompt_phrases":["히어로 섹션 뒤에 흐린 grid pattern background를 넣어줘"]},{"id":"typing-text-effect","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"타이핑 텍스트 효과","aliases":["typing effect","타자 효과","typewriter text"]},"en":{"name":"Typing text effect","aliases":["Typewriter effect","Typing animation"]},"one_liner":"글자가 한 글자씩 입력되는 것처럼 나타나는 텍스트 애니메이션.","description":"AI 응답, 히어로 카피, 데모 문구가 생성되거나 말해지는 느낌을 줄 때 사용한다.","visual_anatomy":["text string","cursor","staged reveal","optional loop"],"when_to_use":["AI나 자동 생성 메시지의 등장감을 표현할 때"],"anti_use":["중요 안내문이나 긴 본문에는 읽기 속도를 방해한다"],"prompt_phrases":["AI가 답하는 문구에 typing text effect를 적용해줘"]},{"id":"number-ticker","status":"draft","category":"data-display","group":"data-motion-content","kind":"motion-pattern","ko":{"name":"숫자 티커","aliases":["number ticker","count up","숫자 카운트업"]},"en":{"name":"Number ticker","aliases":["Count up number","Animated number"]},"one_liner":"숫자가 목표 값까지 올라가거나 바뀌며 지표 변화를 보여주는 애니메이션 숫자.","description":"통계, KPI, 사용자 수처럼 숫자 자체를 강조하고 증가감을 보여줄 때 사용한다.","visual_anatomy":["numeric value","animated digits","unit label","optional trend"],"when_to_use":["랜딩 페이지나 대시보드에서 핵심 수치를 강조할 때"],"anti_use":["정확한 표 형식 비교는 table이나 metric-card가 더 적합하다"],"prompt_phrases":["총 사용자 수가 올라가는 number ticker를 넣어줘"]},{"id":"blur-fade-in","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"블러 페이드 인","aliases":["blur fade","blur fade in","흐림 페이드 등장"]},"en":{"name":"Blur fade in","aliases":["Blur fade","Soft reveal"]},"one_liner":"요소가 흐린 상태에서 선명해지며 부드럽게 나타나는 등장 애니메이션.","description":"카드, 이미지, 문단을 순차적으로 드러낼 때 갑작스러운 등장보다 부드러운 인상을 준다.","visual_anatomy":["blurred start","opacity transition","final sharp state","stagger optional"],"when_to_use":["랜딩 페이지 카드나 이미지가 스크롤에 맞춰 등장할 때"],"anti_use":["상태 변화가 즉시 인지되어야 하는 컨트롤에는 쓰지 않는다"],"prompt_phrases":["기능 카드들이 blur fade in으로 순서대로 나타나게 해줘"]},{"id":"animated-shiny-text","status":"draft","category":"style","group":"style-typography","kind":"visual-effect","ko":{"name":"샤이니 텍스트","aliases":["shiny text","빛나는 텍스트","animated shiny text"]},"en":{"name":"Animated shiny text","aliases":["Shiny text","Text shimmer"]},"one_liner":"텍스트 위로 빛이 지나가는 듯한 하이라이트를 반복하는 텍스트 효과.","description":"배지, 새 기능 라벨, AI 상태 문구처럼 짧은 텍스트를 눈에 띄게 한다.","visual_anatomy":["short text","moving highlight","muted base","loop animation"],"when_to_use":["짧은 마케팅 문구나 새 기능 라벨을 강조할 때"],"anti_use":["긴 문장이나 본문에는 shimmer-effect보다 더 산만할 수 있다"],"prompt_phrases":["New feature 배지에 animated shiny text를 적용해줘"],"related":[{"id":"shimmer-effect","relation":"compare","note":"shimmer-effect는 로딩/진행 표면에도 쓰이고, animated shiny text는 짧은 텍스트 강조에 초점이 있다."}]},{"id":"dot-pattern-background","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"점 패턴 배경","aliases":["dot pattern","dotted background","점 배경"]},"en":{"name":"Dot pattern background","aliases":["Dotted background","Dot grid"]},"one_liner":"작은 점들이 반복되는 배경 패턴으로 빈 공간에 질서 있는 질감을 주는 요소.","description":"히어로, empty state, feature section 뒤에 배경 질감을 추가하되 콘텐츠 위계를 유지한다.","visual_anatomy":["repeating dots","muted contrast","fade mask","content layer"],"when_to_use":["미니멀한 화면에 가벼운 배경 질감이 필요할 때"],"anti_use":["복잡한 카드 그리드 뒤에서는 시각적 혼잡을 만든다"],"prompt_phrases":["빈 상태 뒤에 연한 dot pattern background를 깔아줘"]},{"id":"bento-grid","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"벤토 그리드","aliases":["bento grid","벤토 카드 그리드","비대칭 기능 그리드"]},"en":{"name":"Bento grid","aliases":["Bento layout","Bento feature grid"]},"one_liner":"서로 다른 크기의 카드들을 격자에 배치해 기능이나 콘텐츠를 풍부하게 보여주는 레이아웃.","description":"랜딩 페이지에서 핵심 기능을 단조로운 동일 카드 대신 크기와 강조도가 다른 묶음으로 보여준다.","visual_anatomy":["asymmetric grid","feature cards","large highlight card","small supporting cards"],"when_to_use":["기능 여러 개 중 일부를 더 크게 강조하고 싶을 때"],"anti_use":["동등한 항목 비교에는 feature-grid-section이 더 명확하다"],"prompt_phrases":["AI 기능들을 큰 카드와 작은 카드가 섞인 bento grid로 보여줘"]},{"id":"sticky-scroll-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"스티키 스크롤 섹션","aliases":["sticky scroll","고정 스크롤 섹션","sticky reveal"]},"en":{"name":"Sticky scroll section","aliases":["Sticky scroll reveal","Pinned scroll section"]},"one_liner":"한쪽 콘텐츠가 화면에 고정된 채 스크롤에 따라 설명이나 미디어가 바뀌는 섹션.","description":"제품 기능을 단계별로 설명하면서 시각 자료를 고정해 맥락을 유지한다.","visual_anatomy":["sticky media panel","scrolling text steps","active state","section height"],"when_to_use":["긴 설명을 단계별 제품 데모처럼 보여줄 때"],"anti_use":["짧은 기능 목록에는 feature-grid-section이 더 빠르다"],"prompt_phrases":["스크롤하면 오른쪽 미리보기가 바뀌는 sticky scroll section을 만들어줘"]},{"id":"floating-navbar","status":"draft","category":"structure","group":"structure-navigation","kind":"component","ko":{"name":"플로팅 내비게이션 바","aliases":["floating navbar","떠 있는 nav","floating nav"]},"en":{"name":"Floating navbar","aliases":["Floating navigation bar","Floating nav"]},"one_liner":"페이지 상단에 고정되지 않고 떠 있는 pill 형태로 배치되는 내비게이션 바.","description":"포트폴리오나 랜딩 페이지에서 화면 위에 가볍게 떠 있는 주요 링크를 제공한다.","visual_anatomy":["floating pill surface","nav links","shadow","centered or top placement"],"when_to_use":["랜딩 페이지에서 nav가 콘텐츠 위에 떠 있는 느낌을 주고 싶을 때"],"anti_use":["복잡한 제품 앱의 전역 내비게이션은 navigation-bar나 sidebar가 더 안정적이다"],"prompt_phrases":["히어로 위에 떠 있는 floating navbar를 넣어줘"]},{"id":"three-d-card","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"3D 카드","aliases":["3d card","tilt card","기울어지는 카드"]},"en":{"name":"3D card","aliases":["Tilt card","3D hover card"]},"one_liner":"hover나 마우스 위치에 따라 입체적으로 기울어지는 카드 효과.","description":"포트폴리오, 제품 카드, 랜딩 feature card에 깊이감과 상호작용감을 준다.","visual_anatomy":["card surface","perspective tilt","hover depth","layered content"],"when_to_use":["마케팅 카드나 포트폴리오 카드에 입체 반응을 주고 싶을 때"],"anti_use":["정확한 읽기와 반복 작업이 중요한 admin UI에는 피한다"],"prompt_phrases":["제품 카드에 hover하면 기울어지는 3D card 효과를 넣어줘"]},{"id":"hover-card-stack","status":"draft","category":"style","group":"style-misc","kind":"visual-effect","ko":{"name":"호버 카드 스택","aliases":["card stack hover","hover card stack","겹친 카드 효과"]},"en":{"name":"Hover card stack","aliases":["Card stack hover","Stacked cards"]},"one_liner":"여러 카드가 겹쳐 있다가 hover나 스크롤에 따라 펼쳐지는 카드 묶음 효과.","description":"사례, 이미지, 기능 미리보기를 압축해서 보여주고 상호작용 시 레이어를 드러낸다.","visual_anatomy":["stacked cards","offset layers","hover reveal","depth shadow"],"when_to_use":["여러 미리보기를 한 공간에 압축해 보여줄 때"],"anti_use":["각 카드를 비교해야 하면 grid나 carousel이 더 명확하다"],"prompt_phrases":["프로젝트 미리보기를 겹친 hover card stack으로 보여줘"]},{"id":"background-beams","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"배경 빔","aliases":["background beams","beam background","빛줄기 배경"]},"en":{"name":"Background beams","aliases":["Beam background","Light beams"]},"one_liner":"배경에 흐르는 빛줄기나 선형 광선을 깔아 공간감과 움직임을 주는 효과.","description":"히어로나 CTA 섹션에서 미래적이고 기술적인 분위기를 만들 때 사용한다.","visual_anatomy":["beam lines","soft glow","dark or light surface","content overlay"],"when_to_use":["AI/개발자 도구 랜딩의 첫 화면에 강한 시각 신호가 필요할 때"],"anti_use":["텍스트 가독성이 중요한 본문 섹션에는 쓰지 않는다"],"prompt_phrases":["AI 제품 hero 뒤에 background beams 효과를 넣어줘"]},{"id":"aurora-background","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-treatment","ko":{"name":"오로라 배경","aliases":["aurora background","오로라 그라디언트","aurora effect"]},"en":{"name":"Aurora background","aliases":["Aurora effect","Aurora gradient"]},"one_liner":"오로라처럼 넓은 색 덩어리가 부드럽게 흐르는 랜딩 페이지 배경 효과.","description":"차분하지만 인상적인 첫 화면이나 제품 소개 섹션에 큰 분위기를 만든다.","visual_anatomy":["soft color bands","large blur","animated drift","foreground content"],"when_to_use":["브랜드 랜딩의 hero 배경을 강하게 만들 때"],"anti_use":["색 대비가 낮아지면 CTA와 본문 가독성이 떨어질 수 있다"],"prompt_phrases":["첫 화면 배경을 부드러운 aurora background로 만들어줘"]},{"id":"spotlight-hero","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"스포트라이트 히어로","aliases":["spotlight hero","spotlight hero section","빛 집중 히어로"]},"en":{"name":"Spotlight hero","aliases":["Spotlight hero section","Hero spotlight"]},"one_liner":"중앙 카피나 제품명을 강한 스포트라이트 배경으로 강조하는 히어로 섹션.","description":"어두운 배경이나 단순한 hero에서 브랜드/제품 이름에 시선을 집중시키는 효과형 섹션이다.","visual_anatomy":["hero headline","spotlight glow","supporting copy","CTA","dark or muted background"],"when_to_use":["제품 이름과 한 문장을 첫 화면에서 강하게 각인시키고 싶을 때"],"anti_use":["정보 밀도가 높은 앱 첫 화면에는 일반 hero나 dashboard가 더 적합하다"],"prompt_phrases":["제품명 뒤에 빛이 모이는 spotlight hero를 만들어줘"],"related":[{"id":"hero","relation":"compare","note":"hero는 일반 첫 화면 영역이고 spotlight-hero는 배경 조명 효과가 핵심인 hero 변형이다."}]},{"id":"infinite-moving-cards","status":"draft","category":"data-display","group":"data-motion-content","kind":"motion-pattern","ko":{"name":"무한 이동 카드","aliases":["infinite moving cards","무한 스크롤 카드","moving cards"]},"en":{"name":"Infinite moving cards","aliases":["Infinite cards","Moving card loop"]},"one_liner":"카드 목록이 끊김 없이 반복 이동하며 여러 후기나 항목을 보여주는 패턴.","description":"후기, 로고, 사용 사례를 정적인 그리드보다 생동감 있게 노출한다.","visual_anatomy":["card row","repeated cards","seamless loop","masked edges"],"when_to_use":["랜딩 페이지에서 많은 카드형 증거를 압축해 보여줄 때"],"anti_use":["사용자가 카드를 선택하거나 상세히 읽어야 하면 static grid가 더 낫다"],"prompt_phrases":["후기 카드들이 무한히 흐르는 infinite moving cards 섹션을 넣어줘"],"related":[{"id":"marquee-row","relation":"compare","note":"marquee-row는 일반 자동 흐름 행이고 infinite-moving-cards는 카드형 콘텐츠 루프에 초점이 있다."}]},{"id":"canvas-reveal-card","status":"draft","category":"style","group":"style-decorative-effects","kind":"visual-effect","ko":{"name":"캔버스 리빌 카드","aliases":["canvas reveal card","reveal card","캔버스 효과 카드"]},"en":{"name":"Canvas reveal card","aliases":["Reveal card","Canvas hover card"]},"one_liner":"hover 시 캔버스 기반 패턴이나 빛 효과가 드러나는 인터랙티브 카드.","description":"기능 카드나 팀 카드에 일반 hover보다 강한 시각적 reveal을 주는 마케팅 효과다.","visual_anatomy":["card surface","hidden canvas effect","hover reveal","foreground content"],"when_to_use":["랜딩 카드에 고유한 hover reveal 효과를 주고 싶을 때"],"anti_use":["정적인 정보 카드나 접근성이 중요한 업무 화면에는 과하다"],"prompt_phrases":["서비스 카드에 hover하면 패턴이 드러나는 canvas reveal card를 넣어줘"]},{"id":"tracing-beam-section","status":"draft","category":"style","group":"style-decorative-effects","kind":"motion-pattern","ko":{"name":"트레이싱 빔 섹션","aliases":["tracing beam","scroll tracing beam","스크롤 빔"]},"en":{"name":"Tracing beam section","aliases":["Scroll tracing beam","Timeline beam"]},"one_liner":"스크롤 진행에 따라 세로 빛줄기나 선이 콘텐츠 옆을 따라 내려가는 섹션.","description":"긴 설명, 스토리, 로드맵을 읽는 동안 현재 위치를 시각적으로 따라가게 한다.","visual_anatomy":["vertical beam","scroll progress","content sections","active highlight"],"when_to_use":["긴 랜딩 설명이나 타임라인형 스토리에 진행감을 주고 싶을 때"],"anti_use":["짧은 카드 목록에는 단순 divider나 timeline이 더 명확하다"],"prompt_phrases":["스크롤하면 왼쪽 빔이 따라오는 tracing beam section을 만들어줘"]},{"id":"opacity","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"투명도","aliases":["opacity","불투명도","투명 처리"]},"en":{"name":"Opacity","aliases":["Transparency","Alpha"]},"one_liner":"요소가 얼마나 투명하거나 불투명하게 보이는지를 조절하는 시각 속성.","description":"비활성 상태, 배경 레이어, hover 전후 상태처럼 강도를 낮춰 위계를 만들 때 쓴다.","visual_anatomy":["same element repeated","opacity levels","visible background","emphasis difference"],"when_to_use":["비활성 상태를 약하게 보이게 할 때","배경 위의 보조 정보를 덜 강조할 때"],"anti_use":["중요 텍스트의 대비를 낮춰 가독성을 해치면 안 된다"],"prompt_phrases":["비활성 카드는 opacity를 낮춰서 덜 강조되게 해줘"]},{"id":"backdrop-blur","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"백드롭 블러","aliases":["backdrop blur","배경 흐림","유리 효과"]},"en":{"name":"Backdrop blur","aliases":["Glass blur","Backdrop filter"]},"one_liner":"반투명 표면 뒤쪽의 배경을 흐리게 만들어 레이어감을 주는 처리.","description":"sticky header, modal overlay, floating panel에서 뒤 콘텐츠와 앞 레이어를 분리한다.","visual_anatomy":["blurred background","translucent surface","foreground content","soft border"],"when_to_use":["떠 있는 패널이 뒤 콘텐츠와 겹칠 때","glassmorphism 느낌을 줄 때"],"anti_use":["저사양 환경이나 복잡한 배경에서 성능과 가독성이 떨어질 수 있다"],"prompt_phrases":["상단 고정 헤더에 backdrop blur를 넣어 뒤 내용이 흐리게 보이게 해줘"]},{"id":"shadow-elevation","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"그림자 깊이","aliases":["shadow elevation","elevation","box shadow","그림자 단계"]},"en":{"name":"Shadow elevation","aliases":["Elevation","Box shadow"]},"one_liner":"그림자 강도로 카드나 패널이 화면 위에 떠 있는 정도를 표현하는 처리.","description":"기본 카드, hover 카드, modal처럼 레이어 위계를 시각적으로 구분한다.","visual_anatomy":["surface","shadow","elevation steps","surrounding background"],"when_to_use":["카드 hover나 floating panel의 깊이를 보여줄 때"],"anti_use":["테두리만으로 충분한 밀집 UI에서 그림자를 과하게 쓰면 산만하다"],"prompt_phrases":["hover된 카드에 shadow elevation을 조금 더 줘"]},{"id":"border-radius","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"모서리 반경","aliases":["border radius","radius","둥근 모서리"]},"en":{"name":"Border radius","aliases":["Corner radius","Rounded corners"]},"one_liner":"사각형 요소의 모서리를 얼마나 둥글게 만들지 정하는 시각 속성.","description":"버튼, 카드, 입력창의 형태 언어를 맞추고 브랜드의 부드럽거나 단단한 인상을 조절한다.","visual_anatomy":["rectangular surfaces","corner radius comparison","consistent shape language"],"when_to_use":["디자인 시스템의 버튼과 카드 형태를 통일할 때"],"anti_use":["같은 화면에서 radius 단계가 너무 많으면 일관성이 깨진다"],"prompt_phrases":["카드와 버튼의 border radius를 같은 단계로 맞춰줘"]},{"id":"gradient-fill","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"그라디언트 채움","aliases":["gradient fill","gradient","색상 그라디언트"]},"en":{"name":"Gradient fill","aliases":["Gradient","Linear gradient"]},"one_liner":"단색 대신 두 개 이상의 색이 이어지는 채움 방식.","description":"버튼, 배경, 강조 카드에 방향성과 브랜드감을 주지만 본문 가독성은 유지해야 한다.","visual_anatomy":["color stops","direction","filled surface","foreground contrast"],"when_to_use":["히어로나 CTA처럼 시각 신호가 필요한 표면에 분위기를 줄 때"],"anti_use":["정보를 오래 읽는 영역의 배경으로 쓰면 피로해질 수 있다"],"prompt_phrases":["CTA 버튼에 subtle gradient fill을 적용해줘"]},{"id":"color-contrast","status":"draft","category":"accessibility","group":"accessibility-focus-motion","kind":"visual-treatment","ko":{"name":"색 대비","aliases":["color contrast","contrast","텍스트 대비"]},"en":{"name":"Color contrast","aliases":["Contrast ratio","Text contrast"]},"one_liner":"텍스트와 배경처럼 두 색이 얼마나 구분되어 읽히는지를 나타내는 기준.","description":"버튼 라벨, 입력 안내, 비활성 텍스트가 실제로 읽히는지 판단하는 핵심 접근성 기준이다.","visual_anatomy":["foreground text","background surface","pass example","fail example"],"when_to_use":["색을 바꾸거나 opacity를 낮출 때 가독성을 확인할 때"],"anti_use":["색상 취향만 보고 대비가 낮은 조합을 선택하면 접근성이 떨어진다"],"prompt_phrases":["본문과 버튼 텍스트가 충분한 color contrast를 갖게 조정해줘"]},{"id":"transition","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"전환","aliases":["transition","CSS transition","상태 전환"]},"en":{"name":"Transition","aliases":["CSS transition","State transition"]},"one_liner":"요소의 상태 변화가 즉시 바뀌지 않고 일정 시간에 걸쳐 이어지게 하는 모션.","description":"hover, focus, open 상태 변화가 갑자기 튀지 않도록 색, 위치, 투명도 변화를 부드럽게 연결한다.","visual_anatomy":["start state","changed property","duration","end state"],"when_to_use":["버튼 hover나 패널 열림처럼 짧은 상태 변화를 부드럽게 만들 때"],"anti_use":["사용자 입력 결과가 즉시 보여야 하는 중요한 상태를 느리게 만들지 않는다"],"prompt_phrases":["버튼 hover에 180ms transition을 넣어줘"]},{"id":"duration","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"지속 시간","aliases":["duration","animation duration","transition duration"]},"en":{"name":"Duration","aliases":["Animation duration","Transition duration"]},"one_liner":"전환이나 애니메이션이 시작해서 끝날 때까지 걸리는 시간.","description":"짧은 micro interaction은 빠르게, 페이지 전환이나 큰 패널 이동은 조금 길게 잡아 움직임의 무게를 맞춘다.","visual_anatomy":["same motion","fast duration","slow duration","timing label"],"when_to_use":["모션이 너무 튀거나 느릴 때 시간을 조정할 때"],"anti_use":["모든 모션에 같은 시간을 강제로 쓰면 크기와 목적에 맞지 않을 수 있다"],"prompt_phrases":["drawer 열림 duration을 조금 더 빠르게 줄여줘"]},{"id":"easing","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"이징","aliases":["easing","ease","cubic-bezier","가속 곡선"]},"en":{"name":"Easing","aliases":["Ease curve","Cubic bezier"]},"one_liner":"모션이 일정 속도로 움직일지, 빠르게 출발하거나 천천히 멈출지를 정하는 속도 곡선.","description":"같은 duration이라도 easing에 따라 자연스럽거나 기계적인 느낌이 달라진다.","visual_anatomy":["motion curve","start speed","end speed","moving object"],"when_to_use":["패널","카드","메뉴 움직임을 자연스럽게 조정할 때"],"anti_use":["복잡한 custom curve를 남발하면 제품 전체 모션 언어가 흐트러진다"],"prompt_phrases":["sheet가 열릴 때 ease-out 느낌의 easing을 적용해줘"]},{"id":"fade-transition","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"페이드 전환","aliases":["fade transition","fade in","fade out","opacity transition"]},"en":{"name":"Fade transition","aliases":["Fade in","Fade out","Opacity transition"]},"one_liner":"요소가 투명도 변화를 통해 나타나거나 사라지는 전환.","description":"modal backdrop, toast, tooltip처럼 위치 이동보다 존재감만 부드럽게 바꾸고 싶을 때 쓴다.","visual_anatomy":["transparent start","opacity change","visible end","optional overlay"],"when_to_use":["가벼운 안내나 배경 레이어를 부드럽게 표시할 때"],"anti_use":["공간 변화가 중요한 drawer나 sheet에는 slide transition이 더 명확하다"],"prompt_phrases":["tooltip이 fade transition으로 나타나게 해줘"]},{"id":"slide-transition","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"슬라이드 전환","aliases":["slide transition","slide in","slide out","밀려 나오는 전환"]},"en":{"name":"Slide transition","aliases":["Slide in","Slide out"]},"one_liner":"요소가 화면 가장자리나 기준 위치에서 밀려 들어오거나 나가는 전환.","description":"drawer, sheet, mobile bottom sheet처럼 방향과 출처가 중요한 레이어에 적합하다.","visual_anatomy":["offscreen start","direction","translated surface","settled state"],"when_to_use":["패널이 어느 방향에서 열리는지 보여줘야 할 때"],"anti_use":["작은 badge나 tooltip에는 움직임이 과하게 느껴질 수 있다"],"prompt_phrases":["오른쪽 drawer가 slide transition으로 열리게 해줘"]},{"id":"scale-transition","status":"draft","category":"feedback","group":"feedback-misc","kind":"motion-pattern","ko":{"name":"스케일 전환","aliases":["scale transition","zoom transition","크기 전환"]},"en":{"name":"Scale transition","aliases":["Zoom transition","Scale animation"]},"one_liner":"요소가 커지거나 작아지며 등장, 선택, 강조 상태를 표현하는 전환.","description":"버튼 press, selected card, popover 등장처럼 중심에서 변화하는 느낌을 줄 때 쓴다.","visual_anatomy":["initial scale","transform origin","scaled surface","final size"],"when_to_use":["작은 인터랙션에 즉각적인 반응감을 줄 때"],"anti_use":["텍스트 레이아웃이 흔들릴 정도로 크게 확대하면 안정성이 떨어진다"],"prompt_phrases":["선택된 카드가 살짝 scale transition으로 커지게 해줘"]},{"id":"reduced-motion","status":"draft","category":"accessibility","group":"accessibility-focus-motion","kind":"motion-pattern","ko":{"name":"모션 줄이기","aliases":["reduced motion","prefers-reduced-motion","움직임 최소화"]},"en":{"name":"Reduced motion","aliases":["Prefers reduced motion","Motion reduction"]},"one_liner":"움직임에 민감한 사용자를 위해 애니메이션을 줄이거나 제거하는 접근성 대응.","description":"운영체제의 reduced motion 설정을 존중해 큰 이동, 반복 애니메이션, 깜빡임을 최소화한다.","visual_anatomy":["motion setting","normal animation","reduced alternative","accessible state"],"when_to_use":["반복 모션이나 큰 화면 이동을 구현할 때 항상 함께 고려한다"],"anti_use":["모션을 줄인다고 상태 변화 자체를 숨기면 안 된다"],"prompt_phrases":["prefers-reduced-motion 사용자는 애니메이션을 거의 끄도록 처리해줘"]},{"id":"hover-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"호버 상태","aliases":["hover state","마우스 오버","hover"]},"en":{"name":"Hover state","aliases":["Mouse hover","Hover effect"]},"one_liner":"포인터가 요소 위에 올라갔을 때 보여주는 반응 상태.","description":"버튼, 카드, 메뉴 항목이 클릭 가능하거나 현재 포인터 대상임을 색, 그림자, 이동으로 보여준다.","visual_anatomy":["default surface","pointer target","hover styling","transition"],"when_to_use":["데스크톱에서 클릭 가능한 요소임을 더 명확히 할 때"],"anti_use":["터치 기기에서는 hover에만 핵심 정보를 숨기면 안 된다"],"prompt_phrases":["카드에 hover state를 추가해서 클릭 가능해 보이게 해줘"]},{"id":"focus-ring","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"포커스 링","aliases":["focus ring","focus outline","키보드 포커스"]},"en":{"name":"Focus ring","aliases":["Focus outline","Keyboard focus indicator"]},"one_liner":"키보드나 보조기술로 현재 선택된 요소를 보여주는 윤곽선.","description":"탭 이동 중 현재 조작 대상이 어디인지 알려주는 접근성 핵심 시각 신호다.","visual_anatomy":["interactive element","visible outline","offset or ring","focus state"],"when_to_use":["버튼","입력창","링크 등 모든 키보드 조작 요소에 필요하다"],"anti_use":["outline을 없애고 대체 표시를 제공하지 않으면 접근성이 크게 떨어진다"],"prompt_phrases":["모든 버튼에 명확한 focus ring을 넣어줘"]},{"id":"active-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"활성 상태","aliases":["active state","현재 상태","활성 탭"]},"en":{"name":"Active state","aliases":["Current state","Active item"]},"one_liner":"현재 선택되어 적용 중인 탭, 메뉴, 항목을 나타내는 상태.","description":"사용자가 현재 위치나 선택된 범위를 잃지 않도록 배경, 텍스트 색, indicator로 표시한다.","visual_anatomy":["item list","active item","indicator","inactive siblings"],"when_to_use":["탭","nav","segmented control에서 현재 선택을 보여줄 때"],"anti_use":["hover나 focus와 같은 임시 상태와 시각 표현이 너무 비슷하면 혼란스럽다"],"prompt_phrases":["현재 선택된 탭에 active state를 분명히 표시해줘"]},{"id":"disabled-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"비활성 상태","aliases":["disabled state","disabled","사용할 수 없음"]},"en":{"name":"Disabled state","aliases":["Unavailable state","Disabled control"]},"one_liner":"현재 조건에서는 조작할 수 없는 컨트롤임을 보여주는 상태.","description":"권한, 입력 누락, 로딩 중 같은 이유로 버튼이나 필드가 동작하지 않음을 명확히 한다.","visual_anatomy":["disabled control","reduced emphasis","cursor or aria disabled","explanatory context"],"when_to_use":["조건이 충족되기 전까지 행동을 막아야 할 때"],"anti_use":["왜 비활성인지 설명 없이 막으면 사용자가 다음 행동을 알기 어렵다"],"prompt_phrases":["필수 입력 전에는 제출 버튼을 disabled state로 보여줘"]},{"id":"selected-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"선택 상태","aliases":["selected state","selected","선택됨"]},"en":{"name":"Selected state","aliases":["Selected item","Selection state"]},"one_liner":"여러 항목 중 사용자가 선택한 항목임을 나타내는 상태.","description":"checkbox, list item, chip, 카드 선택에서 현재 선택값을 표시하고 다음 행동의 맥락을 만든다.","visual_anatomy":["item group","selected item","check mark or highlight","unselected items"],"when_to_use":["목록이나 카드 중 하나 이상을 선택할 때"],"anti_use":["active navigation state와 selected data state를 같은 의미로 섞지 않는다"],"prompt_phrases":["선택된 카드에는 selected state와 체크 표시를 보여줘"]},{"id":"drag-state","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"드래그 상태","aliases":["drag state","dragging","끌기 상태"]},"en":{"name":"Drag state","aliases":["Dragging state","Drag feedback"]},"one_liner":"사용자가 항목을 끌고 있는 동안 원본과 이동 대상을 보여주는 상태.","description":"리스트 재정렬, 칸반 이동, 파일 업로드에서 어떤 항목이 움직이는지 그림자와 투명도로 알려준다.","visual_anatomy":["grabbed item","lifted surface","placeholder","pointer movement"],"when_to_use":["항목을 위치 이동하거나 업로드 영역으로 끌 수 있을 때"],"anti_use":["키보드 대체 조작이 없으면 접근성이 부족해질 수 있다"],"prompt_phrases":["리스트 항목을 끌 때 drag state를 그림자와 placeholder로 보여줘"]},{"id":"drop-target","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"드롭 대상","aliases":["drop target","드롭존","놓을 위치"]},"en":{"name":"Drop target","aliases":["Drop zone","Drop area"]},"one_liner":"드래그 중인 항목을 놓을 수 있는 영역을 강조해 보여주는 대상.","description":"파일 업로드나 칸반 보드에서 항목을 어디에 놓을 수 있는지 border, 배경, 안내 문구로 표시한다.","visual_anatomy":["target area","dashed border","active highlight","drag item"],"when_to_use":["사용자가 끌고 있는 항목을 특정 영역에 놓아야 할 때"],"anti_use":["단순 클릭 업로드만 있으면 file-upload나 upload-dropzone이 더 직접적이다"],"prompt_phrases":["파일을 끌어오면 drop target 영역을 강조해줘"]},{"id":"z-index","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"Z-인덱스","aliases":["z-index","쌓임 순서","레이어 순서"]},"en":{"name":"Z-index","aliases":["Stacking order","Layer order"]},"one_liner":"겹친 요소 중 어떤 것이 앞에 보일지 정하는 CSS 레이어 순서 값.","description":"modal, popover, sticky header가 서로 가려지지 않도록 레이어 우선순위를 관리한다.","visual_anatomy":["overlapping layers","front layer","back layer","z order labels"],"when_to_use":["팝오버나 고정 헤더가 다른 요소 뒤에 숨길 때"],"anti_use":["값을 무작정 크게 올리면 전체 레이어 체계가 깨진다"],"prompt_phrases":["modal이 header 뒤에 숨지 않게 z-index 체계를 정리해줘"]},{"id":"stacking-context","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"스태킹 컨텍스트","aliases":["stacking context","쌓임 맥락","레이어 컨텍스트"]},"en":{"name":"Stacking context","aliases":["Stacking context","Layering context"]},"one_liner":"z-index가 비교되는 독립적인 레이어 그룹.","description":"transform, opacity, positioned element 같은 조건 때문에 z-index가 예상대로 작동하지 않을 때 원인이 된다.","visual_anatomy":["parent layer group","child layers","isolated stacking","outside layer"],"when_to_use":["z-index를 올렸는데도 요소가 앞으로 나오지 않는 문제를 설명할 때"],"anti_use":["단순 겹침 문제를 모두 z-index 숫자 문제로만 보면 원인을 놓칠 수 있다"],"prompt_phrases":["tooltip이 카드 안에 갇히는 stacking context 문제를 해결해줘"]},{"id":"overflow","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"오버플로","aliases":["overflow","넘침 처리","스크롤 넘침"]},"en":{"name":"Overflow","aliases":["Content overflow","Overflow clipping"]},"one_liner":"콘텐츠가 컨테이너보다 클 때 보일지, 잘릴지, 스크롤될지 정하는 처리.","description":"긴 텍스트, 표, 카드 목록이 지정된 영역을 넘을 때 레이아웃이 무너지지 않게 한다.","visual_anatomy":["container boundary","overflowing content","clipping or scroll","scrollbar optional"],"when_to_use":["콘텐츠 길이가 가변적인 카드나 패널을 만들 때"],"anti_use":["중요한 내용이 잘리는지 모른 채 overflow hidden을 쓰면 정보가 사라진다"],"prompt_phrases":["긴 목록은 컨테이너 안에서 overflow scroll로 처리해줘"]},{"id":"clipping-mask","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"클리핑 마스크","aliases":["clipping mask","clip path","마스크 처리"]},"en":{"name":"Clipping mask","aliases":["Clip path","Masking"]},"one_liner":"요소의 보이는 영역을 특정 모양이나 경계 안으로 제한하는 처리.","description":"이미지 썸네일, 아바타, decorative shape처럼 콘텐츠를 원하는 형태로 잘라 보여준다.","visual_anatomy":["source shape","mask boundary","clipped content","hidden outside"],"when_to_use":["이미지나 배경을 원형","카드형","비정형 형태로 잘라야 할 때"],"anti_use":["텍스트나 필수 UI를 잘라 조작 가능 영역을 모호하게 만들면 안 된다"],"prompt_phrases":["프로필 이미지를 원형 clipping mask로 잘라줘"]},{"id":"breakpoint","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"브레이크포인트","aliases":["breakpoint","반응형 분기점","responsive breakpoint"]},"en":{"name":"Breakpoint","aliases":["Responsive breakpoint","Media query breakpoint"]},"one_liner":"화면 너비 같은 조건에 따라 레이아웃이나 스타일이 바뀌는 기준점.","description":"모바일, 태블릿, 데스크톱에서 같은 콘텐츠가 다른 열 수나 배치로 보이도록 분기한다.","visual_anatomy":["small viewport","large viewport","layout change","threshold marker"],"when_to_use":["화면 크기에 따라 navigation이나 grid 구조를 바꿀 때"],"anti_use":["기기 이름만 기준으로 잡고 실제 콘텐츠 폭을 확인하지 않으면 깨질 수 있다"],"prompt_phrases":["768px breakpoint부터 카드 그리드를 2열로 바꿔줘"]},{"id":"responsive-layout","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"반응형 레이아웃","aliases":["responsive layout","반응형 UI","responsive design"]},"en":{"name":"Responsive layout","aliases":["Responsive design","Adaptive layout"]},"one_liner":"화면 크기와 입력 환경에 맞춰 배치, 크기, 탐색 구조가 조정되는 레이아웃.","description":"같은 기능이 모바일에서는 단일 열, 데스크톱에서는 다중 열과 사이드바로 보이게 한다.","visual_anatomy":["mobile layout","desktop layout","reflowed content","navigation adaptation"],"when_to_use":["웹앱을 모바일과 데스크톱에서 모두 자연스럽게 써야 할 때"],"anti_use":["단순 축소만 하고 터치 크기나 읽기 폭을 조정하지 않으면 반응형이 아니다"],"prompt_phrases":["이 대시보드를 mobile-first responsive layout으로 정리해줘"]},{"id":"sticky-position","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"스티키 위치","aliases":["sticky position","position sticky","고정되는 요소"]},"en":{"name":"Sticky position","aliases":["Position sticky","Sticky element"]},"one_liner":"스크롤하다가 기준 위치에 닿으면 화면에 붙어 따라오는 배치 방식.","description":"table header, section nav, top bar처럼 긴 콘텐츠를 탐색할 때 맥락을 유지하게 한다.","visual_anatomy":["scroll container","sticky element","threshold","stuck state"],"when_to_use":["긴 목록이나 문서에서 현재 헤더나 액션을 계속 보여줘야 할 때"],"anti_use":["sticky 요소가 너무 많으면 화면 공간을 잠식하고 겹침 문제가 생긴다"],"prompt_phrases":["테이블 헤더를 sticky position으로 고정해줘"]},{"id":"glassmorphism","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"글래스모피즘","aliases":["glassmorphism","유리 느낌","유리 패널","프로스트 글래스"]},"en":{"name":"Glassmorphism","aliases":["Glass morphism","Frosted glass style","Glass surface"]},"one_liner":"반투명 표면, 배경 흐림, 얇은 테두리, 그림자를 함께 써서 유리처럼 보이게 하는 스타일 패키지.","description":"카드, 헤더, floating panel을 배경 위에 올릴 때 뒤쪽 색과 형태가 살짝 비치도록 만들어 깊이와 분위기를 준다.","visual_anatomy":["translucent surface","backdrop blur","soft border","subtle shadow","visible background"],"when_to_use":["히어로나 floating panel에 가벼운 유리 질감을 주고 싶을 때","배경과 앞 레이어를 부드럽게 연결할 때"],"anti_use":["본문을 오래 읽는 영역에서 대비가 낮아지면 쓰지 않는다","복잡한 배경 위에서 텍스트가 흐려지면 단순 surface가 낫다"],"prompt_phrases":["히어로 위 카드에 glassmorphism 스타일을 적용해줘"],"related":[{"id":"backdrop-blur","relation":"use-with","note":"backdrop-blur는 글래스모피즘을 만드는 핵심 처리지만 그 자체가 전체 스타일 패키지는 아니다"},{"id":"opacity","relation":"use-with","note":"반투명 표면의 강도를 조절할 때 함께 본다"},{"id":"shadow-elevation","relation":"use-with","note":"유리 표면이 배경 위에 떠 보이도록 깊이를 보완한다"},{"id":"color-contrast","relation":"use-with","note":"반투명 표면 위 텍스트가 충분히 읽히는지 확인해야 한다"}]},{"id":"translucent-surface","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"반투명 표면","aliases":["translucent surface","투명한 표면","반투명 패널"]},"en":{"name":"Translucent surface","aliases":["Semi-transparent surface","Translucent panel","Alpha surface"]},"one_liner":"배경이 일부 비쳐 보이도록 색상이나 투명도를 낮춘 UI 표면.","description":"카드나 패널을 완전히 불투명하게 막지 않고 뒤 배경과 연결된 느낌을 줄 때 쓰는 표면 처리다.","visual_anatomy":["foreground surface","alpha fill","visible background","foreground content"],"when_to_use":["배경 이미지나 그라디언드 위에 가벼운 패널을 올릴 때","레이어감을 주되 무겁게 막고 싶지 않을 때"],"anti_use":["텍스트 대비가 부족하거나 배경이 너무 복잡하면 불투명 표면을 쓴다"],"prompt_phrases":["카드를 반투명 surface로 만들어 배경이 살짝 비치게 해줘"],"related":[{"id":"opacity","relation":"use-with","note":"투명도는 반투명 표면을 만드는 기본 속성이다"},{"id":"glassmorphism","relation":"compare","note":"글래스모피즘은 반투명 표면에 blur, border, shadow를 더한 스타일 패키지다"},{"id":"color-contrast","relation":"use-with","note":"반투명 표면은 배경에 따라 대비가 달라지므로 함께 확인한다"}]},{"id":"hairline-border","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"헤어라인 보더","aliases":["hairline border","얇은 테두리","1px border","미세 테두리"]},"en":{"name":"Hairline border","aliases":["Thin border","One pixel border","Fine border"]},"one_liner":"표면의 경계를 아주 얇은 선으로만 구분하는 미세한 테두리 처리.","description":"카드, 패널, 입력창을 그림자 없이 조용하게 구분하거나 glassmorphism 표면의 가장자리를 잡을 때 쓴다.","visual_anatomy":["thin border","adjacent surface","subtle contrast","rounded corner optional"],"when_to_use":["밀도 높은 UI에서 그림자 대신 경계를 살짝 보여줄 때","반투명 표면의 가장자리를 정리할 때"],"anti_use":["배경과 선 색이 너무 비슷해 경계가 보이지 않으면 대비를 높인다"],"prompt_phrases":["카드에 그림자 대신 얇은 hairline border를 넣어줘"],"related":[{"id":"shadow-elevation","relation":"alternative","note":"그림자 대신 조용한 경계만 필요하면 hairline border가 낫다"},{"id":"color-contrast","relation":"use-with","note":"얇은 선은 대비가 낮으면 보이지 않는다"}]},{"id":"inner-shadow","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"내부 그림자","aliases":["inner shadow","inset shadow","안쪽 그림자"]},"en":{"name":"Inner shadow","aliases":["Inset shadow","Recessed shadow"]},"one_liner":"요소 안쪽 가장자리에 그림자를 넣어 파인 듯한 깊이나 눌린 표면을 만드는 처리.","description":"입력창, 눌린 버튼, inset panel처럼 바깥으로 뜨기보다 안쪽으로 들어간 표면감을 보여줄 때 쓴다.","visual_anatomy":["inset surface","inner edge shadow","content area","depressed depth"],"when_to_use":["입력 영역이나 pressed surface가 안으로 들어간 느낌을 줘야 할 때"],"anti_use":["작은 텍스트 주변에 과하게 넣으면 흐릿하고 낡아 보일 수 있다"],"prompt_phrases":["검색 입력창 안쪽에 은은한 inner shadow를 넣어줘"],"related":[{"id":"shadow-elevation","relation":"compare","note":"shadow elevation은 표면이 밖으로 뜨는 느낌이고 inner shadow는 안쪽으로 파인 느낌이다"},{"id":"active-state","relation":"use-with","note":"눌린 상태를 표현할 때 함께 쓸 수 있다"}]},{"id":"noise-texture","status":"draft","category":"style","group":"style-surface-material","kind":"visual-treatment","ko":{"name":"노이즈 텍스처","aliases":["noise texture","grain texture","입자 질감","그레인"]},"en":{"name":"Noise texture","aliases":["Grain texture","Noise overlay","Grain overlay"]},"one_liner":"평평한 색이나 그라디언트 위에 아주 미세한 입자감을 더하는 표면 질감.","description":"넓은 배경이나 반투명 표면이 너무 밋밋하거나 banding이 보일 때 약한 질감을 더해 깊이를 만든다.","visual_anatomy":["base surface","fine grain","low opacity texture","foreground content"],"when_to_use":["히어로 배경이나 glass surface에 미세한 질감을 더하고 싶을 때"],"anti_use":["업무용 데이터 화면에서 정보보다 질감이 먼저 보이면 빼는 편이 낫다"],"prompt_phrases":["그라디언트 배경 위에 아주 약한 noise texture를 깔아줘"],"related":[{"id":"gradient-fill","relation":"use-with","note":"넓은 그라디언트의 banding을 줄이거나 질감을 줄 때 함께 쓴다"},{"id":"glassmorphism","relation":"use-with","note":"유리 표면에 미세한 질감을 더해 밋밋함을 줄일 수 있다"}]},{"id":"highlight-stroke","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"하이라이트 스트로크","aliases":["highlight stroke","edge highlight","빛 테두리","상단 하이라이트"]},"en":{"name":"Highlight stroke","aliases":["Edge highlight","Light stroke","Top highlight"]},"one_liner":"표면 가장자리에 밝은 선을 더해 빛을 받은 듯한 입체감을 주는 처리.","description":"어두운 카드나 glass surface의 상단/외곽에 얇은 밝은 선을 넣어 표면 방향과 깊이를 강조한다.","visual_anatomy":["surface edge","bright stroke","darker body","directional light"],"when_to_use":["어두운 표면이나 유리 표면이 배경과 섞여 경계가 약할 때"],"anti_use":["모든 카드에 강하게 넣으면 과장된 glossy UI처럼 보일 수 있다"],"prompt_phrases":["어두운 카드 위쪽에 은은한 highlight stroke를 넣어줘"],"related":[{"id":"hairline-border","relation":"compare","note":"hairline border는 경계 전체를 균일하게 잡고 highlight stroke는 빛 방향을 표현한다"},{"id":"glassmorphism","relation":"use-with","note":"유리 표면의 가장자리와 빛 반사를 강조할 때 함께 쓴다"}]},{"id":"font-weight","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"글자 굵기","aliases":["font weight","폰트 굵기","weight","볼드 단계"]},"en":{"name":"Font weight","aliases":["Weight","Boldness","Type weight"]},"one_liner":"텍스트가 얼마나 얇거나 굵게 보이는지 정하는 타이포그래피 속성.","description":"제목, 라벨, 강조 문구의 위계를 만들 때 크기만 키우지 않고 굵기로 중요도를 조절한다.","visual_anatomy":["same text","light weight","regular weight","bold weight"],"when_to_use":["제목과 본문 위계를 분명히 할 때","버튼이나 라벨을 더 강하게 보이게 할 때"],"anti_use":["모든 텍스트를 굵게 만들면 위계가 사라지고 읽기 피로가 커진다"],"prompt_phrases":["섹션 제목은 font-weight를 높여서 본문과 구분해줘"]},{"id":"line-height","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"줄 높이","aliases":["line height","행간","줄 간격"]},"en":{"name":"Line height","aliases":["Leading","Text leading"]},"one_liner":"여러 줄 텍스트에서 줄과 줄 사이의 세로 간격을 정하는 속성.","description":"본문, 카드 설명, 긴 안내 문구가 답답하거나 흩어져 보이지 않도록 읽기 리듬을 조절한다.","visual_anatomy":["multi-line text","compact leading","comfortable leading","line box"],"when_to_use":["본문이나 설명 문구가 두 줄 이상일 때","모바일에서 읽기 폭이 좁을 때"],"anti_use":["단일 라벨이나 버튼 안에서는 line-height가 높으면 정렬이 어색해질 수 있다"],"prompt_phrases":["카드 설명의 line-height를 조금 넉넉하게 잡아줘"]},{"id":"letter-spacing","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"자간","aliases":["letter spacing","글자 간격","tracking"]},"en":{"name":"Letter spacing","aliases":["Tracking","Character spacing"]},"one_liner":"글자 사이의 가로 간격을 넓히거나 좁히는 타이포그래피 속성.","description":"작은 대문자 라벨, 숫자, 섹션 eyebrow처럼 짧은 텍스트의 밀도와 분위기를 조절한다.","visual_anatomy":["same word","tight spacing","normal spacing","loose spacing"],"when_to_use":["짧은 라벨이나 코드성 텍스트를 더 또렷하게 만들 때"],"anti_use":["한글 본문 전체에 과한 자간을 주면 읽기 흐름이 깨진다"],"prompt_phrases":["작은 섹션 라벨에 살짝 넓은 letter spacing을 줘"]},{"id":"text-overflow","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"텍스트 넘침 처리","aliases":["text overflow","말줄임","ellipsis"]},"en":{"name":"Text overflow","aliases":["Ellipsis","Overflow text"]},"one_liner":"긴 텍스트가 한 줄 영역을 넘을 때 자르거나 말줄임표로 표시하는 처리.","description":"테이블 셀, 카드 제목, 사이드바 항목처럼 폭이 제한된 곳에서 레이아웃을 깨지 않게 한다.","visual_anatomy":["fixed width text box","overflowing title","ellipsis","clipped text"],"when_to_use":["행 높이나 카드 폭을 유지하면서 긴 제목을 보여줘야 할 때"],"anti_use":["중요 정보를 말줄임으로 숨기면 tooltip이나 상세 보기 같은 보완이 필요하다"],"prompt_phrases":["긴 카드 제목은 text-overflow ellipsis로 한 줄 처리해줘"]},{"id":"line-clamp","status":"draft","category":"style","group":"style-typography","kind":"visual-treatment","ko":{"name":"줄 수 제한","aliases":["line clamp","multi-line ellipsis","여러 줄 말줄임"]},"en":{"name":"Line clamp","aliases":["Multi-line truncation","Multi-line ellipsis"]},"one_liner":"여러 줄 텍스트를 정해진 줄 수까지만 보이고 나머지를 말줄임 처리하는 패턴.","description":"카드 설명이나 목록 요약의 높이를 맞추면서 긴 문장이 레이아웃을 밀지 않게 한다.","visual_anatomy":["text block","visible line count","fade or ellipsis","fixed card height"],"when_to_use":["카드 그리드에서 설명 길이가 제각각일 때","요약 목록의 높이를 일정하게 유지할 때"],"anti_use":["법적 고지나 오류 원인처럼 전문을 읽어야 하는 내용에는 쓰지 않는다"],"prompt_phrases":["상품 설명은 2줄 line-clamp로 카드 높이를 맞춰줘"]},{"id":"gap","status":"draft","category":"layout-rendering","group":"layout-spacing-sizing","kind":"visual-treatment","ko":{"name":"갭","aliases":["gap","간격","grid gap","flex gap"]},"en":{"name":"Gap","aliases":["Grid gap","Flex gap","Item gap"]},"one_liner":"flex나 grid 안에서 인접한 항목 사이의 간격을 정하는 레이아웃 속성.","description":"카드, 버튼 그룹, 폼 필드 사이의 리듬을 일관되게 만들고 margin 조합을 줄인다.","visual_anatomy":["sibling items","equal spacing","layout container","gap label"],"when_to_use":["같은 컨테이너 안의 반복 항목 사이 간격을 통일할 때"],"anti_use":["컨테이너 바깥 여백까지 gap으로 해결하려고 하면 구조가 모호해진다"],"prompt_phrases":["카드 그리드 항목 사이에 consistent gap을 줘"]},{"id":"padding","status":"draft","category":"layout-rendering","group":"layout-spacing-sizing","kind":"visual-treatment","ko":{"name":"패딩","aliases":["padding","안쪽 여백","내부 여백"]},"en":{"name":"Padding","aliases":["Inner spacing","Inset spacing"]},"one_liner":"표면의 테두리와 내부 콘텐츠 사이에 두는 안쪽 여백.","description":"버튼, 카드, 입력창이 답답하지 않도록 콘텐츠 주변에 숨 쉴 공간을 만든다.","visual_anatomy":["surface boundary","inner content","padded area","spacing measurement"],"when_to_use":["카드나 버튼 안의 텍스트가 테두리에 붙어 보일 때"],"anti_use":["항목 사이 간격은 padding보다 gap이나 margin이 더 명확할 수 있다"],"prompt_phrases":["카드 안쪽 padding을 조금 늘려서 답답하지 않게 해줘"]},{"id":"aspect-ratio","status":"draft","category":"layout-rendering","group":"layout-spacing-sizing","kind":"visual-treatment","ko":{"name":"종횡비","aliases":["aspect ratio","비율 고정","화면 비율"]},"en":{"name":"Aspect ratio","aliases":["Fixed ratio","Width height ratio"]},"one_liner":"이미지나 카드 같은 영역의 가로와 세로 비율을 일정하게 유지하는 제약.","description":"썸네일, 영상, 미리보기 카드가 로딩 상태나 화면 크기 변화에도 같은 형태를 유지하게 한다.","visual_anatomy":["fixed ratio frame","image placeholder","width height label","responsive size"],"when_to_use":["이미지 카드나 비디오 영역의 높이가 흔들리지 않아야 할 때"],"anti_use":["콘텐츠 자체의 비율이 다양해야 의미가 있는 갤러리에서는 과하게 통일하지 않는다"],"prompt_phrases":["썸네일은 16:9 aspect-ratio로 고정해줘"]},{"id":"container-query","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"컨테이너 쿼리","aliases":["container query","컨테이너 기준 반응형","component query"]},"en":{"name":"Container query","aliases":["Component query","Container-based responsive style"]},"one_liner":"화면 전체가 아니라 부모 컨테이너 크기에 따라 컴포넌트 스타일을 바꾸는 반응형 조건.","description":"같은 카드가 사이드바, 그리드, 상세 패널 안에서 서로 다른 폭에 맞춰 재배치되게 한다.","visual_anatomy":["same component","narrow container","wide container","internal layout change"],"when_to_use":["컴포넌트가 놓이는 영역 폭에 따라 내부 배치를 바꿔야 할 때"],"anti_use":["페이지 전체 breakpoint 하나로 충분하면 container query가 과할 수 있다"],"prompt_phrases":["카드 컴포넌트는 container query로 좁은 영역에서 세로 배치되게 해줘"],"related":[{"id":"breakpoint","relation":"compare","note":"breakpoint는 viewport 기준이고 container query는 컴포넌트가 들어간 영역 기준이다"}]},{"id":"layout-shift","status":"draft","category":"layout-rendering","group":"layout-stacking-overflow","kind":"visual-treatment","ko":{"name":"레이아웃 이동","aliases":["layout shift","누적 레이아웃 이동","CLS"]},"en":{"name":"Layout shift","aliases":["Cumulative layout shift","CLS"]},"one_liner":"이미지, 광고, 동적 콘텐츠가 늦게 들어오면서 기존 화면 요소가 갑자기 밀리는 현상.","description":"예약된 크기, aspect-ratio, skeleton을 사용해 사용자가 읽거나 누르던 위치가 튀지 않게 막는다.","visual_anatomy":["before position","late content","shifted element","reserved space"],"when_to_use":["이미지나 비동기 데이터 때문에 카드 높이가 나중에 바뀔 때"],"anti_use":["의도적인 expand/collapse 전환과 성능 문제인 layout shift를 섞어 부르지 않는다"],"prompt_phrases":["이미지 로딩 때문에 layout shift가 생기지 않게 영역을 미리 잡아줘"],"related":[{"id":"aspect-ratio","relation":"use-with","note":"media 영역의 비율을 미리 잡아 layout shift를 줄인다"}]},{"id":"aria-expanded","status":"draft","category":"accessibility","group":"accessibility-aria-screen-reader","kind":"component","ko":{"name":"확장 상태 ARIA","aliases":["aria-expanded","펼침 상태","접힘 상태"]},"en":{"name":"ARIA expanded state","aliases":["aria-expanded","Expanded state","Collapsed state"]},"one_liner":"아코디언, disclosure, 메뉴처럼 열리고 닫히는 UI의 현재 펼침 상태를 보조기술에 알리는 속성.","description":"시각적으로 열린 상태뿐 아니라 screen reader에도 해당 컨트롤이 확장되었는지 전달한다.","visual_anatomy":["toggle control","expanded panel","expanded label","collapsed alternative"],"when_to_use":["버튼이 숨겨진 패널이나 메뉴를 열고 닫을 때"],"anti_use":["실제로 펼칠 대상이 없는 단순 링크나 버튼에는 붙이지 않는다"],"prompt_phrases":["accordion trigger에 aria-expanded 상태가 맞게 반영되게 해줘"]},{"id":"aria-invalid","status":"draft","category":"accessibility","group":"accessibility-aria-screen-reader","kind":"component","ko":{"name":"오류 입력 ARIA","aliases":["aria-invalid","invalid state","입력 오류 상태"]},"en":{"name":"ARIA invalid state","aliases":["aria-invalid","Invalid input state","Error state attribute"]},"one_liner":"입력값이 유효하지 않음을 보조기술과 UI 상태에 함께 전달하는 속성.","description":"validation message와 함께 사용해 사용자가 어떤 필드에 오류가 있는지 키보드와 screen reader로도 알 수 있게 한다.","visual_anatomy":["input field","error border","error message","invalid attribute"],"when_to_use":["폼 검증 실패 후 특정 입력 필드가 잘못되었음을 표시할 때"],"anti_use":["검증 전부터 모든 필드를 invalid로 표시하면 사용자가 불필요하게 압박을 받는다"],"prompt_phrases":["이메일 오류가 나면 aria-invalid와 validation message를 같이 보여줘"],"related":[{"id":"validation-message","relation":"use-with","note":"오류 상태는 보통 입력창 근처의 검증 메시지와 함께 설명한다"}]},{"id":"aria-live","status":"draft","category":"accessibility","group":"accessibility-aria-screen-reader","kind":"component","ko":{"name":"라이브 영역 ARIA","aliases":["aria-live","live region","실시간 알림 영역"]},"en":{"name":"ARIA live region","aliases":["aria-live","Live region","Announced update"]},"one_liner":"화면 일부가 동적으로 바뀔 때 그 변경 내용을 보조기술에 알리는 영역.","description":"toast, 저장 완료, 검색 결과 수 변경처럼 포커스를 옮기지 않고 알려야 하는 상태 변화에 쓴다.","visual_anatomy":["status message","dynamic update","announcement area","polite or assertive mode"],"when_to_use":["비동기 작업 결과나 상태 메시지를 screen reader 사용자에게 알려야 할 때"],"anti_use":["자주 바뀌는 값 전체를 계속 announce하면 방해가 된다"],"prompt_phrases":["저장 완료 메시지는 aria-live 영역으로도 announce되게 해줘"],"related":[{"id":"toast","relation":"use-with","note":"toast가 시각 알림이면 live region은 보조기술 알림 역할을 한다"}]},{"id":"sr-only","status":"draft","category":"accessibility","group":"accessibility-aria-screen-reader","kind":"component","ko":{"name":"스크린리더 전용 텍스트","aliases":["sr-only","visually hidden","보이지 않는 접근성 텍스트"]},"en":{"name":"Screen-reader-only text","aliases":["sr-only","Visually hidden text","Assistive text"]},"one_liner":"화면에는 보이지 않지만 screen reader에는 읽히도록 남기는 보조 텍스트.","description":"아이콘 버튼, 상태 점, 축약 라벨처럼 시각 정보만으로는 의미가 부족한 UI에 숨은 설명을 더한다.","visual_anatomy":["visible icon","hidden text label","accessibility name","assistive output"],"when_to_use":["아이콘만 있는 버튼이나 시각적 상태에 이름을 붙여야 할 때"],"anti_use":["화면에 필요한 설명을 sr-only로 숨겨 시각 사용자에게 정보를 빼앗으면 안 된다"],"prompt_phrases":["아이콘 버튼에는 sr-only label을 넣어 접근성 이름을 제공해줘"]},{"id":"focus-trap","status":"draft","category":"accessibility","group":"accessibility-focus-motion","kind":"component","ko":{"name":"포커스 트랩","aliases":["focus trap","포커스 가두기","modal focus loop"]},"en":{"name":"Focus trap","aliases":["Modal focus trap","Focus loop"]},"one_liner":"모달이나 dialog가 열렸을 때 키보드 포커스가 그 안에서만 순환하도록 하는 접근성 패턴.","description":"배경 화면으로 포커스가 빠져 사용자가 현재 작업 맥락을 잃지 않도록 막고, 닫힌 뒤 원래 위치로 돌려야 한다.","visual_anatomy":["modal surface","focusable controls","loop arrow","blocked background"],"when_to_use":["modal dialog처럼 배경 조작을 막는 레이어를 열 때"],"anti_use":["non-modal popover처럼 배경 조작이 가능한 UI에는 포커스를 강제로 가두지 않는다"],"prompt_phrases":["모달이 열리면 focus trap을 적용하고 닫을 때 이전 버튼으로 포커스를 돌려줘"],"related":[{"id":"dialog","relation":"use-with","note":"모달은 키보드 포커스가 내부에서 순환해야 한다"}]},{"id":"mobile-first","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"모바일 우선","aliases":["mobile first","모바일 퍼스트","작은 화면 우선"]},"en":{"name":"Mobile-first","aliases":["Mobile first design","Small-screen-first"]},"one_liner":"작은 화면을 기본으로 설계한 뒤 넓은 화면에서 레이아웃을 확장하는 반응형 접근.","description":"핵심 정보와 조작을 먼저 압축해 정리하고, desktop에서는 사이드바나 다중 열을 추가한다.","visual_anatomy":["mobile single column","desktop enhancement","shared content","breakpoint growth"],"when_to_use":["모바일 사용 비중이 높거나 작은 화면에서도 모든 핵심 흐름이 작동해야 할 때"],"anti_use":["복잡한 전문 업무 화면에서 desktop density가 핵심이면 별도 desktop 설계가 필요할 수 있다"],"prompt_phrases":["이 화면은 mobile-first로 만들고 desktop에서는 2열로 확장해줘"],"related":[{"id":"responsive-layout","relation":"use-with","note":"mobile-first는 responsive layout을 설계하는 한 접근 방식이다"}]},{"id":"fluid-layout","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"유동 레이아웃","aliases":["fluid layout","fluid UI","유연한 레이아웃"]},"en":{"name":"Fluid layout","aliases":["Fluid UI","Flexible layout"]},"one_liner":"고정 폭 대신 사용 가능한 공간에 맞춰 크기와 간격이 자연스럽게 변하는 레이아웃.","description":"breakpoint 사이에서도 카드 폭, 컨테이너, 타이포 크기가 뚝뚝 끊기지 않고 부드럽게 적응하게 한다.","visual_anatomy":["narrow width","medium width","wide width","continuous resizing"],"when_to_use":["다양한 화면 폭에서 같은 콘텐츠가 자연스럽게 늘고 줄어야 할 때"],"anti_use":["최소/최대 폭 제한 없이 무한히 늘리면 읽기 폭이 망가진다"],"prompt_phrases":["카드 그리드는 fluid layout으로 폭에 맞게 자연스럽게 바뀌게 해줘"]},{"id":"dynamic-viewport-unit","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"동적 뷰포트 단위","aliases":["dynamic viewport unit","dvh","svh","lvh"]},"en":{"name":"Dynamic viewport unit","aliases":["dvh","svh","lvh","Dynamic viewport height"]},"one_liner":"모바일 브라우저 주소창처럼 변하는 viewport 높이를 반영하는 CSS 단위.","description":"full-height 화면, bottom sheet, 모바일 앱 셸이 주소창 표시 변화 때문에 잘리거나 튀지 않도록 한다.","visual_anatomy":["mobile viewport","browser chrome","stable height","dynamic height"],"when_to_use":["모바일에서 100vh 영역이 주소창 때문에 잘리거나 흔들릴 때"],"anti_use":["단순 콘텐츠 페이지에는 일반 min-height와 자연 스크롤이 더 단순할 수 있다"],"prompt_phrases":["모바일 full-height 화면은 100dvh 기준으로 잘리지 않게 해줘"]},{"id":"safe-area-inset","status":"draft","category":"layout-rendering","group":"layout-responsive-viewport","kind":"visual-treatment","ko":{"name":"안전 영역 인셋","aliases":["safe area inset","notch inset","홈 인디케이터 여백"]},"en":{"name":"Safe-area inset","aliases":["Safe area padding","Notch inset","Home indicator inset"]},"one_liner":"노치, 둥근 모서리, 홈 인디케이터에 UI가 가려지지 않도록 더하는 기기 안전 여백.","description":"모바일 하단 CTA, bottom navigation, full-screen panel이 시스템 영역과 겹치지 않게 한다.","visual_anatomy":["device edge","unsafe area","padded control","safe area label"],"when_to_use":["모바일 하단 고정 버튼이나 전체 화면 레이아웃을 만들 때"],"anti_use":["일반 desktop layout에서는 불필요한 빈 공간이 될 수 있다"],"prompt_phrases":["하단 CTA 바에 safe-area inset padding을 적용해줘"]},{"id":"scroll-snap","status":"draft","category":"layout-rendering","group":"layout-scroll-behavior","kind":"motion-pattern","ko":{"name":"스크롤 스냅","aliases":["scroll snap","스냅 스크롤","snap carousel"]},"en":{"name":"Scroll snap","aliases":["Snap scrolling","Scroll snapping"]},"one_liner":"스크롤이 특정 카드나 섹션 위치에 자연스럽게 맞춰 멈추도록 하는 패턴.","description":"모바일 carousel, 온보딩 페이지, 가로 카드 레일에서 항목이 어정쩡하게 걸치지 않게 한다.","visual_anatomy":["scroll container","snap points","centered item","partial neighbors"],"when_to_use":["가로 카드나 페이지 단위 콘텐츠를 한 항목씩 읽게 하고 싶을 때"],"anti_use":["긴 문서 읽기처럼 자유로운 스크롤이 중요한 화면에서는 방해가 될 수 있다"],"prompt_phrases":["모바일 카드 carousel은 scroll snap으로 한 장씩 맞춰 멈추게 해줘"]},{"id":"tap-feedback","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"탭 피드백","aliases":["tap feedback","터치 피드백","누름 반응"]},"en":{"name":"Tap feedback","aliases":["Touch feedback","Press feedback"]},"one_liner":"터치나 클릭이 인식되었음을 색, 크기, 리플, 진동감 있는 변화로 즉시 보여주는 반응.","description":"모바일에서 사용자가 버튼이나 행을 눌렀는지 확신할 수 있도록 아주 짧은 시각 반응을 준다.","visual_anatomy":["touch target","pressed frame","feedback ripple or color","release state"],"when_to_use":["터치 대상이 즉시 반응해야 하는 버튼","리스트 행","카드에"],"anti_use":["비활성 요소나 오래 지속되는 상태 표시를 tap feedback으로 착각하게 만들지 않는다"],"prompt_phrases":["모바일 리스트 항목을 누르면 즉시 tap feedback이 보이게 해줘"],"related":[{"id":"touch-ripple","relation":"compare","note":"touch ripple은 tap feedback의 한 구체적 표현이다"}]},{"id":"optimistic-update","status":"draft","category":"feedback","group":"feedback-accessibility-states","kind":"component","ko":{"name":"낙관적 업데이트","aliases":["optimistic update","optimistic UI","선반영 UI"]},"en":{"name":"Optimistic update","aliases":["Optimistic UI","Optimistic state"]},"one_liner":"서버 응답을 기다리기 전에 성공할 것으로 보고 UI를 먼저 바꾸는 인터랙션 패턴.","description":"좋아요, 저장, 체크 완료처럼 실패 가능성이 낮은 행동에서 반응 속도를 빠르게 느끼게 한다.","visual_anatomy":["user action","immediate UI change","pending marker","rollback optional"],"when_to_use":["실패 가능성이 낮고 되돌리기 쉬운 작은 행동을 빠르게 반영할 때"],"anti_use":["결제","삭제","권한 변경처럼 실패나 부작용이 큰 행동에는 신중해야 한다"],"prompt_phrases":["좋아요 버튼은 optimistic update로 즉시 선택 상태를 보여줘"]},{"id":"pending-state","status":"draft","category":"feedback","group":"feedback-accessibility-states","kind":"component","ko":{"name":"대기 상태","aliases":["pending state","처리 중 상태","요청 대기"]},"en":{"name":"Pending state","aliases":["In-flight state","Waiting state"]},"one_liner":"사용자의 요청이 접수되었지만 아직 완료나 실패가 확정되지 않은 중간 상태.","description":"버튼, 행, 카드에 spinner, disabled, 임시 문구를 붙여 중복 클릭과 불확실성을 줄인다.","visual_anatomy":["submitted action","temporary indicator","disabled control","unresolved result"],"when_to_use":["저장","업로드","승인 요청처럼 결과를 기다리는 동안"],"anti_use":["너무 오래 지속되면 진행률","취소","재시도 정보를 제공해야 한다"],"prompt_phrases":["저장 요청 중에는 버튼을 pending state로 바꾸고 중복 클릭을 막아줘"]},{"id":"hover-reveal","status":"draft","category":"feedback","group":"feedback-interaction-states","kind":"visual-effect","ko":{"name":"호버 리빌","aliases":["hover reveal","hover actions","마우스오버 노출"]},"en":{"name":"Hover reveal","aliases":["Hover actions","Revealed on hover"]},"one_liner":"평소에는 숨겨 둔 보조 정보나 액션을 hover 때만 드러내는 패턴.","description":"카드 액션, 행 메뉴, 보조 메타를 화면 밀도 안에서 조용히 숨기되 발견 가능성을 유지한다.","visual_anatomy":["default card","hidden action","hover state","revealed control"],"when_to_use":["데스크톱에서 반복 항목의 보조 액션을 덜 시끄럽게 보여줄 때"],"anti_use":["모바일이나 키보드 사용자에게 같은 액션 접근 경로가 없으면 쓰면 안 된다"],"prompt_phrases":["카드 오른쪽 액션은 hover reveal로 나타나게 해줘"],"related":[{"id":"hover-state","relation":"use-with","note":"hover reveal은 hover state를 이용해 숨은 내용을 노출한다"}]},{"id":"gesture-hint","status":"draft","category":"feedback","group":"feedback-accessibility-states","kind":"component","ko":{"name":"제스처 힌트","aliases":["gesture hint","스와이프 힌트","조작 힌트"]},"en":{"name":"Gesture hint","aliases":["Swipe hint","Interaction hint"]},"one_liner":"스와이프, 드래그, 핀치 같은 숨은 제스처를 사용자가 발견하도록 보여주는 작은 단서.","description":"살짝 보이는 다음 카드, 핸들, 방향 화살표, 짧은 안내 문구로 가능한 조작을 암시한다.","visual_anatomy":["gesture target","directional cue","partial next item","optional label"],"when_to_use":["제스처가 주요 조작인데 화면만 봐서는 알기 어려울 때"],"anti_use":["표준 버튼으로 충분히 명확한 행동을 숨겨 제스처에만 의존하지 않는다"],"prompt_phrases":["카드가 옆으로 더 있다는 gesture hint를 살짝 보여줘"]},{"id":"outline","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"아웃라인","aliases":["outline","외곽선","윤곽선"]},"en":{"name":"Outline","aliases":["Outer outline","Focus outline"]},"one_liner":"요소 바깥쪽에 그려지는 윤곽선으로 경계나 포커스 상태를 보여주는 처리.","description":"focus ring, 선택 영역, 강조 상태를 border와 별도로 표시해 레이아웃 크기를 바꾸지 않고 상태를 드러낸다.","visual_anatomy":["element boundary","outside outline","offset gap","highlighted state"],"when_to_use":["포커스나 선택 상태를 레이아웃 흔들림 없이 표시할 때"],"anti_use":["outline을 없애고 대체 표시를 제공하지 않으면 접근성이 나빠진다"],"prompt_phrases":["키보드 focus 상태에는 선명한 outline을 남겨줘"],"related":[{"id":"focus-ring","relation":"use-with","note":"focus ring은 outline이나 ring으로 구현되는 대표 접근성 상태다"}]},{"id":"blend-mode","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"블렌드 모드","aliases":["blend mode","mix-blend-mode","합성 모드"]},"en":{"name":"Blend mode","aliases":["Mix blend mode","Compositing mode"]},"one_liner":"겹친 색이나 이미지가 서로 어떻게 섞일지 정하는 시각 합성 방식.","description":"배경 이미지 위 텍스트, 장식 레이어, hover 효과에서 단순 투명도와 다른 색 섞임을 만든다.","visual_anatomy":["background color","foreground layer","blended overlap","contrast result"],"when_to_use":["브랜드 그래픽이나 hero 배경에서 레이어 색이 자연스럽게 섞여야 할 때"],"anti_use":["본문 가독성이나 접근성 대비가 불안정해지면 쓰지 않는다"],"prompt_phrases":["히어로 이미지 위 그래픽에 subtle blend mode를 적용해줘"]},{"id":"object-fit","status":"draft","category":"layout-rendering","group":"layout-spacing-sizing","kind":"visual-treatment","ko":{"name":"오브젝트 맞춤","aliases":["object fit","이미지 맞춤","cover contain"]},"en":{"name":"Object fit","aliases":["Image fit","Cover fit","Contain fit"]},"one_liner":"이미지나 비디오가 고정된 프레임 안에서 잘릴지, 맞춰질지, 늘어날지를 정하는 처리.","description":"썸네일과 프로필 이미지가 프레임을 채우면서도 왜곡되지 않도록 cover, contain 같은 방식을 고른다.","visual_anatomy":["image frame","cover crop","contain fit","empty area or crop"],"when_to_use":["이미지 카드","아바타","미디어 썸네일의 비율이 제각각일 때"],"anti_use":["중요한 이미지 일부가 잘리면 contain이나 수동 crop을 검토해야 한다"],"prompt_phrases":["상품 이미지는 object-fit cover로 카드 프레임을 채우게 해줘"],"related":[{"id":"aspect-ratio","relation":"use-with","note":"프레임 비율은 aspect-ratio로 잡고 내부 이미지는 object-fit으로 맞춘다"}]},{"id":"semantic-color","status":"draft","category":"style","group":"style-border-color","kind":"visual-treatment","ko":{"name":"의미 색상","aliases":["semantic color","semantic token","의미 기반 색"]},"en":{"name":"Semantic color","aliases":["Semantic token","Meaning-based color"]},"one_liner":"파랑, 회색 같은 실제 색값이 아니라 성공, 위험, 배경, 본문처럼 의미로 이름 붙인 색상.","description":"테마나 브랜드가 바뀌어도 UI 의도는 `destructive`, `muted`, `primary` 같은 의미 이름으로 유지한다.","visual_anatomy":["semantic labels","color swatches","UI states","token mapping"],"when_to_use":["디자인 시스템에서 상태와 역할 중심으로 색을 관리할 때"],"anti_use":["일회성 장식 색까지 모두 semantic token으로 만들면 관리 비용이 커진다"],"prompt_phrases":["삭제 버튼은 red가 아니라 destructive semantic color를 쓰게 해줘"],"related":[{"id":"color-contrast","relation":"use-with","note":"semantic color도 실제 배경과 텍스트 대비를 만족해야 한다"}]},{"id":"theme-token","status":"draft","category":"style","group":"style-tokens","kind":"visual-treatment","ko":{"name":"테마 토큰","aliases":["theme token","design token","테마 변수"]},"en":{"name":"Theme token","aliases":["Design token","Theme variable"]},"one_liner":"색, 간격, radius, shadow 같은 디자인 값을 코드에서 재사용하도록 이름 붙인 변수.","description":"light/dark mode, 브랜드 변경, 컴포넌트 일관성을 위해 원시 값 대신 토큰 이름을 참조한다.","visual_anatomy":["token names","mapped values","component usage","theme switch"],"when_to_use":["여러 컴포넌트가 같은 시각 규칙을 공유하고 테마 전환이 필요할 때"],"anti_use":["한 번만 쓰는 값까지 모두 토큰화하면 시스템이 불필요하게 복잡해진다"],"prompt_phrases":["버튼 색은 하드코딩하지 말고 theme token을 참조하게 해줘"],"related":[{"id":"semantic-color","relation":"use-with","note":"semantic color는 색상 theme token의 대표 형태다"},{"id":"dark-mode","relation":"use-with","note":"테마 토큰이 있어야 dark mode 같은 테마 전환이 :root 스왑만으로 가능해진다"}]},{"id":"blog-post-card","status":"draft","category":"data-display","group":"data-display-misc","kind":"component","ko":{"name":"블로그 포스트 카드","aliases":["blog post card","블로그 카드","article card"]},"en":{"name":"Blog post card","aliases":["Article card","Post preview card"]},"one_liner":"블로그 글 하나를 썸네일과 요약으로 미리 보여주는 카드.","description":"블로그 목록이나 그리드에서 글 제목, 요약, 작성자, 날짜를 함께 보여줘 클릭 전에 내용을 가늠하게 한다.","visual_anatomy":["cover image","category tag","title","excerpt","author avatar","date"],"when_to_use":["블로그 목록에서 여러 글을 미리보기로 나열할 때","관련 글 추천 영역을 만들 때"],"anti_use":["본문 전체를 카드에 담지 않는다","단일 공지나 안내는 banner나 alert가 더 적합하다"],"prompt_phrases":["썸네일과 요약이 있는 blog post card를 만들어줘","작성자와 날짜가 보이는 블로그 카드를 그리드에 배치해줘"]},{"id":"blog-grid-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"블로그 그리드 섹션","aliases":["blog grid","블로그 목록 섹션","article grid section"]},"en":{"name":"Blog grid section","aliases":["Blog list section","Article grid"]},"one_liner":"여러 블로그 포스트 카드를 그리드로 모아 보여주는 섹션.","description":"랜딩 페이지나 블로그 홈에서 최신 글이나 추천 글을 카드 그리드로 나열해 탐색을 돕는다.","visual_anatomy":["section heading","blog post card grid","optional category filter","view all link"],"when_to_use":["최신 글이나 인기 글을 한 화면에서 훑게 할 때"],"anti_use":["글이 하나뿐이면 featured-post-card 하나로 충분하다"],"prompt_phrases":["최신 글 6개가 그리드로 있는 blog grid section을 만들어줘"],"related":[{"id":"blog-post-card","relation":"compare","note":"blog-post-card는 개별 카드이고 blog-grid-section은 여러 카드를 모은 섹션이다."}]},{"id":"featured-post-card","status":"draft","category":"data-display","group":"data-display-misc","kind":"component","ko":{"name":"대표 포스트 카드","aliases":["featured post card","추천 글 카드","강조 포스트 카드"]},"en":{"name":"Featured post card","aliases":["Highlighted post card","Spotlight article card"]},"one_liner":"블로그 글 중 하나를 크게 강조해서 보여주는 대표 카드.","description":"블로그 홈 상단에서 가장 중요한 글 하나를 큰 이미지와 긴 요약으로 눈에 띄게 배치한다.","visual_anatomy":["large cover image","title","longer excerpt","author","date","prominent placement"],"when_to_use":["블로그 홈 최상단에서 신작이나 대표 글을 강조할 때"],"anti_use":["일반 글 목록에는 blog-post-card 그리드가 더 적합하다"],"prompt_phrases":["상단에 큰 이미지로 강조된 featured post card를 넣어줘"],"related":[{"id":"blog-post-card","relation":"compare","note":"blog-post-card는 표준 카드이고 featured-post-card는 그 중 하나를 크게 강조한 변형이다."}]},{"id":"contact-form-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"문의 폼 섹션","aliases":["contact form section","문의하기 섹션","contact us section"]},"en":{"name":"Contact form section","aliases":["Contact us section","Get in touch section"]},"one_liner":"이름, 이메일, 메시지를 입력해 문의를 보내는 폼 중심의 랜딩 섹션.","description":"마케팅 페이지에서 방문자가 회사나 팀에 직접 연락할 수 있도록 입력 필드와 전송 버튼을 묶어 보여준다.","visual_anatomy":["section heading","name field","email field","message field","submit button","optional side info panel"],"when_to_use":["방문자가 폼을 채워 문의나 상담을 요청해야 할 때"],"anti_use":["단순 이메일 주소 안내만 필요하면 contact-info-panel 하나로 충분하다"],"prompt_phrases":["이름","이메일","메시지 입력창이 있는 contact form section을 만들어줘"],"related":[{"id":"contact-info-panel","relation":"compare","note":"contact-info-panel은 연락처 정보 안내이고 contact-form-section은 실제 입력 폼 중심 섹션이다."}]},{"id":"contact-info-panel","status":"draft","category":"data-display","group":"data-display-misc","kind":"component","ko":{"name":"연락처 정보 패널","aliases":["contact info panel","연락처 안내 패널","오피스 정보 패널"]},"en":{"name":"Contact info panel","aliases":["Contact details panel","Get in touch panel"]},"one_liner":"이메일, 전화번호, 주소 같은 연락 채널을 보여주는 정보 패널.","description":"문의 폼 옆이나 푸터 근처에서 회사가 연락받는 다른 채널들을 정리해 보여준다.","visual_anatomy":["icon","label","contact value","optional map or social links"],"when_to_use":["문의 폼과 함께 다른 연락 채널을 안내할 때","오피스 위치나 소셜 링크를 보여줄 때"],"anti_use":["사용자 입력을 받아야 하면 contact-form-section이 필요하다"],"prompt_phrases":["이메일과 전화번호","주소가 있는 contact info panel을 폼 옆에 넣어줘"],"related":[{"id":"contact-form-section","relation":"compare","note":"contact-form-section은 입력을 받는 폼이고 contact-info-panel은 읽기 전용 연락처 안내다."}]},{"id":"office-location-card","status":"draft","category":"data-display","group":"data-display-misc","kind":"component","ko":{"name":"오피스 위치 카드","aliases":["office location card","지점 카드","오피스 카드"]},"en":{"name":"Office location card","aliases":["Location card","Office card"]},"one_liner":"회사의 특정 오피스나 지점 하나의 주소와 정보를 보여주는 카드.","description":"여러 지사가 있는 회사에서 각 오피스의 주소, 사진, 연락처를 개별 카드로 나열한다.","visual_anatomy":["office photo","city or branch name","address","contact info","map link"],"when_to_use":["회사가 여러 지점을 갖고 있어 각각 소개해야 할 때"],"anti_use":["지점이 하나뿐이면 contact-info-panel 하나로 충분하다"],"prompt_phrases":["서울","도쿄 지점이 각각 카드로 있는 office location card 목록을 만들어줘"],"related":[{"id":"contact-info-panel","relation":"compare","note":"contact-info-panel은 일반 연락처 정보이고 office-location-card는 지점별 위치 정보에 초점이 있다."}]},{"id":"content-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"콘텐츠 섹션","aliases":["content section","본문 콘텐츠 섹션","텍스트 이미지 섹션"]},"en":{"name":"Content section","aliases":["Prose section","Text and image section"]},"one_liner":"제목, 본문 텍스트, 이미지를 묶어 하나의 주제를 설명하는 랜딩 섹션.","description":"랜딩 페이지나 소개 페이지에서 기능이나 스토리 하나를 긴 설명과 이미지로 풀어낸다.","visual_anatomy":["section heading","body copy","supporting image","optional link or button"],"when_to_use":["제품 스토리나 기능 하나를 자세한 글과 이미지로 설명할 때"],"anti_use":["사용자가 직접 글을 입력하고 편집해야 하면 rich-text-editor가 필요하다","단순히 화면을 나누기만 하면 범용 section으로 충분하다"],"prompt_phrases":["왼쪽에 이미지","오른쪽에 설명 글이 있는 content section을 만들어줘"],"related":[{"id":"section","relation":"compare","note":"section은 화면을 나누는 범용 구조 개념이고 content-section은 본문 글과 이미지를 담는 구체적인 마케팅 블록이다."},{"id":"rich-text-editor","relation":"compare","note":"rich-text-editor는 사용자가 글을 직접 작성하는 입력 위젯이고 content-section은 이미 작성된 콘텐츠를 보여주는 정적 섹션이다."}]},{"id":"split-content-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"분할 콘텐츠 섹션","aliases":["split content section","좌우 분할 섹션","이미지 텍스트 분할 섹션"]},"en":{"name":"Split content section","aliases":["Split section","Image-text split layout"]},"one_liner":"화면을 좌우로 나눠 한쪽엔 이미지, 다른 한쪽엔 텍스트를 배치하는 콘텐츠 섹션.","description":"content-section의 변형으로, 이미지와 텍스트를 명확한 좌우 2분할 그리드로 정렬해 대비를 준다.","visual_anatomy":["two-column grid","image half","text half","alternating alignment"],"when_to_use":["이미지와 설명을 나란히 대비시켜 보여줄 때","여러 content-section을 좌우 교차로 배치할 때"],"anti_use":["이미지 없이 글만 있으면 일반 content-section이 더 단순하다"],"prompt_phrases":["왼쪽 이미지","오른쪽 텍스트가 번갈아 나오는 split content section을 만들어줘"],"related":[{"id":"content-section","relation":"compare","note":"content-section은 자유 배치이고 split-content-section은 좌우 2분할 그리드로 고정된 변형이다."}]},{"id":"logo-cloud-section","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"로고 클라우드 섹션","aliases":["logo cloud section","로고 그리드 섹션","고객사 로고 섹션"]},"en":{"name":"Logo cloud section","aliases":["Logo cloud","Client logos section","Trusted by section"]},"one_liner":"고객사나 파트너 로고 여러 개를 한 화면에 모아 신뢰를 보여주는 섹션.","description":"랜딩 페이지에서 \"이런 회사들이 쓴다\"는 사회적 증거를 브랜드 로고 그리드로 보여준다.","visual_anatomy":["optional section heading","logo grid","consistent logo sizing","muted or grayscale treatment"],"when_to_use":["제품을 사용하는 유명 고객사나 파트너를 신뢰 요소로 보여줄 때"],"anti_use":["로고 하나만 필요하면 logo를 그대로 쓴다","연동 상태나 설치 행동이 필요하면 integration-grid-section이 더 적합하다"],"prompt_phrases":["고객사 로고 6개가 나열된 logo cloud section을 만들어줘"],"related":[{"id":"logo","relation":"compare","note":"logo는 단일 브랜드 마크이고 logo-cloud-section은 여러 로고를 신뢰 요소로 모은 섹션이다."},{"id":"integration-grid-section","relation":"compare","note":"integration-grid-section은 연동 상태와 설치 행동이 있는 SaaS 목록이고 logo-cloud-section은 신뢰 증거용 정적 로고 나열이다."}]},{"id":"reviews-summary-block","status":"draft","category":"data-display","group":"data-commerce-billing","kind":"block","ko":{"name":"리뷰 요약 블록","aliases":["reviews summary block","리뷰 평점 요약","상품 리뷰 요약"]},"en":{"name":"Reviews summary block","aliases":["Review summary block","Rating summary block"]},"one_liner":"평균 평점과 별점 분포, 개별 리뷰 목록을 한 블록에 묶어 구매 결정을 돕는 UI.","description":"상품 상세 페이지에서 평균 평점과 분포 막대 같은 요약 지표를 개별 리뷰 목록과 함께 배치해 신뢰를 만든다.","visual_anatomy":["average rating number","star distribution bars","review count","individual review cards","verified purchase badge"],"when_to_use":["상품 상세에서 평점 요약과 실제 리뷰를 함께 보여줘야 할 때"],"anti_use":["평점 분포 없이 인용문만 나열하는 마케팅 신뢰 섹션은 testimonial section이 더 적합하다"],"prompt_phrases":["평균 평점과 별점 분포","개별 리뷰가 있는 reviews summary block을 상품 상세에 넣어줘"],"related":[{"id":"testimonial-section","relation":"compare","note":"마케팅 신뢰용 고객 인용문 나열은 testimonial section, 평점 분포와 실제 상품 리뷰 목록을 함께 보여줘야 하면 reviews summary block이다."},{"id":"review-list-with-filters","relation":"compare","note":"평점 분포 요약과 리뷰 목록을 한 블록으로 묶어 보여주는 것이 reviews summary block이고, 평점/사진 유무/구매 인증 여부로 리뷰를 걸러내고 정렬하는 상호작용이 핵심이면 review list with filters다."}]},{"id":"order-history-list","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"주문 내역 목록","aliases":["order history list","주문 이력","지난 주문 목록"]},"en":{"name":"Order history list","aliases":["Order list","Purchase history list"]},"one_liner":"과거 주문들을 날짜·금액·상태로 훑어보고 상세나 재주문으로 이어지는 목록.","description":"계정의 여러 주문을 행 단위로 나열해 사용자가 과거 구매를 스캔하고 상세 확인이나 재주문을 시작하게 한다.","visual_anatomy":["order row","date and order number","item thumbnails","total price","status chip","view detail or reorder action"],"when_to_use":["계정이나 마이페이지에서 여러 주문을 한 번에 훑어봐야 할 때"],"anti_use":["단일 주문 하나의 진행 상태만 보여줄 때는 order status가 더 적합하다"],"prompt_phrases":["날짜 금액 상태 칩이 있는 order history list를 마이페이지에 넣어줘"],"related":[{"id":"order-status","relation":"compare","note":"단일 주문의 진행 상태 표시는 order status, 여러 주문을 스캔 가능한 행으로 나열하는 목록 뷰는 order history list다."}]},{"id":"product-quickview-modal","status":"draft","category":"structure","group":"structure-panels","kind":"block","ko":{"name":"상품 퀵뷰 모달","aliases":["product quickview modal","퀵뷰","상품 미리보기 모달"]},"en":{"name":"Product quickview modal","aliases":["Quick view modal","Product preview modal"]},"one_liner":"카테고리 그리드를 벗어나지 않고 모달로 상품 핵심 정보를 미리 보여주는 패턴.","description":"상품 그리드나 검색 결과에서 상세 페이지로 이동하지 않고 이미지, 가격, 옵션, 담기 같은 핵심 구매 정보만 압축해 보여준다. 담기를 누른 뒤에는 모달을 바로 닫지 않고 미니 카트 미리보기나 토스트로 담기 완료를 확인시키고, 계속 둘러보기와 장바구니로 이동하기 중 하나를 고르게 하는 post-add 확인 상태로 이어질 수 있다.","visual_anatomy":["modal overlay","compact product image","title and price","variant selector","quantity stepper","add to cart action","view full details link","post-add confirmation state","continue-shopping vs go-to-cart choice"],"when_to_use":["카테고리나 그리드 컨텍스트를 유지한 채 빠르게 상품을 확인하고 담게 할 때"],"anti_use":["옵션이 많거나 설명이 길면 전체 상품 상세 페이지로 이동시키는 편이 낫다"],"prompt_phrases":["그리드에서 벗어나지 않고 이미지 가격 담기 버튼을 보여주는 product quickview modal을 만들어줘","담기 완료 후 미니 카트 미리보기와 계속 둘러보기 선택지를 보여주는 quickview add flow를 만들어줘"],"related":[{"id":"product-card","relation":"use-with","note":"그리드의 product card에서 퀵뷰 진입점을 눌러 product quickview modal을 여는 조합이 흔하다."},{"id":"modal-bottom-sheet","relation":"compare","note":"데스크톱 그리드 컨텍스트 유지가 목적이면 product quickview modal, 모바일에서 배경을 막고 아래에서 올라오는 짧은 선택이면 modal bottom sheet다."}]},{"id":"incentive-trust-strip","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"혜택·신뢰 스트립","aliases":["incentive trust strip","신뢰 배지 스트립","무료배송 안내 스트립"]},"en":{"name":"Incentive / trust strip","aliases":["Trust badge strip","Shipping and returns strip"]},"one_liner":"무료배송, 반품 정책, 보안 결제 같은 구매 장벽을 낮추는 짧은 아이콘+텍스트 항목을 나열하는 스트립.","description":"장바구니나 체크아웃 근처에 서너 개의 짧은 아이콘과 한 줄 텍스트로 신뢰 신호를 압축해 보여준다.","visual_anatomy":["icon","short label","optional policy link","3-4 item row or grid"],"when_to_use":["카트","체크아웃","상품 상세 근처에서 구매를 망설이게 하는 장벽을 짧게 해소해야 할 때"],"anti_use":["설명이 길거나 법적 고지가 필요하면 별도 정책 페이지나 FAQ로 연결한다"],"prompt_phrases":["무료배송 반품 보안결제 아이콘이 있는 incentive trust strip을 카트 근처에 넣어줘"]},{"id":"review-list-with-filters","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"필터 리뷰 목록","aliases":["review list with filters","리뷰 필터 목록","후기 필터링 목록"]},"en":{"name":"Review list with filters","aliases":["Filterable review list","Review filter and sort list"]},"one_liner":"평점, 사진 유무, 구매 인증 여부로 개별 리뷰를 걸러내고 정렬하는 목록.","description":"필터 칩과 정렬 컨트롤을 목록 위에 두어 사용자가 원하는 리뷰만 좁혀보게 한다. `reviews-summary-block`이 평점 분포 요약과 리뷰 목록을 한 블록으로 묶는 term이라면, 이 term은 그 목록 안에서의 필터/정렬 상호작용 자체가 핵심이다.","visual_anatomy":["filter chips for rating/has-photo/verified-purchase","sort control","review row with rating/author/date/body/photos","pagination or load-more"],"when_to_use":["상품 상세의 리뷰가 많아 사용자가 평점이나 사진","구매 인증 여부로 좁혀봐야 할 때"],"anti_use":["리뷰 수가 적으면 필터 없이 reviews-summary-block만으로 충분하다"],"prompt_phrases":["평점 사진 유무 구매인증으로 거르는 review list with filters를 만들어줘","최근순 도움순 정렬이 있는 필터 리뷰 목록을 넣어줘"],"related":[{"id":"reviews-summary-block","relation":"compare","note":"평점 분포 요약과 리뷰 목록을 한 블록으로 묶어 보여주는 것이 reviews summary block이고, 평점/사진 유무/구매 인증 여부로 리뷰를 걸러내고 정렬하는 상호작용이 핵심이면 review list with filters다."}]},{"id":"variant-selector-buttons","status":"draft","category":"selection","group":"selection-options","kind":"component","ko":{"name":"변형 선택 버튼 그룹","aliases":["variant selector buttons","사이즈 색상 선택 버튼","변형 옵션 버튼"]},"en":{"name":"Size/color variant selector","aliases":["Variant selector buttons","Swatch and size button group"]},"one_liner":"색상 스와치나 사이즈 버튼을 나열해 재고 유무를 즉시 드러내는 인라인 선택 컨트롤.","description":"드롭다운 뒤에 옵션을 숨기지 않고 버튼 그룹으로 노출해, 선택 상태와 품절 변형을 한눈에 보여준다. Baymard 연구는 사이즈 선택에 드롭다운을 쓰는 사이트가 57%에 달한다고 지목하며 이를 안티패턴으로 본다.","visual_anatomy":["swatch or button group per variant axis","selected state with border or checkmark","disabled state for out-of-stock variant with reason","color swatch shows actual color","size button shows label"],"when_to_use":["상품 상세에서 색상이나 사이즈 같은 변형 옵션을 데스크톱 인라인으로 바로 선택하게 할 때"],"anti_use":["변형 축이 많아 버튼이 화면을 넘치게 하면 별도 구성 화면이나 product-option-sheet가 더 적합하다"],"prompt_phrases":["드롭다운 대신 버튼으로 사이즈를 고르는 variant selector buttons를 넣어줘","품절 사이즈는 흐리게 표시하고 이유를 보여줘"],"related":[{"id":"product-option-sheet","relation":"compare","note":"product option sheet는 모바일 하단 시트로 옵션을 감싸는 래퍼이고, variant selector buttons는 시트 없이 데스크톱 인라인에 바로 놓이는 버튼형 선택 컨트롤 자체를 가리킨다."}]},{"id":"wishlist-management-view","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"위시리스트 관리 화면","aliases":["wishlist management view","찜 목록 관리","저장한 상품 목록"]},"en":{"name":"Wishlist management view","aliases":["Saved items view","Wishlist page"]},"one_liner":"저장한 상품을 모아보고 재고·가격 변동을 확인하며 장바구니로 옮기거나 삭제하는 전용 화면.","description":"Baymard 연구에 따르면 사이트의 60%가 위시리스트 사용에 계정 생성을 강제해 이탈을 유발한다. guest 저장을 허용하고 품절·가격 변동 알림을 목록 안에서 바로 보여주는 것이 핵심 권고다.","visual_anatomy":["grid or list of saved items with thumbnail/title/price/availability","price-drop or back-in-stock indicator","move-to-cart action per item","remove action per item","guest-accessible state"],"when_to_use":["계정이나 마이페이지에서 사용자가 저장해둔 상품을 모아 관리해야 할 때"],"anti_use":["단순히 하트 아이콘으로 찜 여부만 토글하는 것은 이 term의 범위가 아니다 — 저장 목록 전용 화면 자체를 가리킨다"],"prompt_phrases":["가격 변동과 재입고 알림이 있는 wishlist management view를 마이페이지에 만들어줘","로그인 없이도 담을 수 있는 위시리스트 화면을 보여줘"]},{"id":"cross-sell-related-strip","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"연관 상품 추천 스트립","aliases":["cross-sell related strip","함께 구매하면 좋은 상품","관련 상품 스트립"]},"en":{"name":"Cross-sell / related products strip","aliases":["Related products strip","You may also like strip"]},"one_liner":"상품 상세나 장바구니 하단에서 관련·추천 상품을 소규모 캐러셀로 보여주는 스트립.","description":"함께 구매하면 좋은 상품이나 관련 상품 같은 섹션 헤딩 아래 기존 product-card를 가로 스크롤 캐러셀로 나열한다. 추천 로직 자체는 이 term의 범위 밖이며 UI 구조만 다룬다.","visual_anatomy":["section heading","horizontal scrollable row of product-card items","scroll affordance","optional quick add-to-cart action per item"],"when_to_use":["상품 상세나 장바구니 하단에서 관련·연관 상품을 짧게 노출해야 할 때"],"anti_use":["추천 로직 자체나 개인화 전략을 설명해야 하면 이 term의 범위 밖이다"],"prompt_phrases":["상품 상세 하단에 관련 상품 캐러셀인 cross-sell related strip을 넣어줘","장바구니 아래 함께 구매하면 좋은 상품 스트립을 보여줘"],"related":[{"id":"product-card","relation":"use-with","note":"상품 상세나 장바구니 하단의 cross-sell related strip은 이 product card를 그대로 재사용하는 캐러셀 조합이다."}]},{"id":"permission-matrix-editor","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"권한 매트릭스 편집기","aliases":["permission matrix editor","역할 권한 매트릭스","권한표"]},"en":{"name":"Permission matrix editor","aliases":["Role permission matrix","Access matrix editor"]},"one_liner":"역할을 열, 권한·모듈을 행으로 배치해 체크박스로 접근 범위를 부여하는 매트릭스 편집기.","description":"ERP, CRM, 내부 어드민 도구에서 역할별로 어떤 모듈에 어떤 권한을 허용할지 표 형태로 한눈에 편집하게 한다.","visual_anatomy":["role columns","permission rows grouped by module","checkbox or toggle cell","select-all in row/column","role inheritance indicator","duplicate role as base action","default-deny visualization"],"when_to_use":["역할별 접근 범위를 여러 모듈에 걸쳐 한 화면에서 관리해야 할 때"],"anti_use":["역할이 하나뿐이거나 권한이 단순하면 개별 permission-prompt나 role-badge 정도로 충분하다"],"prompt_phrases":["역할을 열로 권한을 행으로 배치한 permission matrix editor를 만들어줘","체크박스로 모듈별 접근 권한을 켜고 끄는 권한 매트릭스를 넣어줘"],"related":[{"id":"role-badge","relation":"compare","note":"role badge는 한 사용자의 역할을 작은 배지로 보여주는 표시 전용 요소이고, permission matrix editor는 여러 역할과 모듈 조합의 접근 권한 자체를 표 형태로 편집하는 도구다"}]},{"id":"danger-zone","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"위험 구역","aliases":["danger zone","삭제 구역","위험한 설정 섹션"]},"en":{"name":"Danger zone","aliases":["Destructive settings section","Advanced destructive actions"]},"one_liner":"삭제, 소유권 이전, 아카이브처럼 되돌릴 수 없는 작업을 설정 페이지 하단에 격리해 담는 섹션.","description":"위치와 경고 색으로 실수 클릭을 구조적으로 어렵게 만들고, 각 행동은 다단계 확인을 거치게 한다.","visual_anatomy":["warning-bordered section","danger zone heading label","action row with short description","outlined destructive button","typed-confirmation modal","consequence explainer text"],"when_to_use":["설정 페이지에 삭제·소유권 이전·아카이브처럼 되돌릴 수 없는 행동이 있을 때"],"anti_use":["되돌릴 수 있는 일반 설정 변경까지 여기 넣으면 진짜 위험한 행동의 무게가 희석된다"],"prompt_phrases":["설정 페이지 맨 아래에 삭제와 소유권 이전이 있는 danger zone 섹션을 만들어줘","위험한 설정을 빨간 테두리로 분리한 danger zone을 넣어줘"],"related":[{"id":"destructive-confirmation","relation":"use-with","note":"danger zone의 각 행동 버튼은 즉시 실행되지 않고 destructive confirmation(이름 재입력 등 typed confirmation)을 거쳐야 한다"}]},{"id":"impersonation-session-banner","status":"draft","category":"feedback","group":"feedback-access-limits","kind":"block","ko":{"name":"임퍼스네이션 세션 배너","aliases":["impersonation banner","로그인 대행 배너","대리 로그인 표시"]},"en":{"name":"Impersonation session banner","aliases":["Login-as banner","Support impersonation banner"]},"one_liner":"지원팀이 다른 사용자로 임시 로그인했을 때 화면 전역에 고정 노출되는 경고 배너.","description":"임퍼스네이션 상태, 대상 사용자, 세션 종료 버튼을 항상 볼 수 있게 해 위험 모드를 구조적으로 인지시킨다. 진입 시에는 대상 사용자 이름을 밝히는 확인 다이얼로그를 먼저 거치고, 종료 시에는 원래 계정으로 즉시 복귀하는 단일 액션을 제공한다.","visual_anatomy":["entry confirmation dialog naming the impersonated user","persistent top banner","impersonation icon or distinct color","impersonated user identity","remaining session time","exit or end session button"],"when_to_use":["지원팀이 고객 계정으로 임시 로그인해 문제를 재현하거나 대신 조작할 때"],"anti_use":["일반 계정 전환에는 account-switcher가 낫다 — impersonation banner는 위험·대리 모드 전용이다"],"prompt_phrases":["지원팀이 다른 사용자로 로그인하면 상단에 impersonation banner를 고정해줘","세션 종료 버튼이 있는 대리 로그인 배너를 넣어줘","진입 확인 다이얼로그와 종료 버튼이 있는 임퍼스네이션 흐름을 만들어줘"]},{"id":"config-environment-diff-view","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"환경 설정 비교 뷰","aliases":["config diff view","environment diff","환경 설정 diff"]},"en":{"name":"Environment / config diff view","aliases":["Config diff view","Environment comparison view"]},"one_liner":"staging/production 같은 두 환경의 설정값을 나란히 비교해 추가·삭제·변경을 색으로 구분하는 뷰.","description":"두 환경 사이의 설정 드리프트를 좌우 비교 레이아웃으로 보여주고, 시크릿 값은 마스킹한 채 다른 환경으로 동기화하는 행동을 함께 제공한다.","visual_anatomy":["two-column environment comparison","key name column","added or removed or changed color coding","masked secret value","sync or copy-to-other-environment action","missing-in-target warning"],"when_to_use":["두 환경의 설정이나 변수 차이를 점검하고 동기화해야 할 때"],"anti_use":["환경이 하나뿐이거나 값이 몇 개 안 되면 단순 목록으로 충분하다"],"prompt_phrases":["staging과 production 설정을 좌우로 비교하는 config diff view를 만들어줘","값이 다르면 색으로 표시되는 환경 설정 비교 화면을 넣어줘"]},{"id":"data-import-wizard-validation-preview","status":"draft","category":"selection","group":"selection-navigation","kind":"block","ko":{"name":"데이터 임포트 검증 위저드","aliases":["import wizard","CSV 임포트 마법사","데이터 가져오기 검증 미리보기"]},"en":{"name":"Data import wizard with validation preview","aliases":["CSV import wizard","Import validation wizard"]},"one_liner":"파일 업로드부터 컬럼 매핑, 행 단위 검증 미리보기, 결과 요약까지 이어지는 다단계 데이터 임포트 흐름.","description":"CSV·파일 업로드 이후 컬럼을 자동·수동으로 매핑하고, 제출 전 행·열 단위 오류를 미리보기에서 강조해 실패를 줄인다.","visual_anatomy":["file upload step","auto-detected column mapping table","manual remap control per column","when-blank default choice","preview table with row-level error highlighting","inline fix affordance","import summary count"],"when_to_use":["사용자가 대량의 외부 데이터를 업로드해 시스템에 반영해야 할 때"],"anti_use":["시작 방법 자체를 고르는 단계라면 import-data-choice가 더 적합하다 — 이 위저드는 방법을 고른 이후의 실제 임포트 실행 흐름이다"],"prompt_phrases":["CSV 업로드 후 컬럼 매핑과 오류 미리보기가 있는 data import wizard를 만들어줘","행 단위 오류를 강조하는 임포트 검증 미리보기를 넣어줘"],"related":[{"id":"wizard","relation":"compare","note":"wizard는 다단계 흐름의 일반 패턴이고, 이 항목은 파일 업로드→컬럼 매핑→행 단위 검증 미리보기→제출 요약으로 이어지는 데이터 임포트에 특화된 구체적 인스턴스다"},{"id":"import-data-choice","relation":"compare","note":"import-data-choice는 CSV·직접 입력·외부 연결 중 시작 방법을 고르는 선택 UI이고, 이 위저드는 그 방법을 고른 이후 실제 파일을 매핑·검증·제출하는 다단계 실행 흐름이다"}]},{"id":"interactive-api-playground","status":"draft","category":"structure","group":"structure-content-elements","kind":"block","ko":{"name":"인터랙티브 API 플레이그라운드","aliases":["interactive api playground","API 플레이그라운드","try it 위젯"]},"en":{"name":"Interactive API playground","aliases":["API try-it widget","Embedded API console"]},"one_liner":"문서 페이지 안에서 실제 파라미터를 입력해 API 요청을 바로 실행하고 응답을 확인하는 임베디드 위젯.","description":"파라미터 입력 폼, Send/Try it 버튼, 실제 응답(상태 코드+JSON)을 한 화면에 묶고, 입력값에 따라 옆의 언어별 코드 샘플이 동기화된다.","visual_anatomy":["parameter input form","send/try-it button","response status code","response body panel","synced code sample"],"when_to_use":["문서 안에서 실제 API 호출을 실행해보고 응답을 즉시 확인해야 할 때"],"anti_use":["실행 없이 코드만 보여주면 api-reference-three-column-layout 정도의 정적 레퍼런스로 충분하다"],"prompt_phrases":["문서 페이지에 파라미터를 입력하고 바로 실행하는 API 플레이그라운드를 넣어줘","Try it 버튼으로 실제 응답을 보여주는 임베디드 API 콘솔을 만들어줘"]},{"id":"docs-landing-hub-category-cards","status":"draft","category":"structure","group":"structure-sections","kind":"block","ko":{"name":"문서 랜딩 허브 카드","aliases":["docs landing hub","문서 홈 카테고리 카드","문서 진입 페이지"]},"en":{"name":"Docs landing hub page with category cards","aliases":["Docs home category cards","Documentation hub page"]},"one_liner":"문서 루트 진입 페이지에서 하위 카테고리를 아이콘과 설명이 있는 카드로 나열해 다음 탐색 지점을 고르게 하는 허브 페이지.","description":"문서 사이트의 최상위 진입점에서 Getting Started, API, Guides 같은 하위 카테고리를 카드 그리드로 보여준다. 각 카드는 사이드바 최상위 그룹과 1:1로 대응해, 카드를 고르는 것이 사이드바의 한 그룹으로 진입하는 것과 같다.","visual_anatomy":["hub page header","category card grid","per-card icon","per-card title and short description","optional item-count or auto-generated excerpt"],"when_to_use":["문서가 여러 하위 카테고리로 나뉘어 있고 방문자가 첫 진입에서 목적지를 골라야 할 때","사이드바 트리를 보여주기 전에 상위 개요를 먼저 제공하고 싶을 때"],"anti_use":["카테고리가 하나뿐이거나 문서 규모가 작으면 바로 article-documentation-layout으로 진입시키는 편이 낫다"],"prompt_phrases":["문서 루트에 카테고리 카드 그리드가 있는 허브 페이지를 만들어줘","Getting Started/API/Guides를 아이콘 카드로 나열한 문서 홈을 만들어줘"]},{"id":"api-error-reference-table","status":"draft","category":"data-display","group":"data-tables-lists","kind":"block","ko":{"name":"API 에러 레퍼런스 테이블","aliases":["api error reference table","에러 코드 테이블","에러 참조표"]},"en":{"name":"API error reference table","aliases":["Error code reference table","Error reference table"]},"one_liner":"에러 코드, 타입, HTTP 상태, 설명을 행으로 나열해 실패 케이스를 스캔 가능하게 만든 참조 테이블.","description":"API 레퍼런스 문서에서 파라미터 표와는 별도로, 발생 가능한 에러를 코드/타입/HTTP 상태 배지/설명 열로 나열한다. 각 행은 anchor id를 가져 특정 에러로 바로 딥링크할 수 있다. 상태 열은 badge 용어의 색상 구분 배지를 그대로 재사용한다.","visual_anatomy":["error code column (monospace)","error type column","HTTP status badge column","description column","per-row anchor id for deep-linking"],"when_to_use":["API가 반환하는 에러 코드/상태를 체계적으로 스캔 가능한 표로 문서화해야 할 때"],"anti_use":["에러가 2~3종뿐이면 표 대신 본문 설명이나 callout으로 충분하다"],"prompt_phrases":["에러 코드/타입/HTTP 상태를 나열한 API 에러 레퍼런스 테이블을 만들어줘","각 에러 행에 anchor id가 있어서 딥링크할 수 있는 에러 코드 표를 만들어줘"],"related":[{"id":"badge","relation":"use-with","note":"api-error-reference-table의 HTTP 상태 열은 badge 용어의 색상 구분 배지를 그대로 재사용한다 — 별도 배지 컴포넌트를 새로 정의하지 않는다."}]},{"id":"dark-mode","status":"draft","category":"style","group":"style-tokens","kind":"visual-treatment","ko":{"name":"다크모드","aliases":["다크 모드","다크 테마","dark mode"]},"en":{"name":"Dark mode","aliases":["Dark theme","Dark appearance"]},"one_liner":"저조도 환경을 위해 어두운 팔레트로 재설계된 시스템/사이트 전역 외형 테마.","description":"색을 기계적으로 반전하는 것이 아니라 대비 관계, 표면 위계(elevation), 채도까지 다시 설계한 별도 팔레트다. 순수 검정 대신 짙은 회색 표면을 쓰고, 높이는 그림자 대신 표면 밝기로 표현하며, WCAG 대비는 라이트와 별도로 재검증한다. 색온도를 옮기는 night shift, OS가 사후 반전하는 inverted colors, 접근성용 강제 팔레트인 forced colors와는 서로 다른 축이다.","visual_anatomy":["dark surface palette","elevated surface brightness","desaturated accents","theme toggle"],"when_to_use":["저조도 사용 환경이 흔한 제품일 때","사용자 OS 테마 선호(prefers-color-scheme)를 존중해야 할 때"],"anti_use":["라이트 팔레트를 단순 반전해 다크로 내놓지 않는다","순수 검정 배경에 순백 텍스트로 극단 대비(halation)를 만들지 않는다"],"prompt_phrases":["사이트에 라이트/다크/시스템 3-상태 dark mode 토글을 넣어줘"],"related":[{"id":"theme-token","relation":"use-with","note":"다크모드는 모든 색이 semantic 토큰을 거칠 때만 성립한다 — 컴포넌트에 하드코딩된 색은 다크 전환을 구조적으로 막는다."}]}]