2011
마이크로소프트웨어

글: 김호연 | foundation@nexon.co.kr / 2011-08


<Focus On>

쉐어포인트를 통해 비교한 RIA와 HTML5

RIA와 웹, HTML5와 모바일


HTML5는 빠르게 변하는 최근의 웹 트렌드에서 핵심으로 떠오르고 있는 기술 중 하나다. HTML5가 떠오르는 이유와 기원, 지금까지의 행보 등에 대해서는 인터넷에서 쉽게 접할 수 있으며, 관심 있는 사람이라면 이미 알고 있을 것이다. 이번 컬럼에서는 마이크로소프트의 대표적인 웹 기술인 실버라이트와 HTML5 간의 간격과 용도를 쉐어포인트를 통해 알아볼 것이다.


현재의 웹

현 시점에서 가장 많이 사용되는 웹 분야의 RIA 기술은 어도비의 플래시이다. 평소 우리가 가장 자주 방문하는 네이버, 다음, 네이트 등 포털에서 플래시로 만들어진 광고를 쉽게 접할 수 있고 최근 우후죽순으로 출시되고 있는 웹 게임도 플래시로 만들어 지는 것을 보면 전반적으로 플래시가 웹에 미치는 영향력이 크다는 것을 알 수 있을 것이다. 마이크로소프트에서는 플래시가 오랜 기간 지켜온 RIA 클라이언트 시장의 중요성을 인식하고 뒤늦게 플래시를 대체할 수 있는 RIA 기술로 실버라이트를 제시하며 강력하게 지원해 왔다. 실버라이트는 RIA 구현을 위해서 애니메이션, 그래픽, 비디오 재생 등의 기능을 갖추고 Windows, Max OS X 등에서 사용할 수 있으며, 특정 플랫폼이 아닌 크로스 플랫폼을 지원한다. 2007년에 실버라이트 1을 출시하고 2010년 12월 실버라이트5를 발표할 때까지 빠르게 기능을 확장하면서 발전해 왔다. 실버라이트는 이런 전폭적인 지원에 힘입어 조금씩 성장 곡선을 그리기 시작했고, 쉐어포인트 2010에서도 UI의 많은 부분이 실버라이트로 제작되는 등 마이크로소프트의 제품에서도 많이 이용되고 있다. 물론 플래시에 비하면 여전히 사용이 미비하지만 분명히 조금씩 성장하고 있었다.

 

문제점 발생

하지만 실버라이트의 문제는 다른 곳에서 발생하고 있다. 최근 사용자들의 웹 사용량이 PC에서 모바일로 옮겨가는 것을 확인할 수 있다. 단적인 예로 세계적으로 최고의 성장세를 보이고 있는 페이스북을 통해 이를 확인할 수 있다. ZDNET에 따르면 페이스북 모바일 사용자가 3월에는 2,500만 명이었고, 9월에는 6,500만명에 이를 것이라는 전망을 내놓았다. 기존의 웹은 그대로 존재하고 있지만 웹을 소비하는 장치가 PC의 웹브라우저에서 모바일 브라우저로 이동하고 있는 것이다. 실버라이트나 플래시는 모바일 웹 브라우저에서 지원하지 않아 웹처럼 모바일 웹에서 사용할 수 없어 모바일에서도 RIA를 대체해 UI를 개선하고 UX를 충족시킬 수 있는 방법이 필요하게 되었다.

 

이런 고민에 대한 해결책으로 기업형 솔루션은 앱을 통해서 유저의 요구를 해결하려고 했다. 폭발적인 모바일의 성장세에 발맞춰 기업에서 사용할 수 있는 기업형 솔루션을 모바일 위에서 사용할 수 있도록 선보이기 시작했다. 빠르게 성장한 이런 솔루션들은 사용자의 요구를 충족시키기 위해 우선 앱을 이용해 개발되기 시작했다. 다양한 사용자의 요구를 맞추기 위해서 솔루션을 앱으로 개발해야만 한다고 생각했을 뿐만 아니라 다양한 방법을 시도하기 전에 이미 너무 많은 요구가 등장해 많은 기업형 솔루션들이 앱이라는 방법으로 시장에 진출할 수밖에 없었다. 하지만 엄청난 스마트폰 열풍 속에서 국내에서도 지속적으로 다양한 스마트폰이 등장하고 있으며, 기업에서 직접 솔루션을 사용하는 유저들의 모바일 디바이스를 통일할 수 없는 등의 문제가 발생하면서 더 큰 고민에 빠지기 시작했다.

 

