피그마를 시작하자.
신입에게 가르쳐주는 피그마
변경이 잦은 프로젝트를 재택으로 진행하려고 하니까, 채팅이나 음성 전화로는 한계가 있고, 화면 공유도 시차가 있어서, 진행하던 프로젝트 하나를 피그마로 옮겨서 기획자와 다른 디자이너와 공유하면서 진행하게 되었습니다.
피그마와 스케치는 병행해서 사용 중이었고 피그마는 아이디어를 확인하기 위한 간단한 화면 구성에 사용하였습니다. 피그마가 주요 사용 툴이 되면서, Miro를 사용하던 브레인스토밍이나 User Flow도 피그마로 옮기기로 했습니다.
브런치에서 스케치에 대한 글은 제가 기본이라고 생각하는 디자인 스킬과 함께 설명을 했는데, 온라인으로 공유하는 작업에서 같은 방식으로 설명하면, 똑같은 말을 두 번 하게 돼서 피그마는 기능이 아닌 툴을 포함한 프로세스에 대한 이야기로 시작합니다.
이 글이 작성된지 2년이 지났고, 피그마에도 많은 변화가 있었습니다. 피그마의 변화와 활용에 대한 이야기가 궁금하시면 https://brunch.co.kr/@pliossun/230을 참고해주세요.
피그마는
팀으로 시작한다.
피그마는 온라인으로 제공되는 디자인 툴입니다. 웹 기반의 온라인 툴로 누구나 쉽게 접근할 수 있습니다. 브라우저만 있으면, 디자인을 하는 사람, 디자인을 안 하는 사람, 일을 시키는 사람, 일을 하는 사람이 같은 프로젝트를 보게 됩니다.
스케치는 설치를 하면, 디자이너가 개인적으로 작업을 하고, 그 작업을 공유하기 위해 클라우드를 사용하지만, 피그마는 처음부터 공동 작업을 기반으로 시작합니다. 그래서 팀 구조에 대한 고민이 피그마에 녹아 있습니다. 다른 측면에서 말하면, 스케치는 개인이 자유롭게 작업할 수 있고, 피그마는 같이 일하는 상대방을 인지하고 작업해야 합니다. 스케치는 Assistants로 작업 관리를 하도록 유도하지만, 피그마는 다른 사람이 계속 보고 있기 때문에 무작정 오브젝트를 배치하기보다는 어느 정도 규칙을 지키며 작업하는 것이 좋습니다.
앞서 리뷰한 존 마에다의 책에도 나오지만, Cooperation과 Collaboration은 다릅니다. 콜라보레이션은 각자 독립적으로 존재하면서 역량을 합치는 행위입니다. 피그마는 콜라보레이션을 강조합니다.
피그마는 누구나 자유롭게 쓰는 것 같지만, 작업 권한이 쉽게 나누어지는 구조입니다. 이미 프로세스가 있는 팀이라면, 피그마를 통해 그 프로세스를 개선할 수 있습니다.
그래서 기본 템플릿에 디자인 작업을 위한 템플릿보다 팀 빌딩에 도움이 되는 템플릿이 준비되어 있습니다. Miro처럼 도식을 활용하는 것이 아니라서 쓸모가 있어 보이지만, 아직 사용해 보지는 않았습니다. Figma가 디자인 툴로 인식되는데, 멋진 온라인 참여 문서를 만들 수도 있습니다.
피그마의 프로젝트
스케치와 피그마는 다른 툴이면서, 다른 프로세스를 사용합니다. 피그마는 무료이기 때문에 유료와 무료의 차이가 있습니다. 피그마를 유료로 사용하면, 프로젝트를 위한 라이브러리를 사용할 수 있습니다.
피그마가 어떤 형태로 팀과 프로젝트의 구조를 갖고 있는지 보겠습니다.
피그마의 팀 프로젝트는 Organization과 Professional로 나뉘는데, Organization은 회사 규모로 팀과 프로젝트를 관리할 수 있는데 도움이 되고, Profressional은 팀을 구성하고 작업하는데 도움이 됩니다.
팀 단위의 프로세스는 팀을 만들고, 프로젝트를 만든 후, 디자인 시스템과 파일을 만들면 됩니다. 디자인 시스템은 팀 라이브러리 사용하면 됩니다. 순서대로 하면, 팀 라이브러리에서 파일이 만들어집니다.
팀을 구성한다는 개념이 들어 있어서 팀은 여러 개의 프로젝트를 진행할 수 있습니다.
무료로 써보다가 플랜으로 업그레이드할 예정입니다.팀 전후를 확장하면, 회사와 클라이언트에 대응할 수 있습니다. 피그마를 도입하게 되면, 1명의 작업뿐 아니라 작업 전후의 과정에서도 도움을 얻을 수 있습니다.
이렇게 보시면 아시겠지만, 피그마는 팀 매니지먼트의 상당 부분에서 유용한 기능을 제공합니다.
유료 플랜을 시작하시면, 클라이언트에게 파일을 전달하거나 의견을 받을 때 유용합니다. 만일 인하우스 디자인 팀이라면, 마케팅 팀이나 CS 팀의 즉각적인 피드백을 듣기 좋습니다. 즉각적인 피드백은 요즘 유행하고 있는 애자일, 린, OKR과 잘 맞아 보입니다.
드래프트와 프로젝트
드래프트와 프로젝트를 보겠습니다. 간편하기 때문에 드래프트만 사용하는 경우가 많습니다. 피그마는 크게 드래프트는 팀으로 나누어져 있습니다.
팀은 프로젝트를 여러 개 포함할 수 있고, 관리가 가능합니다. 이 부분에 대해서 도움을 얻기 위해 검색을 좀 해봤는데, 이 부분의 중요성에 대해서 말하시는 분은 적었습니다. 피그마의 장점을 말할 때, 누구나 접속이 가능하고, 함께 작업이 가능하다 부분을 많이 이야기하는데, 이런 구조가 더 중요하다고 생각합니다.
스케치의 경우는 디자이너가 알아서 잘 작업한 후에 완성된 작업을 공유하기 위해 클라우드를 사용합니다. 개별 작업 후, 팀 작업을 진행합니다. 피그마도 비슷하지만, 피그마는 디자이너가 하는 작업을 바로 들여다볼 수 있습니다. 디자인 시스템을 업데이트하기 위한 드래프트도 쉽게 공유하고 채택할 수 있습니다.
몬스터볼 아닙니다...피그마에서 UI 디자인을 구성하는 오브젝트는 프레임에 포함되고, 페이지는 중복된 프레임을 포함하고 파일은 여러 페이지를 포함합니다. 오브젝트를 수정한 드래프트는 프로젝트로 건의되고, 프로젝트에서 정해진 규칙은 오브젝트까지 일관되게 적용됩니다.
포토샵으로 작업하던 때는 이런 작업 흐름은 불가능했습니다. 포토샵은 비트맵이라 파일 하나의 용량이 매우 커서 이런 작업을 실시간으로 공유하면서 작업하는 것은 쉽지 않은 일이었습니다. 하지만 현재의 디자인 작업은 벡터 기반으로 비트맵에 비해 파일의 크기가 매우 작고, 오브젝트에 속성을 조절하는 형태로 디자인됩니다.
또 비주얼도 중요하지만 기능 중심의 컴포넌트 작업을 진행하기 때문에 부분적인 구조의 개선과 전체 구조의 개선이 쉬운 상태입니다.
팀 작업은
팀 프로세스를 따라야 한다.
2021년 3월부터 원할한 팀 작업을 하려면, 유료 플랜(Professional plans)이 필요합니다. 무료로 사용할 수 있는 Starter는 1개의 프로젝트를 만들 수 있고, 3개의 파일에 각 3개의 페이지만 만들 수 있습니다. 다른 툴을 사용하면, 처음부터 개인작업인데, 이게 피그마의 프로세스와 플랜에서는 뒤쪽에 있다는 점은 팀 관리에 있어서 프로세스를 고민하시는 분들은 생각해 볼만한 주제입니다.
디지털 디자인 문화와
피그마 그리고 프로세스
개인 영역과 공유하는 영역이 항상 존재하는 것이 디지털 디자인의 특징입니다. SNS에서 나의 영역과 다른 사람의 영역이 쉽게 섞이게 됩니다.
새롭고, 최신의 툴을 남들보다 먼저 배워서, 최신 트렌드로 작업하는 것도 중요하지만, 팀 단위의 성장도 중요한 시기입니다. 피그마는 오픈된 상태로 중앙 집중적인 구조와 흐름을 가지고 있습니다.
피그마에서 다양한 피드백을 듣기도 하고, 누군가 '내 디자인'을 바꾸거나 다른 용도로 쓸 수도 있습니다. 싸고 규칙 없이 빠르게 만드는 디자인보다 만드는 규칙을 자동화하고, 절차에 따라서 제작을 진행하는 디자인이 디자인 툴의 발전과 함께 확산되고 있습니다. 예전과 다른 점은 진행되는 절차의 모니터링이 자연스러워졌다는 점이죠. 개성이 넘치고 창의적이며, 새로운 문화를 선도한다는 사람들이 모니터링이 쉬운 툴을 적극적으로 홍보하는 게 조금 의아하긴 합니다. 그래서 디자인 문화나 조직 문화가 중요하겠죠.
피그마에 통해서 디자이너를 바라보는 시각과 프로세스도 생각해보려고 합니다.
