UX Taxonomy

UX 택소노미

정보 구조, 내비게이션, 검색, 페이지 유형, 플로우 패턴, 행동 패턴, AI UX까지. 사용자 경험 설계를 키워드로 정리했습니다.


9

Parts

0

Categories

220+

Keywords

Part 1

정보 조직

서비스의 정보를 어떤 논리로 분류하는가?: 22개 키워드


정보를 어떤 기준으로 분류할 것인가? DB 정렬, 카테고리 구조, 필터 설계에 직접 영향

NameDescriptionScope

Alphabetical Scheme

알파벳/가나다순 체계: "용어 사전은 Alphabetical"

DB 정렬, 인덱스 UI

Chronological Scheme

시간순 체계: "블로그 피드는 Chronological, 최신순"

DB ORDER BY, 피드 UI

Geographical Scheme

지리적 체계: "매장 찾기는 Geographical"

위치 DB, 지도 UI

Topical Scheme

주제별 체계: "도움말은 Topical: 계정/결제/배송"

카테고리 구조, 내비게이션

Task-oriented Scheme

과업 기반 체계: "관리자는 Task-oriented: 주문관리/상품등록/분석"

메뉴 구조, 라우팅

Audience-specific Scheme

대상자별 체계: "학생/교수/관리자 별도 진입"

권한 설계, 라우팅 분기

Hybrid Scheme

혼합형 체계: "최상위 Topical, 하위 Task-oriented"

다층 IA 설계

정보 간의 관계를 어떤 구조로 표현하는가? DB 트리, 라우팅, 사이트맵에 직접 영향

NameDescriptionScope

Hierarchy

계층구조: "3단계: 대분류 > 중분류 > 상세"

DB 트리, 라우팅, 사이트맵

Flat Hierarchy

평면 구조: "최상위 8개 섹션, 하위 최소"

GNB 설계, 탭 구조

Deep Hierarchy

깊은 구조: "카테고리 5단계 중첩"

브레드크럼, 드릴다운

Polyhierarchy

다중 계층구조: "상품이 여러 카테고리에 동시 속함"

DB 다대다, 다중 경로

Hypertext Structure

하이퍼텍스트 구조: "위키형 비선형, 문서 간 자유 링크"

양방향 링크 DB

Database / Relational Model

관계형 모델: "메타데이터 기반, 동적 필터로 접근"

DB 스키마, 동적 필터

Faceted Classification

다면 분류 (패싯): "3개 패싯: 카테고리/가격대/브랜드"

DB 인덱스, 필터 UI

Social Classification

사회적 분류: "사용자 태깅 기반 분류"

태그 DB, 태그 입력 UI

콘텐츠를 설명하고 분류하는 데이터의 관리 체계

NameDescriptionScope

Metadata

메타데이터: "Article에 카테고리, 태그, 작성일, 작성자"

DB 컬럼 설계

Content Model

콘텐츠 모델: "Article(제목, 본문, 썸네일, 카테고리[])"

DB 스키마, CMS

Content Type

콘텐츠 유형: "Article, Tutorial, Case Study"

콘텐츠 관리, 템플릿

Controlled Vocabulary

통제 어휘: "카테고리는 관리자만 추가 가능"

관리자 기능, DB enum

Taxonomy (Data)

택소노미 (데이터): "상품 카테고리: 대 > 중 > 소"

DB 트리, 카테고리 관리

Folksonomy / Tagging

폭소노미 / 태깅: "자유 태깅 + 인기 태그 자동 제안"

태그 입력 UI, 태그 클라우드

Cross-referencing

상호 참조: "관련 콘텐츠 자동 연결"

데이터 관계, 추천 UI
Part 2

내비게이션 설계

사용자가 어떻게 정보 구조를 탐색하는가?: 28개 키워드


서비스 전체 탐색 구조의 원형. 라우팅, 레이아웃, 메뉴 구성에 직접 영향

NameDescriptionScope

Sidebar + Nested Pages

