스타트업에서 디자이너와 개발자가 협업하는 방법: “디자인 시스템”편
우리의 프로덕트가 고도화될수록 디자인 시스템(Design System)은 점점 변화하며 완성된다. 아무래도 아무 것도 없었던 백지에서 프로덕트를 만들다보니, 디자인 시스템을 처음부터 만들긴 어렵기 때문이다. 물론 여러 유명한 디자인 시스템을 그대로 가져와 쓸 수도 있었지만, 우리만의 브랜딩이 담긴 디자인 시스템을 자체적으로 개발해야하는 스타트업의 인하우스 디자인팀이라면 이야기가 다르다. 이번 글에서는 우리 스타트업 앤트가 어쩌다 디자인 시스템 “버전 관리”를 도입했고, 그러면서 개발자들과 어떻게 조금 더 효율적으로 협업하게 되었는지에 대한 이야기다.
우리도 처음부터 멋진 디자인 시스템 1.0, 2.0 버전을 내놓을 수 없었다. 그리고 개발자들은 디자인팀이 만든 수많은 버튼, 인풋들을 바꿀때면 한숨을 푹푹 내쉬었고, 디자이너들은 매번 미안한 마음이었지만… “개발해주세요!”를 외쳤다. 변경하는 이유는 다양했다. 그냥 라디어스를 10에서 20으로 바꾼다던지, 갑자기 버튼의 크기가 달라진다던지, 기존 형태에서 완전히 다른 형태로 바꾼다던지, 호버나 클릭 액션이 바뀐다던지 디자이너들의 마음이었다.
디자인 시스템이라는게 디자이너들한테도 그렇지만 개발자들한테도 유용하기 때문에 잘 구축만 해놓는다면 프로덕트에 얹는 거는 오히려 편한건 맞다. 하지만… 초기 스타트업에서 프로덕트의 컨셉과 내용은 계속 바뀐다. 디자이너도 이걸 하나하나 쳐내면서 그때마다 전반적으로 디자인을 변화시키지 않으면 큰 톤앤매너의 중심을 잃을 수 있다. 어쩔수 없이 디자인 시스템은 거의 매번 프로덕트를 개선할 때마다 다시 재작업에 들어갔었다.
어언 2년차 스타트업에 접어들면서, 그리고 프로덕트 컨셉이 안정화되면서, 디자인 시스템 작업은 결코 작은 일이 아닌, 뼈대를 잡는 큰 일이라는 것을 개발자와 디자이너 간의 무언의 합의가 있었다. 그럼에도 변경되는 수정들에는 버저닝 관리 도입만이 서로의 행복한 결말로 이어진다는 것을 알아냈다.
왜 디자인 시스템에 버저닝 관리가 필요한가?
원래 우리는 v0.1, v0.5, v1.0 등등 디자인 시스템 버저닝을 하고는 있었다. 하지만 이때의 버전은 프로덕트인 랩노트의 초기 알파, 베타, 클로즈베타 버저닝과 동일했다. 하지만 전달 과정에서 문제가 컸다. 프로덕트 기획, 디자인을 거쳐, 마침내 개발자들이 받은 프로덕트 최종 디자인과 디자인 시스템은 워터폴 수준이 아니라 거의 워터토네이도였다.
문제는 크게 세 가지로 현상으로 압축할 수 있다. 디자이너의 열정, 개발자의 한숨, 알 수 없는 내용.
문제점 1. 디자이너는 프로덕트를 업그레이드할 때마다 자꾸 디자인 시스템을 전체 수정하는 열정을 가졌다. 예뻐져야하니… 어쩔수 없다.
문제점 2. 개발자가 한번에 Figma, Zeplin으로 받은 방대한 디자인 시스템을 전부다 다시 개발하려고 하면 눈앞이 캄캄하다. 일단 안된다, 할 수 없다 아우성이 들린다.
문제점 3. 어쩔땐 큰 수정 없이 그대로 전달된 것 같은데 대체 어느 부분이 어떻게 수정되었는지 정확히 알 수 없다. Zeplin에 디자이너들이 코멘트는 달아주긴 하는데 개발자들 입장에선 잘 모르겠다.
스타트업 앤트에서 어떻게 디자인 시스템 버저닝을 어떻게 하는가.
그렇게 탄생한 앤트만의 랩노트 디자인시스템 버저닝 관리 페이지이다. 몇가지 특이점은 다음과 같다.
버저닝: 우리는 버저닝 관리를 도입하면서 프로덕트 버전과 다르게 가져가기로 했다. 즉, 디자인 시스템만의 버전을 따로 관리를 시작했다. 예를 들면 이번 하반기에 릴리즈하는 프로덕트 “랩노트"가 v1.1이기에, 디자인 시스템에서는 v1.1.1에서부터 출발하기로 약속했다. 그리고 크고 작은 수정이라도 디자이너가 수정 업데이트를 할 때마다. v1.1.1, v.1.1.2, v.1.1.3…로 랩노트만의 디자인 시스템 버저닝 업그레이드를 했다. 그리고 이 버저닝을 우리는 노션에서 데이터베이스로 관리하였다.
유형: 무엇보다 디자인 시스템의 유형을 전부 태그로 정리했다. 랩노트 디자인 시스템의 경우, 크게 타이포그래피, 컬러, 아이콘, 버튼, 드랍다운, 인풋박스, 모달, 칩, 토스트메세지, 툴팁, 쉐도우 로 정리했고, 수정한 유형만 태그를 걸어 쉽게 확인이 가능하도록 했다.
링크: 해당 버전에서는 피그마, 제플린 페이지는 링크로 전부 연동하여 바로 디자이너나 개발자가 클릭하여 열람할 수 있도록 하였다.
담당자 태그: 아무래도 누가 작업을 하는지 담당자를 태그하는게 중요했다. 먼저 디자이너는 수정한 디자인시스템 발생 시 수정한 내용과 함께 버전 로그를 남기고 개발자에게 공유한다. 그러면 개발팀에서는 해당 디자인 시스템을 개발할 개발 담당자를 태그한다. 개발자는 확인 후 상태를 대기, 진행중으로 바꾸고, 개발이 완료되면 개발여부/개발상태 란에 “✅, 개발완료”로 표기한다. 이렇게되면 나중에 디자이너도 누구한테 연락해서 확인해야하는지 알아보기 쉽고, 개발자들도 어느 디자이너가 작업했는지 한번에 확인할 수 있다.
수정 내용 요약: 디자이너는 어떤 부분을 수정했는지 요약해서 표에 드러나게 작성한다. 여기서는 간단한 메모처럼 작성하고 디테일한 내용은 따로 작성하는 공간을 마련했다.
수정 내용 전달: 우선 노션의 장점을 잘 살려, 각 low의 메인 페이지를 오픈하면 각 버전에서 어떤 부분을 수정하고 추가했는지에 대해 작성해서 전달할 수 있다. 다음은 실제 랩노트 디자인시스템 Ver 1.1.5의 내용이다.
먼저 업데이트 내용에 대해 간략히 개요를 설명한다. 그리고 그 내용에 따라 상세 내용을 서술한다. 예를 들어, 버튼에서 색상이 어떻게 수정되었는지, 크기가 어떻게 변화했는지 말이다. 시간이 조금 되면 디자이너들이 before, after로 표현해주는 편이다.
디자인 시스템 유형별 최신 링크 관리
유형별 최신 링크는 노션에서 갤러리 형태로 관리중이다. 버저닝과 상관없이 가장 최신 버전을 항상 업데이트하여 피그마, 제플린 링크를 동시에 달아준다. 이러면 굳이 피그마나 제플린에서 직접 찾아들어갈 필요없이 한 페이지에서 모든 디자인 시스템의 최신 링크가 연동된 상태로 열람할 수 있다.
자. 이제 스타트업 앤트의 개발자와 디자이너는 이제 사이가 좋아졌다. 다른 스타트업에서도 우리와 비슷한 문제를 겪고있다면, 버저닝 관리 방식으로 시작해보는 건 어떨까?
