9. 접근성 평가 도구 만들기 - 1. 소개

9. 평가 도구 만들기

 

 이번 장에서는 UI 자동화 기술을 이용하여 소프트웨어 접근성 평가할 때 응용 프로그램의 창의 UI 정보를 수집하여 편의성을 제공하는 도구를 만들어 봅시다.

 

 여기서 만들 응용 프로그램의 이름은 접근성 평가 도우미라고 하겠습니다.

 

9. 1 접근성 평가 도우미 구조

 

 접근성 평가 도우미의 화면 구성은 평가 프로젝트를 생성하고 평가 대상의 계층 구조와 요약 정보를 보여주는 MainForm과 평가 프로젝트 생성 과정에서 프로세스를 선택하는 폼, 실행 가능한 요소 항목을 보여주고 프로그램 방식으로 Invoke를 수행하게 하는 폼, 평가 대상을 이미지로 보여주는 폼, 특정 UI 요소의 사각 영역에 프로그램 방식의 하이라이트를 만들어주는 폼으로 구성할게요.

 

[그림 9.1] 평가 도우미 폼 클래스 다이어그램

 

9.1.1 프로그램의 흐름

 

 프로그램을 제작하기 전에 작성할 프로그램의 전반적인 흐름을 살펴보기로 합시다.

 

 프로그램을 실행하면  MainForm이 뜨고 [파일 메뉴]의 [새 프로젝트 메뉴] 혹은 [새 프로젝트 생성] 버튼을 눌러 새 프로젝트를 생성 단계를 시작할 수 있습니다.

[그림 9.2] 프로그램 실행 초기 화면 

 

 새 프로젝트 생성을 선택하면 평가 제목을 입력할 수 있게 ProjectMaker 컨트롤을 배치합니다.

[그림 9.3] 평가 제목 입력 단계

 

 그리고 확인을 누르면 평가할 프로세스를 선택할 수 있는 ProcessSelectForm을 활성화합니다. 폼은 활성화하면서 Main 창이 있는 프로세스 목록을 열거하고 항목을 선택하면 선택 버튼을 활성화하여 평가 프로세스를 선택할 수 있게 합니다.

 

 사용자는 새로고침 버튼을 통해 차후에 생성한 프로세스 항목을 갱신할 수 있게 제공합니다.

[그림 9.4] 프로세스 선택 창 

 

 

 프로젝트에 사용할 프로세스를 선택하면 평가 프로젝트를 생성하고 선택한 프로세스의 기본적인 UI 정보 분석 내용을 포함하는 ProcessInfoControl을 배치합니다.

 

 ProcessInfoControl에는 평가 제목, 전체 UI 개수, 이름 없는 UI 요소 개수, 컨트롤 종류 별 UI 요소 개수 및 Access Key 목록과 Accelerator Key 목록을 보여줍니다. 그리고 평가 프로젝트의 수집 정보를 저장하거나 프로젝트를 끝내는 버튼을 포함하고 있습니다. 만약 저장하기를 누르면 기본적인 UI 정보 분석 내용과 UI 요소 정보를 Xml 파일로 저장하고 UI 요소 별로 원본 이미지와 흑백으로 변환한 이미지를 저장합니다.

 

[그림 9.5] 프로젝트 생성 후 모습

 

 

 평가 프로젝트를 생성한 후에는 접근성 평가 탭을 누르면 UI 정보 계층 정보와 UI 속성 및 컨트롤 유형을 확인할 수 있습니다.

 

 만약 UI 계층 구조에서 특정 UI 요소를 선택하면 선택한 UI 요소의 속성 정보와 컨트롤 유형을 목록에 보여줍니다. 그리고 화면에 선택한 UI 요소의 사각 영역에 프로그램 방식의 하이라이트를 띄워주어 확인하기 쉽게 해 줍니다.

[그림 9.6] 접근성 평가 탭 선택 모습

  

 보기 메뉴를 선택하면 프로그램 방식의 하이라이트를 숨기거나 보이게 선택할 수 있게 합시다. 그리고 이미지 폼 보기 메뉴나 Invoke 가능한 요소 보기 메뉴를 통해 평가에 편의성을 제공하는 보조 폼을 활성화하는 메뉴를 제공합니다.

[그림 9.7] 보기 메뉴

 

 이미지 폼은 평가 대상 폼을 이미지로 캡쳐한 것을 폼에 배치하여 UI 요소를 선택하면 프로그램  방식의 하이라이트를 제공하는 부분입니다. 이 책에서 보여주는 평가 도우미 기능에서는 큰 의미를 갖고 있지는 않지만 실제 평가 도우미를 만들 때를 고려하여 제공할게요.

[그림 9.8] 이미지 보기 폼

 

 Invoke 폼에서는 InvokePattern 요소를 목록에 보여주고 목록의 항목을 선택한 후에 클릭 버튼을 누르면 프로그램 방식으로 평가 타겟의 해당 UI 요소를 Invoke 시킵니다. 그리고 클릭 버튼을 누르거나 실제 해당 UI 요소를 클릭한 수를 텍스트 창에 보여줍니다.

[그림 9.9] Invoke 폼