[Scaffold Design System] 1. 디자인 시스템을 위한 디자인 시스템 만들기

pxd(피엑스디)에서는 지난 2년 동안 대규모 프로젝트를 진행하면서, 과정에서 맞닥뜨린 문제들이 있었습니다. 그래서 조직 내에서 반복적으로 발생하는 문제들을 모아 해결함으로써 조직 전체의 디자인 운영 효율을 높이는 것을 목표로 사내 스터디를 시작하게 되었죠. 스터디를 23년 2월부터 약 1년 4개월간 진행해 오면서, 그동안 연구한 내용을 바탕으로 ‘다수의 프로덕트를 운영하는 조직을 위한 디자인시스템’을 제작했습니다. 해당 시리즈를 통해 그 과정과 결과를 공유하고자 합니다.

 

프로젝트를 하면서 느낀 문제점 모으기

앞서 말씀드린 대로 대규모 프로젝트를 진행하면서 마주친 다양한 문제들이 있었습니다. 많은 구성원들이 이를 해결하기 위한 방법이 필요하다고 생각했고, 각자 프로젝트를 하면서 느꼈던 불편한 점, 개선되었으면 좋을만한 점들을 한 곳에 모아 정리하는 시간을 가졌습니다.

 

다양한 사례를 모아 비교하며 해결책 찾기

제기된 문제의 카테고리는 크게 텍스트, 컬러, 컴포넌트 등 디자인시스템에 대한 내용, 디자인-개발 간 커뮤니케이션에 대한 부분으로 나누어볼 수 있었습니다. 구체적인 해결책을 찾기 위해서 사내 프로젝트와 주요 디자인 시스템 사례를 폭넓게 조사했습니다. 조사한 내용을 한 곳에 모아 비교하면서 각 사례의 구조와 장단점을 정리한 후에는, 어떤 방향으로 해결책을 적용하는 것이 좋을지 토론하는 과정을 거쳤습니다. 그럼에도 확신이 들지 않았던 부분은 게릴라 UT를 통해 구성원들의 의견을 수집하기도 하고요.

 

공동의 지식을 담을 수 있는 틀, 기준 디자인 시스템 만들기

다음 과정은 이러한 조사와 논의를 통해서 도출한 해결책을 내부에 전파하는 일이었습니다. 조직 내부에 전파하기 위해 다양한 방법을 고민한 결과, 시행착오를 통해 배운 점을 공유할 수 있는 교재임과 동시에, 빠른 프로젝트 시작을 위한 툴킷으로서 ‘기준 디자인시스템’을 만들자는 방향을 설정했습니다. 이유는 크게 2가지였습니다.

첫 번째는 프로젝트의 다양한 요소들을 중앙화해서 관리하는 곳이 바로 디자인시스템이었기 때문입니다. 디자인시스템에 발생할 수 있는 문제와 해결책을 포함해 두면 자연스럽게 프로젝트에 녹아들게 할 수 있었죠. 또한 도출한 결과물을 구성원들이 각 요소별로 따로 찾아보면서 학습하는 것보다, 한 곳에서 보는 게 찾기도 편하고, 지속적인 관리가 가능했습니다.

두 번째는 pxd의 업무 구조와도 연관이 있습니다. pxd 내부에는 다수의 프로젝트가 있고, 각 프로젝트에는 다른 인원이 TF(Task Force) 형태로 배정됩니다. 이때 프로젝트마다 디자인 시스템의 구조와 사용하는 언어가 서로 달라 디자이너들이 적응하는 데 비교적 긴 시간이 필요했습니다. 구조가 다르다 보니 엔지니어 리소스도 많이 필요했죠. 신규 프로젝트를 연이어 진행하는 저희 조직에서는 꽤나 큰 문제였기 때문에, 각 프로젝트의 구조에 유사성을 부여함으로써 이를 해결할 수 있다고 생각했습니다.

 

기준 디자인 시스템의 핵심, 유연함

프로젝트를 진행하면서 어려운 상황 중 하나는 이미 만들어진 시스템을 대규모로 수정해야 할 때일 것입니다. 가령 프로덕트 완성 후 운영 단계에서 기존 텍스트 스타일 체계로는 대응이 어려워 체계를 완전히 바꿔야 하는 경우처럼 말이죠. 저희 역시 많은 프로젝트를 진행하면서 이런 상황을 여러 번 겪었기 때문에, 시스템을 구축할 때 ‘유연함’에 중점을 두었습니다. 특정 상황에서 대규모 수정을 피할 수 있도록 손쉽게 변경하거나, 조정할 수 있는 체계를 목표로 했습니다.

 

디자인 시스템 제작을 돕는 기준, 스캐폴드 디자인 시스템

이 기준 디자인 시스템은 프로젝트마다 성격이 다르기 때문에 ‘모두가 똑같이 써야 하는 규칙’이라기보다는 가이드라인에 가깝습니다. 각 프로젝트의 디자인 시스템 구축을 돕는 보조 도구이므로 시스템의 명칭을 ‘스캐폴드 디자인 시스템(Scaffold Design System)’이라고 지었습니다. 건설 현장에서 작업자들이 작업할 수 있도록 설치하는 구조물인 비계(scaffold)와 같은 역할을 한다는 의미에서 말이죠. 앞으로 네 편의 아티클을 통해 텍스트 스타일 체계, 시멘틱 컬러, 스케일 컬러, 컴포넌트 순으로 스캐폴드 디자인 시스템을 자세히 소개하고, 마지막 편에서는 제작기를 들려드리겠습니다.

글. 진의준  — Product Designer