웹사이트 100만 개 중 50%가 '빈 링크'를 방치하고 있습니다 — 하이퍼링크의 배신

단순한 연결을 넘어, 모든 사용자가 길을 잃지 않게 만드는 접근성 중심의 링크 설계 전략

최근에 흥미로우면서도 조금 충격적인 데이터를 봤어요. 2023년 WebAIM의 분석 결과인데, 전 세계 상위 100만 개 홈 페이지 중 무려 50.1%가 텍스트가 전혀 없는 ‘빈 링크(Empty Links)’를 그대로 방치하고 있었다고 하더라고요 [1]. 우리가 매일 만드는 웹사이트의 절반이 누군가에게는 아무런 정보도 주지 않는 ‘끊긴 길’이었다는 뜻이죠.

사실 하이퍼링크는 단순한 기술적 연결 도구가 아니에요. 특히 보조 공학 기기를 사용하는 분들에게 링크는 웹사이트의 구조를 파악할 수 있는 유일한 ‘디지털 표지판’과 같거든요. 그래서 우리는 링크를 설계할 때 훨씬 더 엄격한 접근성 기준을 가져야 합니다.

하이퍼링크: 단순한 ‘클릭’ 그 이상의 의미

우리는 보통 링크라고 하면 “클릭해서 다른 페이지로 넘어가는 것” 정도로 생각하죠. 기술적으로 보면 하이퍼링크는 사용자가 클릭이나 탭을 통해 데이터에 직접 접근할 수 있게 해주는 디지털 참조 방식이에요 [11].

하지만 사용자가 누구냐에 따라 이 링크가 주는 의미는 완전히 달라집니다. 시각적으로 화면을 보는 사용자에게 링크는 색상이나 밑줄 같은 시각적 단서를 통해 “아, 여기를 누르면 이동하겠구나”라고 빠르게 판단하게 돕는 수단이죠.

반면, 스크린 리더를 사용하는 분들에게 링크는 단순한 이동 수단을 넘어 페이지 전체의 구조를 파악하는 핵심 ‘로드맵’이 됩니다. 링크 텍스트가 명확해야만 내가 지금 어디에 있고, 이 길로 가면 무엇이 나올지 예측할 수 있거든요. 실제로 스크린 리더 사용자는 페이지의 모든 내용을 읽기보다 ‘링크 목록’만 따로 추출해서 훑어보는 방식으로 원하는 정보를 찾는 경우가 많습니다. 이때 텍스트가 부실하면 목적지를 찾지 못하고 헤매게 됩니다.

“the hyperlink text functions as a digital signpost by clearly indicating what lies ahead” [3]

(링크 텍스트는 다음에 무엇이 올지 명확하게 알려주는 디지털 표지판 역할을 합니다.)

만약 이 표지판이 잘못 설계되어 있다면, 어떤 사용자에게는 정보 접근 자체가 불가능한 거대한 벽이 될 수도 있어요.

우리가 무심코 저지르는 5가지 치명적 링크 실수

실무를 하다 보면 “작동만 하면 됐지”라는 생각에 무심코 지나치는 부분들이 많아요. 하지만 그 작은 실수가 누군가에게는 치명적인 불편함이 됩니다. 가장 흔히 발생하는 실수 5가지를 짚어볼게요.

첫째는 앞서 말씀드린 ‘빈 링크’입니다. 이미지에 alt 텍스트를 넣지 않고 링크만 걸거나, HTML 요소를 삭제하면서 링크 태그만 남겨둔 경우죠. 예를 들어, SNS 아이콘에 텍스트 없이 링크만 걸어두면 스크린 리더는 그저 “링크”라고만 읽어줍니다. 사용자는 이것이 페이스북으로 가는지, 인스타그램으로 가는지 알 길이 없죠.

