1. 디자인 시스템을 위한 디자인 시스템 만들기

피엑스디(pxd)는 지난 2년간 대규모 프로젝트를 진행하며 디자인 업무의 효율성을 높여야 한다는 필요성을 느꼈습니다. 그렇게 디자인 시스템 구축을 위한 스터디를 시작했고, 2023년 2월부터 약 1년 4개월 동안 연구한 내용을 바탕으로 ‘다수의 프로덕트를 운영하는 조직을 위한 디자인 시스템’을 제작했습니다. 해당 시리즈를 통해 디자인 시스템을 구축하는 과정에서의 고민과 그 결과를 공유하고자 합니다. 

 

 

프로젝트마다 다른 디자인 시스템, 효율성 높일 방법 찾기

 

디자인 시스템은 프로덕트의 일관성을 유지하기 위한 수단이자, 디자이너와 엔지니어가 매일 접하는 인터페이스입니다. 일반 기업들은 주로 단일 또는 소수의 디자인 시스템을 사용하면서 이를 확장하고 관리합니다. 반면, 피엑스디는 UX 컨설팅 기업으로서 다양한 프로젝트를 동시에 진행하며 프로젝트별로 디자인 시스템을 운영해 왔습니다. 

 

그러나 이 방식은 디자인 시스템과 사용 언어의 차이로 인해 TF(Task Force) 형태로 배정된 디자이너들이 적응하는 데 시간이 걸리는 어려움이 있었습니다. 또한, 디자인 시스템 체계가 다르다 보니 개발 리소스도 많이 필요했고, 이는 신규 프로젝트를 연이어 진행하는 저희 조직에 부담으로 작용했습니다. 디자이너들이 각기 다른 프로젝트에서 축적한 경험이 공유되지 않아, 프로젝트 A에서 겪었던 시행착오를 프로젝트 B에서 반복하는 경우도 발생했습니다.

 

이런 문제들을 해결하기 위해 그간 프로젝트를 진행하며 텍스트, 컬러, 컴포넌트로 구성된 디자인 시스템, 반응형 웹, 그리고 디자이너와 개발자 간의 소통에서 효율을 높일 수 있는 부분을 발견했습니다. 구체적인 답을 찾기 위해 사내 프로젝트별 사례를 수집하고, 타사의 디자인 시스템을 비교하며 구조와 장점을 분석했습니다. 이후 해결 방향을 지속적으로 논의하고, 필요한 경우 구성원 UT(Usability Test)를 통해 추가 의견도 구했습니다.

 

 

공동의 지식을 담을 수 있는 틀

 

이러한 과정을 거쳐 도출한 해결책은 ‘기준 디자인 시스템’을 만드는 것이었습니다. 그 이유는 아래 세 가지입니다. 

 

1. 공통 소통 기준 : 다양한 프로젝트에 투입되는 디자이너와 엔지니어의 학습 시간을 단축하고 비용을 줄여주는 소통 규칙 

2. 가이드라인 : 프로젝트 중 발생한 시행착오를 공유하고, 잠재적 문제와 해결책을 제시하는 교재 

3. 실무 보조 도구 : 빠른 프로젝트 시작을 돕기 위한 디자인 작업 자료 

 

각 프로젝트에 유사한 구조를 도입하면 업무 효율에 부정적인 영향을 미치는 요소들을 풀어갈 수 있다고 판단했습니다. 또한 각각의 프로젝트에 쉽게 적용할 수 있도록 프로젝트 초기 설정 단계에서 사용할 수 있는 형태여야 한다고 생각했습니다. 이렇게 피엑스디의 ‘기준 디자인 시스템’ 구축 작업에 들어갔습니다. 이후 이를 바탕으로 실제 프로젝트의 리서치, 제작, 운영 단계에 적용해 보며 우리 조직에 적합한 디자인 시스템을 완성해 나갔습니다.

 

 

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

 

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

 

 

피엑스디 디자인 시스템, 프로젝트의 보조 지지대

 

피엑스디의 디자인 시스템은 프로젝트마다 성격이 다르기 때문에 ‘모두가 똑같이 써야 하는 규칙’이라기보다는 가이드라인에 가깝습니다. 각 프로젝트의 디자인 시스템 구축을 돕는 보조 도구이므로 시스템의 명칭을 ‘스캐폴드 디자인 시스템(Scaffold Design System)’이라고 지었습니다. 건설 현장에서 작업자들이 작업할 수 있도록 설치하는 구조물인 비계(scaffold)와 같은 역할을 한다는 의미에서 말이죠.

앞으로 네 편의 아티클을 통해 텍스트 스타일 체계, 시멘틱 컬러, 스케일 컬러, 컴포넌트 순으로 스캐폴드 디자인 시스템을 자세히 소개하고, 마지막 편에서는 제작기를 들려드리겠습니다.