40. 자바스크립트로 무엇을 할 수 있을까?

이 강좌는 Dev.Opera의 ' 40: What can you do with JavaScript?'을 번역한 문서입니다. 번역과 관련된 안내는 여기에서 확인해 주세요.

• 역자 : 아쿠아테라

지금까지 프로그래밍의 핵심적인 기본 개념에 대해서 알려 알아 보았고, 이제부터는 그런 세세한 부분으로부터 돌아와서 실제로 자바스크립트를 이용하면 과연 당신이 무엇을 할 수 있는지에 대해서 알아 보겠다. 왜 당신은 이런 어려운 주제에 대해서 알기 위해 시간을 보내며 당신의 웹 페이지 상에서 자바스크립트를 사용하고자 하는가?

최근 몇 년 사이에 자바 스크립트가 그다지 중요하지 않은 언어로 머무르다가 최근 웹 개발에 있어서 핵심적인 언어로 변화하고 있는 모습은 무척 흥미로운 일이다. 현재에 이르러서는 만약 자바스크립트를 다룰 줄 모른다면 당신은 웹 개발자로서 업무를 수행하는데 있어서 어려움이 많을 것이다.

자바스크립트에 관한 내용은 다음과 같은 순서로 진행할 것이다.

• 자바스크립트를 좋아하는 이유
• 자바스크립트의 그림자
• 자바스크립트는 당신을 위해서 무엇을 해 줄 수 있나
• 자바스크립트의 일반적인 사용
  • DOM 스크립팅 넣기
  • 이 외의 최근 자바스크립트 사용법
• 현명하고 책임감 있게 자바스크립트 사용하기
• 결론

처음 내가 자바스크립트를 접했을 때는 컴퓨터도 느렸고 브라우저도 자바스크립트를 읽는데 시간을 오래 걸렸으며 일반적으로 자바스크립트는 좋지 않은 기능으로 여겨 졌다. 나는 서버 부분의 개발을 하였고 모든 기능을 Perl에 둔다면 당신은 안전할 것이라 여겼다.

반대로 인터넷의 속도는 무척 느렸으며 파일 호스팅 비용은 무척 비쌌다. 이 때 자바 스크립트는 사용되기 시작하였다. 자바스크립트로 구현된 것은 사용자의 컴퓨터 안에서 작동되었으며 이것은 자바스크립트로 할 수 있는 모든 일들은 서버에 부담을 주지 않음을 의미한다. 이는 최종적으로 사용자에게 당신의 사이트가 더욱 높은 응답성을 제공할 수 있음을 의미하였으며 서버 트래픽을 위하여 당신이 적은 돈을 지불하여도 된다는 것을 의미한다.

시간이 흘러 브라우저는 자바스크립트를 더욱 잘 수행하게 되었고, 컴퓨터들은 더욱 빨라 졌으며 대역폭(bandwidth)는 무척 저렴해졌으며, 과거에 단점으로 지적되었던 많은 점들이 더 이상 심각한 단점이 아니게 되었다. 그러나 자바스크립트를 사용함으로 인해서 서버 주변에서 일어나는 일들을 최소화하게 된 것은 여전히 웹 어플리케이션의 응답성을 높여주며 사용자에게 더욱 좋은 웹 환경을 제공해 주고 있다. 자바스크립트의 비용은 오직 클라이언트 측면에 머무르기 때문에 더욱 응답성이 높은 웹 어플리케이션이나 더 나은 사용자 경험 환경상에서도 자바스크립트는 더 나은 결과를 제공한다.

최근에 이루어진 이런 모든 자바스크립트에 대한 개선들에도 불구하고 자바스크립트는 여전히 몇가지 결함이 있다. 자바스크립트는 불안정한 존재이다. 자바스크립트는 언어 그 자체뿐만 아니라 언어를 구현하기 위한 환경이기도 하다. 당신은 당신의 웹 페이지 끝에 어떤 컴퓨터가 접근하는지 알 수 없으며 그 컴퓨터가 다른 어떤 요인으로 인해 부하가 걸리는지 알 수 없으며 만일 브라우저의 다른 탭에 다른 자바 스크립트가 있다면 잘 돌아가지 않게 될 것이다. 여전히 일반적인 브라우저는 각각의 탭과 윈도우를 위한 각자 다른 리소스 프로세싱을 가지고 있으며 이것은 여전히 이슈로 남아 있을 것이다.

