ist-h-i/ui-ux-design

UI/UX 디자인 하네스

목표

UI 디자인, 구현 및 검토를 사용자의 입증된 목표, 시각적 계층 구조와 완성도, 작업 사용성, 상호작용 의미론, 결과 인식 및 복구 가능 상태에 맞춰 제한합니다. 이는 실행 보충제이며, 라이프사이클 대체물이나 비주얼 디자인 시스템이 아닙니다.

가장 작은 적용 가능한 하위 집합을 사용하십시오. 작업에서 입증되지 않은 페르소나, 비즈니스 우선순위, 장치 가정, 복구 보장 또는 상호작용 동작을 발명하지 마십시오.

사용 시기

이 스킬은 일반 전달 워크플로우가 선택되고 작업이 다음 신호 중 하나 이상으로 사용자에게 표시되는 인터페이스를 변경하거나 검토한 후에만 사용하십시오.

• 화면, 폼, 탐색 흐름, 선택 또는 기본 액션;
• 포커스, 선택됨, 비활성화, 로딩, 성공, 오류, 완료 또는 기타 상호작용 상태;
• 결과적 또는 되돌릴 수 있는 사용자 액션;
• 부분 데이터/렌더링 실패, 오래되었거나 누락된 데이터, 재시도 또는 복구 동작;
• 작업 완료 또는 오류 복구에 영향을 미치는 UI 언어.

비 UI 작업, 순수 기계 소비 출력에는 사용하지 말고, 모든 UX 문제를 로드하는 이유로 사용하지 마십시오. 프로젝트별 브랜딩, 사용자, 용어, 중요 흐름 및 비즈니스 규칙은 프로젝트 컨텍스트로 유지됩니다.

프로세스

1. 증거에 고정하십시오. 알려진 사용자 목표, 사용 컨텍스트, 가장 먼저 알아차릴 정보, 액션 우선순위, 완료/다음 액션 및 제약 조건을 식별하십시오. 그 목적에 맞게 밀도와 구성을 선택하십시오: 비교 작업 공간과 제품 소개는 다른 처리가 필요합니다. 기존 계약은 입력값이며 품질 상한선이 아닙니다. 관찰된 약점을 범위 내에서 재검토하십시오. 페르소나나 워크플로우를 발명하지 않고, 결과적으로 중요한 누락된 사실에 의존하는 결정만 중단하십시오.
2. 적용 가능한 원칙과 패턴을 선택하십시오. references/principles.md, references/decision-patterns.md 및 references/anti-patterns.md의 관련 섹션만 읽으십시오. 왜 적용되는지 기록하십시오. 예제를 전역 금지가 아닌 증거 프롬프트로 취급하십시오.
3. 구성을 구체적으로 만드십시오. 그룹화, 순서, 텍스트 계층 구조 및 줄 바꿈, 정렬 앵커, 간격, 이미지 및 제어 관계를 작업에 연결하십시오. 설명을 추가하기 전에 명확한 구조/상태를 선호하십시오. 필요한 의미와 접근 가능한 레이블을 유지하십시오. 일본어의 경우, 레이블, 대상/결과 표현 및 피드백을 문법만이 아니라 표시된 위치와 상태에서 판단하십시오. 아래 검색 규칙에 따라 사용 가능한 japanese-expression 기능을 사용하십시오.
4. 동작을 지정하십시오. 적용 가능한 어포던스/시그니파이어, 상태 의미론, 즉각적인 피드백, 전환, 포커스/현재 상태, 연속성 및 동등한 상호작용 경로를 정의하십시오. 적용 불가능한 사항을 명시적으로 표시하십시오. 호버, 드래그, 제스처 또는 모션 동작을 제조하지 마십시오.
5. 결과 클래스를 분리하십시오. 커밋 전 취소, 완료된 되돌릴 수 있는 변경 후 실행 취소, 커밋된 변경 후 보정 액션을 구별하십시오. 되돌릴 수 없거나 실질적으로 결과를 초래하는 액션의 경우, 커밋 전에 대상, 범위, 결과 및 복구 한도를 표시하십시오. 위험이 낮은 되돌릴 수 있는 액션에 포괄적인 확인을 추가하지 마십시오.
6. 실패를 경계하십시오. 독립적인 영역이 실패할 때 정상적이고, 권한이 부여되었으며, 의미적으로 유효한 영역과 사용자 입력을 사용 가능하게 유지하십시오. 해결되지 않은 실패를 영향을 받는 영역에 계속 표시하고, 재시도를 범위 내로 만들고, 재시도 결과를 확인하십시오. 로딩, 합법적 빈 값, 누락, 오래된 값, 부분 및 완료 상태를 구별하십시오. 누락된 데이터를 0으로 채우거나, 선행 조건 진리가 불완전한 파생된 액션을 노출하지 마십시오. 권한 부여, 보안, 일관성 또는 종속성 의미론이 필요한 경우에만 블록을 넓히십시오.
7. 실제 렌더링을 개선하고 확인하십시오. 구현 중에, 제어를 다듬기 전에 대표적인 전체 화면을 검사한 다음, 독립적인 검토 전에 관련 구성 요소 세부 정보, 좁은 레이아웃 및 상태를 개선하십시오. 시각적 완성도, 작업 사용성 및 기능적 동작을 개별적으로 판단하십시오. 작동하는 클릭, 동일한 CSS 값 및 오버플로 없음이 완성도를 확립하지 않습니다. 적용 가능한 전환, 키보드/포커스, 실제 실행 취소, 커밋 전 취소, 유지된 입력 및 범위가 지정된 재시도를 실행하십시오. 스크린샷은 정적 외관을 지원하지만 복구 또는 상태 복원은 지원하지 않습니다. references/ui-capability-contract.md의 관찰 및 핸드오프 규칙을 사용하십시오.
8. 사용 가능한 UI 기능을 연결하십시오. 계약 전용, 기존 계약 구축 또는 직접 UI 요청에 대해 references/ui-capability-contract.md를 따르십시오. 여기서 원칙 소유권을 유지하고, 활성 환경에서 외부 기능 소유자를 해결하며, 계약-구현-증거 링크를 보존하십시오. 기능 또는 런타임 격차는 영향 받는 종속 작업만 중단시키며 완료된 검토로 간주되지 않습니다.
9. 제약 조건을 선택된 워크플로우로 다시 전달하십시오. requirement-grill, grill-design, controlled-implementation, test-first-verification, 검토 게이트 및 최종 병합 게이트는 각자의 책임을 유지합니다. 이 보충제는 UI 결정을 좁힐 뿐입니다. 자체적으로 구현 또는 승인을 허가하지 않습니다.

