디자인 시스템

5분

12/25/2021

Thumbnail

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.

디자인 시스템은 다양한 페이지, 채널들에서

  • 중복성을 줄이면서
  • 공유된(약속된) 언어와
  • 시각적 일관성을 만들어
  • 대규모로 디자인을 관리하기 위한

표준입니다. - Design System 101_nngroup

사용자에게 일관적이고 아름다운 경험을 제공하고 싶은 마음은 대부분의 개발자라면 가지고 있을 것입니다.

직관적이고 합리적인 개발 경험을 가지고 싶은 마음은 대부분의 개발자라면 가지고 있을 것입니다.

이러한 관점에서 얼마 전부터 디자인, UI, UX와 관련한 반복적이고 불필요한 커뮤니케이션에서 탈피하고자 많은 고민과 생각이 들었습니다.

그러던 중 유수의 기업들의 개발 컨퍼런스를 보면서 디자인 시스템이 있다는 것을 알게 되었고, 그 디자인 시스템이 무엇인지에 대해서 살펴보기 시작했습니다.

이 글은 그 살펴본 내용에 대해 찾아본 것과 제 짧은 생각에 대한 글입니다.

들어가면서

규모가 있는 애플리케이션, 시스템, 프로그램 등은 다양한 사람과 팀 또는 회사를 이루어 만들게되는 경우가 많습니다.

또한 웹의 빠른 발전에 따라 UI 화면을 생성해야 하는 필요 속도도 높아져왔습니다.

현재 수백만 개의 애플리케이션과 수십억 개의 웹 사이트가 있을 뿐만 아니라 거기에 포함되어 있는 수백 또는 수 천개의 페이지가 있습니다.

이런 급격한 확장으로 인해 조직에서는 디자인 작업을 간소화해야할 필요성이 높아졌습니다.

따라서 많은 곳에서 강력한 디자인 시스템을 활용하여 대규모 디자인 관리하려고 했습니다.

Design System

1,500개가 넘는 프로젝트가 있었고, 400여 명의 디자이너가 참여하고 있었습니다. 400여 명의 디자이너가 다수의 프로젝트를 동시다발적으로 진행할 때 어떤 문제점을 겪게 될까요? 또한 디자이너뿐 아니라 제작에 가장 직접적으로 연결되어 있는 개발자에게는 어떤 이슈가 발생하게 될까요? - 개발자와 디자이너의 협업을 위한 LINE 디자인 시스템, LDS 소개

동시다발적으로 가이드라인이나 디자인 시스템없이 진행하게 된다면 어떤 이슈가 발생할까요?

디자이너, 개발자 두 그룹의 어려움은 어떤게 있을까요?

디자이너

반복적으로 커뮤니케이션을 하고, 또 다시 반복적으로 디자인 작업을 진행하게 됩니다.

  • 어떤 버전이 최신인지 알기 쉽지 않다. (ex, 최종_진짜진짜최종_2021-12-27_마지막_진짜마지막.ppt)
  • 어떤 컬러를 써야하는지 알기 쉽지 않다.
  • 반복적인 커뮤니케이션에 지쳐 그냥 커스텀하게 추가로 만들어버린다.(ex, 버튼_요청123번째.png)
  • 등등

개발자

디자이너, 기획자, 개발자와 반복적으로 소모적인 커뮤니케이션을 진행하게 됩니다. 같은 기능의 UI를 서로 다르게 디자인하면서 개발 리소스가 낭비되고 디자인 작업이 반복되면서 커뮤니케이션 비용이 증가하고, 상황에 따라 다른 UX를 고민하게 됩니다.

결국 시간이 지남에 따라 제품, 서비스의 불일치를 만들게 됩니다.

또한 다양한 플랫폼(웹, 모바일 앱, 태블릿 등)에서 제품을 개발하게 되면 더더욱 심화됩니다.

