이번 편의 결과물: 페이지 곳곳의 lang 속성이 정확해지고, 영문 프로젝트명 옆에 ruby로 한글 발음이 표기된다 · 다루는 개념: lang, dir과 bdi, ruby/rt/rp
이 편에서 만드는 파일
web-practice/portfolio/
├── index.html ~ (본문 영단어에 lang="en" 부여, 도구 이름에 ruby 발음 추가)
├── projects.html ~ (영문 프로젝트명에 ruby 발음 추가)
└── contact.html ~ (FAQ 답변의 영단어에 lang="en" 부여)개념 정리
lang 속성은 문서나 특정 구간의 언어를 선언한다. 스크린 리더는 이 값을 보고 발음을 바꾸고, CSS는 :lang() 선택자로 언어별 스타일을 줄 수 있다. <html lang="ko">처럼 문서 전체에 한 번 선언하고, 문장 중간에 다른 언어 단어가 섞이면 그 구간만 <span lang="en">React</span>로 다시 선언한다. 그래야 한국어 음성엔진이 영단어를 한국어 발음 규칙으로 읽지 않는다.
dir은 텍스트 방향(ltr/rtl/auto)을 정한다. 대부분의 한국어 페이지는 ltr을 벗어날 일이 없지만, 방향을 알 수 없는 값(사용자가 입력한 이름, 외부에서 받아온 문자열)을 한국어 문장 사이에 끼워 넣을 때는 <bdi>(bidirectional isolation)로 감싼다. <bdi>는 안의 텍스트 방향이 바깥 문장에 영향을 주지 않도록 격리한다. 이름 자체가 오른쪽에서 왼쪽으로 읽는 문자여도 주변 한국어 문장의 순서가 흐트러지지 않는다.
<ruby>는 원문 위(또는 옆)에 작은 발음·설명을 붙이는 요소다. <rt>가 발음 텍스트이고, <rp>는 <ruby>를 지원하지 않는 브라우저에서 괄호로 대체 표시할 문자다.
| 속성/요소 | 역할 | 안 쓰면 생기는 문제 |
|---|---|---|
lang (구간별) | 스크린 리더 발음, :lang() 선택자 | 영단어를 한국어 발음 규칙으로 잘못 읽음 |
dir="auto" / <bdi> | 방향을 모르는 문자열 격리 | 문장 순서가 뒤섞여 보임 |
<ruby>/<rt>/<rp> | 발음·읽는 법 병기 | 영문 이름을 어떻게 읽는지 알 수 없음 |
흔한 오해: “lang="ko"를 문서 최상단에 한 번 넣으면 끝”이라고 생각하기 쉽다. 문장 안에 섞인 영단어·고유명사는 별도로 감싸야 발음이 정확해진다.
실습
1. 파일 열기
web-practice/portfolio/index.html, projects.html, contact.html을 연다.
2. 코드 작성
index.html의 소개 문단과 기술 스택 목록에서 영단어를 lang="en"으로 감싸고, 자주 틀리는 발음인 Vite에 ruby를 붙인다.
<!-- index.html -->
<!-- ...기존 코드 유지 -->
<p>처음에는 디자인 툴로 화면을 그리다가, 직접 만들어 보고 싶어서 HTML과 CSS를 배웠습니다. 지금은 <span lang="en">React</span>로 서비스 화면을 만들고 있습니다.</p>
<!-- ...기존 코드 유지 -->
<ul>
<li>마크업·스타일: HTML, CSS, Sass</li>
<li>언어: <span lang="en">JavaScript</span>, <span lang="en">TypeScript</span></li>
<li>프레임워크: <span lang="en">React</span>, <span lang="en">Next.js</span></li>
<li>도구: Git, <ruby>Vite<rp>(</rp><rt>비트</rt><rp>)</rp></ruby>, Figma</li>
</ul>
<!-- ...기존 코드 유지 -->projects.html은 프로젝트 제목에 영문 이름이 섞여 있다. 03편~16편에서 만든 bookshelf·notes·todo-cli 카드 제목에 ruby로 발음을 붙인다.
<!-- projects.html -->
<!-- ...기존 코드 유지 -->
<h2>독서 기록 <ruby>bookshelf<rp>(</rp><rt>북셸프</rt><rp>)</rp></ruby></h2>
<!-- ...기존 코드 유지 -->
<h2>메모 앱 <ruby>notes<rp>(</rp><rt>노츠</rt><rp>)</rp></ruby></h2>
<!-- ...기존 코드 유지 -->
<h2><ruby>todo-cli<rp>(</rp><rt>투두 씨엘아이</rt><rp>)</rp></ruby></h2>
<!-- ...기존 코드 유지 -->contact.html의 FAQ 답변에 나오는 도구 이름도 언어를 밝힌다.
<!-- contact.html -->
<!-- ...기존 코드 유지 -->
<details name="faq">
<summary>사용하는 도구는 무엇인가요?</summary>
<p><span lang="en">VS Code</span>, <span lang="en">Figma</span>, <span lang="en">GitHub</span>를 주로 씁니다.</p>
</details>
<!-- ...기존 코드 유지 -->방향을 모르는 문자열을 다루는 감각을 익히기 위해, contact.html 연락처 정보에 협업 시간대를 표기할 때 영문 약어를 <bdi> 없이도 안전한 경우와, 외부에서 그대로 받아온 이름처럼 방향을 예측할 수 없는 문자열은 <bdi>로 감싸야 하는 경우를 구분해 둔다.
<!-- contact.html -->
<!-- ...기존 코드 유지 -->
<p>업무 시간: 평일 10:00 – 18:00 (<span lang="en">KST</span>)</p>
<!-- 외부 협업자 이름처럼 방향을 예측할 수 없는 문자열을 표시할 때만 <bdi>를 쓴다 -->
<!-- 예: <p>추천인: <bdi>{외부에서 받아온 이름}</bdi>님</p> -->
<!-- ...기존 코드 유지 -->3. 실행
VS Code Live Server 또는 npx serve web-practice/portfolio로 로컬 서버를 띄운다.
4. 확인
index.html기술 스택 목록에서Vite옆에 작게 “비트”가 표시된다.projects.html의 “독서 기록 bookshelf”와 “메모 앱 notes”, “todo-cli” 카드 제목 옆에 발음이 붙어 있다.- 브라우저 개발자 도구 요소 검사에서
<span lang="en">구간이 문서 기본 언어(ko)와 다르게 표시된다. - macOS VoiceOver나 Windows 내레이터로 소개 문단을 읽으면
React,JavaScript가 영어 발음으로 읽힌다.
직접 해보기
contact.html의 연락처 정보에서 이메일 주소(hello@zeno.example)처럼 영문과 기호가 섞인 문자열에도lang="en"이 필요한지 판단해 보고, 필요 없다면 그 이유를 한 줄로 적어 본다.
답 보기
이메일 주소는 발음해서 듣는 텍스트가 아니라 그대로 복사해 쓰는 식별자에 가깝다. 스크린 리더도 이메일 형식을 감지하면 별도 규칙으로 읽어 주는 경우가 많아, lang 없이 두어도 실사용에 큰 문제가 없다. 다만 팀 컨벤션에 따라 붙이는 것도 틀린 선택은 아니다.
index.html경력 표의 회사명 “스튜디오 파도”는 전부 한국어이므로lang추가가 필요 없다. 만약 이 표에 해외 지사명이 영문으로 추가된다면 어느 태그에lang="en"을 넣을지 표 구조를 보고 정해 본다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| 영단어를 스크린 리더가 이상하게 읽음 | 문장 안 영단어에 lang 미지정 | 해당 구간을 span lang="en"으로 감싼다 |
ruby 발음이 데스크톱에서만 보이고 일부 오래된 브라우저에서 괄호 없이 붙어 보임 | rp 요소 누락 | rt 앞뒤에 rp로 대체 괄호를 넣는다 |
| 외부에서 받아온 이름을 넣었더니 문장 순서가 이상해짐 | 방향을 모르는 문자열을 격리하지 않음 | bdi로 감싼다 |
dir="rtl"을 문서 전체에 걸어 레이아웃이 깨짐 | 격리가 필요한 구간에 전체 방향을 바꿈 | 전체가 아니라 해당 구간만 bdi나 dir="auto"로 좁힌다 |