brunch

매거진 코멘토 실무PT

라이킷 29 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 코멘토 Feb 17. 2023

피그마 강의를 들어야 한다면, '디자인 시스템' 구축을

피그마 디자인 시스템 실무PT

디자이너마다 디자인 스타일이 달라서, 통일성이 없어요

- 중견 화장품 브랜드 마케팅 팀장님의 말 중에서-

어떤 현직자 모임에서, 중견 화장품 브랜드의 마케팅 팀장님이 하소연을 하는 것을 들었습니다. 인사 이동으로 다른 팀의 디자이너가 우리 팀에 들어오거나 신입 디자이너가 입사해서 일을 하면, 이전 디자이너가 디자인을 한 것과 스타일이 달라서 제품에 적용되는 디자인이 천차만별이라는 이야기였죠.

디자인이 통일되지 않고 제각각이라는 건 사실 꽤나 큰 이슈입니다. 고객들이 저마다 다른 스타일의 '일관성 없는 디자인'을 보게 되면, 제품을 사용할 때 기능을 혼동할 수 있습니다. 또한, 브랜드의 톤 앤 매너를 고려할 때, 디자인이 통일성이 없다면 브랜드가 고객들에게 인식시키고자 하는 핵심 가치나 정체성을 일관되게 전달하지 못하게 되겠죠.

팀장님은 '어떤 디자이너가 디자인을 해도 같은 결과물이 나올 수 있게, 체계적인 가이드 같은 것이 있으면 좋을 거 같은데 그런 게 있는지도 모르겠고, 어떻게 만들어야 할지도 모르겠다'라며 한숨을 내쉬었습니다.

체계적인 디자인은 '디자인 시스템'으로.

그래서, '디자인 시스템'

UX∙UI 디자인을 하는 디자이너라면, '디자인 시스템'에 대해 익히 들어봤을 것입니다.

여러분이 잘 알고 있다시피, 디자인 시스템은 일관된 디자인 가이드라인과 라이브러리, 컴포넌트, 색상 팔레트 등을 포함한 것으로, 조직 내부 또는 외부에서 디자인을 할 때 일관성 있는 디자인을 유지할 수 있도록 도와주는 체계입니다.

디자인 시스템은 UX∙UI 디자인 요소를 '규격화'하는 것이라고 해도 무방합니다. 폰트 크기와 스타일부터 기능 별 버튼의 크기까지 UX∙UI 디자인에 필요한 모든 디자인 요소를 디자인 시스템을 통해 일관된 하나의 규칙에 따라 통일시킬 수 있습니다.

디자인 시스템이 있으면, 단 하나의 규칙 아래에서 UX∙UI를 일관성 있게 디자인할 수 있습니다. '체계적인 디자인'이 가능한 것입니다.

피그마로 모든 디자인 요소를 간편하게 통일할 수 있습니다

디자인 시스템 구축에 가장 적합한 디자인 툴, '피그마'

디자인 시스템을 구축하기 위해서 반드시 해야하는 것은 '디자이너끼리의 협업'입니다. 서로 다른 스타일을 가진 디자이너들이 통일된 디자인을 하기 위해서는 디자인에 대한 상호 약속과 디자인 프로세스의 공유가 필요합니다. 협업과 커뮤니케이션을 통해 디자인에 대한 합의를 이뤄내야 비로소 디자인 시스템을 구축할 수 있는 것입니다.

그리고 이 '협업'과 '커뮤니케이션'에 가장 최적화된, 효율적인 디자인 툴이 바로 '피그마'입니다.

언제 어디서든 공동으로 작업할 수 있고, 특정 규칙을 만들어 저장할 수 있는 기능이 있기에 '일관되고 통일된, 체계화된' 디자인을 수행하기에 가장 적합하기 때문입니다.

하나의 일관된 체계를 만드는 '디자인 시스템'

디자인 시스템 구축에 피그마를 활용하는 방법

여러분이 단순히 피그마가 디자이너들 사이에서 가장 인기 있는 디자인 툴 중 하나라는 이유로 피그마 강의를 듣고 피그마의 기능을 배우기만해서는, 피그마의 강력한 장점을 실무에 활용하지 못할 수 있습니다.

UX∙UI 디자이너는 피그마를 '디자인 시스템'을 구축하기 위한 목적으로 익힐 필요가 있습니다.

우선 Google, Line 등 디자인 시스템을 잘 구축한 사례를 통해 각 브랜드에서 디자인 시스템 구축에 피그마를 어떻게 활용했는지를 스터디 해야 합니다.

레퍼런스를 참고하며, 담당하는 제품을 디자인할 때 반드시 지켜져야 하는 '디자인 원칙'을 세우고, 그 아래서 레이아웃, 타이포그래피, 아이콘, 색상 등 핵심 디자인 요소를 정립해야 디자인 시스템의 기초를 구성할 수 있습니다.

그 다음엔 피그마의 Variants, Auto-layout 기능을 활용해 각 디자인 요소를 컴포넌트로 만들면, 버튼이나 체크박스, 토글 등 여러 디자인 요소를 규격화 하여 쉽게 활용할 수 있게 됩니다.

만일 여러분이 체계적으로 UX ∙ UI 디자인을 하고 싶은 디자이너라면, 더러는 효율적으로 디자인 업무를 처리하고 싶은 디자이너라면, 단순히 피그마의 기능을 배우는 것을 넘어 '디자인 시스템 구축'이라는 실무에 피그마를 활용하는 방법을 익히는 것을 추천합니다. 디자인 시스템을 구축하고 좋은 제품, 고객이 잘 쓰는 제품을 디자인하는 디자이너로 거듭날 수 있을 테니까요.