외부 플젝트 중에 이러저러한 문제로 제가 HTML5을 권유하고 HTML5사용해야 하는 프로젝트가 생겨, (아마..관련업계 최초일듯..^^;;) 다음 사항을 정리하고자 합니다.


해당 문서는 회사에 제출해야 할 문서이므로, 차후 저작권 문제가 발생할 소지가 있어 외부에서 퍼가시는것은 허용하지 않도록 하겠습니다.




> HTML5 사용을 위한 가이드

1. HTML5의 새로운 기능 사용 여부에 관한 고민

해당 브라우저들은 HTML5 존재 이전에 나온 브라우저 들이며,

HTML5는 DOC TYPE에서 XHTML형태의 DTD가 존재하지 않기때문에,

HTML5의 지원은 공식적으로 이루어지지 않고 있는 상황.

본 문서에서는 해당 브라우저들에서 사용이 가능하도록 하기 위하여,

우리는 다음 사항을 고려해야 하며, 아래의 TAG LIST중 사용가능한것들, 사용을 권장하는 것들, 

사용을 비권장하는 것들, 사용을 금지하는 것을 나누어

정리하고자 합니다.

 기능

사용 

Comment 

 웹스토리지

 비권장

 꼭 필요한 기능이라고 판단시, 차후 JexFrame기능의 일부를 수용할지 협의 필요

 웹SQL

불가 

 해당 기능은 IE 9- 에서는 사용이 불가능하며, 보안및 성능상의 이유로 JexFrame에서도 기능으로 구현이 불가합니다.

Menifest 

 권장

 지원하지 않는 브라우저가 있으나, 실제 사용에 문제 발생소지가 적으며, 해당 기능의 사용시 네트워크 트래픽상 잇점이 크고, Cache관리가 용이해 사용을 권장

 Canvas

불가 

 지원하지 않는 브라우저가 많고, 사용시 화면디자인 등에 문제 발생소지가 있어 사용이 불가함.

 Video/Audio

불가 

 지원하지 않는 브라우저가 많고, 사용시 화면디자인 등에 문제 발생소지가 있어 사용이 불가함. 대체 기술이 존재

대체기술 :: Flash

Drag & Drop 

 비권장

 꼭 필요한 기능이라고 판단시, 차후 JexFrame에서 기능의 일부를 수용할지 협의 필요. 단, 지원하지 않는 브라우저의 경우 Drag&drop의 기능이 아닌 다른 기술로 우회.

참고! Div등의 HTML ELEMENT를 Drag & Drop하는 기능이 아닌, 브라우저 외부의 객체를 Drag & Drop하는 기능임.

RichTextEditor

불가 

 사용이 필요한 경우, Daum Editor, Naver Editor등의 Open source Editor 사용을 권장하며, 회사 내에서 판매 상품이 필요한 경우, RND를 통한 Editor개발이 가능.

WebWorker 

불가

지원하지 않는 브라우저가 많고, 해당 기능을 사용시, Script에서 Batch수준의 기능을 구현하는 형태가 되므로 위험도가 높아서 사용 불가. 

 GeoLocation

비권장 

 지원하지 않는 브라우저의 경우 우회 방법이 존재하나, 외부 사업자를 통해야 하므로, 비권장

WebSocket 

불가

 해당 기능을 사용하기 위해서는 Script에서 지원만이 아니라, System(WebServer 및 Was)을 최신 버전을 사용하는 Risk 및 추가적인 방화벽 필요, 검증되지 않는 기술로 인한 보안 문제발생 가능등의 사유로 사용 비권장.

 Comet

불가

 WebSocket과 동일한 사유로 비권장

FILE API 

불가

 지원하는 브라우저가 적고, 지원하는 브라우저에서만 사용시 로직처리가 복잡해지는 문제가 발생 가능.


2. HTML5 사용시 고려해야 할점 (퍼블리싱 관점)

1) HTML5를 위한 문서 타입 아래 블럭 1,2 두가지가 사용가능하나, 1번 사용을 권장. (두가지 동시에 사용은 에러발생합니다.)

1. <!DOCUTYPE HTML>

