brunch

You can make anything
by writing

C.S.Lewis

by 김달 May 01. 2017

스케치 파일의 버전 관리에 대해

스케치 43 업데이트로 시작된 새로운 변화.

디자인 작업 파일의 버전관리.


많은 디자이너들이 오랜 시간 버전관리와 디자인 협업에 대한 고민을 해왔습니다. 

추가 작업이 생길 때마다, 모든 작업 파일을 백업해서 외장하드나 클라우드 저장소에 넣어두곤 하며, 여러명이 나눠서 작업한 내용을 합치기 위해 이메일, USB 메모리 등을 이용해 파일을 옮겨와 수동으로 작업내역을 결합합니다.


프로젝트 사이즈가 큰 작업 파일은, 사소한 글자 수정 작업 하나로 수백 메가에 달하는 백업 파일을 또 하나 만들게 되고, 무거워진 파일을 이끌고 꾸역꾸역 작업을 진행해 나가곤 합니다.


물론 그렇게 열심히 관리해도 심심하면 한두번의 실수로 날려버리는게 프로젝트 버전관리의 현실입니다.



GIT과 디자인 프로젝트


GIT은 버전관리에 대해 끊임없이 고민해오던 개발자들이 만들어낸 시스템입니다. 분산 버전 관리 시스템의 일종으로 자세한건 저도 잘 모릅니다..ㅎㅎ;.. 

우선 git에 대해 잘 소개된 글을 하나 첨부해봅니다.


https://tuwlab.com/ece/22202


제가 이해하고 있는 git의 추상적인 내용을 되는대로 말해보면..

평행 우주를 몇 개 만들어서 각자의 우주에서 작업을 한 뒤에

수정 사항에 대해서만 저장을 해서 중앙 우주로 모으는 것.

입니다. (아닐지도. 헷)


실은 디자이너들도 협업과정에서 비슷한 방법을 이용하고 있다고 할 수 있습니다. 각자의 컴퓨터로 각자의 작업을 한 뒤에 나중에 합치는 방식 말이죠. 물론 아무런 기록도 남지 않고, 사소한 수정 사항에도 모든 프로젝트 파일을 주고받아야 한다는 아주 큰 차이가 있긴 합니다.


https://blog.enki.com/yes-designers-can-use-git-too-79f3cef9c899


1년 전에 쓰여진 이 글은 스케치 파일을 git을 이용해 관리하는 것에 대한 글이며, 해당 글에서는 github을 통해 스케치 파일을 계속해서 백업하는 형태로 파일을 관리하고 있습니다. 

바이너리 파일이라 수정사항에 대해 시각적으로 확인할 수 없기 때문에, 직접 만든 플러그인을 이용해 프리뷰 이미지를 생성해 함께 기록을 남김으로써 시각적으로 작업내역을 확인 할 수 있게 처리하고 있습니다. 


작업내역 관리에 있어서는 상당히 좋은 방향이지만, 늘 프로젝트 파일을 통째로 업로드해야 해, 저장소의 용량문제가 발생할 수 있고,  협업 시에는 결국 수작업으로 작업물을 합쳐줘야 하기 때문에 실질적으로 git을 사용하는 의미가 크지 않습니다. 바이너리 파일의 한계로 어쩔 수 없고, 이에 대해 글에도 언급되어 있으며, 때문에 해당 글의 말미에는 이런 내용이 있습니다.


스케치 파일 (또는 PSD 등)을 텍스트 파일로 표현할 수만 있다면,
마침내 하나의 파일에서 동시에 작업할 수 있을 것입니다.

If a sketch (or PSD, etc.) could be represented as a text file, we would finally be able to work at the same time, on the same file.



그리고 1년이라는 시간이 지났슴니다.




스케치 43, 포맷의 변화.


sketch 43, 스케치가 새로운 업데이트를 진행했습니다. 가장 큰 변화는 스케치 파일의 포맷을 수정한 것입니다.

