구글 블로거 닷컴의 디자인은 내가 발가락이나 ㅇㅇ로 디자인해도 그거보다 낫겠다고 개인 블로그에 깐지가 어젠데, 구글이 검색창과 전반적인 UI 디자인을 개선했습니다. 이번에는 제법 만족스러우니 기분좋은 마음으로 하나하나 짚어가며 소개해드립니다.


일단은 로고 디자인이 바뀌었습니다. 위가 기존 유치 찬란하던 디자인이고, 아래가 새로 개선된겁니다. 전반적인 색감과 엠보싱 모양새가 바뀌었고, 얼간이 같았던 그림자 처리가 정돈되었습니다. 지나가는 사람이 메고있던 꼬여있는 어께끈을 바로잡아준 그런 기분이네요. 기존에 디자인이 얼마나 어이없었냐면요, 일단 구글 로고의 그림자가 구글 로고 아래에 있는게 아니라 위에 있었습니다. 가령 맨 앞의 G 자를 보면 오른쪽 꼭다리에 그림자가 위로 올라온게 확 티가 나죠. 그리고 녹색의 L자 상단 부분을 봐도 티가 납니다. 회사 CI 부터가 이런식이니 니들은 디자이너 없다고 말해도 구글은 할 말 없었던 겁니다. 이번에 정말 잘 바꿨습니다. 꼭 꼬맹이들 핥고 빠는 유아용 대형 레고같은 분위기였는데 훨씬 부드러워지고 말랑해졌지요. 미세하게 바뀐거지만 이정도의 색감 차이는 중요한거에요.


가령 몇년 전에, 심지어 2006년에 제가 개인 블로그에 썼던 글이 있습니다. "한국 사람들의 색감이 딸리는 원초적인 이유"라고요. 그 글에서 다뤘던 예제가 다음 구형 CI입니다.



뭐 윈도우 XP용 그림판에 있는 #00FFFF 등 원색과 비교해보시면 같은 녹색이나 파랑, 노랑이라도 얼마나 느낌 차이가 심한지 감이 올겁니다. 근본적으로 공돌이들은 색감에 대한 교육이 제대로 안되어있기 때문에 감각이 부족합니다. 그래서 이런 삐꾸같은 로고를 보고도 이상한걸 느끼지 못해왔던거죠. 구글, 이번에 정말 잘하셨습니다. 기존건 정말 구렸어요. 그리고 완전 대조적으로 이번에 개선된건 정말 마음에 쏙 드네요.


그 외에 다른 것도 한번 살펴보죠.. 제가 예전에 개인블로그에 "구글 코리아, 양키 센스는 이제 그만", "무심한 구글, 그리고 번역과 디자인"이라는 글에서 연이어 깠던 이미지 검색 메인.


2008년 5월 29일 "구글 코리아, 양키 센스는 이제 그만" 당시 버전


2010년 3월 11일 "무심한 구글, 그리고 번역과 디자인" 당시 버전


2010년 5월 7일 "구글, 로고 및 검색 UI 디자인 산뜻하게 개편" 현재 버전


이렇게 3단 변신 끝에 깔끔한 현재의 모습을 찾았습니다. 혹자는 깔끔한게 구글의 원래 스타일이 아니냐고 하는데, 맞습니다. 구글의 디자인은 깔끔한 스타일입니다. 하지만 예전 디자인은 깔끔하기만 했고 세련됨은 없었다고 생각해요. 현재 디자인 정도면 어느 정도 내세울만 합니다. 뭐 저같은 놈은 여기서도 Google의 e와 아래 검색창 길이의 그리드를 맞추고 싶어서 두드러기가 나지만 괴상한 로고를 교체한것만 해도 어디에요. 아무튼 잘하셨습니다.


이번에는 실제 검색어를 입력했을때 변한 모습을 관찰해봅시다. 구글이 이번에 엄청나게 손을 댄 것 같습니다. 그리고 재미있게도 네이버가 얼마전에 개선한 검색 결과 화면이랑도 상당히 닮았습니다.


구글 예전 버전


구글 영문판


구글 한글판


네이버


네이버처럼 좌측에 탭으로 검색결과를 구분해서 볼 수 있게 만들었습니다. 누가 먼저인지는 선후관계를 모르겠으나 네이버랑 제법 닮았습니다. 아, 더 찾아보니 Bing 영문판의 검색 결과 화면이랑 많이 닮았다더군요. 아무튼 이 부분도 맘에 듭니다. 보수적인 구글인데, 바꾸면 화끈하게 바꾸는듯.


