[번역] Google Maps의 컬러 익스플러링
세상을 더 세부적으로 표현하는 미니멀리즘 접근 방식
글을 열며
코세라에서 구글 UX코스를 수강하고 있다. 코스에서 참고차 알려주는 자료 중 평소 흥미를 가지고 있던 지도 그래픽에 대한 짧은 아티클이 있어 공유하고자 한다. 지도는 실제 세계를 가상으로 그대로 대변할 수 있다는 점에서 재미있다. 현실을 가상 평면에 1:1로 표현하여 일상에 매우 밀접하고 실질적인 도움을 준다(어릴 적엔 자동차 도어 포켓에 있던 지도도, 네이버 지도로). 동시에 얼마나 추상화하고 구체화하느냐에 따라 같은 공간도 전혀 다른 정보를 주기도 하며 제작자의 주관이 담긴 지도는 개인의 정념/경험이 담긴 작품이 될 수도 있다.
아래 글에서 소개되는 구글맵스의 리뉴얼은 전 세계 유저를 포용하기 위해 주관적 지도와 지향하는 방향이 다르다. '단순화', '현실의 직관적 전달' 그리고 관리가 쉬운'시스템화'를 목표로 기존 그래픽을 바꾸는 여정을 짧게 실무자를 인터뷰하는 형식으로 전달한다. 해외를 여행할 때 언제나 좋은 동반자인 구글 맵이 어떻게 리뉴얼되었는지 소개한다.
아래 글은 2020년 11월 19일 구글 디자인에 업로드된 글입니다.
이 글을 만든 이
by. 알렉스 밸리스 Alex Vallis
비디오 by 몰리 모커 Molly Moker
애니메이션 by 샤론 해리스 Sharon Harris
새로운 색상 시스템이 리얼월드의 복잡한 데이터 시각화의 결과인 Google Maps를 간소화(simplify)하는 데 도움이 될 수 있을까요? 이 팀의 아이디어는 1년간의 협업을 촉발하게 했고 Map의 15년 역사에서 아무도 불가능하다고 생각했던 업적으로 이어졌습니다. 그들은 700개 이상의 색상 팔레트를 25개의 주요 및 보조 톤으로 극적으로 간소화했으며, 동시에 Map을 더 쉽게 접근하고 Google 답게 하고 무엇보다 더 잘 알아볼 수 있게 만들었습니다.
새로운 위성 기술에 적용된 이 접근 방식은 역설적으로 지구(지도로 표현되는 세상)의 디테일 더 많이 보여줄 수 있는 우리의 능력을 잠금 해제했습니다. 또한 미래의 설계 혁신을 위한 강력한 기반을 마련합니다.
2005년에 출시되었을 때 Google Maps는 A 지점에서 B 지점까지 이동하는 길잡이 도구 역할을 했습니다. 지금은 방갈로르에서 어디로 갈지 결정하고, 킬리만자로산에 대해 알아보고, 그레이트 배리어 리프의 산호초를 탐험하는 데 도움이 될 수 있습니다. 팀이 콘텐츠, 타이포그래피, 모양, 질감을 더욱 발전시키면서 프로젝트의 성공은 엄격하고 체계적인 변화에 대한 접근 방식에 달려 있습니다.
이 글에서는 Google Maps 디자이너가 제품 및 엔지니어링 관리자와 함께 색상을 어떻게 다루었는지를 다룹니다.
2005년 출시 당시의 Google Maps. 출처 : 구글 디자인무수한(myriad) 색상
원래 시스템은 숲의 습지부터 관목까지 각 세부 사항에 한 가지 색상을 사용했고, 이로 인해 차이가 너무 미묘해서 도로, 텍스트, 경계와 같은 중요한 요소를 구분하기 어려웠습니다.
다나 스테페(Dana Steffe), Google 지도 비주얼 디자이너:
색상 작업은 지도의 풍부한 디테일을 모두 유지하면서도 Material Design에 더 잘 부합하는 더 적은 수의 색상 견본으로 팔레트를 줄일 수 있다는 가설을 탐구하는 것으로 시작되었습니다.
데이비드 크로닌(David Cronin ), UX 디렉터, Google Maps:
레거시 시스템의 챌린지 중 하나는 일부가 문서화되지 않았다는 점입니다. 이 경우 색상 패턴 자체에서 컬러 코드를 찾아야 했습니다. 팀은 수년에 걸쳐 구현된 색상 범위를 완전히 이해하면서 시작했습니다. 인벤토리를 보았을 때, 색상이 너무 많아서 입이 떡 벌어졌던(토막 영어 공부, jaw dropping이라는 표현이 쓰였네요) 기억이 납니다.
상 한 (Sang Han), Google Maps 크리에이티브 디렉터:
기존 시스템은 일반적으로 복잡성이 많기 때문에 팀이 단순화에 집중한 것은 수많은 이점이 있었습니다. 새로운 색상 시스템은 사용자가 주변 세계를 더 잘 이해하는 데 도움이 되며, Google 팔레트에 맞춰 차별화하고 브랜드 자산을 구축합니다. 시스템화하면 그 시스템은 업데이트하기가 더 쉽기 때문에 팀이 브랜드를 계속 발전시킬 수 있습니다.
새로운 Google Maps 색상 팔레트는 복잡성을 줄이고 Material Design과 일치합니다. 출처 : 구글 디자인다나 Dana :
저는 Material Design에서 이 팀에서 팀을 옮겨 이 프로젝트에 참여하게 되었는데 , 그곳에서 제가 한 일의 많은 부분은 디자이너와 팀의 업무 속도(신속성)를 개선하는 방법에 대한 것이었습니다. 어떻게 하면 정말 이해하기 쉽고 사용하기 쉬운 것을 만들 수 있을까요? 새로운 시각은 시스템이 얼마나 복잡한지에 대해 약간 순진하게 생각하는 게 도움이 되었습니다. 이 경우, 그것은 좋은 생각이었습니다. 왜냐하면 저는 '물론 우리는 이걸 할 수 있어! 그럴 것 같아? 어쩌면!'처럼 접근했기 때문입니다.
새로운 시스템 탐색하기
Google 지도 팀은 지도 세부 정보 구별, 접근성 개선, 색상 범위 줄이기 등의 실험을 진행했습니다.
디에고 페레즈(Diego Perez), UX 디자인 매니저, Google Maps:
우리는 몇 가지 작은 것부터 시작했습니다. 작년에 우리는 지도에서 숲을 보고 있었고, 거의 같은 것을 나타내는 네 가지 다른 색상이 있다는 것을 알게 되었고 '그것들을 축약하면 지도가 여전히 작동할까?'라고 생각하게 되었습니다. 비교적 작은 변화였지만, 더 큰 변화를 수행할 수 있다는 자신감을 가질 수 있게 했습니다.
마이클 데이비스(Michael Davidson), 엔지니어링 매니저, Core Maps:
저는 꽤 회의적이었다는 것을 인정합니다. 하지만 그 가능성에 흥분했습니다. 저는 이 분야에서 꽤 오랫동안 일했고 복잡성을 느꼈습니다. 수백 가지 색상이 모두 무언가를 위해 존재했습니다. 색상 수를 관리 가능한 수로 줄이는 데 성공한다면 향후 서비스 릴리스가 훨씬 쉬워질 것입니다.
Before & After 지도로 더 많은 지형을 알수있어졌다. 출처 : 구글 디자인
레이니어 산 국립공원, 에제 눈덥ㅍ인 산의 봉우리도 알수있습니다! 출처 : 구글 디자인맷 심슨 (Matt Simpson), UX 디자이너, Google Maps:
우리는 이 색상이 왜 그 색이어야 하는지 묻는 것으로 시작했습니다. 그런 근본적인 부분에 의문을 제기했고, 그 덕분에 우리는 디자인 시스템을 더 자유롭게 할 수 있었습니다. 우리는 더 적은 것으로 더 많은 것을 할 수 있었습니다.
사라 니드햄 (Sarah Needham), Google Maps의 수석 인터랙션 디자이너:
Google Maps에 합류하기 전까지는 지도학에 대해 생각해 본 적이 없었지만 건축학을 전공했고 공간을 구성하는 방식에 많은 유사점이 있습니다. 이 협업을 정말 놀랍게 만든 것은 우리는 언제, 어떤 유형의 질문에 답하려고 하는지에 대한 논의였습니다. 가령, 우리는 사용자가 세상에 대해 무엇을 배우도록 돕고자 하는가? 사용자가 Map을 조금 더 탐색하도록 유도하려면 어떻게 해야 하는가? 같은 질문들이 그렇습니다. 이렇게 해서 우리는 더 많은 것을 알아내야 한다는 것을 전달하기 위해 계층 구조를 다듬기 시작했습니다.
탐색과정에서 만들어진 다양한 물 표현 방법들 출처 : 구글 디자인
도시 회색 연구 출처 : 구글 디자인
툰드라 산맥 출처 : 구글디자인기술적 우연/행운
적절한 시기에 이루어진 업데이트는 색상 시스템 업데이트를 활용해 지도의 세부 사항과 세분성을 더욱 향상시켰습니다.
수조이 베너지 (Sujoy Banerjee), 제품 매니지먼트 리드, Core Maps:
거의 같은 시기에 진행 중이던, 우리의 Natural Features 프로젝트는 실제 세계의 더 풍부한 정보를 지도에 제공하고 지역이 실제로 어떻게 보이고 느껴지는지 보여주려 했습니다. 우리는 위성 이미지를 가지고 있습니다. 어떻게 하면 그 강렬한 세부 정보를 이해하기 쉬운 방식으로 표현할 수 있을까요? 색상은 이러한 새로운 자연적 특징을 지도에서 돋보이게 했습니다. 우리가 새로운 버전을 테스트할 때, 장소가 훨씬 더 아름다워 보이게 해서 이 컬러 버전을 개인적으로 계속 사용했습니다. 색상이 업데이트되지 않았다면 새로운 특징은 거의 눈에 띄지 않았을 것입니다.
마이클 Michael :
이전 색상 구성표로는 출시되지 않았을 겁니다. 우리가 근본적으로 단순화한다면, 우리가 보고 있는 것을 실제로 이해할 수 있고, 요소 간의 대조를 이해할 수 있고, 접근성을 개선하고, 더 많은 세부 사항을 추가하더라도 실제로 일어나는 모든 것을 이해할 수 있다는 것을 확인할 수 있는 좋은 기회였습니다.
맷 Matt:
이전에 맵에서 대비와 접근성의 역할을 살펴보았을 때, 우리는 다양한 세부적인 디테일을 표현하는 상위 색상 쌍의 스프레드시트가 이미 있었습니다, 그것은 여전히 꽤 양이 너무 많은 목록이었습니다. 이것은 확실히 그것을 많이 단순화했습니다.
툰드라 업데이트는 위성 이미지에서 수집한 실제 세계의 색조를 반영합니다. 출처 : 구글 디자인100% 가상으로 전환
팀이 완전히 원격으로 작업하게 되자 팀은 협업하고 연구 결과를 수집하는 새로운 방식에 적응했습니다.
다나 Dana :
코로나가 발생했을 때, 저희 팀은 이미 원격으로 작업하고 있었습니다. Matt과 저는 샌프란시스코에 있고, Sang은 마운틴 뷰에 있고, 다른 많은 사람들은 시애틀에 있습니다. 우리는 가상으로 브레인스토밍하는 것에 편안함을 느꼈습니다. 무엇이 효과가 있고 무엇이 효과가 없는지 검증하기 시작하면서 일하는 게 흥미로워졌습니다. 다른 많은 디자이너처럼 보드의 색상을 비판하는 대신, 우리는 위성 도구를 사용하여 전 세계 장소의 이미지를 찾아 실제를 파악하려고 했습니다. 툰드라는 눈 때문에 넓은 땅이 하얗다고 생각하는 것은 오해의 소지가 있는 좋은 예입니다. 그 아래의 색상은 무엇일까요? 사실 바위입니다.
새라 Sarah:
데모를 만드는 힘. 단순화를 통해 매우 빠르게 만들고 반복할 수 있었습니다. 그래서 다음과 같이 빠르게 진행되었습니다. '방금 만든 이 데모를 보세요. 이 색상은 어떤 느낌인가요? 우리가 전달한다고 생각하는 것을 전달하고 있나요?'
디에고 Diego:
엔지니어링 팀은 우리가 세계의 특정 부분을 살펴보고 스트레스 테스트를 할 수 있는 맞춤형 툴을 만드는 데 도움을 주었습니다. 접근성에 대해 다시 언급하자면, 우리는 가장 일반적인 색상 관계, 예를 들어 물 위의 땅이나 녹지 위의 특정 유형의 텍스트를 측정할 수 있는 툴을 가지고 있었습니다. 그런 식으로 우리는 무엇을 최적화해야 할지 알았습니다. 모든 것을 하나로 묶는 것은 사실상 수학입니다.
우리의 장소 감각을 존중하다
전 세계 사람들을 위해 제작한다는 것은 사람들이 가까운 곳이나 먼 곳에 대해 느끼는 감정적 유대감을 존중한다는 의미입니다.
다나 Dana :
가장 두려운 부분은 사람들의 세계를 정확하게 표현하는 것에 대한 부담감입니다. 어떻게 하면 훌륭하게, 전 세계적으로 통용할 수 있게 할 수 있을까요? 사막이나 숲의 색상을 선택한다면, 이 지역들이 어디에서나 똑같지 않다는 걸 우리 모두 알고 있습니다.
디자이너들은 전 세계의 물을 비교하는 데 도움이 되는 개인 사진을 공유했습니다. 출처 : 구글 디자인수조이 Sujoy:
우리가 글로벌한 규모로 일한다는 사실은 복잡한 프로젝트라는 것을 의미합니다. 모든 것을 제대로 하고 있는지 확인하는 데 시간이 걸립니다. 또한 이렇게 야심 찬 것을 만들 수 있다는 것은 신나는 일입니다. 사용자가 세계를 보고 얼마나 아름다운지, 그리고 얼마나 다양한지 깨닫게 해주는 도구가 있어서 좋습니다.
마이클 Michael :
테스트하는 동안 확실히 재밌었던 부분은 이전에 본 적이 없는 장소를 골라서 중앙아시아가 얼마나 푸른지, 사하라가 어떤지 자세히 보는 것이었습니다.
데이비드 David:
이 프로젝트는 지도의 가장 좋은 부분을 다룹니다. 이 지도를 통해 멀리 있는 사람이 종이 지도를 보고 눈 덮인 봉우리와 멀리 있는 숲을 상상하는 것처럼 물리적 세계에 대한 것을 이해하는 데 도움이 됩니다. 우리가 사는 세상을 더 잘 묘사하고 거기에 의미를 더합니다.
https://www.youtube.com/watch?v=OkXttCJFL5g
미래를 바라보며
단순성 덕분에 새 시스템의 확장성이 높아지고, 팀이 시기적절한 새로운 기능을 구축하는 능력이 가속화되며, Google 지도의 미래를 위한 토대가 마련되었습니다.
마이클 Michael:
엔지니어로서, 팔레트 단순화로 인해 혜택을 이미 받았다고 생각합니다. 방금 출시한 COVID 레이어가 그 좋은 예시 같습니다. 들어가서 중요한 정보를 맨 위에 넣을 수 있었습니다. 혜택이 계속되기를 기대합니다. 이는 또한 디자인과 엔지니어링 간의 진정한 협업이었고, 이러한 것들을 고립시킬 수 없다는 것을 보여주었습니다. '아, 디자이너가 색상을 선택할 거고 우리는 그냥 그들이 하도록 내버려 둘 거야...'라고 말할 수 없습니다. 앞으로 이런 일을 어떻게 할 수 있는지에 대한 모델을 제공했으면 합니다.
상 Sang :
이 팀은 가능성의 문을 열었습니다. 새로운 회사에 가면 '그거 건드리지 마'라는 말을 많이 듣죠. 도미노를 넘어뜨릴 거예요. 이제 분명해졌어요, 이 팀에게는 어려운 일이 없어요!
맷 Matt :
우리가 만든 시각적, 정보적 계층적 공간에 정말 흥분돼요. 우리는 이 깔끔하고, 효과적이며, 연상을 불러일으키는 캔버스를 제작했습니다.
11.19.20
출처
https://design.google/library/exploring-color-google-maps
