AI 생성 콘텐츠 시대, 더 중요해진 웹 접근성

웹 접근성은 오랫동안 "여유 있으면 챙기는 것"으로 취급돼 왔습니다. 장애인 차별 금지 규정이 있는 공공 프로젝트에서나 진지하게 다뤄졌고, 민간 사이트에서는 우선순위에서 밀리기 일쑤였습니다. 그런데 AI 시대에 이 계산이 바뀌었습니다. 접근성을 지키는 일이 곧 검색과 AI 노출에 직결되기 시작했기 때문입니다.

스크린리더와 AI 크롤러는 같은 방식으로 읽는다

스크린리더는 화면을 보지 않습니다. HTML 의 구조를 읽습니다. 제목 태그의 위계를 따라 문서의 뼈대를 파악하고, 이미지는 대체텍스트로 이해하고, 링크는 링크 텍스트로 판단합니다.

AI 크롤러가 사이트를 읽는 방식이 정확히 이것입니다. 시각적으로 아무리 아름다워도 구조가 엉킨 사이트는, 스크린리더 사용자에게 불친절한 것과 같은 이유로 AI 에게도 읽히지 않습니다. 접근성을 위한 작업과 기계 가독성을 위한 작업이 상당 부분 같은 작업이 된 것입니다. "배려"였던 것이 "노출 전략"이 됐습니다.

실무 기본기 다섯 가지

저희가 자사 홈페이지를 만들며 실제로 적용한 기준들입니다.

본문 글자는 충분히 크게. 저희는 본문을 18px 로 고정했습니다. 디자인 시안에서는 14px 이 세련돼 보이지만, 읽는 사람의 눈은 다르게 말합니다. 글자 크기는 취향이 아니라 접근성의 문제이고, 콘텐츠로 승부하려는 사이트일수록 그렇습니다.

명도 대비를 확보할 것. 연회색 글자를 흰 배경에 얹는 유행이 있지만, 밝은 야외의 휴대폰 화면에서는 읽히지 않습니다. 본문 텍스트와 배경의 대비는 검증 도구로 확인할 수 있고, 몇 분이면 됩니다.

대체텍스트는 '있는 그대로' 원칙으로. 정보를 담은 이미지에는 그 정보를 설명하는 alt 를 답니다. 반대로 순수 장식 이미지에는 빈 alt(alt="")를 주는 것이 맞습니다 - 스크린리더가 의미 없는 설명을 읽지 않고 건너뛰게 하는 표준 패턴입니다. 외부 SEO 점검 도구가 이것을 "ALT 누락"으로 지적하는 경우가 있는데, 도구의 오해입니다. 저희 사이트도 이 패턴을 의도적으로 유지하고 있습니다.

키보드만으로 조작 가능하게. 마우스 없이 탭 키만으로 메뉴를 열고 폼을 제출할 수 있는지 직접 눌러 보면 압니다. 모달과 드롭다운에서 특히 자주 깨집니다.

움직임에는 브레이크를. 스크롤 애니메이션과 자동 재생 효과에는 "동작 줄이기" 설정을 존중하는 처리를 넣습니다. 멀미를 유발하는 모션은 접근성 문제이자 이탈 요인입니다.

AI 도구가 만들어 내는 새로운 접근성 문제

역설적이게도, AI 도구의 확산이 접근성을 악화시키는 경로가 있습니다.

글자가 박힌 생성 이미지. 배너나 카드뉴스를 AI 이미지로 만들면 텍스트가 이미지 안에 갇힙니다. 스크린리더도, 크롤러도, 번역기도 읽지 못합니다. 텍스트는 텍스트로 올리는 것이 원칙입니다.

구조 없는 생성 코드. AI 가 뽑은 화면 코드는 겉보기에 완성돼 있지만, 제목 위계 없이 div 로만 쌓인 경우가 많습니다. 눈에는 같아 보여도 기계에게는 구조가 없는 문서입니다. 생성 코드를 쓰더라도 문서 구조의 검수는 사람의 몫입니다.

정리

접근성은 이제 세 방향에서 같은 결론을 가리킵니다. 사용자를 위해서, 검색과 AI 노출을 위해서, 그리고 콘텐츠의 수명을 위해서. 화면은 유행 따라 바뀌어도 잘 구조화된 콘텐츠는 어떤 기계가 와서 읽어도 살아남습니다. 디자인 관점의 큰 그림은 AI 시대의 웹 디자인에서, 기술적 대응의 전체 목록은 회사 홈페이지 개편 경험기에서 이어집니다.