[디독] 📖 MVP 규모로 디자인 시스템을 구축하는 방법

#Process #Design System #Tip

MVP 규모로 디자인 시스템을 구축하는 방법

👀효정's 큐레이팅 멘트

여러분은 디자인 시스템을 새롭게 구축할 때, 어떤 순서로 진행하고 계신가요? 그 방법은 정말 효율적인가요? 오늘은 MVP 규모로 빠르게 디자인 시스템을 구축하고 보완해 나가는 방법에 대한 아티클을 소개해 드릴게요.

저는 요즘 이전에 구축해 두었던 디자인 시스템의 구조나 방식이 디자인 뿐만 아니라 개발 측면에서도 정말 효율적인지에 대해 고민하게 됐어요. 이를 보완하는 방향으로 다시 새롭게 구조를 짜기 위해 열심히 개발자 분들과 긴밀하게 소통하고 있답니다. 만약, 저와 비슷한 상황 이거나 새롭게 디자인 시스템을 구축하는 데 엄두가 나지 않는 분들이 계시다면 이번 아티클이 도움이 되셨으면 좋겠습니다. 자, 그럼 같이 읽어볼까요?

최근에 나는 백지 상태의 어떤 새로운 프로덕트의 디자인을 맡게 되면서 이와 관련한 디자인 시스템을 구축하는 작업을 진행했다. 나는 이 작업이 팀에 새로운 동료가 합류했을 때 곧바로 프로젝트에 합류하는 데 용이하다는 것을 체감했고, 이러한 내 경험을 다른 이들과 공유하고 싶어 글을 남긴다.

어디서부터 시작해야 할까?

새로운 제품을 개발할 때, 디자인 시스템 측면에서 선택할 수 있는 보기는 2가지가 존재한다.

1. 이미 존재하는 디자인 시스템을 사용하는 것

2. 자체적인 디자인 시스템을 구축하는 것

프로젝트를 위해 우리는 자체적으로 요소를 정의하는 유연함이 필요하다고 생각했다. 물론 초반에는 이미 정리되어 있는 여러 디자인 시스템을 사용해보려 했는데, 우리가 실제 필요한 것과 다르게 너무 단순하거나 혹은 너무 복잡한 것이 문제였다. 결국 우리는 제 3의 옵션을 선택했는데, 먼저 이미 존재하는 디자인 시스템에서 버튼, 체크박스, 입력 필드와 같은 기본 요소를 차용한 후, 프로덕트가 개선됨에 따라 자체적인 디자인 시스템을 구축해 나가는 방법이었다.

시작하기 : 색과 타이포그라피

처음에는 기본적인 계층 구조를 만들고자 회색을 포함한 다섯 가지의 일반적인 텍스트 스타일의 색조를 정의하는 방식으로 간단한 형태의 프로토타입을 만들었고, 프로젝트가 점차 개선되고 발전함에 따라 이를 조정하거나 추가 색상 및 텍스트 스타일을 정의했다.

우측 패널을 살펴보면, 우리가 사용하고 있는 색상 일부와 텍스트 스타일을 볼 수 있다.

이때 나는 항상 처음부터 요소에 스타일을 매기는 것이 중요하다는 것을 깨달았다. 이는 요소의 반복을 훨씬 쉽게 만들어 줄 뿐만 아니라, 프로젝트를 전반적으로 깔끔하게 정리할 수 있도록 도와주기 때문이다. 이를 더 쉽게 만들기 위해서는 ‘Style Organiser’라는 피그마 플러그인이 있는데, 이 플러그인은 아트보드에서 색상과 텍스트 스타일을 검색할 수 있고, 적용되지 않았거나 사용하고 있지 않는 스타일을 찾아내는 데에도 유용하다.

