모두의 일관된 경험 위한 디자인 시스템을 만듭니다

Create a design system for a consistent experience

LEE SCENT

Published in

LEESCENT

6 min readJun 2, 2024

디자인 시스템은 디지털 제품을 효율적이고 일관성 있게 만들 수 있는 도구 중 하나입니다. 여기에는 아주 기본적인 컬러, 타이포그래피, UI 요소, 재사용 가능한 컴포넌트 그리고 가이드라인 문서를 포함하고 있습니다.

Clay는 본질적으로 imweb의 비전, 미션을 담고 있습니다.

우리는 왜 디자인 시스템이
필요했던 걸까?

2022년 6월 imweb은 BO 리뉴얼이라는 큰 공사를 앞두고 디자인 팀(현. 챕터)에서는 디자인 시스템 도입을 계획했습니다. 하지만 단기간에 성과 내야 했던 상황에서 모두가 처음인 디자인 시스템 도입을 회사 입장에선 흔쾌히 결정하기는 어려웠을 거예요. 결국 리뉴얼 프로젝트는 부족한 리소스와 전사 프로덕트 로드맵 우선순위에 밀려 잠정 중단되고야 말았습니다.

이렇게 디자인 시스템을 포기할 순 없었습니다. 당시에 저는 AD 스쿼드에서 제품 구축을 준비하던 중이었고, 중단된 리뉴얼 디자인 방향성을 가지고 디자인 시스템을 만들어 AD 제품에 적용해 보기로 했습니다. 감사하게도 스쿼드 구성원들의 공감과 리더십의 동의를 얻어 가능했던 일이었어요.

그동안 우리는 하나의 플랫폼을
저마다의 방식으로 설계하고 있었습니다

imweb은 브랜드 빌더로서 수많은 사용자들의 사랑을 받아왔지만 내부적으로는 복잡한 코드 베이스로 인해 유지 관리가 어려운 상황이었어요. 디자이너들은 서로의 디자인 패턴이 공유되지 않아 프로젝트마다 새롭게 디자인해야 했고, 엔지니어 역시 같은 상태였습니다. 메이커들은 정작 제품에 집중하지 못했고, 계획한 일정에 맞춰 개선을 하거나 새로운 기능을 제공할 수 없었습니다.

23년 3월 TF-DS가 꾸려졌고, 디자인 챕터에서는 전사 구성원들에게 디자인 시스템을 알리고 공감대를 얻기 위해 각자가 생각하는 디자인 시스템의 이점을 발표했어요.

@All Hands on deck 발표 : 개발자와 디자이너를 위한 미친 효율화 만들기 (23년 9월)

약 8개월 동안 TF 구성원들의 다양한 노력으로 디자인 시스템을 통한 제품의 성장 속도와 일관성, 작업 효율이 검증되기 시작했어요.

모두의 일관된 경험 위한
디자인 시스템

마침내, 23년 12월 디자이너 1명, FE 엔지니어 1명으로 구성된 디자인 시스템 스쿼드가 정식으로 출범됐습니다.

Clay는 다양한 디지털 접점 전반에서 일관성을 유지합니다. 메이커의 반복 작업을 해결하고, 리액트 기반의 유연하고 최적화된 작업 환경을 제공합니다.

We surve the underserved. : 비전에 맞춘 디자인 시스템

Clay는 단순히 시각적 아름다움만을 추구하지 않습니다. 프로덕트 조직, 특히 디자이너와 엔지니어의 작업 효율을 높이고, 유연하고 완성도 높은 디자인 시스템은 곧 일관된 사용자 경험과 서비스 전반의 품질을 높여 나아가 브랜드 신뢰도를 높이는데 기여합니다.

누구나 기여할 수 있는 디자인 시스템

구성원의 적극적인 기여와 활발한 커뮤니케이션을 통한 건강한 피드백으로 디자인 시스템을 만들고 이를 제품 전체에서 사용할 수 있도록 했습니다.

PD 희연님의 Segmented Controls, Progress bar 컴포넌트 기여

모든 구성원을 위한 디자인 시스템

디자인 시스템이 어렵고 복잡하게 느껴지지 않도록 온보딩, 업데이트 세션을 진행하거나 Guild ¹를 통해 프로덕트가 아닌 조직에도 디자인 시스템이 기여할 수 있는 활동을 이어가고 있습니다.

Guild ¹
팀/스쿼드, 포지션 경계 없이 업무 외에도 개선이 필요한 일들을 함께 해결하기 위해 자발적으로 모인 그룹

맥시멀 리스트의 심플리시티 디자인 시스템

Clay는 제품을 만들기 위한 거의 모든 컴포넌트와 스타일을 지원합니다. 다양하고 복잡한 케이스를 대응하고 있는 완성도 높은 디자인 시스템이지만 사용자는 파일을 열기 전까지 알 수 없도록 해야 합니다.

마무리

저는 여전히 imweb에서 디자인 시스템 Clay를 만들고 있습니다. 디자인 시스템은 우리가 제품과 서비스를 구축하는 방식을 변화시켰습니다.

언제나 완벽한 제품, 디자인만 추구했던 저는 디자인 시스템을 만들며 몇 가지 생각의 전환을 하게 되었습니다.

“디자인 시스템은 항상 불완전해야 합니다.”
디자인 시스템은 제품 요구사항에 따라 계속해서 바뀔 수 있기 때문에 정답이 있거나 완벽할 수 없습니다.
“아무리 좋은 디자인 시스템도 제품의 품질을 보장할 수 없습니다.”
디자인 시스템은 제품을 만드는 속도를 높이는 데 도움이 되는 도구일 뿐입니다.