디자인 및 사용자 인터페이스 변경 사항

디자인 및 사용자 인터페이스(UI) 변경을 기여하거나 검토할 때는 다음 지침을 따르세요. 일반적으로 코드 검토에 대한 권고 및 모범 사례에 대해서는 코드 검토 안내서를 참조하세요.

이러한 지침의 대부분은 Pajamas (GitLab 디자인 시스템)을 기반으로 합니다. 추가 및 개선에 대해 Pajamas에 기여할 것을 권장합니다.

Merge Request 검토

Merge Request(MR) 작성자로서 다음을 수행해야 합니다:

  • 변경 내용의 이전 및 이후 스크린샷(또는 비디오)을 설명에 포함시키세요. 이러한 스크린샷/비디오는 모든 검토자에게 매우 유용하며, 변경 내용이 작은 경우 특히 검토 프로세스를 빠르게 할 수 있습니다. MR 작업 흐름에서 설명한 대로 이러한 스크린샷/비디오는 매우 도움이 됩니다.
  • 모든 사용자를 대상으로 하는 변경 사항이 있는 경우 모든 Merge Request에 ~UX 레이블을 부착하세요. 이렇게 하면 Reviewer Roulette가 UX 검토자를 제안합니다.

만약 팀 구성원이라면: Reviewer Roulette에서 제안하는 제품 디자이너에게 Reviewer를 할당하는 것을 권장합니다. 이를 통해 일을 고르게 분배하고 커뮤니케이션을 개선하며 UI를 더 일관되게 만드는 데 도움이 됩니다. 다른 Reviewer를 선택할 이유가 있는 경우, 특정 제품 디자이너에게 할당했다고 설명하는 코멘트를 추가하세요.

만약 커뮤니티 기여자라면: 기여하는 영역의 도메인 전문가인 제품 디자이너를 선택하는 것을 선호합니다. Reviewer Roulette와 무관하게 선택하세요.

체크리스트

UI 변경 사항을 디자인 및 _검토_할 때 이러한 측면을 확인하세요.

작성

  • UI 텍스트의 주요 가이드라인으로 Pajamas를 따르세요. 부차적으로 문서 작성 가이드를 준수하세요.
  • 명확하고 일관된 용어 사용.
  • 문법 및 철자 확인.
  • 도움 콘텐츠 고려 및 해당 가이드라인을 준수하세요.
  • 적절한 기술 작가에게 검토를 요청하세요. 특정 파일 또는 라인 및 사용자 관점에서 텍스트의 위치/문맥을 미리보기하거나 이해하는 방법을 지정하세요.

패턴

  • 제품에서 사용되는 유사한 패턴을 고려하고, 이에 벗어나는 경우 이유를 설명하세요.
  • 적절한 컴포넌트 및 데이터 시각화 사용.

시각 디자인

브라우저의 요소 검사기를 사용하여 시각 디자인 속성을 확인하세요 (Chrome, Firefox).

다크 모드

기능이 실험 상태인 동안에는 다크 모드를 디자인하는 것이 필요하지 않습니다. UX Foundations 팀은 향후 다크 모드를 개선할 계획입니다. 다크 모드를 지원하기 위해 Pajamas 컴포넌트를 제품에 통합하고, 그에 따른 디자인 전략이 마련될 때까지는 이 모드에 버그와 부채를 도입할 수 없음을 보장할 수 없습니다. 재량껏 다크 모드 패치를 생성할 필요를 평가하세요.

상태

브라우저의 _스타일 검사기_를 사용하여 상태를 확인하고 CSS 가상 클래스를 토글하세요(:hover 등) (Chrome, Firefox).

  • 모든 적용 가능한 상태(오류, 정상, 로딩, 포커스, 호버, 선택, 비활성화)를 고려하세요.
  • 데이터 크기에 따라 상태(비어있음, 일부 데이터, 많은 데이터)를 고려하세요.
  • 사용자 역할, 사용자 환경 및 구독에 따라 상태를 고려하세요.
  • 애니메이션 및 전환을 고려하고 가이드라인을 따르세요.

반응형

브라우저의 _반응형 모드_를 사용하여 반응형 동작을 확인하세요 (Chrome, Firefox).

  • 모든 브레이크포인트에서 요소의 크기 조절, 축소, 이동 또는 래핑을 고려하세요(보다 큰 뷰포트가 우선되는 경우도 모두 포함).
  • 모든 브레이크포인트에서 동일한 정보 및 동작 제공을 고려하세요.

접근성

브라우저의 _접근성 검사기_를 사용하여 접근성을 확인하세요 (Chrome, Firefox).

  • 세계 웹 콘텐츠 접근성 가이드라인(WCAG) 2.1의 AA 수준을 준수하세요. 접근성 Pajamas의 모범 사례를 따르고, 접근성 개발자 문서의 체크리스트를 읽으세요.

인계

디자인이 준비되면 구현을 시작하기 전에:

  • 관련 이슈에 디자인 사양을 공유하세요. 이를 위해 피그마 링크 또는 GitLab Designs 기능을 사용하는 것이 좋습니다. 각 도구를 사용해야 하는 시기에 대한 자세한 내용은 각 도구를 사용해야 하는 경우를 참조하세요.
  • Markdown에서 Mermaid 플로차트를 사용하여 사용자 흐름 및 상태를 문서화하세요.
  • 애니메이션 및 전환을 문서화하세요.
  • 반응형 동작을 문서화하세요.
  • 명시적이지 않은 동작(예: 필드는 자동으로 초점이 맞춰짐)을 문서화하세요.
  • 접근성 동작을 문서화하세요(예: Figma의 접근성 주석 사용).
  • GitLab SVGs 프로젝트에 새로운 아이콘 또는 일러스트레이션을 기여하세요.

추가 조치

아무 때나, 하지만 일반적으로 디자인의 구현 중이나 이후에: