Sowonjin's DevBlog

HTML lang 속성: 작은 변경이 가져온 큰 변화

#ux

사이트를 운영하면서 겪었던, 작지만 중요한 사용자 경험 개선 사례입니다. HTML의 lang 속성 하나가 사용자에게 얼마나 큰 영향을 미칠 수 있는지 확인한 경험이었습니다.

커버 이미지

최근 저희 서비스 로그인 페이지에 접속한 일부 사용자들로부터 "사이트가 한국어인데도 브라우저에서 번역 팝업이 계속 뜹니다."라는 문의를 받았습니다. 처음에는 크게 신경 쓰지 않았지만, 사용자 불편이 지속되자 직접 확인해 보았고 실제로 크롬 브라우저에서도 불필요한 번역 제안이 뜨는 것을 확인했습니다. 모든 콘텐츠는 한국어로 작성되어 있었지만 브라우저는 페이지 언어를 잘못 인식하고 있었습니다. 이 문제는 단순한 불편함을 넘어 서비스 신뢰에도 영향을 줄 수 있는 이슈였습니다.

원인을 분석해 보니, 문제는 src/html/index.html 파일의 <html lang="en"> 속성에 있었습니다. 페이지의 모든 콘텐츠는 한국어였지만, <html> 태그에 지정된 lang 속성 값이 "en"(영어)으로 설정되어 있었기 때문에 브라우저가 해당 페이지를 영어로 오인하고 번역을 제안했던 것입니다. 사소해 보이지만, 사용자 경험에 직접적인 영향을 미치는 중요한 포인트였습니다. 이 글에서는 lang 속성이 무엇이고, 웹 서비스에 어떤 영향을 미치는지 정리합니다.

브라우저는 페이지 언어를 어떻게 “판단”할까?

“콘텐츠가 전부 한국어인데도 왜 브라우저가 영어라고 생각했지?”라는 의문이 생길 수 있습니다. 브라우저(그리고 검색 엔진/보조 기술)는 페이지의 언어를 딱 한 가지 신호로만 판단하지 않고, 여러 힌트를 조합해 추론합니다. 대표적으로 아래 요소들이 함께 작동합니다.

  • <html lang="…"> (가장 명시적이고 강한 힌트)
    문서 작성자가 “이 페이지의 기본 언어는 이거다”라고 선언하는 값이기 때문에, 많은 사용자 에이전트는 이를 우선적인 기준으로 삼습니다.
  • 페이지 텍스트 자체의 언어 감지(통계적/규칙 기반 추정)
    문자 분포, 단어 패턴 등을 기반으로 “이건 한국어 같아”를 추정합니다. 다만 이 값은 추정치라서, 다른 강한 힌트와 충돌하면 밀릴 수 있습니다.
  • 사용자 환경/브라우저 설정(예: 선호 언어, 번역 설정, 과거 번역 이력 등)
    사용자의 브라우저 설정(선호 언어 목록 등)은 번역 제안을 띄울지 말지에 영향을 줄 수 있습니다.
  • 서버/문서의 추가 신호(상황에 따라 보조적으로 사용)
    경우에 따라 응답 헤더나 메타 정보 등도 힌트가 될 수 있지만, 일반적인 SPA 정적 HTML에서는 <html lang>이 가장 직접적인 신호로 작동하는 편입니다.

이번 이슈에서는 “콘텐츠는 한국어”라는 신호가 분명히 있었음에도, 문서 최상단에서 lang="en"을 명시해버린 것이 너무 강한 힌트로 작동했습니다. 그 결과 브라우저 입장에서는 “작성자가 영어 페이지라고 선언했는데, 사용자 환경은 한국어이고 내용은 한국어처럼 보이네? 그럼 번역을 제안해야겠다”라는 흐름으로 이어지기 쉬웠던 겁니다.

즉, 이번 문제는 단순히 “오타 하나”가 아니라, 언어 감지 로직의 기준점(Anchor)을 잘못 박아둔 상태였다고 볼 수 있습니다.

