작업 중심 제품 UX
사용자의 상황과 의도된 결과부터 시작하세요. 기존 디자인 시스템, 연구 자료, 제공된 디자인은 증거이며, 범용 대시보드로 대체하지 마세요. 관련 작업 유형에 대한 패턴 및 반례를 읽되, 모든 패턴을 읽을 필요는 없습니다.
화면을 만들기 전에
각 주요 역할/작업에 대해 트리거, 이미 알려진 정보, 결정 사항, 완료 결과, 복구 경로를 식별하세요. 결정 사항이 다른 경우 역할별 워크플로우를 분리하고, 작업과 컨텍스트가 진정으로 일치하는 경우 화면을 공유하세요.
변경 사항에 비례하는 간결한 흐름과 낮은 충실도의 레이아웃을 생성하세요. 각 가시 영역 상태에 대해:
- 지금 이 영역이 필요한 사용자 결정 또는 행동은 무엇인가요?
- 이 영역은 기본, 상황적 세부사항, 아니면 이 뷰에서 불필요한가요?
- 이를 정당화하는 요구사항, 출처, 또는 명시적 설계 결정은 무엇인가요?
이를 사용하여 정보를 선택하고, 제품 카피를 더 생성하지 마세요. 개요 카드, 차트, 배너, 필터, AI 설명, 또는 "출시 예정" 패널을 자동으로 추가하지 마세요. 측정 항목은 누군가가 관련 결정을 내릴 때에만 속합니다. 기술적 출처는 신선도나 유효성을 판단해야 할 때 속할 수 있으며, 디버그 로그와 구현 상태는 일반적으로 개발 기록에 속합니다.
무분별하게 최소화하지 마세요. 접근성 지침, 의미 있는 오류, 필수 컨텍스트, 필수 공개 사항, 결정 결과를 유지하세요. 기본 동작은 유용한 기본값이지, 임의의 하나의 버튼 제한이 아닙니다. 시각적 컨트롤을 줄이기 위해 중요한 동작을 일반 메뉴 뒤에 숨기지 마세요.
상태와 상호작용
관련 상태를 모델링하세요: 초기, 로딩, 빈 상태, 실패, 성공, 편집 중/저장되지 않음, 오래된 결과, 권한 제약. 제품에 필요한 상태만 사용하세요. 선택한 입력과 표시된 결과가 동일한 컨텍스트를 참조하도록 하세요. 복구 가능한 오류에서 사용자의 작업을 보존하세요. 사용자가 놀랄 수 있는 무음 변경보다 명시적 동작을 선택하세요.
편집 표면을 선택하거나 상태가 있는 레이아웃을 변경할 때는 상호작용 패턴 선택을 읽으세요. 인라인 편집, 대화상자, 또는 전용 페이지를 작업 복잡성, 빈도, 컨텍스트 요구 사항, 사용 가능한 공간에 따라 선택하세요. 레이아웃 버그를 숨기기 위해 모달을 사용하지 마세요. 변경 전/후 위치, 스크롤, 의미 있는 컨트롤의 포커스를 확인하세요. 의도적인 공개는 콘텐츠를 이동할 수 있지만, 우발적인 점프나 사라지는 대상은 수정이 필요합니다.
프로젝트의 토큰, 컴포넌트, 언어, 접근성 규칙을 사용하세요. 사용 가능한 지원 도구를 통해 제공된 참조를 검사하세요. Figma MCP가 없다고 해서 중단할 이유는 아닙니다. 검사되지 않은 디자인을 일치하는 것으로 표시하지 마세요. 작은 변경을 위해 새로운 컴포넌트 라이브러리를 도입하지 마세요.
유효/오류/복구 상태에서 시각적 가시성과 포커스뿐만 아니라 접근성 있는 이름과 설명을 확인하세요. 숨겨진 메시지도 접근성 설명에 의해 참조될 때 노출될 수 있습니다. 오류 텍스트는 오류가 적용될 때만 연결하세요.
렌더링된 흐름 검토
사용 가능한 브라우저 또는 애플리케이션 도구를 사용하여 실제 진입점에서 작업을 수행하세요. 레이블과 컨트롤의 구조, 계층 구조, 클리핑, 간격, 시각적 상태에 대한 렌더링된 스크린샷을 검사하세요. 자동화된 접근성 또는 DOM 검사만으로는 시각적 또는 사용성 품질을 증명할 수 없습니다.
반응형 검사의 경우 브라우저의 실제 뷰포트 크기를 확인하고 최종 캡처 이미지를 검사하세요. 스크린샷 자르기, 요소 너비 변경, 또는 수평 오버플로우 확인만으로는 동등한 뷰포트 테스트가 아닙니다. 도구가 뷰포트를 설정하거나 확인할 수 없으면 해당 항목을 검증되지 않음으로 표시하세요. 스크린샷을 보고된 결과와 조정하세요: 누락된 콘텐츠, 사용할 수 없는 줄바꿈, 또는 보이지 않는 동작은 DOM 검사가 통과했다고 해서 시각적 통과라고 할 수 없습니다.
각 발견 사항에 대해 기록: 재현 → 관찰된 동작 → 사용자 영향 → 가장 작은 유용한 수정 → 재확인. 추론을 관찰과 별도로 표시하세요. 설명을 추가하기 전에 기본값을 제거, 이동, 통합 또는 개선하는 것을 선호하세요. 변경 사항이나 남은 우려 사항이 정당화하지 않는 한 통과된 검토를 반복하지 마세요.
브라우저 접근이 불가능하면 코드/레이아웃 증거를 검토하고 런타임 UX를 "검증되지 않음"으로 표시하고 독립적인 작업을 계속하세요. 스크린샷, 클릭, 또는 사용자 검증을 조작하지 마세요. 개발자 또는 에이전트의 검토는 사용자 연구가 아닙니다.