사이드바 + 중첩 페이지: "Notion형: 트리 사이드바 + 페이지 중첩"

라우팅, 재귀 DB

Sidebar + Flat Content

사이드바 + 평면 콘텐츠: "Linear형: 사이드바 메뉴 → 평면 목록"

레이아웃, 라우팅

Top Nav + Contextual Sidebar

상단 내비 + 맥락 사이드바: "GitHub형: 상단 탭 → 섹션별 사이드바"

이중 내비게이션

Bottom Tab Bar

하단 탭 바: "모바일 5개 탭 하단 고정"

모바일 라우팅

Navigation Rail

내비게이션 레일: "태블릿/데스크톱 좌측 아이콘 레일"

반응형 전환

Top Tab Bar

상단 탭 바: "콘텐츠 영역 상단 탭 전환"

섹션 내 전환

Drawer Navigation

드로어 내비게이션: "햄버거 → 슬라이드 드로어"

모바일 메뉴

Hub-and-spoke

허브 앤 스포크: "설정형: 목록 → 상세, 항상 목록 복귀"

목록↔상세 라우팅

Sequential / Wizard

순차형 / 위저드: "5단계 폼: 1→2→...→제출"

스텝 라우팅, 상태 관리

Dashboard-centric

대시보드 중심: "대시보드가 홈, 각 모듈로 진입"

대시보드 위젯

Canvas / Freeform

캔버스 / 자유형: "무한 캔버스 위 객체 배치"

캔버스 엔진, 줌/팬

Conversational

대화형: "채팅 스레드 기반 탐색"

채팅 UI, 스레드 DB

Feed-based

피드 기반: "무한 스크롤 피드가 메인"

피드 API, 무한 스크롤

Command Palette

커맨드 팔레트: "⌘K로 모든 액션/페이지 검색"

파워유저 라우팅

Split View

스플릿 뷰: "좌측 목록 + 우측 상세 동시"

마스터-디테일

Breadcrumb + Drilldown

브레드크럼 + 드릴다운: "카테고리 점진 진입 + 브레드크럼 복귀"

깊은 계층 탐색

Fullscreen Immersive

전체화면 몰입형: "내비 최소화, 콘텐츠 전체화면"

캔버스, 미디어 뷰어

Timeline / Feed Nav

타임라인 / 피드 내비: "무한 스크롤 피드가 탐색 축"

피드 API

페이지 내 특정 역할의 내비게이션 요소

NameDescriptionScope

Global Navigation (GNB)

글로벌 내비게이션: "GNB: 로고 + 메인 메뉴 5개 + 유틸리티"

헤더 레이아웃

Local Navigation (LNB)

로컬 내비게이션: "설정 LNB: 프로필/보안/알림/결제"

섹션 내 사이드메뉴

Contextual Navigation

맥락적 내비게이션: "함께 본 상품, 관련 카테고리"

추천 UI, 데이터 관계

Utility Navigation

유틸리티 내비게이션: "언어, 로그인, 검색, 알림"

헤더 우측 구성

Courtesy Navigation

서비스 내비게이션: "약관, 개인정보, 고객센터"

푸터 구성

Footer Navigation

푸터 내비게이션: "주요 카테고리 + 서비스 링크"

푸터 레이아웃

Guided Navigation

가이드 내비게이션: "3단계 가이드 투어"

온보딩 UI

Sitemap Page

사이트맵 페이지: "전체 구조 한눈에"

보조 페이지

A-Z Index Page

A-Z 색인 페이지: "용어집 A-Z 색인"

색인 페이지

Contextual Action Bar

맥락적 액션 바: "항목 선택 시 상단 벌크 액션 바"

벌크 작업 UI
Part 3

검색 & 필터

사용자가 원하는 정보를 어떻게 찾는가?: 24개 키워드


검색 기능의 범위와 방식

NameDescriptionScope

Search Zone

검색 영역 (전역/맥락): "전역 검색 + 게시판 내 검색 분리"

검색 API 범위

Faceted Search

