디자인 시스템의 정의와 필요성
오늘은 디자인 시스템이란 무엇이고 왜 필요한 것인지 간략히 써보려고 한다.
1. 디자인 시스템이 뭔가요?
디자인 시스템은 웹/모바일 인터페이스 디자인 시 반복되어 활용되는 컴포넌트나 리소스 등을 모아 만든 일종의 가이드라인이다. 구체적으로는 컬러, 텍스트 스타일, 레이아웃, UI 구성요소 등을 정의한다.
예로써, 레고 빌딩을 만드려고 하는데 반복되여 사용되는 부품들을 정의한 레고 조각들의 세트 따위와 비슷한 개념인데 아래에서 자세히 알아보도록 하겠다.
2. 아토믹 디자인 (Atomic Design)
디자인 시스템을 이해하기 위해 아토믹 디자인의 이야기를 해보려 한다.
우선 아토믹 디자인은 미국의 디자이너 겸 작가겸 (등등)인 Brad Frost가 제시한 하나의 디자인 시스템 방법론이다. 빠른 이해를 위해 그의 저서 Atomic Design의 가장 기본적인 개념을 요약하여 적어보자면, 저자는 화학의 원소 개념에서 UI디자인과 비슷한 점을 찾아냈다. 세상의 모든 물질을 하나의 원소 단위로 쪼갤 수 있듯이, 인터페이스 디자인도 토대가 되는 기초 블록 같은 것들로 나눌 수 있다는 것.
Brad Frost의 Atomic Design 홈페이지에서 발췌다시 말하면, 아토믹 디자인은 그가 제시하는 하나의 디자인 시스템의 방법론이며, 작은 원소(Atoms)부터 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 이뤄진다.
즉, 작은 원소에서 출발하여, 원소를 덧붙여 분자, 분자를 더해 유기체, 유기체가 모아져 템플릿, 그리고 최종적으로 페이지를 디자인하는 방식이다. 자세한 모든 내용은 아래 그의 페이지에서 소개하고 있으니 관심 있는 분들은 읽어보면 좋겠다.
3. 디자인 시스템의 필요성
UI 디자인에서 디자인 시스템의 필요성과 중요성이 이야기 되어 온 지는 꽤나 오래 되었는데, 그 이유는 무엇일까?
(1) 다수가 함께 디자인하더라도 디자인의 일관성을 부여
(2) 반복되는 디자인 요소들을 정리함으로써 작업의 효율화
(3) 개발자와 디자이너 간의 커뮤니케이션 효율화 (디자인 시스템의 코드화 등을 통한)
등이 있겠다. 앞서 말했듯, 디자인 시스템에서 부품을 뜯어 최종적인 페이지를 만드는 것이니 이미 정해진 컴포넌트와 스타일 등의 사용으로 인해 더욱 빠르고, 일관적이고, 서로 간의 이해도가 높은 디자인을 만들기 편한 시스템.
4. 디자인 시스템의 예시
아마 이렇게만 읽어서는 어떤게 디자인 시스템인지 아직 감이 오지 않을 수 있으니 아래의 유명 디자인 시스템 사례들을 살펴 보는 것도 도움이 된다.
단, 아래 디자인 시스템은 정답이 아니다. 각 회사 마다 자신의 프로덕트와 비즈니스 특징에 따라 디자인하고 그것을 규칙화 한 문서이다. 좋은 레퍼런스로 보되 구글도 이렇게 했으니까 나의 프로덕트에도, 라는 일방적인 적용은 알맞지 않을 수도 있다.
대신 디자인 시스템을 보는 방법이 있다면, 상황에 따라 어떤 버튼과 어떤 텍스트 스타일, 폰트 사이즈 등을 적용하는지 여러 사례를 보며 최적의 인터페이스와 디자인 시스템 구성을 위한 참고자료로 활용하면 좋지 않을까 생각한다.
가장 기본적인 디자인 시스템은 아마도 구글의 머터리얼 디자인 시스템과 애플의 디자인 시스템.
어도비 스펙트럼 디자인 시스템, 구체적이고 정석적인 느낌
국내에는 지마켓 디자인 시스템
5. 디자인 시스템의 예시 - 구체적
처음 디자인 시스템 개념을 알았을 땐, 도대체가 디자인 시스템이 뭔지 감이 오지 않았다. 앞의 정의를 다시 데려오자면, 구체적으로 디자인 시스템은 자주 쓰이는 타이포, 컬러, UI컴포넌트를 정의한 일종의 가이드라인, 라이브러리이므로 아래와 같은 형식으로 작성된다.
한글로 작성된 국내 지마켓 사례를 예로 들자면 (이하 스크린은 지마켓 디자인 시스템에서 발췌), 우리의 프로덕트에서는 어떤 컬러를 Sematic Color로 쓸 것인지, CTA는 어떤 컬러를 쓸 것인지 등을 정의한다.
타이포 그라피와 스페이싱에 대한 정의
실제로 자주 쓰이는 것들을 컴포넌트로 만들고 정의한 항목들
대표적으로 버튼, 메뉴, 인풋박스 등
또한, 디자인 시 사용되는 버튼 사이즈, 형태 등에 대해 정의한다.
