바이브 디자이너를 위한 UXUI 용어사전

Progressive Disclosure

필요한 정보만 단계적으로 보여줘서 사용자의 부담을 줄이고, 한 번에 이해해야 할 양을 낮추는 UX 방식

Visual Hierarchy

중요한 정보부터 먼저 보이도록 크기, 색상, 위치, 대비를 활용해 우선순위를 만드는 레이아웃 방식

Empty State

데이터가 없을 때 현재 상태를 설명하고, 사용자가 다음에 무엇을 해야 하는지 안내하는 상태 화면

User Flow

사용자가 목표를 달성하기까지 거치는 화면과 행동의 흐름을 순서대로 정리한 구조

Information Architecture

정보를 이해하기 쉽게 분류하고 구조화해, 사용자가 원하는 내용을 더 빠르게 찾도록 돕는 설계 방식

Heuristic Evaluation

대표적인 사용성 원칙을 기준으로 인터페이스의 문제를 빠르게 점검하는 평가 방법

Grid System

일관된 정렬과 간격을 만들기 위해 화면을 기준선과 열 단위로 나누어 설계하는 방식

Whitespace

콘텐츠 사이에 의도적으로 비워 둔 공간으로, 가독성과 정보 구분, 시선 집중도를 높이는 요소

Card Sorting

사용자가 정보를 어떻게 묶고 이해하는지 파악하기 위해 카드 형태로 분류를 진행하는 리서치 방법

Skeleton Screen

콘텐츠가 로딩되기 전에 자리 구조를 먼저 보여줘 대기 흐름을 자연스럽게 만드는 로딩 상태 화면

Error State

문제가 발생했을 때 원인과 해결 방법, 다음 행동을 명확히 안내하는 상태 화면

Success State

작업이 정상적으로 완료되었음을 확인시켜 주고, 다음 행동을 이어서 유도하는 피드백 상태

Affordance

어떤 요소를 봤을 때 사용자가 가능한 행동을 직관적으로 예상하게 만드는 시각적 단서

Microinteraction

작은 사용자 행동에 반응해 즉각적인 피드백을 주는 짧고 구체적인 인터랙션 설계

Feedback Loop

사용자 행동에 대한 시스템 반응을 통해 결과를 알려 주고, 다음 행동을 자연스럽게 유도하는 흐름

Task Flow

사용자가 하나의 구체적인 목표를 완료하기까지 거치는 단계만 집중해서 정리한 흐름 구조

Mental Model

사용자가 서비스나 기능이 어떻게 동작할 것이라고 예상하는 방식을 설명하는 개념

Jobs To Be Done

사용자가 제품을 쓰는 이유를 기능이 아니라 해결하려는 과업 중심으로 이해하는 관점

Experience Mapping

사용자가 특정 목표를 달성하는 전 과정에서 느끼는 행동, 감정, 문제를 시간 흐름에 따라 정리한 지도

User Interview

사용자의 행동 맥락과 동기, 불편함을 깊이 이해하기 위해 대화를 통해 정보를 수집하는 리서치 방법

Usability Testing

사용자가 실제 화면을 사용하면서 과업을 얼마나 쉽게 수행하는지 관찰해 문제를 찾는 검증 방법

A/B Testing

두 가지 이상의 화면안을 실제 사용자에게 노출해 어떤 버전이 더 나은 성과를 내는지 비교하는 실험 방법

Survey Research

설문 문항을 통해 다수의 사용자가 가진 인식, 만족도, 요구사항을 정량적으로 파악하는 리서치 방법

Diary Study

사용자가 일정 기간 동안 자신의 경험과 행동을 기록하게 해 장기적인 사용 맥락을 파악하는 리서치 방법

Field Study

사용자가 실제 제품을 사용하는 현장을 직접 관찰해 맥락과 제약 조건을 이해하는 현장 조사 방법

Content Grouping

관련 있는 정보끼리 묶어 사용자가 내용을 더 쉽게 이해하고 탐색할 수 있게 만드는 구성 방식

Hierarchical Structure

정보를 상위와 하위 단계로 나누어 중요도와 포함 관계가 자연스럽게 드러나도록 만드는 구조

Flat Navigation

메뉴 깊이를 최소화해 사용자가 적은 단계로 원하는 정보에 접근할 수 있게 하는 내비게이션 구조

Taxonomy

정보와 콘텐츠를 일관된 기준으로 분류하고 이름 붙이는 체계

