소개

이 기사에서는 웹 개발자와 그들의 관리자가 흥미로워 할 웹 페이지 하나를 구체적으로 살펴보게 된다. 코딩은 완전히 이해할 수 있을 정도로 간단하며 기존의 양식 기반 웹 애플리케이션보다 우수한 GUI 효과를 모델링한다. 이러한 효과는,

• 공용 표준에만 의존한다.
• 적어도 사설 대안만큼은 수행한다.
• 새로운 팀워크 및 협업 모델을 제시한다.
• 전에는 분명히 문서로 명시된 적이 없었던 구현 기술을 표현한다.

이 기사는 다음과 같은 세 가지 목표를 지향한다.

• 특정 표준을 준수하는 웹 기반 GUI 효과의 조작을 사용자 관점에서 시연한다.
• 개발자 관점에서 웹과 SVG 기술 간의 깊은 협력 관계의 사례로 모델을 설명한다.
• HTML5로 인해 복잡한 웹 애플리케이션 개발의 분업이 어떻게 촉진되는지 조명한다. 팀 리더라면 이점을 알고 싶어 할 것이다.

이 기사는 웹 페이지를 작성할 때 일반적으로 사용하는 HTML과 Javascript를 효과적으로 읽을 수 있는 사람에게 맞게 작성되었지만 이러한 언어를 능숙하게 다루지 못해도 관계없다. 이전에 SVG를 사용해 본 경험이 없어도 된다. 그러나 XML을 익숙하게 다룰 수 있어야 한다. 프리젠테이션하는 데 있어 특정 운영 체제와 관련된 의존성이 없지만 다양한 브라우저를 사용하게 될 것으로 예상된다.

위로

작업 예제

이 기사에 있는 예제를 실행하려면 Microsoft® Internet Explorer®를 제외한 최신 브라우저를 사용해야 한다. 일반적으로 Safari, Opera, Chrome, Firefox 및 QtWeb을 사용하는 것이 좋다. 이 기사의 SVG를 Internet Explorer에서 효과적으로 실행할 수 있는 방법이 최소 두 가지가 있지만 이 기사에서는 혼란을 피하기 위해 표준을 많이 준수하는 브라우저를 사용한다.

이 웹 페이지에서 제공하는 효과를 스스로 경험하는 것이 중요하다. 먼저, 필자의 웹 사이트에서 가져온 작업 예제(이 기사 가운데 부분)를 살펴보자. 해당 링크는 참고자료의 첫 번째 항목에 있다. 또는 소스 파일을 다운로드하여 압축을 풀고 브라우저에서 outside_in.html 파일을 연다. 어떻게 하든지 그림 1과 같은 이미지가 브라우저에 표시되어야 하며 이 이미지에는 미국의 50개 주와 준주가 단색으로 표시되어 있다. 버진 아일랜드, 괌 및 컬럼비아 특별구 삽입 지도가 있는 전체 국가 지도에는 해당 주의 식료품 할인 구매권 참여율이 단색으로 표시되어 있다. 이 예제에서는 참여율이 0.0%일 때 빨간색 단색을 사용한다.

효과 부분은 동적 응답에 해당한다. 화면 맨 위에 있는 슬라이더 포인터를 약간 오른쪽으로 움직인다. 다시 말해서 마우스 포인터로 슬라이더를 마우스의 첫 번째 단추로 클릭하고 끌어낸 뒤에 마우스에서 손을 뗀다. 이렇게 하면 Threshold 레이블의 값이 업데이트된다. 예를 들면 0.0에서 6.2로 값이 변경될 수 있다. 이 값이 업데이트되는 즉시 새 임계값에 맞게 지도의 색상이 자동으로 다시 조정된다. 지도의 색상이 의미하는 바는 다음과 같다. 식료품 할인 구매권 참여율이 중간인 경우 즉, 참여율이 임계값과 임계값의 두 배 사이인 주는 노란색으로 표시된다.

위로

스냅샷

