자바스크립트는 왜 웹개발 핵심 기술로 성장했나

하루가 다르게 새로이 등장하는 각종 웹 기술과 함께 데스크톱에서 모바일까지 아우르는 시스템의 공간적 확장은 IT에 몸담고 있는 개발자나 기업입장에서 볼 때 다양한 가능성을 보여준다. 그러나 하루가 다르게 발전하는 최근의 웹 기술 변화를 보면 중심을 잡기가 쉽지 않다. 이번 글이 웹기술을 준비하는 개발자나 기업들에게 조금이나마 도움이 됐으면 하는 바람이다.

현재 W3C, ECMA, IETF, OASIS등 표준화 기구에서 승인되고 활발히 사용되고 있는 대표적 웹표준 기술을 꼽자면 HTML, CSS, 자바스크립트(Javascript)를 들 수 있다. SGML, RDF, 엑스폼스(XForms) 등의 기술도 있지만 실제 웹 환경에서 사용 빈도는 앞에서 언급한 것들 보다는 상대적으로 많지 않다.

■웹 표준, 왜 중요한가?

웹 기술을 논할 때 앞서 마크-업(Mark-Up)이나 스크립트가 동작할 수 있는 근간인 브라우저를 빼놓을 수 없다. 이들 언어를 이용해 개발된 결과물은 브라우저가 없다면 실행할 수 없다. 그런만큼, 웹에서 웹 브라우저의 중요성을 간과해서는 안된다. 종종 웹을 담는 그릇에도 비유되는 웹 브라우저는 웹 기술의 발전 방향에 큰 영향을 미친다. 이에 브라우저 업체들은 점유율을 끌어올려 웹 환경을 지배하기 위한 경쟁을 계속하고 있다.

웹의 초창기, 넷스케이프 네비게이터에 도전하기 위해 마이크로소프트가 인터넷 익스플로러에서 동작하도록 블링크(Blink), 마퀴(Marquee) 같은 태그를 넣거나 제이스크립트(JScript)같은 스크립트를 확신시키려 했던 것들 모두 이같은 맥락에서 이해할 수 있다.

이런 상황에서 웹 표준이 없었다면 현재의 웹은 지금과는 사뭇 달라졌을 것이다. 각자의 길을 가는 브라우저들이 확산되면서, 웹사이트 간 호환성은 보장받기 힘들었을 것이고, 사용자 혼란은 가중됐을 것이다. 이를 감안하면 웹을 이루고 있는 각종 기술에 대한 표준 제정은 앞으로 더욱 지배력이 높아질 웹의 발전에 큰 영향을 미치는 요소임이 분명하다.

웹 페이지에 사용되는 기술은 그 용도에 따라 크게 웹문서 표현을 위한 마크-업 기술과 사용자와의 상호작용(인터랙션: Interaction) 또는 페이지 동작을 위한 기술인 스크립트 언어로 나눌 수 있다.

웹이 나오게된 배경 중 하나가 문서 표현 및 전달에 있었기 때문에 초창기 표준 기술은 HTML이나 XML같이 문서를 표현하거나 전달하기 위한 기술이 중심이었다. 이후 웹은 쇼핑이나 뱅킹 등 기존에 오프라인으로만 가능하던 여러 분야에서 사용되기 시작하면서 다양한 분야에서 폭넓게 활용되기 시작했다.

이 같은 변화에서 중요하게 쓰이는 기술이 ECMA그룹에서 제정한 ECMA262 스펙과 이를 반영한 스크립트 언어인 자바스크립트다

웹페이지안에서 객체를 조정하고 브라우저에서 제공하는 각종 API를 이용하기 위해 필수적인 자바스크립트는 현재 대부분의 브라우저에서 지원하면서 웹사이트 개발에 필수적인 언어로 부상했다. 웹사이트에서 많은 기능과 높은 성능을 필요로하는 고객들의 요구를 감안하면 앞으로 자바스크립트 활용은 더욱 늘어날 것으로 예상된다. 초창기 웹에서는 사용자 입력 값을 전달받아 서버에 전송하기 위한 단순한 작업만을 담당하는데 사용되었던 자바스크립트는 이제 명실상부한 웹 애플리케이션 개발 언어로서 자리매김하고 있는 중이다.

