[정보디자인] 하이브리드 이미지검색
2011. 8. 1. 17:44ㆍRe-design!
얼마 전에 네이버 이미지 검색 결과 디자인이 개편되었습니다.
http://naver_diary.blog.me/150113580452
기존 방식에 비해 세가지 뷰가 추가 되었습니다.
텍스트 설명을 없애고 이미지에 집중하도록 한 "썸네일만 보기" 와 타일형태로 여백을 없앤 "크게보기" , 새창으로 이동하지 않고 별도의 프레임에서 더 크게 보는 "미리보기"가 새롭게 추가 되었습니다.
네이버 썸네일만 보기
정보요소의 중요도와 대비
처음 슬쩍 봤을 때 기본 화면인 "썸네일만 보기"는 텍스트 부가정보를 없애고 마우스 오버하였을때 썸네일이 확대되면서 부가 정보를 보여준다는 점에서 구글 이미지 검색 개편의 영향(이라고 쓰고...)을 받은 것 같았습니다. 검색을 하는 의도에 따라 다르겠지만 저는 출처의 제목이나 유형(블로그인지 카페 뉴스인지) 작성일 같은 메타정보가 이미지를 찾는데 도움이 되는 경우가 별로 없었습니다. 물론 경우에 따라 부가 정보가 부족해서 불만인 경우도 있었지만 일반적인 경우는 아니었습니다.
여러 정보 요소를 표시할때는 모두 공평한게 좋은게 아니라 중요한 정보만을 강조하여 대비를 주어야 눈이 편합니다. 대비를 만드는 방법의 기본은 강조할 부분을 강하게 하는게 아니라 강조하지 않을 부분을 약하게 하는 것입니다. 음악 들을 때도 저음을 강조해서 듣고 싶으면 이퀄라이저로 베이스만 크게 키우는게 아니라 트레블을 깎잖아요. 이 대비를 더 강하게 적용하여 중요하지 않은 정보는 아예 안 보여주는 것도 좋습니다. 공간에서는 빼는 대신 마우스오버같은 stacked in time 방식을 사용 할 수 있습니다.
블로그 검색결과 정보 요소 디자인
우선 정보 요소를 사용 행태에 따른 정보 priority 순서대로 쭉 나열합니다. 꼭 중요한 정보는 항상 같은 위치에 놓이도록 정렬하고, 공간에 펼쳐놓아 한 눈에 비교될 수 있도록 하고 중요하지 않은 정보는 약하게 하거나 없애서 대비를 높입니다. 제목은 우선 가장 중요한 정보인데 이미지가 있느냐 없느냐에 따라 들쑥 날쑥 한 것은 좋지 않습니다. 항상 같은 위치에 정렬이 되는 게 좋습니다. 블로그에서 사진은 중요한 정보이니까 마우스 오버하면 펼쳐지는 stacked in time이 아니라 adjacent in space로 펼쳐 놓습니다. "검색어표시"나 "블로그 내 검색" 같이 계속 나열되고 정보량이 적은건(또는 사용 행태에 따라 노이즈가 될 수 있는) 아예 빼버리고 마우스 오버로 표시해도 될 것 같습니다. 블로그 포스팅의 고유 주소같은건 봐도 모르는데 블로그명보다 더 강조되어 표시되는 것도 이상하고요. 블로그의 시간 정보도 꽤 중요한데 정렬이 안되어 항상 같은 위치에 있지 않으면 눈에 잘 들어오지 않습니다. 똑같은 정보 요소를 가지고 디자인 한 것이지만 information priority를 고려하여 visual hierarchy 만든 것과 그렇지 않은 것은 차이가 큽니다.
암튼 그래서 별로 안 중요한 텍스트를 뺀 개편된 네이버의 이미지 검색 형태가 만족스러웠다는 것이지요.
이미지 정렬
하지만 네이버의 썸네일 보기와 구글의 이미지 검색은 큰 차이가 있습니다.
네이버의 썸네일만 보기는 한 눈에 들어오지 않습니다. 불필요한 여백 때문인데요.
첫째는 그리드에 깔끔하게 맞추기 위해서 가로 세로 이미지를 모두 정사각틀에 넣고 있어서 입니다. 어쩔 수 없이 이미지의 방향에 따라 상하,좌우 여백이 반복됩니다.
기호로 된 텍스트 항목은 소설처럼 쭉 읽는게 아니라 스캔을 해나가면서 중요한 것만을 취하기 때문에 세로로 정렬을 하는 것이 읽기 편합니다. 반면에 이미지는 기호를 해석하는 정보 처리 단계를 거치지 않아도 바로 중요한 정보를 찾아 낼 수 있기때문에 "한 눈"에 보는 게 정렬 보다 중요합니다.
둘째로 시선을 방해하는 여백을 더 늘어나게 만든건 "예쁜" 그리드를 위해서 양측 정렬을 사용해서 입니다. 브라우저를 늘이면 여백도 늘어납니다(가변적으로 행의 개수를 바꾸긴 하지만). 문장에서도 양측정렬을 하면 대충 보면 깔끔해 보이지만 readability는 떨어지거든요. http://en.wikipedia.org/wiki/Justification_(typesetting)
텍스트는 왼쪽 정렬 해야 읽기 편합니다.
추천 검색어 정렬에 따른 가독성 차이
다음의 이미지 검색 결과는 깔끔한 정렬을 위해서 세로, 가로 사진을 모두 정사각으로 잘라내 버립니다. 예쁘게 보이기 위해 정보 훼손하기를 택했습니다. 아이폰의 사진 앨범도 물론 이렇게 표현하고 있긴합니다. 하지만 검색이 아니라 내가 찍은 사진을 다시 보기 위한 것이라는 사용 맥락과 모바일의 작은 화면이라는 제약에 따른 선택이지 웹에서 굳이 이렇게 정보를 훼손해야 할 필요가 있는지 모르겠습니다. 화면이 좀 더 큰 아이패드의 사진 앨범만 해도 원래 비율을 그대로 표시하고 있고요.
네이버 크게 보기
새롭게 추가된 크게 보기 방식은 앞의 설명처럼 크게보기 보다는 여백없이 보여주기 때문에 보기 편합니다. 컬럼에 폭을 맞추어 가변적인 높이로 타일처럼 배치합니다. 그리드에 딱 맞추진 않았지만 더 그림이 눈에 잘 들어옵니다.
다만 이방식의 문제는 컬럼에 딱 맞추다보니까 세로 사진은 크고 가로 사진은 작게 보입니다. 큰 사진이 작은 사진 보다는 더 좋아보이고 시선이 먼저 가게되어 왜곡이 생깁니다. 저도 이 때문에 고민을 많이 하고 프로토타이핑도 여러 차례해봤는데 깔끔하게 딱 맞는 것보다는 아래처럼 들쑥 날쑥해도 크기의 편향을 없애는게 훑어보는데 더 좋았습니다.
물론 이렇게 가운데로 모으는 방식은 3컬럼에만 적용되는 한계가 있습니다. 또 가운데 컬럼에 세로 사진이 오면 휑해보이는게 문제인데, 폭맞춤을 하다가 현재는 옅게 배경색을 넣는 편법을 사용하고 있습니다.
플리커 검색 리디자인
구글 이미지 검색
구글의 검색 결과는 열과 행이 바뀌었을 뿐 같은 방식입니다. 개별 이미지의 넓이에 따라 한 열에 포함되는 썸네일의 수를 가변적으로 다르게 하고 있고 꼭 열의 높이에 맞추려고 하지 않습니다. 예쁘게 맞추려고 검색 순서도 바꾸는게 아닐까 싶게 딱 떨어지는데요 사실은 얍삽하게 크랍핑을 하고 있습니다(다음처럼 싹뚝 잘라먹는게 아니라 눈치 못챌 정도로). 스크롤이 아래로 가면 자동으로 다음 페이지 결과들이 보여지는 infinite scroll도 아주 편하고요. 메이저 검색엔진에서는 bing이 가장 먼저 하긴 했지만요.
이미지 검색의 목적 - 찾아보기와 감상
플리커 슬라이드쇼
네이버나 다음의 미리보기는 이도 저도 아니고 좀 애매합니다. 시원하게 크게 보이는 것도 아니고 슬라이드쇼로 보겠다는 것도 아니고요. 새창에 열리는 번거러움을 줄여주긴 하지만 그림도 작고, 매번 클릭하는 불편은 똑같습니다.
다음 미리보기
하이브리드 이미지 검색
그런데 제가 이미지 검색을 하는 경험을 돌아보면 실제로는 검색과 감상의 중간 정도의 스탠스에서 찾으면서 동시에 감상하는 경우가 대부분 이었습니다. 딱 원하는 이미지를 하나 찾아서 원본 이미지를 보고 끝나는게 아니라 다양한 이미지를 계속 비교하면서 보게되거든요.
"묻지마 이미지 검색" 이런 사용행태에 딱 맞춰진 검색이라 아주 맘에 들었습니다(현재 malware를 배포한다고 경고가 나와서 링크를 포함하지는 않습니다). 썸네일 따위를 보여주는게 아니라 원본 이미지를 원본 크기로 시원하게 펼쳐 보여주거든요. adjacent in space 방식의 슬라이드쇼 같은 느낌입니다.
너무 맘에 들었지만 "찾아보기"에는 불편한 방식입니다. 그래서 제가 사용하는 방식은 하이브리드 형태의 UI를 만들어 사용하고 있습니다. 리서치를 위한 이미지를 찾을때 많이 도움이 됩니다. 아이에게 동물 사진을 보여줄때 아주 만족스럽고요. 예제 사진도 지난번에 자연사박물관에서 사슴벌레랑 장수풍뎅이를 보고와서 아이한테 찾아보여줬던거거든요. 아이패드에서 사용할때는 쓱 핀치 줌으로 크게 보여줬다가 작게 해서 훑어보는 식으로 사용하면 편하고요.
이미지 검색 하이브리드 리디자인
아이패드에서 하이브리드 이미지 검색 활용 데모
이렇게 원본 이미지를 바로 검색 결과에 노출하는 것은 저작권 문제로 검색 서비스에서는 제공하기 어렵다고 합니다.
아뭏든 이미지 검색의 목적이 단순히 찾기와 감상하기로 이분화 되는 것이 아니라 찾으면서 감상하려는 케이스가 많다고 생각됩니다. 검색 포탈에서는 서비스 가능한 범위에서 이에 해당하는 방법을 고민해 주면 좋겠습니다.
[참고##검색##]