디자인 레퍼런스 전체 색인 · 6/27

2,153개 정의·활용·주의사항·출처를 개별 문서로 제공합니다. 이 색인은 JavaScript 없이 탐색할 수 있습니다.

직접 조작 가능한 레퍼런스 291개 보기

• 와이어프레임

  Wireframe

  색·장식보다 구조와 콘텐츠 우선순위를 보여주는 화면 초안.

• 목업

  Mockup

  실물·화면 맥락에서 디자인이 적용된 모습을 보여주는 모형.

• 프로토타입

  Prototype

  흐름·동작을 시험할 수 있는 시제품.

• 인터랙션 명세

  Interaction Spec

  사용자 입력과 그에 따른 상태·반응을 정의한 문서.

• 채팅 말풍선

  Chat Bubble

  대화 메시지를 발신자별로 시각적으로 구분.

• 채팅 입력기

  Chat Composer

  프롬프트·메시지를 작성하고 첨부하는 영역.

• 입력 중 표시

  Typing Indicator

  상대가 메시지를 작성 중임을 알리는 표시.

• 스트리밍 응답

  Streaming Response

  완료된 메시지 대신 생성 중인 응답을 단계적으로 노출.

• 토큰 단위 렌더링

  Token-by-token Rendering

  생성되는 토큰 조각을 순차적으로 화면에 추가.

• 마크다운 렌더링

  Markdown Rendering

  마크다운 내용을 제목·표·코드 등으로 변환해 표시.

• 코드 블록

  Code Block

  복사·하이라이트 등을 지원하는 코드 출력 영역.

• 출처 표시 칩

  Citation Chip

  AI 응답의 근거 자료를 연결하는 작은 UI 표시.

• 출처 패널

  Source Panel

  AI가 활용한 근거 문서·링크를 모아 보여줌.

• 도구 실행 카드

  Tool Call Card

  AI가 호출한 외부 도구의 작업 상태·결과를 표시.

• 에이전트 활동 피드

  Agent Activity Feed

  도구 실행·진행 단계 등을 시간 순서로 표시.

• 실행 승인 화면

  Approval Gate UI

  AI가 변경·발송 등 실제 동작 전 사용자 승인을 요청.

• 사용자 개입형 UI

  Human-in-the-loop UI

  자동화 흐름에 승인·수정·재시도 단계를 배치.

• 응답 재생성

  Regenerate Response

  이전 요청으로 새로운 답변을 다시 생성.

• 생성 중단

  Stop Generation

  스트리밍 응답을 사용자가 즉시 멈추는 동작.

• 프롬프트 추천

  Prompt Suggestion

  사용 가능한 질문·명령 예시를 제안.

• 후속 질문 추천

  Follow-up Suggestion

  현재 답변과 연결되는 다음 탐색 경로 제공.

• 대화 기록

  Conversation History

  과거 대화를 목록·검색·재진입 방식으로 관리.

• 기억 상태 표시

  Memory Indicator

  사용자 컨텍스트의 적용·저장 상태를 알림.

• 확신도 표시

  Confidence Indicator

  시스템 추정의 불확실성을 적절히 설명하는 UI.

• 상품 카드

  Product Card

  상품 이미지·이름·가격·평점·동작을 함께 표시.

• 상품 이미지 갤러리

  Product Gallery

  상품 사진·영상 등 여러 시각 자료를 탐색.

• 옵션 선택기

  Variant Selector

  색상·사이즈·구성 등 구매 옵션을 고름.

• 수량 스테퍼

  Quantity Stepper

  수량을 +·−로 증감하는 입력 컨트롤.

• 장바구니 버튼

  Add-to-cart Button

  선택 상품을 장바구니에 추가하는 CTA.

• 가격 내역

  Price Breakdown

  상품 금액·할인·배송비·세금·합계를 분해 표시.

• 결제 단계 표시

  Checkout Stepper

  장바구니부터 결제 완료까지 진행 단계 표시.

• 주문 상태 타임라인

  Order Status Timeline

  결제·출고·배송 완료 등의 상태 이력을 표현.

• 재고 상태

  Inventory Status

  재고 있음·부족·품절·입고 예정 등을 보여줌.

• 대시보드 위젯

  Dashboard Widget

  대시보드 안에서 하나의 분석 질문을 담당하는 독립 패널입니다.

• 지표 비교

  Metric Comparison

  같은 지표의 두 기간 또는 두 집단을 나란히 비교합니다.

• 증감 표시기

  Delta Indicator

  기준값 대비 절대 변화나 비율 변화를 짧게 표시합니다.

• 기간 필터

  Date Range Filter

  분석에 사용할 시작일·종료일과 비교 기간을 설정합니다.

• 저장된 보기

  Saved View

  필터·정렬·열 구성을 저장해 재사용.

• 열 표시 설정

  Column Visibility

  테이블에서 보일 열과 숨길 열을 설정.

