HTML5 호환성 가이드

HTML5은 각 브라우저 벤더들이 참여해서 개발하는데, 각 기능들마다 표준안에 대한 논의가 이루어지는 속도가 다르고 각 브라우저 벤더가 독자적으로 개발하는 기술들도 있기 때문에 브라우저들마다 HTML을 지원하는 사양이 다르다. 그래서 각 브라우저는 주기적인 업데이트로 기존의 문제점을 해결하고 새로운 기능을 추가해서 가능한 한 최신의 상태를 유지한다. 하지만 인터넷 익스플로러 8 버전이나 9 버전처럼 업데이트 지원이 종료된 브라우저를 계속 사용하는 사람들도 있기 때문에 경우에 따라서 최신 기술에 대한 하위 호환성을 고려해야 한다.
한국의 관공서와 기업들은 인터넷 익스플로러에 결합된 ActiveX를 기반으로 프로그램을 개발했었는데, 인터넷 익스플로러가 최신 버전으로 업데이트될 때마다 큰 폭으로 변하다 보니 이전 버전의 ActiveX를 기반으로 제작했던 프로그램들이 작동하지 않는 경우가 있었다. 그래서 뒤늦게 인터넷 익스플로러 버전을 다운 그레이드 하거나 아예 인터넷 익스플로러 자동 업데이트를 막아 두는 경우가 많았다. 그리고 인터넷 익스플로러는 윈도우 OS 버전에 따라서 사용 가능한 버전이 제한되었는데, 사용하는 프로그램이 최신 윈도우 OS를 지원하지 않아서 어쩔 수 없이 윈도우 OS 구 버전을 사용하거나 불법 OS를 설치해서 윈도우 OS를 업데이트할 수 없어서 인터넷 익스플로러 최신 버전을 사용하지 못하는 경우도 많았다. 이처럼 사람들마다 사용하는 인터넷 익스플로러 버전이 다양한 시기가 있었고, 윈도우 7 시절을 지나 윈도우 8 시절을 거쳐서 2015년에 윈도우 10이 출시한 이후까지 지속되었다.
2013년에 공개된 인터넷 익스플로러 11은 HTML5를 지원하지만 2015년에 윈도우 10 용 인터넷 익스플로러 11 버전이 등장한 이후 버전 업데이트가 없기 때문에 라이브 업데이트 중인 HTML5를 정상적으로 지원한다고 볼 수 없다. 2020년 1월 기준 인터넷 익스플로러는 윈도우 10에서만 11버전으로 지원하고 있다. 윈도우 구 버전에서 인터넷 익스플로러 구 버전을 사용할 수 있지만 호환성 문제를 떠나서 보안이 취약하기 때문에 결코 사용해서는 안 된다. 그럼에도 한국에는 인터넷 익스플로러 사용자가 여전히 많은데, 한참 전에 컴퓨터를 구매해서 지금까지 그대로 사용하는 사람들도 많고 기업들이 최신 기술 및 기술자를 등한시하는 경향이 영향을 미친 것으로 추정된다. 현재 인터넷 익스플로러 구 버전을 사용하는 사람들은 전체 비율로 보면 극히 낮지만, 순 방문자로 보면 결코 무시하기 어려운 수치이기 때문에 최대한 많은 사람들에게 올바른 콘텐츠를 제공하려면 HTML5를 사용하지 않는 게 가장 좋고, 최신 기술을 사용하고 싶다면 인터넷 익스플로러 구 버전에 대한 호환성을 고려해야 한다. 단 구 버전에 대한 호환성을 고려할 경우 사이트가 무거워지고, 극히 낮은 비율의 사람들을 제외한 나머지 사람들에 대한 사용자 경험을 저해한다. 최근 전 세계 최대 동영상 공유 플랫폼인 유튜브는 앞으로 인터넷 익스플로러를 지원하지 않겠다고 선언했다. 더 이상 최신 기술을 외면한 채 구형 브라우저를 신경 써주기 어렵다는 것이다. 인터넷 익스플로러는 시장에서 퇴출 수순에 들어섰기 때문에 시간이 흐를수록 점유율은 더 낮아질 것이다. 2020년에 들어서는 인터넷 익스플로러 11 미만의 버전에 대해서는 호환성을 고려할 필요가 없으나 클라이언트의 요구나 사이트의 용도에 따라 구형 브라우저에 대한 호환성을 고려해야 할 수도 있기 때문에 HTML5 호환성 가이드를 작성했다.

주의사항
1. 2020년 5월 26일 기준 정보이다. (최종 업데이트: 2020년 6월 30일)
2. HTML5 호환성과 관련된 모든 정보를 다루지 않는다.
3. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

목차

  1. 브라우저 사용 비율
  2. HTML5 문서 기본 구조
  3. MDN Web Docs의 HTML5 호환성 가이드
  4. 폴리필을 사용한 HTML5 호환성 가이드

브라우저 사용 비율

○ Mobile 브라우저 사용 비율

1. 한국의 모 쇼핑몰에 접속한 순 방문자의 Mobile 브라우저 사용 비율 (앱 제외)

브라우저비율
사파리 13 이상40.231%
크롬 70 이상38.002%
크롬 80 이상9.844%
사파리 7 이상6.099%
사파리 12 이상2.815%
크롬 60 이상1.316%
사파리 11 이상0.651%
크롬 50 이상0.361%
사파리 9 이상0.241%
크롬 30 이상0.128%
크롬 40 이상0.112%
사파리 10 이상0.076%
파이어폭스0.038%
안드로이드 브라우저 4 이상
크롬 28
사파리 8 이상
사파리 14 이상
오페라
0.069%

2019년 12월부터 2020년 5월까지 약 6개월 간 한국의 모 업계 1위 쇼핑몰의 “Mobile로 접속한 순 방문자 수십만명”의 Mobile 브라우저 사용 비율을 보면 아직까지 많은 사람들이 구 버전 브라우저를 사용하고 있다.

2. 한국의 모 쇼핑몰에 접속한 순 방문자의 Mobile 브라우저 사용 비율 (앱 포함)

브라우저비율
쇼핑몰 앱39.594%
네이버 앱24.078%
사파리 13 이상13.336%
크롬 70 이상12.597%
크롬 80 이상3.263%
사파리 7 이상2.022%
카카오톡 앱1.941%
다음 앱1.294%
사파리 12 이상0.933%
크롬 60 이상0.440%
사파리 11 이상0.120%
기타 앱0.076%
크롬 50 이상0.073%
사파리 9 이상0.055%
크롬 30 이상0.042%
크롬 40 이상0.037%
네이트 앱0.036%
사파리 10 이상0.025%
파이어폭스0.013%
안드로이드 브라우저 4 이상
크롬 28
오페라
사파리 8 이상
사파리 14 이상
0.025%

2019년 12월부터 2020년 5월까지 약 6개월 간 한국의 모 업계 1위 쇼핑몰의 “Mobile로 접속한 순 방문자 수백만명”의 Mobile 브라우저 사용 비율을 보면 아직까지 많은 사람들이 구 버전 브라우저를 사용하고 있다. 앱 접속자 정보를 포함해서 브라우저 비율이 상당히 줄어들었지만, 사파리 9까지는 수 천명의 사람들이 이용하고 있기 때문에 구 버전 브라우저를 완전히 무시하기는 어렵다.

○ PC 브라우저 사용 비율

1. 한국의 모 쇼핑몰에 접속한 순 방문자의 PC 브라우저 사용 비율

브라우저비율
인터넷 익스플로러 11 이상48.471%
인터넷 익스플로러 9 이상0.766%
인터넷 익스플로러 8 이하1.520%
크롬40.867%
엣지5.539%
사파리2.089%
파이어폭스0.362%
오페라0.078%
기타 브라우저0.313%

2019년 11월부터 2020년 4월까지 약 6개월 간 한국의 모 업계 1위 쇼핑몰의 “PC로 접속한 순 방문자 수십 만명”의 브라우저 사용 비율을 보니 아직도 많은 사람들이 인터넷 익스플로러 11 미만의 버전을 사용하고 있었다. 퍼센트 비율만 보면 낮지만, 순 방문자 수로 보면 결코 무시하기 어렵다.

2. 한국의 PC 브라우저 사용 비율

브라우저비율
인터넷 익스플로러 11 이상17.28%
인터넷 익스플로러 9 이상0.26%
인터넷 익스플로러 8 이하0.13%
크롬68.52%
엣지4.68%
웨일3.23%
사파리2.99%
파이어폭스1.59%
오페라0.55%
기타 브라우저0.81%

2019년 4월부터 2020년 4월까지 Statcounter가 수집한 “PC로 접속한 페이지 뷰”의 브라우저 사용 비율을 보면 아직까지 많은 사람들이 인터넷 익스플로러 구 버전을 사용하고 있다.

