CSS speech-rate 속성이란?
speech-rate 속성은 화면 낭독기(screen reader) 등 음성 합성 기술을 통해 텍스트를 읽어줄 때의 말하기 속도(speaking rate)를 지정하는 CSS 속성입니다. 이 속성은 절대값(absolute)과 상대값(relative) 키워드를 모두 사용할 수 있어, 다양한 방식으로 음성 속도를 제어할 수 있습니다.
사용 가능한 값
speech-rate 속성에 지정할 수 있는 값은 다음과 같습니다.
- number(숫자) - 분당 단어 수(words per minute)로 말하기 속도를 직접 지정합니다. 예를 들어
speech-rate: 200;처럼 숫자 값만 입력하면 됩니다. - x-slow - 매우 느린 속도로, 분당 80단어에 해당합니다.
- slow - 느린 속도로, 분당 120단어에 해당합니다.
- medium - 보통 속도이며 기본값으로, 분당 180~200단어에 해당합니다.
- fast - 빠른 속도로, 분당 300단어에 해당합니다.
- x-fast - 매우 빠른 속도로, 분당 500단어에 해당합니다.
- faster - 현재 설정된 음성 속도에 분당 40단어를 더해 더 빠르게 만듭니다.
- slower - 현재 설정된 음성 속도에서 분당 40단어를 빼서 더 느리게 만듭니다.
속성 값 비교표
주요 키워드 값과 실제 속도의 대응 관계는 아래와 같습니다.
| 키워드 | 말하기 속도 |
|---|---|
| x-slow | 80 단어/분 |
| slow | 120 단어/분 |
| medium (기본값) | 180 ~ 200 단어/분 |
| fast | 300 단어/분 |
| x-fast | 500 단어/분 |
활용 예시
다음은 speech-rate 속성을 사용하는 간단한 예시입니다.
p.slow-speech { speech-rate: slow; } /* 분당 120단어 */ p.fast-speech { speech-rate: fast; } /* 분당 300단어 */ p.custom-speed { speech-rate: 150; } /* 분당 150단어 직접 지정 */ p.slightly-faster { speech-rate: faster; } /* 현재 속도 + 40단어/분 */ 참고 사항
speech-rate 속성은 주로 음성 브라우저나 스크린 리더 환경에서 활용되며, 일반적인 시각 웹 브라우저에서는 시각적 효과가 나타나지 않습니다. 웹 접근성(accessibility)을 높이기 위해 청각 콘텐츠 소비자에게 유용하게 사용될 수 있습니다. 또한 faster와 slower 같은 상대 키워드는 부모 요소의 속성 값을 기준으로 계산되므로, 상속 구조를 고려하여 사용하는 것이 좋습니다.