XD에서 Creative Cloud Libraries를 사용하여 작업

Creative Cloud Libraries를 사용하여 XD에서 디자인 시스템을 제작하고 공유하는 방법에 대해 알아보고자 하십니까? 바로 여기에서 배울 수 있습니다!

Creative Cloud Libraries를 사용하면 팀이 디자인 및 브랜드 시스템 에셋을 한 곳에서 관리하고 규모에 맞춰 배포할 수 있습니다.

먼저 XD 클라우드 문서에서 디자인 및 브랜드 시스템을 구성하는 구성 요소와 스타일 세트로 스티커 시트를 선별하여 시작합니다. 재사용 가능한 에셋을 더 광범위한 팀과 공유할 준비가 되면 적절한 세트의 권한을 사용하여 스티커 시트 클라우드 문서를 라이브러리로 게시하고 팀을 초대합니다.

팀이 라이브러리 초대를 수락하면 해당 라이브러리의 에셋을 재사용할 수 있으며 향후 모든 라이브러리 업데이트와 동기화할 수 있습니다.

Creative Cloud Libraries를 사용해야 하는 이유

디자인 라이브러리의 소유자인 Natalia를 만나보십시오.

natalia_persona

“디자인 라이브러리의 소유자로서 디자인 에셋과 구성 요소를 라이브러리에 게시하고 다른 사용자가 디자인 시스템 라이브러리를 사용할 수 있도록 초대하고 싶습니다.”

디자인 라이브러리의 소비자인 Pedro를 만나보십시오.

pedro_persona

“디자인 라이브러리의 소비자로서 공유 에셋을 원활하게 재사용하고 Natalia가 에셋을 수정할 때 알림을 받고 싶습니다.”

여러분의 상황과 비슷합니까? 모든 에셋 및 구성 요소를 라이브러리에 게시하고 XD에서 디자인 시스템를 사용할 수 있도록 다른 사람을 초대하려는 경우 다음 내용이 충분히 도움이 될 것입니다! 

진행하기에 앞서

Adobe XD를 처음 사용하십니까?

무료 체험판 앱 다운로드

앱 기본 사항 알아보기

XD를 이미 사용하고 있습니까?

앱 업데이트

새로운 기능 살펴보기

직접 사용해 보기

샘플 파일 다운로드

.xdc 파일, 604KB

XD에서 다음 개념을 익히십시오.

라이브러리 게시 및 공유

라이브러리를 통해 디자인 시스템을 구축하고 배포하려면 우선 문서 에셋 패널에서 디자인 시스템 에셋(색상, 문자 스타일 및 구성 요소)을 선별합니다.

디자인 시스템 에셋을 정의한 후에는 아래 단계에 따라 해당 에셋을 라이브러리로 게시하고 팀과 공유하여 모든 Adobe XD 및 기타 Creative Cloud 애플리케이션에서 일관되게 재사용할 수 있습니다.

라이브러리 게시

게시
라이브러리 게시

라이브러리 패널로 이동합니다. 도구 모음에서 아이콘을 클릭하여 문서 에셋 보기를 실행합니다. 

라이브러리로 게시 아이콘을 클릭하여 라이브러리 관리자를 실행합니다. 라이브러리 관리자에서 게시를 클릭하여 문서 에셋 패널에 정의된 에셋으로 새 라이브러리를 만듭니다.

라이브러리 공유

라이브러리 공유
라이브러리 관리자에서 라이브러리 공유

  • 공유하여 초대를 선택하여 팀과 라이브러리를 배포하도록 초대합니다.
  • 공동 작업 중인 팀 구성원에 대해 편집 가능 설정을 통해 라이브러리 콘텐츠를 수정할 수 있고 보기를 통해 라이브러리의 읽기 전용 버전을 사용할 수 있습니다. 

팀원을 초대하면 이메일 또는 Creative Cloud 데스크탑 애플리케이션을 통해 라이브러리 초대를 수락하라는 메시지가 표시됩니다.

모범 사례

  • 라이브러리 공동 작업자가 게시된 소스 클라우드 문서에 액세스하도록 하려면 클라우드 문서에 이들을 초대해야 합니다. 

  • 게시된 라이브러리를 유지 관리하고 업데이트할 팀원이 여러 명인 경우 클라우드 문서 및 게시된 라이브러리에 편집 가능 권한을 부여해야 합니다.

주의해야 할 사항

  • 처음으로 라이브러리를 게시할 때 해당 크기에 따라 게시되는 데 몇 분 정도 걸릴 수 있습니다. 라이브러리 관리자의 진행률 표시기를 통해 라이브러리 게시 진행 상태를 추적할 수 있습니다. 
  • 라이브러리 초대를 처음 수락하면 라이브러리를 동기화하는 데 몇 분 정도 걸릴 수 있습니다. Creative Cloud 데스크탑 애플리케이션에서 클라우드 아이콘을 클릭하여 라이브러리 동기화 상태를 확인합니다. 라이브러리가 완전히 동기화되면 Adobe XD와 다른 Creative Cloud 애플리케이션에서 액세스할 수 있습니다.

라이브러리 사용