패싯 검색: "가격/색상/사이즈 다면 필터"

필터 UI + DB 인덱스

Advanced Search

고급 검색: "필드별, 날짜 범위, 불리언"

검색 폼 복잡도

Federated Search

통합 검색: "상품+게시글+사용자 한 번에"

검색 아키텍처

Instant Search

인스턴트 서치: "타이핑하면 실시간 결과 갱신"

검색 API (debounce)

Scoped Search

범위 지정 검색: "이슈/코드/PR 범위 선택 후 검색"

검색 범위 분기

Best Bets

추천 검색 결과: "FAQ에서 편집 추천 우선 표시"

검색 결과 로직

결과 집합을 좁히는 UI 패턴

NameDescriptionScope

Sidebar Filter

사이드바 필터: "좌측 필터 패널 고정"

필터 레이아웃

Top Bar Filter

상단 바 필터: "수평 필터 칩/드롭다운"

필터 레이아웃

Bottom Sheet Filter

바텀 시트 필터: "모바일 필터 → 바텀 시트"

모바일 필터

Filter Chip

필터 칩: "선택 필터를 칩으로, 개별 제거"

필터 상태 UI

Active Filter Summary

활성 필터 요약: "적용 필터 N개 + 전체 해제"

필터 피드백

Sort Control

정렬 컨트롤: "관련순/최신순/가격순 드롭다운"

DB ORDER BY

Saved Search / Filter

저장된 검색/필터: "필터 조합 저장 + 알림"

DB 저장, 알림

검색 결과의 표시 방식과 보조 기능

NameDescriptionScope

Search Results: List

검색 결과: 리스트: "텍스트 중심 세로 목록"

결과 레이아웃

Search Results: Card Grid

검색 결과: 카드 그리드: "이미지 포함 카드 격자"

결과 레이아웃

Search Results: Map

검색 결과: 지도: "좌측 목록 + 우측 지도"

위치 기반 결과

Search Results: Table

검색 결과: 테이블: "정렬/필터 가능 데이터 테이블"

데이터 중심 결과

Search with Preview

검색 미리보기: "드롭다운에서 바로 미리보기"

검색 결과 렌더링

No Results Page

검색 결과 없음: "추천 키워드 + 인기 콘텐츠"

에러 대응

Recent Search

최근 검색어: "포커스 시 최근 검색어 표시"

로컬 저장

Trending Search

인기 검색어: "트렌딩 키워드 제안"

추천 API

Infinite Scroll

무한 스크롤: "하단 도달 시 자동 추가 로딩"

페이지네이션 API

Load More Button

더 보기 버튼: "명시적 더 보기로 추가 로딩"

페이지네이션 API
Part 4

페이지 유형

서비스를 구성하는 화면의 원형: 36개 키워드


전환과 설득 목적의 페이지

NameDescriptionUI Connection

Landing Page

랜딩 페이지: 전환 목적, CTA 중심

Hero + 스크롤 레이아웃

Pricing Page

프라이싱 페이지: 요금제 비교 + 선택

Card + Table + CTA

Comparison Page

비교 페이지: 상품/플랜 속성 나란히 비교

Table + Checkbox

상거래 흐름을 구성하는 핵심 페이지

NameDescriptionUI Connection

Product Listing Page (PLP)

상품 목록 페이지: 카테고리 내 상품 그리드 + 필터

Card Grid + Filter

Product Detail Page (PDP)

상품 상세 페이지: 갤러리 + 옵션 + 설명 + 리뷰

Gallery + Select + Tab

Cart Page

장바구니 페이지: 상품 목록 + 수량 + 소계

List + Input + Summary

Checkout Page

체크아웃 페이지: 배송 + 결제 + 주문 요약

Form + Steps + Card

앱/SaaS 서비스의 핵심 기능 페이지

NameDescriptionUI Connection

Dashboard Page

대시보드: 핵심 지표 + 모듈 한눈에

Card + Chart + Statistic

List / Index Page

목록/인덱스: 항목 나열 + 정렬/필터

