[UI 스터디] 컴포넌트 : 모양이 아니라 기능이 중요하다 #Variants #Property

컴포넌트는 모양이 아니라 기능이 중요하다.

UI는 형태가 아니라 목적, 기능이 중요하다. 따라서 공부할 때는 생김새가 아니라 (물론 중요하고 멘탈 모델에 의해서 수렴하는 부분이 생기지만 ) UI의 목적과 기능에 초점을 두고 공부해야 한다. → 버튼 마다 모양과 색상이 다른데 같은 버튼으로 인식하는 이유

 

컴포넌트는 크게 6가지로 분류된다.

• 액션 - 사용자가 중요한 행동을 수행할 때
• 인풋 - 사용자의 입력을 받을 때 
• 인포메이션 - 사용자에게 서비스의 상태나 안내 사항을 전달할 때 
• 컨테이너 - 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트
• 네비게이션 - 사용자가 페이지를 이동할 때 
• 컨트롤 - 사용자가 설정이나 값을 수정할 때 

 

의사 상태 (Pseudo수도-state)

- 컴포넌트를 설계할  때 만들 수 있는 다양한 상태값. 의사란 '가짜의, 가상의'라는 뜻.
- 컴포넌트의 가상의 상태를 표시할 때 사용

ex) 버튼 Hover 하면 색끼리 바뀔 때, 실제 버튼이 다른 걸로 바뀐 것이 아니라 버튼이 가진 가상의 상태를 나타내는 것.

설계 시 주의할 점

• 의사 상태의 종류는 hover, pressed, active, visited, link, focus, checked, disabled 등 다양한 경우가 있다.
• 컴퍼넌트 마다 쓸 수 있는 것과 없는 것이 있다.

컴포넌트에 의사 상태를 적용해서 만들 때는, 실제 구현할 개발자와 이야기를 많이 나눠서 구현 여부를 잘 논의하는 과정이 필수.

 

---

 

마스터 컴포넌트 & 인스턴스 컴포넌트

★ 마스터 컴포넌트 = 원본       ★인스턴스 컴포넌트 = 복제본

• 마스터를 변경하면 모든 인스턴스 변경되고, 인스턴스는 개별적으로 변경되고 그 변경이 우선 적용됨.
• 마스터 컴포넌트를 지우더라도 인스턴스 컴포넌트까지 다 같이 지워지지는 않음. 대신 남아있는 인스턴스를 편집하거나 속성값을 조정하려면 마스터를 복구해야 함.

 

★ 배리언츠 & 프로퍼티 기능 : 컴포넌트를 다양한 환경에서 유연하게 쓸 수 있게 함

• 컴포넌트가 가상의 상태를 가질 때, 형태가 조금씩 변화할 수 있다.
• 컴포넌트 안의 요소가 바뀌는 경우들도 있다.
• 배리언츠와 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 기능이다.

- 피그마에서 디자인한다는 건 컴포넌트를 만들고 인스턴스를 다루는 것과 밀접한 관련이 있다.
- 오토레이아웃 등 피그마 스킬을 응용해 컴포넌트를 만들고 인스턴스를 디자인에 적용하는 과정을 반복하기 때문
- 이 과정에서, 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들기 위해 배리언츠와 프로퍼티를 사용한다.

• Variants '변종' Vari- 변화와 관련있는 표현
• 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능.
• 즉, 배리언츠는 컴포넌트의 '가상의 상태를 만들 때' 사용한다.
  
  

디자인 구조가 바뀌지 않는 선에서 요소들이(아이콘, 글내용) 변경된 프로퍼티

 

프로퍼티 Property -  뜻 '속성'. 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용. 

아무도 우리가 누구인지 모른다는 문제점을 어떻게 해결해야하는 지 
, 왜 우리가 1석 2조가 파란색이 되어야하는지

배리언츠와 프로퍼티를 고르는 기준 :
컴포넌트에 적용된 파운데이션 속성(아이콘의 크기나 색상)이 변화하는지 선택 기준으로 해야 한다. 

 

버튼에 적용한 파운데이션 요소인 '색상, 간격, 폰트'가 바뀌었다면 배리언츠로 만들어야 한다.

→ 디자인이 바뀌었어도, 컬러, 간격, 폰트, 아이콘의 크기 등 파운데이션 값이 바뀌지 않았다면 프로퍼티로 조정.

 

아이콘과 라벨의 간격이 동일하기 때문에, 여백도 그대로

 

✅ 예외 ✅

 

아이콘이 없었는데 생기는 경우는 배리언츠로 만들어도, 프로퍼티로 조정해도 무방하다.
(실제 디자인 • 개발 환경에서는 두 방식을 모두 유연하게 섞어서 사용한다.)

 

• 디자인에서는 프로퍼티로 조정할 수 있지만 개발에서는 불가능한 경우가 있기도 하고, 그 반대의 경우도 있음

↳ 그렇기 때문에 배리언츠, 프로퍼티를 딱 잘라서 나누는 경우는 '파운데이션 값이 변했다.' 뿐.
나머지는 디자이너가 유연하게 판단해야 한다. 그렇기 위해서는? 기본기가 탄탄해야 한다!
실무에서는 내가 그렇게 판단을 내리기 위해서 근거를 제시해야 한다는 점. 명심!

 

 

---

 

★ 마스터 컴포넌트를 선택하면 프로퍼티 패널이 생긴다.

👁️ Boolean 불리언 - Yes OR No 선택 형식 (켜기, 끄기 가능), 컴포넌트 안에 요소를 안보이게 또는 보이게 하는 속성, 요소 선택 시 레이어 패널에서도 설정할 수 있음. 아이콘 있는 버튼, 없는 버튼에 활용도가 가장 높다.

 

레이어 패널에서 설정 가능한 불리언

 

---

 

⃟Instance Swap - 인스턴스를 다른 인스턴스로 교체하는 기능(주의-인스턴스 아닌 걸로 바꾸려고 끙끙거리는 사람 있음). 컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 다른 인스턴스로 교체할 수 있는 속성. 주로 아이콘, 버튼 등을 교체할 때 사용.

아이콘에 인스턴스 스왑을 적용하면, 다른 아이콘으로 변경하기 쉬움.

 

 

 

---

 

🔡 Text - 컴포넌트 안에 텍스트를 수정하기 용이하도록 속성으로 만들어준다. 이 프로퍼티 기능이 없을 때는 컴포넌트를 더블 클릭 해서 수정했음. 그러나 컴포넌트 안의 레이어를 강제로 수정하는 느낌이었다. 이 기능이 생기고 나서는 좀 더 편하게 텍스트를 (아래 이미지 처럼) 설정할 수 있게 됨.

텍스트레이어를 누르고 Create text property를 누르면 패널에서 버튼 텍스트를 편집할 수 있게 된다.