▲

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

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

서론

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

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

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

접근성과 사용자 경험 영향

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

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

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

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

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

결론

  • "여기를 클릭하세요"가 아닌 의미 있는 텍스트를 링크로 사용하는 것이 현재 웹과 미래 웹 모두에서 필수적인 기준임
▲
GN⁺ 15시간전  [-]
Hacker News 의견

  • 접근성 관점에서 보면, 시각장애 사용자를 위한 스크린 리더는 페이지를 선형적으로 읽어주는 방식임을 강조하고 싶음. 이 선형적 구조에서 벗어나기 위해 사용자가 헤더나 링크 목록을 별도로 탐색할 수 있지만, 모든 링크가 "여기를 클릭"처럼 표시된다면 실질적으로 비(非)선형적 접근이 차단되는 문제 발생

    • 모든 링크가 단순히 "Amaya"와 같이 동사 없이 명사로만 표시될 경우, 각각의 의미 파악이 어려워진다는 점을 지적. 그래서 "get Amaya"나 "go to the Amaya website" 같은 표현도 충분히 괜찮다는 생각임. 또, 다운로드 버튼이 github.io에 있지만 실제로는 sourceforge 같은 악성코드 위험이 있는 사이트에서 실행 파일을 받아오게 만드는 건 좋지 않다는 사례로 wxMaxima 언급
    • 아이러니하게도, 접근성 도구를 실제로 필요로 하지 않는 사람들이 접근성 도구의 동작을 쉽게 시각화해 이해할 수 있도록 하는 뭔가가 필요함을 제안. 도구 자체를 바꾸자는 게 아니라, 더 많은 사람이 스크린 리더 환경을 직접 경험해볼 수 있는 방법 고민 필요성 인식
    • 이런 문제에는 이미 여러 가지 해결 방법이 있음. 예시로 WCAG 2.2 HTML H33 가이드, WCAG 2.2 CSS C7 가이드 링크를 참고자료로 제시. 다만, 첫 번째 방법이 실제 스크린 리더에서 얼마나 잘 지원되는 지는 확실치 않음
    • 좋은 주장이라는 생각. 그래도 링크 텍스트는 "Amaya" 보다는 "Get Amaya"처럼 더 명확한 행동을 포함하는 게 좋겠다는 입장
    • 스크린 리더는 페이지 내 여러 내비게이션 방법 제공. 선형 이동만이 가장 비효율적인 방법임. 이용자는 랜드마크나 헤딩 혹은 아웃라인 네비게이션 모드를 통해 빠르게 원하는 위치로 점프 가능. 중요한 점은 스크린 리더 내비게이션 방식과 키보드 내비게이션이 다르다는 점임

  • "나"는 글에서 제시한 "문제적" 예시인

    W3C의 편집기/브라우저 Amaya를 다운로드하려면, 여기를 클릭.
    이 정말 직관적이라는 생각임. 링크를 클릭하면 바로 파일이 내려받아지거나 다운로드 페이지로 이동할 거란 걸 예상할 수 있음.
    반면,
    Amaya 받기!
    이런 문구는 웹사이트의 메인 페이지로 이동할 듯한 느낌이라 실제 다운로드용 링크로 사용되면 효과 떨어짐.
    그리고
    _Amaya_에 대해 더 알아보기
    이건 다운로드와 전혀 관계없고, 동사 "알아보기"는 링크가 아닌데 이럴 때 "Amaya" 링크가 랜딩페이지로 갈지, 정보 페이지로 갈지 혼란스러움.
    웹에서의 관행은 기존 예시처럼
    W3C의 편집기/브라우저 Amaya를 다운로드하려면 여기를 클릭
    Amaya 다운로드, W3C의 편집기/브라우저
    이런 식임.
    링크 텍스트에 동사를 쓰지 말아야 한다는 주장에는 동의하지 못하겠음. 반대로, 행위(다운로드, 정보 확인 등)가 필요한 링크라면 명확하게 동사가 들어가야 한다는 입장임.
    특히 "여기를 클릭"은 단순 참조 링크가 아니라 행위성 링크임을 표시하기 때문에 매우 직관적임.
    Amaya 받기!
    이런 문구는 실제 Amaya를 어떻게 받는지 안내하는 링크가 아니라, 그냥 참조 링크인 듯 느껴진다는 점 강조

    • 스크린 리더로 직접 이용해보면 모든 링크가 "여기를 클릭"만 반복되는 걸 알 수 있음. 이건 전혀 도움이 되지 않음. 검색엔진 관점에서도 "여기를 클릭"은 아무 정보도 제공하지 않음. 동사 자체는 괜찮은데, "여기를 클릭"처럼 링크가 동일하게 들리는 건 지양해야 함. "Click Here to download Amaya"처럼 객체까지 명확히 넣은 문구는 괜찮지만 단순히 "여기를 클릭"은 여러 상황에서 구별 불가함
    • "여기를 클릭" 링크는 정말 싫음. 내가 원하는 링크를 찾으려면 페이지 내 모든 링크 텍스트만 눈으로 훑게 되는데, "Amaya 다운로드"나 "Amaya"는 참조 페이지라면 괜찮겠지만, "여기를 클릭"은 전혀 도움이 안 된다고 생각함
    • 실제 예시에서는 모든 링크가 Amaya 홈페이지로 이동. 다운로드 페이지가 아니고, 메시지 전달력이 오히려 약화됨. "여기를 클릭" 같은 접근성 이슈와, 링크 텍스트가 링크 목적을 얼마나 정확히 반영하는지를 혼동해 논의하고 있다는 비판
    • 스크린 리더 얘기 외에도, 링크 텍스트를 명확한 명사로 지정하는 게 유지 보수 관점에서 이점 있을 수 있음. 예를 들어, 의도와 다르게 복붙된 링크나, 죽은 링크의 경우 텍스트 자체가 단서가 되므로 추적과 수정이 더 쉬움. 약간 사소할 수는 있음
    • 초창기 웹에는 이런 "여기를 클릭" 링크가 많았음. 점차 동작이 명확한 버튼 형태로 대체되면서 "이 구매를 취소하려면 [여기를 클릭]", "이 구매를 완료하려면 [여기를 클릭]" 같은 패턴은 점점 사라짐

  • 영국 Government Digital Services에서도 비슷한 접근성 가이드라인을 권장한다는 점 소개, 공식 자료는 여기서 확인 가능

    • 이 가이드라인을 참고자료 삼아 가장 높은 수준의 접근성 컴포넌트/웹 디자인 구현에 자주 참고함. 투박하게 보일 수 있지만(두꺼운 검정/노랑 테두리 등), 접근성을 디자인보다 우선시하는 게 중요하다고 생각함
    • Home Office에서 추천하는 방식은 W3C와 약간 다름. 예를 들어
      W3C:
      Get Amaya
      Read more about Amaya
      Home Office:
      Get Amaya
      Read more about Amaya
      Home Office 방식이 더 합리적이지만, 문맥에 따라서는 또 다른 문제가 생길 수 있음. 두 곳 모두 실제로는 내러티브 안의 하이퍼링크 활용보다는 아웃오브라인 버튼 식으로 해결하는 게 더 자연스러움(예: [Download], [Documentation]). 내 경험상 텍스트를 자연스럽게 바꾼
      "PiPedal은 Raspberry Pi에서 돌아가는 기타 이펙터임. PiPedal 다운로드는 [다운로드 페이지], 문서 읽기는 [Documentation]."
      이런 형식이 더 낫다고 생각해서 실제 문서에도 그렇게 적었음
      "여기를 클릭"을 명사화하는 게 생각보다 어렵다는 점을 깨달았음. 때로는 inline 문장 안에서 충분한 맥락을 제공하므로 "여기를 클릭" 사용이 실제로 접근성 문제를 일으키지 않는 사례도 존재함
      특히 버튼이 바로 위에 위치한 경우("Download", "Documentation") 이면 굳이 수정할 필요 여부에 확신이 들지 않음 궁극적으로는 사람들이 다운로드 페이지를 실제로 얼마나 방문하는지가 성능 지표

  • 개인적으로 글에서 피하라고 한 두 번째 예시(“Amaya를 다운로드하려면 _Amaya 웹사이트_로 이동해 필요한 소프트웨어를 받기”) 가 낫다고 느낌.
    단순히 "Amaya" 만 링크로 넣으면 내부 링크인지 외부 링크인지, 그리고 바로 파일로 갈지 다운로드 페이지로 갈지 명확하지 않음

    • 목적지가 외부인지, 파일 링크인지 알 수 있도록 아이콘을 추가하는 방식 선호. 파일인 경우 파일 확장자를 표시해도 좋다는 아이디어 공유
    • 내부-외부 링크 구분 문제는 Wikipedia 등에서 작은 아이콘으로 이미 잘 해결 중

  • 나이가 많아서 그런지, 직관적으로 링크는 명사(장소/대상)를 가리키는 용도로 생각하게 됨.
    그래서 "내 웹사이트"로의 링크 등은 괜찮은데, "내 웹사이트로 이동" 같이 동사가 들어간 문구에는 거부감
    특히 명령어(임퍼러티브) 형태를 싫어해서 "go to my website", "follow this link" 같은 형식은 사용하지 않음

    • 이 말이 공감됨. 다운로드처럼 액션이 있는 경우 혼란스러울 수 있지만, "다운로드" 자체가 명사라 괜찮을 듯함
    • 튜토리얼이나 How-to 페이지는 명령형 문구도 적격이라고 봄

  • 온라인에서 "여기" 만 링크로 사용하는 건 하이퍼텍스트 문서 작성 자체를 전혀 이해하지 못했다는 근본적인 실패라고 느끼는 입장. "여기를 클릭"은 마치 대본의 지시문(stage direction) 같음. 많은 저자가 하이퍼텍스트 맥락에서 글을 쓰지 않아 생기는 문제라 생각함

  • "I forgot my password" 같은 문구를 링크로 둘 때, "여기를 클릭"처럼 바꿔보려고 생각했지만 직관적으로 뭔가 아니라고 느낌.
    UI 표준이 무너지면서, 사용자가 페이지에서 뭘 클릭해야 하는지, 어떤 텍스트가 자신을 대변하는지 혼동하는 현상이 많아짐
    "I forgot my password"가 버튼이면 링크보다 훨씬 더 효과적이라는 점에는 동의
    또한 Microsoft가 버튼을 대부분 없애고 모호한 색상의 링크로 대체했을 때, 어디를 눌러야 할지 헷갈리는 사례가 많아지기도 했음
    (참고 포스트: 관련 마스토돈 글)

  • Dragan Espenschied의 2022년 에세이 링크 텍스트 변화사를 소개.
    최근 링크 텍스트가 call-to-action(행동 유도)에서 사용자 상태(자신이 어떤 사람이라는 정의, 예: “로그인하세요”)를 설명하는 버튼 텍스트로 바뀌는 트렌드를 언급

  • 대부분 글에서 설명한 원칙에 동의하지만, "download"처럼 동사나 동사구가 명확히 드러나야 하는 경우에는 예외적으로 적합한 경우가 있다고 생각함. 이 경우 반드시 직접 다운로드로 연결될 때만 사용해야 하며, 항상 맥락에 맞는지 확인 필요

  • 예시처럼 모든 링크에서 실제로 Amaya 다운로드가 진행된다면, Download Amaya 형식의 하이퍼링크가 가장 선호됨.
    가능하면 다운로드임을 암시하는 아이콘을 함께 넣어주면 좋겠음. 실제 파일 링크가 아니라 광고 버튼이 여러 개 섞여있는 다운로드 페이지로 유도되는 건 피하고 싶음

답변달기