WebAccessVL: Violation-Aware VLM for Web Accessibility

이 논문은 웹 콘텐츠 접근성 가이드라인 (WCAG2) 위반 사항을 자동으로 수정하면서도 원본 디자인을 유지하는 비전 - 언어 모델 'WebAccessVL'을 제안하고, 위반 조건을 입력으로 활용하는 반복적 개선 전략을 통해 기존 모델 대비 접근성 오류를 87% 이상 감소시킨 효과를 입증했습니다.

핵심

🏠 1. 문제 상황: "누군가에게는 보이지 않는 문"

우리가 웹사이트를 만들 때, 보통은 눈으로 보는 디자인만 신경 씁니다. 하지만 시각 장애가 있거나 색맹인 사람, 혹은 키보드만 사용하는 사람들은 그 웹사이트를 전혀 이용할 수 없는 경우가 많습니다.

• 예시: 빨간색 글씨와 초록색 배경을 섞으면, 색맹인 사람은 글자가 안 보입니다.
• 현실: 현재 인터넷의 96% 가 이런 '접근성 위반'을 가지고 있습니다. 개발자들은 "모두가 이용할 수 있게 하라"는 법이 있지만, 어떻게 고쳐야 할지 몰라 고생합니다.

🔍 2. 기존 방법의 한계: "눈이 먼 수리공"

기존의 AI(대형 언어 모델) 들은 웹사이트를 고칠 때 오직 '코드 (텍스트)'만 보고 고쳤습니다.

• 비유: 마치 눈을 가리고 집 안을 수리하는 기술자와 같습니다.
• "여기 문이 좁아요"라고 말하면, 문만 넓히지 않고 집 전체를 헐어버리고 새로 짓거나, 엉뚱한 벽을 부수기도 합니다.
• 결과: 접근성은 좋아졌지만, 원래의 아름다운 디자인은 사라져버립니다.

🚀 3. 이 연구의 해결책: "WebAccessVL (웹액세스 VLM)"

이 논문은 눈과 귀를 모두 가진 새로운 수리공을 만들었습니다. 바로 비전 - 언어 모델 (VLM) 입니다.

🎨 핵심 아이디어 1: "사진과 청사진을 동시에 본다"

이 AI 는 웹사이트를 고칠 때 두 가지 정보를 동시에 봅니다.

1. HTML 코드 (청사진): 건물의 구조를 설명하는 문서.
2. 스크린샷 (실제 사진): 건물이 어떻게 생겼는지 보여주는 사진.

비유: 이 수리공은 "여기 문이 좁아요"라는 말만 듣는 게 아니라, 실제 사진을 보며 "아, 문은 좁지만 벽을 살짝만 밀어내면 되겠네. 원래 디자인은 그대로 살리자!"라고 판단합니다.

📝 핵심 아이디어 2: "고장 목록 (Violation Report) 을 보고 일한다"

이 AI 는 단순히 "고쳐줘"라고 하는 게 아니라, 어떤 부분이 고장 났는지 상세한 목록을 먼저 받아봅니다.

• "여기 글자 색이 너무 밝아요", "이 이미지에 설명이 없어요" 같은 구체적인 메모를 AI 에게 건네줍니다.
• 비유: 수리공이 "집이 고장 났다"는 막연한 말 대신, "부엌 수도꼭지가 새고, 거실 전구가 꺼져 있어요" 라는 구체적인 메모를 받고 정확히 그 부분만 고칩니다.

🔄 핵심 아이디어 3: "수리공과 검사관의 대화 (Checker-in-the-Loop)"

한 번에 완벽하게 고칠 수 없다면, 수리공이 고친 뒤 검사관이 다시 확인하는 과정을 거칩니다.

1. AI 가 고친 웹사이트를 검사관이 봅니다.
2. "아직도 여기가 고장 났네요"라고 다시 알려줍니다.
3. AI 는 그 피드백을 받고 다시 고칩니다.

• 결과: 몇 번의 반복 끝에 거의 완벽한 상태로 만듭니다.

---

🏆 4. 얼마나 잘할까요? (성과)

이 새로운 수리공 (WebAccessVL) 은 기존 최고의 AI 들보다 훨씬 뛰어납니다.

• 고장 수: 웹사이트 1 개당 평균 5.3 개였던 고장을 0.2 개까지 줄였습니다. (약 96% 개선!)
• 디자인 보존: 고장만 고치고 원래의 예쁜 디자인은 90% 이상 그대로 유지했습니다. (기존 AI 들은 디자인을 0.5% 만 유지하며 집을 통째로 새로 지었습니다.)
• 특수 장애 그룹: 시각 장애, 운동 장애, 난독증 등을 가진 사람들이 겪는 문제들을 거의 모두 해결했습니다.

