디자인 관리

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

디자인 관리를 사용하면 GitLab 이슈에 디자인 자산(와이어프레임 및 모킹 등)을 업로드하여 하나의 장소에 저장할 수 있습니다. 제품 디자이너, 제품 매니저, 엔지니어는 하나의 진실된 정보 원천에서 디자인에 대해 협업할 수 있습니다.

팀원들과 디자인의 모킹을 공유할 수도 있고, 시각적 회귀를 확인하고 처리할 수도 있습니다.

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

요구 사항

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

    디자인은 LFS 객체로 저장됩니다. 이미지 썸네일은 다른 업로드로 저장되며 프로젝트와 관계가 없으며 특정 디자인 모델과 연관되어 있습니다.

    새로 생성된 프로젝트는 기본적으로 해시 리포지터리를 사용합니다.

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

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

지원되는 파일 유형

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

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

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

알려진 문제점

디자인 보기

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

필수 사항:

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

디자인을 보려면:

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

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

디자인 섹션

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

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

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

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

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

디자인에서 확대

이미지를 더 자세히 살펴보려면 이미지를 확대하고 축소할 수 있습니다:

  • 줌의 양을 제어하려면 이미지 하단의 플러스(+)와 마이너스(-)를 선택합니다.
  • 줌 수준을 재설정하려면 다시 실행 아이콘()을 선택합니다.

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

이슈에 디자인 추가

필수 사항:

  • 프로젝트의 최소한 리포터 역할이 있어야 합니다.
  • 업로드된 파일의 이름은 255자를 넘지 않아야 합니다.

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

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

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

      디자인 업로드를 끌어다 놓기

    • 스크린샷을 찍거나 로컬 이미지 파일을 클립보드에 복사하여 커서를 디자인 섹션의 드롭 영역 위로 올리고 Control 또는 Cmd + V를 누릅니다.

      이러한 방식으로 이미지를 붙여넣을 때 다음 사항을 유의하세요:

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

디자인의 새 버전 추가

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

필수 사항:

  • 프로젝트의 최소한 리포터 역할이 있어야 합니다.

이를 수행하려면 동일한 이름의 디자인을 추가하십시오.

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

스킵된 디자인

기존 업로드된 디자인과 동일한 파일 이름의 이미지를 업로드하고 그 이미지가 동일한 경우, 해당 디자인은 건너뜁니다. 이는 즉, 새로운 버전의 디자인이 생성되지 않음을 의미합니다. 디자인이 스킵되면 경고 메시지가 표시됩니다.

디자인 보관

개별 디자인을 보관하거나 여러 개를 한꺼번에 보관할 수 있습니다.

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

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

필수 사항:

  • 프로젝트의 최소한 리포터 역할이 있어야 합니다.
  • 가장 최신 버전의 디자인만 보관할 수 있습니다.

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

  1. 원하는 디자인을 선택하여 확대된 형태로 표시합니다.
  2. 오른쪽 상단에서 디자인 보관()을 선택합니다.
  3. 선택한 디자인 보관을 선택합니다.

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

  1. 보관하려는 디자인의 확인란을 선택합니다.
  2. 선택한 것 보관을 선택합니다.

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

- GitLab 16.1에 도입되었습니다. 기본적으로 비활성화된 content_editor_on_issues라는 플래그로. - GitLab 16.2에서 GitLab.com 및 자체 호스팅에 활성화되었습니다. - GitLab 16.5에서 피처 플래그 content_editor_on_issues가 삭제되었습니다.

디자인 설명에는 Markdown 및 리치 텍스트 편집기를 사용할 수 있습니다. 이는 GitLab 전반에 걸쳐 댓글에 사용하는 편집기와 동일합니다.

디자인 재정렬

디자인의 순서를 바꿀 수 있습니다. 원하는 위치로 드래그하여 순서를 변경하면 됩니다.

디자인에 코멘트 추가

업로드된 디자인에 대해 논의를 시작할 수 있습니다. 다음과 같이 진행하면 됩니다:

  1. 이슈로 이동합니다.
  2. 디자인을 선택합니다.
  3. 이미지를 클릭하거나 탭합니다. 그 곳에 핀이 생성되어, 논의의 위치가 식별됩니다.
  4. 메시지를 입력합니다.
  5. 코멘트를 선택합니다.

핀의 위치를 변경하여 레이아웃이 변경된 디자인의 경우, 또는 새로운 핀을 추가하기 위해 핀을 이동하려는 경우에 이 기능을 사용합니다.

새로운 논의 스레드는 다른 핀 번호가 지정되며, 해당 위치를 참조하는 데 사용할 수 있습니다.

새로운 논의는 이슈 활동에 출력되어, 관련된 모든 사용자가 논의에 참여할 수 있게 됩니다.

디자인의 코멘트 삭제

- GitLab 15.9에서 도입되었습니다.

전제 조건:

  • 프로젝트에 대한 적어도 리포터(Role) 역할이 있어여 합니다.

디자인으로부터 코멘트를 삭제하려면:

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

디자인에 있는 논의 스레드 해결

디자인의 일부를 논의한 후에는 논의 스레드를 해결할 수 있습니다.

스레드를 해결 또는 해제하려면 다음 중 하나를 수행합니다:

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

논의 스레드를 해결하면, 스레드 내의 노트와 관련된 대기중인 할 일 항목도 완료로 표시됩니다. 이 작업을 트리거하는 사용자의 할 일 항목에만 영향을 미칩니다.

해결된 코멘트 핀은 새로운 논의를 위해 공간을 확보하기 위해 디자인에서 사라집니다. 해결된 논의를 다시 확인하려면, 표시된 스레드 아래에 있는 해결된 코멘트를 확장하세요.

디자인에 대한 할 일 항목 추가

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

Markdown에서 디자인 참조

GitLab의 Markdown 텍스트 상자에서 디자인을 참조하려면 예를 들어 코멘트나 설명 내에서 해당 URL을 붙여넣으면 간단한 참조로 표시됩니다.

예를 들어, 다음과 같이 어딘가에서 디자인을 참조하면:

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

다음처럼 표시됩니다:

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

디자인 활동 레코드

디자인에 대한 사용자 활동 이벤트(생성, 삭제 및 업데이트)는 GitLab에서 추적되어 user profile, group, project 활동 페이지에 표시됩니다.

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 이슈를 제공합니다.