또한 자바스크립트는 보안적 문제 혹은 자바스크립트가 종종 사용자에게 편의를 제공하기 보다는 보안에 관련된 걱정을 만들거나 사람들을 짜증나게 만들어서 사용자는 자바스크립트를 꺼버리는 일이 발생할 것이다. 예를 들어 당신의 생각과 달리 새로운 윈도우를 팝업으로 띄우는 많은 사이트를 볼 수 있으며 또는 당신이 링크를 없애 버리기 전까지 당신이 보고자 하는 내용 위에 광고를 덮어 놓는 경우를 겪게 될 것이다.

다시 돌아 가서 자바스크립트의 장점들을 살펴보자.

• 자바스크립트는 다루기 쉽다. 당신이 해야 할 일은 단지 HTML 문서 상에서 당신의 코드를 집어 넣고 브라우저에 해당 부분이 자바스크립트 임을 이야기 해 주는 것이다.
• 자바스크립트는 웹 사용자의 컴퓨터 상에서 작동하며 해당 사용자가 오프라인인 경우도 그렇다.
• 자바스크립트는 사용자 경험을 개선하기 위한 매우 응답이 빠른 인터페이스를 만들 수 있게 해 주며 서버의 응답을 기다리거나 다른 웹 페이지를 열지 않고도 동적인 기능을 제공한다.
• 사용자가 원할 때 자바스크립트는 전체 페이지를 다시 읽어 오지 않고도 문서의 내용을 불러 들여 올 수 있다. – 이것은 일반적으로Ajax로 알려져 있다.
• 자바스크립트는 당신의 브라우저 상에서 무엇이 가능한지를 테스트 할 수 있으며 적절히 리액션하는지 확인할 수 있고 이는 겸손한 자바스크립트 규칙(Principles of unobtrusive JavaScript)이라고 불리거나 때로는 수비적인 스크립팅이라고 불린다.
• 자바스크립트는 브라우저 문제를 해결하는데 도움을 주거나 브라우저를 지원을 해주기도 한다. 예를 들어 특정 브라우저상에서 CSS 레이아웃을 수정하는 것을 들 수 있다.

이러한 것들은 최근 자바스크립트가 프로그래머들로부터 “높은 수준의 언어”로 인기를 끌게 되는데 많은 이바지를 하였다.

자바스크립트가 두각을 드러내며 전성기를 맞는 이유는 요즘 들어 우리가 더욱더 복잡한 웹 어플리케이션을 만들고 있으며 플래시(또는 플러그인)나 스크립팅을 요구하는 높은 상호작용을 구축하려고 하기 때문이다.

자바스크립트는 이론의 여지가 있지만 웹 표준으로서 브라우저의 종류를 넘어서 지원하는(많던 적던 브라우저에 따라서 다른 점이 있으며 이런 차이점은 이후에 다시 논의해 보기로 한다.) 사용자가 고를 수 있는 최고의 선택이며, 자바스크립트는 다른 열린 웹 표준과 함께 사용이 가능하다.

자바스크립트의 사용은 우리가 자바스크립트를 사용해온 이후로 계속적으로 변해 왔다. 첫 번째로 자바스크립트의 사이트상의 상호작용은 주로 정해진 형태의 상호작용이거나 사용자의 행동에 대한 피드백을 주거나 사용자가 하는 특정한 행동을 알아차리는 것을 위하여 사용되었다. 우리는 alert() 을 사용자가에 무엇인가를 알려주기 위하여 사용하였으며 confirm() 을 사용자가 특정행동을 할 것인지 안 할 것인지를 확인하기 위하여 하였으며 prompt() 혹은 입력 필드는 사용자의 입력 값을 받기 위하여 사용되었다.

사용자가 입력한 형태에 문제가 있다거나 간단한 변환이나 계산이 필요한 경우 서버 단으로 사용자가 입력을 완성한 형식을 바로 보내기 전에 검증을 하기 위하여 주로 사용된다. 추가적으로 사용자의 이름을 즉시 보여주기 위하여 사용자에게 이름을 물어 보는 프롬프트와 같이 쓸모 없는 것들을 만드는 것을 관리하였다. 또한 document.write() 는 문서에 내용을 추가 하기 위해 사용되었다.

우리는 또한 팝업 윈도우와 프레임을 가지고 작업을 하였고 이러한 업무는 무척 짜증이 나게 한다.

이런 기술의 대부분에 대해서 생각하는 것은 개발자들을 앞뒤로 흔들어 놓을 것이며 “사라져 버리라고 하지 뭐~”라고 말을 더듬는 위험한 상황에 처하게 되며 결국 이런 일에 미련을 가져서는 안 된다. 자바스크립트가 결국 더 좋은 방법일 것이다.

브라우저가 DOM(Document Object Model) 을 지원하고 실행하기 위하여 사용될 때, 웹 페이지 상에서 더욱 풍부한 상호작용을 만들 수 있다. 이럴 때 자바스크립트는 우리에게 더욱 유용하게 사용될 수 있다. DOM은 문서의 객체 표현이다. DOM speak에서 나온 예를 위한 단락은 p의 nodeName를 가진 요소 노드이다. 이것은 3개의 자식 노드를 가지고 있으며 nodeValue 로 “When browsers started supporting and implementing the ”라는 텍스트를 포함하고 있는 요소 노드와 NodeName을 가지고 있는 요소 노드와 “, which allows us to have much richer interaction with web pages, JavaScript started to get more interesting.”. 라는 텍스트를 포함하고 있는 요소 노드로 나뉘어 진다.

가운데 자식 노드는 “http://www.w3.org/DOM/”라는 값을 가지고 있는 href라 불리는 속성 노드이며 텍스트 토드인 자식 노드는 “Document Object Model(DOM)”.라는 내용을 가지고 있다.

당신은 이런 단락의 내용을 그림2와 같은 트리 구조로 시각적인 형태로 나타낼 수 있다.

사람의 말로 바꾸어 이야기 하면 DOM은 값과 문서상의 모든 수직 구조를 나타내기 위하여 사용된다고 할 수 있다. 당신은 이 이상에 대해서 알 필요가 없다. 더 DOM에 관한 더 많은 정보를 알고 싶다면 다음 장에 있는 Traversing the DOM article 부분을 확인해 보면 될 것이다. DOM을 사용하면 할 수 있는 것들

• 문서상의 요소에 접근하거나 문서상의 요소의 생김새, 내용, 속성을 조작한다.
• 새로운 요소나 내용을 만들고 사용자가 필요로 할 때 문서상에 적용시킨다.

이는 당신이 윈도우나 프레임 혹은 형식 또는 못생긴 경고 창에 더 이상 의지할 필요가 없음을 의미하며 그림 3과 같이 문서상에서 멋지게 스타일 된 방식으로 사용자에게 피드백을 제공해 줄 수 있음을 의미한다.

이벤트를 다루는 것과 함께 상호작용을 하면서 예쁜 인터페이스를 만들기 위한 강력한 자원이 되어준다. 이벤트를 다룬다는 것은 브라우저 상에서 일어나는 일에 대해서 우리의 코드가 반응함을 뜻한다. 이는 우리가 페이지를 끌 때 로딩이 걸리는 것과 같이 자동적으로 이루어지며 그러나 대부분의 시간 동안 우리는 브라우저 상에서 사용자가 하였던 행동에 대하여 반응한다.

사용자는 아마 창의 크기를 조정하거나 페이지를 스크롤 하거나 특정 키보드를 누르거나 마우스로 링크를 누르거나 하우스를 사용하여 버튼이나 요소를 눌러 볼 것이다.

이런 이벤트를 다루는 것을 통해 우리는 당신이 원하는 결과에 대한 응답을 웹 페이지가 바로 보여 줄 수 있도록 하였다. 반면에 과거에는 링크를 클릭하는 하면 또 다른 문서를 만나야만 했으나, 최근에 우리는 이런 기능을 없애 버리고 패널을 숨기거나 보여주고 정보를 링크를 통해 제공하여 웹 서비스에 접근하는 방식을 바꾸어 주었다.

이벤트 들은 더 많은 세부적인 내용들을 담고 있으며 이러한 내용은 Handling events in JavaScript 에서 다루기로 하자.

최근에 자바스크립트를 사용하는 방법은 다음과 같다. 우리는 오래되고 믿을만하고 진실된 웹사이트를 구축한다. 링크를 클릭하고 정보를 열람하고 양식을 발송하는 등 사용자에게 더욱 빠른 응답을 제공할 것이다. 예를 들어

• 사인이 필요한 양식의 경우 사용자가 입력한 이름이 사용 가능한 경우에 새로운 페이지를 열어야 하는 어려움을 줄여주고 바로 입력이 가능하도록 한다.
• 검색 창은 당신이 지금까지 입력했던 키워드를 기준으로 당신이 검색 어를 입력하고 있는 와중에 추천 검색 어를 제공해 줄 수 있다. (예를 들어 bi라는 알파벳의 경우 이로부터 bird나 big 혹은 bicycle 같은 추천 검색 어를 제공해 줄 수 있다.) 이와 같은 사용 패턴을 자동 완성이라고 한다.
• 예를 들면 스포츠 경기의 점수 혹은 주식시장과 같이 지속적으로 변화하는 정보는 사용자의 특별한 행동 없이 주기적으로 나타나야 한다.
• 보여진다면 좋은 정보이나 꼭 있을 필요가 없거나 특정 사용자에게는 너무 과다한 정보 인 경우에는 사용자가 직접적인 접근 후 정보를 선택하도록 하여야 한다.
• 예를 들어 사이트의 내비게이션의 경우 6개의 링크를 가질 수 있으나 사용자가 메뉴 아이템을 활성화 할 때만 이런 요구에 따라서 더 깊숙이 있는 페이지를 열어서 보여 줄 수 있다.
• 자바 스크립트는 레이아웃 이슈를 고칠 수 있다. 자바 스크립트를 사용해서 위치나 페이지상의 요소의 영역 혹은 브라우저 창의 크기를 알 수 있다. 이러한 정보를 바탕으로 요소가 겹치는 것과 같은 UI이슈들을 피할 수 있다. 예를 들어 몇 개의 레벨이 있는 메뉴를 만드는 경우 서브 메뉴를 위한 공간이 있는지 확인하여 스크롤 바를 피하거나 메뉴 아이템과 겹치는 일을 방지 할 수 있다.
• HTML을 이용해서 만든 인터페이스를 자바 스크립트를 이용하여 개선할 수 있다. 일반적인 텍스트 입력 창 대신 기존에 정해져 있는 옵션 가운데서 선택도 가능하며 혹은 직접 입력도 가능한 콤보박스를 배치하는 것이 더 나을 것이다. 이렇듯 일반적인 입력박스를 자바 스크립트를 이용해서 개선할 수 있다.
• 당신은 자바스크립트를 이용하여 페이지 상에서 요소들을 나타낼 수 있다. 예를 들어 페이지 상에서 매우 구체적인 내용 혹은 정보의 경우 나타내거나 숨길 수 있다. 이러한 기능들은 더욱 유용하여 사용자의 경험을 더욱 풍부하게 해 준다. 이 글의 다음에 있는 JavaScript animation article 에서는 이런 내용에 대해서 더욱 심도 있게 다룬다.

자바 스크립트를 이용해서 당신이 할 수 없는 것이라는 건 거의 없다. – 특히 Canvas 또는 SVG와 같은 기술을 섞어서 사용하면 더욱 그렇다. 하지만 큰 책임감이 동반할 때 자바 스크립트는 더욱 큰 힘을 발휘하며 당신은 자바 스크립트를 사용하면서 다음의 점들을 항상 기억해야 한다.

