2009년 3월 12일 목요일

유명무실한 CSS 마법사 도구들

최근 들어서 CSS Generator / Tools 들이 많이 생겼습니다. 편의상 CSS 마법사 도구로 하겠습니다. CSS 마법사 도구는 클릭 몇 번 만으로 간단히 원하는 CSS를 작성할 수 있도록 도와주기 때문에 쓰임에 따라서 굉장히 편리하기도 하고, 실무에 도움을 줄 것 같아 보입니다. 하지만 문득 넘처나는 이러한 마법사 도구들에 비해 사용자가 얼마나 되나? 정말 사용할까? 라는 의구심이 들었습니다. 왜냐구요? 저조차 거의 사용하지 않기 때문이었죠.


그래서 한 주(3월 9일 ~ 12일) 동안 커뮤니티와 제 블로그를 통해서 간단히 설문을 실시해 봤습니다.

커뮤니티와 블로그 설문에 참여해 주신 분들이 약 30명쯤 되었고, 실제로 의견을 달아주신 분은 20분 정도가 되셨습니다. 나머지 10명 중 일부는 개인적으로 메신져나 쪽지로 의견을 주시기도 했습니다.

설문 응답자 수가 크지 않았기 때문에 차트 등을 인용하지 않고 간단히 글로 정리를 하겠습니다.

  • 전체 30명 중 10명이 들어봤고,
  • 10명 중에 2명이 사용을 해봤고,
  • 레이아웃, 네비게이션, 폰트를 위한 목적으로 사용해 봤고,
  • 지속적으로 사용한 경우는 1명이었습니다.

의외다라고 생각하시는 분들고 계실테고, 뻔한 결과군 하고 본 페이지를 떠나는 분들도 계실 것 같습니다. 저는 그동안 여러가지 CSS 마법사 도구들을 사용해 보고, 소개를 해 드리기도 했습니다. 꽤나 편리하고 요긴한 것들이 많았습니다. 실무에 적용되서 사용되면 참 편하겠다라고 생각했던 것들도 몇 가지 있었구요. em 단위를 계산해 주는 것이라든가 하단 고정 레이아웃을 위한 기본 CSS를 작성할 때도 도움이 될 것이라고 생각했죠. 몇 번인가는 실제로 적용해 본 적도 있었습니다. 하지만 예상 외로 많은 분들이 한 귀로 듣고 다른 한 귀로 흘려버린 경우가 많았고, 사용 자체에 귀찮음을 많이 가지셨던 걸로 보입니다.

또한, 경험이 많은 개발자와 경험이 적은 개발자 간에도 사용 유무에 따른 이유가 다른 것 같습니다. 개발이 많은 경우 굳이 CSS 마법사 도구의 힘을 빌리지 않더라도 얼마든지 더 나은, 최적화된 코드를 작성할 수 있기 때문 일 것이고, 경험이 적은 개발자는 반대로 CSS 마법사 도구가 만들어낸 코드가 더 어렵거나 수정이 쉽지 않다고 느끼는 것 같습니다.

하지만 개인적으로 생각해 볼 때 CSS 마법사 도구는 경험이 적은 입문자들에게 '학습용'으로 도움이 됩니다. 특히 최근에 소개되고 있는 마법사 도구들은 의미 있는 마크업과 접근성을 높인 HTML과 CSS, JavaScript 를 제공하고 있습니다. 입문자들이 많은 사이트들의 소스 코드를 열어보고 분석하는 것만큼 큰 공부가 없습니다. 하지만 막상 네이버 홈페이지의 소스 코드를 열어봤다면 도대체 어디서부터 뭘 봐야 할지 난감 할 것입니다. 원하는 부분에 대한 가장 최적화된 코드만을 확인해 보고 공부하고 싶을 때 어려움이 생기는 부분입니다. 이런 경우에 CSS 마법사 도구는 입문자들에게 좋은 예제 코드를 제공하는 자습서가 될 것입니다. 막연히 유명 사이트의 소스를 열어 놓고 봐도 모르겠다고 하지 말고 가까운 곳에서 유익한 CSS 마법사 도구들을 가지고 놀면서 눈을 익혀 간다면 좋지 않을까 싶습니다.


http://www.typetester.org/

http://www.typetester.org/


폰트 스타일을 지정할 수 있습니다. 외국 사이트의 가장 큰 아쉬움은 역시나 한글 폰트(돋움, 굴림)를 지원하지 않아서 제대로 활용해 보기가 쉽지 않다는 점입니다.


http://www.jotform.com/

http://www.jotform.com/


회원 가입과 같은 사용자 서식 영역을 작성해 주는 도구입니다. 드래그 앤 드랍 방식으로 쉽게 원하는 서식을 작성할 수 있습니다. TABLE을 이용해서 마크업 해 줍니다.

http://csscreator.com/?q=tools/layout

http://csscreator.com/?q=tools/layout


기본적인 레이아웃에 대한 마법사 도구입니다. DTD를 선택할 수 있다는 특징이 있습니다.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php


역시 레이아웃을 위한 도구인데, DTD 설정 부터 시작해서 굉장히 디테일한 정보를 편집해서 결과를 얻어낼 수 있습니다.

http://www.highdots.com/css-tab-designer/

http://www.highdots.com/css-tab-designer/


다양한 디자인의 탭 메뉴를 만들고, 괜찮은 HTML, CSS를 받아볼 수 있습니다.

 http://css.maxdesign.com.au/listamatic/

http://css.maxdesign.com.au/listamatic/


다양한 형태의 목록을 보여줍니다. 2탄도 준비되어 있습니다.

더 많은 CSS 마법사 도구는 여기서 확인해 보실 수 있습니다.

댓글 없음:

댓글 쓰기