청각 미디어 CSS 속성이란?
문서의 청각(aural) 렌더링은 주로 시각 장애인을 위해 사용됩니다. 화면 대신 스크린 리더나 음성 합성기를 통해 웹 문서의 내용을 소리로 전달할 때, 이러한 CSS 속성들을 활용하면 음성 출력의 방향, 높낮이, 속도, 볼륨 등을 세밀하게 제어할 수 있습니다.
참고로 기존 CSS2의 청각 미디어 속성 그룹은 이후 폐기(deprecated)되었으며, 현재는 W3C의 CSS Speech 모듈이 그 역할을 대신하고 있습니다. 하지만 개념 자체는 여전히 음성 인터페이스 설계에 유용하게 참고됩니다.
주요 청각 미디어 CSS 속성
- azimuth — 소리가 수평 방향(좌우)으로 어느 위치에서 들려야 하는지 설정합니다.
- elevation — 소리가 수직 방향(위아래)으로 어느 위치에서 들려야 하는지 설정합니다.
- cue-after — 요소의 내용을 읽은 후 다른 내용과 구분하기 위해 재생할 소리를 지정합니다.
- cue-before — 요소의 내용을 읽기 전에 다른 내용과 구분하기 위해 재생할 소리를 지정합니다.
- cue — cue-before와 cue-after를 한 번에 설정하는 단축(shorthand) 속성입니다.
- pause-after — 요소의 내용을 읽은 후 적용할 일시 정지(멈춤) 시간을 지정합니다.
- pause-before — 요소의 내용을 읽기 전에 적용할 일시 정지(멈춤) 시간을 지정합니다.
- pause — pause-before와 pause-after를 한 번에 설정하는 단축 속성입니다.
- pitch — 음성의 평균 음높이(피치, 주파수)를 지정합니다.
- pitch-range — 평균 음높이의 변화 폭을 지정합니다.
- play-during — 요소의 내용이 읽히는 동안 배경음으로 재생할 소리를 지정합니다.
- richness — 음성의 풍부함 또는 밝기를 지정합니다.
- speak — 텍스트를 음성으로 렌더링할지 여부와, 그 경우 어떤 방식으로 읽을지 지정합니다.
- speak-numeral — 숫자를 어떻게 읽을지(예: '123'을 '일이삼' 또는 '백이십삼') 제어합니다.
- speak-punctuation — 문장 부호를 어떻게 읽을지 지정합니다.
- speech-rate — 음성의 말하기 속도를 지정합니다.
- stress — 음성 억양 곡선에서 '국부적인 강조점(local peaks)'의 높이를 지정합니다.
- voice-family — 우선순위가 매겨진 음성 계열(voice family) 이름 목록을 지정합니다.
- volume — 음성의 중간(중앙값) 볼륨을 지정합니다.
마무리
이러한 청각 미디어 속성들은 접근성(accessibility)을 고려한 웹 개발에서 중요한 개념입니다. 특히 스크린 리더 사용자에게 더 자연스럽고 명확한 음성 경험을 제공하기 위해 음성의 방향감, 강세, 속도 등을 조절하는 데 활용될 수 있습니다.