Design Management를 사용하면 와이어프레임과 목업을 포함한 디자인 자산을 GitLab 이슈에 업로드해 한곳에 보관할 수 있습니다. 제품 디자이너, 제품 관리자, 엔지니어가 단일 진실 공급원(Single Source Of Truth, SSOT)을 기준으로 디자인을 함께 다룰 수 있습니다.

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

동영상 개요는 Design Management를 참고합니다.

사전 요구 사항#

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

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

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

  GitLab 관리자는 Admin > Projects로 이동한 다음 해당 프로젝트를 선택해 해시 저장 방식 프로젝트의 상대 경로를 확인할 수 있습니다. Relative path 필드의 값에 @hashed가 포함되어 있습니다.

요구 사항이 충족되지 않으면 Designs 섹션에 안내가 표시됩니다.

지원되는 파일 형식#

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

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

PDF 파일 지원은 이슈 32811에서 추적하고 있습니다.

디자인 보기#

Designs 섹션은 이슈 설명에 있습니다.

사전 요구 사항:

• 프로젝트에 대한 Guest, Planner, Reporter, Developer, Maintainer, Owner 권한 중 하나가 있어야 합니다.

디자인을 보려면 다음 단계를 수행합니다.

1. 이슈로 이동합니다.
2. Designs 섹션에서 보려는 디자인 이미지를 선택합니다.

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

디자인을 보는 중에 다른 디자인으로 이동할 수 있습니다. 방법은 다음 두 가지입니다.

• 오른쪽 상단에서 Go to previous design ([chevron-lg-left]) 또는 Go to next design ([chevron-lg-right])를 선택합니다.
• 키보드에서 Left 또는 Right를 누릅니다.

이슈 화면으로 돌아가는 방법은 다음 두 가지입니다.

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

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

디자인 확대#

이미지를 확대하거나 축소해 디자인을 더 자세히 살펴볼 수 있습니다.

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

확대한 상태에서 이미지를 이동하려면 이미지를 드래그합니다.

액세스 토큰으로 디자인 이미지 다운로드#

히스토리

• GitLab 19.3에서 도입되었습니다.

브라우저 세션을 사용할 수 없는 모바일 앱, 통합, 익스포터 같은 API 클라이언트에서 액세스 토큰을 사용해 디자인 이미지를 내려받습니다.

사전 요구 사항:

• 다음 토큰 중 하나가 있어야 합니다.
  • api 또는 read_api 스코프를 가진 개인 액세스 토큰 또는 OAuth 2.0 토큰.
  • 프로젝트에 대한 Work Item: Read 권한을 가진 세분화된 개인 액세스 토큰.
• 디자인을 볼 권한이 있어야 합니다.

프로젝트 액세스 토큰, 그룹 액세스 토큰, 서비스 계정 토큰으로는 디자인 이미지를 내려받을 수 없습니다.

디자인 이미지를 내려받으려면 다음 단계를 수행합니다.

1. GraphQL API에서 이미지 URL을 가져옵니다. 432x230 픽셀 이하의 미리 보기가 필요하다면 image 대신 imageV432x230 필드를 사용합니다.

   query {
     project(fullPath: "my-group/my-project") {
       issue(iid: "1") {
         designCollection {
           designs {
             nodes {
               filename
               image
             }
           }
         }
       }
     }
   }
   

2. 이미지 URL을 요청하면서 PRIVATE-TOKEN 헤더에 토큰을 전달합니다.

   curl --output design.png --header "PRIVATE-TOKEN: <your_access_token>" "<image_url>"
   

   OAuth 2.0 토큰이라면 Authorization: Bearer <oauth_token> 헤더를 대신 사용합니다. 토큰은 요청 헤더로 보내야 합니다. private_token 같은 쿼리 문자열 파라미터의 토큰은 허용되지 않습니다.

이슈에 디자인 추가#

히스토리

• GitLab 17.7에서 이슈에 디자인을 추가하는 데 필요한 최소 권한이 Reporter에서 Planner로 변경되었습니다.

사전 요구 사항:

• 프로젝트에 대한 Planner, Reporter, Developer, Maintainer, Owner 권한 중 하나가 있어야 합니다.
• 업로드하는 파일의 이름은 255자를 넘지 않아야 합니다.

이슈에 디자인을 추가하려면 다음 단계를 수행합니다.

1. 이슈로 이동합니다.
2. 다음 중 하나를 수행합니다.

   • Upload designs를 선택한 다음 파일 브라우저에서 이미지를 선택합니다. 한 번에 최대 10개 파일을 선택할 수 있습니다.

   • click to upload를 선택한 다음 파일 브라우저에서 이미지를 선택합니다. 한 번에 최대 10개 파일을 선택할 수 있습니다.

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

     

   • 화면을 캡처하거나 로컬 이미지 파일을 클립보드에 복사한 다음, 드롭 영역 위에 커서를 올리고 Control 또는 Command+V를 누릅니다.

     이 방식으로 이미지를 붙여 넣을 때는 다음을 유의합니다.

     • 한 번에 이미지 하나만 붙여 넣을 수 있습니다. 복사한 파일을 여러 개 붙여 넣으면 첫 번째 파일만 업로드됩니다.
     • 화면 캡처를 붙여 넣으면 이미지가 PNG 파일로 추가되며 생성되는 이름은 다음과 같습니다. design_<timestamp>.png
     • Internet Explorer에서는 지원되지 않습니다.

디자인의 새 버전 추가#

히스토리

• GitLab 17.7에서 디자인의 새 버전을 추가하는 데 필요한 최소 권한이 Reporter에서 Planner로 변경되었습니다.

디자인에 대한 논의가 이어지면서 디자인의 새 버전을 업로드해야 할 수 있습니다.

사전 요구 사항:

• 프로젝트에 대한 Planner, Reporter, Developer, Maintainer, Owner 권한 중 하나가 있어야 합니다.

새 버전을 추가하려면 같은 파일 이름으로 디자인을 추가합니다.

모든 디자인 버전을 살펴보려면 Designs 섹션 상단의 드롭다운 목록을 사용합니다. 이 목록은 Showing latest version 또는 Showing version #N으로 표시됩니다.

건너뛴 디자인#

기존에 업로드한 디자인과 파일 이름이 같고 내용도 동일한 이미지를 업로드하면 해당 업로드는 건너뜁니다. 즉, 디자인의 새 버전이 생성되지 않습니다. 디자인을 건너뛰면 경고 메시지가 표시됩니다.

디자인 보관#

히스토리

• GitLab 17.7에서 디자인을 보관하는 데 필요한 최소 권한이 Reporter에서 Planner로 변경되었습니다.

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

보관한 디자인이 영구히 사라지는 것은 아닙니다. 이전 버전을 확인할 수 있습니다.

디자인을 보관하면 해당 디자인의 URL 이 바뀝니다. 최신 버전에 그 디자인이 없다면 URL에 버전을 포함해야만 링크할 수 있습니다.

사전 요구 사항:

• 프로젝트에 대한 Planner, Reporter, Developer, Maintainer, Owner 권한 중 하나가 있어야 합니다.
• 디자인의 최신 버전만 보관할 수 있습니다.

디자인 하나를 보관하려면 다음 단계를 수행합니다.

1. 디자인을 선택해 크게 봅니다.
2. 오른쪽 상단에서 Archive design ([archive])를 선택합니다.
3. Archive designs를 선택합니다.

여러 디자인을 한 번에 보관하려면 다음 단계를 수행합니다.

1. 보관하려는 디자인의 체크박스를 선택합니다.
2. Archive selected를 선택합니다.

Design Management 데이터 보존#

