brunch

You can make anything
by writing

C.S.Lewis

by Hyo Dec 23. 2021

디자인 툴, 피그마 이해하기

큰 장점 위주로 알아본 피그마

이제부터 연재할 UI디자인 관련 글은 디자인 툴인 피그마 위주로 진행될 예정입니다. 이미 대중적으로 유명한 툴인 포토샵이나 일러스트레이터에 비해, 누군가에게 피그마는 아직 생소한 툴일 수 있습니다. 피그마는 어떤 툴이고 왜 써야 할까요? 큰 장점 위주로 알아보겠습니다.

피그마란?

https://www.figma.com

피그마는 누구나, 시간과 장소에 관계없이, 인터넷과 컴퓨터만 있으면 곧바로 자유롭게 사용할 수 있는 디자인 툴입니다. 통상적으로 UI&UX 디자인이나 디자인 시스템을 만드는 데 쓰이지만, 기획, PPT, 애니메이션, 짤&이모지 만들기 등 무궁무진한 용도로 활용할 수 있습니다. 이러한 확장성으로 인해 2021년 기준 피그마는 모든 UX 디자인 툴 중 가장 핫하다고 말할 수 있게 되었습니다. (https://uxtools.co/survey-2021/)

장점 1. 협업이 쉬워집니다.

피그마를 쓰기 전에는 디자이너들은 디자인 작업물을 파일로 전달했습니다. 그렇기 때문에 피드백을 주고받는 과정에 시간이 걸렸고, 나중에는 어떤 파일이 최신인지 찾기 힘들어지는 경우도 많았습니다. (최종의 최최최종.psd) 피그마는 웹 기반 툴이기 때문에 별도의 설치 파일이나 OS에 구애받지 않는다는 큰 장점이 있습니다. 따라서 기존 작업 프로세스와는 달리, 공유 링크만 있으면 누구나 같은 파일에 접근하고 서로 피드백을 주고받을 수 있게 되었습니다. 디자이너는 매번 파일을 보낼 필요 없이 실시간으로 피드백을 확인, 수정하고 알려주면 됩니다.

장점 2. 올인원 디자인 툴입니다.

앞 절에서 설명한 것처럼 uxtools.co 라는 웹사이트에서는 2017년부터 매년 UX 디자인 툴 설문조사를 진행하고 있습니다. 이번에는 이 설문조사 결과를 연도별로 비교해 보겠습니다.

2019 UX 디자인 툴 디자인 설문조사 응답 결과 (https://uxtools.co/survey-2019#toolkit)

2021 UX 디자인 툴 디자인 설문조사 응답 결과 (https://uxtools.co/survey-2021#toolkit)

브레인스토밍, UI디자인, 디자인 시스템, 프로토타이핑, 유저 플로우 제작 등... 이 그림을 보면 최근 몇 년간 UI 디자인 이외에도 여러 부문에서 가장 많이 사용중인 디지털 툴 1위 로 피그마가 지목되고 있습니다. 이렇게 다방면으로 활용할 수 있다는 특성은 피그마로 디자인하는 큰 이유 중 하나인데요, 피그마는 설문에 기재된 분야를 제외하더라도 정말 다양한 디자인 영역에서 활용할 수 있는 올인원 툴로 IT 디자인 시장에서의 입지를 굳혀 가고 있습니다.

그렇다면 이렇게 다방면으로 활용하는 것이 실제 디자인 작업에서 어떤 효용을 가지게 될까요? 디자이너 입장에서는 하나의 툴에서 아이콘, 모션, 프로토타입, UI 디자인 등 거의 모든 영역을 작업하는 것으로 작업 효율성을 크게 높일 수 있고, 협업하는 다른 직군 입장에서는 공유링크 하나만으로 디자이너가 작업한 다양한 파일을 한 곳에서 모두 살펴볼 수 있으니 직관적으로 이해하고 피드백할 수 있습니다. 작업에 대해 궁금한 점이 있으면 작업물 위에서 코멘트 기능으로 바로 물어보면 됩니다. 이처럼 디자인 작업에 피그마를 이용하면, 디자인 파일을 이메일로 주고받을 때와는 비교도 되지 않을 정도로 빠르게 피드백을 주고받고, 절약한 시간만큼 서로 밀접하게 소통할 수 있게 됩니다.

장점 3. 두 번 일하지 않아도 됩니다.

디자인 시스템을 활용해 체계적으로 에셋을 관리할 수 있습니다.(https://www.figma.com/design-systems/)

이제는 많은 사람들에게 익숙한 단축키인 Ctrl + C, Ctrl + V는, 똑같은 형식을 복사&붙여넣기해 다양한 작업을 효율적으로 만들어주는 대표적인 기능입니다. 복잡한 디지털 제품의 UI를 관리하는 데에도 이미 있는 요소를 다시 사용하는 일은 아주 빈번한데요, 피그마에서는 ‘컴포넌트’라는 기능을 활용해 다양한 상황에서 그래픽 요소를 체계적으로 재사용할 수 있습니다. 컴포넌트를 간략하게 설명하면 최초 원본과 복제본을 연결시켜 주는 기능인데요, 이를 활용해 추후 수정이 필요할 때도 원본인 ‘메인 컴포넌트’ 하나만 바꾸면, 모든 복제본에 해당 수정사항이 한꺼번에 반영됩니다.

피그마로 작업한 원고 예시

개인적으로는 이 원고도 피그마를 이용해 효율적으로 작업할 수 있었습니다. 타이틀, 본문, 캡션 등 내가 원하는 스타일을 피그마에서 직접 만들어 사용하는 것으로 일관성 있게 작업할 수 있었고, 그림이나 예제 UI화면의 수정이 필요할 때에도 문서 툴과 디자인 툴을 이동할 필요 없이 한 곳에서 작업할 수 있었기 때문에 매우 효율적이었습니다.

피그마, 꼭 써야 하나요?

UI를 디자인할 때 피그마를 꼭 써야 하는 것은 아닙니다. 피그마의 장점에 대해 구체적으로 소개했고 이 책에서는 피그마와 함께 UI디자인을 진행할 것이지만, 툴은 툴일 뿐입니다. 피그마보다 더 디자인에 효과적인 툴이 나온다면 언제든 본인이 사용하는 툴을 바꿀 수 있도록 열린 마음을 가지는 것이 더 중요할 것입니다. IT트렌드는 굉장히 빠르게 변화합니다. 언제든 지금 방법보다 더 나은 솔루션이 나올 수 있습니다. 그렇기 때문에 디자이너로서 지속적으로 효과적인 방법을 탐색, 전략적으로 도입하여 제품 개발 생산성을 높이고, 이를 통해 양질의 서비스를 빠르게 출시하려는 노력이 지속적으로 필요할 것입니다. 따라서 피그마는 2021년 기준 디자이너의 생산성을 높여줄 수 있는 좋은 수단 중 하나라고 생각하시는 것이 좋습니다.

지금까지 피그마의 장점을 간략히 알아보았습니다. 처음에는 웹 툴이라는 점이 생소할 수도 있지만, 피그마는 위 세 가지 장점을 통해 디자이너들이 그동안 경험하지 못했던 강력한 생산성을 보장합니다. 앞으로 계속해서 다루게 될 디자인툴 피그마, 기대하셔도 좋습니다.

keyword