brunch

You can make anything
by writing

C.S.Lewis

by 쥐군 Dec 16. 2022

피그마를 이용한 화면 설계의 장점 3가지

파워포인트보다 나은 피그마 활용법

서비스 또는 시스템을 기획해야 하는 입장에서 가장 흔히 활용되는 스토리보드(Story board, 화면 정의/설계서)는 아마도 파워포인트일 것이라 생각합니다. 

가장 보편적으로 오랜 시간 동안 기획자들의 업무에 큰 기여를 했고 지금도 많은 기업에서는 가장 익숙한 도구인 파워포인트를 이용한 화면 설계서를 요구하는 것이 보편적이라 할 수 있습니다. 


저는 처음에는 실험적으로, 현재는 주도적으로 화면 설계를 피그마로 진행하고 있고 주변에도 열심히 설파하는 입장인데요. 이유는 크게 3가지 정도로 압축할 수 있습니다. 

첫 번째로 실제 서비스 화면과 동일한 픽셀 크기 환경에서 기획을 할 수 있으며, 두 번째로 버전 관리가 매우 쉽고, 세 번째로 피드백을 매우 쉽게 받고 반영할 수 있기 때문입니다. 


물론 파워포인트가 가진 장점도 많이 있습니다. 모든 PC에서 손쉽게 실행할 수 있고 보안네트워크 환경에서도 어려움 없이 작업을 할 수 있다는 점도 사실 큰 장점입니다. 의외로 SI/SM 프로젝트 같은 경우 가장 큰 걸림돌은 개인적으로 보안네트워크였었는데 이는 피그마를 사용하는 가장 큰 허들이 되기도 합니다. 


특히 파워포인트의 가장 강력한 점은 협업하는 거의 모든 사용자가 별도의 학습과정을 거치지 않아도 된다는 점이겠죠. 대부분의 현업자는 사회생활을 하기 전부터 파워포인트를 다뤄봤을 가능성이 매우 높고 여전히 많은 기업은 화면 설계서가 아니더라도 보고서나 제안서 등 다양한 용도로 파워포인트를 활용하기 때문에 가장 익숙하고 능숙하게 작업 결과물을 열어보고 검토할 수 있습니다. 


그럼에도 불구하고 피그마가 가진 강점은 전혀 희석되지 않습니다. 


피그마를 활용해 작업한 화면 설계 화면

1. 서비스 환경과 동일한 픽셀 크기

파워포인트를 이용해 화면 설계를 할 때 가장 큰 문제 중 하나가 바로 실제 화면과 파워포인트에서 보여주는 화면의 비례가 달라진다는 점입니다. 특히 모바일 설계가 많은 현재에는 비율에 맞춰서 화면을 설계하기엔 가로 화면으로 최적화되어 있는 파워포인트의 문서 구성과 모니터 환경이 걸림돌이 되죠.

모바일 페이지의 특성상 가로 폭이 좁고 세로로 길어지는 구성이 많은데, 이를 상세히 정리하기 위해서는 불가피하게 여러 장의 문서로 나누어 화면을 잡아야 하고, 작은 공간 안에 많은 내용을 기술해야 하기 때문에 문서의 폰트 사이즈는 한없이 작아지기도 합니다. 


네가 아무리 길어져봐라 내가 페이지를 나누나

하지만 피그마로 작성할 경우 정확한 픽셀로 작업 환경을 조성할 수 있음은 물론이고 페이지를 나눌 필요 없이 필요한 만큼 세로 길이를 확장해 한눈에 보이는 화면 설계가 가능합니다. 

실제 작업 검토자는 물론 작업자 역시 한눈에 현재 작성된 화면 설계 항목을 볼 수 있어서 보다 유연한 업무가 가능하다는 점도 매우 큰 장점이라 할 수 있습니다. 


2. 버전과 날짜가 사라지는 작업 환경

피그마의 작업 파일은 100% 클라우드 환경에서 작성됩니다. 사실 별도의 파일이라는 개념 없이 모조리 피그마 서비스 내에서 동작하기 때문에 따로 저장하는 행위 자체가 사라집니다. 마우스 커서 또는 키보드 타이핑이 멈춘 순간이 마지막 저번으로 자동으로 기록되어 있기 때문이죠. 

이는 상당한 장점을 가져옵니다. 여러 개의 버전으로 나뉘는 문서가 되면 피드백과 작업 결과물이 점점 파편화가 이루어질 수 있습니다. 


특히 규모가 큰 서비스 또는 시스템 기획의 경우 한 사람이 아닌 여러 명의 작업자가 함께 기획 업무를 수행하기 때문에 처음부터 많은 문서가 생성되고 각 문서 별 버전 관리, 생성자 관리, 취합 관리 등의 부수적인 업무가 발생하게 됩니다. 


피그마는 동시접속 및 작업 기능을 지원하기 때문에 문서의 분산을 막아주고 각자의 작업자의 업무 트래킹도 가능하기 때문에 별도의 버전 관리 및 문서 취합(Merge) 과정을 생략할 수 있습니다.


3. 손쉬운 피드백과 반영

피그마의 가장 강력한 기능 중 하나가 바로 Comment 관련 기능이 아닐까 싶습니다. 피그마에서 설계된 모든 화면은 각 요소 단위로 검토자가 댓글을 남길 수 있고, 해당 내용을 작업자가 확인 후 답변을 하거나 수정을 할 수 있습니다. 

처리가 완료된 항목은 모두 해결된 항목으로 변경하여 보이지 않도록 숨길 수 있고 필요시 언제든지 전체 댓글 히스토리를 열람할 수 있습니다. 

이 모든 과정은 별도의 작업자와 검토자 및 기타 업무 이해관계자의 대면, 리뷰 없이 가능하기 때문에 소위 말하는 비대면 업무에 최적화된 기능이라 할 수 있습니다. 



파워포인트는 충분히 강력한 도구지만 근간이 프레젠테이션에 목적을 두고 있는 문서도구입니다. 반면에 피그마는 처음부터 웹사이트 및 서비스, 앱 등을 설계하고 디자인하는 것을 목적으로 한 도구로써 보다 유연하고 정확한 업무 수행이 가능하도록 설계되었기 때문에 더 효율적인 업무가 가능합니다. 


아직은 익숙하지 않아서, 혹은 디자인 툴이라는 관념으로 업무 도구의 가치를 고려하지 않았다면 한 번씩 활용을 고민해보시는 것을 추천합니다. 

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari