XD에서 구성 요소를 사용하여 작업

디자이너는 종종 내비게이션 바 또는 버튼과 같은 기본 요소를 디자인 전체에 걸쳐 반복적으로 제작합니다. 그러나 이러한 기본 요소는 배치되는 컨텍스트 또는 레이아웃에 따라 맞춤화되어야 합니다. 이러한 상황에서는 동일한 기본 요소의 여러 버전을 만들어야 하며, 결국 디자인을 유지 관리하기가 훨씬 더 어려워집니다.

구성 요소(이전에는 심볼이라고 함)는 반복 요소를 만들고 유지 관리하는 데 도움이 되는 탁월한 유연성을 지닌 디자인 요소로서 다양한 컨텍스트 및 레이아웃에 대한 인스턴스를 다양하게 만들 수 있도록 해 줍니다. 다양한 컨텍스트에서 버튼을 사용하는 것을 예로 들 수 있습니다.

버튼과 같은 재사용이 가능한 요소를 정의하기 위한 마스터 구성 요소를 만들 수 있으며, 해당 속성을 변경하여 요소의 인스턴스를 맞춤화할 수 있습니다. 개별 인스턴스에 대한 변경 내용은 해당 요소에만 적용되지만 마스터에 대한 변경 내용은 속성이 맞춤화되지 않은 모든 인스턴스에 반영됩니다. 

다음 워크플로를 통해 구성 요소를 사용하는 방법을 살펴보십시오.

XD에서 처음으로 구성 요소를 만들면 이는 마스터 구성 요소가 됩니다. 다른 요소를 편집하는 것과 마찬가지로 캔버스에서 마스터 구성 요소를 다룰 수 있습니다. 마스터 구성 요소는 왼쪽 상단에 녹색으로 채워진 다이아몬드로 표시됩니다.

마스터 구성 요소를 만들려면 오브젝트 또는 오브젝트의 그룹을 선택하고 다음 옵션 중 하나를 사용하십시오.

• 오브젝트를 마우스 오른쪽 버튼으로 클릭하고 구성 요소 제작(CMD+K)을 선택합니다.
• 에셋 패널의 구성 요소 섹션에서 + 버튼을 클릭합니다.
• XD 앱에서 오브젝트 > 구성 요소 만들기를 선택합니다.
• 속성 관리자의 구성 요소 섹션에서 + 아이콘을 클릭합니다.

구성 요소는 Adobe XD에서 여러 상태를 가질 수 있으므로 디자인 프로젝트에서 여러 오브젝트를 사용하지 않고도 동적인 인터랙티브 콘텐츠를 쉽게 개발할 수 있습니다.

구성 요소를 만든 후에 계속해서 구성 요소에 대한 여러 상태를 생성하고 이를 연결하여 인터랙션을 만들 수 있습니다. 자세한 내용은 상태를 포함한 구성 요소 생성을 참조하십시오.

구성 요소 인스턴스를 사용하여 작업

제작한 마스터 구성 요소의 모든 사본을 인스턴스라고 합니다. 구성 요소 인스턴스는 왼쪽 상단에 녹색으로 채워진 다이아몬드로 표시됩니다. 인스턴스를 만들면:

• 이들은 마스터 구성 요소의 사본이 되고
• 원본과 동일한 속성을 가지며
• 마스터와 본질적으로 연결되어 있습니다. 

마스터 구성 요소에 대한 연결을 끊지 않고 인스턴스의 속성을 오버라이드할 수 있습니다. 작동 방식은 다음과 같습니다.

• 마스터 구성 요소를 변경하면 모든 인스턴스에 동일한 변경 내용이 적용됩니다.
• 그러나 인스턴스에서 속성을 바꾸면 XD는 해당 속성을 오버라이드로 표시합니다. 오버라이드는 마스터 구성 요소가 아닌 해당 인스턴스에만 적용되는 고유한 변경 사항입니다.

마스터 구성 요소 편집

마스터 구성 요소를 편집하려면 다음 옵션 중 하나를 사용하십시오.

• 캔버스에서 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 마스터 구성 요소 편집을 선택합니다.
• 에셋 패널에서 구성 요소를 마우스 오른쪽 버튼으로 클릭하고 마스터 구성 요소 편집을 선택합니다.
• 캔버스에서 인스턴스를 선택하고 속성 관리자의 구성 요소 섹션에서 기본 상태 옆에 있는 연필 편집 아이콘을 선택합니다.

캔버스에서 마스터 구성 요소를 삭제한 경우 XD는 캔버스에서 현재 편집 중인 오브젝트 옆에 마스터 구성 요소를 생성합니다. 

