박종명의 아름다운 개발 since 2010.06

코드를 알아 보기 힘들게 만드는 것을 '코드 난독화' 라고 한다
닷넷이나 자바와 가은 가상머신 기반의 프로그램은 컴퓨터가 직접 해석할 수 있는 네이티브 코드 생성 이전에 중간언어과정을 거치게 되어 있다

이러한 중간언어는 '디스어셈블러' 같은 툴로 다시 원 코드로 복원시킬 수 있다
이렇게 되면 배포된 프로그램의 소스를 쉽게 읽을 수 있기 때문에 코드 낙독 처리를 통해 소스의 가독성을 떨어뜨려 소스를 보호하게 된다

특히나 웹의 경우 소스는 여지없이 공개되는 구조이다
HTML, CSS 는 물론이고 자바스크립트 코드도 모두 공개되는 구조이다

자바스크립트 패킹은 일종의 소스 보호 차원에서 스크립트 코드를 난독화하고 더불어 소스를 압축 및 최소화하여 다운로드 속도도 향상시켜 주기 때문에 많은 곳에서 적용하고 있다

이 블로그에서 소개한 Raphale 과 같은 라이브러리도 아래와 같이 패킹되어 있다

확실히 웹 기술을 둘러싼 주변 환경은 변화하고 발전하고 있음을 느낀다
훌륭한 오픈소스 라이브러리가 속속 등장하는 것만 봐도 실감할 수 있다

지금 소개할 Raphael 역시 MIT라이센스를 따르는 자바스크립트 벡터 라이브러리이다
http://raphaeljs.com/

SVG와 VML을 이용하여 웹에서 벡터그래픽을 표현한다
객체 및 함수로 추상화가 되어 있어 사용법을 익혀 쉽게 이용할 수 있다

Raphale 라이브러리는 문서화가 잘 되어 있어 사용법을 익히는데 큰 도움이 된다
사이트의 문서를 보면 각 그래픽 요소에 따른 설명과 사용법, 결과 화면등이 체계적으로 제공되어 학습 및 적용하기에 매우 편리하다

Raphale 사이트에서 모든 정보를 얻을 수 있다
중요한 것은 이제 웹에서 벡터 그래픽을 보다 쉽게 그리고 안정적으로 (그리고 무료로) 구현할 수 있게 되었다는 것이다

참고로 IE (6이상) 를 포함한 대부분의 브라우저를 지원한다는 것도 큰 장점이다

아이폰에서 플래시가 구동되지 않는 것은 꽤 오래된 이슈이다
지금 소개하는 Gardon이라는 라이브러리 역시 공개된지 꽤 되었다

Tobias Schneider 라는 외국의 한 개발자가 만든 이 라이브러리는
플래시런타임 없이 순수 자바스크립트(& SVG) 만으로 플래시를 구동시켜 주는 오픈소스 라이브러리이다

플래시런타임에 비해 기능이나 실행 속도면에서 부족한 면이 있지만,
아이폰과 같이 플래시를 지원하지 않는 환경에서 플래시를 구동시키기 위한 훌륭한 대안이 될 수 있다

다음의 github 사이트를 통해 라이브러리의 소스가 제공된다
http://github.com/tobeytailor/gordon

그리고 이 라이브러리를 이용해 플래시를 구동시키는 데모는 아래 사이트에서 확인할 수 있다
http://paulirish.com/work/gordon/demos/

벡터 그래픽 기반인 플래시의 표현을 위해 SVG가 이용되었으며 플래시파일인 swf 파일을 전달하면 Gordon 라이브러리를 통해 자동 분석, 변환된다. 이때 큰 swf 파일의 분석시 실행 성능과 멈춤현상을 없애기 위해 HTML5의 Web Worker 기술을 사용했다고 한다

소스만 봐도 대략 사용법을 쉽게 알 수 있는데,
더 자세한 사용법과 Gardon의 특징을 보려면 다음의 링크를 확인해 보기 바란다
http://wiki.github.com/tobeytailor/gordon/


브라우저 지원 현황과 플래시 지원 범위
Gardon을 실무에 적용하기 위해서 먼저 점검해 봐야 할 것이 이 두가지이다
어떤 브라우저에서 그리고 플래시의 어디까지를 지원하는지 체크하는 것이 중요하다

