트렌드 목록 대신 유용성(유스풀니스) 테스트를 사용하세요
Figma의 2026 개요는 몰입형 3D, 실험적 내비게이션, 선명한 팔레트, 모션, 게이미피케이션, AI 보조 경험을 기록합니다. 이는 탐색을 위한 발상이지 모든 사이트가 복사해야 할 증거는 아닙니다. 서비스 및 계정 페이지는 예측 가능한 흐름에서 더 많은 이득을 얻는 경우가 많습니다.
처리를 선택하기 전에 페이지의 작업(job)을 작성하세요. 동일한 작업과 성공 측정 지표로 전통적 버전과 트렌드 기반 버전을 비교하세요. 주목(attention)만으로는 성공이 아닙니다.
주요 행동을 명명하고 레이블, 위치, 결과가 호버·제스처·튜토리얼 없이도 이해되도록 만드세요.
핵심 콘텐츠로 가는 관습적 경로를 유지하고 증거가 약할 경우 확장을 제거할 수 있는 쉬운 방법을 제공하세요.
콘텐츠와 컴포넌트를 중심으로 반응형 시스템을 구축하세요
반응형 디자인은 계속 높은 가치를 지닙니다. 화면 크기가 의도나 입력 방식을 예측하지 못하기 때문입니다. Google은 콘텐츠 주도 브레이크포인트(content-led breakpoints), 가로 오버플로우 회피, 레이아웃이 좁다는 이유로 정보를 숨기지 않기를 권합니다. 작게 시작하고 콘텐츠가 더 공간을 필요로 할 때 확장하세요.
컨테이너 쿼리(container queries)는 부모가 제공하는 공간에 따라 컴포넌트를 조정하므로 같은 카드가 메인 컬럼과 사이드바에서 모두 작동하게 할 수 있습니다. 이것이 미디어 쿼리를 완전히 대체하지는 않습니다: MDN은 그리드, 플렉스, 뷰포트 미디어 쿼리를 대체 접근법으로 설명합니다.
넓은 화면에서 긴 텍스트 줄 길이를 제한하고 확대(zoom) 시 잘리거나 가로 스크롤이 생기지 않는지 확인하세요.
브라우저가 이미지 로드 이전에 공간을 할당할 수 있도록 이미지 치수를 제공해 레이아웃 이동을 줄이세요.
접근성 우선 상호작용을 지속 가능한 방향으로 만드세요
접근성 우선 디자인은 사람들이 사이트를 어떻게 조작하는지 다루므로 시각적 유행보다 오래갑니다. WCAG 2.2는 W3C 권고입니다. 최신 기준은 구체적 검토 사례를 제시합니다: Level AA에서 키보드 포커스가 제작자 생성 콘텐츠에 의해 완전히 가려져선 안 됩니다; 드래그는 간단한 포인터 대체 수단을 제공해야 합니다; 포인터 타깃은 예외가 없는 한 최소 24 by 24 CSS-픽셀(최소 24 × 24 CSS 픽셀)여야 합니다.
이러한 사례를 시스템 규칙으로 바꾸세요. 헤더, 쿠키 컨트롤, 채팅 런처, 배너가 포커스를 가리지 않도록 하세요. 강한 포커스 상태를 보여주고, 리스트를 드래그로 재정렬할 수 있다면 다른 간단한 조작을 제공하세요. WCAG 2.2는 도움, 반복 입력, 접근 가능한 인증도 다룹니다. 보안 관련 예외는 적용될 수 있으니 자격을 갖춘 보안 및 접근성 리뷰를 받으세요.
모든 레이아웃에서 주요 여정을 Tab으로 이동하며 포커스된 컨트롤이 보이고 식별 가능한지 확인하세요.
메뉴와 폼에서 작은 아이콘 제어와 그 사이 공간을 측정하세요.
패스워드 매니저와 붙여넣기(paste)를 지원하면 인지 부담을 줄일 수 있습니다; 자격 있는 보안 검토 없이 제어를 약화시키지 마세요.
모션은 선택형 안내로 사용하세요
모션은 저장된 확인, 확장된 패널, 다음 단계 등을 명확하게 할 수 있습니다. 그러나 선택을 지연시키거나 콘텐츠로부터 반복적으로 주의를 빼앗거나 상태 변화를 이해하는 유일한 수단일 때는 사용성을 해칩니다. 이러한 경험은 방향일 뿐 의무가 아닙니다.
불필요한 모션 감소 요청을 존중하세요. MDN은 운영체제의 사용자 선호를 감지하는 `prefers-reduced-motion`을 문서화해 모션을 제거·축소·대체하는 방법을 안내합니다. 정보와 완료 피드백은 유지하되, 대규모 팬(pan), 패럴랙스(parallax), 자동재생 효과는 조용한 시각적 변화로 대체하세요.
각 애니메이션이 전달하는 정보를 명시하세요; 답이 없다면 제거하세요.
운영체제 수준에서 reduced motion을 활성화하고 페이지가 여전히 의미가 있는지 검증하세요.
속도와 안정성을 디자인 수용 기준으로 삼으세요
성능은 디자인 제약이지 마무리 작업이 아닙니다. Google의 현재 Core Web Vitals는 로딩을 위한 Largest Contentful Paint, 반응성을 위한 Interaction to Next Paint, 시각적 안정성을 위한 Cumulative Layout Shift를 포함합니다. 권장 목표는 LCP 2.5초 이하, INP 200밀리초 이하, CLS 0.1 이하(75번째 백분위수 기준, 모바일 및 데스크톱 분리)입니다. 이들은 유용한 목표이지만 작업 테스트를 대체하지는 않습니다.
비디오 히어로, 커스텀 폰트, 이미지 시퀀스, 클라이언트 측 효과, 서드파티 어시스턴트를 추가하기 전에 예산을 정하세요. 랩(lab) 테스트로 릴리스 전 회귀를 잡을 수 있지만, 환경이 다양하므로 현장(field) 측정이 필수입니다.
이미지, 임베드, 광고, 늦게 로드되는 인터페이스 요소에 공간을 예약하세요.
빌드 중에는 랩 검사, 릴리스 후에는 실제 사용자 데이터를 사용하세요; 모바일과 데스크톱을 별도로 검토하세요.
몰입형·실험적·AI 중심 인터페이스는 조건부 실험으로 다루세요
3D, 비선형 내비게이션, 비주얼 스토리텔링, 대화형 어시스턴스는 정적 콘텐츠로는 줄이기 힘든 불확실성을 줄일 때 도움이 될 수 있습니다. 방문자가 가격, 알려진 목적지, 폼, 답을 필요로 할 때는 기본값으로는 부적절합니다. 향상된 요소가 로드되거나 실패할 때 직접 경로, 일반 텍스트 설명, 사용 가능한 경로를 보존하세요.
가장 작은 버전으로 먼저 프로토타입하세요. 유지할 정당성이 되는 기준을 정의하세요(예: 잘못된 선택 감소, 답 찾기 속도 향상 등). 자산 무게, 스크립트 실행, 유지보수, 공급업체 의존성, 개인정보 검토, 접근 가능한 대안을 기록하세요. 인상적인 데모가 인과관계를 증명하진 않습니다.
몰입형 레이어나 어시스턴트 없이도 핵심 카피, 주요 내비게이션, 주요 행동이 사용 가능하도록 유지하세요.
초기 노출을 제한하고 결과를 비교하며 되돌릴 결정을 마련하세요.
디자인 변경을 회복력 있는 제품 변경으로 운영하세요
레이아웃 변경은 자산 전달, JavaScript 동작, 동의 도구, 외부 서비스에 영향을 줄 수 있습니다. 리디자인을 프로덕션 변경으로 다루세요. Status Is UP은 사전적인 가동시간 최적화와 복구를 지원합니다: 출시에 앞서 약한 종속성을 식별하고, 체크를 설정하고, 롤백을 준비하며, 반복되는 전달 위험을 고치세요. 이는 사용자가 영향을 받은 뒤 다운타임을 관찰하는 것과 다릅니다.
새 경로가 작업, 접근성, 성능 검사를 통과할 때까지 이전 경로를 유지하세요. 누가 기능을 중지할 수 있는지 명시하세요. 콘텐츠, 브라우저, 공급업체, 캠페인 변경 후 재점검하세요.
광범위한 릴리스 전에 주요 여정, 자산, 폼, 동의 동작, 종속성을 확인하세요.
테스트된 되돌리기 경로, 결정 소유자, 예상 방문자 상태를 문서화하세요.