스포트라이트가 디자인 리소스를 아낄 수 있었던 방법

스포트라이트 테크 시리즈로 예전 글에서 어떻게 하면 엔지니어가 디자인영역에 대한 의사결정 및 리소스 활용에 도움을 줄 수 있을지 이야기 해보겠다고 했는데 드디어 관련해서 조금 적어봅니다.

결론부터 말하자면 핵심은 디자인 시스템입니다.

사실 요즘은 디자인 시스템을 적용하지 않는 회사가 거의 없을 정도로 여러가지 형태로 적용되어 활용되고 있습니다.

그래도 여전히 제 주변에는 디자인 시스템을 잘모르는 엔지니어 분들이 많습니다. 특히 프론트엔드에 집중하고 있는 엔지니어라면 디자인 시스템을 이해하는 것은 가히 필수라고 말씀드리고 싶습니다.

그럼 디자인 시스템은 무엇일까요?

디자인 시스템은 간단하게 설명하자면 디자인에 필요한 요소들에 대해서 디자인 토큰이라는 기본적인 요소별 특성 및 값들을 정의를 해서 모아놓은 것입니다. 물론 이러한 다자인 토큰을 정의하는 것의 이면에는 시스템별로 각각의 디자인 철학이 뒷받침 되게 됩니다.

디자인 시스템의 육하원칙 by Data Driven Design

흔히 구글의 Material design, 어도비의 Spectrum design, IBM의 Carbon design 등 유명한 디자인 시스템들의 이름을 들어보셨을 수도 있겠습니다.

혹은 엔지니어라면 리엑트 생태계의 MUI 라이브러리가 매우 익숙하실겁니다. MUI는 즉 Material UI로 Material 디자인 시스템의 디자인 정의를 기반으로 일부를 차용해 리액트 컴포넌트 라이브러리로 만든것입니다. (MUI의 실제 적용은 Material Design의 기본 디자인 토큰 정의와는 다소 다른 부분들이 좀 있습니다)

디자인 시스템을 이해하게 되면 흔히 프론트엔드에서 하게 되면 Theming에 대해서도 좀 더 잘 이해할 수 있게 됩니다. 그리고 무엇보다도 대부분의 디자인 시스템은 리스폰시브의 개념을 포함하고 있습니다. 따라서 개발자가 일일이 픽셀단위로 객체를 옮기고 하지 않아도 됩니다. 게다가 디자인 토큰의 개념이 확장하게 되면 Component Driven까지 생각할 수 있게 되고 일일이 객체를 커스터마이징 하지 않고 개발자는 규정된 틀에 맞게 요소들을 배치하고 UI의 기능적인 부분 구현에만 좀 더 치중할 수 있게 됩니다.

현재는 스포트라이트 또한 진행형이긴 합니다만 향후에는 스포트라이트의 브랜딩과도 연결해서 디자인 시스템을 운영하는 것을 목표로 하고 있습니다.

풀스택이거나 프론트엔드 엔지니어신가요? 디자인 시스템을 인지하고 계신가요? 아니라면 지금 바로 디자인 시스템을 좀 더 탐구해보시거나 팀내 디자이너와 디자인 시스템에 대해서 이야기 나누어 보세요. 이미 적용된 Theme 구조를 한층 더 디자인 맥락에 맞게 운영하실 수 있으실 겁니다. 그리고 무엇 보다도 디자이너와 엔지니어간 커뮤니케이션 비용의 줄어드는 것을 확인 하실 수 있으실 겁니다.