간단한 HTML 문서 생성을 위한 TextMate 용 snippet

Apple, Mac & iOS, HTML, Quotes, Web Development 댓글이 없음 »

과거 Yahoo!의 User Interface Engineer이기도 했던 Dustin Diaz씨가 얼마 전 공개한 네 번째 스크린캐스트(screencast)를 보면 TextMate가 웹 개발에 사용되는 한 단면을 엿볼 수가 있다.

그런데, 여기서 눈에 띄는 것 중에 하나는 TextMate가 기본적으로 제공하는 snippts 중에는 없는 것으로 기본 밑바탕의 HTML 문서를 만들 때 그가 사용했던 page로 지정된 tab trigger snippet. TextMate에서 사용되는 snippet이란 일정 길이의 글 단락을 문서에 삽입할 수 있는 기능을 제공하고 있는데, 이놈이 아주 유용한 이유는 삽입된 글 단락 안에서 tab 키를 이용해서 순차적으로 특정 위치로 이동할 수 있도록 지정해 줄 수도 있고, 삽입될 단락 중에 특정 부분을 변수로 지정해 놓고서 삽입된 후에 tab 키로 이동해서 상황에 맞게 수정해 줄 수도 있다.

쓸모가 많을 것 같아서 하나 만들어 볼까 하는 중에, 반갑게도 바로 그가 사용했던 Textmate의 “page” snippet을 공개해 주었다.

