Hunyong’s Lab

AI 음성으로 듣기 - ElevenLabs

매일 아침 PC나 아이폰의 스크린 리더를 사용해서 뉴스를 읽을 때마다 저는 한숨부터 나옵니다. 보통 외국 사이트는 그렇지 않지만 국내 사이트들은 헤딩 태그가 뒤죽박죽이거나 아예 빠져있는 경우가 허다하기 때문이죠. 심지어 한겨레, 조선일보와 같은 메이저 언론사, 네이버 블로그처럼 콘텐츠 노출이 생명인 플랫폼도 HTML이 엉망입니다.

🌟 눈에는 보이지 않지만 중요한 HTML

겉으로 보기에 아름다운 웹사이트도 HTML이 제대로 구조화되지 않았다면, 마치 체계는 없고 내용만 가득한 책과 같습니다. 겉모습은 그럴듯해도, 목차도 없고 장절 구분도 없어서 원하는 내용을 찾기 힘든 그런 책 말이죠. 그럼 HTML은 무엇일까요?

HTML(HyperText Markup Language)은 웹페이지의 콘텐츠에 의미를 부여하는 마크업 언어입니다. 우리가 보는 모든 웹페이지는 이 HTML을 통해 콘텐츠의 구조와 의미가 정의됩니다. 마치 잘 정리된 책이 목차, 장, 절, 각주 등으로 구성되어 있듯이, 웹페이지도 HTML로 콘텐츠의 의미 구조를 정의하죠.

Chrome과 같은 웹 브라우저는 이 HTML 코드를 읽어 우리가 보는 화면으로 변환합니다. HTML은 "이건 제목이야", "이건 문단이야", "이건 이미지야" 하는 식으로 콘텐츠의 의미를 알려주는 역할을 합니다.

그런데 문제는 많은 웹사이트들이 이 HTML을 의미론적으로 제대로 작성하지 않습니다. 마치 책을 쓰면서 목차도 없고, 장절 구분도 없이, 그저 텍스트만 나열해놓은 것과 비슷하죠. 그러면 겉보기에는 멀쩡해 보여도 실제로는 콘텐츠의 구조와 의미가 제대로 전달되지 않습니다. 예를 들어 화면상으로는 제목처럼 보이지만 HTML 상에서는 단순한 텍스트로만 처리되어 있거나, 중요한 이미지인데 그 의미를 설명하는 대체텍스트가 없는 식이죠. 이것은 생각보다 심각한 문제입니다.

🎯 왜 HTML 구조가 중요할까요?

저는 그동안 HTML은 스크린 리더를 사용하는 시각장애인에게만 중요한 줄 알았습니다. 그런데 웹 접근성을 계속 공부하면서 HTML의 가치가 상업적인 데에도 있다는 것을 깨달았습니다. 자세히 설명해 보겠습니다.

1. 장애인의 접근성을 높여 줍니다!

네, 물론 장애인에게 진짜 중요합니다. 우리가 길을 걸을 때 도로 표지판이나 신호등이 필요하듯, 디지털 공간을 탐색하는 장애인에게는 잘 구조화된 HTML이 필요합니다. 시각장애인의 스크린 리더는 이 구조를 따라 콘텐츠를 논리적으로 읽어주고, 키보드 사용자는 순차적으로 페이지를 탐색할 수 있습니다. 또한 인지장애가 있는 사용자들도 체계적으로 구성된 정보를 통해 콘텐츠를 더 쉽게 이해할 수 있죠.

2. 검색 엔진 최적화에 도움이 됩니다!

놀라운 것은 두 번째 이유입니다. 검색 엔진도 마치 시각장애인처럼 웹사이트를 읽어나간다는 것입니다. 검색 엔진의 크롤러(crawler)는 HTML의 의미 구조를 따라 콘텐츠를 탐색합니다. 제목 태그를 통해 글의 중요도와 구조를 파악하고, 이미지의 대체텍스트를 읽어 시각 정보를 이해합니다. 마치 스크린 리더를 사용하는 시각장애인이 웹사이트를 탐색하는 것과 똑같은 방식이죠.

