이 문서에서 Sitecues를 리뷰하는 것은 글꼴크기 조절, 혹은 확대기능이 제공되는 서비스에서 저시력 사용자에게 보다 나은 경험을 제공할 수 있는 방법을 찾아보기 위함이다.
Sitecues의 “도구모음 패널 확장”, “세밀한 배율조절”, “마우스포인터 확대”, “좌우스크롤”, “음성낭독” 등의 기능에서 모티브를 얻어 국내 웹서비스의 접근성이 조금이나마 더 개선되기를 기대한다.

 

A. Sitecues가 무엇일까?

Ai squrared 사에서 서비스하는 웹페이지 플러그인 서비스. 
Zoomtext 개발사로서 보유한 노하우를 바탕으로 저시력 사용자를 위한 확대기능과 음성낭독 기능을 제공한다.
웹페이지에 도구모음을 삽입하고 JavaScript library를 다운로드 받아 동작합니다. 

주요기능

  • 웹페이지 확대/축소 (슬라이드바로 조절)
  • 마우스포인터 확대/축소
  • 마우스를 이용한 가로스크롤
  • 텍스트 음성낭독
  • 설정내용 저장

URL : http://www.sitecues.com

 

B. Sitecues 기능의 특징


1. 도구모음에 마우스를 오버하면 영역이 확대되면서 조작이 쉬워진다.

기존 사이트의 확대 기능은 일반적인 크기/디자인의 버튼을 사용하기 때문에 저시력 사용자가 버튼의 위치를 찾기 어렵고, 클릭 등의 동작을 수행하기 수월하지 않았다.
하지만 Sitecues 서비스의 경우 도구모음 영역에 마우스포인터를 올리면 해당 도구모음의 크기가 확장되면서 확대 기능을 쉽게 인지하고 보다 쉽게 마우스로 도구모음을 조작하는 것이 가능하다.

* 기본화면에서 도구모음은 별다른 특징을 찾아볼 수 없다.
도구모음 기본

* 도구모음 영역에 마우스 포인터를 올리면 아래 이미지와 같이 도구모음 영역이 크게 확대되면서 인식이 용이하다.
도구모음 확대


2. 슬라이드바를 좌,우로 움직이면 확대배율이 조절되고, 세밀한 조절이 가능하다.

일반적으로 글꼴의 크기를 조절할 때는 확대/축소 버튼을 눌러서 단계적으로 크기를 조절한다. 이 경우 자신의 시력정도에 따라 적절한 크기를 정확히 선택하는 것이 쉽지 않다.
Sitecues의 서비스는 슬라이드바를 활용해서 단계별 조절이 아닌 세밀한 조절이 가능하다. 사용자가 자신의 시력에 따라 알맞은 크기로 조절하는 것이 가능하다. 

* 기존 미디어 다음의 글꼴 크기는 + / - 버튼을 눌러서 5단계로 조절된다.
미디어다음크기조절~

* sitecues 서비스의 확대기능은 슬라이드바를 이용해서 세밀한 조절이 가능하다.
도구모음 확대~


3. 배율에 따라 마우스포인터의 크기가 확대/축소 된다.

저시력 사용자가 컴퓨터를 이용할 때 어려워하는 부분중의 하나가 마우스 포인터의 위치를 인지하는 것이다. 마우스 포인터의 크기가 작고 배경색과 비슷한 경우가 많다보니 포인터의 위치를 찾지못해 컴퓨터 사용에 어려움을 겪는 일이 자주 발생한다. 웹사이트의 확대기능은 화면이 확대되더라도 마우스포인터의 크기는 확대되지 않기 때문이다.
Sitecues 서비스는 화면의 확대배율이 높아짐에 따라 마우스 포인터의 크기도 함께 크게 확장시킴으로서 저시력 사용자가 확대된 화면안에서 마우스포인터를 찾지 못해 헤매는 일을 방지하는데 도움을 준다. 

* 확대기능을 사용하지 않았을 때의 기본 마우스 포인터 크기
마우스포인터 기본~1

* 확대기능을 최대로 사용했을 때 확대된 마우스 포인터 크기
마우스포인터-확대~2


4. 웹페이지를 확대했을 때 생기는 가로스크롤 이슈를 마우스 포인터의 이동으로 해결

브라우저에서 제공하는 확대기능을 사용하면 가로 스크롤이 생기는데, 이때 스크롤바를 이용해서 화면 밖의 콘텐츠를 좌, 우로 이동하면서 탐색해야 하기 때문에 사용이 매우 불편하다. (상/하 스크롤은 마우스 휠 사용으로 불편하지 않음)
Sitecues의 서비스는 화면의 양쪽 끝에 좌/우 스크롤 영역을 지정하고 이 영역에 마우스가 진입하면 좌/우 스크롤 동작을 실행한다. 이 기능으로 좌/우 스크롤로 인한 불편을 크게 해소되었다. 

* 브라우저의 기본 확대기능 사용시 좌/우 스크롤바가 생겨서 화면을 탐색하는 것이 매우 불편하다.
브라우저확대기능가로스크롤~

* sitecues 서비스는 가로스크롤이 생기더라도 좌/우 끝 부분을 스크롤영역으로 지정해서 마우스 오버만으로 좌/우 화면이동이 가능하다.
마우스오버pan~


5. 음성낭독기능

저시력 사용자가 글자를 읽을 수는 있지만 장문의 글을 읽어야할 때 눈으로 읽는 것에 많은 부담을 느낀다. 이 때문에 저시력 사용자 중 일부는 화면낭독 프로그램을 함께 사용하기도 한다. 웹사이트에서 본문 영역을 음성으로 들을 수 있게 된다면 눈을 많이 사용하지 않아 피로도를 낮출 수 있기 때문에 저시력 사용자에게 도움이 될 수 있다.
음성낭독 기능을 켠 후 듣고자하는 텍스트에 마우스를 포인터를 올려놓고 스페이스바를 누르면 해당 텍스트에 대한 음성출력이 진행된다. 

* 음성 낭독을 원하는 영역에 마우스를 오버해서 박스표시가 되었을 때 스페이스바를 누른다. 
sppech~1

* 음성낭독이 동작하면서 아래 이미지와 같이 텍스트를 확대하여 부각시킨다. 
sppech~2

※ 한국어 미지원
※ 음성낭독기능은 텍스트 정보를 TTS 서버에 보낸 후 오디오파일을 전송받아 재생하는 형태로 구동된다. 이 때 모든 통신은 암호화되며 어떤 정보도 저장하지 않는다고 한다.


6. 기타

  • js는 텍스트,css 등을 모두 로딩한 후 마지막에 로딩해서 사이트의 로딩속도 이슈는 감쇠될 수 있다.
  • 쿠키에 도구모음을 사용한 기록을 저장해서 재방문시 동일 설정이 복원되어 이용할 수 있다.

in the Future

  • 2014년 2분기 터치기능 지원예정
  • 고대비 모드 지원 준비중
  • 향후 브라우저 추가기능이나 별도의 툴로 제공할 예정

지원 환경

확대기능과 음성낭독 기능은 html 문서만 지원한다.
flash는 전체를 한 번에 음성출력하는 것은 가능하나, pdf는 현재 지원하지 않는다. 

지원브라우저

  • internet Explorer 9 +
  • Chrome
  • Firefox

2014/08/27 01:22 2014/08/27 01:22
해빠 이 작성.

드디어 뉴 아이패드(64G/WIFI)를 구매했습니다.

5월 29일 밤 10시에 주문했는데 5월 31일 낮 1시에 도착하네요.
아이패드2 초기(2011년 3월)와는 다른 완전 빠른 DHL 배송!!

이미 아이패드2를 가지고 있어서 뉴아이패드 구입이 무척 망설여졌지만
제게는 남들과 조금 다른 뉴아이패드 구매 이유가 있습니다.

그것은 바로 카메라 화질!!

카메라의 화질에 주목하는 이유는 아이패드를 확대기 용도로 사용하기 위해서입니다.
아이패드와 확대기가 무슨 관계일까요?

아이패드를 확대기로~

아이폰/패드의 카메라를 이용해서 근거리/원거리를 가리지 않고 사물을 확대해서 볼 수 있습니다.
예로 들면 신용카드번호, 식당의 메뉴판, 지하철출구번호, 은행창구 대기번호 등을 확인하는데 매우 유용합니다.

카드번호 확대촬영 토스트 메뉴가격 확대촬영지하철 나가는 곳 출구번호 확대촬영 은행 창구 대기번호 확대촬용

예로 든 사진은 아이폰4로 촬영한건데 아이폰은 디지털 줌이기 때문에 최대로 확대하면 사물이 깨져서 보입니다. 해서 메뉴판 같이 글씨가 작은 사물은 40%정도만 확대하고 사진으로 촬영한 후 그 사진을 더 확대해서 글씨를 보기도 합니다.

아이폰 vs 아이패드 화면크기 비교

아이폰을 활용할 때 약간 아쉬운 점이 바로 액정의 크기입니다.
아무리 확대를 해도 같은 사진을 볼 때 4인치와 9인치의 크기 차이는 대충해도 2배니까요.

아이패드와 아이폰 액정크기 비교 촬영

애플 제품에 윈도우XP 로고라… 재미있죠? ㅎㅎ

그래서 사물이 원거리에 있거나 세미나, 강의실에서 PT 자료나 발표자의 몸짓을 볼 때 아이패드가 매우 유용하게 활용될 수 있습니다.

세미나 장소 수화통역사 확대 촬영

하지만 보시는 바와 같이 아이패드2의 90만 호소 카메라는 최대로 확대하면 이렇게 알아볼 수 없을만큼 화질이 떨어지는 문제가 발생합니다.

뉴아이패드 vs 아이패드2 카메라 줌 화질 비교

500만 화소 iSight 카메라를 장착한 뉴아이패드를 입양해서 사진 확대 시 화질차이를 간단하게 비교해봤습니다.

아이패드로 촬영하는 모습

약 1.7m 정도 떨어진 거리에 iPad 박스를 올려놓고 줌을 최대값까지 올린 후 촬영해봤습니다.
극한을 보기 위해 최대로 확대했을 뿐 평상시에는 최대로 확대하지는 않습니다.
실제 제가 사용하는 상태를 표현하기 위해서 촬영한 사진이 아닌 카메라로 보이는 장면을 캡쳐한 이미지 입니다.

아이패드2로 확대촬영
뉴아이패드로 확대촬영

간단히 결과만 놓고 봤을 때 아이패드2로 확대해서 보면 “iPad” 글자가 뭉개져서 알아보기 어렵지만 뉴아이패드는 글씨를 알아볼 수 있을 정도의 화질을 보여주고 있습니다.
주목할만한 점이 뉴아이패드는 이미지를 확대하더라도 별로 뭉개지지 않아 사진을 찍는다면 이보다 더 크게 확대해서 볼 수 있습니다. 현재는 초점이 글씨에 잘 안 맞은 상태로 캡쳐된 이미지라서 초점을 맞추면 더 나은 화질을 보여줄 수 있습니다. (확대한 상태로 초점 유지하면서 캡쳐하기가 생각보다 어려웠습니다.)

저시력용 보조기기 보다…

아이폰/패드를 확대기로 사용하는 경우 저시력 보조기기로 판매되는 제품들에 비해 몇 가지 장점이 있습니다.

1. 보조기기 구입비용 절감

– 별도로 고가의 휴대용 확대기를 구입하지 않아도 아이폰/패드만으로 충분히 확대기능을 사용할 수 있습니다.

2. 두 손가락 확대/축소

– 저시력용 휴대확대기는 버튼을 눌러서 배율 단계를 조절하는데 비해, 아이폰/패드는 두 손가락의 터치 액션으로 확대 배율을 조절해서 더 직관적입니다.

3. 자유로운 배율 조절

– 저시력용 휴대확대기는 3단계, 5단계 등으로 배율이 고정되어 있어서 현재 내 시력에 맞춰서 확대배율을 적절하게 조절하는 것이 불가능했지만, 아이폰/패드는 세밀한 배율조절이 가능합니다.

4. 사물의 거리와 초점

- 저시력용 휴대확대기는 대부분 문서 보는 용도로 만들어지기 때문에 근거리 확대만 가능합니다. 하지만 아이폰/패드는 근거리/원거리를 가리지 않고 모두 확대해서 볼 수 있습니다.
근거리/원거리 겸용 휴대확대기도 있습니다. 하지만 다이얼을 돌려서 수동으로 초점을 맞추는 방식이기 때문에 사용이 매우 까다로운 반면, 아이폰/패드는 기본적으로 자동초점이고 사물을 한번 터치하면 바로 그 사물에 맞춰서 초점이 조절되기 때문에 매우 편리합니다.

5. 휴대성

- 휴대확대기를 사용하게 되면 일반PMP 크기의 물품을 추가로 가방에 넣어 다니면서 미리 충전도 해야 하지만, 아이폰/패드의 카메라를 활용하면 일반적인 스마트폰 관리 외에 별다른 신경을 쓸 필요가 없어서 매우 편리합니다.

일단은…

아직 실제 원거리에서 사용해보지는 않았지만 최소 이정도 차이가 난다면 일단 만족합니다.
이제 카드청구서님을 맞이할 일만 남았네요 ㅎㅎ
나중에 외부에서 원거리 확대를 사용해보고 내용 추가해야겠죠? ^^

 

                                            내용추가 - 2012.06.05                                            

휴게소에서 뉴아이패드로 메뉴판 확대하기

휴게소에서 음식 주문할 때 종업원 뒤에 있는 메뉴판을 읽을 수가 없어서 뉴아아패드를 활용해봤습니다. 다만 아이패드2가 제 손을 떠난 터라 비교샷을 남기지 못해서 아쉽습니다.

휴게소 메뉴판 확대 안하고 찍은 사진

이 사진은 휴게소 메뉴판을 확대 없이 뉴아이패드로 찍었을 때 모습으로 지금 상태에서는 메뉴판의 글자가 너무 작아서 읽을 수가 없습니다. 아시겠지만 물론 제 시력 기준입니다. ㅎㅎ

메뉴판에서 한식 부분을 확대해서 촬영한 모습

뉴아이패드로 메뉴판에서 2줄만 확대 촬영한 모습으로 글자가 커져서 메뉴판의 음식명과 가격을 모두 알아볼 수 있습니다.

10m 이상의 거리는 아직 잘 모르겠지만 7,8 미터 정도 거리의 메뉴판을 알아보는 것까지는 일단 성공입니다.

여전히 뉴아이패드 만족!! ㅎㅎ

2012/06/06 00:30 2012/06/06 00:30
해빠 이 작성.

인터넷익스플로러8 에는 웹페이지를 확대해서 볼 수 있는 기능을 기본적으로 제공하고 있습니다.

이 기능은 익스플로러7 부터 지원하고 있는데요 익스플로러 8을 기준으로 설명드립니다.

익스플로러 창의 오른쪽 하단을 보면 상태표시줄에 아래와 같은 돋보기 아이콘과 배율이 나타납니다.

ie8magnify 

확대기능을 사용하는 방법 중 첫번째

돋보기 아이콘과 배율이 나타나는 빨간상자 부분을 클릭해보세요.

클릭해보면 100% –> 125% –> 150% –>100% 순으로 배율이 조절됩니다.

익스플로러8확대메뉴 

확대기능을 사용하는 방법 중 두번째

이 팝업메뉴를 불러내서 배유을 선택하는 방법입니다.

여기에서는 50% 75% 100% 125% 150% 200% 400% 를 선택할 수 있고 사용자지정도 가능합니다.

위 그림을 보면 키보드의 단축키도 지원하는 것을 알 수 있는데요

Ctrl + 키를 누르면 25% 단위로 확대되고
Ctrl - 키를 누르면 25% 단위로 축소됩니다.

확대기능을 사용하는 방법 중 세번째(마지막)

개인적으로는 위에서 언급한 방법들 보다 더 좋은 방법이라고 생각하는데요

왜냐하면 익스플로러 창에서 저 아이콘을 찾아서 클릭하는 자체가 저시력인에게는 어려운 작업일 수 있기 때문이죠.

사용하는 단축키는 Ctrl 키를 누른 상태에서 마우스 휠을 돌리는 것입니다.

이 방법을 활용하면 5%단위로 배율을 조절해서 훨씬 편하게 사용할 수 있습니다.

참고로 Ctrl 키와 마우스 휠의 사용은 익스플로러 뿐 아니라 리치에디터컨트롤을 사용하는 에디터에서도 사용이 가능합니다.
(리지 에디터 컨트롤 2.0이상에서 지원)


위 내용은 2009년 6월 26일 기준으로 작성되었습니다.

2009/06/26 13:41 2009/06/26 13:41
해빠 이 작성.