널리

안녕하세요. 처음 인사 드리네요. ^^ 작년 12월에 NHN 웹표준팀에 새로 합류한 겨미겨미라고 합니다.

이번에 마크업 코딩컨벤션에 맞게 HTML, CSS 코드를 정렬해주는 툴 등 마크업 개발에 필요한 도구들을 제작하였습니다. 이름은 N-MET(NHN Markup Enhancement Tool)이라고 합니다.

마크업 코딩컨벤션은 공백이나 쉼표 등 코드 한 글자까지 규칙을 정해놓고 있는데요. CSS 코드 마지막 속성값 뒤의 쉼표를 넣지 말아야 한다는 규칙이나 속성 하나 하나의 순서에 대한 규칙을 매번 개발할 때마다 정확하게 지키는 것은 정말 어려운 일입니다.

N-MET은 이렇게 사람이 작업하면서 놓치기 쉬운 부분들을 바로 잡는데 도움을 주어 개발자가 코딩컨벤션을 지키기 위해 할애하는 시간을 줄여줄 수 있습니다.

그럼 N-MET의 기능을 살펴볼까요?

CSS Formatter (CSS 코드 정렬)

CSS Formatter는 CSSTidy의 PHP 라이브러리를 활용하여 제작된 CSS 코드 정렬을 위한 툴입니다.

CSSTidy는 훌륭한 CSS 파싱, 최적화 도구입니다. 하지만 안타깝게도 2007년 이후에 개발이 중단된 상태이고 미디어 쿼리나 브라우저 벤더 전용 속성값(예: display: -moz-inline-box) 등의 해석에 오류가 있었습니다.

CSS Formatter에는 위의 문제들을 고치기 위해 직접 수정한 CSSTidy 라이브러리를 사용하였습니다. 수정된 CSSTidy 라이브러리를 포함한 CSS Formatter의 모든 코드는 CSSTidy를 따라 GNU GPL 라이센스로 공개합니다.

아래는 CSS Formatter의 기능 목록입니다.

• 선택자, 속성, 값 사이의 공백 제거
• 마지막 속성 값 뒤의 쉼표(;) 제거
• 속성 순서 정렬
• 2줄 이상의 빈줄 1줄로 변경
• 모든 들여쓰기 제거
• 대문자로 쓰여진 속성 소문자로 변경
• 한글 폰트명 홑 따옴표(')로 감싸기
• 주석 공백 보정: 주석 시작(/*) 다음과 주석 끝(*/) 이전에 공백이 없거나 두 칸 이상의 공백이 존재하는 경우 한 칸의 공백으로 변경됩니다.
• 속성값 축약: 0px → 0, margin:1px 2px 1px 2px → margin:1px 2px, color:#112233 → color:#123

HTML Formatter (HTML 코드 정렬)

HTML Formatter는 PHP Simple HTML DOM Parser라는 라이브러리를 활용하여 제작된 툴입니다.

PHP Simple HTML DOM Parser는 HTML의 요소와 속성, 속성값 등을 객체 형태로 파싱하여 가공하기 쉽게 만들어주는 도구입니다. 처음 제작할 당시에는 유명한 HTML 파서, 최적화 도구인 HTML Tidy를 사용하려고 하였으나 극복 불가능한 문제가 생겨 포기하고 PHP Simple HTML DOM Parser를 이용하게 되었습니다.

CSS Formatter에서 사용한 CSSTidy와 마찬가지로 PHP Simple HTML DOM Parser의 코드를 약간 수정하여 사용하였습니다. 수정된 부분은 유효하지 않은 마크업을 보다 현명하게 파싱 하기 위한 내용입니다. 참고로 유효하지 않은 마크업의 파싱은 완벽한 정도는 아니고 실무에 적용하였을 때 크게 문제되지 않을 정도입니다. 앞으로 사용하시면서 피드백을 주신다면 더욱 견고한 도구가 되지 않을까 생각합니다. ^^

HTML Formatter의 모든 코드는 PHP Simple HTML DOM Parser를 따라 MIT License로 공개합니다.

CSS Formatter와 HTML Formatter의 모든 코드는 Naver 개발자 센터에서 확인 가능합니다.

아래는 HTML Formatter의 기능 목록입니다.

• 들여쓰기 보정
• 대문자로 쓰여진 태그명, 애트리뷰트명 소문자로 변경
• 애트리뷰트 순서 정렬
• 애트리뷰트값을 큰따옴표로 묶도록 변경
• 일부 태그의 애트리뷰트 값 보정
  • html: lang 기본값 ko
  • style: type 기본값 text/css
  • script: type 기본값 text/javascript
  • input: radio, checkbox의 checked 애트리뷰트값 checked로 변경(checked=”checked”)
  • option: selected 애트리뷰트값 selected로 변경(selected=”selected”)
  • textarea: cols 기본값 30, rows 기본값 5. 기본값보다 작으면 기본값으로 변경
  • button: type 기본값 submit
  • img, area: alt 기본값 빈값. Title만 있을 경우 alt값을 title값으로 지정
  • th: scope 기본값 부여. (thead에 포함된 th일 경우 col, 나머지 경우 row)
  • html, head, title, base, basefont, meta, script, param: title 애트리뷰트 삭제
• 2줄 이상의 빈줄 1줄로 변경
• 주석 공백 보정
• DTD에 맞는 self-close 태그 문법 적용 (예: [XHTML DTD인 경우] <br> → <br />)
• 태그 내의 불필요한 공백 삭제 (예: <div> test </div> → <div>test </div>)

CSS Sprites Generator

CSS Sprites Generator는 CSM(CSS Sprites Matrix)이라는 CSS Sprites 기법을 이용하기 위한 이미지와 CSS 코드를 쉽게 생성해주는 도구입니다.

CSM이란 저희 NHN 내에서 웹 페이지 성능 최적화를 목적으로 고안한 것으로 페이지의 이미지 요청 수를 극단적으로 줄여 CSS Sprites를 사용하는 E-HRM(Extreme HTTP Request Minimization)기법입니다. 곧 CSM의 자세한 내용을 널리를 통해 포스팅할 예정입니다.

Adobe AIR로 제작된 N-MET

N-MET은 Adobe AIR로 제작되었습니다. Adobe AIR는 크로스 플랫폼, 즉 다양한 운영체제에 응용 프로그램 형태로 배포가 가능하다는 장점과 HTML, CSS, JavaScript만 알면 쉽게 응용 프로그램을 제작할 수 있다는 장점, 그리고 무엇보다 원하는 기능을 쉽고 빠르게 제작할 수 있다는 장점이 있기 때문에 선택하였습니다.

응용 프로그램을 만드는 데 관심은 있지만 어떻게 하면 좋을까 고민하시는 UI 개발자(혹은 웹퍼블리셔)시라면 Adobe AIR로 도전해보시기를 추천합니다. :)

N-MET의 소개를 마치며...

N-MET은 이번 공개 이후에도 계속하여 유용한 마크업 개발 편의 도구들을 추가하여 나아갈 예정입니다.

앞으로 많은 응원 부탁드립니다. 고맙습니다.