디자인 관리

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

디자인 관리를 사용하면 디자인 에셋(와이어프레임 및 모형)을 GitLab 이슈에 업로드하고 하나의 위치에 보관할 수 있습니다. 제품 디자이너, 제품 매니저, 엔지니어들은 하나의 진실된 소스로 디자인에 대해 협업할 수 있습니다.

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

비디오 개요를 보려면 디자인 관리 (GitLab 12.2)를 참조하세요.

요구 사항

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

    디자인은 LFS 개체로 저장됩니다. 이미지 썸네일은 다른 업로드로 저장되며 특정 디자인 모델과 관련이 없지만 프로젝트 대신에 저장됩니다.

    새롭게 생성된 프로젝트는 기본적으로 해시로 저장됩니다.

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

요구 사항을 만족하지 못하면 디자인 섹션에서 알림을 받습니다.

지원되는 파일 유형

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

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

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

알려진 문제점

디자인 보기

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

필수 사항:

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

디자인 보기:

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

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

디자인 섹션

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

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

이슈 보기로 돌아가려면 다음 중 하나를 수행할 수 있습니다:

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

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

디자인 확대

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

  • 확대 정도를 제어하려면 이미지 하단의 플러스 (+) 및 마이너스 (-)를 선택합니다.
  • 줌 레벨을 재설정하려면 반복 아이콘()을 선택합니다.

줌된 상태에서 이미지를 움직이려면 이미지를 드래그합니다.

이슈에 디자인 추가

  • GitLab 16.1에서 소개된 설명 편집 능력.

필수 사항:

  • 프로젝트에 대해 최소한 Developer 역할을 가져야 합니다.
  • 업로드된 파일의 이름은 255자를 넘을 수 없습니다.

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

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

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

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

    • 화면 캡처를 찍거나 로컬 이미지 파일을 클립보드에 복사하고, 마우스 커서를 드롭 영역 위로 가져가서, Ctrl 또는 Cmd + V를 누릅니다.

      이런 식으로 붙여넣기할 때 다음 사항을 유념하세요:

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

새로운 디자인 버전 추가

디자인에 대한 토론이 계속될 때 새로운 디자인 버전을 업로드하고 싶을 수 있습니다.

사전 요구 사항:

  • 해당 프로젝트에 대해 적어도 개발자 역할이 있어야 합니다.

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

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

건너뛴 디자인

이미지를 업로드할 때 동일한 이름의 기존 업로드된 디자인이 있고 그것이 동일한 경우, 그것은 건너뜁니다. 이는 새로운 디자인 버전이 생성되지 않음을 의미합니다. 디자인이 건너뛰어진 경우 경고 메시지가 표시됩니다.

디자인 아카이브

개별 디자인을 아카이브하거나 일부 디자인을 한번에 아카이브할 수 있습니다.

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

디자인을 아카이브하면 해당 URL이 변경됩니다. 디자인이 최신 버전에서 사용할 수 없는 경우 해당 URL에만 버전으로 링크를 걸 수 있습니다.

사전 요구 사항: - 해당 프로젝트에 대해 적어도 개발자 역할이 있어야 합니다. - 하나의 디자인의 최신 버전만 아카이브할 수 있습니다.

단일 디자인을 아카이브하려면:

  1. 디자인을 확대하여 보세요.
  2. 오른쪽 상단에서 디자인 아카이브()를 선택하세요.
  3. 디자인 아카이브를 선택하세요.

여러 디자인을 한번에 아카이브하려면:

  1. 아카이브하려는 디자인의 확인란을 선택하세요.
  2. 선택한 디자인 아카이브를 선택하세요.

설명을 위한 마크다운 및 리치 텍스트 에디터

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

디자인 설명에서 마크다운 및 리치 텍스트 에디터를 사용할 수 있습니다. 이는 GitLab 전반에서의 코멘트에 사용하는 동일한 편집기입니다.

디자인 재정렬

디자인의 순서를 변경하여 새 위치로 끌어서 놓음으로써 순서를 변경할 수 있습니다.

디자인에 코멘트 추가

업로드된 디자인에 토론을 시작할 수 있습니다. 다음을 수행하려면:

  1. 이슈로 이동하세요.
  2. 디자인을 선택하세요.
  3. 이미지를 클릭하거나 탭하세요. 핀이 만들어지며 토론의 위치가 식별됩니다.
  4. 메시지를 입력하세요.
  5. 코멘트를 선택하세요.

디자인의 레이아웃이 변경된 경우 또는 핀을 이동하여 해당 자리에 새로운 핀을 추가하려는 경우 핀의 위치를 조정할 수 있습니다.

새로운 토론 쓰레드에는 서로 다른 핀 번호가 지정되며, 이를 사용하여 해당 쓰레드를 참조할 수 있습니다.

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

디자인에서 코멘트 삭제

사전 요구 사항: - 해당 프로젝트에 대해 적어도 보고자 역할이 있어야 합니다.

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

  1. 삭제하려는 코멘트에서 더 많은 작업 를 선택하세요.
  2. 확인 대화 상자에서 코멘트 삭제를 선택하세요.

디자인에서 토론 쓰레드 해결

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

쓰레드를 해결하거나 해결을 취소하려면:

  • 토론의 첫 번째 코멘트 오른쪽 상단에서 쓰레드 해결 또는 쓰레드 취소()를 선택하세요.
  • 쓰레드에 새 코멘트를 추가하고 쓰레드 해결 확인란을 선택하거나 선택을 해제하세요.

토론 쓰레드를 해결하면 해당 쓰레드 내부의 노트에 대한 보류중인 할 일 (to-do) 항목도 완료로 표시됩니다. 작업을 트리거하는 사용자의 할 일 항목에만 영향을 미칩니다.

해결된 코멘트 핀은 새 토론을 위해 공간을 확보하기 위해 디자인에서 사라집니다. 해결된 토론을 다시 방문하려면 가시적인 쓰레드 아래의 해결된 코멘트를 확장하세요.

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

디자인에 할 일 (to-do) 항목을 추가하려면 디자인 사이드바에서 할 일 추가하기를 선택하세요.

마크다운에서 디자인 참조

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

예를 들어, 어딘가에서 디자인을 참조하면:

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

이렇게 렌더링됩니다:

#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. 이제 menu.pnghttps://gitlab.example.com/mygroup/myproject/-/issues/123456/designs/menu.png로 더 이상 액세스할 수 없습니다.

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

문제 392540에서 이 동작을 개선하고 있습니다.