따라서 HTML 구조화가 잘 되어 있는 웹사이트는 검색 엔진이 더 쉽게 이해하고 검색 결과 상단에 노출하게 됩니다. 이렇게 검색 엔진이 선호하는 방식으로 웹사이트를 구축하는 것을 검색 엔진 최적화(Search Engine Optimization), 줄여서 SEO라고 합니다.

콘텐츠 노출이 생존과 직결되는 언론사나 블로그 플랫폼에서는 그래서 이 HTML 구조화가 특히 중요합니다. 그런데 아이러니하게도, 검색 엔진 노출이 생명인 미디어 업계조차 이런 기본적인 SEO 전략을 놓치고 있다니 안타까울 따름입니다.

💡 HTML 구조를 잘 만드는 방법

웹 개발자가 접근성과 검색 엔진 최적화를 모두 고려한 웹사이트를 만들기 위해서는 다음과 같은 기본적인 HTML 구조화 원칙들을 꼭 지켜야 합니다.

1. 헤딩 태그(H1~H6)를 논리적으로 사용하세요

• 페이지의 주요 제목은 반드시 H1으로 시작하세요.
• 하위 제목들은 순차적으로 H2, H3를 사용합니다.
• 계층 구조를 뛰어넘지 마세요. (예: H1 다음에 H4를 쓰는 것은 피해야 합니다)

2. 의미 있는 대체텍스트를 작성하세요

• 이미지가 전달하는 핵심 정보를 간단명료하게 설명하세요.
• 잘못된 예: "image_001.jpg", "사진", "배너"
  올바른 예: "2024년 웹 접근성 컨퍼런스에서 발표 중인 김헌용 교사"
• 장식용 이미지는 빈 대체텍스트로 처리하세요.
• 복잡한 차트나 그래프는 자세한 설명을 제공하세요.

  예: "2020년부터 2024년까지의 웹 접근성 준수율 그래프. 2020년 45%에서 시작해 매년 10%씩 증가하여 2024년에는 85%를 달성함"

3. 메타 데이터 최적화하기

• 페이지 제목과 설명을 명확하게 작성하세요.
• 잘못된 예:
  제목: "블로그 글"
  설명: "웹 접근성에 대한 글입니다."
  
  올바른 예:
  제목: "검색 엔진도 시각장애인처럼 웹을 탐색한다: HTML 구조화가 중요한 이유"
  설명: "HTML 구조화가 웹 접근성과 검색 엔진 최적화(SEO)에 미치는 영향을 시각장애인 교사의 관점에서 설명합니다. 헤딩 태그와 대체텍스트의 중요성을 실제 사례와 함께 다룹니다."
• 핵심 키워드를 자연스럽게 포함하세요.
• 잘못된 예: "웹접근성,HTML,SEO,장애인,검색엔진최적화,홈페이지제작"
  올바른 예: "웹 접근성과 SEO의 상관관계: HTML 구조화의 중요성"
• 각 페이지마다 고유한 메타 정보를 제공하세요. 여러 페이지에 동일한 제목이나 설명을 사용하면 검색 엔진이 혼란스러워할 수 있습니다.

이러한 원칙들은 단순해 보이지만, 실제 현장에서는 자주 간과됩니다. 하지만 이 기본적인 HTML 구조화 작업만 제대로 해도 웹사이트의 접근성과 검색 엔진 최적화 수준을 크게 높일 수 있습니다.

✨ 마무리하며

웹 접근성과 검색 엔진 최적화는 얼핏 전혀 다른 이야기처럼 보입니다. 소수의 장애인을 위한 배려와 비즈니스의 성공을 위한 기술이 서로 관련성이 없는 것처럼 보이니까요. 하지만 HTML이라는 렌즈를 통해 들여다보면, 이 둘은 놀랍도록 비슷한 원리로 작동합니다.

검색 엔진이 시각장애인처럼 웹사이트를 탐색한다는 사실 놀랍지 않나요? 제가 시각장애인으로서 매일 경험하는 웹의 불편함이, 사실은 검색 엔진도 겪고 있는 어려움이었다니! 이 또한 접근성이 더 이상 ‘특별한 배려’가 아니라 '보편적 원칙'이 되어야 하는 이유입니다. :)