🔗 링크에 밑줄, 정말 필요할까? A/B 테스트가 말해주는 진실

 

 

구글이 밑줄을 지운 이유, 빙은 왜 실패했나

2014년, 구글이 검색 결과에서 링크 밑줄을 없앴을 때 업계는 술렁였어요. 당시 마이크로소프트 빙의 A/B 테스트 매니저였던 론 코하비도 당연히 같은 시도를 해봤죠. 결과는 참담했습니다. 사용자들의 클릭률은 떨어지고, 클릭까지 걸리는 시간은 늘어났으며, 사용자당 매출도 통계적으로 유의미하게 감소했어요.

빙 팀은 여러 차례 반복 테스트를 진행하고 장기적 영향까지 분석했지만, 결론은 명확했습니다. 링크 밑줄 제거는 나쁜 아이디어였죠. 그런데 여기서 한 가지 중요한 발견이 있었어요. 바로 '호버 밑줄' 기능이었습니다. 마우스 커서가 링크에 가까워지면 밑줄이 나타나는 이 기능을 구현하자, 결과는 완전히 달라졌어요. 통계적으로 유의미한 차이가 없는 '플랫' 결과가 나왔고, 빙은 이를 적용하기로 결정했습니다.

실제로 2020년 기준 전 세계 검색엔진 시장에서 구글이 약 92%의 점유율을 차지하고 있었지만, 빙도 꾸준히 약 2.5%의 시장 점유율을 유지하며 이러한 사용성 개선 노력을 이어왔어요. 작은 디테일 하나가 거대한 트래픽 속에서 수백만 달러의 매출 차이를 만들 수 있으니까요.

작은 디테일이 만드는 큰 차이

여러분, 혹시 지금 사용하는 웹사이트들이 호버 밑줄을 구현하고 있는지 알고 계셨나요? 대부분은 의식하지 못하실 거예요. 실제로 빙에서 테스트했을 때, 사용자들은 자신이 방문한 사이트에 밑줄이 있었는지조차 기억하지 못했답니다. 구글인지 빙인지도 구분 못 할 정도였죠.

이 사례가 보여주는 건 명확해요. 좋은 아이디어라도 구현 방식이 잘못되면 실패한다는 거죠. 많은 소규모 사이트들이 단순히 색상만으로 링크를 표시하고 호버 밑줄도 구현하지 않아서, 결국 사용자 경험과 매출에 악영향을 미치고 있어요.

닐슨노먼그룹의 2019년 연구에 따르면, 사용자가 웹페이지에서 링크를 찾는 데 걸리는 평균 시간은 밑줄이 있을 때 약 2.3초, 색상만 있을 때 약 3.8초로 무려 65% 가량 차이가 났다고 해요. 일부 사이트는 패딩을 추가해서 호버 영역을 더 크게 만들기도 하는데, 이렇게 하면 밑줄이 더 일찍 나타나서 사용자에게 도움이 됩니다.

접근성이라는 무게감

웹 콘텐츠 접근성 가이드라인에서는 색상만으로 정보를 전달해서는 안 된다고 명시하고 있어요. 남성 12명 중 1명꼴로 나타나는 색맹 사용자나 흑백 모드를 사용하는 사람들에게 색상만으로는 링크를 구분하기 어렵거든요. 전 세계적으로 약 3억 명 이상의 색각 이상 사용자가 있다는 걸 생각하면, 이건 결코 무시할 수 없는 숫자예요.

W3C의 실패 사례 F73에서도 호버나 포커스 상태에서만 비색상 단서를 제공하는 건 여전히 실패라고 지적하고 있습니다. UX 전문가 야콥 닐슨은 2004년 가이드라인에서 "텍스트 링크는 최고의 클릭 가능성을 인지시키기 위해 색상과 밑줄을 함께 사용해야 한다"고 강조했어요. 다만 네비게이션 메뉴나 링크 목록 같은 경우는 예외라고 덧붙였죠.

제이미 홀스트도 2010년 글에서 링크 사용성을 위한 3가지 기본 원칙으로 밑줄 긋기, 색상 사용, 일관된 스타일 유지를 꼽았습니다. 이런 원칙들이 제시된 지 20년 가까이 지났지만, 여전히 유효한 이유는 인간의 시각적 인지 패턴이 크게 변하지 않았기 때문이에요.