2009년 6월, 네브래스카 주에서 거주자 중 7.8%가 식료품 할인 구매권을 사용한것으로 보도한 사례를 생각해 보자. 그림 2에서와 같이 임계값이 0과 3.9 사이로 설정된 경우에는 네브래스카는 빨간색으로 표시된다. 이 예제에서는 버진 아일랜드, 괌 및 컬럼비아 특별구 삽입 지도가 있는 전체 국가 지도에 와이오밍과 뉴저지 주는 노란색으로 표시되고 기타 모든 주와 준주는 빨간색으로 표시된다.

그림 3에서와 같이 임계값이 3.9와 7.8 사이에 있을 때는 네브래스카 주가 노란색으로 표시된다. 이 예제에서는 버진 아일랜드, 괌 및 컬럼비아 특별구 삽입 지도가 있는 전체 국가 지도에 네브래스카 주를 비롯한 대부분의 주는 노란색으로 표시되고 17개 주는 빨간색으로 표시되며 4개 주는 흰색으로 표시된다.

참여율이 7.8보다 큰 모든 주의 색상은 흰색으로 변경된다. 그림 4에서는 임계값을 9.9로 선택했다. 이 예제에서는 버진 아일랜드, 괌 및 컬럼비아 특별구 삽입 지도가 있는 전체 국가 지도에 17개 주와 준주가 흰색으로 표시되고 나머지 주는 노란색으로 표시된다.

Threshold 필드에 있는 값이 자동으로 변경되도록 하면 해당 주의 식료품 할인 구매권 참여율에 따라 주나 준주의 색상이 변경된다. (애니메이션 예제 보기.) 이 예제에서는 다음과 같은 임계값과 색상이 적용된 지도가 교대로 표시된다.

• 임계값 0.0 - 모든 주와 준주가 빨간색으로 표시된다(그림 1).
• 임계값 3.1 - 와이오밍 주와 뉴저지 주는 노란색으로 표시되고 기타 모든 주와 준주는 빨간색으로 표시된다(그림 2).
• 임계값 6.9 - 대부분의 주와 준주가 노란색으로 표시되며 17개 주와 준주는 빨간색으로 그리고 4개 주는 흰색으로 표시된다(그림 3).
• 임계값 9.9 - 17개 주와 준주는 흰색으로 표시되고 나머지 주는 노란색으로 표시된다(그림 4).
• 임계값 20.0 - 모든 주와 준주가 흰색으로 표시된다(그림 5).

이 기사를 쓰게 된 계기

SVG는 SVG로 인해 가능하게 된 복잡한 애니메이션에 가장 강력하고 즉각적인 영향을 끼친다. 이러한 내용은 다른 기사에서 확인할 수 있으며 이러한 기사에 대한 링크는 참고자료에 있다.

이 기사의 개념이 이해하기 어려울 수도 있지만 먼저, 노련한 발표자가 실제 공간과 시간에서 이동하면서 요점을 설명하는 장면을 살펴보면 일반적으로 쉽게 이해할 수 있다. 이 기사의 개념은 두 방향(다이어그램에서 눈으로 그리고 눈에서 다이어그램으로)으로 흘러가지만 마우스 포인터를 통해 뇌에서 생생한 다이어그램으로 되돌아가기도 하는 정보가 핵심이다.

임계값을 조정함에 따라 표시되는 지리적 패턴에 주목하자. 이러한 비즈니스 인텔리전스는 주로 가시화를 통해서만 사용 가능하다. SVG의 핵심 개념인 대화식은 컴퓨터화된 1세대 스프레드시트에서 사용한 모든 what-if 시나리오와 정확히 같다는 점에서 유용하며 SVG는 그것이 식료품 할인 구매권 참여와 관련된 지리 정보이든 아니면 지진 진원지 인접 지역에서의 스트레스 형태이든 기본적인 대상을 인식하는 대체할 수 없는 동적 차원을 제공한다.

