커머스·업무 대시보드
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
상품 카드 Product Card
상품 이미지·이름·가격·평점·동작을 함께 표시.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
상품 이미지 갤러리 Product Gallery
상품 사진·영상 등 여러 시각 자료를 탐색.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
옵션 선택기 Variant Selector
색상·사이즈·구성 등 구매 옵션을 고름.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
수량 스테퍼 Quantity Stepper
수량을 +·−로 증감하는 입력 컨트롤.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
장바구니 버튼 Add-to-cart Button
선택 상품을 장바구니에 추가하는 CTA.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
가격 내역 Price Breakdown
상품 금액·할인·배송비·세금·합계를 분해 표시.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
결제 단계 표시 Checkout Stepper
장바구니부터 결제 완료까지 진행 단계 표시.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
주문 상태 타임라인 Order Status Timeline
결제·출고·배송 완료 등의 상태 이력을 표현.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
재고 상태 Inventory Status
재고 있음·부족·품절·입고 예정 등을 보여줌.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
저장된 보기 Saved View
필터·정렬·열 구성을 저장해 재사용.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
열 표시 설정 Column Visibility
테이블에서 보일 열과 숨길 열을 설정.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
내보내기 메뉴 Export Menu
CSV·엑셀·PDF 등으로 자료를 출력.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
가져오기 마법사 Import Wizard
파일 업로드·필드 매핑·검증 과정을 안내.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
일괄 수정 Batch Edit
여러 레코드의 값을 동시에 바꾸는 UI.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
감사 로그 화면 Audit Log Viewer
작업자·시간·변경 내역을 조회·필터링.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
권한 매트릭스 Permission Matrix
역할별 자원·행동 권한을 표 형태로 설정.
커머스·업무 대시보드에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Commerce & Business Dashboards
Open an entry for its visual reference, comparisons and source-language text.
Product Card 상품 카드
A card combining a product image, name, price, rating, and actions.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Product Gallery 상품 이미지 갤러리
A browsable collection of product photos, videos, and other visual material.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Variant Selector 옵션 선택기
A control for choosing purchase options such as color, size, or configuration.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Quantity Stepper 수량 스테퍼
An input that increases or decreases a quantity with plus and minus controls.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Add-to-cart Button 장바구니 버튼
A call to action that adds the selected product to a shopping cart.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Price Breakdown 가격 내역
An itemized display of product price, discounts, shipping, taxes, and total.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Checkout Stepper 결제 단계 표시
An indicator of progress from the shopping cart through checkout completion.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Order Status Timeline 주문 상태 타임라인
A history of order states such as payment, dispatch, and delivery.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Inventory Status 재고 상태
A display of availability, such as in stock, low stock, sold out, or arriving soon.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Saved View 저장된 보기
A reusable saved configuration of filters, sorting, and columns.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Column Visibility 열 표시 설정
A setting controlling which table columns are shown or hidden.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Export Menu 내보내기 메뉴
A menu for exporting information in formats such as CSV, spreadsheet, or PDF.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Import Wizard 가져오기 마법사
A guide through file upload, field mapping, and validation.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Batch Edit 일괄 수정
An interface for changing values in multiple records together.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Audit Log Viewer 감사 로그 화면
An interface for viewing and filtering actors, timestamps, and change history.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Permission Matrix 권한 매트릭스
A table for configuring resource and action permissions by role.
Specifying commerce and business dashboards.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.