주제별로 묶은 디자인 프로세스·도구·원칙 글입니다. 입문부터 운영까지 참고용으로 열람할 수 있습니다.
디자인
CSS 3D Transform 완전 가이드: perspective와 perspective-origin 제어, rotateX/Y/Z 카드 뒤집기, translateZ 깊이감, transform-style preserve-3d, 3D 캐러셀, 성능 최적화 will-change를 다룹니다.
디자인
온보딩 UX 완전 가이드: 점진적 공개 패턴 설계, 툴팁 vs 모달 vs 인라인 가이드 선택, 온보딩 완료율 측정, 스킵 처리, 복귀 사용자 적응형 온보딩, 체크리스트 패턴 구현을 다룹니다.
디자인
에러 상태 UX 디자인 완전 가이드: 에러 유형별 메시지 설계, 404/500 페이지, 빈 상태, 네트워크 오류, 폼 검증 에러, 재시도 패턴, 에러 바운더리, 오프라인 상태 처리를 다룹니다.
디자인
디자인 시스템 도입률 측정 완전 가이드: 컴포넌트 사용 추적 방법, 커버리지 스코어 계산, Figma 사용률 vs 코드 사용률 비교, 팀별 도입 현황, 미사용 컴포넌트 식별, 성과 보고 방법을 다룹니다.
디자인
모바일 제스처 UX 완전 가이드: 탭/스와이프/핀치 제스처 설계, 터치 타겟 크기 기준, 드래그 인터랙션, 당겨서 새로고침, 스와이프 삭제 패턴, Pointer Events API, 제스처 피드백 설계를 다룹니다.
디자인
반응형 이미지 완전 가이드: srcset과 sizes 속성 최적화, picture 요소로 아트 디렉션, WebP/AVIF 자동 제공, 지연 로딩, LCP 최적화, 이미지 CDN 활용, aspect-ratio로 레이아웃 시프트 방지를 다룹니다.
디자인
폼 UX 디자인 완전 가이드: 인라인 검증 타이밍, 에러 메시지 위치와 문구, 필수/선택 필드 표시, 비밀번호 강도 표시, 멀티 스텝 폼 진행률, 자동완성 최적화, 접근성 aria 패턴을 다룹니다.
디자인
데이터 시각화 디자인 시스템 완전 가이드: 색상 팔레트 접근성, 차트 타입 선택 기준, 빈 상태/로딩 처리, 반응형 차트 설계, 인터랙션 패턴, Recharts/D3 커스터마이징을 다룹니다.
디자인
Print CSS와 PDF 생성 완전 가이드: @media print 최적화, 페이지 나누기 제어, 머리글/바닥글 설계, Puppeteer/Playwright PDF 생성, 인쇄용 컴포넌트 분리 전략을 다룹니다.
디자인
글래스모피즘(glassmorphism)과 뉴모피즘(neumorphism) 완전 가이드: CSS backdrop-filter, box-shadow 다중 레이어, 접근성 고려, 성능 최적화, 다크모드 적응, 실제 UI 컴포넌트 구현을 다룹니다.
UX 디자인
제로 UI(Zero UI) 개념과 음성 인터페이스(VUI) 설계, 스마트 스피커·AI 어시스턴트 대화 설계, 앰비언트 컴퓨팅, 이커머스에서 음성 검색·주문 UX를 다룹니다.
UX 디자인
Figma를 활용한 와이어프레임 → 로파이 → 하이파이 → 프로토타입 제작 워크플로우, Interactive Components, 변수(Variables) 활용, 사용성 테스트 준비를 다룹니다.
UX 디자인
UX 모션 설계 원칙: 목적 있는 애니메이션, 로딩·전환·피드백 애니메이션 타이밍, CSS/Framer Motion 구현, 접근성(prefers-reduced-motion), 마이크로인터랙션 설계를 다룹니다.
UX 디자인
유저 플로우 다이어그램 작성 방법, 태스크 플로우와 유저 플로우의 차이, 분기 조건과 오류 경로 표현, Figma에서 플로우 다이어그램 작성 팁, 팀 커뮤니케이션 도구로 활용을 다룹니다.
UX 디자인
파일 업로드 UX 설계: 드래그앤드롭 인터페이스, 파일 유효성 검사, 청크 업로드와 진행도 표시, 다중 파일·이미지 미리보기, 업로드 실패 처리와 재시도를 다룹니다.
UX 디자인
툴팁, 팝오버, 인포 아이콘, 코치마크, 인라인 도움말의 차이와 적합한 사용 상황, 위치 계산 알고리즘, 접근성 구현, 모바일 툴팁 대안을 다룹니다.
UX 디자인
관리자 대시보드의 데이터 테이블 UX 설계: 컬럼 정렬·고정·조정, 행 선택·일괄 처리, 인라인 편집, 가상화(Virtualization) 성능 최적화, 모바일 반응형 테이블을 다룹니다.
UX 디자인
Storybook을 디자인 시스템 문서화 도구로 활용하는 방법, Figma 토큰 플러그인과 Style Dictionary 연동, Chromatic 시각적 리그레션 테스트, 디자인 토큰 변경 알림 자동화를 다룹니다.
UX 디자인
UX A/B 테스트 설계 방법: 가설 설정, 샘플 크기 계산, 통계적 유의성, 다변량 테스트(MVT), 이커머스 버튼·이미지·카피 테스트 사례, 결과 해석 함정을 다룹니다.
UX 디자인
앱·웹 서비스의 설정 페이지 UX 설계: 설정 분류와 계층 구조, 토글·슬라이더·드롭다운 선택, 즉시 적용 vs 저장 버튼, 설정 초기화, 설정 검색 기능을 다룹니다.
UX 디자인
이커머스·앱의 검색 UX 설계: 자동완성(Autocomplete) 패턴, 검색 결과 없음 처리, 최근 검색·인기 검색, 검색 필터 통합, 음성 검색 UX를 다룹니다.
UX 디자인
SaaS 가격 페이지 UX 설계: 플랜 수와 비교 방법, 연간/월간 토글, 추천 플랜 하이라이트, FAQ 배치, 무료 체험 CTA 최적화, 기업 고객 대응 설계를 다룹니다.
UX 디자인
페이지네이션, 무한 스크롤, Load More 버튼의 UX 비교, 각 패턴의 적합한 상황, 무한 스크롤 구현 시 접근성과 이탈 방지 전략, 가상 스크롤 성능 최적화를 다룹니다.
UX 디자인
Toast, Alert Banner, Inline Message, Badge, Dot Indicator 등 알림 컴포넌트 유형별 설계 원칙, 우선순위 시스템, 자동 소멸 타이밍, 스택 관리를 다룹니다.
UX 디자인
모달 다이얼로그, 바텀시트, 사이드 패널, 팝오버, 툴팁의 차이와 적절한 사용 시나리오, 접근성(ARIA) 구현, 애니메이션 패턴, 중첩 모달 회피 전략을 다룹니다.
UX 디자인
랜딩 페이지 Above-the-Fold 영역 UX 설계: 헤드라인 카피, 히어로 이미지, CTA 배치, 신뢰 신호, 로딩 속도 최적화, A/B 테스트 전략을 다룹니다.
UX 디자인
정보 구조(Information Architecture) 설계 방법, 카드 소팅(Card Sorting) 리서치 방법론, 트리 테스트, 사이트맵 설계, 카테고리 레이블링 최적화를 다룹니다.
UX 디자인
이커머스 헤더 네비게이션 설계: 메가 메뉴 구조, 스티키 헤더 패턴, 모바일 햄버거 메뉴 대안, 브레드크럼, 검색 중심 네비게이션 전략을 다룹니다.
UX 디자인
iOS·Android 모바일 앱의 제스처 인터랙션 설계(스와이프, 롱프레스, 핀치), 햅틱 피드백(iOS UIFeedbackGenerator, Android VibrationEffect) 활용 가이드와 베스트 프랙티스를 다룹니다.
UX 디자인
이커머스·앱의 게이미피케이션 UI 설계: 진행도 바, 스트릭, 레벨 시스템, 배지, 리더보드, 보상 애니메이션, 심리 트리거를 활용한 사용자 참여 설계를 다룹니다.
UX 디자인
이커머스·SaaS의 404·500·503·오프라인 에러 페이지 UX 설계, 사용자를 이탈시키지 않는 복구 경로 제공, 에러 상태 시각 언어, 이스터에그와 브랜드 표현을 다룹니다.
UX 디자인
RTL(Right-to-Left) 레이아웃 설계 원칙, CSS logical properties, Figma RTL 플러그인, 아이콘 미러링 규칙, 숫자·날짜 형식 현지화, 다국어 텍스트 길이 대응을 다룹니다.
UX 디자인
효과적인 디자인 크리틱 방법론, 'I like/I wish/What if' 프레임워크, 의견 vs. 기준 기반 피드백 구분, 비동기 디자인 리뷰 운영, 피드백을 반영하는 프로세스를 다룹니다.
UX 디자인
관리자 대시보드의 필터 UI 패턴(인라인/사이드패널/팝오버), 복합 필터 상태 관리, 검색과 필터 결합, 필터 칩 표시, URL 파라미터 동기화를 다룹니다.
UX 디자인
웹, iOS, Android를 아우르는 크로스 플랫폼 디자인 시스템 구축: Design Token 공유, Style Dictionary 다중 플랫폼 빌드, 플랫폼별 컴포넌트 가이드라인 조율을 다룹니다.
UX 디자인
아토믹 디자인(Atoms, Molecules, Organisms, Templates, Pages) 방법론을 실제 이커머스 컴포넌트에 적용하는 방법, 합성 패턴(Compound Component), 슬롯 기반 설계를 다룹니다.
UX 디자인
브랜드 컬러에서 디자인 시스템 색상 토큰을 도출하는 방법, 라이트/다크 모드 팔레트, 시맨틱 컬러(Primary/Secondary/Danger/Success), HSL 기반 색상 확장을 다룹니다.
UX 디자인
이커머스 결제 단계 UX 최적화: 단계 수 줄이기, 게스트 결제, 주소 자동완성, 결제 수단 UX, 오류 처리, 모바일 최적화, 신뢰 신호 배치를 다룹니다.
UX 디자인
이커머스·대시보드·뉴스 피드에서 카드 컴포넌트의 정보 계층 설계, 카드 레이아웃 변형(수평/수직/오버레이), 호버·클릭 인터랙션, 스켈레톤 로딩을 다룹니다.
UX 디자인
LLM 스트리밍 응답 UI 패턴, 타이핑 커서 애니메이션, 스켈레톤 로더 vs 프로그레스 바 선택 기준, 에러 상태 설계, AI 응답 대기 중 사용자 행동 유도 UX를 다룹니다.
UX 디자인
반응형 디자인에서 브레이크포인트 설정 기준, 유동 그리드(Fluid Grid)와 고정 컨테이너 비교, CSS clamp()로 유동 타이포그래피 구현, Figma 반응형 컴포넌트 설계를 다룹니다.
UX 디자인
WCAG 2.1 명암비 기준(AA/AAA), Figma 플러그인 및 브라우저 도구로 색상 접근성 검사하는 방법, 색맹 시뮬레이션, 다크모드 팔레트 접근성 확보 전략을 다룹니다.
UX 디자인
Figma 핸드오프 시 개발자가 놓치는 스펙, 디자이너가 빠트리는 엣지 케이스, 컴포넌트 상태 정의, 반응형 동작, 접근성 주석을 포함한 완전한 QA 핸드오프 체크리스트를 다룹니다.
디자인 시스템
디자인 토큰 Git 기반 버전 관리, 시맨틱 버저닝 적용, 브레이킹 체인지 처리, Figma-코드 토큰 싱크, 팀 규모별 거버넌스 구조를 실무 관점에서 다룹니다.
UX
빈 목록, 첫 방문, 오류, 검색 결과 없음 등 상황별 Empty State 설계 패턴, 일러스트레이션 사용 기준, CTA 설계, 실제 앱 사례 분석을 다룹니다.
UX
데이터 유형별 차트 선택 매트릭스, 색상 시스템, 밀도 최적화, 인지 부하 줄이기, 반응형 차트 설계, 흔한 시각화 오류 패턴과 수정 방법을 다룹니다.
디자인
Figma AI, Galileo AI, Uizard 등 생성형 디자인 도구 아웃풋의 품질 검수 체크리스트, 접근성 자동 검증, 디자인 시스템 일관성 확인 방법을 다룹니다.
디자인
Figma Code Connect 설정, 컴포넌트 Props 매핑, 디자인 변경 시 자동 코드 업데이트 워크플로우, Storybook 연동, 실전 팀 적용 사례를 다룹니다.
UX
트리거-규칙-피드백-루프의 마이크로인터랙션 구조, 애니메이션 타이밍 원칙, 로딩·성공·오류 상태 애니메이션, CSS/Framer Motion 구현 예시까지 다룹니다.
디자인 시스템
하드코딩된 CSS 값을 디자인 토큰으로 전환하는 단계별 전략, 마이그레이션 우선순위 결정 방법, 팀 저항 최소화, 점진적 전환 패턴을 실무 관점에서 다룹니다.
UX
내비게이션, 터치 타겟, 폼 UX, 오류 처리, 로딩 상태, 오프라인 경험, 접근성, 퍼포먼스까지 앱 출시 전 점검해야 할 50가지 UX 항목을 카테고리별로 정리합니다.
디자인
디자인 엔지니어 역할의 부상, Figma-코드 브리지 도구 생태계, 디자이너가 직접 코드 기여하는 워크플로우, 팀 구조 설계까지 2026년 디자인-개발 협업의 새로운 패러다임을 다룹니다.
디자인 시스템
SVG 스프라이트 vs 인라인 컴포넌트 방식 비교, Figma에서 아이콘 토큰 관리, 빌드 자동화 파이프라인, 접근성 처리까지 확장 가능한 아이콘 시스템 실무 설계를 정리합니다.
UX 패턴
KPI·테이블·차트를 한 화면에 얹을수록 인지 부하가 커집니다. 엔터프라이즈 대시보드에서 정보 밀도를 올리면서도 스캔 패턴과 시각적 계층을 유지하는 실무 패턴을 정리합니다.
디자인
Figma Variables의 Expression Tokens 기능으로 정적인 스타일 값을 넘어 수식과 조건 로직이 담긴 동적 디자인 시스템을 구현하는 방법을 설명합니다.
디자인
개발자 포트폴리오 사이트는 멋진 디자인만으로는 부족합니다. Core Web Vitals, 구조화 데이터, 메타 태그 최적화까지 SEO를 고려한 포트폴리오 디자인 전략을 설명합니다.
디자인
CSS clamp()와 가변 폰트(Variable Font)를 활용해 모바일부터 대형 모니터까지 완벽하게 작동하는 유동 타이포그래피 시스템을 구축하는 방법을 안내합니다.
디자인
EU EAA 시행과 WCAG 2.2 업데이트를 계기로 접근성을 UI 설계 초기부터 내재화하는 방법을 알아봅니다. 스크린리더 사용자의 경험부터 자동화 테스트까지 실무 가이드를 제공합니다.
디자인
AI 에이전트가 자율적으로 UI를 생성하는 시대에 브랜드 일관성을 유지하려면 어떻게 디자인 시스템을 설계해야 하는지 살펴봅니다.
디자인
Figma가 MCP(Model Context Protocol)를 공식 지원하면서 AI가 디자인 파일을 직접 읽어 코드를 생성하는 시대가 열렸습니다. 디자인-개발 협업이 어떻게 바뀌는지 살펴봅니다.
디자인
디자인 토큰이 무엇인지, W3C 표준 3계층 구조(Primitive → Semantic → Component)가 어떻게 멀티플랫폼 디자인 시스템을 혁신하는지 실무 예시와 함께 설명합니다.
모바일 UX
스와이프, 롱프레스, 핀치줌, 당겨서 새로고침 등 모바일 제스처 UX의 설계 원칙과 발견 가능성 문제, 충돌 방지 전략을 정리합니다.
디자인 시스템
컴포넌트 문서가 코드와 따로 노는 이유와 Storybook을 중심으로 문서, 테스트, 디자인 검증을 통합하는 실전 전략을 정리합니다.
UX 패턴
스켈레톤 UI, 낙관적 업데이트, 프로그레스 인디케이터의 올바른 사용 기준을 정리합니다. 언제 어떤 로딩 패턴을 써야 하는지 의사결정 프레임을 제시합니다.
디자인 시스템
모듈러 스케일, 유체 타이포그래피, 줄 높이·자간 설정, 다국어 대응까지 팀이 일관되게 사용할 수 있는 타이포그래피 시스템 설계 원칙을 정리합니다.
디자인 시스템
Primitive → Semantic 토큰 계층으로 다크모드를 구현하면 컴포넌트에 테마 분기 코드가 사라집니다. CSS Custom Property 바인딩과 Figma Variables 연동 전략을 정리합니다.
프로세스
컴포넌트 스펙, 토큰 참조, 인터랙션 상태, 엣지 케이스를 Dev Mode와 문서에 남기는 실무 체크리스트입니다.
UX 리서치
인터뷰·설문 노트를 테마로 묶고, 우선순위 프레임과 지표에 연결해 백로그에 태우는 프로세스를 정리합니다.
접근성
:focus-visible, prefers-reduced-motion, 1.4.3 대비를 컴포넌트 단위로 검사하는 최소 체크리스트입니다.
UX/UI
필드·폼·서버 오류를 구분하고, aria-live·포커스 이동으로 스크린리더 사용자에게 동일한 정보를 전달하는 실무 패턴입니다.
디자인 시스템
색·간격·타이포 토큰의 계층, 시맨틱 vs 프리미티브, 다크 모드·브랜드 변주를 코드와 Figma에 맞추는 방법을 정리합니다.