Content Model

콘텐츠가 어떤 속성과 관계를 가지는지 구조적으로 정의한 설계 모델

Sitemap

서비스 전체 페이지와 정보 구조의 관계를 한눈에 볼 수 있도록 정리한 지도 형태의 문서

Global Navigation

서비스 전반에서 공통으로 유지되며 주요 영역으로 이동할 수 있게 돕는 최상위 내비게이션

Local Navigation

특정 섹션 안에서 세부 페이지나 하위 기능 사이를 이동하도록 돕는 보조 내비게이션

Breadcrumb Navigation

현재 페이지가 전체 구조 안에서 어디에 위치하는지 경로 형태로 보여주는 내비게이션 방식

Tab Navigation

동일한 레벨의 여러 화면이나 정보 묶음을 탭 형태로 전환하며 탐색하게 하는 방식

Sidebar Navigation

화면 측면에 메뉴를 배치해 여러 기능과 섹션을 지속적으로 보여주는 내비게이션 방식

Mega Menu

여러 하위 메뉴와 관련 콘텐츠를 한 번에 넓게 펼쳐 보여주는 확장형 내비게이션 방식

Pagination

많은 콘텐츠를 여러 페이지로 나눠 사용자가 현재 위치를 파악하며 탐색하게 돕는 방식

Responsive Layout

화면 크기와 기기 환경에 따라 레이아웃과 요소 배치를 유연하게 조정하는 설계 방식

Fixed Layout

콘텐츠 영역의 폭을 고정해 화면 크기가 달라도 일정한 구조와 정렬을 유지하는 레이아웃 방식

Fluid Layout

화면 크기에 따라 콘텐츠 폭과 요소 크기가 비율 기반으로 자연스럽게 늘어나거나 줄어드는 레이아웃 방식

Card Layout

정보를 독립된 카드 단위로 나눠 비교, 스캔, 재배치를 쉽게 만드는 레이아웃 방식

Split Layout

한 화면을 두 개 이상의 주요 영역으로 나눠 서로 다른 정보나 작업을 동시에 보여주는 레이아웃 방식

Contrast

서로 다른 색상, 크기, 두께, 간격 차이를 활용해 정보의 구분과 우선순위를 분명하게 만드는 원리

Emphasis

중요한 정보나 행동 요소를 더 강하게 드러내 사용자의 시선을 집중시키는 표현 방식

Alignment

요소를 일정한 기준선에 맞춰 배치해 화면을 더 정돈되고 읽기 쉽게 만드는 정렬 원칙

Repetition

반복되는 색상, 형태, 간격, 패턴을 사용해 화면 전반의 일관성을 강화하는 디자인 원칙

Scale

요소 크기의 차이를 활용해 중요도와 정보 단계가 자연스럽게 드러나도록 만드는 표현 방식

Color Hierarchy

색상 강도와 대비를 활용해 중요한 정보와 보조 정보를 단계적으로 구분하는 시각적 체계

Typography Hierarchy

글자 크기, 굵기, 줄간격 차이를 활용해 제목, 본문, 보조 정보를 구조적으로 구분하는 체계

Input Field

사용자가 텍스트나 값을 직접 입력할 수 있도록 제공하는 가장 기본적인 폼 요소

Dropdown

여러 선택지 중 하나를 고를 수 있도록 목록을 펼쳐 보여주는 선택형 입력 요소

Radio Button

여러 선택지 중 하나만 고를 수 있도록 만드는 단일 선택형 입력 요소

Checkbox

여러 항목을 동시에 선택하거나 개별 동의 여부를 표시할 수 있게 하는 다중 선택형 입력 요소

Form Validation

입력된 값이 규칙에 맞는지 확인하고 오류를 사용자에게 알려주는 검증 과정

Inline Validation

폼을 제출하기 전에 입력 중인 위치 근처에서 바로 검증 결과를 알려주는 피드백 방식

Input Mask

입력 형식을 미리 정해 사용자가 특정 패턴에 맞춰 값을 쉽게 입력하도록 돕는 방식

Loading State

콘텐츠나 작업이 아직 완료되지 않았음을 보여주고 사용자가 기다리는 상황을 이해하게 돕는 상태 표현

Toast Message

화면 흐름을 크게 방해하지 않으면서 짧은 피드백을 잠시 보여주는 경량형 알림 메시지

