Web Speech API와 Custom Transliteration 기반의 Browser-native Urdu 디자인 플랫폼 구축

I Built a Free Browser-Based Urdu Writing and Design Platform

ANILA NAWAZ2026년 6월 27일10분intermediate

AI 요약

Context

기존 Urdu 타이포그래피 시장을 독점한 InPage의 폐쇄적 Desktop 환경과 유료 모델로 인한 접근성 저하 발생. 기존 웹 기반 도구들의 Nastaliq 폰트 렌더링 오류 및 베이스라인 붕괴 현상으로 인한 전문 디자인 구현의 한계 직면.

Local Dictionary와 LRU Cache를 결합한 Custom Transliteration Engine 설계로 Roman Urdu의 실시간 Urdu 변환 성능 최적화
Web Speech API를 활용한 Client-side Voice Typing 구현으로 서버 비용 제거 및 사용자 프라이버시 강화
Document Model 기반의 Flow layout(Simple Mode)과 Layer system 기반의 Absolute Positioning(Canvas Mode)을 분리한 하이브리드 렌더링 아키텍처 채택
Nastaliq 폰트 특유의 불규칙한 Line height 및 Baseline 문제를 해결하기 위한 html2canvas 기반의 전용 Font Pipeline 구축
localStorage를 활용한 Guest-level Autosave 구현으로 계정 생성 없는 즉각적인 사용자 경험 제공 및 서버 부하 분산
QR 코드 기반의 Unique Verification ID 시스템을 통한 인증서 위변조 방지 검증 엔드포인트 설계

실천 포인트

1. RTL(Right-to-Left) 언어 구현 시 폰트별 Baseline 및 Line height 편차를 고려한 렌더링 파이프라인 검토

2. Web Speech API 등 브라우저 네이티브 API를 활용한 서버리스 기능 구현으로 인프라 비용 절감 가능성 확인

3. 단순 텍스트 편집(Flow)과 디자인 레이아웃(Absolute)의 요구사항 차이에 따른 데이터 모델 분리 설계 적용

태그