현존(?) 최고의 디자인 툴, 피그마
2022년 현재 가장 강력한 UI/UX 디자인 툴은 피그마라는 걸 아무도 부정할 수 없을 것이다. 물론 포토샵이 그랬듯, 일러스트레이터가 그랬듯 언젠간 피그마도 다른 무언가에게 지금의 옥좌를 넘겨주게 되겠지만, 그게 최소한 앞으로 10년은 더 있어야 할 것이다. 처음에야 스케치에 비해 다소 부족했지만, 갈수록 파워업 되는 기능들과 기획-개발-마케팅까지 아우를 수 있는 협업 체계 구축 및 콘텐츠 관리에서도 기존 다른 툴에 비해 모자람이 없는 상황이다.
피그마가 가장 널리 쓰이는 툴이 된 건 여러 이유들이 있겠지만, 운영체제에 상관없이 심지어 브라우저 환경만 지원하면 태블릿에서도 사용할 수 있다는 범용성을 꼽을 수 있다. 또한 다양한 직무들이 제품을 놓고 협업하기 좋은 환경을 구축하게 해준다는 점 또한 강력한 부분이 아닐까 싶다.
이외에도 다른 다양한 장점들이 있겠지만, 아무래도 가장 큰 이유는 플러그인이 아닐까 싶다. 플러그인이란, 쉽게 말해 프로그램이 지원하지 않는 기능을 실행하게 해주는 일종의 확장 프로그램이라고 보면 된다. 스케치에서도 플러그인은 지원했지만, 스케치는 맥 환경에서만 실행할 수 있는 프로그램이라 플러그인도 맥에서만 만들 수 있다는 큰 단점이 있다. 또한 개발 언어도 조금 더 난이도가 있다.
그에 반해 피그마는 잘 알려진 웹 프레임워크인 리액트를 사용하면 누구든지 쉽게 만들 수 있고, 윈도우 환경에서도 만들 수 있다는 장점이 있다. 위에서 말한 범용성이 플러그인 제작을 쉽게 만드는 기반이 되었고, 이는 피그마 커뮤니티가 스스로 성장해 지금의 규모가 되게 한 일등공신이라고 봐도 무방할 것이다.
이 플러그인들을 잘 활용하면 반복적인 작업이나 전체에서의 일부 수정, 레이아웃의 변경에 따른 디자인 수정 등등 귀찮은데 안 중요하기도 하고, 그렇다고 안 하자니 팀간 소통에 더 오해만 만드는 그런 작업들을 정말 간단하게 처리할 수 있다. 또한 제품의 주요 정책들을 반영하거나 협업에도 엄청난 시간을 절약시키고 효율성을 극대화해준다. 쉽게 말해 플러그인만 잘 써도 내 일이 절반은 줄고, 피그마 어디가서 못 다룬다는 말은 안 듣는다는 것이다. 그래서, 내가 디지털 제품을 만들면서 나름 유용하게 사용하는 플러그인 몇가지를 소개하고자 한다.
Content Reel 바로가기
반복적인 작업, 특히 이미지나 글이 패턴화되어 계속 나오는 형태의 작업을 처리할 때 압도적인 효율을 보여주는 플러그인이다. 만약 같은 형태로 반복되어 나오는 카드나 리스트 컴포넌트의 썸네일을 동시에 랜덤하게 넣고 싶다면, 썸네일 프레임을 모두 선택한 후에 플러그인에서 원하는 이미지 그룹을 선택만 하면 된다. 입숨 로렘으로 대표되는 더미 텍스트도 가능하며, 로그인해서 사용하면 나만의 그룹을 만들어 빠르게 목업을 제작하는 데에도 큰 도움을 준다.
Material Design Icons 바로가기
지금 설계 중인 제품은 별도의 아이콘 셋을 쓰고 있지만, 빠르게 와이어프레임을 그려야 할 때나 간단한 프로젝트를 할 때도 그렇게 하긴 힘들다. 구글이 잘 만들어둔 머티리얼 디자인 아이콘들을 빠르게 적용할 수 있는 플러그인이다. 아이콘의 스타일, 크기, 색상까지 한번에 제어해서 사용할 수 있어서 나름 유용하게 썼던 플러그인이다.
Font Changer 바로가기
폰트 관련 플러그인들은 정말 많은데, 여러개 쓰다가 그냥 하나만 써야지…하고 썼던 플러그인이다. 서체 정보를 변경해주는 플러그인인데, 원하는 텍스트들이 있는 프레임을 다 선택한 다음 플러그인을 실행하면 된다. 선택한 프레임 안에 들어있는 서체 정보와 텍스트 레이어 갯수를 보여주고, 오른쪽 메뉴에서 변경하고자 하는 서체를 고르면 된다.
일일히 텍스트 레이어를 선택해서 바꾸는 수고로움을 확 줄여주고, 일괄적으로 변경까지 할 수 있다는 편리한 플러그인이다. 단점으로는, 피그마 라이브러리가 인식되지 않는다는 점과 프레임 안에 묶여 있는 텍스트 레이어가 간혹 변경이 되지 않는 경우가 있다. 라이브러리로 타이포 스케일을 다 잡아놓고 쓰는 지금은 사용 횟수가 많이 줄어든 플러그인. 플러그인 마지막 업데이트도 2년 전이라…
Font Scanner 바로가기
이것도 font 키워드로 검색하다 찾은 플러그인인데, 현재 페이지 안의 폰트 정보를 서체 기준으로, 또는 사이즈 기준으로 보여주고 일괄 선택할 수 있게 해준다. 장점과 단점 역시 3번과 유사하다. 취사선택하자.
Filter / Effects 바로가기
완전무결하다고 보이는 피그마에서 가장 아쉬운 건 보정 및 이미지 필터일 것이다. 그 단점을 나름 상쇄해주는 플러그인이다. 원하는 레이어를 선택하면, 그 레이어에 포토샵에서 보이는 다양한 이미지 필터와 레이어 블렌딩 옵션 비스무리한 걸 적용할 수 있다.
Autoflow 바로가기
피그마에서 다수의 화면을 보고 협업할 때 가장 불편한 건, IA나 플로우차트를 번갈아가면서 봐야한다는 점이다. 아무리 화면 네이밍 규칙을 잘 세워도 직관적으로 사용자의 흐름과 디자인을 동시에 보는 건 어렵다. 물론 피그잼을 사용해 플로우차트를 만들 수도 있지만, 피그마에서 바로 디자인과 플로우를 동시에 보고 싶다는 부분은 여전히 해소되지 않는다. 즉, 실제 목업 디자인을 와이어프레임으로 보고 싶다는 니즈가 있다. Autoflow는 그 불편함을 나름 충족시켜주는 플러그인이다.
플러그인을 실행한 후, 각각의 프레임을 연결할 화살표를 커스텀한 후에 서로 다른 프레임을 선택하면 프레임과 프레임을 자동으로 화살표 오브젝트로 이어준다.
단점이라면, 프레임 선택 순서가 화살표 이동 순서라는 점떄문에 간혹 화살표 방향이 반대로 될 때가 있고, 생각없이 프레임을 눌렀다가 화살표가 생기는 경우가 있을 수 있다. 또한 한번 만들어진 화살표들의 속성값들을 변경하는 기능이 없다.
불행 중 다행인지, 피그마에서 Select All with Same Stroke 를 하면 화살표들을 모두 선택할 수 있다. 물론 똑같은 속성값을 가진 디자인 컴포넌트가 있다면 그것도 같이 선택되어버릴 수 있으니, 프레임을 연결할 화살표 디자인은 정말 안 쓸 것같은 색상과 두께로 미리 설정해두고 사용하는 것이 좋다.
Google Sheet Sync 바로가기
앞서 소개한 Content Reel의 심화버전이라고 볼 수 있다. 구글 드라이브에 작성한 구글 시트의 정보를 디자인에 그대로 반영할 수 있는 플러그인이다. 이미지든 텍스트든 뭐든 다 반영할 수 있다. 게다가 데이터가 바뀌면 바뀌는대로 반영되고, 또한 데이터 컬럼을 더 만들어서 빠르게 반복적인 패턴을 만들어낼 수 있다. 또한 정책적인 부분이나 서비스 핵심 데이터까지 연결하고시트 관리만 잘 하면, 디자이너가 일일히 버전 업마다 따라다니면서 수정할 필요도 없다.
생각해보면, 글자 하나 고치자고 다른 일 집중하다가 피그마 열고, 이미지 하나 갈아끼우자고 다른 일 집중하다가 또 방해받고…이 얼마나 귀찮고 불편한데 안 할 수 없는 일들인가! 이런 시간들을 최대한 줄이면서, 동동시에 어떻게 해야 이 불편함을 줄이고 효율적으로 일할까를 계속 고민해야 한다. 그래야 내 생산성이 극대화되는 건 너무 당연한 일이다. 최소한 이런 수정 사항들은 구글 시트로 데이터를 관리해서, 나는 디자인 역량에 내 리소스를 총 집중하는 환경을 만들어보자.
플러그인의 세계는 무궁무진하다
위에서 소개한 플러그인 외에도 핸드오프 문서를 빠르게 만들어주는 Simpli Handoff, 프로토파이로 디자인을 옮겨주는 Protopie, 레이어 이름을 검색해주는 Find / Focus, 사각형을 내가 원하는 그리드로 쪼개주는 Split Shape, 글자를 포토샵에서 처럼 변형시켜주는 Skewdat, 스토리북과 연동시켜주는 Storybook Connect, 라이브러리에 토큰값을 만들어주는 Figma Tokens 등 잘 사용했고 지금도 사용하는 플러그인을 가져오면 밑도 끝도 없다. 다만 정말 잘 썼다! 생각하는 플러그인 몇개만 먼저 소개해봤다. 피그마 플러그인은 이말고도 정말 무궁무진하게 많고, 내가 소개한 것보다 더 빠르게, 효율적으로 제품을 설계할 수 있는 플러그인들이 많으니 오늘부터 당장 피그마 커뮤니티에 방문해 플러그인을 탐색해보길 바란다.
소셜댓글