Browser - Unicode BiDi

2026-07-01 1 분 소요

◆Unicode란?

Unicode(유니코드)는 전 세계의 모든 문자를 하나의 공통된 기준으로 표현하기 위한 국제 문자 표준이다.

Unicode는 각 문자마다 고유한 코드 포인트(Code Point) 를 부여한다.

운영체제와 브라우저는 이 Code Point를 기반으로 어떤 문자인지 식별하고 화면에 출력한다.

Unicode에는 화면에 보이는 글자가 아닌 텍스트의 방향(Direction)을 제어하는 특수 문자도 존재한다.

RTL(Right-to-Left) 언어에서는 대표적으로 다음 두 문자를 사용한다.

Unicode	이름	의미
U+200E	Left-to-Right Mark (LRM)	이후 텍스트를 LTR 방향으로 처리
U+200F	Right-to-Left Mark (RLM)	이후 텍스트를 RTL 방향으로 처리

이 문자들은 화면에는 보이지 않지만, 브라우저가 문자열의 방향을 계산할 때 사용된다.

RTL(아랍어, 히브리어 등)과 LTR(영어, 숫자 등)이 하나의 문자열 안에 함께 존재하면 브라우저는 HTML에 작성된 순서 그대로 출력하지 않는다.

예를 들어 HTML에 다음과 같이 작성했다고 가정하자.

Version: 1.0 العربية

브라우저에서는

العربية Version : 1.0

처럼 출력될 수 있다.

브라우저는 HTML에 작성된 문자열을 그대로 출력하는 것이 아니라 Unicode Bidirectional(BiDi) 알고리즘을 이용하여 화면에 표시할 순서를 계산한다.

렌더링 과정은 다음과 같다.

HTML 작성
        ↓
문자의 방향 분석
(LTR / RTL / Neutral)
        ↓
방향이 같은 문자끼리 그룹 생성
        ↓
문서 방향(dir)에 맞게 그룹 재배치
        ↓
브라우저 렌더링

즉, 브라우저는 문자를 하나씩 이동시키는 것이 아니라 방향이 같은 문자들을 하나의 그룹(Run)으로 묶은 뒤, 문서 방향에 맞게 그룹 단위로 재배치한다.

이 때문에 HTML에 작성한 순서와 실제 화면에 표시되는 순서가 달라질 수 있다.

예를 들어

Version&#8207;: 1.0 العربية

처럼 U+200F(Right-to-Left Mark)를 추가하면 브라우저는 해당 위치부터 RTL 방향이 시작되는 것으로 인식한다.

그 결과 기존에 생성되었던 방향 그룹(Run)이 다시 계산되고,

العربية 1.0 :Version

처럼 이전과 다른 순서로 렌더링될 수 있다.

즉, U+200F는 문자를 이동시키는 것이 아니라 BiDi 알고리즘이 방향 그룹(Run)을 생성하는 방식에 영향을 주는 문자이다.