에어비앤비의 디자인 시스템
[CA CON-86, 에어비앤비 디자인 시스템] 연사: 에어비앤비 디자인 시스템 팀 한유진 총괄 매니저
왜,
디자인 시스템이어야 하는가?
일반적인 디자인 프로세스
1. Discover (유저 리서치, 디자인 리서치)
2. Define (데이터 분석, 아이디어 컨셉 개발)
3. Develope (프로토타이핑, 디자인 구체화)
4. Deliver (배포, 수정, 보완)
디자이너들은 보통 2단계(Define)부터 본격적으로 무드보드와 UI 스타일 가이드를 제작하고 이를 실제 디자인 작업에 적용한다. 작은 규모의 디자인 팀이라면 상관없겠지만 수백명의 디자이너들이 함께 일하고 각각 팀이 분리되어 있다면 이 과정에서 통일성이 깨지기 쉬운데, 그 이유는 아래와 같다.
점점 더 복잡해지는 제품들
숙박뿐만 아니라 Experience, Restaurant 등으로 서비스가 확장되면서 각자의 특성에 맞는 디자인이 추가됨
성장하는 제품과 디자인 팀의 규모
비즈니스가 성장하면서 자연스럽게 디자인팀의 규모도 늘어나 디자인을 맞추기가 더 힘들어짐
빨라지는 제품 개발 사이클
제품 업데이트 주기가 1-2주 단위로 짧아진 만큼 유저에만 집중해 빠르게 업무를 진행하다 보니, 각 서비스의 디자인을 맞출 수 있는 시간이 부족해짐
에어비앤비도 검색 flow, 리스트 flow, 결제 flow 등 별도의 팀으로 분리된 디자이너들이 공통된 약속 없이 유저의 니즈에 맞춰 빠르게 sprint를 진행한 결과, 각각 조금씩 다른 버튼이나 색상값, 아이콘들을 사용하게 됐다.
심지어 동일한 flow도 안드로이드와 iOS, 웹이 서로 다른 디자인을 갖고 있었다. ⓒairbnb.design한유진 매니저는 "디자인 시장이 점점 성숙해지면서 유저들의 기대와 눈높이도 높아졌기 때문에 제품의 통일된 디자인을 위한 하나의 디자인 시스템은 반드시 필요했다"고 말하며, "디자인 시스템의 필요는 규모의 확장과 함께 자연스럽게 따라온다"고 설명했다.
그렇다면 디자인 시스템이란 무엇일까.
에어비앤비는 디자인 시스템을 다음과 같이 정의한다.
제품의 전체적인 디자인을 구성하는 공유된 통합 패턴 및 원칙들의 모임
이케아 제품을 생각해보면 이해가 쉽다. 이케아 제품은 조립과 해체가 쉽고 간단하며, 동일한 부품이 포함돼있어서 누가 조립하더라도 같은 형태를 갖는다. 또, 어디에 배치해도 인테리어에 무난하게 잘 어울린다. 디자인 시스템의 원칙도 동일하다. 사용이 쉽고 간단하며 어디서나 일관되고, 재사용이 가능해야 한다.
디자인 시스템의 구조
디자인 시스템은 일반적으로 atomic design 원리를 따른다. 에어비앤비 역시 atomic design의 원리 아래, 4가지로 디자인 시스템을 구분했다.
(1) foundation: 컬러, 타이포, 아이콘, 버튼 등 가장 기본이 되는 단위
ⓒairbnb.design(2) components: 재사용이 가능한 기능 단위, foundation의 조합
에어비앤비에서 사용하는 컴포넌트의 개념은 다른 회사와 다를 수 있다. 에어비앤비의 컴포넌트는 요소 하나하나가 아니라 블럭 단위를 말한다. 예컨대 아래 이미지중 좌측의 '프로필' 컴포넌트의 경우 프로필 사진과 이름, 그리고 간단한 설명까지 포함된 그룹이 하나의 컴포넌트다.
ⓒairbnb.design(3) templates: 목적을 가진 component와 foundation의 구성 조합
ⓒairbnb.design(4) page: teamplate들이 모여 구성된 레이아웃
ⓒairbnb.design디자인 시스템의 장점
consistency 일관성
reusability 재사용가능
velocity 신속성
gain time to focus on the innovative ideas 혁신가능성
흔한 디자인 시스템에 대한 오해는 '이미 만들어진 디자인과 셋업이 있기 때문에 새로운 디자인을 하는데 제한이 생기고 유연하지 않다'는 것이다. 하지만 시스템이 있다면 디자이너는 버튼의 모서리 모양이나 색상값에 고민할 시간을 아껴 좀 더 근복적이고 혁신적인 아이디어에 집중할 수 있다.
디자인 시스템 제작시 주의사항
지속적인 업데이트
디자인 시스템은 하나의 살아있는 생명체처럼 제품과 함께 업데이트 되어야 한다. 실제로 적용해보고 발생하는 피드백들을 반영해 지속적으로 개선해야 한다.
세부적인 규칙 정의
단지 컴포넌트를 만들어 둔다고 해서 모든 팀이 일관된 디자인을 할 수는 없다. 어떤 상황과 조건에서 어떤 컴포넌트를 사용해야 하는지 세부적인 규칙들을 정의해야 한다.
누구나 쉽게 이해할 수 있도록 정리
가이드와 규칙은 모든 디자이너와 개발자가 이해하기 쉬워야 한다. 규칙을 정리할 때는 do/don't 형태로 보여주는 것이 효과적이다.
관련 실무자들과의 협업
디자인 시스템은 특정 팀이 알아서 만들어 배포하는 것이 아니다. 실제 디자인 시스템을 사용할 디자이너와 개발자들의 의견을 듣고 협업하는 것이 중요하다.
에어비앤비 디자인 시스템
케이스 스터디
2016년, 모바일을 우선으로 에어비앤비 디자인 시스템 제작
당시 많은 유저가 모바일 앱으로 서비스를 이용했기 때문에 모바일 중심의 디자인 시스템을 먼저 도입했다. 이때 디자인 시스템 팀은 6명이었고 본사와 별도로 분리된 공간에서 시스템을 제작했다.
제작 과정은 다음과 같았다.
1. 당시 디자인된 모든 화면들을 스크린샷한 뒤 이들을 flow별로 분류
2. 각 flow의 구조를 분석하고 통일된 스타일로 리디자인
3. 반복되는 디자인 구조를 하나의 컴포넌트로 정의
각자 다른 화면에서 동일하게 반복되는 구조를 하나의 컴포넌트로 정의한다. ⓒairbnb.design4. 컴포넌트의 이름과 구성을 개발자들의 코드와 동일하게 정리 (개발팀과 협업)
컴포넌트들의 구성과 이름을 코드와 동일하게 정리한다. ⓒairbnb.design5. 각각의 컴포넌트가 모든 디바이스와 플랫폼에 적용 가능하도록 보완
ⓒairbnb.design6. color, type, spacing 등의 foundation 정리
에어비앤비 디자인 시스템의 특징은 '디바이스와 해상도에 상관없이 동일한 디자인이 적용된다'는 것이다. 에어비앤비는 안드로이드라고 해서 material design을, IOS라고해서 애플의 가이드라인을 무조건 따르지 않았다. 대신 모든 디바이스의 UI를 통일시켰다. 따라서 에어비앤비의 유저는 사용하던 모바일 기기를 변경하거나 모바일에서 데스크탑으로 이동해 접속하는 등 이용 환경이 어떻게 바뀌어도 혼란 없이 자연스럽게 서비스를 이용할 수 있다.
Team Library와 Core Library
에어비앤비의 비스니스가 계속 확장되면서 기존의 디자인 시스템을 모든 화면에 적용하기엔 부족해졌고, 서비스마다 새로 추가해야 하는 컴포넌트가 달랐다. 때문에 디자인 시스템 팀은 특정 서비스에서'만'쓰이는 컴포넌트를 따로 분리해 Team Library를 제작했고 서로 영향을 주지 않도록 했다. 예컨대 Homes의 Team Library는 Experiences나 Restaurants 서비스에는 적용되지 않는다. Core Library는 접근성과 현지화, 유저 테스트까지 모두 완료된 범용적인 컴포넌트로 구성했고 Team Library는 각자의 서비스에 맞는 컴포넌트로 구성했다.
Core Library의 기준 완화
디자인 시스템 팀이 Core와 Team Library를 분리하자, 각 팀의 제품 디자이너들이 자신의 Team Library에 컴포넌트를 추가하고 싶다는 요청을 보내왔다. 요청하는 수가 많았기 때문에 디자인 시스템 팀은 모든 경우를 다 지원할 수 없었고 이 문제를 해결하기 위해 제품 디자이너들이 Team Library에 추가할 컴포넌트를 직접 제작하도록 방침을 정했다. 대신 디자인 시스템 팀에서는 모든 Team Library의 컴포넌트를 만드는데 활용될 수 있게 Core Library의 규칙을 완화했다.
기존처럼 블럭들을 가져다 바로 쓸 수 있는 시스템(좌)이 아니라 패딩과 타이포그래피 정도만 지정해주고 '오른쪽에는 당신이 필요한 이미지나 버튼 또는 아이콘을 넣으세요' 정도로 가이드라인을 최소화하고 있다.(우)
UXP Partners와 함께 디자인 시스템 업데이트
디자인 시스템 팀은 제품 디자이너들과 관계유지를 위해 UXP Partners라는 그룹을 구성했다. UXP는 UX Platform(디자인시스템 팀의 이름)과 Partners(각 팀별 제품디자이너 22명의 그룹)의 합성어다.
디자인 시스템 제작에 팀별 제품 디자이너들의 참여를 유도하는 것이 목적이며 2주에 한 번씩 미팅을 갖고 피드백을 수집한다. 제품 디자이너들은 디자인 시스템의 실제 사용자들이기 때문에 그들의 의견을 듣고 그들에게 시스템을 이해시키는 것이 중요하다.
접근성을 고려한 디자인
"갑자기 에어비앤비에서 자주색이 아닌 청록색을 많이 쓰게된 이유가 뭔가요? " -한 참가자의 사전질문
에어비앤비가 주색상을 변경한 이유는 접근성 때문이다.
Web Content Accessibility Guidelines 2.0의 기준에 따르면 접근성을 위한 색대비값은 최소 4.5:1다. 색대비값 측정 결과, 에어비앤비의 자주색(Raucsh)은 약 3.1:1 이고 청록색(Babu)의 경우 4.5:1가 나왔다. 접근성 가이드라인에 따르기 위해 현재는 거의 대부분의 페이지에서 청록색이 쓰이고 있다.
현지화 (Localization)
에어비앤비는 글로벌 서비스이기 때문에 현지화가 매우 중요하며 언어마다 다른 텍스트 길이 등 디테일한 요소에 신경써야할 것이 많기 때문에 항상 이 점을 염두해두고 컴포넌트를 제작한다.
에어비앤비의 디자인 협업툴
에어비앤비에서는 design tools(내부툴)와 sketch, figma를 사용하고 있다.
figma의 장점은 업무현황과 라이브러리를 파일 형태로 공유할 필요 없이 바로 확인 가능하다는 것인데, 웹과 로컬의 연동도 가능하기 때문에 다른 팀과 협업도 수월하다. 다만 아직 배포 초기라 버그가 다소 있다.
sketch app은 유용하고 다양한 플러그인을 사용할 수 있다는 것이 큰 장점이다.
이외에도 디자인 툴은 모두 장단점이 있으므로 각자의 용도와 상황에 맞게 사용하는 것이 바람직하다.
디자인 시스템의 다른 사례들
Material design (Google) : 디자인 시스템계의 vible이다.
Carbon design system (IBM) : 디자이너와 엔지니어의 사용성이 동시에 충족되는 간단하고 명료한 가이드가 특징이다.
Shopify design system (Shopify) : web/andriod/ios 등 디바이스, 해상도별 가이드를 제공하는 것이 특징이다.
에어비앤비의 디자인 시스템은 그 구성과 활용도 면에서 참고할만한 점이 많아 공개 이후로 쭉 디자이너들과 개발자들에게 주목을 받아왔다. 나 역시도 사내 디자인 시스템을 제작하기 위해 리서치를 하던 중 에어비앤비의 사례를 접했고 이후로 시스템의 구조를 잡는데 많은 도움이 되었다.
강연에서는 에어비앤비의 제작 비하인드 스토리와 함께 디자인 시스템의 개념과 필요성을 다시한 번 정리할 수 있었는데, 우리 디자인 시스템에 보완할 점도 떠오르고 앞으로 어떻게 시스템을 관리해나갈지 생각해볼 수도 있었다.
특히 인상적이었던 내용은 Team Library를 별도로 제작했하고 Core Library의 기준을 완화했다는 점이었다. 디자인 시스템만을 관할하는 팀이 따로 있음에도 불구하고 모든 경우를 지원할 수 없어 고민하다가, 효율적인 업무 진행을 위해 디자인 프로세스를 재정비했다는 점은 에어비앤비가 유연하고 효율적인 조직이라는 점을 다시한번 느낄 수 있게 하는 사례였다. 또 접근성과 현지화에 많은 노력을 기울인다는 점도 기억에 남는다. 디자인의 역할과 가치에 대해 고민하고 행동해야한다는 것을 다시한번 새길 수 있었다.
* 좋은 강연을 제공해주신 연사님과 CA BOOKS 팀에게 감사드립니다.
