작업 과정의 생산성을 높이기 위해 클라우드 문서 전체에 걸쳐 연결된 에셋을 사용하는 방법에 대해 학습합니다.

지속적으로 증가하는 디자인 업무로 인해 디자이너는 일관적인 디자인을 제작하고 유지 관리하기 위한 간편한 공동 작업을 필요로 합니다. 디자이너는 연결된 에셋을 사용하여 일관적으로 디자인을 전개하는 데 필요한 모든 에셋(색상, 문자 스타일 및 구성 요소)을 포함하는 클라우드 문서를 기반으로 컨텍스트 라이브러리를 만들 수 있습니다.

Adobe XD의 최신 버전을 통해 구성 요소(이전에는 심볼이라고 함)뿐만 아니라 색상 및 문자 스타일도 단 몇 개의 간단한 단계를 통해 쉽게 공유하고 소비할 수 있습니다. 팀과 브랜드 키트 또는 스티커 시트를 공유하는 경우 이는 매우 편리합니다. 또는 단순히 프로젝트에서 또 다른 프로젝트로 자신의 디자인 요소를 재사용하고자 하는 경우도 있습니다. 연결된 에셋은 연결된 구성 요소의 작업 과정을 보완합니다. 소스 문서에서 연결된 에셋을 수정하면 연결된 에셋이 포함된 모든 소비 문서에 업데이트 알림이 수신됩니다. 여기에서 업데이트 내용을 미리 보고 수락할 수 있습니다.    

다음 영상을 통해 Adobe XD에서 연결된 에셋을 사용하는 방법을 살펴보십시오.

연결된 에셋
연결된 에셋 사용

연결된 에셋 만들기

연결된 에셋을 만들려면 다음 단계를 수행하십시오.

  1. 에셋 패널을 XD 클라우드 문서의 색상, 문자 스타일 및 구성 요소로 채워 에셋의 단일 원본 소스를 만듭니다.

  2. 공유 > 편집 작업을 수행하도록 초대를 클릭합니다. 초대 탭에서 초대하려는 사람들의 이메일 주소를 입력하고 필요한 경우 메시지를 입력한 다음 초대를 클릭합니다.

  3. 에셋 패널이 비어 있는 경우 에셋 링크 버튼을 클릭하고 에셋 패널에 항목이 있는 경우 에셋 패널 옆에 있는  아이콘을 클릭합니다.

  4. XD 클라우드 문서를 에셋 패널에 추가하려면 에셋 링크 에서 문서를 선택합니다. 연결된 소스 클라우드 문서의 에셋(색상, 문자 스타일 및 구성 요소)이 클라우드 문서 이름을 따라 지정된 고유한 필터의 에셋 패널에 추가됩니다. 

    다음 영상을 통해 Adobe XD에서 연결된 에셋을 제작하는 방법을 살펴보십시오.

    연결된 에셋
    연결된 에셋 만들기

연결된 클라우드 문서 내의 연결된 에셋 검색 및 필터링

에셋 패널에서 연결된 에셋과 로컬 에셋을 모두 검색할 수 있습니다. 연결된 색상을 검색하려면 원하는 색상의 16진수 코드 또는 할당된 색상 이름을 입력하면 됩니다. 마찬가지로, 연결된 문자 스타일 및 연결된 구성 요소를 검색하려면 에셋 이름과 일치하는 문자열을 입력합니다. 검색 문자열을 기반으로 Adobe XD는 이와 관련된 결과를 에셋 패널에 표시합니다. 

목록 및 격자 보기 모두에서 연결된 클라우드 문서의 에셋을 필터링하려면 에셋 패널의 드롭다운 목록에서 연결된 클라우드 문서를 선택합니다. 에셋 패널이 필터링되고 연결된 클라우드 문서에서 연결된 색상, 연결된 문자 스타일 및 연결된 구성 요소를 필터링하고 표시합니다.

다음 영상을 통해 연결된 클라우드 문서 내에서 에셋을 검색하고 필터링하는 방법을 살펴보십시오.

글자를 사용하여 연결된 문자 스타일 검색
글자를 사용하여 연결된 문자 스타일 검색

연결된 색상 및 연결된 문자 스타일을 사용하여 작업

문서 색상 및 문자 스타일과 마찬가지로, 연결된 색상과 연결된 문자 스타일을 에셋 패널에서 선택하여 캔버스에서 선택한 요소에 적용할 수 있습니다.

예를 들어 디자인 파일에서 연결된 색상 또는 연결된 문자 스타일을 수정하려면 다음 작업 과정을 따르십시오.

연결된 색상을 채우기 및 테두리로 적용

