디자인 시스템 스터디 (1)
작년 11월, 한유진 에어비앤비 디자인 시스템 총괄님의
‘에어비앤비의 디자인 시스템’ 을 듣고왔습니다.
마침 회사에서 디자인 시스템을 만들고 있었고
디자인 시스템의 필요성과 실제 적용하는 방법, 디자인 시스템을 만드는 디자이너들간의 협업 방식 등 다양한 궁금증이 있어 참여하게 되었습니다.
해당 컨퍼런스는 CABOOKS가 주최하는 디자인 컨퍼런스 ‘CA CON’ 이었습니다. 다양한 주제로 개최되고 있으니, 관심있는 분들은 확인해보셔도 좋을 것 같아요.
CA CON-86 : 에어비앤비 디자인 시스템
한유진 에어비앤비 디자인 시스템 총괄
Session 1 : 왜, 디자인 시스템이어야 하는가?
Session 2 : 디자인 시스템 케이스 스터디
Session 3 : 해외에서 디자이너로 살아가기
Session 1 : 왜, 디자인 시스템이어야 하는가?
1, 디자인 시스템이 필요한 이유
디자인 시스템에 대해 알기 전, 먼저 디자인 프로세스에 대해 이해해야한다고 합니다. 디자인 프로세스는 회사마다 나라마다 다를 수 있는데, 우리가 흔히 알고있는 디자인 프로세스는 4다이아몬드로 설명할 수 있습니다.
그 중 디자인 시스템이 필요한 이유는 2단계에서 찾아볼 수 있습니다.
2단계는 무드보드만들기-UI스타일가이드제작-실제목업작업 이렇게 3스탭으로 구성되어있습니다.
- 무드보드 만들기: 디자이너들이 디자인 톤과 컨셉을 잡기 전, 머리에 떠오르는 이미지나 컬러 팔렛을 서로 공유하기 위해 시각적인 요소들을 모으는 작업(에어비앤비의 경우, 생기있지만 너무 활동적이지 않고, 명료하지만 딱딱하지 않은)
- UI스타일가이드제작: 실제 목업에 앞서 가장 간단한 UI요소들을 정의하고 ,클라이언트들이 쉽게 이해할 수 있도록 컬러계획이나 타이포그래피가 브랜드와 어떻게 어울리는지 등을 커뮤니케이션하기 위한 단계
- 실제목업작업: 요소 및 컬러 선정, 위치 선정 등 디테일학 작업들
이 과정들을 진행할 때, 한 명의 디자이너가 무드보드부터 목업까지 진행한다면 문제가 없을 것입니다. 그런데 그 팀이 열명 혹은 백명 단위로 인원이 많아진다면 어떨까요?
각 팀이 유저플로우를 세분화해서 작업하는 경우, ‘한 팀은 검색만, 한 팀은 제품 리스트만’ 이렇게 작업한다면 그리고 더 나아가 프로덕트가 IOS/And/Web 이렇게 더 세분화된다면 어떨까요?
세분화되고 일정이 짧아질수록 각 팀들은 빠르게 스프린트를 달려야하는데, 이렇게되면 다른팀과 디자인을 sync할 시간이 줄어듭니다.
실제로 에어비앤비에서도 위에 보시는 것처럼 Radius나 브랜드컬러의 세세한 코드들이 다 달라졌습니다. 웹과 앱에서 다른 아이콘을 사용하는 경우도 있었고요. 이런 일을 에어비앤비에서만 겪은 것은 아닙니다. 트위터에서도 서로 다른 블루컬러를 사용하고 있었다고 합니다.
2, 왜 이런일이 발생했는가? 왜 디자인시스템이 필요한가?
1) 다양해지고 복잡해지는 제품들
에어비앤비가 제공하는 제품이 home/experience/restaurant/lux 등으로 다양해지면서, 각각 비지니스에 맞는 디자인이 추가됨
2) 성장하는 제품과 디자이너의 규모
비지니스가 늘어나면서 팀의 규모도 커짐
3) 빨라지는 제품 개발 싸이클
트립어드바이저의 경우 2주 간격으로 업데이트를 진행하고 있음. 이처럼 사용자들의 반응에 맞춰 서비스를 빠르게 업데이트하다보니, 디자인 간 sync를 맞출 시간이 줄어듦
4) 성숙해지는 디자인 시장과 고객들의 높아지는 기대
디자인을 보는 사용자들의 눈이 높아짐
> 시스템을 만들어서 디자이너들이 아무리 바쁘고 팀들이 쪼개지더라도, 하나의 시스템에 맞춰 작업을 해야겠다.
> 이케아는 누가 만들어도 예쁘다. 나사 접합부터 이를 조이는 툴까지 다 들어있고, Do/Don’t에 관한 설명도 잘 나와있다. 디자인시스템도 같다. 누가사용해도 쉽게 사용할 수 있고 재사용할 수 있어, 제품을 빠르고 쉽고 일관되게 만들수있도록 도와준다. 색상 타이포 아이콘 버튼 등 가장 기본이되는 부터 팝업까지 정해진 룰을 공유하게된다.
3, 디자인 시스템이란 무엇인가?
• A set of shared&integrated patterns and principles that defines the overall design of a product.
제품 전체적인 디자인을 구성하는 공유된 통합 패턴 및 원칙들의 모임
• A design system is a collection of reusable components guided by clear standards.
디자인 시스템은 명료한 기준을 통해 재사용되는 컴포넌트들의 모임
디자인시스템은 명확한 가이드라인에따라. 재사용되는 콤포넌트들의 조합으로 여러 사람이 한 사람이 만든것처럼 디자인을 하는데 큰 도움을 준다.
— 한유진 에어비앤비 디자인시스템 총괄
4, 디자인 시스템 구조
- Foundation: 가장 기본 단위 (색, 아이콘, 스타일 등 개별 에셋)
- Components: 재사용이 가능한 단위, Foundation의 조합
- Template: 목적을 가진 Components와 Foundation의 구성 조합
- Page: 특정 Template들의 예시들로 이루어진 레이아웃
5, 디자인 시스템에 대한 오해
- Given design, set-up 이미 만들어진 디자인과 셋업
- Limitation, inflexible 제한성, 유연하지 않음
6, 디자인 시스템의 장점
- Consistency 일관성
- Reusability 재사용
- Velocity 신속함
- Gain time to focus on the innovative ideas
혁신적인 아이디어에 집중할 시간을 벌게 됨
> 이미 정해진 부분에 대해 빠르게 대응할 수 있어, 새로운 아이디어와 디자인을 하는데 시간을 벌어준다.
> 정해진 콤포넌츠들이라도 조합하여 쓰는 방법에 따라 새로운 디자인이 될 수 있다.
Session 2: 디자인 시스템 케이스 스터디
1, 타 디자인 시스템
1) Material Design
디자인시스템의 바이블. 14년전에 오픈했으며, 양이 많고 자세함.
https://material.io/design/
2) Carbon Design System (IBM)
디자이너와 개발자 모두를 위한 디자인시스템.
간결하고 임팩트있는 내용 구성이 특징.
https://www.carbondesignsystem.com/
3) Polaris Design System (Shopify)
카테고라이징이 잘 되어 있어,
각 상황에서 어떤 디자인을 사용해야 하는지 잘 가이드되어 있음.
https://polaris.shopify.com/
2, 에어비앤비 디자인 시스템
January 2016
앞서 말한 이유들로, 디자인 시스템의 필요성을 인식, 디자인 시스템 도입하게 됩니다.
(번역)
1) 접근성에 대한 고민
웹의 힘은 그 광범위함에 있다.
장애에 관계 없이 모든 사람이 접근할 수 있다는 것이 절대적인 장점이다.
— 월드와이드 웹의 창시자인 팀 버너스
정보 접근성이란 모든 사용자들이 정보와 기능에 동등하게 접근하고 편리하게 이용할 수 있도록 보장하는 것입니다.
접근성 가이드라인은 KWCAG 2.1(Korea Web Contents Accessibility Guideline)과 모바일 애플리케이션 콘텐츠 접근성 지침 2.0에서 확인하실 수 있습니다.
접근성 가이드를 준수하기 위해, 기존 브랜드 컬러로 사용하던 raush(핑크색) 컬러 사용을 줄이고, 대안으로 babu(청록색) 컬러를 주로 사용하고 있습니다.
2) Core Library + Flexibility
- Core library: 전반적으로 사용. 접근성 등의 테스트를 거친 글로벌한 컴포넌트들의 모임
- Team library: 팀별 비즈니스에서 필요한 개별 컴포넌트들의 모임
> 둘 사이의 간극을 줄여나가는 것이 필요
3) Relationship
에어비앤비는 팀마다 디자인 시스템 담당자(?)를 만들어, 디자인 시스템 팀과 2주에 한 번씩 모임을 가진다고 합니다. 실무에서 디자인 시스템을 적용할때 일어나는 고충과 아이디어를 공유하는 자리라고 합니다.
4) Localization
로컬라이제이션(현지화)는 글로벌 제품을 사용자들의 현지 문화에 맞게 그 측성을 맞추는 것입니다. 문화적, 정치적, 사회적 특성에 맞춘 특화에 초첨을 맞춰 진행한다고 합니다.
위 이미지는 각국마다 ‘검색'에 해당하는 단어의 길이가 달라 발생하는 이슈들인데요, 이런 부분을 잘 고려하여 디자인에 반영하는 것도 중요합니다.
session3 은 한유진님께서 해외에서 디자이너로 지내며 공유하고 싶었던 이야기들로 구성되어있었는데, 매우 도전적이고 자극을 받는 시간이었습니다. 다만, 한유진님의 개인적인 이야기라 생각되어 정리하지 않았습니다.
디자인 시스템을 만드는 중인 제게 큰 도움이 되는 강의였습니다. 디자인 시스템을 만드는 목적과 중요성에 대해 스스로 명료하게 정리할 수 있었습니다. 디자인 시스템의 중요성 리마인드를 위해 팀 내에도 공유했었는데요, 모두들 다시 한 번 파이팅을 다지는 시간이었습니다:)
