본문 바로가기

Blog/WYSIWYG Tool 개발

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

3.      열기(불러오기)

목적 : 파일 시스템 다이얼로그 창 또는 Drag & Drop 방식 등을 통해 불러올 데이터 파일의 경로를 알아낸다.

경우에 따라선 파일 시스템에 임시 저장소(폴더)를 만들고 데이터 복사본을 만들어 이 파일을 사용하는 편이 더 좋을 수도 있다. 아무래도 원본은 저장 명령을 실행했을 때에만 갱신해 주는 것이 여러 가지 Error에 대한 예외상황에 대한 대처 방법으로 원본을 복구할 수 있는 쉬운 방법을 제공해 주기 때문이다.

불러올 파일이 압축파일 형식으로 구성되어 있는 경우 (XML + Asset 폴더 압축 형태) 다음과 같은 처리 방식이 되겠다.

원본 파일 경로 확인 à 임시폴더 생성 à 임시 폴더에 원본 압축 풀기 à 작업(임시 폴더 내 파일 사용) à 저장 à Asset 폴더 정리 (사용 안된 파일, 새로 추가된 파일 가감) à XML + Asset 폴더 압축 à 원본파일 갱신

임시폴더는 주로 Application Data 폴더 (C:\Documents and Settings\All Users\Application Data) 에 프로그램 이름 또는 제작회사 이름 등의 임의의 이름으로 생성하여 사용한다.

위 과정은 여러 개의 이미지 파일을 불러들인 후 편집하는 목적의 Tool에서 이미지 추가 작업 과정과 거의 같다. 불러들일 원본 이미지의 경로를 파악 한 뒤 Asset 폴더에 카피하여 이 이미지 사본을 Tool에서 불러들여 사용하게 된다. 이때 주의할 점은 새로운 파일을 불러와 Asset 폴더에 추가 될 때 같은 이름의 파일이 이미 존재할 경우 이전 파일이 사라질 수도 있다는 점이다. 그래서 같은 파일인지 검사하는 것이 중요하고(중복파일을 없애고 용량을 줄이기 위함), 파일 이름을 유일한 ID로 바꿔서 관리하는 것이다. 좀 복잡한 과정일 수도 있으나 파일 관리를 위해 꼭 필요한 과정이다.

4.      새 데이터 생성 또는 데이터 불러오기

위 열기(불러오기) 과정을 파일 시스템의 관리 측면에서 봤다면 데이터 관점에서 분석해 보는 것도 중요할 것 같다.
원본 파일 경로를 알아내어 데이터(XML)를 생성하는 것부터 시작된다.

사본 XML 읽기 à XML 파싱 (의미 읽기) à 시각적 표현 객체 생성 및 속성 적용 à 최종 화면 업데이트

시각적 표현 객체 생성이란 데이터를 시각적으로 화면에 보여주는 객체를 생성하는 것이다. Flex에서는 결국 UIComponent 계열의 객체일 것이다. WYSIWYG 방식이 아니라면 Data Grid 에 출력해주는 정도겠지만 스킨 편집 Tool 같은 경우엔 불러들인 이미지도 로드해서 보여줘야 하고 텍스트도 표현해 줘야 하고… 등의 작업들을 해 주어야 한다. 이런 작업은 이전 단계에서 말한 파일 관리 방법을 염두에 두고 이루어 져야 한다. 또한 생성되는 즉시 화면에 나타나기 보다는 프로그래시브 바로 진행상태를 보여주고 생성 완료된 후 마지막에 한번 화면 업데이트 하는 편이 났다. 이 과정은 파싱에서 부터 시작해 파일 복사, 파일 로드 등의 작업이 한꺼번에 반복해서 이루어질 가능성이 높으므로 불필요한 작업은 하지 않는 편이 좋다.

객체 생성은 MVC 패턴에 따라 Command 호출로부터 시작된다. 아마 Add, Remove, Modify 등의 Command 가 필 수적으로 필요할 것이다. 이런 명령들은 데이터의 생성과 수정, 삭제와 밀접하게 연결되어 있기 때문에 파싱된 XML을 읽어들여 Command 호출 과정을 반복한 뒤 최종 화면이 업데이트 될 때 쯤이면 자연스럽게 읽어 들인 XML과 완벽하게 같은 (또는 편집에 필요한 데이터가 추가된 형태의) XML 데이터가 이미 만들어져 있을 것이다. 우리는 애초 읽어 들인 XML이 아니라 이렇게 생성된 XML 데이터를 사용하여 편집 내용을 기록하고 결과물을 만들어내는데 사용할 것이다. 중요한 것은 Command 호출을 통해 생성된 데이터가 읽어 들인 XML 데이터의 내용을 완벽하게 표현하고 있어야 한다는 점이다.

다시 정리하면 다음과 같다.

사본 XML 읽기 à XML 파싱 à Command 호출(주로 Add과정) à 새로운 데이터 생성 à Command, 데이터 생성 과정 반복 à 새로운 데이터 구성 완료 à 최종 화면 업데이트 à (필요에 따라 로드된 XML 파기)

전체적으로 MVC 패턴 적용할 때 History 적용과정이 포함된다면 불러오기 완료 후 History 가 초기화 될 수 있도록 조절 해주어야 하고, 시각 객체 생성시마다 화면 업데이트가 되는 것도 좋은 볼거리 일 수도 있으나 화면 업데이트를 나중으로 미루는 것도 생각해 볼 문제이다. 가장 중요한 건 불러오기 실행 후 생성된 XML 데이터가 파싱된 XML 데이터의 내용을 완벽하게 포함하고 있어야 한다는 점이다. 그렇지 않으면 이 설계는 실패한 것이다.