HTML lang 속성: 웹의 언어를 말하다

lang 속성은 HTML 문서 또는 특정 요소의 기본 언어를 지정하는 전역(global) 속성입니다. 이 속성은 BCP 47이라는 표준화된 언어 태그 형식(예: 한국어는 "ko", 미국 영어는 "en-US")을 사용하여 언어를 정의해요. 주로 <html> 태그에 선언되어 문서 전체의 기본 언어를 설정하는 데 사용됩니다. 저의 경우처럼 이 속성이 없거나 잘못 설정될 경우, 브라우저는 언어를 알 수 없거나 잘못된 언어로 인식하게 됩니다. 이는 브라우저뿐만 아니라 스크린 리더, 검색 엔진 등 다양한 사용자 에이전트가 콘텐츠의 언어를 이해하고 적절하게 처리하는 데 매우 중요한 역할을 합니다.

웹 표준 및 접근성 (Accessibility)

lang 속성은 단순한 설정 값을 넘어 웹 표준의 기본을 지키고, 웹 접근성을 향상시키는 데 필수적입니다. 특히 스크린 리더와 같은 보조 기술을 사용하는 시각 장애인 사용자에게는 lang 속성이 콘텐츠를 이해하는 데 결정적인 영향을 미칩니다. 만약 lang 속성이 없거나 잘못 설정되면, 스크린 리더는 텍스트를 잘못된 발음과 억양으로 읽어버려 사용자가 내용을 전혀 이해할 수 없게 만들어요. 웹 콘텐츠 접근성 지침(WCAG) 3.1.1 '페이지의 언어' 성공 기준에서도 페이지의 기본 언어를 지정하도록 명시하고 있을 정도로 중요한 요소입니다. 즉, lang 속성은 모든 사용자가 웹 콘텐츠에 동등하게 접근하고 이용할 수 있도록 하는 기본적인 배려이자 책임입니다.

검색 엔진 최적화 (SEO)

SEO, 즉 검색 엔진 최적화는 웹사이트가 검색 엔진 결과 페이지(SERP)에서 더 잘 노출되도록 하는 작업입니다. Google과 같은 주요 검색 엔진은 페이지의 언어를 감지하기 위해 lang 속성뿐만 아니라 자체 알고리즘, 그리고 hreflang 속성 등 다양한 신호를 활용합니다. 따라서 lang 속성 하나만으로 검색 순위에 직접적인 영향을 미친다고 보기는 어렵습니다. 하지만 lang 속성은 검색 엔진에 콘텐츠의 언어적 컨텍스트를 제공하여, 해당 언어를 사용하는 사용자에게 더 관련성 높은 검색 결과를 제공하는 데 간접적으로 기여할 수 있습니다. 특히 다국어 웹사이트의 경우, hreflang 속성을 통해 각 언어/지역별 페이지를 명확히 지정하는 것이 SEO에 훨씬 더 중요합니다.

브라우저 기능과의 상호작용

가장 직접적으로 체감할 수 있는 부분이 바로 브라우저의 내장 기능과의 상호작용입니다. 저의 사례처럼 lang 속성이 "en"으로 설정된 한국어 페이지에서는 브라우저가 불필요하게 번역 기능을 제안합니다. 이는 사용자에게 지속적인 불편함을 주고, 웹사이트에 대한 부정적인 인식을 심어줄 수 있습니다. 반대로, 올바른 lang 속성 설정은 자동 번역 제안의 오작동을 방지하고, 맞춤법 검사기, 하이픈 넣기 규칙, 텍스트 음성 변환(Text-to-Speech) 엔진 등이 해당 언어에 맞춰 정확하게 동작하도록 돕습니다. 작은 설정 하나가 사용자 경험의 질을 좌우할 수 있습니다.

lang 속성 개선: 간단하지만 강력한 한 줄의 변화

