AI 팀과 함께 일주일 만에 접근성 스캐너를 만들었습니다. 그리고 무료입니다

소규모 에이전시는 항상 "저희 웹사이트가 접근성이 있나요?"라는 질문을 받습니다. 그런데 전문적인 감사(audit)는 소규모 업체 수준의 비용으로는 불가능합니다. 그래서 저는 AI 에이전트 팀과 함께 일주일 만에 무료로 사용할 수 있는 화이트 라벨 스캐너를 만들었습니다. 실제로 작업 과정은 어땠는지, 그리고 제 도구가 솔직히 무엇을 할 수 없는지 알려드리겠습니다.

TAGS (dev.to는 4개까지 허용):
accessibility, webdev, a11y, buildinpublic

BODY:

값싸게 답할 수 없는 질문

만약 소규모 웹 에이전시를 운영하거나 프리랜서로 생활한다면 이 이메일을 경험해봤을 겁니다. 고객이 무언가를 읽었거나, 구매 양식(procurement form)을 작성했거나, 경쟁사로부터 지적받았는데, 다음과 같은 내용의 메일이 받은 편지함에 도착합니다: "간단한 질문인데, 저희 웹사이트가 접근성이 있나요?"

이에 대한 간단한 답변은 없습니다. 진정한 답변은 준수 감사(conformance audit)입니다. 전문적인 작업이며 며칠이 걸리고, 평생 WCAG 관련 일을 하는 전문가가 해야 합니다. 이는 소규모 업체가 거의 감당하기 어려운 전문 지식입니다. 즉, 이 서비스를 자체 비용으로 팔 수 없고, 빌드 과정 사이에 신뢰성 있게 수행할 수도 없습니다. 그래서 그 질문은 답하지 않은 채 남아있거나, 애매하게 답변되어 상황이 더 나빠집니다.

제가 만들기로 결정한 것

저는 Sheree입니다. Curbcut을 운영하고 있으며, 이번 달 초에 AI 에이전트 팀과 함께 약 일주일 만에 이 스캐너를 만들었습니다. 아이디어는 의도적으로 작고 솔직했습니다: 감사가 아니라, 빠르고 쉬운 영어로 된 첫 번째 점검(first look)입니다. URL을 붙여넣으면 약 1분 후에 점수가 매겨지고 우선순위가 지정된 보고서가 나옵니다. 무엇이 고장 났는지, 어떤 WCAG 2.2 규칙을 위반했는지, 누가 피해를 입는지, 그리고 제안하는 코드 수정 사항까지 알려줍니다.

또한 화이트 라벨(white-labelled) 처리도 가능합니다: 에이전시와 고객의 이름을 채우기만 하면, 보고서 상단에는 "Prepared for [client] by [agency]"라고 적혀 있어 마치 자체 작업물인 것처럼 전달할 수 있습니다. 이 도구는 질문에 답하고, 대화를 시작하며, 궁극적으로 에이전시에게 가장 큰 수익원이 되는 수정 작업을 지적해 줍니다.

AI 팀과 함께 일주일이 실제로 작동하는 방식

신비주의는 없습니다. 저는 코드를 작성하지 않았고, 접근성 전문가도 아닙니다. 제가 가진 것은 AI 에이전트 팀입니다. 저의 방향을 계획으로 바꾸고 구체적인 작업을 위임하는 AI CTO와, 구현하고 테스트하며 검증하는 AI 엔지니어가 있습니다. 제 역할은 위임할 수 없는 부분입니다. 제품을 평범한 말로 설명하고, 전화를 걸고, 고객처럼 결과를 판단하는 것입니다. 보고서를 읽거나, 실제 사이트를 클릭하거나, 직설적인 피드백 이메일을 보내는 방식이죠.

첫 주 동안 있었던 두 가지 에피소드가 어떻게 돌아가는지 보여줍니다. 첫 번째는 제가 실수로 URL 입력란에 이메일 주소를 붙여넣고 혼란스러운 거절 메시지를 받은 경우입니다. 스크린샷을 보냈습니다. 그 메시지는 같은 날 재작성되었는데, 왜 그런 일이 일어났는지 추적하는 과정에서 더 큰 격차를 발견했습니다. 표준 도구로는 비밀번호로 보호된 스테이징(staging) 사이트를 전혀 스캔할 수 없다는 것이었고, 바로 이 부분이 에이전시 작업이 이루어지는 곳입니다. 같은 주에 우리는 엄격한 규칙 하에 URL에 로그인 정보가 포함된 스테이징 링크 지원 기능을 출시했습니다. 자격 증명은 붙여넣은 정확한 호스트에게만 전송되며, 보고서나 로그, 또는 다른 어떤 것에도 나타나지 않습니다. 저의 실수가 제가 가장 자랑스러워하는 기능이 되었습니다.

두 번째는 방화벽이 자동 방문자를 거부하는 사이트를 테스트했던 경우입니다. 스캐너는 실패를 정확하게 보고했지만, 메시지가 너무 모호해서 버그인지 사이트 자체의 문제인지 알 수 없었습니다. 이제 메시지는 웹사이트가 스캔을 거부했다는 것을 명확히 말하며, 브라우저에서 페이지가 정상적으로 열릴 때 왜 그것이 가능성이 높은 원인인지 설명합니다. 실패 경로조차도 정직해야 합니다.

