구성 요소는 다양한 컨텍스트에서 버튼을 사용하는 것과 같이 컨텍스트 및 레이아웃에 대한 인스턴스를 다변화하면서 반복 요소를 만들고 유지 관리하는 데 도움이 되는 탁월한 유연성을 지닌 디자인 요소입니다.

구성 요소를 사용하여 동일한 기본 요소의 여러 버전을 간편하게 유지 관리하는 방법을 살펴보십시오.

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

• XD의 디자인 시스템
• 반응형 크기 조정 및 제한

구성 요소 만들기

구성 요소를 만들려면 오브젝트 > 구성 요소 만들기를 선택하십시오. 오브젝트 또는 오브젝트 그룹을 선택하고 다음 옵션 중 하나를 사용할 수도 있습니다.

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

주의해야 할 사항

• XD에는 메인 구성 요소를 편집하는 전용 보기 모드가 없습니다. 메인 구성 요소를 캔버스에서 바로 편집할 수 있습니다.
• 캔버스에서 메인 구성 요소를 삭제하는 경우에도 인스턴스를 선택하고 컨텍스트 메뉴에서 메인 구성 요소 편집 옵션에 액세스할 수 있습니다. XD가 캔버스에서 메인 구성 요소를 생성합니다.
• 단일 구성 요소 인스턴스를 링크 해제하려면 컨텍스트 메뉴에서 구성 요소 그룹 해제 옵션을 사용하십시오. 단, 캔버스에서 모든 인스턴스를 링크 해제하려면 에셋 패널에서 삭제 옵션을 사용해야 합니다.
• 메인 구성 요소를 편집하려면 테두리 상자의 왼쪽 상단에 있는 다이아몬드가 녹색으로 표시되어 있어야 합니다.

모범 사례

다음은 구성 요소를 사용하여 작업할 경우 참고할 수 있는 몇 가지 모범 사례입니다.

• 구성 요소의 대규모 디자인 시스템을 만드시겠습니까? 관련 메인 구성 요소를 별도의 아트보드에서 구성해야 합니다. 예를 들어 현재 아트보드에 있는 버튼 및 다른 아트보드에 있는 내비게이션 바를 구성할 수 있습니다.
• 디자인 시스템을 구축할 때 구성 요소를 가장 작은 단위로 빌드하여 최대한의 유연성을 보장하며 재사용할 수 있도록 하십시오. 예를 들어 대화 상자 구성 요소를 만들 때 대화 상자의 버튼은 대화 상자 구성 요소 내에 인스턴스로 중첩되어 있어야 합니다.

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

메인 구성 요소의 모든 사본을 인스턴스라고 합니다. 구성 요소 인스턴스는 왼쪽 상단에 녹색으로 채워진 다이아몬드로 표시됩니다. 메인 구성 요소를 변경하면 모든 인스턴스에 동일한 변경 내용이 적용됩니다.

오버라이드는 메인 구성 요소가 아닌 해당 인스턴스에만 적용되는 고유한 변경 내용입니다. 인스턴스의 속성을 바꾸면 XD는 해당 속성을 오버라이드로 표시합니다. 메인 구성 요소에 대한 연결을 끊지 않고 인스턴스의 속성을 오버라이드할 수 있습니다. 

모범 사례

다음은 구성 요소 인스턴스를 사용하여 작업할 경우 참고할 수 있는 몇 가지 모범 사례입니다.

• 구성 요소 변형을 테스트해 보시겠습니까? 컨텍스트 메뉴에서 구성 요소 그룹 해제를 선택하여 메인에서 인스턴스를 분리합니다.
• 다음 항목을 찾으려 하십니까?
  • 캔버스에 있는 구성 요소의 모든 인스턴스를 찾으려면 에셋 패널에서 구성 요소를 마우스 오른쪽 버튼으로 클릭하고 캔버스에서 강조 표시를 선택합니다.
  • 인스턴스 작업을 하는 동안 메인 구성 요소를 찾으려면 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 메인 구성 요소 편집을 선택합니다.

메인 구성 요소 편집

메인 구성 요소를 편집할 때 특정 속성에 대한 오버라이드가 포함되지 않는 한 모든 인스턴스가 업데이트됩니다. 

메인 구성 요소를 편집하려면 캔버스에서 인스턴스나 구성 요소를 선택하고 다음 옵션 중 하나를 사용하십시오.

주의해야 할 사항

