오래전부터 기다리던 TextMate 2의 Alpha 판 배포 소식을 들은 지도 벌써 수개월이 흘렀지만, 한국어 표시 관련 불만을 빼곤 정식 버전을 사용하는데 큰 불만은 없었기에 계속 개발 상황만 지켜보고 있었다.

한편, TextMate 2의 개발이 오랫동안 지체되는 것에 불만을 품고 다른 텍스트 에디터로 갈아타려는 시도도 빈번히 목격하는데, 최근 대표적으로 다중 플랫폼을 지원하고 개발도 활발히 진행되면서 많은 사용자를 확보하게 된 Sublime Text가 눈에 띄는 상황.

기존 TextMate 용으로 배포된 번들과 테마들을 그대로 사용할 수 있으면서도 독특하고 강력한 기능들을 갖추어서 TextMate의 자리를 꿰찰만한 에디터로 불리고 있다. 어쨌든 좋은 텍스트 에디터가 계속 생겨나는 것은 개발자에겐 반가운 현상이다.

개인적으론 익숙한 현 텍스트 에디터를 버리고 새로운 적응이 필요한 다른 에디터로 갈아탈 만큼의 필요성도 아직 느끼고 있지 않기에, 우선은 TextMate 2 alpha 버전을 사용하면서 새로 추가된 기능을 천천히 익혀 볼 생각이다. TextMate 2로 이사 준비(이)란 제목의 글 마저 읽기 →

HTML5 Boilerpate가 탄생 1주년을 맞아 2.0으로 갱신되었다.

눈에 띄게 바뀐 점이라면 모든 스타일을 기본적으로 밋밋하게 밀어버리는 CSS의 불도저라고 볼 수도 있는 일반 CSS Reset 스타일시트를 버리고 normalize.css로 갈아탄 것. 브라우저별 공통분모는 건드리지 않고 차이를 보이는 놈들만 꼭 집어서 일관성 있게 바꿔준다.
다음 링크로 가면 예전 Reset CSS 스타일을 쓴 것과 새로운 nomalize 스타일을 입힌 후 바뀐 각 element의 차이점을 확인해 볼 수 있다. – HTML5 Boilerpate CSS 변화로 각 엘르먼트의 기본 스타일 차이점

또, Build Script에는 offline 앱을 위한 appcache manifest 파일 자동 생성 기능도 새로 추가되었는데, 빌드 스크립트를 쓰지 못할 상황이라면 사이트 주소만 입력해주면 자동으로 해당 사이트의 appcache 파일을 생성해주는 Cache Manifest Validator도 유용할 것이다. 이 사이트에선 Textmate Bundle도 함께 제공하고 있음.

그리고 이미 예상된 것이지만, 이제 기본적으로 IE6 사용자에겐 Chrome Frame 설치를 권고하게 된다.

더불어 Modernizr 2 안에 respond.js도 함께 추가되면서 요즘 새로 시작되는 웹 프로젝트에는 거의 필수가 되어버린 Responsive Web Design과 ‘Mobile First’ 디자인을 적용해 볼 수 있는 기본 밑바탕도 마련되었다.

보통 Safari(WebKit)에서 “View Source”로 열린 창은 syntax highlighting을 지원하지 않고 line numbers도 표시되지 않는다. 물론 Web Inspector가 보여주는 소스를 훑어볼 수도 있지만, 중첩된 DOM tree를 일일이 열어서 확인하는 것도 가끔은 귀찮은 일.

이런 “View Source” 기능의 단점을 만회하려고 BetterSource Safari extension도 설치해 놨지만, 가끔 열린 페이지의 소스를 복사해놓고 수정 작업까지 하려면 글자 편집기에 바로 보여주는 기능도 요긴할 것이다. 여기에 안성맞춤으로 Safari에서 웹 페이지의 소스를 TextMate에 보여주는 요령을 발견. Safari 혹은 WebKit에서 보이는 웹 페이지의 소스를 TextMate에서 열기(이)란 제목의 글 마저 읽기 →

새로 문을 연 TextMate 팁 소개 사이트에 소개된 요령으로, 터미널에서 다음과 같은 명령으로 시작 언어(Syntax)를 원하는 것으로 바꿀 수 있다.

defaults write com.macromates.textmate OakDefaultLanguage [UUID]

UUID 부분은 번들마다 고유의 것을 가지고 있는데, 해당 번들을 “패키지 내용 보기”로 열고 Syntaxes 폴더 안에 있는 plist 파일을 열면 UUID 값을 알아낼 수 있다.

개인적으로 HTML5 번들의 것을 기본으로 지정해 두었는데, 해당 명령은 다음과 같다.

defaults write com.macromates.textmate OakDefaultLanguage 6F87DAE1-56E0-4193-A940-8D68BC76874C

Change Textmate startup syntax 요령 설명 동영상

TextMate에서 CSS 코딩을 하다 보면, HTML5에서 새로 소개된 elements를 인식하지 못해서, syntax coloring을 제대로 안 해주는 아주 사소한 문제가 있다.

이 문제를 수정하려면, TextMate.app/Contents/SharedSupport/Bundles/CSS.tmbundle/Syntaxes/CSS.plist 파일을 열고 Root>patterns>Item 0>patterns>Item 1 속에 있는 match 정규식을 다음처럼 수정해주면 된다.

\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|menu|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|source|span|strike|strong|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video|wbr)\b