웹 표준과 크로스 브라우징
웹 표준이란?
웹 표준이란 표준화 단체인 W3C가 권고한 표준안으로, 웹에서 표준적으로 사용되는 기술, 규칙을 의미한다. 웹 문서의 구조(HTML)와 표현(CSS), 동작(JavaScript)을 구분해서 사용하는 것을 말한다. 즉 웹 표준은 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 웹 사이트를 보이게 하는 것이다.
웹 표준의 장점
그렇다면 웹 표준의 장점은 무엇인가? 바로 효율성이다. 웹 표준이 없던 1990년대 말 ~ 2000년대 초반에는 웹 사이트 개발자는 사실상 익스플로러, 넷스케이프 두 개의 사이트를 만들어야 했다. 웹 표준을 지킴으로서 얻을 수 있는 장점 여섯가지를 꼽자면 아래와 같다.
1. 수정 및 운영 관리 용이
콘텐츠의 올바른 구조화와 CSS로 시각적인 표현을 통일하여 제어하므로 페이지 제작 부담이 감소하고 관리가 용이해진다.
2. 접근성 향상
웹 표준을 이용해 작성한 문서는 다양한 브라우징 환경에 대응할 수 있으며, 휴대폰과 PDA에서도 정상적으로 작동한다. 또한, 장애인 지원용 프로그램에도 도움이 되므로 사용자나 접속 장치의 접근성이 용이해진다.
3. 검색엔진 최적화(SEO)
구조화된 웹 페이지는 검색 로봇 수집을 통해 검색 엔진에 효율적으로 노출될 수 있도록 검색 결과를 최적화할 수 있다.
4. File Size 축소, 서버 저장 공간 절약
효율적인 소스 작성은 파일 사이즈와 서버 공간을 절약할 수 있으며 동시에 화면을 표시하는데 소요되는 시간을 단축한다.
5. 효율적인 마크업
CSS와 HTML 문서를 분리하여 제작할 경우, 불필요한 마크업이 최소화되어 페이지 로딩 속도가 향상된다.
6. 호환성 가능
특정 브라우저에서만 가능했던 요소들이 웹 표준을 준수함으로써 다양한 브라우저에서도 작동한다.
웹표준에 대해 더 자세하고 정확한 가이드라인은 W3C의 공식 문서를 참고하자.
W3C https://www.w3.org/standards/
Standards - W3C
W3C standards define an Open Web Platform for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device. Although the boundaries of
www.w3.org
크로스 브라우징
크로스 브라우징(Cross Browsing)이란 웹 사이트 제작 시 모든 브라우저에서 의도한 대로 올바르게 나오게 하는 작업을 말한다. 크로스 브라우징 작업을 하지 않으면, 각 브라우저마다 화면이 다르게 보이거나 작동하지 않는 문제가 발생할 수 있다. 이를 방지하기 위해, 웹 표준에 맞는 코드 작성과 브라우저 호환성 테스트를 진행해야 한다.
웹 호환성은 표준 웹 기술을 사용하여 운영 체제, 브라우저 등 어느 한 쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로, 웹 사이트를 사용할 때 운영 체제 및 브라우저 간 동일한 결과가 나오도록 하는 웹 상호 운용성의 개념에 웹 표준의 준수를 포함한다.
기본적으로 브라우저를 작업할 때는 가장 높은 점유율을 가지고 있는 브라우저를 채택하는게 중요하다. 그렇다면 대중적으로 사용하는 브라우저는 무엇인가? 아래 사이트는 웹 트래픽을 분석하여 웹 사용 점유율을 계산하는데 사용되는 것으로 유명하다.
스탯 카운터 https://gs.statcounter.com/
Source: StatCounter Global Stats - Browser Market Share
스탯 카운터에서 제공하는 전 세계 브라우저 시장 점유율 차트이다. 2023년 현재 크롬이 65.4%로 압도적이다!
그렇다면 브라우저 호환성 테스트를 할 때 어떤 항목을 체크해야 하는가? 기본적으로 모든 부분을 확인해야 하지만 실제적으로 모든 부분을 테스트하기란 어렵다. 그래서 많은 필수 사항 중 아래와 같이 기능을 분류할 수 있다.
1. 기본 기능
링크, 대화 상자, 메뉴 등의 기본 기능의 작동을 확인해야 한다.
2. 그래픽 사용자 인터페이스
사용자에게 보여지는 모양과 느낌이 올바르게 노출되는지를 확인해야 한다.
3. 응답
애플리케이션이 사용자 작업에 얼마나 잘 반응하는지를 확인해야 한다.
4. 반응형다양한 디바이스 화면 크기와 방향에 맞는지 확인해야 한다.
모질라 https://developer.mozilla.org/ko/docs/Web/CSS
해당 사이트는 기능적인 부분을 확인하고, 사용하는 데에 가장 많이 사용되는 사이트다. 기능을 검색하고, 맨 하단으로 내리면 ‘브라우저 호환성’ 부분에서 어디까지 사용할 수 있는지, 크로스 브라우징 체크가 가능하다.
번외로 웹 표준을 말할 때 빠질 수 없는 HTML5의 소개할까 했는데, 잘 정리된 정보를 발견해 이를 가져왔다. HTML5의 콘텐츠 모델이다.
우선 HTML이란 무엇인가? HTML5는 기존의 HTML에서 새롭게 추가된 요소와 다양한 API들을 통해 한 단계 발전된 웹 구현과 접근성 및 호환성 극대화를 목표로 삼는다.
기존 HTML 기반의 마크업에서는 일반적으로 인라인 요소와 블록 요소로 구분하는 정도의 개념만 존재하였지만, HTML5에서는 좀 더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화하였는데, 이를 HTML5의 콘텐츠 모델(Content Models)이라고 한다.
🍕섹셔닝 루트(Sectioning Root)
<blockquote>, <body>, <detail>, <fieldset>, <figure>, <td>
몇몇 요소는 섹셔닝 루트라는 그룹으로 구분한다. 섹셔닝 루트에 속하는 요소는 section이나 article 요소와 같이 장이나 절과 같은 계층 구조로 구분되지 않고 독립적인 콘텐츠로 분리되기 때문에 아웃라인에 영향을 주지 않는다.
🍕메타데이터 콘텐츠(Metadata Content)
<base>, <link>, <meta>, <noscript>, <script>, <style>, <title>
메타데이터는 문서의 정보를 포함하는 메타데이터, 스타일 표현을 위한 style 요소, 행동을 설정하는 script 요소들을 나타낸다. 기본적인 웹 브라우저에 직접적으로 표시되지 않으며, 문서(document)와 문서 간의 관계를 설정한다.
🍕플로우 콘텐츠(Flow Content)
<a>, <abbr>, <address>, <area>(<map> 요소의 자손인 경우), <article>, <aside>,
<audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>,
<code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>,
<dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>,
<h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>,
<ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <meter>,
<nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>,
<q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>,
<strong>, <style>(scoped 속성이 있는 경우) <sub>, <sup>, <svg>, <table>,
<textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>
HTML5의 콘텐츠 모델 관계도에 표시한 것과 같이 메타데이터 콘텐츠 요소 중 일부를 제외하고 문서 본문에 해당하는 body 요소에 들어가는 대부분의 요소들이 플로우 콘텐츠 모델에 속하며, 이 중에서 area, link, meta, style 요소는 조건부로 플로우 콘텐츠가 된다.
🍕섹셔닝 콘텐츠(Sectioning Content)
<article>, <aside>, <nav>, <section>
섹셔닝 콘텐츠는 대부분 HTML5에서 새롭게 추가된 요소들이며, 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠를 나타낸다. 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가진다.
🍕헤딩 콘텐츠(Heading Content)
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
헤딩 콘텐츠는 섹션의 제목을 나타낸다. 문서의 아웃라인을 고려하여 사용해야 한다.
🍕프레이징 콘텐츠(Phrasing Content)
<a>, <abbr>, <area>(<map> 요소의 자손인 경우), <audio>, <b>, <bdi>, <bdo>, <br>,
<button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>,
<embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>,
<map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>,
<q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video>, <wbr>
프레이징 콘텐츠는 문서의 텍스트를 나타내며, 그 텍스트를 문단 내부 레벨로 마크업하는 요소들이다. 프레이징 콘텐츠가 모여 문단을 구성한다. a 요소와 같은 일부 요소들은 콘텐츠로 다른 요소를 포함하지 않는다는 전제하에 조건부로 프레이징 콘텐츠가 되기도 한다. 프레이징 콘텐츠로 분류되는 요소의 대부분은 플로우 콘텐츠 전체를 포함할 수 없으며, 프레이징 콘텐츠로 분류된 요소만을 포함할 수 있다. 또한 프레이징 콘텐츠는 텍스트 이외에 임베디드 콘텐츠를 포함할 수 있다.
🍕임베디드 콘텐츠(Embedded Content)
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>
임베디드는 ‘포함된’이라는 뜻을 가지고 있으며, 문서 안에 외부 자원(‘외부 리소스’라고 불리기도 함) 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠를 말한다. 외부 자원에는 이미지, 동영상, 플러그인, 아이프레임 콘텐츠 등이 있고, 다른 언어로 된 콘텐츠에는 수학 공식을 표현하는 MathML과 SVG 등이 있다.
🍕인터랙티브 콘텐츠(Interactive Content)
<a>, <audio>(controls 속성이 있는 경우),<button>, <details>, <embed>, <iframe>,
<img>(usemap 속성이 있는 경우), <input>(type 속성이 hidden이 아닌 경우), <keygen>,
<label>, <object>(usemap 속성이 있는 경우), <select>, <textarea>,
<video>(controls 속성이 있는 경우)
인터랙티브 콘텐츠는 사용자가 어떤 기능을 조작할 수 있는 (상호 작용) 콘텐츠를 말한다. 예를 들면, 회원가입 정보를 입력한 후 [확인] 버튼을 누른다거나, 문서에 포함된 동영상을 재생한다거나, 링크를 클릭하는 것 등을 의미한다. audio, img, input, object, video 요소는 이러한 특성을 바탕으로 조건부 인터랙티브 콘텐츠가 된다.
🍕팰퍼블 콘텐츠(Palpable Content)
<a>, <abbr>, <address>, <article>, <aside>, <audio>(controls 속성이 있는 경우),
<base-img>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>,
<data>, <details>, <dfn>, <div>, <embed>, <form>, <fieldset>, <figure>,
<dl>(dl 요소의 자식 요소로 하나 이상의 이름과 값으로 구성되어 있는 경우), <em>, <footer>,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <i>, <iframe>, <img>,
<input>(hidden 속성 값이 아닌 경우), <ins>, <kbd>, <keygen>, <label>, <main>,
<map>, <mark>, <math>, <menu>(toolbar 속성이 있는 경우), <meter>, <nav>, <object>,
<ol>(자식 요소로 하나 이상의 li 요소를 포함한 경우), <output>, <p>, <pre>, <progress>,
<q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <svg>, <table>, <textarea>, <time>, <u>, <var>, <video>, <span>,
<ul>(자식 요소로 하나 이상의 li 요소를 포함한 경우)
팰퍼블 콘텐츠는 기존 콘텐츠 모델에 새롭게 추가된 개념으로 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소를 말하며, 최소한 하나 이상의 요소가 존재해야 한다. 이때 해당 요소는 숨김 상태여서는 안된다.
🍕스크립트 지원 요소(Script-supporting Elements)
<script>
스크립트 지원 요소는 요소 자체가 어떤 정보를 표현하지는 않지만 사용자에 대한 기능 등에 해당하는 스크립트를 지원하는 데 사용된다.
🍕트랜스 패어런트 콘텐츠(Transparent Content)
<table>, <audio>, <canvas>, <del>, <ins>, <map>, <noscript>, <object>, <video>
모든 요소는 콘텐츠 모델을 가지지만, 앞에서 설명한 카테고리에 속하지 않은 경우도 있다. 이러한 요소들을 ‘트랜스 패어런트(Transparent)’라고 한다. 트랜스페어런트 콘텐츠는 투명하다는 의미가 아니라 트랜스 패어런트 콘텐츠 요소와 그 안에 담긴 콘텐츠를 바꾸어 마크업해도 HTML5 문법에 오류가 없다는 것을 의미한다.
참고
https://seulbinim.github.io/WSA/
http://www.smartebiz.kr/new/subpage02_02.html
https://velog.io/@sgyoon/2020-04-12
https://tlsdnjs12.tistory.com/m/57
https://velog.io/@ohmy0418/%EC%9B%B9-%ED%98%B8%ED%99%98%EC%84%B1CrossBrowsing