이커머스 스토어를 EAA 준수 상태로 만드는 방법: 개발자를 위한 체크리스트

유럽 접근성법 (European Accessibility Act, EAA)은 2025년 6월 28일부터 시행되었습니다. 만약 당신이 EU 고객을 위한 이커머스 스토어를 구축하거나 유지 관리한다면, 당신의 클라이언트들은 법적으로 WCAG 2.1 Level AA를 준수해야 합니다. 그리고 그들 중 대부분은 자신들이 얼마나 뒤처져 있는지 전혀 모르고 있습니다.

이것은 미래의 마감 기한이 아닙니다. 이미 시행 중입니다.

영향력이 큰 순서대로 실제로 구현해야 할 사항은 다음과 같습니다.

EAA가 이커머스에 요구하는 사항

EAA는 비즈니스가 어디에 등록되어 있는지와 관계없이, EU 고객에게 제품이나 서비스를 판매하는 모든 비즈니스에 적용됩니다. 이커머스의 경우, EAA가 지칭하는 기술 표준은 WCAG 2.1 Level AA입니다.

EU 스토어에서 가장 흔하게 발생하는 실패 사례는 — 상당한 차이로 — 이미지 대체 텍스트 (alt text)입니다. 버튼에 aria-label이 누락된 것이 아닙니다. 대비비 (contrast ratios) 문제도 아닙니다. 바로 대체 텍스트입니다. 구체적으로는: 제품 이미지, 카테고리 배너, 프로모션 그래픽에서 alt=""가 비어 있거나 (장식용 이미지에는 유효하지만, 종종 오용됨), alt 속성이 완전히 누락되었거나, 또는 `

사이트가 충족하는 WCAG 2.1 AA 기준
충족하지 못하는 기준과 그 이유
사용자가 접근성 문제를 보고할 수 있는 연락 수단
알려진 결함에 대한 개선(remediation) 일정

충족하지 않으면서 "우리는 WCAG 2.1 AA를 준수합니다"라고 성명을 발표하는 것은 명시적으로 금지되어 있습니다. 성명은 실제 준수 상태를 정확하게 반영해야 합니다.

대규모로 alt 텍스트를 감사(audit)하는 방법

옵션 1: 브라우저 개발자 도구 (단일 페이지용)

개발자 도구(DevTools)를 열고 → 콘솔(Console)에서 다음을 실행합니다:

// alt 속성이 완전히 누락된 모든 이미지를 찾습니다
document.querySelectorAll('img:not([alt])').forEach(img => {
  console.warn('Missing alt:', img.src);
...

옵션 2: axe-core (자동화된 테스트 파이프라인용)

import { axe } from 'axe-core';

// 테스트 스위트 또는 CI 파이프라인에서 실행
...

옵션 3: Playwright + axe를 이용한 사이트 전체 크롤링

import { chromium } from 'playwright';
import AxeBuilder from '@axe-core/playwright';

...

한 가지 중요한 주의 사항이 있습니다. 자동화 도구는 **WCAG 문제의 약 30~40%**만을 잡아냅니다. 이 도구들은 alt 속성 누락과 같은 구조적인 문제에는 신뢰할 수 있지만, 설명이 의미 있는지는 판단할 수 없습니다. "신발(A shoe)"은 기술적으로 자동화 검사를 통과합니다. 하지만 표준에서 실제로 요구하는 것은 "코랄 핑크 색상의 Nike Air Max 270 여성용 러닝화"와 같은 설명입니다.

Shopify에서 alt 텍스트 수정하기

Shopify는 alt 속성을 제품 단위가 아닌 이미지 단위로 저장합니다. 판매자가 alt 텍스트를 추가하지 않고 이미지를 업로드하면 기본적으로 빈 값으로 설정됩니다.

Liquid 템플릿을 통한 확인 (현재 상태 확인):

{% for image in product.images %}
  <img 
    src="{{ image | img_url: '800x' }}"
 ...

default: product.title을 사용하여 대체하는 것이 빈 alt 값을 두는 것보다는 낫지만, 이는 WCAG를 준수하는 방식은 아닙니다. 제품 제목은 이미지에 대한 설명이 아니기 때문입니다. 이는 임시방편일 뿐 해결책은 아닙니다.

대규모로 alt 텍스트를 일괄 처리하려면, Shopify Admin API의 ProductImage에서 alt 필드를 노출합니다:

// Admin API를 통해 alt 텍스트 업데이트
const response = await fetch(
  `https://${shop}/admin/api/2024-01/products/${productId}/images/${imageId}.json`,
