한빛출판네트워크

제공 : 한빛 네트워크
저자 : Howard Feldman
역자 : 추홍엽
원문 : Writing Advanced JavaScript

웹 애플리케이션

컴퓨터 시대의 초창기때부터 서로 다른 플랫폼간의 소프트웨어 상호 운용성은 항상 관심의 대상이 되어 왔다. 가능한한 이용자층을 넓게 확대하기 위해, 업체들은 유명한 소프트웨어 프로그램을 하나의 장치에서 또 다른 장치로 옮겨왔고, 이것은 주로 몇개월이 걸리는 작업이거나, 가끔 새로운 하드웨어나 운영체제 상에서는 완전히 재작성 되기도 했다. 컴퓨터가 점점 더 강력해지고 C와 C++ 같은 언어들이 대부분의 플랫폼 상에서 사용가능한 표준이 되어감에 따라, 프로그램을 한번만 작성하여 원하는 만큼의 많은 시스템에서 사용할 수 있게 컴파일 하기가 더 쉬워졌다. C 컴파일러를 가지고 있기만 하면 소프트웨어를 빌드할수 있고 의도한대로 작동할 수 있다.

그러나, 그래픽 유저 인터페이스(GUI)를 가진 소프트웨어가 표준화 되면서 얘기가 달라졌다. Mac에서의 GUI는 윈도나 다양한 유닉스상의 그것과 틀려보였다. 물론 Tcl/Tk이나 wxWidgets같은 이른바 "위젯 툴킷"이라 불리는 것들은 C++, 파이썬, 펄과 같은 많은 유명한 언어들과 연결되어 윈도, 리눅스, 맥OS X, 그리고 기타 운영체제에서도 (거의) 똑같은 동작을 하는 플랫폼 독립적인 GUI를 만들수 있게 하기는 하다. 그러나 오늘날에는 거의 모든 장치에 매우 강력한 GUI 해석기가 존재한다. 바로 웹 브라우저다.

웹 브라우저는 처음에는 사용자들에게 단순히 마크업을 만족스러운 방법으로 보여주는데 유용했지만, 지금은 놀라울 정도로 복잡한 소프트웨어 인터페이스로서 실행될 수 있을 정도로 발전해왔고 C/C++과 다른 고수준 언어들로 쓰여진 소프트웨어들과도 견줄만 하다. 이것은 대체로 자바스크립트 지원과 웹 2.0기술 덕택이다. 모든 플랫폼상의 거의 모든 브라우저가 이 스크립트 언어의 일반적인 하위집합을 지원하며, 이전보다 플랫폼 독립적인 애플리케이션을 만들기가 더 쉬워졌다.

자바스크립트 툴킷

최근 몇몇 자바스크립트 툴킷이 야후, 구글, 도조와 같은 곳들에서 사용가능해졌다. 위에서 언급한 위젯 툴킷들과 매우 흡사하게, 이것들은 메뉴, 캘린더, 트리와 같은 다양한 위젯에 대한 자바스크립트 루틴을 제공하며, 웹사이트나 웹 애플리케이션에 쉽게 도입할 수 있게 허용한다. 여기 아주 조금만 요약해 보도록 한다.

툴킷은 웹페이지에 흥미로운 요소를 더하기 위해 좋고, 많은 이점을 가지고 있다. 이것들은 많은 브라우저 상에서 테스트 되었으며, 모든 일반적인 브라우저들에서 대부분 작동한다. 일부는 문서화가 잘 되어 있으며, 재밌는 웹페이지들을 순식간에 만들 수 있게 한다. 그러나, 이것들은 페이지 크기에 추가적인 몇백 킬로바이트를 더함으로써 불필요하게 거대해질수도 있고, 새로운 브라우저에 대한 지원이 추가되길 기다려야 할수도 있다. (예를 들어, 몇몇가지는 아직 IE7에서 작동하지 않는다.) 또한, 많은 회사들이 그것과 관련한 책임의 부족과 디버깅의 어려움 등을 이유로 오픈소스 소프트웨어를 사용할 수 없거나 사용하지 않을 것이다.

