#4 피그마의 핵심 '컴포넌트'
피그마 설명서 4부, 컴포넌트 사용법
우리는 디자인하다 보면 버튼, 내비게이션, 체크박스와 같은 공통적으로 들어가는 요소들이 많이 나오는데 하나의 사이트에서 두 가지 스타일이 나오는 경우는 웬만해서 없습니다. 또한 디자인의 일관성을 위해 텍스트 및 컬러까지 공통적으로 사용하는 디자인 시스템을 많이 사용하기 때문에 이러한 구성요소들을 컴포넌트로 만들어서 많이 활용합니다.
피그마를 잘 활용하기 위해선 피그마의 핵심인 '컴포넌트'에 대한 이해도가 높아야 합니다. 그러면 컴포넌트가 무엇이고 어떻게 활용해야 하는지에 대해서 포스팅하겠습니다. 그리고 저는 피그마에 대해서 글을 쓰면서 여러분들이 '남들이 많이 사용하니까'라는 접근이 아닌 '왜 이것을 사용하지?'라는 접근으로 읽어주셨으면 좋겠습니다.
컴포넌트란?
컴포넌트는 크게 두 개로 분리됩니다. 'Master Componet'와 'Instance' 마스터 컴포넌트는 '자기 자신'이라고 생각하고 인스턴스는 '거울에 보이는 자기 자신'이라고 생각하면 됩니다. 내가 거울을 보고 어떤 행동을 하던 거울에 보이는 자기 자신은 똑같이 유지되는 이런 것을 컴포넌트라고 생각하시면 됩니다.
저는 이 컴포넌트 시스템을 만든 사람은 분명히 코딩에 대한 이해가 굉장히 깊은 분이라 생각합니다. 컴포넌트를 제대로 이해하기 위해선 코딩에서 어떻게 구성요소들을 만드는지 알면 이해하기 좀 더 쉬워집니다. 예시로 설명드리겠습니다.
코딩의 구조는 HTML이라는 뼈에 CSS라는 살을 붙인다고 생각하면 됩니다. 위의 그림과 같이 HTML에서 class="button"이라는 버튼을 만들고 css에서 .button {height:48px; font-size:16px}이라는 높이 48px에 텍스트 16px짜리의 버튼을 만들어 그것을 모든 페이지에 공통적으로 사용하였다고 합시다.
그런데 클라이언트가 버튼이 너무 크다며 높이 30px에 텍스트 14px로 수정해달라고 하면 위의 그림과 같이 css에서 .button {height:30px; font-size:14px}로 코드만 변경하면 공통으로 사용된 모든 페이지의 버튼들이 다 변경됩니다.
공통으로 적용된 CSS만 바꾸면 모든 공통 요소들이 바뀌는 개념과 같이 마스터 컴포넌트만 바꾸면 모든 인스턴스가 바뀌는 시스템 방법을 접목한 게 바로 컴포넌트입니다.
컴포넌트 활용방법
대략적으로 컴포넌트가 무엇인지 이해하였기를 바라며 이번에 컴포넌트를 어떻게 활용하는지 예시로 좀 설명해보려 합니다. 컴포넌트를 활용하는 방법도 대부분 큰 틀은 똑같지만 스케치와 피그마도 활용방법이 다르며 개인 마다도 차이가 있습니다. 제가 하는 방법은 무조건 정답은 아니며 그냥 참고만 해주셨으면 좋겠습니다.
- 컴포넌트
컴포넌트를 만드는 법은 생각보다 굉장히 간단합니다. 버튼을 일단 만들고 박스와 텍스트를 같이 선택한 다음 상탄의 컴포넌트 아이콘을 클릭하거나 마우스 오른쪽 클릭을 하고 'Create Component'를 클릭하면 컴포넌트가 만들어지게 됩니다.
컴포넌트를 만들면 마스터 컴포넌트를 복사 붙여 넣기를 하면 인스턴스가 만들어지며 마스터 컴포넌트가 변경되는 대로 모든 인스턴스들은 공통적으로 변경되게 됩니다. 마스터 컴포넌트와 인스턴스는 레이어 패널에서 아이콘으로 구분할 수 있는데 마스터 컴포넌트는 4개의 마름모로 이루어져 있고 인스턴스는 하나의 큰 마름모로 이루어져 있습니다.
왼쪽의 마스터 컴포넌트 오른쪽의 인스턴스스케치를 사용하시던 유저라면 만들어지는 방식의 차이를 조금 느끼셨을 텐데 스케치에서는 심볼을 만들 때 심볼을 심볼 페이지로 이동시킬 것인지 체크하는 팝업이 뜨지만 피그마에서는 마스터 컴포넌트를 따로 심볼창으로 옮기는 방식이 존재하지 않고 마스터 심벌을 일일이 옮겨야 하는 불편함이 있습니다.
- 중첩 컴포넌트
버튼을 만들면 Primary버튼과 Secondary버튼으로 박스의 컬러만 다른 컴포넌트가 존재하는 경우가 많이 있습니다. 이러한 경우를 만들 때 중첩 컴포넌트을 만들면 굉장히 유용합니다. 마스터 컴포넌트 안에 인스턴스가 존재하는 방식을 중첩 컴포넌트라고 합니다.
일단 인스턴스의 적용 옵션을 알아야 하는데 텍스트와 박스의 크기나 컬러를 자유자재로 변경 가능하며 변경사항이 마스터 컴포넌트에 적용이 되지 않습니다. 하지만 변경된 사항을 디자인 패널의 컴포넌트 섹션에서 마스터 컴포넌트에 적용할 수도 있으며 반대로 원래 마스터 컴포넌트에서 적용된 옵션 값을 다시 가져 올 수도 있습니다.
그리고 인스턴스를 또 컴포넌트로 만들 수 있는데 이건 새로운 컴포넌트를 만드는 게 아닌 인스턴스 위에 컴포넌트를 덮어 씌우는 개념입니다. 그래서 레이어 패널을 보면 마스터 컴포넌트 안에 인스턴스가 위치하게 됩니다. 그러면 strucures라는 컴포넌트를 만들고 하위 인스턴스를 두 개 만들어 하나는 button/primary로 만들고 배경 컬러를 블루 나머지 하나는 button/secondary로 만들어 배경 컬러를 화이트로 만들면 중첩 컴포넌트를 활용한 컴포넌트가 됩니다.
이제 클라이언트가 박스 크기를 줄여달라고 요청이 왔을 때 button/primary, button/secondary 컴포넌트를 변경하는 게 아닌 strucures 컴포넌트의 박스크기만 줄이면 모든 버튼 크기가 줄어들게 됩니다. 하지만 변경한 색상값은 strucures에서 변경을 하여도 적용이 되지 않습니다.
- 오토 레이아웃
스케치에서는 스마트 레이아웃이라는 옵션이 있지만 피그마에서는 오토 레이아웃이라는 옵션이 존재합니다. 차이점은 스케치에서는 심볼에서만 적용이 가능하지만 피그마에서는 일반 그룹에서도 적용이 가능하다는 차이가 있습니다.
오토 레이아웃이 테이블이나 카드박스에서 사용되는데 그중에 카드박스에서 활용하시면 더욱더 유용합니다. 오토 레이아웃으로 구조를 만드는 것은 처음에 어려운 방법일 수 있지만 나중에 수정할 때 빛을 바랍니다. 오토 레이아웃은 말로 설명을 듣는 것보다 하단의 이미지처럼 동일하게 만들어보시면 감이 오실 것입니다.
왼쪽은 레이어 구조, 오른쪽은 왼쪽의 레이어 구조로 만들어진 카드 형식- 새로운 기능 'Variants'
Variants라는 기능은 이번 연도 10월 말에 나온 기능입니다. 여러 가지 기능이 있는데 간단히 설명드리면 마스터 컴포넌트를 스케치와는 조금 다른 방식으로 그룹핑을 하고 Variants와 Property로 구분 지으며 True/False를 사용해 라디오 버튼 형식으로 컴포넌트를 변경 가능하는 등 다양한 방법이 있는데 오늘은 컴포넌트에 대한 간략한 활용방법을 소개하는 글이므로 이 기능은 저도 좀 생소한 기능이고 조금 복잡해서 다음 포스팅에서 예제로 자세히 설명드리도록 하겠습니다.
하단에 피그마 공식 홈페이지의 블로그 링크를 타고 간단하게 이해할 수 있지만 영문이고 간략한 설명이기 때문에 자세히 이해하기 힘들 수 있지만 참고해드립니다.
https://www.figma.com/blog/bridging-design-and-code-with-variants/
마무리
이전에 툴을 중요하지 않다 디자인이 중요하다는 말을 들었던 적이 있습니다. 네 맞는 말입니다. 스케치나 피그마를 사용한다고 좋은 디자인이 나오는 것은 절대 아닙니다. 하지만 이 말은 반대로 포토샵을 사용한다고 좋은 디자인이 나오는 것도 아니라는 말이 됩니다.
스케치나 피그마를 사용하면 디자인에 일관성을 부여하며 체계적인 디자인 시스템과 1시간 걸릴 수정을 30초 만에 수정하는 효율성을 극대화하는 것입니다. 1시간과 30초 만의 시간 차이만큼 남는 시간에 레퍼런스와 디자인고도화 작업을 하는 게 저는 더욱 디자인 실력에 도움이된다고 생각합니다.
또한 디자인 에이전시에 일하면 절대적인 '을'에 입장을 가지게 되는데 우리는 클라이언트가 원하는 디자인 툴을 수용해야 합니다. 요즘 많은 기업들은 스케치를 요구하고 있으며 간간히 피그마를 원하는 클라이언트도 많이 계십니다.
빠른 시대 흐름에 맞춰가려면 2020년을 살아가고 있는 디자이너에게 다양한 툴을 다루는 것은 필수라고 생각합니다. 피그마나 스케치에 대해서 공부하는 시간을 투자하는 것도 좋은 디자이너가 되기 위한 올바른 길이라고 생각합니다.
