brunch

You can make anything
by writing

C.S.Lewis

by 서비스 기획자 엘린 Jul 30. 2022

기획자가 피그마 쓰는 법: 3부

디자이너와 figma로 협업하기

지난번에 작성한 기획자가 Figma 쓰는 법 1부2부에 이어 약속한 대로 기획자인 내가 디자이너와 협업하는 방법에 대해서 이야기하기 위해 다시 돌아왔다.


우리 회사(지엔터프라이즈)는 현재 PO(Product Owner)가 PRD(Product Requirement Document)의 형태로 기획문서를 꼼꼼하게 작성하고, 와이어프레임부터 디자인 완성본까지 디자이너가 작업하는 형태로 업무가 이루어진다. Adobe XD를 사용하고 지금의 프로세스가 확정되기 전에는 기획자인 내가 와이어프레임을 간단하게 그리고 기획 문서와 함께 리뷰를 받고 나서 디자인을 진행했다면, Figma를 도입 후부터는 점차적으로 와이어프레임부터 모든 화면 설계와 디자인 과정은 디자이너에게 업무가 모두 넘어가게 되었다.


물론 아직도 나는 화면을 간단하게 그리면서 기획하는 것을 좋아하고 Flow나 간단한 화면 기획을 Figma를 통해 진행하고 있지만, 와이어프레임을 그리는데 공을 들이기보다 PRD 작성에 좀 더 시간을 투자하여 상세한 기획서를 작성하는 게 훨씬 이득이라는 것을 깨달은 뒤로는 디자이너가 투입될 여력이 없고 화면 기획만으로 개발이 진행될 상황에만 Figma를 적극 활용하고 있다.


Pages로 기획과 디자인 파일 구분하기

Figma로 Flow나 와이어프레임을 내가 그려야 할 경우에는 Figma 각 디자인 파일의 Pages기능을 적극 활용하고 있다. 디자인 파일을 생성하고 기획이란 단어가 들어간 제목을 붙인 Page 내에서 와이어프레임과 플로우를 1차로 정리하면, 그 내용을 그대로 복사하여 디자이너가 새로운 Page를 생성하고 디자인을 진행한다.        


기획 Page에서는 나와 디자이너 누구나 자유롭게 수정 가능하지만, 가급적 기획 Page에서는 나 또는 다른 PO만이, 다른 디자인 Page에서는 디자이너들만 수정하는 암묵적인 규칙을 정하고 이용하고 있다. 수정이 필요한 곳은 Figma의 Comment(댓글) 기능을 활용해서 소통하고(@계정이름을 입력하면 대상자에게 알림이 가서 실시간 소통도 가능하다.) 수정이 완료되고 더 이상 댓글 내용이 필요하지 않을 경우에는 완료 처리하여 댓글을 보이지 않게 한다. 권한으로 완전히 통제하면 좋겠지만, Figma에서 Design Role에게 파일별 혹은 그룹별로 명확하게 권한을 구분해서 부여하는 기능은 아직 없는 것으로 알고 있다.(Professional 요금제 기준이다. Organization 요금제는 좀 다를지도 모르겠다.) 그래서 암묵적으로 위와 같은 규칙을 지키며 협업하고 있다. 만약 PO나 기획자가 디자인이 완성된 내용을 수정해야 할 경우, 수정한 후에 댓글을 달아 왜 수정했고, 뭐가 수정되었는지 기록해둔다.


Project로 파일 그룹 짓기

개별 Figma 디자인 파일들은 큰 분류에 따라서 각각의 그룹으로 묶여 관리하는데, 와이어프레임과 완성된 디자인 파일을 구분하여 관리하고 있다. 기획과 디자인 파일이 함께 있고, 론칭되기 전의 내용들은 전부 와이어프레임 그룹에서 파일을 관리하고, 디자인이 완료되고 론칭된 기능들은 Mobile, Webapp, Marketing, Landing 등의 그룹으로 나눠 관리하고 있다. 필요할 경우 개인 Project 그룹을 만들어서 따로 관리하기도 한다. 개인 Project 그룹은 공식적으로 화면을 공유하기 애매하고 낙서장처럼 사용하기 위해서 사용하는 경우가 많다. 개인 공간에서 Ideation을 하다가 공식적으로 작업물을 공유할 때에는 공동 작업 공간(와이어프레임 등)으로 옮겨서 공유한다. Foundation 폴더는 디자인 시스템을 위한 기본 컴포넌트들을 정리해 둔 곳이며, 와이어프레임을 제외한 공식적인 Bznav 디자인 폴더들은 디자이너만 수정하고 있다.        



백업하기

Figma는 기능도 많고 사용하기도 편리하고 장점이 정말 많은 도구지만, 컴포넌트를 업데이트할 때 종종 디자인 완성된 화면이 깨지는(사라지는..?) 경우가 있어 초반에 백업 없이 작업할 때는 곤란한 상황이 자주 벌어지곤 했다. 그래서 초기에는 제플린에다가 백업을 진행하다가 제플린 백업이 비효율적이어서, 디자이너들이 정기적으로 로컬 파일로 백업을 진행하고 있다.        



와이어프레임부터 디자이너가 참여하다 보니 PO/기획자가 Figma에서 직접 디자인을 수정할 일이 줄어들다 보니 기획자는 문서에   집중하고 디자이너는 화면에   집중해서 Figma 파일 관리하는데   간편해진 느낌이 들었다. 화면 기획과 와이어프레임까지 모두 기획자가 진행하는 곳이라면 Figma 기획 파일과 디자인 파일을 어떻게 관리하고 변경사항을 어디에 기록할지는   회사  디자이너와 이야기 나누고 회사에 맡는 방향으로 규칙을 정하는 것이 좋을  같다. 이상으로 기획자가 Figma 쓰는  시리즈를 마무리하겠다.




여담.

이 글을 쓰고 다음날이 마지막 출근일이었다. 8월 8일부터는 새로운 곳에서 적응하면서 글을 쓰게 될 것 같다. 새로운 곳의 적응기도 한 번 열심히 써보려고 한다. 읽어 주신 분들 모두 감사드린다.

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