MVC 패턴을 적용한 WYSIWYG 방식의 편집 Tool 개발[1/5]

포토샾이나 드림위버와 같은 WYSIWYG 방식의 Application (Tool) 제작을 위해 필요한 개발 패턴을 사용자가 Tool을 사용하여 실제 작업하는 흐름에 초점을 맞추어 분석해 본다.

디자인 툴의 일반적인 작업방식은 Tool의 목적과 특성에 따라 각각 다르겠지만 큰 틀에서 보자면 다음과 같은 공통된 task를 포함하고 있다.

<시작>
①     프로그램 시작
②     작업 환경 세팅단계 (새 문서)
③     새 데이터 생성 또는 데이터 불러오기

<반복 작업>
④     UI 구성 요소에 의한 추가, 제거, 수정 작업단계 : Command 발생
⑤     데이터 생성 및 수정 단계 : Model 수정
⑥     화면 업데이트 단계, : View 업데이트

<종료>
⑦     저장 단계 (데이터, Asset 파일 가공 후 저장)
⑧     컴파일 단계
⑨     닫기 또는 종료

간단하게 위에서는 <작업> 과정에만 MVC 패턴을 적용해 보았지만 사실은 사용자가 버튼이나 파일메뉴 클릭 등의 행위로 호출 수 있는 거의 모든 작업과정에 적용하는 것이 좋다. 그렇게 하면 후에 undo, redo 와 같은 History 기능등을 구현하기가 훨씬 수월해 지기 때문이다.

사용자에게 노출되는 (사용자의 행위로 인해 호출되는) 모든 명령은 다음 과정을 거치도록 하는 게 가장 중요하다.

사용자 이벤트 발생 (예: 버튼 클릭) à Command 호출 à 데이터 수정 à 수정된 데이터에 따라 화면 업데이트 à History에 등록

간단한 MVC 패턴 형식이다. History 에 등록하는 시점은 데이터 수정 직후일수도 있고 화면 업데이트 후일 수도 있다. 또한 History를 관리하는 방법도 그 시점의 데이터를 저장하는 방법, 아니면 호출된 명령에 대하여 그에 상응하는 역 변환 Method와 Parameter를 저장하는 방법 등 Tool의 성격과 스펙에 맞게 설계하면 되겠다. (Memento 패턴이나 State 패턴을 참조)