회사에서 프로젝트가 하나 둘씩 늘어가면서 일관성 없는 UI/UX 가 생겨나고 디자인 시스템이 있으면 좋겠다는 생각을 했습니다. 마침 사랑하는 인프런에서 피그마 배리어블을 활용한 디자인 시스템 구축 스터디를 모집하고 있었고 즐거운 마음으로 참여하게 되었습니다.

디자인 시스템이란?

 A design system is a collection of reusable components and clear standards that can be assembled together to build any number of applications.[1] Design systems aid in digital product design and development of products such as mobile applications[2] or websites. They may contain but are not limited to, pattern/component libraries, design languages, style guides (font, color, spacing, placement), coded components, brand languages, and documentation.

It serves as a reference in combination with a design language that ensures the many different teams involved in designing and building a product create cohesive products that look and behave like each other.[3]

-출처: https://en.wikipedia.org/wiki/Design_system

살펴보면 디자인 시스템을 구축하기 위해서는

• pattern/

  components libraries

• design languages/brand languages

• style guides

• coded components

• documentation

같은 것들이 필요한 것을 알 수 있습니다.

이 강의에서는 무엇을 배우나?

인프런 워밍업 스터디 1기에서 학습하는 피그마 배리어블을 활용한 디자인 시스템 구축하기 - 볼드 UX 에서는 피그마로 디자인 시스템을 구축하기 위해 다음과 같은 것들을 배웁니다.

• 피그마 배리어블

• 디자인 파운데이션 만들기 (font, color, spacing, effect, breakpoint, border, elevation, etc)

• 피그마로 컴포넌트 만들기 (엄청 많이 만듬)

• 모드(light, dark)를 설정해서 배리어블 제대로 활용하는 방법

• [B2B] e-commerce admin page 만들기

• [B2C] e-learning page 만들기

우리도 당장 적용해야 할까?

디자인 시스템을 적용한다고 해서 갑자기 생산성이 좋아지고 일관적인 디자인으로 정리되는 것은 아닙니다. 오히려 생산성이 떨어지겠지요. 프로젝트 기간이 부족하거나 규모가 작을 경우에는 디자인 시스템을 적용하지 않는 편이 더 좋을 수도 있습니다. 디자인 시스템을 구축하는 것만으로도 시간과 노력이 많이 들어가기 때문입니다.

A Design System isn’t a Project. It’s a Product, Serving Products.

- Nathan Curtis

그러나 디자인 시스템이 안정적으로 도입되고 나면 생산성이 훨씬 높아질것이라 기대합니다. 디자이너의 생산성 뿐만 아니라 기획자, 개발자 등 팀 간의 의사소통도 쉬워지니 전체적인 생산성이 높아지겠지요.

디자인 시스템은 누가 만드나요?

디자인 시스템은 디자이너 혼자 만드는 작업이 아닙니다. 디자인 시스템이 프로젝트 전체 팀원간의 소통 도구가 되고 제품 인터페이스의 기반이 되려면 디자이너, 개발자, 비즈니스 간의 효과적인 커뮤니케이션이 중요합니다.

코드화된 컴포넌트까지 디자인 시스템에 포함하기 위해 개발팀과 긴밀히 소통해야 합니다. 개발팀에서 현재 프로젝트에서 사용하고 있는 UI 관련 라이브러리를 파악하고 이 라이브러리에서 제공하는 디자인 토큰을 디자인팀에서 반영해야 하면 개발과 디자인 단계에서 큰 도움이 될 수 있습니다.

예를 들어 팀에서 tailwindCSS를 사용하고 있다면 tailwindCSS의 디자인 토큰을 디자인 시스템에 반영한 후 디자인 시스템을 구축해 나간다면 좀 더 빠르게 진행할 수 있습니다.

무엇보다 디자인 토큰의 이름을 공유해서 디자인팀과 개발팀이 처음부터 같은 용어를 사용한다면 디자인 핸드오프 과정이 한결 쉬워질 것입니다.

디자인 토큰과 피그마 배리어블

디자인 토큰은 모든 UI 요소의 기본 구성 요소로 진실의 근원의 역할을 하는 작고 반복 가능한 디자인 결정입니다. 다시 말해, 가장 작은 단위의 디자인 결정을 미리 해두는 것입니다. 예를 들면 색상을 미리 골라둔다거나 여러 가지 폰트 속성을 미리 정의해두는 것입니다. font, color, spacing, effect, breakpoint, border, elevation 등등 다른 디자인 요소들도 토큰화할 수 있습니다.

피그마 배리어블은 이런 디자인 토큰들을 변수로 관리할 수 있는 기능을 제공합니다.

프로그래밍에서 변수를 만들 때 가장 중요한 것은 변수명을 짓는 것입니다. 이 변수가 의미하는 것이 무엇인지 이름을 잘 지어야 다른 개발자에게 존경받습니다. 이렇듯 디자인 토큰을 변수로 관리한다는 것은 디자인 토큰에 이름을 지어준다는 의미도 됩니다.

파운데이션 만들기

여러 종류의 디자인 토큰을 정의하고 문서화해서 파운데이션을 만듭니다. 피그마 배리어블을 사용해 컬러 파운데이션을 만드는 과정을 좀 더 살펴보겠습니다.

피그마 배리어블은 컬렉션에 저장할 수 있습니다. 컬렉션은 여러개를 만들 수 있습니다. 이 컬렉션을 레이어처럼 사용해서 primitive, theme, semantic 같은 이름으로 3개의 컬렉션을 만듭니다.

primitive 컬렉션에는 이 세상에 존재하는 모든 색상 중 사용하고 싶은 색상만 모아서 담아줍니다. 이 때 이름은 보편적인 이름으로 짓습니다.

theme 컬렉션에는 브랜드 컬러에 맞는 색상들을 primitive 컬렉션에서 골라 담습니다. 이 때 이름은 브랜드 컬러의 관점에서 짓습니다.

마지막으로 semantic 컬렉션에서는 실제 컴포넌트 디자인에서 사용할 색상들을 theme 컬렉션에서 골라 담습니다. theme 컬렉션에 없으면 primitive 컬렉션에서 담아도 괜찮습니다. 이 때 이름은 컴포넌트 관점에서 짓습니다.

이렇게 계층 구조로 배리어블 컬렉션을 만들고 primitive 나 theme 컬렉션은 배리어블 사용 시 드러나지 않도록 숨긴 후 semantic 컬렉션의 배리어블을 사용해서 컴포넌트와 페이지를 만듭니다.

피그마 플러그인

앞에서 살펴본 디자인 토큰 배리어블 등록 과정에는 단순 반복 작업이 다소 포함되어 있습니다. 그러나 피그마에는 재미있고 편리한 플러그인들이 많아 이 등록과정이나 문서화 과정을 쉽게 할 수 있는 방법도 있으니 이런 방법을 사용하는 것을 강력 추천드립니다.

인프런 워밍업 클럽 1주차 후기

지식공유자 볼드님과 인프런이 준비를 너무 잘해주셔서 서로의 학습을 응원하며 재미있게 작업을 진행하는 분위기가 만들어졌습니다. 이런 커뮤니티가 저에게는 학습 뿐만 아니라 일상의 소소한 즐거움을 줍니다. 워밍업 클럽에 참여하신 모두 완주하길 바라며 수료식에서 한 단계 성장한 모습으로 만났으면 좋겠습니다. 화이팅 🔥