앞서 가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3

저자 : 송종식

468 페이지

978-89-93827-32-3

소스코드: http://www.scitech.co.kr/upload/book_image/s_017/html5_codes.zip

이 도서에 대한 소개는 저자가 쓴 '책 소개'로 대신하고자 합니다.

독자 여러분 안녕하세요. 국내에서 가장 먼저 HTML5 저서를 출판한다는 부담감에 원고작업을 하는 동안 제대로 밤잠을 이루지 못할 지경이었습니다. 입술은 바싹바싹 마르고 몸무게는 몇 킬로그램이나 줄었습니다. 한편으로는 너무나 기쁜 마음과 함께 다른 한편으로는 그런 부담감도 컸습니다.

 

그러나 ‘가장 먼저’라는 단어는 금세 단지 저의 바램에 불과했다는 사실이 밝혀지고 말았습니다. 제가 이 책의 원고를 어느 정도 작업했을 때 이미 HTML5 API 번역서와 한국분의 저서가 온라인 서점에 올라오기 시작했습니다. ‘가장 먼저’여러분들께 책을 선 보이고 싶었던 기대는 사라져 버렸습니다.

 

그래서 대신 급하게 책을 빨리 내 놓기 보다는 조금 더 꼼꼼하게 작업하여 책을 내놓기로 했습니다. 특히 디자이너 분들이나 퍼블리셔 분들이 보시기에 편하시도록 책을 만들고자 많은 노력을 기울였습니다. 고급 개발자 분들이 보면 ‘에이 뭐야’하며 책을 던져 버릴지도 모르는 일입니다. 이 책은 입문 하시는 분들이나 기존에 퍼블리싱을 어느 정도 하시다가 CSS3와 HTML5를 새롭게 공부하시는 분들을 위한 책이니 많큼, 쉬운 문체로 책을 풀어가는 점은 양해를 부탁드리겠습니다.

 

실리콘밸리에서는 연일 HTML5 이야기로 시끌벅적 하다고 합니다. 일본에서도 우리나라보다 일찍 HTML5 책이 출판되었습니다. 우리나라는 너무나 고요합니다. 많은 점점 많은 분들께서 고요한 호수에 돌을 던지고 계십니다만 저 또한 거기 동참하기로 마음을 먹었습니다. 조금 더 많은 분들께서 HTML5와 CSS3의 멋진 기능들을 함께 향유하기를 바라는 마음에서 였습니다.

 

용감하게 돌은 던졌지만 좋은 책을 만들고자 노력하여도 자칫 부족한 책이 되지 않을까 걱정이 앞섰습니다. 일단은 그런 두려움을 물리치고 제가 알고 있는 내용을 다른 분들과 나누고자 용기를 내어 펜을 들게 되었습니다. 두근거리는 마음으로 열심히 책을 집필하여 어느덧 여러분들께 이 책이 다가가게 되었습니다. 부족함이 많지만 저 역시 HTML5의 심오한 세계를 배워가고 있는 한 사람으로서 여러분들과 다양한 의견을 교류하고 싶습니다. 책에서 온라인으로 HTML5에 대한 이야기를 늘려가고자 합니다. 잘 부탁 드립니다.

 

이런 분들이 읽어보시면 좋아요

이 책은 웹기획자, 웹디자이너, 웹퍼블리셔 분들을 대상으로 쓰여졌습니다. 기존에 웹퍼블리싱이나 U.I. 개발을 하시던 분들이 읽어보아도 좋고, 아예 HTML 마크업이나 CSS에 새로이 입문하시는 분들이 보아도 좋습니다. 또한 HTML5와 CSS3에 입문하시고자 하시는 분들은 물론, 기존에 XHTML1.*이나 HTML4.*를 다루던 분들께서 HTML5를 공부하시기 좋도록 책을 구성하였습니다. 이 책은 어렵지 않게 HTML5와 CSS3에 대한 개념을 잡으실 수 있도록 여러분들을 도와 드릴 것 입니다.

 

