MVC패턴을 이용한 다중메뉴 선택
제목이 거창 한데 쉽게 설명하면 한 이벤트를 통해 하나 이상의 메뉴가 이 이벤트에 반응 하는 것을 말한다. 사이트를 제작하다보면 주메뉴에 보조메뉴가 같이 있는 경우들이 있다. 이 같은 경우 어떤 메뉴를 선택하든 두 메뉴에 같은 결과가 전달 되어야 한다. 예를 들자면 주메뉴에서 첫번째 메뉴가 활성되면 보조메뉴의 첫번째 메뉴도 자동으로 활성화 되어야 하는 것을 말한다. 아래의 예제 플래시를 보면 쉽게 이해 할 수 있다.
위의 예제는 크게 3부분으로 이루어져 있다. 중간메뉴와, 하단메뉴 그리고 중앙의 박스이다. 하단메뉴를 클릭하면 쓰여있는 숫자만큼 가운데 박스가 회전한다. 중간메뉴는 화살표 방향으로 메뉴가 이동된다. 여기서 이슈는 어떤 메뉴의 버튼을 클릭한다. 두 메뉴 모두에 동일하게 동작해야 한다는 것이다. 이 점을 해결 하기 위해서 MVC패턴을 이용해 보았다. 사실 이 문제만에 촛점을 맞힌 패턴이라면 Observer패턴이라고 불러야 하겠지만 MVC패턴이 Observer패턴을 포용하고 있고 MVC패턴을 이해하기 위한 예제이므로 MVC패턴이라고 명명하겠다.
그림1은 본 예제의 Design Model 메인다이어그램이다. 데이터를 필요로 하는 부분이 없으므로 model 부분에는 어떤 클래스도 없다. 3개의 Midiator 와 2개의 Command가 있다. StageMediator 는 나머지 2개의 Mediator 를 등록한다. CardMediator 는 가운데 박스를 만든다. MenuMediator 는 MiddleMenu, BottomMenu를 포함한다.
MenuMediator를 만들면서 각 메뉴마다 Mediator를 만들어야 할지 하나의 Mediator 에 2 메뉴를 넣어야 할지 상당히 고민했다. 일단 결론은 같은 종류의 UI라면 하나의 Mediator 에 등록하는게 더 나을 것 같다. 의도적인 것은 아니었으나 하나의 Mediator 에 등록하려다 보니 메뉴 자체를 좀더 OOP적으로 만들 수 있었다. 즉 Menu, IMenu 를 통해서 메뉴를 추상화 하고 재사용 가능하게 만들었다.
또 Notification 을 CardMeditor 가 수신할지 따로 Command를 둘지도 매우 고민 스러웠는데 사실 아직까지도 어떤게 더 나은지 맞는 것인지는 모르겠다. 이 예제에서는 control 영역을 사용하기 위해서 SelectCommand 를 따로 두었다. SUB_SELECT 이벤트가 발생하면 자동적으로 SelectCommand 가 CardMeditor 의 rotateCard를 호출한다.
그림2
MVC패턴 디자인은 입문하기가 생각보다 쉽지 않았다. 다만 지금까지 몇건의 작업을 MVC패턴을 이용하면서 확실히 디자인패턴의 유용성을 느낄 수 있었다. 첫번째로 클래스들을 임무별로 확실하게 구분 할 수 있으며 통지를 이용해 언제든지 어디에나 이벤트를 줄 수 있다.
또 처음 사용해보는 프레임웍인 pureMVC 또한 매우 괜잖은 것 같다. Java 나 다른 언어처럼 플래시에서 프레임웍이 대중적이지 않다는 것을 감안한다면 pureMVC는 매우 고무적인 것 같다.
PureMVC – 디자인패턴 이용하기
wikipedia 에서 PureMVC를 검색해보면 PureMVC란 Model, View 그리고 Controller 컨셉을 기반으로 어플리케이션을 만들때 사용하는 가벼운 프레임워크 라고 설명하고 있다. 짧게 말해서 MVC 디자인패턴을 사용하는 프레임웤 이다.
뭐든 처음 공부할때는 사용되는 단어들의 의미를 정확하게 파악하는게 중요한데 디자인패턴이나 프레임웤 모두 쉽게 이해하고 설명하기 힘든 단어들이라 시작부터 고난의 연속이다.
일전에 쌍용자동차 SUV 통합사이트를 제작하면서 처음으로 여러명의 작업자가 병렬적으로 작업을 했으며 이때 도입했던게 SVN 이다. SVN은 사실 개발툴이 아니라 버전관리툴이므로 적당하게 사용해주면 되었다. 아직 모든 기능을 정확하게 파악하지는 못해서 조금의 불편함은 있지만 동시에 여러명이 파일을 관리하는데는 많은 이점이 있었다. SVN 에 대해서는 나중에 좀 더 이야기 해 보겠다.
다시 돌어와서 쌍용자동차의 경우 우선은 함께 만들어보자는 취지가 강해서 클래스화 된 몇개의 파일을 제외하고는 거의 재사용도 불가능하게 되었다. 이미 No!OOP 가 되어버렸다. 물론 그 경험을 통해서 많은 것을 얻을 수 있었지만 그 중에 가장 갈급했던 부분이다. 디자인패턴이였다.
당시 어설프게 만들어 봤던 UML
당시 메인로직을 담당한 본인은 여러명이 만들어 준 클래스들을 적절하게 분해, 조합, 연결 하는 것이 상당히 힘들었는데 이러한 어려운 부분을 PureMVC가 해소 해 줄 수 있을것으로 기대한다. 사실 MVC패턴이란 결국 방법론이므로 처음부터 MVC패턴에 맞게 개발 할 수도 있겠지만 이와 같은 프레임웤이 있다면 더욱 빠르고 쉽게 개발이 가능 할 것 같다.
여러 프레임웤이 있지만 PureMVC를 선택한 것은 일단 작명이 너무 맘에 들었다. 역시 모든지 순수한게 좋다. 이것저것 옵션이 붙다보면 항상 문제가 발생하기 나름이다. Simple is Power! 란 말도 있지 않은가 또한 디자인패턴을 정확하게 이해하지 못하는 이들(본인 포함)에게 MVC패턴이 기본을 알려 줄 것만 같았다. 또한 다른 프레임웤과 다르게 여러 언어들을 지원한다는 점도 매력적이었다. 이왕 할거라면 한번에 여러 언어까지 섭렵 하는 게 더 이득이니까.
[관련 사이트]
PureMVC - http://www.puremvc.org/
PureMVC Tutorial - http://www.actionscriptdeveloper.co.uk/puremvc-tutorial-flex-puremvc-jabber-and-xiff-3-introduction/
10 Tips - http://www.websector.de/blog/2007/12/25/10-tips-for-working-with-puremvc/