• 자바스크립트는 기능적으로 웹 브라우저에 의해서 꺼질 수 있는데 자바스크립트가 실행되지 않는다고 하더라도 웹 어플리케이션의 기능들을 테스트하고 다룰 수 있다. 자바스크립트로 무언가를 만들 때 이러한 점들을 유념하며 만들어야 하며 만일 자바 스크립트를 쓸 수 없다면 당신의 사이트가 깨지지 않도록 해야 하는 것을 유의해야 한다.
• 만약에 자바스크립트가 사용자가 자신의 목표를 더욱 빠르고 효과적으로 찾는데 도움을 주지 못한다면 당신은 자바 스크립트를 잘못 사용하고 있는 것이다.
• 자바스크립트를 사용하게 되면 종종 아주 오랜 기간 동안 사람들이 웹 상에서 관습처럼 사용해 온 일들이 지켜지지 않을 수 있다. (예를 들어 다른 페이지로 이동하기 위하여 링크를 클릭하거나 작은 바구니 아이콘의 의미가 “쇼핑카트”임) 이런 사용 패턴이 구식이거나 효율적이지 못하며 이러한 것들을 바꾸는 것이 사용자들이 그들의 방식을 바꾸는 것을 의미하며 이러한 것들이 사람들에게 쉽지 않다라고 느끼게 만든다. 우리는 통제하는 것을 좋아하며 한 번 이해를 하고 난 후에는 변화하는 것이 쉽지 않다. 자바스크립트 솔루션은 이전의 상호작용에 비해서 자연스럽고 좋지만 사용자의 과거의 경험에 비추어 사이트에서 자바스크립트 통한 상호작용이 생성되었음을 연관 짓기는 힘들 것이다. 만약 사이트를 방문한 방문자가 “아하-여기에서 기다리라는 뜻이구나.” 또는 “멋진데- 불 필요한 단계를 거치지 않아도 되는구나” 라고 할 수 있게 만들 수 있다면 당신은 자바 스크립트를 매우 잘 사용하고 있는 것이다.
• 자바스크립트는 결코 보안이 안전하지 않다. 만약 당신이 사용자가 데이터에 접근하는 것을 막고자 하거나 민감함 데이터를 다루고자 한다면 당신은 자바스크립트를 사용해서는 안 된다. 어떤 자바스크립트의 보안은 자바스크립트의 코드가 클라이언트 머신에서 읽을 수 있기 때문에 쉽게 깨질 수 있다. 또한 사용자는 그들의 브라우저에서 자바스크립트를 꺼버릴 수도 있다.

자바스크립트는 웹 상에서 매우 훌륭한 기술이다. 자바 스크립트는 배우기 어렵지도 않으며 또한 다용도로 사용이 가능하다 HTML 혹은 CSS와 같은 다른 웹 기술과도 조화를 잘 이루며 플래시와 같은 플러그인과도 상호작용을 할 수 있다. 자바스크립트를 이용하여 우리는 민감한 사용자 인터페이스를 만들 수 있으며 사용자가 페이지를 다시 읽어올 때 당황하지 않게 해 주며 CSS에 관련된 이슈들도 처리할 수 있다. 좋은 브라우저 애드온(Google Gears 혹은 Yahoo Browser Plus) 을 사용하여 당신은 오프라인에서도 사용이 가능한 온라인 시스템을 만들거나 컴퓨터가 온라인일 때 자동으로 동기화할 때 자바 스크립트를 사용할 수 있다.

자바스크립트는 브라우저에 제약 받지 않는다. 자바스크립트의 속도와 작은 메모리에 관한 장점들은 다른 언어들과 비교되면서 점차적으로 자바스크립트를 사람들이 많이 쓰게 할 수 있도록 한다. — 독립실행 형 파서를 가지고 있는 서버사이드의 언어를 사용하거나 일러스트레이터와 같은 프로그램상의 자동화된 반복적인 업무까지 미래는 널리 열려 있다. 당신이 가까운 미래 안에 웹 개발자로서 무엇을 하던 간에 당신은 조만간 자바스크립트를 이용하여 작업을 하게 될 것이다.

Chris Heilmann은 지난 10년간 웹 개발자로서 활동해 왔으며 취미삼아 라디오 저널리즘에 관한 일도 한다. 그는 영국에서 개발자의 양성 및 지휘에 관련된 업무를 수행하며 야후에 근무하고 있으며 유럽 아시아를 위한 front end상의 코드의 품질을 관리한다. 그의 블로그는 Wait till I come 에 있으며 codepo8라는 이름으로 많은 소셜 네트워크로 활용이 가능하다.