개요
웹에서 WASM으로 “IME를 구현”한다기보다, OS/IME가 후보창을 띄우고 브라우저 편집 파이프라인으로 글자를 넣는 흐름에 맞춰 이벤트 순서·커밋 경계·단일 진실 원천을 맞추는 일이 큽니다.
이 사이트의 시나리오는 Rust 코어를 쓸 때도 동일하게 적용됩니다.
IME는 브라우저 영역
매 keydown마다 “최종 글자”를 가정해 WASM으로 넣기
어렵습니다. 조합 중에는 부분 문자열이 잠정적입니다.
compositionupdate마다 Rust로 미리보기를 흘리면 복사와
레이스가 늘어납니다.
compositionend 등 커밋 신호를 정본 텍스트를 Rust 모델에 넣는 주요 시점으로 두는 편이 안전합니다(취소 처리는 별도 설계).
조합 생명주기
compositionstart— IME 세션 표시, 확정 가정 병합 일시 중단.compositionupdate— DOM에 중간 글리프; 미리보기만 WASM에 올릴지 결정.compositionend— 확정; UTF-16(JS)과 UTF-8(Rust) 오프셋 불일치에 유의.
beforeinput과 함께 쓰되, 취소 가능 여부는 브라우저·플랫폼마다 다릅니다. 에디터 → 입력 처리.
Rust 모델 동기화
- 조합 중 DOM 우선: 확정 전까지는 DOM에 두고 커밋 시 한 번에 패치.
- 확정 입력만 op로: CRDT에는 확정 코드포인트만 반영(프리뷰는 DOM만).
- 풀 미러: 경계 비용·취소 롤백을 측정·설계한 경우에만.
모바일·플랫폼 차이
가상 키보드·백스페이스·WebView는 데스크톱과 다릅니다. WASM 코어가 이를 흡수하지 못하므로 웹 에디터와 같은 실측이 필요합니다. 에디터 → 모바일 지원.
Wasm 가이드
에디팅 방식
contenteditable + WASM: 진실 원천, 이벤트 순서, DOM↔모델 루프, 정규화, Rust 호출 시점.
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 트랜잭션.
접근성 (WASM 호스트)
편집 표면이 브라우저일 때 역할·포커스·스크린 리더.
테스트·디버깅
E2E, JS↔WASM 경계 프로파일링, IME·붙여넣기 CI 재현.
보안·배포
CSP, SRI, 모듈 무결성, contenteditable 옆 WASM 호스팅.