○ 브라우저 사용 비율과 CSS3 호환성

(1) 최신 브라우저에 대한 호환성 고려 대상
– PC: 인터넷 익스플로러 11 버전 이상
– Mobile: 사파리 7 버전 이상

(2) 대부분의 브라우저에 대한 호환성 고려 대상
– PC: 인터넷 익스플로러 10 버전 이상
– Mobile: 사파리 7 버전 이상

HTML5 문서 기본 구조

○ HTML5 기본 태그

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML5 Reference</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
    <script src="example.js"></script>
  </body>
</html>

(1) <!DOCTYPE html>
문서에 HTML5 마크 업이 포함되어 있음을 선언한다. HTML5를 지원하지 않는 브라우저에서는 HTML5의 새로운 기능을 무시한 채 기존에 확립된 HTML을 기반으로 문서를 렌더링 한다.

(2) <html lang=”ko”>
문서가 어떤 언어로 작성되었는지 명시해야 한다. 시각 장애인이 사용하는 스크린 리더가 <html lang=”ko”>를 인식하고 문서에 영어가 있다면 한국어로 해석해서 말해준다.

(3) <head>
문서가 사용하는 정보를 담는다.

(4) <meta charset=”utf-8″>
문자 집합을 선언한다. 일부 브라우저는 브라우저가 예상한 문자 집합과 다른 경우 HTML 문서의 구문 분석을 다시 시작하기 때문에 <head> 바로 다음에 <meta charset=”utf-8″>를 작성해야 한다.

(5) <body>
문서의 내용을 담는다.

(6) <body> … <script src=”example.js”></script></body>
<script>는 <body>의 최하단에 위치해야 한다. 사용자가 웹사이트를 요청하면 브라우저는 렌더링 엔진으로 HTML과 CSS를 읽어서 화면에 표시하고, 자바스크립트 엔진으로 자바스크립트를 읽어서 실행한다. 만약에 HTML 태그 사이에 자바스크립트 코드가 위치하면 렌더링 엔진이 HTML을 읽다가 중단하고 자바스크립트 엔진이 자바스크립트를 읽고 실행한 다음 다시 렌더링 엔진이 HTML을 이어서 읽기 때문에 사용자 경험을 저해하고, HTML 구조와 CSS를 다루는 자바스크립트가 있다면 오류가 발생한다.

○ 인터넷 익스플로러 브라우저 모드 적용

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>를 작성하면 인터넷 익스플로러가 문서를 렌더링 할 때 사용자가 인위적으로 설정한 호환성 보기를 무시하고, 브라우저가 지원하는 호환성 보기 중 가장 최신 버전으로 렌더링 한다. 인터넷 익스플로러 호환성을 고려한다면 반드시 작성해야 하는 메타 태그이다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Reference</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
    <script src="example.js"></script>
  </body>
</html>

○ 인터넷 익스플로러에서 지원하지 않는 HTML5 태그

  • main
  • details
  • summary
  • time
  • data
  • meter
  • picture
  • input type: color, date, datetime-local, time, month, week

MDN Web Docs의 HTML5 호환성 가이드

1. MDN Web Docs의 HTML5 호환성 가이드를 따른 index.html

인터넷 익스플로러 9 버전은 인터넷 익스플로러에서 처음으로 HTML5를 지원하기 시작한 브라우저로 HTML5를 보수적으로 지원하기 때문에 동시대에 함께 출시한 다른 브라우저에 비해 HTML5에 대한 지원이 빈약하다. 하지만 인터넷 익스플로러 9 버전 미만에서는 HTML5를 전혀 지원하지 않기 때문에 HTML5의 의미있는 요소를 알 수 없는 요소로 인식해서 의미있는 요소를 사용할 경우 CSS를 적용할 수 없다. MDN Web Docs의 HTML5 호환성 가이드는 인터넷 익스프롤러 9 버전 미만에서 HTML5의 의미있는 요소 중 <article>, <aside>, <footer>, <header>, <nav>, <section>, <time>에 대해 CSS를 적용할 수 있게 한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>HTML5 Reference</title>
    <!--[if lt IE 9]>
      <script>
        document.createElement("article");
        document.createElement("aside");
        document.createElement("footer");
        document.createElement("header");
        document.createElement("nav");
        document.createElement("section");
        document.createElement("time");
      </script>
    <![endif]-->
    <noscript>
      <p><strong>This web page requires JavaScript to be enabled.</strong></p>
    </noscript>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
    <script src="example.js"></script>
  </body>