2. <!DOCUTYPE HTML SYSTEM "about:legacy-compat">


2) 인코딩 설정 - 이전에도 많이 사용하던 2번을 권장합니다.

1. <meta charset="UTF-8">

2. <meta http-eqiv="Content-Type" content="text/html"; charset="UTF-8">


3) 종료태그를 기술하지 말아야 할 Tag List아래 태그리스트는 <br></br> 형태의 종료 태그를 기술하지 말아야 하며, <br /> 형태로 사용을 하여야함.

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source


4) 종료태그가 생략가능한 TAG :: 종료 TAG 생략가능 TAG가 일부 존재하나 종료태그 생략을 권장하지 않음. (개발자 가이드를 통하여, 종료태그 생략을 사용하지 않도록 문서화 필요)


5) Attribute 사용

5-1) Attribute의 경우 """ 로 묶어서 값의 표현을 권장함

<input type="BUTTON" id="BTN_SAVE001">

5-2) Custom Attribute의 사용은 앞에 "data-" 를 prefix로 사용권장

<span data-jxln="ACCOUNT_TYPE">예금계좌</span>

5-3) 단독으로 사용 가능한 attribute사용은 단독으로 사용하지 않고 value를 넣는 것을 권장

<input type="text" disabled="disabled">


6) HTML5에서 추가 또는 삭제된 마크업

6-1) 문서구조를 위한 ELEMENT(SECTION)

실제로는 DIV를 사용하여 Layout을 구성하는 것과 큰 차이가 존재하지 않는다고 생각 할수 있으나, 해당 마크업드은 차후 웹접근성 항목에서 상당한 잇점을 제공하므로, 사용을 적극 권장합니다. 

 Element

 Description

 사용

section

 범용적인 섹션 문서의 레이아웃을 구성하며, DIV 태그와 동일하게 작동한다.

권장

 article

 게시물 상세등의 컨텐츠를 표현하기위해 사용, DIV태그와 동일하게 작동한다.

권장

aside 

 한쪽 구석에서 추가적인 정보를 표현하기 위해 사용되며, DIV태그와 동일하게 작동한다.

권장

nav 

 네비게이션 메뉴를 위한 영역으로 DIV태그와 동일하게 작동한다.

권장

 footer

 문서의 하단부를 표현하기 위한 영역 으로 DIV와 동일하게 작동한다.

권장 

header 

 문서의 상단부를 표현하기 위한 영역으로 DIV와 동일하게 작동한다.

권장 

hgoup 

 h1,h2...,h6 등의 태그를 그룹으로 묶어 사용하기 위한 영역

권장 


6-1) Grouping을 위한 ELEMENT

실제로는 DIV를 사용하여 Layout을 구성하는 것과 큰 차이가 존재하지 않는다고 생각 할수 있으나, 해당 마크업드은 차후 웹접근성 항목에서 상당한 잇점을 제공하므로, 사용을 적극 권장합니다. 

 Element

 Description

 사용

figure

 이미지등의 그룹을 한곳에 묶어서 보여주는 그룹, DIV와 동일

권장

 figcaption

 figure에 대한 caption을 정의

권장



6-2) 미디어를 위한 ELEMENT

미디어 기능은 지원하지 않는 브라우저가 많으므로, 비권장하며, 아직까지는 대체기술인 Flash나 embed태그 사용을 권장합니다.

 Element

 Description

 사용

video

 영상을 표현하기 위한 ELEMENT

비권장

 audio

 음성을 표현하기 위한 ELEMENT

비권장

source

 video/audio등의 리소스 또는 URL 을 지정

비권장

track

 video/audio등의 텍스트 트랙을 지정(지원하는 브라우저 없음)

비권장



6-3) Form확장 ELEMENT (추가된 Attribute는 포함되지 않음)

HTML5에서는 Form을 확장하기 위한 다음 ELEMENT를 추가 되었으며, 일부 기능은 브라우저에따라 정상작동 되지 않는 경우가 존재하므로, 사용시 주의를 요합니다. 

 Element

 Description

 사용

keygen

 암호화 키를 생성하기 위한 ELEMENT

비권장

output

 Form내부의 연산을 지원하며, 연산된 결과를 출력한다. 지원하지 않는 브라우저에서 사용을 하려면 script조작이 필요함.

비권장

progress

 진행상황을 나타냄. 지원하지 않는 브라우저가 많으므로, 해당 기능 필요시 협의를 통해 우회 기능을 통해 지원

비권장

 meter

 현재 상태를 나타내 주는 기능. progress와 같이 해당 기능 필요시 협의를 통해 우회 기능을 지원

비권장

 datalist

 자동완성 기능제공 Select Element와 유사하게 Option과 함께 사용하여 Option값들이 자동완성을 위한 Data로 사용됨. 지원하는 브라우저가 현재 Firefox, Opera밖에 없어 사용되는 곳이 없음. JEX팀에서 제공하는 AutoComplete API 사용을 권장

비권장



6-4) 기타 ELEMENT

해당 element등 또한 브라우저에 따라 다르게 동작 하거나 지원하지 않는 브라우저가 많은 기능들로 사용을 비권장 필요시 script로 구현하거나 협의를 통해 API기능 지원. 

 Element

 Description

 사용

mark

 Text에서 일부분을 강조 (IE6~IE8 제외한 대부분 지원)

비권장

canvas

 이미지를 동적으로 그리고 제어하기 위한 기능 (IE6-IE8 제외한 대부분 지원)

비권장

bdi

 실제 html문서에서는 표시되지는 않지만, 접근성을 위해 유용한 TAG로 "사용자명"을 지정할때 사용. (지원하는 브라우저는 적지만 사용을 원할시에는 script/css를 통해 지원가능하도록 설정가능)

권장

 command

 메뉴또는 명령을 지정하는 ELEMENT이며, 현재 IE9외에는 지원하는 브라우저가 없어 권장하지 않습니다.

비권장

 details

 접기/펴기등의 기능 제공-TITLE은 하위 ELEMENT로 summary ELEMENT를 사용 (현재 chrome만 지원)

비권장

summary

details의 하위 ELEMENT로 사용하여 타이틀 형태로 데이터를 표시 

비권장

ruby

 동남아시아 발음 및 정보를 표시하기 위해 사용,

비권장

rp

 ruby의 하위 ELEMENT로 사용

비권장

rt

 ruby의 하위 ELEMENT로 사용

비권장

time

 시간을 표시하는 ELEMENT, 접근성을 위해 유용한 TAG로 지원하는 브라우저가 존재하지 않지만, script/css를 통해 지원가능하도록 설정이 가능함.

권장

wbr

 text 라인 브레이크 브라우저에서 실제로 작동하지는 않으나, 웹접근성을 위해 존재하는듯함.

비권장


6-5) 삭제된 ELEMENT

삭제된 ELEMENT로 대체 ELEMENT를 사용하도록 합니다. 대부분의 브라우저에서는 하위 호환성을 위해 아래 태그가 사용이 가능합니다. 이와 같은 내용은 html5-Strict.css를 작성하여 아래 ELEMENT사용시 "display:none"으로 처리하도록 하는 방법을 권고합니다. 아래 태그를 사용하면, W3C인증시 오류발생합니다. (강조한 Line은 자주쓰는 ELEMENT입니다.)

 Element

 Instead ELEMENT

acronym

 "ABBR" ELEMENT를 사용

applet

 "OBJECT" ELEMENT를 사용

basefont

 CSS를 통하여 제어

 big

 CSS를 통하여 제어

 center

 CSS를 통하여 제어

dir

 "UL" ELEMENT를 사용

font

 CSS를 통하여 제어

frame

 IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요)

frameset

 IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요)

noframes

 IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요)

strike

 CSS를 통하여 제어

tt

 CSS를 통하여 제어


6-5) 비표준 ELEMENT

비표준 ELEMENT이지만 기존 브라우저가 지원해서, 실수로 사용이 가능한 ELEMENT리스트 입니다. 이와 같은 내용은 html5-Strict.css를 작성하여 아래 ELEMENT사용시 "display:none"으로 처리하도록 하는 방법을 권고합니다. 아래 태그를 사용하면, W3C인증시 오류발생합니다. (강조한 Line은 자주쓰는 ELEMENT입니다.)

 Element

 Instead ELEMENT

isindex

 input text필드등으로 사용

listing

 "PRE" ELEMENT와 "CODE" ELEMENT로 사용

xmp

 "PRE" ELEMENT와 "CODE" ELEMENT로 사용

 noembed

 "OBJECT" ELEMENT나 "EMBED" ELEMENT로 사용

 plaintext

 MIME TYPE을 "text/plain"으로 사용

blink

 CSS/SCRIPT를 통하여 제어

marquee

 CSS/SCRIPT를 통하여 제어

s

 CSS/SCRIPT를 통하여 제어

spacer

 &nbsp; 값을 사용

u

 CSS/SCRIPT를 통하여 제어

bgsound

 "OBJECT" ELEMENT나 "EMBED" ELEMENT로 사용



6-6) 추가된 Attribute (Form / Input)
추가된 Attribute는 브라우저에 따라 다르게 동작하거나 지원하지 않는 브라우저가 많은 경우가 있어 해당 기능을 사용하는 대신 Jex에서 제공하는 API를 활용하시길 권장합니다. (차후 협의를 통하여, 지원하지 않는 브라우저에 대해 Script/CSS로 구현할지를 결정)

 Element

 attribute

 Description

 for

autocomplete

 자동완성 기능

 form

novalidate

 inputbox의 확장된 attibute기능을 check하지 않음

 input

autofocus

 페이지가 로드될때 focus를 주는 기능

 input

 form

 form 태그 영역밖에서 inputbox를 만들고 form하위 ELEMENT로 지정가능

 input

 formaction

 form의 ACTION을 지정

 input

formenctype

 multipart/form-data형태의 ENCTYPE를 지정

 input

formmethod

 form의 method지정 (post/get)

 input

formnovalite

 form에 지정하는 novalidate와 동일

 input

formtarget

 submit시에 대상 target을 지정

 input

height/width

 높이와 넓이 지정 (CSS로 구현가능)

 input

min/max

 입력값을 min / max사이로 제한

 input

multiple

 파일전송시 다중선택 기능 ( 사용해도 좋을 것 같음. )

 input

pattern

 정규식을 활용하여 입력값 제한

 input

placeholder

 기본값을 배경으로 보여줌

 input

required

 필수입력
 input

step

 일정 패턴으로 값증가. (3으로 지정시 3,6,9 형태)



6-6) 추가된 INPUT TYPE (Form / Input)
추가된 INPUT/TYPE은 브라우저에 따라 다르게 동작하거나 지원하지 않는 브라우저가 많은 경우가 있어 해당 기능을 사용하는 대신 Jex에서 제공하는 API( FORMATTER, JEXINPUT 등)를 활용하시길 권장합니다. (차후 협의를 통하여, 지원하지 않는 브라우저에 대해 Script/CSS로 구현할지를 결정)

 Element

 attribute

 Description

 input

color

 색상값을 입력받음. 현재 OPERA만 지원

 input

date

 날짜를 입력받음. 

 input

datetime

 날짜/시간을 입력받음

 input

 datetime-local

 타임존과 함께 날짜시간을 입력받음

 input

 email

 EMAIL을 입력받음

 input

month

 월 값을 입력받음

 input

number

 숫자만 입력받음

 input

range

 범위안의 값을 입력받음.(그래픽적으로 표현)

 input

search

 검색데이터를 입력받음.(inputbox에 X표시가 생겨 X표시 클릭 또는 ESC입력시 해당 값이 초기화됨.)

 input

tel

 전화번호를 입력받음 (현재 지원브라우저 미존재)

 input

time

 시간을 입력받음.

 input

url

 URL 입력받음



7) HTML5 미지원 브라우저에서 HTML5사용을 위해 처리해야할 내용 정의
7-1) html5shiv.js 파일 include
해당 js는 html5를 지원하지 않는 브라우저에 대해서 html5의 ELEMENT정의 및 Script기능 css3확장등을 제공합니다.

7-2) ie-css3.htc 파일 include
html5shiv와 겹치는 부분이 있는지 검토필요.
css작성시 가장아래에 behavior:url(ie-css3.htc) 를 넣어주면 많은 css3지원


7-3) html5-Strick.css 개발
W3C인증 받기에 적합한 HTML문서를 작성하기 위해, 위에 정의한 엄격한 문서 검증을 위한 css파일을 개발합니다.
해당 css에서는 display:none 또는 강조 표시등을 통해서 개발자/퍼블리셔의 실수로 인한 지원 마크업 사용을 엄격히 규제 합니다.
또한 HTML5에서 새로 정의된 HTML5의 마크업을 정의합니다.

7-4) html5-jex.js 개발
추가된 input box정의 요소나, 엄격한 form규제 등의 일부 그리고 접근성을 위해 유용한  마크업을 정리하여 javascript영역에서 구현하여 줍니다. (지원하지 않는 브라우저를 위함)

7-5) DEMO사이트 개발 및 차후 개발되는 사이트의 HTML5 적용
현재 HTML4또는 XHTML로 구현되어 있는 데모 사이트를 순차적으로 HTML5로 작성합니다. 또한 앞으로 작성되어야 할 웹페이지에 대한 HTML5 사용을 권고하여 현재 문서에 작성되어 있는 내용을 보강하고 HTML5대응 프로그램을 보강할 수 있도록 합니다.


7-6) 가장 쉬운 HTML5도입 방법
보안모듈중 CHROME / FIREFOX에 설치하면 해당 브라우저에서 IE모드로 작동하여 사용하게 지원해주는 보안모듈이 존재합니다. 이를 역으로 생각해서 IE6,IE7,IE8 사용시 CHROME FRAME 설치(ActiveX 보안모듈을 강제로 설치하는 형태)를 유도 하는 방법을 활용한다면, HTML5지원도 수월하고, 사용자 입장에서 빠른 성능(스크립트엔진 성능의 차이가 10배 이상) 을 느낄수 있고 개발사 입장에서도 테스트 케이스를 줄일 수 있는 장점이 있습니다. 이 방법에 대해서 고객을 설득할 수 있다면, 개발공수 절약 및 더욱 안정적이고 빠른 서비스가 가능하다는 장점이 존재합니다.



======================= 일단 끝 =========================



사설 #01

후..-_- 오랫만에 구조화되고 복잡한 문서를 작성하려니.-_- 또가 나올것 같습니다.

군대 있을적 행정병으로 열심히 문서작성할때가 떠오르며, 유격보다는 문서작성이 무서웠던 악몽이 떠오르네요.ㅠㅠ

사내에서 HTML5적용을 위해 만든 문서이긴 하지만, ...회사에서 글 내리라고 하면...힘이 없는 저는 이 문서를 내리게 될수도 있짐나....HTML5를 지원하지 않는 브라우저를 위한 고민을 하는 분들을 위해 해당 문서를 공개로 작성합니다.^^


사설 #02

이 문서에서 HTML5를 도입하기에 필수적인 요소인 html5shiv기능을 제안한 사람이              무려 Jquery, Sizzle등을 만드신 "john Resig"님였군요. 이분 javascript역사를 마구 바꾸어대는 어마어마한 분이 되어 가는것 같습니다.

저는...언제쯤 이런사람이 될수 있을까요.ㅠ_ㅠ.....아 이런사람 보면 제가 왜 이리 초라하게 느껴지는지.ㅠ_ㅠ



  1. Favicon of https://twitter.com/#!/1004lucifer BlogIcon 허욱 2012.06.15 19:54 신고

    기능이 너무 제한적이네요..ㅎ
    특정 브라우저가 아닌 대부분의 브라우저에서 html5가 일반적으로 쓰이려면 얼마나 기다려야 하려나요..ㅎㅎ

    • Favicon of http://iamgil.com BlogIcon 길OI 2012.06.16 13:32 신고

      지금 당장 일반브라우저에서의 사용은 크롬프레임을 퍼트리는게 답인듯 해요.ㅎㅎ

  2. Favicon of http://humble.linux-lab.net BlogIcon humble 2013.05.30 03:45 신고

    멋진 포스팅 잘 보고 갑니다. 감사합니다.

+ Recent posts