CACON-86 : 에어비엔비 디자인 시스템 어떻게 에어비앤비는 효율적이고 일관된 디자인 시스템을 구축할 수 있었을까? 그 디자인 프로세스와 함께 에어비앤비 디자인 시스템 매니저가 되기까지의 스토리를 한유진이 공개한다. Youtube_스케치 영상 일시 : 2018년 11월 2일장소 : 논현동 건설공제조합강연자 : 한유진 현재 에어비앤비 디자인 시스템 총괄 매니저19년차 UI/UX 디자이너이자 시스템 디자이너어스투, 구글, 스포티파이에서 근무했음서울 7년, 뉴욕3년, 런던 8년,샌프란시스코 8개월 활동 ‘시스템을 구축한다’는 말에는 딱딱하고 원칙주의적인 분위기를 떠올리기 쉽다. 규칙을 만들고, 그것이 제대로 적용되도록 하기 위해 테스트와 업데이트를 지속한다는 것은 창조적인 아이디어를 끊임 없이 갈구해야 하는 디자이너와는 너무 다른 세계의 이야기처럼 느껴질 수 있다. 하지만 에어비앤비 디자인 시스템 총괄을 맡고 있는 한유진 매니저는 ‘디자인 시스템을 이용하면 디자이너가 혁신적인 아이디어를 이끌어 내는데 도움이 될 수 있다’고 했다. 가치있는 디자인 이슈를 제안하는 강연 프로그램CA CON(씨에이콘)에서 한유진은 디자인 시스템이 왜 필요한가는 비롯해 에어비앤비 디자인 시스템을 구체적인 사례로 소개하고, 해외에서 디자이너로 살아남는 방법에 대해 자신의 체험을 이야기했다. 디자인 매거진 <CA>가 창간 20주년을 기념하여 기획한 이번 강연에서 그는 “스스로의 가치를 믿는 디자이너가 되기를, 그리고 상황에 굴하지 않고 당당하게 앞으로 나아가는 디자이너가 되기를 바란다.”고 조언했다. 디자인 매거진 <CA> 창간 20주년 기념으로 열린 CA CON 86회차 에어비앤비 디자인 시스템 강연장 모습. 700여 명 참석자 모두에게 고급 워싱 코튼 에코백이 증정되었다. ‘듬직한 큰 돌 하나 드리는 마음과 진지하고 듬직한 디자인하라는 바람’을 담은 콘셉트의 에코백으로 청, 적, 먹의 3가지 색으로 제작되어 700여 명의 참가자에게 증정됐다. 장문정(조지아주립대 그래픽디자인과 교수) 디자이너가 디렉션했다. 세션 1. 왜, 디자인 시스템인가? 각 팀이 각자의 방향으로 프로젝트를 진행시킬 경우, 혹은 모바일과 웹 등 여러 개의 플랫폼을 관리해야 할 경우가 발생한다고 가정해 보자. 서비스는 계속해서 복잡하고 다양하게 발전해 나갈 것이다. 또한 각각의 비즈니스에 맞춰 또 다른 디자인들이 계속 개발될 것이다. 이에 따라 팀들이 늘어나고, 규모가 커지게 되고, 애자일 개발 방식에 맞춰 업데이트의 주기 또한 짧아진다. 결국은 충분한 의견 조율이 이루어지지 않은 채 각 팀에서는 업데이트만을 지속하게 되는 상황이 만들어지게 된다. 또한 디자인 시장은 이미 성숙해져 있고, 고객들은 꼭 디자이너가 아니더라도 세심한 안목을 가지고 좋은 디자인을 요구하고 있다. 그렇기 때문에 제품이나 서비스 개발의 독단적 과속 현상과 고객들의 기대에 부응하기 위해서는 하나의 시스템을 만들어 관리하는 것이 중요하다. 디자인 시스템은 ‘서비스의 전체적인 디자인을 구성하는 공유된 통합 패턴 및 원칙들의 모임’이라고 정의할 수 있다. 즉, 디자인 시스템은 명확한 기준을 통해 재사용되는 컴포넌트들의 모임이다. 이는 일관적이고 효율적이고 그리고 심미적인 디자인 서비스를 쉽고 빠르게 만들 수 있도록 한다. 조직의 환경에 따라 다르게 적용되겠지만 일반적으로 디자인 시스템의 구조는 총 4개의 단계로 나누어 생각해 볼 수 있다. 색상이나 아이콘의 모양 등을 결정하는 기본 에셋인 파운데이션(Foundation), 그 파운데이션을 조합하여 만든 재사용이 가능한 단위의 컴포넌트(Components)가 있다. 그리고 앞의 두 구조를 구성하여 만든 조합으로 어떠한 목적을 가진 단위인 템플릿(Template)과 이 템플릿들의 예시들로 이루어진 레이아웃을 일컫는 페이지(Page)다. 디자인 시스템은 재사용을 전제로 하며, 일관성을 띈 디자인을 신속하게 만들어낼 수 있도록 해준다. 그렇기 때문에 이를 사용하면 혁신적 아이디어에 집중할 수 있는 시간을 벌 수 있다. 반면에 이미 만들어진 디자인이기 때문에 제한이 많고 유연성이 떨어진다는 오해의 여지를 주기도 한다. 그럼에도 불구하고 디자인 시스템은 조직에 있는 모든 사람들이 응집력 있는 문화를 함께 만들어나가는 유기적인 체계를 제공해 준다. 계속해서 피드백을 받을 수 있도록 해주고, 같이 일하는 사람들과 협업하면서 지속적으로 발전해나갈 수 있도록 해준다. 즉, 진행형의 문화다. 디자인 시스템이 필요해지는 요인들 점점 더 복잡하고 다양해지는 제품들 점점 더 빨라지는 제품 개발 사이클 점점 더 커지는 제품과 디자인 팀의 규모 점점 더 성숙해지는 시장과 높아지는 고객의 기대치 디자인 시스템의 장점 일관성- 한 사람이 한 것처럼 재사용- 모든 사람이 공유해서 사용할 수 있도록 신속함- 이미 만들어 놓은 컴퍼넌트를 손쉽게 가져다 쓰도록 혁신적인 아이디어에 집중할 시간을 벌어줌 세션 2. 에어비앤비 디자인 시스템 초기에 에어비앤비 서비스는 IOS의 태블릿 및 스마트폰, 안드로이드의 태블릿 및 스마트폰, 웹의 데스크톱과 모바일 등 총 6개 시스템 환경에서 제공되어 각각에 디자이너와 개발자가 투입되어 있었고, 제각기 다른 작업을 진행했다. 2016년에 1월에 에어비앤비는 처음으로 디자인 시스템을 도입하였고, 모바일 디자인을 우선으로 그 체계를 확립해나가기 시작했다. 하나의 컴포넌트를 하나의 블록으로 구성한 후, 각각의 블록을 조합하는 방식의 디자인 시스템을 개발하였다. 이렇게 구성된 페이지는 어떠한 환경에서 보아도 일관적일 수 있도록 고안되었다. 그러나 에어비앤비의 비즈니스가 확장되면서, 새로운 비즈니스 팀에서는 제각기 그들만의 팀 컴포넌트들을 개발하기 시작했다. ‘코어 라이브러리’, 즉 이전에 개발되어온 디자인 시스템은 글로벌한 테스트를 거쳐 모두에게 공유되고 있었지만, 새로운 팀에서 만들어진 컴포넌트들을 모은 ‘팀 라이브러리’는 개별적으로 만들어져 글로벌한 테스트를 거치지도 않았을 뿐만 아니라 전체에 공유되지도 않았다. 이 같은 문제점을 해결하는 방법으로 에어비앤비는 팀 라이브러리의 사용을 막는 것 보다는 객관적이지만 유연한 가이드라인을 제시하여 다른 컴포넌트들이 만들어지더라도 패밀리처럼 느껴질 수 있도록 하는 것을 택하였다. 이전에 사용하던 블럭 조합 방식에서 최소화된 룰과 유연한 레이아웃을 허용하는 방식으로 디자인 시스템의 개편을 계획하고 있다. 한편 에어비앤비는 브랜드 컬러인 밝은 오렌지 빛(Raush)에서 청록 빛(Babu)을 함께 사용하는 변화도 꾀했다. 이는 사용자의 지식 수준, 성별, 지역, 연령 등을 고려하여 접근성을 높이기 위한 디자인 시스템이다. 오랜지빛은 컬러 콘트라스트가 낮은 편이기 때문에, 이를 이용해 버튼을 만들면 가독성이 떨어진다. 이를 보완할 수 있는 청록빛을 보조 컬러로 설정하고, 이를 이용해 더 많은 사용자들이 쉽게 에어비앤비를 이용할 수 있도록 했다. 디자인 시스템에서 가장 중요한 것은 관계성이다. 에어비앤비에서는 각각의 디자인 팀에서 시스템을 잘 이해하고 있는 사람들이 2주에 한 차례씩 모이는 자발적 미팅을 가진다. 이를 통해 아이디어를 공유하고 참여를 유발하는 UXP 파트너스 제도이다. 디자인 시스템 팀에서 만든 시스템을 각 팀에게 전달하기보다는 각각의 팀간 파트너십을 통한 개발은 참여율을 높이고, 그 과정에서 디자인 시스템 프로세스의 중요성과 섬세함을 이해하게 된다. 세션 3. 해외에서 디자이너로 살아가기 유학을 가지 못했어도, 눈에 띄는 어떠한 스펙이 없었어도 이러한 자리에 설 수 있게 된 데에는 YOLO, 다시 말해 ‘한 번 뿐인 내 인생을 꿈의 날개로 날아오르자’는 다짐이 있었기에 가능했다. 영원한 멘토인 조각 1세대, 외할아버지가 멋진 작품으로 세상을 감동시켰던 것처럼, 자신도 전 세계 사용자들의 삶에 좋은 영향을 줄 수 있는 디자이너가 되는 것이 의미가 있을 것이라 생각했다. 그래서 세계 무대로 발자국을 내딛었다. 지금보다 해외 진출을 도와줄 방법이 많지 않았다. 영화에 나오는 것과 같은 삶은 고사하고, 기대보다 험했던 뉴욕의 물가와 환경에 좌절할 수밖에 없는 상황도 있었다. 그러다 천사처럼 나타난 동기의 예상치 않은 도움을 받기도 했다. 한국과는 너무 다른 업무 환경에서 충격도 받았지만 긍정적으로 받아들이고 즐기기로 했다. 누구나 해외에서는 위축될 수 있다. 모국어를 사용하지 않는 땅에서는 모든 것이 낯설기만 할 것이다. 하지만 그러한 환경과 상관 없이, 그 누구보다 자신의 가치를 믿을 수 있는 것은 자신뿐이다. 사람들은 가끔 자기 자신에게 늘 더 냉정하고 엄하기 마련이다. 칭찬을 맘껏 받아들이고, 자신이 원하는 목표를 향한 길을 올곧게 걸어가는 당당한 디자이너가 되길 바란다. 질의응답 Q. 디자인 시스템에서 가장 중요하다고 생각하는 부분은 무엇인가?A. 첫 번째는 견고한 시스템과 가이드라인, 두 번째로 디자이너와 개발자 사이의 연결성이다. 디자이너와 개발자 사이에 같은 언어를 공유하는 것은 중요하다. 세 번째는 시스템을 구축하는데 있어 디자이너들의 협업을 꼽을 수 있고, 마지막으로는 시스템에 대한 충분한 이해와 사용자를 위한 교육을 들 수 있겠다. Q. 디자인 시스템과 경영진의 마찰 혹은 디자인적 사고를 하지 않는 기업은 어떻게 설득해야 하는가?A. 디자인 시스템을 이해하도록 만드는 데에는 복잡한 논의와 긴 시간이 필요하다. 때문에 처음부터 모든 프로세스와 함께 이를 병행하여 진행하는 것이 좋다. 그러기 위해서는 객관적인 접근을 꾀하는 것이 좋다. 예를 들어 매출 상승에 관한 실질적인 수치를 제시하는 방법 등이 있을 것이다. Q. 디자이너로서 본인이 가지고 있는 장점은 무엇인가? 해외에서 취업할 수 있었던 장점은?A. 포트폴리오를 따로 만들지 않는다. 모든 작업을 포트폴리오에 들어갈 수 있을 정도의 퀄리티로 만들려고 노력했다. 그로 인해 짧은 시간에 높은 퀄리티의 작업을 해 낼 수 있는 노련함이 생겼다. 전체적으로 작업의 결과물에 높은 퀄리티를 유지하는 것이다. 예컨대, 시안을 만들 때 다른 동료가 4개를 하는 동안 20개 정도 서로 다르지만 수준 높은 퀄리리를 보여주었다. Q. 디자인 시스템을 진행하는 팀이 독립적으로 있어야 하는가?A. 회사 규모에 따라 혹은 디자이너 개인에게 할당된 업무의 양에 따라 다를 수 있다. 회사의 규모에 관계 없이 꼭 독립된 하나의 팀으로 존재해야 한다고는 말할 수 없다. 하지만 디자인 시스템을 담당하게 되는 디자이너의 작업 퀄리티에 지장을 주게 된다면 독립된 팀을 꾸리는 것이 옳다. Q. 코어 라이브러리를 업데이트를 할 때의 기준은 무엇인가?A. 디자인 시스템은 결과적으로 사용자에게 더 심미적이고 편리한 디자인을 제공하기 위해 존재해야 한다. 최대한 객관적이고 명확한 디자인 시스템을 만드는 작업이지만 여느 디자인 작업처럼 주관적인 의견이 대립하기도 한다. 그렇기 때문에 업데이트의 기준도 사용자 테스트가 가장 객관적인 판단일 것이다. Q. 결국 디자인은 기업의 아이덴티티를 형성하는 방법이라고 생각한다. 그 기업의 아이덴티티를 만들어 가는 절차는? 에어비앤비는 어떻게 하는가?A. 브랜드의 아이덴티티티를 담아낼 수 있는 가장 작은 요소부터 생각한다. 이 요소는 브랜드의 컬러나 메타포와 같은 방향으로 뻗어나갈 수 있다. 에어비앤비의 경우, 내부의 또 다른 파트 중 하나인 에어비앤비 프로덕트는 여러 가지 이유로 현재 에어비앤비 브랜드에서 사용하고 있는 아이덴티티디와 조금 다른 방향성을 취하고 있다. 이는 전체적인 브랜드의 아이덴티티를 깨는 것으로 볼 수도 있다. 그래서 점차 같은 방향성을 향해 가는 쪽으로 연구를 진행 중이다. 디자인 프로세스 4단계디자인 프로세스는 보통 4단계로 진행된다. 재료 발견(Discover : 디자인 리서치 및 인터뷰) 프로덕트 정의(Define : 데이터 분석, 문화 이해와 디자인을 통한 콘셉트 정의 및 리뷰) 개발(Develop : 디자인 구체화, 프로토타이핑, 개발) 결과물(Deliver : 제품 전달, 사용자 검증, 테스트 및 피드백, 주성 및 보완) 4단계에서 2번째 단계인 프로젝트 정의(Define)는 다시 다음의 3단계로 보통 이루어진다. 1) 무드보드 실제 디자인이나 콘셉트 설정에 앞서 이미지, 아이콘, 타이포그래피 등의 시각적인 요소들을 조사하여 콜라주 형태로 배열하여 프로덕트의 전체적인 분위기를 설명하고 아이디어를 공유하기 위한 과정이다. 예컨대 생동감이 있지만 너무 활동적이지 않고, 명료하지만 딱딱하지 않고, 부드러우면서도 유치하지 않은 느낌의 콘셉트라면 그에 알맞은 색상이나 아이콘, 그리고 분위기를 나타낼 수 있는 자료들을 찾아 모은다. 2) UI 스타일 가이드프로덕트를 쉽게 이해할 수 있도록 과정을 간략하게 보여주는 내용. 전달하는 메시지의 가독성을 고려하여 컬러, 타이포그래피, 유저 인터페이스 요소 등을 담아 낸다. 무드보드와 목업의 중간 단계로써, 문제 해결을 위한 구체적이고 정교한 작업에 앞서 시간을 단축시켜 주는 장점이 있다. 3) 목업 서비스를 론칭하기 이전의 완성된 결과물. 이 과정에서 충분한 사용자 테스트를 거친다. 초기 에어비앤비의 UI 디자인 사례 - 서비스 형태한 사람이나 혹은 2, 3명의 디자이너가 무드보드에서 스타일가이드를 거쳐 목업의 단계까지 작업을 진행한다면 아무런 문제도 발행하지 않을 것이다. 하지만 그보다 훨씬 많은 인원이 서비스의 디자인에 참여한다면 의사소통의 과정이나 최종 결과물에서 예기치 않은 문제들이 발생할 수도 있다. 특히 서비스의 여러 단계를 나누어 각각의 팀에서 작업이 이루어진다면 일관된 통일성을 갖추기는 더욱 어려워질 것이다. 나아가 서비스가 IOS나 안드로이드 등 다양한 운영체제와 디바이스로 세분화될 경우는 통일성은 더욱 떨어지게 된다. - 버튼과 컬러 초기에 팀 별로 제각기 다르게 사용했던 에어비앤비의 버튼 형태와 컬러들의 사례. 서비스의 내용이 점점 늘어나고 회사 규모가 커지면서 각각의 팀에서는 통일되지 않은 제각기 다른 결과물이 나오게 된다. 디자인 시스템 구조디자인 시스템 구조는 보편적으로 파운데이션, 컴포넌트, 템블릿, 페이지의 4가지 단계로 구성된다. 구체적으로는 다음과 같이 구성된다. - 파운데이션(Foundation)과 컴포넌트(Components) 색상, 모양, 타이포, 아이콘, 모션, 스타일 등의 에셋을 포함한다. 예컨대, 사용자 화면에서 네모 박스는 검색이나 혹은 드롭다운 메뉴 등의 인풋을 의미할 수 있는 가장 작은 단위이다. 하지만 이러한 네모 박스가 버튼이나 아이콘과 결합하여 검색이라는 새로운 기능의 컴포넌트를 갖추게 된다. 나아가 컬러가 추가되어 중요성을 부각시킬 수도 있다. - 템플릿(Template) 파운데이션과 컴포넌트의 두 구조를 구성하여 만든 조합으로 어떠한 목적을 가진 단위이다. 예컨대, 검색창은 제품의 가장 먼저 사용자들의 시선이 머무는 곳에서 그들이 목적지를 찾도록 해주는 목적을 갖는다. -페이지(Page) 특정한 템플릿의 예시들로 구성된 레이아웃. 예컨대, 검색창이라는 중요한 템플릿을 상단에 위치시켜 페이지를 구성한다. 접근성(Accessibility) 사용자의 신체적인 특성이나 지역 그리고 성별, 나이, 지식 수준, 기술, 체험 등의 제한적인 사항들을 고려하여 가능한 많은 사용자가 제품이나 서비스에 접근해서 불편함이 없이 이용할 수 있는 정도를 뜻한다. 접근성이 높을수록 사용자들이 서비스를 편리하게 이용할 수 있게 된다. 따라서 서비스의 규모가 큰 회사에서는 접근성을 다루는 별도의 팀을 운영하고 있는데, 그만큼 중요하게 접근성을 고민하면서 글로벌 사용자들을 존중하여 많은 노력을 기울이고 있다고 해야 할 것이다. 실제로 전 세계의 서비스 사용자 중에는 보고, 말하고, 듣고, 인식하고, 움직이는 것에 장애를 겪고 있는 사람들이 많다. 이들이 정상적인 사람들과 동등하게 서비스를 이용할 수 있도록 하는 것이 접근성 팀이 해야 하는 역할이다. 컴포넌트(Components) 에어비앤비는 각각의 페이지를 체크하여 그 중 계속해서 반복되는 부분을 찾아내 하나의 컴포넌트로 규정했다. 이는 프로파일 사진이나 텍스트가 들어 간 버튼 등 서로 연관성이 있는 각각의 컴포넌트를 가능한 하나의 블록 형태로 묶어서 구성한 것이 특징이다. 이렇게 통합된 형태의 컴포넌트에는 개발자와 디자이너가 함께 공유할 수 있도록 세부적인 요소마다 각각의 이름을 붙인다. 또한 색상, 모양, 타이포, 아이콘, 사이즈 등의 파운데이션을 정의하여 공유한다. 이로 인해 모든 디자이너들은 일관성있게 디자인을 빠르고 신속하게 만들어 낼 수 있게 된다. 마치 레고 블럭을 끼워 맞추고 쌓아 만드는 작업과 같다. 디자인 시스템은 레고 블록 시스템인 셈이다. 또한 개발자들의 코드도 디자인 시스템 각각의 컴퍼넌트와 동일하게 구성된다. 그리고 이 코드는 IOS, 안드로이드, 모바일, 웹 등 어떠한 디바이스와 플랫폼에서도 똑같이 적용된다. 이렇게 함으로써 사용자 환경이 애플 아이폰에서 삼성 갤럭시 폰으로 혹은 노트북으로 바뀌어도 똑 같은 느낌을 갖게 된다. 피그마(Figma.com) 장점 동료간의 협업을 위한 도구로 피그마(Figma)가 있다. 장점이라면. 협업에 최적의 환경을 제공한다. 화면 상단에 공유하는 협업자와 그들이 어떤 작업을 하고 있는지 실시간으로 보여줄 뿐만 아니라 작업 과정에서 어느 테마에 대해 자유롭게 피드백을 줄 수도 있다. 즉 초기 시안 작업에서부터 여러 동료들로부터 자유로운 반응과 아이디어 그리고 세밀한 조언까지 받을 수 있다. 또한 특정 작업 화면의 링크를 누군가에게 공유시킬 수 있으며, 이를 통해 상대가 곧바로 해당 작업에 참여할 수 있다.