brunch

You can make anything
by writing

C.S.Lewis

by 디자이너 쩬 Dec 17. 2024

디자인 시스템을 도입하면 업무 효율이 정말 좋아질까?

Design System: Lessons Learned 1편

디자인 시스템을 도입하면 업무 효율이 정말로 좋아질까요? 네, 맞습니다. 디자인 시스템을 활용하면 페이지를 구현할 때, 그렇지 않은 경우보다 개발 효율이 2~3배 정도 향상된다고 합니다. 이는 미리 정의된 컴포넌트와 스타일 가이드 덕분에 불필요한 고민이 줄어들기 때문입니다. 현재 많은 기업이 디자인 시스템을 도입 & 운영 하고 있으며, 지금은 '과연 어디까지 시스템화할 수 있을까?'를 고민하는 단계에 접어들었다고 생각합니다.


그런데, 디자인 시스템이 무조건 효율적이기만 할까요?




디자인 시스템의 딜레마


다양한 요구사항을 반영하기 위해 디자인 시스템은 변화합니다. 그 과정에서 하나의 컴포넌트에 많은 요구사항을 반영하려다 보면, 디자인 시스템 구성요소는 엄청 거대해 집니다. 즉, 컴포넌트를 사용할 때마다 설정 해야하는 요소들이 너무 많아져, 사용의 복잡도 관리의 복잡도가 증가하게 됩니다. 뿐만아니라 모든 요구사항이 디자인 시스템에 반영되어야한다는 부담감도 커집니다. 


저도 이런 과정에서 다양한 케이스를 지원하려다 보니, 단순했던 컴포넌트를 지나치게 많은 옵션과 복잡한 설정을 요구하는 "대뚠뚠이" 컴포넌트로 만든 경험이 있습니다. 아래 이미지에서 오른쪽에 작게 표기된 모든 것들이 Select Dropdown이라는 하나의 컴포넌트에 대한 속성들입니다. 



디자인 시스템이 고도화되면서 구성 요소가 지나치게 많아지면, 러닝 커브가 높아지고 시스템 전반을 이해하기 어려워집니다. 그 결과, 이미 존재하는 요소를 재활용하지 않거나, 비슷한 요소를 커스텀해 사용하는 문제가 발생할 수 있습니다. 또한, 특정 페이지의 맥락만 고려해 컴포넌트를 업데이트하는 일이 생길 수 있고, 이로인해 다른 페이지에서 예상치 못한 오류가 발생할 가능성이 커집니다.


한편, 제품이 요구 사항에 맞춰 빠르게 성장하는 동안 디자인 시스템이 함께 발전하지 못한다면 어떤 일이 일어날까요? 디자인 시스템의 요소들은 점차 낙후되고, 팀원들이 새로운 페이지나 기능을 구현할 때 시스템을 제대로 활용하지 않고 독립적으로 작업하는 일이 늘어날 것입니다.


이러한 파편화는 제품의 일관성과 팀 간 커뮤니케이션 효율성을 떨어뜨리며, 결국 디자인 시스템이 과연 필요한지에 대한 의문을 불러일으킵니다.


[Lessons & Learned]
디자인 시스템은 개발 효율을 크게 향상 시키지만, 다양한 요구사항을 반영하다 보면 복잡성이 증가하여 관리가 어려워질 수 있습니다. 
잘못된 방향의 디자인 시스템 고도화나 디자인 시스템의 낙후는 파편화를 야기하며, 이로 인해 제품의 일관성과 팀간 효율성이 떨어져 결국 디자인 시스템의 필요성에 의문을 제기하게 될 수 있습니다.




Form ever follows function

"Form ever follows function" - Louis Sullivan

*이미지 출처: https://bowtiedraptor.substack.com/p/data-storytelling-10-form-follows


앞서 언급한 "대뚠뚠이 Select Dropdown"이 만들어진 이유는 저의 초기 접근 방식 때문이었습니다. 디자인 관점에서, 비슷한 형태의 컴포넌트는 하나로 묶는 것이 효율적일 것이라고 생각했습니다. 하지만, 그 결과는 지나치게 많은 props를 가진 복잡한 컴포넌트였습니다.


그 이후로 저는 기능 중심으로 컴포넌트를 설계하는 방식으로 접근을 전환했습니다. 단순히 "어떻게 보이는가?"에 초점을 맞추기보다는, "이 컴포넌트가 실제로 어떤 역할을 하는가?"를 기준으로 설계하는 것이 더 효율적이라는 교훈을 얻었습니다.


[Lessons & Learned]
형태를 기준으로 컴포넌트를 설계하면, 너무 많은 props를 가진 복잡한 컴포넌트가 만들어 질수 있습니다. 결국 기능 중심으로 설계해야 한다는 교훈을 얻었습니다.


실제로 Select Dropdown의 props을 줄이기 위해선 기능에 따라 Select Dropdown을 나눠야 할 것입니다. 그에 앞서 저는 우선 Figma Variants 최적화를 진행했습니다. 이에 대한 내용은 Headless 컴포넌트 설계(Figma Variants 효율적인 설계 방법 2편)에서 자세히 알아보실 수 있습니다.






명확하지 않은 목적과 책임은 회색 영역을 만듭니다.


디자인 시스템의 목적과 책임이 명확하지 않으면, 디자인 시스템 컴포넌트와 콘솔 컴포넌트의 범위가 모호해 질 수 있습니다. 예전에는 디자인 시스템에는 포함되지 않았지만, 제품 내에서 반복적으로 사용 되는 요소라 별도로 관리하는 컴포넌트를 콘솔 컴포넌트로 관리했습니다. 하지만 각 컴포넌트들의 목적이 명확하지 않아, 콘솔 컴포넌트들은 체계적으로 관리되지 않았고 이로 인해 유지보수에 어려움을 겪었습니다.


[Lessons & Learned]
디자인 시스템의 역할과 목적 설정은 중요합니다. 이를 통해 일관성을 유지하고, 업무 상 혼선이나 중복 작업을 줄일 수 있습니다.






이 글이 디자인 시스템을 고민하거나 설계 중인 분들에게 작은 인사이트가 되길 바랍니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari