디자인 관리

Tier: Free, Premium, Ultimate Offering: GitLab.com, Self-managed, GitLab Dedicated

디자인 관리를 통해 디자인 자산(와이어프레임 및 목업 포함)을 GitLab 이슈에 업로드하고 단일 장소에 저장할 수 있습니다. 제품 디자이너, 제품 관리자 및 엔지니어가 단일 진실 출처를 통해 디자인에 협업할 수 있습니다.

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


비디오 개요는 디자인 관리에서 확인하세요.

필수 조건

디자인은 LFS 객체로 저장됩니다.

이미지 썸네일은 다른 업로드로 저장되며, 프로젝트와는 관련이 없고 특정 디자인 모델과 관련이 있습니다.

GitLab 관리자는 관리 영역 > 프로젝트로 이동하여 해시 저장된 프로젝트의 상대 경로를 확인할 수 있습니다.
상대 경로 필드는 값에 @hashed를 포함합니다.

요구 사항을 충족하지 않으면 디자인 섹션에서 알림을 받게 됩니다.

지원되는 파일 형식

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

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

PDF 파일에 대한 지원은 이슈 32811에서 추적됩니다.

디자인 보기

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

필수 조건:

  • 프로젝트에 대해 최소한 게스트 역할이 있어야 합니다.

디자인을 보려면:

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

선택한 디자인이 열립니다. 이후 확대하거나 댓글을 추가할 수 있습니다.

디자인 섹션

디자인을 보고 있을 때 다른 디자인으로 이동할 수 있습니다. 그렇게 하려면:

  • 오른쪽 상단 모서리에서 이전 디자인으로 이동 ( ) 또는 다음 디자인으로 이동 ( )을 선택합니다.
  • 키보드에서 Left 또는 Right를 누릅니다.

이슈 보기로 돌아가려면:

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

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

디자인 확대

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

  • 확대 비율을 조절하려면 이미지 하단의 더하기(+)와 빼기(-)를 선택합니다.

  • 확대 비율을 재설정하려면 redo 아이콘( )을 선택합니다.

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

문제에 디자인 추가

  • 설명 편집 기능이 도입됨 (GitLab 16.1에서).
  • 문제에 디자인을 추가하기 위한 최소 역할이 변경됨 (GitLab 16.11에서 Developer에서 Reporter로).

필수 조건:

  • 프로젝트에 대해 최소 Reporter 역할이 필요합니다.
  • 업로드된 파일의 이름은 255자를 초과할 수 없습니다.

문제에 디자인을 추가하려면:

  1. 문제로 이동합니다.
  2. 다음 중 하나를 선택합니다:
    • 디자인 업로드를 선택한 후 파일 탐색기에서 이미지를 선택합니다. 한 번에 최대 10개의 파일을 선택할 수 있습니다.

    • 업로드 클릭을 선택한 후 파일 탐색기에서 이미지를 선택합니다. 한 번에 최대 10개의 파일을 선택할 수 있습니다.

    • 파일 탐색기에서 파일을 드래그하여 디자인 섹션의 드롭존에 놓습니다.

      드래그 앤 드롭 디자인 업로드

    • 스크린샷을 찍거나 로컬 이미지 파일을 클립보드에 복사 후, 드롭존 위에 커서를 올리고 Control 또는 Cmd + V를 눌러 붙여넣기합니다.

      이렇게 이미지를 붙여넣을 때 다음 사항을 염두에 두세요:

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

디자인의 새 버전 추가

  • 디자인의 새 버전을 추가하기 위한 최소 역할이 변경됨 (GitLab 16.11에서 Developer에서 Reporter로).

디자인에 대한 논의가 계속될 때, 디자인의 새 버전을 업로드할 수 있습니다.

필수 조건:

  • 프로젝트에 대해 최소 Reporter 역할이 필요합니다.

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

모든 디자인 버전을 탐색하려면 디자인 섹션 상단의 드롭다운 목록을 사용합니다.

최신 버전을 표시하거나 버전 #N 표시로 나타납니다.

생략된 디자인

기존에 업로드된 디자인과 동일한 파일 이름을 가진 이미지를 업로드하면 및 그것이 동일한 경우에는 생략됩니다.

이는 새로운 디자인 버전이 생성되지 않음을 의미합니다. 디자인이 생략되면 경고 메시지가 표시됩니다.

디자인 보관

  • 디자인을 보관하기 위한 최소 역할이 변경됨 (GitLab 16.11에서 Developer에서 Reporter로).

개별 디자인을 보관하거나 동시에 몇 개를 선택하여 보관할 수 있습니다.

보관된 디자인은 영구적으로 사라지지 않습니다.

이전 버전을 탐색할 수 있습니다.

디자인을 보관하면 URL이 변경됩니다.

최신 버전에서 디자인을 사용할 수 없는 경우, URL의 버전과만 연결할 수 있습니다.

필수 조건:

  • 프로젝트에 대해 최소 Reporter 역할이 필요합니다.
  • 디자인의 최신 버전만 보관할 수 있습니다.

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

  1. 디자인을 선택하여 확대하여 봅니다.
  2. 오른쪽 상단에서 디자인 보관 ( )를 선택합니다.
  3. 디자인 보관을 선택합니다.

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

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

디자인 관리 데이터 지속성

디자인 관리 데이터 복제

디자인 관리 데이터는 복제할 수 있습니다 그리고 GitLab 16.1 이상에서는 Geo를 통해 검증할 수 있습니다.

설명을 위한 Markdown 및 리치 텍스트 편집기

디자인 설명에서 Markdown 및 리치 텍스트 편집기를 사용할 수 있습니다.

이것은 GitLab 전반에서 댓글에 사용하는 것과 동일한 편집기입니다.

디자인 재배치

디자인의 순서를 바꾸려면 이를 끌어다 놓아 새로운 위치로 이동할 수 있습니다.

디자인에 댓글 추가

업로드된 디자인에 대해 토론을 시작할 수 있습니다. 그렇게 하려면:

  1. 이슈로 이동합니다.
  2. 디자인을 선택합니다.
  3. 이미지를 클릭하거나 탭합니다. 해당 위치에 토론의 위치를 식별하는 핀이 생성됩니다.
  4. 메시지를 입력합니다.
  5. 댓글 추가를 선택합니다.

핀의 위치는 이미지를 끌어다 놓아 조정할 수 있습니다.

디자인 레이아웃이 변경되었거나 새로운 핀을 추가할 수 있는 위치에 핀을 이동해야 할 때 사용합니다.

새로운 토론 스레드는 서로 다른 핀 번호를 갖게 되며, 이 번호를 사용하여 참조할 수 있습니다.

새로운 토론은 이슈 활동에 출력되며, 관련된 모든 사용자가 토론에 참여할 수 있습니다.

디자인에서 댓글 삭제

전제 조건:

  • 프로젝트에 대해 최소한 Reporter 역할을 가져야 합니다.

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

  1. 삭제하려는 댓글에서 더 많은 작업 > 댓글 삭제를 선택합니다.
  2. 확인 대화 상자에서 댓글 삭제를 선택합니다.

디자인의 토론 스레드 해결

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

스레드를 해결 또는 미해결로 표시하려면:

  • 토론의 첫 번째 댓글 오른쪽 상단에서 스레드 해결 또는 미해결 스레드 ( )를 선택합니다.
  • 스레드에 새 댓글을 추가하고 스레드 해결 체크박스를 선택하거나 해제합니다.

토론 스레드를 해결하면 해당 스레드 내 노트와 관련된 모든 대기 중인 할 일 항목이 완료로 표시됩니다.

작업을 트리거한 사용자에게만 해당하는 할 일 항목만 영향을 받습니다.

해결된 댓글 핀은 새로운 토론을 위해 디자인에서 사라집니다.

해결된 토론을 다시 방문하려면 보이는 스레드 아래에서 해결된 댓글을 확장하십시오.

디자인을 위한 할 일 항목 추가

디자인을 위한 할 일 항목을 추가하려면 디자인 사이드바에서 할 일 추가를 선택하세요.

Markdown에서 디자인 참조하기

GitLab의 Markdown 텍스트 상자, 예를 들어 주석이나 설명에서 디자인을 참조하려면 URL을 붙여넣습니다. 그러면 짧은 참조로 표시됩니다.

예를 들어, 다음과 같이 디자인을 참조할 수 있습니다:

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

다음과 같이 렌더링됩니다:

See #13195[Group_view.png].

디자인 활동 기록

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

GitLab-Figma 플러그인

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

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

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

문제 해결

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

디자인을 찾을 수 없음

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에 접근할 수 없습니다.

우회 방법은 디자인 섹션 상단의 드롭다운 목록에서 이전 버전 중 하나를 선택하는 것입니다.

이는 최신 버전 표시 또는 버전 #N 표시로 나타나게 됩니다.

문제 392540는 이 동작 개선을 추적합니다.