구글, 하이퍼링크 밑줄의 행방불명에 관한 소고
http://uxblogger.net/을 곧 폐쇠할 예정이라 2014년 8월 7일 UXBlogger에 발행했던 글을 brunch로 옮겨왔다. 2016년 4월 현재 여전히 언더라인을 제거한 검색엔진은 구글뿐이다.
2014년 6월 25일, 구글이 검색 결과의 하이퍼링크 밑줄(underlined links)을 제거했다. 검색 결과 페이지의 디자인을 바꾸는 일은 굉장히 드문 일인데 이게 무슨 영문인가 찾아보며 공부했던 것을 잊어버리지 않게 기록으로 남긴다.
▲ 구글 검색 결과 (왼쪽이 변경 후 / 오른쪽이 변경 전) via fastcodesign 1. Google remove underliend links
google.co.kr의 밑줄만 없어졌나 해서 google.com, google.co.jp 들어가 보니 마찬가지다. 모두 사라졌다. 1996년 구글 검색엔진의 전신인 Backrup을 창업한 이래로 처음이며 내가 알고 있는 한 검색 결과 페이지의 하이퍼링크 밑줄을 제거한 검색엔진은 현재 구글뿐이다.
The Verge의 기사를 읽어보니 google.com에서는 3월 13일에 제거된 것으로 보인다. 아래는 구글 수석 디자이너의 코멘트다.
하이퍼링크 밑줄을 없애면서 검색 결과 제목의 ‘폰트 크기를 키우고 줄 간격을 조정했다.’ ‘덕분에 가독성이 올라갔고 전체적으로 말끔하게 보인다.’
▲ 구글 검색 결과 페이지직접 검색해보면 – 뭐, 거의 20년 만에 밑줄이 사라졌으니 – 조금 낯설게 느껴지지만, 이전보다 말끔하게 보이는 것만은 확실하다. 타이포그래피 측면에서 밑줄은 문자의 가독성을 방해하기 때문이다.
그럼에도 검색 엔진들이 하이퍼링크의 밑줄을 고수하는 이유는 무엇일까?
밑줄이 색맹 문제(전색맹, 부분 색맹)를 가진 사용자 그리고 흑백 스크린을 가진 디바이스로 웹 페이지에 접근하는 사용자들도 웹 페이지의 링크를 구별할 수 있게 해주기 때문이다. 즉 웹 표준과 보편적인 유저빌리티를 위해 가독성을 방해하면서까지 밑줄을 고수했던 것이다.
직접 확인해보자.
솔직히 육안으로는 이게 잘 보이는건지 아닌지 확인하기 어렵다. 사륜안도 아니고..
Web Content Accessibility Guidelines (KWCAG) 2.0을 읽어보자.
1.4.1 Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
1.4.3 Contrast (Minimum)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:(Level AA)
컨텐츠는 색에 관계없이 인식될 수 있어야 한다.
저시력, 색맹 사용자도 콘텐츠를 인식할 수 있도록 콘텐츠와 배경색의 명도 대비가 4.5:1 이상이 되어야 한다는 지침이 눈에 띈다.
텍스트 콘텐츠(하이퍼링크 텍스트)와 배경 간 명도 대비를 확인해보자. (명도 대비 도구는 참고란에 붙여놓았다) 구글의 하이퍼링크 텍스트 컬러(#1A0DAB)는 명도 대비 4.5:1을 정확히 지키고 있다.
좌)정상, 우)3색맹 변환 명도 대비
사실 검색엔진 사이트들이야 흰 배경 + 하이퍼링크 텍스트의 컬러는 명도가 낮은 파란색을 사용하는 경우가 대부분이니 명도 대비를 잘 지키고 있다고 보면 된다.
하지만 전 색맹, 흑백 화면으로 웹 페이지를 보는 사용자도 배려하고 있는지는 한 번 확인해볼 만한 요소다. 흑백 화면의 검색 결과 페이지에서 밑줄이 없는 하이퍼링크를 인식하기란 쉽지 않다. 물론 우리는 경험에 의해 검색 결과 페이지에 보이는 검색 정보(Snippet)란의 윗부분이 제목을 나타내며 밑줄이 없어도 하이퍼링크인 것을 알고는 있다. 줄 간격, 폰트 크기 및 굵기 변화도 도움을 주긴 한다. 하지만 밑줄과는 비할 바가 못 된다. 뭐 판단은 사용자의 몫이겠지만.
▲ 구글과 빙의 검색 결과 비교 (Grayscale)
▲ 구글 검색 결과: 흑백 (왼쪽이 변경 후 / 오른쪽이 변경 전) via fastcodesign2. PC웹의 Underlined Links
# 2.1
잠시 호기심이 생겨 내가 운영하는 블로그의 하이퍼링크 명도 대비 검사를 해봤다. 읔~ 3.29:1이다. 3.5:1보다도 낮다. 명도 대비를 좀 더 높여야겠다. 그리고 이 블로그는 밑줄 대신 outlinks
아이콘을 추가시켜서 본문과 하이퍼링크 텍스트를 구분시키고 있다.
# 2.2
블로그 미디어PPSS의 하이퍼링크 텍스트 스크린샷이다.
명도 대비는 4.48: 1로 권고사항보다 낮지만, css의 색상과 border property(dashed) 를 이용해서 하이퍼링크를 구분시키고 있다. 밑줄이 너무 단조롭게 느껴지면 이런 방법도 괜찮다.
# 2.3
wired의 하이퍼링크 텍스트다.
wired의 하이퍼링크 텍스트밑줄과 색상 대신 css의 border-bottom, box-shadow property를 이용했다. 시각적으로 아름답지만 명도 대비는 1.22:1로 안습..
# 2.4
블로터닷넷의 하이퍼링크 텍스트다.
블로터닷넷 하이퍼링크 텍스트대부분의 언론사가 밑줄은 사용하지 않고 파란색 계열의 컬러만 이용해서 하이퍼링크 텍스트를 표시하고 있다. (사실 대부분의 뉴스 미디어는 하이퍼링크조차도 사용하지 않는다. 여전히 웹을 인쇄 지면처럼 이용하고 있다는 말이다.)
블로터닷넷 하이퍼링크 텍스트 흑백으로 변환이렇게되면 전색맹 사용자, 흑백 화면으로 접속한 사용자는 하이퍼링크를 전혀 인식할 수 없다.
3. 모바일 웹의 Underlined Links
모바일 웹의 검색 결과 페이지 하이퍼링크 텍스트도 확인해보자. 아이폰5, Chrome 브라우저를 통해 네이버, 다음, 구글의 검색 결과를 비교해봤다. 확인해보니 99퍼센트의 검색엔진 사이트들의 모바일 웹은 하이퍼링크 밑줄을 사용하지 않고 있다.
모바일 웹은 화면의 크기도 작고 각각의 검색 정보(Snippet) 간 회색 라인이 있어 검색 정보를 구분하기가 쉽기 때문이다. 오히려 밑줄이 있으면 가독성을 심각하게 해칠 것이다.
흑백화면이라도 검색 정보(Snippet), 제목(하이퍼링크 텍스트), 메타 설명(콘텐츠)을 구분하는 데 무리가 없다. 화면이 작아서 구성이 단순하기 때문이다. 하지만 네이버, 다음, 구글 간 편차는 있는 것 같다.
다음, 네이버, 구글의 제목(하이퍼링크 텍스트), 메타 설명 부분만 좀 더 자세히 비교해보자. 다음, 네이버는 구글보다 하이퍼링크 텍스트 컬러의 명도가 높다. 또 폰트 크기도 3px밖에 차이나지 않는다. 구글은 4px 차이나고 더 낮은 명도의 컬러를 사용하고 있다.
흑백(gray scale)으로 변환했을 때 – 물론 검색 정보(Snippet)의 구성은 사이트마다 다르지만, 단순화 시켜보면 – 하이퍼링크와 메타 설명 콘텐츠의 구분은 딱 봐도 구글 > 네이버 > 다음 순으로 잘되는 것을 확인할 수 있다.
▲ Gray Scale 변환
4. 마치며
검색엔진의 검색 정보(Snippet)란은 오랜 웹서핑 경험에 의해 이미 우리에게 학습되어 있다. 그래서 하이퍼링크의 밑줄을 제거해도 사용자가 검색 정보 영역 간 구분, 제목(하이퍼링크)과 메타정보 영역을 구분하는 것이 가능하다. 또 폰트의 굵기와 크기, 줄 간격에 변화를 줬기 때문에 grayscale로 변환해도 제목란(하이퍼링크)과 메타정보를 구분할 수 있다.
하지만 보통의 블로그, 뉴스미디어의 웹 페이지 본문은 검색엔진의 결과 페이지와 다르다. 하이퍼링크 텍스트가 본문과 폰트 굵기, 크기가 같다면 흑백(grayscale)으로 변환했을 때 하이퍼링크를 구분할 수 있는 요인이 하나도 없다. 본문에 있는 하이퍼링크 텍스트는 밑줄(underline) 혹은 2.1, 2.2에서 예를 든 것처럼 아이콘, border property 등을 추가해서 하이퍼 링크인 것을 알 수 있도록 디자인하자. 명도 대비 4.5: 1 역시 놓쳐서는 안 된다.
이 모든 것이 귀찮게 느껴지는 디자이너 혹은 개발자라면 하이퍼링크의 밑줄은 제거하지 말고 그대로 두면 된다.
5. 업데이트
5.1. 20170120
2017년 1월 20일 각 스니펫 카드 속성에 box-shadow가 추가되었다. (google.co.kr) 구분은 잘 되는데 흰 배경위의 그림자를 보고 있자니 답답해서 멀미가 날 지경이다.
2014년 6월 25일 이후 검색 결과 디자인 변경은 처음있는 일이고 co.jp, com은 어떤지 살펴보기 전에 (이틀 지나서) 원상복귀 되었다.
답답해요...최초 작성일: 2014.6.26.
내용 추가: 2014.8.7. (3장, 4장) / 2017.3.4.(5.1)
참고
명도 대비 체크 도구들
No coffee
http://webaim.org/resources/contrastchecker/
관련 글
텍스트 콘텐츠의 명도 대비 4.5:1
Web Content Accessibility Guidelines (WCAG) 2.0_1.4.1
PC/모바일 웹 접근성 체크리스트
Colour Contrast Analyser (CCA)
The Verge – google-removes-underlined-links-site-redesign
