채용사이트의 프론트엔드 엔지니어 공고 글들을 보고 있자면 아래와 같은 말들이 채용 우대사항에 빈번하게 등장합니다.
- 웹 표준, 웹 접근성 지식을 보유하신 분
- 웹 표준, 웹 접근성에 대한 이해와 경험이 있으신 분
- 반응형 디자인, 웹 접근성, 웹 표준을 고려한 UI 개발 경험이 있는 분
- HTML, CSS등 W3C 웹 표준규격에 대한 이해가 있으신 분
- 크로스브라우징, 웹 표준, 웹 접근성에 대한 이해와 경험이 있으신 분
웹 표준과 웹 접근성이 대체 무엇이길래 이렇게 기업들이 우대하고 중요하게 생각하는 걸까요?
항상 커플처럼 붙어 다니며 기업들의 채용 우대사항에 자주 등장하는 웹 표준과 웹 접근성에 대해 한번 알아보겠습니다.
👨🏻⚖️ 웹 표준에 대해 알아봅시다.
웹 표준이 등장한 배경, 웹 표준이 무엇을 의미하는지, 웹 표준의 장점에 대해 알아봅시다.
📌 웹 표준이 등장한 배경
초기
초기(1990년대 후반)에는 넷스케이프와 인터넷 익스플로러가 서로 웹을 장악하기 위한 전쟁을 치열하게 벌였습니다. 이 당시의 개발자들은 넷스케이프, 인터넷 익스플로러 두가지 버전의 페이지를 모두 개발해야 했습니다. 한 번 개발할 때마다 두가지 버전을 모두 개발해야 하니.. 개발자의 워라밸이라는 것은 꿈도 못꾸던 시대였을 것 같습니다. 😢
중기
중기에는 윈도우 98이 인터넷 익스플로러를 기본으로 탑재하기 시작하면서 넷스케이프의 시대는 저물고 인터넷 익스플로러의 독무대가 시작됩니다. 한국의 2010년 1월 익스플로러 점유율은 97%였다고 합니다. 실로 엄청난 독점이라고 할 수 있겠습니다. 저도 어렸을 땐 인터넷 익스플로러 외의 다른 브라우저는 뭐가 있는지도 몰랐던 기억이 있네요.
인터넷 익스플로러는 이런 독무대를 발판 삼아 호환성은 고려하지 않고 자사 진영에만 맞는 기술을 대거 도입하기 시작했는데, 가장 좋은 예시가 Active X입니다. 이는 오직 윈도우에서만 동작하는 플러그인으로, Mac이나 Linux에서는 Active X로 인한 불편함이 매우 컸습니다.
말기
말기에는 새로운 플랫폼인 스마트폰의 시대가 찾아오면서 특정 OS나 특정 브라우저서만 동작하는 웹페이지는 점점 설 자리를 잃어갔고 웹 표준이 점점 중요하게 드러나기 시작했습니다. 글의 맥락을 보면 웹 표준이 무엇을 의미하는지 느낌이 오실 것 같습니다.
📌 웹 표준이란?
웹 표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙입니다.
여기서 동일한 컨텐츠란 완벽히 똑같은 화면을 의미하는 것이 아닌, 모든 플랫폼에서 동등한 수준의 정보에 접근이 가능함을 의미하는 것입니다. 그럼 우리가 지켜야하는 웹 표준은 어떻게 만들어질까요?
웹 표준은 팀 버나스 리를 중심으로 한 world wide consortium이라는 조직의 토론에 의해 결정됩니다. 위 그림처럼 웹 표준이 토론을 통해 확정되는 순서가 있는데, 여기서 step 4, 확정 권고안만이 표준이며 그 외에는 모두 비표준입니다.
비표준의 예시로는 bgsound tag나 blink tag가 있습니다. 이런 tag들은 자사 브라우저의 우수성을 알리기 위한 목적으로 해당 브라우저에서만 작동하거나 사용자에게 불편함을 줄 수 있는 태그이기 때문에 현재는 사용되지 않습니다. 이는 저희가 비표준을 삼가야 하는 이유기도 합니다.
📌 웹 표준의 장점
그럼 웹 표준을 지킨다면 어떤 장점이 있을까요? 앞서 말씀드렸듯이 브라우저와 os에 관계없이 하나의 코드로 모든 플랫폼에 대응할 수 있어 개발자의 입장에서는 개발의 효율성을, 기업 입장에서는 서버 비용의 절감과 운영의 효율성을 가져다 준다는 장점이 있습니다. 또한 아래와 같은 장점들이 있습니다.
1. 검색엔진 최적화
검색엔진 최적화에 용이합니다. 검색엔진 최적화란 웹페이지가 검색 결과에서 더 높은 순위가 나올 수 있도록 하는 작업을 의미합니다. 웹 크롤러 봇은 웹 페이지를 탐색하여 분류하는데, 의미를 가진 시멘틱 태그를 사용하는 등 표준을 지켜 웹페이지를 만들면 크롤러 봇이 좀 더 이해하기 쉬워집니다. 이는 웹 페이지가 검색 결과 순위에서 더 높은 우위를 가져갈 수 있도록 합니다.
2. 개발자가 더 이해하기 쉬운 코드
개발자가 코드를 더 이해하기 쉬워집니다. 웹 크롤러 봇이 웹 페이지의 구조를 더 쉽게 이해할 수 있을 뿐만 아니라 사람도 의미를 가진 태그를 통해 만들어진 구조를 더 이해하기 쉽습니다. 이해하기 쉬운 구조는 개발자의 효율을 높여주므로 큰 장점이라고 볼 수 있습니다.
3. 구조와 표현의 분리
구조와 표현의 분리가 가능합니다. 과거에는 표를 그리기 위한 table 태그를 레이아웃 용도로 사용하여 HTML에 구조와 표현이 뒤섞여 있었습니다. 하지만 현재에 이르러서는 HTML과 같은 마크업 언어는 웹의 구조를, CSS는 웹의 표현을 담당하게 되면서 이해하기도 쉽고 유지보수 측면에서도 굉장한 이점을 보이게 됩니다.가령 웹의 디자인적 요소만 바꿔야 한다면 CSS파일만 변경해주면 되는 식입니다.
🔍 웹 접근성에 대해 알아봅시다.
웹 표준은 웹 접근성을 높인다고 합니다. 웹 표준과 접근성이 함께 따라다니는 이유일 것 같은데요, 웹 접근성은 무엇이고 웹 표준과는 무슨 관계인지 알아봅시다.
📌 웹 접근성이란?
웹 접근성은 장애인이나 노인분들이 모두 개인의 능력에 상관없이 웹페이지의 정보에 접근할 수 있도록 보장하는 것을 의미합니다. 시각장애인이 사용하는 스크린 리더를 예시로 들어 설명하겠습니다. 아래 그림은 NVDA로, 2006년에 출시한 스크린 리더입니다.
시각 장애인은 스크린 리더라는 프로그램으로 웹 페이지를 읽을 수 있습니다. 그 중 NVDA는 무료로 다운받을 수 있어 많이 이용되고 있습니다. 웹 요소간의 이동은 Tab키를 통해 가능합니다. 스크린 리더를 사용하게 되면 Tab키를 누를 때마다 html 대화형 요소에 접근하고 이를 읽어줍니다. 여기서 대화형 요소란, anchor, button, input tag와 같이 사용자와 상호작용할 수 있도록 설계된 tag들을 의미합니다.
📌 웹 접근성을 높이는 방법
웹 접근성을 높이기 위한 쉽고 기본적인 방법은 웹 표준을 지키는 것입니다.
항상 웹 표준이 접근성과 함께 언급되는 이유가 여기에 있습니다. 그렇다면 웹 표준을 지키기만 하면 접근성 문제가 해결될까요?
그렇지 않습니다. 녹내장인 분들을 위해 명암 민감도를 신경써야 하고 글꼴 크기를 확대할 수 있는 방법도 제공하는 등 접근성을 위해 해야하는 일은 많습니다. 하지만 웹 표준은 접근성 보조 도구가 웹을 좀 더 쉽게 이해할 수 있도록 해주므로 접근성은 웹 표준을 지키는 것에서부터 시작된다고 할 수 있습니다.
위에서 언급한 스크린 리더도 웹 표준을 준수한 시멘틱 html 구조를 통해 좀 더 원활한 흐름으로 음성 안내가 가능합니다. 접근성이 나무라면 웹 표준은 나무 뿌리에 비유할 수 있겠습니다.
⭐️ 정리
웹 표준은 하나의 소스로 모든 브라우저나 플랫폼에서 같은 컨텐츠를 볼 수 있도록 하는 웹 개발자들간의 약속입니다. 개발자에게는 개발의 효율성을, 기업에게는 파일의 간소화로 서버 비용 절감을 가져다 주는 장점이 있습니다.
웹 접근성은 개인의 능력에 상관없이 모든 사람에게 웹을 사용할 수 있도록 하는 방법이며 웹 표준을 준수하는 것은 접근성 확보의 기본이 된다고 할 수 있습니다.
여기까지 웹 표준과 웹 접근성이 무엇인지, 왜 중요한지에 대해 알아보았습니다.
이들의 중요성에 대해 알게 되었으니 앞으로는 웹 표준과 접근성을 고려하며 개발하는 습관을 들이도록 해야겠습니다!
이 글은 아래의 영상과 글을 참고하여 작성되었습니다.
참고1: https://www.youtube.com/watch?v=xToJhmAJYCE
참고2: https://codingpark.tistory.com/47
[웹 접근성 테스트] 스크린 리더 추천
한 웹 페이지의 접근성을 확인하기 가장 확실한 방법은 스크린 리더를 통해서 그 웹 페이지를 읽는 것이다. 기본적으로 탭(tab) 테스팅과 각종 접근성 테스트 플러그인 통해서 웹 접근성을 확일
codingpark.tistory.com
'Studying Web Development > Front-end' 카테고리의 다른 글
| Babel, Webpack이란? 쓰는 이유 요약 정리 (0) | 2022.08.10 |
|---|---|
| Reflow와 Repaint가 실행되는 시점 (0) | 2022.07.30 |
| [React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이점 (0) | 2022.07.21 |
| React의 생명 주기(라이프 사이클) (0) | 2022.06.20 |
댓글