• 회전 및 불투명도 속성은 메인 구성 요소에서 인스턴스로 반영되지 않습니다.
• 메인 구성 요소를 편집하려면 테두리 상자의 왼쪽 상단에 있는 다이아몬드 장식이 녹색으로 표시되어 있어야 합니다.
  

모범 사례

다음은 메인 구성 요소 편집에 관한 모범 사례입니다.

• 캔버스에서 메인 구성 요소를 삭제하는 경우 인스턴스를 마우스 오른쪽 버튼을 클릭하고 메인 구성 요소 편집을 선택합니다. XD는 캔버스에서 메인 구성 요소를 생성합니다. 

구성 요소 인스턴스 오버라이드

메인 구성 요소는 디자인 시스템을 유지 관리하는 데 필요한 일관성을 제공합니다. 메인 구성 요소에 적용하는 모든 변경 내용은 해당 인스턴스에 자동으로 반영됩니다. 그러나 디자인 시스템은 해당 시스템이 제공하는 유연성만큼만 사용할 수 있습니다. 동일한 원본 요소로 시작할 수 있지만 사용되는 컨텍스트에 따라 이를 맞춤화해야 합니다. 여기에 인스턴스가 적용됩니다.

오버라이드는 메인 구성 요소가 아닌 해당 인스턴스에만 적용되는 고유한 변경 내용입니다. 인스턴스의 속성을 바꾸면 XD는 해당 속성을 오버라이드로 표시합니다. 메인 구성 요소에서 동일한 속성을 편집하더라도 오버라이드된 속성은 항상 그대로 유지됩니다. 

오버라이드를 지우고 메인 구성 요소를 재설정하려면 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 메인 상태로 재설정을 선택합니다. 

오버라이드 유형

다음은 일부 오버라이드 유형 및 사용 시나리오입니다.

크기 오버라이드

구성 요소의 크기도 조정할 수 있으며, 바로 사용할 수 있는 강력한 반응형 크기 조정 기능도 함께 제공됩니다. 메인 구성 요소의 크기를 조정하면 오버라이드로 크기가 조정되지 않은 인스턴스의 크기도 자동으로 조정됩니다. 따라서, 크기가 조정된 인스턴스는 오버라이드로 크기가 조정된 위치를 유지하게 됩니다. 

메인 구성 요소 또는 해당 인스턴스에서 크기 조정 기능은 어떻게 작동합니까?

• 메인 구성 요소에 영향을 주지 않고 인스턴스의 크기를 개별적으로 조정할 수 있습니다.
• 전체 구성 요소의 크기를 조정할 수 있으며 그 안에 있는 항목의 레이아웃을 변경할 수 있습니다.
• 적용한 크기와 관계없이 구성 요소 인스턴스를 변경할 수 있습니다.

반응형 크기 조정과 마찬가지로 XD는 크기를 조정할 때 더 크거나 더 작은 캔버스에 요소를 재배치합니다.

속성 관리자에서 반응형 크기 조정을 자동에서 수동으로 전환하여 보다 세부적으로 제한 사항을 편집할 수 있습니다.

모양 오버라이드

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

레이아웃 및 구조 오버라이드

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

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

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

주의해야 할 사항

• 모든 오버라이드를 재설정할 수 있으나 개별 구성 요소를 다시 메인 구성 요소로 오버라이드할 수는 없습니다. 
• 속성을 인스턴스에 대한 오버라이드로 표시한 경우 메인 상태로 재설정을 선택하여 메인 구성 요소와 다시 동기화되도록 하십시오. 

모범 사례

다음은 구성 요소 인스턴스에서의 오버라이드 작업 시 참고할 수 있는 몇 가지 모범 사례입니다.

• 재사용할 수 있도록 변형된 구성 요소를 만들려면 오버라이드 포함 인스턴스가 아닌 메인 구성 요소에 상태를 만듭니다.
• 인스턴스를 오버라이드하는 동안 메인 구성 요소 업데이트가 불필요한 속성을 오버라이드해야 합니다. 예를 들어 버튼 구성 요소에서 텍스트를 오버라이드하면 라벨이 다를 수 있지만 크기와 색상은 여전히 메인 구성 요소와 동기화됩니다. 

구성 요소에 상태 추가

구성 요소 상태를 사용하면 다시 사용할 때마다 구성 요소의 다양한 변형을 저장할 수 있습니다. 메인 구성 요소에서 오버라이드를 만들면 해당 오버라이드에서 상태를 만들어 간편하게 다시 사용할 수 있습니다.

