HTML, CSS, JS는 웹 개발자들뿐만 아니라 웹 개발에 관심이 있는 모든 사람이 알고 있는 웹 페이지의 구성 요소들입니다.

HTML은 페이지의 구조를 표현하고, CSS는 페이지를 시각적으로 꾸며주고, JS는 페이지를 동적으로 만들어주는 역할을 한다고 알고 계실 겁니다. (저도 얼마 전까지만 해도 이렇게 알고 있었습니다. 😅)

하지만 웹 표준을 정의하는 W3C에서는 이 셋의 정의 중에서 CSS의 역할을 조금 다르게 정의하고 있습니다. W3C에서 정의하고 있는 HTML과 CSS의 정의는 다음과 같습니다. 원문 참고

HTMLand CSS are two of the core technologies for building Web pages.
HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices.

-----------

HTML과 CSS는 웹 페이지를 만들기 위한 두 가지 핵심 기술이다.
HTML은 페이지의 구조, CSS는 (시각적, 청각적) 레이아웃을 다양한 장치에 제공한다.

뭔가 이상한 점을 느끼지 않으셨나요? 저도 바로 그 부분에서 '내가 방금 뭘 읽은 거지?'라고 생각했습니다. 바로 "CSS는 청각적 레이아웃을 제공한다."라는 부분입니다. 웹 개발을 적지 않은 기간 동안 해왔지만, 단 한 번도 CSS에 청각 효과를 다루는 속성을 본 적이 없었기 때문에 이해가 되지 않았습니다. CSS가 청각적인 부분을 다루게 된 배경을 살펴보시죠.

청각 컨텐츠로의 변환

웹 페이지는 보통 브라우저를 통해서 시각적으로 볼 수 있는 형태로 변환된 이후에 컨텐츠로서 소비됩니다. 하지만 HTML은 브라우저에서만 사용될 수 있게 만들어지지 않았습니다. 위에서 언급한 W3C에서 정의한 HTML과 CSS의 역할에서 볼 수 있다시피 HTML은 다양한 장치에서 제공될 수 있도록 설계됐습니다. (최초의 목적은 과학 관련 문서의 공유였지만 현재를 기준으로) HTML을 사용할 수 있는 브라우저가 아닌 다른 기기의 대표적인 예시에는 스크린 리더가 있다.

스크린 리더는 페이지 내에서 사용된 텍스트를 소리로 변환해주는 TTS 기능을 가지고 있습니다. 이렇게 HTML이 시각적인 형태가 아니라 청각적인 형태로 변환될 때 제어하기 위해서 청각 속성을 사용할 수 있습니다.

청각 속성의 역사

CSS 청각 속성은 CSS1 스펙의 부록에서 확장성의 일환으로 언급되고 최초의 CSS2 스펙에서 처음으로 등장합니다.

We expect to see extensions of CSS in several directions:
- support for non-visual media: work is in the process to add a list of properties
 and corresponding values to support speech and braille output

---

우리는 CSS의 확장을 다음과 같은 여러 방향으로 볼 수 있을 것으로 기대한다.
- 비시각적 미디어에 대한 지원: 음성 및 점자 출력을 지원하기 위해
 속성과 해당 값 목록을 추가하는 작업이 진행 중이다.

최초의 청각 속성은 반응형 레이아웃을 위한 속성으로 알려진 media 쿼리의 속성 중 하나로 등장했습니다.

@media speech {
  body { voice-family: Paul }
}

하지만 청각 속성의 정의는 CSS2 스펙에 존재하지만, 부록에서 스펙이 정의되어 스펙을 따르고 있는 브라우저들에서 구현이 필수적이지 않습니다.

CSS3에 와서는 부록이 아닌 별개의 모듈로 문서가 관리되고 있긴 하지만 CSS2 스펙과 마찬가지로 정식 스펙은 아니고 Candidate Recommendation으로서 문서화되어 있습니다.

결론

사실 청각 속성은 일반적인 프로젝트를 진행하면서 접하기 어렵고 사용하기도 어려운 속성입니다. 이런 기능이 있다는 걸 처음 알게 됐을 때 신기하다는 생각을 가장 먼저 했습니다.

이후에는 CSS에서 왜 이런 속성을 다뤄야 할까 이해가 잘되지 않았지만, 다시 생각해보니 HTML이 시각적인 형태로 변환될 때 시각적인 효과를 줄 수 있다면 청각적인 형태로 변환될 때에는 청각적인 효과를 줄 수 있어야 한다는 건 당연한 일이었습니다.

아직도 모르는 것이 너무 많다는 것을 다시금 느끼고, 역시 웹 표준을 가까이 해야겠다는 생각이 드네요 :)
댓글은 언제나 환영합니다 😋