UX 디자인
적용 범위
- 데스크톱, 모바일, 웹 대상 제품 작업 경험 설계, 구현, 수정, 검토, 최적화 또는 원칙 지도 요청에 적용합니다. 백엔드 전용, 데이터베이스 전용 등 사용자 대면 상호작용이 없는 작업은 이 스킬의 범위를 벗어납니다.
- 이 스킬은 SDLC 워크플로우와 독립적으로 작동하며 단독으로 설치할 수 있습니다. 시각적 계층, 타이포그래피, 색상, 레이아웃, 컨트롤 형상 또는 모션을 수반하는 작업의 경우, 해당 결정을 위해
sdlc-ui-design과 같은 UI 가이드를 활용하십시오. - 원칙 지도만 요청된 경우, 제품별 설계, 구현 또는 수락 테스트로 확장하지 않고 해당 수준에서 간결한 답변을 제공하십시오.
- 검토 전용 요청의 경우, 새 설계를 만들거나 구현을 변경하지 않고 소견 및 권장 사항을 보고하십시오.
- 설계 탐색, 제안, 개념 비교 및 프로토타입 검증은 독립형 설계 산출물만 생성하거나 수정합니다. 요청에 구현이 포함된 경우에만 프로덕션 코드를 변경하십시오.
- 혼합 요청의 경우, 승인된 구현을 진행하기 전에 먼저 설계를 전달하십시오. 각각을 분리하여 전달하고 평가하십시오. 프로토타입 검증이 구현 수락을 의미하지는 않습니다.
- 구현 시 기존 프로젝트 검사 방식을 따르십시오. 현재 환경이 결함 재현을 지원하는 경우, 해당 결함에 집중하여 재확인하고, 다른 동작 변경에 대한 검사는 위험도와 범위에 따라 선택하십시오. 이 스킬을 충족하기 위해 추가 검증 환경을 설정하거나, 공식 검증 보고서를 생성하거나, 기존 검사를 중복해서 수행하지 마십시오.
- 구현 결과에 대해 수행된 검사, 관찰 사항 및 검증되지 않은 범위를 보고하십시오. 런타임 증거, 코드 기반 추론 및 주관적 판단을 구분하십시오. 모델 자체 평가는 사용자 수락으로 간주하지 않습니다.
필요 시 참고
- 아래 공유 원칙을 따르고, 실제 대상 및 시나리오에 대한 플랫폼 참조를 읽으십시오.
- 데스크톱: 데스크톱 원칙을 읽으십시오.
- 모바일: 모바일 원칙을 읽으십시오.
- 웹: 웹 원칙을 읽으십시오.
- 모바일 웹의 경우 모바일 및 웹 원칙을 모두 읽으십시오. 기타 조합의 경우, 선택한 문서의 조건에 따라 추가 참조를 로드하십시오.
- 플랫폼이 지정되지 않은 경우, 먼저 작업 및 프로젝트 컨텍스트에서 유추하십시오. 일반적인 조언의 경우 공유 원칙만 사용하십시오. 구체적인 작업에 여전히 필요한 플랫폼 결정이 없는 경우에만 명확히 요청하십시오.
- 적용의 컨텍스트나 한계에 대해서는 소스 컨텍스트의 해당 항목과, 필요한 경우 원문을 참조하십시오. 이 스킬의 영어 지침이 로컬 적용을 정의합니다. 참조 시 상위 워크플로우나 툴체인을 가져오지 마십시오.
설계 전달
이 섹션은 변경 규모에 관계없이 요청된 상호작용 탐색, 제안, 개념 비교 또는 프로토타입 검증에 사용합니다. 혼합 작업에서는 설계 부분에 적용됩니다. 구현 전달 및 수락은 작업 및 기존 프로젝트 요구 사항을 따릅니다.
- UX 설계를 인터랙티브 단일 페이지 HTML 산출물로 제시하십시오. 주요 작업, 관련 상태 변경 및 필요한 반환 또는 복구 경로를 프로토타입에서 작동 가능하게 만드십시오. 컨트롤과 피드백이 의도된 작동을 보여주고 관련 상태를 구분하는지 확인하십시오. 소스 컨텍스트.
- 기본적으로 인라인 CSS와 JavaScript를 사용하여 HTML이 직접 열리도록 하십시오. 로컬 상태와 명확히 식별된 예시 데이터를 사용하여 합의된 상호작용 범위를 보여주십시오.
- UI/UX 결합 설계의 경우, 먼저 이미지 생성을 통해 UI 제안을 제공하고 인터랙티브 UX HTML 프로토타입을 제공하십시오. 이미지 생성을 사용할 수 없거나 실패할 경우, 두 용도를 하나의 HTML 산출물로 제공하십시오. 소스 컨텍스트.
- 의도된 뷰포트에서 실제 콘텐츠를 사용하여 렌더링된 프로토타입을 검사하십시오. 실제 콘텐츠를 사용할 수 없는 경우 명확히 식별된 대표 콘텐츠를 사용하십시오. 소스 컨텍스트.
- 인터랙티브 미리보기와 열 수 있는 HTML 파일로 전달을 시작하십시오. 함께 제공되는 산문은 열기 지침, 시뮬레이션 범위 및 필요한 한계로 제한하십시오.
공유 원칙
원칙 적용
- 요청된 작업, 대상 플랫폼 및 시나리오와 관련된 원칙을 적용하십시오.
- 권장 사항에 영향을 미치는 조건과 트레이드오프를 설명하십시오.
- 숫자 요구 사항 또는 권장 사항을 인용하기 전에 출처, 단위 및 대상 플랫폼에 대한 적용 가능성을 확인하십시오.
디자인 원칙
- 작업 및 결과: 사용자 목표와 작업 순서에 따라 UI를 구성하십시오. 현재 작업에 필요한 정보와 작업에 우선순위를 두십시오. 각 화면을 사용자가 그곳에서 달성해야 하는 목표에 따라 평가하십시오. 소스 컨텍스트.
- 진입점 및 컨트롤: 기본 진입점을 발견 가능하게 만들고 각 컨트롤의 의도된 동작을 명확히 하십시오. 동작과 대상을 식별하는 버튼 레이블을 사용하십시오. 모호한 아이콘에는 레이블을 제공하십시오. 소스 컨텍스트.
- 아이콘 의미론: 아이콘의 의미를 현재 사용에서 결정하십시오. 표시된 텍스트 옆에 있는 중복된 장식용 아이콘은 접근성 트리에서 숨기십시오. 의미 있는 독립형 아이콘에는 텍스트 대안을 제공하십시오. 아이콘 컨트롤의 접근 가능한 이름과 적용 가능한 상태를 노출하십시오. 소스 컨텍스트.
- 작업 우선순위: 작업 중심 화면에서 사용자가 먼저 답을 얻고자 하는 질문이 시각적 강조와 읽기 순서를 결정하도록 하십시오. 소스 컨텍스트.
- 프레젠테이션 구조: 프레젠테이션 페이지의 주장과 그 증거가 필요한 섹션과 순서를 결정하도록 하십시오. 소스 컨텍스트.
- 사실 및 예시 콘텐츠: 실제 제품, 고객 또는 비즈니스 활동에 대한 주장과 증거는 사용 가능한 사실에 근거하십시오. 예시 콘텐츠를 명확히 식별하십시오. 소스 컨텍스트.
- 데이터 일관성: 동일한 보고 범위 내에서 동일한 사실이 나타나는 모든 곳에서 일관되게 유지하고, 파생 수치가 기본 데이터와 일관되도록 하십시오. 범위, 기간 또는 계산 기준의 차이를 명확히 하십시오. 소스 컨텍스트.
- 인지 부하: 의사 결정에 필요한 옵션과 컨텍스트를 제시하고, 암기 및 반복 입력을 줄이며, 사용자가 기본값을 검사하고 변경할 수 있도록 하십시오. 복잡한 옵션은 관련성이 생기면 표시하십시오. 단계를 줄일 때를 포함하여 결정에 필요한 정보를 선택 시점에 제공하십시오. 소스 컨텍스트.
- 학습: 인터페이스로 인해 발생하는 불필요한 정신적 노력을 줄이십시오. 사용자가 작업을 이해하고 숙달하는 데 도움이 되는 학습을 지원하십시오. 소스 컨텍스트.
- 단순화: 단순화는 사용자 작업에서 제거하는 장애물로 판단하십시오. 필요한 기능, 의사 결정 관련 정보 및 접근성을 유지하십시오. 소스 컨텍스트.
- 일관성: 플랫폼 상호작용 관례와 일관된 컨트롤 동작을 따르십시오.
- 상태 및 대기 피드백: 작업 또는 내비게이션에서 사용자의 현재 위치, 처리 상태 및 결과를 표시하십시오. 로딩, 빈 데이터 및 실패를 구분하십시오. 작업에 신속하게 응답하십시오. 장기 작업의 경우 신뢰할 수 있는 상태를 제공하고 측정 가능할 때 실제 진행 상황을 표시하십시오. 피드백의 규모를 중요도에 맞추되 빈번한 중단은 피하십시오. 각 상태의 프레젠테이션과 사용 가능한 작업을 해당 의미와 일치시키고, 읽기 전용, 비활성화 및 진행 중 상태를 구분하십시오. 소스 컨텍스트.
- 사용자 제어: 발견 가능한 종료, 취소 및 반환 작업을 제공하십시오. 적절한 경우 실행 취소 및 다시 실행을 지원하고, 변경 사항에 미치는 영향을 명확히 하십시오. 되돌릴 수 없는 작업 전에 결과를 설명하십시오. 시각적 전환은 지원되는 반환, 전환 또는 취소 작업을 방해해서는 안 됩니다. 애니메이션 중단과 백그라운드 작업 취소를 구분하십시오. 소스 컨텍스트.
- 모달성: 현재 작업을 중단하거나 포커스를 보호해야 하는 작업에만 모달 상호작용을 예약하십시오. 소스 컨텍스트.
- 오류 방지 및 복구: 적용되는 지점에서 입력 및 작업 제약 조건을 사전에 명시하십시오. 결과가 정당화될 때 확인을 요구하십시오. 불완전한 입력을 중단하지 않고 적절한 시점에 유효성을 검사하십시오. 실패 시 유효한 입력을 보존하고, 문제와 위치를 식별하고, 알려진 원인을 추측이 아닌 사실로 설명하고, 복구 경로를 제공하십시오.
- 연결성 및 복구: 네트워크 종속 작업의 경우 제한된 연결에서 사용 가능한 기능을 명확히 하십시오. 제품이 실제로 지원하는 대체 또는 복구 작업을 제공하십시오. 소스 컨텍스트.
- 인터페이스 언어: 의도된 대상이 이해할 수 있는 언어를 사용하십시오. 의도된 의미를 정확하게 전달하는 친숙한 도메인 용어는 유지하십시오. 소스 컨텍스트.
- 접근성 운영: 대상 환경에서 키보드 및 보조 기술을 지원하고, 식별 가능한 컨트롤 이름, 상태 및 포커스를 제공하십시오. 정밀 입력 또는 복잡한 제스처에 대한 동등한 작업을 제공하십시오. 실제로 사용 가능한 입력 기능에 따라 상호작용 동작을 선택하십시오. 기본 작업을 호버 없이 사용할 수 있게 만드십시오. 소스 컨텍스트.