Sketch 버전관리로 기획자/디자이너의 협업을 바꾸다
저는 간편 전자계약 서비스, 모두싸인에서 디자인을 하고 있습니다.
저희 팀은 기존의 웹서비스 개발사들처럼, 기획 / 디자인 / 개발이라는 3그룹의 협업을 통해 서비스를 만들고 있지요. 여러 사람이 모여 시너지를 일으켜 멋진 결과물을 만들어 내는 일은 정말 쉬운 일이 아닌 것 같습니다..
특히 그 과정에서 많은 부분을 차지하는 게 협업 과정에서의 커뮤니케이션 비용입니다. 실제 많은 기업들이 이 협업 과정을 어떻게 하면 더 효율적으로 만들 수 있을지를 끝없이 고민하고 있죠...
그러다 어느 날 Abstract라는 버전관리 툴이 등장했고, 기존부터 디자이너끼리의 협업을 위해 버전관리에 크나큰 관심이 있던 차라 적극적으로 도입을 시도했습니다.
그런데 의외로 디자이너 간의 협업뿐 아니라 기획자와의 커뮤니케이션에서 기대 이상의 효율을 만들어 낼 수 있었습니다.
기존의 서비스 기획에서는 디자인 시안 완료까지의 과정에서 정말 많은 산출물들이 만들어집니다.
먼저 기획자는 최초의 기획안을 위한 '기획서 파일'과, 기획자가 생각하는 흐름과 구조를 그린 와이어 프레임의 'Sketch 파일'을 만들죠.
그리고 디자이너가 기획서와 와이어프레임을 보고 '새로운 Sketch파일'에서 시안 작업을 시작합니다. 토의를 통해 시안의 수정이 거듭될수록 수십 장의 이미지 파일이 만들어집니다. 또 기획자는 토의 과정에서 와이어 프레임을 추가로 수정하게 되고, 디자이너 역시 자신의 시안을 다양한 배리에이션으로 만들어 보게 되죠. 그리고 그 모든 과정은 슬랙과 같은 사내 메신저를 통해 '이미지'로 공유, 저장됩니다.
어느 정도 기획과 시안 방향성이 정해지고 나면, 기획자는 또 '화면 명세서'를 만들기 시작합니다.
명세서에는 화면에 들어가는 컨텐츠의 텍스트와, UI 요소들에 대한 정보와 기능에 대한 설명이 들어가죠. 물론 명세를 하는 중에도 여러 가지 토의로, 계속해서 컨텐츠와 시안이 수정됩니다.
디자인 시안, 화면 명세서 등이 끊임없이 수정되면서 같은 정보를 담기 위해 지속적으로 동기화하게 됩니다. 하지만 사람이 하는 일이라 꼭 몇 개씩 빼먹게 되죠..
결과적으론 수십 가지의 배리에이션과 경우의 수, 수십 장의 이미지 파일이 만들어지게 되고, 명세서의 내용과 시안의 내용이 조금씩 다른 부분이 생기기도 합니다. 이제 어느 것이 최종적인 시안이고 합의된 안 인지도 헷갈리기 시작합니다.
버전관리 시스템은 이 문제를 정말 효과적으로 해결합니다. 제가 체감한 장점들은 4가지입니다.
1. 스케치 파일을 누구든지 수정할 수 있다.
기존의 프로세스에서는 최종안이 될 시안 파일을 디자이너만이 수정합니다.
기획자의 제안, 의견이 세부적으로 적용되지 못하거나, 디자이너의 작은 수정이 합의되지 않은 채로 끝까지 진행되는 경우가 생기곤 하죠. 이것은 최종적인 합의안이 무엇인지를 헷갈리게 하고 뒤늦은 수정을 발생시켜 과업의 일정과 효율에 문제를 일으킵니다!!
물론 그냥 디자이너가 시안 스케치 파일을 공유해서 수정할 수 있게 하면 되지 않을까? 싶기도 하지만. 단순히 각자가 작업하게 되면, 오히려 두 파일의 시간차는 더 가속되고 배리에이션의 수는 더더욱 늘어나 관리가 훨씬 힘들어 질지도 모릅니다.
2. 하나의 파일을 함께 수정할 수 있다.
버전 관리를 통하면 하나의 파일을 각자가 다른 업무로서 거의 동시에 작업할 수 있게 됩니다!
언제든지 수정을 해보고 싶은 때는 버전관리 시스템에 들어와 가장 최신화된 시안을 기준으로 수정할 수 있죠.
3. 시안의 합의를 시스템을 통해 결정, 확인할 수 있다.
그렇다고 아무나 수정된 결과를 최종안에 반영할 수 있는 것은 아닙니다. 모든 수정 작업은 현재의 '합의된 마스터 시안'으로부터 갈라진 일종의 평행우주인 '브랜치(branch)'를 만들어 작업하게 되고, 문화나 시스템을 통해 '합의된 수정 사항'에 대해서만 '마스터 브랜치'에 적용(merge) 시킬 수 있게 됩니다!!
이 과정은 기존의 프로세스에 비해, 훨씬 명확하기 때문에 제안과 합의안을 분명하게 구분할 수 있게 해줍니다.
4. 스케치가 없어도 웹상에서 시안을 이미지로 확인할 수 있다.
기존에는 스케치 파일이라는 최종 파일이 있다고 하더라도, 모두와의 공유를 위해 이미지 파일이라는 또 다른 최종 파일을 만들게 됩니다. 이 과정에서 관리해야 하는 파일이 증가하고, 작은 수정에도 귀찮은 동기화가 필요해집니다. 하지만 버전 관리 시스템 Abstract는 웹상에서 해당 뷰를 이미지로 바로 확인할 수 있습니다.
인터넷만 된다면 스케치가 없어도, 디자이너가 이미지로 하나하나 뽑아주지 않아도 누구든지 최신의 합의된 시안을 확인할 수 있게 되는 거죠!
결과적으로 우리는 마스터 브랜치라는 신뢰도 99.75%의 합의된 시안을
언제 어디에서나 웹을 통해 확인할 수 있고,
누구든지 안전하게 수정을 제안할 수 있으며,
시스템 안에서 합의되어 간단하게 적용, 최신화시킬 수 있습니다!
모두싸인은 Abstract를 통해 스케치의 버전관리를 하고 있습니다.이 장점들을 모두싸인에서 새로운 기능을 작업하는 프로세스를 빌어 말씀드려 본다면,
먼저, 새로운 기능을 고안한 기획자가 마스터로부터 브랜치를 따서 와이어 프레임을 작업합니다.
토의를 통해 와이어 프레임이 대략적으로 합의가 되면 마스터 브랜치에 머지합니다.
디자이너는 다시 마스터로부터 브랜치를 따고, 그 와이어 프레임 위에 바로 디자인 시안을 작업합니다.
(이 과정에서 와이어 프레임이 버전관리시스템에 기록으로 남게 되고, 별도로 와이어 프레임 파일을 보관하지 않아도 됩니다.)
디자이너의 시안도 토의를 통해 합의가 되면 마스터에 머지됩니다.
기획자, 디자이너 혹은 어느 누구든 마스터로부터 브랜치를 따내 계속해서 수정 작업을 제안하고,
토의와 합의, 머지가 수없이 반복됩니다.
합의되지 못한 브랜치는 폐기되지만 사라지지 않고 버전 관리 시스템 속에 남아있습니다.
어느 정도 시안까지 정리가 되면 기획자는 명세서를 작성합니다.
하지만 기존과는 다르게 이제는 명세서에 화면에서 드러나는 '컨텐츠'의 정보는 입력하지 않습니다. '시안'이 믿을 수 있는 합의된 명세이기 때문에 명세에는 정적으로 표현할 수 없는 기능에 대한 동적인 정보, 인터렉션, 유즈 케이스 등 만이 작성됩니다.
시안과 명세를 보고 작업하던 개발자는 기존에는 두 정보 사이의 차이에서 헷갈려했지만 이제는 시안을 기준으로 작업하고 구체적인 기능은 명세를 통해 파악합니다.
저희는 제플린과 같은 가이드 프로그램을 사용하진 않습니다. 필요하다면 스케치를 열어 직접 수치를 확인합니다. 별도의 가이드 프로그램을 사용하면 또 새로운 "결과물"이 추가되기 때문에 관리의 리소스를 줄이기 위함입니다.
모두싸인은 버전관리 시스템 도입을 통해 작아 보이지만 정말 큰 업무의 효율을 얻고 있습니다.
이름은 '버전관리'이지만, 이것의 핵심 가치가 단순히 "작업 과정에 대한 기록-보관"은 아니라고 생각합니다.
버전관리는 파일 관리를 더 편하게 해준다는 것을 뛰어넘어, 협업관계의 변화, 나아가 업무효율을 혁신적으로 증가시키는 시스템임을 말씀드리고 싶었습니다...
특히 Abstract는 정말 잘 만든 도구입니다. 어렵지 않게 익힐 수 있고 정말 직관적입니다. 여러모로 추천을 드립니다.
이런 경험을 통해 "작업 결과물을 통합해, 관리해야 하는 결과물의 수를 줄이는 것" 이 얼마나 중요한 것인지를 계속해서 체감하고 있습니다..
또 요즘은 "디자이너와 개발자"간의 협업관계를 개선해 볼만한 방법을 고민하고 있습니다. 기회가 되면 이것에 대한 생각도 글로 써보고 싶습니다 ㅠ.
아무쪼록 부족한 글을 읽어주셔서 정말 너무 감사드립니다.!
간편 전자계약 서비스, 모두싸인은 국내 최고의 클라우드 전자계약 서비스입니다
모두싸인에서는 프론트엔드 엔지니어를 꾸준히 구하고 있습니다.
관심있으신 개발자분 혹은 주변의 구직중인 개발자분들에게 이야기해주시면.. 감사합니다!! �
구인 안내 : http://www.saramin.co.kr/zf_user/jobs/relay/recruit-view?rec_idx=32792021
