Adobe XD에서 문서 에셋을 사용하여 작업

XD에서 문서 에셋을 관리하는 방법에 대해 알아보고자 하십니까? 바로 여기에서 배울 수 있습니다!

라이브러리 패널의문서 에셋을 통해 디자인 프로젝트에서 사용되는 색상, 문자 스타일, 구성 요소 또는 오디오 에셋을 한 곳에서 만들고 관리하고 공유할 수 있습니다.

문서 에셋

문서 에셋을 사용해야 하는 이유

Richard는 클라우드 기반의 시스템에서 디자인 에셋 제작 및 사용을 표준화하는 디자인 책임자입니다. 디자인 시스템 전반에서 색상, 문자 스타일, 구성 요소 또는 오디오 에셋을 관리하기 위해 준비하고 있습니다.

 

  • Richard는 XD에서 에셋 및 라이브러리를 제작하고 관리하는 방법에 대해 알아보고 있습니다.

 

  • XD에서 에셋 관리 시스템을 만드는 데 도움이 필요합니다.

다음은 당사에서 Richard에게 XD의 문서 에셋을 소개하는 문서입니다. Richard가 시작하는 데 도움이 되는 방법을 함께 알아보시기 바랍니다.

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

무료 체험판 앱 다운로드

앱 기본 사항 알아보기

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

앱 업데이트

새로운 기능 살펴보기

직접 사용해 보기

샘플 파일 다운로드

.xdc 파일, 604KB

진행하기에 앞서

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

문서 에셋 추가

문서 에셋 패널에서 디자인 스타일 및 구성 요소 선별을 시작하려면 툴바에서 라이브러리 를 클릭하거나 Cmd + Shift + Y(Mac) 또는 Ctrl + Shift + Y(Windows)를 누른 다음 문서 에셋 을 클릭합니다.
문서 전체에 걸쳐 재사용하거나 나중에 라이브러리의 일부로 게시할 색상, 문자 스타일, 구성 요소 또는 오디오를 추가하려면 다음 단계를 따르십시오. 

색상 추가

색상 추가

  • + 아이콘을 클릭하여 색상과 그레이디언트를 추가합니다. XD에서는 선택한 오브젝트와 관련된 채우기 및 테두리 색상 텍스트 레이어, 색상 및 하위 범위 스타일을 추출할 수 있습니다.

문자 스타일 추가

에셋 문자 추가

  • + 아이콘을 클릭하여 문자 스타일을 추가합니다. XD에서는 하위 범위 스타일을 포함한 텍스트 레이어와 관련된 모든 스타일을 추출합니다.

구성 요소 추가

에셋 구성 요소 추가

  • 선택 항목을 구성 요소로 변환하려면 + 아이콘을 클릭하십시오. 캔버스에서 구성 요소를 만들면 XD에서 자동으로 문서 에셋에 추가됩니다.

오디오 추가

에셋 오디오 추가

  • 속성 관리자에서 프로토타입에 프로토타입 모드로 추가된 오디오 파일은 문서 에셋에 자동으로 표시됩니다.

주의해야 할 사항

  • 그림자의 색상을 문서 에셋에 추가할 수는 없습니다.
  • 공통 속성을 사용하여 문자 스타일을 그룹화할 수 없습니다. 
  • 오디오 파일은 문서 에셋에서만 삭제할 수 있습니다.

  • 속성 관리자에서 오디오 파일을 추가하려면 프로토타입 모드를 사용해야 합니다.
  • 오디오 파일의 이름을 바꾸거나 순서를 변경할 수 없습니다.
  • 클라우드 문서로 링크할 경우 오디오 파일은 연결되지 않습니다. 

모범 사례

  • 문서 에셋에서 목록 보기를 사용하십시오.
    조직의 요구 사항에 부합하도록 에셋의 이름을 변경하고 정렬합니다. 격자 보기 모드가 보다 큰 썸네일과 에셋 렌디션이 제공되는 에셋을 재사용할 수 있도록 최적화되었습니다.
  • 프리플라이트를 위해 문서의 모든 아트보드를 선택하여 문서에 사용된 모든 색상 및 문자 스타일을 추출합니다.

문서 에셋 적용 및 재사용

문서 에셋에서 추가한 에셋을 볼 수 있으므로 아트보드에서 오브젝트 또는 오브젝트 그룹을 선택하고 색상 또는 문자 스타일을 클릭하여 선택 영역에 적용합니다.

디자인에서 구성 요소 중 하나 또는 여러 개를 사용하려면 문서 에셋 패널에서 구성 요소를 선택하고 캔버스로 드래그합니다. 이들 구성 요소의 인스턴스가 캔버스에서 생성됩니다.