자바스크립트는 인터프리팅 방식을 사용하고, C++이나 자바같은 정적인(Static) 언어가 아니라 동적 언어이기 때문에 보다 유연하며 추상화(abstraction)나 위임(delegation) 등의 메커니즘이 프로토타입(prototype) 객체나 함수를 통해 구현이 가능하다. 독특한 구조의 유효범위(scope)와 이를 보완하기 위한 클로저(closure)기법 등은 개발을 더욱 편리하게 하고 기능 구현에 풍부함을 더할 수 있도록 돕는다.

우리 인류 역사에서 중요한 몇 번의 전환기를 상징하는 것으로 사과에 대한 굉장히 재미있는 시각이 있다.

먼저 아담과 이브가 뱀의 유혹에 넘어가 먹게 되는 선악과에 대한 얘기다. 아담과 이브가 이 사과를 베어 물게 되면서 눈이 열리고 신의 노여움을 사게 되어 쫓겨나 땅에 정착하게 되는데, 이 장면에서 사과가 등장한다.

두 번째는 뉴턴이 만유인력을 발견하는데 혁혁한 공을 세운 ‘뉴턴의 사과’가 있다. 우주와 공간에 대한 끊임없는 인간의 의문을 푸는 단초이면서 누구도 거스를 수 없는 법칙인 만유인력의 발견은 이후 과학 발전에 근본 원리가 된다.

마지막은 바로 스티브 잡스의 애플, 혁신과 창조 그 자체를 상징하는 사과이다. 아이폰의 등장 이후 21세기 들어 가장 혁신적인 발명품으로 꼽히고 있는 스마트폰의 폭발적 증가는 어디서든 웹을 통하면 자신이 원하는 것을 할 수 있다는 가능성을 보여주게 되었고, 이런 사회적 변화를 감지한 기업들은 앞다투어 직원들이 개인 소유 스마트폰을 활용하여 업무를 처리함으로써 생산성을 증대하도록 스마트 모바일 업무 환경 조성에 관심을 쏟기 시작했다.

사실 이런 업무 방식은 이미 PDA(Personal Digital Assistant)를 통해 제조 공장 상황을 관리/관제하던 기업이나 영업사원에게 PDA에서 동작하는 영업지원시스템(SFA;Sales Force Automation)을 제공해왔던 회사에서는 생소한 일이 아니다.

그러나 과거 PDA와 스마트폰의 가장 큰 차이점은 바로 BYOD(Bring Your Own Device;누구나 자신의 스마트 기기를 이용해서 업무를 처리할 수 있는 것) 업무 환경을 조성할 수 있다는 점이다. 하지만 BYOD를 지원해야 하는 기업의 IT 담당 부서에 어려움이 없는 것은 아니다.

사용자가 쓰는 다양한 스마트폰을 지원하기 위해서는 기기별로 상이한 OS(운영체제)에 특화된 개발 언어를 사용해야 한다. 기존 데스크톱 업무 시스템 외에 추가로 OS별 모바일 업무 시스템 개발비와 운영비를 고스란히 지불해야 하는 기업들 입장에선 모바일 오피스를 도입하는 것에 주저할 수 밖에 없다.

이의 대안으로 생각해 볼 수 있는 것이 바로 '한번의 개발로 다양한 환경을 지원한다'는 OSMU(One Source Multi Use)사상을 웹을 통해 실현하는 것이다 CSS3이 제공하는 미디어쿼리를 이용한 반응형 디자인(RWD;Responsive Web Design)이 관심을 끄는 것도 이 때문이다. 웹 기술을 통해 업무 시스템을 기기나 OS에 제약 받지 않고 운영할 수 있다는 시나리오는 기업 입장에서 매력적일 수 밖에 없다.

개발자나 관리자 측면에서 갖는 장점만 갖고 접근했다가는 사용자로부터 외면 받을 수도 있다. 예를 들어 기존에 C/S(Client/Server)기술 기반 시스템을 사용했던 사용자의 경우 MDI(Multiple Document Interface)같은 복수의 업무 화면 환경에 익숙해져 있다. MDI는 HTML이나 CSS 기반으로는 구현이 어렵거나 기능상 제약으로 인해 오히려 사용성이 떨어질 수 있다. 데이터 조회가 빈번하거나 조회된 이후 데이터를 사용자 조작을 통해 다양한 방식으로 재가공해야 하는 업무에서도 HTML의 테이블(Table) 태그를 기반으로 구현된 기능으로는 제약이 발생할 수 밖에 없다. 이를 감안하면 자바스크립트에 좀 더 관심을 기울일 필요가 있다.

■웹의 진화와 웹 애플리케이션

웹사이트를 개발할 때 HTML과 CSS로 기반 구조를 잡고 자바스크립트를 이용해 각 요소들의 동작을 정의하거나 사용자 동작에 반응하도록 개발하는 방식은 마치 과거의 3GL언어(C, C++, Java)와 흡사하다. 자바스크립트를 통해 HTML의 다양한 요소를 더욱 정교하게 다룸으로써 기존에 없던 컴포넌트를 만들어 내고 이를 재활용하는 개발 과정을 보면 더욱 그러하다.

단순히 개발하는 과정 뿐만 아니라 개발된 웹사이트에서 제공하는 기능이나 성능을 보면 우리가 지금까지 통상적으로 웹에서 제공받던 수준을 훨씬 상회하고 있다는 것을 느낄 수 있다. HTML이나 CSS, 자바스크립트의 신규 스펙에서 새롭게 등장한 기능들은 기존 웹 기술의 한계로 여겨지던 기능들을 포함하고 있다.

예를 들어 클라이언트와 서버간 TCP/IP를 통해 데이터를 주고 받는 소켓 통신의 경우 네이티브한 개발의 영역으로 분류되어 기존의 웹에서는 지원할 수 없었지만 지금은 HTML5 웹 소켓을 이용할 경우 구현이 가능해졌다. 또 미려한 그래픽 기능을 지원하기 위해 나온 HTML5 캔버스(Canvas)나 SVG(Scalable Vector Graphic)를 통하면 2D나 3D 형식의 화려한 이미지와 화면 제공이 가능하다.

여기에서 중요한 것은 HTML과 브라우저에서 제공되는 기능을 제대로 구현할 수 있도록 해주는 것은 자바스크립트라는 프로그래밍 언어라는 점이다. 앞으로 HTML이나 CSS같은 웹 표준 스펙들의 기능이 발전할 수도록 자바스크립트의 중요성은 더욱 커질 것이다. 이것은 자바스크립트를 기반으로 개발되어야 만 HTML5나 CSS3 기능을 충분히 활용할 수 있기 때문이다. HTML5의 스펙에 꽂혀 그 중심에 있는 개발 언어인 자바스크립트의 가치를 보지 못하는개발자를 볼 때면 안타까움을 금할 수 없다.

시장조사 전문업체인 가트너에서도 자바스크립트 관련한 흥미로운 자료를 내놓고 있다. 이중 HTML5나 CSS3와 결합된 자바스크립트가 기업용 애플리케이션(모바일을 포함한) 개발의 중요한 수단으로 사용될 것을 예측하고 있는 것이 눈에 띈다. 자바스크립트가 명실상부한 웹 애플리케이션 개발 언어로서 급부상하고 있음을 보여준다 하겠다.

자바스크립트에 대한 관심이 커지는 것은 기존 웹 애플리케이션이 가지고 있던 몇 가지 문제점, 즉 각종 브라우저에 대한 종속성 탈피 문제나 데이터 처리 성능 개선 방법, 사용자 경험(UX) 강화 등 여러 이슈에 대한 대안이 되고 있기 때문이다.

최근 개발 현장을 보면 복잡한 기업용 애플리케이션 개발의 경우 반복되는 코드나 복잡한 기능 구현이 용이하도록 하는 자바스크립트 프레임워크의 활용이 점점 더 증가하고 있는 것을 확인할 수 있다.

대표적인 사례가 구글이 주도하는 앵귤러JS(AngularJS)다. 이 프레임워크는 정형화된 구조를 기반으로 화려하면서도 편리한 사용자 인터페이스 개발이 가능하다. 특히 양방향 데이터 바인딩이나 MVC패턴 제공으로 인해 각광받고 있다. 엥귤러JS외에도 다양한 자바스크립트 프레임워크들이 활발히 사용되고 있다.

HTML를 중심으로 구성된 UI에 일부 복잡한 기능 구현 부분만 라이브러리를 플러그-인(Plug-In)해서 개발하던 지난 몇 년간의 개발 방식에 변화가 생기고 있다는 점도 주목할 필요가 있다.

이런 변화는 라이브러리를 활용하는 수준만으로는 웹 애플리케이션에서 사용자 요구사항을 충족하기 어렵다는 것을 의미한다. 웹 개발의 핵심으로 부상하고 있는 자바스크립트와 각종 프레임워크가 개발자와 웹서비스를 제공하는 기업들에게 시사하는 핵심 메시지도 바로 이것이다.

*본 칼럼 내용은 본지 편집방향과 다를 수 있습니다.