[사전캠프 3주차] 월요일 TIL

10/14 일일 목표📝

4주 차 강의 듣기

 

---

 

 

📖 오늘 배운 내용!

 

 

프로퍼티(Property)?

속성이라는 뜻으로, 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을을 다룰 때 사용.

아이콘 + 텍스트, 라는 기본 구조는 그대로 두고 아이콘과 텍스트의 스타일만 변경할 경우 프로퍼티로 조정

 

 

 

컴포넌트 프로퍼티?

프로퍼티의 종류는 4가지

 

1) Variants 배리언츠

• 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능
• 가상의 상태를 만들 때 사용.

기본상태의 변형형태.

 

 

 

2) Boolean 불리언

• 컴포넌트 안에 있는 요소들을 보이게 하거나 안 보이게 하는 속성
• 레이어를 껐다 켰다 할 수 있다.

아이콘에 불리언을 적용하면 껐다켰다 할 수 있다.

 

 

 

 

3) Instance swap 인스턴스 스왑

• 컴포넌트 안에 다른 컴포넌트 인스턴트가 있을 경우 다른 인스턴스로 교체 가능
• 주로 버튼 안의 아이콘, 팝업 안의 버튼을 교체할 때 사용

아이콘을 인스턴스 스왑을 적용하면 이렇게 바꿀수있다.

 

 

 

 

4) Text

• 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 속성으로 만들 수 있다.

오른쪽 패널에서 텍스트를 쉽게 변경가능하다.

 

 

 

프로퍼티와 베리언트를 고르는 기준?

모두 디자인에 변화를 준다는 점은 동일하나, 컴포넌트에 적용된 파운데이션(부속 설정들) 이 변경되는지를 기준으로 한다.

버튼에 적용되는 색상, 간격, 폰트가 변경된다면? > 배리언츠

파운데이션 값은 변경되지 않고 추가되거나 아이콘만 바뀐다면? > 프로퍼티

 

 

---

 

👩‍🏫 오늘 진행하며 어려웠던 부분

 

배리언 추와 프로퍼티 등 처음 들어보는 용어가 많아 조금 헷갈렸다.

 

 

---

 

👀 어려웠던 부분을 어떻게 해결했을까?

 

피그마에서 실습해 보니, 역시 말이나 글로 볼 때보다는 개념 정립이 확실히 된 것 같다.

그리고 블로그에 정리하면서 다시 개념을 훑어보니 정리가 되었다!

그래도 프로퍼티를 만드는 것들은 조금 더 손에 익어야 할 것 같다~