CSS voice-pitch 속성 완벽 가이드 – 음성 높이 조절하기

CSS voice-pitch 속성이란?

CSS의 voice-pitch 속성은 스크린 리더나 음성 합성(TTS) 기술로 웹 페이지를 읽어줄 때 사용되는 음성의 기본 높이(피치)를 지정하는 속성입니다. 이 속성은 Speech Media Type에 포함되어 있으며, 시각 장애가 있는 사용자가 콘텐츠를 들을 때 목소리 톤을 조절하는 데 활용됩니다.

예를 들어, 제목은 더 높은 음조로, 본문은 낮고 안정적인 음조로 설정하면 청각적으로도 콘텐츠의 구조를 구분하기 쉬워집니다.

기본 문법

voice-pitch: x-low | low | medium | high | x-high;

사용 가능한 값

• x-low – 매우 낮은 음조
• low – 낮은 음조
• medium – 중간 음조 (기본값)
• high – 높은 음조
• x-high – 매우 높은 음조

voice-pitch 사용 예제

다음은 단락 요소(<p>)의 음성 피치를 'low'로 설정하는 간단한 예제입니다.

p {
    voice-pitch: low;
}

위 코드를 적용하면 화면 낭독 소프트웨어가 <p> 태그 내용을 읽을 때 상대적으로 낮은 톤의 목소리로 재생됩니다.

다른 요소에 적용하기

h1 {
    voice-pitch: high;
}

blockquote {
    voice-pitch: x-low;
}

이처럼 요소별로 서로 다른 피치 값을 지정하면, 듣는 사람이 제목과 인용문 등을 음성만으로도 쉽게 구별할 수 있습니다.

참고 사항

voice-pitch 속성은 CSS Speech Module에 정의되어 있지만, 아직 대부분의 주요 브라우저에서 완전히 지원되지 않습니다. 따라서 실무에서는 접근성 향상을 위한 보조 수단으로 이해하고, 실제 음성 출력 환경에서의 동작 여부를 반드시 확인해야 합니다.