에어비앤비 디자인 시스템 후기
CA_CON-86 에어비앤비 디자인 시스템 한유진 디자이너
2018년 11월 2일 금요일 14:00
에어비앤비 디자인 시스템을 총괄하고 계신 한유진 디자이너님의 이야기를 듣고 왔다.
여행을 좋아한다면 에어비앤비 서비스를 안 들어본 사람이 없을 정도로 유명한 서비스인데 에어비앤비 내에서 디자인을 어떻게 운영하고 있는지, 그리고 현재 회사에서 만들고 있는 서비스에 디자인 시스템을 적용해 보고 싶은데 실제 경험담을 들을 수 있는 기회인 것 같아 신청하게 되었다.
행사는 크게 3가지 세션으로 구분이 되었어 진행이 되었다.
세션 1 : 왜, 디자인 시스템이어야 하는가?
세션 2 : 에어비앤비 디자인 시스템 케이스 스터디
세션 3 : 해외에서 디자이너로 살아가기
Q/A : 질의응답
세션 1 : 왜, 디자인 시스템이어야 하는가?
서비스가 커짐에 따라 각 기능별로 팀으로 작업을 하게 되는데
디자이너가 혼자라면 디자인을 통일해서 작업하는 것이 어렵지 않지만,
5~10명 혹은 그 이상이라면, 팀의 성향별로 작업물이 만들어지는 경우가 생긴다.
각 기능별로 팀이 나뉘어져 작업을 하게 된다.
WEB, iOS, Android 등 세분화가 되어 작업이 진행다양한 환경에서 사용하는 유저의 니즈들을 다 만족시키기 위해서는 노력을 해야 하는데 각 환경에 따라 다른 디자인으로 보인다면 사용자는 환경이 바뀔 때마다 다시 인지하기 위해 노력해야 하는 상황이 생긴다.
1. 점점 더 복잡해지는 제품들
- 단순히 집 제공에서 떠나 여행 경험을 전달. (하나의 비즈니스에서 늘어나면서 다른 디자인들도 추가)
2. 성장하는 제품과 디자인 팀의 규모
- 비즈니스도 늘어나면서 팀도 커진다.
3. 빨라지는 제품 개발 사이클
- tripadvisor는 2주 별로 업데이트를 진행하며, 사용자들에게 맞는 서비스를 제공하고자 한다.
4. 성숙해지는 디자인 시장과 고객들의 높아지는 기대
- 디자인 퀄리티가 올라가면서 소비자들도 디자인을 보는 눈이 올라감.
-디자인 시스템의 정의
"디자인 시스템은 일관적이고 효율적이고 심미적인 디자인 제품을 빠르고 쉽게 만들게 한다."
디자인 시스템의 구조
- 디자인 시스템 구조
네모난 박스가 아무것도 없다면 타이핑을 하는 box가 되고, box 안에 화살표가 들어간다면 Drop메뉴가 되고, 버튼이나 아이콘 등을 만나서 기능을 가진 Components가 된다.
그 Components도 어디에 어떤 목적을 가지고 위치되냐에 따라 달라지는데 그것이 Template가 되고, 그러한 Template들이 모여 만든 레이아웃 (유저가 마주치는 화면)이 Page가 되는데, 이러한 개념 설명이 디자인 시스템을 이해하는데 쉽게 와 닿았던 것 같다.
디자인 시스템에선 이렇게 디테일하게 약속을 정해놔야한다.- 디자인 시스템의 관리
디자인 시스템은 제품이 오픈하고 피드백과 업데이트를 통해서 바로바로 업데이트를 하며 관리를 해야 하고, 디자인 시스템을 단순히 스티커를 붙이는 것처럼 작업을 하는 것은 아니라고 한다. 쓰임에 대한 이해를 하고 있어야 조화롭게 사용할 수 있는 것이 디자인 시스템이다.
규칙과 객관성, 명확성, 모든 동료가 보고 이해를 할 수 있도록 디자인 시스템을 정리해야 한다.
규칙들을 분명하게 세워서 룰을 공유하는 것이 중요하다.
- 디자인 시스템의 강점
일관성, 재사용, 신속함, 혁신적인 아이디어에 집중할 시간을 벌게 됨.
모든 디자이너와 개발자가 버튼/팝업 등의 디자인을 고민하는 것보다 아이디어에 투자를 하는 것이 낫다.
- 디자인 시스템의 오해
빨리 만들 수 있는 시스템이다.
디자인 시간을 줄여서 사람들이 필요한 부분에 대해서 더 고민을 하자.
디자인 시스템에 대해서 크게 고민했던 부분이 바로 확 일화 되고 정형화된 디자인틀만으로 어떻게 창의적인 화면을 구성할 수 있을까 라는 부분이었다. 하지만 실무를 하면서 제품을 만들 때 오히려 디자인 시스템에 대한 필요성을 더 크게 느꼈고, 디자인 시스템 자체가 좋고 나쁘다기보다 어떻게 업무를 더 효과적으로 할 수 있을까에 대한 생각을 많이 한 것 같다. 그리고 단순히 리소스만 만드는 작업이 아니라 명확한 규칙과 팀 구성원들에게 이해와 공유가 되어야 한다는 것만으로도 큰 작업이라는 생각이 들었다.
세션 2 : 에어비앤비 디자인 시스템 케이스 스터디
디자인 시스템을 제작해서 사용하고 있는 회사들 중 대표적인 4개의 회사들을 소개했다.
1. Google (https://material.io/design/)
- 유지 보수 및 업데이트가 활발함, 디테일한 가이드 공유
2. IBM (https://www.ibm.com/design/language/)
- 디자이너와 엔지니어가 함께 볼 수 있는 가이드 시스템. Impact 있는 정보들.
3. Shopify (https://polaris.shopify.com/)
- 미국 전자상거래 3위, web, android, iOS 등의 코드를 볼 수 있다.
4. Airbnb (https://airbnb.design/building-a-visual-language/)
에어비앤비는 2016년 디자인 시스템을 도입.
50명의 디자이너와 많은 개발자들이 다 다르게 작업을 진행했기 때문에 제품이 복잡해지면서 정형화된 가이드라인의 필요성을 느꼈고, 디자인 시스템을 만들기 위해 기존에 있던 스크린별 흐름대로 분석을 하고 새로운 스타일로 디자인을 했다고 한다.
1) 디자인의 접근성(Accessibility)
제일 크게 중점을 두었던 부분은 디자인의 접근성인데, 전 세계의 일부 사용자는 장애가 있다는 기준하에 평등하게 고루 서비스를 사용할 수 있게 하는 것이 목표였으며 (보통은) 디자이너중에 장애가 없는 사람이 대부분이기 때문에 인지를 못하는 부분이 생기고 모두를 위한 디자인을 하기 위해 노력했다고 한다.
웹의 힘은 그 광범위함에 있다. 장애에 관계없이 모든 사람이 접근할 수 있다는 것이 절대적인 장점이다.
접근성을 향상 시키기 위한 다양한 시도들보통은 브랜드의 컬러를 녹아 디자인에 입히기도 하지만 에어비앤비는 메인 컬러도 가지고 가면서 다양한 컬러도 사용한다. 단순히 컬러만 보는 것이 아닌 사용성/접근성에 맞춘 것 같다는 생각이 들었다. 현재도 에어비앤비 앱을 들어가 보면 메인 컬러뿐만 아니라 상황에 따라 사용되는 컬러가 달라지는 것을 볼 수 있었다.
각 Component를 하나하나 나눠서 공통적으로 사용할 수 있는 부분을 어디에나 넣어 사용할 수 있게 제작
기본 Component를 이용해서 다른 페이지에서 필요한 정보를 추가해 거의 그대로 쓴 모습을 볼 수 있었는데, 리소스를 최소한으로 하고 개발적인 부분에서도 그대로 가져와 사용할 수 있게 제작한 부분이었다.
또한 iOS나 Android의 가이드라인을 사용하기보다는 에어비앤비만의 일관적인 디자인을 하기 위해 노력했다고 한다.
개발에서도 해당 부분들을 하나하나 나눠 코딩을 했다.
iOS, Android, web등 통일된 모습을 볼 수 있다.사용자가 모바일이나 웹이나 어디에서든 같은 사용성을 느낄 수 있도록 디자인을 같게 만들었다고 한다. 나도 앱을 디자인을 할 때 최대한 안드로이드랑 iOS랑 같게 하려고 노력했는데, 사용자가 어떤 폰으로 바꿀지도 모르고 바뀌었을 때 UX 또한 같아야 사용에 대한 불편함이 없다고 평소에도 생각을 했기 때문에 꽤나 공감이 가는 내용이었다.
2) Core와 Team library
다양한 서비스에 다양한 팀이 존재하기 때문에 큰 틀에서는 Core library에서 가져다 사용하고 팀별로 적용해야 하는 부분이 생기면 그것은 Team library에서 따로 관리하여 작업한다고 한다.
우측의 하트 있는 이미지 부분이 Team library에 속한다고 한다.이러한 디자인 시스템을 만들고 유지하기 위해서 에어비앤비 내부에서는 디자인각 파트별로 1,2명씩 디자이너를 모아서 디자인 시스템에 대한 미팅을 한다고 한다. 전체 디자이너들과의 관계를 유지하고 모든 디자이너들이 참여하고 있다는 느낌을 주고, 이해도를 높이기 위해서라고 한다.
*디자인 시스템 프로세스 참여
1. 이해도와 참여도를 높인다.
2. 디자인 시스템 적용과 프로덕트에서의 적용에 대한 피드백을 바로 받을 수 있다.
3. 객관적인 부분을 제공할 수 있다.
분명 이런 일들이 귀찮을 수 있고 꽤나 많은 시간을 소비할 수 있다고 하겠지만 이러한 과정이 있었기에 에어비앤비에서의 경험이 계속 긍정적으로 와 닿는 게 아닐까 하는 생각이 들었다.
3) Design Tools
에어비앤비 내에는 Design tools 팀이 따로 구성되어 있어서 독자적인 디자인 툴을 만들어서 사용 중이라고 한다. 이에 관한 내용은 회사 기밀이기 때문에 공개가 되진 못했고, 스케치와 피그마를 어떻게 사용하고 있는지에 대한 이야기를 들을 수 있었다.
최근에는 Figma(https://www.figma.com/)라는 툴을 주로 사용한다고 한다. 그 이유는 협업 때문인데 바로바로 실시간으로 확인하고 피드백을 받을 수 있으며, 화면 하나하나 URL을 가지기 때문에 공유하기도 쉽고, 슬랙과의 연동으로 많은 인원이 협업하는데 좋다고 한다. 물론 아직까지 버그와 스케치보다 적은 플러그인 등이 있겠지만, 회사 업무에 맞는 툴을 쓰도록 노력한다고 한다.
4) Localization
다양한 국가에서 제공되는 서비스에 대한 이슈를 생각해서 디자인을 하자.
같은 의미를 지닌 단어일지라도 국가 언어에 따라 길고 짧은데 이 부분을 고려해서 디자인에 반영하는 것도 중요하다.
세션 2에서는 에어비앤비가 어떤 식으로 디자인 시스템을 작업하고 어떻게 적용하는지에 대해 이야기를 들을 수 있었는데 시간상 급하게 넘어간 부분도 있어서 조금은 아쉬웠다. 그래도 디자이너로서 서비스를 제작할 때 놓칠 수 있는 부분을 상기시켜주는 시간이었고, 단순히 시스템을 뿌려서 공유하는 것이 아닌 같이 만들어간다는 환경을 만들어주고 지키려고 하는 부분도 인상이 깊었다. 또한 사용자를 우선시하는 접근성 부분에서 "비장애를 가지고 있는 디자이너가 놓치는 부분"과 "어떠한 환경에서도 같은 사용성 제공"이라는 부분도 항상 생각은 하지만 다른 디자이너들과 좀 더 깊게 고민하고 이야기할 수 있는 주제였던 것 같아 다음에 기회가 된다면 다른 친구들과 이야기를 해보고 고민해 볼 수 있었으면 좋겠다는 생각도 들었다.
세션 3 : 해외에서 디자이너로 살아남기
마지막 세션은 한유진 디자이너님의 지금까지 디자이너로 살아오면서 몸으로 느꼈던 경험들을 이야기로 진행이 되었다.
해외에서 일하는 디자이너들 중 대부분 유학을 하고 해외 취업을 한 디자이너분들을 많이 봐왔는데 한국에서 바로 해외로 취업한 디자이너분을 본건 거의 처음이었던 것 같다. 그만큼 엄청 열심히 준비하고 남들보다 배로 노력했다는 이야기를 들을 수 있었다.
할아버지께서 작품으로 해외에서 인정받고 사랑받는 모습을 보면서 전 세계 사람들을 대상으로 그들의 삶에 좋은 영향을 줄 수 있는 의미 있는 디자인을 하자라는 결심을 세웠다고 한다.
지금까지 모아둔 돈을 들고 미국 뉴욕으로 가서 어학연수를 하고 알바를 하고 어떻게든 1년 동안 딱 해보자라는 심경으로 버텼다고 하신다. 그리고 그렇게 해외 취업의 문을 두드리고 3,4개의 시안을 요구하면 20개의 시안을 작업하고, 면접할 때는 모든 면접 내용과 답변들을 미리 적어두고 준비할 정도로 엄청나게 노력을 하셨다고 한다. 그 이야기를 들으면서 디자이너분의 뒤에서 엄청난 빛이 나는듯한 기분이 들었다.
처음에는 파트타임으로 프리랜서로 일하다가 노력으로 풀타임으로 바뀌고 그 뒤로 계속해서 노력해왔다고 한다. 하루에 3,4시간 잘 정도로... 그리고 추가로 해외 취업 비자 부분은 시간을 들여서 해당 언어 내용을 직접 숙지하고 해석하고, 관련 커뮤니티의 변호사 등에게 요청해 도움을 구하라는 조언도 들을 수 있었다.
해외에서 일하면서 크게 느꼈던 부분 3가지
1. 칭찬에 겸손해하지 말자
2. 못 알아 들었으면 알아들을 때까지 요청하라
3. 너의 의견을 말하라.
세션 3에서는 엄청난 고생담을 들을 수 있었지만, 자세한 이야기는 생략하고 내용을 간략하게 정리해서 전달하려고 했다. 시간이 부족해서 준비하신 내용을 다 듣진 못했지만 분명 좋은 일들만 있던 것이 아니라 더 힘들었던 부분도 있을 것이라 생각이 들었다. 현재는 해외에 취업해서 일하는 디자이너분들이 많기도 하고 관련 정보도 전보다 더 많이 얻을 수 있었겠지만, 10년 전만에 도 그러한 정보를 얻기 쉽지 않았을 텐데 이렇게 해외취업을 노력해서 얻었다는 부분이 감동이었다. 나태해져서 뒹굴거리거나 지금 상황에 만족할뻔했던 나에게 이번 강연은 명치를 때리는 강연이었다. 그 정도로 새로운 자극이 되었고, 이 내용을 같이 공유하고 싶어서 이렇게 작성을 해보았다.
좀 더 자세한 정리와 뒤에 Q/A 내용은
황다은 디자이너님 (https://brunch.co.kr/@eunlune/15) 브런치에 작성이 되어있습니다.
