아마 아는 사람이 많이 있지 않을 거라 생각하는데, 올해 1월 18일 W3C에서는 HTML5를 널리 알리기 위해 HTML5의 로고를 만들어 공개했다. 로고는 위와 같이 무언가 방패 모양같기도, 빛을 비추는 것 같기도 한데, W3C에서는 로고를 이렇게 설명하고 있다.
“이 로고는 마크업(Markup : 문서의 논리적인 구조. 웹에서는 “테그”) 으로 만든 보편적이고 탄력 있는, 강하고 사실적임을 나타낸다. 그리고 웹개발자인 당신에게 진취적이고 밝고 강하게 비춤을 헌신한다. 표준의 표준이고, 진행의 패넌트이다. 그리고 이 로고는 절대 레이아웃에 table을 쓰지 않는다고 확신한다.”
번역에 아직 익숙하지 않아서 문장이 매끄럽지는 못한데.. 여하튼 여기에서 중요한 사실은 HTML5를 웹에서 쓰는 자체를 자랑스럽게 강조하기 위해 이 로고를 만들었다는 것과 마지막에 “레이아웃에 테이블을 쓰지 않는다” 는 내용이 그만큼 HTML5에서는 <table>대신 <div> 사용을 권고하는게 아닌가 싶다.
HTML5 로고를 공개하면서 W3C에서는 기존의 자신들의 Validator와는 달리 어떤 페이지에서도 이 로고를 달 수 있도록 하였다. 개발자의 “양심”에 맏기면서 해당 로고를 “뱃지” 형식으로 제공한다.
뱃지는 위와 같은 형식으로 제공한다. 가로로 너무 길 것을 염려하여 세로로도 제공한다.
뱃지 만드는 곳 : http://www.w3.org/html/logo/#badge-builder
위의 링크로 가면 아래와 같은 화면을 만날 수 있다.
뭐 딱 보면 알겠지만, 내 사이트에서 사용한 HTML5 표준 기술을 클릭하고 오른쪽에 가로/세로 정렬만 선택하면 좌하단 텍스트 공간에 테그가 생성된다. 이를 가지고 내가 원하는 사이트에 달기만 하면 끝이다.
위처럼 본 뱃지에서는 각 HTML5 기술에 따라 이런 마크를 달게 해준다. 물론 모든 사항은 개발자의 “양심”에 맏기고, 사용자들이 보다 더 친숙하게 HTML5에 접근하기 위해서 본 뱃지를 제공해준다. 각각의 기술에 대해 간단히 알아보자.
3D, GRAPHICS & EFFECTS
Between SVG, Canvas, WebGL, and CSS3 3D features, you’re sure to amaze your users with stunning visuals natively rendered in the browser.
브라우저 내에 SVG, 캔버스, WebGL, CSS3 3D 등을 사용하여 유저를 자연스러운 랜더링 기술로 놀라게 함을 확신합니다.
CONNECTIVITY
More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
실시간 채팅, 빠른 게임, 더 나은 커뮤니케이션을 보다 더 효과적으로 연결합니다. 웹 소켓과 서버측전송 이벤트가 서버와 클라이언트 사이에서 기존보다 더 효과적으로 데이터를 푸시할 수 있습니다.
DEVICE ACCESS
Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
위치 정보 API를 사용하여 웹 응용 프로그램이 인식 가능한 장비의 특징과 경험을 리치하게 표현해 줍니다. 놀라운 장비 접속에 대한 기술혁신은 마이크와 카메라를 통한 오디오/비디오 입력 접근, 주소록&이벤트, 심지어는 방향 기울기까지 계속 발달되고 개발되고 있습니다.
MULTIMEDIA
Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
오디오와 비디오는 앱들 및 사이트들과 조화를 이루는 HTML5 웹에서 최고의 시민입니다. 조명, 카메라, 액션!
OFFLINE & STORAGE
Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
웹 앱이 인터넷에 연결되 있지 않더라도 빠르게 시작되고 작동합니다. HTML5의 앱 캐시, 더 나아가 로컬 스토리지, 인덱스된 DB, 그리고 파일 API등에 감사해야 겠습니다 ^^
PERFORMANCE & INTEGRATION
Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.
웹 앱과 동적인 웹 컨텐츠들을 다양한 기술과 Web Workers와 XMLHttpRequest 2 기술을 통해 빠르게 만듭니다. 그 누구도 당신의 시계를 보며 기다리게 하면 안됩니다.
SEMANTICS
Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
구조의 의미를 주는 시멘틱은 HTML5의 정면과 중심에 있습니다. 월등한 테그의 세트, PDFa와 마이크로데이터, 그리고 마이크로포멧 등이 더 유용하게 프로그램과 사용자간의 데이터를 오고가게 만듭니다.
CSS 3
CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.
CSS3의 제공으로 시멘틱 구조 혹은 퍼포먼스의 구현이 없어도 웹 앱에 더 넓은 범위의 스타일링과 이펙트를 강화합니다. 더불어 웹 오픈 폰트 포멧(WOFF)의 제공으로 타이포그라피를 다루기 더 쉬워졌고 기존보다 컨트롤들이 발전했습니다.
이상으로 W3C에서 붙혀주는 뱃지의 의미를 좀 알아봤는데 역시 번역이 좀 직역도 심하고 말도안되는 내용도 있고(-_-) 참고로 필자는 얼마전 모 어학원의 반배치고사를 봤는데 실력이…. 흑흑…
그건 그렇고, 대충 보니 어떠한가? 웹 앱과 시멘틱웹으로 데이터의 구조화, 비디오와 오디오 등의 이펙트 그리고 CSS3등. 확실한 것은 기존의 웹보다는 훨씬 진보할 것이라는 거다. 그리고, 이제 좀 감도 잘 안잡혔던 HTML5에 대해 대충 감이 오지 않는가? 최소한 W3C가 어떤 방향을 바라보고 투자할 것인지는 이해할 수 있을 것이다.
다시한번 언급하지만, 본 뱃지는 W3C에서 HTML5기술을 널리 알리기 위해 제공하는 뱃지이다. 유효성 검증을 제공하지 않는다는 것은 우선 HTML5가 일반인들에게 보다 더 친숙하게 제공되기 위해 만든 것이 아닌가 싶은데, 여하튼 간에 위의 8가지 HTML5의 특장점들을 잘 활용해서.. “양심적으로” 본 뱃지를 활용했으면 하는 바이다.
그나저나, HTML5 관련 자료를 찾기는 쉬운데 한글로 된 자료가 너무나도 없다.. 오죽했으면 영어도 잘 못하는 내가 번역해서 올릴 정도이니.. ㅜㅜ 그래도 힘 닿는 부분까지 열심히 번역해서 HTML5 기술을 공유했으면 좋겠다.. ^^