모바일기기 MeeGo(Intel/Nokia), Android(Google), iOS(Apple), WebOS(HP), WindowsMobile, WindowsPhone(Microsoft), BlackBerry OS(RIM), Symbian, Bada(Samsung), Qt, J2ME(Oracle), Brew(Quallcomm)
넷북,타블릿 등 Windows, Linux, OS X, Chrome OS

<표 1> 다양한 디바이스와 OS

 

몇 가지 문제점을 간단히 정리하자면

 

1. 모바일 분야는 거대한 규모를 가지고 있지만 각각 다른 플랫폼을 가지고 있다.

2. PC의 윈도우와 같은 독보적인 OS가 존재하지 않아 다양한 OS에 맞춰서 개발해야 한다. 이는 OS별 개발자가 필요하다는 뜻이고 세부적인 버전에 따른 용도를 사용하면 더욱 고려해야 할 사항이 많다.

3. 계속해서 생겨나는 제조업체와 다양한 디바이스가 존재한다. 이미 시장에서 선보이는 기업용 솔루션들은 그룹웨어를 사용하기 위한 용도로 개발된 것이 많은데 전자결제, 이메일, 일정관리 등을 사용할 수 있도록 개발된 것이다. 하지만 모바일 디바이스에 따라 다른 경험이나 혹은 다른 서비스를 제공할 수도 있고 특정 디바이스 기기만 지원하는 경우가 존재한다.

 


<그림 1> 쉐어포인트 모바일 페이지 화면

그렇다면 HTML5는?

최근 이런 트렌드에 대한 대안으로 HTML5에 대한 관심이 급격히 늘어나고 있다. 그렇다면 HTML5가 최적의 대안일까? 쉐어포인트를 예로 얼마나 사용 가능성이 있고 또 다른 대안은 없는가에 대해서 알아보자.

 

쉐어포인트 서버는 10년이 넘는 시간 동안 많은 시행착오를 거치면서 발전해 왔고, 마이크로소프트에서 장기 계획하에 개발한 제품이다. 쉐어포인트 서버 2010이 발표되면서 더욱 뛰어난 개발자 지원 API와 템플릿을 통해 개발자들이 쉽게 접근할 수 있게 된 뒤로는 그 가치가 더욱 인정받고 있는 협업 플랫폼이다.

쉐어포인트는 국내외 기업에서 포털, 협업, 그룹웨어 등 다양한 용도로 사용되고 있으며, 확장까지 고려해서 만들어진 제품이다.

 

하지만 위에서 언급했듯 2007 버전과는 달리 웹 응용프로그램의 UI 중 많은 부분이 실버라이트로 구현되어 있다. 그 탓에 쉐어포인트 2010에서 지원하는 기본 모바일 페이지는 <그림 1>과 같이 순수 텍스트만의 딱딱한 분위기다.

 

쉐어포인트 서버를 이미 구축돼 있는 웹 응용프로그램이라고 가정했을 때, 모바일 웹에서의 부족한 UI 등의 부분을 HTML5를 이용해서 좀 더 발전시키면 큰 장점이 되지 않을까? 그렇다면 먼저 모바일 웹에서 HTML5를 사용할 경우 장점에 대해 생각해보자.

 

모바일에서 HTML5의 장점

모바일 웹 브라우저에서는 HTML5의 기능을 대부분 지원해 이를 통한 크로스 플랫폼이 가능해 진다. 현재 시장을 주도하고 있는 안드로이드 브라우저와 아이폰 모바일 사파리뿐만 아니라 곧 출시될 윈도우폰 7도 망고버전부터 인터넷 익스플로러 9 버전을 기반으로 HTML5를 지원하고 있다. 우리가 데스크톱 웹개발에서는 브라우저별 지원이라는 까다로운 장벽이 존재하지만 모바일에서는 제약이 상대적으로 적은 편이다. 결국 다양한 디바이스에 맞춰 솔루션을 개발해야 하는 한계를 극복할 수 있다는 의미다.

 

<표 2>에서와 확인할 수 있듯이 대체로 이미 출시된 많은 모바일 디바이스들은 HTML5 기능을 사용할 수 있다. 비교적 최신 OS일수록 높은 점수를 기록하고 있는 것도 확인할 수 있다. 윈도우 폰은 전반적으로 최하 점수를 기록하고 있지만 현재 IE의 개발속도와 망고 이후 버전을 생각하면 아직은 단정짓기 어렵다.

 

