CSS 음성 균형(voice-balance) 속성이란?
voice-balance 속성은 스크린 리더나 음성 합성(TTS) 기기가 텍스트를 읽어줄 때, 소리가 어느 방향에서 들리도록 할지를 지정하는 CSS Speech Media 속성입니다. 이를 활용하면 음성 출력을 왼쪽, 오른쪽 또는 중앙 등 원하는 위치로 배치할 수 있어, 청각 중심의 콘텐츠에서 입체적인 음향 효과를 연출할 수 있습니다.
예를 들어 대화 형식의 콘텐츠에서 서로 다른 화자를 좌우로 구분하거나, 특정 요소만 한쪽 채널로 출력해 강조 효과를 주는 등 다양한 방식으로 활용할 수 있습니다.
voice-balance 속성 문법
음성 출력 위치를 왼쪽(left), 중앙(center), 오른쪽(right)으로 설정하는 기본 문법은 다음과 같습니다.
voice-balance: left | center | right;
키워드 값 외에도 -100부터 100까지의 숫자 값을 사용할 수 있습니다. -100은 완전히 왼쪽, 0은 중앙, 100은 완전히 오른쪽을 의미합니다.
voice-balance 속성 사용 예제
다음 예제는 <p> 요소의 음성 출력을 오른쪽으로 설정하는 코드입니다.
p {
voice-balance: right;
}위와 같이 작성하면 해당 단락의 텍스트를 음성으로 읽어줄 때 소리가 오른쪽 스피커에서 출력됩니다.
참고 사항
voice-balance 속성은 CSS Speech Module에 정의되어 있으며, 음성 브라우저(speech media type) 환경에서 적용됩니다. 일반적인 시각 브라우저에서는 시각적 변화가 없으므로, 실제 동작 여부는 사용 중인 보조 기술(Assistive Technology)의 지원 여부에 따라 달라질 수 있습니다.