예를 들어 기본 및 보조와 같은 다양한 변형을 포함하는 버튼 구성 요소를 만들 수 있습니다. 상태를 사용하면 메인 구성 요소에서 오버라이드를 통해 변형 작업을 수행할 수 있습니다. 

상태 및 구성 요소로 작업할 때는 다음 사항을 기억하십시오.

• 메인 구성 요소에서 만든 상태는 해당 구성 요소의 모든 인스턴스에서 사용할 수 있습니다. 이를 통해 여러 개의 인스턴스가 있는 구성 요소를 만들고 상태를 간편하게 전환할 수 있습니다.
• 속성 관리자의 상태 전환기에서 이름을 바꾸고 삭제할 수 있습니다.
• 구성 요소의 한 상태에서 다른 상태로 전환하는 작업으로 트리거를 추가할 수 있습니다. 예를 들어 버튼 구성 요소 위에 마우스를 올리면 기본값에서 호버 상태로 전환할 수 있습니다. 

상태 추가

구성 요소를 생성한 후 속성 관리자에는 기본 상태로 구성 요소가 나열됩니다. 이제 구성 요소에 새 상태, 호버 상태, 토글 상태 등 세 가지 유형의 상태를 추가할 수 있습니다.

새 상태 만들기

구성 요소의 변화(구성 요소의 비활성화 버전 또는 클릭 버전 등)를 표시하고자 하는 시나리오에 대한 새 상태를 사용합니다.

호버 상태 만들기

프로토타입과 인터랙션하는 경우 구성 요소 위로 마우스를 가져다 댈 때 구성 요소를 변경하고 다른 상태를 표시하려면 호버 상태를 사용하십시오.

토글 상태 만들기

토글, 라디오 버튼, checkbox 등과 같은 인터랙티브한 토글 동작이 있는 구성 요소를 만들려면 토글 상태를 사용합니다. 

상태 보기 및 관리

구성 요소의 상태를 만든 후 구성 요소의 속성을 편집하고 구성 요소와 인터랙션할 때 구성 요소가 어떻게 나타나는지 시각화할 수 있습니다. 다음은 상태와 관련된 몇 가지 워크플로입니다.

상태 오버라이드

메인 구성 요소에서 기본 상태로 편집한 모든 내용은 모든 인스턴스의 기본 상태로 반영됩니다. 마찬가지로 메인 구성 요소에서 특정 상태를 편집하면 해당 특정 상태에 대한 편집 내용을 수신한 모든 인스턴스에 반영됩니다. 항상 메인 구성 요소의 상태를 편집하여 모든 인스턴스에 걸쳐 업데이트되도록 해야 합니다.

상태를 사용하면 텍스트, 비트맵, 크기, 레이아웃 및 모양과 같은 속성을 오버라이드할 수 있습니다. 인스턴스에서 상태 속성을 오버라이드하면 더 이상 메인 구성 요소에서 해당 속성에 대한 업데이트를 수신하지 않게 됩니다.

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

인터랙티브 요소 추가

프로토타입 모드에서 구성 요소 상태 간 인터랙션을 와이어로 연결하기 위해 탭, 호버, 키 및 게임패드 및 음성 트리거를 사용할 수 있습니다. 구성 요소 상태 간에 인터랙션 와이어 연결은 아트보드 사이의 인터랙션 와이어 연결과 유사합니다. 주요 차이점은 구성 요소 상태 간에 인터랙션을 와이어 연결할 때 아트보드 대신 대상으로 상태를 선택하는 것입니다.

동일한 구성 요소 상태에 대해 여러 인터랙션을 정의할 수 있습니다. 예를 들어 호버 상태와 탭 상태가 모두 있는 토글 스위치가 있는 경우 4-7단계를 두 번 반복하여 탭과 호버 상태를 정의하여 해당 인터랙션을 정의할 수 있습니다. 여러 인터랙션을 만든 후 정의된 인터랙션을 표시하는 인터랙션 섹션을 볼 수 있습니다. 이러한 인터랙션 사이를 전환하고 요구 사항에 맞게 인터랙션 특성을 수정합니다. 

다중 상태 버튼을 사용하여 플라이아웃 메뉴 또는 팝업과 같은 중첩된 호버 인터랙션을 생성하려는 경우 호버 상태를 사용하여 구성 요소를 중첩할 수도 있습니다.

주의해야 할 사항

• 구성 요소를 더블 클릭하면 속성 관리자의 상태 피커가 사라집니다.
• XD는 상태 간에 트리거로 탭, 호버, 키 및 게임패드 및 음성만 지원합니다.
• XD는 한 상태에서 인스턴스의 다른 상태로 오버라이드를 반영하지 않습니다.

