Atharva-Git01/experience-design

경험 디자인(Experience Design)

ux-ui-kit은 인터페이스를 올바르게 만듭니다: 토큰, 컴포넌트, 상태, 접근성, 검증된 렌더링. 이 스킬은 인터페이스가 어떤 느낌으로 사용되고 기억되어야 하는지를 결정하고, 이를 키트가 구축할 수 있는 구체적인 결정으로 전환합니다. 다음 질문에 답합니다: 사람들이 가장 먼저 무엇을 주목해야 하는가, 무엇이 친숙하게 유지되어야 하는가, 독창성이 자리 잡을 곳은 어디인가, 무엇이 움직이고 무엇이 정지해 있어야 하는가, 상호작용이 어떻게 커뮤니케이션하는가, 경험의 정점은 어디이며 어떻게 끝나는가, 그리고 인상적인 레이어를 제거했을 때 무엇이 남는가.

위치

레이어	담당	스킬
웹사이트 전략	사이트가 달성하고 전달해야 할 것, 페이지 구조, 증거, 신뢰, 전환, SEO	website-excellence
경험 방향 (이 스킬)	주목도, 친숙함과 독창성, 아트 디렉션, 구성과 템포, 상호작용, 모션, 시그니처 모먼트, 적응, 경험적 검증	experience-design
실행 및 검증	토큰, 컴포넌트, 코드, 카피, 게이트	apply-aesthetic, brandkit, design-tokens, design-component, design-code, image-to-code, ux-writing, prototype, redesign, design-review, a11y-audit, performance, design-qa

전략적 맥락은 인터페이스 결정을 변경할 때만 사용하십시오. 웹사이트의 대상 고객, 제안 또는 페이지 목적이 해결되지 않은 경우, 먼저 website-excellence에서 가져오거나 가정을 명시하고 계속 진행하십시오. 제품 UI, 앱 및 대시보드는 바로 여기로 옵니다.

0단계: 프로세스 규모 조정

다른 무엇보다 먼저 깊이를 선택하십시오. 참고 자료의 프레임워크는 판단을 위한 도구이지 모든 요청이 반드시 통과해야 하는 단계가 아닙니다.

모드	사용 대상	생성할 내용
빠른(Quick)	기존 시스템 내의 컴포넌트, 상태, 화면 수정 또는 픽스	프로젝트의 디자인 결정 기록이 있으면 읽습니다. 영향을 받는 뷰에 대한 주의 순서, 변경 사항에 대한 상호작용 또는 모션 카드, 안티패턴 스캔 후 구축합니다. 논문 에세이는 필요 없음.
표준(Standard)	새로운 페이지, 플로우 또는 화군, 또는 이들의 리디자인	경험 브리프(Experience brief) 및 테제(Thesis), 주의 맵(Attention map), 참신성 예산(Novelty budget), 하나의 방향(실제 트레이드오프가 있는 경우에만 대안), 리듬 맵(Rhythm map), 상호작용 및 모션 맵, 적응 노트, 자기 비평, 결정 기록.
시그니처(Signature)	브랜드를 정의하는 사이트 또는 런칭, 아이덴티티 리디자인, 또는 기억에 남을 것을 명시적으로 요청하는 경우	표준의 모든 항목에 더해, 컨셉 탐구(세 가지 진정으로 다른 방향을 비교하여 하나 선택), 설계된 시그니처 모먼트, 가장 위험한 부분의 프로토타입, 경험적 검증 계획.

절제 확인. 정부 서비스, 체크아웃, 인증, 설정, 문서, 운영 대시보드, 의료 또는 금융 업무의 경우 작업 경로의 참신성 예산은 거의 0에 가깝습니다. 개성은 타이포그래피, 명확성, 어조, 정확성 및 피드백 품질에 있습니다. 절제가 더 강력한 결정임을 아는 것이 업무의 일부입니다.

루프

모드에 필요한 단계를 실행하십시오. 각 단계는 방법을 담고 있는 참조 자료를 가리킵니다.

