개요

우리가 사용하는 웹 브라우저는 여러가지가 있다. 크롬, 사파리, 오페라, 삼성 등등..
나는 노트북에선 크롬을 사용하고 다른 노트북에선 웨일 브라우저를 사용하고 아이폰에선 사파리를 사용하고있다.

만약 어떤 웹사이트가 크롬에서는 잘 작동하는데 웨일에선 잘 작동하지 않는다고 하면 상당히 불편할 것이다. 그래서 어떤 브라우저를 이용하더라도 일관되게 작동하도록 하는 것을 크로스 브라우징이라고 한다.

여기에는 단순히 불편한 것 외에도 깊은 고민이 담긴 가치가 숨어있다.

웹 접근성

WWW의 창시자 버너스리는 이렇게 말했다.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

전 세계에 결쳐 퍼져있는 망이며 이를 통해 정보를 공유한다. 이것이 웹의 핵심이다.
만약 웹에 접속한 유저가 시각장애를 가진 유저라면 어떨까?
만약 오래된 컴퓨터를 이용해서 인터넷을 사용하는 노인이라면 어떨까?

우리가 보고 얻는 정보들의 극히 일부만 습득할 수 있을 것이다. 이러한 차이는 정보의 격차를 낳는다.
웹 접근성은 장애가 있거나 나이가 많은 사람이건 동등하게 웹을 사용할 수 있도록 웹사이트, 도구 및 기술을 설계하고 개발하는 것을 의미한다.
웹 접근성의 일환으로 크로스 브라우징 개념이 등장했다.

"Cross Browsing이란
적어도 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게
만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제
작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여
모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가
이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹브라우저 뿐만 아니라 모바
일, 임베디드 기기, 홈네트워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자,
노약자, 어린이 등 다양한 사용자가 존재하기 때문이다." 

> 한국소프트웨어진흥원 공개SW지원센터

그렇다면 크로스 브라우징이란 모든 브라우저에서 100% 똑같이 보이는 것을 의미하는 걸까?
핵심은 상호 호환성이다.
크로스 브라우징은 동일성이 아닌 동등성을 의미한다.
어느 한 브라우저에 치우치지 않은 표준을 사용하여 웹 페이지를 제작하는 것으로 동등한 수준의 정보와 기능을 제공할 수 있다.

Active-X

지금의 웹사이트에서는 동영상과 음악을 감상하고 여러 업무를 보는등 기능을 사용할 수 있다.
그러나 웹 브라우저와 html 문서만으로는 이 모든 기능을 원활히 이용할 수 없었고 이를 해결하기 위해 추가적인 프로그램을 설치하여 웹 브라우저의 기능을 확장시켰다.

이를 플러그인이라고 한다.
대표적인 플러그인은 Active-X이다.

한 번 Active-X를 설치하면 사용자 PC에서 이를 실행하여 웹 사이트와 연동되어 여러 기능을 사용할 수 있다는 장점이 있다.
하지만 Active-X는 마이크로소프트의 웹브라우저인 인터넷 익스플로러용 플러그인으로 다른 브라우저에서는 사용할 수 없다는 단점이 있었다. 그리고 윈도우 데스크탑이 아닌 모바일 기기에서는 이를 전혀 사용할 수 없다는 한계가 있었다.

HTML5는 이러한 맥락에서 등장한 새로운 표준이다.
이미 눈치챘을 수 있지만 어느 순간부터 Active-x를 설치하라는 문구가 점점 줄어들다가 없어졌다. 아직 남아있는 곳은 은행 사이트 정도이다.
이는 HTML5로 넘어오면서 여러 부가 기능을 제공함으로써 플러그인을 사용하지 않고도 웹 서비스를 제공할 수 있게 되었기 때문이다.

외부 기술에 의존하고있던 것을 걷어내고 CSS3와 JS의 API를 통한 기능 확장으로 웹이 외부 기술에 의존했던 것을 해결하여 웹 접근성을 높였다.
따라서 표준인 HTML5를 이용해서 개발된 웹사이트는 다른 브라우저나 운영체제를 사용하더라도 동일하게 웹 페이지를 표시할 수 있고 플러그인이 없어도 미디어 재생이 가능해졌다.

HTML5의 특징

  • 시멘틱 태그의 등장
    • html5이전엔 태그 자체에 의미가 없는 div나 span을 많이 사용해왔다. 이는 태그들의 의미를 알기 힘들게했고 웹 접근성 측면에서도 단점으로 작용했다.
    • html5에서는 여러 시멘틱한 태그들이 추가되었는데 예를 들어 header, section, article등이 있다.(원래는 전부 div로 작성되던 것들)
    • 이는 컴퓨터가 html 구조를 이해할 수 있게하고 시각장애를 가진 사용자에게 웹 사이트의 구조를 알려주어 웹 접근성을 높이는 효과가 있다.
  • 미디어 태그의 등장
    • 비디오 및 오디오 기능을 자체적으로 지원한다.
    • 2차원 및 3차원 그래픽 기능을 지원한다.
    • SVG 등장.
    • SVG는 2차원 그래픽을 표현하기 위해 XML을 기반으로 만들어진 언어로 W3C에 의해 제안된 XML 그래픽 표준이다.
    • 이를 이용해서 다양한 응용이 가능하다.

시멘틱 태그에 대한 고찰

html 자체는 애초에 연구소에서 문서를 작성하고 공유하기 위한 개념으로 위키백과와 같은 문서의 구조를 기본으로 설계되었다. SEO및 웹 접근성을 위해 이러한 태그들을 적극 활용하는 것이 좋다. 시각장애가 있는 사용자라면 현재 페이지의 구조를 파악할 수 있게 해준다.

image 위와 같은 레이아웃을 기본으로 가지고 그림을 봤을 때 전형적인 위키백과의 형식을 가진다.

이런 시멘틱 태그들을 의미론적으로 사용할 수 있으려면 일종의 지침을 따라야한다. main,article, section과 같은 태그는 헤딩 태그를 포함해야 시멘틱하게 사용할 수 있다.
그러나 현대의 웹페이지는 상당히 발전해서 이런 구조에서 벗어난 경우가 많다.

이런 이유로 우리가 사용하는 웹사이트에서 이런 태그들을 사용하고 있어도 제대로 사용하고 있는 경우가 드물다고 생각한다.