<표 3>에서 확인 가능한 태블릿의 경우에도 HTML5가 상당히 지원된다는 것을 확인할 수 있다. PC의 경우 최신 브라우저들은 HTML5를 원활히 지원하는 것으로 확인(<표 4> 참조)되지만 IE가 대부분을 차지하는 PC 시장에서 IE 6 퇴출 운동을 진행할 만큼 브라우저 버전 향상이 더뎌 어려움으로 작용한다.

 

사용 중인 브라우저
MeeGo 1.2 283
BlackBerry OS 7 277
Opera Mobile 11.10 269
Firefox Mobile 5 249
iOS 4.2 & 4.3 217
webOS 2.1 189
Android 2.3 184
Bada 1.2 178
Windows Phone 7 25
개발 중 혹은 베타 버전
iOS 5 303
Firefox Mobile 6 285
Bada 2.0b1 278
Windows Phone 140

<표 2> 모바일 브라우저의 HTML5 지원현황 (400점 만점)

 

모바일 브라우저에서 지원하고 있는 HTML5는 모바일에서 강력하게 활용할 수 있는 몇 가지 기능이 있다. 클라이언트의 위치 정보를 알아낼 수 있는 Geolocation API나 인터넷 페이지에서 동영상을 재생할 수 있는 <Video> 태그, 브라우저에서 애니메이션 효과를 보여줄 수 있는 <Canvas> 태그 등이 그것이다. 특히 이 두 태그는 CSS와 자바스크립트를 이용하면 적절한 효과를 보여줄 수 있어 기대가 큰 기능들이다. 특히 쉐어포인트 2010의 경우 동영상 플레이어가 기본적으로 실버라이트로 만들어졌고 모바일 웹 페이지가 단순한 텍스트 위주이기 때문에 이런 곳에서 RIA 기술과 같은 효과를 볼 수 있는 <Video> 태그와 <Canvas> 태그 등은 자바스크립트와 결합하여 훨씬 더 나은 UI를 만들 수 있다는 기대감을 갖게 한다.

 

모바일에서 HTML5의 단점

하지만 모바일 브라우저에서도 HTML5를 사용하는 데 단점도 있다. 우선 가장 강력한 기능으로 생각했던 <Video> 태그는 코덱에 관련된 이슈가 아직 해결되지 않은 상태다. 현재 브라우저마다 지원하는 동영상 압축 방식이 다른데 모질라, 구글, 오페라 등이 WebM/VP8를 지원하고 마이크로소프트와 애플은 H.264 방식을 지원한다. 현재 이런 문제를 해결하기 위해 하나의 동영상을 2~3개의 다른 압축방식을 사용해서 게시해야 하는 불편함을 겪고 있다. 게다가 애니메이션을 가능하게 하는 <Canvas> 태그에서도 성능적인 문제가 있을 수 있다. 물론 아직 계속 빠르게 발전 중이지만 인터프리티드 언어인 자바스크립트 코딩을 통해 제작된 HTML5 애니메이션은 웹에서 한 줄씩 읽히며 실행돼 성능상 문제가 있다. 마지막으로 HTML5를 이용해 새로운 기능을 구현한다면 그 기능을 구현하는 것보다 각 모바일 브라우저에 맞춰서 개발하는 데 많은 힘을 소비할 것이다. 예를 들면 아이패드 사용자를 위해서 쉐어포인트에 비디오 사이트를 구축한다고 가정하자. 이 때 순수 비디오 사이트의 기능보다 각 기능들이 모바일 브라우저 별로 제대로 작동하고 보이는지 확인하는 데 많은 시간을 보낼 것이다. 하지만 이것은 모바일 분야에만 한정된 문제가 아니며 오히려 모바일이 PC에서보다는 조금 더 나은 환경을 제공한다.

 

구현

일반적으로 고객들은 쉐어포인트 2010에서 HTML5를 어떻게 적용할 수 있으며, 얼마나 가시적인 효과를 볼 수 있는지를 묻는다. 고객이 무엇을 원하는가를 알고 있어야 적절한 대답을 할 수 있다.

 