둘째는 ‘여기 클릭’, ‘더 알아보기’ 같은 모호한 텍스트입니다. 상위 100만 개 사이트 중 17.3%가 이런 모호한 표현을 쓰고 있다고 해요 [1]. 이런 표현은 문맥 없이는 아무런 의미가 없습니다. 특히 링크만 따로 모아 보는 사용자에게 ‘여기 클릭’이라는 말은 아무런 정보 가치가 없는 소음일 뿐입니다.

셋째는 너무 많은 정보를 링크에 다 집어넣은 과도한 텍스트입니다. 문장 전체를 링크로 만들면 스크린 리더 사용자는 링크의 시작과 끝을 파악하는 데 너무 많은 시간을 소비하게 됩니다. 넷째는 URL 주소를 그대로 노출하는 경우입니다. https://www.example.com/p/12345... 같은 주소는 사용자에게 거의 아무런 의미를 전달하지 못하며, 듣기에도 매우 고통스럽습니다 [3].

마지막으로는 낮은 색상 대비입니다. 배경색과 링크색이 비슷하면 저시력자뿐만 아니라 모든 사용자의 경험이 나빠집니다 [1]. 특히 ‘파란색’이라는 관습에만 의존해 밑줄을 없애는 디자인이 유행했는데, 이는 색약 사용자에게는 링크와 일반 텍스트를 구분할 수 없게 만드는 위험한 선택입니다.

이런 실수들이 실제 코드에서는 어떻게 나타나는지, 그리고 어떻게 고쳐야 하는지 예시로 보여드릴게요.

<!-- ❌ 나쁜 예: 접근성이 낮은 링크들 -->
<!-- 1. 빈 링크 (이미지 alt 누락) -->
<a href="/products"><img src="icon.png"></a> 

<!-- 2. 모호한 텍스트 -->
<a href="/guide">더 알아보기</a> 

<!-- 3. URL 그대로 노출 -->
<a href="https://example.com/about">https://example.com/about</a>

<!-- 4. 너무 긴 텍스트 (정보 과부하) -->
<a href="/cars">우리 회사가 보유한 최신 포드 및 쉐보레 중고차 모델 리스트를 확인하시려면 여기를 클릭하세요</a>

<!-- ✅ 좋은 예: 접근성을 고려한 링크 -->
<!-- 1. 이미지에 명확한 대체 텍스트 제공 -->
<a href="/products"><img src="icon.png" alt="제품 카탈로그 보기"></a>

<!-- 2. 목적지가 명확한 텍스트 -->
<a href="/guide">웹 접근성 가이드라인 읽기</a>

<!-- 3. 의미 있는 앵커 텍스트 사용 -->
<a href="https://example.com/about">회사 소개 페이지 방문하기</a>

<!-- 4. 핵심 대상에 집중한 간결한 텍스트 -->
<a href="/cars">중고차 모델 리스트 확인하기</a>

위 코드에서 보듯, 핵심은 사용자가 링크를 보는 순간(혹은 듣는 순간) “어디로 가는지”를 즉각적으로 알게 하는 것입니다.

스크린 리더 사용자를 위한 ‘친절한 링크’ 작성법

그렇다면 구체적으로 어떻게 써야 ‘친절한’ 링크가 될까요? 스크린 리더 사용자의 입장에서 생각해보면 답이 나옵니다. 가장 중요한 원칙은 “링크 텍스트만으로 목적지를 알 수 있어야 한다”는 거예요.

“The purpose of each link can be determined from the link text alone” [5]

(각 링크의 목적은 링크 텍스트만으로도 파악할 수 있어야 합니다.)

즉, 링크의 목적이 텍스트 단독으로, 혹은 프로그램적으로 결정된 문맥과 함께 파악되어야 한다는 뜻이죠 [5]. 이를 위해 몇 가지 팁을 드릴게요.

우선, ‘링크’라는 단어를 중복해서 쓰지 마세요. 스크린 리더는 이미 해당 요소가 링크임을 알려주기 때문에, “더 많은 정보로의 링크”라고 쓰면 사용자는 “링크, 더 많은 정보로의 링크”라고 중복해서 듣게 되어 혼란스럽습니다 [3].

