스타일쉐어(StyleShare) / 조회수 : 4248
디자인 파일 버전 관리는 모든 디자인팀의 영원한 숙제입니다.
StyleShare에서는 프로덕트 디자인 툴로 스케치를 사용합니다. 4명의 디자이너가 인당 한 프로젝트를 맡는 프로세스입니다. StyleShare라는 하나의 서비스 앱/웹의 유지보수와 새로운 기능을 빠르게 디자인하고 가이드화 합니다.
여러 디자이너가 한 서비스를 작업하다 보면 디자인 파일과 심볼이 뒤죽박죽이 되기 마련입니다.
그렇다고 손 놓고 열심히 작업만 하자니 스멀스멀 문제가 생깁니다. 누군가 질문을 통해서 수면 위로 떠오르죠.
“최근에 사용했던 가장 작은 버튼 크기랑 Border 굵기가 얼마였죠?”
이 질문은 여러 문제를 포함합니다.
개인이 모두 다른 페이지를 디자인하고, 1pt 단위까지 신경 쓸 여유를 없다 보면 디테일을 놓치는 경우를 종종 목격하게 되었습니다.
결국 하지 않아도 될 커뮤니케이션을 하게 되고 작업하기 전 챙겨야 할 요소가 많아지면서 컴포넌트 정리 좀 하자! 는 니즈가 강력해지게 되었습니다.
맞춤법 검사기처럼 내 작업물이 최근 디자인 컴포넌트 가이드에 위배되지 않았는지 검사해주는 봇이 등장하지 않는 이상, 처음과 중간과정마다 통일성을 위해선 개인이 챙겨야 합니다.
회사에서 UI Kit를 만드는 건 디자인 리뉴얼이 아닌 이상 굉장한 비용이 듭니다. 그래서 StyleShare에서도 Kit를 대신할 무언가를 고민했습니다. 컴포넌트 정리하자고 Kit를 만들 순 없으니까요.
그래서 현재 모바일 앱의 UI, GUI 컴포넌트를 정리하고, 가장 최신 버전으로 추린 파일을 만들었습니다.
스케치에 얼마 전부터 심볼 라이브러리[1] 라는 기능이 추가되었습니다. 이 기능을 잘 사용하면 누구나, 어떤 파일이나 같은 심볼을 사용할 수 있습니다. 공유하고자 하는 심볼만 클라우드 드라이브로 잘 공유된다면요. (StyleShare에서는 구글 드라이브를 사용합니다)
심볼과 같은 가장 작은 단위를 공유하는 것도 중요하지만
위와 같은 실제 커뮤니케이션의 방해를 이루는 문제는 해결하지 못했습니다.
그래서 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 파일과 분리를 해 놓는 편이 실수로 수정될 여지가 적습니다.
2. UI 컴포넌트의 사용처와 심볼을 동시에 확인할 수 있습니다.
3. 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 #경험공유 #인사이트