[퍼온 글] 에어비앤비 디자인 시스템 요약

2018년 11월 2일 에어비앤비 디자인 시스템 총괄 매니저 한유진 님의 강연 중

Session 1,2,4를 요약한 글입니다.

 

목차

Session 1. 왜 디자인 시스템인가?

Session 2. 에어비앤비 디자인 시스템 케이스 스터디

Session 4. 질의응답

Session 1. 왜 디자인 시스템인가?

---

디자인 진행 단계

일반적인 사용하는 디자인 프로세스 discover — define — develop — deliver 중 define의 단계를 살펴봄

1. Mood board 작성

• 콜라주 형식의 이미지, 타이포그래피, 아이콘, ui 샘플 등 시각적인 요소들을 모아서 분석하는 기법
• 실제 디자인 또는 콘셉트 설정에 앞서 특정 분위기들을 설정하고 공유하기 위한 자료
• 무드 보드가 좋은 이유는 콘셉트 설정 시 같은 단어를 말하더라도 디자이너마다 떠오르는 이미지들이 다름. 상대방과 가장 쉽게, 빠르게 아이디어를 공유할 수 있음

ex) airbnb : 생기 있지만 너무 활동적이지 않음. 명료하지만 딱딱하진 않음. 부드럽지만 유치하지 않은 색상과 아이콘과 분위기

2. UI style guide 작성(moodboard와 mockup의 중간단계)

• 구성 : color 계획, 제품의 typography, 가장 간단한 User interface 요소 활용
• 장점 : 문제를 해결하기 전 디테일한 작업에 신경을 쓰는 시간을 줄일 수 있음

3. Interface design

• 작은 규모의 디자인 팀이라면 상관없겠지만, 100명, 200명 등 대규모의 디자이너들이 함께 일한다면, 각 팀이 분리되어 있다면 각 팀이 다른 방향으로 진행해서 통일성이 깨질 수 있음

ex) flow 마다 팀이 구성되어 있다면, 결제 flow에서 사용되는 버튼, 타이포그래피 등 디자인 룰이 제품리스트에 사용되는 룰과 같을 수 있을까? 회사가 커질수록 sync 되는 비율이 점점 줄어들 것임. 그리고 iOS, 안드로이드 등 플랫폼 별로 또 팀이 나눠진다면? 더 세분화되고 더 작아지고 더 많은 팀이 작업을 해야 한다면, 혹은 그 프로덕트가 점점 더 디테일 해지고 더 많은 유저의 니즈를 해결하려고 노력한다면?
> 서비스가 더 세분화되고 각 팀이 더 바쁜 일정으로 sprint 하기 때문에 각 팀이 함께 맞추는 시간이 줄어듦.

• airbnb : 디자이너들이 공통된 약속 없이 유저에 맞춰서 빠르게 sprint 진행했었음. 그 결과 안드로이드, iOS, 웹 모두 각기 다른 스타일의 버튼과 색상, 아이콘을 사용하고 있었음

---

이런 문제들이 4가지 생기는 이유

1. 점점 더 복잡하고 다양해지는 제품들

• airbnb 내부에서도 home / experience / restaurant / lux 등 다양한 비즈니스로 확산되었고, 그 비즈니스에 맞춰 각자 다양한 디자인을 만들어 냈음. 그에 따라 팀이 세분화되고 많아지면서 협력이 줄어들게 됨

2. 성장하는 제품과 디자인팀의 규모

• 비즈니스를 늘리면서 디자인팀의 규모도 늘어남

3. 빨라지는 제품 개발 사이클

빠른 주기로 업데이트하며 사용자에게 맞는 서비스 제공하려 하기 때문에 디자인 sync를 맞추고 고민하기보다는 경주마처럼 앞으로만 감

ex) tripadvicer : 2주 간격 업데이트 / pinterest: 매주 업데이트

4. 성숙해지는 디자인 시장과 고객들의 높아지는 기대

• 사용자들도 점점 눈이 높아지고 있음.

> “아무리 시간이 없더라도, 하나의 디자인 시스템에 맞춰 디자인을 해보자”로 귀결.

ex) IKEA : 어느 상품이던 나사, 접합 부분 등을 동일하게 만들어 누가 만들어도 깔끔하고 예쁘고, 무엇보다 쉽고 빠르게 만들 수 있음.

• 디자인 시스템으로 정해진 룰을 쉽게 공유하고, 재사용하게끔 만들어서 여러 팀이 디자인을 쉽고 빠르고, 일관되게 만들 수 있도록 함.

---

Design system

1. 정의

• airbnb : 제품의 전체적인 디자인을 구성하는 공유된 통합 패턴 및 원칙들의 모임
• invision : 디자인 시스템은 명료한 기준을 통해 재사용되는 컴포넌트들의 모임