속성 오버라이드

마스터 구성 요소는 디자인 시스템을 유지 관리하는 데 필요한 일관성을 제공합니다. 마스터 구성 요소에 적용하는 모든 변경 내용은 해당 인스턴스에 자동으로 반영됩니다.

그러나 디자인 시스템은 해당 시스템이 제공하는 유연성 만큼만 사용할 수 있습니다. 동일한 원본 요소로 시작할 수 있지만 사용되는 컨텍스트에 따라 이를 맞춤화해야 합니다. 여기에서 인스턴스가 들어옵니다. 구성 요소의 인스턴스를 편집해도 마스터 구성 요소에는 영향을 주지 않습니다. 변경하는 모든 속성은 오버라이드로 간주됩니다.

마스터 구성 요소에서 동일한 속성을 편집하더라도 오버라이드된 속성은 항상 그대로 유지됩니다. 

이들 버튼의 모퉁이 반경과 같이 인스턴스에서 오버라이드되지 않은 속성은 항상 마스터에서 동기화됩니다. 

오버라이드 결과가 만족스럽지 않은 경우에는 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 마스터 구성 요소로 재설정을 선택하여 언제든지 원본 마스터 구성 요소로 다시 설정할 수 있습니다. 이렇게 하면 인스턴스에서 모든 오버라이드가 지워지고 다시 마스터 구성 요소로 재설정됩니다. 

스타일 및 모양 오버라이드

컨텍스트에 따라 원본 요소를 변경하는 것은 재사용 가능한 요소를 만들 때 매우 중요합니다. 결과적으로 인스턴스의 모든 스타일 및 모양 속성을 오버라이드할 수 있습니다. 오버라이드는 기본 요소와의 관계를 유지해 주는 동시에 다양한 변화를 허용합니다. 

크기 조정 및 레이아웃 오버라이드

XD 12.0에는 오브젝트의 그룹에 대한 배치와 확장성을 그대로 유지하면서 크기를 조정할 수 있는 반응형 크기 조정 기능이 도입되었습니다. 디자인 캔버스에서 바로 그룹의 크기를 조정하기만 하면 XD가 상대 간격을 그대로 유지해 줍니다. 필연적으로, 유사하지만 크기가 다른 재사용 가능한 요소가 만들어 집니다. 구성 요소의 크기도 조정할 수 있으며, 반응성이 뛰어난 크기 조정 기능이 제공됩니다. 

마스터 구성 요소의 크기를 조정하면 크기가 조정되지 않은 인스턴스의 크기도 자동으로 조정됩니다. 따라서, 이미 크기가 조정된 인스턴스는 오버라이드로 크기가 조정된 위치를 유지하게 됩니다. 마스터 구성 요소에 영향을 주지 않고 인스턴스의 크기를 개별적으로 조정할 수도 있습니다. 

전체 구성 요소의 크기를 조정할 수 있을 뿐만 아니라 그 안에 있는 항목의 레이아웃을 변경할 수도 있습니다. 이제 적용한 크기와 관계없이 구성 요소 인스턴스를 변경할 수 있습니다. 반응형 크기 조정과 마찬가지로 XD는 크기를 조정할 때 더 크거나 더 작은 캔버스에 요소를 재배치합니다. 수동 모드로 전환하여 제한적인 부분을 보다 세부적으로 편집할 수도 있습니다.

인스턴스에서 수정된 속성(예: Joshua Tree의 텍스트 크기)은 해당 오버라이드를 유지하며, 마스터 구성 요소로부터 속성에 대한 업데이트를 수신하지 않습니다.

인스턴스의 레이아웃을 편집하면 마스터 구성 요소에서 오버라이드되지 않은 속성의 변경 내용이 인스턴스에 반영됩니다.

오버라이드 연결

구성 요소를 와이어 연결할 때 다음 원리를 이해하면 도움이 됩니다. 

• 프로토타입 모드에서 인터랙션을 마스터 구성 요소에 연결하면 구성 요소 인스턴스도 같은 방식으로 자동 연결됩니다. 
• 마스터 구성 요소에서 인터랙션의 속성을 편집하는 경우 모든 인스턴스는 인스턴스에서 오버라이드되지 않는 한 해당 업데이트를 수신합니다. 
• 마스터에서 상속된 인스턴스의 인터랙션을 삭제 또는 편집(오버라이드)할 수 있습니다. 예를 들어 인스턴스에 마스터 구성 요소에서 상속된 탭 트리거가 있는 경우 사용자는 액션 또는 대상 등과 같은 해당 탭 트리거의 속성을 수정할 수 있습니다. 이는 인스턴스가 마스터로부터 해당 탭 인터랙션에 대한 향후 업데이트를 더 이상 수신하지 않음을 의미합니다. 이를 상속된 인터랙션 오버라이딩이라고 합니다.  
• 또한 사용자는 인스턴스에 더 많은 인터랙션을 추가할 수도 있습니다. 자세한 내용은 화면 와이어 연결을 참조하십시오.