우선 Gardon 은 모든 플래시 기능을 다 지원하지는 않는다
swf 버전 1 기능 위주로 지원이 되며 swf 버전 2 ~ 10까지의 플래시 기능은 일부만 지원된다
아래의 링크에서 Gardon이 지원하는 swf 태그를 확인하도록 하자
http://github.com/tobeytailor/gordon/wiki/swf-tag-support-table

그리고 브라우저 지원현황은 아래 링크를 확인하자
http://wiki.github.com/tobeytailor/gordon/browser-support-table

대략 테스트를 해보니,IE(8)를 제외한 사파리,크롬,파이어폭스,오페라 최신 버전에서 정상 동작한다

참고로 이 라이브러리는 MIT 라이센스로, 사용상의 문제만 책임진다면 자유롭게 이용할 수 있다

이전 글에서 소개한 RGraph 와 유사한 라이브러리를 소개한다
jQuery 의 플러그인 형태로 제공되는 Visualize 라이브러리 이다

HTML5 그래픽 관련 툴을 찾던 중 알게 된 이들 라이브러리는 아주 유용하며 안정감 마저 든다
아직 표준안이 완성되지 않은 기술에 기반 라이브러리가 먼저 등장하는 점은 HTML5를 선호하는 사람에게는 매우 고무적이라 볼 수 있겠다

Visualize 역시 HTML5 의 Canvas 를 통해 차트를 표현하며 jQuery 기반으로 동작한다

RGraph 가 그래프 및 차트에 이용되는 데이터를 스크립트를 통해 RGraph 객체로 정의하는 반면,
Visualize 는 HTML 테이블에 정의된 데이터를 자동으로 분석해서 차트로 변환해 주는 특징이 있다
또한 RGraph 처럼 브라우저 호환성을 위한 장치가 마련되어 있다

직접 테이블의 데이터를 수정하면서 차트의 변화를 확인할 수 있는 다음의 링크로 이동해 보자
http://www.filamentgroup.com/examples/charting_v2/

그리고 라이브러리 소개 페이지이다
http://www.filamentgroup.com/lab/
update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

HTML5 의 Canvas 를 이용해서 각종 그래프를 만들어 주는 라이브러리이다

비 상업적 사이트일 경우 무료로 사용 가능하다
(상업적 사이트일 경우 소정의 수수료를 요구하는 것 같다)

바차트, 도넛차트, 파이차트, 간트차트, 로즈차트 등 다양한 형태의 차트를 지원하며 도움말이 충실히 제공되어 쉽게 사용할 수 있다. 그래프 표현 뿐만 아니라 줌기능, 컨텍스트 메뉴 등록, 비동기 출력, 애니메이션 효과 등 2D 그래픽과 관련한 유용한 기능들도 구현되어 있다

그리고 예제를 보면 Canvas를 지원하지 않는 브라우저를 위한 코드 즉 IE8 의 Canvas 적용을 위한 ExplorerCanvas 와 구글 프레임을 적용하는 등 브라우저 호환성을 신경 쓴 모습이다
 
이 사이트에서 공식적으로 소개하는 브라우저 지원 목록은 아래와 같다
- Mozilla Firefox 3.0+
- Google Chrome 1+
- Apple Safari 3+
- Opera 9.5+
- Microsoft Internet Explorer 8+ (see note)

현재 시점에서(2010.09.14) 최종 릴리즈 버전으로 2010.08.28일자가 등록되어 있으며 최종 베타버전으로는 2010.09.11자가 올라와 있다.

캔버스기반의 그래프라이브러리로 훌륭한 선택이 될 수 있을것 같으며 꼭 적용하지 않더라도 캔버스를 이용한 그래픽 작업을 하는데 있어 좋은 학습 자료가 될 수 있을 것 같다
아래의 사이트에서 자세히 확인해 보도록 하자
http://www.rgraph.net/

Modernizr 라이브러리는 HTML5 의 API 뿐만 아니라 CSS3 의 각종 새 기능과 SVG 등 새로운 웹 기술에 대한 전반적인 검사 코드를 포함하고 있다.

자세한 사용법은 다음의 URL을 참고하기 바란다 http://www.modernizr.com/docs/

Modernizr 를 이용하여 몇 가지 테스트 수행 코드를 작성해 보았다
O,X 표현을 위해 div 요소를 정의했는데 이 부분은 생략하고 스크립트 부분만 발췌한다