이번에는 좌측 탭에 대해 살펴봅시다. 픽셀 하나 놓치지 말라고 100% 크롭했으니 눈 크게 뜨고 비교해보길.



잘 보시면 Everything에 검정색 볼드처리로 "이게 선택된 탭이다"라고 알려주고있습니다. 그 외에 이미지라던가 맵이라던가 이런건 파란색 글씨로 "이건 링크다. 클릭하면 변한다"라고 알려주고 있는 셈이지요. 여기까지는 별 문제 없고 괜찮습니다.




갑자기 파란 바탕에 흰글씨를 집어넣습니다. 위에선 선택된 탭은 검정색에 볼드로 보여주더니, 여기선 파란 바탕에 흰 볼드체라니요. 일관성이 없는거죠. 그리고 More/Fewer 버튼의 경우, 앞의 블릿 아이콘이 위의 다른 항목 아이콘과 비슷한 크기로 되어있습니다. 뭐 나름대로 디자인의 통일성을 주려고 했는지는 몰라도.. 마치 저거 자체가 검색 항목 탭 같아보이니 좋지 않다고 생각합니다. 글씨 크기에 변화를 주거나 가운데 정렬을 하고 아이콘을 제거하거나 해서 구분을 줘야 한다고 생각해요. 그리고 잘 보시면 Fewer 글씨가 위의 Discussions 글씨보다 1px 앞으로 나와있습니다. IE랑 크롬 모두에서 이런걸 보니 크로스브라우징 이슈는 아닌것 같고.. 코딩좀 잘 하시길..


잠시 생각나서 한글판 페이지도 열어봤는데..



뭔가 이상한 부분 발견.



더보기 부분만 돋움체고 위에 블로그, 뉴스 등 다른 글씨체는 굴림체. 뭐 무슨 말이 더 필요할까요.. 코딩좀 꼼꼼히 하시길..


그리고 네이버랑 비교해서 하는 말이지만, 왼쪽 탭의 배경이 오른쪽 내용 부분이랑 떨어져있으니 연관성이 약하게 느껴집니다. 참조를 위해 다시 구글과 네이버의 스샷을 가져오겠습니다.




통합 검색 부분의 탭 모양새가 우측의 내용이랑 쫙 붙어있지요? 이렇게 명확할수가 없습니다. 네이버가 디자인 하나만큼은 대단하죠.

그리고 Maps 버튼을 누르면 이렇게 화면이 쌩뚱맞게 변합니다. 아니 위에 다른 애들은 모두 탭으로 열리는데 왜 이놈만 화면이 싹 변하냐구요. 화면이 변한다면 변한다고 예고라도 해줘야하는겁니다. 가령 Maps 버튼만 얇게 라운드 박스를 쳐서 버튼처럼 보이게 만든다던가, 흔히들 쓰이는 새창에서 열기 블릿 같은걸 달아준다던가.. 물론 깔끔함이 줄어들수는 있겠네요.



그 외에 변한 부분은 검색 결과 하단의 로고입니다.





맨 위는 개선 전의 모습입니다. 아직 여러 국가의 구글 페이지가 개선되지 않은지라 캡쳐해올 수 있었죠. 중간은 영문판, 아래는 한글판입니다. 같은 사이즈로 스크린샷 찍어서 575px로 리사이즈했으니 참조하세요. 확 띄는 부분은 구글 로고가 훨 커졌다는거, 그리고 하단의 검색창 모양새가 많이 변했다는겁니다. 로고는 밑에서 다시 다루기로 하고.. 검색창 변한게 너무 맘에 안듭니다. 한마디로 눈에 띄지 않습니다. 버튼도 아닌 input 창이 약간 튀어나와 보이고, 테두리가 얇아서 잘 눈에 띄지 않죠.


비교를 위해 국내 포탈들의 검색창을 찍어서 보여드리겠습니다.


네이버


다음


네이트


파란


야후


빙 & MSN


구글 예전 버전


구글 영문 버전


구글 한글 버전

잘 보면 구글만 검색창이 희끄무리한게 잘 눈에 안띕니다. 예전 버전은 상단의 두께가 진해서 움푹 들어간 느낌이 들어 눈에 잘 띄었지만 이번에 바뀐건 약간 튀어나온것처럼 보여서 영 눈에 띄질 않네요. 이 부분 빼고 전 불만 없습니다.


위쪽 사진 보여줬으니 이제 아래쪽 사진도 보죠. 기왕 준비한거.. 다 보여줘야 글 쓰는 사람도 쓰는 맛이..


네이버


다음


네이트

파란


야후


빙 & MSN


구글 구버전


구글 영문판


구글 한글판


