디자인 관리를 사용하면 디자인 자산(와이어프레임 및 목업 포함)을 GitLab 이슈에 업로드하고 단일 위치에 저장할 수 있습니다. 제품 디자이너, 제품 관리자 및 엔지니어가 단일 소스로 디자인에서 협업할 수 있습니다.

팀과 목업을 공유하거나 시각적 회귀를 보고 처리할 수 있습니다.

비디오 개요는 Design Management를 참조하세요.

사전 요구 사항#

히스토리

• GitLab 16.3에서 Gitaly relative path에서 Relative path 필드로 이름 변경되었습니다.

• Git Large File Storage (LFS)가 활성화되어 있어야 합니다:

  • GitLab.com에서는 LFS가 이미 활성화되어 있습니다.
  • GitLab Self-Managed 인스턴스에서는 GitLab 관리자가 LFS를 전역적으로 활성화해야 합니다.
  • GitLab.com 및 GitLab Self-Managed 인스턴스 모두에서 LFS는 프로젝트 자체에 대해 활성화되어야 합니다. 전역적으로 활성화된 경우 기본적으로 모든 프로젝트에 대해 LFS가 활성화됩니다. 프로젝트에 대해 비활성화한 경우 다시 활성화해야 합니다.

  디자인은 LFS 객체로 저장됩니다. 이미지 썸네일은 다른 업로드로 저장되며 프로젝트가 아닌 특정 디자인 모델과 연결됩니다.

  GitLab 관리자는 관리 > 프로젝트로 이동하여 해당 프로젝트를 선택하면 해시 저장 프로젝트의 상대 경로를 확인할 수 있습니다. Relative path 필드에는 @hashed 값이 포함됩니다.

요구 사항이 충족되지 않으면 디자인 섹션에서 알림이 표시됩니다.

지원되는 파일 형식#

다음 유형의 파일을 디자인으로 업로드할 수 있습니다:

• BMP
• GIF
• ICO
• JPEG
• JPG
• PNG
• TIFF
• WEBP

PDF 파일 지원은 이슈 32811에서 추적 중입니다.

디자인 보기#

디자인 섹션은 이슈 설명에 있습니다.

사전 요구 사항:

• 프로젝트에 대한 Guest, Planner, Reporter, Developer, Maintainer 또는 Owner 역할이 있어야 합니다.

디자인을 보려면:

1. 이슈로 이동합니다.
2. 디자인 섹션에서 보고 싶은 디자인 이미지를 선택합니다.

선택한 디자인이 열립니다. 그런 다음 확대하거나 댓글을 만들 수 있습니다.

디자인을 볼 때 다른 디자인으로 이동할 수 있습니다. 이를 위해 다음 중 하나를 선택합니다:

• 오른쪽 상단 모서리에서 이전 디자인으로 이동 ([chevron-lg-left]) 또는 다음 디자인으로 이동 ([chevron-lg-right])을 선택합니다.
• 키보드에서 왼쪽 또는 오른쪽을 누릅니다.

이슈 보기로 돌아가려면 다음 중 하나를 선택합니다:

• 왼쪽 상단 모서리에서 닫기 아이콘 (✗)을 선택합니다.
• 키보드에서 Esc를 누릅니다.

디자인이 추가되면 이미지 썸네일에 녹색 아이콘 ([plus-square])이 표시됩니다. 현재 버전에서 디자인이 변경된 경우 파란색 아이콘 ([file-modified-solid])이 표시됩니다.

디자인 확대#

이미지를 확대 및 축소하여 디자인을 더 자세히 탐색할 수 있습니다:

• 확대 양을 조절하려면 이미지 하단의 더하기(+)와 빼기(-)를 선택합니다.
• 확대 수준을 재설정하려면 다시 실행 아이콘 ([redo])을 선택합니다.

확대된 상태에서 이미지를 이동하려면 이미지를 끌어다 놓습니다.

이슈에 디자인 추가#

히스토리

• GitLab 16.1에서 설명 편집이 도입되었습니다.
• GitLab 16.11에서 이슈에 디자인을 추가하기 위한 최소 역할이 Developer에서 Reporter로 변경되었습니다.
• GitLab 17.7에서 이슈에 디자인을 추가하기 위한 최소 역할이 Reporter에서 Planner로 변경되었습니다.

사전 요구 사항:

• 프로젝트에 대한 Planner, Reporter, Developer, Maintainer 또는 Owner 역할이 있어야 합니다.
• 업로드된 파일의 이름은 255자를 초과하지 않아야 합니다.

이슈에 디자인을 추가하려면:

1. 이슈로 이동합니다.
2. 다음 중 하나를 선택합니다:

   • 디자인 업로드를 선택한 다음 파일 브라우저에서 이미지를 선택합니다. 한 번에 최대 10개의 파일을 선택할 수 있습니다.

   • 클릭하여 업로드를 선택한 다음 파일 브라우저에서 이미지를 선택합니다. 한 번에 최대 10개의 파일을 선택할 수 있습니다.

   • 파일 브라우저에서 파일을 끌어 디자인 섹션의 드롭 영역에 놓습니다.

     

   • 스크린샷을 찍거나 로컬 이미지 파일을 클립보드에 복사하고, 드롭 영역 위에 커서를 올린 다음 Control 또는 Command+V를 누릅니다.

     이런 방식으로 이미지를 붙여넣을 때 다음을 명심하세요:

     • 한 번에 하나의 이미지만 붙여넣을 수 있습니다. 복사된 파일을 여러 개 붙여넣으면 첫 번째 파일만 업로드됩니다.
     • 스크린샷을 붙여넣는 경우 이미지는 design_<timestamp>.png라는 생성된 이름으로 PNG 파일로 추가됩니다.
     • Internet Explorer에서는 지원되지 않습니다.

새 버전의 디자인 추가#

히스토리

• GitLab 16.11에서 새 버전의 디자인을 추가하기 위한 최소 역할이 Developer에서 Reporter로 변경되었습니다.
• GitLab 17.7에서 새 버전의 디자인을 추가하기 위한 최소 역할이 Reporter에서 Planner로 변경되었습니다.

디자인에 대한 토론이 계속되면서 새 버전의 디자인을 업로드하고 싶을 수 있습니다.

사전 요구 사항:

• 프로젝트에 대한 Planner, Reporter, Developer, Maintainer 또는 Owner 역할이 있어야 합니다.

이를 위해 동일한 파일 이름으로 디자인을 추가합니다.

모든 디자인 버전을 탐색하려면 디자인 섹션 상단의 드롭다운 목록을 사용합니다. 최신 버전 표시 또는 버전 #N 표시로 표시됩니다.

건너뛴 디자인#

기존에 업로드된 디자인과 동일한 파일 이름을 가진 이미지를 업로드하면 건너뜁니다. 이는 새 버전의 디자인이 만들어지지 않음을 의미합니다. 디자인을 건너뛰면 경고 메시지가 표시됩니다.

디자인 보관#

히스토리

• GitLab 16.11에서 디자인 보관을 위한 최소 역할이 Developer에서 Reporter로 변경되었습니다.
• GitLab 17.7에서 디자인 보관을 위한 최소 역할이 Reporter에서 Planner로 변경되었습니다.

개별 디자인을 보관하거나 여러 디자인을 한 번에 보관하도록 선택할 수 있습니다.

보관된 디자인은 영구적으로 손실되지 않습니다. 이전 버전을 탐색할 수 있습니다.

디자인을 보관하면 URL이 변경됩니다. 최신 버전에서 디자인을 사용할 수 없는 경우 URL에 버전이 포함된 링크로만 연결할 수 있습니다.

사전 요구 사항:

• 프로젝트에 대한 Planner, Reporter, Developer, Maintainer 또는 Owner 역할이 있어야 합니다.
• 디자인의 최신 버전만 보관할 수 있습니다.

단일 디자인을 보관하려면:

1. 확대된 상태로 보려면 디자인을 선택합니다.
2. 오른쪽 상단 모서리에서 디자인 보관 ([archive])을 선택합니다.
3. 디자인 보관을 선택합니다.

여러 디자인을 한 번에 보관하려면:

1. 보관할 디자인의 체크박스를 선택합니다.
2. 선택 항목 보관을 선택합니다.

디자인 관리 데이터 영속성#

• 다음의 경우 디자인 관리 데이터는 삭제되지 않습니다:
  • 프로젝트가 삭제된 경우.
  • 이슈가 삭제된 경우.

디자인 관리 데이터 복제#

디자인 관리 데이터는 복제될 수 있으며 GitLab 16.1 이상에서는 Geo에 의해 검증될 수도 있습니다.

설명을 위한 Markdown 및 서식 있는 텍스트 편집기#

히스토리

• GitLab 16.1에서 content_editor_on_issues 플래그가 있는 상태로 도입되었습니다. 기본적으로 비활성화됩니다.
• GitLab 16.2에서 GitLab.com 및 GitLab Self-Managed에서 활성화되었습니다.
• GitLab 16.5에서 기능 플래그 content_editor_on_issues 제거됨.

디자인 설명에서 Markdown 및 서식 있는 텍스트 편집기를 사용할 수 있습니다. GitLab 전체에서 댓글에 사용하는 것과 동일한 편집기입니다.

디자인 재정렬#

디자인을 새 위치로 끌어서 순서를 변경할 수 있습니다.

디자인에 댓글 추가#

업로드된 디자인에서 토론을 시작할 수 있습니다. 이를 위해:

1. 이슈로 이동합니다.
2. 디자인을 선택합니다.
3. 이미지를 선택합니다. 해당 위치에 핀이 생성되어 토론 위치를 식별합니다.
4. 메시지를 입력합니다.
5. 댓글을 선택합니다.

이미지 주위로 끌어 핀의 위치를 조정할 수 있습니다. 디자인의 레이아웃이 변경되었을 때 또는 핀을 이동하여 새 핀을 추가할 위치를 만들 때 사용합니다.

새 토론 스레드는 다른 핀 번호를 가지며, 이를 참조로 사용할 수 있습니다.

새 토론은 이슈 활동에 출력되어 관련된 모든 사람이 토론에 참여할 수 있습니다.

디자인에서 댓글 삭제#

히스토리

• GitLab 17.7에서 디자인에서 댓글을 삭제하기 위한 최소 역할이 Reporter에서 Planner로 변경되었습니다.

사전 요구 사항:

• 프로젝트에 대한 Planner, Reporter, Developer, Maintainer 또는 Owner 역할이 있어야 합니다.

디자인에서 댓글을 삭제하려면:

1. 삭제할 댓글에서 추가 작업 ⋮ > 댓글 삭제를 선택합니다.
2. 확인 대화 상자에서 댓글 삭제를 선택합니다.

디자인의 토론 스레드 해결#

디자인의 일부에 대한 토론이 완료되면 토론 스레드를 해결할 수 있습니다.

스레드를 해결됨 또는 열기로 표시하려면 다음 중 하나를 선택합니다:

• 토론의 첫 번째 댓글 오른쪽 상단 모서리에서 스레드 해결 또는 스레드 다시 열기 ([check-circle])를 선택합니다.
• 스레드에 새 댓글을 추가하고 스레드 해결 체크박스를 선택하거나 지웁니다.

토론 스레드를 해결하면 스레드 내의 노트와 관련된 보류 중인 할 일 항목도 완료로 표시됩니다. 작업을 트리거하는 사용자의 할 일 항목만 영향을 받습니다.

해결된 댓글 핀이 디자인에서 사라져 새 토론을 위한 공간이 확보됩니다. 해결된 토론을 다시 방문하려면 보이는 스레드 아래의 해결된 댓글을 확장합니다.

디자인에 할 일 항목 추가#

디자인에 할 일 항목을 추가하려면 디자인 사이드바에서 할 일 항목 추가를 선택합니다.

Markdown에서 디자인 참조#

Markdown 텍스트 상자에서 디자인을 참조할 수 있습니다. 댓글이나 설명에 디자인의 원시 URL을 붙여넣습니다. 그런 다음 짧은 참조로 표시됩니다.

예를 들어, 디자인을 다음과 같이 참조하는 경우:

See https://gitlab.com/gitlab-org/gitlab/-/issues/13195/designs/Group_view.png.

GitLab은 원시 URL을 자동으로 약식 참조로 렌더링합니다:

See #13195[Group_view.png].

이미지에 링크하는 것은 댓글이나 설명에 이미지를 임베드하는 것과 다릅니다. 이 방법으로 디자인을 임베드하는 것은 불가능합니다.

디자인 활동 기록#

디자인에 대한 사용자 활동 이벤트(생성, 삭제 및 업데이트)는 GitLab이 추적하며 사용자 프로필, 그룹 및 프로젝트 활동 페이지에 표시됩니다.

GitLab-Figma 플러그인#

GitLab-Figma 플러그인을 사용하여 Figma에서 직접 GitLab 이슈에 디자인을 업로드할 수 있습니다.

Figma에서 플러그인을 사용하려면 Figma 디렉토리에서 설치하고 개인 액세스 토큰을 통해 GitLab에 연결합니다.

자세한 내용은 플러그인 문서를 참조하세요.

문제 해결#

디자인 관리로 작업할 때 다음과 같은 문제가 발생할 수 있습니다.

디자인을 찾을 수 없습니다#

디자인을 찾을 수 없습니다라는 오류가 발생할 수 있습니다.

이 문제는 디자인이 보관되어 최신 버전에서 사용할 수 없으며, 따라가던 링크에 버전이 지정되어 있지 않을 때 발생합니다.

디자인을 보관하면 URL이 변경됩니다. 최신 버전에서 디자인을 사용할 수 없는 경우 URL에 버전이 포함된 링크로만 연결할 수 있습니다.

예를 들어, https://gitlab.example.com/mygroup/myproject/-/issues/123456/designs/menu.png?version=503554. https://gitlab.example.com/mygroup/myproject/-/issues/123456/designs/menu.png로는 더 이상 menu.png에 액세스할 수 없습니다.

해결 방법은 디자인 섹션 상단의 드롭다운 목록에서 이전 버전 중 하나를 선택하는 것입니다. 최신 버전 표시 또는 버전 #N 표시로 표시됩니다.

이슈 392540에서 이 동작 개선을 추적하고 있습니다.