디자인 시스템은 이러한 카오스질서를 가져옴으로써 이 문제를 해결하는 것을 목표로 합니다.

History

design-system-history

디자인 시스템의 역사를 간단하게 보면, 1977년 크리스토퍼 알렉산더가 쓴 <A Pattern Language> 에 영향을 받아 2000년대 초반 UI 패턴 라이브러리가 만들어지기 시작했습니다.

그 후 2016년 브래드 프로스트가 <Atomic Design> 책을 출간하면서, 컴포넌트 단위의 사고방식은 Figma, Sketch 디자인 툴에 힘을 받아 체계적인 시스템으로 정리되었습니다.

이러한 컴포넌트 기반의 디자인은 기존 페이지 기반보다 빠르게 다양한 스크린을 디자인하도록 돕고, 업데이트와 유지 보수를 손쉽게 해주었습니다.

불필요한 반복적이고 소모적인 커뮤니케이션을 줄여 생산성을 높이고 일관성있는 제품을 생산하게 도와주었습니다.

왜 디자인 시스템을 사용하는가?

디자인 시스템을 구축하는 데에는 분명 많은 시간이 필요합니다. 그러나 제품의 규모가 커질수록 관리의 비용은 점점 늘어납니다. 시스템으로 인한 비용이 그렇지 않을 때의 비용을 넘어서는 순간은 오고, 토스는 그 순간을 이미 넘었습니다. *-4,000시간을 절약해준 디자인 시스템*토스_

  • 디자인(그리고 개발)은 빠르게 만들고 복제되어 확장될 수 있습니다.
    • 디자인 시스템의 가장 큰 장점은 미리 만들어진 UI 컴포넌트와 엘리먼트를 조합하여 빠르게 디자인을 복제할 수 있다는 점입니다. 바퀴를 재발명할 필요없이 가져다 쓰기만 하면 됩니다.
  • 더 크고 복잡한 문제에 집중하기 위해 디자인 리소스의 부담을 덜어줍니다.
    • 재사용한 컴포넌트가 이미 있기 때문에 더 복잡한 문제(ex, 정보의 우선순위, 워크플로우 최적화, 여정 관리 등)에 집중할 수 있습니다.
  • 다분야 팀(cross-functional team) 내에서 그리고 팀 간에 통합된 언어를 만듭니다.
    • 특히 디자인 팀이 바뀌거나 분산된 경우 통합 언어는 잘못된 의사 소통으로 인한 디자인 낭비, 개발 시간을 줄여줍니다.
  • 제품, 채널, 부서 전반에 걸쳐 시각적 일관성을 만듭니다.
    • 특히 각 제품이나 채널이 다른 제품과 독립적으로 운영되는 사일로에서 작업한느 경우 디자인 시스템이 없으면 일관되지 않은 시각적 모양과 브랜드와 관련이 없는 것처럼 보이는 경험이 발생할 수 있습니다.
  • 주니어 레벨 디자이너와 콘텐츠 작성자(contributor)를 위한 교육 도구 및 참고 자료로 사용할 수 있습니다.
    • 명시적으로 작성된 사용 방법 및 스타일 가이드는 UI 디자인 또는 콘텐츠 생성이 처음인 개발 컨트리뷰터를 온보딩하는데 도움이 되며 알리미 역할도 합니다.

왜 디자인 시스템을 사용하지 않는가?

디자인 시스템에 대해서 많은 논의가 있긴 하지만 실무로 제대로 풀어가기란 쉽지 않습니다. UI 키트를 구성하는 것을 디자인 시스템을 구성한다고 말하는 것은 표면적인 접근이며 단순한 디자인 리소스를 정리하는 수준을 벗어나지 못합니다. - 디자인 시스템, 제대로 알고 제대로 만들어야 한다

디자인 시스템을 사용할 때 방해가 되는 몇 가지 잠재적인 장애물과 제한 사항이 있습니다.

  1. 디자인 시스템을 만들고 유지보수하는 것은 전담 팀이 필요한 시간 집약적인 활동입니다.
    • 디자인 시스템은 한 번에 끝나는 솔루션이 아닙니다. 사용자로부터 피드백을 수집함에 따라 지속적으로 발전합니다.
  2. 다른 사람들에게 디자인 시스템을 사용하는 방법을 가르치는 데는 시간이 걸립니다.
    • 모든 디자인 시스템은 기존 시스템에서 수정된 경우에도 사용 지침이 필요합니다. 그렇지 않으면 일관되지 않거나 잘 못 적용될 수 있는 위험이 있습니다.
  3. 프로젝트는 재사용 가능한 구성 요소가 필요하지 않은 정적인 일회성 디자인이라는 인식이 있을 수 있습니다.
    • 사실이든 아니든 이러한 인식은 통합된 전략이 부족하고 효율성을 높일 기회를 놓쳤다는 신호일 수 있습니다.

디자인 시스템을 도입한다는 것은 좋지만 그것을 위한 비용과 시간, 노력에 대해서도 간과하면 안됩니다. 단기적인 시각이 아닌 장기적으로 넓게 바라볼 수 있게 다가가야 합니다.

디자인 시스템의 역할

디자인 시스템의 기본적인 목적은 팀의 작업을 용이하게 하는 것입니다. 이는 많은 기업들이 디자인 시스템에 집중하고 있는 이유입니다. - 디자인 시스템, 제대로 알고 제대로 만들어야 한다

디자인 시스템의 유형적인 요소와 무형적인 요소는 실제 팀에게 어떤 효율성을 제공할까요?

유형적인 요소는 프로젝트의 일관성을 유지시켜주는 역할을 합니다. UI 툴킷을 통해 통일된 디자인이 가능하도록 합니다.

무형적인 요소는 팀이 의사결정이 필요할 때 의사결정에 대한 정확한 지침을 제시해 줍니다. 이를 통해 팀은 복잡한 커뮤니케이션 없이 프로젝트를 진행할 수 있습니다.

규모가 커질수록 여러 팀에서 디자인, 개발에 많은 변화가 일어납니다. 기준없이 변화가 일어나면 프로젝트는 정체성을 잃게 됩니다.

하지만 디자인 시스템을 활용한다면 방향을 잃지 않고 프로젝트를 진행할 수 있게 됩니다.

또한, 시간을 절약해 줍니다. 정해진 가이드라인에 따라 구축을 하면 되고 변경사항이 있을 때는 디자인 시스템을 수정하여 지속적인 유지 관리가 가능합니다. 이러한 확장성을 통해 개발자는 기능 로직에 더 집중할 수 있고 디자이너는 색상, 레이아웃이 아닌 디자인의 실제 개념과 사용자 경험에 집중할 수 있습니다.

디자인 시스템 구성요소

그래서 어떻게 디자인 시스템을 만들어야 할까?

디자인 시스템에는 두 가지 중요한 부분이 있다고 합니다.

  • 디자인 저장소(레파지토리)
  • 그것을 관리하는 사람들

이해와 시작을 쉽게 해주기 위한 기본적인 안내서라고 생각하면 될 것 같습니다. 결국엔 자신들이 가장 사용하기 좋은 형태로 진화할 것이기 때문입니다.

디자인 시스템 레파지토리

