UI 상태 매트릭스: 로딩·빈 상태·오류·성공 상태 설계 가이드

UI 상태 매트릭스는 작업이 바뀔 때 사용자가 무엇을 보고 무엇을 할 수 있는지 정리하는 표입니다. 로딩·빈 상태·오류·부분 결과·성공을 먼저 설계하면 출시 후 누락되는 예외를 줄일 수 있습니다.

Pixso UI 디자인 협업에서 매트릭스, 화면, 리뷰 결정을 함께 업데이트하세요.

1. 작업과 변화를 일으키는 신호부터 정리하기

사용자 목표를 한 문장으로 쓰고 데이터 유무, 요청 상태, 권한, 연결, 화면 너비, 입력처럼 화면을 바꾸는 조건을 나열합니다. 컴포넌트 이름 모음이 아니라 의사결정에 연결된 표가 되어야 합니다.

2. 비슷해 보이는 상태를 분리하기

목록이 비어 있는 이유는 데이터가 없어서일 수도 있고 필터가 모두 숨겼거나 검색 결과가 없기 때문일 수도 있습니다. 권한 부족이나 선행 조건 미충족으로 비활성화된 버튼도 다음 행동이 다르면 별도 행으로 기록합니다.

3. 행을 검토 가능한 화면으로 연결하기

같은 작업의 기본·로딩·빈 상태·오류·부분 결과·성공 프레임을 만들고 조건을 화면 안에 표시하세요. 샘플 데이터를 통일하고 중요한 전환은 프로토타입으로 연결해 실제 동작을 확인합니다.

4. 복구와 입력 보존을 설계하기

성공하지 않은 상태에도 다음 행동이나 조작할 수 없는 이유를 보여 줍니다. 연결 오류에는 재시도, 최초 빈 상태에는 첫 항목 추가 경로를 제공하고, 실패해도 입력값과 필터를 유지하세요. 부분 결과에서는 확인된 정보와 대기 중인 정보를 구분합니다.

5. 너비·입력·콘텐츠를 바꿔 검증하기

최소 너비, 긴 라벨, 느린 응답, 키보드 탐색, 다른 권한으로 매트릭스를 확인합니다. 자동 테스트와 수동 리뷰가 필요한 행을 구분하고 표시·행동·담당자·검수 근거를 함께 기록합니다.

매트릭스를 공유 의사결정 기록으로 만들기

각 행을 프레임이나 전환에 연결하면 요구사항이 바뀌었을 때 영향을 받는 화면·문구·테스트가 보입니다. 오래된 가정이 조용히 남는 것도 막을 수 있습니다.

Pixso에서 UI 상태 정리하기 →