피그마 파일 관리 기법_v 1.0

서비스 기획자가 피그마 파일을 관리하는 방법

인트로

27주 차 회고록의 #3의 내용처럼 피그마로 기획서를 제작하는 것에 앞서, 피그마로 파일(문서)을 어떻게 관리할 것인지에 대해 정리해 보았다.

모쪼록 이 기법들은 내가 피그마를 사용해 오면서 이렇게 관리할 수 도 있을 텐데라고 생각하던 것들을 정리한 만큼 실제 사용성에 대해서는 고려되지 못한 부분이 분명 있을 것이다. 이 부분은 사용하면서 차차 채워나가고 업데이트할 생긱이다 . 혹시 이 기법들을 도입하는 분들이 생긴다면 함께 고민을 나눠봐도 좋을 듯하다.

노션에서 최신 버전을 관리하고 있다. 노션에서 확인하는 것도 추천(하하) ☞ 피그마 파일 관리 기법_v 1.0

---

1. 개요

피그마는 디자이너와 개발자의 협업을 주 목적으로 나온 디자인 전용 툴이다. 그럼에도 불구하고 기획서 등 문서를 피그마로 만들고 관리해야 할 일이 많기 때문에, 이를 효율적으로 관리하기 위한 관리 기법을 정의하고 개선하고자 한다.

2. 목표

피그마로 기획서를 관리하는 기법을 정의하고, 각 기법별 특징/장점/단점/예시를 정리한다.

3. 고려사항

- Professional 플랜 결제한 계정을 전제로 한다. (Team libraries, Projects 사용을 위함)

- 피그마는 Axure처럼 폴더 트리를 만들 수 없다. 단, Team 내에 프로젝트(폴더 역할)를 생성해 Project 안에서 다수의 피그마 파일을 관리할 수 있다.

- Jira 플러그인을 통한 업무에 대한 Sync 조정 등은 기법과 별개로 Ground rule을 정하고 공통 적용한다.

- Ready for Dev나 섹션별 문서, 스토리보드 등의 정리 방식은 기법과 별개로 Ground rule을 정하고 공통 적용한다.

- 디자인 산출물의 경우 디자이너가 따로 별개의 피그마 파일에서 최신 버전을 관리하는 것이 좋으며, 이 기법은 개발 협업을 위한 기획서를 관리에 집중한다.

- 문서 내에서 화면설계시, 디자이너가 만든 디자인 시스템의 컴포넌트를 사용하거나 공통된 디자인 키트의 컴포넌트를 사용해 제작한다.

디자인 키트 예시 ☞ MUI, LITHIUM DESIGN SYSTEM, Design Systems For Figma, Ant Design Systems

4. 기법

4.1. 주기별 파일 정리 기법

주기별 파일 정리 기법이란 마일스톤, 스프린트와 같이 특정 주기를 기준으로 피그마 파일 기획서를 관리하는 기법을 의미한다.

4.2. 단위별 파일 관리 기법

단위별 파일 관리 기법이란 프로덕트, 버전, 기획서와 같이 특정 단위를 기준으로 피그마 파일 기획서를 관리하는 기법을 의미한다.

4.3. 참고 자료

ⓒ 327roy

4.4. 위계 관계

피그마의 위계 관계는 [팀 → 프로젝트 → 피그마 파일 → 파일 내 페이지 → 페이지 내 섹션]으로 이루어져 있다.

ⓒ 327roy

5. 기법 상세 정리

5.1. 요약

ⓒ 327roy

5.2. 주기별 파일 정리 기법 종류

5.2.1. 마일스톤별 파일 정리(예시 피그마)            

- 마일스톤을 기준으로 피그마 파일을 생성하고 관리한다.

- 피그마 Project는 협업 관계자들의 공통 기준을 만들어 생성한다.

- 파일 내 Page는 스프린트별로 생성하고 관리한다.

- 페이지 내 Section은 기획서별 생성하고 관리한다.

5.2.2. 스프린트별 파일 정리(예시 피그마)          

- 스프린트를 기준으로 피그마 파일을 생성하고 관리한다.

- 피그마 Project는 마일스톤별로 생성한다.

- 파일 내 Page는 기획서별로 생성하고 관리한다.

- 페이지 내 Section은 장표별로 생성하고 관리한다.

스프린트별 파일 정리 ⓒ 327roy

5.3. 파일별 파일 관리 기법 종류

5.3.1. 프로덕트별 파일 정리

- 프로덕트별 파일 정리(예시 피그마)

- 프로덕트를 기준으로 피그마 파일을 생성하고 관리한다.

- 피그마 Project는 협업 관계자들의 공통 기준을 만들어 생성한다.