그렇지만 최근까지도 동적 그래픽 상호작용은 주로 사설 애플리케이션이나 데스크탑 애플리케이션의 영역이었다. 이 기사에서 살펴본 바와 같이 이제 SVG는 웹 애플리케이션과 함께 표준을 기반으로 하는 고급 효과의 중요한 기반이 되었다. 더 일반적으로 말해서 HTML5라는 명칭으로 간략화되는 기능의 콜렉션과 SVG 덕택에 웹 애플리케이션 개발의 새로운 분야가 극적으로 열리게 되었다.

다음 섹션에서는 이제는 사용자로서 이해하게 된 식료품 할인 구매권 참여 화면 이면에 숨어 있는 구현 과정을 살펴보도록 하자.

코드 설명

이제 SVG 화면을 작성하는 코드를 검토하자.

자료 인벤토리

다음과 같은 두 가지 소스가 이 예제의 필수 아키텍처가 된다.

• outside_in.html 파일은 대부분의 애플리케이션을 정의한다.
• usa_map.svg 파일은 SVG로 인코딩된 기본적인 미국 지도이며 outside_in.html 파일에서 참조한다.

이 두 파일은 읽을 수 있는 형태로 작성되므로 브라우저에 표시하여 소스 파일을 시험할 수 있다.

사실상 현재 구현된 데모에서는 outside_in.html 부분이 다수의 Javascript .js 소스 파일로 분할되어 있다. 현재는 단지 편의상 이렇게 하는 것이므로 .js 소스 파일을 .html 소스의 일부로 생각하거나 더 엄밀히 말해서 SVG의 존재에 영향을 받지 않는 소스 구성상의 특성으로 보도록 하자. 일반적인 소프트웨어 엔지니어링 원리에 따라 .html과 .js 소스 파일을 분할한다.

그러나 usa_map.svg는 독립적으로 존재하므로 GIF, JPEG, PNG, TIFF나 기타 이미지 형식을 보듯이 브라우저에서 이 파일을 단독으로 로드할 수 있다. 먼저, 브라우저에서 foodstamps.html을 실행하면 브라우저는 usa_map.svg를 이미지로 처리하여 임베디드 그래픽 오브젝트 지도로 표시할 수 있는 페이지를 생성한다. 이러한 페이지는 다음과 같은 <object> 요소를 사용하여 작성한다.

    <div style = "position:absolute;left:0px; top:60px">
    <object id = "map" type = "image/svg+xml" data = "usa_map.svg"
            width = "1050" height = "600"></object>
    </div>

결과적으로 브라우저에는 그림 5와 같은 지도가 표시되며 이 지도에는 모든 50개 주와 미국 준주가 한 가지 색상으로 표시된다. 이 예제에서는 버진 아일랜드, 괌 및 컬럼비아 특별구 삽입 지도가 있는 전체 국가 지도가 흰색으로 표시된다.

스크립트 해석 시작

브라우저에서 Javascript 스크립트를 지원한다고 하더라도 그것만으로는 충분하지 않다. onload 브라우저 이벤트는 다음과 같은 기능을 하는 Javascript 초기화를 트리거한다.

• 편리한 양식에 식료품 할인 구매권 데이터를 저장한다.
• 화면 맨 위에 있는 슬라이더 위젯을 활성화한다.

가장 중요한 점은 Javascript 초기화를 통해 SVG 인스턴스의 DOM을 처리한다는 점이다.

이렇게 처리하면 다음과 같이 개별 상태의 배경에 색상을 지정하는 수준에까지 Javascript에서 SVG의 개별 요소와 이 요소의 특정 속성을 액세스할 수 있다.

    function color_map(lower_level) {
        var map = document.getElementById('map');
        var svg_document = map.contentDocument;
        // Typical values for abbreviation:  'AK', 'AL', ...
        for (var abbreviation in big_table) {
            this_state = svg_document.getElementById(abbreviation);
            //  ...
            //  this_color has a value such as "red", "white", or "yellow".
            this_state.setAttribute("style", "fill:" + this_color);
        }
    }