또한, ‘클릭하세요’ 같은 동사보다는 정보의 핵심 대상에 집중하세요. “더 알아보기”보다는 “샐러드 레시피 읽기”나 “영양 코스 시작하기”처럼 구체적인 언어를 쓰는 것이 좋습니다 [6]. 이건 스크린 리더 사용자뿐 아니라, 페이지를 빠르게 훑어보는(skimming) 모든 사용자에게도 훨씬 도움이 되는 UX 최적화 방법이에요. 사용자는 텍스트를 ‘읽는’ 것이 아니라 ‘스캔’하기 때문입니다.

<!-- ❌ 나쁜 예: 중복 표현과 모호한 동사 사용 -->
<p>서비스에 대해 더 알고 싶으시면 <a href="/info">여기 링크를 클릭하세요</a>.</p>

<!-- ✅ 좋은 예: 정보의 핵심 대상에 집중 -->
<p>서비스의 상세 기능은 <a href="/info">서비스 이용 안내서</a>에서 확인하실 수 있습니다.</p>

이렇게 작성하면 사용자는 불필요한 소음을 듣지 않고도 자신이 원하는 정보가 어디에 있는지 바로 알 수 있습니다.

짚고 넘어갈 한계와 안티패턴

현장에서 개발자분들과 이야기하다 보면 “디자인 미니멀리즘 때문에 어쩔 수 없다”는 말씀을 많이 하세요. ‘더 보기’ 같은 짧은 버튼이 시각적으로는 훨씬 깔끔해 보이니까요 [6]. 하지만 시각적인 깔끔함이 맥락의 제거로 이어져서는 안 됩니다. 이럴 때는 aria-label 같은 속성을 활용해 시각적으로는 숨기되, 스크린 리더에게만 구체적인 목적지를 알려주는 기술적 보완책을 사용하면 디자인과 접근성을 모두 잡을 수 있습니다.

또 하나 주의할 점은 ‘과유불급’입니다. 친절하게 설명하겠다고 문장 전체에 링크를 거는 경우가 있는데, 이건 스크린 리더 사용자에게 정보 과부하를 줍니다. 다음 행동을 취하기 전에 그 긴 텍스트를 모두 들어야 하므로 매우 지치게 만들거든요 [1]. 핵심 키워드에만 링크를 거는 절제미가 필요합니다.

마지막으로, 기술적인 하이퍼링크 구조만으로 웹사이트의 전체 맵을 파악할 수 있다고 믿는 것도 위험합니다. 실제 사용자들이 움직이는 트래픽 기반의 맵과 기술적인 링크 구조 맵은 큰 차이가 있을 수 있거든요 [8]. 결국 중요한 건 기술적 연결이 아니라 실제 사용자의 행동 흐름을 이해하고 그 길목에 정확한 표지판을 세워주는 것입니다.

핵심 요약

빈 링크는 단순한 실수가 아니라, 일부 사용자를 서비스에서 완전히 배제하는 장벽입니다.
링크 텍스트는 ‘클릭’이라는 행동이 아니라, 도착할 ‘목적지’를 설명해야 합니다.
스크린 리더가 이미 알려주는 ‘링크’라는 단어는 중복해서 쓰지 말고 간결하게 유지하세요.
텍스트와 배경의 대비를 충분히 높여서 누구나 식별할 수 있게 만들어야 합니다.
이미지 링크라면 반드시 그 내용을 설명하는 **alt 텍스트**를 잊지 마세요.

사실 저도 연차가 낮았을 때는 링크 텍스트 정도는 대충 써도 된다고 생각했어요. 하지만 시니어가 되고 더 많은 사용자를 접하며 깨달은 건, 진짜 디테일은 이런 ‘보이지 않는 곳’에서 결정된다는 점입니다. 단순히 페이지를 ‘연결’하는 것에 만족하지 않고, 그 연결이 누구에게나 친절한지 고민하는 것. 그것이 바로 서비스의 품질을 결정하는 엔지니어의 디테일이 아닐까 싶습니다.