Table, List, Card Grid

Detail Page

상세 페이지: 단일 항목 전체 정보

구조화된 콘텐츠

Form Page

폼 페이지: 데이터 입력/수정

Input & Control 조합

Settings Page

설정 페이지: 사용자/시스템 설정

Switch, Select, Accordion

Profile / Account

프로필/계정: 사용자 정보 + 편집

Avatar, Form, Card

Notification Center

알림 센터: 알림 목록 + 읽음/설정

List + Badge + Filter

Activity Feed

활동 피드: 시간순 활동 로그

Timeline + Avatar

Inbox / Messages

받은편지함: 메시지 목록 + 스레드

Split View + List

Content Editor

콘텐츠 에디터: 블록/리치텍스트 편집기

Editor + Toolbar

Kanban Board

칸반 보드: 컬럼별 카드 DnD

DnD + Card + Column

Calendar / Schedule

캘린더/일정: 월/주/일 뷰 + 이벤트

Calendar + Form

Analytics / Reports

분석/리포트: 차트 + KPI + 날짜 필터

Chart + Statistic + DatePicker

File Manager

파일 관리자: 폴더 트리 + 파일 그리드

Tree + Grid + Breadcrumb

Map Page

지도 페이지: 전체화면 지도 + 마커 + 패널

Map + Card + List

User / Team Management

사용자/팀 관리: 멤버 + 역할 + 초대

Table + Invite Form

Billing / Subscription

결제/구독 관리: 플랜 + 결제수단 + 인보이스

Card + Table + Form

Media Gallery

미디어 갤러리: 이미지/비디오 그리드

Masonry + Lightbox

Documentation / Help

문서/도움말: 사이드바 목차 + 콘텐츠

Sidebar Nav + Content

사용자 인증과 첫 진입 페이지

NameDescriptionUI Connection

Login Page

로그인 페이지: 인증 수단 + 입력

Form + SSO Buttons

Register / Signup

회원가입 페이지: 계정 생성 폼

Form + Validation

Onboarding Page

온보딩 페이지: 첫 사용 안내

Carousel + Form + Progress

Welcome / Get Started

웰컴/시작하기: 가입 직후, 다음 할 일

Card + Checklist + CTA

시스템 상태와 에러 대응 페이지

NameDescriptionUI Connection

Search Results Page

검색 결과 페이지: 결과 나열 + 필터

List/Card + Faceted Filter

Error Page (404, 500)

에러 페이지: 시스템 오류 대응

Empty State + 복구 경로

Empty State Page

빈 상태 페이지: 데이터 없을 때 가이드

Empty + CTA

Maintenance Page

점검 페이지: 서비스 점검 안내

Illustration + Status

Permission Denied (403)

접근 거부 페이지: 권한 없음 안내

Empty State + CTA

Terms / Legal

약관/법적 페이지: 장문 텍스트 + 목차

Typography + Anchor
Part 5

UX 플로우 패턴

사용자가 목적을 달성하는 화면 간 경로의 원형: 48개 키워드


서비스 진입과 인증 시퀀스

NameDescriptionSequence

Email + Password Login

이메일+비밀번호 로그인

폼 → 대시보드

Social / SSO Login

소셜/SSO 로그인

SSO 버튼 → OAuth → 대시보드

Magic Link Login

매직 링크 로그인

이메일 입력 → 확인 안내 → 링크 → 대시보드

Phone / OTP Login

전화번호/OTP 로그인

번호 → OTP → 대시보드

Multi-factor Auth (MFA)

다중 인증

로그인 → 2차 인증 → 대시보드

Single-page Signup

단일 페이지 가입

폼 → 인증 → 완료

Multi-step Signup

다단계 가입

계정 → 프로필 → 관심사 → 완료

Password Reset

비밀번호 재설정

이메일 → 링크 → 새 비밀번호 → 완료

Invite / Referral Flow

초대/추천

공유 → 수신자 가입 → 양쪽 혜택

Deep Link Entry

딥 링크 진입

