여기를 클릭하세요와 같은 링크 텍스트 사용 금지 (2001)

• "여기를 클릭하세요" 와 같이 일반적인 링크 텍스트 사용의 문제점 강조
• 접근성 향상과 관련해 링크 텍스트가 콘텐츠의 의미를 명확하게 전달해야 함
• 검색 엔진 및 스크린리더 사용자 경험에 부정적 영향 발생
• 명확하고 맥락을 반영한 링크 문구가 사용자와 기술 모두에 이점 제공
• 2001년부터 웹 표준과 UX 원칙 차원에서 올바른 링크 텍스트 권장 움직임 진행

---

서론

• "여기를 클릭하세요" 또는 "click here"와 같은 일반적 링크 텍스트 사용이 오래전부터 웹 개발자들 사이에서 흔한 관행으로 자리잡음
• 그러나 이러한 방식은 접근성, 사용성, SEO 측면에서 중요한 단점 내포

링크 텍스트의 의미와 문제점

• 링크 텍스트는 사용자가 클릭하기 전에 해당 링크가 어디로 이동하는지 예측할 수 있도록 정보를 제공해야 하는 역할 담당
• 단순히 "여기를 클릭하세요"와 같이 작성하면, 맥락 없이 링크가 존재해 사용자 혼란과 접근성 저하 발생

접근성과 사용자 경험 영향

• 스크린리더 사용자는 페이지 내 링크 목록을 훑을 때 모두 "여기를 클릭하세요"라는 동일한 내용을 듣게되어 정보 획득 곤란 상황이 생김
• 링크가 의미를 포함하는 구체적 문구로 작성되었을 때, 시각장애 사용자 및 다양한 상황의 사용자 모두에게 경험 효율성 증가

검색 엔진 최적화(SEO) 고려사항

• 검색 엔진 역시 링크 텍스트를 분석하여 콘텐츠의 관련성과 품질을 판단함
• 중요한 키워드와 맥락이 포함된 링크 텍스트는 검색 랭킹, 노출도 증가에 긍정적 영향 미침

올바른 링크 텍스트 작성법 권장

• 맥락을 명확히 반영하는 링크 텍스트 사용을 권장
  • 예: "최신 접근성 가이드라인 확인" 등
• 이러한 원칙은 2001년부터 웹 표준 등장과 UX 강화 과정에서 지속적으로 강조되어 옴

결론

• "여기를 클릭하세요"가 아닌 의미 있는 텍스트를 링크로 사용하는 것이 현재 웹과 미래 웹 모두에서 필수적인 기준임

[GN⁺]

Hacker News 의견들

• 접근성 관점에서 보면, 시각장애인용 스크린 리더는 페이지를 선형으로 읽어 줌
  선형 읽기에서 벗어나기 위해 제목이나 링크 같은 요소 목록을 원래 위치의 맥락 없이 따로 탐색하게 해 주는 경우도 많음
  모든 링크가 “click here”라면 이런 사용자에게서 비선형 접근을 사실상 빼앗는 셈임

  • 모든 링크가 동사 없이 그냥 “Amaya”라면 무엇을 하는 링크인지 알 수 없음
    그래서 “get Amaya”나 “go to the Amaya website” 정도는 괜찮아 보임
    또 github.io의 다운로드 버튼이 SourceForge 같은 악성코드 사이트 취급받는 곳에서 실행 파일을 가져오게 하는 건 좋지 않은 방식임. wxMaxima가 떠오름
  • 아이러니하게도, 접근성 도구가 필요 없는 사람들에게도 접근성 도구 자체를 더 접근 가능하게 만드는 방법이 필요함
    도구를 바꾸자는 뜻은 아니지만, 스크린 리더가 어떻게 동작하는지 직접 파고들지 않을 사람들에게 이를 시각화해 보여줄 방법은 있어야 할 듯함
  • 이를 해결하는 기법들이 있음: https://www.w3.org/WAI/WCAG22/Techniques/html/H33, https://www.w3.org/WAI/WCAG22/Techniques/css/C7
    다만 첫 번째가 스크린 리더에서 얼마나 잘 지원되는지는 모르겠음
    수정: 링크를 WCAG 2.0에서 2.2로 갱신함
  • 좋은 논거임
    그래도 글의 예시처럼 “Amaya”만 두기보다는 “Get Amaya”처럼 동작을 더 포함하겠음
  • 스크린 리더는 페이지 안에서 이동하는 여러 방식을 흔히 제공하며, 페이지를 선형으로 훑는 방식은 가장 비효율적임
    사용자는 예를 들어 랜드마크끼리, 제목끼리, 또는 둘을 함께 개요 탐색 모드로 이동할 수 있음
    핵심은 스크린 리더 탐색이 키보드 탐색과 같지 않다는 점임

