AI가 만든 화면, 예쁜데 Tab 키를 누르면 무너진다

TL;DR

• AI로 만든 UI는 마우스로 보기엔 완벽해 보이지만 키보드·스크린리더 앞에선 무너지는 경우가 많음
• AI 모델이 "화면에 보이는 픽셀"만 최적화하고, 눈에 안 보이는 접근성 정보는 평가 대상에서 빠지기 때문
• 반대로 접근성 규칙을 명시적으로 학습시킨 도구는 통과율을 40~50%포인트까지 끌어올림

📌 무슨 일이야

"Cursor한테 설정 화면 하나 만들어달라고 하면 몇 초 만에 나온다. 호버 효과도 있고, 간격도 고르고, 화살표 아이콘도 부드럽게 돈다." 그런데 마우스를 내려놓고 Tab 키를 눌러보면 얘기가 달라져요. 포커스 링이 안 보이거나, 순서가 엉키거나, 아예 반응하지 않는 요소가 나옵니다. AI가 만든 화면일수록 이런 일이 흔하다는 지적이 최근 이어지고 있어요.

📌 왜 중요해

원인은 단순해요. AI 모델은 스크린샷 상의 시각적 완성도를 기준으로 학습·평가돼요. 명도 대비, 포커스 순서, 접근 가능한 이름(스크린리더가 읽어주는 라벨) 같은 요소는 "렌더링된 화면의 픽셀을 단 하나도 바꾸지 않으니" 애초에 평가 기준에 안 들어가는 거죠. 그 결과 회색 텍스트의 낮은 명도 대비, 제거된 포커스 링, 라벨 없는 아이콘 버튼, 버튼 대신 쓰인 클릭 가능한 div 같은 패턴이 반복해서 나타나요. 시각장애 개발자 테일러 아른트는 이런 "바이브 코딩"이 스크린리더 사용자에게 특히 심각한 장애물이 된다고도 짚었어요.

📌 다음은?

다행히 방법이 없는 건 아니에요. 피그마와 접근성 컨설팅사 인토피아가 공개한 사례를 보면, AI에게 접근성 규칙을 "따라야 할 규칙집"으로 명시적으로 붙여줬더니 접근성 테스트 통과율이 텍스트 프롬프트 기준 47%에서 91%로, 복잡한 애플리케이션에서도 24%에서 74%로 뛰었어요. 결국 "AI가 알아서 잘 만들겠지"라고 맡기지 말고, 접근성 검증을 사람이 나중에 훑어보는 절차가 아니라 처음부터 자동으로 걸리는 규칙으로 박아 넣어야 한다는 얘기예요.

참고문헌

• Where AI-Generated Design Breaks UX Laws
• Figma x Intopia: Building Accessibility into AI-Generated Prototypes
• Inclusive Web Design in 2026: New Accessibility Rules for the AI Web
• Why Accessibility Is An Operational Capability, Not A Feature
• Everybody Is Vibe Coding. Here Is What That Does to Accessibility