퍼블리셔 분들이야 당연히 공부를 하셔야겠지만 ‘디자이너가 이런 책을 볼 필요가 있을까?’라고 생각하시는 분들도 많을 것 같습니다. 이에 대한 제 대답은 당연히 ‘네’입니다. 웹아트를 하시는 분들은 아직까지 크게 무리가 없으시겠습니다만 웹서비스나 서비스 형태의 웹페이지를 만들어내야 하는 디자이너 분들은 의미 있는 웹페이지를 만들기 위한 마크업 지식, 나아가 웹에 대한 풍부한 지식이 요구될 것 입니다.

 

이전에는 PSD까지만 그리는 분들도 디자이너의 본분을 다 하기에 무리가 없었습니다. 그러나 이제는 웹에 대한 이해, 그러니까 거창하고 깊은 부분 까지는 아니더라도 마크업과 CSS에 대한 지식은 가지고 계신 것이 좋습니다. 그러면 나아가서 어떻게 마크업을 해야 사이트 관리하기가 편하게 될 지, 개발하시는 분들께서 페이지를 쉽게 다루실 수 있을지에 대해 생각하며 동료를 배려하는 디자이너가 될 수 있다고 생각합니다. 또한 작으나마 서버 비용이나 관리 비용을 절감하는데도 큰 몫을 차지하는 디자이너가 되실 수 있을 것 입니다.

 

덤으로 본인의 스킬도 당연히 상승할 것 입니다. 그래서 저는 디자이너 분들께서도 HTML마크업과 CSS의 학습을 해보시라고 권유를 해드리고 있습니다. 웹표준에 대한 풍부한 이해까지 겸하시면 더 좋습니다.

 

개발자 분들을 위한 고급 API는…

개발자 분들이나 고급 이용자 분들을 위해서 자바스크립트 API와 HTML5 고급 예제들을 다룬 김지광님의 책이 지앤선을 통해서 이 책과 함께 별도로 출판될 것 입니다. 현재 김지광님이 열심히 집필 중이시니 아마 이 책을 읽고 계시는 시점에는 그 책도 나와있을지 모르겠습니다. 처음 학습 하시는 분들을 대상으로 한 이 책을 보시다가 더 높은 난이도의 책이 필요하시면 김지광님의 책을 보시면 될 것 입니다.

 

이 책에서는 HTML5에서 추가된 API 중 가장 주목 받고 있는 API 몇 가지의 간단한 사용방법에 대해서 다루고 있습니다.

 

책 내용의 변동 가능성

일단 책에서 소개한 HTML5의 기술적 요소들이 변동될 가능성이 있다는 점을 공지 드립니다. 이를테면 현재도 새로운 요소가 생기고 있습니다. 또 기존의 태그가 없어지기도 하고 있습니다. 다소 일정이 미뤄지기는 해도 W3C의 HTML5개발 작업은 열정적입니다.

 

따라서, 책에서 소개한 요소들 역시 약간의 변동사항이 있거나 제거될 가능성이 있습니다. 또 책 집필 당시에는 없던 요소가 추가될 여지가 있습니다. 이 부분은 유의하시고 HTML5 학습을 하시기를 부탁 드립니다. CSS3 역시 마찬가지 입니다. CSS3의 속성들을 지원하는 브라우저가 늘고 있지만 책이 발간된 이후에 추가되는 속성이 생기거나 수정되는 속성이 생길 여지도 있습니다.

 

다만, 저도 여러 가지 변동 사항을 고려해서 책을 써내려 갔습니다. 다소간의 변동사항이 있더라도 이 책을 통해서 공부를 하신 분들이라면 큰 혼란 없이 HTML5를 쭉 이용하실 수 있도록 하였습니다. 추가적인 변동 사항이나 책에서 못다한 이야기들은 제 개인 블로그를 통해서 연재글을 올려드리겠습니다.

 

HTML5, 중요한 전환점

