에어비앤비 디자인 시스템 알아보기
에어비앤비 디자인 시스템 비하인드 스토리
관련 URL : https://www.cabooks.co.kr/product/airbnb
세미나 주제 : 어떻게 에어비앤비는 효율적이고 일관된 디자인 시스템을 구축할 수 있었을까요? 에어비앤비 디자인 시스템 총괄자가 말하는 에어비앤비 디자인 시스템 비하인드 스토리. 또, 에어비앤비 디자인 시스템 매니저가 되기까지의 생존법을 공개
일자 : 2018.11.02
장소 : 건설공제조합 대회의실 2F
주관 : CA
에어비앤비 디자인 시스템
한유진 - 에어비앤비 (디자인 시스템 총괄 책임자)
19년 차 UI/UX 디자인, 시스템 디자인
서울에서 7년, 뉴욕에서 3년, 런던에서 8년, 샌프란시스코에서 8개월 경력
session 1
왜, 디자인 시스템이어야 하는가?
중요 Point!
디자인 시스템은 나라마다, 각 팀마다 다를 수 있다.
흔히 디자인 시스템 프로세스를 진행하는 데 있어 4단계의 과정을 거친다고 한다.
첫째, Discover. 디자인 리서치 및 인터뷰 단계
둘째, Define. 데이터 분석, 문화 이해와 디자인을 통한 아이디어 컨셉 정의 및 리뷰 단계
셋째, Develop. 디자인 구체화, 프로토타이핑, 개발 단계
넷째, Deliver. 제품 전달, 사용자 검증, 테스트 및 피드백, 수정 및 보안 단계
(4D라고 생각하면 쉽게 기억에 남을 수 있을 것 같다.)
4단계 중 두 번째 단계인 Define에 대해 더 자세히 살펴보자면 처음 디자인 시스템을 설계하기에 앞서 초안을 잡을 때 'Moodboard'를 많이 활용한다고 한다. ('Moodboard'가 무엇이냐 하면 콜라주 형식의 이미지 그리고 타이포그래피, 아이콘, UI 등의 샘플로 구성된 콜라주로 시각적인 요소를 모아서 분석하는 기법이다.)
컨셉 설정에 앞서 특정 분위기를 잡기 위해 활용하는 자료로 쓰며 에어비앤비하면 이러한 이미지, 컨셉일 것 같아요 라는 생각들을 Moodboard를 통해 쉽게 공유하고 설계할 수 있는 단계이다.
그다음 진행사항으로는 'UI Style Guide'를 작성한다. 스타일 가이드에서는 컬러에 대한 계획, 타이포그래피, UI 요소 샘플들이 포함되어 있다. 이 단계의 가장 큰 장점으로는 문제를 해결하기 전 디테일한 작업에 신경 쓰는 시간을 많이 줄일 수 있다는 장점이 있다.
스타일 가이드 작업 후 실제 목업 관련 작업을 진행하게 되는데, 여기서 문제점이 발생하는 경우가 있다. 만약 팀 단위로 나뉘어서 제품의 모든 디자인을 만들게 된다면 어떻게 될까 생각을 해보자. 비슷한 결로 만들어질 수도 있고 각 팀마다 다르게 만들어질 수도 있다. 또한 OS별로 나뉘고 세부적인 페이지별로 나뉘게 된다면? 점점 더 싱크 되는 비율이 적어지고 제품의 통일성이 없어질 수도 있게 된다. 에어비앤비의 경우도 사실 예외는 아니었는데, 여느 다른 제품들과 마찬가지로 여러 디자이너들이 공통된 약속 없이 각 팀마다 작업하는 방향이 달랐고, 오로지 스프린트에 맞춰 빠르게 업데이트하는 데에만 중점을 맞추었다. (이 부분에서 비유를 들어주셨는데, 바쁜 스프린트 일정을 소화하기 위해 달려가는 경마장의 말과 같은 상황이 발생한다고 한다. 경마장의 말은 주위를 볼 수 없고 오로지 한 곳만 보고 달려가기 때문에 이러한 비유를 들어주신 것 같다.)
일례로 컬러 측면에서도 정해진 메인 컬러가 있었지만 각 팀마다 조금씩 다른 컬러를 사용하고 있는 것을 발견했다. 이는 에어비앤비만의 문제가 아닌 다른 회사에서도 찾아볼 수 있었다. 같은 프로덕트를 만드는 회사임에도 불구하고 각각의 OS마다 미세하게 다른 컬러, 아이콘이 적용되어 있었다. 이는 디자인팀에서 발생하는 문제뿐만 아니라 개발적인 측면으로 봤을 때도 웹 팀, iOS 팀, 안드로이드 팀 등 각각 따로 작업을 해서 오차가 생기는 부분이 많이 발생했다.
그렇다면 왜 이러한 문제들이 생기게 되는 걸까?
많게는 4가지 이유가 있다.
첫째, 점점 더 복잡하고 다양해지는 제품들.
에어비앤비는 숙소와 관련된 제품만을 제공했지만 점점 더 다양해지는 제품이 생겨나면서 각기 다른 디자인을 적용하게 된다. 비즈니스가 점점 더 많아지면서 팀들이 세분화되고, 이는 곧 협력하는 일들이 조금씩 줄어들게 되는 상황에 이르게 된다.
둘째, 성장하는 제품과 디자인팀의 규모.
회사가 성장함에 따라 다양한 제품 서비스가 생기고, 해당 제품을 디자인하는 팀의 규모 또한 커지게 된다.
셋째, 빨라지는 제품의 개발 사이클. 빠른 제품 개발.
빠른 제품 개발 사이클을 돌려서 사용자들에게 정말 맞는 서비스를 찾기 위해 빠르게 진행하고 있으며 다른 팀과 어떻게 더 협업하고 맞추기 위해 회의를 한다기보다 스프린트 일정에 맞추어 달려가기만 할 뿐이다.
넷째, 성숙해지는 디자인 시장과 고객들의 높아지는 기대.
비 디자이너들도 제품에 대한 기대감이 높아지고 있다. 이러한 현상들로 인해서 시스템을 만들어서 공유하고 작업하는 방향으로 만들어 보자는 생각에 디자인 시스템이 등장하게 된다.
디자인 시스템이라고 하면 뭔가 거창해 보이고 대단해 보이지만 사실은 그렇지 않다. 이케아는 누가 만들어도 정말 실용적이며 한결같이 이쁘고, 쉽고 빠르게 만들 수 있도록 고안되어있다. 디자인 시스템도 마찬가지다. 정해진 룰을 사람들이 쉽게 알아듣게 하고, 재 사용하게끔 만들어서 여러 팀 혹은 여러 디자이너들이 정말 제품을 빠르고 쉽고 일관적으로 만들 수 있도록 도와준다. 기본이 되는 색상, 타이포그래피, 아이콘, 복잡한 팝업이라던지 정해진 룰을 공유한다. (생산성에 있어 확실히 큰 도움을 주는 것 같다.)
디자인 시스템은 한마디로 제품의 전체적인 디자인을 구성하는 공유된 통합 패턴 및 원칙들의 모임이라 할 수 있다. 목적은 디자인 시스템은 일관적이고 효율적이며 심미적인 디자인 제품을 빠르고 쉽게 만들게 할 수 있어야 한다.
디자인 시스템 구성요소
Foundation > Components > Template > Page
디자인 구성요소에 대한 자세한 설명은 Atomic Design 참고
디자인 시스템을 잘 활용하기 위해선 디자이너와 개발자들이 시스템에 맞는 규칙을 알고 상황에 따라 시스템을 활용할 수 있도록 해야 한다. 그래야만 조화롭게 운영이 되고 사용될 수 있다고 한다. 중요한 점 중 하나는 디자인 시스템은 규칙과 룰이 주관적 이어선 안되고, 객관적이어야 하며 모든 사람들이 봤을 때 이해하기 쉽도록 제작되어야 한다.
디자인 시스템의 장점으로는 (일관성 / 재사용 / 신속함 / 혁신적인 아이디어에 집중할 수 있는 시간을 벌게 됨) 크게 4가지가 있다. 여기서 중요한 포인트는 일관되게 적용된 디자인 시스템 때문에 혁신적인 아이디어를 낼 수 있는 시간이 줄어들 것 같다는 의견도 있지만 사실은 디자인 시스템 덕분에 더 혁신적인 아이디어에 집중할 시간을 갖게 되는 계기가 된다. 사소한 고민의 시간을 줄여 오히려 사용성에 더 시간을 투자할 수 있기 때문이다.
디자인 시스템의 단점으로는 만들어진 디자인과 셋업을 사용해야 하며 일정 부분의 제한성과 유연하지 않다는 점이 있다. (이 부분에 대해서는 디자인 시스템의 단점이 아닌 오해라고 강조하고 있다.)
session 2
에어비앤비 디자인 시스템 케이스 스터디
잘 설계된 다른 회사의 디자인 시스템 (구글 머터리얼, IBM의 Carbon, Shopify)을 비교하고 에어비앤비 디자인 시스템 설계 과정을 공유한다.
에어비앤비는 회사가 커짐에 따라 점점 더 많은 기능이 생겨나고 그에 따른 제품의 일관성이 없어지게 된다. Feature들은 플랫폼마다 다르게 적용되었고 이는 디자이너들 뿐만 아니라 개발팀에서도 각기 다르게 적용되었다. 제품이 복잡해지고 팀의 규모가 커지면서 한 사람이 일일이 디렉팅 하기엔 규모가 너무 커졌기 때문에 정형화된 가이드라인이 필요하다는 생각으로 디자인 시스템을 도입하게 된다. (2016년 1월 도입)
프로세스로는 프로덕트 전체 화면을 스크린샷 찍어서 분석하고 새로운 비주얼 스타일을 적용해본다. 브랜드 컬러를 사용하지 않고 다른 컬러를 사용하는 이유는 접근성에 대한 이슈가 있기 때문이다.
접근성에 대해 많은 생각을 하는 회사일수록 디자인에 대해 깊은 이해를 갖고 있다는 증거로 볼 수 있다. 접근성이란 사용자의 신체적 특성이나 지역, 성별, 나이, 지식수준, 기술, 체험 등과 같은 제한 사항을 고려하여 가능한 많은 사용자가 불편 없이 이용할 수 있도록 제품, 서비스를 만들어 제공하고 이를 평가할 때 쓰이는 말이다. 브랜드 가치를 높게 사서 브랜드 컬러를 사용하는 것도 중요하지만 접근성을 고려해 메인 컬러(Rausch)가 Babu 컬러로 일정 부분 바뀌게 되었다고 한다. (Rausch 컬러는 상당히 매력적인 컬러이지만 시인성 부분에서 다른 컬러보다 낮기 때문에 시인성이 좋은 Babu 컬러로 일정 부분 바뀌고 있다고 한다.)
컴포넌트 시스템을 흔히 레고 블록 시스템이라고 부르는데, 이는 반복되는 컴포넌트들의 조합으로 제품이 일관적이고 빠르게 만들어지는 장점이 있다. 개발자들의 코드 또한 컴포넌트의 구성과 맞게 동등하게 구성되며 어떠한 플랫폼이더라도 일률적인 적용이 가능하게 된다. (안드로이드라고 해서 구글 머터리얼 가이드에 맞게 디자인을 적용하지 않았고, iOS라 해서 애플 가이드라인을 따라서 적용하지 않았다고 한다.) 이는 곧 어떠한 사용자가 어떠한 OS를 사용하더라도 혼란 없이 기존의 사용자 경험을 그대로 갖고 쉽게 사용할 수 있음을 의미한다.
그렇다면 과연 디자인 시스템은 어디까지 정의해주어야 할까? 어떤 디자인 시스템이 현재 회사나 제품이 필요한지에 따라 다르게 적용될 수 있다. 처음 프로덕트가 하나만 있었을 때는 컴포넌트라던지 가이드가 아주 잘 Working 되었지만 비즈니스가 더 많아 짐에 따라 간소화해야 하는 필요성이 생기게 됐다. 디자인 시스템에 있어서 가장 중요한 점은 바로 Relationship이다. 시스템에 대해 잘 이해하고 있는 협업자들 간의 관계가 중요하다.
Q&A
Q1. 디자인 시스템에서 가장 중요하다고 생각하는 부분은 무엇인가?
A. 베이직한 요소(컬러, 타이포그래피, UI 요소 등)들이 잘 구성되어야 하며 디자인과 코드에 있어 일관성이 있어야 한다. 그리고 좋은 협업 관계를 유지해야 하며 시스템에 대한 이해와 주기적인 업데이트 및 사용을 꾸준히 해야 한다.
Q2. 해외에서 일하는 UI 디자이너는 기획에 어느 정도 참여를 하는지? 개발자들과 어떻게 협업을 하는지 궁금합니다.
A. 해외에서는 UX, UI, 기획을 모두 통틀어서 Product Designer로 칭하며 해외에서는 이에 대한 수요가 많다. 협업에 대해서는 개발자, PO, 디자이너, 클라이언트 모든 사람이 스프린트 첫째 날부터 함께 토론하고 작업하게 끔 만들었던 프로젝트들이 가장 좋았습니다.
Q3. 디자인 시스템은 언제 도입해야 할까요?
A. 린 사이클처럼 디자인 시스템도 주기적인 수정, 보안 작업이 필요하며 쉽게 이용할 수 있는 명료한 가이드가 필요하다. 가장 베이식하고 중요한 부분에 중점을 두어 유연하게 만들어 각 Feature들에 창작적인 디자인을 할 수 있도록 자유를 주는 방법도 좋은 방법이다.
Q4. 에어비앤비 디자인 프로세스
A. 하나의 정해진 프로세스로 정의되지 않고 팀마다 다르게 적용되어 사용한다. 대부분 애자일 프로세스를 따르고 스프린트를 사용해 작업한다.
Q5. 디자인 시스템을 구축하기에 앞서 디자인적 사고를 하지 않는 기업에서는 어떻게 설득을 할 수 있을까?
A. 디렉터나 임원진의 서포트가 굉장히 중요하다. 그분들의 이해가 부족하면 디자인 시스템을 만들고 싶어도 많이 힘든 경우가 많다. 감성적인 접근 대신 객관적인 수치를 활용해 접근하는 것이 중요하다. 예를 들면 디자인 시스템 도입으로 매출에 도움을 주거나 비즈니스에 도움을 주는구나 라고 어필하는 방법.
Q6. 주기적인 디자인 시스템 업데이트를 할 때에 의사결정의 기준은 무엇인가?
A. 다수결도 시도해봤지만 이는 아닌 것 같다. 디자인은 정말 주관적인 거여서 유저 테스팅을 통해 디자인을 검증해보는 과정을 거친다. 나를 위한 디자인이 아닌 유저를 위한 디자인이기 때문에 이러한 방법이 적합한 것 같다.
세미나를 통해 느낀 점
다른 회사의 여러 디자인 시스템을 참고하고, article을 통해 개인적으로 디자인 시스템에 대해 정의했던 부분을 이번 세미나를 통해 상당수 검증해볼 수 있어 좋은 계기가 된 것 같다. 현재 우리가 작업하면서 고민하고 있는 부분들이 다른 회사에서도 똑같이 겪었던 일이라고 하니 앞으로 더 나은 방향으로 나아가기 위한 방향성을 제시받은 것 같아 확신을 갖고 작업을 진행해 나갈 수 있을 것 같다.
지금껏 들었던 디자인 세미나 중에서 가장 유익했고, 모든 세션이 현재 나에게 있어 큰 자극을 주어 개인적으로도 너무 뜻깊은 자리였다.
그림 그리는 디자이너 애런
