[팁] 웹 탐색할 때 센스리더가 불필요한 것 읽지 않게 설정하는 방법

AI 음성으로 듣기 - ElevenLabs


윈도우 PC에서 센스 리더로 웹 탐색을 하다 보면 웹 페이지에 있는 콘텐츠의 구조나 실시간으로 바뀌는 내용에 대해서 친절하게 모두 알려주는데요. 이러한 정보는 화면에는 보이지 않지만 웹 페이지에 적용된 HTML 태그나 아리아-라이브(ARIA-live) 속성을 센스 리더가 인식해서 음성으로 출력해주는 것입니다. 이 정보가 있으면 내용을 순차적으로 다 확인하지 않더라도 웹 페이지의 구조와 내용을 빠르게 파악하는 데 도움이 됩니다.

하지만 가끔은 굳이 알려주지 않아도 되는 내용까지  읽어주는 바람에 오히려 내용 파악에 방해가 되기도 하는데요. 자주 방문하는 웹 사이트에서 프레임이나 목록 정보를 계속 출력한다든가, 인터넷 기사를 읽고 있는데 배너에 표시되는 헤드라인 기사 제목이 읽던 내용을 끊고 들어와서 출력되는 경우에 오히려 성가시다는 느낌을 받은 적이 있으실 겁니다. 이 문제를 해결하는 방법은 간단합니다.


* 센스 리더 프로페셔널 V 8.52 버전 기준입니다.

  • 웹 페이지가 열려 있는 상태에서 컨트롤+쉬프트+F9 키를 눌러 가상 커서 설정 대화상자를 호출합니다.
  • 설정(S) 버튼을 눌러 센스 리더가 읽는 항목의 목록을 엽니다.
  • 여기서 스물세 개의 항목별로 읽기 토글 또는 방식을 설정할 수 있습니다.
  • 새 페이지 자동 읽기, 숨긴 내용 읽기, 프레임 시작·끝 읽기, 목록 시작·끝 읽기, 목록 항목 개수 읽기, 변경 내용 자동 읽기 등 항목별로 읽게 할 것인지, 읽지 않게 할 것인지를 자신에게 맞게 스페이스 바로 선택합니다.
  • 확인 버튼을 눌러 설정을 저장합니다.


저는 이 중 목록 시작, 끝 읽기, 목록 항목 개수 읽기, 변경 내용 자동 읽기는 해제해 놓고 사용하는데요. 

간단히 설명하면 목록은 웹 페이지에서 여러 항목을 순서대로 나열할 때 사용하는 HTML 태그(`<ul>`, `<ol>`, `<li>`)와 관련된 정보입니다. 예를 들어, 쇼핑몰에서 상품 목록을 볼 때 각 상품의 이름과 가격 앞에 "목록 시작", "1/3", "2/3"와 같이 읽어주는 것을 해제할 수 있습니다. 

변경 내용 자동 읽기는 웹 페이지에서 실시간으로 내용이 바뀌는 경우, 즉 아리아-라이브 속성이 적용된 영역에서 변경된 내용을 자동으로 읽어주는 기능입니다. 예를 들어, 채팅창에 새로운 메시지가 올라오거나 실시간 검색어 순위가 바뀌는 경우 해당 내용을 즉시 읽어줍니다. 이 기능을 해제하면 변경된 내용을 수동으로 확인해야 하지만, 웹 페이지 탐색에 집중할 수 있다는 장점이 있습니다.


이처럼 센스 리더의 설정을 변경하면 웹 탐색 환경을 자신에게 맞게 조절할 수 있습니다. 불필요한 정보는 걸러내고 필요한 정보만 효율적으로 얻을 수 있도록 설정을 조정해 보세요. 😉

🔍 👀 검색 엔진도 시각장애인처럼 웹을 탐색한다: HTML 구조화가 중요한 이유

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이라는 렌즈를 통해 들여다보면, 이 둘은 놀랍도록 비슷한 원리로 작동합니다.

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

[팁] 스크린 리더를 사용해 웹 브라우저 제대로 사용하기: 툴바, 탭바, 페이지의 효과적인 탐색 방법

I. 들어가는 말


스크린 리더를 사용하는 시각장애인이라면 웹을 탐색하다가 길을 잃고 끝없이 한 곳을 맴돈 경험을 누구나 한번은 했을 것이다. 마치 자동차 바퀴가 진흙탕에 빠져서 헛도는 것처럼 아무리 탭키를 눌러도 포커스가 해당 영역을 벗어나지 못하는 것이다. 탭키는 웹을 탐색할 때 없어서는 안 되는 흰지팡이와도 같은 키이지만, 탭키만으로는 웹을 효과적으로 탐색할 수 없다.

웹을 탐색하게 해주는 인터페이스가 브라우저이다. 어떤 브라우저를 사용하느냐에 따라 웹에 대한 접근성도 달라지고 생산성에도 영향을 준다. 브라우저 시장은 2012년에 Internet Explorer가 시장 점유율에서 Chrome에 처음으로 추월당하면서 Microsoft의 전성시대가 막을 내렸고 그 후엔 줄곧 속도, 안정성, 단순성 및 확장성을 앞세운 Google의 Chrome이 독점적 지위를 구가했다. 하지만 브라우저 시장이 완벽한 독점 체제인 적은 한 번도 없었다. Apple 제품의 인기에 따라 Safari의 점유율도 늘어났으며 Firefox와 Opera도 꾸준히 사용자의 요구에 맞게 발전해왔다.

각각의 브라우저는 사용자에게 저마다 다른 웹에서의 UX를 제공한다. 그런데 많은 스크린 리더 사용자가 이러한 브라우저의 기능과 장점을 충분히 누리지 못하는 것은 안타까운 일이다. 예를 들어, Edge는 놀랄 만한 퀄리티의 소리내어 읽기 기능과 몰입형 리더 기능을 기본(built-in)으로 제공한다. 어느 페이지에서나 컨트롤 + 쉬프트 + U를 누르면 소리내어 읽기가 실행되고 F9키를 누르면 몰입형 리더가 실행된다. 이는 Edge가 스크린 리더 사용자 및 읽기에 어려움을 겪는 사용자에게 다른 브라우저보다 더 나은 웹에서의 경험을 제공할 수 있다는 의미이다. 이러한 관점에서 볼 때 브라우저의 특장점을 이해하고 자신의 요구에 맞게 사용하는 것은 스크린 리더 사용자가 스스로 정보 접근을 향상시키는 강력한 방법이 될 수 있다.

아래는 PC에서 스크린 리더를 사용해 브라우저를 탐색하는 간단하지만 매우 효과적인 방법이다. 단, 웹 페이지 내에서 탐색하는 방법은 이 글에서는 설명하지 않는다. 스크린 리더를 사용하여 페이지를 탐색하는 방법은 매우 다양하고 이 또한 매우 유익한 주제이지만, 이 글의 초점은 페이지 내 탐색이 아니다. 이 글에서는 브라우저를 전반적으로 탐색하는 방법만을 다룬다. 이를 위해서는 먼저 브라우저의 시각적 구성을 이해할 필요가 있다.


II. 브라우저의 시각적 구성


1. 브라우저 화면은 크게 상단에 있는 툴바와 그 밑에 경계선 역할을 하는 탭바, 그 하단에 넓게 펼쳐진 페이지로 나뉜다. 수직으로 볼 때 위에서부터 툴바, 그 밑에 탭바, 그 밑에 페이지. 이 세 가지 영역을 기억하면 좋다. 다시 말하지만 우리가 시선을 움직이는 방향은 수직이다.

2. 툴바(Toolbar). 브라우저 화면의 최상단을 점령한 이 툴바 영역에는 주소창 및 검색창, 메뉴, 각종 버튼이 위치한다. Chrome을 예로 들면, 사용자가 설치한 각종 확장 프로그램이 이 툴바 영역에 여러 가지 아이콘으로 표시된다. 그 외에도 기본적으로 뒤로 버튼, 새로고침 버튼, 메뉴 버튼 등이 여기에 있다.

툴바에서 가장 많이 쓰이는 건 뭐니 뭐니 해도 주소창이다. 주소창은 워낙 많이 쓰여서 핫키가 있다. 브라우저 어디에 있든지 간에 알트 + D를 누르면 포커스가 툴바의 주소창으로 이동한다. 또한 매우 자주 쓰이는 버튼인 메뉴 버튼(주로 점 세개 아이콘으로 표현)도 알트키를 눌러서 접근할 수 있다. 툴바는 웹 브라우저의 정체성과 같은 곳으로 브라우저마다 서로 조금씩 다른 기능과 레이아웃을 가지고 있다.

3. 탭바(Tab bar). 툴바 영역과 페이지 영역 사이에 경계선처럼 탭바가 있다. 비무장지대(DMZ)라고 보면 된다. 여기에는 현재 열려 있는 페이지탭들이 좌우로 나열해 있다. 탭을 새로 만들 수도 있고 열린 페이지탭을 닫을 수도 있고 보고 싶은 페이지탭을 선택할 수도 있다. 브라우저에서 어디에 있든 간에 컨트롤 + 탭키나 컨트롤 + 쉬프트 + 탭키를 누르면 이전 탭 또는 다음 탭으로 이동하는데 그렇게 일일이 직접 이동하지 않더라도 현재 브라우저에 어떤 페이지탭들이 열려 있는지 확인하고 싶으면 이 비무장지대를 방문하면 된다.

4. 페이지(Page). 탭바 밑에 넓게 펼쳐져 있는 영역이 우리의 스크린 리더 포커스가 주로 머무는 페이지 영역이다. 이 영역을 콘텐츠 영역이라고도 부르고 문서라고도 부른다. 웹을 '정보의 바다'라고 하는데 맞다, 여기가 바로 그 바닷물을 담는 곳이다. 여기는 텍스트나, 링크, 미디어 등 웹상에 있는 모든 것이 위치한다. 유튜브 영상, 구글 검색 결과, 페이스북 게시물, 웹툰 만화, 인터넷 기사, 공공기관의 홈페이지 등 웹 페이지의 종류와 목적에 따라 이 공간에는 너무나 다양한 것들이 올 수 있다.


III. 센스리더 Tip


