Experience Design

CA CON-86 에어비앤비 디자인 시스템

Airbnb의 DLS(Design Language System)와 숨고에서의 디자인 프로세스와 디자인 시스템에 대한 고민


Airbnb의 디자인 프로세스

Discover Define Develop Deliver
디자인 리서치 인터뷰 데이터 분석, 문화 이해와 디자인을 통한 아이디어 컨셉 정의 및 리뷰 디자인 구체화, 프로토타이핑, 개발 제품 전달, 사용자 검증, 테스트 및 피드백, 수정 및 보완

위의 표는 Airbnb의 Product 프로세스이다. 아마도 더블 다이아몬드 모델이 기본 베이스인 것 같다. 이를 토대로 나의 주관적인 의견과 숨고에서의 이상적인 프로세스를 자세하게 정의해보았다.

01 Discover

문제점을 내/외부에서 발견한다.

기획 이전의 단계로 문제점을 찾는 과정이다. Milestone을 따라가며 문제점을 찾아 해결한다. 또한, 고객의 목소리나 내부의 이슈와 데이터를 통해 분석한 결과를 문제점으로 도출 할 수도 있다.


02 Define

문제점을 발견하고 Specific한 문제점으로 가공한다.

도출된 문제점은 Product팀에 넘어오며 리서치와 데이터를 통해 Specific한 문제점으로 가공한다.


03 Develop

Define된 문제점을 바탕으로 해결책을 제시하고 개발한다.

User story(task)는 유저의 기능 혹은 액션 하나로 구분하며 이에 집중하여 디자인과 개발을 진행한다.
간단한 프로세스는 다음과 같다.

기획과 디자인을 진행하면서 디자인 세션을 진행할 수 있다. 디자인 세션은 팀 전체가 참여하거나 핵심 인물만 참여하여 방향성에 대하여 이야기 하는 자리이다.


04 Deliver

개발된 해결책이 유저에게 도달할 수 있도록 한다.

해당 이슈들이 완료되면 QA/Review를 통해 검증한다. 해당 User story를 진행하기에 문제가 없는지, 전체 Product가 깨지거나 Side effect가 있는지 등의 여러가지 시나리오를 테스트한다. QA/Review가 완료되었다면 이슈를 배포한다. 배포시 A/B Testing을 할 수 있다. 배포 후 성과 분석과 사용성 평가를 통해 T2와 향후 방향에 대한 문제점을 정리할 수 있다.


Airbnb와 내가 정의한 프로세스의 내용 중 DiscoverDefine의 단계의 차이점이 있다. Discover단계에서는 이미 Define된 문제점을 토대로 솔루션에 대한 고민을 시작하는 단계로 정의되어 있다. 하지만 나는 크게 DiscoverDefine의 큰 다이아몬드는 문제점을 찾는 단계로 구분하여 정의를 내렸다.

Airbnb의 디자인 시스템

Airbnb의 DLS(Design Language System)는 많은 디자이너 분들이 알고 있을 것이라 생각된다. 뿐만 아니라 Atlassian Design, Material Design, Carbon Design System 등 많은 기업에서도 디자인 시스템을 갖추고 있다.

디자인 시스템이란?

A set of shared&integrated patterns and principles that define the overall design of a product.
제품의 전체적인 디자인을 구성하는 공유된 통합 패턴 및 원칙들의 모임이다.

A design system is a collection of reusable components guided by clear standards.
디자인 시스템은 명료한 기준을 통해 재사용되는 컴포넌트들의 모임이다.

Awwwards Conference 에서 디자인 시스템에 대하여 발표했던 Amazon 시니어 디자이너 Jina Anne 의 발표 중 가장 인상에 남는 구절은

Design systems aren’t just about UI and documentation. Design systems empower change in your culture.

이다. 디자인 시스템을 단순히 UI 가이드로 생각해서는 안된다. 이는 가시적인 디자인 영역보다는 유저와의 소통 언어라고 볼 수 있고, 하나의 Product로 인지하고 모든 유저에게 동일한 경험을 제공하기 위한 하나의 가이드라인으로 이해할 수 있다.

사실 이전까지는 디자인 시스템의 중요성에 대해 글을 읽어봐도 잘 와닿지 않았다. 그러나, 꾸준히 작업을 하다보니 여러가지의 이유에서 필요성에 대해 절실히 느꼈다. Airbnb는 디자인 시스템의 중요성의 이유에 대해 다음과 같이 설명했다.

  • 빨라지는 제품 개발 사이클
  • 성숙해지는 디자인시장과 고객들의 높아지는 기대

프로세스 방법론 중 대세인 Agile sprint 프로세스는 아마 스타트업 종사자라면 익숙할 것 이다. 가장 크게 비교가 되는 프로세스는 아마도 Waterfall vs Agile 이라 생각한다. 둘 중에 이 프로세스가 더 좋아! 라고 이야기 할 수는 없다고 생각한다. 둘다의 장단점이 있기 때문이다. 하지만, 빨라지는 제품 개발 사이클에 맞추기 위해서라면 Agile 프로세스가 적합할 것이다.

Awwwards Conference 세션 중 Adobe XD의 Demian Borba 에 의하면 빠른 프로토타입을 통해 유저들의 반응에 즉각 대응하여 시간과 비용을 절약 할 수 있을 것이다. 이러한 빠른 변화를 대응하기 위해서 Product 팀은 더욱 빠른 스피드를 요구된다. 이를 해결하기 위한 가장 기초가 되는 솔루션으로는 디자인 시스템이라고 생각한다.

숨고 이야기를 살짝 꺼내본다면, 빠르게 Product를 발전시키기 위해서 매 sprint마다 하나 이상의 큰 이슈들이 포함되어 있어서 굉장히 숨가쁘게 작업을 했었다. (모든 스타트업들은 그럴 것이기 때문에 딱히 특별한 일은 아니다. 😅) 디자이너는 1명이었기 때문에 전체 Product를 혼자서 다루었다. 가장 힘들었던 경험은 디자인이 막상 개발이 되어 나왔을 때 동일하지 않거나 변경이 되어버려 굉장히 시무룩한 일이었다. 또한 기존에는 없던 새로운 디자인이 계속 나와 UI 개발에 굉장히 많은 시간이 걸려 Tech팀에서 고생을 하는 점이었다. 이를 해결하기 위해 최대한 foundation이 되고 변경이 적을만한 UI는 단순한 UI 가이드 페이지를 만들어 디자인 후 UI 리뷰를 진행하지 않아도 되고, Tech팀도 컴포넌트를 재사용하여 개발하여 이전에 비하면 많은 시간을 단축하였다. 이러한 과정을 거치고 나니 Medium에서 읽었던 Atomic Design System이 생각났다. 굉장히 작은 단위의 레이어들을 하나하나 쌓아가듯이 이를 모아 라이브러리화 한다고 생각하면 된다.

Atomic Design System Structure

Foundation Components Template Page
가장 기본이 되는 단위 기능성, 재사용이 가능한 단위, foundation의 조합 목적을 가진 components와 foundation의 구성 조합 특정한 template들의 예시들로 이루어진 레이아웃

디자인 시스템의 장점

  • Consistency
  • Reusable
  • Efficiency
  • Clarity
  • Beauty

…계속 글을 업데이트 하는 중입니다 :)


참고한 글

스케치를 디자인 툴로 바꾸기 전 고민해야 할 것에 대해

👉🏻 다른 포스트도 읽어보실래요? 더보기

블로그 개편기 2019 [1편] 패스트캠퍼스 Future Conference Creative Track 2017