인터랙티브로 말하는 웹과 웹앱 개발

인터랙티브로 말하는 웹과 웹앱 개발

참조 URL

1. http://k2unip.tistory.com/103
2. http://helloworld.naver.com/helloworld/179084
3. http://calmglow.egloos.com/4792335
4. http://googledevkr.blogspot.kr/2013/07/webapp-with-google-drive.html
5. http://webapp.pe.kr/rb/
   
6. http://h5bak.tistory.com/2
   

N사이트 사전으로 '인터랙티브'의 의미를 알아 보면 ['상호간'의 뜻을 지닌 인터(Inter-)와 '활동적'의 뜻을 지닌 액티브(Active)의 합성어로, 상호활동적인, 곧 쌍방향이라는 의미를 지닌다. 사용자가 마치 컴퓨터와 대화를 하듯이 입력과 출력을 할 수 있는 프로그램으로...]라고 정의 되어 있다. 실제 개발에서 인터랙티브한 웹( 또는 웹앱)을 지원하기 위해서는 사용자의 반응에 빠르게 응답할 수 있도록 설계되어야 할 것이다. 이번에는 웹과 웹앱 개발에서 사용자의 반응에 빠르게 반응할 수 있도록 해주는 방법에 대해서 개략적으로 알아 보도록 하겠다.

우선 웹과 웹앱에 대한 기본적인 구동에 대한 차이점을 아래 "그림1, 2"로 흐름을 알아 보도록 하자.

[그림1] 일반적인 웹 페이지 네비게이션 흐름

일반적인 웹은 웹 페이지에 필요한 자바스크립트나 CSS 또는 이미지들을 사용자의 네비게이션의 이동마다 전체적으로 다시 다운받아 브라우저에서 초기화를 진행하고 랜더링을 하는 구조다. 위 '그림1' 에서와 같이 왼쪽에서 오른쪽으로 페이지 이동이 일어 나고 그때마다 모든 파일을 서버에서 다운받고 있다. 이런 구조가 지금까지 대 부분의 웹 페이지에서 일어나는 흐름이다. 대표적으로 N 사이트의 모바일 전용 사이트(m.naver.com)에서도 이와 같은 구조로 되어 있다.

[그림2] 웹앱 네비게이션 흐름

웹앱은 기본적으로 UI에 필요한 자바스크립트와 CSS 그리고 이미지들을 최초 초기화때에 모두 가져온다. ( 또는 웹앱으로 배포된 앱은 같이 배포가 되어 있다.) 그리고 UI 이외의 요소인 데이터만 웹 서버를 통해 추가적으로 가져와서 사용자의 반응에 따라 필요한 UI를 페이지 전환 없이 사용자에게 보여준다. 

사용자의 입장에서 어떤 구조가 더 빠르게 반응할 수 있는지는 굳이 증명 하지 않아도 알 수 있을 것이다. 그래서 요즘에는 웹에서도 위와 같은 구조를 지원하기 위해 여러가지 라이브러리들이 개발되고 있다. 이런 라이브러리들을 아래에서 웹앱 개발을 지원하는 프레임웍에 대해서 먼저 검토하고 알아 보도록 하겠다.

웹앱 개발을 지원하는 대표적인 프레임웍은 "Sencha Touch"와 "jQuery Mobile"이 있다. Sencha Touch는 가장 화려한 UI와 편리한 기능들을 제공하는 컴포넌트들이 있어서 어렵지 않게 웹앱을 만들 수 있다. 그렇지만 Sencha Touch를 사용하면 다른 라이브러리와의 연동이 상당히 제한되어 개발자의 창조적인 사고에 영향을 받을 수 있다. 그와 반대로 jQuery Mobile은 유명한 jQuery 진영에서 개발된 프레임웍이며 기존 그대로 jQuery를 사용하여 개발 할 수 있다. 그리고 수많은 오픈소스 진영에서 활발하게 개발되고 있어서 앞으로의 발전이 가장 많이 될 것으로 기대하고 있다. 그리고 jQuery Mobile는 제일 많은 플랫폼을 지원하고 있어서 한번만 개발하여 배포만 거의 모든 환경에서 사용할 수 있을 것이다. 

[그림3] 센차터치 데모 예시