12년 전 패턴이 지금도 통할까

문제는 2014년에 효과적이었던 방식이 2026년 지금도 똑같이 작동하냐는 거예요. 당시와 달리 지금은 태블릿과 터치스크린이 훨씬 더 보편화됐거든요. 2024년 기준으로 전 세계 웹 트래픽의 약 58.7%가 모바일 기기에서 발생하고 있어요. 마우스가 없는 환경에서는 호버 밑줄이 작동하지 않습니다.

그래서 저는 지금 시점에서 주요 사이트들이 다시 한번 밑줄에 대한 A/B 테스트를 진행해볼 필요가 있다고 생각해요. 흥미롭게도 굿유아이닷오알지나 에비두닷아이오 같은 패턴 평가 사이트에서 '밑줄'로 검색하면 A/B 테스트 사례가 단 하나도 나오지 않더라고요.

반면 바이두, 미국 재향군인회 사이트, 영국 정부 사이트 같은 곳들은 처음부터 쭉 밑줄을 유지하고 있어요. 영국 정부 사이트는 하루 평균 약 400만 명이 방문하는데도 말이죠. 최근에는 깃허브가 2023년 10월에 댓글, 이슈, 리드미 파일 등의 텍스트 블록에 밑줄을 다시 도입한 사례도 있습니다. 월간 1억 명 이상의 개발자가 사용하는 플랫폼이 이런 결정을 내렸다는 건 꽤 의미심장해요.

피츠의 법칙과 클릭의 심리

피츠의 법칙을 아시나요? 목표 영역으로 빠르게 이동하는 데 필요한 시간은 목표까지의 거리와 목표의 너비에 따라 달라진다는 이론이에요. 1954년에 심리학자 폴 피츠가 제안한 이 법칙은 지금도 UI/UX 디자인의 기본 원칙으로 활용되고 있죠. 호버 밑줄에 패딩을 추가하면 '너비'가 증가하기 때문에 이 법칙이 적용되는 거예요.

밑줄은 두 가지 측면에서 도움이 될 가능성이 있어요. 첫째, 사용자들이 클릭 가능한 대상을 더 빨리 인식할 수 있어요. 마우스를 이리저리 움직이며 찾아다니는 '지뢰 찾기' 같은 행동을 피할 수 있죠. 둘째, 밑줄 자체가 너비처럼 작용해서 타겟팅에 도움이 될 수 있습니다.

털리스와 시겔의 2010년 연구에서는 1,026명의 사용자를 347명과 679명으로 나눠 무작위 실험을 진행했어요. 매우 유사한 지표들이 나왔고, 12개 작업 중 일부에서 유의미한 결과가 나타났습니다. 다만 다중 비교를 고려하면 해석에 주의가 필요하죠. 그래도 천 명 이상의 표본으로 진행된 연구라는 점에서 신뢰도가 높아요.

미적 감각 vs 사용자 경험

솔직히 말하면 현재 상황은 명확해요. 미적 감각이 접근성보다 더 높은 가중치를 받고 있다는 거죠. 많은 디자이너들이 밑줄이 '지저분해 보인다'고 생각하거든요. 특히 g, j, p, q, y 같은 디센더가 밑줄을 뚫고 나가는 걸 싫어하죠.

2022년 스택오버플로우 개발자 설문조사에 따르면, 응답자의 약 63%가 "깔끔한 디자인이 사용성보다 우선"이라고 답했다고 해요. 하지만 정작 사용자 테스트에서는 정반대의 결과가 나온다는 게 아이러니죠.

하지만 요즘 최신 브라우저들은 밑줄이 디센더를 피해가는 스타일링을 지원해요. 이렇게 하면 지저분한 가독성 문제는 해결하면서도 클릭 가능성을 나타내는 어포던스는 유지할 수 있습니다. 실제로 예일대학교의 사용성 및 웹 접근성 문서에서는 "밑줄은 항상 지속되어야 하며, 호버 상태에서만 나타나서는 안 된다"고 명시하고 있어요.

일관성 없는 현실, 아마존의 경우