여기까지 각 검색 포탈들의 검색 결과화면 하단 UI 비교였습니다. 역시 구글이 잘 눈에 안띕니다. 한국쪽 유행처럼 검색창 주변 테두리를 굵게 만들어 눈에 확 들어오게 하는건 너무 큰 기대일까요? 구글은 뭐니뭐니해도 검색인데 말입니다..


이번에는 검색창 하단의 검색 페이징 부분을 개선 전 후로 나누어 비교해봅시다.




위는 개선 전이고, 아래는 개선 후입니다. 링크를 뜻하는 밑줄을 없앤 대신 글씨색을 파란색으로 바꾼게 눈에 띕니다. 그리고 이 파란색 역시 #0000FF가 아닙니다. 얼핏 보기만 해도 적당히 예쁘게 연해졌네요. 완고한 구글이 굉장히 유연해진 느낌입니다. 크기도 커졌고 하니 굳이 숫자를 누르려 하기보다는 위쪽의 노란 O를 누르라는 의도인것 같습니다. 여기서는 뭐 파란 우측 화살표의 하단 픽셀의 앨리어싱이 눈에 띄는것 이외에는 거의 꼬집을게 없습니다.(지독하죠... 더 꼬집으면 정말 비행기 타고 날아와서 얼굴이나 보자 할지도..)


여튼 구글이 이번에 로고를 포함한 검색 결과 UI를 상당부분 손봤고, 심미적으로 굉장히 만족스럽습니다. 다만 검색창이 눈에 잘 안띄는 점은 아쉽습니다. 한국 유행을 적용해보길 권장합니다.



그 외에 구글 페이지에서 글씨체의 변화를 감지할 수 있었습니다.





전 친절하니 제대로 알아보기 위해 100% 크롭으로 확대해드릴게요.


맨 위가 검색 결과, 중간이 이미지 검색 첫화면, 마지막이 구글 첫화면입니다. 잘 보시면 검색 결과 페이지의 폰트가 돋움체로 변한게 보입니다. 하도 사람들이 굴림체가 구리다고 하니까 드디어 돋움으로 바꾼것 같네요.


이건 오른쪽 잘라낸거. 아마 구글의 다른 페이지들도 점차 돋움체로 바뀌지 않을까 예상해봅니다.


수많은 산세리프/세리프 폰트가 널려있는 외국과 달리, 국내 폰트의 현실은 XP 탑재 굴림/돋움/바탕/궁서 네가지가 기본입니다. 더 예쁜 폰트 쓸라면 이미지화해서 쓰는 수 밖에 없지요. 네이버 등 업체가 자체적으로 나눔고딕 등을 배급하고있는데 실질적으로 쓸만한 폰트는 굴림이랑 돋움이 전부입니다. 궁서체 쓰면 누구 저주거냐는 말 나오고, 바탕체 쓰는곳은 모질라 파이어폭스 한국페이지밖에 본 적이 없고..(그나마 좀 이상하고 촌스러운 느낌이죠.) 결국 굴림과 돋움인데, 두 폰트 다 어느 정도 이상으로 크기가 커지면 비루하고 기괴해보입니다. 돋움과 굴림은 좋아하는 사람이 갈리는 편이지만, 작은 크기의 폰트에선 돋움체가 정갈하고 딱딱 맞아떨어지는 느낌이죠.


외국 사이트가 한국어로 번역되서 들어올때 가장 흔히 발생하는 문제가 폰트 사이즈 문제입니다. 예를 들어 이런거죠.



위를 보면 영문의 경우 하나도 안뭉개졌지만 한글은 뭉개진 부분이 많이 보입니다. '주요기능'에서 '주'라는 글씨체는 자음과 모음이 붙었고, 저 아래의 '맞춤기능'은 '맞춤' 부분이 뭉쳤네요. 영어는 알파벳 자체가 자음 모음 조합 없이 주루룩 쓰는거라 간단하게 나가지만, 한글의 경우 글씨가 복잡해서 최소 사이즈가 좀 더 커져야합니다.(11px 정도.) 그걸 신경 안쓰면 저렇게 뭉치고 읽기 불편해지지요.



여기서 '검색결과' 부분을 볼때 미묘하게 뭉치지 않는 사이즈만 벗어났네요. 딱 11px. 영문판도 11px이라서 뽀록으로 맞았는지는 모르겠지만, 오늘 구글 검색결과 페이지를 쭉 둘러보니 폰트 뭉친 부분은 안보입니다. 예전에는 이런게 보였거든요.




