[TIL] 0619 학습일지

컴포넌트 

디자인에서 컴포넌트란 파운데이션 조합을 쌓아 만들어지는 구성품을 이야기한다. 개체라고 생각해도 되겠다.  

버튼 컴포넌트를 보았을 때, 모양 색상 모두 다르지만 유저가 '버튼'이라고 받아들이는 이유는 버튼의 하는 일을 기준으로 생각하기 때문이다. 즉 컴포넌트는 모양이 아니라 기능이 중요하다. 

 

컴포넌트와 인스턴스의 관계

마스터 컴포넌트는 원본이고, 인스턴스는 마스터 컴포넌트의 복제본이다. 마스터 컴포넌트를 복사하면 인스턴스가 생긴다. 피그마에서는 빈강정같은 아이콘(♢)이 붙어 있다. 

 

- 컴포넌트를 수정하면 인스턴스에도 반영된다.

- 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않는다.

- 컴포넌트를 지우더라도 인스턴스는 남아 있다. 

- 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반적인 프레임으로 변경된다. 

 

 

 

배리언츠 (Variants)

배리언츠는 컴포넌트의 가상의 상태를 만들때 사용한다. 

아래 사진에서 볼때, <마우스를 올렸을 때> <누를 수 없을때>가 기본상태의 베리언츠이다. 

 

 

 

 

프로퍼티 (Property)

속성이란 뜻을 가진 프로퍼티는 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소를 다룰 때 사용한다. 

 

디자인 구조는 그대로 두고 버튼의 글자나 아이콘의 스타일이 바뀌는 건 프로퍼티로 조정한다.

 

 

 

📌 버튼 컴포넌트 

버튼 컴포넌트는 누름으로써 동작을 수행하는 요소이다. 따라서 버튼을 설계할 때는 누를 수 있다는 시각적인 힌트를 충분히 드러내야 하며, 이를 행동유도성, '어포던스' 라고 부른다. 컴포넌트는 항상 구조파악이 우선되어야 한다. 일반적으로 버튼은 컨테이너, 레이블(버튼 텍스트), 리딩 엘리먼트, 트레일링 엘리먼트로 구성된다. 

 

 

참고 문서 

https://m3.material.io/components/all-buttons

All buttons – Material Design 3

 

 

 

 

📌 텍스트필드 컴포넌트 

사용자가 무언가를 입력할 수 있게 하는 컴포넌트를 인풋이라 하는데, 텍스트필드는 그중 가장 대표적인 UI 이다.

 

텍스트필드 - (출처 : 머터리얼 디자인)

 

 

 

참고 문서

https://m3.material.io/components/text-fields/overview

Text fields – Material Design 3