• 전혀 동의할 수 없음. 그들이 나쁜 예시로 든 “To download W3C's editor/browser Amaya, click here.”는 아주 명확함
  링크를 누르면 바로 다운로드되거나 다운로드 페이지로 갈 것임
  반대로 “Get Amaya!”는 Amaya 웹사이트 링크처럼 보이지 다운로드 페이지로는 보이지 않아, 다운로드에는 효과적이지 않음
  “Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents.”도 별로임. 다운로드에 관한 문장이 아니고 “tell me more”가 명령인데 정작 링크가 아님
  웹의 관례적 사용, 즉 “To download W3C's editor/browser Amaya, click here.”나 “Download Amaya, the W3C's editor/browser.”는 완전히 괜찮음
  링크가 동사가 되면 안 된다는 생각은 꽤 이상해 보임. 다운로드나 더 알아보기처럼 동작을 포함한다면 링크는 당연히 동사가 될 수 있음
  Wikipedia의 참고 링크처럼 어떤 주제에 대해 더 알아보는 경우와는 다름
  “click here”는 링크가 단순 참고 링크가 아니라 동작 링크임을 매우 분명히 해 줌. “Get Amaya!”를 보면 Amaya를 어떻게 얻는지 알려주는 게 아니라 “Amaya”가 다운로드 링크가 아닌 참고 링크라고 느껴짐

  • 스크린 리더를 써 보면 됨. 링크 사이를 탭으로 이동하면 들리는 건 전부 “click here”뿐이라 도움이 안 됨
    검색 엔진을 만든다고 해도 “click here”가 색인에 어떤 정보를 주겠음?
    동사 자체가 큰 문제라는 데는 동의하지 않지만, 동사가 click이고 목적어가 here라면 다름
    “Click Here to download Amaya”라는 링크 텍스트는 참을 수 있지만, 링크가 문자 그대로 “click here” 두 단어뿐이면 여러 맥락에서 다른 링크와 구별할 수 없음
  • “click here” 링크를 매우 싫어함. 링크를 찾을 때는 페이지에서 링크처럼 표시된 단어만 읽고 원하는 링크를 찾고 싶기 때문임
    “Download Amaya”는 훌륭한 링크가 될 수 있음. 단순히 “Amaya”만 있거나 “click here”만 있는 건, Amaya 정보 페이지로 가는 경우가 아니라면 좋지 않음
  • 그들의 모든 예시에서 링크 대상은 다운로드 페이지가 아니라 Amaya 웹사이트 홈페이지임. 실제 다운로드는 말할 것도 없음
    결국 “click here” 문제는 다른 댓글들이 말한 것처럼 접근성 문제인데, 링크 텍스트가 대상을 정확히 반영하는지 여부와 뒤섞으면서 메시지가 꽤 흐려진 듯함
  • 초기 웹에는 이런 링크가 가득했음. 시간이 지나며 더 많은 동작이 직접적인 레이블을 가진 버튼이 되었고, “To cancel this purchase [click here].”, “To complete this purchase [click here].” 같은 명백히 나쁜 링크 패턴을 대체함
  • 그 맥락에서는 “click here”가 말이 되지만, 스크린 리더의 로터에서는 링크가 문맥 밖의 링크 목록으로 보일 수 있음
    aria-describedby가 도울 수는 있지만, 링크 안의 텍스트 자체를 더 좋게 만들면 그럴 필요를 피할 수 있음
    동사에 대해서는 동의함