색상, 문자 스타일 또는 구성 요소를 재사용하려면 다음 단계를 따르십시오. 

색상 재사용

색상 재사용

  1. 오브젝트 또는 텍스트 레이어를 선택하고 색상 견본을 클릭하여 채우기 색상으로 적용하거나
  2. 오브젝트를 다중 선택하고 색상 또는 그레이디언트를 선택 영역에 적용하거나
  3. 문서 에셋에서 색상 견본을 마우스 오른쪽 버튼으로 클릭하고 테두리 색상 적용을 선택하여 테두리 색상으로 적용하거나 16진수 값을 복사하여 재사용할 수 있습니다.

문자 스타일 재사용

문자 스타일 재사용

  1. 문자 스타일을 적용하려면 텍스트 레이어 또는 텍스트의 일부를 선택하고 문자 스타일을 클릭합니다.
  2. 오브젝트를 다중 선택하고 선택 영역에 문자 스타일을 적용합니다.

구성 요소 재사용

구성 요소 재사용

  1. 구성 요소를 문서 에셋에서 캔버스로 드래그 앤 드롭합니다.
  2. 오브젝트를 다중 선택하고 캔버스에서 여러 구성 요소를 드래그합니다.
  3. 구성 요소를 드래그할 때 다른 구성 요소 인스턴스 위로 마우스를 가져다 대면 교체할 수 있습니다. 

모범 사례

  • 일관성 있는 사용을 위해 색상 및 문자 스타일을 저장한 후에는 문서 에셋에서 선택한 오브젝트에 색상 및 문자 스타일을 적용해야 합니다.

문서 에셋 편집

에셋을 추가하고 재사용하고 나면 문서 에셋에서 에셋을 편집하여 문서 전체에 걸쳐 전역 변경을 적용할 수 있습니다. 이렇게 하면 문서 전체에 걸쳐 색상 및 문자 스타일을 수정하는 과정을 간소화할 수 있습니다. 

문서 에셋을 편집하려면 다음 절차를 따르십시오.

색상 편집

색상 편집

  • 색상 견본을 마우스 오른쪽 버튼으로 클릭하고 편집을 선택하여 문서 전체에서 색상 값을 수정할 수 있습니다. 
  • 해당 색상이 사용된 캔버스의 모든 오브젝트가 실시간으로 업데이트됩니다. 이는 색상 변경을 대규모로 미리 보고 편집할 수 있는 좋은 방법입니다.

문자 스타일 편집

문자 편집

  • 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 편집을 선택하여 문서 전체에 걸쳐 해당 스타일을 수정할 수 있습니다. 
  • 해당 스타일이 사용된 캔버스의 모든 텍스트 레이어는 실시간으로 업데이트됩니다.

구성 요소 편집

구성 요소 편집

  • 캔버스 또는 문서 에셋 패널에서 구성 요소를 마우스 오른쪽 버튼으로 클릭하고 메인 구성 요소 편집을 선택하여 캔버스에서 메인 구성 요소를 강조 표시하거나 삭제된 경우 다시 만듭니다.
  • 메인 구성 요소에 대한 모든 변경 내용은 다른 구성 요소 인스턴스에 전파됩니다.

 

주의해야 할 사항 

  • 여러 오브젝트(100개 이상)에 걸쳐 사용된 색상 또는 문자 스타일을 편집하는 경우에는 변경 내용이 패널에서 캔버스의 모든 오브젝트로 반영되는 데 어느 정도 시간이 소요될 수 있습니다.

모범 사례

  • 편집 내용이 디자인에 미치는 영향을 파악하기 위해 문서 에셋에서 에셋을 편집하기 전에 캔버스에서 강조 표시 옵션을 선택합니다.
  • 문자 스타일로 색상을 편집하려면 색상 값을 변경한 다음 전역 색상 값을 변경하여 문자 스타일을 유지하십시오.
  • 연결된 색상 또는 문자 스타일을 업데이트하면 연결된 색상 또는 문자 스타일이 적용된 오브젝트만 업데이트됩니다.

문서 에셋 관리 및 구성

에셋을 보고 순서를 변경하려면 문서 에셋에서 격자 보기와  목록 보기 사이를 전환합니다.

  • 격자 보기: 썸네일을 표시하도록 최적화되어 있는 경우 에셋을 시각적으로 식별할 수 있습니다.
  • 목록 보기: 조직에 최적화된 경우 모든 에셋의 이름을 보고 순서를 변경할 수 있습니다.

두 기능을 모두 사용하여 에셋을 추가, 재사용 및 편집할 수 있으며 검색을 통해 에셋을 검색하거나 패널을 특정 범주로 필터링할 수 있습니다. 

