• 병합 요청 검토
• 체크리스트
  • 작성
  • 패턴
  • 시각 디자인
  • 다크 모드
  • 상태
  • 반응형
  • 접근성
  • 인수
  • 후속 조치

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

디자인 및 사용자 인터페이스(UI) 변경 사항에 기여하거나 검토할 때 이 지침을 따르십시오. 일반적인 코드 검토에 대한 더 넓은 조언과 모범 사례는 코드 검토 가이드를 참조하십시오.

이 지침의 대부분의 기본은 GitLab 디자인 시스템인 Pajamas입니다. 추가 사항 및 개선 사항으로 Pajamas에 기여하는 것을 권장합니다.

병합 요청 검토

병합 요청(MR) 작성자는 다음을 수행해야 합니다:

• 설명에 변경 사항의 전후 스크린샷(또는 비디오)을 포함하십시오. 이는 MR 워크플로우에서 설명한 바와 같습니다. 이러한 스크린샷/비디오는 모든 검토자에게 매우 유용하며, 변경 사항이 작을 경우 검토 프로세스를 빠르게 진행할 수 있습니다.
• 사용자에게 변화가 있는 사항이 있는 경우 ~UX 레이블을 모든 병합 요청에 첨부하십시오. 이는 UX 검토자를 제안하는 Reviewer Roulette를 트리거합니다.

팀원인 경우: 검토자로 Reviewer Roulette에서 제안한 제품 디자이너를 배정하는 것을 권장합니다. 이는 작업을 고르게 분배하고, 커뮤니케이션을 개선하며, UI를 더 일관되게 만드는 데 도움이 됩니다. 다른 검토자를 선택할 이유가 있으면, 선택한 제품 디자이너에게 배정했다는 것을 언급하는 댓글을 추가하십시오.

커뮤니티 기여자인 경우: 기여하는 영역의 도메인 전문가인 제품 디자이너를 선택하는 것을 선호합니다. 이는 Reviewer Roulette에 관계없이 적용됩니다.

체크리스트

UI 변경 사항을 _디자인_하고 _검토_할 때 이러한 측면을 확인하십시오.

작성

• UI 텍스트의 기본 지침으로 Pajamas를 사용하고, 문서 스타일 가이드를 보조 지침으로 사용하십시오.
• 명확하고 일관된 용어를 사용하십시오.
• 문법과 철자를 확인하십시오.
• 도움말 콘텐츠를 고려하고, 지침을 따르십시오.
• 적절한 기술 작가에게 검토 요청을 하며, 그들이 검토해야 할 특정 파일이나 줄을 명시하고, 사용자의 관점에서 텍스트의 위치나 컨텍스트를 미리 보기 위해 어떻게 이해해야 하는지 알려주십시오.

패턴

• 제품에서 사용되는 유사한 패턴을 고려하고, 그것에서 벗어날 경우 이슈에서 정당화하세요.
• 적절한 구성 요소 및 데이터 시각화를 사용하십시오.

시각 디자인

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

• 권장 색상 및 타이포그래피를 사용하십시오.
• 레이아웃 지침을 따르십시오.
• 기존 아이콘 및 일러스트레이션을 사용하거나, 아이콘 및 일러스트레이션 지침에 따라 새로운 것을 제안하십시오.
• 선택 사항: 다크 모드를 고려하십시오. 자세한 정보는 구문 강조 테마 변경을 참조하십시오.

다크 모드

이 기능이 실험 상태일 때 다크 모드를 디자인할 필요는 없습니다. 디자인 시스템 팀은 미래에 다크 모드를 개선할 계획입니다. Pajamas 구성 요소를 제품에 통합하고 다크 모드를 지원하는 기본 디자인 전략이 수립될 때까지, 이 모드에 버그와 부채를 도입하지 않겠다고 보장할 수 없습니다. 재량에 따라 다크 모드 패치를 생성할 필요성을 평가하세요.

상태

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

• 모든 적용 가능한 상태를 고려하세요(오류, 기본, 로딩, 포커스, 호버, 선택됨, 비활성화됨).
• 데이터 크기에 따라 달라지는 상태를 고려하세요
  (빈, 일부 데이터, 많은 데이터).
• 사용자 역할, 사용자 선호도 및 구독에 따라 달라지는 상태를 고려하세요.
• 애니메이션 및 전환을 고려하고 그들의 지침을 따르세요.

반응형

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

• 모든 브레이크포인트에서 요소의 크기 조정, 축소, 이동 또는 감쌈을 고려하세요
  (더 큰 뷰포트가 우선시 되더라도).
• 모든 브레이크포인트에서 동일한 정보와 행동을 제공하세요.

접근성

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

• 우리의 준수 선언서에 따라
  World Wide Web Consortium (W3C) 웹 콘텐츠 접근성 지침 2.1의 AA 수준을 준수하세요.
• 접근성 Pajamas 모범 사례를 따르고 접근성 개발 문서의 체크리스트를 읽으세요.

인수

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

• 관련 이슈에 디자인 사양을 공유하세요, 가능하면
  Figma 링크
  또는 GitLab 디자인 기능을 통해. 어떤 도구를 사용해야 하는지 확인하세요.
• 사용자 흐름과 상태를 문서화하세요 (예: Markdown에서 Mermaid 흐름도로 사용).
• 디자인 토큰을 문서화하세요
  (예: Figma에서 디자인 토큰 주석 사용).
• 애니메이션 및 전환을 문서화하세요.
• 반응형 동작을 문서화하세요.
• 명확하지 않은 동작을 문서화하세요 (예: 입력 필드가 자동으로 포커스됨).
• 접근성 동작을 문서화하세요 (예: Figma에서 접근성 주석 사용).
• GitLab SVGs 프로젝트에 새로운 아이콘이나 일러스트레이션을 기여하세요.

후속 조치

언제든지, 그러나 일반적으로 디자인 구현 중 또는 후에:

• 디자인 시스템에 대한 추가 또는 개선을 위해 Pajamas에 문제를 기여하세요.

• 시간 또는 실행 가능성 문제로 인해 합의된 UX 요구 사항에서 의도적으로 벗어나는 경우에 대해 ~Deferred UX 라벨이 있는 문제를 생성하고,

  해당 문제 또는 머지 요청과 연결하세요.

• 범위 확장을 방지하기 위해 합의된 UX 요구 사항 외부에서 기능 추가 또는 개선을 위한 문제를 생성하세요.