여기에서 getElementById() 메소드에 전달된 ID map은 Listing 1에 있는 object의 ID이다. SVG 인스턴스는 HTML DOM 내에서 이 ID를 사용한다. 그렇지만 개별 상태를 확인하여 색상을 지정하려면 SVG DOM을 탐색해야 한다. 이 DOM은 Listing 2에서 svg_document로 표시되어 있다. 일단 svg_document가 지정되면 document로 분리된 SVG를 스크립트하는 것과 동일한 방법으로 svg_document를 스크립팅에 사용할 수 있다. 그렇지만 document는 모든 브라우저에서 그 값이 보장된다는 점에서 하나의 키워드가 되지만 svg_document는 그 값이 color_map 함수 정의에서 로컬로 지정됨으로써 이러한 특정 프로그램에 주어진다는 점에서 약간 유사할 뿐이다.

위로

SVG의 역할

SVG는 이 프로그래밍과 어떻게 협력할까? 지도에 있는 각 주의 영역은 익숙한 ID('AK', 'AL', ... 'WY')를 지정하여 쉽게 참조할 수 있으므로 이와 관련해서 필요한 것은 거의 없다.

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
       version="1.0"
       width="958.69"
       height="592.78998"
       id="svg8834"
          ...
        <path
           d="M 486.79838,390.07686 L 488.12421,392.50754 ..."
           id="NE"
           style="fill:#FFFFFF " />
           ...
    </svg>

이 SVG 인스턴스에는 스크립팅이 임베드되지 않았다는 점에 주목하자. 이점은 매우 중요하다. 이 식료품 할인 구매권 예제는 본래 SVG 스크립팅에 관한 것이었지만 SVG 소스 자체에는 아무런 스크립팅도 표시되지 않는다. 수 년간 다양한 브라우저에서 이 기술을 지원하긴 했어도 필자가 아는 한 SVG 스크립팅의 이 outside-in 기술은 이전에는 분명히 문서화되지 않았었다.

위로

SVG, HTML 및 XML

웹 애플리케이션에서의 SVG의 가능성을 분명히 이해하려면 SVG 전문가와 웹 전문가 사이에서의 XML의 미묘한 역할 차이를 인식해야 한다.

현재까지는 SVG에서의 작업과 웹에 대한 작업은 놀랍게도 거의 중복되지 않는다. 웹 브라우저가 가장 광범위하게 배포된 SVG 렌더러이지만 SVG 전문가는 기존의 웹 애플리케이션을 탈피하려고 노력했다. 그 결과 "outside-in" 스크립팅은 거의 문서화되지 않았다.

또한, 웹 전문가와 SVG 전문가가 자신들의 XML 기반을 서로 얘기하는 경우 혼란이 일어나곤 했다. 웹 작업자에게 있어서 XML은 하나의 옵션이다. 따라서 XHTML을 선택하는 작업자도 있을 수 있고 대안도 존재한다. 어떤 경우이든 브라우저는 HTML을 구문 분석하는 데 있어 어느 정도 관대하다.

그러나 SVG의 경우에는 그렇지 않다. SVG는 XML 애플리케이션이다. .svg 소스가 잘 구성된 XML이 아니고 올바른 SVG로서 구문 분석이 가능하지 않으면 이 소스는 쉽게 중단된다. 관대한 SVG 구문 분석기를 사용하는 것을 고려해 볼 수도 있지만 이 구문 분석기를 사용하는 것이 만족스러운지는 진지한 논의가 필요하다.

HTML과 같은 다양한 입력을 수용하는 동일한 대량 판매용 웹 브라우저는 일반적으로 SVG를 매우 엄격하게 렌더링한다. SVG 인스턴스와 웹 문서는 모두 DOM에 관하여 스크립트되며 이 DOM은 모두 XML로 직렬화될 수 있다. 이렇게 유사함에도 불구하고 하나의 브라우저 내에 있는 구문 분석기들은 일반적으로 서로 다르다. 따라서 실무자들은 어느 정도는 이러한 구문 분석기를 별도로 배워야 한다.

위로

분업

