Abstract를 이용한 Sketch 파일 버전 관리
정신없이 늘어나는 디자인 파일 체계적으로 관리하기
최신 디자인 파일 어디 있어요?
팀으로 일하는 프로덕트 디자이너라면 한 번쯤 던지는 질문입니다. 기존 디자인을 수정하거나 새로운 기능을 추가할 때 내가 보고 있는 파일이 최신인지 확인하기 위해 자주 물어보게 됩니다. 어찌어찌 최신 파일을 찾아서 열어보았더니 현재 출시된 프로덕트와는 다른 내용이 포함되어 있기도 합니다. 문구만 수정하면 되는데 아무리 뒤져도 파일을 못 찾아 스크린샷을 찍어서 위에 디자인 작업을 할 때가 생기기도 합니다. 그때 그 파일은 어디에 있는 걸까요…?
마이리얼트립 서비스는 다양한 디자이너의 손을 거치면서 파일 구조가 매우 복잡해졌습니다. 우리는 파일을 탐색하는 데 시간을 허비하지 않고 사용자에게 더 나은 프로덕트를 빠르게 제공하기 위해 파일 구조를 최적화할 필요가 있었습니다.
이 문제를 해결하기 위한 한 가지 방법으로 디자인 버전 관리 시스템을 도입하였습니다. 버전 관리는 많은 사람이 협업할 때 사용하는 시스템으로 디자인 분야에서는 아직 생소하지만, 개발 분야에서는 오래전부터 발전해온 시스템입니다. 이 글에서는 마이리얼트립에서 어떤 과정으로 기존 파일을 정리하고 버전 관리를 도입했는지 소개해 드리겠습니다.
버전 관리란?
버전 관리는 파일의 변화를 시간에 따라 기록하여 과거 특정 시점의 버전을 다시 불러올 수 있는 시스템입니다. 이 시스템을 활용해 파일 히스토리를 쉽게 확인할 수 있고 파일을 항상 최신으로 유지할 수 있습니다. 또한 디자인 파일을 이전에 작업한 버전으로 쉽게 되돌릴 수도 있습니다.
버전 관리 프로세스를 간단히 디자인에 빗대어 설명해 본다면, 먼저 모든 최신 스케치 파일이 모인 폴더를 클라우드 서버에 업로드하고 이것을 Master라 부릅니다. 새로운 프로젝트를 시작할 때 이 폴더를 내 컴퓨터로 복사하고 복사한 폴더를 Branch라 부릅니다. 내 컴퓨터에서 Sketch 파일을 사용하고 폴더를 통째로 저장하는 것을 Commit이라 부릅니다. 모든 작업을 마친 뒤에 이 폴더를 Master에 업로드하여 내가 변경한 디자인을 합치는 것을 Merge라고 부릅니다.
- Master: 클라우드 서버에 있는 최신 디자인 파일 묶음
- Branch: 내 컴퓨터로 복사한 디자인 파일 묶음
- Commit: 내 컴퓨터에서 작업한 파일을 저장하고 변경 내역을 기록
- Merge: 서버에 있는 디자인 파일에 내가 작업한 파일을 업로드
- Update from master..: Master에 새롭게 업데이트된 디자인 파일이 있을 경우 내 컴퓨터에 다운받기
디자인 버전 관리 툴: Abstract vs Kactus
대표적인 디자인 버전 관리 툴로 Abstract와 Kactus가 있습니다. 개발 분야에서 사용하는 Github의 코드를 기반으로 작동하는 Kactus 보다는 코멘트, 스케치와의 연동, 웹에서의 이력 확인 등 다양한 기능을 가지고 있는 Abstract가 저희에게 더 적합했습니다. Abstract는 엘라스틱 프로젝트에서 만든 디자인 버전 관리 애플리케이션으로 Dropbox와 같은 클라우드 서비스이면서 Sketch 파일을 관리하는데 최적화되었습니다. 여러 디자이너의 작업 내역을 쉽게 확인할 수 있으며 다른 디자이너가 작업하는 페이지와 내가 작업하는 페이지에 겹치는 부분이 있을 때 손쉽게 비교할 수도 있습니다. 깔끔한 UI는 덤이죠.
*본 글에서는 Abstract로 디자인 프로세스에 버전 관리 개념을 적용했는지를 다룹니다. 구체적인 어플리케이션 사용법은 공식 홈페이지에서 더 자세히 확인할 수 있습니다. https://www.abstract.com
Abstract 적용하기
레거시 디자인 파일을 정리하고 Abstract로 파일을 관리하기 위해 몇 가지 준비가 필요했습니다. 이전에 사용하고 있던 마스터 파일, 라이브러리를 옮겨야 했으며, 디자이너 각자가 로컬 환경에서 작업하고 마지막에 Dropbox에 업로드하던 디자인 프로세스를 재정의해야 했습니다. 이 챕터에서는 Abstract를 적용한 과정을 스텝별로 알려드리겠습니다.
1.마스터 파일 만들기
먼저 서로 다른 규칙으로 만들어진 기존 디자인 파일을 하나의 규칙으로 취합하는 작업이 필요했습니다. 파일 하나에 모든 것을 담으면 용량이 커져 다루기가 어려워지기 때문에 시간이 지나도 크게 변하지 않을 개념 단위로 정의해 작은 단위로 파일을 나누었습니다. 파일 내부의 페이지나 아트보드는 기능에 따라 구성이 다르기 때문에 파일 내부의 페이지나 아트보드는 통일하지 않고 느슨한 규칙을 정했습니다.
2.라이브러리 만들기
Abstract에서는 프로젝트 외부에 라이브러리를 생성해 사용할 수 있지만, 라이브러리를 수정하고 각 프로젝트에 적용하는 것이 복잡했기 때문에 프로젝트 내부에 라이브러리 파일을 포함했습니다. 이 방식으로 디자이너가 각 프로젝트를 진행하면서 디자인 시스템을 편하게 수정할 수 있으며, 다른 디자이너는 어떤 디자인 시스템이 변경되었는지 확인하고 자신의 프로젝트에 적용할 수 있습니다.
3.프로세스 적용하기
마스터 파일을 정리한 뒤에는 기존 프로세스를 버전 관리에 적합한 형태로 바꿀 필요가 있었습니다. 로컬 환경, 즉 내 컴퓨터에서 작업을 마친 뒤 Dropbox에 업로드 하는 프로세스에서 Abstract를 이용한 작업 프로세스로 새롭게 정의했습니다.
- 프로젝트 명으로 Branch를 만듭니다. 프로젝트 명은 가급적 Jira나 Asana에서 다른 팀과 함께 사용하는 프로젝트 명을 사용합니다.
2. 브랜치 내의 파일을 이용해 디자인을 시작하고 중간 저장인 Commit을 합니다. Commit은 Abstract에 작업 내역을 저장하는 것으로 Sketch의 저장과 자동 저장 기능은 평소 스케치를 사용할 때 처럼 사용할 수 있습니다.
3. 다른 디자이너가 Master에 새로 업데이트한 것이 있을 경우 해당 내용을 내 브랜치에 업데이트합니다.
4. Master에서 내 Branch로 업데이트할 때 어떤 변경사항이 있는지 확인하고 다른 디자이너와 내가 같은 아트보드를 수정해 충돌이 생길 경우 어떤 것을 최신으로 유지할지 Preview로 확인하고 결정할 수 있습니다.
5.디자인을 완료하면 Merge를 준비합니다.Master는 현재 사용자가 사용하는 최신 디자인을 유지해야하기 때문에 개발을 시작했거나 프로덕트가 배포되었을 때 Master에 Branch를 Merge합니다.
6. 작업 완료한 디자인 파일을 Master에 Merge해 최신 디자인을 유지합니다.
버전 관리 도입 이후
새로운 시스템 도입 이후 이전보다 체계적으로 파일을 관리할 수 있게 되었습니다.
Master에 최신 파일이 유지되기 때문에 프로젝트를 시작할 때 디자인 파일을 탐색하는 데 낭비하는 시간을 줄일 수 있었으며, Branch를 통해 프로젝트를 관리하면서 변경한 사항을 Commit 할 때마다 남기고 History가 남기 때문에 변경 사항을 슬랙을 통하지 않아도 손쉽게 확인할 수 있게 되었습니다.
또한 프로젝트를 진행할 때 파일명을 고심하며 여러 가지 버전으로 파일을 저장하지 않아도 이전 디자인을 확인하기 편해졌으며, 여러 파일의 디자인을 롤백하고 싶을 때 Sketch 내장 기능인 revert to로 변경한 파일을 일일이 열어볼 필요 없이 Restore로 변경한 모든 파일을 이전 버전으로 쉽게 되돌릴 수 있게 되었습니다.
아쉬운 점은 Merge 할 때 Master와 Branch의 모든 Sketch 파일을 비교하는 방식으로 다소 속도가 느리다는 점이었지만 앞으로 Abstract에서 변경된 Sketch 파일만을 비교하는 방향으로 서비스가 업데이트된다면 더 효율적으로 파일을 관리할 수 있길 기대하고 있습니다.
마치며
프로덕트 디자인 팀은 사용자에 대해 고민하는 시간을 늘리고 구현하는 시간을 줄이는 것을 목표로 합니다. 버전 관리뿐만 아니라 디자인 프로세스를 더 효율적으로 만들기 위해 sketch library를 이용한 디자인 시스템 고도화와 같은 프로젝트를 진행하기도 하며 사용자를 깊게 이해하기 위한 사용성 테스트, FGI 등을 진행하며 어떻게 하면 효율적으로 사용자에게 seamless 한 UX를 전달할 수 있을지 끊임없이 방법을 모색하고 있습니다.
마이리얼트립은 고객 중심으로 생각하며 능동적인 자세로 협업하는 프로페셔널한 분들이 모여 있습니다. 눈에 띄게 로켓 성장하는 마이리얼트립과 함께 사용자에게 더 멋진 현지 여행 경험을 전달할 다양한 분야의 인재분들을 모시고 있습니다. 관심이 있으시거나 어울리는 분이 떠오르신다면 저희에 대해 자세히 살펴보시길 바랍니다.
