체계적으로 배우는 피그마 기초 완전 정복 4주차

의사 상태와 컴포넌트 프로퍼티

• 컴포넌트를 다양하게 사용할 수 있도록 해주는 컴포넌트 프로퍼티를 알아볼 거예요.

합성 컴포넌트와 네스티드 인스턴스

• 컴포넌트와 컴포넌트를 결합하는 방법을 같이 알아봐요.

컴포넌트 프로퍼티의 이해

• 컴포넌트를 제대로 사용하기 위해선 컴포넌트의 상태와 속성을 조정하는 컴포넌트 프로퍼티를 알아야 해요. 컴포넌트 프로퍼티가 어떤 개념인지 한 번 같이 알아볼까요?

* 의사 상태 복습하기

• 컴포넌트 프로퍼티는 의사 상태와 아주 관련이 깊어요. 가볍게 복습해볼까요?
• 의사 상태에서 의사란 가짜의 가상의(pseudo:'수도'라고 읽어요)라는 뜻이라는 걸 배웠어요.
• 예시를 다시 확인해 볼까요?
  • 버튼에 마우스를 올렸을 때 색깔이 바뀌는 건, 실제 버튼이 다른 걸로 바뀐 것이 아니라 버튼이 가진 가상의 상태를 나타내는 거예요.
    

* 컴포넌트 프로퍼티

• 컴포넌트 프로퍼티가 무엇인가요?
  • 의사 상태에서, 컴포넌트는 가상의 상태를 가질 수 있다는걸 배웠어요.
  • 컴포넌트가 가상의 상태를 가질 때, 형태가 조금씩 변화할 수 있어요.
  • 또한 컴포넌트 안의 요소가 바뀌는 경우들도 있어요.
  • 컴포넌트 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능이에요.
• 컴포넌트 프로퍼티는 왜 쓰나요?
  • 피그마로 UI를 디자인한다는 건 컴포넌트를 만들고 인스턴스를 다루는 것과 밀접한 관련이 있어요.
  • 오토레이아웃 등 피그마를 최대로 활용해 컴포넌트를 만들고, 인스턴스를 디자인에 적용하는 과정을 반복하기 때문이에요.
  • 이 과정에서, 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들어야 한다고 배웠죠?
  • 이때 필요한 기능이 컴포넌트 프로퍼티예요.
• 배리언츠 (Variants)
  • 배리언츠도 넓은 관점에선 프로퍼티의 한 종류지만 별개의 속성이라고 생각해주세요!
  • 배리언츠는 '변종'이라는 뜻이에요. 배리언츠의 vari-는 '변화'와 관련있는 표현이에요.
  • 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능이에요.
  • 즉, 배리언츠는 컴포넌트의 가상의 상태를 만들 때 사용해요.
    
• 프로퍼티 (Property)
  • 프로퍼티는 '속성'이라는 뜻이에요.
  • 프로퍼티는 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용해요.
    
  • 기본 상태 + 아이콘이라는 디자인 구조는 그대로 두고 버튼의 글자나 아이콘의 스타일을 바꿀 때 프로퍼티로 조정해요.
• 컴포넌트 프로퍼티 알아보기
  • 배리언츠를 제외하면 피그마 컴포넌트를 만들 때 설정할 수 있는 프로퍼티는 3가지에요.
    
  • 1) Boolean
    • Boolean(불리언)은 Y or N를 선택하는 형식이라는 뜻이에요.
    • 참 또는 거짓, 예 또는 아니오, 켜기 또는 끄기 모두 가능해요.
  • 2) Instance swap
    • 인스턴스 스왑 기능은 인스턴스를 다른 인스턴스로 교체하는 기능이에요.
    • 주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용해요.
  • 3) Text
    • 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어줘요.
• Q. 배리언츠와 프로퍼티를 고르는 기준이 궁금해요.
  • 배리언츠와 프로퍼티 모두 디자인에 변화가 생긴다는 건 동일해요.
  • 컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 해야 해요.
  • 예시
    • 버튼에 적용한 파운데이션 요소인 색상, 간격, 폰트가 바뀌였죠? 그렇다면 배리언츠로 만들어야 합니다.
      
    • 언뜻 보기엔 디자인이 바뀌였지만, 색상이나 간격, 폰트, 아이콘의 크기 등 파운데이션 값이 바뀌진 않았다면 프로퍼티로 조정해요.
      

버튼 컴포넌트의 의사 상태 만들기

* 버튼의 위계 배리언츠 만들기

• 위계 (Hierarchy, Priority)
  같은 제품 안에서도 버튼을 보면 디자인이 모두 다르죠?
  어떤 버튼은 색깔이 꽉 채워져 있고, 어떤 버튼은 테두리만 있고, 어떤 버튼은 회색 배경석으로 되어 있어요. 이건 모두 버튼의 위계를 나눠놨기 때문이에요.
  일반적으로 버튼은 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)의 3단계를 가져요.

* 버튼의 크기 배리언츠 만들기

• 크기 (Size)
  버튼의 크기는 일반적으로 Large, Medium, Small의 3단계를 사용해요. 만드는 제품에 따라 사이즈를 굳이 만들지 않아도 괜찮아요. 한 가지 사이즈로만 써도 되고, 2개만 써도 되고, 3개 이상을 써도 상관없어요!