2. 목적

• 디자인 시스템은 일관적이고 효율적이고 심미적인 디자인 제품을 빠르고 쉽게 만들 수 있도록 한다.
• 마치 ‘한 사람이 만든 것처럼’

3. 구조

• foundation > component > template > page로 구성

(자세한 것은 atomic design 참고 )

1)foundation : 가장 기본이 되는 단위(색상, 모양, 타이포그래피, 아이콘, 모션, 등 스타일과 개별 에셋 포함)
2) component : 재사용이 가능한, 재사용을 위한 작은 디자인 그룹과 코드 모음. 컴포넌트들이 모여 인터페이스를 구성함

3) templete : 목적(ex. 검색바 — 무엇을 찾고 싶다)을 가진 component와 foundation의 조합

4) page : 특정한 template들의 예시들로 이루어진 레이아웃

4. 업데이트 주기

• 피드백(ex. 디자인 시스템으로 디자인해봤는데 일부 프로덕트 페이지에 맞지 않는 경우)을 받아서 디자인 시스템도 늘 업데이트해야 함
• 예를 들어 타이포를 변경 > 포함 컴포넌트 변경 > 모든 디자인에 일률적으로 적용시켜 전반적으로 디자인 업데이트

5. 시스템 가이드 및 사용 룰 제공

• 컴포넌트들이 주어져도 적용되는 규칙을 알아야 모든 시스템에 조화롭게 사용될 수 있음
• 각 회사는 유저에 맞게 디자인 시스템을 만들기 때문에 적용되는 규칙이 다를 수밖에 없음.
• 가이드와 룰은 객관적이고 명확해서 모든 디자이너들과 개발자들이 이해하기 쉬워야 함
• 특히 사용 룰(ex. do/don’t 버튼 상태, primary 버튼 — 페이지당 1개/ secondary — primary 버튼을 이미 쓴 경우)을 공유하는 것이 아주 중요함

6. 디자인 시스템의 장점

1) 일관성 : 한 사람이 만든 것처럼
2) 재사용
3) 신속함 : 일일이 만들지 않고 만들어진 컴포넌트들을 가져다 바로 쓸 수 있으므로 신속히 디자인 진행 가능
4) 혁신적인 아이디어에 집중할 시간을 벌게 됨 : 디테일한 부분보다 아이디어에 집중할 시간을 벌게 됨. 모든 디자이너와 개발자가 모두가 디테일한 것(ex. 버튼 색상, radius 값 등)을 생각할 시간에 사용성 같은 더 중요한 부분에 신경 쓸 수 있음

7. 디자인 시스템에 대한 오해

이미 만들어진 디자인과 셋업을 이용하기 때문에 제한적이고 유연하지 않다? 
디자인 시스템 한 팀이 만든 것을 나눠서 쓰기 때문에 다른 디자이너들의 창작적인 도전을 방해한다?

• 디자인 시스템을 사용해 불필요한 시간을 줄이고, 대신 좋은 아이디어와 피쳐를 서비스에 적용해 유저에게 제공하는 게 더 효과적이라 생각함

ex) IKEA : 부품은 정해져 있지만. 내 입맛에 맞게, 제 사용에 맞게 응용해서 원래보다 더 좋은 제품을 만들어낼 수 있다고 생각함

8.

• 디자인 시스템은 디자인 시스템 팀이 만들어서 단순히 배포하는 것이 아니라, 다른 팀의 피드백을 받아서 업데이트를 하고, 함께 일하는 문화를 만들어야 함.

디자인 시스템은 단지 컴포넌트들이 모여있는 툴이거나 json code의 집합이 아니다. 조직에 있는 모든 사람들의 응집력 있는 문화를 함께 만들어 가는 것이며, 그것은 단지 한 개의 정해진 헌신적인 팀의 노력으로만 만들어지는 것이 아니다.

Session 2. 에어비앤비 디자인 시스템 케이스 스터디

---

타사 디자인 시스템1. Google material Design

