최고보다,최선을...

“선 개발 후 디자인”이란 포토라이트에서 사용될 기능들에 대해서 먼저 개발을 해두고, 나중에 디자인을 입히는 것이다. 이렇게 하면 개발자는 디자인을 고려한 개발을 해야 할 것이고, 디자이너는 사용자를 위한 디자인을 해야 할 것이다.

 포토라이트는 우리가 많이 듣던 MVVM + Command 패턴을 이용해서 만들었다. 이는 디자이너와의 협업에서도 정말 편했다. 간단하게 MVVM패턴에 대해 애기하자면, 모델(Model)과 뷰(View)를 독립적이게 놔두고, 그 사이에 뷰모델(ViewModel)를 두어서 View와 바인딩으로 엮어 두고, Command를 이용해서 해당 이벤트를 뷰모델에서 주고 받게 되는 형식이다. Command는 주로 어플리케이션 전역에서 동일하게 받을 수 있는 사용자 제어 명령에 대한 이벤트를 효과적이고, 표준적으로 받기 위한 구현 방법이다. 커맨드는 MVVM처럼 뷰 와 모델이 분리된 환경에서 매우 효과적으로 코드를 짤 수 있게 도와주는 역할을 한다. 여기서 기억할 것은 어플리케이션 전역에서 동일하게 받을 수 있다는 것을 잘 기억해 두길 바란다.

[디자인 입히기 전/후]

 위 그림에서 왼쪽은 디자인을 입히기 전의 모습이며, 오른쪽은 디자인을 입힌 모습니다. MVVM패턴으로 만드니깐 View를 변경하는 것도 정말 쉬웠다. 그냥 바인딩만 제대로 걸어두고 Command만 제대로 걸어 주기만 하면 되는 것이다. 그렇게 하니 30분도 안 되서 디자인을 입힐 수 있었다. 이러므로 디자이너와 협업이 편했다 할 수 있겠다.

위 그림에서 노트북으로 표시가 되어 있는 쪽이 클라이언트 PC라고 가정을 하자.

클라이언트는 포토라이트에 파일을 올리기 위해서, 자신이 보유하고 있는 사진을 선택을 할 것이다. 선택이 된 파일은 사용자가 업로드 액션을 주게 될 때, 각 파일 별로 WCF서비스를 호출을 하고, 선택된 파일을 넘겨주게 된다.

WCF서비스에서는 이 파일을 받아서, 파일서버의 해당 루트에 저장을 하게 되는데, 그냥 저장만 시키는 것이 아니라, 쎔네일(Thumbnail) 이미지와 딥줌(DeepZoom)파일들도 만들어 같은 루트 안에 저장을 한다. 이제 대략적으로 포토라이트에서는 어떻게 파일업로드가 되는지 살펴보았으니 이제 실제 구현 코드를 보면서 애기하도록 하겠다

위 그림은 포토라이트의 파일업로드 어플리케이션의 모습이며, 프로젝트 구성내용은 아래 그림과 같이 만들어 봤다.

코드를 보면 Commands를 상속받고 있는 것을 볼 수 있을 것이다. 이는

HugeFlow.CommandPattern.dll를 참조해야지만 상속받을 수 있으며, 이렇게 상속을 받으면 커맨드(Command) 생성을 할 수있게 된다. 필자는 FileChoice와 FileUpload 두개를 정적으로 생성해 두었다. FileChoice는 파일 선택을 클릭했을때의 커맨드이고, FileUpload는 파일 업로드 클릭했을때의 커맨드이다. 이제 이 커맨드들을 View에서 어떻게 엮어 주고 있는지 코드로 보도록 하겠다.

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

ImagePanelViewModel이라는 클래스는 ImagePanelView.xaml의 ViewModel이다. ImagePanelViewModel의 생성자에서 커맨드 이벤트를 생성해 주었다. 위에서도 말했듯 커맨드는 전역에서 사용되어 질수 있으므로 ViewModel에 이벤트를 엮을 수 있다. 이제 커맨드를 어떻게 사용해야 할지 감이 왔을 것이다. 그렇다고 커맨드를 너무 난발하지는 말자. 즉, 무조건 커맨드를 만들지 말자는 애기이다. 예를들면 View에서 Visibility를 Collapsed 또는 Visible 하는데 커맨드까지 만들지 말자는 애기다. 이런건 View에서 형태만 바끼는 것이기에 View쪽에서 처리하는게 좋다. 꼭 이점을 주의해서 커맨드를 사용하길 바란다.

 다음으로 파일업로드 코드를 살펴보도록 하자.