인증 체크 → 콘텐츠 직접 이동

첫 사용 경험 안내 시퀀스

NameDescriptionSequence

Onboarding Tour

온보딩 투어

코치마크 3~5스텝 시퀀스

Onboarding Checklist

온보딩 체크리스트

프로필 → 첫 프로젝트 → 팀 초대

Progressive Onboarding

프로그레시브 온보딩

최소 가입 → 사용 중 점진 수집

Sample Data Onboarding

샘플 데이터 온보딩

프리필 데이터로 시작

Empty → First Use

빈 상태 → 첫 사용

빈 화면 → 가이드 → 첫 데이터 입력

정보 발견과 탐색 시퀀스

NameDescriptionSequence

Search → Filter → List → Detail

검색→필터→목록→상세

4화면 시퀀스

Browse → Category → Item

탐색→카테고리→항목

계층 드릴다운

Feed → Detail → Related

피드→상세→관련

3화면 시퀀스

Map → List → Detail

지도→목록→상세

지도+리스트+상세

Compare → Evaluate → Select

비교→평가→선택

비교 테이블 → 상세 → CTA

Recommendation / Discover

추천/탐색

추천 피드 → 상세

데이터 생성/수정/삭제 시퀀스

NameDescriptionSequence

Single Form Create

단일 폼 생성

폼 → 저장 → 목록 복귀

Multi-step Wizard Create

다단계 위저드 생성

스텝1→...→확인→완료

Inline Edit

인라인 편집

보기→편집 (동일 화면)

Full Page Edit

전체 페이지 편집

상세→편집→저장→복귀

Modal Edit

모달 편집

모달 오버레이

Delete + Confirmation

삭제+확인

삭제→확인 다이얼로그→완료

Delete + Undo (Soft Delete)

삭제+실행취소

즉시 삭제→Undo Toast

Destructive + Type Confirm

파괴적+입력 확인

이름 타이핑→삭제

Checkout Flow

체크아웃 플로우

장바구니→배송→결제→확인→완료

One-click Purchase

원클릭 구매

상세→확인→완료

File Upload

파일 업로드

선택/드래그→진행률→완료

Import / Migration

임포트/마이그레이션

소스→매핑→미리보기→확인

Export / Download

엑스포트/다운로드

포맷→범위→생성→다운로드

Bulk Action

벌크 액션

다중선택→액션바→실행→결과

Configurator Flow

구성기 플로우

옵션A→B변화→결과 미리보기

설정, 권한, 구독 관리 시퀀스

NameDescriptionSequence

Settings Change

설정 변경

설정→변경→저장/자동저장→피드백

Profile Edit

프로필 편집

프로필→편집→저장

Permission Request

권한 요청

프리프롬프트→시스템 다이얼로그

Role / Permission Mgmt

역할/권한 관리

멤버 목록→역할 변경

Subscription Upgrade

구독 업/다운그레이드

프라이싱→확인→결제

Notification Settings

알림 설정

유형별 온/오프 토글

Account Deletion

계정 삭제

요청→사유→확인→유예 기간

에러 복구, 동기화, 업그레이드 순환 시퀀스

NameDescriptionSequence

Error → Recovery

에러→복구

에러→원인→재시도/대안

Offline → Sync

오프라인→동기화

오프라인 배너→동기화 중→완료

Upgrade Prompt

업그레이드 유도

한도 도달→프라이싱

Review / Rating

리뷰/평점

별점→텍스트→사진→제출

Feedback / Survey

피드백/설문

NPS→이유→추가 의견
Part 6

행동 패턴

개별 화면 안에서 사용자 행동을 안내하는 패턴: 31개 키워드


데이터 CRUD와 상태 관리 인터랙션

NameDescriptionScope

Undo / Redo

실행 취소/다시 실행: "모든 편집에 Undo/Redo"

상태 히스토리

Auto-save

자동 저장: "변경 시 자동 저장 + "저장됨""

DB 쓰기, 피드백

Manual Save

