CSS voice-range 속성이란?
CSS의 voice-range 속성은 스크린 리더나 음성 합성(TTS) 엔진이 웹 페이지의 텍스트를 소리 내어 읽을 때 사용하는 목소리의 피치(음높이) 범위를 지정하는 속성입니다. 이 속성은 CSS Speech 모듈에 속하며, 주로 접근성 향상을 위해 활용됩니다.
기본 문법
voice-range 속성의 기본 문법은 다음과 같습니다.
voice-range: [[x-low | low | medium | high | x-high]]
위 문법에서 볼 수 있듯이, 피치 범위는 x-low(매우 낮음), low(낮음), medium(중간), high(높음), x-high(매우 높음)와 같은 키워드 값으로 설정할 수 있습니다.
사용 가능한 값의 종류
- 키워드 값: x-low, low, medium, high, x-high
- 주파수 값: Hz 또는 kHz 단위로 직접 지정 (예: 90Hz, 0.15kHz)
- 백분율(%): 상속받은 기본값을 기준으로 상대적으로 조정
- 반음(semitone): st 단위로 음악적 간격만큼 조정
voice-range 속성 사용 예제
다음은 voice-range 속성을 실제로 적용한 예제입니다.
p {
voice-range: 90Hz;
}위 코드에서는 <p> 요소가 음성으로 읽힐 때 피치 범위를 90Hz로 설정하여 다소 낮고 안정적인 목소리 톤으로 들리도록 지정했습니다.
정리
voice-range 속성은 음성 출력 환경에서 콘텐츠를 더욱 자연스럽고 명확하게 전달할 수 있게 도와주는 유용한 도구입니다. 키워드 값뿐만 아니라 Hz, %, st 등 다양한 단위를 지원하므로, 상황에 맞게 세밀하게 조절하여 사용자에게 최적화된 청각 경험을 제공할 수 있습니다.