• 영국 Government Digital Service도 접근성 가이드라인에서 비슷한 권고를 함: https://design.homeoffice.gov.uk/accessibility/links

  • 이 웹사이트와 가이드라인은 접근 가능한 컴포넌트와 웹 디자인의 기준으로 자주 참고하는데, 정말 좋음
    가장 예쁘지는 않지만 폼 컴포넌트의 두꺼운 검정/노랑 테두리 같은 것들보다 접근성이 디자인보다 우선함
  • 그 권고는 꽤 다름
    W3C는 “Get Amaya”, “Read more about Amaya”라고 하고, Home Office는 “Get Amaya”, “Read more about Amaya”라고 함
    후자가 훨씬 합리적으로 보이지만, 문맥 안에서 쓰면 다른 문제가 생김
    개인적으로는 둘 다 서로 다른 두 사용 사례를 혼동한다고 봄. 링크는 문장 안에 인라인으로 자주 쓰이고, W3C와 Home Office가 다루는 사례는 차라리 문장 밖의 버튼, 예를 들어 [Download], [Documentation]으로 처리하는 편이 나음
    하지만 인라인 텍스트 안의 하이퍼링크라는 사용 사례에서는 둘 다 어색해 보임
    예를 들어 “PiPedal is a guitar effects pedal that runs on Raspberry Pi. To download PiPedal, click here. To read the documentation, click here.”를 어떻게 고쳐야 할까?
    반대하는 이유는 이해하지만, “PiPedal is a guitar effects pedal that runs on Raspberry Pi. Get Pipedal. Read the documentation.” 같은 수정은 받아들이기 어려움. 영어 관용에 맞지 않음
    실제 문서에는 “To download PiPedal, visit the Download Page. To learn more about Pipedal, view the Documentation.”처럼 썼지만, 경험상 “click here”를 명사화하는 일은 자주 매우 어려움
    “Ubuntu Server installs don't suffer from this problem; but before choosing an Ubuntu Server install, you should read the Ubuntu Server section of the "Installing on Ubuntu" page.” 같은 문장에서는 더 그렇다
    그러면 “here”를 참조 대상의 대명사로 쓰는 게 정확히 어떤 잘못인지 의문이 듦
    이 사용 사례에서는 링크가 필요한 맥락을 모두 제공하는 문장 안에 있기 때문에 실제 접근성 문제가 없을 수도 있음
    첫 예시도 간결함이 중요한 웹페이지의 리드 문장임
    “To download PiPedal, click here.”가 정말 접근성 문제일까? 바로 위에 [ Download ] [ Documentation ] 버튼이 있다면 특히 더 그렇다
    여기서 실제로 중요한 지표는 사람들이 다운로드 페이지를 얼마나 많이 방문하느냐임
    그런 관점에서는 “To download PiPedal, visit the Download Page.”가 더 나을지 상당히 의심스러움

• 개인적으로는 그들이 피하라고 한 두 번째 예시가 더 좋음: “To download Amaya, go to the Amaya_Website and get the necessary software.”
  “Amaya”라고만 된 링크는 내부 링크인지 외부 링크인지 알 수 없고, 문맥상 Amaya를 다운로드하려는 목적이 분명하더라도 파일로 바로 가는지 다운로드 페이지로 가는지 알기 어려움

  • 목적지가 외부인지 파일인지 나타내는 아이콘을 넣는 편을 좋아함. 파일은 확장자로 표시할 수도 있음
  • 내부 링크와 외부 링크의 구분은 Wikipedia 등이 쓰는 작은 외부 링크 아이콘으로 이미 해결된 문제임

• 나이가 들어서 그런지 모르겠지만, 링크는 항상 본능적으로 명사를 가리킨다고 생각해 왔음
  링크는 어떤 장소를 가리키고, 그 장소에는 동사나 형용사가 아니라 이름이 있음
  그래서 “내 웹사이트”로 가는 링크는 괜찮지만, “내 웹사이트로 가기” 같은 링크는 본질적으로 맞지 않다고 느낌
  명령형 어투도 강하게 싫어해서 “go to my website”나 “follow this link” 같은 문장은 절대 쓰지 않음

  • 이해됨. 나도 늙은 건지도 모르겠음
    다만 링크가 무언가 다운로드 같은 동작을 시작하면 모호해짐. 그래도 이를 “다운로드”나 “다운로더”라는 명사로 보면 여전히 명사임
  • 튜토리얼이나 하우투 페이지 같은 곳에서는 명령형이 적절함

