일본어로 하겠습니다.

그럼 HTML5와 CSS3를 중심으로 미래의 웹표준에 대한 얘기를 하려 합니다.

자기소개 안해도 되겠죠?

사이버 가든이라는 곳에서 웹 컨설팅을 하고 있습니다. 또, 대학 객원 교수도 하고 있습니다. 
그리고 책입니다. 웹표준의 교과서는 한국어 판으로도 나왔습니다. 뭐 이것저것 썻습니다.

갖구 계신분? 감사합니다. 그 외에도 감수했던 것도 있습니다.

오늘 얘기할 내용입니다만. HTML5와 CSS3 그 앞과 뒤, 뭐랄까 전체적인 부분도 포함해서 얘기 해보겠습니다.

오늘의 프레젠테이션에서는 데모 데이터를 사용할 것인데 다음 주소로부터 다운 받을 수 있습니다.

먼저 인트로덕션입니다.

현재 웹표준을 이용해서 제작하는 경우에는 XHTML1.0과 CSS2.0을 사용합니다.
앞으로는 이것뿐아니라 HTML5와 CSS3을 사용하게 될 겁니다.

웹 접근성에 대해서는 일본에서는 JIS가 있다는 얘기가 앞에서 있었습니다. 그리고 2009년판 JIS가 곧 나올 예정입니다. 그리고 국제적인 기준인 WCAG가 2.0이 이미 나와 있습니다.

일본의 JIS 2009년판에도 WCAG2.0의 내용이 그대로 들어가게 될 예정입니다.

HTML5를 기본으로 만들어진 사이트는 많이 있습니다. HTML5Gallery(www.hmtl5gallery.com)라는 사이트를 통해서 많은 사이트를 볼 수 있습니다. 우리가 쉽게 접할수 있는 사이트로는 애플 사이트가 있고, 파이어폭스 5주년 기념 사이트도 HTML5로 만들어져 있습니다. 실제로 브라우저에서 보겠습니다.
(사이트 접속중)
이것은 한국어 판입니다.

현재 HTML5가 어떻게 되어 가고 있나를 보고 가겠습니다.

HTML5의 사양은 이렇습니다. HTML5의 사양은 뭐 세세한 것은 놔두고 구글의 이안 힉슨이라는 사람이 중심이 되서 만들고 있습니다. 지금 인터넷 업계에서 가장 활발한 기업은 구글을 이라고 할 수 있겠죠. 그런 의미에서 구글이 중심이 되서 하고 있다는 얘기는 인터넷의 표준이 될 가능성이 높다고 생각합니다. XHTML2 라는 프로젝트도 있었습니다만. 2009년 중에 중지가 될 것입니다. HTML5와 통합됩니다. 

HTML5적인 사고 방식입니다.

HTML은 원래 실무적인 브라우저에 탑재된 기능을 모아놓은 것입니다. 하지만 XHTML이 되면서 이상주의가 되어 버렸습니다. 하지만 그게 잘 되지 않아서 다시 실무주의로 돌아가자라고 하는 것이 HTML5입니다. 예를 들어 애플, 구글, 모질라같은 브라우저 개발 회사가 중심이 되어 HTML5가 만들어 지고 있는 것입니다. HTML5적인 사고 방식 XHTML에서는 여러기지 포멧을 조합해서 컨텐츠를 만든다는 컴파운드 도큐먼트라는 사고 방식이였습니다. 

하지만 HTML5에서는 올인클루시브 혹은 올머스트 인쿨르시브 전부 HTML5안에서 합니다.
예를 들면 멀티미디어 메타데이터 API 등이 HTML5에서 정해져 있습니다.

