Rev. 2.73

지난 9일 구글 크롬 브라우저는 WebSocket(웹소켓) API를 지원한다고 발표했습니다. 그리고 최근에 Jetty(웹 서버)WebSocket을 지원하는 버전을 배포했습니다. 그렇습니다. WebSocket은 브라우저만으로 사용할 수 있는 것이 아니라 웹 서버도 함께 지원되어야 하는 것입니다. 웹 개발자들 사이에서는 HTML5 명세에도 표준으로 자리매김하므로써 다른 브라우저나 웹 서버들이 이를 지원하는 것은 시간문제로 치부하고 있습니다. 이는 곧 Ajax의 혁명으로 다가 올 것이며 기존 웹을 온전한 리얼-타임(실시간)으로 만들어 줄 것으로 기대하고 있습니다. 구글 Wave와 같은 실시간 인터랙션의 웹 애플리케이션들을 어렵지 않게 구축할 수 있게 되는 것이죠. 실제로 Jetty 웹 서버(7.0.1)를 로컬에 설치하고 크롬 브라우저(베타)에서 채팅 예제를 실행해 보았습니다. Comet을 기본으로 사용하는 Jetty 6.x의 것과 비교하면 매우 간결하고 성능도 좋다는 것을 굳이 소스를 확인하지 않아도 알 수 있었습니다. 조만간에 고정 IP에 Jetty를 설치하여 실제로 돌아가는 여러 예제들을 작성해 볼 예정입니다.

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://example.com/service");
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); ....
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; ... };
  ws.onclose = function() { ... }; // websocket is closed.
} else {
  // the browser doesn't support WebSocket.
}

그렇다면 Comet은 어떻게 될까요? 글쎄요... Comet은 크로스브라우저를 위한 솔루션으로 남게될 가능성이 큽니다. 어찌됐건 매우 흥분되는 일이 아닐 수 없습니다.

Comments

Roman Cortes씨는 자바스크립트를 사용하지 않고 CSS와 HTML만으로 3차원 패럴랙스(시차) 효과를 만들어 냈습니다. 좌측 회화에 마우스 포인터를 올리고 움직여 보세요. 그저 놀라울 따름입니다.

소스코드를 열어보니 엄청난 노가다를 하셨더군요. 너비가 5픽셀 짜리인 <a> 요소를 촘촘하게 배치하고 해당 요소의 :hover액션에 의하여 상황에 맞은 이미지와 포지션을 출력한 것입니다. 참 대단하신 분입니다.

반투명 PNG 이미지 포멧을 사용하므로 이를 지원하지 않는 브라우저에서(IE 8 이하)는 정상적으로 보이지 않을 것입니다.

Comments

Web Designer Wall의 Nick La씨는 잘 사용되지 않지만 유용한 5가지 CSS2 속성들에 대한 포스팅 다음으로 <div> HTML 요소가 남용되고 있는 상황에 대하여 지적하고 말끔하면서도 시맨틱한 HTML 마크업을 할 수 있도록 <div> 요소를 최소화 하는데 중점을 두어 여러가지 예시를 작성하였습니다. 혹시 다른사람이 작성한 템플릿을 수정하다가 미쳐 광분해 본 경험이 있으신가요? 여러 사람이 참여하는 규모가 큰 프로젝트에서는 군더더기 없는 템플릿의 마크업은 매우 중요하며 무엇보다도 이를 지키는 본인에게 가장 큰 혜택이 돌아가게 될 것입니다.

1. 불필요한 <div> 태그는 제거하세요.

<form>, <ul> 요소를 감싸는 <div> 요소를 우리는 어렵지 않게 목격할 수 있습니다. 도대체 왜 쓸데없이 추가적인 <div> 요소를 생성하는 것인가요?

예시 1:

이 예시는 <div> 요소를 제거하기위해 CSS 셀렉터를 조금 수정한 것입니다.

예시 2:

때때로 <div> 요소를 단순히 여백(margin)을 할당하기 위한 목적으로 사용하는 경우를 발견할 수 있습니다. 왼쪽 코드들 중에 <div class="box"> 요소가 바로 여백을 주기위한 것입니다. 이것은 <h4> 요소에 여백을 사용하면 됩니다.

2. 시맨틱한 마크업을 사용하세요.

우리는 항상 시맨틱한 마크업을 사용하여 HTML 문서의 코드를 작성해야합니다. 예를 들면 <h1> 요소에는 머릿말을, <p> 요소에는 문단 또는 단락을, <ul> 요소는 목록을 표현하는 목적을 두고 만들어진 요소들 입니다. 이러한 마크업을 준수하면 CSS가 지원되지 않는 접속환경에서도 알아볼 수 있는 HTML 문서를 제공할 수 있는 등의 혜택이 따르기 때문입니다.

예시:

<div> 요소만을 이용해서 마크업한 것과 그렇지 않은 마크업입니다. CSS가 지원되지 않는 환경에서 렌더링의 차이를 비교할 수 있습니다.

3. <div> 요소를 최소화하세요.

<div> 요소가 무분별하게 사용된 템플릿을 보고 돌아버릴 뻔 한 적이 있나요? 조금 더 구체적인 질문을 하자면 <div> 요소의 닫는 태그가 누락되거나 시작 지점을 찾느라 고생해 본 경험이 있나요? 아마도 대부분의 개발자가 이러한 경험이 있을 것이라고 확신합니다. 그래서 우리는 항상 <div> 요소를 최소화하여 사용해야 합니다. 그리하면 디버깅이나 유지보수 작업이 훨씬 쉬워질 것입니다.

예시 1:

여기에 사용된 <div> 요소는 자잘한 네비게이션 링크들(예를 들면 태그)을 위해 존재합니다. 이것을 더욱 의미있는 <p> 요소로 변경했습니다.

예시 2:

이 예시에서는 CSS를 이용해서 두개의 <div> 요소를 덜어내고 하나의 <span> 요소를 사용해서 같은 출력 결과를 만드는 과정을 설명합니다.

4. 들여쓰기(Indent) 규칙을 꼭 지키세요.

HTML을 마크업할 때 들여쓰기는 꼭 지켜야 합니다. 그래야 사람이 읽기 편하고 디버깅이 쉬워지니까요. 만약 Adobe Dreamweaver를 사용하고 있다면 Commands > Apply Source Formatting 명령으로 쉽게 들여쓰기가 완성 되도록 할 수 있습니다.

5. 닫힌 태그(</div>)에 주석을 달아 주세요.

보통 하나의 템플릿은 header, sidebar, footer 등 여러가지 구성요소로 구분되어 완성됩니다. 그래서 구성요소의 구분이 끝나는 </div> 태그에 주석을 달아두면 두번다시 찾아 해메이는 일은 없을 것입니다. 코드중에 </div><!-- /wrapper -->라는 주석을 발견했다면, 이것이 의미하는 것은 <div id="wrapper"> 요소가 이곳에서 클로즈 된 것임을 알 수 있는 것이죠.

예시:

일반적으로 구조를 종료하는 닫힌 태그(</div>)우측에 종료의 의미를 알리는 역슬래시를 표기하여 HTML 주석으로 표현합니다.

Comments