- 파일 내 Page는 아래 두 가지 중 한 가지 방법으로 관리할 수 있다.

  → 버전별로 Page를 생성하고 관리한다.

  → 모듈 혹은 기능별로 Page를 생성하고 관리한다.

- 페이지 내 Section은 스프린트, 기획서별로 생성하고 관리한다.

5.3.2. 버전별 파일 정리(예시 피그마)

- 프로덕트의 버전을 기준으로 피그마 파일을 생성하고 관리한다.

- 피그마 Project는 마일스톤 등 주기를 기준으로 생성한다.

- 파일 내 Page는 기획서별로 생성하고 관리한다.

- 페이지 내 Section은 정책, 플로우, SB 등 장표별 생성하고 관리한다.

5.3.3. 기획서별 파일 정리(예시 피그마)

- 기획서 단위로 피그마 파일을 생성하고 관리한다.

- 피그마 Project는 주기(마일스톤, 스프린트 등) 혹은 프로덕트의 기능이나 모듈 단위로 생성한다.

- 파일 내 Page는 기획서의 장표별로 생성하고 관리한다.

- 페이지 내 Section은 SB 장표를 제외하고 사용하지 않아도 무관하다.

5.4. 기타 종류

5.4.1. 프로젝트별 파일 정리

- 프로젝트별로 파일을 생성하고 관리한다.

- 프로젝트의 사이즈(기간 등)에 따라 주기별/단위별 파일 관리 기법의 내용을 혼합해 사용한다.

6. 참고 자료

#피그마 플랜

ⓒ Figma

#피그마의 팀과 프로젝트

ⓒ 327roy

#아토믹 디자인 방법론

- Atomic Design Methodology

- [카카오 엔터] 아토믹 디자인을 활용한 디자인 시스템 도입기

- 특징 및 장단점

ⓒ Atomic Design Methodology

---

그래서?

일단 피그마에서 기획서를 관리하기 위해서는 이를 한눈에 확인할 수 있는 일종의 '네비게이터'가 필요하다. 이것을 푸는 방법은 1) 기존 사용하던 문서 툴(Confluence, Notion 등)에 기획서 링크를 업데이트하든지, 2) 혹은 피그마의 팀 라이브러리를 활용해서 마스터 네비게이터를 관리하는 방법이 있을 것이다. 뭐든 한눈에 관리하기 위해 최초 한 번은 링크를 연결하는 수동 과정이 필요하다. (자동화 방법이 있으면 공유 좀..)

이후 글에서는 피그마의 팀 라이브러리를 활용해 마스터 네비게이터를 관리하는 방법에 대해서 작성할 예정. 내용을 사실 별거 없긴 하다. 1) 기획서 링크를 가진 마스터 네비게이터(메뉴 구조도 형식도 좋음) 생성, 2) 컴포넌트화 후 팀 라이브러리 배포, 3) 피그마 디자인 파일에서 해당 컴포넌트 사용하는 정도.

피그마의 팀 라이브러리를 사용하지 않고, 개인 계정으로만 기획서 단위로 파일 관리를 한다고 하면 노션을 사용해도 좋을 듯하다. 결국 필요한 것은 기능 단위로 업데이트 히스토리를 파악하기 위한 기획서의 모음집이니까.

근데 요즘은 히스토리를 수기로 처리하는 것에 대해 고민이 있다. 몇년 일해보니 이 히스토리가 필요할 일이 극극소수였다. 그렇지만 우리는 기획서에 히스토리를 작성하려고 하는 것이 보편적이다. 문서의 최종 책임자를 가리고, 역추적을 위한 것이라 생각하는데 기능의 담당자는 히스토리가 아닌 다른 방법으로도 나타낼 수 있을 것이고, 역추적을 위한 문서 히스토리 노트는 미래의 불안감을 덜기 위해 그 비용을 당겨 쓰는 것이 아닐까하는 생각이 든다. (변경 전후까지 수기로 명기하는게 때론 기획서 만드는 것 보다 더 힘들었다.) 따라서 특별한 상황이 아니면 피그마, 노션 등 히스토리 기능으로 대체해 나갈 예정.

이번 글에서는 피그마에서 파일을 관리하는 방법에 대해 다뤘다. 이후에는 피그마 파일 내에서 기획서를 관리할 때 어떻게 개발 업무와 Sync를 맞출 것인가에 대해서 다룰 수 있을 듯하다. 아마 피그마의 Dev mode와 Jira plugin을 사용하여 이 프로세스를 구축할 수 있을 것이란 생각이 든다.

p.s. 여담으로 회사에서 사용할 피그마 강의자료를 하나 만드는 중. 이후에 여기에서도 공개해볼까 한다.

ⓒ 327roy