그리고 구글 크롬에서 실행한 결과 화면은 다음과 같다

JQuery 는 오픈소스 자바스크립트 라이브러리이다

JQuery 를 이용해서 스크립트 작업을 하면 웹 표준에 위배되는지 걱정하지 않아도 되며
매우 간단한 문법구조로 많은 처리를 할 수 있는 장점이 있다
또한 스크립트의 안정성도 뛰어나 결과적으로 스크립트 작업의 생산성을 극대화 할 수 있게 된다

JQuery 를 페이지에서 사용하려고 하면 JQuery의 기반 라이브러리를 페이지에 정의해야 한다

일반적으로는 JQuery 라이브러리를 직접 다운로드 해서 페이지에 삽입하면 된다

1) JQuery 라이브러리 파일을 직접 페이지에 삽입하기
http://docs.jquery.com/Downloading_jQuery 에서 최신 버전 다운로드 받는다
(현재 최신 버전은 1.4.2 이다)

그리고 페이지의 head 영역에 해당 스크립트를 포함시킨다
<head>
    <script type="text/JavaScript" src="jquery-1.4.2.js"></script>
</head>

이제 해당 페이지에서는 JQuery 관련 기능을 이용할 수 있게 된다


2) 최소 버전 JQuery 라이브러리 사용하기
JQuery 라이브러리는 풀버전과 최소화버전 두 가지가 제공된다
최소화버전은 사이즈가 작은 대신 디버깅 환경은 제공되지 않는다는 특징이 있다
따라서 개발시에는 풀버전으로 하고 라이브 적용 때에 최소화 버전으로 변경하는 것을 생각해 볼 수 있다. 최소화 버전 역시 JQuery 홈페이지에서 다운로드 받을 수 있다
<head>
    <script type="text/JavaScript" src="jquery-1.4.2.min.js"></script>
</head>


3) 구글의 CDN 서비스 사용하기
CDN 서비스는 굉장히 빠른 속도로 컨텐트를 내려 받을 수 있는 환경을 제공한다
구글에서 JQuery 라이브러리 다운로드를 위해 CDN 서비스를 무료로 제공해 주고 있다

다음의 URL 이 JQuery 가 호스팅 된 곳이다

최소화 버전)
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

풀버전)
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

역시 이 URL을 head 에 스크립트로 명시하면 된다
<head>
  <script type="text/JavaScript"  src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script>
</head>


JQuery 서적에서는 구글의 CDN 서비스를 이용할 것을 다음과 같은 사유로 권장한다
- 안전하고 믿을 수 있다
- 다운로드가 빠르다
- 어디서나 사용할 수 있다(JQuery.js를 늘 들고 다니지 않아도 된다)


3. 마이크로소프트의 CDN 서비스 사용하기
마이크로소프트 역시 구글처럼 JQuery를 CDN 으로 무료 서비스를 제공한다
다음 URL이 그것이다

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js

한 때 웹개발을 수 년간 했었다
초기 ASP를 기반으로 해서 다양한 웹 사이트를 개발했었다
당시 자바스크립트 공부도 꽤 했으며 다양하게 응용도 했었다

그러나 윈도우 응용프로그램을 수 년간 개발하면서 웹 개발을 조금 멀리 했었다

그리고 이후 웹 개발 프로젝트를 수 년간 관리했었다
이 때는 실무 개발보다는 프로젝트 관리자 입장에서 웹을 바라보았으며 코드보다는 성능, 가용성,
연동, 안정성 등을 위주의 관리적 경험이 대부분이었다

그리고 지금...
모바일 웹 부문을 맡게 되면서 다시 웹을 실무수준으로 개발하게 되었다
현재의 웹은 과거 경험했던 웹 보다 더욱 체계화 되었으며 표준에 대한 요구가 많이 늘었음을 느낀다

지금은 웹 개발을 한다는 의미보다 웹을 한다는 의미로 받아 들이고 있다
웹은 소프트웨어 환경에서 빼 놓을 수 없는 플랫폼이다.
웹 개발을 다시 한다는 편협한 시각보다는 웹을 이해한다라는 거시적 관점에서 다시 시작해 보려 한다

그 출발으로, 자바스크립트 라이브러리로 유명한 JQuery 책을 신청했다

과거 언젠가..
더 이상 자바스크립트 공부를 섬세히 할 일이 없을 것이다... 라는 나의 예측이 어긋난 것이다.