출력

현재 작업의 결정 레코드에 바운디드 보충제를 내보내십시오. 로컬 조정의 경우, 변경된 결정과 영향을 받는 증거만 기록하십시오. 새 JSON 계약이나 채워진 템플릿이 필요하지 않습니다. 관련 없는 필드는 생략하거나 not_applicable: <reason>을 사용하십시오. 추측으로 채우지 마십시오.

UX supplement:
  user_context:
    user_goal:
    usage_context:
    known_constraints:
    capability_or_environment_considerations:
  task_model:
    page_or_flow_goal:
    primary_action:
    completion_state:
    next_action:
  information_model:
    required_information:
    secondary_information:
    omit:
    language_required_for_clarity:
  interaction_model:
    affordances_and_signifiers:
    state_semantics:
    action_feedback:
    transition_behavior:
    consistency_expectations:
    direct_manipulation:
    equivalent_interaction_paths:
  inclusion_constraints:
    single_cue_dependencies_to_avoid:
    error_prevention:
    recovery_paths:
    input_and_effort_constraints:
  resilience_and_consequences:
    action_reversibility_and_limits:
    pre_commit_consequences:
    failure_boundaries_and_dependencies:
    safe_remaining_content_and_actions:
    partial_failure_and_freshness_feedback:
    scoped_retry_and_recovery_refs:
    blocking_conditions:
  applicable_patterns:
  anti_patterns:
  implementation_constraints:
  verification_scenarios:
  stop_conditions:

각 검증 시나리오는 검사된 상태와 관찰 가능한 관계를 명명합니다. 상호작용의 경우, 액션/입력, 예상되는 가시적 및 기본 상태, 적용 가능한 복구/연속 결과를 추가하십시오. 다른 스키마를 만드는 대신 기존 정보 모델 및 구현 제약 조건 내에 설계 결정을 유지하십시오.

종료 기준

• 현재 증거에 UI 신호가 포함되어 있기 때문에만 보충제가 연결됩니다.
• 사용자, 제품, 브랜드 및 비즈니스 가정이 출처를 밝히거나 알 수 없음으로 표시됩니다.
• 필요한 의미론을 제거하지 않고 기본 작업과 다음 액션이 더 명확해집니다.
• 렌더링된 UI 판단의 경우, 구성과 구성 요소 완성도가 기능적 검사와 구별되는 렌더링된 증거를 가지고 있습니다. 계약 전용 작업은 실제 화면 승인을 주장하지 않고 관찰 기준을 지정합니다. 통과하는 계약이 관찰된 거칠기를 무시하지 않습니다.
• 동적 주장은 스크린샷 전용 증명이 아닌 상호작용/상태 증거 요구 사항을 가지고 있습니다.
• 되돌릴 수 있음, 되돌릴 수 없음, 부분 실패 및 기본 차단 동작이 적용 가능할 때 구별됩니다.
• 정상 상태와 사용자 입력이 독립적인 실패와 재시도에 걸쳐 보존됩니다.
• 일반 워크플로우와 최종 검토 권한은 변경되지 않은 상태로 유지됩니다.