Alert Dialog

중요한 경고나 즉시 확인이 필요한 상황을 화면 위에 띄워 강하게 주의를 환기하는 대화상자

Confirmation Dialog

중요한 행동을 실행하기 전에 사용자의 의도를 한 번 더 확인하는 대화상자

Hover State

포인터가 요소 위에 올라갔을 때 상호작용 가능성을 알려주는 시각적 상태 변화

Focus State

현재 키보드나 보조기기 기준으로 어떤 요소가 선택되어 있는지 보여주는 접근성 중심 상태 표현

Active State

버튼이나 메뉴가 현재 눌렸거나 선택된 상태임을 보여주는 상호작용 피드백 표현

Gesture Interaction

탭, 스와이프, 핀치 같은 손동작을 통해 인터페이스와 상호작용하도록 설계하는 방식

Drag and Drop

요소를 끌어서 다른 위치에 놓는 방식으로 정렬, 이동, 업로드를 수행하게 하는 상호작용 패턴

Animation Feedback

짧은 움직임을 활용해 사용자 행동의 결과나 상태 변화를 더 분명하게 전달하는 피드백 방식

Accessibility (a11y)

장애 유무와 관계없이 더 많은 사용자가 제품을 이해하고 조작할 수 있게 만드는 접근성 설계 개념

Color Contrast Ratio

텍스트와 배경처럼 서로 맞닿는 색 사이의 대비 정도를 수치로 나타내는 접근성 기준

Keyboard Navigation

마우스 없이 키보드만으로도 화면을 이동하고 조작할 수 있게 만드는 탐색 방식

Screen Reader Support

스크린 리더 사용자가 화면 구조와 요소 의미를 올바르게 이해할 수 있도록 돕는 접근성 지원 방식

Focus Indicator

현재 포커스된 요소가 어디인지 시각적으로 보여줘 키보드 탐색을 돕는 표시 요소

ARIA Label

화면에 보이는 텍스트만으로 의미가 충분하지 않을 때 보조기기에 요소 목적을 더 명확히 전달하는 속성

Semantic HTML

요소의 의미에 맞는 HTML 태그를 사용해 구조, 접근성, 유지보수성을 함께 높이는 작성 방식

Design Token

색상, 간격, 폰트 크기 같은 디자인 값을 일관되게 재사용할 수 있도록 추상화한 기본 단위

Component Library

반복해서 사용하는 UI 컴포넌트를 한곳에 정리해 재사용성과 일관성을 높이는 라이브러리

Atomic Design

작은 UI 단위부터 더 큰 조합 단위까지 계층적으로 쌓아 인터페이스를 설계하는 시스템 접근 방식

UI Kit

화면 구성에 자주 쓰이는 UI 요소와 스타일 규칙을 모아 빠르게 조합할 수 있게 만든 모음

Style Guide

색상, 타이포그래피, 아이콘, 컴포넌트 사용 원칙을 정리해 시각 일관성을 유지하게 돕는 기준 문서

Benchmarking

경쟁 서비스나 유사 사례를 비교 분석해 현재 제품의 강점과 개선 기회를 파악하는 리서치 방법

Tree Testing

메뉴 구조만 분리해 사용자가 원하는 정보를 얼마나 쉽게 찾는지 검증하는 정보구조 중심 리서치 방법

First Click Test

사용자가 과업을 시작할 때 첫 클릭을 어디에서 하는지 확인해 화면의 직관성을 점검하는 테스트 방법

Five Second Test

화면을 짧게 보여준 뒤 사용자가 기억하는 핵심 메시지와 인상을 확인하는 빠른 인지 테스트 방법

Microcopy

버튼, 안내 문구, 오류 메시지처럼 화면 곳곳에서 사용자 행동을 돕는 짧은 텍스트 설계 요소

Tone of Voice

제품이 사용자와 소통할 때 유지하는 말투와 표현 방식의 일관된 기준

Error Message Writing

오류 상황에서 문제 원인과 해결 방법을 명확하고 부담 없이 전달하는 메시지 작성 방식

Call to Action (CTA)

사용자가 다음에 해야 할 행동을 명확하게 제안하고 유도하는 행동 중심 문구와 버튼 요소

Placeholder Text

입력창 안에서 예상 입력값이나 형식을 짧게 예시로 보여주는 보조 텍스트

Helper Text