대한민국에서 가장 대표적으로 사용하는 스크린 리더는 (주>엑스비전테크놀로지가 개발한 센스리더이다. 이 글에선 센스리더 기준으로 설명한다. 운영체제는 윈도우 10이다.


5. 수직으로 탐색하고 싶을 땐 F6키를 사용하라. 위에서 설명한 바와 같이 브라우저 화면은 상단부터 툴바, 탭바, 페이지, 이렇게 세 영역으로 구분할 수 있다. 이 세 영역 간에 수직으로 이동하는 단축키가 프레임 간 이동키인 F6키이다. 어느 페이지에 있든 F6키를 누르면 툴바, 탭바, 페이지를 순환할 수 있다. 우리의 포커스가 어느 한 영역에 갇혀버린 상황에서도 F6키만 누르면 그 영역에서 탈출해서 다른 영역으로 넘나들 수 있다. 남한에서 비무장지대로, 비무장지대에서 북한으로, 북한에서 다시 남한으로 언제든 이동할 수 있는 자유시민이 된 듯한 쾌감을 느낄 수 있다.

6. 수평으로 이동하고 싶을 땐 좌우 방향키를 사용하라. 특히 툴바와 탭바 내에서 유용한 탐색 방법이다. 좌우 방향키를 사용하면 해당 영역을 벗어나지 않고 같은 영역에서만 계속 탐색할 수 있다. 예를 들어, 탭바에서 현재 어떤 페이지탭들이 열려 있는지 보고 싶으면 좌우 방향키를 누르면 열려 있는 탭을 모두 확인할 수 있다. 한 바퀴를 돌고 나면 다시 포커스가 처음 시작한 탭으로 돌아온다. 무한 순환이 가능한데 탭키를 누르면서 페이지를 위에서부터 아래로 무한 순환하는 것보단 훨씬 길을 잃을 가능성이 작다. 만약 여기서 탭키를 누르면 다른 영역으로 튕겨 나가기도 한다.

단, 좌우 방향키로 탐색하다가 탭키를 꼭 써야 하는 경우가 딱 하나 있다. 바로 툴바에서 주소창을 만났을 때이다. 주소창에 포커스가 위치하는 순간 센스리더가 편집모드로 들어가기 때문에 다시 나오려면 탭키를 눌러야만 한다. 그 외에는 툴바 내에서도 좌우 방향키로 툴바 영역을 벗어나지 않고 버튼과 메뉴 등을 탐색할 수 있다.

7. 기타 영역으로 이동할 때도 F6키를 사용하라. Chrome에서 측면 패널, Edge에서 사이드바 등 브라우저가 제공하는 별도의 프레임에 접근할 때도 F6키를 사용하면 된다. 단, 이런 부가적 프레임 안에서는 좌우 방향키가 아닌 탭키로 이동한다.


IV. 나오는 말


내가 브라우저에 관심을 갖게 된 계기는 많은 사람이 그랬듯 Chrome의 등장이었다. 그때까지 웹 브라우저는 Internet Explorer (IE)밖에 없는 줄 알았고, 솔직히 말하면 Chrome 등장 훨씬 이후에도 많은 한국의 공공기관과 금융기관은 여전히 IE를 업무용 기본 브라우저로 사용했다. 그러나 인터넷 사용자들은 점점 더 빠르고 쉬운 브라우저를 찾게 되었고 한국에서도 2016년 정도가 되면 Chrome이 가장 우세한 브라우저로 등극하게 된다. 참고로 스크린 리더 사용자의 경우는 비사용자보다 새로운 브라우저로의 적응이 훨씬 느렸다. 국산 스크린 리더와 Chrome의 호환성 문제가 일부 있었기 때문이다. 하지만 결국은 국내 스크린 리더 제조사도 Chrome으로의 전환을 더 이상 늦출 수는 없었고 2020년이 되면 Chrome과의 호환성 문제도 대부분 해결된다.

지난 10년 동안 Chrome은 모든 인터넷 사용자의 웹 경험을 완전히 바꿔놓았다. 그런데 2023년이 되자 다시 한 번 브라우저 시장에 의미 있는 변화가 찾아온다. 2월, Microsoft가 OpenAI와 합작하여 자체 검색엔진인 Bing에 인공지능 부조종사를 탑재하면서 자체 브라우저인 Edge와 연동시켜버린 것이다. 일명 Bing AI (후에 ‘코파일럿’으로 명칭이 확정되었다)라고 불리는 인공지능 부조종사는 전통적인 키워드 검색 대신 대화형 검색을 가능하게 한 기술로 OpenAI의 챗GPT(정확히 OpenAI에서 출시한 어떤 버전을 사용했는지는 밝혀지지 않았으나 GPT-4가 정식 출시되기 전부터 이미 Bing은 GPT-4 버전을 사용하고 있었던 것으로 확인됨)를 검색엔진에 접목한 성공 사례이다. 이 시도 덕분에 Bing 사용자는 약 한 달 사이 30%가 늘어 매일 사용자 1억 명을 돌파했다고 한다.

엄밀히 말하면 인공지능 부조종사 기능(Chat mode)은 브라우저보다는 검색엔진에 더해진 기능인데 Microsoft가 이를 Edge에서만 돌아가게 함으로써 Bing AI를 경험하고 싶은 사용자는 어쩔 수 없이 브라우저로 Edge를 사용할 수밖에 없게 되었다. 그것을 계기로 나 또한 익숙한 Chrome을 떠나 Edge를 집중적으로 사용해 보게 되었다. Edge는 어차피 Chrome과 같은 Chromium 기반의 브라우저이므로 Chrome 사용자가 적응하기에는 큰 어려움이 없다. 다만 스크린 리더 사용자의 경우 아주 작은 차이에도 큰 허들을 느낄 수 있기 때문에 나 또한 주저되는 것이 사실이었다.

하지만 약 2주일 간 집중적으로 사용해 본 결과 Edge를 사용하는 데는 큰 어려움이 없었으며 소리내어 읽기, 몰입형 리더 등 의외로 Edge만의 빛나는 기능을 발견하기도 했다. 그런 의미에서 이 글을 통해 국내 스크린 리더 사용자들도 새로운 브라우저에 대한 막연한 두려움과 의심을 불식시킬 수 있기를 바란다. 물론 Chromium 기반 브라우저들끼리도 서로 작은 차이점이 있겠지만 기본적으로 브라우저가 작동하는 방식을 이해하고 나면 작은 어려움이 큰 허들로 느껴지지 않을 것이다. 그 경험을 통해 전 세계의 정보를 더욱 편리하게 연결하고자 노력하는 브라우저들의 혁신 경쟁을 느긋한 마음으로 지켜보면서 그 과실을 마음껏 누릴 수 있기를 바란다.

정보는 그 정보의 위치를 정확히 아는 사람들만 접근할 수 있으면 안 된다. 때로는 서점이나 도서관을 거닐다가 마음에 쏙 드는 책을 우연히 발견하듯 자신에게 맞는 브라우저를 선택하면 마음에 쏙 드는 웹 페이지를 발견할 가능성도 더 커질 것이다.