디자인 및 사용자 인터페이스 변경 사항
디자인 및 사용자 인터페이스(UI) 변경에 기여하거나 리뷰할 때는 다음 지침을 따르세요. 일반적인 코드 리뷰에 대한 궁금증과 모범 사례에 대해서는 코드 리뷰 가이드를 참조하세요.
이러한 지침의 대부분은 Pajamas (GitLab의 디자인 시스템)을 기반으로 합니다. 추가 및 개선을 위해 Pajamas에 기여하는 것을 적극 권장합니다.
병합 요청 리뷰
병합 요청(MR) 작성자로서, 다음을 해야 합니다:
- 변경 내용에 대한 이전 및 이후 스크린샷(또는 비디오)을 설명란에 포함(작은 변경 사항의 경우 특히)하여 모든 리뷰어에게 매우 도움이 될 수 있으며 리뷰 프로세스를 가속화할 수 있습니다. MR 작업 흐름에서 설명된 바와 같습니다.
- 사용자를 대상으로 하는 변경 내용이 있는 모든 병합 요청에는 ~UX 라벨을 부착하세요. 이렇게 하면 리뷰어 룰렛이 UX 리뷰어를 제안합니다.
팀 구성원인 경우: 리뷰어 룰렛에서 제안된 제품 디자이너를 리뷰어로 지정하는 것을 권장합니다. 이는 일을 고르게 분배하고 커뮤니케이션을 개선하며 UI를 더 일관되게 만드는 데 도움이 됩니다. 다른 리뷰어를 선택하는 이유가 있는 경우, 선택한 제품 디자이너를 언급하기 위해 댓글을 추가하세요.
커뮤니티 기여자인 경우: 리뷰어 룰렛에서 제안된 제품 디자이너 중 해당 영역의 도메인 전문가를 선택하는 것을 선호합니다.
체크리스트
UI 변경 사항을 _설계_하고 _리뷰_할 때는 다음을 확인하세요.
기록
- Pajamas를 주요 UI 텍스트 지침으로 따르고 문서 스타일 가이드를 보조로 사용합니다.
- 명확하고 일관된 용어 사용
- 문법 및 철자 확인
- 도움 컨텐츠 고려 및 해당 지침을 따름
- 사용자의 관점에서 텍스트의 위치/콘텐츠를 미리 보거나 이해하기 위해 적절한 기술 작가의 리뷰를 요청하고, 리뷰해야 할 구체적인 파일 또는 라인, 미리보기 방법 등을 명시합니다.
패턴
시각적 디자인
브라우저의 엘리먼트 조사 도구를 사용하여 시각적 디자인 속성을 확인합니다 (Chrome, Firefox).
- 권장되는 색상 및 타이포그래피 사용
- 레이아웃 가이드라인을 따름
- 기존 아이콘 및 일러스트레이션 사용하거나 아이콘 작성 방법 및 일러스트 작성 방법에 따라 새로운 아이콘을 제안함
- 선택 사항: 다크 모드 고려. 자세한 정보는 문법 강조 테마 변경를 참조하세요.
다크 모드
기능이 실험 상태일 때는 다크 모드에 대한 디자인을 필수로 수행할 필요는 없습니다. 디자인 시스템 팀은 앞으로 다크 모드를 개선할 계획을 가지고 있습니다. Pajamas 컴포넌트를 제품에 통합하고 다크 모드를 지원하기 위한 기본 디자인 전략이 마련될 때까지는 이 모드로 인해 버그와 부채가 도입될 수 있음을 보장할 수 없습니다. 재량에 따라 다크 모드 패치를 생성할 필요성을 평가하세요.
상태
브라우저의 _스타일 조사 도구_를 사용하여 CSS 가상 클래스인 :hover 등을 전환하여 상태를 확인합니다 (Chrome, Firefox).
- 모든 관련 상태(오류, 기본, 로딩, 포커스, 호버, 선택, 비활성)를 반영함
- 데이터 크기에 따라(비어 있는 경우, 일부 데이터, 많은 데이터) 상태를 반영함
- 사용자 역할, 사용자 기본 환경, 구독에 따라 상태를 반영함
- 애니메이션 및 전환을 고려하고 지침을 따름
반응형
브라우저의 _반응형 모드_를 사용하여 반응형 동작을 확인합니다 (Chrome, Firefox).
- 모든 브레이크포인트에서 엘리먼트의 크기 조절, 축소, 이동 또는 래핑을 반영함(더 큰 뷰포트가 우선되는 경우에도 해당)
- 모든 브레이크포인트에서 동일한 정보 및 작업을 제공함
접근성
브라우저의 _접근성 검사 도구_를 사용하여 접근성을 확인합니다 (Chrome, Firefox).
- 세계 웹 콘텐츠 접근성 지침 2.1(WCAG)의 AA 수준을 준수함(우리의 준수 성명에 따름)
- 접근성 Pajamas’ 모범 사례를 준수하고 접근성 개발자 문서의 체크리스트를 읽음
인계
디자인이 준비되었을 때, 구현을 시작하기 전에:
- 관련 이슈에 디자인 명세를 공유하세요. 가능하면 Figma 링크나 GitLab Designs 기능을 통해 공유합니다. 각 도구를 언제 사용해야 하는지는 여기를 참조하세요.
- 사용자 흐름과 상태를 문서화하세요 (예: Markdown의 Mermaid 플로차트를 사용).
- 디자인 토큰을 문서화하세요 (예: Figma의 디자인 토큰 주석을 사용).
- 애니메이션 및 전환을 문서화하세요.
- 반응형 동작을 문서화하세요.
- 명시적이지 않은 동작을 문서화하세요 (예: 필드가 자동으로 초점을 맞추는 경우).
- 접근성 동작을 문서화하세요 (예: Figma의 접근성 주석을 사용).
- GitLab SVGs 프로젝트에 새로운 아이콘 또는 일러스트를 기여하세요.
후속 조치
어느 순간이나 가능하지만, 일반적으로 _디자인 구현 중_이나 _이후_에:
- 디자인 시스템에 추가 사항이나 개선을 위해 Pajamas에 이슈를 기여하세요.
- 의도적으로 합의된 UX 요구 사항에서 의도된 변화로 인한 기술적 부채 또는 지연 UX 레이블을 포함하여 이슈를 생성하세요. 시간 또는 실현 가능성의 도전으로 인해 합의된 UX 요구 사항에서 의도적으로 벗어나는 경우, 해당 이슈 또는 머지 요청에 링크를 걸어 참조하세요.
- 기능 추가 또는 개선을 위한 이슈를 생성하세요. 이는 합의된 UX 요구 사항을 벗어나는 경우에 스코프 크리프를 방지하기 위함입니다.
도움말