본문으로 건너뛰기

IWCAG 1.0 제대로 알기 2: 대체 텍스트의 사용

Posted in IT/웹

이 글은 IWCAG 1.0(이하 지침)의 이해를 돕기 위한 연재글 중 두번째 글입니다.

여인의 향기

얼마 전 여인의 향기(Scent of a Woman)라는 영화를 보게 됐다. 탱고 장면이 유명하다는 것만 알았지 내용도 전혀 모른채 보기 시작했다. 하지만 영화가 끝난 후에는 참 많은 생각을 하게 되었다. 웹 접근성을 공부하기 전에는 보이지 않았던 점들이 많이 눈에 띈 것도 그렇고.

영화 줄거리를 간단하게 요약하자면, 군인 시절에 맹인이 되어버린 프랭크(알 파치노)와 아르바이트로 며칠간 그를 돕게된 찰리(크리스 오도넬)가 만나서 서로에게 의지가 되어준다는 이야기이다. 영화의 전반부가 시각 장애인이 살아가는 방식, 그 속에서 느껴지는 고통을 보여준다면 종막에 이르러서는 바른 시각을 가진 한 인간의 면모를 잘 보여준다.

대체 텍스트 이야기를 하겠다고 글을 시작해두고 영화 이야기를 이렇게 풀어놓는데는 나름 이유가 있다. 지침을 두고 어떻게 대처해야 하는가에 대해서는 많은 질문이 나오지만 왜 그래야 하는가에 대한 질문은 사실 많지 않다. 이는 달리 말하면 장애에 대한 이해를 요구하는 일임에도 불구하고 그런 시도조차 쉽게 이루어지지 않는다는 뜻이기도 하다.

찰리에게 화내는 프랭크
장애를 가진 사람 역시 스스로 원하지 않는 도움은 받지 않으려 한다. 시혜한다는 생각은 버리자.

다시 영화 이야기로 잠시 돌아가보자. 내가 처음 충격을 받았던 장면은 프랭크가 찰리에게 화를 내던 때였다. 화를 낸 이유가 재밌는데, 공항 앞에서 찰리가 프랭크를 부축하려 하자 프랭크는 ‘너 장님이야? 그런데 내 팔을 네가 왜 잡아, 내가 널 잡아야지!’라고 말한다.1

많은 비장애인들이 장애인에 대해 많은 오해를 안고 살아간다. 어떤 배려가 도움이 될 수 있는지를 아는 것도 중요하겠지만 정말 그들에게 필요한 일이 무엇인지를 알기 위해서는 그들이 어떻게 살아가는지를 이해할 필요가 있지 않을까.

대체 텍스트

웹 접근성 관련 교육을 나가거나 하면 흔히 이야기하는 내용 중 하나가 ‘대체 텍스트만 제대로 넣어도 웹 접근성 제고 작업의 70%는 한 것이다’라는 말이다. 이런 이야기를 하는 이유는 웹 사이트에서 텍스트를 제외하고 가장 빈번하게 사용되는 것이 이미지이기 때문이다. 일반적으로 사이트에서 사용하는 이미지는 페이지 개수의 10배수 이상, 아니 페이지별로 다루는 콘텐츠가 많다면 기하급수적으로 늘어난다. 물론 이것은 사이트를 운영하는 측에서 원하는 디자인에 따라 달라지는 거겠지만 인터넷 회선이 빨라지고 브라우저의 멀티미디어 지원이 확대되면서 이미지의 사용은 아주 보편적인 일이기도 하다. 다만, 이미지를 이용하는 것만큼 대체 텍스트를 잘 제공하는 것이 시각 장애인을 위한 제작자의 최소한의 에티켓이라 할 수 있겠다.

그렇다면 대체 텍스트를 어떻게 제공하는 것이 도움이 될 것인가를 살펴보자. 이에 관한 항목은 지침의 제일 처음에 나온다.

항목 1.1 텍스트 아닌 콘텐츠(Non-text Contents)의 인식

텍스트 아닌 콘텐츠 중에서글로 표현될 수 있는 모든 콘텐츠는 해당 콘텐츠가 가지는 의미나 기능을 동일하게 갖추고 있는 텍스트로도 표시되어야 한다.

이미지에 alt(alternate text)라는 속성을 이용해 이미지와 동일한 내용을 텍스트로 전달할 수 있도록 작성하라는 뜻2이지만, 실제로 사용하는 이미지의 종류가 워낙 많다보니 아무래도 좀 막연한 구석이 있다.

사용자를 배려하는 일

그래픽 브라우저에서 본 W3C 사이트
이용 브라우저와 모양새는 다르지만 내용은 같다.
텍스트 브라우저에서 본 W3C 사이트

대체 텍스트는 단순히 스크린리더 사용자에게 이미지의 내용을 알려주기 위해서만 존재하는 것은 아니다. 저사양 PC나 저속회선을 이용하는 경우, 또 텍스트 브라우저 사용자 등 이미지가 로딩되기 어렵거나 이미지를 출력하지 않는 상황에도 대응할 수 있도록 존재하는 속성이라 할 수 있다. 어떤 조건에서도 콘텐츠를 사용자에게 전달하는 것, 그것이 대체 텍스트나 대체 콘텐츠를 제공하는 가장 근본적인 이유라 하겠다.

따라서 이미지와 대체 텍스트가 전달하고자 하는 바는 같아야 한다. 텍스트를 이미지로 작성한 경우에는 물론이거니와, 그래프나 그림(사진)이라도 설명 가능한 이미지는 그 설명이 대체 텍스트로 제공되는 것이 바람직하다.

스크린을 이용한다면 정보는 평면(2차원)적으로 배열되고 이를 시각적으로 인식하는 사람들은 배치 면적에 따라 중요도의 차이를 알 수 있다. 그러나 음성이나 브레일 장치3로 출력되는 내용은 시각에 의한 인식과는 달리 1차원에 가깝다. 온 동네가 정전인데 배터리로 작동하는 라디오만 한 대 있다고 생각해보라. 음성 정보가 연속적으로 나열되기 때문에 언제 뭐가 나올지 알 수가 없다. 다행히도 웹 사이트는 사용자 입력을 통한 상호 작용이 가능하며, 스크린리더는 가상커서모드4를 지원한다. 그러니 이미지를 문맥상에 사용할 경우에는 대체 텍스트 제공에 더욱 주의하는 것이 좋겠다.

이미지를 잘 만드는 일부터

대체 텍스트를 제대로 제공하는 것도 중요하지만 그 전에 고민해야할 점이 있다면 이미지를 만들 때부터 신경써야 한다는 것이다. 텍스트로 표현 가능한 내용을 이미지로 표현하는 것은 그 형상을 통해 전달하고 싶은 것이 있거나, 이미지를 이용했을 때 훨씬 더 쉽게 전달할 수 있는 내용5이 있을 경우라고 볼 수 있다.

그러나 많은 사이트에서는 이미지를 사용하는 본래의 의도를 망각하고 습관적으로 이미지를 사용하고 있는 것이 사실이다. 그 이유는 이미지를 활용하여 사이트의 형태적 아름다움을 추구하기 때문이 아닐까 한다. 물론, 형태적 아름다움을 추구하는 것이 나쁜 것은 아니다. 다만, 단순히 예쁘게 만들기 위하여 내용을 인식하기 어렵게한다면 그것은 본말이 전도된 경우가 아니라 할 수 없다.

콘텐츠가 아니라 장식으로 사용되는 이미지는 alt=””와 같이 빈 대체 텍스트를 제공하는 방법도 있겠지만, 웹 표준 이야기에서 누누히 다루듯이 가급적이면 CSS 등을 이용해서 배경 처리하는 것이 좋은 방법이 될 수 있다.

대체 텍스트가 너무 길다면

지침은 alt로 설명하기에는 너무 많은 내용이 제공되어야 한다면 img 태그에 longdesc(long description)라는 속성을 이용하여 대체 콘텐츠를 포함한 페이지 URI를 참조하도록 하는 것을 권장하고 있다.

longdesc 속성에 대한 논란6이 있는 것은 사실이나 지난해 12월 발표된 WCAG 2.0에서는 여전히 longdesc 사용을 다루고 있다. HTML이나 XHTML의 다음 표준안이 제정되기까지 걸리는 시간, 그리고 브라우저에서 새 표준안을 수용하는 시간, 새로운 브라우저를 사용자들이 보편적으로 사용하게되는 시간까지 고려한다면 longdesc는 쉽게 버릴 수 있는 속성이 아닌듯 하다. 정보 제공자의 입장에서 longdesc를 이용하여 대체 콘텐츠를 제공하는 것이 불편하다면 콘텐츠를 좀 더 작은 단위로 쪼개어 표시할 수 있도록 설계하는 것은 어떨까 한다.

longdesc를 사용할 때 흔히 하는 실수라면 URI 값을 제공하지만 실제로는 해당 주소가 가리키는 페이지가 없다거나, longdesc만 제공하고 alt를 제공하지 않는 경우 등이 있다. 기왕 제공하는 대체 페이지라면 꼼꼼하게 작업해서 필요한 사람들이 쓸 수 있도록 하는 것이 좋지 않겠는가.

프랭크가 아니라 찰리

프랭크에게 플로어의 배치를 설명하는 찰리
플로어 바깥 쪽엔 밴드가 있고, 테이블이 있어요. 플로어는 20-30피트 쯤 되고 지금 긴 쪽에 서 계시는 거에요.

여인의 향기는 뭐니뭐니해도 탱고 장면으로 유명한 영화다. 사람들은 앞을 볼 수 없지만 그 체취와 분위기로 상대를 파악하는, 여인에게 당당히 탱고를 신청하는, 또 발을 밟거나 밟히거나 꿋꿋히 춤을 춰내는 프랭크를 기억한다. 하지만, 웹 사이트를 제작하는 우리가 주목해야 할 점은 탱고를 출 줄 아는 맹인 프랭크가 아니라, 춤을 시작하기 전에 플로어의 배치를 설명해주는 찰리의 배려가 아닐까 한다.

또한 우리가 프랭크에 대해 기억해야 할 것은 찰리를 누구보다도 열심히 변호한, 학생들에게 무엇을 가르쳐야 하는지에 대해 열변을 토했던 한 ‘인간’이라는 점일 것이다. 시력을 상실했다는 사실이 지적 수준의 저하를 의미하는 것은 아니다. 그는 단순히 앞을 볼 수 없을 뿐이지 그 외의 능력은 똑같은, 아니 외려 더 뛰어날지도 모르는, 나와 같은 인간임을 잊지 말아야 할 것이다.

프랭크의 명연설
찰리는 자신의 미래를 사기 위해서 누구도 팔지 않았소!

지침에 대한 설명을 한다고 시작한 글이 영화 감상처럼 변한 감이 다소 있지만 잔소리가 아니라 이해를 돕기위해 든 예라고 생각해주시면 좋겠다 (이 연재를 시작한 후에 보게된 영화라 엔딩 크레딧이 올라갈 때가 되니 어느새 장애를 소재로 다룬 영화7를 목록으로 작성하고 있더라는…). 꼭 장애인이 주인공이여서가 아니라 보편적 감동을 주는 영화기에 아직 안보신 분이 계시다면 꼭 한번 보시길 권하고 싶다.

참고

연재 목록


  1. 한국시각장애인연합회 사이트에서는 시각장애인을 만날  때의 에티켓에 대해 소개하고 있으므로 참고하시길 바란다. 나 역시 사전에 이런 정보를 몰랐다면, 이 순간을 프랭크의 성격을 드러내는 장면으로 여기고 대수롭지 않게 넘겼을지도 모르겠다. 
  2. 이미지에 alt 속성을 이용했을 때 IE6에서는 마우스를 가져가면 대체 텍스트의 내용을 툴팁으로 보여준다. 이것은 브라우저가 야기하는 문제이므로 title 속성 대신 사용해서는 안된다. W3C Schools의 alt 속성에 관한 내용을 살펴보면 IE의 반응 방식이 잘못되었다는 노트를 볼 수 있다. Internet Explorer displays the value of the alt attribute as a tooltip when mousing over the img element. This is NOT the correct behavior, according to the HTML specification. 
  3. 점자정보단말기(refreshable Braille display 혹은 Braille terminal. 일반적으로 점자는 인쇄되어 있거나 금속판에 새겨져 부착되어 있는 것으로 생각하기 쉬운데, 브레일 장치는 연속적으로 점자를 출력하는 기기다. 영화 이야기가 나온 김에 또 해보자면 로버트 레드포드 주연의 92년작 스니커즈(Sneakers)에도 시각 장애인인 주인공의 동료가 사용하는 장치로 등장한다. 최근에는 점자 컴퓨터로 출시되고 있다. CSS에서 지원하는 미디어 타입에는 음성(aural), 점자 인쇄(embossed), 브레일 장치(braille)가 구별되어 있다. 
  4. 가상커서모드란 스크린리더 사용자들이 웹 사이트를 이용할 때 보이지 않는 포인터를 키보드로 조작하여 글자 단위, 줄 단위로 정보를 읽을 수 있게 해주는 것이다. 
  5. 의사 표현이 어려운 장애인의 경우 심볼이나 그림을 이용하여 의사 전달을 하기도 한다. 이는 잘 만들어진 디자인 요소들이 얼마나 인식과 이해에 도움을 주는지 알 수 있는 사례라 하겠다. 
  6. WAI에서는 참고만 하라지만 longdesc 사용에 대해서 회의적인 입장도 있다. 확실히 사이트를 제작하고 관리하는 입장에서 본다면 longdesc의 사용은 상당히 번거로운 일이다. 이에 관해서는 longdesc 사용하시나요라는 CDK 게시물과 일몰님의 ALT 와 Title 속성의 바른 의미라는 글을 참조하시길 바란다. 다만, HTML 5는 아직 확정 권고안이 아니다
  7. 평소엔 잘 떠올릴 수 없지만 장애인을 소재로한 영화는 의외로 많다. 해외의 경우 레이(시각 장애), 레인맨(발달 장애), 포레스트 검프(지적 장애), 제8요일(다운증후군), 나의 왼발(뇌성마비), 아이엠 샘(지적 장애) 등이 있다. 한국 영화 중에도 오아시스(뇌성마비), 말아톤(발달 장애), 맨발의 기봉이(지적 장애), 대한이, 민국씨(지적 장애) 등이 있다. 
이 글은 IWCAG 1.0 제대로 알기(총 2편) 시리즈의 2번째 글입니다.

2 Comments

  1. 웹언어 공부중 들러서 잘 보고 갑니다~ 감사요~

    2015년 3월 22일
    |Reply
  2. 이슬빛
    이슬빛

    보고 또 봐도… 또 담에 봐도…계속 공감 가는 글입니다. 쵝오에요>ㅁ<!

    2009년 8월 14일
    |Reply

댓글 남기기