NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


HTML5 오픈 컨퍼런스: CSS3 소개 발표자료 공유.

본문 건너 뛰기

지난 7월 2일 HTML5 오픈 컨퍼런스가 열렸습니다. 윤석찬님의 제안으로 약 1개월 전부터 기획이 되었고 한국 웹 표준 프로젝트 멤버 및 국내외 웹 표준 커뮤니티(CSS디자인코리아, 클리어보스, 한국정보화진흥원, 모질라)의 자원 봉사 또는 후원으로 준비했습니다. 한국 웹 표준 프로젝트라는 그룹은 생소하시겠지만 이 그룹에서 2005년도에 제작 배포했던 자료 실전 웹 표준 가이드는 익숙하실껍니다. 웹 표준 프로젝트 그룹 멤버들은 평소에는 각자의 커뮤니티나 블로그를 통해 활동하지만 이번처럼 어떤 과제가 주어지면 모여서 함께하고 있습니다. 멤버들 사이에서 웹 표준에 대한 동기나 철학이 조금씩은 다를 수 있겠지만 웹 표준이 정착하는데 기여하고 싶다는 의지 만큼은 모두가 한 마음인것 같습니다. 이런 과정에 참여하는 것은 개인적으로 큰 기쁨이고 보람입니다.

컨퍼런스는 신청자 접수를 시작한지 20시간만에 650좌석이 모두 매진될만큼 큰 관심을 끌었습니다. 발표자들은 단순히 프리젠테이션을 공개하는 것에서 끝나지 않았고 책(실전 HTML5 가이드)으로 만들어 배포할 것을 처음부터 염두했습니다. 때문에 컨퍼런스 참석자들에게는 책자로 제공이 되고 참석하지 못한 분들께도 무료(CCL 3.0)로 배포가 되었습니다.

저는 CSS3에 대한 소개자료 집필발표를 맡았습니다. CSS3는 어떤 HTML 버전을 선택하더라도 사용할 수 있는 HTML 버전과 무관한 기술이기 때문에 특별히 HTML5에 대응한다고 보기는 어렵습니다. 단지 HTML5와 같은 시기에 개발이 되면서 브라우저 벤더들이 이를 현실로 구현했기 때문에 주목을 받은것 뿐입니다. 엄밀하게 따져서 굳이 HTML5 오픈 컨퍼런스에 포함되지 않아도 무방하지만 빠졌을 때 아쉬움이 남을 수 있는 섹션이라고 이해하시면 될 것 같습니다. 소개팅 자리에 그냥 이성이 등장하는 것보다 예쁘거나 멋진 이성이 등장하기를 바라는 것과 같은 마음으로 이해하시면 될 것 같습니다.

CSS3는 아직 권장 표준이 아닙니다. 그러나 대중적인 브라우저 벤더들은 일부 스펙(모듈)을 현실 속에서 이미 구현했습니다. text-overflow, word-wrap, @font-face와 같은 속성이나 규칙들은 이미 IE 6~8 브라우저에서도 사용할 수 있습니다. 마이크로소프트에서 이미 오래전에 제안하고 자체적으로 구현했지만 이제서야 CSS3 스펙으로 수용되면서 다시 세상의 빛을 보게 된 샘이죠. 이 밖에도 브라우저들은 실험적으로 또는 정식으로 CSS3 속성들과 선택자들을 앞다투어 지원하고 있습니다. W3C에 의해 권장 표준이 되는 것이 공식적인 표준이라 할 수 있지만 이미 많은 브라우저 벤더들에 의해 구현되어 있다면 사실상 표준이라고 볼 수 있으며 실무에서 유용하게 사용할 수 있습니다.

CSS3의 기교와 데모에 관한 자료들은 검색을 통해서 외국의 자료들을 쉽게 접하실 수 있습니다. 그러나 IE 점유율이 97%에 이르는 한국의 상황을 감안하면 한국의 웹 개발자에게는 뭔가 추가적인 정보를 제공해야 한다고 생각 했습니다. 최신 표준 브라우저의 지원 현황 뿐만 아니라 IE 6~8 브라우저에서도 사용할 수 있는 기법들을 소개하고 만약 IE 브라우저가 지원하지 않는 속성이라면 fallback을  제공하는 방법도 소개해야 한다고 생각 했습니다. CSS3가 아무리 뛰어난 기술이라 해도 낡은 브라우저에서 사용할 수 없다면 흥미는 곧 반감될 것입니다. 여기서 fallback이란 CSS3를 지원하지 못하는 상황에서 이를 대체할 수 있는 대안들 입니다. 마이크로소프트의 filter 속성이나 자바스크립트 라이브러리가 그러한 예 입니다.

CSS3를 소개하는 것이 저의 역할이었지만 저는 다음과 같은 메시지를 가장 중요하게 기억해 달라고 청중에게 부탁 했습니다.

더 좋은 도구를 선택한 사용자에게는 더 향상된 경험을 주자. 이것은 좋은 도구(브라우저)를 선택하지 않은 사용자를 차별하는 것이 아니며 그래서도 안된다. 중요한 것은 ‘경험의 질’을 높이는 것이지 어떤 사용자를 ‘포기’하자는 것이 아니다.

최근 웹 표준을 준수하지 않는 낡은 브라우저라는 이유로 IE6 브라우저를 지원하지 않는것을 마치 대단한 업적이 되는 것과 같이 말하는 것은 옳지 않다고 말했습니다. 아직까지 상당히 많은 사용자 수를 확보하고 있는 낡은 브라우저(IE6, 국내 42.84%)를 지원하지 않는 것은 웹 표준의 목표인 상호 운용성(하위 호환성이 포함된 개념)과 대치되는 것이라고 설명 했습니다. 웹 표준은 목표가 아니라 수단일 뿐입니다. IE6가 웹 표준 준수율이 낮다는 이유로 배척하는 것은 옳지 않다고 생각합니다.

발표자료(참고자료) 내려받기 + 북마크

몇 가지 오류 정정

  • gradient 속성과 animation 속성을 설명하는 과정에서 ‘linear’라는 단어의 발음을 ‘라이니어’라고 잘못 발음 했습니다. ‘리니어’라고 발음해야 합니다.
  • 프리젠테이션에는 흥미를 유발하기 위하여 ‘여우’가 두 번 등장하고 ‘늑대’는 아예 등장하지도 않았는데 제가 ‘늑대’라고 잘못 말했습니다. ‘여우’로 정정 합니다.
  • ‘우리나라’를 ‘저희나라’라고 잘못 표현했습니다. ‘저희나라’라는 표현은 청중이 외국인인 경우에 ‘우리나라’를 겸손하게 표현하기 위하여 사용할 수도 있는 표현이지만 이를 포함한 모든 상황에서 국가를 낮추어 부르는 것은 적절하지 못한 표현이라는 의견이 있다는 것을 뒤늦게 알았습니다.

두 가지 아쉬운 점

  • 유료 세미나 자료를 무료로 웹에 공개하는 것이 불편하다고 느끼는 분이 있어서 제 마음도 불편했습니다. 이 세미나를 주최한 누구도 특정 계층에게만 좋은 정보가 폐쇄적으로 공유되는 것에 찬성하지 않을 것입니다. 이 컨퍼런스는 HTML5 ‘독점’ 컨퍼런스가 아닙니다. 지금은 생각이 바뀌셨길 바랍니다.
  • CSS3 또는 제 발표에 대하여 궁금증을 가진 분들은 Q&A 시간에 질문자로 선택받지 못했습니다. 편파적인 진행에 감사드립니다. (농담입니다. ㅎㅎ)

웹 표준 프로젝트 멤버, 발표자, 후원자, 자원봉사자, 긍정적이든 부정적이든 여러가지 피드백을 보내주신 여러분들께 두루 감사드립니다.

분류: CSS,웹 디자인,웹 표준 | 2010년 7월 5일, 23:29 | 정찬명 | 댓글: 45개 |
트랙백URI - http://naradesign.net/wp/2010/07/05/1365/trackback/