기술적 관점에서 보았을 때 이 기사의 outside-in 코딩과 그 애플리케이션만큼이나 흥미로운 점은 이러한 애플리케이션의 영향력을 관리할 수 있다는 점이다. Shockwave나 HTML5 canvas 코딩을 제대로 하면 동일한 시각적 효과를 만들어 낼 수 있다. 그러나 이러한 대안 중 어느 것도 여기에 있는 SVG 기술만큼 분업을 촉진하는 것은 없다.

위로

MVC나 PVC(Presentation-versus-content)보다 우수

소프트웨어 엔지니어링의 기본 원칙 중 하나는 설계를 잘하면 각 모듈 간의 결합을 줄일 수 있으며 이렇게 하면 상대적으로 분리된 상태에서 모듈을 유지보수하고 개선하거나 관리할 수 있다는 점이다. 이점이 MVC(Model View Controller)와 PCP(Presentation Content Partition)가 좋은 이유이다.

SVG의 범위는 이러한 부분보다 훨씬 더 좁다. 그러나 필자의 작업에는 SVG가 특히 만족스럽다는 사실을 발견했다. 지도 제작 전문가라면 여기에 있는 코드를 사용하여 Javascript 프로그래머와는 별도로 지도를 개발할 수 있다. 이전 섹션에서 살펴본 바와 같이 이러한 두 유형의 개발자가 서로 연계하려면 개별 지리적 단위의 XML ID만 협의하면 된다. 완전히 다른 애플리케이션에서 지도를 다시 사용하거나 다른 지도에 같은 스크립팅을 적용하기가 쉽다. 이러한 것은 지도를 처음 작성했을 때는 상상하지 못했던 일이다.

이러한 약한 관계는 처음에 보았을 때보다 훨씬 더 중요하지 않을 수 있다. 보안이나 경제적 이유로 다양한 아티팩트를 서로 다른 서버에 저장할 수 있으며 그런 다음에는 처음에 한 번만 브라우저에서 이러한 아티팩트를 모으면 된다. 한 국가에서는 의료용 이미지를 코딩하고 두 번째 국가에서는 지식 기반 분석 시스템을 개발한 후, 이것을 통합하여 세 번째 국가에서 서비스할 수 있다.

위로

사용자 정의 위젯

이 주제와 관련된 또 다른 변화는 이 위젯으로 인해 SVG 기반 위젯 마켓플레이스가 열릴 가능성이 있다는 데 있으며 이점은 Javascript로 코딩된 라이브러리의 경우와 비슷하다. 일부 흥미로운 효과를 작성하는 내부 스크립팅을 사용하여 SVG를 코딩하면서 외부 애플리케이션 프로그래밍 인터페이스를 노출하는 것도 가능하다. 이렇게 하는 것이 위젯을 생성하는 과정에서 스케일링 및 효율성과 같은 SVG 고유의 장점을 활용할 수 있는 좋은 방법이다.

SVG, HTML 및 XML 섹션에서 필자는 HTML과 SVG에서의 XML의 다양한 역할을 언급했다. 이러한 차이를 명확하게 인식해야 작업을 효율적으로 구성할 수 있다. 잘 구성된 XML을 코딩하는 방법을 알지 못해도 웹 개발자는 여전히 SVG 위젯이나 다이어그램을 매우 자유롭게 사용할 수 있다. 이와는 대조적으로 SVG 전문가는 다양한 브라우저 간의 서로 다른 <embed> 대 <object> 규칙 차이를 신경 쓰지 않으면서 지도와 도표를 개발할 수 있다.

다른 관리 모델과의 또 다른 차이 또한 설명할 가치가 있다. Java™나 C++은 라이브러리를 코딩하는 시스템 개발자와 이러한 라이브러리를 사용하는 애플리케이션 프로그래머에 의해 체계화되는 경향이 있다. SVG와 HTML5의 경우에는 더욱 광범위하게 이러한 현상이 발생한다. 그러나 SVG 아티팩트는 적어도 2010년에, 일반적으로 소스 코드 형태로 제공될 예정이다. Java 기술을 이용하여 해당 라이브러리를 컴파일하고 정보 숨기기를 강조한다. SVG에 대한 기존의 관례로는 동일한 메커니즘으로 지적 자산을 보호할 수 없다. 이 기사에서는 이러한 문제를 자세하게 다루지 않는다.

위로

더욱 광범위해진 DAAS 경향

DAAS(Data as a Service)가 시작됨에 따라 SVG를 통해 특정 내용과 편리하게 분리되는 다양한 시각화를 구현할 수 있게 된다. 웹 개발 초기에는 이 기사에서 살펴본 것과 같은 상호작용이 가능한 유일한 기능은 이미지 맵과 사설 플러그인이었다. 이미지 맵은 쓰기에는 매우 기능이 떨어졌으며 유지하기도 훨씬 더 어려웠다. 이와는 반대로 SVG는 다양한 그래픽 효과를 개발하는 데 필요한 상위 레벨 언어로 작동한다.

위로

기타 주제

SVG는 XML의 일부에 불과하지만 SVG는 이미 너무 크게 성장하여 하나의 기사에서 모든 것을 다룰 수 없을 뿐만 아니라 한 사람이 SVG의 모든 것을 알 수도 없다. 독자들이 관심을 가질만한 주제가 꽤 많이 있지만 이 기사에서는 다루지 않는다. 이러한 주제에서 대부분 즉시 사용 가능한 좋은 방법을 다루고 있다. (자세한 내용은 참고자료를 참고한다.)

• SVG 인스터를 작성하는 방법 및 SVG 소개
• HTML 페이지에 다양한 스타일의 SVG 이미지 삽입하기
• 사용자 정의 위젯 구성 및 애니메이션을 포함한 고급 SVG 주제
• SVG 스타일 지정하기 및 특히 SVG를 CSS와 함께 사용하기
• XML 특히, XHTML 및 SVG와 같은 웹 애플리케이션 아티팩트의 저작
• Javascript
• HTML5

위로

요약

Outside-in SVG 스크립팅을 이용하면 코딩하기 쉬운 고급 시각적 효과를 구현할 수 있다. 또한, 이 기술은 시각적 요소와 이 요소에 작용하는 애플리케이션 논리 간의 결합을 최소화하는 데 유용한 모듈화를 촉진한다.

위로

감사의 인사

이 기사를 쓰는 현재, SVG는 기념비적인 업적을 달성했으며 이러한 결과는 사려 깊은 수 많은 분석가와 프로그래머의 기여가 있었기에 가능했다. 지난 10년 동안 이들이 SVG에 얼마나 많은 공헌을 했는지 말로 표현하기는 어렵다.

이 기사에서 사용한 특정 미국 지도는 원래 Wikipedia에서 Creative Commons ShareAlike License에 따라 사용할 수 있게 한 것이다.

위로

다운로드 하십시오

다운로드 방식에 대한 정보

참고자료

교육