UploadFile메소드는 WCF서비스에 파일을 업로드하는 메소드이다. 코드를 보면 파일스트림을 읽어, 이를 쪼개서 서비스에 호출을 하고 있음을 알 수 있다. 서비스 호출후 Completed가 일어나면 에러가 없으면 다시 UploadFile메소드를 호출하여 아직 다올리지 않은 파일스트림이 있는지 체크후 다시 서비스를 호출한다. 이렇게 반복되서 파일업로드 진행바에 값을 계속해서 바꿔주게 되는 것 이다. FileUploadData클래스는 서비스에서 생성한 클래스로 업로드를 요청할 때 매개변수(Parameter) 사용이 된다. 즉, 이 클래스에 업로드파일 정보를 지정한후 SaveFileAsync를 호출하고 이 매개변수로 FileUploadData를 지정하면된다.

 이렇게 해서 간단하게 실버라이트에서 파일 업로드 관련 코드를 알아 보았다. 그럼 이제 WCF서비스에서 어떻게 처리하는지 알아 보도록 하자.

코드를 살펴보기 앞서 PhotoLight에서 어떻게 데이터를 주고 받는지, 간단하게 짚고 넘어가도록 하겠다. (아래 그림을 참고하자)

위 그림에서 보면 역시 마찬가지로 노트북이 있다. 이는 클라이언트 PC라고 생각하자. 이 PC 옆에는 키가 있는 것을 볼수 있을 것이다. 이는 데이터의 키라고 생각하면 되겠다. PhotoLight에서도 WCF서비스를 이용한다. 해당 키를 WCF서비스에 넘기면, WCF서비스는 DBServer에 데이터를 요청한후 해당 데이터를 실버라이트 어플리케이션에 보내주는 형식이다.

[ 포토라이트 프로젝트 구성 내용 ]

위 그림은 PhotoLight의 프로젝트 구성 모습이다. 파일업로드 프로젝트과 비슷한 구성임을 알수 있을 것이다.그럼 PhotoLight에서 주요 코드를 살펴 보도록 하겠다.

 먼저, ScriptManager클래스부터 보도록 하자. ScriptManager는 외부에서 스크립트(Script)함수를 통해 데이터 키를 넘겨 받게되면, ScriptManager에서는 데이터 키가 변경되었음을 알려주는 역할을 담당한다.

다들 아시겠지만 자바스크립트를 통해서 실버라이트 함수를 호출하기 위해서는

HtmlPage.RegisterScriptableObject 함수에 스크립트 가능한 액세스 기능을 위해 관리되는 개체를 등록을 하며, 스크립트에서 특정 함수에 접근하기 위해서는 ScriptableMember라는 어트리뷰트를 붙여주어야한다. PhotoLight에서는 PTKey라는 메소드를 스크립트에서 접근할수 있도록 지정해 주었는데 이는 키값이 바뀔때마다 PhotoKeyChanged라는 이벤트를 호출해 주게 되는 것 이다. 이 이벤트를 받는 쪽에서는 해당 키값으로 WCF서비스를 호출을 해서 데이터를 받아오게 된다.

-> [ WCF서비스 활용 Tip ]

 보통 WCF서비스에서 데이터클래스를 생성을하면 DataContract 어트리뷰트와 DataMember 어트리뷰트를 붙어서 사용했을 것이다. 이렇게 해야 직렬화(Serialization)가능해저, 실버라이트 어플리케이션에서 받을수 있기때문이며, 서비스 에러도 필할수 있기 때문 일거다. 그러나 .NET Framework3.5 SP1를 서버에 설치하면, DataContract등의 직렬화 관련 선언없이도 모든 C# Object를 Remoting Type으로 제공할 수 있다. 이는 .NET Framework3.5 SP1에 WCF관련해서 기능이 추가 되었기 때문이다.