'User Experience'에 해당되는 글 4건

  1. 2008/12/04 Moonlight 1.0 베타 1 공개
  2. 2008/09/17 Silverlight for dummies #2
  3. 2008/09/11 [정리] WPF/Silverlight UI Threading 모델
  4. 2008/09/05 Silverlight for dummies #1 (1)

크로스 플랫폼, 크로스 브라우저, 크로스 디바이스 구현 기술이자 웹 플랫폼인 Silverlight의 리눅스 짝꿍인 Moonlight가 노벨의 모노 프로젝트를 통해 베타 상태로 공개되었다. Silverlight 1.0에 대응하는 기능을 제공하고 있으며 다음과 같은 리눅스 배포판을 지원한다. 특히 Ubuntu와 Fedora 처럼 데스크탑용으로 널리 쓰이는 배포판에 대한 지원이 눈에 띈다.

1MB 정도의 용량으로 구성되어 있으며 Moonlight 1.0 Beta 1 다운로드 싸이트에서 설치할 수 있다.

참고로, Moonlight를 포함하여 Mono Project를 이끌고 있는 노벨의 Miguel de Icaza가 지난 달 있었던 PDC2008 행사에서 Mono and .NET이라는 세션을 진행하였는데 (놀랍지 않나요?), 세션 동영상은 PDC2008 싸이트에서 감상할 수 있다.

Moonlight에 대한 자세한 사항은 Moonlight 홈페이지를 참고하시길...

<<업데이트 - 2009-02-13>>
Moonlight 1.0 정식 버전이 출시됐으며 아래 싸이트에서 다운로드 받을 수 있다.
http://www.go-mono.com/moonlight/

Posted by 장현춘

Silverlght for dummies #1에 이어 Silverlight에 대해 알아야하는 사항들을 간단히 정리해보자.

통신방식
Silverlight로 작성한 애플리케이션은 사용자 브라우저에서 실행되기 때문에 서버쪽과의 통신을 위해 다양한 방식을 지원한다. 기본적으로는 웹서비스 방식과 소켓 방식을 지원하며, 웹서비스 방식에는 ASMX 웹서비스, WCF SOAP 기반 웹서비스(basicHttpBinding), WCF REST 기반 웹서비스를 지원한다. 또한 일반적인 분산 환경에서의 통신 방식과 다른 특이한 점은 소켓을 제외한 웹서비스 방식은 모두 비동기 (Asynchronous) 방식이라는 점이다.
 

샌드박스 (Sandbox) 모델
Silverlight 뿐만아니라, 자바 애플릿 등 웹으로부터 다운로드 받아 브라우저 내에서 동작하는 애플리케이션들은 보안상의 이유로 로컬 리소스 (사용자 PC 및 여기에 연결되어 있는 프린터, 스캐너 등 장비 포함)에 대한 접근을 제한하는 Sandbox 모델을 채택하고 있다. 따라서 이러한 보안 제약을 넘어서서 사용자의 편의를 도모하기 위해 위해서는 singning  등의 절차를 통해 사용자가 안심하고 사용할 수 있는 증명을 해주어야 한다. 또한 이러한 Sandbox 모델에서 금지하고 있는 것중에는, 사용자 PC에 다운로드 되어 운영중인 애플리케이션과 자신이 다운로드 된 서버 이외의 다른 서버와의 통신을 금지하는 것이다. 이를 해결하기 위해 제공되는 것이 Cross domain scripting 이다. 즉, 서버 루트에 "여기 접근 가능한 도메인은 다음과 같은 것들이며, 이들로부터 온 접속만 허용합니다"라는 증명서를 놓는 것.. 따라서 SL 애플리케이션이 해당 서버에 접속하려할 때 자신이 다운로드된 서버 도메인이 대상 서버의 접근 허용 리스트에 있을 때에만 대상 서버에 접속하여 원하는 작업을 수행할 수 있다. clientaccesspolicy.xml 혹은 crossdomain.xml 파일을 작성하여 SL 애플리케이션이 접근하는 서버 루트에 놓아야 한다. Silverlight가 위 xml을 찾는 순서는 clientaccesspolicy.xml을 먼저 찾고 이 파일이 없을 경우 crossdomain.xml을 찾는다. 따라서 가급적 clientaccesspolicy.xml이라는 이름으로 제공하면 좋다. 파일에 담길 내용은 유사하다.