오버라이드로 요소 추가 및 제거

구성 요소의 크기 또는 구성 요소의 레이아웃을 오버라이드할 수 있을 뿐만 아니라 구성 요소를 구조적으로 오버라이드할 수도 있습니다. 이는 마스터 구성 요소와 해당 인스턴스에서 요소를 추가하거나 뺄 수 있음을 의미합니다. 

마스터 구성 요소에 오브젝트를 추가하면 이 오브젝트는 해당 인스턴스에도 추가됩니다. 오브젝트를 추가하면 XD는 반응형 크기 조정 알고리즘을 적용하고 오브젝트에 자동으로 제한 규칙을 배치합니다. 이는 해당 컨테이너와 관련된 새로운 오브젝트의 위치에 따라 달라집니다. 오브젝트가 마스터 구성 요소에서 삭제되면 모든 인스턴스에서도 제거됩니다.

또한 요소를 인스턴스에 추가하거나 인스턴스에서 제거할 수 있으며 요소가 추가되면 제한 규칙이 오브젝트에 자동으로 배치됩니다. 인스턴스에서 요소가 삭제되면 해당 인스턴스의 요소만 제거됩니다. 마스터 구성 요소에는 동일한 요소가 계속 존재합니다. 

중첩된 구성 요소 교체

상황에 따라 맞춤화해야 하는 모달 및 내비게이션 바와 같이 중첩된 구성 요소가 포함된 대형 구성 요소를 디자인하는 경우가 많이 있습니다. XD에서 구성 요소를 교체하는 작업은 매우 간단하며 에셋 패널에서 구성 요소를 드래그하여 캔버스에서 교체하고자 하는 구성 요소 위에 놓기만 하면 됩니다.

마스터 구성 요소를 인스턴스로 교체하면 모든 인스턴스에서 마스터가 교체됩니다. 

인스턴스 교체는 해당 인스턴스에만 적용되는 로컬 오버라이드입니다. 전역 수준에서 전체 구성 요소 또는 중첩된 구성 요소를 서로 교체할 수 있습니다. 

문서 간 구성 요소 사용

연결된 에셋을 사용하면 XD 클라우드 문서에서 사용 가능한 하나 이상의 디자인 파일에서 에셋(구성 요소, 색상 및 문자 스타일)을 소비할 수 있습니다. 연결된 에셋은 연결된 구성 요소의 작업 과정을 보완합니다.

소비되는 문서에서 연결된 인스턴스를 사용할 때 오버라이드(스타일 및 모양, 크기 조정 및 레이아웃, 구조)를 사용하여 소비되는 문서의 로컬 인스턴스를 맞춤화할 수 있습니다.

소스 문서에서 마스터 구성 요소를 수정하고 저장하면 소비 문서의 연결된 각 구성 요소 인스턴스 옆에 파란색 배지()가 표시됩니다. 파란색 배지에 마우스를 가져다 대어 에셋 패널에서, 그리고 가능한 경우 디자인 캔버스에서 업데이트 내용을 미리 볼 수 있습니다. 

파란색 배지를 클릭하여 개별 구성 요소에 대한 업데이트를 수락하거나 에셋 패널의 아래쪽에 있는 모두 업데이트를 클릭하여 문서 내에 있는 모든 인스턴스를 업데이트합니다. 연결된 에셋과 관련된 추가 정보는 연결된 에셋을 사용하여 작업을 참조하십시오.

기능 제한 사항

구성 요소를 사용하여 작업하는 경우 다음과 같은 제한 사항에 대해 살펴보십시오.

• 하나의 문서에서 다른 문서로 마스터 구성 요소를 옮길 수 없습니다.
• 마스터 구성 요소 편집 및 마스터로 재설정 옵션에서는 구성 요소를 다중 선택할 수 없습니다.
• 패스로 변환 옵션을 선택하면 오버라이드가 제거됩니다. 편집을 계속하면 해당 오브젝트 인스턴스에서 오버라이드가 제거됩니다.
• 마스터에서 편집하는 경우 불투명도 및 회전은 현재 마스터 속성으로 지원되지 않습니다. 각 인스턴스는 고유한 불투명도 및 회전을 갖습니다.