CACON 86: 에어비앤비의 디자인 시스템 참석 후기
부제: 주의! 이 글은 디자인 시스템의 이해를 도와주진 않음(못함)
11월 2일 CA BOOKS 주최로 열린 86번째 CACON, 에어비앤비의 디자인 시스템에 참석했다. 잉? 개발자가 무슨 디자인 컨퍼런스를? 할 수도 있겠다.
나는 하나의 프로덕트가 나오기까지의 전반적인 과정 모두에 관심이 있어 모든 과정에 관여할 수 있는 프로젝트를 좋아한다(개발자들의 레이블, FTTO로 오세요🤖). 그 중에서도 디자인 분야는 내겐 너무나 먼 세상의 일이라 단지 다른 사람의 이야기를 듣고 다른 사람의 작업을 보는 것만으로도 즐거운 일이다. 특히 Airbnb의 다방면에 걸친 시스템 이야기는 자연스레 듣고 접할 수 밖에 없을만큼 유명하다.
새로운 도전
하나의 이유를 덧붙이자면 11월부터 새로운 직장의 프론트엔드팀에 합류할 예정이다. 대학 졸업 전후로 비영리 단체 활동을 시작해 이후 1) 작은 팀, 2) 익숙한 사람들, 3) 얕고 포괄적인(풀스택) 기술적 요구 사항이라는 환경 아래 코드를 작성해왔다. 이런 내가 1) (비교적) 큰 팀, 2) 모두가 낯선 사람들, 3) 깊고 명확한(프론트엔드) 기술적 요구사항이라는 전혀 다른 환경, 하지만 내게는 필요하고 또 원했던 환경을 앞두고 있다. 프론트엔드 엔지니어링에서 UI/UX는 단지 관심 정도만 요구된는 분야는 아니다. 직접 창작물을 생산하지는 못하더라도 그에 필요한 감각과 지식은 더 깊은 이해를 도울 수 있다고 생각한다.
한유진이라는 디자이너
전체 발표를 들은 후에 기억에 더 강하게 남은 것은 에어비앤비의 시스템보다 한유진이라는 디자이너의 이야기였다. 에이전시에서 일하던 시절 남들이 3, 4개의 시안을 준비할 때 20개의, 그것도 전부 완전히 다른 아이디어를 담은 시안을 만들어갔다는 노력을 했다는 일화. 비자를 얻기 위해 디자인 시안을 준비하는 것 못지 않게 수백장의 자료들을 직접 읽고 분석하며 준비했던 일화. 구글 매터리얼 디자인 시스템 팀, 스포티파이 팀, 에어비앤비 디자인 시스템 총괄 매니저라는 화려한 커리어 뒤에 얼마나 치열하고 평범하지 않은 노력들과 힘들었던 시간들이 숨겨져 있는지 알 수 있었다.
특히 “저 이만큼 노력해서 이렇게 성공했어요. 그러니 여러분도 열심히 노력하고 포기하지 말고 성공하세요”라는, 성공이라는 타이틀이 달린 사람들 특유의 청중을 대하는 거북한 자세가 전혀 느껴지지 않았다. 그저 도전하고 포기하고 달성하고 실패하는 것에 대해 자책하지 말라는, 그저 그렇게 살아가는 과정이 다 저마다의 인생이고 꿈이라고 아주 조심스럽지만 분명하게 전하는 이야기가 오히려 더욱 한유진 매니저를 기억에 남게 해주는 것 같다.
디자인 시스템
정의
디자인 시스템을 이케아 제품에 빗대어 소개하는 부분은 시간이 지나니 명확하게 이해가 됐다. 쉽고, 간단하며, 어디서나 일관되고 무엇보다 재사용이 가능해야한다.
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. — Will Fanguy
Foundation — Component — Template — Page 순으로 확장되는 디자인 시스템은 개발자들에게는 트위터의 부트스트랩으로 이해되기 쉬우나, 부트스트랩은 Foundation, Component을 이루는 코드의 집합이라면 디자인 시스템은 UI, UX에 대한 고민…… 죄송하다. 더 설명하기 어렵다. 솔직히 나도 부트스트랩은 디자인 시스템의 시초구나 라고 생각했다.
필요성
디자인 시스템의 필요는 규모의 확장에 자연스럽게 따라오는 고민이다. 하나의 제품 UI/UX를 이루는 다양한 요소들:
- 검색 Flow
- 제품 리스트 Flow
- 제품 세부 페이지 Flow
- 결제 Flow
- 메세지 Flow
- 리뷰 페이지 Flow
이 요소들을 1명의 디자이너가 아닌 여러 명이, 여러 팀이 나누어야 한다면 얼마나 일관성을 유지할 수 있을까라는 고민에서 디자인 시스템은 출발한다. 에어비앤비 뿐만 아니라 트위터 등 다른 회사들도 같은 문제점을 안고 있었다고 한다. 버튼 모양이 다르거나, 화면마다 브랜드 컬러값이 다르거나(충격), 플랫폼 별로 UI가 일관되지 못하거나 심지어 브랜드 로고 이미지도 자세히 들여다보면 다른 경우가 있었다고 한다.
장점
일관성, 재사용성, 신속성과 더불어 한유진 매니저가 강조한 디자인 시스템의 장점은 혁신성이다. 잘 갖추어진 디자인 시스템이 주어진다면 각 팀의 제품 디자이너들은 버튼의 모서리 디자인(radius), 세부적인 색깔 등을 고민할 시간을 아껴 보다 중요한 문제를 해결할 수 있는 혁신적인 아이디어에 집중할 수 있다는 것이다.
주의해야 할 것!
물론 주의해야 할 점이 있는데 마냥 디자인 시스템만 정의한다고 해서 모든 팀에서 일관된 디자인을 만들어 낼 수는 없다. 시스템에 맞는 적절하고 세부적인 규칙이 필요하다.
버튼을 예를 들면 버튼에는 보통 Primary, Secondary 로 시작해 다양한 종류의 버튼들이 존재한다. 이 버튼에 대해 단순히 컴포넌트만 제공할 것이 아니라 각각 어떤 상황과 조건하에 어떤 종류의 버튼을 사용할 것인지 규칙을 정해주어야 한다.
Cargo Design System — Buttons 예시
- Primary: For the principle call to action on the page.
- Secondary: For secondary actions on each page.
- Button with icon: When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are always paired with text.
타회사의 디자인 시스템
에어비앤비 디자인 이야기
Core Library vs Team Library
초기 에어비앤비가 Homes(숙박) 사업에만 집중했던 시기에는 산업계에서 주목할만큼 디자인 시스템이 너무나 완벽하게 돌아갔다고 한다. 이후 점차 Experiences(체험), Restaurants(식당) 사업으로 확장되고 필요한 UI/UX가 다양화 되면서 정리된 디자인 시스템만으로 해결할 수 없는 페이지들이 생겼다고 한다.
이를 위해 에어비앤비는 디자인 시스템을 Core Library(이하 CL)와 Team Library(이하 TL)로 분리시켰다. 문자 그대로 CL은 모든 페이지, 플랫폼에서 사용 가능한 컴포넌트들의 집합을 의미하고 TL은 특정 팀에서만 필요한 컴포넌트들의 집합이다. 예를 들어 Restaurants 팀에서 TL로 제작한 컴포넌트는 Homes나 Experiences 팀에서는 사용되지 않는 것이다.
브랜드 컬러 — Rausch와 Babu
어느 날 갑자기 에어비앤비에서 청록색을 쓰는 이유가 뭔가요? — 컨퍼런스 사전 질문
생각해 보니 그랬다. 몇달 전 오랜만에 에어비앤비 앱을 사용하는데 분명 홈페이지도 앱아이콘도 분홍색(Raucsh)인데 앱의 여러 페이지에 걸쳐 청록색(Babu)이 쓰이고 있었다. 한유진 매니저도 처음 입사해서 던진 질문이었다고 한다(왜 갑자기 청록색이 갑툭튀?). 대답은 매우 흥미롭고 인상적이었는데 접근성(Accessbility) 때문이라고 한다. 웹에서 접근성은 다양한 HTML 태그로 설명될 수 있는데 UI/UX는 색깔이 기본이다.
WCAG(Web Content Accessibility Guidelines) 2.0 기준에 따르면 접근성을 위한 색대비(Contrast) 값은 최소 4.5:1, 큰 글자의 경우 3:1을 넘어야 한다. 에어비앤비의 기존 브랜드 색, Raucsh는 약 3.1:1, Babu의 경우 4.5:1이기 때문에 현재는 거의 대부분의 페이지에서 Babu가 쓰이고 있다. 하지만 한유진 매니저는 브랜드 컬러는 여전히 Raucsh인 것은 아쉽다고 한다.
UXP Partners
디자인 시스템이 가진 많은 장점에도 단점 또한 존재하는데 실제 제품 디자이너들의 참여 의지를 저하시킬 수 있다고 한다. 이유는 Foundation, Component 들을 작업해서 내리는 마치 탑다운 방식처럼 디자인 컴포넌트들을 제공하여 제품 디자이너들의 입장에서는 이미 만들어진 디자인을 조합하는 정도의 작업으로 느껴진다는 것이다.
이 문제를 해결하고자 에어비앤비에서는 UXP Partners(UX Platform + Partners)라는 팀을 만들었는데, 쉽게 말해 디자인 시스템을 만드는데 팀별 제품 디자이너들이 직접 참여하는 것이다. UXP Partners를 통해 제품 디자이너들이 디자인 시스템에 참여하고 나니 디자인 시스템에 대한 참여도가 높아짐은 물론 얼마나 어렵고 중요한 작업인지 이해하게 되면서 자신이 속한 팀에 돌아가 직접 디자인 시스템을 이해시키는 것을 보았다고 한다.
에어비앤비 정도 되니까…
그럼 우리도 빨리 디자인 시스템 해야겠네!!!
디자인 시스템과 제품 디자인이 얼마나 분리되어 있는지, 회사와 팀의 규모가 얼마나 가늠이 어려울 만큼 거대한 지는 짐작되는 한유진 매니저의 대답이 기억난다. 그 답으로 이 글을 끝맺으면 좋을 것 같다. “에어비앤비에서는 디자이너들이 리액트 코드를 생산하여 엔지니어들에게 넘기는 것으로 알고있는데, 제품 디자이너와 엔지니어의 협업 및 관계는 어떻게 이루어지나요?”라는 질문에 한유진 매니저는 “아 그런가요? 그건 저도 처음 들었네요”.