라이브러리를 게시하고 공유했으므로 라이브러리 초대를 수락한 팀원은 XD 및 다른 Creative Cloud 애플리케이션에서 이 라이브러리의 에셋을 사용할 수 있습니다.  

라이브러리 패널에는 팔로우하는 모든 라이브러리가 표시됩니다. 에셋을 사용할 라이브러리를 클릭하면 패널 보기가 변경되어 해당 라이브러리의 모든 콘텐츠가 표시됩니다.

공유 라이브러리 보기

라이브러리 찾아보기

+를 클릭하여 라이브러리 관리자를 열거나 라이브러리 찾아보기를 사용합니다. 

공유 라이브러리의 에셋 사용

라이브러리 보기

라이브러리 관리자에서 에셋을 사용할 라이브러리를 보거나 전환할 수 있습니다.

색상 또는 문자 스타일 적용

색상 및 문자 스타일 적용

캔버스의 오브젝트나 구성 요소에 색상 또는 문자 스타일을 적용하고, 연결된 에셋으로 만들어진 구성 요소를 캔버스로 드래그할 수 있습니다.

 문서에 연결된 에셋 보기

문서에 연결된 에셋

하나 또는 여러 라이브러리에서 사용된 모든 로컬 및 연결된 에셋을 보여 주는 문서 에셋 패널 보기로 이동합니다

게시된 라이브러리 업데이트

XD 클라우드 문서에서 라이브러리를 게시하고 소스 클라우드 문서의 에셋을 수정하면 XD는 라이브러리를 마지막으로 게시한 이후의 변경 내용에 대해 다음과 같은 방법으로 알려 줍니다.

  • 문서 에셋 패널의 게시 아이콘 에 있는 파란색 배지는 업데이트를 게시할 준비가 되었음을 나타냅니다.
  • 게시된 라이브러리를 변경한 후 인앱 메시지를 통해 라이브러리를 업데이트하는 프로세스를 간소화할 수 있습니다. 

라이브러리에 업데이트를 게시할 준비가 되면 다음 옵션 중 하나를 사용하십시오.

  • 업데이트를 게시할 준비가 되었음을 알리는 인앱 메시징에서 지금 업데이트를 클릭합니다.
  • 문서 에셋 패널에서 게시를 클릭하여 라이브러리 관리자를 엽니다. 여기에서 업데이트를 클릭하여 라이브러리를 업데이트하고 팀에게 해당 업데이트를 알립니다.

인앱 업데이트

라이브러리 업데이트

업데이트를 게시할 준비가 되었음을 알리는 인앱 메시지에서 지금 업데이트 버튼을 클릭합니다.

라이브러리 관리자를 통해 업데이트

라이브러리 업데이트

게시 아이콘 을 클릭하여 라이브러리 관리자를 표시합니다. 업데이트를 클릭하여 팀에 최신 업데이트를 푸시합니다.

라이브러리 업데이트 미리보기 및 승인

라이브러리를 업데이트하고 게시하면 어떻게 됩니까? 디자인 프로젝트에서 업데이트된 연결된 에셋을 사용하는 동료 디자이너는 다음 알림을 받습니다.

라이브러리 패널 보기: 문서에 보류 중인 업데이트 수를 나타내는 문서 에셋 옆에 있는 파란색 배지.

문서 에셋 패널 보기: 연결된 에셋에 있는 파란색 배지 와 패널 아래쪽에 있는 모두 업데이트 버튼

문서 에셋 패널 또는 디자인 캔버스에서 업데이트 미리보기

문서 에셋 패널에서 업데이트 미리보기

연결된 색상, 문자 스타일 및 구성 요소에서 파란색 업데이트 아이콘 위로 마우스를 가져갑니다.

 문서 내의 모든 연결된 색상, 문자 스타일 및 구성 요소 업데이트

라이브러리의 변경 내용 업데이트

파란색 업데이트 아이콘을 클릭하거나 문서 에셋 패널 아래쪽에 있는 모두 업데이트를 클릭합니다. 

에셋 필터링

라이브러리에서 관리해야 할 에셋의 크기가 크게 증가하더라도 XD를 사용하면 문서 에셋 보기의 필터 및 검색 기능을 사용하여 에셋을 빠르게 찾을 수 있습니다.

Adobe XD는 프로젝트에서 사용하고자 하는 에셋의 범위를 좁히기 위한 세 가지 필터링 메커니즘을 제공합니다.

  • 에셋 유형: 보려는 에셋 유형(색상, 문자 스타일 또는 구성 요소)별로 필터링합니다. 필터 결과에 로컬 및 연결된 에셋이 모두 표시됩니다.
  • 로컬 에셋: 로컬 문서 에셋만 사용하려면 로컬 에셋 필터를 선택합니다.
  • 연결된 에셋 소스: 여러 클라우드 문서 또는 라이브러리에서 연결된 에셋이 있으며 특정 소스에 있는 에셋을 사용하고자 하는 경우 필터에서 연결된 소스 문서를 선택합니다.
라이브러리의 에셋 검색
에셋 필터링

문서 에셋 패널에서 에셋 검색