문서 에셋에서 에셋을 추가하고 재사용한 후 에셋을 구성하고 관리할 수도 있습니다. 

에셋 삭제, 강조 표시 및 이름 바꾸기

삭제 및 강조 표시

  • 마우스 오른쪽 버튼을 클릭하고 삭제를 선택하여 문서 에셋에서 색상, 문자 스타일, 구성 요소 또는 오디오를 삭제합니다. 패널에서 구성 요소를 삭제하면 인스턴스가 캔버스에서 일반적인 오브젝트로 그룹 해제됩니다.
  • 마우스 오른쪽 버튼을 클릭하고 캔버스에서 강조 표시를 선택하여 특정 색상, 문자 스타일 또는 특정 구성 요소의 인스턴스가 사용된 모든 오브젝트를 찾을 수 있습니다. 캔버스에서 오브젝트 또는 구성 요소 인스턴스를 선택하고 컨텍스트 메뉴를 사용하여 문서 에셋에서 해당 색상, 문자 스타일 또는 구성 요소를 표시합니다.
  • 마우스 오른쪽 버튼을 클릭하여 이름을 변경하거나  목록 보기로 전환하고 모든 에셋의 이름을 변경합니다.

에셋에 마우스 가져다 대기

에셋에 마우스 가져다 대기

에셋 썸네일에 마우스를 가져다 대면 다음 정보가 표시됩니다. 

  • 색상: 16진수 값 또는 사용자 정의 색상 이름을 표시합니다. 
  • 그레이디언트: 그레이디언트 값 중단점을 표시합니다. 문자 스타일의 경우 행 높이와 같은 추가 텍스트 속성이 썸네일에 표시되지 않습니다. 
  • 구성 요소: 캔버스에서 해당 구성 요소의 인스턴스 수를 표시합니다.

에셋 보기

에셋 보기

목록 보기에서 각 범주 내의 모든 에셋의 이름을 볼 수 있습니다.

에셋 순서 바꾸기

에셋 순서 바꾸기

목록 보기에서 드래그하여 각 범주 내의 에셋 순서를 변경합니다.

주의해야 할 사항

  • 목록 보기를 사용하여 작업할 때 구성 요소의 대형 미리보기가 표시되지 않습니다.
  • 다양한 범주에 걸쳐 그룹화하려면 에셋의 순서를 변경하십시오. 

모범 사례

  • 문서 에셋의 필터를 사용하여 특정 에셋 범주 또는 소스를 필터링하여 볼 수 있습니다.
  • 변경 내용이 디자인에 어떤 영향을 미칠지 확실하지 않습니까? 캔버스에서 강조 표시를 사용하여 문서 전체에서 해당 에셋의 인스턴스를 볼 수 있습니다.
  • 사용되지 않는 구성 요소를 확인하려면 캔버스에서 모든 오브젝트를 선택하고 마우스 오른쪽 버튼을 클릭한 다음 에셋에서 구성 요소 공개를 선택하고 강조 표시되는 구성 요소를 목록의 맨 위로 드래그합니다.
  • 다음 항목에 마우스를 가져다 대면
    • 그레이디언트, 툴팁에 그레이디언트의 시작 및 종료 값이 표시됩니다. 값 사이의 '-'는 변환점 두 개의 그레이디언트를 나타내며 값 사이의 ‘...’는 여러 개의 색상 변환점이 있는 그레이디언트를 나타냅니다.
    • 구성 요소, 툴팁은 캔버스에서 해당 구성 요소의 인스턴스 수를 표시합니다.
  • 목록 보기에서 에셋의 이름을 변경할 때 Tab 키를 사용하여 목록 보기에서 다음 에셋 이름을 변경합니다. 그리고 SHIFT+TAB 키를 사용하여 역방향으로 이동할 수 있습니다.

에셋 공유 및 게시

이제 문서 에셋에서 재사용 가능한 모든 색상, 문자 스타일 및 구성 요소를 만들었으므로 Creative Cloud Libraries를 사용하여 디자인 시스템 에셋을 게시하고 팀의 다른 사람들과 공유하는 방법에 대해 알아보십시오.

자세히 알아보기

이 비디오를 통해 에셋으로 작업하는 방법에 대해 자세히 알아보십시오.

다음 단계

지금까지 XD의 에셋 및 라이브러리를 사용하여 작업하는 방법에 대해 살펴보았습니다. 한발 더 나아가 라이브러리를 사용하여 에셋, 구성 요소 및 디자인 시스템을 공유하거나 기존 XD 클라우드 문서를 라이브러리로 마이그레이션하는 방법을 살펴보십시오.

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

커뮤니티에 질문

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

Adobe 로고

내 계정 로그인