저희 서비스 로그인 시스템 프로젝트의 src/html/index.html 파일에서 발생한 문제는 바로 이 lang 속성 값이 잘못 설정된 데 있었습니다. 기본적으로 한국어로 서비스되는 페이지였음에도 lang="en"으로 되어 있어, 브라우저가 영어 페이지로 오인하고 번역 기능을 제안했던 것입니다.

변경 전 코드: lang="en"으로 설정된 초기 상태

아래는 문제가 발생했던 src/html/index.html 파일의 초기 상태입니다. <html lang="en"> 부분이 눈에 띄실 겁니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>서비스 로그인</title>
  </head>
  <body>
    <div id="app">...</div>
  </body>
</html>

위 코드는 서비스 로그인 페이지의 기본 HTML 구조를 보여줍니다. 핵심은 <html lang="en"> 부분입니다. 여기서 lang 속성이 "en"(영어)으로 명시되어 있어, 비록 페이지의 실제 콘텐츠는 한국어일지라도 브라우저는 이 페이지를 영어로 간주했습니다. 그 결과, 한국어 환경의 사용자에게 "이 페이지를 번역하시겠습니까?"라는 불필요한 번역 제안 팝업이 계속해서 노출되었습니다. 다른 <meta> 태그들은 문자 인코딩(charset), 페이지 설명(description), 키워드(keywords), 뷰포트 설정, 파비콘 등을 정의하며, 이는 언어 설정과는 직접적인 관계가 없습니다.

변경 후 코드: lang="ko"로 사용자 경험 개선

문제를 해결하기 위해 저는 src/html/index.html 파일의 단 한 줄, lang 속성 값을 "en"에서 "ko"로 변경했습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    ...
    <title>서비스 로그인</title>
  </head>
  <body>
    <div id="app">...</div>
  </body>
</html>

변경 후 코드를 보시면 <html lang="ko">로 수정된 것을 확인할 수 있습니다. 이 작은 변화 하나로 브라우저는 페이지의 기본 언어를 한국어로 정확히 인식하게 되었고, 더 이상 불필요한 번역 제안 팝업을 띄우지 않게 되었습니다. 사용자들은 이제 방해 없이 한국어 콘텐츠를 있는 그대로 이용할 수 있게 되었습니다. 이처럼 lang 속성은 웹사이트의 주된 언어가 무엇인지를 명확히 알려주어, 사용자들이 브라우저의 기본 설정에 따라 콘텐츠를 올바르게 소비할 수 있도록 돕는 역할을 합니다.

다국어 페이지에서의 lang 속성 활용 (확장된 예시)

만약 저희 서비스가 여러 언어를 지원하는 다국어 웹사이트였다면, <html> 태그의 lang 속성뿐만 아니라 특정 콘텐츠 블록에도 lang 속성을 적용하여 브라우저와 보조 기술이 각 콘텐츠의 언어를 정확히 이해하도록 해야 합니다. 이는 웹 접근성 측면에서도 매우 중요합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>서비스 글로벌</title>
    <link rel="stylesheet" href="/style.css" />
    <!-- 다국어 SEO를 위한 hreflang 속성 예시 -->
    <link rel="alternate" hreflang="en" href="https://global.example.com/en/" />
    <link rel="alternate" hreflang="ja" href="https://global.example.com/ja/" />
    <link rel="alternate" hreflang="ko" href="https://global.example.com/ko/" />
  </head>
  <body>
    <header>
      <h1>서비스 글로벌</h1>
      <nav>
        <ul>
          <li><a href="/ko/">한국어</a></li>
          <li><a href="/en/">English</a></li>
          <li><a href="/ja/">日本語</a></li>
        </ul>
      </nav>
    </header>
 
    <main>
      <section>
        <h2>환영합니다!</h2>
        <p>글로벌 서비스에 오신 것을 환영합니다. 다양한 콘텐츠를 만나보세요.</p>
        <p lang="en">Welcome to Global Service! Discover various content.</p>
      </section>
 
      <section lang="ja">
        <h2>ようこそ！</h2>
        <p>グローバルサービスへようこそ。様々なコンテンツをご覧ください。</p>
        <!-- 이 섹션 전체가 일본어임을 명시합니다. -->
      </section>
 
      <section>
        <h3>문의하기</h3>
        <p>더 궁금한 점이 있으시면 언제든지 연락 주세요.</p>
        <p>
          Email: <a href="mailto:support@example.com">support@example.com</a>
        </p>
        <p lang="en">For any inquiries, please feel free to contact us.</p>
      </section>
    </main>
 
    <footer>
      <p>&copy; 202X. All rights reserved.</p>
      <p lang="en">Privacy Policy | Terms of Service</p>
    </footer>
  </body>