모범 사례

다음은 구성 요소에 상태를 추가할 경우에 참고할 수 있는 몇 가지 모범 사례입니다.

• 구성 요소의 다양한 변형을 다시 사용할 수 있도록 항상 상태를 만듭니다.
• 프로토타입 모드로 전환하고 여러 상태 간의 인터랙션을 수동으로 편집할 수 있습니다.
• 상태 간에 인터랙티브한 요소를 추가할 때 색상과 같은 속성을 변경하는 경우 전환 없음으로 작업 또는 애니메이션으로 디졸브를 선택합니다. 상태 사이의 위치 또는 크기를 애니메이트하는 경우 동작으로 자동 애니메이트를 선택합니다.
• 새 상태를 만들 때 기본 상태 또는 기존 상태를 복제하여 시작할 수 있습니다. 최종 목표에 따라 기본 상태를 선택한 다음 +를 클릭하여 새 상태에 복제하거나 기존 상태를 선택한 다음 +를 클릭하여 해당 상태를 복제할 수 있습니다. 기존 상태에서 새 상태를 만들면 새 상태에도 동일한 오버라이드를 갖게 됩니다. 즉, 오버라이드된 속성이 기본 상태에서 업데이트를 수신하지 않습니다. 대부분의 경우 기본 상태에 대해 +를 클릭하여 새 상태를 만드는 것이 좋습니다. 기본 상태로 시작하면 메인 구성 요소와 동기화되고 오버라이드가 포함되지 않습니다.

구성 요소 관리

구성 요소에 인터랙티브 요소 추가

구성 요소 및 상태 간에 인터랙티브한 요소를 추가할 수 있습니다. 메인 구성 요소에서 인터랙션을 만들면 해당 구성 요소의 모든 인스턴스가 해당 인터랙션을 수신합니다. 메인 구성 요소의 인터랙션을 변경하면 인스턴스 인터랙션이 자동으로 업데이트됩니다.

메인 구성 요소로부터 더 이상 업데이트를 수신하지 않을 인스턴스에 대한 인터랙션을 오버라이드할 수도 있습니다. 디자인 오버라이드와 마찬가지로 구성 요소에 대한 인터랙션 속성을 오버라이드할 수 있습니다.

주의해야 할 사항

• 메인 구성 요소에서 인스턴스로 인터랙션을 반영하는 것을 막을 수 있는 방법은 없습니다.
• 인스턴스에 추가된 인터랙션과 메인 구성 요소에서 상속된 인터랙션을 구별할 수 있는 방법은 없습니다.
• 상태에 대해 제한된 작업 및 트리거 일부가 지원됩니다. 

모범 사례

다음은 구성 요소에 인터랙티브한 요소를 추가할 때의 모범 사례입니다.

• 문서 간에 구성 요소를 복사하여 붙여넣거나 공유하는 경우 XD는 대상 아트보드를 항상 사용할 수 있다고 보장할 수 없으므로 구성 요소를 아트보드 인터랙션에 유지하지 않습니다. 그러나 XD는 각 구성 요소의 인터랙션 상태를 유지합니다. 이는 마우스 오버 상태와 아트보드에 탭 트리거를 포함한 구성 요소에 대한 것입니다. 다른 문서에 붙여넣을 때 XD는 마우스 오버 상태 인터랙션을 유지하고 탭 트리거를 아트보드에 버립니다. 
• 메인 구성 요소와 인스턴스에 인터랙션을 추가할 시기를 선택합니다.
• 모든 인스턴스가 동일한 대상을 공유하는 경우 메인 구성 요소의 와이어 연결이 모든 인스턴스에 자동으로 반영되므로 보다 효과적입니다. 홈 화면으로 이동하는 홈 버튼을 예로 들 수 있습니다.
• 모든 인스턴스 또는 인스턴스 중 일부의 대상이 다른 경우 메인 구성 요소 대신 개별 인스턴스를 연결하는 것이 보다 간편합니다. 예를 들어, 프로젝트 전체에서 해당 사용량 및 컨텍스트에 따라 다른 대상이 있는 기본 버튼이 사용됩니다.

자세히 알아보기

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

시청 시간: 9분

다음 단계

지금까지 XD의 구성 요소를 사용하여 작업하는 방법에 대해 살펴보았습니다. 한발 더 나아가 XD에서 중첩된 구성 요소를 사용하는 방법에 대해 알아보십시오.

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