• Live example of map: 이 기사에서 설명한 내용을 즉시 확인해 보자. 이 페이지를 볼 수 없으면 브라우저를 변경하거나(위에 있는 작업 예제 참조) 필자에게 도움을 요청하자.
  
  
• Render dynamic graphs in SVG(Brian Venn, developerWorks, 2004년 10월): 프로그램으로 SVG를 생성하는 Java 코드를 사용하여 내용을 기반으로 SVG 그래프를 스케일하자.
  
  
• Practical business graphing with SVG and XML(Jack D Herrington, developerWorks, 2006년 7월): SVG 기술을 사용하여 XML 데이터를 이용하는 웹 페이지용 비즈니스 그래프를 작성하자. PHP를 사용하여 그래프를 생성한다.
  
  
• Add interactivity to your SVG(Brian Venn, developerWorks, 2003년 4월): 사용자 입력에 응답하는 SVG 문서를 작성하고 SVG에서의 링크, 이벤트 및 스크립트의 개념을 탐구하자. 이러한 것은 오로지 SVG 렌더러가 처리하며 웹 애플리케이션과는 관계 없을 수도 있다.
  
  
• Dynamic SVG features for browsers(Uche Ogbuji, developerWorks, 2006년 4월): SVG의 독립형 대화식 작업이 웹 페이지에 이점을 제공한다고 강조하는 이 튜토리얼을 읽어보자.
  
  
• w3schools.com의 SVG 튜토리얼: 간단한 예제를 강조하는 빠르고 쉬운 이 튜토리얼을 확인하자.
  
  
• SVG 홈 페이지: SVG(Scalable Vector Graphic) 표준을 담당하는 World Wide Web Consortium에서 작성하고 유지보수하는 SVG 정보 센터인 이 사이트를 방문하자.
  
  
• XML DOM 튜토리얼: W3C에서 후원하는 이 튜토리얼을 이용하여 DOM의 기반을 다지자. 개략적으로 말해서 클라이언트 측 스크립팅은 이 기사에 있는 모든 SVG를 포함한 관련 소스의 DOM을 처리한다.
  
  
• svgweb 홈 페이지: "SVG Web은 다양한 브라우저에서 SVG를 지원할 수 있게 하는 Javascript 라이브러리이다." 외부 플러그인이나 라이브러리가 없어도 설치하는 대로 SVG를 지원하는 브라우저가 점차 늘어나고 있다. 그렇지만 오래된 브라우저를 지원해야 하는 경우에는 SVG Web이 어떻게 프로젝트에 도움이 될 수 있는지 확인해 보자.
  
  
• Google Chrome Frame: SVG Web과 비슷한 오픈 소스 브라우저 플러그인을 탐구하자. Google Chrome Frame은 SVG Web과 거의 비슷하다. Google Chrome Frame의 유일한 대상은 Internet Explorer(버전 6, 7 또는 8)인 반면에 그 범위는 더 광범위하며 SVG의 범위를 넘어 canvas를 포함한 다양한 HTML5 구문을 지원하도록 확장된다.
  
  
• W3C의 Scripting Primer: 개발자를 위한 단 하나의 최상의 SVG 안내서를 읽어 보자. 이 안내서에는 이 기사의 주제이지만 "SVG를 사용하여 HTML을 수정하는 것보다는 그 반대 작업"을 집중적으로 다루는 Scripting between HTML and SVG 섹션이 있다.
  
  
• Introduction to XML(Doug Tidwell, developerWorks, 2002년 8월): SVG를 XML 애플케이션으로 이해할 수 있도록 단계를 설정하자. SVG 개발을 관리하는 일상 작업의 대부분은 광범위한 XML 원칙에서 비롯된 것이다 따라서 SVG를 다루려면 XML을 분명하게 이해해야 한다.
  
  
• SVG를 이해하려면 CSS보다는 XML을 잘 알아야 하지만 대부분의 실용적인 SVG 애플리케이션에서는 CSS가 중요한 역할을 한다. Cascading Style Sheets(CSS)(developerWorks, 2007년 4월): SVG와 같은 XML 애플리케이션에 적합한 CSS를 소개하는 이 기사를 읽어보자.
  
  
• XML Matters: Program with SVG(David Mertz, developerWorks, 2005년 4월): 이번 "XML Matters" 컬럼을 활용하여 대부분의 SVG 스크립팅과 애니메이션을 작성하자.
  
  
• Animation - SVG 1.1.: 현재 권위를 인정 받고 있는 W3C의 SVG 애니메이션 관련 참조를 읽어보자.
  
  
• The future of HTML, Part 1: WHATWG(Edd Dumbill, developerWorks, 2005년 12월): HTML5의 개념과 개발 동기를 초기에 소개한 이 기사를 읽어보자.
  
  
• SVG: object or embed?: HTML 내에서 SVG를 임베드하는 HTML 요소는 다섯 가지가 있다. 저자가 이러한 요소의 사용과 관련된 최신 기사가 있는지 모르고 있기는 하지만 2002년에 Damian Cugley가 object와 embed 요소를 비교한 이 기사를 읽어보자.
  
  
• SVG 기능 호환표 및 기타 브라우저 렌더링 특성: Alexis Deveria가 작성한 이 표에서 HTML5, CSS3, SVG 및 기타 최신 웹 기술의 다양한 기능을 사용할 시점을 확인하자.
  
  
• Flash and substance(Peter Seebach, developerWorks, 2006년 6월): 플래시와 웹에서 그래픽을 처리하는 기타 사설 방식의 경향을 일부 살펴보자. 또한, Loren Baker와 Jakob Nielsen이 이점을 어떻게 생각하는지 알아보자.
  
  
• 네트워크를 통해 액세스할 수 있는 데이터 소스와 관련된, Cameron Laird의 개인용 페이지: 단계 구분도나 이 기사에서 예제로 사용한 식료품 할인 구매권 참여율과 같은 계량경제학적 데이터의 다른 표현물을 확인하려면 저자의 데이터 소스 관련 개인용 페이지를 먼저 참조하자. 시각화, 지도 제작법 및 데이터 세트와 관련된 다양한 정보는 웹에서 얻을 수 있다. 2009년 여름의 식료품 할인 구매권 참여율은 Food Stamp Use Rises in Rural and Cities와 다양한 정부 출판물에 표시되어 있다.
  
  
• SVG 관련 참조: 저자가 유지보수하는 개인용 SVG 페이지를 방문하자. 이 페이지에는 SVG에 대한 앞으로의 전망과 정책 관련 정보 및 기타 자료가 포함되어 있다.
  
  
• developerWorks의 XML 영역: XML 영역에서 기술 향상에 도움이 되는 참고자료를 얻을 수 있다.
  
  
• developerWorks Web Zone에 있는 SVG 기사 및 튜토리얼: 동적으로 SVG를 생성하고 대규모 웹 페이지의 일부로 관리하는 데 사용할 수 있는 다양한 클라이언트측 기술과 서버측 기술을 탐구하자.
  
  
• IBM XML 인증: XML 및 관련 기술에 대한 IBM 인증 개발자가 되는 방법을 찾아볼 수 있다.
  
  
• XML 기술 자료: developerWorks XML 영역에서 다양한 기술 관련 기사와 팁, 튜토리얼, 표준 및 IBM Redbook을 볼 수 있다.
  
  
• developerWorks 기술 행사 및 웹 캐스트: 이들 세션에 참가하여 최신 기술에 대한 정보를 얻을 수 있다.
  
  
• Twitter의 developerWorks: developerWorks의 최신 소식을 접할 수 있다.
  
  
• developerWorks 팟캐스트: 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.
  
  

제품 및 기술 얻기

• IBM 제품 평가판: IBM SQA Sandbox의 온라인 시험판을 다운로드하거나 살펴보고 DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere®의 애플리케이션 개발 도구 및 미들웨어 제품을 사용해 볼 수 있다.
  
  

토론

• XML 영역 토론 포럼: 여러 XML 관련 토론에 참여해 볼 수 있다.
  
  
• developerWorks 포럼 & 블로그: 이러한 블로그를 읽어보고 참여할 수 있다.
  
  

필자소개

Cameron Laird is a long-time developerWorks contributor and former columnist. He often writes about the open source projects that accelerate development of his employer's applications, focused on reliability and security. He first used AIX twenty years ago, when it was still an experimental product. He's been an enthusiastic consumer of and contributor to a variety of memory debugging tools through that time. You can contact him at claird@phaseit.net.

아티클 순위

의견

위로

목차

• 소개
• 작업 예제
• 스냅샷
• 이 기사를 쓰게 된 계기
• 코드 설명
• 스크립트 해석 시작
• SVG의 역할
• SVG, HTML 및 XML
• 분업
• MVC나 PVC(Presentation-versus-content)보다 우수
• 사용자 정의 위젯
• 더욱 광범위해진 DAAS 경향
• 기타 주제
• 요약
• 감사의 인사
• 다운로드 하십시오
• 참고자료
• 필자소개
• 의견