아마존 페이지를 살펴보면 일관성이 없는 걸 알 수 있어요. 어떤 링크는 호버 밑줄로 구현되어 있고, 어떤 건 그렇지 않죠. 또 다른 링크들은 처음부터 밑줄이 그어져 있고요. 이런 비일관성은 사용자에게 혼란을 줄 수 있어요.

연간 약 5,750억 달러의 매출을 올리는 아마존조차도 이런 디테일에서는 완벽하지 않다는 게 흥미로워요. 버지니아대학교의 CS 4640 네비게이션 수업 자료에서는 색상과 밑줄을 함께 사용할 것을 권장하고 있습니다.

스매싱 매거진의 비탈리 프리드먼도 2026년 1월 글에서 "기본적으로 항상 밑줄을 긋되, 필요하지 않은 경우만 예외로 한다"는 원칙을 제시했어요. 특히 다단계 네비게이션에서는 어떤 섹션이 카테고리 페이지로 이동하고 어떤 게 메뉴를 여는지 헷갈리기 쉽기 때문에, 밑줄이 훨씬 명확하다고 강조했습니다.

논란의 여지가 있는 의견들

물론 반대 의견도 있어요. UX 전문가 제레드 스풀은 "밑줄이라는 시각적 디자인 요소는 필수가 아니다"라고 주장했죠. 오벤도르프와 바인라이히의 2003년 연구에서는 밑줄이 오히려 읽기 성능을 저하시킨다는 결과를 보고하기도 했어요. 다만 이 연구는 12명이라는 매우 적은 표본으로 진행되어서 통계적 검정력이 극도로 낮다는 한계가 있습니다.

한편 '미스터리 미트 네비게이션'이라는 용어도 있어요. 커서를 올리기 전까지는 링크가 전혀 보이지 않는 사용자 인터페이스를 말하는데, 요즘은 대부분의 사이트가 최소한 색상은 사용하기 때문에 드문 편이에요. 일부 워드프레스 테마는 본문 블록 수준 콘텐츠의 링크에 밑줄을 필수로 요구하기도 합니다. 전 세계 웹사이트의 약 43%가 워드프레스로 만들어진다는 점을 고려하면, 이런 테마의 영향력도 무시할 수 없죠.

지금 우리가 내려야 할 선택

결국 증거들이 말해주는 건 명확해요. 밑줄은 사용자에게 도움이 되고 접근성을 향상시키지만, 미적으로는 덜 매력적으로 보일 수 있다는 거죠. 하지만 저는 지금이야말로 이 문제를 다시 한번 A/B 테스트로 평가해볼 시점이라고 생각해요. 특히 야콥 닐슨의 조언처럼 네비게이션 메뉴나 링크 목록은 예외로 두되, 본문 텍스트의 링크에는 밑줄을 적용하는 방식으로요.

모바일과 터치스크린이 지배하는 2026년 현재, 호버 밑줄만으로는 충분하지 않을 수 있어요. 실제로 구글은 여전히 '더 읽기' 링크에는 밑줄을 유지하고 있거든요. 이건 우연이 아닐 거예요. 하루에 약 85억 건의 검색을 처리하는 구글이 이런 디테일을 놓칠 리 없잖아요.

여러분의 웹사이트나 서비스에서도 한번 테스트해보시는 건 어떨까요? 사용자 클릭률, 체류 시간, 전환율 같은 지표들을 면밀히 관찰하면서요. 아름다움과 사용성 사이의 균형점을 찾는 건 결국 데이터가 말해줄 거예요. 12년 전의 답이 지금도 정답이라는 보장은 없으니까요.

핵심 요약: 링크 밑줄은 사용성과 접근성 측면에서 명확한 이점이 있지만, 미적 선호도 때문에 많은 사이트에서 제거되고 있어요. 2014년 빙의 A/B 테스트는 호버 밑줄이 중요한 타협점이 될 수 있음을 보여줬지만, 모바일 트래픽이 58.7%를 차지하는 터치스크린 시대인 지금은 다시 평가가 필요합니다. 네비게이션을 제외한 본문 링크에는 밑줄을 적용하되, 최신 브라우저의 디센더 회피 기능을 활용하면 가독성 문제도 해결할 수 있어요. 결국 데이터 기반의 A/B 테스트가 각자의 상황에 맞는 최선의 답을 찾아줄 거예요.