현재 웹의 화두는 웹 어플리케이션으로의 진화라고 요약될 수 있을 것이다. 이를 아우르는 새로운 웹 표준으로 HTML5가 자리잡고 있는데, 여기에는 과거 데스크탑 어플리케이션의 전유물로만 여겨지던 여러 기술들을 거의 모두 아우르고 있다. 과거, 한 때 정체되어 있던, HTML4, XHTML1 그리고 DOM2 HTML 웹 기술들을 대체할 목적으로 새로운 틀이 만들어지고 있는 것이다.

그렇다면, 지금 당장 HTML5를 사용할 수 있을까? 해답은 바로 웹 브라우저들의 지원 상황에 달려있다.
공식적으로 발표된 HTML5의 W3C Candidate Recommendation 단계로의 진입은 일러야 2012년으로 예상하고 있으며, 현 브라우저들의 지원 상황도 그 편차가 심하지만, 대세를 그르치지 않는 이상 앞으로 상황은 급속도로 좋아지리라 생각된다.

또한, 당장 HTML5를 사용해도 별 큰 문제가 없는 것이, HTML5 태생부터 과거 호환성을 염두에 두었기에 큰 무리없이 점진적으로 새 기술을 흡수(Progressive Enhancement)하는데 유리하다는 점도 있겠다. 좀 더 자세한 브라우저들의 HTML5 기술 지원 상황은 When can I use… 페이지에서 확인할 수 있다.

자, 그럼 HTML5로 전환하기 전 챙겨야 할 사항들을 알아보자. HTML5로 한 발 더 내딛기 전에 챙겨야 할 것들(이)란 제목의 글 마저 읽기 →

꼬리표:

2009 9월 23

Chrome Frame – IE 심장에 Chrome 렌더링 엔진을 이식

Web Standards 댓글이 없음 »

항상 웹 개발자들은 IE 렌더링 엔진의 모자름을 아쉬워하며, 사용자들이 더 나은 웹 브라우저를 설치해주기만을 간절히 바라거나, 혹은 최소의 방어 장치로 셀 수도 없는 온갖 가지의 임시 대응 패취 코드를 여기저기 심어놓는 일로 스트레스만 쌓이게 되는 일은 하루 이틀이 아니다.

이런 와중에, Google에서 문제에 직접적으로 칼을 대는 제안을 내놓았다. IE 심장을 Google Chrome의 렌더링 엔진(WebKit)으로 바꿔치기를 하려고 하는 것이다.

솔직히, 문제의 근본을 뜯어고치는 해결책은 아니더라도 살짝 돌아서 갈 수 있는 기막힌 방법이 아닐까? 주장대로만 된다면 한 번 Google Chrome Frame을 설치해놓은 IE 사용자라면, Google Chrome의 탁월한 렌더링 엔진 덕분으로 HTML5를 포함한 더 많은 표준 웹 기술을 아무런 제약 없이 맛보게 될 수 있을 테니까.

그런데, 폭 넓은 웹 기술에 관심이 많은 사용자라면 애초에 IE로 웹 서핑을 하려 하지는 않을 것이기 때문에, 결국 Google이 의도한 것은 평소 웹 기술엔 관심이 없는, 그리고 불가피하게 IE 6에 묶여있는 사람들에게 일시적으로나마 특정 사이트에 사용된 웹 기술을 사용할 수 있도록 하는 일종의 통과 패스권을 나눠주는 격이 될 테고, 또 개발자들에게는 하나의 화끈한 한 방의 해결책으로 사용될 수 있는 선택권이 추가되어 고마운 일이겠다.

자, 그럼 IE 사용자가 이 요긴한 통과 패스권을 처음 받으려면 우선 마주치는 페이지가 있는데, 살짝 혼란과 거부감이 들지는 않을까? (물론, 플러그인 설치 후 원래 페이지로 돌아가긴 하겠지만 말이다.)

그림 속 보여지는 app은 Google이 준비중인 HTML5 기술을 이용한 야심작 Google Wave로 현재 Internet Explorer 6,7,8 모두 지원하지 않는다.

어찌 됐든 상황을 되짚어 보면, Microsoft가 열어 놓은 뒷 구멍을 통해 자신의 심장이 경쟁자의 것으로 통채로 바꿔치기된 형국이니, 앞으로 MS의 반응이 재밌어지겠군.

꼬리표:

2009 9월 22

Zen Coding – HTML과 CSS의 코드 작성 효율을 극대화 해주는 텍스트 에디터 plugin

Apple, Mac & iOS, CSS, HTML 댓글이 없음 »

물론, 이미 TextMate에는 내장된 훌륭한 HTML과 CSS snippets을 사용해서 효율적으로 코딩할 수 있는 여건이 제공되고 있지만, 456 Berea Street의 소개 기사로 알게된 zen-coding은 여기에 엄청난 효율의 상승 효과를 더해준다.

사용 예를 보면 한 눈에 그 막강함을 눈치챌 수 있다.

div#main-menu>ul.menu>li#item-$*5{This is an item $}*5

에디터에서 위 코드를 입력하고 Zen Coding 명령(command+E)을 실행하면 다음과 같은 snippet을 돌려준다.

<div id="main-menu">
  <ul class="menu">
    <li id="item-1">This is an item 1</li>
    <li id="item-2">This is an item 2</li>
    <li id="item-3">This is an item 3</li>
    <li id="item-4">This is an item 4</li>
    <li id="item-5">This is an item 5</li>
  </ul>
</div>

말 그대로, HTML and CSS hi-speed coding 주장에 걸맞는 plugin으로, CSS selectors를 써서 HTML DOM을 효과적으로 생성/코딩할 수 있다는 점은, 과거 Ruby gem plugin으로 유명한 Haml의 장점을 그대로 따와서 바로 HTML과 CSS 파일에 사용할 수 있게 된 것이나 마찮가지다.

현재, Zen Coding은 TextMate 말고도, Aptana, Coda, NetBeans 그리고 Expresso를 지원한다고 나와있으며, 홈 페이지에서 데모용 스크린케스트도 제공하고 있다.

참고로, Zen Coding은 러시아 개발자들이 주축이 되어 개발되고 있기 때문에, HTML Root element에 속해있는 html의 lang 속성을 기본 ru에서 ko로 바꾸어주는 수정이 필요하다. TextMate의 경우, Zen-HTML bundle은 Bundle Editor를 열어서 수정하고, Zen Coding bundle은 번들 패키지 속 /Support/zencoding/settings.py 파일을 열어서 수정해주면 된다.

이제, 이런 코딩 작업 향상이 받쳐줄 만한 좋은 아이디어만 쏟아져 나와주면 좋을 텐데, 역시 어렵군. 😮

꼬리표: