혹시 ‘접근성(Accessibility)’이라는 용어를 들어본 적이 있으신가요?

접근성이란 UI 디자인이나 시스템 공학, 건축 등 다양한 분야에서 되도록 많은 사용자가 신체적 특성이나 나이 등에 제약 받지 않고 불편함 없이 사용할 수 있는 것을 말합니다. 휠체어가 탑승할 수 있도록 만든 저상버스, 색약이나 색맹도 구분할 수 있도록 만든 게임 이펙트 같은 것들이 바로 접근성을 높인 예시죠.

G마켓은 그동안 스크린리더 사용자를 위한 ‘접근성 프로젝트’를 꾸준히 진행해 왔는데요. 특히 화면 속 글자를 읽는 것이 어려운 시각장애인을 위하여 스크린리더(Screen Reader)를 지원하는 웹/앱 환경을 제공하는 것은 물론, 스마일페이 간편결제 역시 스크린리더로 읽을 수 있도록 하는 접근성 개선 작업이 대표적이랍니다.

스크린리더란 텍스트를 TTS(Text to Speech)로 읽어주는 프로그램입니다. 무척 유용한 프로그램이지만 온라인 쇼핑을 할 때는 별로 도움이 되지 않는 경우가 많은데요. 온라인 쇼핑에서 소비자가 마주하는 제품 상세페이지는 대부분 이미지 파일로 되어있다 보니 스크린리더로 읽을 수가 없어 스크린리더 사용자의 접근성이 크게 낮아질 수밖에 없었습니다.

바로 이 문제를 해결하기 위하여 G마켓이 시작한 ‘접근성 대체텍스트 이슈 해결을 위한 OCR 적용’ 프로젝트!

어떤 프로젝트였는지, 또 어떻게 사용할 수 있는지 지금부터 함께 살펴볼까요?

​

G마켓은 시각장애인의 온라인 쇼핑 이용 접근성을 개선하기 위해 지금까지 많은 노력을 해왔는데요. 보통 제품 상세페이지는 이미지 파일로 만드는 경우가 많습니다. 그 이미지에 포함된 텍스트는 실제로는 텍스트가 아니라 이미지이기 때문에 스크린리더가 읽을 수 없죠. 이 문제 때문에 웹 에디터를 개선하여 판매자가 이미지에 대체 텍스트를 쉽게 삽입할 수 있도록 했지만, 현실적인 이유로 여전히 ‘대체 텍스트가 없는 이미지’가 많은 상황입니다.

그래서 ‘접근성 대체텍스트 이슈 해결을 위한 OCR 적용’ 프로젝트가 등장했는데요. G마켓 속 다양한 상품들의 상세 페이지 안의 이미지화된 텍스트도 스크린리더로 읽을 수 있도록 OCR 기능을 추가하였습니다. 상품 상세페이지는 물론 홈 메인배너, 기획전 등의 이미지로 된 텍스트도 스크린리더가 읽을 수 있답니다.

아직 100% 완벽하게 읽을 수는 없지만, 그래도 스크린리더를 사용하는 시각장애인들이 G마켓의 상품 상세정보를 귀로 들을 수 있게 된 것이니 정말 좋은 소식이죠?

​

그러면 G마켓 OCR 기능은 어떻게 사용할 수 있을까요?

① PC G마켓(www.gmarket.co.kr) 접속하기

② 상품을 선택하여 상세 페이지로 접속하기
상세 페이지에 접속하면 ‘본문 바로가기’와 ‘상품 상세 바로가기’ 빠른 링크가 제공되며 안내 음성이 나옵니다.

③ 다음 프레임으로 이동하는 키를 눌러 ‘상품 상세 바로가기’ 선택 (센스리더: f, NVDA 및 jAWS는 m)
이때 이미지 OCR 대체 텍스트 음성지원 받기 버튼으로 포커싱되며 안내 음성이 나옵니다.

④ 이미지 OCR 대체 텍스트 음성지원 받기 버튼을 누르기
OCR 작업이 시작된다는 안내 음성이 나오며 잠시 기다려야 합니다. 이미지 텍스트의 양에 따라 OCR 작업은 15초 이상 소요될 수 있습니다.

⑤ OCR 작업 완료 후 완료 확인 창의 확인 버튼을 누르기
OCR 작업이 완료되면 완료 확인 창과 안내 음성이 나옵니다. 확인 버튼을 누르면 OCR이 완료된 이미지를 읽을 수 있습니다.

⑥ 화살표를 이용해 상세 페이지를 읽기
이제 이미지로 된 상품 상세페이지를 스크린리더로 읽을 수 있습니다. OCR 인식률에 따라 이미지 속 글자와 실제 소리로 변환된 정보에 다소 차이가 발생할 수 있습니다.

상품 상세 이미지 설명 시연 (영상)

​

G마켓에 새로 등장한 기능인 만큼, 소비자도 판매자도 궁금한 점이 무척 많을 것 같은데요. 실제 OCR 기능을 만든 Web Frontend팀 이지나 매니저 님과 함께 간단한 Q&A를 준비했습니다!

Q. 이미지 속 글자의 폰트에 따라 OCR 정확도가 영향을 받나요? OCR이 잘 적용되는 상세페이지를 만들려면 어떤 폰트를 선택하는 게 좋을까요?

A. 폰트에 따라 OCR 인식률이 다를 수 있습니다. OCR 정확도를 높이기 위해서는 상세 페이지용 JPG 파일을 만들 때 고딕 계열의 폰트를 사용하는 것이 좋습니다. 디자인이 가미되지 않은 고딕 계열 폰트가 인식률이 상대적으로 높습니다.

Q. 상품 상세페이지를 만들 때, 대체 텍스트와 OCR 기능과 함께 적용할 수 있나요? 두 가지를 모두 적용하면 스크린리더를 사용하는 시각장애인에게 더 도움이 될까요?

A. 판매자가 대체 텍스트 값을 제대로 입력해 두었다면 사용자가 OCR 기능을 사용하지 않아도 대체 텍스트 정보를 얻을 수 있습니다. 이번에 추가된 OCR 기능은 대체 텍스트 값을 넣었는가와 상관 없이 사용자가 “이미지 OCR 대체 텍스트 음성지원 받기” 버튼을 눌러 작동시킬 때 실행됩니다. 해당 시점에 이미지의 대체 텍스트 값이 실시간으로 생성 및 적용된다고 보시면 됩니다.

보통 대체 텍스트 값을 넣지 않는 판매자가 아직도 적지 않기 때문에, 이번 OCR 기능의 추가로 많은 스크린리더 사용자가 좀 더 편리하게 G마켓을 이용할 수 있으리라고 생각하는데요. 그렇지만 판매자의 의도대로 정보를 전달하기 위해서는 OCR보다 1차적으로 판매자가 직접 대체 텍스트 값을 넣는 것이 더 정확합니다. 그래서 G마켓에서는 판매자분들이 적극적으로 이미지에 대체 텍스트 값을 삽입하도록 독려하고 있습니다.

Q. 스크린리더 읽는 속도가 너무 빠른데, 자체적인 속도 조절도 가능한가요?

A. 스크린리더 속도 조절 방법은 어떤 스크린리더 프로그램을 사용하느냐에 따라 다릅니다. 이번 OCR 기능 소개 영상에서는 NVDA를 사용해 제작하였는데요. NDVA의 경우, 트레이 아이콘에서 nvda를 클릭한 후 [설정]-[nvda설정]을 선택하여 [음성 설정]에 들어가 속도 조절을 할 수 있습니다.

G마켓이 ‘접근성 개선 프로젝트’의 일환으로 진행한 이번 ‘접근성 대체텍스트 이슈 해결을 위한 OCR 적용’ 소식, 어떠셨나요?

이번 OCR 기능의 추가로 더 많은 소비자분들이 제약 없이 즐거운 쇼핑 경험을 누리실 수 있으면 좋겠습니다.

혹시 G마켓을 이용하다가 접근성과 관련하여 불편한 점이 있거나 개선되면 좋겠다고 생각하는 부분이 있다면 언제든지 문의 채널을 통해 말씀해 주세요! 앞으로도 누구나 편하게 이용할 수 있는 G마켓이 되기 위해 접근성 개선 프로젝트는 계속됩니다.