피그마, variants 그리고 머터리얼 #button

머터리얼 디자인 시스템은 구글에서 만들었다.

머터리얼 디자인 시스템은 구글에서 만들었다.

디자인뿐 아니라 개발 코드까지 가이드라인이 잘 되어있다.

개발 코드는 web, ios, android, flutter를 지원한다.

머터리얼 컴포넌트를 사용하면 개발할때 디자인에 대한 부담이 적어진다.

이때문에 많은 개발자들은 머터리얼 컴포넌트를 개발 코드에 사용한다.

머터리얼 버튼 컴포넌트를 피그마 variants를 사용하여 디자인 상태 관리를 구현 해보자.

먼저 버튼 컴포넌트의 구성 요소에 대해 살펴보면 위 이미지와 같다.

많은 프로퍼티들이 있는것을 확인할 수 있다.

피그마 variants에 state, variant, color, size, startIcon의 5가지 프로퍼티를 적용해 보자.

state는 버튼의 상태에 따라 enabled, hover, pressed, disabled의 4가지 항목으로 구분하였다.

enabled: 화면에 보이는 상태

hover: 마우스가 버튼위에 위치한 상태

pressed: 버튼을 클릭한 상태

disabled: 버튼이 비활성화인 상태

variant는 머터리얼 디자인에서 3가지 형태를 제공한다.

contained: 백그라운드 컬러가 적용되고 그위에 버튼 텍스트가 위치함

outlined: 보더에 컬러가 적용되고 그안에 텍스트가 위치함

text: 텍스트만 적용됨

color의 경우 피그마에서는 default, primary, secondary 3가지를 적용하자.

color의 경우 피그마에서는 default, primary, secondary 3가지를 적용하자.

statIcon은 버튼 앞쪽에 아이콘의 유무를 나타낸다.

위 이미지는 머터리얼 버튼의 상태를 피그마에 모두 적용한 상태이다.

5가지의 프로퍼티와 그에 해당하는 설정값들 모두 표현하는데 180개의 버튼이 필요하다는걸 알게 되었다.

디자인 상태 관리값을 변경하면서 잘 적용되는지 확인했다.

코드로 상태값을 변경하는것과 동일하게 적용되었다.

버튼 컴포넌트의 사이즈별로 마진과 패딩값을 코드로 확인한 결과는 다음과 같다.

small / margin : 8px

small / padding : 좌우 10px 상하 4px

medium / margin : 8px

medium / padding : 좌우 16px 상하 6px

large / margin : 8px

large / padding : 좌우 22px 상하 8px

마진의 경우는 버튼의 크기와 상관없이 모두 동일하게 적용되어 있다.

패딩의 경우 버튼의 크기가 커짐에 따라 좌우, 상하의 설정값이 늘어난다.

폰트의 경우 개발코드상 rem 단위로서 각 0.8125rem, 0.875rem, 0.9375rem 늘어났다.

브라우저에서 코드상 rem단위를 px로 변환한 값은 각 13px, 14px, 15px 이다.

버튼 텍스트 앞쪽에 아이콘이 위치한 경우를 살펴보자

아이콘의 위치조절을 margin을 통해 하는것을 알수 있다.

여기서 눈여겨 볼 부분은 왼쪽 마진값이다.

버튼의 사이즈별로 각 -2px, -4px, -4px이 적용되었다.

피그마에서 같은 넓이와 높이의 사각형과 원을 각각 그려보면 설정값은 같지만 눈으로 볼때 원이 조금 작아보이는걸 알 수 있다.

아이콘 위치 역시 이런 맥락이지 않을까? 추측한다.

180개의 버튼을 만드는 과정은 힘들었다.

이런 과정을 통해 피그마 버튼이 작동하는것을 본 순간 힘든과정에 대한 보상을 받는 기분이었다.

필자의 경우 개발코드로 상태값을 변경하는것 보다 피그마 variants 프로퍼티 리스트를 선택해서 변경하는것에서 더 좋은 느낌을 받았다.