이 책을 쓰는 2010년 봄 현재 HTML5는 중요한 전환점을 맞이하고 있습니다. 먼저 웹이 PC환경을 벗어나고 있는 과도기에 있습니다. 아이폰 덕분에 국내에서도 많은 웹서비스들이 모바일용 서비스를 내놓고 있습니다. 많은 관심을 받고 있는 구글 TV는 웹 그자체가 플랫폼 입니다. 모바일과 TV같은 기기뿐만 아니라 더욱 많은 기기들이 웹을 플랫폼으로 다시 만들어지고 있습니다.

 

플랫폼이 너무 중요해서 플랫폼이라는 이야기를 많이 하고 있는데요. 이제는 운영체제도 웹을 기반으로 하는 시대가 곧 올 것 입니다. 이미 구글을 비롯한 굵직한 기업들이 웹OS를 만들고 있고 이미 어느 정도는 가시적인 성과도 내고 있습니다. 웹OS의 시대가 온다면 웹에서 사용하는 문서도구나 메일 서비스, 검색엔진들은 말그대로 웹 애플리케이션이 되는 것입니다.

 

우리가 아는 많은 것들이 웹을 기반으로 돌아가려 하는 이때, 폭풍의 중심에 있는 도구 중 하나가 HTML5입니다. 아이폰을 예로 들면 현재는 앱스토어에서 내려 받아 아이폰에 설치하여 사용하는 앱과 사파리 등 브라우저로 접속하여 서비스를 이용하는 웹이 갈려 있는 상황입니다. 이것 또한 일종의 과도기를 겪고 있습니다. 아마도 시간이 많이 흐르면 그 누구도 소유하지 않고 있는 웹 그자체가 더 많이 사용될 가능성이 높습니다. 모바일 웹을 위해서도 HTML5는 단연 최고의 마크업 언어입니다. 아직은 불확실성이 만연해 있지만 분명히 HTML5는 중요한 위치에 있다고 볼 수 있습니다.

 

웹표준과 웹접근성

HTML5에서는 단지 텍스트나 이미지 박스 등을 꾸며주기 위한 태그는 모두 사라졌다고 무방합니다. 그리고 단지 꾸며 주기 위해 존재하는 관련 속성들도 없애버렸습니다. 전적으로 페이지의 스타일링은 CSS에서 하라는 것 입니다. 그만큼 더욱더 시맨틱한 웹페이지를 만들 수 있게 되었고 우리도 그것을 추구해야 합니다.

 

기기간 문서의 호환을 위해서 웹표준은 더욱 중요해졌습니다. 다양한 기기를 지원하면서 적은 리소스를 들이자면 역시 웹표준에 대한 개념을 이해하고 있으면 유리합니다. 그리고 앞으로는 시각장애인이나 청각장애인과 같은 신체적으로 불편한 사람을 위한 웹접근성은 더욱 기본으로 준수해야 합니다. 특정한 기기를 사용하거나 특정한 브라우저를 사용하는 등 불리하거나 독특한 상황에 있는 사람 모두가 공평하게 정보를 습득할 수 있도록 하는 부분도 더욱 신경을 써야 하겠습니다. 웹표준과 웹접근성에 대한 이야기는 책의 마지막 장에서 조금더 나누어 보겠습니다.

 

HTML5와 CSS3는 이미 널리 쓰이고 있습니다

W3C의 표준 권고안 작업의 완료는 2012년을 목표로 하고 있습니다. 또, 2022년은 되어야 HTML5가 널리 쓰일 것이라고 전망하는 분들이 많습니다. 그러나 이는 잘못된 생각입니다. 왜냐하면 이미 많은 브라우저들이 HTML5와 CSS3를 지원하고 있기 때문입니다. 물론 익스플로러의 경우는 제외입니다. 인터넷 익스플로러의 경우 버전9에서부터 HTML5와 CSS3 스펙을 정식으로 지원한다고 합니다. 8이전의 구형 익스플로러를 제외하고는 이미 많은 브라우저들이 HTML5와 CSS3를 지원하고 있습니다. W3C의 권고안은 말 그대로 권고안일 뿐이고 지금까지의 상황으로 볼 때, 권고안을 예의 주시하는 것은 그다지 의미가 있지는 않는 것 같습니다.

 