활성 XD 문서에서 오브젝트를 선택한 후 다음 중 하나를 수행합니다.

  • 에셋 패널에서 색상을 클릭하거나 색상을 마우스 오른쪽 버튼으로 클릭하고 채우기로 적용을 선택합니다.
  • 색상 선(테두리)을 적용하려면 오브젝트를 선택하고 에셋 패널에서 색상을 마우스 오른쪽 버튼으로 클릭한 다음 테두리로 적용을 선택합니다.
채우기로 적용
연결된 색상을 채우기 및 테두리로 적용

소스 문서에서 연결된 색상 및 문자 스타일 편집

에셋 패널에서 연결된 색상 및 연결된 문자 스타일을 편집할 수 있습니다. 에셋 패널에서 연결된 색상 또는 연결된 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 소스 문서에서 편집을 선택합니다. 소스 문서가 열리고 이 소스 문서의 에셋 패널(기본적으로 목록 보기)에서 연결된 색상 또는 연결된 문자 스타일이 강조 표시됩니다. 소스 문서에서 연결된 색상 또는 연결된 문자 스타일을 수정하고 대상 문서(클라우드 문서)에서 변경 내용을 미리 봅니다. 

소스 문서에서 연결된 색상 편집
소스 문서에서 연결된 색상 편집

캔버스에서 연결된 색상/연결된 문자 스타일 강조 표시

선택한 색상/문자 스타일을 사용하여 오브젝트의 모든 인스턴스를 강조 표시합니다. 에셋 패널에서 연결된 색상 또는 연결된 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 캔버스에서 강조 표시를 선택합니다.

캔버스에서 연결된 색상 강조 표시
캔버스에서 연결된 색상 강조 표시

연결된 색상의 16진수 값 복사

기존 연결된 색상의 16진수 값을 복사하려면 연결된 색상을 마우스 오른쪽 버튼으로 클릭하고 #HEXValue를 선택합니다. 16진수 값이 클립보드에 복사됩니다.    

16진수 값 복사
연결된 색상의 16진수 값 복사

소스 문서에서 연결된 색상/연결된 문자 스타일 이름 변경

목록 보기에서 소스 문서의 연결된 색상/연결된 문자 스타일 이름을 변경하려면 다음 중 하나를 수행하십시오.

  • 연결된 색상/연결된 문자 스타일을 더블 클릭합니다.
  • 연결된 색상/연결된 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 이름 바꾸기를 선택합니다.
연결된 색상 이름 바꾸기
소스 문서에서 연결된 색상/연결된 문자 스타일 이름 바꾸기

소스 문서에서 연결된 색상/연결된 문자 스타일 삭제

연결된 색상/연결된 문자 스타일에 끊어진 링크가 있는 경우에만 소스 문서에서 연결된 색상/연결된 문자 스타일을 삭제할 수 있습니다. 연결된 색상 또는 연결된 문자 스타일을 삭제하면 해당 연결된 색상/연결된 문자 스타일이 에셋 패널에서 제거됩니다. 삭제된 연결된 색상 또는 연결된 문자 스타일에 링크된 모든 오브젝트는 더 이상 연결되지 않은 상태로 캔버스에 남아 있게 됩니다.   

연결된 색상 삭제
소스 문서에서 연결된 색상 또는 연결된 문자 스타일 삭제

끊어진 연결된 색상을 로컬 색상으로 변환할 수 있습니다. 에셋 패널에서 연결된 색상을 마우스 오른쪽 버튼으로 클릭하고 로컬 색상 만들기를 선택합니다. 이전에 끊어진 연결된 색상에 링크된 모든 오브젝트는 이제 로컬 색상에 연결됩니다.

소스 문서에서 연결된 색상에 적용되는 모든 업데이트는 로컬 색상에 영향을 주지 않습니다.    

로컬 색상 만들기
끊어진 연결된 색상을 로컬 색상으로 변환

끊어진 연결된 문자 스타일을 문서 문자 스타일로 변환

끊어진 연결된 문자 스타일을 로컬 문자 스타일로 변환할 수 있습니다. 에셋 패널에서 연결된 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 로컬 문자 스타일 만들기를 선택합니다.

이전에 끊어진 연결된 문자 스타일에 링크된 모든 오브젝트는 이제 문서 문자 스타일에 연결됩니다.

소스 문서에서 연결된 문자 스타일에 적용되는 모든 업데이트는 로컬 문자 스타일에 영향을 주지 않습니다.

끊어진 연결된 문자 스타일 변환
끊어진 연결된 문자 스타일을 문서 문자 스타일로 변환

연결된 색상/연결된 문자 스타일 업데이트 미리보기

소스 문서에서 연결된 색상/연결된 문자 스타일이 업데이트되면 에셋 패널에서 파란색 배지 아이콘()으로 표시되는 업데이트 알림이 대상 문서에 수신됩니다. 