</html>

이 확장된 예시에서는 문서의 기본 언어가 한국어(html lang="ko")로 설정되어 있지만, 특정 <p> 태그나 <section> 태그에는 다른 언어(lang="en", lang="ja")를 명시적으로 지정했습니다. 이렇게 하면 스크린 리더는 각 텍스트 블록을 해당 언어의 발음과 억양으로 읽을 수 있게 되며, 브라우저 역시 해당 영역에 대한 번역 기능을 더 유연하게 적용할 수 있습니다. 또한, hreflang 메타 태그를 사용하여 검색 엔진에게 각 언어별 페이지의 존재를 알려 다국어 SEO에도 도움을 줄 수 있습니다.

결과 및 효과

이번 lang 속성 변경 작업은 단 한 줄의 코드 수정이었지만, 사용자 경험 측면에서는 매우 큰 개선을 가져왔습니다. 더 이상 불필요한 번역 팝업에 방해받지 않고, 한국어 콘텐츠를 자연스럽게 이용할 수 있게 되었습니다. 이는 개발자가 작은 부분까지 신경 써야 하는 이유를 다시 한번 일깨워주었습니다. 웹 표준 준수, 웹 접근성 향상, 그리고 브라우저 기능의 올바른 작동은 모두 이 lang 속성과 밀접하게 연결되어 있습니다.

회고 및 다음 단계

html의 lang 속성은 단순히 페이지의 언어를 선언하는 것을 넘어, 웹 접근성, 검색 엔진 최적화, 사용자 편의성까지 포괄하는 중요한 요소입니다. 기본적인 웹 표준 속성이 올바르게 설정되어 있는지 확인하는 것이 사용자 경험의 출발점입니다.

다국어 서비스를 고려하는 경우, 각 페이지 또는 특정 콘텐츠 블록의 lang 속성을 세심하게 관리할 필요가 있습니다.

참고 자료

Related Posts

이벤트 페이지 제작 공수를 줄이기 위한 드래그&드롭 빌더 개발기

이벤트 페이지 제작 공수를 줄이기 위한 드래그&드롭 빌더 개발기

이벤트 페이지를 만들 때마다 개발자가 직접 이미지를 S3에 올리고 HTML을 작성해야 했던 반복 작업을 없애기 위해, 드래그&드롭 기반 이벤트 페이지 빌더를 개발한 과정을 다룹니다.

#vue#architecture#ux
결제 완료 후 뒤로가기 문제 해결하기

결제 완료 후 뒤로가기 문제 해결하기

결제 완료 후 뒤로가기 시 결제 대행사 페이지로 돌아가는 문제를 해결하며, 브라우저 히스토리 관리와 라우팅 메커니즘을 이해하고 사용자 인터랙션을 활용한 해결 과정을 정리합니다.

#ux#browser#troubleshooting
재사용 가능한 드래그 스크롤 컨테이너 만들기

재사용 가능한 드래그 스크롤 컨테이너 만들기

Vue.js로 PC 환경에서 마우스 드래그 스크롤을 지원하는 재사용 가능한 컴포넌트를 개발한 과정을 다룹니다.

#vue#ux