• e-book
• 회원가입
• 정기구독신청
• 전체보기
• 로그인

실전 Silverlight로 포토라이트 만들기

프린트 이메일 전송

김동욱 kdw8751@gmail.com｜현재 훈스닷넷 커뮤니티 시삽으로 활동하고 있다. 휴즈플로우에 재직 중에 있으면 실버라이트 관련 업무를 맡고 있고, 현재 실버라이트에 집중하고 있다. 

포토라이트를 간단하게 설명하면 이미지 뷰어라고 할 수 있다. 사용자들이 쉽게 사용할 수 있고, 사진을 보면서 즐거움을 느낄 수 있게 하는 이미지 뷰어라고 생각하면 쉬울 것이다. 필자는 이러한 의도로 이번 컬럼을 기획했음을 알아주길 바라며 실버라이트를 공부하고 있는 많은 개발자들에게 도움이 될 자료가 되었으면 한다.
포토라이트를 어떻게 만들어 볼까 정말 고민이 많았다. 필자는 개발자라 획기적이고, 창조적인 생각이 팍팍 떠오르지 않는다. 그래서 여러 사이트들을 돌아다니면서, 좋은 기능들이 있는 사이트들을 체크하고, 사용해 보며 경험을 쌓아보던 중 스토리큐(www.storyq.net)라는 사이트를 방문해서 사용해 보았고, 이와 비슷한 것을 실버라이트로 만들어 봐야겠다는 생각이 들어 만들게 된 결과물이 포토라이트이다.

디자인 협업 

포토라이트의 디자인은 현재 훈스닷넷 익스프레션 시삽으로 활동 중인 김선구 시삽의 도움을 받았다. 다들 아실 것이다. 개발을 할 때 디자이너와의 협업이 중요하다는 것을 말이다. 하지만 김선구 시삽과 필자는 같은 회사의 동료도 아니고, 서로 바쁜 스케줄을 조정해가며 제작에 나서 커뮤니케이션조차도 쉽지 않았다. 때문에 필자는 <화면 1>과 같은 방법으로 협업을 해 보기로 결정을 내렸다.

“선 개발 후 디자인”이란 포토라이트에서 사용될 기능들에 대해서 먼저 개발을 해두고, 나중에 디자인을 입히는 것이다. 이렇게 하면 개발자는 디자인을 고려한 개발을 해야 할 것이고, 디자이너는 사용자를 위한 디자인을 해야 할 것이다. 포토라이트는 우리가 많이 듣던 MVVM + Command 패턴을 이용해 만들었다. 이는 디자이너와의 협업에서도 정말 편했다. 간단하게 MVVM패턴에 대해 애기하자면, 모델(Model)과 뷰(View)를 독립적이게 놔두고, 그 사이에 뷰모델(ViewModel)를 두어 뷰와 바인딩으로 엮어 두고, 커맨드를 이용해서 해당 이벤트를 뷰모델에서 주고받게 되는 형식이다. 커맨드는 주로 애플리케이션 전역에서 동일하게 받을 수 있는 사용자 제어 명령에 대한 이벤트를 효과적이고, 표준적으로 받기 위한 구현 방법이다.

커맨드는 MVVM처럼 뷰 와 모델이 분리된 환경에서 매우 효과적으로 코드를 짤 수 있게 도와주는 역할을 한다. 여기서 기억할 것은 어플리케이션 전역에서 동일하게 받을 수 있다는 것을 잘 기억해 두길 바란다.

<화면 2>에서 왼쪽은 디자인을 입히기 전의 모습이며, 오른쪽은 디자인을 입힌 모습니다. MVVM패턴으로 만든 결과 뷰를 변경하는 것도 정말 쉬웠다. 그냥 바인딩만 제대로 걸어두고 커맨드를 제대로 걸어 주기만 하면 되는 것이다. 그렇게 하니 30분도 안 되서 디자인을 입힐 수 있었다. 이러므로 디자이너와 협업이 편했다 할 수 있겠다.
이제 본격적으로 포토라이트의 작동 및 구현 코드에 대해서 알아보도록 하겠다.

Photo Light 파일업로드 구현
포토라이트 파일업로드를 구현하는 데는 파일업로드 애플리케이션 또한 실버라이트로 구현해 봤다. WCF서비스를 이용하니, 다중파일 업로드와 파일업로드 프로그레스바(Progress Bar)를 표시하는데 쉽게 구현할 수 있었다. 일단 포토라이트에서 파일업로드가 어떤 식으로 작동되는지는 <화면 3>을 통해 순서대로 간략하게 설명할 수 있다. 

