Automated LLM-Based Accessibility Remediation: From Conventional Websites to Angular Single-Page Applications

1. 문제 정의 (Problem Statement)

• 웹 접근성 미해결 과제: 웹 콘텐츠의 상당 부분이 여전히 접근성 문제를 안고 있으며, 자동화 도구를 통한 오류 감지는 가능하지만, 이를 수동으로 수정하는 과정은 시간 소모가 크고 비용이 많이 들며 개발자가 세부 사항을 놓치기 쉽습니다.
• SPA(Single-Page Application) 의 복잡성: Angular 와 같은 현대적인 SPA 프레임워크는 클라이언트 측 렌더링과 동적 상태 관리를 특징으로 합니다. 기존 정적 분석 도구 (Static Analysis) 는 이러한 런타임 동적 행동 (포커스 관리, 라우트 알림 등) 을 효과적으로 평가하거나 수정하기 어렵습니다.
• 연구 격차: 기존 연구들은 LLM 을 활용한 접근성 수정을 시도했으나, 주로 정적 HTML 에 국한되거나 실시간 동적 DOM 환경 (특히 Angular) 에 대한 포괄적인 엔드 - 투 - 엔드 (End-to-End) 자동화 도구 부족이 존재했습니다.

2. 제안된 방법론 및 시스템 아키텍처 (Methodology & Tool Design)

저자들은 정적 웹사이트와 Angular SPA 모두에 적용 가능한 모듈형 자동화 시스템을 제안했습니다. 이 시스템은 WCAG 2.2 Level A 및 AA 기준을 준수하며, 4 단계 파이프라인으로 구성됩니다.

핵심 아키텍처:

1. 탐지 및 발견 (Detection and Discovery):
   • 정적 웹사이트: Selenium 을 통해 헤드리스 브라우저로 전체 DOM 을 렌더링하고, Axe-core 를 주입하여 WCAG 위반 사항을 감지합니다.
   • Angular SPA: angular.json 을 파싱하여 프로젝트 구조를 파악하고, 컴포넌트별 HTML, TypeScript, CSS 파일을 정적 분석 엔진으로 스캔하여 위반 패턴을 식별합니다.
2. 멀티모달 시각 분석 및 컨텍스트 (Multimodal Visual Analysis):
   • 이미지 설명 생성: GPT-4o 멀티모달 모델을 사용하여 이미지가 없는 경우 시각적 내용을 분석하고, 스크린 리더를 위한 적절한 alt 텍스트를 생성합니다.
   • 시각적 컨텍스트 확보: 모바일, 태블릿, 데스크톱 뷰포트에서 전체 스크린샷을 캡처하여 LLM 에 제공함으로써 레이아웃 의존적 요소나 색상 대비 문제를 코드 분석만으로는 놓칠 수 있는 시각적 계층 구조와 함께 분석합니다.
3. 맥락적 프롬프트 구성 (Contextual Prompt Construction):
   • LLM 에게 WCAG 전문가 역할을 부여하고, 특정 위반 사항, 관련 코드 스니펫, Axe-core 데이터, 시각적 컨텍스트를 동적으로 주입합니다.
   • "할루시네이션"을 최소화하고 기술적 정확성을 높이기 위해 엄격한 출력 형식 (예: <<<TEMPLATE>>> 구분자) 을 지시합니다.
4. 수정 실행 (Remediation Execution):
   • 정적 웹 페이지: 브라우저 세션 내에서 DOM 을 일시적으로 패치 (Selenium + BeautifulSoup) 하여 수정된 HTML 을 생성합니다.
   • Angular SPA: 소스 코드 레벨에서 자동화된 개발자 어시스턴트 역할을 수행합니다. LLM 이 생성한 코드를 구조화된 구분자로 파싱하여 원본 HTML 템플릿과 TypeScript 파일을 직접 수정 (Differential Write-back) 합니다.

검증 프로세스:

• 수정 후 Axe-core 를 재실행하여 위반 사항이 해결되었는지 확인합니다.
• Angular 프로젝트의 경우 ng build 를 실행하여 빌드 성공 여부 (Build Integrity) 를 검증하고, AST 기반 주입이 문법적 무결성을 해치지 않았는지 확인합니다.

3. 주요 기여 (Key Contributions)

• 엔드 - 투 - 엔드 자동화 프레임워크: 정적 웹사이트부터 복잡한 Angular SPA 까지 모두를 아우르는 최초의 통합 접근성 수정 도구 중 하나를 제안했습니다.
• 동적 환경 대응: 정적 분석의 한계를 극복하고, 런타임 동적 DOM 을 직접 조작하거나 Angular 컴포넌트 소스를 수정하여 SPA 의 고유한 접근성 문제 (포커스 관리 등) 를 해결합니다.
• 멀티모달 접근성 개선: 이미지 대체 텍스트 생성에 GPT-4o 를 활용하여 시각적 내용을 이해하고 의미 있는 설명을 자동으로 생성합니다.
• 안정성 보장: 수정된 코드가 애플리케이션의 기능과 디자인을 해치지 않도록 (Semantic Preservation) 엄격한 검증 단계를 포함했습니다.

4. 실험 결과 (Experimental Results)

연구진은 12 개의 공개 웹사이트 (Dataset A) 와 6 개의 오픈소스 Angular 프로젝트 (Dataset B) 를 대상으로 실험을 수행했습니다.

• 정적 웹사이트 (Dataset A):
  • 평균 80.35% 의 접근성 문제 해결률 (Remediation Rate) 을 달성했습니다.
  • 12 개 사이트 중 8 개 사이트에서 100% 수정 성공률을 보였습니다.
  • 구식 레거시 구조나 비표준 컨테이너를 사용하는 사이트에서는 해결률이 낮아지는 경향이 있었습니다.
• Angular SPA (Dataset B):
  • 평균 86.04% 의 해결률을 달성했습니다.
  • 빌드 무결성 (Build Integrity): 수정된 모든 Angular 프로젝트가 ng build 를 통해 성공적으로 컴파일되었습니다 (100% Pass). 이는 LLM 이 생성한 코드가 문법적으로 안전함을 의미합니다.
  • 의미 보존 (Semantic Preservation): 수동 검증 결과, 수정 후에도 UI 의 기능적 동작 (이벤트 리스너, 데이터 바인딩) 과 시각적 레이아웃이 유지되었습니다.
• 성능: 웹사이트당 평균 약 15 분 45 초, Angular 프로젝트당 약 17 분 3 초의 실행 시간이 소요되어 자동화 파이프라인 (예: 야간 빌드) 에 통합 가능한 수준임을 입증했습니다.

5. 의의 및 결론 (Significance & Conclusion)

• 기술 부채의 해소: 접근성 보장을 개발자의 수동 작업이 아닌 개발 워크플로우의 자연스러운 부분으로 전환하여 기술 부채를 줄이는 데 기여합니다.
• CI/CD 통합 가능성: 높은 빌드 성공률과 자동화된 검증 프로세스는 LLM 기반 접근성 수정이 지속적 통합 (CI) 파이프라인에 통합되어 실시간으로 적용될 수 있음을 시사합니다.
• 미래 방향: 현재 Angular 에 초점을 맞췄으나, React 등 다른 생태계로 확장하고, 더 복잡한 동적 상태 관리에 대한 LLM 의 능력을 향상시키는 것이 향후 연구 과제로 제시되었습니다.

이 논문은 LLM 을 활용한 웹 접근성 자동 수정이 단순한 개념 증명을 넘어, 실제 현대 웹 애플리케이션 환경에서 효율성, 정확성, 안정성을 모두 갖춘 실용적인 솔루션이 될 수 있음을 입증했습니다.