ChatGPT, Claude, Gemini처럼 화면 전체를 대화창으로 쓰는 AI 채팅이 웹의 새로운 기본 패턴이 되었습니다. 많은 기업이 비슷한 채팅 화면을 자사 사이트에 붙이고 있지만, 스크린리더나 키보드만으로 이용하는 사람에게는 전혀 다른 경험이 펼쳐집니다. Smashing Magazine에 실린 Eric Bailey의 글을 바탕으로, 누구나 대화에 참여할 수 있는 채팅 UI 설계 원칙을 정리해 봅니다.
답이 도착했다는 신호를 들려주세요
질문을 보내도 포커스는 입력창에 그대로 머뭅니다. 눈으로 보는 사람은 위쪽에 뜬 답을 바로 알아차립니다. 하지만 스크린리더 사용자에게는 새 내용이 생겼다는 신호가 없습니다. 해법은 라이브 리전(자동 안내 영역)입니다. 메시지마다 aria-live를 붙이기보다 DOM 끝에 전용 영역 하나를 두고 모든 안내를 그곳에서 읽어 주는 편이 안정적입니다. 스트리밍 조각을 그때그때 읽으면 말이 끊겨 혼란스럽습니다. 답이 완성된 순간 전체를 한 번에 전달하세요.
기다리는 시간도 소리로 알려주세요
소리 없는 로딩 애니메이션은 화면을 볼 수 없는 사람에게 ‘멈춘 것 같은’ 불안을 줍니다. 질문 후 약 5초가 지나면 ‘불러오는 중’이라고 안내하고, 이후 5초마다 표현을 바꿔 반복해 보세요. 답이 완성되면 다음 주기를 기다리지 말고 즉시 읽어 주는 것이 핵심입니다.
제목으로 훑고, 랜드마크는 큼직하게
각 메시지를 article로 감싸고, 화면에서는 숨긴 h2 제목으로 ‘내가 말함’, ‘어시스턴트가 말함’을 붙이세요. 그러면 누가 무슨 말을 했는지 제목 단위로 빠르게 훑을 수 있습니다. 반면 메시지마다 section 같은 랜드마크를 달면 랜드마크 목록이 오염되어 오히려 길을 잃기 쉽습니다. 랜드마크는 세션 목록(nav), 대화(main), 입력창(form), 사이드 패널(aside) 정도로만 나누세요.
Tab 한 번으로 들어가는 대화 목록
대화 목록은 하나의 묶음 위젯으로 만들어, Tab 한 번에 진입하고 화살표 키로 이동하게 합니다. 대화가 50개라도 Tab은 한 번이면 충분합니다. 본문과 입력창으로 바로 가는 건너뛰기 링크를 두고, Ctrl+F6로 영역을 오가는 기능까지 더해 보세요. 질문과 답변 사이를 훨씬 빠르게 오갈 수 있습니다.
선택지를 주는 것이 곧 접근성
글자를 크게 키워도 내용이 잘리거나 가로 스크롤이 생기지 않는지 확인하세요. 도구 호출 같은 부가 안내를 끄는 설정과 애니메이션·소리를 끄는 옵션도 필요합니다. 운영체제에서 동작 줄이기를 켠 사용자라면 애니메이션이 처음부터 꺼져 있어야 합니다.
마치며
AI 기능을 붙이는 속도만큼 접근성도 함께 챙겨야 합니다. 채팅 화면에서 소외된다는 것은 곧 정보와 기회에서 소외된다는 뜻이기 때문입니다.
📎 출처: https://www.smashingmagazine.com/2026/11/making-immersive-llm-chat-experiences-more-accessible/