새로워진 구글 디자인을 자세히 소개합니다!

작성일: 2010년 5월 11일 화요일

지난 주에는 구글 검색 페이지의 새로운 디자인에 관한 발표가 있었습니다. 이에 대해 이번 시간에는 저희 디자인팀의 생각을 말씀드리고자 합니다. 결론적으로 저희는 강력한 기술, 빠른 결과 페이지, 심플함, 구글스러운 특성의 제품을 더욱 좋게 만들기 위해 가능한 모든 노력을 기울였습니다. 구글 디자인팀의 목표는 많은 사람들에게 익숙한 디자인을 더욱 향상시키는 것입니다. 디자이너에게 이 보다 더 흥미진진한 도전과제는 없을 것입니다.

저희는 새로운 디자인 작업을 위해 우선 검색에 대한 사람들의 기대가 날로 높아지고 있다는 점을 중요시했습니다. 지난 10년 동안 웹은 진화를 거듭한 결과 사용자는 더욱 복잡한 검색어를 입력하고 있으며, 여기에 맞는 특별한 검색툴을 요구해왔습니다. 저희는 이 같은 빠른 변화에 부응하고자 구글의 엔지니어를 모아 팀을 구성하고 새로운 모습의 검색 페이지를 개발하기로 했습니다. 디자인의 핵심은 사용자가 원하는 모든 툴과 기술을 어떻게 하나의 페이지에 담아낼지를 파악하는 것이었습니다.

웹사이트의 유연성을 확대하는 일반적인 방법은 화면 왼쪽에 검색도구를 두는 것인데 디자이너들은 이를 종종 “좌측 내비(left-hand nav)”라고 부릅니다. 저희는 구글 서비스 초창기부터 왼쪽에 검색도구를 둔 데모 버전을 만들고 2006년부터 사용자 테스트를 진행해 왔습니다. 이런 좌측 검색도구 방식은 전반적으로 사용자의 메인 콘텐츠를 방해하지 않고 웹서핑이 가능한 좋은 방안이지만 동시에 사용자의 시선을 방해할 수도 있습니다. 사용자 입장에서 보자면, 구글 사용자는 강력한 검색도구와 함께 항상 단순한 브라우저를 원합니다.

이에 대한 균형점을 찾기 위한 첫 조치가 지난해 5월 발표된 검색도구 패널(Search Options panel)입니다. 당시에는 사용자가 검색도구를 열고 닫을 수 있도록 디자인했습니다. 이를 통해 새로운 디자인 유형에 대해 사용자들의 반응을 신속하게 파악할 수 있었습니다. 이를 통해 얻은 교훈을 바탕으로 구글의 디자이너, 리서처, 엔지니어들은 검색도구가 고정돼 있는 경우를 연구하기 시작했습니다. 이에 따라 수 백여 가지의 모델을 만들고 사용자와 구글러의 의견을 받고 테스트를 진행했습니다. 여기에는 구글에서 지금까지 실시된 것 중 최대 규모의 인식 테스트도 있었습니다. 테스트 결과 좌측에 고정형 검색도구를 두기로 결정했습니다. 이와 동시에 전반적인 시각적 요소를 가벼운 톤으로 바꿨습니다. 왼쪽은 기존의 검색도구이며 오른쪽은 새로운 검색도구의 스크린샷입니다. 한번 비교해 보세요:-)



고정형 검색도구 설정으로 결과 페이지가 좀 더 무거워진 느낌이 있어 디자인 면에서 좀 더 가벼고 밝은 느낌을 줄 수 있는 아이디어를 연구했습니다. 전반적인 비주얼 디자인은 구글 로고부터 시작됐습니다. 아래는 기존 로고(위)와 새로운 로고(아래)를 비교한 것입니다.



새로운 로고는 좀 더 가볍고, 밝으며, 단순해 보입니다. 구글 디자인이 갖고 있는 최대한의 특성인 구글스러운 개성과 장난기를 최대한 드러낼 수 있도록 했습니다. 이 로고는 좌측 검색도구의 확장 기능과 함께 완벽한 통합을 상징하는 아이콘이자 수백 개의 작은 변형 모델의 기초가 되었습니다. 또한 웹사이트 풋터(footer) 부분에서는 링크의 블루 음영과 언더라인을 없애고, 색을 더 밝은 톤으로 바꾸었습니다. 검색창도 더욱 크게 만들었습니다. 아래는 기존 footer (위)와 새로운 footer (아래)를 비교한 것입니다.

저는 개인적으로 최근의 디자인 작업이 만족스럽지만 그렇다고 해서 디자이너로서의 임무가 끝난 것은 아닙니다. 저희는 이미 추가 작업에 대한 테스트를 진행하고 있으며, 더 나은 검색 페이지를 위해 여러분의 의견에 계속해서 귀기울일 것입니다.

관심이 많은 분들을 위해 저희가 시도하고자 했던 다른 디자인 변화에 대해서도 소개하겠습니다. (각 이미지는 확대해 볼 수 있습니다).

1. 블루톤 홈페이지: 우리는 항상 파란색 컬러에 대해 강력한 친밀감을 느낍니다. 파란색 컬러는 보통 웹 링크의 색으로 웹을 하나로 묶어줍니다. 그래서 파란색은 많은 디자인의 기본 컬러가 되었습니다.
2. 파란색 버튼: 파란색의 큰 검색 버튼은 외부의 의견을 청취하기 위한 첫 번째 테스트였는데 사용자들의 반대가 즉각적으로 나왔습니다. 사용자 의견을 바탕으로 이후 모델에서의 버튼 색깔을 바꾸게 됐습니다.
3. 유니버설 바: 이는 검색 결과 페이지에서 메인 검색 결과와 도서, 뉴스, 쇼핑과 같은 기타 유형의 검색 정보를 구분해주는 선입니다.
4. 블루톤 결과 페이지: 이는 우리가 만든 마지막 블루톤 디자인의 하나로 “웹”링크를 “전체”로 바꾸었을 때 적용해 본 것입니다. 전세계 정보를 체계적으로 정리하기 위한 구글의 미션에 더욱 가깝게 가겠다는 의지를 반영하는 것입니다.

작성자: 사용자 경험 디자이너 존 와일리(Jon Wiley)