피드로 돌아가기
Dev.toFrontend
원문 읽기
dirham v1.3.0 — A Universal Web Component for the UAE Dirham Symbol
dirham이 Web Component 기반 <dirham-price> 컴포넌트를 추가해 모든 프레임워크에서 UAE Dirham 화폐 형식 지원
AI 요약
Context
UAE Dirham이 Unicode 18.0에서 공식 코드포인트 U+20C3를 할당받았으나, 운영체제의 네이티브 폰트 지원은 2026년 9월까지 제공되지 않는다. Private Use Area 방식이나 평문 대체 기법은 의미론적 정확성이 떨어진다.
Technical Solution
- 공식 Unicode 코드포인트 U+20C3를 사용: 검색 엔진, 스크린 리더, 파서가 의미론적으로 올바르게 해석 가능하도록 구현
- Web Component 표준 기반 컴포넌트 개발: amount, locale, decimals, notation, use-code, symbol-size, weight, currency 8개 속성 지원
- 커스텀 웹 폰트를 통한 매핑: 현재는 커스텀 폰트로 U+20C3 글리프를 렌더링하고 2026년 이후 네이티브 지원 시 자동으로 동작
- 프레임워크별 통합 전략: Vue, Angular, Svelte는 Web Component 방식 지원, React는 전용 TypeScript 컴포넌트 (, ) 제공
- 다양한 형식 지원: formatDirham 함수로 형식화, parseDirham 함수로 파싱, 9가지 폰트 weight(thin ~ black), 5가지 폰트 variants(sans, serif, mono, arabic, default), RTL 및 Arabic 로케일 지원
Key Takeaway
공식 표준(Unicode 코드포인트)을 채용하면 네이티브 지원 시점에 마이그레이션 비용 없이 동작하며, Web Component 표준을 통해 프레임워크 중립적인 상호운용성을 확보할 수 있다.
실천 포인트
UAE를 포함한 지역별 통화를 지원하는 금융·전자상거래 웹 서비스에서 Web Component 기반 화폐 형식 컴포넌트를 도입하면, 프레임워크 선택과 무관하게 단일 패키지로 의미론적으로 정확한 통화 렌더링이 가능해진다.