<화면 3>에서 노트북PC로 표시되어있는 쪽이 클라이언트 PC라고 가정을 하자. 클라이언트는 포토라이트에 파일을 올리기 위해 자신이 보유하고 있는 사진을 선택할 것이다. 선택된 파일은 사용자가 업로드 액션을 주게 될 때, 각 파일별로 WCF서비스를 호출하고, 선택된 파일을 넘겨주게 된다. WCF서비스에서는 이 파일을 받아서, 파일서버의 해당 루트에 저장하게되는데, 이때 단순히 저장만 하는 것이 아니라 썸네일(Thumbnail) 이미지와 딥줌(DeepZoom)파일들도 만들어 같은 루트 안에 저장한다. 이제 대략적으로 포토라이트에서는 어떻게 파일업로드가 되는지 살펴보았으니 이제 실제 구현 코드를 보면서 애기하도록 하겠다

<화면 4>는 포토라이트의 파일업로드 애플리케이션의 모습이며, 프로젝트 구성내용은 <화면 5>와 같이 만들어봤다.

<화면 5>에서 서비스 레퍼런스로 FileUploadService가 참조된 것을 볼 수 있는데, 이는 서비스를 이용해 파일을 서버에 업로드 시킬 수 있는 것이다. 서비스 구현에 대해서는 다음에 다시 이야기하기로 하고 지금은 서비스를 통한 파일업로드를 이뤄낸다고만 알고 있자.

각 폴더에 들어 있는 클래스들에 대해서 간단하게 애기하자면, 커맨드 폴더에는 위에서 설명한 커맨드 패턴 내용대로 파일업로드에 사용될 커맨드를 지정해둔 클래스에 만들어 뒀고, 모델 폴더에는 파일에 대한 데이터클래스와 파일 업로드 프로바이더(Provider) 정의해 두었다. 그리고 뷰폴더에는 MVVM패턴 내용과 같이 뷰와 뷰모델을 만들어 넣어둔다.

이제 파일업로드에 관련된 주요 코드를 살펴보자. <리스트 1>은 커맨드 관련 코드의 내용이다. <리스트 1>을 통해 보면 커맨드를 상속받고 있는 것을 알 수 있는데, 이는 HugeFlow.Com mandPattern.dll를 참조해야만 상속받을 수 있으며, 상속을 받으면 커맨드 생성이 가능하게 된다. 필자는 FileChoice와 FileUpload 두개를 정적으로 생성해 두었다. FileChoice는 파일 선택을 클릭했을 때의 커맨드이고, FileUpload는 파일 업로드 클릭했을 때의 커맨드이다. 뒤이어 제시되는 <리스트 2>는 앞서 선보인 커맨드들을 뷰에서 어떻게 엮어주고 있는지 볼 수 있다. 

위 XAML코드를 보면 먼저 UserControl 엘리먼트(Element)에 CommandPattern 어셈블리를 설정해준다. 그래야 XAML코드에서 커맨드를 엮을 수 있기 때문이다. 필자는 추가버튼과 삭제버튼 컨트롤을 만들어 앞서 지정한 FileChoice라는 커맨드를 엮어 주었다. Command:CommandService.Command에 미리 만들어 두었던 커맨드 이름을 지정해주면 되는 것이다. 그리고 필요에 따라 매개변수(Parameter)도 같이 지정할 수 있는데, 이는 Command:CommandService.CommandParameter에 문자로 지정해 줄 수 있다. 필자는 매개변수로 Insert, Delete라고 지정해 주었다. 이제 이 커맨드를 어디서 어떻게 받는지 <리스트 3>을 통해 알아보자.

<리스트 3>에서 제시된 ImagePanelViewModel이라는 클래스는 ImagePanelView.xaml의 뷰모델이다. ImagePane lView Model의 생성자에서 커맨드 이벤트를 생성해 주었다. 위에서도 말했듯 커맨드는 전역에서 사용될 수 있으므로 뷰모델에 이벤트를 엮을 수 있다. 이제 커맨드를 어떻게 사용해야 할 지 감이 왔을 것이다. 그러나 커맨드를 너무 남발하거나 무조건 커맨드를 만들어서는 안된다. 예를 들면 뷰에서 Visibility를 Colla psed 또는 Visible 하는데 커맨드까지 만들지 말자는 애기다. 이런건 뷰에서 형태만 변경되는 것이기에 뷰쪽에서 처리하는것이 좋다. 꼭 이점을 주의해서 커맨드를 사용하길 바란다.