• 내보내기 메뉴

  Export Menu

  CSV·엑셀·PDF 등으로 자료를 출력.

• 가져오기 마법사

  Import Wizard

  파일 업로드·필드 매핑·검증 과정을 안내.

• 일괄 수정

  Batch Edit

  여러 레코드의 값을 동시에 바꾸는 UI.

• 감사 로그 화면

  Audit Log Viewer

  작업자·시간·변경 내역을 조회·필터링.

• 권한 매트릭스

  Permission Matrix

  역할별 자원·행동 권한을 표 형태로 설정.

• 정보 구조 설계

  Information Architecture (IA)

  콘텐츠·기능을 사용자가 이해하기 쉽게 조직.

• 사용자 흐름

  User Flow

  목표 달성을 위한 화면·행동 이동 경로.

• 작업 흐름

  Task Flow

  특정 작업을 완수하기 위한 일련의 단계.

• 사용자 여정 지도

  User Journey Map

  시간 흐름에 따른 행동·접점·감정·문제를 표현.

• 서비스 블루프린트

  Service Blueprint

  사용자 접점과 내부 업무·시스템을 연결해 시각화.

• 페르소나

  Persona

  특정 사용자 유형의 목표·맥락을 대표하는 모델.

• 수행 과업 관점

  Jobs To Be Done (JTBD)

  사용자가 제품을 선택하는 근본 목적을 중심으로 분석.

• 사용성 테스트

  Usability Testing

  실제 사용자의 과제 수행을 관찰해 문제를 찾음.

• 휴리스틱 평가

  Heuristic Evaluation

  일반적인 사용성 원칙으로 UI 문제를 점검.

• 인지적 워크스루

  Cognitive Walkthrough

  사용자가 처음 접하는 작업을 이해할지 단계별 평가.

• A/B 테스트

  A/B Testing

  두 버전 간 사용자 행동·성과 차이를 비교.

• 퍼널 분석

  Funnel Analysis

  단계별 전환과 이탈을 분석.

• 히트맵 분석

  Heatmap Analysis

  클릭·스크롤·시선 집중 경향을 시각화.

• 카드 소팅

  Card Sorting

  콘텐츠 항목을 사용자에게 묶게 하여 분류 체계를 탐색하는 연구 방법.

• 트리 테스트

  Tree Testing

  탐색 구조만으로 목표 항목을 찾을 수 있는지 평가.

• 디자인 크리틱

  Design Critique

  설계 목표와 원칙에 따라 개선점을 검토.

• 디자인 핸드오프

  Design Handoff

  레이아웃·자산·토큰·동작 규칙을 개발 구현에 전달하는 과정.

• 어포던스

  Affordance

  사용자가 가능한 동작을 추론하게 하는 특성.

• 시그니파이어

  Signifier

  어디를 누르거나 움직일지 알려주는 시각·감각 신호.

• 피드백 루프

  Feedback Loop

  사용자 행동·시스템 반응·다음 행동을 잇는 순환.

• 3D 뷰포트

  3D Viewport

  3차원 장면이 표시되는 작업·탐색 영역.

• 오빗 컨트롤

  Orbit Controls

  대상 주위를 회전하며 3D 장면을 관찰하는 조작.

• 팬 컨트롤

  Pan Controls

  3D 카메라 시점을 평면상으로 이동.

• 줌·돌리

  Zoom / Dolly

  카메라 화각이나 위치를 변경해 확대·축소.

• 변환 기즈모

  Transform Gizmo

  위치·회전·크기를 조작하는 축과 핸들의 묶음.

• 씬 계층 트리

  Scene Hierarchy

  장면의 오브젝트 부모·자식 관계를 표시.

• 인스펙터 패널

  Inspector Panel

  선택 오브젝트의 속성을 확인·편집.

• 에셋 브라우저

  Asset Browser

  3D 모델·텍스처·재질을 검색·선택하는 UI.

• 그리드 스냅

  Snap to Grid

  이동·배치를 일정 격자 단위에 맞추는 기능.

• 바운딩 박스

  Bounding Box

  대상 전체를 감싸는 상자형 경계.

• 선택 외곽선

  Selection Outline

  선택된 대상의 윤곽을 강조하는 표시.

• 미니맵

  Minimap

  현재 주변 공간과 주요 정보를 축약하여 보여주는 작은 지도.

• 시각적 위계

  Visual Hierarchy

  크기·명도·위치·간격 차이로 무엇을 먼저 보게 할지 조직하는 원리.

• 대비

  Contrast

  색·밝기·크기·형태의 차이를 이용해 요소를 구분하고 강조하는 관계.

• 정렬

  Alignment

  요소의 기준선이나 가장자리를 맞춰 구조와 관계를 드러내는 방식.

• 근접성

  Proximity

  가까이 놓인 요소를 관련된 집단으로 인식하는 지각 원리.