HTML5의 보급입니다. 
웹 사이트인가 웹 어플리케이션인가. 선진적인가 보수적인가 현재는 웹 어플리케이션이면서 선진적인 사이트, 하지만 점점 이 원이 넓어져서 다른 영역에 있는 사이트도 HTML5로 만들어지게 될 가능성이 있다. 하지만, 보통의 웹사이트 예를 들면 기업사이트는 대부분 스태틱 하고 보수적이기 때문에 HTML5에 준거할 메리트가 별로 없다. 참고로 선진적이라는 것은 새로운 브라우저를 쓰고 젋은 사람을 겨냥한 것입니다. 여러분들에게 잠시 묻고 싶은 것이 자신이 평소 만들고 있는 사이트는 이중 어디에 속해 있을까요? 대부분의 사람들이 여기라고 생각됩니다만. 여기 계신분들은? 어라? 저는 90%이상이 여기라고 생각했는데… 그럼 여기 이신분… 어라? 뭐… 암튼…

팀 버너스리라는 HTML을 만든 사람이 푸념, 슬퍼하고 있습니다. 
HTML에서 XHTML로 전환이 별로 되지 않았다. 그래서 역시 원래부터 쓰던 HTML을 발전시킬 필요가 있다. 
이러한 팀 버너드리의 의견도 HTML5의 발전을 가속화 시키고 있습니다.

HTML5의 브라우저 서포트 입니다. 일관되지 않습니다. 브라우저 마다 상당히 다릅니다. 특히 인터넷 익스플로러는 자바스크립트를 쓰지 않으면 동작하지 않습니다. 이것은 좀 세세한 부분입니다만, 실제 인터넷 익스플로러는 6,7,8은 아직 HTML5를 지원하지 않습니다. 하지만 9는 지금 개발 중인데 9부터는 상당히 지원할 예정입니다. 다른 브라우저에서는 거의 다 지원하므로 OK.

HTML5에서 새롭게 추가될 요소. 
- 섹셔닝
- 임베디드
- 폼
- 인터렉티브
- 텍스트 레벨 

특히 포인트가 되는 것이 섹셔닝과 임베디드 입니다. 

거기다 HTML5에 추가될 속성입니다.
대부분이 폼에 관련된 부분입니다. 인풋타입 폼.

그 외에 HTML5의 어플리케이션으로서의 기능, 웹데이터 베이스나 웹 소켓, 어플리케이션 케시 등등...

그래서 실제 HTML5를 현재 어떻게 사용하고 있는지 얘기하려 합니다.
먼저 DOC타입입니다. 그래서 간단히 비교를 해보면 이쪽이 XHTML 빠글빠글해서 복잡합니다. HTML5는 심플합니다. 그래서 페이지 전체에서 HTML과 XHTML 문법을 다 사용할 수 있습니다. 그래서 지금까지 XHTML로 사용하셨던 분들은 XHTML 문법을 써도 괜찬습니다. IE에서 HTML5를 유효하게 만드는 자바스크립트는 이렇습니다. 그렇게 어려운게 아니고 자바스크립트의 크리에이트 엘리먼트 함수를 써서 새롭게 추가된 요소를 생성하면 됩니다. 특히 섹셔닝 요소에 관해서는 인라인 요소로서 생성되면 곤란하므로 CSS로 display를 block-level로 지정해 놓습니다. 기억해야 하는 것은 섹션의 사용하는 방법입니다. 섹션은 div가 아닙니다. 섹션은 진짜로 내용이 구분되는 부분을 정의한다. 지금까지의 div는 이것은 이후로도 쓸 수 있습니다만 스타일시트만을 위한다는 성격이 강했습니다. 섹션은 정확히 의미로 구분해야한다는 점이 포인트입니다.  

실제 HTML안에서 섹션의 요소를 사용하는 방법입니다. 실제 소스코드를 보여드리겠습니다. div id headder HTML5에서는 심플하게 Headder요소를 사용합니다. 하나더 예로  섹션입니다. 내용의 구분점에서 div id policy를 넣었습니다. 이것은 의미의 구분점이기 때문에 섹션으로 id policy 그외에도 네비게이션에서는 nav를 사용, 단지 이 섹션에 대해서는 세세하게 정해지지 않아서 만드는 사람에 따라서 여러가방법으로 사용될 가능성이 있습니다. 그래서 이것은 제 예상입니다. 앞으로 이 섹션 요소에 대해서는 자세한 정의가 나오지 않을까.. 또한 HTML5 도 완전히 정해진 것이 아니고 점점 진화하고 있습니다. 따라서 지금의 모습이 전부라고 생각하지 마시고 앞으로 어떻게 변할것인가를 주의 깊게 봐주세요. 