</html>

(1) 알수없는 요소 사용
조건부 주석인 <!–[if lt IE 9]> … <![endif]–>를 사용해서 인터넷 익스플로러 9 버전 미만에서만 HTML5의 의미 있는 요소를 생성해서 CSS를 적용할 수 있게 한다. 단, 생성된 요소들이 실제 요소가 가지는 기능을 수행하지는 못한다.

(2) 자바스크립트 비활성화 체크
<noscript>를 추가해서 자바스크립트가 비활성화된 경우 <noscript> 내 텍스트를 출력해서 자바스크립트가 비활성화되어 있다고 알려줘야 한다.

2. MDN Web Docs의 HTML5 호환성 가이드를 따른 style.css

오래된 브라우저에서는 알 수 없는 요소를 display:inline;으로 인식하기 때문에 각 요소의 기본 스타일이 블록 태그인 경우 해당되는 요소들의 스타일을 display:block;라고 변경해야 한다. <time>은 기본 스타일이 display:inline;이기 때문에 스타일을 변경할 필요가 없다.

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

3. MDN Web Docs의 HTML5 호환성 가이드를 주의사항

MDN Web Docs의 HTML5 호환성 가이드를 적용하면 HTML 유효성 검사 결과에 오류가 발생했다고 표시될 수 있다.

폴리필을 사용한 HTML5 호환성 가이드

구 버전 브라우저에 최신 기능을 사용하는데 필요한 기능을 추가하는 코드이다. poly는 여러 가지 기술을 사용해서 해결한다는 의미이고, fill은 기술이 필요한 브라우저의 구멍을 채운다는 의미이다. 폴리필을 사용하면 서버에 데이터를 요청하는 횟수가 증가하고, 서버로부터 데이터를 받는 데 시간이 걸리고, 자바스크립트 엔진이 데이터를 읽고 실행하는 데 시간이 걸리고, 이 모든 과정을 진행하기 전에는 렌더링 엔진이 HTML과 CSS를 읽을 수 없어서 전반적인 사용자 경험을 저해하기 때문에 가능한 한 사용하지 않는 편이 좋다.

○ html5shiv

인터넷 익스플로러 6 버전부터 8 버전까지 HTML5의 의미 있는 요소에 CSS 스타일을 지정할 수 있게 하고, 인터넷 익스플로러 6 버전부터 9 버전, Safari 4.X 버전, iPhone 3.X 버전, Firefox 3.X 버전에서 의미 있는 요소 중 블록 요소들에 대해 display:block를 지정한다.
html5shiv 사이트의 html5shiv.min.js를 사용하면 되고, 인터넷 익스플로러에서 인쇄 기능을 사용한다면 html5shiv-printshiv.min.js를 사용해야 한다. 2020년 5월 26일 기준 최신 버전은 3.7.3 버전으로 2015년 7월 이후로 업데이트가 없다. 2015년 7월에 마이크로소프트가 윈도우 10을 출시하면서 엣지가 등장했고, 인터넷 익스플로러 11 버전 밑으로는 지원을 중단한다고 밝히면서 html5shiv의 업데이트도 중단된 것으로 추정된다.

1. html5shiv 파일 용량 비교

파일명용량
html5shiv.js10.4KB
html5shiv.min.js2.67KB
html5shiv-printshiv.js16.3KB
html5shiv-printshiv.min.js4.26KB

2. html5shiv.min.js를 따른 index.html

조건부 주석인 <!–[if lt IE 9]> … <![endif]–>를 사용해서 인터넷 익스플로러 9 버전 미만에서 html5shiv.min.js가 실행되도록 작성해야 한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Reference</title>
    <!--[if lt IE 9]>
      <script src="html5shiv.min.js"></script>
    <![endif]-->
    <noscript>
      <p><strong>This web page requires JavaScript to be enabled.</strong></p>
    </noscript>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
    <script src="example.js"></script>
  </body>
</html>

3. html5shiv 주의사항

(1) html5shiv를 사용하면 document.createElement로 태그를 생성했을 때 일부 메서드가 정상적으로 작동하지 않는다. html5shiv는 이 문제를 해결할 수 없다고 했다.
(2) html5shiv의 printShiv 버전을 사용하면 인쇄 및 인쇄 스타일과 관련된 전체 DOM을 변경하기 때문에 복잡한 웹사이트 또는 페이지에 많은 인쇄 스타일이 지정된 경우 성능 문제와 스타일 깨짐 문제가 발생할 수 있다.