💡 5. 결론: "모두를 위한 열린 문"

이 연구는 AI 가 단순히 코드를 짜는 것을 넘어, 사람의 눈과 마음을 이해하여 웹을 더 포용적으로 만들 수 있음을 보여줍니다.

한 줄 요약:
"이제 AI 는 웹사이트를 고칠 때 눈을 가리지 않고, 디자인을 망치지 않으며, 모든 사람이 이용할 수 있게 자동으로 수리해 줍니다."

이 기술이 보편화되면, 앞으로 웹사이트를 만들 때 "접근성"을 걱정할 필요가 없어지고, 개발자들은 더 창의적인 디자인에 집중할 수 있게 될 것입니다.

기술 요약

1. 문제 정의 (Problem Statement)

웹 접근성 (Web Accessibility) 은 장애인 포함 모든 사용자가 웹 콘텐츠를 인지하고 조작할 수 있도록 보장하는 핵심 요소이며, WCAG 2 (Web Content Accessibility Guidelines 2) 표준을 준수해야 합니다. 그러나 현재 웹 페이지의 95.9% 가 WCAG 2 위반 사항을 가지고 있으며, 개발자들은 접근성 설계에 대한 인식과 기술 부족으로 이를 해결하지 못하고 있습니다.

기존의 AI 기반 접근성 개선 시도들은 주로 텍스트 기반의 대규모 언어 모델 (LLM) 에 의존하여 HTML 코드를 수정했습니다. 그러나 이러한 접근법은 다음과 같은 한계가 있습니다:

• 시각적 맥락 부재: 웹 페이지의 실제 렌더링된 모습 (색상 대비, 레이아웃 등) 을 고려하지 않아, 코드상에서는 정상이라도 시각적으로 접근성이 떨어지는 문제를 놓칩니다.
• 디자인 훼손: 접근성을 개선하는 과정에서 원본 웹 사이트의 디자인과 레이아웃을 과도하게 변경하거나 파괴하는 경우가 많습니다.

따라서 본 논문은 시각적 렌더링 이미지와 HTML 코드를 동시에 입력받아, WCAG 2 위반 사항을 수정하면서도 원본 디자인을 보존하는 자동화된 웹 접근성 개선 솔루션을 제안합니다.

2. 방법론 (Methodology)

2.1. 데이터셋 구축: WebAccessVL

• 기존에 존재하지 않던 접근성 개선용 학습 데이터를 구축했습니다.
• 구성: 1,500 개의 웹 페이지 HTML 과 해당 렌더링 이미지 쌍 (Pair) 으로 구성되었습니다.
• 어노테이션: 컴퓨터 과학 전문 지식을 가진 어노테이터가 IBM 의 접근성 체커를 활용하여 각 웹 페이지의 HTML 을 수동으로 수정 (7~10 분/페이지 소요) 하여 WCAG 2 기준을 준수하도록 만들었습니다.
• 특징: 위반 유형 중 약 35.8% 가 시각적 요소 (색상 대비, 이미지 대체 텍스트 등) 와 관련되어 있어, 시각 정보의 중요성을 강조합니다.

2.2. 모델 아키텍처: Violation-Aware VLM

기존 사전 학습된 비전 - 언어 모델 (VLM) 을 웹 접근성 태스크에 맞게 적응 (Adapt) 시키는 방법을 제안합니다.

• 입력 구성:
  1. HTML 코드: 수정 대상인 원본 HTML.
  2. 렌더링 이미지: 해당 HTML 의 시각적 스냅샷.
  3. 위반 보고서 (Violation Report): 접근성 체커 (Checker) 를 통해 추출된 구체적인 위반 사항 (규칙 ID, 메시지, 위치 등) 을 텍스트로 변환한 것.
• 학습 방식: 지도 미세 조정 (Supervised Fine-Tuning, SFT) 을 수행하여, 주어진 입력 (HTML+이미지+위반보고서) 에 대해 수정된 HTML 을 생성하도록 학습시킵니다.

2.3. 핵심 기술: 위반 조건부 생성 및 반복적 개선