마우스를 연결된 색상/연결된 문자 스타일의  아이콘 위에 가져다 대고 다음과 같은 작업을 수행할 수 있습니다.

  • 변경 내용을 커밋하기에 앞서 업데이트 내용을 미리 확인하고 마지막으로 수정된 날짜와 소스 문서 세부 정보를 조회합니다.
  • 디자인의 상황에 따라 에셋 패널 썸네일(목록 및 격자 보기)과 캔버스 모두에서 업데이트된 변경 내용을 조회합니다.

연결된 색상/연결된 문자 스타일의 업데이트 수락

목록 및 격자 보기에서 연결된 색상/연결된 문자 스타일에 대한 업데이트를 수락할 수 있습니다. 단일 색상 업데이트를 수락하려면 다음 작업을 수행하십시오.

  • 연결된 색상/연결된 문자 스타일을 마우스 오른쪽 버튼으로 클릭하고 업데이트를 클릭합니다.
연결된 색상에 대한 업데이트 수락
연결된 색상에 대한 업데이트 수락
  • 에셋 패널에서 파란색 업데이트 아이콘()을 클릭합니다. 

여러 업데이트를 수락하려면 모두 업데이트를 클릭합니다.

모든 업데이트 수락
모든 업데이트 수락

새로 추가된 연결된 색상/연결된 문자 스타일의 업데이트 수락

소스 문서에서 새로 추가된 연결된 색상/연결된 문자 스타일에 대한 업데이트를 수락할 수 있습니다. 업데이트를 수락하려면 에셋 패널에서 파란색 업데이트 아이콘()을 클릭합니다.

새로 추가된 연결된 색상에 대한 업데이트 수락
새로 추가된 연결된 색상에 대한 업데이트 수락

연결된 구성 요소를 사용하여 작업

연결된 구성 요소는 이전의 심볼을 대체하며 무한 반복적인 디자인 요소를 제작하는 작업을 더욱 간소화하고 강력하게 해 줍니다. Adobe XD에 탁월한 유연성을 갖춘 연결된 구성 요소(이전에 심볼이라고 함)와 디자인 요소가 도입되었습니다. 연결된 구성 요소를 사용하여 버튼과 같은 반복 요소를 만들고 유지 관리할 수 있을 뿐만 아니라 다양한 컨텍스트 및 레이아웃에 대한 해당 요소의 특정 인스턴스를 오버라이드할 수도 있습니다. 또한 다음과 같은 작업을 수행할 수 있습니다.

  • 기본 요소를 수정하여 모든 인스턴스에 반영합니다.
  • 개별적으로 인스턴스 크기를 조정합니다.
  • 중첩된 구성 요소를 오버라이드로 교체합니다.
  • 문서 전체에 걸쳐 구성 요소를 연결하고 편집합니다.
  • 오버라이드:
    • 콘텐츠 속성 (텍스트 및 이미지 채우기)
    • 모양 속성 (채우기, 테두리, 효과, 텍스트 스타일 등)
    • 인스턴스 내부의 오브젝트 레이아웃 (크기, 위치 지정, 계층 구조, 제한)
    • 인스턴스의 구조 (요소 추가 및 빼기)

에셋 패널의 목록 및 격자 보기 모두에서 연결된 구성 요소를 볼 수 있습니다. 

연결된 구성 요소에 대한 자세한 내용은 XD에서 구성 요소를 사용하여 작업을 참조하십시오.

연결된 클라우드 문서 삭제

연결된 클라우드 문서를 삭제하려면 에셋 패널 필터에서 연결된 클라우드 문서에 마우스를 가져다 대고 버튼을 클릭합니다.

연결된 클라우드 문서 삭제 중
연결된 클라우드 문서 삭제

에셋 브라우저에서 연결된 클라우드 문서를 제거하면:

  • 클라우드 문서에서 연결된 에셋이 에셋 패널에서 제거됩니다.
  • 연결된 클라우드 문서 필터가 에셋 패널에서 제거됩니다.
  • 캔버스 상의 연결된 모든 구성 요소가 일반 그룹으로 변환됩니다.

XD 소스 클라우드 문서를 삭제하면 포커스 전환 시 모든 관련 문서에 끊어진 링크에 대한 알림이 수신됩니다. 에셋 패널의 컨텍스트 메뉴에서 다시 연결을 클릭합니다.

에셋 브라우저에 다시 연결할 수 있는 모든 클라우드 문서가 표시됩니다. 동일한 요소 ID을 갖는 XD 클라우드 문서를 선택하면 끊어진 모든 에셋이 이제 새 문서에 다시 연결됩니다. 새로 다시 연결된 소스 문서가 필터로 추가됩니다.

다시 연결된 XD 클라우드 문서에 요소 ID의 일부 또는 전부가 없는 경우에는 사용 가능한 에셋만 연결됩니다. 나머지는 끊어진 링크를 계속 가지고 있게 됩니다.

누락된 연결된 에셋 다시 연결
누락된 클라우드 문서 다시 연결

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책