[정보디자인] 검색엔진 URL 정보 표시

저는 twtkr(http://twtkr.olleh.com/)을 사용하고 있습니다. 일일히 클릭해서 사진 보는게 귀찮아서요. 오늘 twitter(http://twitter.com/) 를 오랫만에 보니 웹에서는 트윗에 포함된 url을 단순화 하여 보여주고 있더라구요. 아이폰에서 사용하는 서드파트 클라이언트인 tweetbot에서는 이전 부터 지원하고 있는 익숙한 기능이지만 메이저 웹서비스에서도 적용하고 있다는게 반가웠습니다.

URL information priority

http://www.dailymail.co.uk/sciencetech/article-1220286/Sir-Tim-Berners-Lee-admits-forward-slashes-web-address-mistake.html
라는 url을 나눠보면
- 프로토콜(http://) 
- 서버 주소(www.dailymail.co.uk)
- 서브 경로(sciencetech/article-1220286/)
- 페이지 이름(Sir-Tim-Berners-Lee-admits-forward-slashes-web-address-mistake.html)
으로 나눌 수 있습니다.
중요도 순서로 나열하면
서버 주소 >> 페이지 이름 > 서브 경로 >> 프로토콜 순입니다. 때에 따라서는 서브 경로가 페이지 이름보다 중요한 경우도 있겠지만요. 달랑 url만 링크하거나 할때 도움이 되니까 위 처럼 페이지 이름을 의미있게 짓는게 추세입니다. 블로그 기사의 permalink도 의미없는 고유 숫자 대신 제목을 표시하도록 변환하는 팁도 많이 사용하고 있고요.

그래서 트위터는 중요하지 않은 정보를 생략하여 url의 노이즈를 줄이는데 3가지 방법을 사용합니다.

1. http:// 제거

웹에서 사용하는 프로토콜이니까 새로운 정보가 아닙니다.
브라우저에서 먼저 사용되었는데 아이폰 사파리에서 먼저 적용하였고 크롬에서도 따라하고 있습니다.
브라우저 검색창 UI 디자인 비교 http://story.pxd.co.kr/174

2. url 줄임

너무 길면 어차피 읽지 않으니까 생략합니다. 보통은 쉽게 뒷 부분을 줄입니다.

3. www. 제거

사실 위 두가지는 검색결과에도 많이 사용하고 있는데 www를 빼는 건 신선했습니다.
서버 주소는 서브도메인(www)과 도메인(dailymail.co.uk)으로 나뉩니다. 별도의 기능을 하는 서브도메인이 아니라면 www는 별 의미가 없습니다. www 자체가 도메인의 월드와이드웹 서버라는 이름이니까요. 실제 웹 브라우저에 url 입력 할때 www를 빼도 제대로된 사이트라면 웹서버로 연결해줍니다. 
유선 전화로 시내 통화를 할때 국가코드나 지역번호 붙이지 않아도 전화 연결되는 것 처럼 자연스러운 것입니다. 맥락에서 불필요한 정보를 굳이 보여주는 것은 오히려 불친절해 보입니다. 한글 명함 전화번호에 국가 코드 집어 넣는 것 처럼요.

재작년에 팀 버너스 리 님께서 http:// 프로토콜을 만들 때 쓸데없는 // 두개 넣은 것을 엄청 후회하고 죄송하다고 밝혔지요.
Sir Tim Berners-Lee admits the forward slashes in every web address 'were a mistake'




검색 결과의 url 표시

검색 엔진의 검색 결과에서도 페이지의 url이 하나의 정보 요소로 표현됩니다. 어떤 정보가 검색 결과를 선택하는데 중요할까요?
검색 결과에서 http를 뺀 것은 그리 오래된게 아닙니다. 작년까지도 http를 모두 표시하고 있었고 구글이 아마 크롬팀의 영향으로 http를 빼고 다른 검색 엔진도 모두 따라했던 것 같습니다.


구글

구글은 얼마전에 url을 제목 바로 밑으로 이동하였습니다. 위치 상으로는 본문보다 더 중요한 정보라고 판단한 것 같은데 색상은 부가정보로 본문의 검은색보다는 덜 중요하고 눈에 덜 띄는 녹색을 그대로 유지하고 있어서 뭐 아직은 정리가 덜 된 느낌입니다.

구글은 다른 검색엔진과는 다르게 좀 더 중요하다고 생각되는 페이지 이름을 남기고 중간 경로를 생략합니다. 단순한 방식은 아니고 중간 중간을 생략하여 url 안에서도 정보를 뽑아내고 중요하지 않은 부분은 생략하려는 고민과 노력을 많이 합니다.

두번째 검색 결과에 보이는 것은 단순한 url이 아니라 웹사이트의 계층 구조를 나타내는 breadcrumb 입니다. 



Yahoo,네이버,다음(Bing)

얼핏 위 세 사이트를 구분하기는 아주 어렵습니다. 전형적인 검색 결과 표시 방법을 따르고 있어서 인데요.
전형적이라는 건 개편 전의 구글을 그대로 따라했다는 거지요. 이제 어떻게 따라 바뀔지 궁금합니다.

네이버와 다음의 글자가 작아보이는데 실제 글자 크기가 작은게 아니라 원본 이미지가 길어서 폭 맞춤을 하니 이미지가 축소되어서 그렇습니다. 그런데 이렇게 브라우저 폭에 따라 결과의 문단 폭이 가변적이 되는 방식도 문제가 있습니다. 문단의 폭이 길어지면 다음 줄로 시선이 이동도 길어져서 읽는 속도도 떨어지고 가독성이 낮아집니다. 사이트 구조에 예쁘게 맞추기다는 폭을 고정하는 것이 좋습니다. http://baymard.com/blog/line-length-readability
다음은 고정폭을 사용하지만 고정 폭이 너무 깁니다. 네이버의 최소폭도 너무 길고요. 인쇄물에서는 보통 줄 당 26-30자를 넣다고 하고요. 책처럼 가까이서 읽는게 아니라 모니터를 고려해도 네이버의 68자,다음의 62자 (나눔고딕 기준)는 좀 무리가 있어 보입니다. 물론 폭을 줄여 줄 수가 늘어나서 스크롤이 길어지는 것이 더 불편하기 때문에 많을 정보를 담기 위해서 좀 더 길게 디자인을 할 수도 있습니다. 하지만 두번째 줄의 여백이 많이 남는 걸 보면(기본 폰트로 정의한 굴림에서도)  노출 본문의 글자 수와 검색결과의 폭을 함께 고려하면서 디자인된게 아닌 것 같습니다. 뭔가 그냥  그림을 그리면서 폭을 정해버린게 아닌가 싶습니다.


informationredesign

추가: 현재 사용하고 있는 UI는 링크 색을 검은 색으로 하고 매칭 키워드를 강조하고 있습니다.

위는 제가 쓰는 검색엔진 입니다. 이전 글 검색 리디자인 참조 http://story.pxd.co.kr/396

가장 큰 특징은 favicon을 사용 하는 것입니다. url에서 페이지의 출처인 도메인이 가장 중요하다면 도메인을 가장 잘 표현하는 방법은 파비콘을 사용하는 것입니다. url가지고 복잡하게 할 필요가 없습니다. 이미지가 가장 효과적인 정보 표현 방법입니다. 백 글자 url 한 파비콘만.... 저는 요즘 검색을 하면서 신뢰할 만한 사이트의 파비콘만 보고 클릭하는 경우가 많아졌습니다.

검색결과에서 페이지를 클릭할지 말지는 이미 제목과 본문 그리고 도메인에서 결정이 됩니다. 페이지 이름이 물론 정보를 담고 있지만 상대적인 중요도는 낮습니다. url에서 경로와 페이지 이름을 아예 날려버리면 도메인이 더 잘 눈에 띄게 됩니다. 위의 야후나 다음(Bing)을 보면 도메인을 볼드로 강조하고 있는데 정말 효과적인 강조는 강조하지 않을 것을 약하게하여 대비를 크게 하는 것이거든요.
아 여기도 물론 www.를 빼고 있습니다. 이거 빼고 스스로 너무 뿌듯했는데 메이저 사이트인 트위터에서도 뺀 걸 보고 반가워서 이 글을 쓰게 되었습니다 :)

다른 검색 엔진과 다른 또 다른 차이는 링크의 언더라인을 사용하지 않는 것입니다. 이제 웹에서 대충 파란색이면 링크라는 건 학습되어 있습니다. 클릭 할 수 있다는 걸 알려주기 위해서 지저분하게 밑줄 그으면서 가독성을 해치는 건 잃는게 더 많습니다.이제 링크의 밑줄 같은거 뺄때도 된 것 같습니다. 트위터를 보세요. 링크 없어서 뭘 눌러야 할지 모르겠다고 불평하지 않잖아요.

사실 리디자인에는 본문에 모두 링크가 걸려 있습니다. 모바일 웹이나 앱에서는 fitts's law 를 고려하여 리스트 전체에 링크를 걸어 두는 경우가 많은데요. 웹에서도 마찮가지입니다. 클릭할 곳이 넓으면 훨씬 편합니다. 한번 익숙해지면 반대로 돌아가기 어렵습니다. 다만 이 경우에 본문 중에서 키워드를 select 할 수 없습니다. 하지만 빈도가 많지 않아서 클릭 범위를 넓힌 것이 더 도움이 많이 되었습니다.

추가: 본문에도 링크를 걸어서 사용하면서 제목이 굳이 링크임을 나타내는 파란색일 필요가 없게되었습니다. 오히려 본문과 너무 도드라지게 다른 색을 사용하는게 가독성에 방해가 되어 본문을 검은색으로 바꾸었습니다. 대신 매칭 키워드를 더 도드라지게 강조했습니다.
네이버 모바일도 이제는 본문에도 링크가 걸려있는데요. 제목이 계속 파란색일 필요가 있을까요?


정리하면

현재 검색결과는 보다 많은 정보와 기능을 넣는데 초점이 맞추어져 있는 듯 합니다. 하지만 결국 사용자에게는 검색엔진이 제시한 많은 결과들을 비교하여 만족도 높은 결과를 찾는 것이 목적이므로 오히려 덜 중요한 정보를 덜어내어 인지적 비용을 줄여주는 방향의 접근 역시 필요합니다.

1. 파비콘 좀 넣어주세요.
2. url 정말 꼭 반드시 필요한게 아니면 덜어내 보세요. (특히 블로그 주소)
3. 링크 밑줄 좀 빼주세요.
4. 문단 폭 좀 줄여보세요.

웹페이지 검색 결과 디자인은 그냥 정답인 구글 따라하면 되는 것 같지만 구글도 더 잘 하려고 열심히 노력하고 있습니다. 모두 열심히 해 주세요.

[참고##검색##]