• 이건 아마 내가 끝까지 지킬 인터넷 논쟁거리임
  행동 유도 문구는 별개의 문제지만, “here”라는 단어만 링크로 거는 페이지는 하이퍼텍스트 매체를 이해하지 못한 작성자의 명백한 실패임
  “click here”는 실수로 남겨 둔 무대 지시문처럼 보임
  대부분의 작성자는 글을 쓸 때 하이퍼텍스트 맥락으로 쓰지 않고, Markdown 같은 링크 표기 대신 무대 지시문을 기본값으로 삼음

• “I forgot my password”라고 쓰인 링크에 관한 글이 떠오름
  “click here if...”라고 쓰면 나아질까 생각했지만, 직감적으로 그것도 맞지 않다는 걸 알았음
  웹페이지의 쓸모없는 요소를 무시하는 건 어떤 사람들에게는 없는 기술이고, 그걸 어떻게 가르쳐야 할지 모르겠음
  배경지식이 없는 사람에게 웹 사용을 도와줄 때마다 떠오름. 어떤 사용자는 페이지의 문자 그대로 첫 항목이 “Please enable notifications”여도 두 번째 항목을 보기도 전에 그것을 신중하게 생각함
  Google 검색도 이제 실제 결과 전에 여러 화면 분량의 쓰레기를 보여주니 더 그렇다
  관련된 문제로, 페이지 안 텍스트의 인식론적 지위를 종류별로 이해하지 못하는 경우가 있음
  예를 들어 “I forgot my password”라는 클릭 가능한 링크를 보고, 그것이 비밀번호를 잊었을 때 누르는 곳이라는 뜻이 아니라 자신이 비밀번호를 잊었다고 알려주는 문장이라고 믿는 사용자도 있음
  물론 UI 표준화의 죽음이 이 문제를 훨씬 악화시킴
  https://mstdn.io/@mattskala/113188291223682980

  • “I forgot my password”가 눈에 띄게 버튼이라면 그 맥락에서는 링크보다 더 효과적임
    Microsoft가 UI에서 많은 버튼을 없애고 애매하게 색이 들어간 텍스트 링크로 바꿨던 때가 기억남. 그 뒤 무엇을 클릭해야 하는지 알아내기가 훨씬 어려워졌음
  • UI 관례는 대부분 임의의 발명이거나 이전의 임의적 발명에서 파생된 것임을 기억해야 함
    사용자는 직관적으로 기계에 적응하고, 개발자는 사용자에게 적응하면서 되먹임 고리가 만들어짐
    다른 말로 하면, 수많은 웹사이트와 앱에 “I forgot my password” 링크가 있었기 때문에 언어의 의미도 바뀌었을 가능성이 큼
    적어도 그 맥락에서는 대부분의 사람이 의도를 이해하도록 적응할 것임
    다른 방식을 모르는 젊은 세대는 그것을 신경 쓸 만한 것으로 여기지도 않을 수 있음
    그래서 관례가 따로 떼어 보면 말이 안 되더라도, 관례를 유지하는 가치도 있음

• 모든 예시가 일관되게 실제로 “Amaya”를 다운로드한다는 전제라면, 그냥 하이퍼링크 Download Amaya가 더 좋겠음
  가능하면 실제 파일로 간다는 점을 나타내는 다운로드 아이콘도 있으면 좋음
  진짜 다운로드 버튼이 광고 4개 사이에 숨겨진 다른 페이지로 가는 링크가 아니라는 걸 알 수 있기 때문임

• Dragan Espenschied(despens)가 2022년에 링크 텍스트가 시간이 지나며 어떻게 바뀌었는지에 대한 글을 썼음: https://despens.systems/2022/06/button-pushes-you/
  그는 행동 유도 문구에서 사용자를 묘사하는 버튼 텍스트로의 전환을 짚음
  “대신 그것들은 사용자의 상태를 재구성해야 한다. 사용자는 다음 정보에 접근하기 전에 적힌 주문을 받아들이고 태도를 바꿔야 한다”는 식임

• “Get Amaya.”, “Tell me more about Amaya.”는 우아하지 않아 보임

  • 그렇다면 “Learn [More about Amaya]”는 왜 안 될까? “More about Amaya”는 명사구라서 그들의 기준에도 맞음
  • 그 시절 인터넷 자체가 우아하지 않았고, 나는 그게 좋았음