lingbot-map의 3D Scene에는 캔버스 옆에 접근 가능한 이벤트 리스트가 필요합니다
요약
3D 파운데이션 모델인 lingbot-map의 시각화 결과물을 웹에서 더 접근성 있게 구현하기 위한 프론트엔드 가이드를 제시합니다. 캔버스 기반의 3D 렌더링 환경에서 보조 기술 사용자를 위해 시맨틱 이벤트 리스트와 키보드 제어 체계를 구축하는 방법을 다룹니다.
핵심 포인트
- WebGL 렌더러와 공유되는 시맨틱 이벤트 리스트 구축 필요
- 스크래핑 방식이 아닌 공유 데이터 모델을 통한 접근성 텍스트 제공
- 보조 기술 과부하 방지를 위한 이벤트 알림 스로틀링 적용
- 키보드 내비게이션 및 prefers-reduced-motion 준수
Robbyant/lingbot-map은 스트리밍 데이터로부터 장면을 재구성하기 위한 Apache-2.0 피드포워드 (feed-forward) 3D 파운데이션 모델 (foundation model)입니다. 브라우저 시각화는 이러한 출력물을 탐색하는 자연스러운 방법입니다.
캔버스 (canvas)는 기하학적 구조 (geometry)를 아름답게 보여줄 수 있습니다. 하지만 캔버스 자체만으로는 모든 사용자에게 안정적인 읽기 순서 (reading order), 검색 가능한 객체 이력 (object history), 또는 키보드 경로 (keyboard path)를 제공할 수 없습니다.
접근 가능한 프론트엔드 (frontend)에는 하나의 공유된 장면 모델 (scene model)과 두 개의 뷰 (view)가 필요합니다.
사후에 추가된 전사(transcript)가 아닌 공유 데이터
type SceneEvent = {
id: string;
frame: number;
...
이 이벤트 스트림 (event stream)을 WebGL 렌더러 (renderer)와 시맨틱 이벤트 리스트 (semantic event list) 모두에 공급하십시오. 렌더링 후에 픽셀을 스크래핑 (scraping)하여 접근성 텍스트를 도출하지 마십시오.
시맨틱 컴패니언 뷰 (Semantic companion view)
<section aria-labelledby="scene-events-title">
<h2 id="scene-events-title">Scene events</h2>
<p id="scene-status" role="status" aria-live="polite"></p>
...
각 리스트 항목은 프레임 번호 (frame number), 이벤트 유형 (event type), 레이블 (label), 그리고 신뢰도 (confidence)가 사용자의 결정에 영향을 미칠 때의 신뢰도를 노출해야 합니다. 항목을 선택하면 캔버스 내의 해당 객체 (object)에 포커스 (focus)가 맞춰져야 하며, 캔버스에서 객체를 선택하면 리스트 선택이 업데이트되어야 합니다.
모든 프레임을 알리지 마십시오
스트리밍 재구성 (streaming reconstruction)은 초당 많은 이벤트를 생성할 수 있습니다. 각각을 모두 알리는 것은 보조 기술 (assistive technology)에 과부하를 줍니다. 영구적인 리스트는 완전하게 유지하되, 라이브 영역 (live region)은 의미 있는 요약으로 스로틀링 (throttle)하십시오:
Frame 320: two new surfaces mapped; tracking confidence stable.
트래킹 손실 (tracking loss)과 같은 경고는 단호한 알림 (assertive announcement)을 사용할 수 있습니다. 일상적인 기하학적 업데이트 (geometry updates)는 그렇지 않아야 합니다.
키보드 계약 (Keyboard contract)
Tab키는 캔버스 컨트롤 (controls)과 이벤트 리스트에 도달합니다.- 화살표 키는 해당 동작이 문서화된 경우에만 선택된 이벤트 그룹 내에서 이동합니다.
Enter키는 해당하는 3D 객체에 포커스를 맞춥니다.Escape키는 이벤트 리스트로 돌아갑니다.- "업데이트 일시 중지 (Pause updates)" 컨트롤은 이력을 버리지 않고 움직임과 라이브 알림을 중단합니다.
prefers-reduced-motion을 준수합니다. 카메라 전환(Camera transitions)은 요청 시 즉각적으로 이루어지거나 실질적으로 감소해야 합니다.
실패 상태 (Failure states)
WebGL이 실패하거나, 모델 스트림(model stream)이 연결 해제되거나, 재구성 신뢰도(reconstruction confidence)가 임계값 미만으로 떨어질 때도 시맨틱 뷰(semantic view)는 유용하게 유지되어야 합니다. 마지막으로 확인된 프레임, 연결 상태, 그리고 복구 조치(recovery action)를 표시합니다.
테스트 매트릭스 (Test matrix)
| 테스트 | 기대되는 증거 |
|---|---|
| 키보드 전용 내비게이션 | 모든 이벤트와 컨트롤에 접근 가능 |
| ... |
한계점 (Limitations)
저는 보조 기술(assistive technologies)을 사용하여 lingbot-map의 데모를 평가하지 않았습니다. 이것은 스트리밍 3D 증거를 위한 제안된 프론트엔드 아키텍처(frontend architecture)이며, 프로젝트의 현재 접근성(accessibility)에 대한 주장이 아닙니다. 리포지토리(repository) 설명과 라이선스는 확인되었으나, 구현 세부 사항은 변경될 수 있습니다.
3D 모델은 "어디인가?(where?)"에 답합니다. 시맨틱 컴패니언 뷰(semantic companion view)는 또한 "무엇이, 어떤 순서로 변했는가, 그리고 다음에 무엇을 할 수 있는가?(what changed, in what order, and what can I do next?)"에 답해야 합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기