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

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

이러한 지침의 대부분은 파자마스인 GitLab 디자인 시스템에 기반합니다. 우리는 여러분께 Pajamas에 기여해 추가 및 개선을 하는 것을 권장합니다.

병합 요청 리뷰

병합 요청(MR) 작성자로서, 다음을 해야합니다.

  • 변경 사항에 대한 이전 및 이후 스크린샷(또는 비디오)을 설명에 포함시키세요. 작은 변경 사항인 경우 특히 이러한 스크린샷/비디오는 모든 리뷰어에게 매우 도움이 되며 리뷰 프로세스를 가속화할 수 있습니다. 자세한 내용은 MR 워크플로우를 참조하세요.
  • 사용자에게 영향을 주는 변경 사항이 있는 모든 병합 요청에 ~UX 라벨을 추가하세요. 이렇게 하면 리뷰어 룰렛이 UX 리뷰어를 제안합니다.

팀 멤버인 경우: Reviewer Roulette에서 제안된 제품 디자이너를 리뷰어로 지정하는 것을 권장합니다. 이로써 우리는 작업을 고르게 분배하고 커뮤니케이션을 개선하며 UI를 더 일관되게 만들 수 있습니다. 다른 리뷰어를 선택하는 이유가 있는 경우, 선택한 제품 디자이너에게 할당한 이유를 언급하기 위해 코멘트를 추가하세요.

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

체크리스트

UI 변경을 _설계_하고 _리뷰_할 때 다음을 확인하세요.

작성

  • UI 텍스트에 대한 기본 가이드라인으로 Pajamas을 따르세요. 보조로 문서 스타일 가이드를 사용하세요.
  • 명확하고 일관된 용어를 사용하세요.
  • 맞춤법과 철자를 확인하세요.
  • 도움말 콘텐츠를 고려하고 가이드라인을 따르세요.
  • 알맞은 기술 문서 작성자로부터 리뷰를 요청하고, 리뷰해야 할 특정 파일 또는 라인, 텍스트의 위치/문맥을 사용자의 관점에서 미리보기하거나 이해하는 방법을 나타내세요.

패턴

  • 제품에서 사용된 유사한 패턴을 고려하고 그것들과 다를 때 이유를 이슈에서 규명하세요.
  • 적절한 컴포넌트 및 데이터 시각화를 사용하세요.

시각적 디자인

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

다크 모드

실험 단계인 동안 다크 모드를 위한 디자인은 필수가 아닙니다. UX Foundations 팀은 다크 모드를 향후 개선할 계획입니다. Pajamas 컴포넌트를 제품에 통합하고 다크 모드를 지원하기 위한 기본 디자인 전략이 마련되어야만, 우리는 이 모드에 버그와 부채무릴 도입하지 않을 것을 보장할 수 있습니다. 재량에 따라 다크 모드 패치를 생성할 필요성을 평가하세요.

상태

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

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

반응형

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

  • 모든 브레이크포인트에서 요소의 크기 조정, 축소, 이동 또는 래핑을 고려합니다 (더 큰 뷰포트가 우선되더라도).
  • 모든 브레이크포인트에서 동일한 정보와 작업을 제공합니다.

접근성

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

인계

디자인이 준비된 상태에서 구현을 시작하기 전에:

  • 관련 이슈에 디자인 사양을 공유하며, 이를 위해 피그마 링크나 GitLab 디자인 기능을 통해 선호하는데로 제공합니다. 각 도구를 언제 사용해야 하는지에 대한 자세한 내용은 여기를 참조하세요.
  • 사용자 플로우 및 상태를 문서화합니다 (예: 마크다운에서 Mermaid 플로 차트를 사용).
  • 애니메이션 및 전환을 문서화합니다.
  • 반응형 동작을 문서화합니다.
  • 명확하지 않은 동작(예: 필드가 자동으로 초점이 맞추어짐)을 문서화합니다.
  • 접근성 동작(예: 피그마에서 접근성 주석 사용)을 문서화합니다.
  • GitLab SVGs 프로젝트에 새로운 아이콘 또는 일러스트를 기여합니다.

후속 조치

어떤 순간이든, 주로 디자인 구현하는 동안 또는 이후:

  • 디자인 시스템에 추가되거나 향상을 위해 Pajamas 이슈를 생성하세요.
  • 동의된 UX 요구 사항에서 고의적인 일시적 디자인 변화를 위해 ~UX debt 레이블을 사용하여 이슈를 만들고, 해당 이슈나 머지 리퀘스트로 링크를 걸어 시간상 또는 실현 가능성 상의 도전에 대응합니다.
  • 스코프 크리프를 피하기 위해 동의된 UX 요구 사항 외에 기능 추가 또는 향상을 위한 이슈를 생성하세요.