디자인 시스템 101 : 디자인 시스템이란?

🤔 모노레포 프로젝트 세팅을 하면서 고민해봐야 할 부분 중 하나인 디자인 시스템 구축하기!
본격적으로 도입하기 전에 "디자인 시스템이 뭔지, 왜 필요한 지, 도입이 필요한 지"에 대해 살펴보자.

디자인 시스템이란

At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. 

 

디자인 시스템이란 프로덕트과 경험이 주는 모습과 느낌이 일정하도록 도와주는 기준과 기본 유닛의 모음이다.

복잡한 디지털 프로덕트를 만드는 팀을 위해 통일된 언어와 구조화된 프레임워크를 제공하는 청사진 역할을 한다.

 

아이콘과 색깔은 유저에게 특정한 의미를 전달하기 위해 존재한다. 버튼도 특정 크기와 모양으로 구현되어야 한다.

디자인 시스템이 없다면 유저들은 같은 역할을 하는 버튼이나 아이콘인데도 다르게 생겼다면 한참 고민을 해야 할 수도 있다.

 

예를 들면, 사이트에 어떤 페이지에서는 왼쪽같은  로그아웃 아이콘이 보이고, 어떤 페이지에서는 오른쪽 같은 아이콘이 보인다고 해보자. 유저 입장에서는 이 페이지에서 이 아이콘은 뭔 뜻인지 고민할 수도 있다. 로그아웃은 왼쪽이라고 인식이 고정되면, 아예 로그아웃 아이콘이라고 인식을 못하고 페이지에서 찾느라고 애먹을 수도 있다 다시 안써.

같은 아이콘 모양인데도 색이 달라지면 무슨 뜻인지 전달이 안되면 고민이 될 것이다.

로그아웃 버튼은 오른쪽일까 왼쪽일까? 둘이라면 기준이 뭐지? 이 혼란을 정리하는 역할을 디자인 시스템이 한다.

 

뿐만 아니라 디자인 시스템은 엘리먼트와 패턴 등을 다시 만드는 시간을 줄이는데 도옴을 준다. 

---

디자인 시스템의 구성 요소

디자인 시스템은 다음과 같은 계층으로 이루어진다. (가장 높은 단계에서 낮은 단계 순서)

1. 디자인 시스템 (Design system)

모든 기준의 최우선 가이드라인 역할을 하는 최상위 컨테이너에 해당한다.

꾸준히 발전/변화하는 프로덕트 환경에서 리소스와 프로세스의 "근본적인" 가이드를 모아놓은 곳이다.

여기에는 기술적 스펙, 디자인 토큰, 문서, 그리고 best practice 등을 포함할 수 있다.

UX 디자인 결정과 프로덕트 개발의 가이드라인이 될 핵심 원리와 프로세스도 포함할 수 있다.

2. 컴포넌트와 패턴 라이브러리들 ( Component and pattern libraries)

프로덕트 내 공통 인터페이스와 동작이 어떻게 되어 있는지 나타내는 재사용 가능한 시각적 엘리먼트들과 상호작용 패턴에 해당한다. 상세한 문서와 함께 템플릿, 레이아웃, 상호작용 패턴, 코드 snippet, 그리고 컴포넌트 등을 포함할 수 있다.

💡Component vs. pattern libraries
둘 다 디자인 시스템의 핵심 요소인 공통점은 있지만, component library들은 UI 엘리먼트(버튼과 input 필드 등)에, pattern library들은 더 넓은 범위의 디자인 솔루션 (내비게이션 흐름, 데이터 디스플레이 등)에 초점을 맞춘다는 차이가 있다.

3. 기초를 이루는 엘리먼트(Foundational elements)

엘리먼트의 생김새와 전반적인 프로덕트의 voice와 톤을 잡아주는 "시각적 언어"에 해당한다.

색과 폰트의 디자인, 아이콘, 로고, 삽화 그리고 접근성/브랜드 가이드라인 등을 포함한다.

1. Design system, 2. Component and pattern libraries, 3. Foundational elements

 

💡 디자인 시스템과 UX: 눈을 즐겁게 하기 위한 것 그 이상의 것

디자인 시스템은 디자이너의 창의성을 제한하고 모든 디자인에 획일화를 강요한다는 흔한 오해가 있다.
오히려 디자인 시스템은 디자이너가 반복 가능한 패턴들을 재사용할 수 있어서 정말 필요한 곳에 에너지를 쓸 수 있도록 한다. 디자인 시스템으로 화면 크기에 맞춰 디자인을 하기 위해 똑같은 디자인을 복사+붙여놓기해야 하는 지루한 작업을 피할 수 있다면 디자이너들은 창의력을 더욱 발휘할 수 있다.

디자인 시스템 왜 써야 할까

지금까지 살펴본 바에 의하면 디자인 시스템은 프로덕트 전반에 걸쳐 통일성을 보장하고, 팀 간의 협업을 도와준다.

불필요하게 디자인을 해야하는 수고를 피할 수 있기 때문에 개발 과정 자체도 빨라질 수 있다.

디자이너들은 컴포넌트를 다시 만드는 데 시간을 있고, 컴포넌트를 코드, 토큰, 그리고 애니페이션 preset으로 디자인하기 때문에 개발자들은 손쉽고 빠르게 기능적이고 접근가능한 코드로 변환해 줄 수 있다.

뿐만 아니라 신입 디자이너들에게 디자인 시스템은 온보딩 툴로도 사용 가능하다.

프로덕트와 규칙에 대해 교육이 가능하고 더 빠르게 기여를 할 수 있도록 해준다.

Figma는 스타일, 변수, 컴포넌트의 표준화를 지원한다. 따라서 색상부터 padding이 프로덕트와 브랜드 전반에 일괄 적용된다.

---

디자인 시스템 꼭 써야 할까

여기까지 살펴봤다면, 디자인 시스템을 사용하지 않는 게 더 이상해보일 수 있다.

하지만 하나의 디자인 시스템이 모든 상황을 만족시킬 수 없고, 나아가 도입 자체가 필요한 지를 고민해 봐야 한다.

디자인 시스템 도입은 다음의 사항들을 고려해 볼 수 있다.

1. 불일치 찾아보기

프로덕트의 생김새와 느낌이 플랫폼에 따라 다른 지 정밀하게 살펴보자.

거슬리는 불일치, 브랜드 정체성을 흔드는 것, 프로덕트 사용 경험들 간이 매끄럽게 이어지지 않는 것 등은 디자인 시스템을 도입해봐야 할 사인들에 해당된다.

2. 다양한 테마와 플랫폼 고려해 보기

우리 프로덕트가 다크/라이트 모드나 다른 브랜드 사이에서 등 테마 사이를 끊김 없이 전환해야 하나? 

혹은 다양한 디바이스 플랫폼과 화면 크기에 맞아야 하나?

디자인 시스템은 이러한 복잡한 고민들을 깔끔하게 관리하는 해결의 단서가 될 수 있다.

3. 중복 작업 덜어내기

중복되는 디자인 작업이나 반복되는 이슈는 팀의 시간을 낭비한다.

디자인 시스템으로 표준화된 컨포넌트는 이런 과정들의 흐름을 개선할 수 있다.

4. 소통 강화하기

디자인에 대해 팀이 의사소통하는 방식을 살펴보자.

오해를 하거나 디자인 엘리먼트를 설명하는데 시간을 낭비하고 있지 않나? 

공유된 디자인 언어는 이런 문제들을 해결할 수 있다.

5. 온보딩 순탄화

새롭게 팀에 합류하는 멤버들의 온보딩 과정을 고려해 보자.

확실한 디자인 시스템은 온보딩 과정을 더 쉽고 효율적으로 하고, 온보딩을 빨리 마치면 그만큼 기여도 빨리 할 수 있다.

6. 효율적인 라이프 사이클 만들기