그림 0.1 동영상을 로드 중인 유튜브의 HTML5 플레이어

 

그렇다면 해외의 서비스들은 어떨까요? 그들은 과감하게 HTML5와 CSS3의 스펙들을 지원하고 있습니다.

 

구글에 접속하시어 소스를 보시면 페이지 최상단의 독타입이 <!DOCTYPE html>로 만들어져 있음을 알 수 있습니다. 이는 HTML5의 독타입입니다.

 

그림 0.2 구글은 이미 HTML5의 문서타입을 사용하고 있습니다

 

트위터는 CSS3를 잘 활용하고 있습니다. 익스플로러로 트위터를 접속해보시고, 파이어폭스나 크롬으로도 접속해보세요. 아마도 무언가 다른 부분을 발견하실 수 있을 것 입니다. 바로 박스의 모서리가 둥글게 처리되도록 하는 부분인데 CSS3의 border-radius속성을 활용한 것 입니다. 저 효과를 위해서 기존처럼 이미지를 사용하지도 않았고 단지 한 줄의 CSS코드만 사용하였습니다. 익스플로러에서는 박스 모서리의 둥근효과가 지원되지 않지만 트위터는 익스플로러를 버린 것 같습니다.

 

그림 0.3 CSS3의 border-radius속성을 지원하지 않는 익스플로러(위)와 지원하는 브라우저(아래)에서 트위터에 접속한 모습. 박스의 모서리를 둥글게 하는 CSS3 코드 한줄만 넣었을 뿐 이미지가 사용되지는 않았습니다. 익스플로러는 CSS3가 지원되지 않더라도 과김히 무시를 하였습니다. 왜냐하면 익스플로러에서 일부 디자인을 다소 지원하지 못한다해서 트위터 서비스를 이용하는데 전혀 지장이 없기 때문입니다.

 

국내에서도 HTML5를 이미 활용하는 사례가 늘어나고 있습니다. 하나만 소개를 드리겠습니다. 골프존 닷컴의 모바일 서비스에 있는 매장찾기 서비스입니다. 현재 내가 있는 위치를 바로 알아내어 웹페이지에 위치를 찍어줍니다. HTML5의 geolocation API를 활용한 것 입니다.

 

그림 0.4 geolocation API를 이용한 골프존 모바일 웹의 ‘매장찾기’서비스

 

이렇게 HTML5와 CSS3는 이미 곳곳에서 쓰이고 있습니다. 여러분의 웹사이트에서도 바로 적용해 보실 수 있습니다. 다만, 이 책을 쓰고 있는 현재 HTML5를 전면적으로 사용서비스에 적용하는 것은 무리가 있습니다. CSS3의 일부 기술들은 상용 서비스에 적용을 해보아도 좋을 것 입니다. 이 부분은 익스플로러 이슈가 생기기 때문에 다음 섹션에서 계속 말씀드리겠습니다.

그러면 익스플로러는 어떻게 해야하나요?

개인적으로 매우 아쉬운 부분 중 하나입니다. 특히 국내에서 서비스를 하는 업체들의 중간관리자 분들이나 의사 결정권자 분들이 많이 하는 주문이 하나 있습니다. 바로 크로스브라우징을 실현하라 는 것입니다. 그 중에서도 익스플로러 6는 사용자가 가장 많으니까 특히 신경 쓰라고 합니다. 국내에서도 익스플로러 이용자가 50% 이하로 떨어졌지만 여기까지는 동감합니다. 이건 웹접근성 측면에서도 중요하기 떄문입니다. 익스플로러 6를 사용하는 사람을 무시할 수는 없는 노릇이니까요. 그런데 문제는 브라우저에 관계없이 디자인이 완벽하게 같아야 한다고 주문하는데 있습니다.

 

