스케치로 협업하기- Master파일을 활용해 통일된 디자인 컴포넌트 공유하기

디자인 파일 버전 관리는 모든 디자인팀의 영원한 숙제입니다.

StyleShare에서는 프로덕트 디자인 툴로 스케치를 사용합니다. 4명의 디자이너가 인당 한 프로젝트를 맡는 프로세스입니다. StyleShare라는 하나의 서비스 앱/웹의 유지보수와 새로운 기능을 빠르게 디자인하고 가이드화 합니다.

여러 디자이너가 한 서비스를 작업하다 보면 디자인 파일과 심볼이 뒤죽박죽이 되기 마련입니다.

그렇다고 손 놓고 열심히 작업만 하자니 스멀스멀 문제가 생깁니다. 누군가 질문을 통해서 수면 위로 떠오르죠.

“최근에 사용했던 가장 작은 버튼 크기랑 Border 굵기가 얼마였죠?”

이 질문은 여러 문제를 포함합니다.

• 분명히 공통 컴포넌트가 있는데, 어떤 게 진짜인지 모르겠다.
• 난 보통 2pt border가 진짠 줄 알았는데 여기선 왜 1pt를 사용했을까.

개인이 모두 다른 페이지를 디자인하고, 1pt 단위까지 신경 쓸 여유를 없다 보면 디테일을 놓치는 경우를 종종 목격하게 되었습니다.

결국 하지 않아도 될 커뮤니케이션을 하게 되고 작업하기 전 챙겨야 할 요소가 많아지면서 컴포넌트 정리 좀 하자! 는 니즈가 강력해지게 되었습니다.

맞춤법 검사기처럼 내 작업물이 최근 디자인 컴포넌트 가이드에 위배되지 않았는지 검사해주는 봇이 등장하지 않는 이상, 처음과 중간과정마다 통일성을 위해선 개인이 챙겨야 합니다.

UI Kit? Master File!

회사에서 UI Kit를 만드는 건 디자인 리뉴얼이 아닌 이상 굉장한 비용이 듭니다. 그래서 StyleShare에서도 Kit를 대신할 무언가를 고민했습니다. 컴포넌트 정리하자고 Kit를 만들 순 없으니까요.

그래서 현재 모바일 앱의 UI, GUI 컴포넌트를 정리하고, 가장 최신 버전으로 추린 파일을 만들었습니다.

스케치에 얼마 전부터 심볼 라이브러리[1] 라는 기능이 추가되었습니다. 이 기능을 잘 사용하면 누구나, 어떤 파일이나 같은 심볼을 사용할 수 있습니다. 공유하고자 하는 심볼만 클라우드 드라이브로 잘 공유된다면요. (StyleShare에서는 구글 드라이브를 사용합니다)

심볼과 같은 가장 작은 단위를 공유하는 것도 중요하지만

• 결국 이 컴포넌트가 어디서 어떻게 활용되는가
• 페이지 단위로 가장 최근 개선된 UI 디자인은 무엇인가

위와 같은 실제 커뮤니케이션의 방해를 이루는 문제는 해결하지 못했습니다.

그래서 StyleShare 디자인팀에서는 Master.sketch라는 이름의 한 파일을 운영합니니다. iOS, Android 모두요.

거창한 이름처럼 이 파일에는 최근 작업된 UI 디자인과 컴포넌트가 모두 모여있는 스케치 파일입니다.

우선 프로덕트를 큰 단위로 그룹을 나누었고 그 안에 속해 있는 모든 페이지 디자인을 아트보드로 나열했습니다.

그 안에는 실제 작업했던 Loading이나 Empty 화면까지 포함되어 있습니다.

아이콘/컬러 팔레트 관리는 따로

UI 컴포넌트 못지않게 중요한 요소는 아이콘과 색상 팔레트입니다.

StyleShare은 아이콘이 많지 않습니다. 유저 콘텐츠가 화려하고 이미지 컴포넌트가 많다 보니 그림으로 UI를 나타내려는 페이지가 적습니다. 그래서 아이콘은 Master 파일 내에서 운영해도 충분했습니다.

Icons/44*44부터 Icons/12*12 까지 6과 8배 수로 아이콘을 맞춰서 심볼로 만들었습니다.

Arrow와 Caret은 각 두 벌씩만 만들어 상하/좌우 반전으로 활용합니다.

컬러는 Color.sketch라는 파일로 따로 운영합니다. 이 방법이 Nested Symbol[2]로 활용하기도 편하고 색상을 독립적으로 관리할 수 있습니다.

색상처럼 잘 변하지 않는 요소는 여러 사람이 스쳐가는 Master 파일과 분리를 해 놓는 편이 실수로 수정될 여지가 적습니다.

그래서 뭐가 좋아요?

1. 서비스의 모든 페이지를 한 번에 볼 수 있습니다.

• 스케치만 가능한 방법입니다. 포토샵에선 상상도 못할 용량 수준으로 모든 페이지를 모아도 120MB 로 가볍습니다.
• 서비스가 복잡해지면 작업자도 어떤 페이지가 있었는지 기억할 수 없는 지경에 이르게 되는데, 파악하기 쉽습니다.

2. UI 컴포넌트의 사용처와 심볼을 동시에 확인할 수 있습니다.

• UI Kit는 깔끔한 맛은 있지만 활용도가 떨어집니다. 구글의 간지 나는 Material 디자인도 각 서비스에 맞게 활용해 다르게 사용됩니다. 독립적인 심볼과 기능에 맞게 활용한 실제 UI를 함께 보면서 쉽게 디자인에 응용할 수 있습니다.
• 결국 모든 페이지는 심볼로만 각자 다르게 작업할 때보다 서로의 컴포넌트를 가져다 쓰며 통일성을 갖게 됩니다.

3. Master 파일에서 서비스의 최신/최종 디자인을 확인할 수 있습니다.

• “우리 최근에 정했던 버튼 크기랑 Border 굵기가 얼마였죠?”의 저희 답변은 “Master 파일 열어보세요!”입니다.

마치며

작년부터 디자이너를 위한 버전 관리 툴이 다양해지고 있습니다. 그중에 Abstract[3]이 가장 좋은 평을 받고 있죠. 하지만 모든 좋은 툴을 현업에서 다 도입할 수는 없습니다. 조직 상황과 업무 프로세스에 적합한 지, 학습은 간단한 지, 비용은 얼마나 드는지.. 등등 고려해야 할 요소가 많습니다. 학습 비용 이상으로 효율을 내야 회사에서 좋은 툴이라 할 수 있으니까요.

StyleShare에서는 스케치의 심볼 라이브러리, Master 파일↔구글 드라이브만으로 아직은 큰 문제없이 동기화를 하고 있습니다. 동기화는 끊임없이 노력하지 않으면 금방 티가 나는 작업이라 계속해서 고민을 해 보아야 할 것 같습니다.

읽어주셔서 감사합니다.

p.s. 스타일쉐어의 스케치 도입기+기반닦기는 이 글에서 보실 수 있습니다.

[1] 스케치 47 버전부터 추가된 기능. (https://www.sketchapp.com/docs/libraries/)
[2] 스케치 41 버전부터 추가된 기능. (https://www.sketchapp.com/docs/symbols/nested-symbols/)
[3] 디자이너를 위한 버전 관리 툴 (https://www.goabstract.com/)

#스타일쉐어 #개발팀 #개발자 #디자인팀 #디자이너 #협업 #스케치 #Sketch  #경험공유 #인사이트