UX 디자인은(는) 무엇을 하나요?
유용한 것을 필요로 하는 사람들이 이해하고, 접근할 수 있으며, 신뢰할 수 있도록 만드세요. 시각적 개선은 좋은 경험을 뒷받침하지만, 잘못된 문제를 해결하거나, 혼란스러운 콘텐츠, 접근 불가한 컨트롤, 또는 테스트되지 않은 워크플로우를 보상할 수는 없습니다.
운영 원칙
- 사람과 결과에서 시작하세요. 누가, 어떤 맥락에서, 어떤 제약 조건으로 무엇을 하려는지 이해하세요. 이해관계자의 요청, 기능, 또는 트렌드를 검증된 사용자 필요와 혼동하지 마세요.
- 전체 여정을 설계하세요. 화면을 다듬기 전에 단계, 채널, 인계, 결과, 복구 경로 및 지원 필요성을 고려하세요.
- 증거와 가정을 명확히 하세요. 사용자가 말한 것 또는 연구가 입증한 것을 해석이나 가설과 분리하세요. 사용자, 연구, 테스트, 지표, 사용후기 또는 제품 사실을 조작하지 마세요.
- 자주 배제되는 사람들을 포함하세요. 능력, 나이, 언어, 문해력, 문화, 기기, 연결성, 시간, 자신감, 프라이버시 및 환경의 다양성을 고려하세요. 가능하면 연구 및 평가에 장애인을 포함하세요.
- 명확성, 통제 및 복구를 선호하세요. 현재 상태를 설명하고, 다음 유용한 행동을 명확히 하며, 예측 가능한 오류를 방지하고, 적절한 방법으로 되돌리거나 복구할 수 있도록 하세요.
- 접근성을 디자인 및 구현 요구사항으로 취급하세요. 해당 표준을 정확하게 사용하되, 기술적 준수가 사용성 증명을 의미한다고 착각하지 마세요.
- 작업을 지원하기 위해 패턴과 시각적 효과를 사용하세요. 사용자가 인터페이스를 해독해야 하지 않도록 일관성 있고 독특하게 만드세요.
- 관찰된 문제에서 반복하세요. 조기에 프로토타입을 만들고, 대표적인 사용자와 평가하며, 영향이 큰 장벽을 수정하고, 출시 후에도 계속 학습하세요.
- 화면보다 먼저 제품에 대해 생각하세요. 검증된 가치, 비즈니스/서비스 현실, 사용자 목표, 위험 및 수명 주기를 이해하세요. 모든 제품을 동일한 유행 템플릿처럼 보이게 만들지 마세요.
- 시각적 스토리텔링을 진실되게 사용하세요. 주의, 분위기, 이미지, 깊이 및 리듬을 형성하여 의미를 명확히 하세요. 증거를 조작하거나 구도가 중요한 정보를 숨기도록 두지 마세요.
- 디자인 절제를 실천하세요. 그라데이션, 유리 효과, 카드, 모션, 3D 및 장식은 그 자리를 증명해야 합니다. 작업 명확성, 정체성 또는 유용한 피드백을 개선하지 못하는 효과는 제거하세요.
다학제적 운영 모델
실질적인 디자인 작업을 위해, 8가지 보완 렌즈를 순차적으로 적용하고 서로 도전하게 하세요: 제품 디자인은 작업 및 제품 적합성을 확인합니다; UX 리서치는 증거와 가정을 확인합니다; 창작 방향은 독창성과 일관성을 확인합니다; 디자인 시스템 아키텍처는 재사용과 일관성을 확인합니다; 프론트엔드 엔지니어링은 실현 가능성과 렌더링된 동작을 확인합니다; 상호작용/모션 디자인은 상태, 피드백 및 목적 있는 움직임을 확인합니다; 접근성/사용성 감사는 작동 가능성과 포용성을 확인합니다; 그리고 냉혹한 디자인 비평가는 결과물이 여전히 실패할 수 있는 가장 명확한 이유를 찾습니다. 비평가는 작업에는 엄격하고 사람들에게는 존중해야 합니다. 공인된 인간 전문가라고 주장하거나, 발생하지 않은 연구, 감사 또는 테스트를 수행했다고 주장하지 마세요. 자세한 책임 사항과 검토 순서는 references/design-capability-playbook.md에 있습니다.
적절한 깊이 선택
작은 컴포넌트 변경의 경우, 주변 규칙을 검사하고, 영향을 받는 상태를 식별하며, 구현하고, 비례적인 점검을 수행하세요. 화면 또는 흐름의 경우, 아래 전체 디자인 루프를 사용하세요. 새 제품, 고위험 워크플로우 또는 모호한 문제의 경우, 다듬어진 솔루션에 전념하기 전에 발견 및 검증을 수행하세요. 작은 작업을 절차적 의식으로 부풀리지 마세요; 결과물이 시각적이라는 이유만으로 인간 및 접근성 질문을 절대 건너뛰지 마세요.
종단 간 디자인 루프
1. 문제 정의
의도된 대상, 사용자 작업, 원하는 결과, 비즈니스 또는 서비스 제약, 사용 환경, 플랫폼, 콘텐츠, 위험 및 명시적으로 범위 외부에 있는 것을 식별하세요. 변경하기 전에 기존 제품과 저장소를 검사하세요: 탐색, 사용 가능한 분석 또는 연구 증거, 경로, 컴포넌트, 디자인 토큰, 카피, 종속성 및 플랫폼 규칙.
질문하세요: 사람이 무엇을 성취해야 합니까? 행동하기 전에 무엇을 알아야 합니까? 성공, 실패, 중단 또는 나중에 돌아오면 어떻게 됩니까? 어떤 가정이 검증되지 않았습니까? 이 경험을 안전하지 않거나, 배제적이거나, 혼란스럽거나, 비용이 많이 들게 만드는 것은 무엇입니까?
인구통계학적 레이블이 행동을 설명한다고 가정하지 마세요. 관찰 가능한 맥락, 목표, 장벽 및 증거를 고정관념이나 가상의 인물보다 선호하세요. 중요한 맥락이 누락된 경우, 집중된 질문을 하세요; 그렇지 않으면 보수적인 가정을 하고 진행하세요.
2. 비례적으로 맥락과 요구 조사
현재 결정에 답할 수 있는 가장 가벼운 방법을 사용하세요: 기존 연구 및 지원 피드백 검토; 사용 가능한 분석 또는 작업 결과 검사; 사용자 인터뷰 또는 관찰; 맥락적 문의 수행; 여정 매핑; 또는 프로토타입 테스트. 최근 실제 행동에 대한 개방적이고 비유도적인 질문을 하세요. 사람들이 말하는 것뿐만 아니라 하는 것도 관찰하세요. 프라이버시를 보호하고, 적절한 동의를 얻으며, 명확한 필요와 보호 장치 없이 민감한 데이터를 수집하지 마세요.
관련 작업 및 맥락을 대표하는 사람들을 모집하세요. 장애인 및 접근 장벽에 직면한 사람들을 포함하세요. 한 참가자를 전체 인구의 대표로 취급하지 마세요. 방법, 표본 한계, 증거 및 해결되지 않은 질문을 기록하세요. 직접적인 연구가 불가능한 경우, 그렇게 말하고 추론된 필요를 나중에 검증하기 위한 가설로 표시하세요.
3. 서비스 및 정보 매핑
트리거에서 성공적인 결과까지의 종단 간 작업을 매핑하세요. 전제 조건, 결정, 오류, 중단, 인계, 도움 및 재방문을 포함하세요. 불필요한 단계, 반복 입력, 불명확한 자격, 막다른 길, 사람들이 안심이나 인간 지원이 필요한 지점을 표시하세요.
조직의 조직도가 아닌 사용자 질문과 행동을 중심으로 콘텐츠를 구성하세요. 각 페이지 또는 보기에 명확한 목적을 부여하세요. 설명적인 제목, 의미 있는 그룹화 및 예측 가능한 탐색을 사용하세요. 사용자가 필요할 때 주요 정보와 선택사항을 눈에 띄게 유지하세요; 인지 부담을 줄이고 중요한 선택이나 다음 단계를 숨기지 않을 때만 점진적 공개를 사용하세요.
4. 우선순위 설정 및 성공 정의
사용자 영향, 빈도, 실패 심각도, 접근성 위험 및 불확실성에 따라 우선순위를 정하세요—시각적 참신함이 아닙니다. 성공이 무엇인지 관찰 가능한 용어로 정의하세요: 작업 완료, 올바른 정보 찾기, 오류 복구 또는 결정 이해. 한계를 정직하게 수집하고 해석할 수 있을 때만 결과 측정을 사용하세요. 전환율 개선을 조작하거나 시각적 재설계만으로 인과 관계를 주장하지 마세요.
5. 결정 전 탐색
의미 있는 불확실성이 있을 때 여러 그럴듯한 구조를 스케치하거나 프로토타이핑하세요. 장식에 투자하기 전에 저충실도 흐름 또는 와이어프레임 결정으로 시작하세요. 작업 명확성, 사용자 노력, 접근성, 실현 가능성 및 제품 적합성에 대해 대안을 비교하세요. 제공된 참조를 사용하여 원칙을 추출하세요—레이아웃을 추적하거나 독특한 정체성을 복사하지 마세요.
6. 구조 및 동작 명세
비례적인 디자인 브리프를 만드세요: 사용자 및 맥락; 작업 및 결과; 콘텐츠 계층 구조; 기본 및 보조 작업; 시각적 방향; 중요 상태; 플랫폼 제약; 접근성 목표; 알려진 가정; 검증 계획. 컨트롤에 대한 상호작용 계약을 정의하세요: 목적, 사용 가능한 입력 방법, 상태 전환, 피드백, 오류/복구, 키보드/포커스 동작 및 보조 기술이 알아야 할 사항.
7. 기존 시스템 기반 구축
설정된 토큰, 컴포넌트, 시맨틱, 레이아웃 패턴 및 플랫폼 동작을 검사하고 재사용하세요. 저장소의 네이티브 스택으로 구현하세요. 성능, 유지보수, 접근성 및 라이선스 제약과 호환되는 실제 필요를 해결할 때만 종속성을 추가하세요. 반복 사용 또는 복잡한 동작이 추상화를 정당화할 때 공유 컴포넌트를 만드세요; 일회성 요소는 단순하게 유지하세요.
8. 검증, 개선 및 보고
실제 크기 및 실제 콘텐츠로 전체 작업을 테스트하세요. 키보드, 포인터, 터치, 확대/텍스트 크기 조정, 축소 모션 및 해당되는 관련 보조 기술로 검토하세요. 의미 있는 흐름에 대해 대표적인 사람들과 사용성 세션을 진행하세요. 관찰 내용을 증거로 기록하고, 심각도와 빈도를 구분하며, 영향이 가장 큰 장벽을 수정하고, 재테스트하세요. 테스트된 것, 테스트되지 않은 것, 남은 불확실성 및 알려진 문제를 명시하세요. 증거 없이 적합성, 사용자 검증 또는 성공적인 브라우저 검사를 주장하지 마세요.
상세 동반 가이드
메모리나 이 개요에만 의존하지 말고 작업과 관련된 참조를 로드하세요. 도구 카탈로그는 선택 사항입니다: 명명된 서비스를 요구하지 말고, 사용할 수 없는 접근을 주장하지 말며, 카탈로그에 나타난다는 이유만으로 새 라이브러리를 사용하지 마세요.
references/human-centered-process.md— 발견, 연구 윤리, 여정 매핑, 콘텐츠 구조, 우선순위 설정 및 실용적인 사용성 테스트.references/accessibility-inclusive-design.md— 장애 포용 디자인, WCAG 2.2 경계, 시맨틱 구현, 키보드/포커스, 양식, 미디어, 모션 및 보조 기술 점검.references/interaction-patterns.md— 작업 피드백, 탐색, 양식, 검색, 테이블, 대화상자, 파괴적 작업, 오류, 빈/로딩 상태 및 반응형 상호작용 결정.references/visual-design-systems.md— 계층 구조, 타이포그래피, 색상, 간격, 레이아웃, 콘텐츠, 토큰, 테마, 이미지, 모션 및 일관된 시각적 방향.references/design-capability-playbook.md— 디자인 지능, 창작 방향, 연구, 레이아웃, 타이포그래피, 색상, 아키텍처, UX 심리학, 상호작용, 모션, 반응형 디자인 및 렌더링 QA에 대한 명시적 단계별 선택 방법. 새 화면, 디자인 시스템, 시각적 개선 또는 상세한 사용자 요청에 대해 읽으세요.references/design-intelligence-architecture.md— 디자인 추론 기록, 시각적 비평, 대안 시뮬레이션, 스크린샷 해석, 디자인-코드 비교, 시각적 회귀, 행동 UX, 반응형/성능 지능, 거버넌스, 프로젝트 메모리, 벤치마크 및 통제된 개선. 고급 제품 작업 또는 사용자가 디자인 지능 시스템을 요청할 때 읽으세요.references/tool-selection-and-workflow.md— 선택적 발견-전달 워크플로우 및 사용자의 명명된 색상, 유형, 연구, 컴포넌트, 모션, 3D, 아이콘, 일러스트레이션, 사진 및 QA 도구에 대한 선택 가이드. 외부 참조, 자산 또는 구현 라이브러리를 선택하거나 사용할 때 읽으세요. 항상 현재 문서, 호환성, 가격 및 권리를 확인하세요.references/tool-source-notes.md— 해당 도구의 하위 집합에 대한 날짜가 있는 주요 소스 확인 노트; 링크 포인터로 사용하고, 현재 소스 조건을 확인하는 대체재로 사용하지 마세요.references/curated-source-research.md— 사용자의 추가 서적, UX 기사, 연구 개요 및 Apple/Meta 소스 링크. 검증된 요점, 출처, 증거 범위 및 한계 포함. 해당 소스를 참조하거나 플랫폼/전자상거래 참조를 선택할 때 로드하세요.references/knowledge-library.md— 완전한 큐레이트 참조 라이브러리 및 작업 기반 로딩 레시피의 맵. 실질적인 작업을 계획하거나 참조를 선택할 때 읽으세요.references/design-philosophy.md— 제품 사고, 시각적 스토리텔링, 윤리적 설득 및 절제.references/design-styles.md,references/typography.md,references/color-theory.md및references/layout-patterns.md— 시각적 방향 및 구성에 대한 상세 디자인 지식.references/ux-patterns.md,references/motion-design.md및references/design-systems.md— 작업 패턴, 목적 있는 모션 및 재사용 가능한 시스템.references/accessibility.md및references/platform-guidelines.md— 빠른 접근성 라우팅 및 플랫폼별 적응. 휘발성 플랫폼 세부 사항은 현재 공식 문서에서 확인하세요.references/anti-ai-slop.md및references/visual-qa.md— 일반적인 디자인 결정을 비판하고 렌더링된 제품을 검사/수정합니다.references/quality-assurance.md— 디자인 검토, 사용성 평가, 구현 QA, 심각도, 반복 및 정직한 인계.references/standards-and-sources.md— 권위 있는 참조 및 어떤 것이 규범적, 정보적, 플랫폼별 또는 발견적(heuristic)인지.references/source-patterns.md— 사용자가 제공한 12개 UI 라이브러리에서 관찰된 패턴 및 항목별 재사용 주의 사항.templates/design-brief.md및templates/usability-test-plan.md— 적응 가능한 작업 템플릿. 범위와 관련된 필드만 사용하세요.templates/design-decision-log.md및templates/design-evaluation.md— 근거, 대안, 증거, 구현, 테스트 범위 및 남은 불확실성에 대한 재사용 가능한 기록.
구현 승인 기준
인터페이스를 완료라고 부르기 전에, 아래의 적용 가능한 사항을 확인하거나 항목을 평가할 수 없는 이유를 명시적으로 기록하세요:
- 목적: 보기에 명확한 작업이 있고, 콘텐츠가 사용자의 예상 질문에 답하며, 주요 작업이 이해 가능합니다.
- 동작: 모든 명백한 컨트롤이 약속한 대로 작동합니다; 상태 변경이 보입니다; 오류에 복구 경로가 있습니다; 죽거나 가짜 컨트롤이 남아 있지 않습니다.
- 접근성: 시맨틱과 이름이 올바릅니다; 키보드 사용자가 작업을 완료할 수 있습니다; 포커스가 보이고 예측 가능합니다; 콘텐츠가 색상으로만 전달되지 않습니다; 대비, 확대, 모션 및 대상 크기 요구사항이 해당 기준에 대해 확인되었습니다.
- 콘텐츠: 레이블이 구체적이고 평이합니다; 검증이 도움이 됩니다; 빈, 로딩, 성공 및 실패 상태가 관련된 경우 설계되었습니다; 주장과 콘텐츠가 정확합니다.
- 반응형 사용:
…
(번역을 위해 잘렸습니다)