이 일련의 글들은 향상된 자바스크립트 테크닉을 사용한 튜토리얼 역할을 하기 위해 쓰여졌고, 이러한 툴킷들과 매우 비슷하게 여러 브라우저들과 호환되는 위젯을 만드는 법을 (완전한 소스를 가지고) 설명할 뿐만 아니라, 그것이 어떻게 작동하는지에 대해 자세히 설명하고 그럼으로써 여러분이 자신만의 것을 만들 수 있도록 할 것이다. 메뉴, 탭, 트리와 같은 것들을 구현하는 법에 대한 예제는 웹상에 많이 있다. 그러나 많은 것들이 극히 형편없게 작성되어 있거나 브라우저간 호환되지 않게 되어 있다. 자바스크립트, CSS, DOM, HTML에 대한 더 나은 온라인 레퍼런스 중의 하나가 www.w3schools.com이다. 만약 이 글상에서 친숙하지 않은 HTML/CSS 태그나 자바스크립트 함수를 본다면 이 사이트를 참조할 것을 권한다. HTML DOM에 대한 튜토리얼도 여기서 볼 수 있다. 앞으로 논의될 항목에는 팝업 메뉴, 플로팅 메시지, 드래그 & 드롭 객체, XML HTTP (페이지를 다시 로딩하지 않고 페이지 내용을 동적으로 바꿈) 등이 있다.

언급될 함수들은 윈도XP상의 IE7과 파이어폭스 2.0에서 테스트 되었지만 최근의 모든 브라우저에서 대부분 작동해야 함을 지적할 필요가 있다. 모든 브라우저 특화된 코드들은 본문 중에 특별히 짚어줄 것이다. 또한 자바스크립트와 DOM을 가지고 같은 목표를 달성하는 방법에는 여러가지가 있음을 명심하라. 다음 예제들은 그 중 한가지 방법을 제공하지만 모든 경우에 가장 빠르거나 가장 좋은 방법은 아닐 수 있다. 예제들은 단순성과 기능성을 가지고 읽기에 편안하게 작성되었다.

자바스크립트의 마법

다음에 보게 될 첫번째 예제는 브라우저 창이 스크롤 될 때에도 한 곳에 머물러 있는 떠있는 텍스트(혹은 이미지)를 만드는 법이다. 이것은 웹 애플리케이션에서 "잠시만 기다리세요"와 같은 메시지를 사용자에게 표시하거나 웹 페이지에 항상 표시되는 워터마크 등을 만드는데 사용할 수 있다. 이것은 자바스크립트 코드 몇 줄로 만들 수 있다:

This is a test?


 
 

이것은 다음 두개의 자바스크립트 함수로 만들 수 있다.

var ie = document.all;
var moz = document.getElementById && !document.all; 
var intr;

function Message_UpdatePos(msg, dy) {
    var el = document.getElementById(msg);
    if (ie) {
        el.style.pixelTop = document.body.scrollTop + dy;
    }
    else if (moz) {
        el.style.top = window.pageYOffset + dy + "px";
    }
}

function Message_Display(msg, vis, dx, dy) {
    var el = document.getElementById(msg);

    // 메시지 위치

    if (ie) {
        el.style.pixelTop = document.body.scrollTop + dy;
        el.style.pixelLeft = document.body.clientWidth - dx;
    }
    else if (moz) {
        el.style.top = window.pageYOffset + dy + "px";
        el.style.left = window.innerWidth - dx + "px";
    }
    if (vis) {  // 표시하거나
        el.style.visibility = "visible";
        intr = setInterval("Message_UpdatePos("" + msg + "", " + dy + ")", 1);
    }
    else {  // 숨긴다
        el.style.visibility = "hidden";
        if (intr)
            clearInterval(intr);
    }
}

메시지 자체는 span 태그가 허용되는 페이지상의 모든 곳에서 인스턴스화 될 수 있다:

This is a test…

그러면 버튼은 단순히 다음과 같이 구현하여:

onclick="Message_Display("testmsg", 1, 700, 50); return false;"

메시지를 켜거나

onclick="Message_Display("testmsg", 0, 700, 50); return false;"

다시 끌 수 있다.

Message_Display에 전달하는 인수들은 메시지 텍스트를 가지는 span 태그의 id, 메시지를 보이게 할 것인지 안보이게 할 것인지를 가리키는 Boolean 값, 그리고 메시지가 위치해야할 브라우저 윈도의 우상단으로부터의 x, y 거리(이 경우에는 우측에서 700px, 상단에서 50px)이다. 여기에서의 키는 span 태그의 스타일이다. 절대 포지셔닝을 이용하여 메시지를 페이지의 나머지로부터 띄워서 표시하고 페이지의 나머지 흐름에 고정되지 않게 할 수 있다. 왜 span 태그가 사용되었는지도 알아두어야 한다. span 태그나 div 태그 둘 다 "아무것도 하지 않는" 태그들이며 문서상에서 각각 수평, 수직적으로 블록의 윤곽을 그리는데 사용한다. 이것들은 보통 문서에서 보이지 않는 효과를 가지고 있고, 그렇기 때문에 전체적인 외양을 변화시키지 않고도 특정한 스타일로 블록을 감싸는데 사용될 수 있다. 그러므로 이것들은 자바스크립트 위젯을 만들때 매우 간편하다.

이 함수는 다음과 같이 작동한다. 먼저 getElementById를 사용하여 메시지 span 태그에 대한 핸들을 얻어낸다. getElementById는 태그에 대한 포인터를 얻어내는 가장 쉬운 방법이다. 다음 단계는 인터넷 익스플로러 (ie)와 파이어폭스/모질라 (moz)에서 다르긴 하지만 둘 다 메시지를 원하는 위치(dx, dy)에 재위치 시키기 위한 같은 목적을 달성한다. 메시지는 visibility 스타일을 사용하여 켜거나 끌 수 있다. 마지막 라인은 자바스크립트 타이머에 대한 설명이 좀더 필요하다.

타이머는 자바스크립트에서 일정 시간 후에 함수를 실행시키는데 유용한 방법인데, setTimeout을 한번 사용하던지 setInterval을 반복적으로 사용할 수 있다. 이것들은 자바스크립트에서는 sleep 명령과 동일한 명령이 없기 때문에 특히나 유용하며 그렇기 때문에 이것들은 가장 좋은 대안을 제공한다. 이것들은 지정된 간격의 시간이 지날 때까지 어떠한 CPU 시간도 사용하지 않는다. 한가지 반드시 주의해야 할 것은 이 강력한 기능을 남용하지 말아야 하는 것인데, 적당히 사용한다면 일부 인상적인 효과를 달성할 수 있게 해준다. 이 경우에는 인자인 vis에 기초하여 Message_UpdatePos(msg, dy)를 실행시키는 타이머를 설정하며 타이머는 1ms 마다 실행된다. 전역 변수인 intr를 사용하여 타이머 포인터를 저장했음에 주의한다. 이것은 Message_Display를 몇번 호출하는 동안 유지하여야 하기 때문이다.

마지막으로 Message_UpdatePos를 보면 근본적으로 Message_Display의 처음 시작부분--메시지에 대한 핸들을 얻어내고 페이지의 상단으로부터 y 간격을 업데이트하는--과 같음에 주목하자. 그러므로 페이지가 스크롤될 때 메시지 위치는 스크롤 이벤트의 1ms 이내에 거기에 따라 재조정되고, 우상단 구석에서 항상 같은 위치에 떠있어 보인다. 메시지는 브라우저를 넓게 보거나 좁게 보기 위해 수평적으로 크기를 바꾸면 움직이지 않음에 주의한다. 연습삼아 이것이 잘 작동할 수 있게 코드를 수정해보자.