Design System - 개발자, 디자이너, 기획자의 입장에서

디자인 시스템(Design System)의 개념

디자인 시스템은 제품이나 서비스의 사용자 경험을 일관되고 효율적으로 구축하기 위해 사용되는 일련의 표준화된 가이드라인과 구성 요소 모읍집이라고 할 수 있다. 개발자 입장에서 단순하게 보면, 사내 규격화된 UI 컴포넌트 모음집이라고도 할 수도 있지만, 디자인 시스템은 그 이상의 의미를 가진다. 조직의 디자인 철학, 가치, 그리고 목표를 달성하기 위한 시스템으로서, 효과적인 사용자 경험을 만들어내는 방법론과 원칙을 제공한다. 

 

 

디자인 시스템의 장점

1. 생산성과 개발 속도 향상: 디자인 시스템은 기획-디자인-개발로 이어지는 제작 과정에서 일관된 UI 컴포넌트를 사용함으로써 개발 속도를 높이고, 동시에 비용을 절감할 수 있도록 한다. 디자인 및 개발 프로세스가 표준화되어, 팀이 더 빠르고 효율적으로 작업할 수 있다. 

 

2. 일관성과 품질 향상: 디자인 시스템은 조직에서 생산된 전체 제품에 걸쳐 일관된 사용자 경험을 제공할 수 있게 한다. 이는 브랜드 이미지와 사용자 인터페이스의 질을 향상시키는 데 기여하며, 사용자가 제품을 더 쉽게 이해하고 사용할 수 있도록 돕는다. 또한 일관된 기준이 있기 때문에 잦은 수정이나 불필요한 재설계를 피할 수 있도록 해주고, 시간이 지남에 따라 누적되는 디자인의 불일치나 낮은 품질로 인해 발생하는 '디자인 부채' 또는 '기술 부채'를 최소화하는데 도움을 줄 수 있다. 

 

3. 유지보수와 확장성: 디자인 요소와 컴포넌트를 하나의 중앙 저장소에서 관리하기 때문에 변경 사항이나 업데이트가 필요할 때, 각각 개별 서비스를 직접 수정하는 대신, 중앙 시스템을 업데이트함으로써 모든 관련 제품에 자동으로 적용할 수 있다. 또한 재사용 가능한 컴포넌트와 정의된 디자인 규칙을 제공함으로써 새로운 프로젝트가 시작될 때마다 기존의 검증된 요소들을 활용할 수 있으므로, 기존 제품과의 일관성을 유지하면서도 필요에 따라 적절히 조정하고 확장하는 유연성을 제공할 수 있다.

 

디자인 시스템의 사용자와 각 사용자 관점에서의 유익

디자인 시스템의 사용자는 디자이너, 개발자, 기획자가 있으며, 이 세 역할이 잘 사용할 수 있도록 고안되어야 한다. 

 

1. 디자이너

디자이너에게 디자인 시스템은 반복적인 디자인 작업에서 벗어나도록 도와주면서 단순 디자인보다는 사용자 경험(UX) 문제를 해결하는데 더 집중할 수 있게 도와준다. 미리 정의된 컴포넌트와 디자인 표준을 제공하며, 다양한 제품과 플랫폼에 걸쳐 브랜드 일관성을 유지하면서 디자인 과정을 가속화시킨다. 

 

2. 개발자

개발자에게 디자인 시스템은 UI 제작 과정을 재사용 가능한 코드로 변환하여 개발 프로세스를 빠르고 효율적으로 만든다. 명확한 지침과 사전에 코딩된 컴포넌트를 통해 개발자는 디자인의 구현을 빠르게 진행할 수 있으며, 디자이너와의 반복적인 수정 및 검토 필요성을 줄일 수 있다. 이는 개발 시간을 단축시키며, 애플리케이션의 다른 부분이나 다양한 플랫폼 간에 일관성을 유지하는데 도움을 준다.

 

3. 기획자

기획 단계에서부터 일관된 디자인 가이드라인과 컴포넌트를 제공함으로써 제품 기획과 디자인 과정을 더욱 효율적으로 만든다. 이는 제품의 구상과 프로토타이핑 속도를 높이는 데 기여한다. 또한 디자인 시스템은 빠른 반복과 수정을 가능하게 하면서 기획 초기 단계에서부터 테스트를 빠르게 진행할 수 있어 제품의 시장 출시 시간을 단축할 수 있다.

 

개발 과정에서 디자인 시스템은 일관성을 유지하면서 커뮤니케이션 비용을 절감하는 데에도 큰 도움을 준다. 디자인 시스템이 제공하는 표준화된 컴포넌트와 명확한 지침은 팀 간의 의사소통을 간소화하고 오해를 줄여줄 수 있기 때문이다. 즉, 모든 팀원이 동일한 설계 원칙과 가이드라인을 공유함으로써, 디자이너, 개발자, 그리고 기획자 간의 소통을 보다 명확하게 할 수 있게 된다.

 

유저 입장으로서 디자인 시스템을 사용함으로써 얻는 큰 장점은 일관된 사용자 경험인 것 같다. 한 회사의 여러 제품들 간의 일관된 사용자 인터페이스(UI)와 상호작용을 제공하게 되기에, 이로 인해 사용자는 다양한 페이지나 기능을 사용할 때마다 더 빠르고 직관적으로 이해하고 사용할 수 있게 된다.  

---

 

현재 내가 다니고 있는 회사도 디자인 시스템을 도입하여 사용하고 있다. 조직 내 개발자, 디자이너 수가 많아지고, 그리고 출시되는 제품 간에 재사용되는 코드들이 많아지다 보니, 자연스럽게 디자인 시스템을 도입하게 되었다. 처음 디자인 시스템을 도입하는데 있어서 시간과 비용은 적지 않게 들었던 것 같다. 프론트엔드 개발 팀에서 처음 도입하는 모듈이다보니 회의와 개발을 반복하며 3개월은 소요되었던 것 같다. 물론 그 이후에도 디자인이 추가, 변경되는 일은 당연하기에 유지보수에 있어서도 리소스가 적지않게 소모되고 있다. 

 

이미 디자인 시스템을 도입하기 전에도 Material-UI 를 기반으로한 UI 컴포넌트를 사용하고 있었기에, 이를 기반으로 디자인 시스템을 만들게 되었고 (+ Foundation 까지 만들 여력이 없기도 했지만), 도입한 이후로는 개발자, 기획자 그리고 디자이너 직군까지 충분히 만족하면서 사용하고 있는 것 같다. 도입하기 이전에는 개발자가 전반적인 UI 와 페이지를 완성하면, 디자이너 분과 함께 모니터를 보면서 1:1로 잘못된 것들이 없는지 점검하는 시간을 가졌었는데, 지금 생각해보면 참 웃긴 개발 과정이었구나 생각이든다. (물론, 그 때는 개발자들이 Windows를 사용하고 디자이너분들은 Mac을 사용했기에 그 차이를 확인하기 위한 과정이기도 했다.)

 

프론트엔드 개발자로서는 UI를 만드는 데 소모되는 시간을 줄이고 그보다는 로직과 구성에 시간을 좀 더 들일 수 있게 된 것이 디자인 시스템의 가장 큰 장점인 것 같다.

 

---

References

 

11 Benefits of Degisn Systems for Deisngers, Developers, Product Owners, and Teams, 2022 - https://builtin.com/articles/11-benefits-design-systems

 

Unveiling the best design systems: Principles, examples, and key takeaways, 2023. - https://blog.logrocket.com/ux-design/best-design-systems/

 

The Benefits of a Design System: Making Better Products, Fatser. - https://www.toptal.com/designers/design-systems/benefits-of-design-system