개요
에디터 → 접근성을 함께 보세요. 하이브리드에서는 WASM이 데이터를, 뷰가 역할·이름·포커스 이동을 담당합니다.
브라우저 표면
contenteditable이면 보조 기술은 같은 DOM과 상호작용합니다. Rust가 구조를 패치하면 랜드마크(제목·목록)를 안정적으로 유지하도록 설계하세요.
역할·레이블
툴바 버튼 레이블, 편집 영역의 aria-multiline, 협업 상태 알림용 라이브 영역 등은 UI 레이어 책임입니다.
포커스
모달·툴바가 캐럿 포커스를 빼앗지 않도록 하고, WASM 콜백으로 인한 리렌더 중 IME 세션에 포커스가 끊기지 않게 순서를 맞춥니다.
캔버스 전용 에디터는 별도 입력·ARIA 패턴이 필요해 DOM 기반보다 훨씬 무겁습니다.
WASM이 해결 못 하는 것
스크린 리더·브라우저 휴리스틱은 여전히 지배적입니다. VoiceOver, NVDA, 모바일 TalkBack 등 실기기 테스트를 권장합니다.
Wasm 가이드
에디팅 방식
contenteditable + WASM: 진실 원천, 이벤트 순서, DOM↔모델 루프, 정규화, Rust 호출 시점.
IME·조합 입력
조합 이벤트, Rust 문서 모델 동기화, IME는 여전히 브라우저 영역인 이유.
JS ↔ WASM 경계
문자열·복사·배치 연산, 비동기와 입력 이벤트, 핫 패스 비용 줄이기.
클립보드·입력 라우팅
beforeinput, 붙여넣기, JS에서 라우팅할지 WASM에서 정제할지.
툴링·번들·워커
wasm-pack, wasm-opt, 코드 스플릿, Web Worker, COOP/COEP·스레드.
협업·CRDT (WASM)
Yrs·y-crdt, Yjs 연동, 스냅샷 vs 업데이트 스트림.
선택·Range·오프셋
UTF-16 vs UTF-8, JS Selection/Range, Rust 모델 매핑·getTargetRanges.
실행 취소·다시 실행 모델
브라우저 undo 스택 vs 모델 히스토리, 프로그래밍 DOM, WASM 트랜잭션.
테스트·디버깅
E2E, JS↔WASM 경계 프로파일링, IME·붙여넣기 CI 재현.
보안·배포
CSP, SRI, 모듈 무결성, contenteditable 옆 WASM 호스팅.