UX 디자인
제로 UI·음성·앰비언트 UX: 화면 없는 인터페이스 설계의 미래
제로 UI(Zero UI) 개념과 음성 인터페이스(VUI) 설계, 스마트 스피커·AI 어시스턴트 대화 설계, 앰비언트 컴퓨팅, 이커머스에서 음성 검색·주문 UX를 다룹니다.
제로 UI음성 인터페이스VUI앰비언트 UX미래 UX
블로그
주제별로 묶은 디자인 프로세스·도구·원칙 글입니다. 입문부터 운영까지 참고용으로 열람할 수 있습니다.
UX 디자인 · 33건
UX 디자인
와이어프레임에서 프로토타입까지: Figma로 빠르게 아이디어 검증하기
Figma를 활용한 와이어프레임 → 로파이 → 하이파이 → 프로토타입 제작 워크플로우, Interactive Components, 변수(Variables) 활용, 사용성 테스트 준비를 다룹니다.
Figma와이어프레임프로토타입디자인 워크플로우사용성 테스트
UX 디자인
시각적 피드백과 애니메이션: 인터랙션을 생동감 있게 만드는 모션 설계
UX 모션 설계 원칙: 목적 있는 애니메이션, 로딩·전환·피드백 애니메이션 타이밍, CSS/Framer Motion 구현, 접근성(prefers-reduced-motion), 마이크로인터랙션 설계를 다룹니다.
애니메이션 UX모션 디자인마이크로인터랙션Framer Motion시각적 피드백
UX 디자인
유저 플로우 다이어그램: 복잡한 사용자 여정을 시각화하는 방법
유저 플로우 다이어그램 작성 방법, 태스크 플로우와 유저 플로우의 차이, 분기 조건과 오류 경로 표현, Figma에서 플로우 다이어그램 작성 팁, 팀 커뮤니케이션 도구로 활용을 다룹니다.
유저 플로우UX 다이어그램플로우차트UX 문서화사용자 여정
UX 디자인
파일 업로드·드래그앤드롭 UX: 대용량 파일 처리와 진행 상태 설계
파일 업로드 UX 설계: 드래그앤드롭 인터페이스, 파일 유효성 검사, 청크 업로드와 진행도 표시, 다중 파일·이미지 미리보기, 업로드 실패 처리와 재시도를 다룹니다.
파일 업로드드래그앤드롭UX 설계진행 상태이미지 업로드
UX 디자인
툴팁·팝오버·컨텍스트 도움말: 정보를 방해 없이 전달하는 UI 설계
툴팁, 팝오버, 인포 아이콘, 코치마크, 인라인 도움말의 차이와 적합한 사용 상황, 위치 계산 알고리즘, 접근성 구현, 모바일 툴팁 대안을 다룹니다.
툴팁팝오버컨텍스트 도움말인포 UI도움말 설계
UX 디자인
테이블·데이터 그리드 UX: 복잡한 데이터를 탐색하는 표 설계
관리자 대시보드의 데이터 테이블 UX 설계: 컬럼 정렬·고정·조정, 행 선택·일괄 처리, 인라인 편집, 가상화(Virtualization) 성능 최적화, 모바일 반응형 테이블을 다룹니다.
데이터 테이블그리드 UX관리자 UI데이터 시각화테이블 컴포넌트
UX 디자인
Storybook + 디자인 토큰 동기화: Figma에서 코드까지 자동화
Storybook을 디자인 시스템 문서화 도구로 활용하는 방법, Figma 토큰 플러그인과 Style Dictionary 연동, Chromatic 시각적 리그레션 테스트, 디자인 토큰 변경 알림 자동화를 다룹니다.
Storybook디자인 토큰Figma 연동컴포넌트 문서화디자인 시스템 자동화
UX 디자인
UX A/B 테스트: 디자인 결정을 데이터로 검증하는 방법
UX A/B 테스트 설계 방법: 가설 설정, 샘플 크기 계산, 통계적 유의성, 다변량 테스트(MVT), 이커머스 버튼·이미지·카피 테스트 사례, 결과 해석 함정을 다룹니다.
A/B 테스트UX 실험전환율 최적화데이터 기반 설계통계적 유의성
UX 디자인
설정·환경설정 UX: 사용자가 직접 제어하는 앱 경험 설계
앱·웹 서비스의 설정 페이지 UX 설계: 설정 분류와 계층 구조, 토글·슬라이더·드롭다운 선택, 즉시 적용 vs 저장 버튼, 설정 초기화, 설정 검색 기능을 다룹니다.
설정 UX환경설정사용자 제어앱 설정토글 설계
UX 디자인
검색 UX·자동완성 설계: 사용자가 원하는 것을 빠르게 찾게 하는 검색 인터페이스
이커머스·앱의 검색 UX 설계: 자동완성(Autocomplete) 패턴, 검색 결과 없음 처리, 최근 검색·인기 검색, 검색 필터 통합, 음성 검색 UX를 다룹니다.
검색 UX자동완성검색 인터페이스이커머스 검색검색 결과
UX 디자인
SaaS 가격 페이지 UX: 전환율을 높이는 플랜 비교 설계
SaaS 가격 페이지 UX 설계: 플랜 수와 비교 방법, 연간/월간 토글, 추천 플랜 하이라이트, FAQ 배치, 무료 체험 CTA 최적화, 기업 고객 대응 설계를 다룹니다.
가격 페이지SaaS UX플랜 비교전환율 최적화구독 설계
UX 디자인
페이지네이션 vs 무한 스크롤: 콘텐츠 탐색 UX 선택 가이드
페이지네이션, 무한 스크롤, Load More 버튼의 UX 비교, 각 패턴의 적합한 상황, 무한 스크롤 구현 시 접근성과 이탈 방지 전략, 가상 스크롤 성능 최적화를 다룹니다.
페이지네이션무한 스크롤콘텐츠 탐색리스트 UX성능 최적화
UX 디자인
알림·알럿 UX 시스템: 상황에 맞는 피드백 컴포넌트 설계
Toast, Alert Banner, Inline Message, Badge, Dot Indicator 등 알림 컴포넌트 유형별 설계 원칙, 우선순위 시스템, 자동 소멸 타이밍, 스택 관리를 다룹니다.
알림 UXToast 컴포넌트Alert 설계피드백 시스템알림 디자인
UX 디자인
모달·다이얼로그·바텀시트: 맥락에 맞는 오버레이 UI 선택 가이드
모달 다이얼로그, 바텀시트, 사이드 패널, 팝오버, 툴팁의 차이와 적절한 사용 시나리오, 접근성(ARIA) 구현, 애니메이션 패턴, 중첩 모달 회피 전략을 다룹니다.
모달바텀시트다이얼로그오버레이 UI접근성
UX 디자인
랜딩 페이지 Above-the-Fold 설계: 첫 3초 안에 전환을 결정하는 UX
랜딩 페이지 Above-the-Fold 영역 UX 설계: 헤드라인 카피, 히어로 이미지, CTA 배치, 신뢰 신호, 로딩 속도 최적화, A/B 테스트 전략을 다룹니다.
랜딩 페이지Above the FoldCTA 설계전환율 최적화헤드라인 카피
UX 디자인
정보 구조(IA) 설계와 카드 소팅: 사용자 멘탈 모델에 맞는 네비게이션
정보 구조(Information Architecture) 설계 방법, 카드 소팅(Card Sorting) 리서치 방법론, 트리 테스트, 사이트맵 설계, 카테고리 레이블링 최적화를 다룹니다.
정보 구조카드 소팅IA 설계사용자 리서치사이트맵
UX 디자인
헤더·네비게이션·메가 메뉴: 대규모 이커머스 사이트 네비게이션 설계
이커머스 헤더 네비게이션 설계: 메가 메뉴 구조, 스티키 헤더 패턴, 모바일 햄버거 메뉴 대안, 브레드크럼, 검색 중심 네비게이션 전략을 다룹니다.
네비게이션메가 메뉴헤더 설계이커머스 UX정보 구조
UX 디자인
모바일 제스처·햅틱 피드백: 터치 인터랙션의 물리적 감각 설계
iOS·Android 모바일 앱의 제스처 인터랙션 설계(스와이프, 롱프레스, 핀치), 햅틱 피드백(iOS UIFeedbackGenerator, Android VibrationEffect) 활용 가이드와 베스트 프랙티스를 다룹니다.
모바일 UX제스처 인터랙션햅틱 피드백iOS 터치Android 햅틱
UX 디자인
게이미피케이션 UI: 진행도·보상·배지 시스템으로 참여율 높이기
이커머스·앱의 게이미피케이션 UI 설계: 진행도 바, 스트릭, 레벨 시스템, 배지, 리더보드, 보상 애니메이션, 심리 트리거를 활용한 사용자 참여 설계를 다룹니다.
게이미피케이션진행도 UI보상 시스템배지 디자인참여율
UX 디자인
에러 페이지 UX: 404·500·오프라인 상태를 기회로 바꾸는 설계
이커머스·SaaS의 404·500·503·오프라인 에러 페이지 UX 설계, 사용자를 이탈시키지 않는 복구 경로 제공, 에러 상태 시각 언어, 이스터에그와 브랜드 표현을 다룹니다.
에러 페이지404 UX오류 상태Empty StateUX 카피
UX 디자인
RTL·다국어 UI 설계: 아랍어·히브리어 시장을 위한 레이아웃 반전 설계
RTL(Right-to-Left) 레이아웃 설계 원칙, CSS logical properties, Figma RTL 플러그인, 아이콘 미러링 규칙, 숫자·날짜 형식 현지화, 다국어 텍스트 길이 대응을 다룹니다.
RTL 디자인다국어 UI현지화국제화CSS Logical Properties
UX 디자인
디자인 크리틱·피드백 프레임워크: 건설적인 디자인 리뷰 문화 만들기
효과적인 디자인 크리틱 방법론, 'I like/I wish/What if' 프레임워크, 의견 vs. 기준 기반 피드백 구분, 비동기 디자인 리뷰 운영, 피드백을 반영하는 프로세스를 다룹니다.
디자인 크리틱피드백 문화디자인 리뷰협업디자인 프로세스
UX 디자인
대시보드 필터·검색 UX: 복잡한 데이터를 탐색하는 인터페이스 설계
관리자 대시보드의 필터 UI 패턴(인라인/사이드패널/팝오버), 복합 필터 상태 관리, 검색과 필터 결합, 필터 칩 표시, URL 파라미터 동기화를 다룹니다.
대시보드 UX필터 UI검색 인터페이스데이터 탐색관리자 도구
UX 디자인
크로스 플랫폼 디자인 시스템: 웹·iOS·Android를 하나의 토큰으로
웹, iOS, Android를 아우르는 크로스 플랫폼 디자인 시스템 구축: Design Token 공유, Style Dictionary 다중 플랫폼 빌드, 플랫폼별 컴포넌트 가이드라인 조율을 다룹니다.
크로스 플랫폼디자인 시스템Design TokenStyle Dictionary멀티 플랫폼
UX 디자인
컴포넌트 합성과 아토믹 디자인: 재사용 가능한 UI 아키텍처
아토믹 디자인(Atoms, Molecules, Organisms, Templates, Pages) 방법론을 실제 이커머스 컴포넌트에 적용하는 방법, 합성 패턴(Compound Component), 슬롯 기반 설계를 다룹니다.
아토믹 디자인컴포넌트 합성디자인 시스템컴포넌트 아키텍처재사용성
UX 디자인
브랜드 컬러 팔레트 확장: 디자인 시스템을 위한 색상 토큰 설계
브랜드 컬러에서 디자인 시스템 색상 토큰을 도출하는 방법, 라이트/다크 모드 팔레트, 시맨틱 컬러(Primary/Secondary/Danger/Success), HSL 기반 색상 확장을 다룹니다.
컬러 팔레트디자인 토큰브랜드 색상다크 모드색상 시스템
UX 디자인
결제 UX 최적화: 전환율을 높이는 체크아웃 플로우 설계
이커머스 결제 단계 UX 최적화: 단계 수 줄이기, 게스트 결제, 주소 자동완성, 결제 수단 UX, 오류 처리, 모바일 최적화, 신뢰 신호 배치를 다룹니다.
결제 UX체크아웃 최적화전환율이커머스 UX모바일 결제
UX 디자인
카드 UI 디자인 패턴: 정보 계층과 인터랙션 설계 완전 가이드
이커머스·대시보드·뉴스 피드에서 카드 컴포넌트의 정보 계층 설계, 카드 레이아웃 변형(수평/수직/오버레이), 호버·클릭 인터랙션, 스켈레톤 로딩을 다룹니다.
카드 UI컴포넌트 디자인정보 계층인터랙션 설계레이아웃 패턴
UX 디자인
AI UX 설계: 스트리밍 응답과 로딩 상태 디자인 패턴
LLM 스트리밍 응답 UI 패턴, 타이핑 커서 애니메이션, 스켈레톤 로더 vs 프로그레스 바 선택 기준, 에러 상태 설계, AI 응답 대기 중 사용자 행동 유도 UX를 다룹니다.
AI UX스트리밍 UX로딩 상태인터랙션 디자인LLM 인터페이스
UX 디자인
반응형 브레이크포인트 전략: 고정값 vs 유동 그리드 설계
반응형 디자인에서 브레이크포인트 설정 기준, 유동 그리드(Fluid Grid)와 고정 컨테이너 비교, CSS clamp()로 유동 타이포그래피 구현, Figma 반응형 컴포넌트 설계를 다룹니다.
반응형 디자인브레이크포인트Fluid GridCSS디자인 시스템
UX 디자인
색상 접근성 실전: 명암비 도구와 WCAG 2.1 기준 적용법
WCAG 2.1 명암비 기준(AA/AAA), Figma 플러그인 및 브라우저 도구로 색상 접근성 검사하는 방법, 색맹 시뮬레이션, 다크모드 팔레트 접근성 확보 전략을 다룹니다.
색상 접근성WCAG명암비디자인 시스템접근성
UX 디자인
디자인 QA 핸드오프 체크리스트: 개발자와 디자이너의 간극을 없애는 방법
Figma 핸드오프 시 개발자가 놓치는 스펙, 디자이너가 빠트리는 엣지 케이스, 컴포넌트 상태 정의, 반응형 동작, 접근성 주석을 포함한 완전한 QA 핸드오프 체크리스트를 다룹니다.
디자인 QA핸드오프Figma디자인 시스템개발자 협업