매일 인터넷을 통해 웹 페이지들을 방문하고, 사용하다보면 문득 드는 의문점이 있다.
사람마다 쓰는 기기도 다르고 브라우저도 다른데, 어떻게 모든 웹 사이트가 똑같이 보여질 수 있는걸까?
이는 대부분의 웹 페이지들이 "웹 표준"이라는 것을 잘 지키고 있기 때문이다.
그렇다면 웹 표준이란 정확히 무엇을 말하는걸까?
인터넷과 웹 표준
다음 문구를 살펴보자.
웹이란 인터넷을 포함하는 개념이다.
틀린 말이다.
인터넷은 컴퓨터로 연결하여 TCP/IP라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크이다.
반면 웹은 월드 와이드 웹(World Wide Web, WWW)의 약자로 인터넷을 통해 사람들이 문서, 이미지, 영상 등 다양한 정보를 공유할 수 있는 전 세계적인 정보 공간이다.
따라서 위 문구는 아래와 같이 수정해야 된다.
웹은 인터넷 상에서 동작하는 하나의 서비스이다.
많은 사람들이 오해하는 것이 이상하지 않을 정도로 웹은 인터넷 구조의 절대적 위치를 차지하고 있다.
따라서 다양한 사람들이 전 세계적으로 사용하는만큼 각자 다른 방법으로 웹을 이용할 수 있다. 즉, 사용자 환경이 사용하는 기기(스마트폰, 태블릿, PC), 브라우저(크롬, 사파리, 파이어폭스) 등의 요인에 의해 바뀔 수 있다는 말이다.
예를 들어 온라인 쇼핑몰 웹 페이지에서 장바구니 기능을 추가했다고 생각해보자.
여기서 문제가 발생해 크롬 브라우저에서만 장바구니 기능을 정상적으로 사용할 수 있고 다른 브라우저에서 해당 기능을 사용할 수 없다면 어떻게 될까? 아마 많은 유저들이 불만을 제기하고 해당 웹 사이트를 찾는 빈도가 줄어들 것이다.
하지만 모든 온라인 쇼핑몰이 같은 문제를 겪게 된다면?
많은 사람들이 큰 혼란에 빠질 것이다.
위와 같은 일을 방지하기 위해 개발자들은 각 브라우저에 호환되는 별개의 웹 사이트를 만들고, 해당 브라우저에 맞는 판별 코드 등을 작성해야 했기 때문에 개발에 많은 시간이 들었다. 이러한 수고를 없애고 웹 개발의 형식을 통일시킨 것이 바로 웹 표준이다.
위키백과에서는 웹 표준을 "월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가키리는 일반적인 용어"로 정의한다. 이는 다소 포괄적인 의미로, 다양한 문서들이 웹 표준으로 지정될 수 있다. 때문에 일반적으로 '웹 표준'이란 웹 표준을 개발하는 국제 협회 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 말한다.
웹 개발에 사용되는 HTML, CSS, 자바스크립트(JS)도 웹 표준을 통해 사용 방법이 정리되어 화면의 구조, 표현, 동작을 각각 담당하게 되었다.
이는 웹 표준의 장점과도 연관이 있는데, 각 영역의 분리를 통해 유지 보수가 용이해지고 코드가 경량화되어 트래픽 비용이 감소하는 효과도 생겼기 때문이다. 이 외에도 웹 호환성이 확보되고, 검색 효율성이 증대되는 등 여러가지 부서적인 효과를 누릴 수 있으므로 웹 표준을 준수한 웹 페이지를 개발하기 위해서 노력해야 한다.
그렇다면 웹 표준을 준수하기 위해서는 어떻게 해야 될까?
일반적으로 "웹 표준을 준수한다"고 말하기 위해선 앞서 언급한 HTML, CSS, JS를 올바르게 사용하고 있어야 한다.
CSS나 JS의 경우 다양한 문법들을 접해보았기 때문에 "올바르게 사용해야 한다"는 말이 다소 익숙하지만, HTML에도 지켜야 할 웹 표준이 있다는 것이 의아할 수 있다. 우리가 배운 HTML이란 웹 페이지의 구성에 있어 기본적인 뼈대를 제공하는 마크업 언어 정도로 정의할 수 있기 때문이다.
하지만 HTML은 웹 표준을 지키는데 있어 큰 비중을 차지하고 있으며, 웹 표준을 준수하기 위해서는 반드시 고려해야 하는 기능으로 시맨틱 HTML과 웹 접근성을 포함하고 있다.
시맨틱Semantic HTML
시맨틱 HTML이란 HTML이 구조를 만드는 것을 넘어 의미를 갖도록(Semantic) 만든 HTML을 말한다.
그렇다면 HTML이 의미를 갖는다는 것은 무슨 말일까?
<div>
<div>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
</div>
<div>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse
molestiae quisquam beatae assumenda. Autem voluptatum, non qui nulla
dignissimos voluptas hic quae accusamus error ut impedit quo. Beatae,
ratione soluta.
</div>
</div>
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
tempora saepe voluptatibus aperiam error, repellendus officiis iste
nobis
</div>
</div>
위 코드를 통해 웹 페이지의 구성을 파악할 수 있을까?
특정 화면의 구조를 구성하고 있지만, <div> 요소와 <span> 요소만을 사용했고 안에 들어가는 내용이 명시되어 있지 않기 때문에 각 요소들이 어떤 역할을 할지 특정할 수 없다.
그렇다면 아래 코드는 어떨까?
<body>
<header>
<nav>Lorem ipsum dolor sit amet consectetur adipisicing elit.</nav>
</header>
<article>
<figure>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse molestiae
quisquam beatae assumenda. Autem voluptatum, non qui nulla dignissimos
voluptas hic quae accusamus error ut impedit quo. Beatae, ratione
soluta.
</figure>
</article>
<footer>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
tempora saepe voluptatibus aperiam error, repellendus officiis iste nobis
</footer>
</body>
같은 코드임에도 이전 코드에 비해 각 HTML 요소들의 역할과 방향성을 명확하게 파악할 수 있다. 이처럼 시맨틱 요소를 적절하게 사용하여 구성한 HTML을 시맨틱 HTML이라고 한다.
앞선 두 코드를 이미지화 한다면 위와 같다. 각 요소들의 역할이 명확하게 정해져 있는 오른쪽 예시가 사용자에게 보다 좋은 UX를 제공할 수 있다.
위 예시들을 통해 시맨틱한 HTML을 사용하는 이유를 정리하자면 다음과 같다.
1. 원활한 소통
앞선 코드들보다 더 복잡한 웹 페이지를 구성할 때, <div>와 <span> 요소들로만 HTML 코드를 작성한다면 각 요소가 가진 기능을 파악할 수 없기 때문에 이를 위한 주석을 작성하거나 id 또는 class 속성을 통해 표기해야 한다. 또한, id나 class 이름은 어떻게 지을 것인지 등을 의논하기 위한 시간도 필요로 한다. 따라서 시맨틱 HTML을 구성함으로서 불필요한 개발 시간을 단축할 수 있다.
2. 검색 효율성
검색 엔진은 HTML 코드를 통해 문서의 구조를 파악한다. <div>와 <span> 요소로만 문서를 구성할 경우 검색 엔진은 모든 요소가 비슷한 중요도의 내용을 담고 있다고 판단하기 때문에 상위 검색 결과에 노출되기 어렵다. 반면 시맨틱 요소를 사용해 문서를 구성할 경우 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있기 때문에 우선 순위가 높다고 파악된 페이지가 검색 결과 상단에 표시되어 검색 효율성을 높일 수 있다.
3. 웹 접근성
웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동등한 수준의 정보를 제공할 수 있는지 판단하는 항목이다. 시맨틱 HTML은 화면의 구조에 대한 정보까지 담고 있기 때문에 콘텐츠를 좀 더 정확하게 전달할 수 있어 웹 접근성을 향상 시킬 수 있다.
위 장점들을 온전히 누리기 위해선 HTML 구조에서 시맨틱 요소가 어떻게 사용되고 있는지 잘 알고 있어야 하며, 어떤 시맨틱 요소들이 사용되는지 파악하고 있어야 한다.
자주 사용되는 시맨틱 요소들은 다음과 같다.
| 요소 | 역할 |
| <header> | 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소 |
| <nav> | 메뉴, 목차 등에 사용되는 요소 |
| <aside> | 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소 |
| <main> | 문서의 메인이 되는 주요 콘텐츠를 담는 요소 |
| <article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소 |
| <section> | 문서의 독립적인 구획을 나타내는 요소 |
| <hgroup> | 제목을 표시할 때 사용하는 요소 (<h1> ~ <h6> 요소들이 hgroup에 해당된다) |
| <footer> | 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소 |
웹 접근성(Web Accessibility)과 웹 접근성 향상법
앞서 언급한대로 웹 표준을 준수하기 위해서는 시맨틱 HTML 구성과 웹 접근성을 고려해야 한다고 했으며, 시맨틱 HTML을 통해 웹 접근성을 향상시킬 수 있다고 했다. 이처럼 웹 표준을 포함한 웹 개발 전반에서는 웹 접근성을 중요시 하고 있다.
웹 접근성이란 단순히 웹에 손쉽게 접근해 사용하는 것이 아닌, 웹에 접근했을 때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받을 수 있는지 판단하는 항목이다.
웹 접근성의 중요성을 보다 잘 이해하기 위해 한 가지 예시를 들어보자.
2022년에 들어 가장 후회하면서 반복하는 일 중 하나가 잠 들기 전에 웹 콘텐츠(유튜브 등)를 보는 것이다. 매일 밤 짧은 동영상을 "하나만 보고 자야지"라는 마음가짐으로 더 많은 시간을 쓰게 경우가 빈번하게 일어나는데, 이는 많은 이들에게 흔한 현상일 것이다.
하지만 만약 잘 보던 동영상에서 갑자기 소리가 들리지 않는다면 어떨까?
자막을 비롯해 동영상을 이해하기 위한 설명 글 등이 있다면 다행이지만, 그렇지 않다면 해당 동영상이 무슨 내용인지 이해하기 매우 힘들 것이다.
이런 상상만으로도 답답한 상황을 매일 겪는 사람들이 있다.
단지 몸이 조금 불편하다는 이유로 그렇지 않은 사람들과 동등한 수준의 정보를 제공받지 못받는 것이다. 또한, 화면을 볼 수 없거나, 소리를 들을 수 없는 등 누구든지 정보 접근에 제한이 발생하는 상황을 맞이할 수도 있다. 이를 대비해 누구든지 어떤 상황에서든 동등한 수준의 정보를 얻을 수 있는 정보의 평등을 추구해야 한다.
웹 개발자이자 서비스 제공자로서, 모든 사용자의 사용 환경을 고려하는 것은 어찌보면 당연한 일이 아닐까 싶다.
그렇다면 앞서 언급한 시맨틱한 HTML외에 웹 접근성을 높일 수 있는 방법이 무엇이 있을까?
1. 웹 콘텐츠 접근성 지침 (WCGA)
웹 콘텐츠 접근성 지침이란 말 그대로 웹 접근성을 향상시키기 위해 W3C에서 제공하고 있는 가이드 라인이다. 이를 기반으로 한국 실정에 맞게 수정한 '한국형 웹 콘텐츠 접근성 지침 2.1'도 있는데 이를 통해 웹 접근성을 향상시키기 위해 참고하고 준수해야 할 사항들이 정리되어 있다.
이 포스팅에서 모든 내용을 심도있고 자세하게 설명하기에는 한계가 있으므로, 간략하게 큰 맥락만 요약하도록 하겠다.
- 인식의 용이성(Perceivable)
- 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
- 적절한 대체 텍스트, 자막 제공, 색에 무관한 콘텐츠 인식, 명확한 지시사항 제공, 텍스트 콘텐츠 명도 대비, 자동 재생 금지, 콘텐츠 간 구분)
- 운용의 용이성(Operable)
- 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
- 키보드 사용 보장, 초점 이동, 조작 가능성, 응답 시간 조절, 정지 기능 제공, 깜박임과 번쩍임 사용 제한, 반본 영역 건너뛰기, 제목 제공, 적절한 링크 텍스트
- 이해의 용이성(Understandable)
- 콘텐츠는 이해할 수 있어야 한다.
- 기본 언어 표시, 사용자 요구에 따른 실행, 콘텐츠 선형 구조, 표의 구성, 레이블 제공, 오류 정정
- 견고성(Robust)
- 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
- 마크업 오류 방지, 웹 에플리케이션 접근성 준수
단, 오해하지 말자.
올바른 웹 접근성을 제공하고 지키기 위해서는 이 포스팅을 통해서는 요약하기에는 너무 많은 양을 차지할만큼 다양한 요소들을 고려해야 하므로 전혀 간단하지 않다.
2. WAI-ARIA
WAI-ARIA란 WAI와 ARIA를 합친 단어로, WAI (Web Accessibility Initiative)라는 W3C에서 웹 접근성을 담당하는 기관에서 RIA (Rich Internet Applications) 환경에서의 웹 접근성 기술 규격을 말한다. 여기에서 RIA란 별도의 프로그램 설치 없이 웹 브라우저를 통해 사용할 수 있는 편리성과 프로그램을 직접 설치해 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 모두 가지고 있는 웹 애플리케이션(보통 SPA:Single Page Application)을 의미한다.
쉽게 말해, 웹 접근성을 향상 시키기 위한 또 다른 가이드(지침)을 의미한다.
우리는 시맨틱 HTML을 어떻게 구성하고 사용하는가에 대해 간략하게 알아보았다. WAI-ARIA는 이런 HTML 요소에 추가적인 의미 부여를 할 수 있게 해준다.
여기서 주의해야할 점으로 WAI-ARIA는 "시맨틱 요소만으로 원활한 페이지 탐색이 어려운 경우"에만 사용해야 한다는 점이다. 즉, 시맨틱 요소만으로 충분히 웹 페이지 설명이 가능하다면 사용하지 않아야 한다.
또한, RIA환경에 충족하는 SPA를 사용할 때 새로고침 없이 페이지의 내용이 바뀌더라도 영역에 대한 정보를 전달할 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다.
WAI-ARIA를 사용하는 방법은 간단한데, HTML 태그 내부에 속성(attribute)을 추가해 의미를 부여할 수 있다. WAI-ARIA 속성에는 크게 세 가지 분류가 있다.
<div role="alert">div지만 alert로 사용되는 요소. 버튼을 누르면 이 창이 나와요.</div>1. 역할(role) : HTML 요소의 역할을 정의하는 속성
- HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성
- caption, list, group, article, tab, slider, banner, navigation, alert 등 다양한 형식의 역할을 나타낼 수 있지만, HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 다시 설명해줄 필요 없다.
<div role="alert">div지만 alert로 사용되는 요소. 버튼을 누르면 이 창이 나와요.</div>2. 속성(property) : 요소의 특징을 정의하는 속성(attribute)
- aria-label: 요소에 라벨을 붙여주는 기능으로, 보통 상호작용을 위한 요소의 설명에 사용한다. 웹 페이지에서 사용하는 버튼들이 가장 대표적인 예시로, 해당 버튼이 어떤 기능을 하는지 설명을 해주기 위해 사용할 수 있다. 단, 예시에서 버튼의 경우 이미 해당 요소가 "버튼"이라는 설명이 있기 때문에 aria-label에 "버튼"이라는 부연 설명은 하지 않는다.
<button aria-label="menu" class="burger"></button>- aria-live: 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시할 때 사용한다. 이를 통해 사용자가 해당 요소가 동적인 요소인지 알 수 있으며, 실시간으로 갱신되는 내용을 알려줘 접근성에 도움이 될 수 있다.
3. 상태(state) : 요소의 현재 상태를 나타내는 속성
- 여러 개의 선택 가능한 요소중에서 선택 상태인 요소를 표시할 수 있으며, aria-selected, aria-checked, aria-current 등이 있다.
<div role="listbox">
<li role="checkbox" aria-checked="true">Tab1</li>
<li role="checkbox" aria-checked="false">Tab2</li>
<li role="checkbox" aria-checked="false">Tab3</li>
</div>
위 예시들은 빙산의 일각으로 WAI-ARIA에는 다양한 역할, 속성, 상태들이 있다. 자세한 내용은 MDN 문서를 참조하자.
참조
- 위키백과: 웹 표준
- MDN: Semantics , WAI-ARIA basics, ARIA 사용하기
- W3C: WCAG
- 사진 참조: Jungle Disk
'Front-End > 웹 (Web)' 카테고리의 다른 글
| React(SPA)에서 Next.js(SSR)를 써야하는 이유 (0) | 2023.07.21 |
|---|---|
| [HTTP/네트워크] REST API (0) | 2022.11.05 |
| [Web] UI와 UX (0) | 2022.11.03 |
| [HTTP/네트워크] HTTP와 브라우저 작동 원리 (0) | 2022.10.19 |
| [HTTP/네트워크] 웹 애플리케이션 구조 (0) | 2022.10.17 |
댓글