Airbnb의 디자인시스템
디자이너 한유진님을 만나다
한유진
| 에어비엔비디자인시스템 총괄
01
디자인시스템이란
- 디자인프로세스를 먼저 알아야한다, 회사마다 나라마다 다르겠지만 간단한 4단계가 있을것
- Discover(디자인리서치인터뷰)-> Define(데이터분석, 문화이해와 디자인을 통한 아이디어 컨셉정의 및 리뷰)-> Develop(디자인구체화, 프로토타이핑,개발)-> Deliver(제품전달,사용자검증, 테스트 및 피드백, 수정 및 보완)
1.
1) Moodboard
- 타이포그래피, 아이콘 등 시각적인요소들을 모아서 분석하는 기법, 실제 디자인과 컨셉 설정에 앞서 설정하는 것. 에어비앤비는 이럴거같아요~ 하는 이미지들, 이런게 좋을거같아요 하는 것들이 있는데 이걸 상대방에게 보여주기 위한 가장쉽고 빠른 방법, 예를들어 콜라주 등 이미지를 모으고 쉽게 아이디어를 공유하는 것.
(에어비엔비의 경우 생기있는, 그렇지만 넘 활동적이진 않은, 너무 딱딱하진 않고, 부드러우면서 유치하지않은 분위기를 만들기 위해 노력함.)
2) Ui style guide
- 칼라계획 , 제품의 타이포그래피, 유저인터페이스 요소샘플
- 제품의 가독성이 좋은폰트, 간단한 가장 중요한 유저인터페이스 요소들을 샘플로 작업하게 된다. 목업과 무드보드의 중간단계, 문제를 해결하기전에 디테일한 신경을 쓰기위한 것을 줄이기 위한 것.
3) 실제 디자인작업
- 실제 이미지를 넣는 디테일한 작업. 만약에 이 프로젝트가 디자이너 한사람이라면 처음 무드보드작업부터 시작해서 스타일가이드를 거치는데 어려운점이 없을것이다.
- 하지만 팀이 10명 100명의 규모라면 이 프로젝트의 모든 디자인을 만든다면 어떨까?를 생각해야한다. 아마 비슷하게 갈수도있고 다 달라 제품의 통일성이 없을수도 있다. 예를들어 각팀이 맡아 유저플로어를 검색,제품,제품디테일 플로우를 한다고 생각해보자, 버튼과 타이포그래피 같은 룰들이 모두 동일할까? 회사규모가 작으면 무리가 없겠지만 회사규모가 크다면 점점 힘들어질것. 다시 그 팀이 ios /and 등 더 세분화되고 점점 디테이해지고 점점 많은 것들을 많은 유저의 니즈를 해결하기위한다면 어떨까. 더 바쁜일정으로 앞으로만 계속 달릴것이다. 회의하고 맞출시간이 부족한 것도 한몫 함. 에어비앤비도 각팀의 유저요구에 맞춰 앞으로 나가가기만 했었다.
- 모두 다른 형태의 버튼, 칼라가 나오는 현상 - 각 팀이 스포이드툴을 사용하는 등 모두 다른 칼라를 만들고있었다.
2.
0) 왜이런 문제점들이 생기는걸까?
- 점점 더 복잡해지고 다양해지는 제품들. (가장 편안한 여행을 전달드릴까 고민하다보니까, 숙소만 포커스할게 아니라 경험도 포커스를 하자는 생각을하게 됨, 럭셔리한 빌라 등 점점 비즈니스를 넓히게되고 각각 다른 디자인을 만들게 되었다. 비즈니스가 넓어지면서 디자이너들이 많아지고 협력이 점점 줄어들게 됨.)
- 성장하는 제품과 디자인팀의 규모
- 빨라지는 제품개발 사이클
- 매주마다 새로 업데이트가 되고 사용자에게 공유를 하게 되는 앱들. 거의 모든 제품들이 빠른 제품개발사이클을 돌려 사용자에게 맞는 서비스를 드리기위해 노력한다. 하지만 그러면서 다른팀과 공유하고 어떻게 디자인을 맞출까 회의하기보다는 점점 더 앞으로만 계속 달려가게된다.
- 성숙해지는 디자인시장과 고객들의 높아지는 기대
- 고객들이 많은 앱을 접하면서 디자인에 대해서도 많이 보게되는 현상. 이러한 문제들로 인해 시스템을 만들어 공유하고 맞춰 작업을 해야겠다는 생각을 하여 디자인시스템이 등장
비슷해보이지만 각기 다른 디자인이 생기는 현상1) 디자인시스템은 IKEA와 같은 것
- 아이케아 - 누구나 쉽게 빨리 만들수있는 것. 이렇게 하세요 라는 설명이 잘 나와있다.
- 디자인시스템도 이와 똑같다. 제품을 쉽고 빠르고 일관적으로 만들수있도록 도와준다, 디자인시스템은 많은회사마다 조금씩 다르면서 또 조금씩 비슷할 것이다. 결국 제품의 전체적인 디자인을 구성하는 공유된 것, 명료한 기준을 통해 재사용되는 컴포넌트들의 모임 이다.
2) 디자인시스템의 목적
- 일관적이고 효율적이고 심미적인 디자인제품을 빠르고 쉽게 만들게 한다. (아토믹디자인)
- 파운데이션 (가장기본적인 것) -> 컴포넌트들이 모여 -> 템플릿을 만든다(사용자의 목적지를 위한 ui) -> 페이지(유저가 들어왔을때 가장쉽게 검색하기쉽도록 템플릿을 얹은 페이지를 만든다)
3) 디자인시스템은 지속적으로 업데이트 해야하는 것
- 디자인시스템을 만들고나면 피드백이 생긴다. 나는 이런이런거 같아, 같은 피드백을 받아 마치 제품을 런칭하고 사용자의 피드백을 받는것처럼 디자인시스템도 동일하게 해야하는 것. 시스템이 정해진 후에도 제품디자인처럼 업데이트를 해야한다.
- 컴포넌트들의 규칙들을 잘 알아야 활용할 수 있음. 디자이너나 개발자들이 아 이래서 이렇구나 하는 것들을 이해할 수 있도록 do/don't 등을 만들고 버튼 스테이츠, 버튼의 설명등을 기입한 자료를 준비해야한다. 이러한 것들이 없을경우 디자인을 갖다 쓰는, 스티커를 붙여넣는 것 같은 행위가 생김.
4) 디자인시스템의 과제
- 디자인시스템자체도 업그레이드가 되는 상태. 디자인시스템의 가장 큰 장점은 일관성 / 재사용 / 신속함 / 혁신적인 아이디어에 집중할 시간을 벌게되는 것. (디자인 크리에이티비티를 하고싶다, 하는것을 실현하게 해준다. 모든 디자이너와 개발자들이 버튼이 무슨색상이고, 팝업을 어떻게해야할지고민하는 시간을 없애고 유저를 향한 고민을 더 할수있게 해준다.)
- 이미 만들어진 디자인과 셋업 / 제한성, 유연하지 않음 이 한계라고 생각할수있지만 일관적이고 신속한 디자인을 할수있게 해주며 아이디어에 몰두할수있게 해주기 때문에 필요하다.
- 디자인시스템은 단지 컴포넌트들이 모여있는 툴이거나 제이슨코드들의 집합이 아니다. 디자인시스템은 조직에 있는 모든 사람들의 응집력있는 문화를 함께 만들어가는 것이며 그것은 단지 한개의 정해진 헌신적인 팀의 노력으로만 만들어지는 것이 아니다.
02
에어비엔비 디자인시스템
다른회사의 디자인시스템
- 구글 머티리얼디자인시스템 - 디자인시스템계의 바이블.. 어떻게 이용되는지 알고싶은사람은 확인해보길 추천
- Carbon 디자인시스템(ibm) 디자이너나 앤지니어 상관없이 어떻게 사용되고있는지 코드를 보고 복사할수있음
- Polaris 디자인시스템(shopify) - 쇼핑몰구축 서비스를 하는 곳인데, 아마존, 이베이에 이어 전자상거래 점유율 3위를 달리는 곳.
1. 접근성에 대한 고민
- 6명의 디자이너가 주력을 다해 디자인했었다. 새로운 피쳐들을 더하고 작업하는데 어렵고 개발자들도 덩달아 어려움을 겪게 되었다. 제품이 복잡해지고 규모가 커져 헤드디자이너가 있어도 일일이 관여하기가 힘들게 되었다.
- 모바일 디자인 스크린샷을 찍어 흐름대로 나열. 검색하고 분석하였다 -> 접근성을 생각하는 것은 사용성을 고려해서 심각하게 디자인을 하는 것. 접근성에 대해 심각하게 고민, 유저에게 도움을 주고자 한 것. 사용자의 신체적 특징, 지식수준등의 제한사항을 고려해서 가능한 많은 사용자가 이용할수있도록 하는 것. 일반적인 사용자는 장애가 없겠지만 일부사용자는 시각, 지각, 청각등의 장애가있는 사람도 많다. 인지를 못하는 것들에 대해 사른사람과 동등하게 탐색하고 모바일을 사용해서 혜택을 누릴수있도록 하는 것을 고민하는 사람들이 있다. -> 그래서 babu칼라를 정해 메인칼라가 3대비인걸 대비해 4.5 대비로 만들었음. -> 브랜드 가치를 맞추는것도 좋지만 모든사람들이 서비스를 누리고 공유할수있도록 고려하여 만들게됨.
2. 새로운 디자인을 해서 기준을 제시하는 과정
- 각각의 스크린을 확인하고 반복되는 부분을 확인하고 컴포넌트라 부르게 됨. -> 컴포넌트들은 개발자와 디자이너들이 공유할수있는 이름을 정하고 일률적으로 할수있는 룰을 정함 -> 컴포넌트들을 박스구성으로 만들어 어디에 붙여도 일관성있게 할수있도록 도왔다 -> 개발자들의 코드또한 컴포넌트에 맞게 일률적으로 적용이 되는것을 확인할수있음
- 디자인시스템을 만들고 공유한 후. 계속해서 유저피드백을 받고 업데이트를 했다면 가장 좋았겠지만 디자인시스템팀에 디자이너들이 두명, 세명 정도였더라 제대로 하지 못하게 되는 일이 생김. -> 각자 비즈니스에 맞는 아이디어를 만들고 하다보니 많은 컴포넌트들이 팀에 따라 만들어지게 되었다. -> 코어라이브러리만 써, 라는 말을 할수없는 현실적인 문제 -> 이렇게 팀 컴포넌트들이 자꾸 생기기때문에 제공해서 다른디자인이 만들어지더라도 패밀리 느낌이 날수있는 것이 필요했다.
- 레고블럭이 이때 많은 역할을하게되었다. - (인포메이션 블럭을 만들어 카피페이스트를 할때 좋았다.)
3. 디자인시스템을 봤을 때 가장 중요한 것은 relationship.
- 디자인시스템팀과 프로덕디자인팀의 릴레이션십이 중요하다. 이런것들이 있으면 같이 만들어갔다는 인지가되고 내가 너의 디자인을 갖다쓰는거 아니냐 하는 인식, 나아가 하나된 디자인을 하게되는 효과를 낳게된다. 업데이트를 내가해도되냐 하는 등. 함께 참여함으로써 디자인시스템 프로세스일련된 것들을 만드는과정에서 더욱 많은 고민을 하게된다. 디자이너들끼리 더욱 잘써야한다는 릴레이션십을 낳음.
4. 협업 툴
- Sketch - 좋은 플러그인이 많고 스피드를 낼수있다.
- figma - 아직 많이 느리고 버그가많음.
(1) Frame 라는걸 만들게 되는데 화면을 스트레치하는 기능이 있어 주의해야함.
(2) 콜라보레이션, 협업이 간편하고 누가 사용하고 보고있는지, 누가 보고 나갔는지 실시간으로 알수있다. 누가 마우스를 눌러 뭘 보고있는지 알수있다. 같이 동시에 수정작업이 가능하고 스티커등을 붙여 라이프 피드백이 가능함.
(3) 나는 누가 보는게 싫다, 하면 공유그룹을 눌러 설정할수있다.
(4) 화면 하나하나가 url을 가지고, 이것을 카피하면 웹브라우저에서 보고 작업할수있는 기능이 있다.
(5) 피드백이 슬랙으로 바로바로 등록이되게 만들수있어서 figma를 열어놓지 않아도 누군가 피드백을 주면 코멘트를 확인할수있다.
5. Localization(현지화)란 무엇인가?
- 제품이 글로벌화될 경우에 모든것을 수용할 수 있어야한다. 미국에서 디자인할경우에 알파벳만 넣어서 되면되지 하는 경우가 있을텐데 헝가리어, 그리스어의 경우 1.5배 길이의 글자가 되는데 이런것들을 수용할수있어야 한다.
03
디자이너의 글로벌진출,
해외에서 살아남기
- 야근을 많이했던 디자이너 시절. 외할아버지의 작품을 보고 어떤 아름다움을 표현하려고 했는지 생각하고, 매번 자극을 받았던 때. 글이없더라도 상대방에게 사용성을 아름답게 알려야 한다면 한국의 사용자만이 아니라 전세계 사용자들을 대상으로 디자인을 해봐야하지 않을까 하는 생각을 하게 됨.
- 전세계 사람들을 대상으로 ,그들의 삶에 좋은 영향을 줄수있는 의미있는 디자인을 하자 - 의미있는 디자인을 하는 곳을 찾자 했다. 1년만 해보자, 아니면 깔끔히 포기하자고 생각.
1. 뉴욕행 비행기를 끊게된 날, 시작된 뉴욕행.
- 뉴욕대 어학연수 세달에 500만원 듣고 타격이 컸음.. 3000만원을 6개월만에 써버리는 일이 발생.
- 뉴욕지하철에서 동기를 만나는 기적적인 일이 생겼지만 많은 거리를 걸어다니는 등 힘든 고비를 겪음.
- 일식 식당에서 일을하면서 영어회화를 많이 늘리는 노력을 했음.
- 영어를 반년 한다고 느는게 아니었어서 예시문과 답변을 하나하나 노트에 적어 전화 인터뷰를 했었던 노력. 다행히 인터뷰가 잘 통해서 회사를 가게됨.
- 비자를 받는게 처음이라 잘몰랐고 7개월이 걸리는 일이 발생. 오후6시부터 새벽2시까지 일하는 등 노력함.
- 비자를 받아 런던으로 감.
2. 나는 이방인입니다
1) 디자인 바꾸는게 어때?
- Tesco 앱을 만들던시절, 옆에있던 디자이너가 디자인 별로라고 바꾸라고 하는 일이 발생. 전혀 생각도 못했던 일이라 문화충격. 어느누구나 직급에 상관없이 자기의견을 얘기하다보니까 점점 발전하게 되고 나아가게되더라고 느낌. 이런 문화구나 하고 합류하게 됨.
- 본인이 어떤 의견을 갖고있는지 말해야한다. 누구도 당신의 생각을 알수없다. 말을안하면 모를 것. 자신이 뭘 생각하고있는지 분명히 전달해라.
2) Your the best designer ever!
- 겸손하지 말것, 칭찬은 고래도 춤추게한다. 프로젝트가 끝날때마다, 디자인이 잘 나올때마다 칭찬을 해주는 문화. 이런게 어색했지만 나중엔 더 신뢰하게 되고 자신감도 쌓게 되었다.
3) 영어. 한지 10년이 된다면?
- 10년한다고 잘하는게 아니다. 이메일도 수십번씩 확인을하고 보냄. 영어가 모국어가 아니라고 승진을 못하게되는 일도 발생. 영어에 대한 트라우마. 이런것들을 두가지 언어의 자부심으로 가져라.
- 다른사람은 관대하기도하고, 못알아들었을 경우 알아듣을때까지 물어봐야 한다.
4) 우리나라에 있는 비자정보 믿지마라.
- 비자정보 검색하고 영어로 된것 해석해서 봐라. 실제로 잘못된 정보가 실제정보처럼 퍼지는 일이 있었어서 주의해야 한다. 그 나라의 한국인변호사를 통해 질문하고 알아봐야 한다. (자신이 찾은게 맞는지를 확인.) 비자가 없을때 다른나라에서 일할 생각하지 말아야 한다. 할수는 있지만 비자없이 수입이 있는 사실이 확인될경우 비자받기가 더욱 어려워질 수 있음. 시간과 노력을 다해서 알아봐야한다. 리젝되서 다시보내면 더욱 어렵기때문에 한번 보낼때 잘 보내야 한다.
3. 말하자면
- 다른사람이 되려고 노력하지말라. 본인이 자기자신일때 가장 훌륭하고 멋지다. 칭찬을 마음껏 받아들일 것.
- 내 의사를 분명히 말할것. 본인이 아니다싶으면 아니라고 확실히 표현해라. 회사생활하면서 정말정말 중요한 것. 외국인이라고 기죽지말고 당당해라. 외국에서 고용됐을 경우 당신이 필요해서 고용한 것. 꿈을 향해서 나아가고 싶은 사람이라면 버텨라! 중간에 목표가 바뀌더라도 실패?라고 생각하지말라. 언제든 방향을 바꾸어서 나가가는 힘을 가져라.
04
질의응답
Q1. 디자인시스템에서 가장 중요하다고 생각되는 부분
A. 1. 디자인시스템자체의 구축. 튼튼한 파운데이션, 명확한 가이드라인 자체가 중요. (이런것들이 베이스로 잇어야하며 디자인과 코드의 얼라인먼트임, 디자인시스템만 만들어서 완벽한게 아니라 개발자들도 같은언어를 써서 다른점없이 공통된 언어로 쓸수있어야 한다.) 2. 디자이너들의 관계, 협업이 중요. 3. 디자인시스템의 이해와 사용. 4. 꾸준히 행해지는 교육.
Q2. 해외에서 일하는 ui 디자이너는 기획에 어느정도 참여하는지 개발자들과 어떻게 협의하는지 궁금합니다
A. ui와 ux, 기획을 통틀어 프로덕디자이너라고 함. 따로 ui/ux 별도로 구하진 않는다. 개발자들은 팀마다 다르지만 개발자/po/클라이언트가 있다면 스프린트 첫째날부터 계속 작업을 한다. 개발자들은 코드만 짜는 것이 아니라 같이 협의하고 같이 스케치를 하게됨. 디자이너가 생각치못했던 트렌드들을 바로바로 디스커션 할 수 있음. 이러한 과정때문에 디자인이 얼마나 복잡하게 이루어지는지 클라이언트도 알게됨. 대부분 같이 일하곤 한다.
Q3. 디자인팀의 모든 팀원들이 디자인시스템에 맞추어 모두 동일하게 적용해서 작업물을 만들기 위해서 실제 어떤 규칙이나 관리를 하고 있는지요? 그리고 디자인시스템의 리뉴얼 시점은 언제 필요한지 궁금합니다.
A. 리뉴얼은 언제 필요한것이 아니라 늘 필요한것. 린하게 이루어진다. 가장 중요한것은 주관적이지 않은 명료한 가이드. 유연하게끔 만들어서 각 디자이너들이 각자의 창작적인 디자인을 할수있도록 자유를 주는것도 좋은방법. 시스템이 있다고 그것만을 사용하리란 생각은 하지마라, 그리고 관계를 적극적으로 만들어 디자인시스템을 만들라.
Q4. Airbnb 디자인 프로세스? A. 에자일, 스프린트를 써서 제품디자인을 한다.
Q5. 디자인시스템은 어떨때 구축해야 경영진의 반대를 받지않는가? 적절한시점은 어떤때인가? 디자인적사고를 하지않는 기업에서는 어떻게 설득해야하는가?
A. 처음부터다. 기존것을 정리하는것은 너무 복잡하고 오랜기간이 걸린다. 가능한 가장 먼저 디자인시스템을 만들도록 해라. 이러한것들은 근데 경영진의 서포터가 중요하다. 감성적 접근말고 객관적으로 접근하여 매출에 관한 숫자를 보여드린다거나 하면 경영진이 반응할 것.
Q6. 처음 회사에서 비자-컨텍을 받게된 강력한 무기는?
A. 포트폴리오의 퀄리티가 일정했던 것. 프리랜서를 했던 일주일동안에도 동일한 퀄리티를 보여줬었다. 남들이 시안 4개할동안 자신은 20개를 했을정도로 열심히 했었다.
Q7. 디자인시스템팀이 프로덕디자인팀에서 존재하지않고 별도로 있는경우는 왜?
A. 디자인규모에 따라 다르고 할당된 일에따라서도 다르긴하지만 요청된 것들을 제대로 처리하지 못했던 일. 프로덕디자인을 했었지만 제대로되지 않아 별도로 띄었었다. 디자인시스템을 하느라 프로덕작업들이 속도가 다르게 된다면 따로 띄는게 맞는것같다.
- 일반적인 ui 작업을 할때도 그렇고 디자인은 주관적이라 생각하기때문에 추천하는것은 유저테스팅을 해야한다. 비슷한 유저그룹에 있는 주위사람들에게라도 물어봐서 반응이 이렇더라, 라는 결론을 도출해라.
Q8. 릴레이션십은 어떻게하는지?
A. 일반적으로 엔지니어나 디자이너들은 만들고 코딩해라 하는게 아니라 가장 이상적인 프로세르를 만들기위해 엔지니어도 처음부터 참여한다. 만약에 앤지니어들이 자신이 원했던 작업이 아니라고 한다면 그것또한 존중해야하는것이 맞다고 생각. figma에서 만든 코드가 맞는지 안맞는지 검사를 받아야한다. 여러사람에게 의견을 맞추고 사실 이렇게해도 괜찮다는 조율, 가장좋은 방향을 맞춰가야 한다.
Q9. 아이덴티티를 어떻게 구축했었는지
A. 브랜드가 가장 중요하기 때문에 리서치를 해야한다. 어떤 디자인요소들이 뒷받침될수있는지 찾아가야한다. 예를들어? 아이들은 한곳에 시선을 10초 이상 두지못한다. 이러한것들을 바탕으로 유리를 쓰되, 칼라풀한 것. 만원경을 시안으로 잡고 유리를 잡으면 터지는 물감 같은 매타포를 표현하려 함. 사용자에 맞춰 재미나게 표현하려 했었다.
500명의 디자이너가 모이는 자리에서 멀리 에어비앤비에서 오신 한유진 디자이너님을 만났다. 에어비앤비의 디자인이야기, 디자인시스템에 관한 이야기가 궁금해 참석했던 자리였지만 디자인시스템에 관한 이야기 이상으로 디자이너로써 많은 고민을 하게 됐던 자리였다. 세미나 내용은 디자인시스템을 만드는 과정에서 다른것보다 협업이 중요하다는 것, 그리고 디자인시스템의 중요성, 사례와, 어떻게 만들게 되었는지. 디자인시스템에 대한 자세한 이야기들이 주를 이뤘으며 어느때보다 자세한 이야기를 들을 수 있어 무척 좋았다. 하지만 그보다 더 좋았던 것은 디자이너 한유진님께서 협업이나 작업면에서 디자이너로써 고민하게 됐던 이야기들과 함께 미국으로 가게됐던 이야기들, 미국에서의 디자이너의 삶에 대한 이야기를 들을 수 있었던 것이었다. 3번째 세션에서 특히 내 스스로도 많은 생각을 하게 됐다. 디자이너로써 성공하겠다는 열정과 집요함, 자부심이 돋보였던 한유진님의 이야기에 함께들은 디자이너들도 고개를 끄덕였던 듯 하다.
Airbnb의 디자인시스템, 디자인시스템 프로세스, 디자이너로써의 삶 등 중요하지 않은 것은 하나도 없었던 자리였다. 나도 제대로 된 디자인시스템 구축에 성공할 수 있기를 바라며. :)
