피그마로 컴포넌트 제작시 활용 할 수 있는 꿀팁
디자이너 5인의 Airbnb 디자인 시스템 제작기 4편
이 글은 노트폴리오 디자인 시스템 워크숍 4기 1조원들이 8주간 함께 만든 디자인 시스템 이야기 중, 4편 컴포넌트 제작 과정에 대한 이야기입니다.
안녕하세요. 디자인 시스템 워크숍 4기 1조 팀원, 김지윤입니다.
전 편에서는 컴포넌트를 어떤 방식으로 제작했는지 과정에 대해 이야기 해보았는데요.
이번 편에서는 컴포넌트 제작시 우리의 고민을 해결해준 피그마의 유용한 기능들을 공유해보려 합니다.
컴포넌트를 제작할때 우리는 많은 고민을 하게 됩니다. 우리도 이번 시스템 제작을 하면서 크게 4가지를 고민했습니다.
1. 반응형 컴포넌트로 만들고 싶어
2. 컴팩트한 컴포넌트를 만들고 싶어
3. 칩의 너비를 일정하게 만들고 싶어
4. 어떻게 컴포넌트를 잘 정리할 수 있을까?
이와 같은 4가지 고민을 해결하기 위해, 피그마의 여러 기능을 사용했습니다.
1. 반응형 컴포넌트로 만들고 싶어
다양한 스마트폰이 출시되는 시대에 따라 디바이스의 크기도 다양합니다. 우리 팀도 이와 같은 상황을 고려하여, 페이지에서 주요 행동을 수행할 수 있는 'ButtonArea' 컴포넌트를 디바이스 크기에 따라 변하는 반응형 컴포넌트로 제작하고 싶었습니다. 반응형 컴포넌트를 제작하기 위해선 어떤 기능이 필요할까요?
반응형 컴포넌트 제작을 위한 Constraint 기능 활용
Constraint란?
피그마에서 Constraint는 프레임(부모)내에 있는 요소(자식)와 이를 포함하는 프레임(부모)간의 관계를 정하는 기능입니다. 자식 객체에 Constraint를 설정하면, 부모 객체의 사이즈를 조정했을때, 자식 객체가 설정한 Constraint에 따라 사이즈나 위치가 변경됩니다. 이 기능을 잘 설정해두면, 반응형 디자인을 편리하게 제작 할 수 있습니다.
Constraint에 대해 더 자세히 알고 싶다면 아래 글을 참조하세요!
우리의 Constraint 사용 예시
우리는 Constraint 기능을 이용하여, 페이지에서 주요 행동을 수행할 수 있는 'ButtonArea' 컴포넌트를 반응형 컴포넌트로 제작했습니다.
'ButtonArea' 컴포넌트 제작시 니즈
1. 디바이스의 하단 혹은 컨텐츠 하단에 위치
2. 디바이스 크기에 따라 크기와 위치가 적절하게 변하는 반응형
니즈에 맞게 Constraint 설정
위의 니즈를 충족시키기 위해, Constraint의 Horizontal을 프레임(부모)의 가로 크기가 변하면 컴포넌트(자식 객체)의 크기가 적절하게 조절되도록 'Left and right'로 설정했습니다. Vertical은 프레임(부모)의 세로 크기가 변해도 컴포넌트(자식 객체)가 하단에 위치하도록 'Bottom'으로 설정했습니다.
이렇게 컴포넌트에 적합한 속성을 Constraint로 설정하니, 반응형 컴포넌트를 편리하게 제작할 수 있었습니다. 이와 같이 피그마의 Constraint기능은 최소한의 컴포넌트로 다양한 디바이스에 대응할 수 있도록 도와줍니다.
2. 컴팩트한 컴포넌트를 만들고 싶어
컴포넌트는 쉽게 이해하고 간편하게 사용할 수 있어야 합니다. 초기 우리가 제작한 5개의 베리언트를 가진 Navigation Bottom 컴포넌트는 비교적 앞선 조건을 충족하지 못했는데요. 우리는 어떻게 해당 컴포넌트를 간편하게 사용하면서도 단순하게 제작할 수 있었을까요?
조금 더 쉽게 사용할 순 없을까?
5개의 베리언트를 가진 Navigation Bottom 컴포넌트를 사용해보니, 컴포넌트 상태를 변경하는 방식이 컴포넌트로 제작을 하는 입장에서 직관적으로 이해하고 사용하기가 어렵다고 생각했습니다. 그래서 우리는 컴포넌트를 사용하는 입장에서 어떻게 사용성을 높일 수 있을까 고민했습니다.
Nested Instance를 이용한 해결 과정
Nested Instance란?
피그마의 Nested Instance는 컴포넌트 내부 하위 인스턴스의 프로퍼티를 노출시켜주는 기능입니다. 이는 베리언트가 있는 컴포넌트를 사용하여 새로운 컴포넌트를 제작할 때 활용할 수 있습니다.
우리의 Nested Instance 활용법
우리는 컴포넌트의 사용성을 높이기 위해, Navigation Bottom 컴포넌트에서 각 섹션별로 Selected on/off를 직접 설정할 수 있는 컴포넌트로 다시 제작하기로 결정했습니다. 이를 위해선 Nested Instance 기능이 필요했습니다.
Nested Instance를 이용한, 컴팩트한 컴포넌트 제작
우리는 Nested Instance 기능을 이용하여 각 섹션을 on/off 할 수 있는 하나의 컴포넌트를 제작하기 위해 프로퍼티 on/off를 할 수 있는 Button 컴포넌트를 제작했습니다. 이후 Button 컴포넌트 인스턴스를 이용하여 Navigation Bottom을 Nested Instance 기능을 활용해 제작했습니다. 최종적으로 Navigation Bottom 컴포넌트는 하나의 베리언트로, 각 섹션별 on/off를 할 수 있었습니다.
Navigation Bottom 컴포넌트 제작과정
Nested Instance 적용 완료
1. 하위 인스턴스인 Button 컴포넌트 선택
2. Button 인스턴스에 Create property를 적용
3. Navigation Bottom 컴포넌트에 새로운 프로퍼티 추가 → Nested Instance 설정
4. Navigation Bottom에 노출할 프로퍼티만을 선택 (우리는 각 섹션의 Button 인스턴스가 가진 Selected 프로퍼티를 활성화했습니다.)
위와 같이 Nested Instance 설정을 완료하였고, Navigation Bottom은 각 섹션별로 Selected on/off를 설정할 수 있었습니다. 그리고 이러한 제작 방식은 컴포넌트의 사용성을 높여 줄 수 있었습니다.
3. 칩의 너비를 일정하게 만들고 싶어
컴포넌트를 제작할때, 내용의 크기에 따라 가변하는 컴포넌트이지만 특정 크기 이상 커지거나 작아지지 않으면 좋겠다고 생각한 적이 있나요? 우리도 ChoiceChip 컴포넌트를 제작할때 이러한 니즈가 있었습니다.
에어비앤비에서 사용되는 '수량 단일 선택'의 ChoiceChip-filled 컴포넌트를 크게 분류해보면 ‘상관없음’ 이라는 텍스트와 ‘1~8+’ 숫자로 분류 할 수 있습니다. 해당 컴포넌트는 텍스트와 숫자 모두 동일한 높이, 패딩값을 가지는데, 8+의 경우 나머지 숫자와 다르게 width값이 달라지는 문제가 있었습니다. 하지만 이런 문제를 해결하고자 각자 다른 width값으로 제작하게 된다면 불필요하게 베리언트가 많아지는 또다른 문제가 생기게 되었습니다.
Min/Max를 이용한 해결 과정
피그마에는 width와 height 값에 최소값(min)과 최대값(max)을 설정할 수 있는 기능이 있습니다. 이를 통해 개체의 가로세로 크기에 최소값 혹은 최대값을 지정하여 설정된 값 이상 혹은 이하로 늘어지거나 줄어들지 않을 수 있습니다.
우리는 '1~7'과 '8+'의 다른 width 값 문제를 해결하기 위해 Min 기능을 이용하여 ChoiceChip-filled 컴포넌트를 제작했습니다. Min 기능을 이용해 최소 너비 값을 50으로 설정하였더니, 어떤 숫자 값이 들어와도 균일한 너비 값을 가질 수 있었습니다. 이렇게 최종적으로 하나의 프로퍼티로 모두 대응할 수 있는 통일감 있는 컴포넌트를 완성했습니다.
4. 어떻게 컴포넌트를 잘 정리할 수 있을까?
디자인 시스템 제작시 다양한 종류의 컴포넌트를 제작하게 됩니다. 컴포넌트는 제작 후에도 자주 활용되기 때문에 컴포넌트 제작시 컴포넌트를 사용할 사람들의 입장을 고려하여 바로 이해할 수 있고 쉽게 사용하도록 만들어야 합니다.
이를 위해선 기본적으로 컴포넌트를 똑똑하게 정리할 수 있어야 합니다. 잘 정리한 컴포넌트는 모두가 쉽게 쓸 수 있는 사용성이 높은 컴포넌트라고도 할 수 있습니다. 그렇다면 컴포넌트의 사용성을 높일 수 있는 방법은 어떤게 있을까요?
[/]슬래시를 이용해 그룹화하기
팀별 합의에 따라 차이가 있을 수 있지만, 컴포넌트는 주로 특정 형태 혹은 기능을 공유한다면 같은 그룹으로 분류하는 경우가 많습니다.
예를 들어, Button 컴포넌트의 경우 text로만 이루어진 버튼이거나 icon으로만 이루어진 버튼이라면 둘다 버튼이란 큰 기능은 공유하지만 그 내용은 다릅니다. 이럴때 우리는 Button 컴포넌트 라는 그룹 안에 Button text, Button icon을 넣어둘 것입니다. 이와 같은 상황에서 피그마의 /(슬래시) 기능은 컴포넌트를 자동 그룹화 해주어 큰 도움을 줍니다.
ex. 그룹/요소
/(슬래시) 앞에 오는 단어는 /(슬래시)뒤에 오는 단어를 포함하는 그룹명입니다.
*피그마는 대소문자를 구분하기 때문에, 명칭을 정확히 작성해야합니다.
그룹화의 장점 중 하나는 Asset 패널에서 컴포넌트의 모양을 썸네일로 확인하고 Instance를 가져올 수 있다는 점입니다. 특히 컴포넌트의 유형이 다양한 경우에 더욱 유용합니다.
예를 들어, 우리가 제작한 컴포넌트 중에서 Cards/ExpandedType 컴포넌트는 다양한 카드 형태의 컴포넌트와 베리언트를 가지고 있습니다. 하지만 Asset 패널에서 ExpandedType을 검색하면 해당 그룹에 속하는 컴포넌트들을 썸네일과 함께 확인할 수 있어 편리합니다.
추가로, Asset 패널에서 보이는 컴포넌트의 배경 색은 해당 메인 컴포넌트를 포함하는 프레임 또는 섹션의 배경에 영향을 받습니다. 검은 아이콘 컴포넌트가 어두운 배경의 섹션에 있다면 썸네일에서 잘 보이지 않을 수 있습니다.
[_]언더바 활용하기
위의 /(슬래시)와 비슷한 방식으로, 컴포넌트 이름 앞에 _(언더바)를 작성하면 피그마에서 시스템 배포 시 자동으로 해당 컴포넌트가 배포되지 않습니다.
우리는 이런 _(언더바)의 기능을 활용해 _Base라는 것을 제작하고 사용했습니다.
_Base는 컴포넌트를 만들기 위해 필요한 특정 하위 컴포넌트로 독립적으로 사용되지 않는 컴포넌트입니다.
_Base를 활용한 컴포넌트로는 Toggle, Checkbox, Segment, Slider, Datepicker가 있습니다.
이렇게 _(언더바)를 사용하면 시스템 배포 시 해당 컴포넌트가 배포되지 않는다는 장점이 있고, 시스템을 제작하는 팀원들 간 해당 컴포넌트의 특성을 쉽게 이해할 수 있습니다.
디스크립션 작성하기
피그마에서는 스타일, 베리어블, 컴포넌트에 대한 디스크립션(설명)을 추가할 수 있습니다.
디스크립션을 작성하는 이유
디자인 시스템은 주로 팀 내에서 규칙을 구축하기 위해 만들어집니다. 즉, 나뿐만 아니라 이와 관련된 이해관계자들도 시스템을 확인하거나 사용하게 됩니다. 그래서 모든 관계자가 공통으로 동의된 내용을 이해할 수 있도록 시스템을 제작할 때 디스크립션을 작성하는게 좋습니다.
디스크립션은 간결하고 명확하게 작성
컴포넌트에 대한 자세한 설명은 메인 컴포넌트 페이지와 가이드라인에 기재되어 있으므로 필요한 경우 확인하면 됩니다. 하지만 실제 작업 시에는 컴포넌트에 대한 빠른 이해와 제작이 필요하므로, 컴포넌트에 포함될 설명은 간결하고 명확하게 작성하는 것이 좋습니다.
디스크립션에 키워드 추가하기 TIP
디스크립션에 해당 컴포넌트에 대한 키워드를 추가하면, Asset 패널에서 검색 시 해당 키워드가 포함된 컴포넌트를 볼 수 있어서 컴포넌트의 정확한 이름을 모르더라도 쉽게 찾을 수 있습니다.
이렇게 작성한 디스크립션을 피그마에서는 다양한 방법으로 확인할 수 있습니다.
1. Instance를 선택하면 오른쪽 패널에 해당 컴포넌트에 대한 설명이 보입니다.
2. Asset 패널에서 컴포넌트 썸네일을 클릭할 때
3. 오른쪽 Instance 패널에서 다른 Instance를 호버할 때
다음 글로 넘어가며...
이렇게 디자인 시스템을 제작하며 우리가 겪었던 문제와 고민들을 공유해보았습니다. 시스템을 제작하기도 하지만, 동시에 사용자의 입장이기도 하다보니 조금 더 사용성 높게 제작하려고 고민했던 시간이었습니다.
다음편에선 컴포넌트를 모두 제작 한 뒤, 잘 사용할 수 있도록 만든 가이드 라인을 제작기를 소개하겠습니다.
최종 디자인 시스템 링크 바로가기
참고자료