컨텐츠 삽입입니다.
캔버스 이것은 벡터 그래픽스, 이것은 결국 자바스크립트를 사용해서 이미지를 표현하거나 컨트롤 합니다. 여러분들 중에도 자바스크립트를 사용하시는 분들도 계시리라 생각됩니다만 결국 크로스 브라우징을 위한 조절이 핗요합니다. 오디오랑 비디오 이것은 음성과 동영상입니다만. 이것도 결국엔 브라우저의 지원에 의존합니다. 예를 들면 그 미디어의 형식이나 확장자를 지원하느냐 그리고 코댁 문제도 그렇습니다. 캔버스를 지금부터 쓰고 싶다고 하는 경우에는 익스플로러 캔버스라는 자바스크립트 라이브러리가 있습니다. 그래서 IE에서도 캔버스를 사용하고 싶으면 크로스 브라우징을 위해서 익스플로러 캔버스를 사용합니다. 주의해야 할 것은 버전 3을 이용해야 합니다. 그 이전 버전은 IE8을 지원하지 않습니다. 그럼 실제로 HTML5의 캔버스와 오디오를 사용한 사이트의 예를 보여 드리겠습니다.

이것은 모두 캔버스와 오디오 HTML5의 새로운 요소들로 만들어져 있습니다. 단지 뒷부분에서 자바스크립트로 컨트롤하고 있기 때문에 단순히 캔버스 태그를 집어 넣으면 된다는 것은 아닙니다. 
이것은 트위터의 코멘트가 공모양으로 나타납니다. 클릭하면 그 코멘트를 볼 수 있습니다. 

일본에서입니다만.
HTML5.jp라는 레퍼런스와 튜토리얼 사이트가 있습니다. 게다가 구글 그룹스 안에 이런 html5 -developers-jp 라는게 있어서 1400명 정도가 멤버입니다. 그 안에는 구글 재팬 사람들도 있어서 그들과 꽤 인터렉션이 있습니다. 그밖에 상업적인 이용은 크게 없습니다. 단지 이런 새로운 것을 좋아하는 기업이 HTML5를 적극 사용하고 있습닌다. 예를들면 HTML5 베이스의 캔버스 어플리케이션으로 이런 사이트가 있습니다. 자기이름을 입력하면 그에 맞는 무기가 나옵니다. 제 이름을 적어 보겠습니다. 전 지팡이가 나왔습니다. 좀 더 칼이나 그런게 좋았는데... 하하

//31:46
네 그럼 인제 다음으로 CSS3입니다.
CSS3는 굉장히 많은 모듈이라고 합니다만, 기능별 사양으로 되어 있습니다. 그래서 아직 만들어지지 않은 모듈도 있기 때문에 앞으로 어떻게 될지는 이쪽도 아직 결정은 안돼 있습니다. 어쨌든 포인트는 인터렉티브 디자인에 관련된 모듈이 많이 늘어나 있습니다. 또 하나의 포인트는 어드밴스드 레이아웃, 고도한 레이아웃, 그래서 CSS3를 사용한다는 것은 인터렉티브 디자인과 어드벤스드 레이아웃을 사용한다는 얘기가 됩니다. 실제로 CSS3를 브라우저가 지원을 하느냐를 체크하는 사이트가 있습니다. 이것은 미국에서 웹표준화를 가속시킨 더 웹스탠다드프로젝트라는 사이트 입니다. 타카노씨의 세션에서도 나왔었던 제프리 젤드만이 중심이 되어 만든 단체입니다.

하지만 파이어폭스 3.5가 93점입니다. 쪼끔 아쉽군요. 하지만 제가 MS측 입장에서 얘기하는 것은 아닙니다만. 

(여기) IE9가 개발중이어서 퍼포먼스, 이거는 낮은편이 좋습니다만, 처리속도의 빠리기입니다.