형태는 정해진 것이 없습니다. 다양한 형태를 취할 수 있지만 보통 스타일 가이드, 컴포넌트 라이브러리, 패턴 라이브러리를 포함하는 경우가 많습니다.

  • 스타일 가이드(UI 가이드)
    • 인터페이스, 기타 디자인 결과물을 만들기 위한 특정 지침, 시각적 참조, 디자인 원칙 등이 포함되어 있습니다.
    • 가장 일반적인 스타일 가이드는 브랜딩(색상, 타이포그래피, 상표, 로고 등)에 초점을 맞추는 경향이 있지만 스타일 가이드는 콘텐츠(목소리, 언어 등)와 시각적, 인터렉티브 디자인에 대한 지침도 제공합니다.(프론트엔드 스타일 가이드라고도 합니다)
  • 컴포넌트 라이브러리
  • 패턴 라이브러리
    • 컴포넌트 라이브러리와 동의어로 사용되기도 합니다. 그러나 차이가 있습니다.
    • 컴포넌트 라이브러리는 개별 UI 요소를 지정하는 반면 패턴 라이브러리는 UI 요소 그룹화 또는 레이아웃 컬렉션을 제공합니다.
    • 일반적으로 콘텐츠 구조, 레이아웃, 템플릿이 특징입니다.
    • 컴포넌트 라이브러리와 마찬가지로 재사용 가능한 요소가 기본입니다.

디자인 시스템 팀(그것을 관리하는 사람들)

디자인 시스템은 얼만큼 관리해주냐에 따라서 그것이 효과적으로 사용될지 아닐지를 결정하게 됩니다.

신규로 만들거나 수정해야 하거나와 상관없이 디자인 시스템은 오래되거나 쓸모없거나 중복된 항목으로 인해 사용하기 어렵지 않도록 지속적인 유지 관리와 감독이 필요합니다.

팀에는 최소한 1명의 인터렉션 디자이너, 1명의 비쥬얼 디자이너, 1명의 개발자가 포함되어야 합니다.

인터렉션 디자인 가이드라인을 만들고, 시각적 예제를 만들고, 각 요소에 대한 코드 스니펫과 구현 사양을 제공해야 합니다. 이상적으로는 더 많은 직군이 필요합니다.(UX Resercher, Architect, Content Writer...etc)

마지막으로 디자인 시스템을 만들기 위해 경영진 후원을 확보하는 것을 고려하십시오. 많은 시간과 지원이 없다면 디자인 시스템은 회사 내에서 장애물로 인식될 수 있습니다.

많은 자원을 확보하는 동시에 나머지 조직에 디자인 시스템의 전략적 중요성을 전달해야 합니다.

디자인 시스템

디자인 시스템은 디자인, 개발에 들어가는 시간, 노력을 최적화하는 데 도움이 될 수 있는 많은 컴포넌트, 패턴, 스타일, 지침으로 구성됩니다.

디자인 시스템을 만들 때 고려해야 할 주요 요소는 프로젝트의 규모와 재사용 여부, 사용 가능한 리소스, 시간 입니다.

제대로 관리되지 않으면 디자인 시스템이 더 다루기 힘든 장애물이 될 수 있습니다.

그러나 잘 체계적으로 구현이 되어있다면 팀 구성원을 교육하고 작업을 간소화하며 더 복잡한 UX문제에 집중하여 진짜 문제를 해결할 수 있는 시스템으로 갈 수 있습니다.

마무리하며

만약 디자인 시스템을 만들기로 결정했다면 모두가 잘 사용하는 시스템을 만들면 좋겠다는 생각을 하게 됩니다.

그 만큼 어려운 작업이고 시간과 비용이 들어가는 작업입니다.

그렇다면 이 디자인 시스템을 만들기 위해서는 어떠한 툴들이 있을까요? 어떠한 방법으로 만들어야 할까요? 이러한 시스템을 도입하기 위해 어떠한 툴이 있고, 어떠한 방법이 있을까요? 개발자, 디자이너와 어떻게 협업하면 더 나은 시스템을 만들기 위한 발판이 마련될까요?

다음 포스트에서는 Figma, Framer, Storybook 등과 같은 툴들에 대해서 더 공부해보겠습니다.

reference

마지막 업데이트

12/25/2021


Avatar

JHSeo

배우는 것을 좋아하고 관심이 많은 웹 엔지니어 입니다. 느리더라도 꾸준하게 성장하려고 노력하는 개발자입니다.