Design System

Design System

디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미한다.
이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수있도록 도와준다.

디자인 시스템의 이점

팀 간의 원활한 협업 촉진

PM, 디자이너, 개발자 등 여러 분야의 사람들이 공통의 기준과 프로세스를 따르는 것과 같다. 이렇게 쌓인 공동의 디자인 자산을 통해 기업에서 제품이나 서비스를 제공할 때, 일관성 있는 디자인을 유지할 수 있다.

일관성 있는 사용자 경험 제공

디자인 시스템에 따라 제품이 만들어지면, 사용자들은 시간이 지남에 따라 서비스의 일관된 디자인에 점점 익숙해지기 때문에, 인터페이스를 사용하는데 걸리는 시간이 점점 줄어든다.

효과적인 디자인 및 개발 과정

브랜드 인지도 강화

코카콜라를 떠올리면 빨간색 로고가 생각나는 것과 같이, 사용자들이 일관된 디자인을 인지하게 되면 그 제품이나 브랜드에 대한 인지도와 신뢰도가 높아지게 된다.
이를 위해 디자인 시스템을 도입해 브랜드의 개성과 가치를 표현하는 색상, 타이포그래피, 아이콘, 이미지 등의 요소를 통일할 수 있다. 따라서 사용자들은 제품이나 서비스를 사용하면서 브랜드와 연결되는 느낌을 받게 된다.

Atomic Design

아토믹 디자인을 이해하면 일관서 있는 디자인 시스템을 구축하는데 도움이 된다.
아토믹 디자인은 UI를 물질의 가장 작은 단위인 원자(atom)처럼 최대한 쪼개고, 그것들을 조합하고 점진적으로 확장시켜 일관성 있는 디자인 시스템을 구축하는 것을 목표로 한다.

원자(Atoms)

원자(Atoms)는 디자인의 가장 기본적이고, 더이상 쪼갤 수 없는 구성 요소를 의미한다.
ex)인풋, 라벨, 아이콘, 버튼

분자(Molecules)

분자(Molecules)는 원자들이 모여 하나의 단위로 작동하는 UI의 집합을 말한다. 분자는 원자들이 결합하여 더 복잡한 구조를 이루는 중간 단계이다.

유기체(Organisms)

원자로 구성된 분자와 달리 유기체는 원자 및 분자 더 나아가 유기체로도 구성될 수 있는 조금 더 복잡한 UI구성 요소를 말한다.
ex) 헤더, 사이드바

대부분의 쇼핑몰 웹 사이트는 위처럼 제품 목록 페이지를 가지고 있다. 이 경우 제품의 범주를 설명하는 원자와 여러 개의 제품 분자를 나열해 제품 목록이라는 유기체를 만들어 반복해서 사용할 수 있는 패턴을 제공할 수 있다. 따라서 제품 목록이 필요한 모든 곳에서 이 유기체를 재사용할 수 있다.

템플릿(Templates)

템플릿(Templates)은 페이지 레벨의 레이아웃을 구성하는 요소이다. 원자와 분자 그리고 유기체를 이용해 페이지에 들어갈 요소들을 만들었다면, 템플릿은 이러한 요소들의 배치와 페이지의 전체적인 구조를 정의해, 일관된 사용자 경험을 제공한다.

페이지(Pages)

페이지는 복제한 템플릿에 실제 콘텐츠들을 채워 넣은 요소로 완성된 UI의 모습을 담고 있다. 그래서 아토믹 디자인에서 페이지(Pages)는 가장 구체적인 단계라고 볼 수 있다.

아토믹 디자인의 장점

모듈화와 재사용성
유지 보수의 편리함
확장성