UI 디자인
적용 범위
- 데스크톱, 모바일, 웹을 위한 요청된 시각적 인터페이스 디자인, 구현, 수정, 검토, 최적화 또는 원칙 지침에 적용합니다. 백엔드 전용, 데이터베이스 전용 및 시각적 인터페이스 작업이 없는 기타 작업은 이 스킬의 범위를 벗어납니다.
- 이 스킬은 SDLC 워크플로우와 독립적으로 작동하며 단독으로 설치할 수 있습니다. 정보 구성, 상호작용 동작 또는 복구와 관련된 작업의 경우 해당 결정에 대해
sdlc-ux-design과 같은 사용 가능한 UX 지침을 사용하십시오. - 원칙 지침만 요청된 경우, 제품별 디자인, 구현 또는 승인 테스트로 확장하지 않고 해당 수준에서 간결하게 답변하십시오.
- 검토 전용 요청의 경우, 새로운 디자인을 만들거나 구현을 변경하지 않고 결과 및 권장 사항을 보고하십시오.
- 디자인 탐색, 제안, 개념 비교 및 프로토타입 검증은 독립형 디자인 아티팩트만 생성하거나 수정합니다. 요청에 구현이 포함된 경우에만 프로덕션 코드를 변경하십시오.
- 혼합 요청의 경우, 승인된 구현을 진행하기 전에 디자인을 먼저 제공하십시오. 각각 별도로 제공하고 평가하십시오. 프로토타입 검증은 구현 승인을 의미하지 않습니다.
- 구현의 경우 기존 프로젝트 검사를 따르십시오. 현재 환경이 결함 재현을 지원하는 경우 해당 결함에 대한 집중 재검사를 사용하십시오. 다른 동작 변경에 대한 검사는 위험 및 범위에 따라 선택하십시오. 추가 검증 환경을 설정하거나, 공식 검증 보고서를 생성하거나, 이 스킬을 충족하기 위해서만 기존 검사를 중복해서 수행하지 마십시오.
- 구현 결과에 대해 수행된 검사, 관찰 사항 및 검증되지 않은 범위를 보고하십시오. 런타임 증거, 코드 기반 추론 및 주관적 판단을 구분하십시오. 모델 자체 평가는 사용자 승인이 아닙니다.
필요 시 읽기
- 아래의 공유 원칙을 따르고 실제 대상 및 시나리오에 대한 플랫폼 참조를 읽으십시오.
- 데스크톱: 데스크톱 원칙을 읽으십시오.
- 모바일: 모바일 원칙을 읽으십시오.
- 웹: 웹 원칙을 읽으십시오.
- 모바일 웹의 경우 모바일 및 웹 원칙을 모두 읽으십시오. 다른 조합의 경우 선택한 문서의 조건에 따라 추가 참조를 로드하십시오.
- 플랫폼이 지정되지 않은 경우 먼저 작업 및 프로젝트 컨텍스트에서 유추하십시오. 일반적인 조언의 경우 공유 원칙만 사용하십시오. 구체적인 작업에 여전히 필요한 플랫폼 결정이 없는 경우에만 명확히 요청하십시오.
- 어댑테이션의 컨텍스트나 제한 사항은 소스 컨텍스트의 연결된 항목과 필요한 경우 원문을 참조하십시오. 이 스킬의 영어 지침은 로컬 어댑테이션을 정의합니다. 참조 시 업스트림 워크플로우나 툴체인을 가져오지 마십시오.
디자인 전달
변경 크기와 관계없이 요청된 시각적 탐색, 제안, 개념 비교 또는 프로토타입 검증에 이 섹션을 사용하십시오. 혼합 작업에서는 디자인 부분에 적용됩니다. 구현 전달 및 승인은 작업 및 기존 프로젝트 요구 사항을 따릅니다.
- UI 디자인 제안은 먼저 이미지 생성을 통해 제시하십시오. 기존 인터페이스 스크린샷은 참조 자료로 사용할 수 있습니다. 이미지 생성을 사용할 수 없거나 실패한 경우 단일 페이지 HTML 아티팩트로 제안을 제시하십시오. 소스 컨텍스트.
- 결합된 UI/UX 디자인의 경우 UI 디자인 이미지와 상호작용 가능한 UX HTML 프로토타입을 제공하십시오. UI가 HTML 폴백을 사용하는 경우 두 가지 모두에 하나의 HTML 아티팩트를 사용하십시오.
- HTML 아티팩트의 경우 기본적으로 인라인 CSS 및 JavaScript를 사용하여 직접 열 수 있도록 하십시오. 로컬 상태와 명확하게 식별된 예시 데이터를 사용하여 합의된 상호작용 범위를 시연하십시오.
- 가능한 경우 실제 콘텐츠를 사용하여 의도된 뷰포트에서 렌더링된 디자인을 검사하십시오. 그렇지 않은 경우 명확하게 식별된 대표 콘텐츠를 사용하십시오. 소스 컨텍스트.
- 이미지, 미리보기 및 열 수 있는 파일로 전달을 주도하십시오. 함께 제공되는 산문은 열기 지침, 시뮬레이션 범위 및 필요한 제한 사항으로 간결하게 유지하십시오.
공유 원칙
원칙 적용
- 요청된 작업, 대상 플랫폼 및 시나리오와 관련된 원칙을 적용하십시오.
- 권장 사항에 영향을 미치는 조건 및 트레이드오프를 설명하십시오. 특정 시각적 스타일을 보편적으로 규정하지 마십시오.
- 숫자 요구 사항 또는 권장 사항을 인용하기 전에 해당 출처, 단위 및 대상 플랫폼에 대한 적용 가능성을 확인하십시오.
디자인 원칙
- 진입점 및 어포던스: 기본 진입점을 시각적으로 인식할 수 있도록 만드십시오. 컨트롤의 모양, 레이블 및 배치를 사용하여 사용 방법과 그 동작의 의미를 전달하십시오. 소스 컨텍스트.
- 일관성 및 스타일: 아이콘, 구성 요소 및 장식을 제품 목적 및 기존 디자인 관례에 맞추십시오. 장식을 추가할 때 콘텐츠를 읽기 쉽게 유지하고 작업을 사용 가능하게 유지하십시오. 제품 유형, 대상 사용자, 사용 컨텍스트 및 명시된 시각적 선호도에 맞는 시각적 스타일을 선택하십시오. 소스 컨텍스트.
- 시각적 디자인 시스템: 기본적으로 제품 전체의 시각적 디자인 규칙을 사용하고, 명시적인 페이지 수준 예외가 있는 경우 해당 페이지에서 우선 적용하십시오. 재사용 가능한 디자인 값과 패턴을 의미론적 역할별로 구성하고, 반복되는 요구가 확인되면 공유 정의를 추출하십시오. 재사용할 항목을 결정할 때 의도의 차이를 유지하십시오. 소스 컨텍스트.
- 미적 방향: 사용자의 명시적 미적 선택이 스킬의 스타일 선호도와 충돌하는 경우 사용자의 선택을 따르십시오. 소스 컨텍스트.
- 프레젠테이션 개념: 프레젠테이션 페이지의 시각적 개념을 해당 주제의 특성에 기반하십시오. 소스 컨텍스트.
- 콘텐츠 적합성: 실제 콘텐츠의 형태, 길이 및 양을 수용할 수 있는 레이아웃을 선택하십시오. 구조가 필요한 콘텐츠를 담을 수 없는 경우 사실과 필요한 정보를 유지하면서 구조를 조정하십시오. 소스 컨텍스트.
- 사용 가능한 미디어: 시각적 접근 방식이 미디어에 의존하는 경우 존재하거나 실제로 획득할 수 있는 에셋을 기반으로 하십시오. 필요한 에셋을 사용할 수 없는 경우 실현 가능한 구성을 선택하십시오. 소스 컨텍스트.
- 타이포그래피: 읽기 조건에 맞는 글꼴, 크기 및 줄 간격을 선택하십시오. 크기와 두께를 통해 계층 구조를 설정하십시오. 본문 및 보조 텍스트는 확대된 경우를 포함하여 필요한 콘텐츠나 컨트롤이 잘리거나 숨겨지지 않고 읽을 수 있도록 유지하십시오.
- 대상 언어: 제품이 지원하는 언어 및 문자 체계에 대해 텍스트 확장, 읽기 방향 및 스크립트별 모양을 타이포그래피와 레이아웃에서 수용하십시오. 소스 컨텍스트.
- 레이아웃 및 간격: 위치와 그룹화를 사용하여 중요성과 관계를 표현하십시오. 정렬과 간격을 일관되게 적용하십시오. 밀도를 읽기, 비교 및 작업 요구에 맞추십시오. 경쟁하는 강조를 피하십시오. 인터페이스 또는 컨테이너에 사용 가능한 공간을 기반으로 레이아웃 구조를 선택하십시오. 해당 공간이 변경될 때 필요에 따라 콘텐츠를 재구성하고 기본 콘텐츠 및 작업에 계속 액세스할 수 있도록 하십시오. 소스 컨텍스트.
- 색상, 상태 및 포커스: 기본, 보조 및 상태 색상을 정의하고 일관되게 사용하십시오. 텍스트, 컨트롤 및 상태에 대한 적절한 대비를 보장하십시오. 색상이 정보를 전달하는 경우 텍스트나 도형으로 보완하십시오. 컨트롤 상태와 포커스를 시각적으로 식별 가능하게 만드십시오. 제품이 지원하는 각 모양에 대해 텍스트 및 컨트롤 가독성과 상태 구분을 확인하십시오. 대상 플랫폼에서 고대비 기본 설정을 노출하는 경우 렌더링된 인터페이스에서 이를 존중하십시오. 소스 컨텍스트.
- 상호작용 대상: 마우스, 터치 또는 기타 입력 방법에 맞게 대상의 크기와 간격을 조정하여 실수로 인접한 요소를 활성화하지 않고 쉽게 선택할 수 있도록 하십시오.
- 데이터 인코딩: 데이터를 그래픽으로 표시할 때 사용자가 이해해야 하는 관계에 적합한 시각적 인코딩을 선택하십시오. 적용 가능한 단위와 척도를 명확히 하십시오. 소스 컨텍스트.
- 모션 목적: 작업 지향 및 읽기 표면에서 피드백, 상태 변경 또는 연속성을 위해 모션을 사용하십시오. 모션이 변경 사항을 설명하는 경우 원인과 결과를 이해할 수 있도록 하십시오. 설득 또는 경험 표면에서 모션은 그 자체로 명확한 표현 목적을 제공할 수 있습니다. 사용자가 대상 환경에서 지원하는 축소 모션 기본 설정을 활성화한 경우 이를 존중하십시오. 모션을 줄이거나 대체할 때 콘텐츠를 읽기 쉽게 유지하고 필요한 상태 변경을 이해할 수 있도록 하십시오. 필수적이지 않은 모션은 입력을 차단해서는 안 됩니다. 상호작용이 전환 또는 취소를 지원하는 경우 애니메이션을 중단 가능하게 만들고 최신 상호작용 상태로 전환하십시오. 애니메이션을 중단하는 것 자체가 백그라운드 작업을 취소하지는 않습니다. 소스 컨텍스트.