(https://material.io/design/)

• 가장 큰 design system 팀을 가지고 있음
• 계속 업데이트하고 있으며 초기에 비해 자세하고 너무(?) 많은 정보를 포함하고 있음
• design system계의 vible

2. IBM carbon design system

(https://www.carbondesignsystem.com/)

• 다른 곳은 디자이너 / 엔지니어 홈페이지가 분리되어 있으나 여기는 디자이너도 usage를 참고할 수 있고 엔지니어도 코드를 바로 복사, 붙여 넣기 해서 사용할 수 있음
• 가장 간결하고 중요한 내용으로 정리되어 있음

3. Shopify

(https://polaris.shopify.com/)

• 전자상거래 점유율 3위
• 다른 곳에 비해 특이한 점이 있다면, 버튼을 action이라는 타이틀로 묶어서 제공
• Web, Android, iOS 코드가 한 곳에 있어서 한 번에 참고할 수 있음

---

airbnb 디자인 시스템

(https://airbnb.design/building-a-visual-language/)

1. 디자인 시스템 도입 배경

• 초기엔 Web/ iOS /Android 디자인이 일관성이 없고, 각각의 피쳐가 달라서 새로운 피쳐를 더하거나 고칠 때 힘들었음. 개발자도 각자 작업했기 때문에 연동되어야 하는 피쳐가 더해질 때 많은 고충이 따랐음
• 제품이 복잡해지고 팀 규모가 커지면서 한 사람이 일일이 관리하기 힘들어짐.

> 공유된 가이드라인, 디자인 시스템 필요성 깨달음

• 2016년도에 디자인 시스템 도입
• 모바일 사용자수가 급격히 많아지면서 웹 first에서 모바일 first로 변경

2. 디자인 시스템 설계 및 적용 과정

1) 현재 화면을 모두 스크린 숏 찍어서 나열, 분석

2) 새로운 비주얼 스타일을 적용해서 기존의 디자인에 적용. 이때 접근성* 고려하여 변경하게 됨

3) 각각의 반복되는 부분을 나눠서 컴포넌트로 부르게 됨. 에어비앤비는 컴포넌트를 블록 하나하나로 설정하고 컴포넌트 이름을 개발자와 디자이너가 함께 공유

4) 타이포그래피, space, color 등 하나하나를 정의하여 모든 디자이너와 공유

5) 정의된 내용을 이용하여 일관적이고 빠르게 화면 디자인을 딘행함. 코드 역시 동등하게 구성되며 어떤 플랫폼, 디바이스던 간에 일관성 있게 적용됨

* 최근 에어비앤비 앱 내 브랜드 컬러(raush) 적게 사용된 이유 
1. 접근성(시각/활동/지각/청각 등 장애가 있는 사람들이 있는데 일반 사람들과 동일하게 서비스를 사용할 수 있게 하여 혜택을 고루 누릴 수 있게 함)과 관련한 부분. 기업으로서 luxury 한 부분.

2. 접근성을 고려하여 화면 내 대비율을 높이기 위해 raush(적색) 컬러를 어둡게 했으나 사용하기엔 약했고 브랜드 느낌과 맞지 않았음. 대안으로 babu(청록색) 컬러를 어둡게 해주로 사용 중임. 주 색상을 브랜드 컬러이면서 접근성을 충족할 수 있는 색상으로 변경하려 노력 중임

• Android / iOS 각각의 가이드 따르지 않고 모두 같은 디자인 시스템 적용함
  > 핸드폰(삼성 > 아이폰 / 아이폰 > 삼성)을 바꿀 경우 많은 사람들이 처음에 헷갈려하는데, 이렇게 함으로써 어떠한 사용자가 어떤 핸드폰을 가지고 있더라도, 모바일을 사용하다가 pc를 사용한 경우에도 동일한 경험을 주기 위함.

3. 에어비앤비 내 디자인 시스템 라이브러리 구성

• 에어비앤비 내 많은 비즈니스들이 생기면서 정의된 컴포넌트가 모든 비즈니스, 유저 케이스를 커버할 수 없게 됨 > Core library / Team library 따로 구성

1) Core library : 디자인 시스템 팀 컴포넌트 , 전반적으로 사용되며 접근성, localization, 가독성 등 모든 테스트를 거친 글로벌한 컴포넌트들의 모임

2) Team library : 당장 비즈니스 팀마다 써야 하는 컴포넌트들 모임. 따로 관리함

• 팀 컴포넌트들이 생기기 때문에 같은 패밀리룩을 유지할 수 있도록 명확한 가이드라인이 더욱 필요함

4. 디자인 시스템 가이드라인의 범위

• 정의된 디자인 시스템이 처음엔 잘 적용되었으나 비즈니스가 급격히 늘어나고, 비즈니스마다 요구하는 부분이 상이해서 최소한으로, 유연하게 적용할 수 있는 가이드라인, 룰을 계획하고 있음
• 따라서 회사마다 정해 주어야 하는 가이드라인 범위가 다를 수밖에 없음

5. 프로덕트 디자이너들과의 협력

• 디자인 시스템팀과 프로덕트 디자이너들과의 관계가 아주 중요함. 시스템을 계속 유지하고 업데이트하기 위해서는 실제 사용하고 있는 디자이너와의 협업이 필수적임
• 에어비앤비 내부에서 팀마다 디자인 시스템을 잘 이해하고 있는 디자이너와 파트너스 그룹을 만들어 2주에 한 번씩 모임을 가짐.

