디자인 시스템 프로토타입을 만들면서.

 

😎 디자인 시스템을 구상하기로 마음먹었다

 

 그동안 개발했던 서비스마다 디자인이 재각각이었다. 버튼 색은 모두 달랐고 내비게이션 바 디자인은 페이지마다 달랐다. 새로운 서비스를 만들거나 개선할 때마다 이전 디자인을 참고해서 새로 만들어야 했고 표준 없이 만들다 보니 걸리는 시간은 배로 늘어났다. 이토록 통일되지 않는 디자인 요소들을 개발 효율을 위해 디자인 시스템으로 묶을 필요가 생겼다.

 

 디자인 시스템이란 디자인 원칙, 컴포넌트, UI 패턴 등을 포함한 디자인 세트라고 보면 된다. 디자인 시스템의 장점으로는 각각의 서비스마다 디자인을 통일시켜주며 서비스의 정체성을 확고하게 할 수 있다. 동시에 디자인 코드의 반복을 줄여주고 빠른 프론트엔드 개발이 가능하게끔 한다. 즉, 디자인 시스템을 적용한다면 빠르고, 확장성 있고, 효율적인 개발을 가능하게 할 수 있다.

 

 지금까지 작성된 회고록을 보면 모두 효율성을 강조하고 있다. 도커 자동 배포는 두말할 필요도 없이 효율을 강조하고 NodeJS 템플릿 또한 마찬가지다. 다만 이때까지만 해도 디자인은 모두 엉망이었다. 늘 그렇듯이 부트스트랩 4 기반에 무거운 ShardUI를 얹어 사이트 로딩 속도를 지연시켰고 부분적으로 제이쿼리를 동반하여 모달 창을 띄워야만 했었다. 이처럼 디자인 시스템을 통해 앞으로 만들어질 서비스의 품질을 개선할 필요가 있었다.

 

 

⌨️ 기술 스택

 

 리엑트를 사용하지 않기로 했기에, 웹 컴포넌트를 사용했다. 기본 틀은 부트스트랩 5를 사용하고 순수 CSS를 버리고 SASS를 처음으로 사용하게 되었다. 또한 ES6 문법 JS에다가 HTML custom element 클래스를 번들로 묶기 위한 웹팩도 처음으로 적용해보았다. 그동안 적용해보기로 마음먹었던 기술을 디자인 시스템을 통해 실현하고자 하는 취지에서였다. 여기 사용된 기술은 어렵지 않게 적용할 수 있었다. 웹팩의 경우 공식 문서가 잘 되어 있고 웹 컴포넌트는 JS문법만 빠삭하면 충분히 구현할 수 있는 난이도였다. 

 

 사실상 기술 스택보다는 디자인 시스템 그 자체에 신경 썼다. Toss의 TDS, Line의 LINE Design System, Apple의 Human Interface Guidelines 등을 참고했다. 이중에서도 토스의 영향을 가장 많이 받았다. 특히 https://www.youtube.com/watch?v=LmLchZ4tCXc&ab_channel=FEConfKorea 이 영상이 도움이 되었다.

 

 

🛠 부트스트랩5 기반, 간소화

 

 디자인 시스템을 구성하게 된 가장 큰 이유는 효율성이다. 사용인원은 단 한 명. 어떤 협업도 논의도 필요하지 않다. 그렇기에 오직 개발에 있어서 시간을 단축하고 불필요한 작업을 줄이는 데에만 집중했다. 또한 확장성 있는 기능에 모바일까지 지원해야 하고 이 모든 기능을 갖추려면 시간이 너무나도 오래 걸릴게 뻔했다. 그래서 부트스트랩의 힘을 빌리기로 했다.

 

 부트스트랩을 써본 사람들은 공감하겠지만 쓸데없이 복잡하다. div를 남발하는 건 물론이고 디자인 친화적이지 않은 네이밍으로 구성되어 있다. 예를 들어 버튼 색을 지정하는데 btn btn-primary를 사용해야 하는 일처럼 말이다. 또한 tint와 fill을 구분하지 않아 색 표현에 있어서도 한계가 있었다.

 먼저 이같은 한계를 극복하기 위해서는 코드를 간소화해야 한다. 아래는 모두 모달을 구성하는 기능이다. 불필요한 구문을 없애고 깔끔하게 필요한 기능만 노출시키면서 효과적으로 개선했다.

              ( 부트스트랩5 모달 ).                                                                                  ( 데벤트 디자인 시스템 모달 )

 

 

 

📐 디자인

 

 디자인 시스템은 디자인이 핵심이다. 아무리 원칙이 훌륭하고 코드가 빈틈이 없어도 디자인이 이를 뒷받침해주지 못하면 빛을 발하지 못한다. 단순하게는 UI 구성부터, 더 나아가서 UX까지 고려해야 확장성 있는 시스템을 구축할 수 있다. 기껏 만들어놓았는데 쓰지 못하면 무슨 의미가 있을까. 디자인 시스템을 잘 활용하기 위해서는 시스템도 중요하지만, 디자인에도 집중해야 한다.

 

https://dds.devent.kr/

 

 직관적인 DX를 고려한다. 우선 부트스트랩의 기본 버튼 색 클래스인 'btn btn-primary'와 같은 문구를 직관적으로 바꿀 필요가 있었다. 이에 btn-blue라는 직관적으로 이해할 수 있는 단어를 선택함으로써 클래스 명만 보고도 어떤 버튼인지를 빠르게 알 수 있었다. 

 통일감을 부여한다. 전체적으로 border-radius는 10px을 기본 단위로 하고 버튼 padding 은 0.7rem 1.55rem을 기준으로 구성했다. 이를 통해 디자인의 아이덴티티를 강화할 수 있고, 다른 서비스에도 디자인 시스템을 적용한다면 브랜드의 일관성을 유지할 수 있다. 동시에 색상 부문은, 라이트 모드에서는 tint를 기본으로, 다크 모드에서는 fill을 기본으로 한다. 

 하나를 바꾸면 전체가 바뀐다. 사실상 디자인 시스템을 구성하게 된 가장 큰 목적이다. 디자인 시스템의 코드를 바꾸면 전체 서비스에도 동일하게 적용된다. 예를들어 내비게이션 바의 padding값이 어울리지 않다고 생각하면 디자인 시스템의 코드 한 줄만 바꾸면 전체 서비스에서도 한 번에 적용된다. 만약 디자인 시스템이 없다면 하나하나 다 바꿔주어야 할 텐데 말이다. 이는 서비스의 수가 많아지면 많아질수록 장점으로 다가오는 효과가 있다.

 

 

 

🚀 적용

 

 프로토타입 개발이 끝난 후에는 개발중인 서비스들에 적용했다. 블로그 서비스, devent-frame 기반의 오픈소스 프로젝트 등 이후로도 개인적으로 개발하는 프로젝트에는 디자인 시스템을 적용할 예정이다. 프론트엔드 개발에 있어 대략 4배의 시간을 줄여준 디자인 시스템이기에 나에게 있어서는 쓰지 않을 이유가 없다.

 

 디자인 시스템을 활용하면 개발 과정에서부터 배포 단계까지 최적화를 할 수 있다. 개발 단계에서는 기존대비 20%의 코드만 적어도 기능을 구현하는 데에 있어 문제 되지 않는다. 이는 프론트엔드 구성에 쏟을 시간을 절약하며, 기능이나 UX적인 측면을 우선적으로 고려할 수 있게 된다. 또한 한 번 배포한 이후에 자잘한 디자인을 바꾸지 않아도 되니 배포 후 최적화에도 용이하다. 

 

 혹시나 코드를 보고 싶으신 분들은 오픈소스로 공개되어 있으니 참고하시기를 바란다.

 

https://github.com/Team-DeVent/devent-designsystem

GitHub - Team-DeVent/devent-designsystem: ⚙️ each service has one design, devent design system.

 

 

 

📌 추가 링크

 

[TDS 노션] https://www.notion.so/toss-design-system-959822692bec4f879450e361c623cf2a

toss, design, system.

[APPLE Human Interface Guidelines] https://developer.apple.com/design/human-interface-guidelines/guidelines/overview

Human Interface Guidelines - Human Interface Guidelines - Design - Apple Developer