디자인 시스템 (5) 컴포넌트 프로퍼티 기능

지난 시간에 배운 컴포넌트에 이어서 

이번에는 컴포넌트의 다양한 확장을 만드는 컴포넌트 프로퍼티 기능을 준비했습니다. 

설명 필요 없이 바로 진행 들어가겠습니다...!

---

1. 컴포넌트 프로퍼티란?

마스터(원본)에 하위 레이어의 종류와 출력 여부,텍스트를 조정할 수 있도록 속성으로 등록하는 기능을 말합니다.

텍스트, 레이어 출력 여부, 인스턴스 전환 기능 세가지 속성을 조정해서 

다양한 조합의 인스턴스를 손쉽게 조정할 수 있습니다.

---

2. 컴포넌트 프로퍼티 등록하기

프로퍼티를 생성하는 방법은 두 가지가 있습니다. 첫번째는 프로퍼티를 마스터 컴포넌트에서 생성하는 것이고,

두번째는 하위 레이어에서 연결될 컴포넌트 프로퍼티를 생성하여 등록하는 방법입니다.

 

한 개의 컴포넌트 프로퍼티에 여러 레이어를 연결 지을 수도 있고, 

출력 여부를 결정짓는 Boolean 프로퍼티와 Text 프로퍼티를 각각 나눠서도 등록할 수 있습니다.

 

본인이 조합하고 싶은 규칙을 선택하여 원하는 방식으로

프로퍼티를 등록해 봅시다. 

---

3. 예시로 알아보는 컴포넌트 프로퍼티 등록하기

이번에는 예시를 통해 알아보겠습니다.

 

profile_image 프로퍼티는 on/off를 결정짓는 Boolean 프로퍼티로

name 프로퍼티는 프로퍼티에서 텍스트를 바꿔 줄 수 있는 Text 프로퍼티로

emoji 프로퍼티는 인스턴스 간 전환이 가능한 Instance swap 프로퍼티로

 

각각 마스터 컴포넌트의 프로퍼티로 등록하면

인스턴스에서는 우측처럼 UI가 변하는것을 볼 수 있습니다.

 

이렇게 각 레이어에서 원하는 요소를 찾아 프로퍼티를 통해 컨트롤하도록 조절하시면 되며, 

한 프로퍼티에서 여러 속성을 한꺼번에 컨트롤하는 것도 가능하단 점도 참고해 주시길 바랍니다.

---

4. 인스턴스를 마스터로 다시 등록하기

컴포넌트 프로퍼티를 사용하는 이유는 위 모습대로 맞춰 주기 위해 사용합니다.

하나의 UI 샘플을 만들고, 그 샘플을 이용해서 다양한 스타일을 시도하여 제작합니다. 

 

제작된 샘플을 이용하여 여러 디자인 안건으로 제작하고 나서

그 안건을 하나의 컴포넌트 묶음으로 저장할 수 있는 것입니다. 

 

이 기능은 추후 베리언츠(Variants)라고 하는 기능으로 이어지게 되므로

이 구성 방식을 기억해 주셨으면 좋겠습니다.

---

여기까지 따라오시느라 고생 많으셨습니다. 

다음 시간에는 대망의 Variants에 대해서 다루어 보도록 하겠습니다.