이것이 전체 순환 과정입니다. 제가 문제를 일으키거나 설명하면, 팀이 해결하고, 녹색 자동 테스트 스위트와 실시간 검사를 거치지 않고는 아무것도 출시되지 않습니다. 첫 '모두 녹색' 보고서를 받았을 때, 저는 축하하지 않았습니다. 대신 도구가 무엇을 확인하지 못했는지 물었습니다. 그 답변이 제품을 다시 변화시켰습니다.

Curbcut의 현재 기능

사실들은 다음과 같습니다:

• URL을 붙여넣기만 하면 됩니다. 가입, 이메일, 카드 정보는 물론 비밀번호로 보호된 스테이징 링크도 가능합니다.
• 해당 페이지와 동일 사이트의 최대 4개 연결 페이지를 가져와 서버에서 전송되는 HTML에 대해 14가지 구체적인 WCAG 2.2 검사 세트를 실행합니다.
• 약 1분 후: 평이한 영어로 점수화되고 우선순위가 지정된 보고서와 제안된 코드 수정 사항을 받게 됩니다.
• 만약 특정 검사를 페이지에 적용할 수 없었다면, 점수 아래의 황색 'Curbcut이 확인할 수 없는 항목(What Curbcut could not check)' 패널에 추측이 아닌 명시적으로 나열됩니다. 따라서 녹색은 실제로 무엇이 확인되었는지 알고 있다는 의미입니다.
• 보고서는 클라이언트에게 전달할 준비가 된, 흰색 라벨링(white-labelled) 및 인쇄가 가능한 형태입니다.
• 개인 정보 보호는 설계 단계부터 반영되었습니다: 서버는 스캔이 몇 번 실행되었는지에 대한 기본적인 일일 카운트만 보관합니다. URL, 방문자 데이터, 쿠키는 저장하지 않습니다.
• 모든 변경 사항은 자동화된 테스트 스위트(automated test suite)를 거쳐 배포됩니다 — 제가 이 글을 쓰는 현재 333개의 테스트가 통과하고 있습니다 — 그리고 검사 항목들은 gov.uk를 포함한 실제 사이트를 대상으로 검증되었습니다.

제가 가격표가 붙어야 할지 고민하는 동안에는 무료입니다. 여기서 사용해 보세요: https://05910e406f67ad386ac82700fa809394.ctonew.app

할 수 없는 것들 — 그 이유를 설명하자면

이 부분이 제가 가장 중요하게 생각하는 부분입니다. 왜냐하면 과장된 주장이 신뢰를 잃게 만들기 때문입니다.

• 서버가 보내는 HTML을 읽습니다. 자바스크립트(JavaScript)로 브라우저가 이후에 그리는 것(캐러셀, 쿠키 배너, 임베디드 위젯 등)은 볼 수 없습니다. 따라서 JS 의존도가 높은 페이지는 실제보다 더 좋은 점수를 받을 수 있습니다.
• 색상 대비(colour contrast)와 포커스 표시기(focus indicators) 두 가지 검사는 사이트의 스타일시트(stylesheet)가 필요합니다. 스타일시트를 읽을 수 없는 경우, 해당 항목은 건너뛰고 황색 패널에 추측 대신 명확하게 그렇게 표시됩니다.
• 한 번에 하나의 사이트, 몇 페이지 깊이만 스캔합니다. 보고서 생성기이지 크롤러(crawler)가 아닙니다.
• 무엇보다도: 이것은 적합성 감사(conformance audit)가 아닙니다. 사이트를 인증하거나 누구를 법적으로 보호하지 않습니다. 이것은 실제 작업을 시작하는 빠르고 우선순위가 지정된 첫 번째 검토일 뿐입니다 — 그리고 만약 클라이언트가 나중에 공식 감사가 필요하다면, 그 전문가는 여전히 자신의 수수료를 받습니다.

다음 계획

빌드하는 데 약 일주일이 걸렸습니다. 이것이 유용한지는 실제 고객 사이트를 스캔하는 사람들에 의해 결정될 것입니다. 지금까지 피드백이 어디서 왔는지 정확히 말씀드리자면: 제품을 형성한 모든 것은 내부 테스트에서 나왔습니다. 저 자신의 스캔, 저 자신의 실수, 그리고 팀의 자동화된 확인 및 실제 현장 스윕(sweeps)입니다. 외부 사용자는 아직 의견을 제시하지 않았습니다. 아직 없습니다. 바로 이 단계가 이를 위한 것입니다. 실세계 테스트, 피드백 기반입니다. 로드맵 쇼는 없습니다. 다음 기능은 첫 번째 실제 사용자들이 부족하다고 말하는 것이 될 것입니다.

사용해 보세요

Curbcut은 무료입니다. URL을 붙여넣고 보고서를 받고, 가입할 필요가 없습니다. 잘 아는 사이트—의도적으로 거친(rough) 사이트가 가장 교육적입니다—를 가져와서 이 보고서를 고객에게 건넬 수 있을지 확인해 보세요. 그런 다음 여기 댓글이나 사이트의 연락처 링크를 통해 무엇을 정확하게 파악했고 무엇을 놓쳤는지 저에게 알려주세요. 직설적인 피드백도 괜찮습니다. 이것이 애초에 이 제품이 만들어진 방식입니다.

— Sheree Preston, 창립자, Curbcut