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

요약

디자인 및 사용자 인터페이스(UI) 변경에 기여하거나 검토할 때 다음 가이드라인을 따르세요. 이 가이드라인의 대부분은 GitLab 디자인 시스템인 Pajamas를 기반으로 합니다. 머지 리퀘스트(MR) 작성자는 다음을 반드시 해야 합니다:

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

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

머지 리퀘스트 리뷰#

머지 리퀘스트(MR) 작성자는 다음을 반드시 해야 합니다:

MR 워크플로에 설명된 대로 설명에 변경 사항의 이전과 이후 스크린샷(또는 동영상)을 포함시켜야 합니다. 이러한 스크린샷/동영상은 모든 리뷰어에게 매우 유용하며, 특히 변경이 작을 경우 리뷰 프로세스를 빠르게 할 수 있습니다.
사용자에게 보이는 변경이 있는 모든 머지 리퀘스트에 ~UX 라벨을 첨부해야 합니다. 이렇게 하면 Reviewer Roulette이 UX 리뷰어를 제안하게 됩니다.

팀 멤버인 경우: Reviewer Roulette에서 제안한 Product Designer를 리뷰어로 지정하는 것을 권장합니다. 이것은 작업을 균등하게 분배하고, 소통을 개선하며, UI를 더 일관성 있게 만드는 데 도움이 됩니다. 다른 리뷰어를 선택해야 하는 이유가 있다면, 직접 선택한 Product Designer에게 배정했음을 코멘트로 언급하세요.

커뮤니티 기여자인 경우: Reviewer Roulette에 관계없이, 기여하는 영역의 도메인 전문가인 Product Designer를 선택하는 것을 선호합니다.

체크리스트#

UI 변경을 설계하거나 검토할 때 다음 사항을 확인하세요.

문서 작성#

UI 텍스트에 대한 기본 가이드라인으로 Pajamas를 따르고, 보조 가이드라인으로 문서 스타일 가이드를 따르세요.
명확하고 일관된 용어를 사용하세요.
문법과 맞춤법을 확인하세요.
도움말 콘텐츠를 고려하고 해당 가이드라인을 따르세요.
적절한 Technical Writer에게 리뷰를 요청하고, 검토해야 할 특정 파일이나 라인과 사용자 관점에서 텍스트의 위치/맥락을 미리 보거나 이해하는 방법을 알려주세요.

패턴#

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

시각적 디자인#

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

디자인 시스템은 지원되는 모든 모드에서 작동하는 디자인 토큰과 컴포넌트를 제공합니다.
통합된 제품 경험을 설계하는 일환으로 의미론적 의미에 기반한 권장 색상을 사용하세요. 이러한 색상 조합은 모든 모드에서 지원됩니다.
타이포그래피 가이드라인을 따르세요.
레이아웃 가이드라인을 따르세요.
기존 아이콘과 일러스트레이션을 사용하거나, 아이코노그래피 및 일러스트레이션 가이드라인에 따라 새 것을 제안하세요.
지원되는 모든 모드를 고려하세요.

디자인 시스템은 지원되는 모드에서 작동하는 디자인 토큰과 컴포넌트를 제공합니다.

모드가 고객 결과에 주요 요인인 경우 특별히 주의하세요.
다크 모드 디자인은 다크 모드 원칙에 맞게 설계해야 합니다.

상태#

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

적용 가능한 모든 상태(오류, 기본, 로딩, 포커스, 호버, 선택됨, 비활성화됨)를 고려하세요.
데이터 크기에 따른 상태(빈 상태, 일부 데이터, 많은 데이터)를 고려하세요.
사용자 권한, 사용자 기본 설정, 구독에 따른 상태를 고려하세요.
애니메이션과 전환을 고려하고 해당 가이드라인을 따르세요.

반응형#

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

모든 중단점에서 요소의 크기 조정, 축소, 이동 또는 줄 바꿈을 고려하세요 (더 큰 뷰포트가 우선시되더라도).
모든 중단점에서 동일한 정보와 액션을 제공하세요.

접근성#

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

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

핸드오프#

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

관련 이슈에 디자인 명세를 공유하세요. 가급적 Figma 링크나 GitLab Designs 기능을 통해 공유하세요. 각 도구를 언제 사용해야 하는지를 참조하세요.
사용자 플로와 상태를 문서화하세요(예: Markdown의 Mermaid 플로차트 사용).
디자인 토큰을 문서화하세요(예: Figma에서 디자인 토큰 어노테이션 사용).
애니메이션과 전환을 문서화하세요.
반응형 동작을 문서화하세요.
명백하지 않은 동작을 문서화하세요(예: 필드가 자동 포커스됨).
접근성 동작을 문서화하세요(예: Figma에서 접근성 어노테이션 사용).
새 아이콘이나 일러스트레이션을 GitLab SVGs 프로젝트에 기여하세요.

후속 조치#

어느 시점이든, 하지만 보통 디자인 구현 중 또는 후에:

디자인 시스템에 대한 추가 또는 개선 사항을 위해 Pajamas에 이슈를 기여하세요.
시간 또는 실현 가능성 문제로 인해 합의된 UX 요구사항에서 의도적으로 벗어난 경우, ~Deferred UX 라벨이 붙은 이슈를 생성하고 해당 이슈나 머지 리퀘스트로 다시 연결하는 링크를 추가하세요.
범위 확장을 방지하기 위해 합의된 UX 요구사항 외의 기능 추가 또는 개선을 위한 이슈를 생성하세요.