[Silverlight 3][월간 Web. 2010.02] 실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
이 내용은 월간 Web에 2010년 02월호에 기고했던 내용 입니다!!
[바로가기]
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (1)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (2)
실전활용!! - Flickr API를 이용한 포토갤러리 만들기 (3)
지난 연재 내용을 통해서 비헤이비어(Behavior)에 대해서 간단히 알아 보았고, 예제를 통해서도 어느 정도 어떻게 사용되면 되는지 익혔을 것이다. 이는 실버라이트(Silverlight)를 처음 접하신 분들이라면 정말 편리한 친구이라는 것을 잘 실감할 수 없을 것 인데, 실버라이트2에서부터 계속 하셨던 분들이라면 정말 편이한 친구라는 것을 공감 할 수 있을 것이다.
이번 시간에는 실버라이트3를 이용해 간단한 나만의 포토 갤러리는 만들어 보고자 한다. 이 내용은 2010년을 맞이하여 처음으로 실버라이트를 배우고자 하는 열정적인 분들에게 도움이 되는 자료가 되지 않을까 싶다. 물론, 기존에 실버라이트를 이용해서 개발하고 계신 분들에게도 조금은 유익한 정보도 있지 않을까 하는 생각이 든다. 다들 실무에서 잘 사용하고 있는 MVVM + Command패턴 이야기도 해보려 하기 때문이다. 또한, 지난 시간에 배웠던 비헤이비어(Behavior)도 같이 복습하면서 적용할 것 이기 때문에 기존 실버라이트 개발자들에게도 조금은 도움이 되는 자료가 있지 않을까 싶다.
ㅁ MVVM & Command 패턴
- MVVM 패턴 ??
MVVM (Model-View-ViewModel)패턴은 MVC(Model-View-Controller)패턴과 비슷하다.
뷰(View)를 따로 두고, 뷰는 모델(Model)을 몰라도 되며, 모델 또한 뷰는 몰라도 된다. 뷰는 어디에도 종속적이지 않아야 하며, 모델 또한 그러하다. 뷰는 언제든지 변경이 가능하다는 것을 염두 해 두어야 하며, 그로 인해 Model이 영향을 주면 안 되기 때문이다. 이렇게 하면 좋은 점이 디자이너와 협업이 편리해 진다. 디자이너는 뷰만 신경 써서 이뿌게 디자인해서 결과물을 만들어 주면 되고, 개발자는 모델과 뷰모델(ViewModel)를 잘 관리해 주면 되기 때문이다. 나중에 개발자 또는 디자이너가 바인딩(Binding)만 잘 엮어 주면 정말 편리한 패턴이다. 또한, 유지보수하기가 편리해진다는 장점도 있다. 수정사항이 들어오면 디자이너는 뷰만, 개발자는 뷰모델만 확인해서 수정하면 될 것 이기 때문이다.
[그림 1] MVVM 패턴
위 그림을 보면 이해가 더 빠를 것 이다. 우리가 XAML를 만들면 코드 비하인드(Code-Behind)와함께 XAML이 생겨 날 것이다. 보통은 XAML파일에서 디자인을 하다고 객체에 x:Name을 주어 코드 비하인드에서 여러 가지 코드를 작성했을 것 이다. 이렇게 되면 차후에 새로운 디자인 수정 요청사항이 나오면, 새 XAML파일에서는 꼭 x:Name으로 명시 한 객체가 있어야 하며, 개발 코드 또한 복사해서 붙어 넣기 하거나, 객체 이름을 찾아서 다시 값을 세팅해 주어야 할 것이다. 하지만, MVVM에서의 View는 XAML과 Code-Behind를 하나의 뷰로 본다. 그리고 모델은 DB또는 XML에서 가지고 온 데이터모델(DataModel)을 의미한다. 아까 위에서도 말했듯, [그림 1]에서도 보듯 뷰와 모델은 독립적이어서, 서로 연관되어 있지 않다. 다만 중간에 뷰모델만 있을 뿐이다. 그렇다면 뷰모델은 어떤 일을 하는 녀석인지 알아 보자!!
뷰모델은 모델이 생성되거나, 변경 되었을 때 바인딩으로 엮여져 있는 뷰에게 값을 변경시켜주는 역할을 한다. 뷰모델과 뷰는 바인딩(Binding)식으로 데이터를 주고 받기 때문에 뷰 객체에 x:Name을 지정해 줄 필요가 없다. 그럼 뷰에서 이벤트처리는 어떻게 할 것 인지에 대한 고민이 생길 것 이다. 이 해결 방법은 MVVM패턴과 찰떡궁합인 커맨드(Command) 패턴으로 해결 할 수 있다.
- Command 패턴??
커맨드(Command)패턴이란 주로 애플리케이션(Application) 전역에서 동일하게 받을 수 있는 사용자의 제어 명령에 대한 이벤트를 효과적이고, 표준적으로 받기 위한 구현 방법이다. 커맨드패턴은 특히 MVVM처럼 뷰와 모델이 분리된 환경에서 매우 효과적으로 코드를 짤 수 있게 도와주는 역할을 한다. 또한, 커맨드패턴은 실버라이트 3에서 새롭게 등장한 비헤이비어와 만나 조금 더 쉽게 이용할 수 있게 되었다. 이는 휴즈플로우(HugeFlow)에서 오픈 소스로 올려놓은 HugeFlow.CommandPattern 어셈블리 파일(.dll)을 이용하면 된다. 물론 소스까지 공개되어 있으니 받아서 변경해도 된다.
그럼 이제부터 본격적으로 MVVM + Command 패턴, 비헤이비어를 이용해서 나만의 포토 갤러리를 만들어 볼 것인데, 코드 하나하나 다 설명하기에는 시간이 많이 걸리고 내용도 많아서 주요 내용만 알아보도록 할 것이다. 하지만, 필자가 만든 소스는 블로그를 통해 올려 놓을 것이니, 참고해서 만들어도 괜찮을 것이다.
우선 Flickr API 키를 발급 받도록 하자. 이 예제에서는 따로 DB나 서비스(Service)를 만들지 않고 Flickr API를 이용할 것이기 때문에 키 발급을 꼭 해야 한다.