• 위반 조건부 학습 (Violation-Conditioned): 모델이 단순히 "접근성 있게 수정하라"는 지시뿐만 아니라, 구체적인 위반 사항 목록을 조건 (Condition) 으로 받아들이도록 설계했습니다. 이는 모델이 관련 없는 요소를 수정하는 것을 방지하고 표적 수정을 유도합니다.
• 네거티브 가이던스 샘플링 (Negative Guidance Sampling): 분류기 없는 가이던스 (Classifier-Free Guidance) 기법을 적용하여, 위반 보고서가 있을 때와 없을 때의 로짓 (Logits) 차이를 증폭시킵니다. 이를 통해 위반 사항을 해결하는 토큰의 확률을 높이고, 변경이 필요 없는 토큰의 확률을 낮춥니다.
• Checker-in-the-Loop (반복적 개선):
  1. 모델이 초기 수정 HTML 을 생성.
  2. 접근성 체커로 다시 검사하여 잔여 위반 사항 확인.
  3. 발견된 새로운 위반 사항을 다시 모델에 입력하여 2 차 수정.
  • 이 과정은 위반 사항이 0 이 되거나 수렴할 때까지 반복됩니다.

3. 주요 기여 (Key Contributions)

1. 이미지 조건부 프로그램 합성 태스크 정의: 웹 접근성 개선을 "HTML 코드와 렌더링 이미지를 입력받아 WCAG 2 준수 코드를 생성하는 문제"로 공식화했습니다.
2. WebAccessVL 데이터셋 공개: 접근성 위반이 수정된 1,500 개의 웹 페이지 쌍으로 구성된 대규모 데이터셋을 구축하고 공개합니다.
3. Violation-Aware VLM 제안: 위반 보고서 정보를 조건으로 활용하고, 네거티브 가이던스와 체커 루프를 결합하여 성능을 극대화하는 새로운 아키텍처를 제안했습니다.
4. VLM 과 LLM 의 성능 비교: 시각 정보가 포함된 VLM 이 텍스트만 사용하는 LLM 보다 접근성 개선과 디자인 보존 측면에서 월등히 우수함을 실험적으로 증명했습니다.

4. 실험 결과 (Results)

• 접근성 개선율:

  • 원본 데이터의 평균 위반 수: 5.34 개
  • 제안 방법 (Gemma 3 기반) 의 평균 위반 수: 0.211 개
  • 96.0% 감소 효과를 달성했습니다.
  • 기존 최상위 모델인 GPT-5 (1.68 개 위반) 보다 87% 더 낮은 위반 수를 기록했습니다.

• 디자인 보존 (Faithfulness):

  • 구조적 정확도 (Structural Accuracy): 제안 방법은 **90%**의 구조적 정확도를 유지한 반면, GPT-5 는 0.5% 에 불과했습니다. (GPT-5 는 디자인을 완전히 재구성하는 경향이 있음)
  • 나무 편집 거리 (Tree Edit Distance): 제안 방법은 HTML 구조를 보존하면서 접근성만 수정하는 반면, GPT-5 는 과도한 구조 변경을 일으켰습니다.

• VLM vs LLM:

  • 미세 조정 (SFT) 후 VLM 은 텍스트 전용 LLM 보다 위반 수를 60~77% 더 줄였습니다. 시각 정보가 색상 대비, 대체 텍스트 생성 등 시각 의존적 위반 사항 해결에 결정적 역할을 함을 확인했습니다.

• 사용자 연구 (Perceptual Study):

  • 30 명의 참가자를 대상으로 한 평가에서, 제안 방법이 Claude 3.5 와 GPT-5 보다 콘텐츠와 시각적 스타일을 더 잘 보존한다는 통계적으로 유의미한 결과 (p < 0.001) 를 얻었습니다.

5. 의의 및 결론 (Significance)

이 연구는 웹 접근성 자동화 분야에서 중요한 전환점을 제시합니다.

• 시각 - 언어 통합의 필요성 증명: 웹 접근성 문제는 단순히 코드 분석이 아니라, 시각적 렌더링과 코드의 상호작용을 이해해야 해결할 수 있음을 입증했습니다.
• 실용적 솔루션: 개발자의 전문성 부족을 보완하고, 법적 요구사항 (ADA, EAA 등) 을 준수하는 웹 사이트를 구축하는 데 실질적인 도움을 줄 수 있습니다.
• 디자인과 접근성의 균형: 기존 모델들이 접근성 개선을 위해 디자인을 파괴하는 경향이 있었으나, 본 방법은 원본 디자인을 유지하면서 접근성만 개선하는 데 성공했습니다.

결론적으로, WebAccessVL 은 위반 사항을 인지하고 (Violation-Aware), 시각적 맥락을 활용하며, 반복적으로 개선하는 (Checker-in-the-loop) 방식을 통해 웹 접근성 자동화의 새로운 표준을 제시합니다.