TIL_1W4D_컴포넌트 프로퍼티의 이해

디자인 카타
오늘의 토픽 - 가이드 텍스트 위치 어디에 노출하는 것이 더 유용할까요?

선택 B안
버튼이 아닌 가이드 영역에 별도 표기함으로 정보 기입 시 어떤 액션을 취해야 할 지 눈에 잘 띈다

A안을 선택하지 않은 이유로는 CTA 버튼에 가이드 영역 활용 시 버튼이라는 인지가 떨어질 수 있을 것이라 판단했고 B안이 눈에 더 잘띄는 것 같음

컴포넌트 프로퍼티는
의사 상태에서, 컴포넌트는 가상의 상태를 가질 수 있는데, 이러한 컴포넌트가 가상의 상태를 가질 때 형태가 조금씩 변화할 수 있음
컴포넌트 안의 요소가 바뀌는 경우들을 말함
이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능임

컴포넌트 프로퍼티를 왜 쓰나요?
오토레이아웃 등 피그마를 최대한 활용해 컴포넌트를 만들고, 인스턴스를 디자인에 적용하는 과정을 반복함
이 과정에서, 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들어야 하는데
이 때 필요한 기능이 컴포넌트 프로퍼티임

배리언츠(Variants) 변종이라는 뜻이며, 여기서 Vari는 '변화'와 관련있는 표현임
컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능임
컴포넌트의 가상의 상태를 만들 때 사용

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

컴포넌트 프로퍼티 알아보기
배리언츠를 제외하고 피그마 컴포넌트를 만들 때 설정할 수 있는 프로퍼티 3가지임
마스터 컴포넌트 선택 시 프로퍼티 패널이 생김

👁️ Boolean
컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성
레이어를 껐다가 켰다가 할 수 있는 속성값임

◇ Instance swap
인스턴스 스왑은 인스턴스를 다른 인스턴스로 교체하는 기능
따라서 인스턴스를 인스턴스가 아닌 것으로 바꿀 수 없음
주로 버튼 안의 아이콘, 팝업 안의 버튼 교체 시 사용

𝐓 Text
컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어 줌

배리언츠와 프로퍼티를 고르는 기준이 궁금해요

정확히 표현으로 설명하자면 '디자인 토큰 값이 변하는가?'가 기준임

[자료] 컬러 스타일을 만들 때 도움되는 개념 및 방법론
UI 색상의 시각적인 원리
색은 3가지 속성이 있음
고유한 색의 종류를 구분하는 색상(Hue), 원색의 진하기로 구분한 채도(Saturation), 밝고 어두움을 구분하는 명도(Bright)

색 공간
디자인할 때 사용하는 색, 컴퓨터가 처리하는 색, 모니터가 표시하는 색 모두 각자의 규격에 따라 표시되는 색이 달라짐
디지털 디바이스에서 다양한 색을 표시하기 위한 규격
디지털 프로덕트에서 색은 주로 RGB, HSL, HSB 등, 작업 시 HEX, RGB를 주로 사용

RGBA(Red, Green, Alpha) 빛의 삼원색인, 빨강, 초록, 파랑과 투명도를 나타내는 Alpha를 조합해 다양한 색을 표현하는 기본적인 방식
HSV/HSB(Hue, Saturation, Value or Brightness) 색의 속성을 직관적으로 다루기 쉬운 방식
HEX RGB를 16진법으로 변환한 코드로 다른 요소들보다 한 번에 복붙 할 수 잇는 장점과 여러 환경에서 입력하기 쉬워 보편적으로 쓰이는 컬러 값

색 서비스
주색(Primary Color), 보조색(Secondary Color), 흑백(Black, Whirt) 사용
서비스의 성격에 따라 더 다양한 색조합 정하기도 함
서비스 사용할 색은 주로 브랜드 그래픽 시스템을 따름

색 계층
페이지 내 중요도에 따라 색 사용
기본 골격 흑백 구성, 기능이 있거나 꼭 알아야 하는 정보와 같이 중요 요소는 주색과 보조색 이용 강조
이 때 다른 정보와 다르게 특수 상황에 인지나 행동이 중요 요소인 경우 의미에 알맞은 색 사용

색 대비
배경색, 다른 요소 들과의 상대적 관계 생각하며 색 조정
색 대비는 WCAG에서 나눈 레벨을 따르며 주로 AA레벨이 표준으로 쓰임
A(최소) - 3:1
AA(중간) - 4.5:1
AAA(최대) - 7:1
Color Contrast Checker
콘트라스트 체크할 때 유용한 툴, 배경색과 텍스트 대비 레벨 측정 시 사용

색 조합
주색을 정한 뒤 색상환 기준으로 미리 사용한 색 정함
단색, 유사색, 보색 활용해 스크린 디자인 할 때 명확한 기능이 있을 때 제한적 사용
단색 Monochromatic 중요한 정보에 주색 사용, 회색 영역도 주색과 같은 계열의 톤 사용
유사색 Analogous 구분이 필요한 상황일 때 유사색 사용
보색 Complemntary 다른 요소보다 강력하게 강조할 필요가 있을 시 사용

색 비율
60-30-10 법칙
60%와 30%를 이용해 배경 색을 배분, 강조하고자 하는 요소나 글 위주의 서비스일 경우 10% 배분
전체 량 생각하며 배경색 배분 뒤 포인트 컬러를 10% 내에서 추가하는 방식으로 색 비율 조정

밝은 색과 어두운 색
1개의 주색으로 정보 구분이 어려울 경우 밝은 색과 어두운 색을 사용
이 때, 주색보다 밝은 색, 주색보다 어두운 색을 정의하는데 밝기-채도-색조 순서로 색 변형

색 어둡게 RGB 계열 색조로 움직이고 채도를 늘리고 밝기를 줄임
색을 밝게 CMY 계열 색조로 움직이도 채도를 줄이도 밝기를 늘림

배경과 색
어두운 배경 + 밝은 영역 + 어두운 내부 요소
밝은 배경+ 어두운 영역 + 밝은 내부 요소