참고 자료 (References)

1. [boia.org] 5 Common Link Accessibility Mistakes (And How to Fix Them) — https://www.boia.org/blog/5-common-link-accessibility-mistakes 2. [levelaccess.com] Hyperlink Best Practices | How to Write Accessible Links — https://www.levelaccess.com/blog/enhancing-accessibility-link-text-best-practices 3. [audioeye.com] The Ultimate Guide to Accessible Web Design – AudioEye — https://www.audioeye.com/ultimate-guide-to-accessible-web-design 4. [helenkeller.org] 7 Common Accessibility Errors On Websites and How to Fix Them – Helen Keller Services — https://www.helenkeller.org/7-common-accessibility-errors-on-websites-and-how-to-fix-them 5. [arxiv.org] Mapping an Audience Centric World Wide Web: A Departure From Hyperlink Analysis — https://arxiv.org/abs/1603.03370v1 6. [en.wikipedia.org] Hyperlink — https://en.wikipedia.org/wiki/Hyperlink 7. [en.wikipedia.org] Hypertext — https://en.wikipedia.org/wiki/Hypertext 8. [en.wikipedia.org] User interface design — https://en.wikipedia.org/wiki/User_interface_design 9. [en.wikipedia.org] Information architecture — https://en.wikipedia.org/wiki/Information_architecture 10. [www.microsoft.com] Microsoft – AI, Cloud, Productivity, Computing, Gaming & Apps — https://www.microsoft.com/en-us?msockid=1e8756fe15696d970d2c4182143a6cb6 11. [en.wikipedia.org] Hyperlink — https://en.wikipedia.org/wiki/Hyperlink

FAQ

웹사이트에서 '빈 링크'란 무엇이며 왜 문제가 되나요?

빈 링크는 텍스트가 전혀 없는 링크를 말합니다. 이미지에 alt 텍스트를 넣지 않고 링크만 걸거나 HTML 요소 삭제 후 태그만 남은 경우 발생하며, 스크린 리더 사용자는 목적지를 알 수 없어 정보 접근이 불가능해지는 장벽이 됩니다.

링크 텍스트를 작성할 때 '여기 클릭'이나 '더 알아보기'와 같은 표현을 지양해야 하는 이유는 무엇인가요?

이런 모호한 표현은 문맥 없이는 아무런 의미가 없기 때문입니다. 특히 링크 목록만 따로 추출해서 정보를 찾는 스크린 리더 사용자에게는 정보 가치가 없는 소음이 되어 목적지를 찾는 데 방해가 됩니다.

스크린 리더 사용자를 위해 링크 텍스트를 작성할 때 주의할 점은 무엇인가요?

링크 텍스트만으로 목적지를 알 수 있어야 합니다. 또한, 스크린 리더가 이미 해당 요소가 링크임을 알려주므로 '링크'라는 단어를 중복해서 쓰지 말고, '클릭하세요' 같은 동사보다는 정보의 핵심 대상에 집중해 구체적으로 작성해야 합니다.

디자인상 텍스트를 넣기 어려운 경우 접근성을 어떻게 보완할 수 있나요?

aria-label 속성을 활용하면 시각적으로는 텍스트를 숨기면서도 스크린 리더 사용자에게는 구체적인 목적지를 알려줄 수 있어 디자인과 접근성을 모두 확보할 수 있습니다.

링크의 색상과 디자인 설정 시 주의해야 할 점은 무엇인가요?

배경색과 링크색의 대비를 충분히 높여야 합니다. 특히 파란색이라는 관습에만 의존해 밑줄을 없애면 색약 사용자가 링크와 일반 텍스트를 구분할 수 없게 되므로 주의해야 합니다.

정보로부자되세요(정보부자:Infobuza.com)

태그 보관물: 하이퍼링크

웹사이트 100만 개 중 50%가 ‘빈 링크’를 방치하고 있습니다 — 하이퍼링크의 배신