디자인 시스템은 왜 필요하지?
디자인 시스템은 대부분의 웹/앱 서비스 디자인/개발 프로세스를 효율적으로 만들어주고 사용자 경험을 향상시키는 역할을 한다. 이러한 디자인 시스템은 분야에 관계없이 필수적인 요소로 자리 잡고 있다. 필자는 Web3 씬에서 프로덕트 디자이너와 PM 역할을 하면서 Web3 범용 디자인 시스템을 구축하게 된 동기와 설계 및 구축해온 과정을 공유하려고 한다. 또한 새로운 시대라고 여겨지는 Web3에 맞는 디자인 시스템은 무엇인지 정리해보고자 한다. 1장에서는 디자인 시스템을 구축하게 된 배경을 설명하려고 한다.
< 출처: freepik >
디자인 시스템을 왜 사용하는가?
몇가지 이유들이 있지만, "사용자와 작업자의 반복, 중복, 혼선 최소화하기"라고 필자는 생각한다.
사용자의 효용
- 일관성있는 UX 디자인을 통해, 새로운 기능을 만나거나 한동안 텀을 두고 서비스에 접속하더라도 사용법을 다시 학습할 일이 적어진다.
- 명확한 의도를 기반으로 체계화된 네이밍, 어투, 컬러 등의 UX 요소는 사용자가 액션을 하는데 있어서 확신을 가질 수 있도록 한다.
작업자의 효용
- 컬러, 폰트, 컴포넌트 등 기본 UI를 재사용하여 인터페이스를 반복적으로 제작하는 일을 피할 수 있다.
- 특정 의도를 위한 규칙을 정의하면, 필요한 한가지 요소에 중복되는 디자인 작업을 피할 수 있다.
- 개발자 및 디자이너, PM과 공유되는 규칙을 통해 디자인 의도를 오해하는 일을 막을 수 있고 커뮤니케이션 비용을 최소화 할 수 있다.
- 개발에 필요한 에셋(컬러, 컴포넌트, 폰트 등)을 라이브러리화하여 재사용 함으로써 프론트앤드 개발 리소스를 최소화 한다.
회사의 효용
- 자사 서비스만의 통일된 사용자 경험을 제공함으로써 브랜드 아이덴티티를 확보할 수 있다.
- 작업시간 단축, 개발/디자인 리소스 절감
- 개발/디자인 프로세스 구축을 통해, 새로운 인력이 쉽고 빠르게 실무에 투입될 수 있다.
디자인 시스템이 중요하게 된 배경
< 출처: kokoh pambudi >
나는 디자이너가 아니었다.
입사할 당시 나는 서비스 기획 직무를 담당했고, 회사에서 디자인 업무는 외주를 맡기고 있었다. 디자인 전공자였고, 이전에 창업할 당시 직접 제품 디자인을 했던 내 시각에서 디자인 외주 결과물들이 썩 맘에들지 않았었던거 같다. 사용자를 생각하며 애정을 가지고 기획하고 개발한 서비스에 성의없는? 디자인을 넣는다는게 죄책감이 들었던 나는 디자인을 직접하기로 마음 먹었다. 다른 구성원들은 내가 디자인을 할 수 있을거란 생각도 하지 않았고 하더라도 좋은 결과물이 나올거란 생각은 안했으리라 판단된다. 그래서 평일에는 기획업무를 하고 주말에 몇가지 그래픽과 UI디자인을 작업해서 보여줬고 그 이후 디자인 작업을 병행하게 되었다.
PM과 디자이너 정체성 사이에서 시작된 디자인 시스템
서비스에 처음으로 "디자인 시스템"이란걸 적용해본 시기는 2022년 2월, 4개의 프로젝트에 대한 디자인을 하고난 다음 이었다. 이전 프로젝트들에서 이해관계자의 요구사항 변경, FE 유지보수 문제, UX 문제 등으로 인해 디자인을 수정해야하는 일이 자주 발생했다. 그 당시에는 다른 디자인 시스템들을 참고하여 어설프게 스타일 가이드와 주로 쓰는 컴포넌트들만 정의해놓은 상태였다. 새로운 디자인이 생길때마다 관리 포인트들이 기하급수적으로 늘어났다. 동시에 디자인 일관성이 깨지고 있다는걸 느꼈다. 나 혼자 디자인하는데도 2명의 디자이너가 작업한거 같은 느낌을 받을때도 있었다. 이 과정에서 4가지 주요 pain point를 발견했다.
1. 불필요 반복 작업
컴포넌트 문제 < 출처: 작가 >
Button, Input, Select 등 여기저기 페이지에 흩어진 컴포넌트들 중 하나라도 수정이 생긴다면 모든 페이지를 돌아다니며 수정된 버전으로 바꿔줘야 했다. 그러다 놓치는 페이지가 생기면 개발자는 두개가 다른 디자인으로 인식하여 불필요한 디자인을 퍼블리싱하고 버려야하는 불상사가 생겼다.
뿐만 아니라 아이콘, 컬러, 폰트, 컴포넌트가 유기적으로 연결되어있지 않아서, 가장 원자적인 요소를 수정해도 그 요소가 포함된 다른 요소들을 일일히 수정해줘야하는 번거로움이 있었다.
2. 일관성 없는 UX
< 출처: 작가 >
위 이미지는 탈중앙화 결제 서비스의 입금/결제 화면 중 하나다. 물론, 다른 기능을 제공하는 화면이기는 하나, 유사한 액션을 유도하고 사용자의 실제 플로우 또한 큰 차이가 없는 화면이었다. 그러나 TItle, [Copy]버튼, 메인 버튼, 공유 버튼 등이 너무나도 다른 비쥬얼과 다른 사용자 액션을 유도했다. 사용자가 한가지 앱 서비스를 사용하면서 같은 액션을 2번 학습해야하는 치명적인 문제점이 생겼다. 물론, 사용자는 우리에게 직접적으로 말해주지 않고 그저그런 임팩트없는 서비스로 기억에서 사라지겠지만 말이다.
3. FE 관리 포인트가 많아짐
우리는 상대적으로 적은 인원으로 다수의 서비스를 개발하고 운영해야하는 입장이다. 디자인 에셋들이 파편화 될수록 개발자들은 방대한 코드를 뒤져가며 수정해야하는 일이 많아졌고, 그 과정속에서 수정사항을 놓치는 사례도 늘어났다. 또한, 반응형 UI를 개발에 있어서 모바일, 테블릿, PC 해상도에서의 UI 구성이 너무 다르다면 분기가 생겨서 유지보수할 때 관리포인트가 2배로 늘어나게 된다.
4. 신규 프로젝트마다 새로운 디자인 시스템 정의
< 출처 : 작가 >
대부분의 웹/앱 서비스에서 필수적인 UI 디자인 요소들을 프로젝트 떄마다 매번 새로 정의했다. 물론 이전 프로젝트에서 사용하던 디자인 시스템을 붙여넣고 수정하기도 하지만, 기본 원칙과 커스텀 원칙을 정하지 않은 상태여서 새로 정의하는거나 마찬가지였다.
Web3 분야에서 디자인 시스템은 어떤 역할을 할까?
블록체인 전문 기업에 다니면서 정말 다양한 종류의 서비스를 기획했던거 같다. 게임, 지갑, 거래소, 결제 등 하나하나 확고한 영역을 가지고 있는 서비스들이었다. 물론 회사에서 사업 확장을 하려고 하는 부분도 있겠지만 그렇게 된 원인 중 하나는 Web2 시장이 처음 열렸을 때 "디지털 트랜스포메이션"과 유사한 것 같다. Web3라는 새로운 구조체가 생기면서 기존에 중앙화 위에서 제공되던 서비스들이 빠르게 탈중앙화 시장으로 넘어오려는 시도들이 많다. 모든 분야와 시장이 Web3 빌더들에게 열려있기 때문에 모든게 실험해볼 제품 대상이다.
그래서 더욱이 디자인 시스템이 중요하다고 생각된다. 다른 환경에서 발생하는 문제를 해결하기 위해 빌더들은 모든 노력을 거기에 쏟아부어야 한다. 그러기 위해선 불필요한 작업들을 최소화하고 핵심 문제를 해결하는데 시간을 투여해야 한다. 디자인 시스템이 그 역할을 해줄것이라고 생각하고 새로운 틀이 생긴 만큼 거기에 맞는 가이드라인이 필요하다.
범용 디자인 시스템 구축하기
이러한 문제를 해결하기 위해 가장 친한 동료이자 FE 개발팀장인 Lukas, 디자이너 그리고 대표님과 꾸준히 논의하고 조언을 받았다. 결론은 모든 서비스 개발 시, 디자인/개발에 사용할 수 있는 범용 디자인 시스템과 그에 기반한 FE 라이브러리를 구축하는 것이었다.
범용 디자인 시스템 스펙문서 URL : https://docs.google.com/document/d/1huGJYk-l775dvIsFCZ5CzBcpHllNVssTTBzo5varugk/edit
범용 디자인 시스템 구축_스펙 문서
범용 디자인 시스템 구축 Authored by Robin Yoon. Last updated on Dec 20, 2022. 이 프로젝트의 목적은 모든 서비스 제작 시, 디자인 및 개발에 활용될 수 있는 범용 디자인 시스템 및 라이브러리를 구축하는
docs.google.com
디자인 시스템의 우선순위 정하기
디자인 시스템의 명령체계를 단번에 통일하고 확정짓기에는 범위가 방대하고 확실한 근거를 모두 찾는것은 현재 진행하고있는 프로젝트 공수에 영향을 미칠 수 있었다. 그래서 현재 서비스를 구축해온 데이터를 기반으로 필요최소만 우선 정의하기로 했다. 내가 결정한 최소조건 기반의 작업은 아래와 같았다.
1. 컬러, 폰트 토큰화
유저 인터페이스의 최소 조건은 '컬러'와 '텍스트'라고 필자는 생각한다. 컬러를 통해 상태, 예상 기능을 파악할 수 있고, 텍스트를 통해서 필요 데이터를 습득할 수 있다. 어려운 UX일 순 있으나, 작동이 불가능한 것은 없다.
그런 최소조건에서 파생된 것들이 우리가 알고있는 컴포넌트와 UI 패턴들이다. 모든 UI의 최소이자 최상단 조건인 컬러/폰트의 설정 조건을 정의하고 파생되는 요소들과 유기적으로 작동할 수 있는 프렉탈 구조를 만들어야했다.
2. 해상도별 레이아웃 정의
디자인하면서도 가장 귀찮고 번거로운게 레이아웃이었다. 그런데 조금만 틀어지거나 여러가지 레이아웃이 존재하게 되면 서비스 전체 퀄리티와 통일성이 깨지는 결과가 발생했고, 완성단계에서 레이아웃을 수정하려니 고려해야할게 레이아웃뿐만이 아니었다. 특히나 반응형 디자인에서 분기를 어떻게 나누는지 개발자들이 일찍 알수록 도움이 된다는걸 알았다. 또한, 공통 padding, margine 규칙은 수시로 까먹기 때문에 초기에 명확한 규칙이 있으면 세세한 실수를 최소화할 수 있었다.
3. 아이콘 정리
기존에도 어느정도 되있었지만 범용으로 사용될만한 기틀은 없는 상태여서 작업항목에 넣었다.
4. Button, List, Input, Select, Tab, Control 컴포넌트 정의
각 컴포넌트의 종류와 실제 사용할때 정해지는 공통 규칙을 마스터 컴포넌트로 만들어서 사용하게 만들어야 디자이너들이 주머니에서 동전꺼내듯 쉽게 사용할 수 있을겄이라고 생각했다.
이번 장에서는 디자인 시스템 구축을 하게된 계기와 시작점에서 세웠던 러프한 계획을 소개했다. 다음 2장에서는 컬러, 폰트 토큰화와 레이아웃 정의한 사례를 소개하려고 한다.
지금도 디자인 시스템을 구축하면서 드는 생각..
지금은 다른 프로젝트가 바빠서 디자인 시스템을 디벨롭하는걸 멈춘지는 꽤 시간이 흘렀다. 확실히 UI 디자인하는데 시간이 놀라울 정도로 줄었다. 그로인해서 PM 업무와 UX 설계하는 부분에 신경을 많이 쓸 수 있어서 좋다. 신입 디자이너들도 빠르게 실무에 적응할 수 있는데 도움이 되는거 같다. FE 개발자도 지금은 중복이라고 생각되는 방대한 퍼블리싱 작업들이 30~40% 이상 줄은거 같다고 경험을 이야기해서 뿌듯하다.