당장 그대로 추가하고 보니, 몇 가지 XHTML 1.0 Strict Doctype에 안어울리는 것이 있어서 입맛대로 약간 수정해 보았다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ${1:${2:xml:lang="ko"}${3: lang="ko"}} dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="${4:application/xhtml+xml}; charset=utf-8" />
    <title>${5:Title}</title>
    ${6:<link rel="stylesheet" href="${7:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="$7print.css" type="text/css" media="print" />
    <!--[if IE]><link rel="stylesheet" href="$7ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
      
    /* ]]> */
    </style> 
    ${8:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
      $0
    // ]]> 
    </script> 
  </head>
  <body id="${9:page}">
    <div class="container">
      ${10:<div class="span-${11:24}">
        <h1>${12:Header}</h1>
      </div>
      <div class="span-${13:20}">
        ${14:Main content}
      </div>
      <div class="span-${15:4} last">
        ${16:Right sidebar}
      </div>
      ${17:<div class="span-24">
        ${18:Footer}
      </div>}}
    </div>
  </body>
</html>

XHTML 문서에 포함된 inline style sheet가 적용되려면, link tag으로 삽입된 style sheet 뒤에 위치해야 해서 자리를 옮겼고, script tag에 빠져있는 type 요소도 추가해 주었다. 물론, XHTML 문서에 맞는 MIME type도 기본적으로 application/xhtml+xml로 지정되도록 바꾸었으며, CSS와 JavaScript를 감싸주는 HTML 주석(comments) 기호도 XHTML 문서에서 올바로 인식되도록 고쳐주었다.
마지막으로, 애용하는 JavaScript Library들 중의 하나인 jQuery를 불러오는 단락도 추가함.

꼬리표:

Safari에서 흉내낸 Firefox의 책갈피 키워드 기능

Apple, Mac & iOS, Quotes, Ruby 댓글이 없음 »

Firefox에서는 저장되어 있는 책갈피들을 사용자가 직접 지정해두었던 키워드(keyword)를 주소창에 대신 입력해서 바로 불러올 수 있는 기능이 있다.

이것은 단지 약간의 타이핑 수고를 덜어줄 뿐만 아니라, 주소 뒤에 붙는 query string의 조합으로, 웹에서 제공하고 있는 다양한 정보 검색 서비스들을 간편하게 이용할 수 있는 길을 열어주게 된다.
다행스럽게도, 이런 탐나는 기능을 Safari에서도 그대로 흉내낼 수가 있는데, 이 기능은 SafariStand의 Stand 메뉴 속 SafariStand Setting…을 누르면 보이는 Quick Search 항목에 숨어있어서 그냥 지나치기 쉽상이다.

아래의 그림은 Ruby와 Rails API 문서를 손쉽게 검색할 수 있는 방법이 소개된 글에 나와있는 것을 그대로 Safari에 적용한 모습이다.

SafariStand의 Quick Search 항목들을 보여주는 창 그림. Title: Ruby Search, Shortcut: ruby, URL: http://labs.parkerfox.co.uk/ruby.search/search_ruby.cgi?search=@key, Title: Ruby Core, Shortcut: core, URL: http://www.ruby-doc.org/core/classes/@key.html

이 곳에 새로운 검색 서비스 주소를 입력할 때, Firefox에서의 입력 주소와 다른 것은, query string을 뜻하는 %s 대신에 @key를 입력해 주면 된다.
이렇게 해서, 예를 들어 ruby link_to와 같은 식으로 입력하면 찾고자 하는 method나 class의 문서를 바로 보여주면서, 개발의 집중도를 흐트러뜨리지 않는 데에도 도움이 될 것이다.

꼬리표:

친구에게 깊은 인상을 심어줄 수 있는 24 가지 방법들

Quotes, Web Development 댓글이 없음 »

24 ways to impress your friends – 웹 개발에 관련된 다양한 주제의 주옥같은 글들이 모여있다.
웹 개발에 관심을 가진 사람이라면, 여기에 있는 글 하나하나 모두 머리 속에 담아놓고 싶어할 것이다. 이미 2005년도서부터 시작해서 한해에 모두 24개의 방법이 소개되는 듯한데, 올해는 아직 13개의 비법만이 올려져 있다.
나머지의 비법도 마저 공개되길 바래본다.

그런데, 이런 것으로 감명받을 수 있는 친구는 분명 괴짜이어야겠지. 😛

꼬리표:

 없음.

사이트의 기본 틀(wireframes)을 잡는데 사용될 수 있는 OmniGraffle의 stencils 모음

Notes, Quotes, Web Development 댓글이 없음 »

웹 사이트 개발 과정 중에서 사이트의 기본 틀(wireframes)을 잡는 과정은 전체 웹 사이트의 구조와 전달 형식을 규정짓는 단계로서, 아마도 사이트의 규모가 커질수록 그 중요성은 더욱 커질 것이다.

기본 틀을 잡는다는 것은, 페이지의 헤딩이나 이동 메뉴, 문서의 꾸림 정보, 사이드바 그리고 어플리케이션 인터페이스와 같은 사이트에 포함될 주요 요소들을 추가/정의하고 위치를 잡는 작업이다.
이렇게 계획 단계에서 기본 틀을 제대로 잡는 것이 중요한 이유로는, 웹 개발 팀원들 간의 의견 교환을 통한 기본 개발 지침과 방향을 마련하게 되면서 나중에 발생할 수 있는 여러가지 변경 사항들에 관한 의견 소통을 원활하게 하고, 또 사이트가 포함하게 될 각 요소 간의 관계들을 일목요연하게 나타내면서 훨씬 수월하고 효과적으로 사이트의 동작과 스타일들을 표현할 수가 있기 때문이다.

그런데, 이러한 중요성에도 불구하고 작업의 특성상 하얀 종이 위에 사이트의 기본 틀을 여러 번 그리고 고치기란 번거로운 작업이 아닐 수 없다. 그래서 이런 수작업을 보다 효과적으로 수행하는데 도움을 받을 수 있는 도구로 다양한 도표 제작 어플리케이션인 OmniGraffle를 사용하게 되면 그 기능을 충분히 대신할 수가 있게 된다.
OmniGraffle이 사이트의 기본 틀을 잡는 과정에서 특히 빛을 발하는 기능들 중에는, stencil이라고 불리는 여러 도표들에서 사용될 수 있는 다양한 모양의 기호 형판들의 모음집이라 할 수 있는데, 기본적으로 제공되는 것들 이외에 사용자들이 stencil을 직접 제작해서 올려놓은 사이트도 있다. 물론, 이 곳의 User Interface 항목에는 사이트의 wireframe들에 사용될 수 있는 다양한 기호들의 stencil들을 내려받을 수가 있어서, 이것들을 불러와서 좀 더 사실적이고 유연한 사이트의 틀을 표현할 수가 있다.

앞의 stencil들을 모아놓은 Graffletopia라는 사이트는 Summer of Rails의 여러 프로젝트들 중의 하나로서, 어쩐지 군더더기 하나 없이 산뜻하게 만들어져 있는 모습이다. 8)

새로 덧붙임: 틀을 잡을 때 특히 강조되는 것으로, 중요한 것에 치중하라는 얘기가 있다.
이 말은, 웹 디자인 과정에서 UI(User Interface) 요소들의 중요도에 따라 접근하면서 디자인을 확장하라는 얘기이다. 먼저, 웹 페이지에서 꼭 필요한 요소들은 무엇인지부터 시작해서, 그 중요도에 따라 적용이 가능한 여러 표현 방법들을 고민하는 것이다.
이러한 과정은 웹 사이트의 틀(wireframe)을 잡는 과정과 함께 동반적으로 이루어지는 작업이며, 틀을 잡는 작업의 보조적 장치로서 Page Description Diagrams이 필요해지는 이유이다.

이것은 곁가지들만 치다 몸통을 베어내는 실수를 막으려는 또 하나의 안전장치로 볼 수도 있다.

꼬리표:

웹 개발 지식의 이해도

Quotes, Web Development 댓글이 없음 »

Particletree에 올려진 Levels of Web Development Knowledge라는 제목의 글을 보면, 웹 개발에 필요한 분야별 표준 기술들에 대한 이해도 수준을 여러 단계별로 규정해 놓은 글들이 모여있다.

공통적으로 보면, 어느 기술이든 5 단계의 이해도를 가지고 있는 사람이라면 어느 정도 원숙한 기술의 이해도를 지니고 있으며, 이를 뛰어넘어 6 단계의 수준에 오른 이들은 기존 기술에 대한 완벽한 이해도 뿐만이 아니라 기존 기술의 부족한 면을 개선하려는 의지가 강하고, 그래서 미래를 위한 새로운 표준을 도출하고자 각 산업 기술의 경향을 이끄는 선도자적 위치에 있는 사람들로 정의하고 있다.

물론, 각 단게별 수준 차이보다 5 단계에서 6 단계로의 도약은 변화를 이끌기 위한 더 많은 노력과 열정이 필요하다.
그런데, 이런 개선을 위한 변화를 이끌어 내려면 표준 기술의 이해도 높아야 하겠지만, 변화를 이끌어 낼 대상이 되는, 현재 적용되고 있는 기술 산업의 변화 유연성도 높아야 하겠고, 웹 서비스를 제공하는 이들의 주체인 고객의 이해도도 같이 따라와야 할 것이리라.

여기서 꽉 막힌 고객들을 대할 때는, In Defense of Difficult Clients라는 글이 참고가 될지도. 바로, 자신이 믿고 있는 지식에 대한 지속적인 재성찰과 변화를 위한 도전만이 계몽의 길로 나아갈 수 있는 자세란다.

꼬리표:

 없음.