( http://www.sencha.com/products/touch )

[그림4] jQuery Mobile 사이트에서 모바일 화면을 구성하는 화면

( http://jquerymobile.com/ )

jQuery Mobile 사이트에 들어가 보면 '그림3'과 같이 웹에서 직접 UI를 그려보고 테스트를 할 수 있도록 지원하고 있다. 필자가 드래그 앤 드롭으로 Header, Footer, Link, Button... 등등을 넣어서 테스트한 화면을 '그림4'에서 처럼 확인할 수 있다. 그리고 오른쪽 위 상단에 'Download HTML'을 클릭하면 내가 편집한 화면을 그대로 다운로드 받는 것을 지원한다. 다운로드 받은 파일을 압축해제 하면 '그림5'와 같은 파일을 확인할 수 있다.

[그림5] 다운로드 받은 압축 파일을 해제한 폴더 화면

이 파일을 바탕으로 구현하고자 하는 웹앱을 완성하면 될 것이다. 그리고 이런 방법외에도 아래 '그림6'처럼 갤러리를 제공하고 있어서 디자인이나 레이아웃 또는 기법들을 검토할 수 있는 웹 사이트까지 제공하고 있다.

[그림6] jQuery Mobile로 만든 사이트 갤러리

이 갤러리를 이용해서 내가 만들 웹앱에 대한 영감을 얻어 사용자에게 좀더 편리하고 완성된 웹앱을 만드는 밑거름으로 사용하기를 바란다.

이제 일반적인 웹 페이지에 대해서 접근해 보도록 하겠다. 웹 개발이 발전하면서 일반 웹에서도 웹앱과 같은 구조를 지향하기 위한 방법론이 거두되면서 SPA라는 개념이 나오게 되었다. 위키 피디아에서 SPA( http://en.wikipedia.org/wiki/Single-page_application )를 '데스크탑 애플리케이션에 더 가까운 더 유연한 사용자 경험을 제공하는 것을 목표로 하나의 웹 페이지로 만든 웹 응용프로그램 또는 웹 사이트이다'라고 되어 있다. SPA의 형식이야 어떻든 웹앱과 전체적인 구조와 비슷하게 같이 가져 간다는 것이다. 그리고 SPA를 지원하기 위해서 여러가지 프레임웍과 라이브러리가 생겨나게 되었다.

웹앱이나 SPA는 하나의 웹 페이지에서 여러개의 비지니스 로직을 포함하기 위해 방대한 자바스크립트의 관리가 힘들게 되었다. 그래서 자바스크립트를 모듈화 해주는 프레임웍과 비 동기적으로 자바스크립트를 가져와 실행되도록 해주는 비동기 지원 라이브러리의 등장이 있었고 각각의 특징들을 모아 자바스크립트 MVC(Model-View-Controller) Framework이 등장하고 End-to-End 방식으로 지원하는 프레임웍까지 등장하게 되었다. 

역할	라이브러리 명
모듈화 지원	- Backbone.js ( http://backbonejs.org/ )
비 동기 로드 지원	- RequireJS ( http://requirejs.org/ )
MVC※(Model-View-Controller) 프레임웍	- AngularJS※ ( http://angularjs.org/ )  - knockoutJS※ ( http://knockoutjs.com/ )
End-to-End※ 프레임웍	- Meteor ( http://www.meteor.com/ ) on Node.js  - Derby ( http://derbyjs.com/ ) on Node.js

[표1] 역할 별 자바스크립트

※ 자바스크립트 MVC는 서버사이드에서 처럼 브라우저단에서도 데이터와, 뷰와 로직 처리를 분리하여 개발 및 확장, 유지보수성을 높이고 최저 품질을 높이기 위한 방법을 지원하자는 취지로 만든 프레임웍이다.

※ End-to-End 프레임웍은 Node.js 진영에서 지원되는 프레임웍으로 서버에서 브라우저까지 모두 자바스크립트로 개발할 수 있도록 되어 있다.

※ AngularJS, KnockOutJS는 Databinding을 지원한다. DataBinding이란 자바스크립트의 객체값으로 HTML의 테그와 양 방향 통신을 하여 일치 시켜 주는 작업을 지원하는 것을 말한다. 그래서 개발자는 HTML 테그를 컨트롤 할 필요 없이 자바스크립트 객체 값만 변경 시키면 UI는 저절로 변경이 일어난다. ( '그림9' 참조 )

[그림7] MVC를 지원하는 AngularJS

[그림8] MVC를 지원하는 KnockOutJS

[그림9] KnockOutJS에서 Databinding의 예시 ( http://learn.knockoutjs.com/#/?tutorial=custombindings )

이런 라이브러리들은 개발자의 사소한 실수를 줄이고 고 품질의 코드를 작성 할 수 있도록 개발자를 고양시켜 주기도 한다. 여기서 언급된 라이브러리들이 생소하다면 지금 부터라도 하나 하나씩 접해 보면서 자기만의 것으로 만들어 보기를 적극적으로 권해 드린다.

마지막으로 필자가 생각하는 라이브러리를 익혀 나가는 순서는 아래와 같다.

- Backbone으로 모듈화 및 기본적인 MVC의 개념을 잡고

- Requirejs로 비 동기적으로 js을 불러와 네트워크 트래픽을 분산 시키는 기법을 익히고

- Backbone + Require 또는 AngularJS + RequireJS(KnockOutJS + RequireJS)의 조합으로 MVC를 좀더 심화 시킨다.

  (AngularJS는 구글에서 KnockOutJS는 MS에서 서포트 해주고 있다.)

이와 같은 순서로 점진적으로 고급기법들을 익혀 나가다 보면 사용자에게 보다 빠르고 에러가 나지 않는 신뢰할 수 있는 웹페이지를 제공할 수 있을 것이고 핵심 로직에만 집중할 수 있기에 보다 높은 품질의 코드를 작성할 수 있게 될 것이다. 그렇게 된다면 프로그래머로서 현재 보다 더 만족스러운 삶을 살 수 있을 것이라고 기대하면서 이 글을 마치겠다.