하이퍼링크 UX 가이드라인
UX 디자인 배우기 #53
Today UX 아티클
※ 이 글은 UsabilityGeek에 올라온 Cassandra Naji가 작성한 「Hyperlink Usability: Guidelines For Usable Links」를 원작자의 동의하에 번역 및 게시한 글입니다.
하이퍼링크. 하이퍼링크와 상호작용하는 것은 아마 유저가 온라인에 접속할 때마다 가장 자주 하게 되는 액션일 겁니다. 2010 닐슨 보고서는 평균 유저는 하루에 88개의 홈페이지를 방문하고, 거의 900개의 링크를 본다고 합니다.
하이퍼링크가 인터넷 경험에 있어서 필수 불가결하다는 사실은 놀랄 일이 아니며, 하이퍼링크는 Tim Berners-Lee가 웹을 단순히 “문서와 링크”라고 표현했던 상호 연결성의 여명기부터 존재해왔습니다.
마이크로소프트사의 말에 따르면, 링크는 “클릭할 수 있음을 보여주는 텍스트 또는 그래픽”입니다. 링크는 여전히 주로 ‘유저가 웹에서 길을 찾을 때, 사이트 안에서 움직이거나 혹은 연결된 외부 사이트로 클릭해서 나갈 때 사용하는 것’을 뜻합니다. JustinMifsud에 따르면 유용한 링크란, 유저가 “당신의 웹사이트에 간 목표를 달성할 수 있게 해주는 것… 사용자 경험에 긍정적인 영향을 미친다”라고 합니다.
유용한 하이퍼링크는 좋은 사용자 경험의 본질입니다.
하이퍼링크가 사용자 경험에서 차지하는 중심적 역할에도 불구하고, 단 하나의 클릭으로 페이지, 사이트, 사람을 연결하는 하이퍼링크 디자인과 이것이 사용성에 미치는 영향은 UI/UX에서 관심 많은 토론 주제가 아닙니다. 언제나 그 자리에 있어서, 링크 사용 이슈에 사이트 오너나 웹 디자이너들이 관심을 가져야 하는 만큼 가지지 않는 것일 수도 있습니다.
대부분의 사이트에서는 다소 차이는 있을 지라도 W3C’s Web Content Accessibility Guidelines에서 찾을 수 있는 모범 사례를 따라 파란색에 밑줄을 치는 하이퍼링크 관습을 따릅니다. 하지만 특히 지속적으로 발전하는 UI 분야에서는 관습적인 하이퍼링크 디자인이 사용자 경험에 좋은 영향과 나쁜 영향을 모두 미칠 수 있습니다.
Berners-Lee가 링크를 웹 서핑의 기초적인 요소로 지명한 후로 30년이 지나면서 모든 것이 변했습니다. 하이퍼링크도 변해야 할 시간이 아닐까요?
하이퍼링크의 역사
파란색 밑줄 친 형식의 관습적 하이퍼링크는 UI 디자이너들이 매우 좁은 범위의 디자인 창의성을 가지고 있던 시대부터 남은 흔적입니다. Berners-Lee의 원조 WWW 브라우저 프로토타입과 같은 매우 초창기의 브라우저 프로토타입에서는 디스플레이가 16개의 색상으로 제한되어 있었고 파란색은 검은색 다음으로 가장 어두운 색이었습니다. 일부 모니터 디스플레이는 흑백 색상만 보여줘서 추가로 밑줄이 치게 된 겁니다.
30여 년이 지났지만 파란색 밑줄 형식은 여전히 링크 마커 시각화 방식을 자유롭게 정하는 걸 방해하고 있습니다. 인터넷 소비습관, 디바이스 사용, 인터페이스 등이 바뀌고 심지어 포인트 하고 클릭하는 방식과 해상도가 바뀌었음에도 불구하고 말이죠.
파란색 밑줄 하이퍼링크와 사용성 장점
그럼 파란색 밑줄은 어떻게 그렇게 오랫동안 살아남았을까요? 그 단서는 제이콥 닐슨의 말, “이해하기 못하는 것을 클릭하기에 인생은 너무 짧습니다”에서 찾을 수 있습니다. 그가 맞습니다; 링크가 유용하기 위해서는 즉각적으로 인식할 수 있어야 합니다. 그냥 만들면 링크에 ‘어포던스’가 부족해집니다. 외관을 보고 그 기능을 알아낼 수가 없죠. 경험이나 배움을 통해서 알아내야 합니다. 이런 점에 있어서, 링크가 시각화된 방식은 그 성공에 중요한 역할을 합니다.
파란 밑줄이 쳐진 하이퍼링크의 친숙함은 디자인 요소로서 그 지속성을 설명하는 데 도움이 됩니다. 더 단순했던 시대의 유물임에도 불구하고 말이죠. 지난 수년간 시각화에 대한 시각을 계속 발전시켜왔던 닐슨은 “일관성은 링크 색상의 의미를 유저에게 가르치는 데 핵심이다”라고 말합니다. 파란색은 역사적으로 일관성을 제공해왔고 파란색과 클릭 가능성의 심리적 유대를 강화되었습니다.
파란색 하이퍼링크는 가장 흔한 유형의 색맹을 가진 사람들- 남성 유저의 8%와 여성 유저의 0.4%-이 겪는 접근성 문제를 피해갑니다 (Andy Rutledge는 색맹은 링크를 어떻게 보는가를 이미지로 훌륭하게 표현했습니다). 유저가 색을 보는 데 문제가 있더라도 관습적 하이퍼링크에 쓰이는 밑줄이 그 역할을 대신합니다. 파란색을 인식하지 못했더라도 밑줄은 인식하게 됩니다.
밑줄은 다른 이점도 가지고 있습니다. 함부르크 대학교에서 진행한 2003년도 연구에 따르면, 밑줄 쳐진 링크는 텍스트 안에서 서브 서브 헤딩 같은 기능을 하게 되어, 유저가 내용을 훑어볼 때 중요한 정보로 유저를 가이드해줍니다. 밑줄은 다른 효과를 더해주지 않아도 링크를 찾기 쉽게 만들어 주기도 하며 클릭률을 높여주기도 합니다.
파란색 밑줄 하이퍼링크와 사용성 단점
지금까지 본 파란색 밑줄은 훌륭했잖습니까? 하지만 파란색 밑줄의 부정적 사용성의 영향력에 주목하지 않을 수 없습니다. 우선 첫째로, 파란색은 접근성 문제의 만병통치약이 아닙니다. KarynGraves의 연구에 따르면 나이가 많은 유저들은 사실 파란색을 인식하는 데 더 큰 문제를 겪는다고 합니다. 그녀는 또한 “눈은 점점 시간이 흐를수록 다른 색보다 파란색에 덜 민감해지게 되어, 나이가 듦에 따라 파란색에 초점을 맞출 수 있는 능력이 떨어지게 된다”라고 합니다. 온라인 인구의 나이가 듦에 따라, 완전한 접근성을 갖춘 사이트는 우위를 점하게 될 것입니다.
밑줄의 ‘방해 속성’은 대충 훑어보는 사람들에게 더 두드러지게 나타나지만, 보다 일반적인 수준에서 가독성을 방해하기도 합니다. (함부르크 연구에 따르면) 밑줄이 텍스트를 보는 자연스러운 시선 플로우를 방해할 뿐만 아니라, 쉽게 읽을 수 있는 문자 사이에 끼어들기도 하고 판독하기 어렵게 만들기도 합니다. 이러한 가독성에 미치는 부정적인 영향은 구글이 2014년 밑줄 링크를 퇴출하게 되는 결과를 낳게 됩니다. 구글은 “가독성을 개선하고 전반적으로 말끔한 외관을 만들기” 위한 욕구를 언급했었습니다. 구글의 결정은 광범위한 인터페이스 미니멀리즘 유행과 플랫 디자인 유행에 딱 들어맞았는데, 파란색 밑줄 하이퍼링크와 별로 어울리지 않는 유행이었습니다.
파란색 밑줄 하이퍼링크와 조화를 이루지 못한 또 다른 상전벽해와 같은 변화는 ‘디바이스 사용’이었습니다. 파란색 밑줄 하이퍼링크가 탄생했을 당시에는 아무도 한 세대 안에 주머니에 항상 넣고 다닐 수 있는 강력한 미니컴퓨터가 등장할 것이라고 상상하지 못했습니다. 터치스크린과 웨어러블은 우리가 디바이스와 상호작용하는 방식에 혁명을 일으켰고, 하이퍼링크는 모바일 디바이스에서 좀 투박해 보이기 시작했습니다. 클릭하기도 어려웠고 보통 엄지손가락 영역(thumbzone) 밖에 있기도 했으며, 여러 페이지를 넘나드는 것은 악몽과도 같았습니다.
AnthonyT는 SmashingMagazine에 게재한 글에서 링크와 같은 타깃을 어떻게 탭 해야 하는지 유저가 고민하게 만들면 안 된다고 했습니다. “만일 유저가 애플리케이션 사용에 집중하지 못하고 타깃을 클릭하려면 손가락을 어떻게 움직이고 방향을 잡고 돌려야 하는지에 집중해야 한다면, 애플리케이션 사용 경험이 떨어지게 될 겁니다.” 디자이너에게 주어진 도전 과제는 전반적인 사용성을 해치지 않으면서도 유저 친화적인 손가락 크기의 링크를 만드는 방법을 알아내는 것입니다.
파란색 밑줄 링크는 역사적인 무게 측면에서 유리한 점이 있지만, 닐슨 노만 그룹의 Hoa Loranger가 지적했듯이 “웹 유저들이 다양한 인터랙션 단서에 노출되고 새로운 암호를 배움에 따라 시그니파이어(signifiers)는 시간이 지나면서 발전할 수 있습니다.” 링크 시각화를 가지고 실험을 하고자 하는 디자이너와 UX 전문가들을 위해서는, 고려해야 할 사용성 장단점을 가진 실행 가능한 대안들이 있습니다.
대안적 하이퍼링크 시각화 테크닉
색상
우리는 파란색이 더 많은 클릭을 유발한다는 걸 알고 있지만, UI 디자이너는 정확히 어떤 파란색을 이용해야 할까요? 몇 년 전, 지메일은 파란색-녹색 스케일을 따라 만든 40가지 색상의 링크를 가지고 스플릿 테스트를 진행했습니다. 파랄 수록 클릭이 더 많아졌던 반면, 녹색 쪽 스펙트럼 끝에 있던 링크는 클릭이 적었습니다.
파란색은 링크를 뜻하고 녹색의 뜻은 잘 알지 못하는 유저의 생각을 그대로 보여주는 결과이긴 했지만, 이러한 유저의 생각은 아마도 배경 색과 조합을 해보면 극복할 수 있을 것입니다.
Graves 연구에 따르면 배경색은 가독성에 상당한 영향을 미친다고 합니다. 노란색 배경에 녹색 텍스트는 가장 빠르게 읽힌 반면 녹색 배경에 쓰인 빨간색 텍스트는 가장 느렸고, 밝은 배경에 쓰인 어두운 텍스트는 어두운 배경에 쓰인 밝은 텍스트보다 훨씬 더 가독성이 뛰어났습니다. 밝은 색상은 눈이 “더 눈에 잘 띄고 주의 집중을 방해한다”라고 매끄럽게 읽는 것을 방해한다고 Graves는 밝혔습니다. Graves는 유저 중 한 명은 밝은 파란색 링크가 “텍스트로부터 링크 쪽으로 눈길을 끈다”라고 주장했다고 합니다. 클릭에는 좋지만, 콘텐츠에는 좋지 않은 거죠.
“파란 계열은 링크라는 강력한 신호를 전달하지만 다른 색상도 그만큼 효과적이다”라고 말했던 제이콥 닐슨과 같은 영향력 있는 사람들의 말과 함께 링크 색은 일관성보다 훨씬 덜 중요하다는 협의가 전반적으로는 되고 있는 것 같습니다. 이러한 인식은 심미적으로 파란 계열 요소가 적절하지 않은 사이트에도 파란색 링크를 넣게 하는 대신, 디자이너에게 브랜딩이나 제품의 전체 디자인에 따라 하이퍼링크를 만들 수 있는 자유를 주었습니다.
더 큰 브랜드 일관성을 주려고 노력하는 디자이너에겐 적합함
파란색이 아닌 다른 색은 파란색만큼 클릭을 얻어내지 못하니까, 클릭률에 의존하는 사이트에겐 적합하지 않음
하이라이트와 데코레이션
하이퍼링크에 하이라이트를 주거나 그림자를 넣는 것에는 장점이 있습니다. 텍스트 스타일에 미치는 영향이 거의 없고 추가적인 픽셀도 필요 없어서 필요하다면 링크끼리 오버랩할 수도 있습니다 (비록 심미성이나 사용성 측면에 있어서 권장할 사항은 아니지만 말이죠). 하이라이팅의 단점은 디자인의 컬러 팔레트를 복잡하게 만들며 굵기 조절 같은 다른 꾸미는 테크닉과 마찬가지로 특정 구문을 강조해야 할 때 여러분이 쓸 수 있는 선택지가 줄어들게 됩니다.
또한, 하이라이팅 효과 자체가 투박해 보이기도 합니다. 2015 Webby Awards Best Visual Design (Aesthetic) 카테고리에서 언급된 웹사이트 중에 링크에 하이라이트 효과를 준 사이트가 하나도 없는 것도 그 이유입니다.
디자이너 Andy Rutledge는 하이라이트 효과가 ‘링크 데코레이션’의 유일한 테크닉은 아니라고 지적하면서 “다양한 테두리 유형/포지션/모양, 배경색/이미지, 심지어 취소 선처럼 덜 권장하는 데코레이션” 등과 같은 링크 표시 테크닉을 제안했습니다. 테두리 데코레이션과 가끔 쓰는 아이콘은 괜찮지만, 취소선은 가독성과 사용성 모두와 절대 타협하지 못할 방법입니다.
눈길을 끄는 참신한 방법을 찾고 있는 디자이너에게 좋음
경험이 풍부하지 않은 웹 유저나 경험이 풍부하더라도 취소선이 도대체 뭘 의미하는지 궁금할 유저에겐 나쁨
호버 효과로 찾기/ 온디맨드 링크
HoaLoranger에 따르면 절대 하면 안 되는 것 중 하나는 “텍스트가 클릭 가능한지 확인하기 위해 유저가 ‘마우스 오버’에 의존하도록” 만드는 것이라고 합니다.
마우스를 올리거나 유저가 페이지의 링크를 보기 위해 특정 키를 눌러야만 링크인지 분명히 알 수 있는 링크는 미니멀리스트 디자인 광신도와 무슨 수를 써서라도 텍스트를 아주 깨끗하게 만들고 싶은 사람들에게는 딱이지만, 매우 높은 값을 치러야 합니다. Loranger의 말에 따르면 “사람들은 클릭을 화폐처럼 생각해서 장난 삼아 쓰지 않는다”라고 합니다.
혈성적인 미니멀리스트에게 좋음
유저에게 나쁨
심벌
역사적으로 UI 디자이너들은 텍스트 라인 사이에 있는 단어나 문구에 심벌을 추가하는 실험을 해왔습니다. 손가락 모양이나 화살표 모양의 아이콘이 가장 흔하게 사용되고 있습니다. Graves는 “링크의 종착지를 알려주지 않고 페이지 형식에 방해가 되며, 스크린 공간을 낭비하면서 혼란을 주기까지 한다”며 이 테크닉을 무시합니다.
SVG파일을 정말 좋아하는 디자이너에게 좋음
작은 스크린 디바이스를 쓰는 유저에게 나쁨
모바일 우선
더 많은 디자이너들이 모바일을 우선순위로 두는 만큼, 하이퍼링크의 새로운 관습과 모범 사례가 등장하기 시작했습니다. 예를 들면 타깃의 전체 개수(하이퍼링크 포함)를 줄이고 평균 손가락 크기에 맞춰 링크에 여유 공간을 늘려서 유저가 타깃 영역을 처음부터 제대로 누를 확률을 높여주는 겁니다.
Sitepoint는 모바일 유저를 염두에 두고 “주의해서 표현”하고 상당히 떨어진 곳에 하이퍼링크를 배치하도록 노력하라고 콘텐츠 디자이너와 UI 디자이너들에게 조언합니다. 그리고 당연히 웹 UI에 적용된 호버 효과는 모바일 디바이스에서 이용할 수 없습니다. 모바일을 우선으로 디자인할 때는 링크를 클릭 가능하다는 것을 한눈에 제대로 알아볼 수 있도록 표현해야 합니다. 이러한 모바일 친화적 링크 관습의 부상을 통해 하이퍼링크 시각화의 미래를 볼 수 있을 것입니다.
매년 터치 스크린 디바이스를 사는 14억만 명에겐 좋음
콘텐츠 제작자에겐 나쁨
하이퍼링크 사용성 가이드라인
하이퍼링크 시각화 방법과 상관없이, 사용성을 보장하기 위해 널리 적용되어야 하는 기본적인 디자인 계율이 있습니다.
1. 유의미한 텍스트에 하이퍼링크를 건다
여기를 클릭하세요(click here)’ 레이블에 링크를 거는 것은 SEO 관점에서 좋지 않으며 정확히 무엇을 클릭하게 되는 것인지에 대한 추가 정보를 찾도록 암암리에 강요받는 유저에게도 좋지 않습니다. 유저는 스파이웨어를 조심합니다. 링크를 클릭하면 어디로 가는 것인지 알려줘야 합니다.
2. 파란 텍스트는 제거한다
링크에 파란색을 쓰지 않더라도, 파란색을 보면 클릭 가능성을 떠올리게 됩니다. 파란색으로 된 모든 텍스트는 유저에게 클릭을 장려하게 됩니다. 만일 파란색 텍스트가 클릭 가능하지 않다면, 불만을 낳게 됩니다.
3. 링크를 분명히 보이게 만든다
링크를 찾기 위해 유저가 반드시 인터페이스와 상호작용해야 하게 만들면 안 됩니다.
4. 한 가지 하아퍼링크 디자인을 고르고 그 디자인을 고수한다
한 사이트 안에서 링크를 시각화하는 방법이 다양하면 안 됩니다.
5. 방문한 링크
클릭했던 링크는 ‘물 빠진’ 색감으로 톤을 바꾸거나 구글에서 클릭한 링크를 파란색에서 보라색 계열로 바꾸는 것처럼 빨간 계열로 바꿔서 유저에게 클릭했던 링크임을 알려주세요.
6. 마우스 오버
링크는 유저에게 클릭 가능하다는 것을 강조하기 위해 마우스 오버를 하면 스타일이 바뀌어야만 합니다.
7. 여유 있는 크기
링크를 여유 있게 만들어서 손가락으로 누르는 모바일 유저들도 링크 주변에 갔을 때 쉽게 클릭하여 원하는 곳으로 갈 수 있게 해줍니다.
링크 시각화 – 마무리
하이퍼링크 디자인은 마치 림보를 하는 것처럼 보입니다. 파란색 밑줄 쳐진 하이퍼링크가 분명 단순했던 시대의 유물이고 유행이 지난 것처럼 보이기도 하지만 유저는 파란색 밑줄과 클릭 가능성 사이의 깊은 관계를 느낍니다. 파란색에 밑줄을 친 것보다 더 많은 클릭을 끌어내는 것만 봐도 알 수 있습니다.
하지만 링크 시각화의 대안들(예: 색상 다양화, 데코레이션 등)에는 각각의 문제가 존재합니다. 가독성, 클릭 가능성, 맥락적 이해도 등은 하이퍼링크 디자인의 영향을 받는 것들입니다. 파란색 밑줄의 관례를 벗어난 모든 디자이너들은 유저가 기존 형식에서 벗어난 변형된 형식을 이해하고 좋아하는지 확인하기 위한 스플릿 테스트를 많이 진행해야 할 겁니다.
결국 하이퍼링크의 미래를 결정하는 것은 모바일을 우선으로 고려한 디자인일 것입니다. 디자이너들은 터치 타깃을 더 접근성 있게 만들 수 있는 방법을 점점 더 많이 찾고 있습니다. 하이퍼링크의 다음 30년을 지난 30년만큼 예측하긴 어려울 겁니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 인터넷 VOD 강좌 오픈했습니다)
https://www.inflearn.com/users/196290