HTML5는 빠르게 진화 중이지만 현재 모든 면에서 최선의 답은 아니다. 고객의 요구사항이 간단하게 쉐어포인트 2010 서버에 있는 정보를 가져와서 HTML 위에 표시해주는 기능을 만들려고 한다면 HTML5가 필요 없을 수도 있다. 쉐어포인트 2010에서는 클라이언트 오브젝트 모델이 새롭게 추가되면서 콘솔, 윈폼, 실버라이트, 자바스크립트를 이용해서 쉐어포인트 서버 데이터에 접근할 수 있으며 REST 서비스를 지원해 REST API를 이용하는 접근도 가능하다.

 

목록을 확인하는 기능에는 GET 방식의 REST 서비스만으로도 충분하기 때문에 REST 서비스를 이용해보자(REST 서비스를 이용하기 위해서는 쉐어포인트 서버에 Data Services Update for .NET Frame work 3.5 SP1이 설치되어 있어야 한다).

 

쉐어포인트 서버의 http://[server]/[optional site]/_vti_bin/ListData.svc/ 주소로 접근하면 사이트의 목록 정보를 가져올 수 있다. <그림 2>와 같이 목록의 정보가 표시되는 것을 확인할 수 있을 것이다.

 


<그림 2> REST 서비스를 이용해서 목록에 접근

 

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript" />
<script type="text/javascript">
$(document).ready(funcction(){
$.getJSON("http://sharepoint:9000/_vti_bin/ListData.svc/공Æⓒª지o사ic항¡¿",function(data){
  $.each(data.d.results,function(index,result){
    var title = $("<div/>",{text:result.제|목¬n}).append();
    var content = $("<div/>",{text:result.본¬¡i문o¢c}).append();
    $("#result").append(title);
    $("#result").append(content);
    });
  });
});
</script>
<div id="result"></div>

<리스트1> 자바스크립트를 이용해 목록 가져오기

 

하지만 쉐어포인트에 올려져 있는 동영상을 모바일로 확인하는 등의 특수한 상황에서는 HTML5를 사용해서 해결할 수도 있다. HTML5의 <video>태그를 이용하면 쉽게 모바일에서 동영상을 보여줄 수 있다(단 모바일에서 사용하는 <video> 태그는 autoplay 기능을 지원하지 않기 때문에 <video> 태그 영역을 클릭해서 영상을 볼 수 있도록 되어 있다. 대량 트래픽 유발 방지와 해킹이나 악의적 어뷰저를 막기 위함이다).

 

먼저 HTML5를 이용하기 위해서 다음과 같은 작업을 수행해야 한다. 사용하려는 모바일 페이지의 마스터 페이지 혹은 페이지 상단에 있는 다음과 같은 문구를 수정해야 한다.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”

<!DOCTYPE html>

 

간단하게 html 부분만 남겨놓자.

마스터 페이지에서 강제로 이 페이지를 IE 8버전처럼 렌더링하는 태그가 있는데 IE 8에서는 HTML5를 지원하지 않기 때문에 이 역시 삭제해야 한다.

 

<meta http-equiv=“X-UA-Compatible”content=“IE=8”/> (삭제)

 

쉐어포인트 모바일 페이지의 UI는 단순하고, 스마트폰이나 태블릿을 위해 개발된 것이 아니기 때문에 이를 바꿔야 한다. 모바일에서 접속할 때 자동으로 감지해서 모바일 페이지로 이동시켜 주는 것을 수정해보자. 쉐어포인트 서버에서는 클라이언트의 HTTP 요청을 받을 때 BeginRequest 이벤트에서 SPRequest Module을 감지해서 모바일 페이지로 이동한다.

 

하지만 이것은 HTTP Module 형태로 존재기 때문에 수정하거나 대체할 수 없다. 하지만 이를 피하는 방법이 몇 가지 있다. 간단하게 http://server/site/m/ 형태로 /m/이 삽입되게 페이지를 만들거나 혹은 http://server/site/_layout/moblie/default.aspx의 형태로 _layout형태를 이용하면 된다. 더 자세한 내용은 http://msdn.microsoft.com/en-us/library/ms462572.aspx에서 확인할 수 있다.

 

이제 쉐어포인트에서 HTML5로 동영상을 보여주는 작업을 진행해보자. 우선 VideoJS라는 HTML5용 동영상 플레이어를 사용하면 쉽게 HTML5 동영상 플레이어를 사용할 수 있다.

 


<그림 3> 콘텐츠 에디터 웹 파트를 이용해 확인한 결과

 