○ picturefill

인터넷 익스플로러에서 <picture>, <img>의 srcset 속성, sizes 속성을 사용할 수 있게 한다. picturefill 사이트의 picturefill.min.js를 사용하면 된다. 2020년 5월 26일 기준 최신 버전은 3.0.2 버전으로 2016년 2월 이후로 업데이트가 없다. 2015년 7월에 마이크로소프트가 윈도우 10을 출시하면서 엣지가 등장했고, 2016년 1월부터 인터넷 익스플로러 11 버전 밑으로는 지원이 중단되면서 picturefill의 업데이트도 중단된 것으로 추정된다.

1. picturefill 파일 용량 비교

파일명용량
picturefill.js45.1KB
picturefill.min.js11.5KB

2. picturefill 사용하기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Reference</title>
    <script>
      document.createElement("picture");
    </script>
    <script src="picturefill.min.js" async></script>
    <noscript>
      <p><strong>This web page requires JavaScript to be enabled.</strong></p>
    </noscript>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
      <picture>
        <source srcset="examples/example-small.jpg" media="(min-width: 1200px)">
        <source srcset="examples/example-big.jpg" media="(min-width: 768px)">
        <img srcset="examples/example.jpg" alt="">
      </picture>
    …
    <script src="example.js"></script>
  </body>
</html>

(1) 알수없는 요소 사용
HTML5의 <picture>를 생성해서 CSS를 적용할 수 있게 한다.

(2) 인터넷 익스플로러에서만 스크립트를 실행하기
인터넷 익스플로러 10 이상에서는 <!–[if lt IE 9]> … <![endif]–>와 같은 조건부 주석을 사용할 수 없기 때문에 자바스크립트로 사용자 에이전트 문자열을 확인해서 인터넷 익스플로러만 가지고 있는 특정 문자열의 존재 여부를 확인하고 해당 문자열이 있을 때만 스크립트를 실행하도록 해야 한다.
인터넷 익스플로러의 사용자 에이전트 문자열은 구글에서 Internet Explorer User Agent Strings로 검색하면 각 버전별 사용자 에이전트 문자열을 볼 수 있다. 인터넷 익스플로러 11의 경우 “Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko”인데, 모든 인터넷 익스플로러의 사용자 에이전트 문자열에는 Trident라는 인터넷 익스플로러 렌더링 엔진명이 들어있기 때문에 일반적으로 Trident와 같은 고유의 문자를 탐색해서 인터넷 익스플로러 유무를 판단한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Reference</title>
    <script>
    if (navigator.appName === "Netscape" && navigator.userAgent.search("Trident") != -1) {
      document.createElement("picture");
      document.write('<script src="picturefill.min.js" async><\/script>');
    }
    </script>
    <noscript>
      <p><strong>This web page requires JavaScript to be enabled.</strong></p>
    </noscript>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    …
      <picture>
        <source srcset="examples/example-small.jpg" media="(min-width: 1200px)">
        <source srcset="examples/example-big.jpg" media="(min-width: 768px)">
        <img srcset="examples/example.jpg" alt="">
      </picture>
    …
    <script src="example.js"></script>
  </body>
</html>

3. picturefill 주의사항

(1) 코드 충돌 문제로 <picture> 내 <img>에 src 속성을 사용하면 이미지를 두 번 다운로드 받기 때문에 <img>에 src 속성을 사용하면 안 된다.
(2) 코드 충돌 문제로 <picture>의 사양에 퍼센트를 적용하면 100vw로 작동한다.
(3) 이미지가 특정한 크기로만 표시되길 원한다면 <img srcset=”data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==”
alt=”empty img” />처럼 <img>에 투명한 gif를 연결해야 한다.
(4) 인터넷 익스플로러 9에서 충돌 문제가 있기 때문에 <picture> 내 <source>들을 <!–[if IE 9]><video style=”display: none;”><![endif]–>와 <!–[if IE 9]></video><![endif]–>로 감싸야 한다.
(5) 사파리에서 충돌 문제가 있기 때문에 브라우저가 올바른 <source>를 선택하기 전에 짧은 시간 동안 잘못된 이미지가 로드될 수 있다. 이 문제를 해결하려면 <img>에서 src 및 srcset를 제거해야 하는데 이 경우 오래된 안드로이드 기기에서 잘못된 이미지가 노출될 수 있다.

출처

관련 글

댓글쓰기