파편화된 피그마 디자인 파일, 하나로 합치기

🙌 들어가며

안녕하세요, 노머스 UX 팀에서 UX/UI를 담당하고 있는 이기환입니다.

저는 노머스에 입사한 지 5개월이 되었는데요, 제가 다뤄볼 주제는 피그마 파일 아카이브 방식과 관련된 개선 이야기입니다.

피그마 파일 아카이브 방식은 정해진 정답은 없으며 회사/서비스의 규모, 디자이너들의 스타일 등 회사마다 아카이브하는 방식이 모두 상이합니다.

🔍 피그마 파일 아카이브의 중요성

피그마 파일 아카이브는 디자인팀의 자산인 프롬 내 화면들을 효과적으로 관리하는 방식으로, UX팀의 중요한 업무 중 하나입니다.

서비스가 커지고 제공하는 기능이 많아질수록 기하급수적으로 늘어나는 화면들을 효율적으로 관리할 수 있으며 피그마 파일 아카이브를 잘 정리 해놓는다면 화면을 효율적으로 관리하고 보관하는 것뿐만 아니라, 신규 입사자들에게 프롬 서비스를 파악하기 위한 훌륭한 온보딩 자료로도 활용될 수 있을 것입니다.

🗂️ 현재 피그마 파일 아카이브 구조

현재 피그마 파일들은 상위 ‘fromm 서비스명’ 의 여러 폴더로 구성되어 있으며, 폴더 하위에 여러 개의 ‘프롬서비스명_플로우’ 파일로 구성되어 있습니다.

이처럼 상위에서 서비스명으로 나누고 하위에서 플로우로 구분하여 아카이브를 하지 않았다면 하나의 파일에 화면이 수천 개가 되었을 것입니다.

이러한 방식은 서비스가 커짐에 따라 필수적인 파일 관리 방식이며, 파일 로딩 속도 측면과 파일에 접속하여 원하는 화면을 빠르게 찾기 위해서도 파일을 나누는 것은 바람직한 방법입니다.

‼️ 문제 인지

하지만 입사 당시 온보딩 과정에서 피그마로 프롬 서비스를 온전히 파악하는 것에 어려움이 있었습니다.

파일을 나누는 것은 로딩 속도, 원하는 플로우/화면 탐색 측면에서 효과적이지만, 플로우가 많아질수록 전체 서비스 구조 파악을 어렵게 만드는 치명적인 단점이 있습니다.

또한 서비스 규모에 비해 나눈 파일이 너무 많은 것이 아닌가 라는 의문점이 생겼습니다.

🤔 문제 파악

프롬 채널 폴더에 하위 12개의 파일이 존재했습니다. 프롬 채널을 피그마로 파악하기 위해선 해당 12개의 파일을 전부 다 확인해야 하는 것입니다.

12개의 파일을 전부 상세히 살펴보니 불필요한 화면들이 너무 많았고, 불필요한 화면이 많아짐에 따라 어쩔 수 없이 파일을 분리하는 과정들이 생겨 총 12개의 파일로 나누어진 것입니다.

저희 팀은 이 파편화된 구조를 개선하고, 궁극적으로 하나의 통합된 디자인 아카이브 파일을 만드는 과정을 공유하고자 합니다.

🛠️ 불필요한 화면 걷어내기

불필요한 화면을 줄임과 동시에 파편화된 파일들도 합치는 것을 목표로 설정했으며, 불필요한 화면이 왜 생겼는지에 대해서 알아봤습니다.

불필요한 화면에는 기획팀/개발팀과의 소통 시에 전달해야 하는 케이스들이들이 포함되어 있었으며, 해당 화면들은 디자인팀 내부 아카이브에는 필요 없는 화면들이었습니다.

따라서 위와 같은 불필요한 화면들을 걷어낸다면 파일 내에 화면 수가 적어질 것이고, 지금처럼 불필요하게 파일을 나눌 필요도 없어져 파일 수도 현저히 줄 것입니다.

또한 불필요한 화면들을 걷어낸 파일들은 더 쉽게 파일을 탐색할 수 있도록 하나로 합칠 수 있을것입니다.

위 화면은 기존에 있던 채널 피드 게시물 등록/수정에 대한 파일이며 이번 채널 복수 이미지 업로드 프로젝트를 마치고 피그마 파일을 아카이브 하는 과정에 불필요한 화면을 걷어낸 결과물 입니다.

물론 팬앱/아티앱이 나눠져있는 프롬 특성상 많이 줄이는 것은 쉽지 않겠지만 아래 방식은 궁극적으로 원하는 파일 보관 방식입니다.

ASIS	TOBE
프롬채널_피드(팬앱/아티앱)	프롬채널_가입
프롬채널_게시물(팬앱/아티앱)	프롬채널_피드
프롬채널_목록(팬앱/아티앱)	프롬채널_라이브
프롬채널_라이브(아티앱)
프롬채널_라이브(팬앱)
프롬채널_더보기(팬앱)
프롬채널_미디어(팬앱/아티앱)
프롬채널_상세페이지(팬앱/아티앱)
프롬채널_해시태그(팬앱/아티앱)
프롬채널_소개(팬앱/아티앱)
프롬채널_더보기(아티앱)
프롬채널_스케줄(팬앱/아티앱)

👋 마치며

말씀드린 방법은 단기간 내에 빠르게 적용시킬 수는 없습니다. 기존 UX팀에서 아카이브하는 방식을 바꾸는 것이다 보니 팀 내 가이드도 진행해야 하며 팀원들을 설득하고 허락을 구해야 하는 과정도 있습니다.

하지만 더 효율적이고 좋은 방법을 찾아 개선해나가는 과정이다 보니 팀원들도 너그러이 따라줄 것이라 믿어 의심치 않으며, 더 나은 방법으로 UX팀 내 자산을 관리할 수 있도록 개선해 나가겠습니다.

이러한 개선을 통해 UX팀은 원하는 화면 탐색 시간 단축, 신규 입사자 온보딩 교육 활용의 효과를 얻을 것으로 기대하고 있습니다.