1. 이해. 경험 브리프를 작성합니다: 사용자 의도, 도착 컨텍스트, 주요 주의, 결과, 어조, 친숙하게 유지할 것, 제약 조건, 사람들이 기억해야 할 것. [01]
2. 설정. 각 주요 뷰에 대한 경험 테제(Experience thesis)와 주의 계층(레벨 1~4)을 작성합니다. 테제는 이후 모든 결정을 필터링합니다. [01]
3. 탐구 (시그니처 모드, 또는 첫 번째 아이디어가 카테고리 기본값일 때). 색상이 아닌 컨셉이 다른 세 가지 방향을 탐구합니다. 보수적, 차별화, 대담함을 비교하고 선택합니다. 거부된 이유를 기록합니다. 선택이 명확해지면 탐구를 중단합니다. [02]
4. 지시. 3~7개의 아트 디렉션 규칙을 설정하고 테제를 레이아웃, 타입, 스케일, 공간, 밀도, 색상, 이미지, 표면, 컴포넌트, 상호작용, 모션 및 반응형 동작에 대한 결과로 변환합니다. [02]
5. 구성. 리듬 맵을 그립니다: 각 섹션의 역할, 밀도 및 강도, 정지가 위치하는 곳, 정점이 어디인지, 어떻게 끝나는지. 콘텐츠가 헤딩, 문단, 세 개의 카드 대신 스스로 형태를 선택하도록 합니다. [03]
6. 상호작용. 의미 있는 상호작용에 대한 상호작용 카드(의도, 어포던스, 트리거, 응답, 피드백, 상태, 복구, 연속성)를 작성하고 로딩, 빈 상태, 오류, 성공, 중단 및 가장자리 상태를 다룹니다. [04]
7. 안무. 모션 맵을 만듭니다: 무엇이 움직이고 무엇이 정지해 있는지, 각 중요한 모션에 대해 하나의 모션 카드와 예산 클래스, 그리고 설계된 동작 축소 버전을 포함합니다. [05]
8. 정점. 0~3개의 시그니처 모먼트를 선택하고 각각에 대해 시그니처 테스트를 실행합니다. [06]
9. 적응. 작은 화면, 터치, 키보드, 줌 및 리플로우, 동작 축소 및 저전력 기기에 맞춰 경험을 재결정합니다. 성능 저하 사다리를 정의합니다. [07]
10. 스트레스 테스트 및 편집. 주요 결정을 결정 필터를 통해 실행하고 야심 찬 결정을 구현 현실성 확인을 통해 실행합니다. 그런 다음 안티패턴 스캔, 상호 교환 가능성 테스트, 컨셉 무결성 테스트 및 7가지 관점에서의 자기 비평을 수행합니다. 그런 다음 자리를 차지할 가치가 없는 것을 제거합니다. [08]
11. 인계 및 검증. 경험 스펙(Experience Spec)을 빌드 스킬에 전달합니다. 키트 게이트와 motion_audit.mjs를 실행합니다. 약 375px 및 1440px에서 키보드만 사용하고 동작 축소를 에뮬레이트하여 렌더링합니다. [07, 08]
12. 검증, 개선 및 기억. 가장 위험한 가정을 가장 저렴한 방법으로 테스트합니다. 낮은 가치의 세부 사항을 닦는 대신 영향이 큰 약점을 수정합니다. 디자인 결정 기록을 업데이트합니다. [08]

불가침 규칙

• 필요한 것은 친숙하게 만들고, 의미 있는 것은 독특하게 만드십시오. 내비게이션, 양식, 체크아웃, 인증, 검색, 설정 및 오류 복구는 청중 증거가 변경을 뒷받침하지 않는 한 기존 동작을 유지합니다. 그 주변에서 브랜드를 표현합니다.
• 접근성은 디자인 입력입니다. WCAG 2.2 AA가 최소 기준입니다. 호버, 드래그, 모션, 색상 또는 소리 단독으로만 의존하는 필수 요소는 없습니다. 모든 모션은 단순히 삭제된 버전이 아닌 설계된 동작 축소 버전이 있습니다.
• 역할 없는 모션은 없습니다. 각 중요한 모션은 전달하는 내용과 예산 클래스(필수, 향상, 표현, 실험, 회피)를 명명합니다.
• 피드백과 복구 없는 상호작용은 없습니다. 모든 의미 있는 작업은 약 100ms 이내에 인지되고, 적절한 경우 취소, 중단 또는 재시도할 수 있습니다.
• 모든 개선에는 실패 모드가 있습니다. 콘텐츠와 핵심 작업은 JavaScript, 무거운 미디어 및 애니메이션이 제거된 상태에서도 여전히 작동합니다.
• 변화는 의미를 전달해야 합니다. 반복을 피하기 위한 이유가 아닌, 콘텐츠, 템포, 계층 또는 감정이 요구하기 때문에 구도, 밀도 또는 강도를 변경하십시오.
• 참조는 원칙을 제공하지 표면을 제공하지 않습니다. 실제 회사의 아이덴티티를 다른 사람을 위해 재구축하지 마십시오. 참조가 작동하는 이유를 추출하고 다르게 표현하십시오.
• 참신함을 뿌리지 말고 집중시키십시오. 일반적인 예산: 빠른 0, 표준 01, 시그니처 12개의 익숙하지 않은 아이디어, 의미나 기억을 창출하는 곳에 집중합니다.
• 신뢰도 라벨을 주요 주장에 사용하고(아래 참조), 측정하지 않은 결과를 절대 진술하지 마십시오(키트 검증 프로토콜).
• 분석은 결정의 규모에 맞춥니다. 명백한 선택에 이론을 적용하지 말고 결정하고 넘어가십시오.

산출물: 경험 스펙(Experience Spec)

