시작합니다. 디자인 시스템

안녕하세요. 노머스 UX디자이너 유희선입니다.

테크 블로그에 디자이너로는 제가 처음 등장하는 것 같네요. 이번 글을 시작으로 UX팀은 어떤 고민을 하고 어떻게 일하는지 하나씩 나눠보려 합니다. 첫번째 이야기로, fromm의 디자인 시스템(FDS) 도입 과정을 공유하겠습니다.

디자인 시스템 왜 시작했어요?

fromm은 메시지뿐만 아니라 스토어, 채널 등 다양한 서비스를 제공하고 있어요. 서비스가 빠르게 확장되면서, 많은 기능들이 추가되기 시작했고 각 화면마다 조금씩 다른 컴포넌트들이 생기기 시작했어요. 이런 작은 차이들이 UX팀과 개발팀 양쪽 모두에게 부채로 쌓였고, 결과적으로 사용자에게 일관된 경험을 제공하는데 걸림돌이 되었죠.

입사 한 달 차였던 저는 화면 곳곳의 컴포넌트를 보며 ‘왜.. 이건 다르지..?’라는 의문에 빠졌었어요.

(그때의 나..)

또 다른 문제 발견!

리소스 낭비였어요. AOS, iOS, Web 에서 각자 관리되고 있는 컴포넌트에 대한 소통이 없었기에 UX팀은 각 개발팀과 협업할 때마다 미묘한 간극을 맞춰가야 했어요. 개발팀도 비슷한 컴포넌트에 상세 스펙이 달라 리소스가 낭비되고 있었어요. 그래서! 더 나은 사용자 경험과 효율적인 협업을 위해 디자인 시스템 도입을 결정하게 되었습니다.

잠깐! 디자인 시스템이 뭐죠?

디자인 시스템은 디자인 원칙을 바탕으로 재사용할 수 있는 컴포넌트, 패턴, 코드 등을 체계적으로 정리한 도구 모음입니다.

그거 하면 뭐가 좋아요?

서비스의 일관성

메시지, 스토어, 채널 등 다양한 서비스 전반에서 사용자에게 일관된 경험을 제공하고 더 나아가 fromm의 브랜드 경험도 명확하게 전달할 수 있어요.

소통 오류 감소

기획자, 디자이너, 개발자 모두 같은 언어를 쓰면서 커뮤니케이션 오류를 줄일 수 있어요.

온보딩 자산

신규 구성원이 합류해도 디자인시스템 문서를 통해 원활한 온보딩과 초반 작업을 효율적으로 시작할 수 있어요.

우리는 이렇게 시작했어요.

스터디부터 시작

이미 디자인시스템을 잘 만든 다른 서비스의 문서를 살펴보고 피그마에 효율적으로 도입하기 위해 팀 내에서 디자인시스템 강의를 함께 들으며 방향성을 잡았어요.

UX팀은 Brad Frost의 Atomic Design 방법론을 기반으로 디자인 시스템을 구축하기로 결정했어요! Atomic Design은 디자인 시스템 구조화 방법론인데요. 간단히 정리하면 가장 작은 단위의 UI로 시작해 점차 큰 단위로 확장하여 체계적으로 UI구조를 구성하는 방법이에요. (출처 : 볼드UX) 전자에서 페이지까지 구조를 잡기 위해 먼저 전자인 컬러, 타이포그래피 등 기존 가이드 문서를 기반으로 디자인 시스템에 등록하려고 시도했어요.

그런데.. 비상사태 삐용삐용🚨

기존 가이드 문서에 컬러(+ 타이포, 여백, 그림자 등등…)가 너무 많은데요..? 이거 다 사용하고 있나요?

그렇다면..

컴포넌트 헤쳐 모여!

각 서비스 화면 곳곳에 흩어져 있던 컴포넌트를 한곳에 모았습니다. 정말 꼭! 필요한 전자 요소인지 확인하기 위해 현재 사용되고 있는 화면을 모두 점검했습니다. 입사 초반에 진행했던 이 작업이 서비스별 디자인 차이를 이해할 수 있는 아주 좋은 시간이기도 했어요. (왁! 많다!)

피그마에 Variables로 등록

컬러부터 타이포그래피, 아이콘, 여백 등 FDS에 정확한 기준을 정의하기 위해 필요하지 않는 요소들은 정리한 후 피그마에 등록했어요. 시스템적으로 관리될 수 있게 환경 세팅을 진행했습니다. (한땀한땀..정성으로..등록..)

컴포넌트 제작

대망의 첫 번째 실험 컴포넌트인 ‘다이얼로그’를 만들었어요.

FDS 회의에서 디자인 요소들의 스펙이 정리되었음을 공유했고 이 값을 기반으로 각 개발팀에서 카탈로그앱, 스토리북을 만들어주셨습니다.. 엄청난 감동..

UX팀은 이를 통해 다양한 환경에서 쉽게 테스트할 수 있어 정말 반가운 변화였습니다. 예를 들어 좁은 화면(갤럭시 폴드)이나 영어로 번역 시 의도한 레이아웃으로 온전하게 구현되는지 카탈로그 앱에서 바로 확인할 수 있었어요.

아주 좋지요~?

다이얼로그를 시작으로 스낵바, 텍스트필드..하나씩 정의하고 있어요.

지금 우리 상황은요?

FDS 도입 여정에서 이제 막 초입을 지났어요. 앞으로도 새로운 컴포넌트가 필요한 상황을 마주할거고 정해진 규칙도 다듬어가야 할 겁니다. 그래서 디자인시스템은 끝이 없다고.. 실제로 디자인 시스템 도입 실패 아티클도 종종 보이는데요. 그만큼 어려운 작업이지만 UX팀은 척척박사 개발팀과 손잡고 잘 헤쳐 나가 볼 예정입니다!

마무리 인사 올립니다.

오늘은 디자인 시스템 도입 배경과 초반 환경 세팅 과정을 공유해 보았습니다. 유저에게 지금보다 더 나은 경험을 제공하기 위해 UX팀은 오늘도 열심히 달립니다! 아자아자!