http://videojs.com/ 사이트에 접속하면 최신버전을 다운받을 수 있다. 다운받은 파일 중 video.js 파일과 video-js.css 파일을 쉐어포인트 사이트에 업로드한다. 필자는 사이트 자산 라이브러리에 업로드했다. 그리고 새롭게 페이지를 생성하고 페이지 편집을 선택한 뒤 콘텐츠 에디터 웹 파트를 삽입한 뒤 콘텐츠 에디터 웹 파트 속 HTML 편집기를 이용하여 <리스트 2>와 같은 코드를 입력한다. js파일과 css파일은 자신이 파일을 업로드한 경로에서 검색하는 것을 권장한다.

 

<script src="./SiteAssets/video.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  VideoJS.setupAllWhenReady();
</script>
<link rel="stylesheet" href="./SiteAssets/video-js.css" type="text/css" media="screen" title="Video JS">
<div class="video-js-box">
  <video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto"
poster="http://video-js.zencoder.com/oceans-clip.png">
    <source src="http://video-js.zencoder.com/oceansclip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://video-js.zencoder.com/oceansclip.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="http://video-js.zencoder.com/oceansclip.ogv" type='video/ogg; codecs="theora, vorbis"' />
    <object id="flash_fallback_1" class="vjs-flashfallback" width="640" height="264" type="application/xshockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
      <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" value='config'
      {"playlist":["http://video-js.zencoder.com/oceansclip.png", {"url": "http://video-js.zencoder.com/oceansclip.mp4","autoPlay":false,"autoBuffering":true}]}' />
      <img src="http://video-js.zencoder.com/oceansclip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
    </object>
  </video>
</div>

<리스트 2> 쉐어포인트 컨텐츠 에디터 웹 파트에 HTML5 소스 삽입

 

<그림 4>에서 보면 아무런 UI 없이 간단하게 페이지에 동영상만을 표시하고 있지만 위의 작업을 완료한 뒤에 해당 모바일 페이지만을 위한 마스터 페이지를 만들어 편집하고 페이지 디자인을 만들면 더 나은 형태의 페이지를 제작할 수 있을 것이다. 물론 소스에서 확인할 수 있듯이 각각의 압축 종류별 동영상을 준비해야 하는 것이 한계이며, 이를 관리하는 것이 쉽지는 않을 것이다.

 


<그림 4> HTML5로 렌더링된 동영상 플레이어

 

마치며

HTML5는 2012년 중에 W3C에 후보 추천 지원 단계에 도달할 것으로 예상되고 2022년 이후에나 추천 단계에 도달할 것이라고 생각한다. 그렇기 때문에 아직 머나먼 미래의 모습이라고 생각할지 모르겠지만 이미 우리 앞으로 빠르게 다가오고 있다.

 

HTML5를 이용한 게임들과 엔진들을 보고 있으면 향후 HTML5가 충분히 플래시와 실버라이트 영역을 잠식해 나갈 것이라 생각한다. 많은 브라우저 업체들이 HTML5를 적극적으로 지원하며, 웹 개발자들이 HTML5만을 적용하는 방법은 아니지만 조금씩 부분적으로 적용하는 방향으로 나아간다면 기존 기술과 함께 좋은 결과물을 선보일 수 있을 것이라 생각한다.

 

 

[참고자료]
1. http://www.slideshare.net/c.heindel/mobile-anwendungen-fr-sharepoint-mit-HTML5
2. http://msdn.microsoft.com/en-us/library/ff974378(v=VS.85).aspx
3. http://msdn.microsoft.com/en-us/library/ms464268.aspx
4. http://msdn.microsoft.com/en-us/library/ms462572.aspx



/필/자/소/개/

필자 김호연

김호연 | foundation@nexon.co.kr

넥슨에서 개발자로 근무하고 있으며 설명이 필요 없을 만큼 쉽게 사용할 수 있는 애플리케이션을 개발하는 것을 목표로 노력하고 있다. 특히 쉐어포인트에 관심이 많고 이를 이용해서 다른 플랫폼 또는 서비스를 결합해 개발하기를 즐기고 있다. Microsoft MVP와 쉐어포인트코리아(http://sharepointkorea.com)의 운영진으로 활동하고 있다.




※ 본 내용은 (주)마소인터렉티브(http://www.imaso.co.kr/)의 저작권 동의에 의해 공유되고 있습니다.
    Copyright ⓒ Maso Interactive Corp. 무단전재 및 재배포 금지

맨 위로
맨 위로