brunch

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 두블링 한윤석 Jun 14. 2023

실무 디자인 시스템 구축 방법(1)

디자이너라면 꼭 알아야할 실무 디자인 시스템 구축

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

디자인 시스템 구축을 진행하면서 아토믹 디자인 방법론과 개발자가 각 컴포넌트를 어떻게 관리하는지에 대해 알아보았습니다.

그럼 이제 본격적으로 실무 디자인 시스템 구축방법에 대하여 알아보겠습니다.

디자인시스템이란 디지털 제품에서 디자이너와 개발자가 공용으로 활용할 수 있는 하나의 언어 형태로서, 디자인 원칙, 디자인 가이드라인, UX 패턴, UI 툴킷, 코드(code) 등이 전부 포함되는 ‘시스템 라이브러리’를 의미합니다.

디자인과 프론트 단계에서 공용으로 관리되는 컴포넌트들을 활용해 효율적으로 커뮤니케이션 할 수 있고, 이를 통해 프로덕트 작업 시간을 단축하며, 사용자 경험과 로직에 집중해 구축 과정을 동기화 할 수 있는 효율적인 도구입니다.

아토믹 디자인과 스토리북에 대한 디자인 시스템 글을 읽어보셨다면 바로 이해가 가실 겁니다.

디자이너의 입장에서 Agenda는 다음과 같습니다.

플랫폼 특성상 반복적으로 사용되는(재사용되는) 컴포넌트, 페이지를 디자이너마다 매번 새로 다시 제작하는 수고를 덜고싶습니다.

비교적 우선순위가 낮은 페이지에 소모되는 시간을 줄이고 제품 전반의 사용자 경험에 더 집중하고 디벨롭하고싶습니다.

디자인 팀 내부에서 공유된 재사용 컴포넌트는 정해진 가이드라인이 없어 디자이너마다 아웃풋이 조금씩 다르게 완성되어 결국 재사용과 관계없이 개발자는 매번 새로 컴포넌트를 개발해야 합니다. 이런 이슈또한 해결하고 싶습니다.

웹앱 특성상 반응형에 대응해야 하는데, 반복되는 레이아웃의 경우에도 구체적인 페이지 디자인이 없으면 개발자가 임의대로 반응형 화면을 작업할 수 없었기 때문에 일일이 디자이너가 작업해 전달해야 했습니다. 이 과정에서 생기는 비효율적인 시간을 줄이고 싶습니다.

디자이너와 개발자의 Agenda는 비슷합니다.

디자이너가 재사용을 했는지 아닌지, 개발자끼리 어떤 컴포넌트를 어디에 사용했는지 공유되지 않아, 동일한 컴포넌트를 제품마다 매번 새로 개발하게 되는 이슈가 생깁니다.

디자인이 빠르게 끝나도 프론트 시간이 오래 걸려, 제품 출시 및 유저 테스트 또는 데이터 수집 후 디벨롭이 되기까지 오랜 시간이 소요됩니다.

디자이너가 재사용한 컴포넌트 또는 Color, Spacing 등의 요소가 개발 과정에서 효율적으로 전달되지 않아, 비효율적인 확인 절차 및 질문이 반복됩니다.

같은 디자인 컴포넌트도 개발자에 따라 구현 아웃풋이 달라지고, 몇 번의 소모적인 QA 과정이 반복됩니다.

이러한 디자이너와 개발자의 Agenda를 취합해 구성원 모두를 위한 두가지 디자인 시스템 목표를 구성합니다.

1) 디자이너-개발자 간 효율적인 컴포넌트 재사용 및 공유를 통해, 제품 전반의 사용자 경험에 더 집중할 수 있는 시스템을 구축합니다.

2) Figma - Storybook - Notion 가이드라인 연계를 통해, 라이브러리 형태로 공유 가능한 오픈소스 디자인 시스템을 구축, 플랫폼에 특화된 최소한의 가이드를 제공해 다양한 프로덕트에서 다양한 사람들이 시스템을 활용할 수 있도록 합니다.

조직마다 목표는 다르게 나올 수 있지만 크게 이러한 목표와 목적을 가지고 디자인 시스템을 제작하면 좋습니다.

목표를 세운 후에는 디자인 시스템의 범위 및 구성, 의사 결정 프로세스 원칙 등을 정하고 작게는 콘텐츠 내용작성 시 필요한 규칙을 정의하는 것부터 시작하면 디자인 시스템 구축에 큰 도움이 됩니다.

여기서 디자인 가이드 라인에는 각 컴포넌트의 원칙, 지침, 표준을 설명해주면 좋습니다. 아래 이미지는 '리디북스'의 디자인 목표와 원칙 가이드라인 문서입니다.

리디북스 디자인 목표와 원칙

디자이너와 개발자의 Agenda는 비슷하고 이를 위해 목표와 원칙을 가지고 디자인 시스템 구축에 들어갑니다.

서론이 길었습니다. 다음 글에서는 디자인 시스템 정의 및 개발에 대하여 더 이야기해보겠습니다.

keyword

두블링 한윤석 커리어 분야 크리에이터 소속 한윤석 직업 디자이너

안녕하세요 UI UX 디자이너 한윤석의 블로그입니다. '두블링'은 디자인작업을 하며 우리끼리 재밌게 노는 팀입니다. <Team : N, 한윤석, 원태현, 최희진, 강민지>

구독자 169

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari