웹 개발자를 위한 11가지 필수 자바스크립트 도구

출처: http://www.itworld.co.kr/slideshow/89132

 

자바스크립트의 월드 와이드 웹 정복 계획이 착착 진행 중이다. 그러나 자바스크립트를 활용하는 도구들의 수는 워낙 많기 때문에 당면한 작업에 맞는 도구를 선택하기란 쉽지 않은 일이다.

자바스크립트를 (다른 언어들과 함께) 사용하여 사용자들이 요구하는 모든 기능을 갖춘 최신 웹 사이트를 제작하기 위한 11가지 새로운 도구를 살펴보자. 이 도구들은 깔끔한 디자인과 간소한 인터페이스를 제공한다. 이러한 특성 탓에 과소평가되기 쉽지만 사실은 상당히 강력한 도구들이다. 오랜 시간 동안 발전과 재설계를 거쳐 구성의 복잡함을 줄이면서 더욱 많은 일을 처리할 수 있는 단계에 이르렀다. editor@itworld.co.kr

미티어(Meteor) 미티어 웹 앱 프레임워크의 7가지 기본 원칙은 현대의 소프트웨어 개발을 위한 견고한 기반을 제공한다. 오픈 소스 커뮤니티를 포용하여 플러그인 개발을 촉진하는 등 실용적인 원칙도 있다. 미티어에는 실제로 뛰어난 플러그인이 이미 상당히 많다. 기술적인 원칙들도 있다. 단순한 API를 설계할 것, 유선으로만 데이터를 전송할 것, 모든 곳에서 동일한 언어를 사용할 것(코딩에는 자바스트립트, 데이터베이스 접근에는 몽고DB. 설립자들은 이 원칙을 장려하기 위해 클라이언트용 로컬 에뮬레이터를 제작했음) 등이다. 이미지는 로컬 컬렉션을 생성하는 간단한 코드, 몽고DB를 에뮬레이트하여 데이터를 로컬에 저장하는 데이터 구조를 보여준다. 동일한 코드가 데이터를 로컬에 저장할 수도, 백 엔드 몽고DB 서버에 저장할 수도 있다.

에포크(Epoch) 지금 웹에서는 데이터 시각화가 대유행이다. 눈길을 사로잡도록 독창적인 방법으로 데이터를 표현하는 도구들을 많지만 D3.js와 견줄 만한 도구는 거의 없다. 에포크를 개발했던 사람들이 한 단계 더 전진했다. 기본 D3 라이브러리를 가져다가 이리저리 보강하여 실시간으로, 매끄럽게, 그리고 지속적으로 실행되도록 만든 것이다. 이제 깔끔한 차트를 추가하고, 사용자들이 보는 중에 바로 차트가 업데이트되도록 할 수 있다. 대시보드는 사용하기가 정말 쉽다. 이미지는 새 데이터가 수신되면 왼쪽으로 스크롤되는 실시간 막대 차트를 보여준다.

웹 스타터 키트(Web Starter Kit) 한 장치에서 작동하는 웹 앱을 만드는 것만 해도 어려운 일이다. 구글의 웹 스타터 키트는 복수 기기 지원과 관련하여 개발자들에게 도움이 되는 프로젝트다. 복수 기기 지원이란 예를 들어 클릭 동기화, 필요에 따른 재로딩, 모든 요소를 최대한 간소하게 유지하여 화면의 동기화 상태를 유지하기 등을 의미한다. 한 사용자가 구형 아이패드를 사용하고 다른 사용자는 신형 안드로이드 폰을 사용하는 경우 그에 맞춰 코드가 조정된다. 개발자가 대략적인 모양만 스케치하면 빌드 도구와 프레임워크가 세부적인 부분을 자동으로 처리하여 각각의 화면에 적절하게 표시되도록 한다. 이미지는 프로젝트에서 제공하는 여러 디자인 제안 중 하나다 (프로젝트 팀이 자칭 "독단적"이라고 평가하는 제안임).

Reveal.js Reveal.js는 HTML5 기반의 파워포인트의 대안이다. 파워포인트와 마찬가지로 버튼을 클릭하면 세련된 애니메이션 효과가 가미되어 정보가 표시된다. 그러나 진정한 장점은 개발자의 웹 전략 안에서 이 도구를 활용하는 방법에 있다. 웹 사이트가 스토리 중심이라면 Reveal이 가장 적합한 도구가 될 수 있다. 방문자에게 알려줄 내용을 로드하면 Reveal이 멋지게 메시지를 표시해준다. 보너스도 있다. 회의 중 웹 사이트를 프레젠테이션해야 하는 경우 바로 슬라이드화할 수 있다. 이미지는 Reveal.js에서 진행되는 프레젠테이션에 포함된 슬라이드 중 하나다.

RxJS 정적 웹 페이지의 시대는 먼 과거의 이야기다. 동적 웹 페이지라 해도 이제 기본적인 수준만으로는 지루해 보인다. 새로운 추세는 웹 사이트의 "반응성"을 더욱 높여서 사용자가 클릭하기 전에 반응을 시작하도록 하는 것이다. 가장 간단한 예는 사용자가 입력을 시작하면 제시어가 자동으로 표시되는 자동 채우기 입력란이다. 사용자가 끝까지 입력하고 검색을 클릭할 때까지 기다릴 필요가 없는 것이다. RxJS는 마우스 및 키보드에 의해 발생하는 이벤트 스트림에 매끄럽고 반응성이 높고 비동기적인 반응을 추가하기 위한 프레임워크다. 이미지는 위키피디아 검색을 이벤트에 연결하기 위한 코드를 보여준다.

노드BB(NodeBB) 인터넷의 호전적이고 전투적인 독설을 끌어 모으는 포럼을 호스팅하는 웹 사이트 또는 앱을 구현하기란 쉽지 않은 일이다. 이때 노드BB를 사용하면 도움이 된다. 과거 게시판이 노드 기반으로 발전한 형태로, 응답성이 뛰어나며 맞춤 구성이 가능하고 실시간 대화 스트리밍 기능을 제공한다. 노드BB 개발진은 현대적인 테마와 스마트폰 및 태블릿의 작은 화면 크기에 대한 지원을 추가했다. 또한 무한 스크롤과 같은 최신 인터페이스 요소도 가미했다. 이미지는 노드BB용 플러그인 제작을 다루는 노드BB 커뮤니티를 보여준다.

걸프JS(GulpJS) 오래 전, 20세기 사람들은 HTML, CSS, 자바스크립트를 백지 상태에서 작성했다. 이제 자바스크립트는 커피스크립트(CoffeeScript)와 같은 속기 구문을 사용하여 컴파일 또는 빌드되고 CSS는 규칙 집합을 사용하여 작성된다. 코드를 쓴 이후의 과정을 자동화하는 간편한 방법을 원했다면 모든 과정을 정리해주는 걸프JS(GulpJS)를 사용하면 된다. 자바스크립트로 경로를 지정하면 나머지는 걸프가 알아서 해준다. 자바용 앤트(Ant) 또는 메이븐(Maven)과 비슷하지만 걸프의 경우 XML이 아닌 네이티브 언어(자바스크립트)를 사용하여 작업을 지정한다. 이미지는 자바스크립트를 줄이고 정리하기 위한 코드를 보여준다.

앵귤러JS(AngularJS) 구글은 브라우저에서 정보를 제공하기 위한 매끄럽고 가벼운 프레임워크를 제공할 목적으로 앵귤러JS를 만들었다. 앵귤러JS는 서버에서 데이터를 수집한 다음 로컬로 템플릿을 컴파일해서 표시한다. 즉, 브라우저에서 실행되도록 HTML, 자바스크립트, CSS로 구축된 모델-뷰-컨트롤러 프레임워크다. 서버 코드가 데이터 저장을 담당하고 앵귤러JS 코드는 그 데이터의 표시를 담당한다. 데스크톱 브라우저, 태블릿, 스마트폰과 호환된다. 이미지는 순수 HTML과 중괄호로 처리된 앵귤러 코드를 혼합하는 앵귤러 템플릿의 일부분을 보여준다.

오디세이(Odyssey) 서로 경쟁하는 기업들이 제공하는 온갖 API 덕분에 지금은 정말 쉽게 웹 사이트에 지도를 추가할 수 있다. 스토리를 위해서는 텍스트가 필요하다. 두 가지를 혼합하고자 하는 경우는? 카토DB(CaroDB)의 오디세이는 텍스트 일부분에 연결되는 "미끄러지듯 열리는 지도"와 같은 기능을 통해 스토리와 지도를 혼합하기 위한 도구다. 이미지는 지도와 상호 작용하는 스토리를 구축하기 위한 샌드박스를 보여준다.

플레이캔버스(PlayCanvas) 이론적으로 게임은 게이머들만 만드는 독립된 분야다. 웹 앱을 비롯해 다른 분야의 사람들이 하는 일과는 전혀 다르다. 그러나 현실에서는 게임 분야의 온갖 도구들을 사용하여 웹 사이트에 멋진 인터페이스를 추가할 수 있다. 플레이캔버스는 웹GL(WebGL)로 구축된 게임 엔진이다. 물리학, 빛, 그림자, 오디오 등을 결합해서 다양한 사물이 있는 환경을 만들기 위한 하나의 일관적인 도구를 구성한다. 이미지는 플레이캔버스 프레임워크를 위한 온라인 개발 도구를 보여준다.

Deb.js 사람은 누구나 실수를 한다. 다만 그 실수를 바로잡는 방법은 천차만별이다. Deb.js는 1.5KB 정도의 작은 파일이지만 콘솔 창을 정돈해서 자바스크립트를 한결 더 쉽게 디버깅할 수 있게 해준다. 파이어버그(FireBug), 그리고 크롬과 오페라, 사파리에 내장된 디버거를 사용할 때 필수적인 도구다. 이미지는 스택 트레이스 화면을 보여준다.