6. 협력 시 사용 툴

• 사용하는 툴 : design tools(내부 툴로 비공개), sketch, figma 사용하고 있음.
• sketch 장점 : 플러그인이 많음 / figma 장점: 다른 사람과 협업이 쉽고 간단함. 링크 하나로 작업하는 내용에 모든 사람이 접근할 수 있음

---

Session 4. 질의응답

Q. 디자인 시스템에서 가장 중요하다고 생각되는 부분

1) 디자인 시스템 자체의 탄탄한 구축(foundation, guide line…)
2) 디자인과 코드의 alignment : 개발자들과 공통된 언어(ex. 컴포넌트 이름 등)를 써야 함
3) 디자인 시스템 팀과 각 프로덕트 디자이너와의 협업 중요함.
4) 디자인 시스템 사용을 위한 이해와 교육을 꾸준히 해야 함

Q. 해외에서 일하는 UI 디자이너는 기획에 어느 정도 참여하는지

• 해외에서는 ux/ui/기획 모두 통틀어 product designer라고 함. 대부분 공고가 Product designer를 찾으며 딱히 ui 디자이너/ux를 따로 뽑지 않음. 셋 중 하나를 잘하는 경우 나머지를 배울 필요가 있음

Q. 개발자들과 어떻게 협업하는지

• 개인적으로 가장 좋아하고, 추천하는 프로세스는 coraborated process임. 개발자, po, 클라이언트(에이전시인 경우) 등이 모두 모여서 스프린트 첫날부터 한 주 동안 스프린트로 진행하는 게 좋다고 생각함.
• 개발자들과 처음부터 협의하면 개발 쪽의 트렌드라던지, 디자인이 어떻게 이용되는지 바로바로 협의할 수 있음
• 클라이언트가 어떤 프로세스를 거쳐서 이런 결과물이 나왔는지 알 수 있고 피드백을 바로바로 받을 수 있기 때문에 좋은 것 같음.
• 개발자들과도 한 팀에서 같이 진행하는 것이 추세이긴 함

Q. 디자인 시스템 리뉴얼 시점

• 항상 업데이트해야 함. 디자인을 lean cycle에 맞춰서 발전시키는 것처럼 시스템도 계속 업데이트해야
• 가장 쉽게 이해할 수 있고 명료한 가이드 필요하고 중요함. 가장 basic 하고 유연하게 시스템을 구축해서 각 디자이너들이 그들의 창작적인 디자인을 할 수 있도록 자유를 주는 것도 좋은 것이라 생각함.
• 시스템이 주어졌을 때 사용되리라는 기대를 버리고, 시스템을 사용하는 디자이너들과 적극적으로 관계를 가지려 노력해야 함

Q. 에어비앤비 디자인 프로세스

• 회사 전체에서 하나의 프로세스를 쓰지 않음. 팀마다 프로세스가 매우 달라서 팀을 옮길 때마다 배워야 함
• 대부분은 애자일 프로세스를 사용하고 있으며 스프린트를 이용하여 제품 디자인하는듯함

Q. 디자인 시스템은 어떨 때 구축해야 경영진의 반대를 받지 않는가? 적절한 시점은 어떤 때인가? 디자인적 사고를 하지 않는 기업에서는 어떻게 설득해야 하는가?

• 만드는 시점은 처음부터 해야 함. 개발 등 정리하는데 엄청난 시간이 들기 때문. 처음 구축할 때부터 만들어서 피드백을 받고 구축하는 것이 좋다고 생각함.
• 디자인 시스템을 유지하기 위해서는 임원진의 지지가 굉장히 중요함. 그러므로 디자인 시스템의 이점에 대해서 객관적으로 설득해야 함. 예를 들면 디자인 시스템이 실질적으로 매출이나 비즈니스에 미치는 영향을 설득함.

Q. 디자인 시스템 의사 결정 방식

• 디자인은 객관적인 게 아니어서 유저 테스팅을 추천함. 맞는 유저 그룹(시간이 없다면 비슷한 유저 그룹, 지인)에게 물어보고 그 결과를 믿는 편임.

Q. 디자인 시스템 팀이 독립적이어야 하는가

• 회사 규모에 따라 다를 것 같음. 팀의 규모, 디자이너에게 할당된 일의 양 등
• 디자이너가 팀에 속해있으면서 하니까 시간이 너무 적고, 다른 요청이 왔을 때 처리할 수 없었음
• 회사가 작은 규모이고 적은 사람들이 같이 하면 필요하지 않을 것 같음.

원문 링크

에어비앤비 디자인 시스템 요약