PPTX, PDF332 views

[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II

처음 NWAX 라는 이름으로 서비스를 시작하였습니다. Firefox에 설치해서 페이지를 진단하였습니다. 이후 웹 버전으로 업데이트 되어서 NWAX+라는 이름으로 변경됩니다. 웹 버전이라고 하면, 사용자가 페이지(URL)을 서버에 전달하면 서버에서 그 페이지를 진단하고 결과를 보내줍니다. 이후 고도화를 진행하면서 NACT라고 변경됩니다. NACT는 가상 브라우져 phantomjs를 기반으로 사용자가 보는 화면과 비슷한 환경에 데이터를 받아서 분석하여, 결과를 보내줍니다. 고도화는 항상 필요하죠. 이번에 자세히 설명 드릴 NACT3로 넘어오게 됩니다. NACT3는 24개의 정부지침을 재해석해 규칙(체크리스트)으로 제공하고, 후처리 페이지, WAI-ARIA가 사용된 페이지를 진단하게 됩니다. 내부적으로 node – phantomjs 로 구성되어 있던 NACT를 react – javaFX – webkit 으로 구성하여 처리하게 됩니다. NACT3 는 엔진과 뷰로 구성됩니다. 엔진은 javaFX + webkit 뒤에 언급하겠지만, 브라우져 때문에 많은 시간이 들었습니다. Chrome -> firefox -> phantom -> webkit 으로 변경하면서 많은 시행착오를 겪었습니다. 중요한 기술적 핵심은 브라우져와 요소들의 수집입니다. 로직적으로 핵심은 a11y 라고 되어 있는 규칙들입니다. 규칙은 접근성 진단을 수행하면서 쌓인 패턴을 분석해서 프로그램 로직으로 만들었습니다. 예를들어 <img> 에서 alt 속성이 없으면 오류다. 같은 규칙이 생기면, method로 구현하게 됩니다. 소스를 살짝 보여드리면, 이렇게 구현이 됩니다. 뷰는 react + parser 위에서 보여드린 json data를 파싱해서 화면으로 뿌려주는 역할을 합니다. 주요 기술을 살펴보겠습니다. 기본적인 틀은 spring으로 되어 있습니다. 스프링은 워낙 유명한 프레임워크이고 다른 좋은 자료들이 많으니 생략하도록 하겠습니다. A11y 부분은 규칙이 정리된 엑셀 문서를 기반으로 코드화 한 부분입니다. 각 규칙의 지침별로 패키지화 하고, 하나의 규칙을 하나의 메소드로 만들어 진단을 수행시킵니다. 언급되었던 브라우져 입니다. Chrome, Firefox, Phantomjs, Webkit 을 사용해 보았었습니다. 브라우져를 사용하면서 많은 문제점들이 발생하였습니다. 처음 시작은 Chrome 으로 개발하였습니다. 컴퓨터에 Chrome이 설치되어 있고, Chromedriver를 통해서 NACT 시스템과 Chrome이 통신하게 됩니다. 진단되는 과정을 눈으로 볼 수 있으며, 개발자툴을 사용할 수 있어서 개발이 용이합니다. 하지만, 쓰레드로 여러 개의 Chrome을 실행했을때 NACT와 Chrome 사이에 통신 오류가 발생합니다. 다시 말해 1번 쓰레드가 실행시킨 1번 Chrome이 2번 쓰레드 혹은 3번 쓰레드랑 통신하게 되는 경우가 발생합니다. 포트를 통해 통신을 하게 되는데 이 포트에 동기화라고 해야 되나요…? 자신이 실행시킨 포트를 못 찾아가게 되는 현상이 생겼습니다. 그래서 Chrome을 포기하게 되었습니다. Firefox는 gecko를 통해 통신하는데, 통신의 오류는 없지만 메모리를 엄청 잡아먹고 리소스를 종료 시키지 않는 문제가 발생하였습니다. Phantom으로 변경하게 되었고, 가상 브라우져입니다. 자세한 내용은 공부하시면 됩니다. Phantom은 통신 오류나 메모리 문제를 해결하였습니다. 하지만, 역시 외부 브라우져를 실행시키고 각 요소를 접근해서 가져오다 보니 진단 시간이 많이 소요되고 요소가 많은 페이지 일때 심각하게 느린 문제를 가지게 되었습니다. 진단 시간에 대한 근본적인 문제는 외부 브라우져를 사용하게 되어서 입니다. 그래서 Webkit를 떠올리게 되었고, javaFX + Webkit를 통해 NACT가 javaFX Application을 실행시키게 되고 실행된 Application에서 Stream으로 data를 받아와서 처리를 수행하는 것으로 해결하게 되었습니다. 물론, javaFX와 Webkit이 완벽한 것은 아닙니다. 완벽했다면 제가 여기 없겠죠. 둘 다 가지고 있는 한계가 있고 처음 개발되는 영역이다보니 자료도 많이 없고 ㅠ 버그도 엄청 많습니다. 계속 고쳐 나가고 있는 상황이며, 올해에는 끝이 날까 ,,, 하는 기대를 해봅니다. 이렇게 자동화를 통해 진단하는 것을 보시면, Error 와 Warning으로 나오시는 걸 보실 수 있습니다. 확실하다 생각되는 규칙은 Error로 애매한 이슈는 Warning으로 구분되어 집니다. 예를 들어 <img> 태그에 alt이 없으면 확실한 오류 입니다. <img> 태그에 alt 값이 빈 값으로 되어 있으면, 애매합니다. 정보성 이미지가 아니거나, 이미지를 설명하는 별도의 텍스트를 제공하고 있는 경우 alt 속성을 빈 값으로 제공해도 되기 때문입니다. 이런 경우는 warning으로 제공해서 확인을 부탁하는 의미로 접근합니다. 화면의 깜박임도 자동으로 진단하기는 어렵습니다. NACT는 뷰와 엔진을 분리한 이유도 다양한 서비스에서 사용할 수 있게끔 하기 위해서 입니다. 그 첫번째가 NWARS입니다. 작년에 보여드렸었기 떄문에 살짝만 살펴보고 끝내도록 하겠습니다. 네이버는 많은 서비스들이 있고 너무 많은 페이지들이 있습니다. 이러한 서비스들이 매번 NACT에서 진단을 수행하고 처리하게 되면 실제적으로 접근성 개선을 하기 쉽지 않습니다. 지속적으로 관리하고 개선되고 있는 부분들을 볼 수 있게 해주는 서비스가 NWARS입니다. NWARS는 지속적으로 관리할 서비스와 페이지들을 가지고 있습니다. 이 페이지들을 1주일에 한번 NACT 엔진에 던집니다. NACT는 NWARS가 보내준 페이지를 진단하고 이슈 정보를 보내줍니다. 보내준 이슈를 NWARS는 재 분류해서 저장하고 서비스를 위해 데이터를 가공해서 보여주게 됩니다. 대표적으로 차트 정보가 될 수 있습니다. 그리고 서비스가 얼마나 개선되고 있는 혹은 개악되고 있는지를 보여줄 수도 있습니다.

Internet◦

1. 어렵고 시간도 많이 드니까 최대한 자동화 해보자
4차 산업혁명과 정보 접근성
자동화 툴

1. NWAX > NWAX+ > NACT > NACT3
4차 산업혁명과 정보 접근성
변천사

1. Engine + View
2. Engine : spring + a11y + browser + json
3. View : react + parser
4차 산업혁명과 정보 접근성
NACT3 – Architecture
DataBase
Maria DB
View Server
request
response
DAO
A11y Check
Webkit
JavaFX + Webkit
Application
A11y Policy
- 지침
- 내부 규칙
- 컨벤션
Client
Meta Parser
Data Matching
React
Issue
- 데이터 처리
- 추출된 이슈
Engine
Spring
URL
URL

1. Spring
2. Browser : Chrome, Firefox, Phantomjs, Webkit+javaFX
3. A11y
4. React
5. Parser
4차 산업혁명과 정보 접근성
NACT3 – Tech
guideline
NACT 3 Server
Spring + Maven
Mybatis
Application
Issue info
Element info
A11Y
Webkit
Element info
URL info

1. Crawling
2. String 분석
3. 객체 접근
4차 산업혁명과 정보 접근성
NACT3 – Bug story

1. 전부 커버 못함
2. 기술이 변화함
4차 산업혁명과 정보 접근성
NACT3 – Limited

1. NWARS 하고도 연계해서 쓰고 있어요
4차 산업혁명과 정보 접근성
NWARS3 – Link