정의하지 않은 흰색(#FFFFFF) 레이어 스타일이 1개가 있는 상황, 이를 이미 정의해둔 'White' 스타일로 대체할 수 있다는 걸 플러그인을 통해 확인할 수 있다.

컴포넌트 셋팅하기

입력 필드나 라디오 버튼과 같이 몇 가지 기본적인 구성 요소들은 다른 디자인 시스템에서 차용해 우리 스타일에 맞게 조정해 사용했다. 또, 나같은 경우에는 작업 중 특정 요소를 한 번 이상 반복 사용할 경우에는 바로 아토믹 디자인 원칙에 따라 관련된 구성 요소를 정의해 나갔다.

태그 컴포넌트 예시

디자인을 넘어서

디자인을 마친 후에는 모든 요소를 다시 한 번 살펴보면서 사용하지 않은 것들을 제거하고, 모든 것을 별도의 페이지에 프레임으로 정리해 개발자들이 모든 요소에 대한 개요를 쉽게 파악할 수 있도록 정리했다. 그런 다음에는 프론트 엔드 개발자와 내 디자인을 함께 검토하는 과정을 가졌다.

종종 내가 추가 제작하거나 정의한 규칙들로 (버튼 상태와 같은) 누락된 요소를 발견하는 경우도 있었다. 또한 우리는 보다 효율적으로 협업하기 위해 디자이너와 개발자 모두 동일한 명명 규칙을 사용하기로 약속했다.

우리는 피그마와 코드 상 명명 규칙을 동일하게 가져가고 있다.

MVP 디자인 시스템 설명서

우리는 프로젝트에 참여하는 모든 동료들이 쉽게 접근하고 편집할 수 있도록 MVP 디자인 시스템 페이지를 노션에 추가해 작성하고 있다.

색상이나 텍스트 스타일 또는 아이콘과 같은 요소들의 경우에는 설명이 매우 짧고, 때로는 적용 방법에 대한 사용 사례나 규칙, 피그마 프레임에 대한 링크를 기록한다.

작업 시간은 어떻게 산정할 수 있을까?

우리같은 경우에는 디자인 시스템에 전념할 수 있는 상황이 아니였다. 하지만, 그렇다고 해서 작업을 하지 못한다는 의미는 아니다. 처음부터 스타일과 구성 요소를 잘 설정하면, 프로젝트를 진행할 때 반복하는 작업에 있어 많은 시간을 절약할 수 있다.

요점은,

우리는 프로덕트가 작을 때부터 최소한의 시간 투자와 높은 효율을 위해 디자인 시스템을 만들기 시작했다.

과정에서 내가 느낀점을 정리해 보자면,

디자인 시스템을 새롭게 구축하는 데 매우 적은 시간을 투자했지만 나중에는 많은 것을 절약할 수 있었다.
디자인 시스템은 정교할 필요가 없으며, MVP 디자인 시스템 설명서는 없는 것 보다는 있는게 낫다.
처음에 패턴을 정의하는 것은 개발 작업을 더 빠르게 진행할 수 있도록 도와준다.
새로운 기능을 설계하고 기존 기능을 확장하는 것은 어떤 선택할 패턴이 이미 존재하는 경우에 더 빠르게 진행할 수 있다.

다음 번에는 어떤 것을 더 잘할 수 있을까?

처음부터 새로운 구성 요소를 구축하려면 개발자에게 시간이 필요하기 때문에, 첫 단계부터 개발자와 디자이너가 소통을 시작하는 것이 좋다.

이 MVP 규모의 디자인 시스템에서 영감을 받은 내 동료가 코드를 포함한 간단한 디자인 시스템 템플릿을 제작해준 덕분에 앞으로 많은 프로젝트들에서 소중한 시간이 절약될 것이라 믿어 의심치 않는다.

저자 : Aleksandra Walczak

원문 : Creating a design system for an MVP

번역자 : 노효정

검수자 : 양혜윤 (LinkedIn)

같이 읽고 싶은 친구가 떠오른다면

👉 구독 링크 공유하기 👈

디독을 통해 발행하고 싶은 직접 번역한 아티클이 있다면?

💥 디독 객원 에디터 / 검수자로 함께하기 💥

[디독에게 도네리카노 한 잔 ☕️후원하기]

이번 레터도 '수고했다', 만약 디독 팀에게 커피 한 잔 사주고 싶으신 분들이 계시다면 아래 계좌를 통해 후원해주세요! 향긋함은 덤, 여러분의 따뜻한 관심과 도움이 서비스 유지에 정말 큰 힘이 됩니다.

✨디독 후원하러 가기✨

3월 후원해주신 분들

박이레, 이주임, 안써니, 박민진, 김수민, 바른생활 홍팀장, 이지안, 홍수경 님

디독
d.dok.newsletter@gmail.com
-
수신거부 Unsubscribe