시각장애인 실무자도 만족하는 뛰어난 웹접근성, StreamDocs Vu!로 구현한 사례와 함께 소개해드려요🫡

안녕하세요, 이파피루스입니다 :) 
여러분은 '웹접근성'이라는 말 들어보신적 있으신가요?
요즘 IT업계는 '웹접근성'준수가 큰 이슈입니다.
장애인차별금지법에서 누구나 차등 없이 인터넷에서 제공되는 정보에 접근할 수 있어야 함을 명시함에 따라 이 웹접근성을 준수하여 사이트를 제작하고, 정보를 배포하는 것이 더욱 더 중요해졌습니다. 

---

 

'웹접근성' 이란? 

웹접근성(Web Accessibility)은 웹을 사용하는 누구나 장애 없이 웹사이트를 이용할 수 있도록 웹을 설계하는 것을 말하는데요, 정보 취약계층의 디지털 정보 격차를 줄이기 위한 노력이라고 볼 수 있습니다 😊
웹접근성을 준수한 사례로는 고령자를 배려한 큰글씨, 시각장애인을 위한 *TTS(Text To Speach)도입 등이 있습니다. 

*TTS란, 웹/앱에서 스크린을 눈으로 보는 대신 내용을 읽어주는(Text To Speach) 음성지원 기능인데요,
TTS가 잘 작동하려면, 내용을 잘 읽어줄 수 있도록 사이트를 설계하고, 그림이나 사진같은 이미지 컨텐츠에는 보이지 않는 주석을 달아주는 방식 등 특별한 조치가 필요합니다.

이것은 단순히 홈페이지에만 국한되는 것이 아니라 홈페이지에서 배포하는 정보와 컨텐츠에도 적용이 되어야 하는데요,
예를 들어 이파피루스 홈페이지에서 중요한 공지사항을 정리해 게시판에 첨부파일로 게시한다면, 이 첨부파일까지도 웹접근성을 고려하여 모든 사용자가 정보에 접근할 수 있도록 충분한 지원을 해야합니다. 

여기서 이파피루스의 홈페이지 첨부파일 바로보기 솔루션 StreamDocs Vu!가 활약하게 됩니다🫡🫡
첨부파일을 다운로드 받을 필요 없이 웹에서 바로보기가 가능하고, 뷰어의 TTS기능 구현이 아주아주 우수하기 때문이죠!
왜? 어떻게? TTS구현이 우수하다는 건 무슨 뜻일까? 궁금하시죠, 아래에서 계속됩니다 :) 

 

웹접근성에 최적화된 통합뷰어 StreamDocs Vu!

지금까지 웹접근성에 대해 설명 드렸는데요, 왜 이게 이렇게 중요한지..! 충분히 이해하셨을거에요.

이제부터는 이파피루스의 통합뷰어 StreamDocs Vu!가 어떻게 웹접근성을 개선하는데 도움이 되는지, 개발 단계에서부터 들인 노력과 실제 사용자들의 목소리, 모르고 계셨을 비하인드 스토리까지 소개를 드리려고 합니다 😉

이 포스팅을 다 보시면, 왜 StreamDocs Vu!가 웹접근성면에서도 최적의 통합뷰어인지 고개를 끄덕이게 되실거에요.

 

---

StreamDocs Vu!를 개발하며

StreamDocs Vu!는 단순한 문서 뷰어가 아닙니다. 디지털 정보에서 그 누구도 소외되지 않도록,
모두를 위한 뷰어를 목표로 개발되었습니다.

특히, 시각장애인과 색약 사용자 등 다양한 사용자의 니즈를 반영하여 웹 접근성을 강화하는 데 많은 노력을 기울였는데요. StreamDocs Vu!는 초기 개발 단계에서부터 웹접근성 표준을 준수해 만들어졌고,
실사용자의 피드백과 TTS 개발 업체와의 직접협력을 통해 끊임 없이 발전하면서,
누구나 손쉽게 정보에 접근할 수 있도록 높은 수준의 웹접근성을 달성한 통합뷰어입니다. 

 

