UI 디자인툴 피그마(Figma)로 기획서 써보기
UI 프로토타이핑 툴 피그마
UI 디자인툴 피그마(Figma)로 기획서 써보기
오~ 좀 편할 거 같은데
피피티의 마스터 슬라이드같이 화면 요소들을 한 번에 관리할 수 있는 컴포넌트, 윈도우든 맥이든 따로 설치 없이 웹 브라우저만 있으면 작업할 수 있는 환경.
처음 피그마(Figma)를 알게 되고 피그마에 관심을 가지게 만들었던 기능들입니다.
그리고 막연하게 UI 프로토타이핑 툴인 피그마로 기획서를 만들고 공유하고 관리하게 된다면 보다 편하지 않을까, 조금 더 효율적이지 않을까 하는 생각이 들었습니다. 그리고 최근에 프로젝트 종료 후에 여유 시간을 활용하여 피그마로 기획서를 만든다면 어떨까 하는 궁금증을 가지고 자세히 들여다보는 시간을 가져보았습니다.
지금부터 그 내용들을 정리해서 공유해 드리도록 하겠습니다.
피그마로 기획서를 써볼 만 이유
#1 여러 와이어프레임을 한 번에 수정할 수 있게 해주는 컴포넌트
피그마보다 앞서 스케치(Sketch)를 알게 됐을 때도 그것으로 파워포인트를 대신해보고 싶은 욕심이 생겼습니다. 스케치에서 제공한다는 컴포넌트 기능이 매력적으로 보였기 때문이었죠. 파워포인트의 마스터 슬라이드가 기본 템플릿을 만들어 반복 사용할 수 있게 해 주고, 템플릿 수정을 한 번에 반영해주는 기능이라면 컴포넌트는 화면 혹은 화면의 일부 요소들을 묶어서 반복 사용하고 관리할 수 있게 해주는 기능입니다.
기획서를 작성하다 보면 하나의 화면을 상황에 따라, 혹은 구역에 따라 여러 페이지에 나눠 설명하게 됩니다. 그러다 보니 하나의 와이어프레임을 여러 번 복사 붙여 넣기 해서 사용하죠. 만들 때는 어렵지 않습니다. 하지만 문제는 수정이 필요할 때 발생합니다. 연속되는 몇 장의 장표에, 또 한참 떨어진 장표에서 수정이 필요한 부분을 일일이 찾아서 변경하는 작업을 파워포인트는 도와주지 못합니다. 그저 Ctrl+F만 제공할 뿐이죠.
하지만 피그마로 기획서 작업하게 되면 이런 번거로움에서 벗어날 수 있습니다. 반복될 와이어프레임을 미리 마스터 컴포넌트로 만들어두고 복붙을 하면 수정이 필요할 때마다 마스터만 만지면 일일이 찾아다니지 않아도 모든 페이지에서 수정할 수 있습니다.
물론 컴포넌트를 복붙 하더라도 상황에 맞게 개별적인 수정도 가능합니다.
* 마스터 컴포넌트를 통해 여러 페이지를 한 번에 수정할 수 있습니다. 만세!#2 언제나 최신 문서를 볼 수 있는 실시간 공유
피그마가 가진 최고의 차별점은 바로 온라인에서 동작하고 파일도 관리된다는 점입니다. 모두에게 열여 있는 온라인상의 공간에서 작업하고 파일을 관리하다 보니 작업자가 아닌 (허락된) 누구라도 언제든지 최신 문서에 접근해서 같이 작업하고 작업물을 보고 또 타인의 것에서 필요한 요소를 가져다 사용할 수 있습니다.
기존에 구글 드라이브라든지, 메신저를 통해 문서를 공유하면 다운받아서 확인하고 사용하는 상황과는 매우 다릅니다. 누군가가 공유해주기를 기다릴 필요도 없고 잘못 확인해서 다른 버전을 최신 버전으로 착각했다거나 업데이트된 사실 자체를 놓치는 일을 막을 수 있습니다.
*출처 : 피그마 공식 홈페이지물론 모두가 문서에 접근할 수 있고 수정할 수 있어서 수정되면 안 될 문서를 누군가 잘못 건드릴 수도 있습니다. 그럴 경우에는 변경사항을 모두 기록해두는 히스토리를 통해 언제든 복구 가능합니다.
#3 필요한 부분을 콕 찍어서 커뮤니케이션할 수 있는 댓글 기능
*여기 문구에 대해 같이 고민해봅시다! 뭐 이런 것들을 가능하도록 해주는 댓글 기능입니다.피그마의 또 하나 특징적인 기능은 댓글을 문서 내 원하는 곳에 남길 수 있다는 점입니다.
만약 팀원들이 같이 고민해야 할 부분이 있다면 해당 위치에 표시해서 모두가 정확히 확인한 후에 논의를 시작할 수 있는 것이죠.
작업을 위한 논의를 문서는 문서대로 열어놓고 메신저는 메신저대로 사용하여 커뮤니케이션하는 것이 아니라 얘기하고 싶은 포인트에 댓글을 남겨놓으면 누구든 그 위치에서 같은 상황을 보며 댓글로 논의할 수 있다는 점에서 보다 원활하게 커뮤니케이션할 수 있을 것 같았습니다.
하지만 여전히 문서를 위한 도구는 아니다
실무와는 전혀 상관없고, 그렇다고 실무와 비슷한 수준으로 작업을 하며 테스트를 한 것은 아니지만 기획서의 틀을 잡아보면서 상황에 따라 피그마로도 충분히 기획서를 만들고 프로젝트를 해볼 수 있겠다는 생각이 들었습니다.
하지만 결국에는 문서 작업을 위한 도구가 아니기에 발생하는 불편들이 있었습니다.
표 만들기 기능의 부재라든지(플러그인으로 있기는 하나 충분히 만족할만한 플로그인도 없는 상황), 문서답게 한 장 한 장 순차적으로 볼 수 없다든지, 문서화하여 출력하기 위해서는 추가적으로 순서를 정리해야 하고, 또 PDF로만 가능하다는 것들이 대표적으로 느껴지는 불편함이었습니다.
또 간혹, 정확한 발생 상황을 모르겠지만 발생하는 한글 입력 시에 띄어쓰기, 내려쓰기와 관련한 자잘한 버그들도 눈에 띄었습니다.
그리고 무엇보다 효율적으로 일해야 하는 실무에서 익숙한 파워포인트를 벗어난다는 것만큼 큰 단점도 없다는 생각이 들었습니다.
그럼에도 굳이 피그마에 도전해볼 이들을 위한 팁
앞에 쓴 이슈에도 불구하고, 또 언제 어떤 불편을 더 만날지 모름에도 와이어프레임 관리의 편리함과 공유의 이점에 관심이 생겨 피그마로 기획서를 작성하고 공유하려는 용자들이 있기를 바라면서 파워포인트의 아쉬움을 덜어줄 몇 가지 팁도 정리해봤습니다.
첫 번째, 표는 없다, 대신 Auto Layout을 잘 활용하자!
기능 정의를 적어두는 디스크립션 영역을 많은 기획자들이 표로 만들어 사용합니다. 정의하고 싶은 요소 간 구분도 쉽고 내용에 따라 영역 크기가 자동으로 변화되고, 새로운 행을 쉽게 추가할 수 있기 때문일 텐데요.
아쉽게도 피그마에는 제대로 된 표 기능이 없습니다. 디자인 툴이니까 사실 당연한 것이겠죠. 하지만 표를 사용하는 이유를 충족시켜줄 기능은 존재합니다. 그것이 바로 Auto Layout입니다.
디스크립션 텍스트를 Auto Layout 설정하면 텍스트 보더 라인도 그릴 수 있고, 글자 수에 따라 영역도 따라 커지도록 할 수 있습니다. 또 여러 텍스트를 묶어 한 번 더 Auto Layout 하면 디스크립션 영역 개수도 손쉽게 늘릴 수 있습니다.
두 번째, Ctrl+F 대신에 플러그인 ‘Find and Replace’
기획서에서 수정해야 하는 것이 와이어프레임만 있는 것이 아니죠. 정의와 같은 텍스트 내용도 수정해야 합니다. 수정을 하지 않고 그저 찾아서 보기만 할 때도 있습니다. 그럴 때면 Ctrl+F 키로 손이 가게 됩니다.
하지만 웹브라우저에서 동작하는 피그마에서 Ctrl+F는 제대로 동작하지 않습니다. 그래서 필요한 것이 ‘Find and Replace’ 플러그인입니다. 말 그대로 찾아서 바꿔주는, 파워포인트의 Ctrl+F를 그대로 구현해주는 플러그인입니다. 이 플러그인만 있다면 피그마에서 파워포인트와 같이 특정 내용이 담긴 페이지를 쉽게 찾고, 부분적으로 혹은 일괄적으로 수정할 수 있습니다.
세 번째, 레이어 네이밍 관리에는 ‘Rename It’ 플러그인
아무래도 문서를 페이지별로 순차적으로 보여주고 출력도 할 수 있는 문서 작성용 프로그램이 아니다 보니 피그마에서는 나중에 출력한 문서를 관리하기 쉽도록 레이어 네임을 정리해줄 필요가 있습니다. 꼭 출력을 위해서만이 아니라 넓고 특별히 순서가 부여되지 않는 작업 환경 속에서 문서의 순서를 명확하기 위해서도 레이어별로 네임을 넣어둬야 하는 파워포인트에서 마주하지 못한 번거로움이 있습니다.
그런데 이런 번거로움을 조금은 가볍게 해줄 플로그인이 있습니다. 그것이 바로 ‘Rename It’ 입니다.
* ‘3’ 레이어를 복붙 하면 자동으로 ‘4’ 레이어를 만들어주는 Rename ItRename It을 설치하고 첫 번째 레이어에서 네이밍 규칙을 지정해두면 이후로 복제되는 레이어들에는 자동으로 해당 규칙대로 명칭이 지정이 됩니다. 더불어 레이어 순서를 변경한 후 그에 맞춰 네임에 들어간 순번을 재배치할 수 있습니다. 굳이 네이밍 관리를 안 해줘도 된다면 더할 나위가 없겠지만 피그마의 특성에서는 이 플러그인을 잘 사용해보는 것이 아마 최선이 아닐까 생각했습니다.
지금까지 피그마로 기획서를 써보면 어떨까 하는 아이디어를 구체화해보며 알게 된 몇 가지를 정리해보았습니다. 피그마는 파워포인트를 조금이나마 대신할 수 있다는 생각이 드셨나요? 이 글을 통해 누군가에게 익숙했던 파워포인트를 무언가로 대신해볼 수 있지 않을까? 하는 의문과 아이디어를 떠올리게 했기를 희망합니다.
만약 여러분의 다른 아이디어가 있으시다면 공유해주세요!
감사합니다.
– 라이트브레인 가치 UX 그룹 신승환
