디자인 관리

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

디자인 관리를 사용하면 디자인 자산(와이어프레임 및 모의 UI 포함)을 GitLab 이슈에 업로드하고 그것들을 하나의 장소에 보관할 수 있습니다. 제품 디자이너, 제품 매니저, 엔지니어들은 한 곳에서 진실의 단일 출처로 디자인에 대해 협업할 수 있습니다.

팀원들과 디자인의 모의 UI를 공유할 수 있으며, 시각적 회귀를 확인하고 해결할 수 있습니다.

비디오 개요는 디자인 관리를 참조하세요.

사전 요구 사항

  • Git 대형 파일 저장소(LFS)가 활성화되어 있어야 합니다:
    • GitLab.com의 경우 LFS가 이미 활성화되어 있습니다.
    • 자체 관리형 인스턴스의 경우, GitLab 관리자는 전역으로 LFS를 활성화해야 합니다.
    • GitLab.com 및 자체 관리형 인스턴스 모두 프로젝트 자체에 대해 LFS가 활성화되어 있어야 합니다. 전역으로 활성화된 경우 모든 프로젝트에 대해 기본적으로 LFS가 활성화됩니다. 프로젝트에서 비활성화하여도 다시 활성화해야 합니다.

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

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

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

지원되는 파일 유형

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

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

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

디자인 보기

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

사전 요구 사항:

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

디자인을 보려면:

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

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

디자인 섹션

디자인을 보는 동안 다른 디자인으로 이동할 수 있습니다. 이를 위해 다음 중 하나를 수행하세요:

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

이슈 뷰로 돌아가려면 다음 중 하나를 수행하세요:

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

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

디자인 확대

이미지를 확대하고 축소하여 디자인을 자세히 살펴볼 수 있습니다:

  • 확대 정도를 조절하려면 이미지 하단에 있는 플러스(+)와 마이너스(-)를 선택하세요.
  • 확대 수준을 재설정하려면 다시 실행 아이콘()을 선택하세요.

확대된 상태로 이미지 주변을 움직이려면 이미지를 끌어옵니다.

이슈에 디자인 추가

  • 이슈 수정 기능 도입됨: GitLab 16.1.
  • 이슈에 디자인을 추가하려면 최소한 기술자 역할에서 보고자 역할로 변경되었습니다: GitLab 16.11.

사전 요구 사항:

  • 프로젝트에 대해 최소한 보고자 역할이 있어야 합니다.
  • 업로드한 파일의 이름은 255자를 초과할 수 없습니다.

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

  1. 이슈로 이동합니다.
  2. 다음 중 하나를 수행하세요:
    • 디자인 업로드를 선택한 다음 파일 브라우저에서 이미지를 선택하세요. 한 번에 최대 10개의 파일을 선택할 수 있습니다.

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

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

      디자인 업로드를 드래그하여 놓기

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

      이렇게 이미지를 붙여넣을 경우 다음을 염두에 두세요:

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

디자인의 새 버전 추가

  • 디자인의 새 버전을 추가하려면 최소한 기술자 역할에서 보고자 역할로 변경되었습니다: GitLab 16.11.

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

사전 요구 사항:

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

이를 위해 동일한 이름으로 디자인을 추가하세요.

모든 디자인 버전을 찾으려면 디자인 섹션 상단에 있는 드롭다운 목록을 사용하세요. 최신 버전 표시 또는 버전 #N 표시로 표시됩니다.

디자인 건너뛰기

동일한 파일 이름을 가진 이미지를 업로드하고 해당 이미지가 동일한 경우, 해당 이미지는 건너뜁니다. 이는 새로운 디자인 버전이 생성되지 않음을 의미합니다. 디자인이 건너뛰어지면 경고 메시지가 표시됩니다.

디자인 보관

개별 디자인을 보관하거나 일괄적으로 일부 디자인을 선택하여 보관할 수 있습니다.

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

디자인을 보관하면 해당 디자인의 URL이 변경됩니다. 최신 버전에서 디자인을 사용할 수 없는 경우 URL에는 해당 버전만 링크할 수 있습니다.