<리스트 4>는 파일업로드 코드다. 여기에서 보여주는 Upload File 메소드는 WCF서비스에 파일을 업로드하는 메소드다. 코드를 보면 파일스트림을 읽어내고 이를 쪼개서 서비스에 호출하고 있음을 알 수 있다. 서비스 호출 후 Completed가 일어났을 때 에러가 발생되지 않으면 다시 UploadFile 메소드를 호출해 아직 다 올리지 않은 파일스트림이 있는지 체크한 후 다시 서비스를 호출한다. 이처럼 반복적으로 파일업로드 진행바에 값을 계속해서 변경하게 된다. FileUploadData 클래스는 서비스에서 생성한 클래스로 업로드를 요청할 때 매개변수(Para meter)로 사용된다. 즉, 이 클래스에 업로드파일 정보를 지정한 후, SaveFile Async를 호출하고 이 매개변수로 FileUploadData를 지정하면 된다.

파일업로드 WCF서비스
웹 프로젝트에서 WCF파일을 하나 생성하자. 필자의 경우에는 <화면 6>과 같이 FileUploadService 와 PhotoViewService 두개를 만들어 두었다.

PhotoViewService는 나중에 PhotoLight에서 사용될 서비스다. 이렇게 서비스를 제작했다면 Web.config 파일에서 endpoint의 바인딩을 basicHttpBinding로 지정해야 한다. 그 이유는 실버라이트에서는 basicHttpBinding만을 지원한다는 점 때문이며, 이는 꼭 기억해두어야 할 중요 요소중 하나다. 이제 WCF서비스 코드를 <리스트 5>와 <리스트 6>을 통해 살펴보자.

SaveFile 메소드는 실버라이트에서 사용될 수 있도록 OperationContract라는 어트리뷰트를 적어줘야 한다. 해당 메소드는 FileUploadProvider 클래스의 SaveFile 메소드를 호출하고 있다. 실제 파일업로드가 처리되는 메소드는 FileUpload Provider 클래스의 SaveFile 메소드다. <리스트 5>와 <리스트 6>을 살펴보면 해당 파일정보가 올라오면 지정한 루트폴더에 파일을 저장한다. 그리고 파일이 완벽하게 업로드 되었는지 IsLast 속성을 체크해서 파일이 모두 업로드되면 썸네일 이미지와 딥줌 파일을 생성하는 것을 볼 수 았다. 

Deep Zoom Composer API 활용
업로드된 이미지파일을 딥줌(DeepZoom)파일로 변환하기 위해서는 DeepZoom Composer API를 이용해야 하는데, 이를 사용하기 위해서는 먼저 서버에 DeepZoom Composer를 설치하고, DeepZoomTools.dll를 프로젝트에 참조추가를 해야한다. 참조를 하게 되면 ImageCreator라는 함수가 있는데, 이 함수를 이용해서 간단하게 딥줌파일을 생성 할 수 있다. \

<리스트 7>을 입력하면 딥줌파일을 생성할 수 있다. 필자는 딥줌파일에서 ImageCreator함수를 생성하고, ImageQuality 속성과 TileSize 속성, TileOverlap 속성만 지정해주었다. 이 속성들은 아래와 같다.

- ImageQuality 속성을 0에서 1 사이의 값으로 세팅하며, 보통 0.95 정도로 지정한다.
- TileSize 속성은 딥줌파일의 이미지 타일의 크기를 지정한다.
- TileOverlap 속성은 이미지들의 Overlap정도는 지정한다.

Create함수를 통한 딥줌파일 생성시 변수가 발생하는데, 첫 번째 매개변수는 파일명(실제파일의 경로)이며, 두 번째 매개변수는 저장되어질 디렉토리 경로를 지정하면 된다. 
이렇게 해서 대략적으로 파일업로드 애플리케이션 동작, 코드구현부분과 WCF서비스에서 처리되는 부분에 대해 알아 봤다. 이제 포토라이트 애플리케이션에 알아보도록 하자.

포토라이트 동작과 구현
리스트를 살펴보기에 앞서 <화면 7>을 참조해 포토라이트에서 어떻게 데이터를 주고받는지, 간단하게 짚고 넘어가자.

<화면 7>을 보면 <화면 3>과 같이 노트북 PC가 있다. 이 또한 클라이언트 PC라고 인식하자. 그러나 <화면 3>과는 달리 <화면 7>의 클라이언트 PC 옆에는 키(key)가 있는 것을 볼 수 있는데 이는 데이터의 키라고 생각하면 된다. 포토라이트에서도 WCF서비스를 이용한다. 해당 키를 WCF서비스에 넘기면, WCF서비스는 DBServer에 데이터를 요청한 후 해당 데이터를 실버라이트 애플리케이션에 보내주는 형식이다.