라이브러리 패널 또는 문서 에셋 패널 보기에서 검색어를 입력하여 문서 또는 모든 활성 라이브러리에서 에셋을 검색합니다. XD는 문서 에셋 또는 모든 라이브러리 중에서 설정한 검색 범위에 따라 검색 결과를 표시합니다.

연결된 에셋을 로컬 에셋으로 변환

문서에서 연결된 에셋을 사용하는 다른 사람에게 영향을 주지 않고 연결된 구성 요소의 특정 스타일 또는 속성을 실험해 보고 변경하려면 연결된 에셋을 로컬 에셋으로 변환할 수 있습니다.

  1. 문서 에셋 패널에서 에셋을 선택합니다.
  2. 연결된 에셋을 마우스 오른쪽 버튼으로 클릭하고 로컬로 만들기를 선택합니다.

주의해야 할 사항

  • 연결된 에셋을 로컬 에셋으로 변환하면 라이브러리의 해당 연결된 에셋에 적용되는 변경 내용에 대한 알림이 더 이상 수신되지 않습니다. 이러한 연결된 에셋이 있는 다른 XD 문서는 계속 업데이트를 수신합니다.

  • 라이브러리의 에셋을 사용하거나 여러 문서에 연결된 구성 요소를 복사하여 붙여넣거나 연결된 에셋이 끊어진 경우에 로컬 만들기가 작동합니다.

연결된 에셋을 로컬 에셋으로 변환
연결된 에셋을 로컬 에셋으로 변환

라이브러리 게시 취소

더 이상 라이브러리가 필요하지 않다고 결정한 경우 라이브러리 관리자에서 라이브러리를 게시 취소할 수 있습니다. 이때 문서에서 이 라이브러리에서 이전에 사용한 연결된 에셋은 빨간색 배지로 표시된 끊어진 링크(끊어진 링크 아이콘 표시)가 됩니다. 이러한 끊어진 에셋을 삭제하거나 로컬 에셋으로 변환할 수 있습니다.

주의해야 할 사항

  • 라이브러리를 게시 취소하고 나중에 다시 게시하면 해당 라이브러리에서 끊어진 연결된 에셋이 해당 라이브러리에 다시 연결되지 않습니다.

Creative Cloud 애플리케이션에서 만든 라이브러리의 에셋 사용

XD를 사용하면 귀하와 팀이 Photoshop 및 Illustrator와 같은 다양한 Creative Cloud 애플리케이션에서 제작된 에셋을 간편하게 사용할 수 있습니다. 그래픽 또는 Adobe Stock 이미지 모음으로 영감을 주는 라이브러리를 만들었는지, 소스 문서에 연결되지 않은 재사용 가능한 색상과 문자 스타일 모음으로 라이브러리를 만들었는지 그 여부와 상관없이 Adobe XD에서 해당 에셋을 재사용할 수 있습니다.

XD에서 에셋 사용

XD에서 에셋 사용

라이브러리의 그래픽을 디자인으로 드래그하면 배지로 표시되는 연결된 그래픽이 됩니다. Photoshop 또는 Illustrator에서 연결된 그래픽을 수정하면 XD에서 연결된 그래픽 인스턴스가 모두 자동으로 업데이트됩니다. 연결된 그래픽 링크를 해제하려면 링크 배지를 클릭하거나 컨텍스트 메뉴를 사용하여 연결을 해제하면 됩니다. 

문서에 연결되지 않은 색상, 문자 스타일 또는 그래픽 모음을 사용하여 XD에서 유사한 라이브러리를 만들려면 라이브러리 관리자에서 새 라이브러리 만들기를 클릭합니다. 여기서 색상, 문자 스타일 또는 그래픽을 라이브러리에 추가하고 Creative Cloud 애플리케이션 전체에 걸쳐 재사용할 수 있습니다.

주의해야 할 사항

  • 문서를 라이브러리로 게시하여 라이브러리에 구성 요소만 추가할 수 있습니다.
  •  라이브러리에서는 색상이나 문자 스타일을 편집할 수 없습니다.
  • 3D 변형 그래픽을 라이브러리에 추가하면 3D 변형 기능이 손실됩니다.

모범 사례

  • 팀이 해당 업데이트 내용을 미리 보고 수락할 수 있도록 팀이 최신 변경 내용과 동기화되도록 라이브러리 에셋 업데이트 푸시를 보다 효과적으로 제어하려면 이 문서에서 설명한 바와 같이 문서에서 라이브러리를 게시하는 것이 좋습니다.

자세히 알아보기

이 비디오를 통해 XD에서 라이브러리로 작업하는 방법에 대해 알아보십시오.

시청 시간: 6분

다음 단계

디자인을 검사할 수 있도록 라이브러리를 게시 및 공유하는 방법을 살펴보고, 한발 더 나아가 개발자와 디자인 사양을 공유
하는 방법에 대해 알아보십시오.

질문이나 아이디어가 있습니까?

커뮤니티에 질문

질문이나 공유하고자 하는 아이디어가 있습니까? Adobe XD 커뮤니티에 참여하십시오. 소중한 의견과 다양한 작품 활동을 기대하겠습니다!

Adobe 로고

내 계정 로그인