templates/experience-spec.md를 모드 깊이에 맞춰 작성하십시오: 빠른 모드의 경우 약 10줄, 표준의 경우 12페이지, 시그니처의 경우 24페이지. 구축 시 스펙은 코드를 구동하는 작업 계획입니다. 언어를 페이지 카피 및 코드 주석에서 멀리하고, 인계 시 중요한 결정만 요약하십시오. 표준 및 시그니처 작업의 경우 templates/design-decision-record.md에서 프로젝트의 디자인 결정 기록을 작성하거나 업데이트하고, 해당 프로젝트의 이후 모든 작업에서 먼저 읽으십시오.

인계 사항

여기서 결정된 사항	실행 주체
아트 디렉션 규칙이 토큰(색상 역할, 타입, 공간, 반경, 깊이, 모션 모드 및 지속 시간)이 됨	새 기반의 경우 brandkit, 기존 기반의 경우 apply-aesthetic, 이후 design-tokens
상호작용 카드의 컴포넌트 및 해당 상태	design-component, 이후 design-code
스펙의 페이지 및 화면	design-code, 또는 참조에서 구축 시 image-to-code
일반성 진단 후 기존 UI 업그레이드	redesign
작업, 오류, 빈 상태 및 피드백에 대한 카피	ux-writing
시그니처 모먼트 및 위험한 상호작용의 프로토타입	prototype
게이트: 모든 상태의 대비, axe, 포커스 트랩, 반응형 오버플로우, 취향, 모션	a11y-audit, design-qa, performance, 및 node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page>
기초 및 경험 렌즈를 통한 화면 점수 검토	design-review

키트의 규칙은 여전히 빌드를 구속합니다: 토큰만, 8개의 컴포넌트 상태, ~/.claude/ux-ui-kit/CLAUDE.md의 검증 프로토콜, 이모지 금지.

신뢰도 라벨

독자가 사실로 오인할 수 있는 권장 사항에 사용하십시오. 모든 문장에 라벨을 붙일 필요는 없습니다.

라벨	의미	Website-excellence 동등어
높은 신뢰도 관습	널리 확립된 패턴, 강력한 사용성 가치	현재 관습, 또는 표준
증거 기반 지침	표준 또는 관련 연구에 의해 뒷받침됨; 증거가 다루는 내용을 명시	표준 / 요구 사항, 강력한 증거
프로젝트별 추론	이러한 사용자, 제약 조건 및 목표에서 추론됨; 가정을 명시	추론
창의적 가설	느낌이나 기억을 만들기 위한 판단; 테스트 가능, 연구로 증명 불가	실용적 휴리스틱
실험적 기회	새롭고 결과가 불확실함; 의존하기 전에 정당화하고 테스트	제한적/맥락적 증거, 검증 계획 포함

연구는 제약 조건을 설정하고 위험을 식별할 수 있습니다. 올바른 아트 디렉션 하나를 선택할 수는 없습니다.

참조 자료

모드와 문제가 필요한 것만 로드하십시오.

• 01 브리프, 테제 및 주의: 경험 브리프, 테제, 세 가지 응답 수준, 주의 계층, 맥락에 따른 비례성, 절제가 승리하는 경우.
• 02 컨셉 및 아트 디렉션: 창의적 영역, 개념적 차이, 방향 카드 및 비교, 의도에서 실행까지, 타이포그래피, 색상, 이미지, 표면, 참조 및 스타일 라이브러리 사용.
• 03 구성, 리듬 및 콘텐츠: 시간에 따른 디자인, 리듬 맵, 대비 및 템포, 밀도와 일시 중지, 콘텐츠 중심 인터페이스, 카드, 구성 도구.
• 04 상호작용 디자인: 상호작용 카드, 커뮤니케이션 테스트, 참신성 예산, 피드백 타이밍, 낙관적 업데이트, 실행 취소, 양식, 경험 상태, 입력 패리티, 패턴 변환, 시그니처 상호작용, 반복 사용.
• 05 모션 시스템: 증거, 모션의 역할, 예산 클래스, 모션 맵 및 카드, 타이밍, 이징 및 스프링, 안무, 스크롤 연동 모션, 뷰 전환, 디자인으로서의 동작 축소, 성능, 모바일, 도구, 테스트.
• 06 시그니처 모먼트: 모먼트 유형, 스펙터클 없는 기억성, 정점과 끝, 선택, 시그니처 테스트, 정적 형태, 프로토타이핑.
• 07 적응 및 성능 저하: 적응으로서의 반응형, 입력 및 기능 쿼리, 컨테이너 쿼리, 줌 및 리플로우, 도달 범위, 기기 계층, 성능 저하 사다리, 실패 모드, 표현 기능을 위한 접근성, 렌더링 검사.
• 08 비평, 검증 및 기억: 결정 필터, 구현 현실성 확인, AI 안티패턴 스캔, 상호 교환 가능성 및 무결성 테스트, 자기 비평 루프, 무자비한 편집, 장인 정신 패스, 명확성과 느낌을 위한 검증 방법, 디자인 결정 기록.