디자인 시스템은 여러 서비스 디자인에 적용된 디자인 스타일 규칙, 가이드라인을 뜻해요. 디자인 내 공통적으로 사용되는 컬러, 폰트, 레이아웃, UI 컴포넌트에 대한 정의라고 볼 수 있습니다. 디자인 시스템이 필요한 이유는 여러 가지가 있지만 디자인 작업을 효율적 진행하게 도우며, 일관성을 유지할 수 있는 기준이 된다는 점이라고 생각해요. 기획을 하는 제 입장에서는 동일 상황, 다른 문구나 아이콘 등이 적용되는 것을 사전에 방지할 수 있는 기준으로 활용하는데 많은 도움이 되기도 합니다.

국내에서도 디자인 시스템이 더 이상 낯선 개념이 아닌데요. 아직 구축하지 않은 상황에서는 어디서부터 시작하고, 범위를 어떻게 산정해야 할지 고민이 필요합니다. 오늘은 디자인 시스템에 대한 기본 개념부터 구축 시 사용하기 좋은 툴까지 다양한 정보를 정리해놓은 서비스를 소개하고자 합니다.

(1) 디자인 시스템에 대한 거의 모든 것이 담겨 있는 곳

‘Hey Design Systems’는 디자인 시스템에 필요한 여러 단계 별 ‘큐레이션’을 기본으로 하는 서비스입니다. 구축 전 꼭 확인해야 할 콘텐츠를 시작으로 어떻게 만들면 좋을지, 만드는 과정에서 필요한 리소스는 무엇인지 등 과정에 따라 읽어보면 좋은 내용들이 잘 정리되어 있습니다.

웹사이트로 진입하면, 총 12개 카드를 볼 수 있으며 원하는 내용을 선택하면 리스트 형태로 정리된 아티클을 하나씩 확인할 수 있도록 구성되어 있어요. 카드 배치를 보면 디자인 시스템을 만들어야지!라는 초기단계부터 구체화 과정까지 차례대로 정리된 것을 알 수 있습니다.

(2) 유용한 글이 한가득

‘Get started, Reading list’ 등 초반에 확인하면 좋을 내용을 먼저 확인해봤어요. 앞서 살펴본 것처럼 이들의 목적은 자체 콘텐츠를 제작하거나, 영상 등으로 강의를 해주는 것이 아니라 이미 디자인 시스템을 만들었거나 만드는 과정에서 작성된 여러 아티클을 주제에 따라 잘 정리하는 것인데요. 그래서 상세화면에서도 주제별 글의 타이틀을 리스트 형태로 하나씩 만나볼 수 있습니다.

저는 디자인 시스템 전체를 구축한 경험은 없지만, 문구 가이드를 디자인 시스템의 일부로 작업한 적 있는데요. 그래서 디자인 시스템을 디자인하는 방법에 대한 글이 가장 흥미롭게 다가왔습니다. 단계 또는 현재 상황에 맞는 디자인 시스템 관련 글을 찾아보려면 꽤 많은 노력을 들여야 하기에 이렇게 잘 정리된 글을 한곳에서 골라볼 수 있다는 건 큰 매력으로 다가왔어요.

피그마, 디자인 시스템 체크리스트 등 디자인 시스템을 만드는 과정에서 실제 활용할 수 있는 툴이나 웹 서비스 리스트도 함께 제공되고 있습니다. 평소 알지 못했던 서비스도 포함되어 있어 하나씩 살펴보기 좋아요.

(3) 정리

  • 디자인 시스템 구축에 필요한 단계 별 내용을 확인할 수 있음
  • 글의 개수에 초점을 맞춘 것이 아니라, 글의 수준의 초점을 맞춰 하나씩 읽어보기 좋음
  • 디자인 시스템 구축 과정에 쓸 수 있는 다양한 ‘툴’을 살펴볼 수 있음
  • 더 자세한 내용은 이곳을 확인해주세요!

(4) 함께 활용하면 좋은 서비스 및 자료