...

수천 개의 제품을 보유한 스토어의 경우, 대규모로 이를 처리하려면 프로그래밍 방식으로 설명을 생성(비전 모델 (vision model) 사용)하거나 이를 자동으로 수행하는 도구를 통합해야 합니다. 이 EU 규정 준수 격차를 해결하기 위해 특별히 구축한 Altvisor는 Shopify에 연결되어 모든 이미지 업로드 시 WCAG 2.1 AA를 준수하는 alt 텍스트를 자동으로 생성합니다. 또한 Annex V PDF도 생성합니다.

WooCommerce에서 alt 텍스트 수정하기

WordPress는 _wp_attachment_image_alt 키 아래의 wp_postmeta에 alt 텍스트를 저장합니다. 프로그래밍 방식으로 이를 감사(audit)하고 업데이트할 수 있습니다:

// alt 텍스트가 누락된 모든 이미지 찾기
$args = array(
    'post_type'      => 'attachment',
...

// 특정 첨부 파일의 alt 텍스트 업데이트
update_post_meta($attachment_id, '_wp_attachment_image_alt', '여기에 설명적인 alt 텍스트를 입력하세요');

특히 WooCommerce 제품 이미지의 경우, woocommerce_product_get_image 필터(filter)를 사용하면 데이터베이스를 건드리지 않고도 alt 텍스트 출력을 가로채서 수정할 수 있습니다:

add_filter('woocommerce_product_get_image', function($html, $product) {
    // alt가 누락되었거나 파일명인 경우에만 수정
    if (preg_match('/\.(jpg|jpeg|png|webp)/i', strip_tags($html))) {
...

다시 한번 강조하지만, 제품 이름은 대체 수단(fallback)일 뿐입니다. 진정한 규정 준수를 위해서는 이미지마다 설명적인 alt 텍스트가 필요합니다.

개발자를 위한 EAA 준수 체크리스트

어떠한 EU 이커머스 프로젝트라도 최종 승인하기 전에:

현재의 규제 준수 환경

EAA는 국가 단위로 집행됩니다. 각 EU 회원국은 지정된 감독 기관을 두고 있습니다. 집행은 2025년 6월에 시작되었으며 현재는 대형 소매업체에 집중되어 있으나, 2026년까지 중소기업(SMB)에 대한 조사가 증가할 것으로 예상됩니다.

대부분의 개발자에게 실질적인 위험은 규제 벌금 그 자체라기보다 고객의 책임(Client liability)입니다. 접근성 관련 불만을 접수하는 스토어는 규제 조사와 민사 소송 모두에 직면할 수 있습니다. 스토어를 구축하거나 유지 관리하는 개발자로서, 귀하가 무엇을 감사(Audit)하고 수정했는지에 대한 문서화 작업이 중요해집니다.

aXe-core 감사를 실행하고 그 결과를 보관하는 것이 합리적인 시작점입니다. 정확한 부속서 V(Annex V) 성명서를 게시하는 것이 법적 요구 사항입니다. 현재 대부분의 EU 스토어는 이 두 단계 사이의 간극에 놓여 있습니다.

EU 시장을 위한 제품을 구축 중이며 대규모로 접근성을 어떻게 처리하는지 공유하고 싶으신가요? 댓글을 남겨주세요. 특히 에이전시들이 여러 고객사를 대상으로 부속서 V(Annex V) 성명서 요구 사항을 어떻게 처리하고 있는지에 대해 관심이 많습니다.

태그: 접근성(accessibility) WCAG Shopify WordPress 이커머스(ecommerce) 웹개발(webdev) JavaScript PHP