디자인 시스템에 대하여
머리말
구성요소 및 작성방법을 소개하기 앞서 프로젝트의 근간이 된 디자인 시스템에 대해 소개하고자 한다.
디자인 시스템 개요
디자인 시스템이 무엇이고 어떻게 구성되어 있는지, 어떻게 적용할 지에 대해 작성한다. 이 글은 노만 닐슨 그룹의 Design System 101 아티클을 배경으로 한다.
What is Design System
A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
디자인 시스템은 여러 페이지와 채널에서 공유 언어와 시각적 일관성을 생성하는 동시에 중복성을 줄임으로써 규모에 맞게 디자인을 관리하기 위한 하나의 표준이다.
디자인 시스템은 좁은 의미에서 웹이나 서비스 등에 사용되는 디자인에 대한 가이드라인이다. 공통으로 사용되는 컬러, 폰트, 레이아웃, UI 컴포넌트 등을 정의하고 이를 재사용함으로써, 디자인의 일관성을 유지하고, 커뮤니케이션 비용, 개발비용을 감소시키는데 그 의의가 있다.
결론적으로 디자인 시스템은 웹과 서비스의 디자인을 쉽고 효율적으로 관리하기 위한 관리도구이다.
Why use Design System
- 일관성(Maintaining Quality)
- 반복되는 UI 패턴을 통해 사용자에게 일관된 UX를 제공할 수 있다.
- 제품 생산자들(기획자, 디자이너, 개발자) 간의 동일한 언어를 사용하게되어 하나의 목소리를 만들 수 있다.
- 효율성(Work Efficiency)
- 반복되는 컴포넌트를 재생산하지 않아도 되어 개발 기간을 효과적으로 단축할 수 있다.
- 복잡한 구조 및 설계변경에 대한 비용을 줄이고 유연하게 대응할 수 있다.
- 집중(Focus on Contents)
- 제품 혹은 서비스가 갖고 있는 본질적인 기능(컨텐츠)에 집중할 수 있는 시간을 제공한다.
Why not use Design System
- 디자인 시스템은 시간과 비용이 드는 활동이다.
- 모든 프로젝트는 시간과 예산이 정해져있다.
- 디자인 시스템의 초기 투자 비용은 매우 매우 크다.
- 디자인 시스템은 지속적으로 개선되어야 하므로 관리자가 없다면 디자인 시스템은 무용지물이 될 수 있다.
- 디자인 시스템 사용을 위한 러닝커브가 존재한다.
- 모든 웹 서비스가 디자인 시스템을 필요로 하는 것은 아니다.
- 간단한 혹은 일회성의 웹 사이트 같은 경우 디자인 시스템이 필요하지 않을 수도 있다.
Element of Design System
디자인 시스템은 시스템 관리자가 주도하는 저장소로 구성되며 저장소는 다음과 같은 가이드라인을 포함할 수 있다.
- 디자인 시스템 관리자(Design System Team)
- 디자인 시스템 저장소(Design System Repository)
- 스타일 가이드(Style Guide)
- 컴포넌트 라이브러리(Component Library)
- 패턴 라이브러리(Pattern Library)
스타일 가이드(Style Guide)
스타일 가이드는 구현 지침, 시각적 참조, 인터페이스 또는 디자인 산출물 생성을 위한 디자인 원칙 등을 포함한 문서다.
일반적으로 브랜딩에 초점이 맞춰진 경향이 있으나, 콘텐츠에 대한 지침과 시각, 인터랙션에 대한 표준도 제시해야 함. 때때로 컴포넌트 라이브러리에 통합되어 상황에 맞는 지침을 제공하기도 함.
컴포넌트 라이브러리(Component Library)
컴포넌트 라이브러리(혹은 디자인 라이브러리)는 디자인 시스템을 생각했을 때 가장 많이 연상시키는 문서로, 재사용 가능한 UI Element에 대해 정의하고 제품 생산자(디자이너, 개발자)이 공유하기 위한 문서다.
시각적 구성요소 외에도 다음과 같은 사항을 포함할 수 있다.
- 컴포넌트명(Component name)
- 디자이너와 개발자 간의 오해를 피하기 위한 구체적이고 고유한 컴포넌트(구성요소)의 명칭.
- 설명(Description)
- 이 요소가 무엇인지, 일반적으로 어떻게 사용되는지에 대한 명확한 설명.
- 속성(Attributes)
- 특정 요구 사항에 맞게 구성 요소를 사용자가 지정하거나 조정하기 위해 만들 수 있는 변수 혹은 조정 옵션(color, size, shape, copy …)
- 상태(State)
- 권장하는 기본값 및 변경 가능한 사항
- 코드 예(Code snippets)
- 요소에 대한 실제 코드
- 프레임워크(Front-end & backend frameworks)
- 해당되는 경우 - 불필요한 디버깅을 피하기 위해
패턴 라이브러리(Pattern Library)
패턴 라이브러리는 UI 요소 그룹화 또는 레이아웃 모음에 대한 문서이다.
패턴 라이브러리와 컴포넌트 라이브러리는 종종 동의어로 사용되는 경향이 있으나, 컴포넌트 라이브러리는 개별 UI에 대한 문서, 패턴 라이브러리는 그룹화 된 UI에 대한 문서라는 점에서 차이점이 있다.
디자인 시스템 관리자(Design System Team)
디자인 시스템은 한번 만들고 끝나는 것이 아니다! 디자인 시스템은 구축하고 지속적인 관리를 통해 개선되어 나가야 한다.
관리자는 디자인 시스템에 있어 가장 중요한 요소 중 하나이다. 관리자에 따라 디자인 시스템이 좌지우지 될 수 있기 때문이다. 디자인 시스템을 관리할 관리자(개인이든 조직이든)는 필연적이며, 이들은 디자인 시스템이 지속적으로 유지되고 관리되도록 노력해야 한다.
팀의 규모마다 다를 수 있지만, 디자인 시스템 팀의 구성으로 최소한 개발자 한 명, 시각 디자이너 한 명,
인터랙션 디자이너 한 명을 권장한다. 각각은 인터랙션 디자인 가이드라인 작성, 시각적 예제 작성, 각종 코드 및
구현 사항 제공 등의 역할을 맡는다. 팀에 아키텍처, 및 연구원, 콘텐츠 작성자도 포함된다면 더욱 이상적일
것이다. 많은 경우에 어려울 것이다.
How to Approach Design-System Adoption
디자인 시스템을 시작하는 방법으로 다음과 같이 접근할 수 있다.
- 이미 만들어진 디자인 시스템을 사용하기(전체 그대로 사용 및)
- 이미 만들어진 디자인 시스템을 활용하기(일부 커스텀)
- 새로운 디자인 시스템을 만들기(전체 커스텀)
디자인 시스템 접근방법과 장 · 단점
각각의 방법은 장 · 단점이 있으므로 상황에 맞게 적절한 방법을 선택하는 것이 좋다. 크게는 비용과 자유도의 트레이드오프가 있다.
이미 만들어진 디자인 시스템을 사용한다 하더라도, 이를 지속적으로 사용하고, 커스텀하기 위해선 많은 비용이 소요될 수 있다. 다만 기존 디자인 시스템의 경우 이를 관리하기 위한 팀이 구성되어 지속적으로 관리를 지속하고 있기에, 관리적인 측면에서의 이점이 크다고 할 수 있겠다.
if you making Desing System
디자인 시스템을 구성하고 관리하는 일은 초기 비용이 굉장히 많이 발생한다. 따라서 단기적으로는 적절한 평가를 받지 못할 수 도 있다. 디자인 시스템의 이점은 재사용성에 큰 비중을 두고 있으며, 이는 미래의 시점의 이익을 의미한다.
디자인 시스템은 구현 시기마다 다른 접근 방식을 취하는 게 좋다. 변동사항이 많은 개발 초기 혹은 프로토타입 시의 디자인 시스템을 구성할 때는 기능적 툴킷으로 접근하는 것이 좋으며, 점차 변하지 않을(지속적으로 재사용 될) 시스템으로 발전시켜나가야 한다.
많은 디자이너들이 디자인 시스템을 만들고 활용하면서 디자인 시스템이 창의성을 해친다는 말을 하기도 한다. 그러나 이러한 접근은 디자인 시스템에 대한 오해이다. 오히려 디자인 시스템은 더 나은 디자인, 제품, 서비스를 만들기 위해 불필요한 비용을 아낄 수 있게 도와준다.
디자인 시스템은 효과적인 재사용방법을 찾고 관리할 수 있게 도와줄 뿐 작업의 한계를 두지 않는다. 만약 더 나은 디자인을 위해 새로운 디자인이 필요하다면 이를 채택하고 적용하면 된다.
Conclusion
디자인 시스템은 우리에게 사용성을 비롯한 많은 이점을 준다. 특히 재사용성을 통한 디자인 관리에 있어 매우 효과적이다.
우리는 디자인 시스템을 위해 다수의 컴포넌트, 패턴, 스타일, 가이드라인 등을 만들어 낸다. 주의할 점은 모든 프로젝트는 항상 시간과 비용의 제한이 있다. 이 점을 반드시 고려하여 디자인 시스템을 어떻게 적용할지에 대한 고민이 필요하다.
또 하나의 간과할 수 있는 점이자, 가장 핵심인 부분은 디자인 시스템은 결국 그것을 만드는 사람에 의해서 설계되고 관리되며 구현된다는 점이다. 지속적인 사람의 관리가 없어진다면, 디자인 시스템은 한 순간에 무용지물이 될 수도 있다는 것을 명심하자.
맺음말
디자인 시스템을 만들면서 아토믹 디자인과 함께 가장 큰 토대가 된 자료를 정리해 보았다. 2022년에 정리한 내용이지만, 2024년 3월 현 시점에 봐도 개념적인 큰 틀의 변화는 없는 것 같다. 디자인 시스템을 구상 중이라면 원글을 꼭 한번 참고하길 바란다.