필수 조건:

  • 해당 프로젝트의 기록자 역할 이상이어야 합니다.
  • 디자인의 최신 버전만 보관할 수 있습니다.

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

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

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

  1. 보관하려는 디자인에 대해 확인란을 선택합니다.
  2. 선택된 디자인 보관을 선택합니다.

디자인 관리 데이터 영속성

디자인 관리 데이터 복제

디자인 관리 데이터는 복제될 수 있으며 GitLab 16.1 및 이후 버전에서 Geo에 의해 확인될 수도 있습니다.

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

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

디자인 재정렬

디자인의 순서를 변경할 수 있습니다. 이를 위해 원하는 위치로 드래그하여 이동시키면 됩니다.

디자인에 코멘트 추가

업로드된 디자인에 대한 토론을 시작할 수 있습니다. 다음과 같이 진행하면 됩니다:

  1. 이슈로 이동합니다.
  2. 디자인을 선택합니다.
  3. 이미지를 클릭하거나 탭합니다. 핀이 생성되어 해당 위치가 식별되어 새 토론이 시작됩니다.
  4. 메시지를 입력합니다.
  5. 코멘트를 선택합니다.

핀의 위치를 드래그하여 조정할 수 있습니다. 디자인 레이아웃이 변경된 경우나 새로운 핀을 추가하기 위해 핀을 이동해야 하는 경우에 사용하면 됩니다.

새로운 토의 스레드는 다른 핀 번호를 받으며, 이를 통해 참조할 수 있습니다.

새로운 토론은 이슈 활동 페이지에 출력되어 관련된 모든 이해관계자가 토론에 참여할 수 있도록 됩니다.

디자인에서 코멘트 삭제

필수 조건:

  • 해당 프로젝트의 기록자 역할 이상이어야 합니다.

디자인에서 코멘트를 삭제하려면:

  1. 삭제하려는 코멘트에서 기타 작업 > 코멘트 삭제를 선택합니다.
  2. 확인 대화상자에서 코멘트 삭제를 선택합니다.

디자인 스레드에서 토의 마치기

디자인의 일부에 대한 토의가 끝났을 때 토의 스레드를 마킹할 수 있습니다.

스레드를 해결되었거나 해결되지 않았다고 표시하려면 다음 중 하나를 수행하면 됩니다:

  • 토의의 첫 번째 코멘트 오른쪽 상단에서 스레드 해결 또는 스레드 해제 (check circle)를 선택합니다.
  • 스레드에 새로운 코멘트를 추가하고 스레드 해결 확인란을 선택하거나 선택해제합니다.

토의 스레드를 해결하면 스레드 내부의 노트와 관련된 보류중인 할 일 항목도 완료된 것으로 표시됩니다. 이 작업을 트리거한 사용자의 할 일 항목에만 영향을 미칩니다.

해결된 코멘트 핀은 새로운 토론을 위해 디자인에서 사라집니다. 해결된 토론을 다시 방문하려면, 보여지는 스레드 아래 해결된 코멘트를 확장하여 확인하면 됩니다.

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

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

Markdown에서 디자인 참조

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

예를 들어, 만약 어딘가에서 디자인을 참조한다면: 

https://gitlab.com/gitlab-org/gitlab/-/issues/13195/designs/Group_view.png을(를) 참조하세요.

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

#13195[Group_view.png]을(를) 참조하세요.

디자인 활동 레코드

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

GitLab-Figma 플러그인

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

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

더 많은 정보는 플러그인 문서를 참조하세요.

문제 해결

디자인 관리를 사용할 때 다음과 같은 문제가 발생할 수 있습니다.

디자인을 찾을 수 없음

‘디자인을 찾을 수 없음’이라는 오류가 표시될 수 있습니다.

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

디자인을 보관하면 URL이 변경됩니다. 디자인이 최신 버전에서 사용할 수 없으면 URL의 버전만을 통해 연결할 수 있습니다.

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

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

이 문제에 대한 향상을 추적하는 392540 번 이슈를 확인하세요 392540.