45개의 댓글이 있습니다.

  1. 정찬명의 생각…

    HTML5 오픈 컨퍼런스 후기 + CSS3 소개 발표자료 공유. http://naradesign.net/wp/2010/07/05/1365/ #html5kr…

  2. 애틱 댓글:

    고생 많으셨습니다~ ㅎㅎ

  3. 아크몬드 댓글:

    발표자료, 읽기 좋게 잘 만들어져 있네요.
    잘 보고 갑니다 ;)

  4. Firejune Blog 댓글:

    HTML5 오픈 컨퍼런스 발표자료 공유…

    [HTML] [/HTML] 금일 있었던 HTML5 오픈 컨퍼런스에서 발표한 자료를 공유합니다. 웹에 공개된 예제와 코드들로 구성했기 때문에 이미 알고 계신 분들도 있을 줄로 압니다. 발표를 앞두고 충분한 준비시간을 가지지 못해 실수가 잦았습니다. 전달해 드리고 싶은 내용이 많았지만 예상치 못한 상황들이 전개되는 바람에 엉뚱한 곳에 시간을 소비했습니다. 컨퍼런스 종료 후 나눠드린 “실전 HTML5 가이드”책자에 발표때 못다한 내용들이 실려있어 조…

  5. 액션신 댓글:

    잘 보고 갑니다.

  6. tomyun 댓글:

    좋은 자료 감사합니다! 특히 마지막에 언급하신 사용자 경험에 대한 메시지가 와닿네요.

    PS: 소개자료 3.5.1장의 ‘공식 표준'(de jure standard)과 ‘사실 표준'(de facto standard)에 대한 영문 표기가 서로 뒤바뀐 것 같습니다~

  7. ignos 댓글:

    자료 공개/공유 환영하고 감사드립니다. 즐겁게 읽어보도록 하겠습니다. 그리고 오타 신고. ‘폐쇠’ -> ‘폐쇄’ ^^;

  8. kiris 댓글:

    좋은자료 감사합니다. 세미나도 잘 들었구요~ 너무 고생하셨어요 ^^

  9. tack 댓글:

    세미나에 가진 못했지만 만드신 자료 잘 보겠습니다 ^^

  10. 정찬명 댓글:

    @tomyun @ignos
    오류/오타 제보 감사합니다. 고쳐 두었습니다. ^^

  11. 그린애플 댓글:

    질문할라고 했는데!!!
    .. 전 쑥쓰럼 많은 여자니까여.. 못했어여..

    어차피 질문했어도 못 알아보셨을거임 -ㅅ –

  12. 정찬명 댓글:

    @그린애플
    무지 예쁜 여자가 나에게 질문 했었구나. 라고 생각 했겠지요. ㅋㅋ

  13. 깜찍슈기 댓글:

    저도 질문하려고 했습니다만!!!!
    꼭 찬명님께 질문하려고 했습니다만!!!!
    소심해서요 ”)
    (…핑계일까요~?)

  14. 나여사 댓글:

    ^^ 첨왔어요 ㅎㅎ

  15. […] CSS3 실전 예제 (정찬명) PDF 발표자료 […]

  16. 우와 댓글:

    -0-어쩌다가 들렸는데..유명하신분이시군요.ㅋㅋㅋ
    자료많이 읽고갑니다.
    평소에 웹표준+웹접근성에 대해서 막연히 어렵다고만 생각했는데 좀 달라졌습니다.
    열공해야겠죠.ㅎㅎ

  17. 정찬명 댓글:

    @깜찍슈기
    깜찍한 아가씨에게 소심함은 어울리지 않아요~ ㅎㅎㅎ

  18. 정찬명 댓글:

    @나여사
    처음 뵙겠습니다. 정말 괜찮은 도메인을 소유하고 계시네요. ^^

  19. 정찬명 댓글:

    @우와
    저도 좀 유명해지고 싶습니다! 열공을 응원드립니다. ^^

  20. 익명 댓글:

    저도 소심해서!!!
    대신 찬명님 얼굴을 뚫어지게 쳐다보았는데~
    혹시 느끼셨나요? ㅎㅎㅎ

  21. 정찬명 댓글:

    @익명
    어쩐지 무척 낮이 뜨겁다 했어요. 제 얼굴은 봐줄만 하던가요. ㅎㅎㅎ

  22. 은댕 댓글:

    늘 보기만 하다가 처음으로 댓글 남겨봅니다~ ㅎㅎ
    전 컨퍼런스에서 발표해주신 내용만으로도 궁금하던 부분이 많이 풀려서 어떤 질문을 드릴까 하고 한참 고민했었네요. ^^; 다음에 또 발표를 들을 기회가 생긴다면 그땐 먼저 질문을!

  23. 정찬명 댓글:

    @은뎅
    어쩐지 늘 감시당하는 기분이 들더라구요. ㅋㅋㅋ 다음에는 제가 은댕님 발표를 들어보고 싶습니다! ㅎㅎ 감사해요.

  24. msunny~ 댓글:

    음히히~ ^^ 컨퍼런스에서 1시간일찍도착해서 가운데…두번째줄…에서 ^^ 발표내용을 들었다는..사진으로 봐온 분들을 직접 보니 새롭기도하고..
    가기전에 자료를 조금보고 가서그런지~^^ 애매했던 부분들이 있었는데…도움이 되었던것 같습니다..^^ 질문을하고싶었는데..꾹 참고..소심하게 있었다는..ㅋㅋㅋ

  25. 정찬명 댓글:

    @msunny~
    완전 모범생이시군요. 모범생이 소심하면 어떡해요! ㅋㅋ 다음에 또 기회가 된다면 맨 앞줄에 앉아서 들으시고 질문도 해주세요. ^^ 감사합니다.

  26. 나상욱 댓글:

    실제로 뵌건 처음이었습니다.
    사진보다 실물이 괜찮으시던데요~

    그나저나 발표도중 “저희나라”에 대한 부분을
    바로 정정해주신게 제일 눈에 띄네요~

    발표를 들으면서 아쉬웠던 부분이었거든요 :)

    아무튼 발표 너무 잘 봤습니다~

  27. 정찬명 댓글:

    @나상욱
    상욱님 댓글은 크게 출력해서 액자에 넣어 집에 걸어두고 싶군요. ㅋㅋ 실수한건 알고나서 얼굴이 참으로 화끈거렸답니다. 고맙습니다. ^^

  28. 익명 댓글:

    첫번째 아쉬운점이라고 쓰신것은 아쉬워 안하셔도 됩니다. 그걸 불편하다고 한사람 없으니까요.

  29. 정찬명 댓글:

    @익명
    네, 제가 잘 못 보고 들은것이었으면 좋겠네요.

  30. melt-snow 댓글:

    안녕하세요.
    오랜만에 들렀는데 여전히 올바른 웹 표준을 연구하고 전도하려 노력하시는 모습이 보기 좋네요.
    앞으로도 꾸준한 활동과 흔적 부탁 드립니다.

  31. 정찬명 댓글:

    @melt-snow
    워낙 특이한 닉네임이라서 기억이 납니다. 정말 오래간만에 오셨네요. ^^

  32. Daewang 댓글:

    항상 생각하는 거지만 좋은자료 정말 감사합니다.
    글로 생각을 표현하는게 많이 서툴러서 자주 댓글을 못남김이 죄송하네요…ㅡㅡ;;

  33. 익명 댓글:

    좋은 강좌 감사드립니다.

    웹 개발에 많은 도움을 주셔서 다시한번 감사드립니다.

  34. 익명 댓글:

    정말 감사합니다. 많은 도움이 되었습니다. 훌륭하신 일을 하시는데, 깊이 감사의 말씀 올립니다.

  35. 나레 댓글:

    자료 감사히 받아 갑니다!

  36. 둥2와 딸Ki 댓글:

    언제나 좋은 경험과 좋은 자료를 제공해주셔서 넘 감사드립니다.^^

  37. 피터에스 댓글:

    안녕하세요 ^^ 잘지내시죠?
    예전에 킴스큐 운영진이였던 ^^

    이번에 9월 16일 마이크로소프트에서 주최한 세미나 잘 들었습니다 ^^
    제가 포스팅목적으로 동영상으로 내용을 찍었었는데요

    kimsq개작버젼인 저희 devq.co.kr에 동영상과 함께 포스팅하려고 합니다.
    찍었지만 교육내용 동의를 받고 싶습니다 ^^

    아… 제가 찬명님 트위터를 팔로우 했습니다.
    @piterus 이구요. DM이나 메세지 주시면 감사하겠습니다 ^^
    항상 좋은 내용 주셔서 감사합니다.
    화이팅 하세요

  38. 정찬명 댓글:

    @피터에스
    아, 기억납니다. 예전에 동영상 촬영해 주셨던 분이시죠?
    저는 제 동영상 올리는것 상관하지 않습니다. 오히려 영광이죠.
    한편 마이크로소프트쪽에도 문의를 드려 놨습니다.
    마이크로소프트에서 주최하신 행사이다 보니 괜찮은건지 확인해 보는게 좋을것 같아서요.
    답변이 오면 DM 드리겠습니다.
    고맙습니다.

  39. 피터에스 댓글:

    DM 감사합니다. 찬명님이 저를 팔로우 안해서인지
    찬명님께 DM이 안가는군요 ㅋㅋㅋ
    보내주신 행사내용 당연히 넣는 건 마땅하구요 ^^
    동영상 포스팅하면 해당 URL을 포스팅하겠습니다.
    아마 트래픽때문에 “유튜브”에 올린후에 링크를 걸어야할것 같습니다.
    포스팅후에 찬명님, MS트위터 그리고 MS후기 이벤트에 URL올릴께요.
    포스팅 허락해 주셔서 감사드립니다 ^^

  40. […] http://naradesign.net/wp/2010/07/05/1365/ 카테고리:Web 태그:CSS3, HTML5 LikeBe the first to like this post. 덧글 (0) Trackbacks (0) 덧글 남기기 트랙백 […]

  41. 세영 댓글:

    좋은자료 감사합니다. html5 관심이 많은데, 다운 받아서 한번 읽어봐야겠네요. ^^

  42. 익명 댓글:

    정찬명님

    CSS3 소개 – http://naradesign.net/ouif/css3/
    CSS3 소개(인쇄용) – http://naradesign.net/ouif/css3/documentation.html
    CSS3 소개(발표용) – http://naradesign.net/ouif/css3/presentation.html

    이 도큐는 이제 구할수 없는건가요 ㅠㅠ
    시간날때 공부하면서 짬짬히 보던 문서인데 없어져서요 염치를 불구하고 다시한번 부탁드립니다.

  43. 정찬명 댓글:

    @익명
    에구. 제가 경로를 바꿨어요. http://naradesign.net/css3/ ^^

  44. 익명 댓글:

    감사합니다 ^^ 비오지만 즐거운 하루되세요

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님