기존의 스케치 파일은 온전한 바이너리 파일로 내부의 구조나 소스들을 확인할 수 없는 구조였다면, 이제는 누구나 내부의 코드를 살펴볼 수 있는 구조로 바뀌었다는거죠. 


당장이라도 스케치 43 업데이트 이후에 저장된 스케치파일의 이름을 ~.sketch 에서 ~.zip으로 수정한 후 압축을 풀기만 하면 프로젝트의 구조와 소스를 낱낱이 확인할 수 있습니다. 직접 해보셔요.




스케치에서는 2월 24일 자신들의 개발자 사이트 (http://sketchplugins.com)를 통해 sketch 43 의 파일 포맷을 공개했고, 많은 서드파티 개발자들이 여러 작업을 벌써 진행하고 있습니다.



스케치에서 공개한 새로운 포맷과 토론 글

http://sketchplugins.com/d/87-new-file-format-in-sketch-43


공개된 스케치 파일의 JSON형식을 해석해 웹상에서 미리 preview가 가능하게 한 데모 서비스.

https://animaapp.github.io/sketch-web-viewer/


Github과 함께 유명한 git 서비스인 Gitlab은 sketch 파일에 대한 프리뷰와 작업 내용에 대한 비교를 할 수 있게 하는 작업을 진행 중에 있습니다.

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10301/



어떻게 보면 스케치는 엄청난 결정을 했다고 볼 수 있습니다. 이제 누구나 스케치 파일을 만들어내는 프로그램을 짤 수 있게 되었거든요. 언제든지 웹용 스케치, 윈도우용 스케치가 나와도 이상하지 않게 된것이죠.

아무래도 Figma(https://www.figma.com)나 어도비 XD 같은 비슷한 툴들이 등장하면서 새로운 방향을 모색한 것의 결과가 아닐까 생각이 듭니다. 이제 스케치는 단순한 툴이 아니라, 거대한 플랫폼으로 변화해 가고 있는 것 같습니다. 


이제 우리는 최소한의 수정사항에 대해서만 변화하는 텍스트 파일로 된 코드를 눈으로 확인할 수 있게 되었습니다.  압축을 풀어 나온 이 소스 파일들을 Git에 올려 버전관리 하면 정말 유연하고 원활한 협업체계와 작업내역 관리가 가능해질 것입니다. 

폴더 내부에는 스케치 파일의 미리보기 이미지인 preview.png가 포함되어 있어, 작업 기록 시 함께 기록하면 아까의 글에서와 같은 플러그인의 도움 없이도 최소한의 시각적인 변화도 확인 할 수 있습니다.

위의 Gitlab이 준비하고 있는 프리뷰 등이 더 작업된다면 웹상에서의 완벽한 작업 내역 비교도 가능해질 것입니다.


물론 스케치파일의 압축을 풀고, git에 대한 설정을 진행하고, 또 받아온 수정사항을 다시 적용해 스케치파일로 만들어 내는 작업들을 자동화 하는 것에 대한 숙제가 남아있습니다. 그리고 그런 것들을 개발에 대한 지식이 없는 디자이너들도 손쉽게 사용할 수 있게 하는 툴에 대한 것도 남아있구요.


분명한 것은 이제 디자이너들도 git에 대한 준비와 체계적인 협업 시스템에 대한 고민을 할 수 있게 되었으며, 머지않아 이런 것들을 쉽게 지원하는 툴들이 속속히 등장 할 것이라는 겁니다.ㅎㅎ



간단하게 요즘 이슈되고 있는 (라고 개인적으로 생각하는) 것에 대해 정리해보았습니다.


다음번에는 github에서 스케치43 포맷의 프로젝트를 버전관리 하는 것에 대해 본격적으로 진행해보고 글을 쓰려고 생각하고 있습니다ㅎㅎ


읽어주셔서 감사합니다..

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari