연결된 심볼을 사용하여 작업

여러 문서에 걸쳐 연결된 심볼을 사용하는 방법에 대해 학습합니다.

연결된 심볼을 사용하여 UI 키트, 스티커 시트 또는 스타일 가이드에 대한 단일 버전을 만들고 유지 관리하며 여러 문서 사이에서 이를 공유하여 일관된 디자인 확장성을 구현할 수 있습니다. 소스 문서에서 심볼이 업데이트될 때마다 Adobe XD는 소스 심볼을 다른 문서로 복사한 사용자가 누구인지 다른 디자이너들에게 알립니다. 여기에서 변경 내용을 수락하거나 거부할 수 있습니다.

연결된 심볼 작동 방식

Adobe XD를 통해 디자이너는 소스 문서의 에셋 패널에서 심볼을 복사하여 대상 문서에 연결된 심볼로 붙여넣을 수 있습니다. 디자이너가 소스 문서에서 연결된 심볼을 수정하면 Adobe XD는 복사된 소스 심볼을 사용하여 작업하는 다른 디자이너들에게 해당 내용을 알립니다. 여기에서 변경 내용을 수락하거나 거부할 수 있습니다. 소스 문서에서 수정되는 연결된 심볼은 대상 문서의 비트맵 및 텍스트 속성을 상속받는다는 점을 참고하십시오.

공동 작업 애플리케이션에서 연결된 심볼로 작업을 시작하는 디자이너의 경우 다음 작업 과정을 따르십시오.

기능 용어

 
용어 정의 시각적 표시기
소스 문서 에셋 패널에서 제작되고 저장된 심볼을 포함하는 원본 문서입니다. 없음
대상 문서 소스 문서의 심볼을 사용하는 보조 문서입니다. 없음
로컬 심볼 문서 내에서 여러 아트보드에 걸쳐 여러 번 사용된 오브젝트입니다.
연결된 심볼 소스 문서에서 대상 문서로 복사되고 저장된 심볼입니다. 캔버스에서 - 
에셋 패널에서 - 
연결된 심볼 업데이트 연결된 심볼이 소스 문서에서 업데이트될 때 대상 문서에 표시되는 알림입니다.
다시 연결 또는 누락된 연결 연결이 끊어지거나 누락된 연결된 심볼입니다.

연결된 심볼 만들기

소스 문서에서 대상 문서로 복사된 연결된 심볼
소스 문서에서 대상 문서로 복사된 연결된 심볼

연결된 심볼을 만들려면:

  1. 소스 XD 문서에서 심볼을 복사하여 대상 문서에 붙여넣습니다.

  2. 연결된 심볼은 다음과 같이 표시됩니다.

    캔버스에서

    에셋 패널에서

참고:

해당 XD 파일은 백업해 두어야 합니다.

연결된 심볼 오버라이드

연결된 심볼 오버라이드 기능을 사용하여 다른 연결된 심볼에 대한 텍스트와 이미지를 맞춤화할 수 있습니다. 디자이너는 심볼의 텍스트와 이미지를 오버라이드하는 동시에 해당 연결된 심볼의 다른 사본에 연결되는 모양은 그대로 유지할 수 있습니다.

디자이너는 연결된 심볼의 텍스트 속성과 비트맵을 오버라이드할 수 있습니다.

연결된 심볼의 모든 인스턴스로 오버라이드를 푸시하려면 연결된 심볼을 마우스 오른쪽 버튼으로 클릭하고 오버라이드 전송을 선택하여 연결된 심볼의 모든 사본을 동시에 업데이트합니다. 디자이너는 중첩되어 연결된 심볼의 특정 부분에 오버라이드를 적용할 수도 있습니다.

연결된 심볼 오버라이드
연결된 심볼 오버라이드

연결된 심볼 편집

디자이너는 대상 문서의 모든 디자인 요소가 동기화되도록 소스 문서의 연결된 심볼을 편집할 수 있습니다. 업데이트된 연결된 심볼이 있는 모든 문서에는 해당 업데이트에 대한 알림이 표시됩니다.

  1. 에셋 패널에서 연결된 심볼을 마우스 오른쪽 버튼으로 클릭하고 소스 문서에서 편집을 선택합니다.

  2. 스타일 속성을 수정하고 소스 문서의 변경 내용을 저장합니다. 소스 문서에서 수정한 스타일 업데이트가 대상 문서에 반영됩니다.

    연결된 심볼 편집
    연결된 심볼 편집

연결된 심볼 업데이트 미리보기

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

연결된 심볼 업데이트를 미리 보려면 에셋 패널에서   아이콘에 마우스를 가져다 댑니다.

연결된 심볼 업데이트
연결된 심볼 업데이트

연결된 심볼 업데이트 수락

연결된 심볼에 대한 업데이트를 수락하려면

  1. 파란색  아이콘  을 클릭합니다 .

  2. 연결된 심볼에 대한 여러 업데이트를 수락하려면 에셋 패널에서 모두 업데이트를 클릭합니다.

  3. 단일 업데이트의 경우에는 마우스 오른쪽 버튼을 클릭하고 컨텍스트 메뉴에서 업데이트를 선택합니다.

    모든 연결된 심볼에 대한 일괄 업데이트
    모든 연결된 심볼에 대한 일괄 업데이트

    A. 연결된 심볼에 대한 단일 업데이트 B. 연결된 심볼에 대한 일괄 업데이트 

연결된 심볼을 로컬 심볼로 변환

디자이너는 다른 문서의 인스턴스에 영향을 주지 않고 연결된 심볼의 속성을 시험하고 해당 속성을 변경할 수 있습니다.

연결된 심볼을 로컬 심볼로 변환하려면 에셋 패널에서 연결된 심볼을 마우스 오른쪽 버튼으로 클릭하고 로컬 심볼 만들기를 선택합니다. 

디자이너는 로컬 심볼의 속성을 편집하거나 오버라이드할 수 있습니다. 변환된 심볼의 모든 사본은 소스 문서의 새로운 로컬 심볼과 동기화됩니다. 소스 문서의 심볼에 적용되는 업데이트는 더 이상 로컬 심볼에 반영되지 않습니다.

연결된 심볼을 로컬 심볼로 변환
연결된 심볼을 로컬 심볼로 변환

연결된 심볼 연결 해제

디자이너는 인스턴스에 영향을 주지 않고 문서에서 연결된 심볼의 링크를 해제할 수 있습니다. 소스 심볼 문서에서 적용되는 변경 내용은 대상 문서의 인스턴스에 영향을 미치지 않으며 계속 업데이트 알림을 받게 됩니다.

디자인 캔버스에서 심볼의 연결을 해제하고 연결된 심볼의 특정 사본을 캔버스의 일반 디자인 콘텐츠로 변환하려면 연결된 심볼을 마우스 오른쪽 버튼으로 클릭하고 심볼 연결 해제를 선택합니다.

연결된 심볼 연결 해제
연결된 심볼 연결 해제

누락된 연결된 심볼 문제 해결 및 다시 연결

디자이너는 소스 문서를 구성하거나, 이름을 바꾸거나, 기존 연결된 심볼을 다른 문서로 옮길 수 있습니다. 이러한 경우   아이콘이  끊어진 연결된 심볼을 나타냅니다.

연결된 심볼은 다음과 같은 이유로 연결이 끊어집니다.

  • 소스 XD 문서가 이동됨
  • 원본 문서의 연결된 심볼이 삭제됨
  • 소스 XD 문서가 삭제됨
  • 원본 문서의 네트워크 연결이 끊김

누락된 연결이 있는 연결된 심볼 문제를 해결하려면 누락된 연결 아이콘에 마우스를 가져다 대어 연결이 끊어진 심볼의 근본 원인을 파악합니다.

연결된 심볼을 다시 연결하려면 누락된  연결   아이콘( (에셋 패널에 있음)을 클릭합니다. 심볼 마우스 오른쪽 버튼으로 클릭하고 다시 연결을 선택합니다.

누락된 연결된 심볼 다시 연결
누락된 연결된 심볼 다시 연결

끊어진 연결 문제를 해결하는 방법에 대한 자세한 내용은 Adobe XD의 연결된 심볼 문제 해결을 참조하십시오.

연결된 심볼 삭제

디자이너는 대상 문서에서 연결된 심볼의 인스턴스 중 하나 또는 여러 개를 삭제할 수 있습니다. 연결된 심볼을 삭제하려면 에셋 패널에서 해당 심볼을 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택합니다. 캔버스에서 삭제된 연결된 심볼의 모든 인스턴스는 일반 그룹으로 변환됩니다.

연결된 심볼 삭제 중
연결된 심볼 삭제 중

연결된 심볼을 포함하는 소스 문서 공유

소스 문서를 다른 디자이너와 공유하려면 Dropbox, Google Drive 또는 공유 네트워크 드라이브와 같은 파일 공유 서비스에 소스 문서를 저장하십시오. 디자이너는 소스 문서의 심볼을 편집하거나 사용하도록 멤버를 초대할 수 있습니다.