기획자가 Figma 쓰는 법: 1부
AdobeXd에서 Figma로 변화 적응하기
일전에 와이어프레임 제작 도구로 Adobe Xd를 사용한다고 이야기한 적이 있다.
처음 와이어프레임 도구로 Adobe Xd를 선택한 이유는 아래와 같다
Window에서 사용 가능해야 한다.
디자인 툴과 호환되어야 한다.
사용법이 쉬워야 한다.
그래서 Adobe Xd 너무 좋다고 어떻게 사용하면 좋을지도 글을 썼었는데 Figma로 갈아타게 돼버렸다(...)
Figma를 도입하게 된 이유
화면 기획을 Adobe Xd로 많이 활용하다 보니 어느새 앱 디자인 툴도 Adobe Xd로 자리 잡아서 디자이너들과 기획자, 마케터가 함께 사용했었다. 하지만 Adobe Xd는 확실히 다른 디자인 툴에 비해 디자인 시스템을 만들고 운용하기에는 부족한 부분이 너무 많았다. 스케치(Sketch)는 여전히 Window 지원을 하지 않았고, Window를 써야만 하는 나와 디자이너들이 같이 쓸 수 있는 다른 디자인 도구가 필요했다. 그래서 최근 엄청나게 인기를 끌고 있던 Figma를 알아보고 도입할지 여부를 결정하기로 했다. 주변에서도 많이 Figma로 갈아타던 중이라 사용 사례가 많이 나오고 있었고, Sketch 못지않은 기능과 플러그인을 자랑하고 있어서 Adobe Xd를 충분히 대체할 수 있을 것이라는 생각에 테스트를 시작했다.
디자이너 중 1분이 Figma 사용에 적극적이셔서 테스트 사용기간에도 디자인 시스템을 시범 삼아(!!) 만드셨고 이 덕분에 Adobe Xd와는 확실히 다른 기능들을 체험해볼 수 있어서 결국엔 서비스 플로우, 와이어프레임, 디자인 작업 모두를 Figma에서 진행하기로 결정했다.
이렇게 갑작스럽게 도입하려던 건 아닌데..?!?(구글 검색)Figma, 은근히 어렵다!
처음 도입 시에는 Figma가 웹앱 기반이라 어디에서나 사용이 가능하고, 단축키나 플러그인이 잘 되어 있어 사용성이 쉽다는 것으로 알고 있었다. 하지만 Adobe Xd를 쓰다 Figma로 갈아탄 내 입장에서 Figma는 결코 쉬운 툴이 아니었다. 단축키를 처음부터 다시 익혀야 했고(Adobe Xd와 단축키가 은근 많이 다르다..!), 많은 기능 중에서 어떤 걸 사용해야 디자인 시스템을 활용해서 와이어프레임을 만들 수 있는지 확인하기 어려웠다. 와이어프레임을 그리는 데는 이렇게 많은 기능이 필요하진 않은데 이 기능들을 다 익혀야 하는가 싶어 걱정되었다.
출처: 구글 검색처음에는 Frame을 Xd의 Artboard와 같은 것인 줄 알고 사용했었는데,
사용하다 보니 뭔가 달랐다
어렵게 느껴졌던 건 Figma에서 Frame에 대한 개념을 이해하지 못한 것도 컸다. 처음에는 Frame을 Xd의 Artboard와 같은 것인 줄 알고 사용했었는데, 사용하다 보니 뭔가 달랐다...! 아트보드는 아트보드 위에 새로운 아트보드를 생성하거나 겹쳐서 사용할 수 없었는데, 프레임(Frame)은 프레임 위에 계속해서 생성하고 겹쳐서도 사용할 수 있었다. Adobe 위주로 툴을 사용하던 디자이너들도 이 부분 때문에 혼란스러워했다. 하지만 이 프레임 단위로 컴포넌트를 생성하면 컴포넌트를 관리하기가 다른 툴에 비해 훨씬 쉽다는 걸 알게 되면서 Figma를 사용하는데 훨씬 수월해진 느낌이 들었다. 그리고 디자인 시스템을 시범적으로 만드신 디자이너분이 Figma를 사용하는데 여러모로 도움을 주셔서 그나마 어려운 느낌을 빨리 덜어낼 수 있었던 것 같다. 다만 Adobe Xd에서 자주 사용하던 반복 그리드 기능이 없고 익숙하지 않아서 느끼는 어려움 때문에 Figma로 와이어프레임을 그리는 게 처음 Xd를 사용할 때만큼의 편안함을 느끼는데 시간이 좀 오래 걸렸다.
Figma로 와이어프레임 그리기
그래도 이왕 다 같이 Figma로 갈아타기로 했으니, Figma에서 와이어프레임을 그리고 공유 기능으로 모든 구성원에게 리뷰를 받아보기로 했다. 디자이너는 can edit 권한으로, 나머지 구성원은 can view 권한으로 초대하고, Team에 Bznav Wireframe 프로젝트를 생성해서 디자인 전의 모든 와이어프레임은 이곳에 저장하기로 했다.
Figma로 와이어프레임을 그릴 때는 flow와 기획 중인 화면, 최종본을 구분하기 위해서 figma의 Pages 기능을 적극 활용했다. 같은 이슈를 진행하고 있는 디자이너와 같이 화면을 보면서 업무를 할 때 각자의 작업물이 뒤섞이는 혼란을 줄이고 동시 작업의 장점을 살리기 위해서다. Pages를 활용하면 여러 장의 종이가 묶인 스케치북에서 각자 다른 장에서 그림을 그리고 나서 비교해보는 것과 동일한 느낌이랄까. 그리고 Pages를 활용하면 하나의 주제로 그려진 많은 화면들을 정리하고 관리하기 쉽다는 장점도 있다. 동시에 많은 화면을 기획해야 할 때 유용한 방법이니 figma를 이용하시는 기획자라시면 한 번쯤은 활용해보시는 걸 추천한다.
Pages 기능 활용 예시이렇게 Pages를 활용해서 정리하면서 와이어프레임을 그릴 수 있게 되다 보니 Flow만 정리할 공간을 만들어 다른 구성원과 Flow에 대해서 소통하기가 훨씬 수월해졌다. 그래서 Figma Plugin 중에서 Autoflow를 활용해서 Flow를 그린 후에 첫 번째 page로 두고, 모든 구성원이 해당 프로젝트를 보면 flow부터 보고 넘어갈 수 있게 해 놓았다. 사실 이전에 Adobe Xd를 사용할 때는 flow를 그리더라도 이미지로 만든 다음에 Zeplin이나 문서화해서 공유했고, 기획안이 변경될 때마다 새롭게 이미지를 만들어야 하는 게 여간 불편한 게 아니었다. 하지만 Figma를 사용하니 flow가 변할 때마다 구성원들이 공유된 프로젝트에 들어와서 보고 의견이 있으면 댓글을 달아두었고 이게 바로 슬랙으로 알림이 와서 실시간으로 확인하고 반영하기가 엄청 수월해졌다.
와이어프레임만 모아둔 Figma 프로젝트그렇다고 혼자서 Figma를 익혀서 사용해보라고 했다면 좀 사용하다 다시 Adobe Xd를 사용하게 되었을 것이라 생각한다. Sketch를 사용해본 경험이 없고 디자인 툴 자체가 익숙하지 않다면 Figma는 확실히 쉬운 도구는 아닌 것 같다. 와이어프레임을 그리기 위한 도구에서 접근성이나 사용성을 따지자면 1순위 PPT > 2순위 Adobe Xd > 3순위 Figma 정도라고 생각한다. 다만 회사에서 디자이너들이 Figma를 적극적으로 사용하고 있고, 기획과 디자인 리뷰의 커뮤니케이션 비용 감소에 대해 고민하고 있는 곳이라면 Figma를 사용하는 게 좋다고 본다. 사내 디자인팀에서 Figma로 디자인 시스템을 적극 만들어두고 있고, 이 시스템과 컴포넌트를 잘 활용할 수 있다면 다른 툴이 Figma를 대체하기는 어려울 것 같다. 최초에 사용 하기에 어려움을 느끼더라도 Figma 만들어진 디자인 시스템과 컴포넌트를 활용하는 건 어떤 디자인 툴보다 가장 사용하기 쉽기 때문이다.
그래서 그런지 2020년 UX Tool과 관련된 만족도 조사에서 Figma가 압도적으로 1위를 차지했다. 진입장벽이 좀(아니 많이...) 있는 편이긴 하지만, 한 번 익숙해지면 또 이 매력에 빠져나올 수 없어서 다들 Figma를 그렇게 좋아하는 것 같다.
사실 이번에 Figma에서 주로 사용하는 단축키와 Plugin을 소개할까 했는데, 그전에 Adobe Xd로 와이어프레임 그리기 글을 올린 지 얼마 안 됐는데 갑자기 Figma 쓴다 그러면 배신감을 느낄까 봐 넘어오게 된 계기와 활용법을 소개하다 보니 글이 길어져서 소개를 못했다. 다음 편에는 기획자가 주로 사용하는 Figma 단축키와 Plugin을 소재로 찾아오겠다.
