CSS voice-duration 속성이란?
CSS의 voice-duration 속성은 음성 합성(speech synthesis)이 다른 미디어와 동기화되어야 할 때 사용하는 음성 미디어(Speech Media) 속성입니다. 예를 들어, 화면에 표시되는 애니메이션이나 비디오 콘텐츠와 스크린 리더의 음성 출력 시간을 맞춰야 하는 경우 이 속성을 활용할 수 있습니다.
일반적으로 브라우저는 텍스트의 길이와 voice-rate(말하기 속도)를 기준으로 음성 재생 시간을 자동으로 계산하지만, 특정 요소의 음성 지속 시간을 명시적으로 지정해야 할 때 voice-duration 속성을 사용합니다.
voice-duration 기본 문법과 예제
다음은 voice-duration 속성을 구현하는 기본적인 예제입니다.
p {
voice-duration: 5s;
}위 코드는 모든 <p> 요소의 음성 출력 시간을 5초로 설정합니다. 값에는 초(s), 밀리초(ms) 등 CSS에서 허용하는 시간 단위를 사용할 수 있습니다.
auto 값의 의미와 동작 방식
voice-duration 속성에는 auto 값을 설정할 수도 있습니다.
auto 값을 사용하면 상속받은 voice-rate 값을 기준으로, 해당 텍스트를 음성으로 합성하는 데 필요한 실제 지속 시간에 맞춰 사용 값(used value)이 자동으로 보정됩니다. 즉, 개발자가 임의로 시간을 지정하는 대신, 브라우저가 말하기 속도와 텍스트 분량을 고려하여 가장 자연스러운 재생 시간을 계산하도록 하는 것입니다.
주요 속성값 정리
- <time>: 음성 출력의 지속 시간을 직접 지정합니다 (예: 5s, 300ms).
- auto: 상속된 voice-rate를 기반으로 음성 합성에 필요한 적절한 지속 시간이 자동으로 계산됩니다.
활용 시 주의사항
voice-duration 속성은 CSS Speech 모듈에 정의된 속성으로, 주로 접근성(a11y) 향상을 위해 설계되었습니다. 다만 아직 대부분의 주요 브라우저에서 완전하게 지원되지 않으므로, 실무에서 사용할 경우 브라우저 호환성을 반드시 확인해야 합니다. 스크린 리더 환경에서 멀티미디어 콘텐츠와 음성 안내의 타이밍을 정밀하게 맞추고 싶다면, 이 속성의 지원 여부와 함께 ARIA 관련 기술을 병행하는 것이 좋습니다.