카카오엔터프라이즈 디자인 팀
피그마 이전기 (1/2)
Sketch 파일을 피그마로 완벽하게 import하기
저희는 2021년 12월 모든 프로젝트 파일을 피그마로 이전했습니다.
2020년 말부터, 카카오 엔터프라이즈 디자인팀에서도 신규 프로젝트들은 슬금슬금 피그마로 작업을 하게 되었습니다. 하지만, 대부분의 기존 프로젝트는 스케치로 전부 정리되어 있고, 수시로 운영 및 신규 과제를 병행하고 있어서 피그마로 이전하는 마음을 먹기가 참 쉽지 않았습니다.
피그마의 다양한 편의기능과 개발과의 협업 효용을 고려하여, 2021년 12월 한 달간 모든 프로젝트의 과제 진행을 중단하고 피그마로 이전할 계획을 하게되었습니다.
툴을 바꾸려고 한 이유
1. 계속 점점 더 좋아지는 피그마
스케치보다 더 강력해진 auto layout, component variant 등, 디자이너에게 유용한 여러 기능을 활용해서 더 빠르고 효율적으로 작업할 수 있다는 피그마의 장점이 점점 커져갔습니다.
스케치 파일은 심볼이 많아지고 페이지가 늘어날 때마다 기하급수적으로 느려지기 시작했어요…
2. 협업이 어려웠던 스케치 파일
작업자가 많아지면서 계속해서 새로운 스케치 파일이 생기는 문제도 있었어요.
새로 생겨나는 심볼을 라이브러리에서 관리하기도 힘들었고, 최종 화면을 파악하기 어려워 매번 작업자에게 물어보고 확인하는 커뮤니케이션이 자주 발생하면서 자잘한 피로감이 쌓이기 시작합니다.
더 이상 미룰 수 없다, 피그마 이전
피그마로 이전했을 경우, 저희가 생각한 이점은
디자인 최종 산출물 관리 효율
교체된 담당자나 신규 입사자의 업무 파악 용이
디자인 작업 능률과 타 부서와의 협업 능률을 향상
이왕 이렇게 된 김에 복잡하게 쌓인 히스토리나 불필요한 파일을 정리하는 대청소의 시간을 갖기로 했습니다.
우리에게 주어진 시간은 한 달
어떻게 하면 빠른 시간 안에 피그마로 이전할 수 있을지가 가장 큰 고민이었어요.
2021년 12월 한 달을 작업기간으로 잡고 이 기간 동안 신규 업무를 잠시 중단해달라고 관련 부서에 양해를 구했습니다. 대신, 우리에게 주어진 한 달이라는 시간동안 무사히 완료할 수 있도록 사전 준비 기간을 3달 정도 가졌어요.
준비 기간동안 여러 테스트를 거쳐 최종 정리한 피그마 이전 방법을 카카오워크 파일 사례를 통해 소개합니다.
STEP 00
스케치 파일 피그마로 import
사실 가장 깔끔하게 이전하는 방법은 피그마에서 피그마의 방식에 맞게 새로 디자인 파일을 만드는 것입니다.
스케치 파일은 피그마로 쉽게 import 할 수 있지만, 세세하게 살펴보면 버튼이나 아이콘을 그리고 해석하는 방식, 레이어와 프레임의 구조 등 조금씩 다른 부분이 있어서 일일이 손봐줘야 합니다.
무엇보다 가장 곤란한 건 라이브러리 연결 관계가 끊어져버려서, 라이브러리를 일일이 다시 연결해줘야 한다는 것입니다.
어딘가 해결한 방법이 있겠지 싶어 여기저기 검색해보고 플러그인들을 살펴봤지만, 딱히 이렇다할 방법은 찾지 못했습니다.
카카오워크 디자인 파일은 iOS, AOS, PC, Mac 총 4가지 클라이언트로 작업되어 있기 때문에 이 모든걸 새로 그리는 일은 쉽지 않을거라고 판단했어요.
어떻게든 라이브러리 연결을 쉽게 할 수 있는 방법을 고민하기 시작했습니다.
그래서 찾아낸 방법은 바로 Swap Library 입니다.
스케치 파일을 피그마로 Import하면, 라이브러리 연결은 끊어집니다.
대신, 외부 라이브러리에서 사용한 심볼들은 “External Symbols” 라는 레이어 그룹에 모아져서 들어옵니다. 눈이 꺼진 상태라 화면에서 보이지는 않지만, 피그마 파일 첫 페이지에는 이 레이어가 존재하게 됩니다.
이 컴포넌트들은 임시로 import가 함께 된 것이기 때문에, 라이브러리의 원본 컴포넌트로 교체하는 작업이 필요합니다.
그대로 써도 크게 문제는 없지만, 웬만하면 라이브러리 파일로 교체를 추천드리는 이유는 다음과 같습니다.
1. 무작위로 배치되어 들어오기 때문에 정리하기가 쉽지 않아요. 마구 겹쳐 있기도 하고, 엉망진창입니다.
2. 디자인 페이지에 사용되었던 컴포넌트만 들어오기 때문에, 혹시라도 화면에 사용되지 않은 아이콘이나 컴포넌트가 있었다면 유실되어버립니다.
3. 기존 스케치 파일에는 중복된 심볼이 많이 생겨 있었고, 이 파일에도 마찬가지로 중복된 컴포넌트 많았습니다.
Swap Library 기능을 활용해서 연결이 끊어진 라이브러리를 손쉽게 다시 이어붙이는 과정은 다음과 같습니다.
STEP 01
새로운 피그마 파일로 디자인 옮기기
스케치 파일을 import한 후 해야 할 일은 새로운 피그마 파일을 하나 생성하는거예요.
이 새로운 파일에 import 해 온 스크린 디자인을 선택하여 전부 복사 + 붙여넣기 하고 깔끔하게 디자인 화면만 모아둔 피그마 파일을 생성합니다.
(페이지 수가 많다면 조금 노동이 필요한 작업입니다…)
이 때, ‘원본 컴포넌트’들은 옮기지 않습니다.
STEP 02
연결 된 컴포넌트 확인
페이지 디자인을 새로운 파일에 옮겨주고 나면 기존에 import해 온 피그마 파일과 새로운 파일 사이에 컴포넌트 연결 관계가 생깁니다.
정리되지 않은 상태이지만, 어쨌든 파일 간에 연결관계가 생긴 것이죠.
컴포넌트가 외부로 연결된 상태인지 체크해보세요. 다이아가 아닌 outlink 아이콘이 보인다면, 성공입니다.
STEP 03
Publish Library
이제 임포트했던 두 개의 파일(스크린 디자인, 라이브러리)을 Publish 해줍니다.
*Step 1에서 새로 만든 파일은 Publish하지 않습니다.
Publish 는 스케치에서 ‘라이브러리 파일로 만들기’ 와 동일한 기능입니다. Publish 이후에 해당 파일 안의 컴포넌트는 다른 파일에서 asset으로 사용할 수 있습니다.
STEP 04
Swap Library
이제 라이브러리를 swap할 준비가 다 끝났습니다.
Swap library 기능을 활용해서, 라이브러리의 원본 컴포넌트로 전부 Swap 해주면 우리가 원하는 연결이 제대로 만들어집니다. Swap library 는 ‘컴포넌트 명’ 기준으로 동작하기 때문에 누락된 심볼이 없다면, 완전하게 swap이 가능합니다.
찾을 수 없는 컴포넌트의 경우 None Found 라고 표시됩니다.
아마 파일 내에 다른 외부 컴포넌트를 사용한 경우일 텐데요, 교체되지 않은 missing 컴포넌트가 있다면 해당 컴포넌트를 라이브러리 파일로 붙여넣은 후 swap 작업을 수행해주면 됩니다.
STEP 05
필요 없는 파일 지우기
연결이 잘 되었는지 확인 되면, 연결이 끊긴 피그마 파일은 삭제하고
스크린 디자인이 정리된 피그마 파일과 라이브러리 파일, 두 개만 남겨둡니다.
이제 피그마 파일의 구조적인 정리는 마무리 되었습니다. 누락된 심볼이나 깨진 아이콘 등 정리하는 작업이 남아있는데요, 다음 편에서는 스타일과 컴포넌트를 정리한 방법과 유용하게 활용한 플러그인에 대해 소개해드리겠습니다.
