bdi element - by. UXKM

2025-05-16

요약 설명
<bdi> 요소는 텍스트의 방향성을 자동으로 감지하여 주변 콘텐츠와의 방향 혼란을 방지하는 시맨틱 태그입니다.
다국어 콘텐츠나 사용자 생성 콘텐츠에서 오른쪽→왼쪽(RTL) 언어(예: 아랍어, 히브리어)와 왼쪽→오른쪽(LTR) 언어(예: 영어, 한글)가 혼합될 때, 해당 부분만 독립적으로 처리하여 시각적 배열이 깨지지 않도록 도와줍니다. 주로 사용자 이름, 외부 데이터, 외국어 문구 등을 삽입할 때 사용되며, 브라우저가 텍스트 방향을 자동으로 판단하여 안전하게 렌더링하게 합니다.

주요 역할 및 특징

다국어 지원을 위한 텍스트 방향 제어
- <bdi> 요소 내부의 텍스트는 자체적인 방향성을 가집니다.
- 부모 요소의 텍스트 방향과 상관없이 독립적인 흐름을 유지합니다.
자동 방향 감지
- <bdi> 내부 텍스트는 브라우저가 자동으로 방향을 감지하여 적용합니다.
- 예를 들어, 영어와 한글은 LTR(왼쪽 → 오른쪽) 방향으로 표시되며, 아랍어와 히브리어는 RTL(오른쪽 → 왼쪽) 방향으로 표시됩니다.
혼합 언어 환경에서 유용
- 다국어 환경(예: 영어 + 아랍어 혼합 텍스트)에서 글자 흐름이 깨지는 문제를 방지할 수 있습니다.
- 특히 사용자 입력 데이터를 표시할 때 중요합니다.
- 예: 유저네임, 국가명, 메시지, 사용자 입력을 포함하는 채팅 UI 등
다른 요소와의 관계
<bdi>는 텍스트 방향을 자동 감지하지만, <bdo>는 명시적으로 dir 속성을 설정해야 합니다.
기본 스타일 없음
<bdi>는 시각적으로 특별한 효과가 적용되지 않으며, 단순히 텍스트의 방향성을 조정하는 역할만 수행합니다.

CSS 기본 값

<bdi> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							bdi {
								display: inline;
								unicode-bidi: isolate; /* 요소의 텍스트 방향을 독립적으로 설정하여 부모의 영향을 받지 않도록 합니다. */
								direction: inherit;    /* 부모 요소의 direction 값을 그대로 상속받습니다. */
							}

CSS 기본 값 중 서로 상충되는 속성이 동시에 적용되어 있습니다.
해석하자면, unicode-bidi: isolate;을 설정한 요소에서 direction: inherit;을 사용하면 부모의 방향을 상속받으면서도 독립적으로 동작하여, 주변 요소에는 영향을 미치지 않습니다.

기본 문법

							<bdi>텍스트</bdi>

속성

<bdi> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

기본 사용법 (자동 방향 감지)

								<p>사용자 입력: <bdi>مرحبا</bdi></p>

혼합 언어 환경에서의 문제 해결

								<p>사용자 목록:</p>
								<ul>
									<li><bdi>김철수</bdi>: 100점</li>
									<li><bdi>مرحبا</bdi>: 90점</li>
									<li><bdi>John</bdi>: 85점</li>
								</ul>

사용자 입력 데이터 보호

								<p>
									새로운 메시지: <bdi>مرحبا</bdi> 님이 메시지를 보냈습니다.
								</p>

접근성을 고려한 사용

								<p>
									새로운 메시지: <bdi aria-label="사용자 이름">مرحبا</bdi> 님이 메시지를 보냈습니다.
								</p>

주의사항

명시적인 방향 제어가 필요하면 <bdo>와 dir 속성을 사용하는 것이 더 적합할 수 있습니다.
<bdi>를 사용할 때 화면 리더기가 올바르게 읽을 수 있도록 텍스트 방향을 테스트하는 것이 중요합니다. 필요한 경우 lang 속성을 추가하여 언어를 명확하게 지정하고, aria-label을 활용하여 의미를 보완하는 것이 좋습니다.
일반적인 단일 방향 텍스트에서는 불필요하며, 다국어 콘텐츠에서만 사용하세요.