수동 저장: "저장 버튼 + 미저장 경고"

이탈 방지

Inline Validation

인라인 유효성 검사: "필드 이탈 시 즉시 검사"

폼 UX

Optimistic UI

낙관적 UI: "서버 전에 UI 반영, 실패 시 롤백"

프론트 상태 관리

Drag and Drop

드래그 앤 드롭: "항목 드래그로 순서/위치 변경"

DnD 라이브러리

Multi-select + Bulk Action

다중 선택+벌크 액션: "체크박스 선택 → 벌크 바"

선택 상태 관리

정보의 점진적 공개와 로딩 패턴

NameDescriptionScope

Progressive Disclosure

점진적 노출: "기본→고급 단계적 공개"

조건부 표시

Responsive Disclosure

반응형 공개: "이전 선택 따라 다음 필드 동적"

조건부 폼 로직

Chunking

청킹: "전화번호 3-4-4 분리"

입력 포맷

Skeleton Loading

스켈레톤 로딩: "로드 전 구조 실루엣"

로딩 UX

Lazy Loading

지연 로딩: "뷰포트 진입 시 로딩"

성능 최적화

Placeholder Content

플레이스홀더: "예시 텍스트/이미지로 가이드"

폼 UX

사용자를 돕는 UI 패턴과 가이드

NameDescriptionScope

Forcing Function

강제 기능: "삭제 전 이름 입력 강제"

확인 UI, 유효성

Contextual Help / Tooltip

맥락 도움말: "? 아이콘 → 호버 시 설명"

도움말 UI

Coach Mark / Spotlight

코치마크/스포트라이트: "UI 하이라이트 + 말풍선"

온보딩 UI

Keyboard Shortcuts

키보드 단축키: "⌘K 검색, ⌘N 새 항목"

단축키 바인딩

Personalization

개인화: "사용 이력 기반 추천"

추천 알고리즘, 피드

Customization

맞춤화: "대시보드 위젯 배치 변경"

저장 로직, DnD

Conceptual Model

개념 모형: "폴더 > 파일 메타포"

IA 구조, 레이블링

터치 기반 인터랙션 패턴

NameDescriptionScope

Pull to Refresh

당겨서 새로고침: "아래로 당기면 새로고침"

모바일 인터랙션

Swipe Actions

스와이프 액션: "좌 스와이프→삭제, 우→보관"

모바일 제스처

Long Press / Context Menu

길게 누르기: "길게 누르면 컨텍스트 메뉴"

모바일 인터랙션

범용 유틸리티 인터랙션

NameDescriptionScope

Copy to Clipboard

클립보드 복사: "복사 버튼 → "복사됨" 토스트"

유틸리티

Favorite / Bookmark

즐겨찾기/북마크: "하트 토글 → 목록 추가"

DB, 상태 토글

Share Action

공유 액션: "링크 복사/SNS/이메일 선택"

공유 모달

Dark Mode Toggle

다크 모드 전환: "시스템/라이트/다크 3택"

테마 상태, CSS

Language Switcher

언어 전환: "드롭다운 → 즉시 반영"

i18n

Real-time Collaboration

실시간 협업: "동시 편집 + 커서 + 충돌 해소"

WebSocket, CRDT

Banner Blindness

배너 맹시 (주의): "중요 공지는 배너 아닌 인라인으로"

알림 배치

Debounce / Throttle

디바운스/스로틀: "검색 300ms 디바운스"

API 호출 최적화
Part 7

상태 유형

시스템이나 콘텐츠가 가질 수 있는 상태: 17개 키워드


조건부 렌더링과 에러 핸들링에 직접 영향을 미치는 시스템 상태 목록

NameDescriptionScope

Empty State

빈 상태: "첫 사용 → 가이드 표시"

조건부 렌더링

First Use / Virgin State

첫 사용 상태: "데이터 없는 첫 화면 (빈 상태와 구분)"

조건부 렌더링

Loading State

로딩 상태: "스켈레톤 표시"

비동기 UI

Error State