JavaScript와 Silverlight간 통신
JavaScript와 Silverlight 애플리케이션 간에는 쌍방향 통신이 지원된다. 즉, JavaScript가 Silverlight를 이용하여 닷넷으로 구현된 메소드를 호출할 수 있고, 또한 Silverlight의 닷넷 코드에서도 자신이 속한 Html 페이지에 정의된 JavaScript function을 호출할 수 있다.
1. Silverlight의 닷넷 코드를 JavaScript에서 사용하기
System.Windows.Browser.HtmlPage 클래스의 RegisterScriptableObject() 메소드를 이용하여 Silverlight 애플리케이션을 등록하고 노출한 메소드에 ScriptableMember라는 attribute를 지정하면 된다.
 
노출된 Silverlight의 닷넷 코드를 JavaScript에서 사용하는 방법은 아래와 같다.

2. JavaScript fucntion을 Siverlight 닷넷 코드에서 사용하기
아래 그림과 같이 JavaScript function이 정의되어 있다고 가정할 경우...

Silverlight 닷넷 코드안에서 이 JavaScript를 호출하는 방법은 역시 System.Windows.Browser.HtmlPage 클래스를 사용하여 해당 function을 요청하면, System.Windows.Browser.ScriptObject 타입으로 function을 리턴하게 된다. 임의의 닷넷 코드에서 다음과 같은 방식으로 JavaScript function을 호출할 수 있다.

Posted by 장현춘

애플리케이션이 구동되면서 화면 가득 정보를 채우고자 할 경우 백그라운드로 다수의 쓰레드를 만들어 서버와 통신하거나 연산 작업을 수행하는 일을 하게 되며, 일이 끝난 경우 이를 화면에 업데이트하는 것이 필요하다. 이 경우에 알아 두어야 할 것이 바로 UI 쓰레딩 모델이다. 대부분의 윈도우용 애플리케이션에서 UI 부분을 업데이트하는 쓰레드는 하나이며, 이는 WPF, Silverlight도 예외가 아니다.
한 애플리케이션 내에서 다수의 백그라운드 쓰레드를 생성하여 사용할 수 있으나, UI를 업데이트하는 쓰레드는 해당 UI 컴포넌트를 만들어낸 UI 쓰레드 하나다. 따라서 많은 쓰레드가 생성되어 백그라운드로 동시에 수행되어 업무 효율을 높일 수 있으나, 그 결과물을 화면에 반영하기 위해서는 UI 쓰레드에게 그 작업을 일임해야 한다. 백그라운드 쓰레드가 Dispatcher를 통해 UI 쓰레드에 작업을 할당하는 방법은 동기식으로는 Dispatcher.Invoke() 혹은 비동기 방식으로는 Dispatcher.BeginInvoke()를 통해서이다.

 
이러한 메소드의 호출을 통해서 전달된 작업들이 Dispatcher가 관리하는 큐에 쌓여 우선순위 (DispatcherPriority)에 근거하여 자신이 할당되어 있는 (즉, 연결된) 쓰레드를 통해 순서대로 실행하게 된다. 또한 Dispatcher는 자신이 연결되어 있는 쓰레드를 레퍼런스로 가지고 있으며, DispatherObject는 이러한 Dispatcher에 대한 레퍼런스를 가지고 있다. 이를 도식화하면, 아래 그림과 같다.

각각은 Association 관계로 엮여 있으며 DispacherObject를 통해 할당되어 있는 쓰레드에 이르기까지 접근이 가능하다. 맨 처음 코드에서 Button에 대해서 Dispatcher를 호출한 후 BeginInvoke()를 호출하여 작업을 일임하는 코드가 가능한 이유는, 아래 그림에서 보듯이 모든 UI 요소들이 바로 이 DispacherObject를 상속받아 만들어졌기 때문에, 상속에 의해 Dispatcher를 속성으로 가지게 되었기 때문이다.

쓰레드가 작업을 진행하면서 UI 요소를 업데이트하려할 때, 과연 이 쓰레드가 해당 UI에 접근 권한이 있는지를 점검하는 로직이 DispatcherObject에 CheckAccess()와 VerifyAccess()를 통해 제공되고 있다. DispatherObject (즉, UI 요소) 가 생성될 때 넘겨 받은 Dispatcher 객체와 접근하고 있는 쓰레드가 엮여 있는 Dispatcher 객체를 비교함으로써 쓰레드가 접근하고자 하는 DispatherObject (즉, UI 요소)에 업데이트 권한이 있는지를 검사하는 것이다.