* 버튼의 상태 배리언츠 만들기

• 상태 (State)
  버튼이 가질 수 있는 의사 상태는 Default(Enable), Hover, Pressed, Didabled 등 다양하게 있지만, 실습에서는 버튼을 누르고 있는 상태, 즉 Pressed만 만들어 보기로 해요!

버튼 컴포넌트에 아이콘 추가하기

• 실습

버튼 컴포넌트의 아이콘 바꾸기

• 실습

버튼 컴포넌트의 텍스트 바꾸기

• 실습

합성 컴포넌트와 네스티드 인스턴스

• 컴포넌트 여러개를 결합해 다른 컴포넌트를 만드는 합성 컴포넌트와, 합성 컴포넌트 안에 있는 컴포넌트들의 속성을 다루는 네스티드 인스턴스를 알아봐요.

* 합성 컴포넌트의 개념

• 컴포넌트들은 대부분 파운데이션 요소들을 모아 만드는 걸 우린 이제 잘 알고 있어요.
  
• 그런데 파운데이션이 아니라 컴포넌트를 모아 또 컴포넌트를 만드는 경우가 있어요.
  • 원칙적으로는 파운데이션 요소를 모아 컴포넌트를 만들고, 컴포넌트를 모아 더 큰 단위를 만들어야 해요.
  • 하지만 컴포넌트끼리 결합해도 여전히 컴포넌트이거나, 컴포넌트와 파운데이션을 결합한 컴포넌트인 경우가 있어요.
    
• 버튼은 이미 컴포넌트인데, 버튼 컴포넌트에 폰트, 컬러, 여백 및 간격, 곡률 등 파운데이션 요소가 결합한 컴포넌트예요.
• 이런 컴포넌트들을 합성 컴포넌트(Compound Component)라고 불러요.
• 합성 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드, 탭 등 복잡한 구조의 컴포넌트들이 있어요.

* 네스티드 인스턴트

• 상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 바로 조작할 수 있도록 도와주는 속성을 알아볼까요?
• 컴포넌트를 만들면 컴포넌트에 프로퍼티를 적용할 수 있어요.
  • 텍스트 프로퍼티, 불리언 프로퍼티, 인스턴스 스왑, 배리언츠 등이 있어요.
• 그리고 이 프로퍼티를 우측 프로퍼티 패널에서 바로 조작할 수 있어요.
• 그런데 만약 이 컴포넌트가 다른 컴포넌트의 재료로써 쓰인다면 어떻게 될까요?
  
  • 상위 컴포넌트의 프로퍼티 속성들을 보여줘야 한다면, 하위 컴포넌트 속성을 조작하는 것이 어려워요.
• 그럴 때 네스티드 인스턴스, 감싼 인스턴스 기능을 사용해야 해요.
• 재료로 쓰인 컴포넌트를 하위 컴포넌트, 본체를 상위 컴포넌트라고 봤을 때, 상위 컴포넌트에서도 하위 컴포넌트의 속성을 조작할 수 있도록 하는 기능이에요.
• 이런 네스티드 인스턴스를 가진 컴포넌트들이 대부분 합성 컴포넌트예요. 컴포넌트 내부에 다른 컴포넌트들이 들어가 있다는 뜻이니까요.

* 탭 컴포넌트

• 탭 컴포넌트 참고하기
  • 머터리얼 디자인
  • 우버 디자인 시스템
  • 카본 디자인 시스템
  • 라이트닝 디자인 시스템
• 1) 탭 컴포넌트의 정의
  • 컴포넌트의 종류 중 네이게이션에 해당하는 컴포넌트에요.
  • 탭 컴포넌트는 현재 화면을 전환해주는 요소에요.
• 2) 탭의 구조
  • 탭은 개별 아이템인 탭 메뉴와 메뉴를 모아 만드는 탭으로 구성할 수 있어요.
    
  • (1) 인디케이터(Indicator)
    • 탭이 선택되어 있는지 알려주는 표시자예요.
  • (2) 라벨/레이블(Label)
    • 탭 제목을 나타내는 텍스트예요. 탭 이름이라고 불러도 무방해요.
• 3) 탭 디자인의 다양함
  • 탭은 선택된 것과 선택되지 않은 것을 명확하게 구분할 수 있어야 해요.
  • 탭은 서비스마다 모두 다양한 디자인을 사용하고 있어요
  • 사용자에게 선택된 것과 선택되지 않은 것을 구분할 수 있게 해준다면 어떤 디자인이더라고 괜찮아요.
• 4) 탭 만들기
  • 실습

컴포넌트 합치고 분리해 보기

• 실습

실습 URL

• 아직 못했음 주의 😖
  https://www.figma.com/design/vU8DoOz81myUPJFvGjmtGr/%ED%94%BC%EA%B7%B8%EB%A7%88-%EA%B8%B0%EC%B4%88-%EC%99%84%EC%A0%84-%EC%A0%95%EB%B3%B5-4%EC%A3%BC%EC%B0%A8?node-id=0-1&t=qDviEPkAkIMHdg6q-1