IE9의 현재 단계에서는 다른 브라우저만큼의 처리속도가 나고 있습니다. 하지만 ACID3에서 보이는 점수가 32점. '좀더 힘내' 라는… 하지만. 정식 버전이 나올때쯤에는 더 높은 점수가 나올꺼라 예상되기 때문에 기대하면서 기다립시다. 

이부분은 좀 세세한 부분입니다만. CSS3의 셀렉터는 IE가 지원하고 있지 않습니다. 그런 의미에서 역시 CSS3를 사용한다는 경우에는 1.현재 모든 브라우저에 통용되는 기능으로 제한을 둘 것인가. 아니면 2&3. 자바스크립트의 jQuery를 사용할 것인가. 아니면 4.새로운 브라우저만이 지원하는 기능들을 막 써버릴것인가 <-이것이 점진적 향상(프로그레시브 인헨스먼트)적인 사고 방식입니다. 
그럼 실제로 CSS3는 어떻게 사용하는가. 

우선 파일입니다만 일단 나눠 두는 것이 좋을것 같습니다. 단지 그다지 파일을 나누고 싶지 않다거나, 예를 들면 아까 타카노씨 세션에서도 나왔었지만 하이 퍼포먼스를 위해 파일수를 줄어서 서버와 클라이언트간의 세션을 줄인다거나 하는 경우에는 보통 스타일로 섞습니다만 이럴 경우에는 코멘트를 달아 놓읍시다. 이것으로 혼란이 일어나진 않을 것입니다. 먼저 CSS3에서 쓸 수 있는 기능은  opacity입니다. 이것은 방금전에 1.2.3.4에서 1입니다. IE도 필터라는 기능을 지원하고 있어서 같은 효과를 낼 수 있어서 모든 브라우저에서 쓸 수 있습니다. 예를 들면 이런 롤오버 이미지 입니다. 실제 사이트에서 보게 되면,  … 이런 느낌으로 불투명도가 바뀝니다. 다른 이미지로 바꾸는 것은 불편하고 다른 파일을 가져와야 하기 때문에 무거워집닌다. 하지만 opacity를 사용하면 쾌적한 동작과 표현이 가능하게 됩니다. 네 그럼 jQuery를 사용해서 지원하는 것인데요 jQuery는 굉장히 유명하고 강력한 자바스크립트 라이브러리입니다. 가볍고 크로스브라우징이 구현되고, 그리고 그것만큼 중요한 것은 많은 팬(사용자)가 있다는 것입니다. 무슨얘기냐 하면 뭔가 문제가 생겼을때 그것을 해결하는 방법이 여기저기 나와있다는 얘기입니다. 그래서 CSS3의 셀렉터나 이펙트들도 지원하고 있습니다, 예를 들면 CSS2.1 의 셀렉터와 jQuery를 비교한 것입니다만. 보겠습니다. 요점은 jQuery를 지원하는것, 즉 jQuery를 사용한다는 것은 IE6,7이 지원을 하지 않아도 jQuery만으로 지원 할 수 있다는 얘기입니다. 그래서 CSS3의 셀렉터들을 사용하지 않는 것이 아니라 jQuery를 사용하면 쓸 수 있다는 것입니다. 실제로 focus, 이것도 실제로 보겠습니다. 이것은 보통 IE에서는 작동하지 않습니다. 하지만 jQuery로 지정을 하면은 IE에서도 똑같이 배경색이 바뀌게 됩니다. 네. 결국 이런 얘기입니다. IE 6,7에서 작동하지 않는 focus도 jQuery를 이용하면 작동하게 만들 수 있습니다. 다음으로 nth-child입니다 이것은 표에서 배경색을 줄무늬로 하고 싶을때 이것은 CSS3에서 셀렉터로 인정되고 있지만 IE에서는 동작 하지 않습니다. 그래서 jQuery로 지정하면 잘 돌아 갑니다. 시간도 좀 거시기 해서 팍팍 보겠습니다. 보더 라디우스 둥근 모서리입닌다. div를 사용해서 만들면 되긴하지만 번거롭습니다, 그래서 jQuery 플러그인을 사용해서 구현 합니다. CSS3에서 작성하면 이런느낌입니다만, jQuery 플러그인중에 jQuery Conner가 있기 때문에 그것을 사용하면 이런 짧은 문장으로 같은 효과를 낼수 있습니다. 여기입니다. 둥근모서리를 jQuery로 구현한다는것의 장점은 소스코드가 깨끗해 집니다. 배경으로 그라데이션 같은걸 줘 버리게 되면 둥근 모서리는 굉장히 귀찮습니다. 또, DDP 디자인 같은 경우에는 둥근모서리는 당연한거게 되지만 실제로 (여기)???에서 만드는 것은 굉장히 불편하지만 jQuery를 사용하면 굉장히 간단해 집니다. 마지막으로 프로그레시브입니다. 결국엔 CSS3를 적극적으로 사용하는것이 프로그레시브 인헨스먼트입니다.  극단적으로 얘기하면 CSS2.1 은 IE, CSS3는 다른 브라우저, 정말 단순하게 얘기하면 IE를 사용하는 유저는 리테라시가 높지 않다 하지만 그 외의 다른 브라우저를 사용하는 사용자들은 리테라시가 높다 라고 할수 있습니다. 그런 사람들은 웹사이트에 기대하는 레벨도 다르게 될 것입니다. 레벨이 높은 사람이 납득을 하는 사이트를 만드느 것도 굉장히 중요하기 때문에 CSS3를 사용하는 것은 그런측면 에서 장점이 될것입니다. 예를들어 CSS3에서 IE가 지원하지 않는 기능입니다만. 지금 움직여 보겠습니다. 이밖에도 이런 리플렉션도 CSS3으로 IE가 지원하지 않습니다만. 이런 것도 가능합니다. 그리고 CSS의 웹폰트입니다만 이것은 서버로 부터 폰트를 제공 받는것입니다. 로컬에 폰트가 없어도 그 폰트를 표현할 수 있습니다. 실은 이 사이트에도 사용되고 있어서, 이부분입니다만 여기서 숫자모양이 다른것은 이부분에만 웹 폰트를 사용하고 있습니다. 그 밖에도 CSS의 비쥬얼 이펙트입니다. 이것은 웹킷, 사파리나 크롬의 근본이 되는 프로젝트에서 만들어진 것입니다. 앞서 빙글빙글 돌던게 비쥬얼 이펙트를 사용한 것입니다. 뭐 세개가 있어서 별로 세세한 것은 신경 안쓰셔도 괜찮습니다만. 트랜스폼과 트랜지션과 애니매이션에서 브라우저의 서포트에 있어서는 사파리와 크롬은 지원을 하는데 사파리나 구글은 지원을 하고 있고 파폭은 트랜스폼밖에 지원을 하지않습니다. 방금 보여드린 것입니다. 이 밖에도 CSS3에서 앞으로 추가될 예정인 기능은 이런 것이 있어서, 글세요 앞으로 많이 사용될 것은 RGBA나 HSLA같은 반투명 색을 자정할 수 있는 것이나 Multiple background image 복수의 배경이미지를 한 곳에서 지정하는 것, 기존에는 div를 사용해서 하던 것을 이제는 그런 낭비 없이 가능하게 됩니다. 

일본의 상황입니다만 CSS3를 적극 사용하는 것은 아이폰 사이트나 아이폰 어플입니다. 왜냐하면 사파리만 생각하면 되기 때문입니다. 그래서 보수적인 회사도 리뉴얼 플랜 안에서 CSS3를 도입하려는 곳도 몇곳인가 있습니다. 실제로 제가 관련된 금융그룹의 사이트에서도 CSS3를 가능한한 사용하자라고 하고 있습니다. 여튼 프로그레시브 인헨스먼트라는 것은 오늘 얘기한것처럼 장점이 있으므로 여러분들도 CSS3라든가. 브라우저가 서포트 하지 않는다고 안하지말고 보다 적극적으로 공부해 주세요. 그럼 이상으로 마치겠습니다.