프로덕트의 라이프 사이클에 대해 생각해 보자. 디자인, 프로토타이핑, 업데이트 시간을 단축하는 방법이 있을까?

디자인 시스템을 도입하면 프로덕트 개발의 각 단계를 도와 시간 단축의 촉매 역할을 할 수도 있다.

팀과 함께 디자인 시스템 도입의 필요성과, 도입한다고 가정했을 때 그 범위에 대한 논의를 해보자.

 

---

이제까지 도입하면 좋아질 부분에 대해 살펴봤다. 그만큼 좋아지기 위해서 치러야 할 희생(?)도 있는데, 그 점들도 살펴보자.

7. 지속적인 관리 (maintenance) 필요

모든 프로젝트의 디자인 시스템은 초기 설정뿐만 아니라 꾸준히 관심을 갖고 노력을 해서 관리도 신경을 써야 한다.

좋은 프로덕트들은 계속 발전하듯이, 디자인 시스템 또한 한번 작업을 한다고 끝나는 것이 아니다.

디자인 시스템을 최신으로 업데이트되도록 장기적으로 관련된 리소스와 시간 투자가 필요하다.

8.  지연된 만족 (Delayed gratification)

디자인 시스템의 효과는 강력하지만 그 효과를 확 체감하기에는 시간이 좀 걸린다.

프로젝트와 직결된 목표 혹은 리소스가 다른 곳으로 가게 되어 집중이 분산되면 팀의 의욕을  이끌어가는데 어려움이 있을 수도 있다.

9. 리소스 할당 가능성

초기 개발을 넘어 디자인 시스템은 디자이너, 개발자 그리고 프로덕트 매니저들의 꾸준한 인풋이 있어야 효과적이다.

디자인 시스템이 정체되지 않기 위해 팀을 확장하거나 우선순위를 재고해야 하는 상황이 있을 수 있다.

10. 시스템 체득화

모두 디자인 시스템을 따르게 하는 과정 자체가 어려운 과정일 수 있다. 관련자들을 교육해야 하고 장기적인 가치를 갖고 도입을 설득해야 한다. 그리고 챌린지가 발생하면 어떻게 이야기를 하고 어떻게 처리해야 할 지에 대한 커뮤니티를 만들어야 할 수도 있다. 

---

🤔 마치면서

오늘은 figma에서 소개한 디자인 시스템이 무엇인지, 무엇으로 구성되었는지, 그리고 프로젝트에서 필요한 지 결정할 때 고려해야 할 사항들에 대해 알아봤다.
일단 1인 프로젝트라는 점에서 협업을 하지 않는데 굳이 필요하냐 싶겠지만, 오히려 디자이너가 아닌 개발자이기 때문에 더 필요하다고 생각한다. 
저번 미니 프로젝트 vinylify 프로젝트에서도 사소한 불일치들이 거슬리게 했던 부분들이 있었다.

아티스트를 설명하는 박스 컴포넌트와 가사를 감싸는 박스 컴포넌트의 패딩이 일정하지 않았다 (수정해야 함..https://github.com/f-lab-edu/vinlyify/commit/6400c25cd79b26d8a24805e9b5cd3cf58d031774: 7/12수정 완료)
처음부터 가사 컴포넌트를 만들고자 했던 것이 아니라 나중에 추가된 부분이라 이런 스타일 불일치가 발생했었다.

디자인 시스템이 있었더라면 이런 반복된 컴포넌트를 일일이 수정/변경해야 하지 않아도 됐을 것 같다.
디자이너가 없는데 가이드라인까지 내 마음대로 임의로 한다면 이런 거슬리는 것들이 여러 번 반복될 거 같기 때문에,
다음 시간에는 도입 방법과 참고해 볼 만한 유명한 디자인 시스템들을 살펴봐야겠다.

 

📚 References

https://www.figma.com/blog/design-systems-101-what-is-a-design-system/

What Is a Design System | Design Systems 101 | Figma Blog