이제는 구형 익스플로러는 버리는 시도를 해보는 건 어떨까 생각됩니다. 익스플로러 5.5이전 버전은 완전히 버려도 된다고 생각합니다. 그리고 익스플로러 6부터 8까지는 CSS3나 HTML5의 여러가지 좋은 기능을 커버리지 하지 못하더라도 그들을 기준으로 웹사이트를 작성하는 것은 이제 멈추어도 좋다고 생각합니다.

 

익스플로러를 버리자는 부분에서 오해를 하지 말아야 하실 부분이 있습니다. 에를 들어, 익스플로러 6를 버리자고 해서 사이트를 익스플로러 6에서 로드했을 때 엉망으로 뜨게 하자는 것은 아닙니다. 기존에는 익스플로러를 기준으로 하여 사이트를 제작했다면 이제는 오페라나 파이어폭스, 크롬이나 사파리와 같이 CSS3나 HTML5 스펙을 대체적으로 잘 지원하는 브라우저를 기준으로 사이트를 제작해보자는 것 입니다.

 

그림 0.5 이미 해외에서는 웹표준 문제, 보안 문제 등의 이유를 들어 IE6의 장례식을 거행했습니다. 마이크로소프트는 이것을 매우 지지했고, 마이크로소프트도 발벗고 나서서 익스플로러6를 이제는 버리라고 캠페인을 벌이고 있습니다.

 

구형 익스플로러에서는 디자인이 다소 예쁘지 않거나 하는 문제가 있더라도 사이트를 이용하는데 문제가 없는 수준이면 적당합니다. 익스플로러를 완전시 무시해서 사이트를 만들었는데, 익스플로러를 사용하는 유저가 사이트를 제대로 이용할 수 없다면 이는 또 다른 접근성 차별을 불러옵니다. 무시한다고 해서 그들이 사이트를 이용하지 못할 정도로 무시하라는 말이 아닙니다. HTML5의 여러가지 기능들은 익스플로러를 위한 스크립트를 임시로 동원하여 지원하면 어떨까 생각됩니다.

 

단, 현재까지는 HTML5를 전면적으로 상용서비스에 지원하기는 다소 무리가 있는 것이 사실입니다. HTML5 기능들 자체도 불안한 상태고, 브라우저마다 지원하는 스펙들도 상이하기 때문입니다. 또, 브라우저들이 HTML5를 100% 완벽하게 지원하지도 못하고 있습니다. 그래서 HTML5는 장기적인 관점에서 써 먹는다 생각하시고 미리미리 학습을 꾸준히 해두는 편이 좋은 것 같습니다. 혹은 쇼케이스용 페이지를 만들어서 운영 하는 것도 괜찮습니다.

 

CSS3는 상용 서비스에서도 조금씩 적용해보는 것을 추천합니다.

 

그리고 정말로 자신의 서비스에 자신이 있다면 특정 브라우저만을 기준으로 서비스를 만드는 것이 아니라 서비스를 위해서 이용자들이 브라우저를 바꿀 수 있는 힘이 있을 것이라고 스스로 믿고 서비스를 만드는 건 어떨까 생각합니다.

저에게 메일을 보내주세요

책을 보시다가 궁금한 점이 생기시면 저에게 메일을 보내주세요. 그리고 책의 내용 중 잘못된 부분이 있거나 문제제기를 하실 부분이 있으신 분들께서도 저에게 메일을 보내주세요. 그리고 여러 가지 주제에 대한 토론도 좋고, 응원글도 모두모두 환영입니다. 언제라도 저에게 메일을 보내주세요.

 

이 책을 선택해 주셔서 감사 드리며, 열심히 한 번 달려봅시다!

독자 여러분 한 분 한 분과 좋은 인연이 되길 빕니다. 감사합니다.


[저자블로그 방문하기]