• 다음 경우에도 Design Management 데이터는 삭제되지 않습니다.
  • 프로젝트가 삭제된 경우.
  • 이슈가 삭제된 경우.

Design Management 데이터 복제#

Design Management 데이터는 Geo로 복제하고 검증할 수 있습니다. 자세한 내용은 이슈 355660을 참고합니다.

설명용 마크다운 및 리치 텍스트 편집기#

디자인 설명에서 마크다운과 리치 텍스트 편집기를 사용할 수 있습니다. GitLab 전반의 댓글에서 사용하는 것과 같은 편집기입니다.

디자인 순서 변경#

디자인을 새 위치로 끌어다 놓아 순서를 바꿀 수 있습니다.

디자인에 댓글 추가#

업로드한 디자인에서 토론을 시작할 수 있습니다. 방법은 다음과 같습니다.

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

핀은 이미지 위에서 끌어 위치를 조정할 수 있습니다. 디자인 레이아웃이 바뀌었을 때나, 그 자리에 새 핀을 추가하려고 기존 핀을 옮길 때 사용합니다.

새 토론 스레드에는 서로 다른 핀 번호가 부여되며, 이 번호로 스레드를 가리킬 수 있습니다.

새 토론은 이슈 활동에 표시되므로 관련된 모든 사람이 토론에 참여할 수 있습니다.

디자인에서 댓글 삭제#

히스토리

• GitLab 17.7에서 디자인의 댓글을 삭제하는 데 필요한 최소 권한이 Reporter에서 Planner로 변경되었습니다.

사전 요구 사항:

• 프로젝트에 대한 Planner, Reporter, Developer, Maintainer, Owner 권한 중 하나가 있어야 합니다.

디자인에서 댓글을 삭제하려면 다음 단계를 수행합니다.

1. 삭제하려는 댓글에서 More actions ⋮ > Delete comment를 선택합니다.
2. 확인 대화 상자에서 Delete comment를 선택합니다.

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

디자인의 특정 부분에 대한 논의가 끝나면 해당 토론 스레드를 해결할 수 있습니다.

스레드를 해결 또는 열림으로 표시하는 방법은 다음 두 가지입니다.

• 토론 첫 댓글의 오른쪽 상단에서 Resolve thread 또는 Reopen thread ([check-circle])를 선택합니다.
• 스레드에 새 댓글을 추가하면서 Resolve thread 체크박스를 선택하거나 해제합니다.

토론 스레드를 해결하면 그 스레드의 노트와 관련된 대기 중인 할 일 항목도 완료로 표시됩니다. 이 동작을 실행한 사용자의 할 일 항목만 영향을 받습니다.

해결한 댓글의 핀은 새 토론을 위한 공간을 확보하기 위해 디자인에서 사라집니다. 해결된 토론을 다시 보려면 표시된 스레드 아래의 Resolved Comments를 확장합니다.

디자인에 할 일 항목 추가#

디자인에 할 일 항목을 추가하려면 디자인 사이드바에서 Add a to-do item을 선택합니다.

마크다운에서 디자인 참조#

마크다운 텍스트 상자에서 디자인을 참조할 수 있습니다. 댓글이나 설명에 디자인의 원본 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에 연결합니다.

자세한 내용은 플러그인 문서를 참고합니다.

문제 해결#

Design Management를 사용할 때 다음과 같은 문제가 발생할 수 있습니다.

디자인을 찾을 수 없음#

Could not find design이라는 오류가 표시될 수 있습니다.

이 문제는 디자인이 보관되어 최신 버전에 존재하지 않는데, 따라간 링크에 버전이 지정되지 않은 경우에 발생합니다.

디자인을 보관하면 해당 디자인의 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에 접근할 수 없습니다.

해결 방법은 Designs 섹션 상단의 드롭다운 목록에서 이전 버전 중 하나를 선택하는 것입니다. 이 목록은 Showing latest version 또는 Showing version #N으로 표시됩니다.

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