디자인
무료 웹 게임 포털의 카드·그리드 UX 패턴 분석 — 테이블플레이 사례
테이블플레이의 게임 카드, 뉴스 섹션, 블로그, 즉시 플레이 영역까지 — 무료 웹 게임 포털이 다양한 콘텐츠 유형을 한 화면에 정렬하는 카드·그리드 패턴을 디자인 관점에서 뜯어봅니다.
카드 UI그리드 시스템콘텐츠 포털UX 패턴케이스 스터디
블로그
주제별로 묶은 디자인 프로세스·도구·원칙 글입니다. 입문부터 운영까지 참고용으로 열람할 수 있습니다.
디자인 · 22건
디자인
정보형 가이드 사이트의 정보 위계와 위험 표시 UX — 카지노게임.kr 케이스 스터디
광고형이 아닌 정보형 가이드를 표방하는 카지노게임.kr이 위험 정보, 약관, 추천 기준을 시각적으로 어떻게 배치하는지 살펴보고, 일반 콘텐츠 사이트의 정보 위계 설계에 적용할 수 있는 패턴을 정리합니다.
정보 위계위험 UX콘텐츠 디자인가독성케이스 스터디
디자인
3D CSS Transform과 Perspective: 입체감 있는 UI 구현
CSS 3D Transform 완전 가이드: perspective와 perspective-origin 제어, rotateX/Y/Z 카드 뒤집기, translateZ 깊이감, transform-style preserve-3d, 3D 캐러셀, 성능 최적화 will-change를 다룹니다.
CSS 3D TransformPerspective카드 뒤집기CSS 애니메이션3D UI
디자인
온보딩 UX와 점진적 공개 패턴: 사용자를 단계별로 안내하기
온보딩 UX 완전 가이드: 점진적 공개 패턴 설계, 툴팁 vs 모달 vs 인라인 가이드 선택, 온보딩 완료율 측정, 스킵 처리, 복귀 사용자 적응형 온보딩, 체크리스트 패턴 구현을 다룹니다.
온보딩 UX점진적 공개사용자 경험프로덕트 투어신규 사용자
디자인
에러 상태 디자인 UX 패턴: 404부터 네트워크 오류까지
에러 상태 UX 디자인 완전 가이드: 에러 유형별 메시지 설계, 404/500 페이지, 빈 상태, 네트워크 오류, 폼 검증 에러, 재시도 패턴, 에러 바운더리, 오프라인 상태 처리를 다룹니다.
에러 상태 디자인UX 패턴에러 메시지404 페이지사용자 경험
디자인
디자인 시스템 도입률 측정: 컴포넌트 사용 추적과 KPI 설계
디자인 시스템 도입률 측정 완전 가이드: 컴포넌트 사용 추적 방법, 커버리지 스코어 계산, Figma 사용률 vs 코드 사용률 비교, 팀별 도입 현황, 미사용 컴포넌트 식별, 성과 보고 방법을 다룹니다.
디자인 시스템메트릭컴포넌트 추적KPI거버넌스
디자인
제스처와 터치 인터랙션 디자인: 모바일 UX 완전 가이드
모바일 제스처 UX 완전 가이드: 탭/스와이프/핀치 제스처 설계, 터치 타겟 크기 기준, 드래그 인터랙션, 당겨서 새로고침, 스와이프 삭제 패턴, Pointer Events API, 제스처 피드백 설계를 다룹니다.
제스처 디자인터치 인터랙션모바일 UXPointer Events사용자 경험
디자인
반응형 이미지 아트 디렉션: picture, srcset으로 완벽한 크로스 디바이스
반응형 이미지 완전 가이드: srcset과 sizes 속성 최적화, picture 요소로 아트 디렉션, WebP/AVIF 자동 제공, 지연 로딩, LCP 최적화, 이미지 CDN 활용, aspect-ratio로 레이아웃 시프트 방지를 다룹니다.
반응형 이미지아트 디렉션웹 성능이미지 최적화LCP
디자인
폼 디자인 UX 패턴: 에러 표시부터 인라인 검증까지
폼 UX 디자인 완전 가이드: 인라인 검증 타이밍, 에러 메시지 위치와 문구, 필수/선택 필드 표시, 비밀번호 강도 표시, 멀티 스텝 폼 진행률, 자동완성 최적화, 접근성 aria 패턴을 다룹니다.
폼 디자인UX 패턴입력 검증접근성사용자 경험
디자인
데이터 시각화 차트 디자인 시스템: 일관된 차트 UI 구축
데이터 시각화 디자인 시스템 완전 가이드: 색상 팔레트 접근성, 차트 타입 선택 기준, 빈 상태/로딩 처리, 반응형 차트 설계, 인터랙션 패턴, Recharts/D3 커스터마이징을 다룹니다.
데이터 시각화차트 디자인디자인 시스템Recharts접근성
디자인
Print CSS와 PDF 생성: 웹 페이지를 완벽한 인쇄물로
Print CSS와 PDF 생성 완전 가이드: @media print 최적화, 페이지 나누기 제어, 머리글/바닥글 설계, Puppeteer/Playwright PDF 생성, 인쇄용 컴포넌트 분리 전략을 다룹니다.
Print CSSPDF 생성Puppeteer인쇄 최적화웹 디자인
디자인
글래스모피즘과 뉴모피즘: 2026년 UI 트렌드 구현 가이드
글래스모피즘(glassmorphism)과 뉴모피즘(neumorphism) 완전 가이드: CSS backdrop-filter, box-shadow 다중 레이어, 접근성 고려, 성능 최적화, 다크모드 적응, 실제 UI 컴포넌트 구현을 다룹니다.
글래스모피즘뉴모피즘UI 트렌드CSS디자인 시스템
디자인
AI 생성 UI 검수 기준: 생성형 AI 디자인 툴 아웃풋 품질 관리 실전 가이드
Figma AI, Galileo AI, Uizard 등 생성형 디자인 도구 아웃풋의 품질 검수 체크리스트, 접근성 자동 검증, 디자인 시스템 일관성 확인 방법을 다룹니다.
AI 디자인UI 품질 관리생성형 AI디자인 검수디자인 시스템
디자인
Figma Code Connect 2026: 컴포넌트 매핑으로 디자인-개발 싱크 자동화하기
Figma Code Connect 설정, 컴포넌트 Props 매핑, 디자인 변경 시 자동 코드 업데이트 워크플로우, Storybook 연동, 실전 팀 적용 사례를 다룹니다.
Figma Code Connect디자인-개발 싱크컴포넌트 매핑디자인 시스템자동화
디자인
2026 디자인 엔지니어링: 디자이너-개발자 협업 방식의 근본적 변화와 도구 스택
디자인 엔지니어 역할의 부상, Figma-코드 브리지 도구 생태계, 디자이너가 직접 코드 기여하는 워크플로우, 팀 구조 설계까지 2026년 디자인-개발 협업의 새로운 패러다임을 다룹니다.
디자인 엔지니어링디자이너 개발자 협업Figma디자인 시스템팀 워크플로우
디자인
Figma Variables 2.0과 Expression Tokens: 조건 로직으로 살아있는 디자인 시스템 만들기
Figma Variables의 Expression Tokens 기능으로 정적인 스타일 값을 넘어 수식과 조건 로직이 담긴 동적 디자인 시스템을 구현하는 방법을 설명합니다.
Figma디자인 토큰Variables디자인 시스템Expression Tokens
디자인
개발자 포트폴리오 사이트, SEO까지 잡아야 완성이다: 디자인과 검색 최적화를 동시에
개발자 포트폴리오 사이트는 멋진 디자인만으로는 부족합니다. Core Web Vitals, 구조화 데이터, 메타 태그 최적화까지 SEO를 고려한 포트폴리오 디자인 전략을 설명합니다.
SEO포트폴리오웹 디자인Core Web Vitals개발자 브랜딩
디자인
폰트 하나로 모든 화면을 완벽하게: 유동 타이포그래피 시스템 구축 가이드
CSS clamp()와 가변 폰트(Variable Font)를 활용해 모바일부터 대형 모니터까지 완벽하게 작동하는 유동 타이포그래피 시스템을 구축하는 방법을 안내합니다.
타이포그래피가변 폰트CSS디자인 시스템반응형
디자인
접근성은 선택이 아니다: 처음부터 접근성을 갖춘 UI 컴포넌트 만들기
EU EAA 시행과 WCAG 2.2 업데이트를 계기로 접근성을 UI 설계 초기부터 내재화하는 방법을 알아봅니다. 스크린리더 사용자의 경험부터 자동화 테스트까지 실무 가이드를 제공합니다.
접근성WCAGARIA스크린리더컴포넌트
디자인
AI에게 우리 브랜드를 가르치는 법: 에이전트 시대의 디자인 시스템 설계
AI 에이전트가 자율적으로 UI를 생성하는 시대에 브랜드 일관성을 유지하려면 어떻게 디자인 시스템을 설계해야 하는지 살펴봅니다.
AI디자인 시스템에이전트브랜드Agentic UI
디자인
Figma MCP: 디자이너가 코드를 몰라도 되는 세상이 오고 있다
Figma가 MCP(Model Context Protocol)를 공식 지원하면서 AI가 디자인 파일을 직접 읽어 코드를 생성하는 시대가 열렸습니다. 디자인-개발 협업이 어떻게 바뀌는지 살펴봅니다.
FigmaMCP디자인-개발 협업AI코드 생성
디자인
디자인 토큰 제대로 쓰기: W3C 표준이 바꾸는 디자인 시스템의 미래
디자인 토큰이 무엇인지, W3C 표준 3계층 구조(Primitive → Semantic → Component)가 어떻게 멀티플랫폼 디자인 시스템을 혁신하는지 실무 예시와 함께 설명합니다.
디자인 토큰디자인 시스템W3CStyle DictionaryFigma