폰트가 많이들 뭉쳐있죠? 한글 폰트를 너무 작게 잡았을때 뭉치는 경우가 첫째요, 둘째는 한글과 영문이 섞여서 궁합이 안맞는 문제입니다.


위는 font-family를 무려 Georgia로 해놨습니다. 조지아, 좋은 글씨체죠. 영문 가독성도 뛰어나고 수많은 외국 언론사 홈페이지가 조지아 글꼴을 사용하죠. 하지만 여긴 한국이라구요. Georgia 글꼴에 한글 글씨체가 있나요? 없으니까 그냥 굴림체를 적용해버리는겁니다. 그 결과 한글은 굴림체로 나오고, 영문과 숫자는 조지아로 나와서 이상하게 보이는거죠. 구글 검색 결과의 font-family는 "굴림, gulim, arial, sans-serif" 이런식으로 되어있습니다. 굴림체가 있을 경우 굴림체 먼저 보여준다는 말이죠. 일단 어드메 Georgia니 Verdana니 이런거 말고 '굴림'이 들어갔다는거 자체가 한국 환경을 신경쓰게 되었다는 증거.


외국 서비스가 한국 들어올때 글씨체쪽 문제가.. 첫째는 너무 작은 한글 폰트 사용시 뭉치는 문제, 둘째는 영문 폰트 적용해서 한글만 굴림체 나오는 문제, 셋째는 한글 폰트에 이탤릭 속성 적용하는 문제입니다. 이탤릭 자체가 한글이랑 어울리지 않는거고, 존재하지도 않는 속성인겁니다. 쓰면 안되요. 구글 이번 업데이트에선 이런 부분들이 싹 없어졌으니 아주 쾌적하지요. 디자인적으로 완성도도 높아지고.. 말 많고 불평 많은 미리야도 좋아하고..




외국 블로그를 찾아보니 개선 전의 과도기 이미지가 몇장 보입니다.



이건 이 블로그에서 찾아낸 스크린샷인데, 이대로 나왔으면 아마 저는 구글을 아주 헐뜯고 욕했을겁니다. 저 파란 버튼 두개는 마치 발암물질이 함유된 청색 식용색소에 풍덩 담갔다가 뺀 마쉬멜로우 캔디같네요. 혹은 파워에이드 병 안에 누군가 집어넣은 워셔액 같은, 뭐 그런 기분입니다. 안그래도 위에 로고가 휘황찬란한데 아래에서까지 저렇게 면적 넓게 무게 잡고 있으면 곤란하죠.



실제 결과물은 이렇게 적용되었습니다. 전 버튼이 오른쪽에 있는걸 좋아하지만, 아무튼 한결 나은 느낌. 그리고 여기서도 입력창이 튀어나와보이는 이상한 모양새는 여전합니다. 튀어나온건 누르는거고, 푹 들어간건 채우는거죠.



이건 이 블로그에서 찾아낸 이미지. 검색 버튼이 파란색인점이 눈에 확 들어옵니다. 다만 검색창 폭은 엄청나게 넓어서 Search 버튼이 멀뚱이 떨어져있는 느낌. 그리고 색상의 무게가 왼쪽의 Everything과 오른쪽의 Search로 분산되어있어서 뭔가 싸구려같은 느낌마저 듭니다. 이 디자인은 아래와 같이 바뀌어 적용되었네요.



구글의 선택은 색을 쪽 빼버리는 것이었나봅니다. Everything의 파란 바탕이 사라지고, 대신 글씨색을 검정색 볼드로 바꿔서 "이건 링크가 아니며 이미 선택되어있음" 정도로 때운듯. 검색 버튼도 색을 없애고 보수적인 회색으로 유지. 하지만 검색창 오른쪽의 Search 버튼까지 눈이 가면서 집중력이 풀리는 느낌입니다. 한마디로 검색창 길이가 너무 길어요. 검색창 테두리 굵기를 늘리거나, 아니면 검색창 길이를 줄여야 이런 문제를 해결할 수 있습니다. 근데 여기서 웃기는건 Images나 Videos 등을 클릭하면 파란 바탕으로 일관성 없이 변하는거죠. 아휴 허술해라..



여튼, 이번 CI 다듬은것과 더불어 바뀐 검색 화면 UI는 정말 좋습니다. 제가 꼬집어댄 부분은 아주 지엽적인 부분이고, 전반적인 구글의 디자인 수준이 확 올라간 느낌이 드는 만족스러운 업데이트입니다. 구글 스타일로 엠보싱 넣어서 별점 드리지요.



구글이 드디어 디자이너를 뽑은건가? 더도 덜도 말고 크롬만 같았으면.

 

 

출처: uxfactory.com

이 게시물을..