작가의 글을 더 이상 구독하지 않고,
새 글 알림도 받아볼 수 없습니다.
피그마 파일, 지금 정리하지 않으면 늦어요
팀스파르타 디자인팀의 피그마 파일 정리 꿀팁
by
Feb 07. 2025
피그마 파일, 언제 마지막으로 정리하셨나요?
디자이너라면 요즘 피그마(Figma) 안 쓰시는 분이 거의 없죠. 특히 협업의 툴로 사용할 때 그 진가가 드러나는 피그마. 그래서인지 종종 피그마 파일을 어떻게 정리하고 있는지 여쭤보는 분들도 많은 것 같아요. 팀스파르타는 다양한 브랜드(스파르타코딩클럽, 항해99, 내일배움캠프, 인텔리픽 등)를 운영하고 있고, 각 브랜드를 담당하는 여러 디자이너가 협업해야 하는 구조이다 보니 무엇보다도 업무의 정리와 소통이 중요했어요.
저희 사업이 꽤 많습니다... (티저)빙산의 일각에 불과한 수많은 폴더(...) 속에는 매우 많은 고민이 담겨있는데요. 교육부터 채용까지 다양한 프로덕트를 디자인하고 있는 팀스파르타의 디자인팀은 피그마 파일을 어떻게 정리하고 있는지 공유해 보려고 합니다.
*저희 조직의 특성에 맞춘 정리법이니 참고해서 봐주세요!
[AS IS] 이랬는데요.
불과 2년 전까지만 해도 이런 파일에서 실무를 보고 있었다는 사실, 믿어지시나요? 보기만 해도 어지러운 모습인데, 당연히도 업무를 보는 과정에서 여러 문제가 터져 나왔습니다.
도대체 어디 있니문제 1. 최종 파일 관리의 어려움
저희 팀은 여러 브랜드에서 동시에 다양한 실험을 진행하는 역동적인 환경에서 작업하고 있는데요. 이 과정에서 개발이 필요한 파일, 개발 중인 파일, 개발 완료된 파일을 명확히 구분하고 체계적으로 관리하는 데 어려움을 겪었어요.
기획부터 디자인, 개발, QA, 배포까지 다양한 직무의 팀원들이 모두 피그마 파일에 접근해야 하다 보니 파일 구조가 복잡해지고, 혼란이 생기곤 했어요. 특히 개선 프로젝트에서는 가장 최신의 최종 파일을 찾는 데 시간이 걸려 프로젝트 시작이 지연되기도 했어요. 팀의 빠른 실행력을 유지하기 위해 이 문제를 해결하는 것이 필수적이었어요.
문제 2. 새 파일을 만드는 과정이 번거롭고, 중구난방이다
매번 새로운 파일을 만드는 것이 은근히 부담스러운 건 저희만 그런가요?
디자이너라면 작업 파일의 배경 색상, Section 색상, 파일명, 페이지명 등등... 디테일하지만 작업 환경에 영향을 주는 요소들을 쉽게 지나치지 못했을 거예요. 게다가 파일을 무슨 단위로 쪼갤지, 페이지는 언제 새로 만들지, 자잘하지만 반복되는 이 낭비의 고민의 시간을 최대한 줄이고 싶었어요.
새로 합류한 팀원에게는 얼마나 더 고통스러웠을지... 다시 생각해도 아찔한데요, 그렇다면 이 문제를 저희는 어떻게 해결했는지 하나씩 보여드리도록 하겠습니다!
[TO BE] 요래 되었어요!
먼저 ‘최종 파일의 관리가 어렵다’는 문제를 해결하기 위해 폴더의 구조부터 손을 봤어요. 모든 디자이너가 반드시 아래의 절차를 따르도록 했고, 따로 시간을 내어 정리하는 것이 힘들다면 미팅 시간을 잡아 다 같이 파일을 정리하는 시간을 가졌죠.
[작업실] 폴더 >> [Master] 폴더
(1) 작업 중인 파일은 하나의 폴더에 모두 모으고, 배포되면 각 프로덕트의 폴더로 옮기기
(2) 최종본만 모아둔 프로덕트별 Master 파일과 폴더 생성
[작업실] 폴더의 효능
모든 브랜드에서 작업 중인 파일을 작업 중인 파일만 모여있어서 디자이너/개발자/PM 모두가 당장 봐야 할 파일을 쉽게 찾을 수 있어요.
상호 피드백을 주고받을 때 다른 팀원이 작업 중인 곳을 바로 찾아갈 수 있어요.
작업실 템플릿이 고정되어 있어서, 새 파일을 만드는 속도도 빨라졌어요. (템플릿 이야기는 뒤에서 더 자세히)
[Master] 폴더의 효능
이제 최종본을 한 곳에서 쉽게 찾을 수 있어요.
모든 화면이 모여있어서, 처음 보는 프로덕트도 전체 흐름을 파악하는 것이 더 쉬워졌어요.
플로우(flow)를 한눈에 볼 수 있어서, 작업하면서 놓치는 케이스가 적어지고 더 자연스러운 설계를 할 수 있어요.
새 파일 만들기, 이제 껌이지!
[작업실] 폴더 상단에는 ‘작업실 템플릿’을 고정(Pinned) 해뒀는데요.
템플릿 파일을 복제만 하면 작업하기 가장 좋은 환경으로, 빠르게 작업을 시작할 수 있는 세팅을 미리 해뒀어요.
템플릿의 효능
일관된 작업 환경에서 빠르게 디자인을 시작할 수 있어요. (배경 색상, Section 색상, 최종본을 표시하는 테두리, 파일/페이지/Section 명칭 등)
[시안]과 [최종본]의 명확한 분리와 작업한 사람의 이름을 쓰게 해서 소통 비용이 줄어들었어요.
프로덕트마다 다른 섬네일(thumbnail)을 빠르게 지정할 수 있어요. (컬러로 더 명확한 구분)
관련해서 필요한 가이드는 반드시 보게 될 섬네일 페이지에 함께 둬서, 가이드의 접근성을 높였어요.
피그마 파일 정리 팁 3줄 요약
최종 파일과 작업 파일을 폴더 단위로 명확하게 분리했더니 소통 비용이 줄어들었어요.
반복 작업은 템플릿으로 만들어서 상단에 고정해 뒀더니 디자인에 고민할 시간을 더 확보할 수 있게 되었어요.
섬네일 지정과 이름 지정으로 예전 파일도 더 찾기 쉬워졌어요.
To be continued..
팀과 팀원이 계속 늘어나면서, 최근에도 새로운 피그마 파일 구조를 실험하고 있는데요. 이번 구조가 효과적이라면, 후속 글에서 그 경험을 나눠보겠습니다. 오늘도 스파르타 디자이너들의 고민은 계속됩니다…⭐
by 공은지, 프로덕트 디자이너