<화면 8>은 포토라이트의 프로젝트 구성 모습으로, 파일업로드 프로젝트와 비슷한 구성을 갖추고 있음을 알 수 있다. <리스트 8>은 포토라이트에 이용되는 주요 코드들을 제시한다. 먼저 <리스트 8>에서는 ScriptManager 클래스부터 보도록 하자. ScriptManager는 외부에서 스크립트(Script)함수를 통해 데이터 키를 넘겨 받게되면, ScriptManager에서는 데이터 키가 변경되었음을 알려주는 역할을 담당하고 있다.

이 컬럼을 읽는 독자라면 다들 알고 있겠지만 자바스크립트를 통한 실버라이트 함수 호출을 위해서는 HtmlPage.Register ScriptableObject 함수에 스크립트 가능한 액세스 기능을 위해 관리되는 개체를 등록하며, 스크립트에서 특정 함수에 접근하기 위해서는 ScriptableMember라는 어트리뷰트를 붙여야한다. 포토라이트에서는 PTKey라는 메소드를 스크립트에서 접근할수 있도록 지정해 주었는데 이는 키 값이 바뀔 때마다 PhotoKey Changed라는 이벤트를 호출해 주게 되는 것 이다. 이 이벤트를 받는 쪽에서는 해당 키 값으로 WCF서비스를 호출을 해서 데이터를 받아오게 된다.

WCF서비스 활용 Tip 

보통 WCF서비스에서 데이터클래스를 생성하면 DataCon tract 어트리뷰트와 DataMember 어트리뷰트를 붙여 사용했을 것이다. 이러한 방식을 통해야 직렬화(Serialization)가능해져, 실버라이트 애플리케이션에서 받을 수 있고, 서비스 에러도 피할 수 있기 때문이다. 그러나 닷넷 프레임워크 3.5 SP1를 서버에 설치하면, DataContract등의 직렬화 관련 선언 없이도 모든 C# Object를 Remoting Type으로 제공할 수 있다. 이는 닷넷 프레임워크 3.5SP1에 WCFdhk 관련된 기능이 추가됐기 때문이다. 

애니매이션 주기
포토라이트에서는 슬라이드보기라는 기능이 있다. 슬라이드보기 기능은 여러장의 사진을 자동으로 한 장 한 장 넘겨주면서 보여주는 기능이다. <리스트 9>는 이 기능을 샘플로 구현할 수 있는 코드를 정리한 것이다.

<리스트 9>에 명시된 ShowControl이라는 유저컨트롤을 보면 두 개의 스토리보드가 존재함을 확인할 수 있다. 이 두 개의 스토리보드는 간단한 애니메이션을 정의하고 있는데 이는 이미지 컨트롤의 Opacity를 0으로 했다, 1로 하는 역할을 한다. 그래서 데이터가 변경될 때 마다 이미지의 Opacity값을 조절해줘 기존의 이미지는 사라지고, 새로운 이미지는 부드럽게 나타나게 애니메이션으로 작성할 수 있다(<화면 10> 참조).

애니메이션이 작동되는 모습과 실제적인 동작단계가 궁금한 독자들은  www.happydong214.com를 방문하면 볼 수 있다.
지금까지 포토라이트의 대략적인 소스코드와 작동내용에 대해 알아보았다. 필자 또한 실버라이트와 관련된 회사에서 일을 하고 있지만, 경험이 부족한 것은 사실이다. 하지만, 지금까지 나왔던 개발이슈 및 실버라이트에서 제공하는 기본적인 컨트롤들을 잘 이용해서 이렇게 멋진 애플리케이션을 제작할 수 있었다. 실버라이트가 어렵고 생각하시는 분들이 있다면, 그런 생각은 그냥 잠시 잊고, 한번 미친듯이 만들어보고, 또 만들어보자. 그러다 보면 자신도 모르게 발전되어가는 모습을 볼 수 있게 될 것이다.

참고 자료 

1. www.pluralsight.com/community/blogs/aaron/archive/2008/05/13/50934.aspx
2. http://hoons.kr/Board.aspx?Name=sivlerlighttip&Mode=2&BoardIdx= 19560&Key=Title&Value=MV
3. http://hoons.kr/Board.aspx?Name=sivlerlighttip&Mode=2&BoardIdx= 19561&Key=Title&Value=MV
4. http://hoons.kr/Lecture/LectureView.aspx?BoardIdx=18394&kind=43