에러 상태: "복구 경로 제공"

에러 핸들링

Success State

성공 상태: "체크마크 + 요약 + 다음 액션"

완료 피드백

No Results State

검색 결과 없음: "대안 제시"

검색 UX

Offline State

오프라인 상태: "상단 배너 + 캐시 데이터"

오프라인 대응

Permission Denied

접근 거부: "요청 버튼 또는 관리자 연락"

권한 체크

Partial Load State

부분 로드: "일부 위젯만 에러 + 재시도"

컴포넌트별 에러

Stale Data State

오래된 데이터: ""5분 전 업데이트" + 새로고침"

데이터 신선도

Pending / Processing

대기/처리 중: "심사 대기 + 예상 시간"

비동기 프로세스

Rate Limited

속도 제한: "요청 초과 카운트다운"

API 제한

Maintenance

점검 상태: "예상 완료 시간 안내"

점검 페이지

Conflict State

충돌 상태: "동시 편집 충돌: 버전 비교"

충돌 해소

Expired / Timeout

만료/타임아웃: "재로그인 프롬프트"

인증 관리

Disabled / Read-only

비활성/읽기 전용: "편집 불가: 회색 + 이유"

권한 기반 UI

Above the Fold

스크롤 전 영역: "CTA는 Above the Fold에"

레이아웃 우선순위
Part 8

읽기/스캔 패턴

사용자의 시선 흐름: 2개 키워드


콘텐츠 배치와 CTA 위치에 직접 영향을 미치는 시선 흐름 패턴

NameDescriptionScope

F-Pattern

F-패턴: "텍스트 중심 → 핵심을 왼쪽 상단에"

콘텐츠 레이아웃

Z-Pattern

Z-패턴: "랜딩 → CTA를 우하단에"

랜딩 레이아웃
Part 9

AI UX 패턴

AI 인터페이스 고유 패턴: 12개 키워드


AI 기능 설계, 스트리밍 UI, 신뢰 구축에 직접 영향을 미치는 패턴

NameDescriptionScope

Prompt Input

프롬프트 입력: "텍스트 입력 → AI 응답"

채팅 UI, API

Streaming Response

스트리밍 응답: "토큰 단위 실시간 표시"

SSE/WebSocket

Regenerate / Retry

재생성/재시도: "불만족 → 다시 생성"

API 재호출, 히스토리

AI Suggestion

AI 제안/자동완성: "입력 중 다음 문장 제안"

인라인 제안 UI

Confidence Indicator

신뢰도 표시: "결과에 신뢰도 %/색상"

결과 해석 UI

Source Citation

출처 표시: "답변에 참조 소스 번호"

출처 UI, 데이터

Human-in-the-loop

사람 개입 확인: "AI 제안 → 승인/수정 → 적용"

승인 플로우

AI Guardrail

AI 가드레일: "할 수 없는 것 명시"

에러/한계 상태

Conversation Thread

대화 스레드: "멀티턴 히스토리 관리"

스레드 DB, 채팅

AI Loading / Thinking

AI 사고 중: "생성 중 애니메이션"

비동기 AI 응답

Template / Preset Prompt

템플릿/프리셋: "미리 만든 프롬프트 선택"

템플릿 DB

Parameter Tuner

파라미터 튜너: "톤/길이/형식 슬라이더"

설정 UI, API 파라미터

디자인과 개발을 잇는 언어를 배웁니다

디자인 사고로 제품을 설계하는 바이브 코딩

온라인 VOD + 커뮤니티 학습

6섹션 · 18챕터

Vibe Design Starter Kit

디자인 사고로 제품을 설계하는 바이브 코딩

01

바이브 디자인: 새로운 사고에 적응하기

02

꼭 필요한 만큼의 디자인 시스템

03

제품으로서의 확장: UX로 로직 제어하기

04

내 프로젝트에 적용해보기 - 챌린지

05

디자인 에이전트: 이성과 감성사이의 파이프라인

06

실전 서비스 운영 시나리오 대응