Posted by 장현춘

Silverlight (SL)로 작성한 애플리케이션을 웹을 통해 활용하고자 할 경우에 알아야할 최소한의 것들을 간단히 정리해 보자.

 개발
Expression Blend 툴을 이용하여 시각적인 디자인을 마친후, Visual Studio에서 코드를 입히고 관련 파일들을 묶어 자동으로 .xap 파일로 패키징을 해준다. 패키징 된 .xap 파일을 <object> 태그를 이용하여 아래처럼 HTML 페이지에 추가한다.  .xap은 zip 알고리즘으로 압축한 것으로 일반 zip 관련 툴에서 열어 볼 수 있다.

운영
.xap을 포함한 웹 페이지를 서비스하기 위해서는 웹서버에 다음과 같은 마임타입이 설정되어야 한다. 단, IIS 7은 이미 이러한 설정이 되어 있다. 

확장자 .xaml을 설정하는 경우는 애플리케이션을 SL 1.0으로 작성한 했을 때, 혹은 SL 2로 작성한 애플리케이션이 로딩되는 동안 떠 있을 splash screen 을 사용하고자 할 경우에만 설정한다. splash screen이 .xaml로 작성되기 때문이다. 위 1번 샘플 코드중에 <param name="splashScreenSource" value="SplashScreen.xaml" />에서 보듯이 SL 애플리케이션의 파라메터로 splash screen 정보를 전달한다. splash screen 제어를 자바스크립트로 하는 이유는 당연하게도 아직 SL 애플리케이션이 메모리에 로딩되기 전에 일어나는 일이기 때문이다.

사용자의 PC에 4MB 정도의 SL 런타임이 설치되어 있다면 위에서 언급한 두가지만 설정되면 SL 애플리케이션이 정상 동작하게 된다. 그 외 좀 더 다양한 기능을 사용하고자 하거나 툴을 통해 좀 더 편리하게 개발하고자 한다면 다음과 같은 기능에 관심을 갖도록 한다.

보안
SL 2의 보안 모델은 sandbox 모델을 확장 보완한 모델로서 cross-domain 통신, isolated storage, socket, OpenFileDialog 등을 지원한다. SL 2 애플리케이션은 닷넷의 CAS (code access security)와는 달리 sandbox를 벗어날수 없으며, 권한 상승 등을 요청할 수 없다. 즉, 하나의 trust 레벨만 지원하므로 sandbox 하에서 실행하든지, 아니면 실행하지 않든지 둘 중의 하나다.

ASP.NET Silverlight Control
ASP.NET의 server-side control로서 Silverlight control을 제공하는데, <asp:Silverlight>와 같이 작성된 태그는 컴파일과정에서 클라이언트용 스크립트 및 일반 HTML 구문 (<object> tag 등) 으로 사용자 브라우저에서 동작할 수 있는 코드로 생성된다. 이는 ASP.NET AJAX용 server-side control인 <asp:ScriptManager>와 함께 쓰이며이를 통해 client-side 자바 스크립트 코드를 자동 생성하거나 사용자 PC에 다운로드 받아야 할 자바 스크립트 라이브러리를 지정하는 역할을 한다. 실제 SL 애플리케이션 구동에 관련된 Silverlight.js도 이러한 server-side control이 생성해준 자바 스크립트 코드에 의해 사용자에게 다운로드된다. 물론 ASP.NET이 아닌 다른 플랫폼 가령, JSP나 PHP에서 Silverlight를 적용할 경우에는 Silverlight 구동 및 속성 제어 등등을 자바스크립트로 일일이 작성해주어도 된다. 아래처럼 간단한 ASP.NET 코드가 ......

<asp:ScriptManager>와 <asp:Silverlight>의 도움으로 이처럼 복잡한 HTML을 생성한다.

SL 런타임에는 Media Player가 내장되어 있으며 이를 사용하기 위해서는 <asp:MediaPlayer>를 이용하며 <asp:Silverlight>와 마찬가지로 필요한 자바스크립트가 자동 생성된다.

Silverlight for dummies #2

Posted by 장현춘