• TTS 연동에 가장 적합한 통합뷰어

StreamDocs Vu!는 각종 스크린리더(TTS 프로그램)와 연동이 잘 될 수 있도록 제작되었습니다.
뷰어가 스크린리더와 잘 연동되기 위해서 가장 중요한 것은, 눈으로 읽는 것과 동일하게 문서의 내용을 '들을' 수 있도록 문서를 잘 구조화하는 것입니다. 

위의 예시처럼, 눈으로 볼때는 뷰어의 UI요소(빨간박스)와 문서의 내용(초록박스)이 잘 구분되지만, 직접 보지 못하고 귀로 들어서 문서를 파악해야한다면 어떨까요?

UI요소와 문서의 내용이 혼합되지 않고 잘 배열되어있어야 사용자가 혼란스럽지 않게 TTS프로그램이 잘 읽을 수 있겠죠.

또, 위의 예시처럼 문서가 줄글로만 이루어지지 않고 내용에 따라 단이 분리되어있다면,
눈으로 보는 사용자는 당연히 문서의 레이아웃을 파악하고 순서에 맞춰 문서를 읽겠지만,
듣기만으로 문서를 파악해야하는 사용자의 입장에서는 어떻게 읽어주느냐에 따라 문서를 전혀 이해하지 못할수도 있습니다.

예를들어 아래와 같이 문서를 읽게된다면 말이죠. 

TTS가 글을 읽는 가장 보편적인 방식인 왼쪽에서 오른쪽으로 문서를 읽어버리면
듣는 사람의 입장에서는 이 페이지를 이해하기 매우 어려울겁니다.
이런 현상을 방지하기 위해 문서에 맞춰 내용을 잘 정리해 나타내주는 것이 중요합니다.

뷰어가 이 페이지를 보여줄때는 위의 방향이 아닌,

이런 방향으로 이루어졌다는 것을 파악하고, TTS가 순서대로 읽어나갈 수 있도록 구조화해주어야합니다.

StreamDocs Vu!는 개발 초기단계부터 이런 부분을 염두에 두고 제작을 시작했습니다.
하지만 이건 기본중의 기본! 이외에 어떤 특장점이 통합뷰어 StreamDocs Vu!의 웹접근성을 더욱 끌어올렸는지 아래에서 조금 더 자세히 설명합니다 😊

---

• 스크린 리더 프로그램과 기술 협업

문서를 읽어주는 TTS프로그램은 기본적으로 윈도우 나래이터와 모바일 앱 Talk Back 등이 있습니다.
뿐만 아니라 국내에선 공공기관에서 주로 사용하는 스크린리더인 '센스리더'가 있습니다.
기본적인 스크린리더 프로그램은 물론, 개발팀은 특히 StreamDocs Vu!와 센스리더와의 호환성에 집중했습니다. 
센스리더는 공공기관 사용자를 위한 스크린리더 프로그램으로, 공기관 업무를 처리하기 위해 꼭 호환이 보장되어야 하는 프로그램이었기 때문이죠.
하지만, 이상하게도 다른 앱과는 잘 연동이 되던 뷰어도 종종 이 센스리더에서는 TTS기능이 잘 작동하지 않는 현상이 자주 발생했습니다.

이런 문제를 해결하기 위해 저희 개발팀에서는 '센스리더'개발팀과 직접 소통하고 협력해 소프트웨어 업데이트를 진행했습니다.
현재는 초기 연동 문제를 모두 해결하고 최적화를 완료하였습니다.

 

• 색약 및 저시력 사용자 지원

UI 요소를 WCAG(Web Content Accessibility Guidelines)의 명도 대비 기준(4.5:1)을 충족하거나 초과하도록 설계해 명도 대비를 최적화했습니다. 저시력 사용자나 색약 사용자의 경우, 인식하지 못하는 색상이 있을 땐 명도차이에 의존해 색상을 구분하게됩니다. 그래서 명도대비가 확실하지 않을 경우 전혀 다른색상이라도 매우 헷갈릴 수 있습니다.

채도의 차이는 크지만 명도의 차이가 크지 않은 색상의 예시입니다.
왼쪽의 주황/회색의 대비는 매우 극명해보이지만, 동일한 색상칩을 명도로만 구분하게된다면 오른쪽처럼 거의 차이가 없이 나타납니다. 
만약 특정 색상을 구분하기 어렵거나, 채도를 잘 인식할 수 없는 저시력자나 색맹 사용자가 위처럼 명도마저 비슷한 색상으로 이루어진 메뉴나 버튼을 사용해야 한다면... 구분이 어렵겠죠.
이런 문제를 해결하기 위해 뷰어를 제작할때 모든 UI, 특히 메뉴와 버튼의 색상 배치에서 명도의 차이를 극명하게 주어 구분이 쉽도록 제작했습니다. 예를 들어, StreamDocs, StreamDocs Vu!의 메뉴에는 키컬러인 오렌지색과 회색을 사용했었는데요. 웹접근성을 고려하여 기존 컬러 대신 명도가 더 선명하게 대비되는 색상을 사용하여 가시성을 높였습니다.

---

 

StreamDocs Vu!를 실제로 서비스하며 개선한 웹접근성 요소

StreamDocs Vu!는 지금도 솔루션을 사용하는 실제 시각장애인 이용자들의 의견을 바탕으로 업그레이드 되어가는 중입니다🫡
아래는 사용자들의 의견에 따라 개발부에서 개선 작업한 내용인데요, 개발자의 입장에서 미처 생각하지 못했던 부분도 실사용자의 의견을 적극 수용하여 모두가 쉽고 편하게 정보를 얻고 사용할 수 있도록 나아가고 있습니다. 

1. 텍스트 접근 방식 개선
문서를 스크린 리더가 읽을 때, 페이지 전체를 하나의 요소로 인식하는 문제가 있었습니다. 방대한 텍스트를 한 번에 읽으려다 보니 사용자에게 혼란을 주거나 중간에 내용을 놓치는 경우가 발생했습니다.

해결 방안: 문장을 줄 단위로 접근할 수 있도록 텍스트 구성을 세분화했습니다.
사용자 설정에 따라 한 줄씩, 페이지 전체를 한번에 읽을 수 있는 방식을 선택할 수 있도록 지원했습니다.

2. 내비게이션 접근성 강화
기존 한 페이지 보기 모드로 전환하면 스크린 리더가 내비게이터를 읽지 못해 페이지 이동이 불가능했습니다.

해결 방안:플로팅 내비게이션 버튼을 스크린 리더에서 감지할 수 있도록 UI 속성을 수정했습니다.
모든 페이지 전환 기능을 키보드와 스크린 리더로 사용할 수 있도록 최적화했습니다.


3. 텍스트 없는 페이지 처리
특별한 내용이 없는 이미지 페이지의 경우 스크린 리더가 ‘띄어쓰기’로만 읽는 문제가 있었습니다.
해결 방안: 이미지에 텍스트가 없을 경우, 스크린 리더가 **‘내용 없음’**이라고 안내하도록 추가 로직을 적용했습니다.
사용자가 페이지가 비어있음을 명확히 인지할 수 있도록 했습니다.

4. 워터마크 정규 표현식 처리
스크린 리더가 문서의 배경에 삽입된 워터마크의 텍스트까지 본문으로 혼동해 읽는 문제가 있었습니다.
이를 정규표현식을 활용해 스크린 리더가 워터마크를 무시하도록 수정했습니다.

 

---

StreamDocs Vu!는 모든 사용자가 차별 없이 문서를 읽고 이해할 수 있도록 설계되었습니다.
단순히 웹 접근성 표준규격을 맞추는데서 끝나는 것이 아닌, 실사용자의 피드백을 바탕으로 모두의 정보접근성을 개선하기 위해 노력하겠습니다🫡

StreamDocs Vu!가 궁금하신가요? 윈도우/모바일 스크린리더를 실행하신 후 아래 체험하기에서 직접 확인해보세요
👉👉체험하러 가기

ePapyrus Experience Center

 

감사합니다 :)