입력 요소나 섹션 아래에서 사용 방법이나 제한 조건을 보완해 설명하는 짧은 안내 텍스트

Content Hierarchy

메시지와 정보의 중요도에 따라 제목, 본문, 보조 설명을 단계적으로 구성하는 체계

Product Listing Page (PLP)

여러 상품을 목록 형태로 보여주며 탐색, 비교, 필터링을 지원하는 커머스 핵심 화면

Product Detail Page (PDP)

하나의 상품에 대한 핵심 정보와 구매 결정을 돕는 상세 내용을 보여주는 커머스 화면

Add to Cart

사용자가 구매를 고려하는 상품을 장바구니에 담아 다음 단계로 이어가게 만드는 커머스 상호작용

Checkout Flow

장바구니에서 결제 완료까지 이어지는 단계별 구매 흐름을 설계하는 커머스 패턴

Wishlist

당장 구매하지는 않지만 관심 있는 상품을 따로 저장해 다시 비교하거나 검토할 수 있게 하는 기능

Product Filter

가격, 브랜드, 색상, 사이즈 같은 조건을 기준으로 상품 목록을 빠르게 좁혀가는 탐색 도구

Dashboard

핵심 지표와 주요 작업, 상태 요약을 한 화면에서 빠르게 파악할 수 있도록 구성한 관리형 화면

Data Table

여러 행과 열로 구성된 데이터를 정리해 비교, 정렬, 검색, 편집이 가능하도록 보여주는 표 형태의 컴포넌트

Bulk Action

여러 항목을 한 번에 선택한 뒤 동일한 작업을 일괄로 수행할 수 있게 하는 관리형 패턴

Empty Dashboard

대시보드에 아직 데이터가 없을 때 현재 상태와 시작 방법을 함께 안내하는 초기 상태 화면

Conversion Rate Optimization (CRO)

사용자가 원하는 핵심 행동을 더 자주 완료하도록 흐름과 화면 요소를 개선하는 최적화 접근 방식

Funnel Optimization

사용자가 목표를 달성하는 단계별 흐름에서 이탈 지점을 찾고, 완료율을 높이도록 개선하는 방식

Onboarding Flow

새로운 사용자가 서비스의 핵심 가치를 빠르게 이해하고 첫 성공 경험에 도달하도록 돕는 초기 흐름

Content Strategy

사용자에게 어떤 콘텐츠를 어떤 목적과 우선순위로 제공할지 구조적으로 계획하는 전략

UX Writing

사용자가 화면을 이해하고 행동할 수 있도록 버튼, 안내 문구, 상태 메시지를 설계하는 글쓰기 방식

Button Copy

버튼 위에 들어가는 짧은 문구를 통해 사용자가 어떤 행동을 하게 될지 명확히 전달하는 작성 방식

Data Visualization

수치와 데이터를 차트, 그래프, 시각 요소로 표현해 패턴과 의미를 더 빠르게 이해하게 만드는 방식

Table Pagination

데이터 테이블의 많은 행을 여러 페이지로 나눠 성능과 가독성을 함께 유지하는 패턴

Column Sorting

테이블 열 기준으로 데이터를 오름차순이나 내림차순으로 재정렬할 수 있게 하는 탐색 패턴

Filter Panel

여러 필터 조건을 한곳에 모아 사용자가 목록을 세부적으로 좁혀갈 수 있게 하는 패널형 탐색 구조

Social Proof

다른 사용자의 선택이나 평가를 보여줘 현재 사용자의 신뢰와 행동 결정을 돕는 설계 요소

Trust Signal

사용자가 서비스나 결제 과정이 안전하고 믿을 만하다고 느끼도록 돕는 신뢰 강화 요소

Urgency Cue

지금 행동해야 할 이유를 강조해 사용자의 결정을 앞당기도록 돕는 시간 기반 유도 요소

Default Effect

사용자가 기본으로 선택되어 있는 옵션을 그대로 유지하려는 경향을 고려해 기본값 설계를 중요하게 보는 개념

Hick's Law

선택지가 많아질수록 사용자의 결정 시간이 길어진다는 원리를 설명하는 UX 법칙

Fitts's Law

목표 요소가 크고 가까울수록 더 빠르고 쉽게 선택할 수 있다는 상호작용 원리를 설명하는 법칙

Serial Position Effect

사람이 목록의 처음과 끝에 있는 항목을 더 잘 기억하는 경향을 설명하는 인지 원리