복잡한 Ajax (Asynchronous JavaScript and XML) 기반 클라이언트 개발에 있어, 그 개발편의성을 증대시키고 방대한 코드의 유지보수성을 개선하기 위해, 본 논문에서는 MVC (Model-View-Client) 프레임워크 기술을 변형한 CVC (Communicator-View-Controller) 아키텍처 패턴을 제안한다. 제안된 CVC 아키텍처 패턴은 Ajax 기반 클라이언트가 공통적으로 가지게 되는 데이터 추출을 위한 비동기 통신 관련 코드를 Communicator 영역으로 분류함으로써, 그래픽 디자인 영역에 해당하는 View와, View 계층에 효과적으로 데이터를 갱신하는 Controller 영역으로 개발 코드를 구분한다. 이와 같은 구분을 통해 Ajax 기반 클라이언트 개발의 방법을 서술적으로 개념화시킴으로써, Ajax 관련 코드를 효과적으로 모듈화 하여 재사용하고 그래픽 디자인을 독립적으로 처리할 수 있도록 하여 Ajax 기반 웹 응용의 개발생산성 및 유지보수성을 획기적으로 높일 수 있도록 하였다.
복잡한 Ajax (Asynchronous JavaScript and XML) 기반 클라이언트 개발에 있어, 그 개발편의성을 증대시키고 방대한 코드의 유지보수성을 개선하기 위해, 본 논문에서는 MVC (Model-View-Client) 프레임워크 기술을 변형한 CVC (Communicator-View-Controller) 아키텍처 패턴을 제안한다. 제안된 CVC 아키텍처 패턴은 Ajax 기반 클라이언트가 공통적으로 가지게 되는 데이터 추출을 위한 비동기 통신 관련 코드를 Communicator 영역으로 분류함으로써, 그래픽 디자인 영역에 해당하는 View와, View 계층에 효과적으로 데이터를 갱신하는 Controller 영역으로 개발 코드를 구분한다. 이와 같은 구분을 통해 Ajax 기반 클라이언트 개발의 방법을 서술적으로 개념화시킴으로써, Ajax 관련 코드를 효과적으로 모듈화 하여 재사용하고 그래픽 디자인을 독립적으로 처리할 수 있도록 하여 Ajax 기반 웹 응용의 개발생산성 및 유지보수성을 획기적으로 높일 수 있도록 하였다.
In order to achieve the ease of development and to facilitate the maintenance of codes for complex Ajax (Asynchronous Java Script and XML)-based web clients, this paper proposes a CVC (Communicator-View-Controller) architecture pattern by modifying the well-known MVC (Model-View-Controller) framewor...
In order to achieve the ease of development and to facilitate the maintenance of codes for complex Ajax (Asynchronous Java Script and XML)-based web clients, this paper proposes a CVC (Communicator-View-Controller) architecture pattern by modifying the well-known MVC (Model-View-Controller) framework. By composing the Communicator of codes for asynchronous data retrieval, which is common to Ajax-based clients, the proposed architecture pattern is able to cut out the graphic design related codes to constitute the View layer. Based on such declarative generalization of complex web-client codes, Ajax-related codes can be easily modularized and efficiently reused in development and maintenance stages, and graphics design can be done separately regardless of the other business logic related codes development, resulting in highly efficient development and maintenance of complex Ajax-based web clients.
In order to achieve the ease of development and to facilitate the maintenance of codes for complex Ajax (Asynchronous Java Script and XML)-based web clients, this paper proposes a CVC (Communicator-View-Controller) architecture pattern by modifying the well-known MVC (Model-View-Controller) framework. By composing the Communicator of codes for asynchronous data retrieval, which is common to Ajax-based clients, the proposed architecture pattern is able to cut out the graphic design related codes to constitute the View layer. Based on such declarative generalization of complex web-client codes, Ajax-related codes can be easily modularized and efficiently reused in development and maintenance stages, and graphics design can be done separately regardless of the other business logic related codes development, resulting in highly efficient development and maintenance of complex Ajax-based web clients.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
복잡한 Ajax 기반 클라이언트 개발에 있어, 그 개발 편의성을 증대시키고 방대한 코드의 유지 보수성을 개선하기 위해, 본 논문에서는 MVC 프레임워크 기술을 변형한 CVC (Communicator-View-Controller) 아키텍처 패턴을 제안한다. CVC 아키텍처는 Ajax 기반 클라이언트가 공통적으로 가지게 되는, 데이터 추출을 위한 비동기 통신 관련 코드를 Communicator 영역으로 분류함으로써, 그래픽 디자인 영역에 해당하는 View와, View 계층에 효과적으로 데이터를 갱신하는 Controller 영역으로 개발 코드를 분류한다.
본 논문에서는 복잡한 Ajax 기반 웹 응용 개발에서 나타나는 개발 생산성 및 유지 보수성의 저하라는 문제점을 해결하기 위해, MVC 패턴 기반의 CVC 아키텍처 패턴을 제안하였다. CVC 아키텍처는 Ajax 기반 클라이언트가 공통적으로 가지게 되는, 데이터 추출을 위한 비동기 통신 관련 코드를 Communicator 영역으로 분류함으로써, 그래픽 디자인 영역에 해당하는 View와, View 계층에 효과적으로 데이터를 갱신하는 Controller 영역으로 Ajax 기반 클라이언트 코드를 분류한다.
가설 설정
또한, HTML 코드 안에 포함되어있는 인라인 스크립트는 개발코드 1 라인으로 가정하였으며, 디자인 코드는 태그 내의 라인 수를 카운트 하였다.
제안 방법
13회로 약 32% 개선되었다. 13 회의 중복건수 중 대부분은 모듈별로 분리되면서 자연스럽게 중복을 제거 할 수도 있었지만 평가의 공정성을 위하여 수정하지 않고 중복횟수에 추가 하였다.
CVC패턴의 효용성을 증명하기위한 테스트 어플리케이션으로 본 논문에서는, 현행 Ajax 아키텍처 패턴 기반과 CVC 아키텍처 패턴 기반의「회원관리 시스템」을 각각 개발 하였다. 각 시스템은, 공정한 비교를 위해, 데이터접근을 위한 서버 모듈 외에 JSP나 ASP등의 서버 페이지 기술을 배재하고 순수 클라이언트 기술 (HTML, Javascript, Ajax등)만을 활용하여 개발하였다.
보편적으로 적용되는 기술이다. Yane 멀티에이전트 기반의 사용자 인터페이스 디자인에 MVC 모델을 적용하였는데⑫, 에이전트들의 세부 기능을 분류하여 Model과 Controller 영역으로 구분하고 그래픽 기능을 수행하는 에이전트를 View로 분류함으로써 멀티 에이전트 기반의 웹 응용 구현을 체계화 하였다. 하지만, 복잡한 사용자 인터페이스 코드 영역을, 일반적인 서버-클라이언트 기반의 MVC 모델에서와 같이, 단순히 View 영역으로 구분함으로써 개발 편의성과 유지보수성을 개선하는데 제한적일 뿐 아니라, 다소 범용 적이지 못한 에이전트 기반의 사용자 인터페이스 구현에만 제한적으로 사용될 수 있는 기술이어서 Ajax 기반 웹 응용에 적용이 불가능하다.
각각 개발 하였다. 각 시스템은, 공정한 비교를 위해, 데이터접근을 위한 서버 모듈 외에 JSP나 ASP등의 서버 페이지 기술을 배재하고 순수 클라이언트 기술 (HTML, Javascript, Ajax등)만을 활용하여 개발하였다.
결과이다. 소스코드의 중복성은 기 개발된 코드의 유지 보수 시 그 편의성을 제공하는데 매우 중요한 요소 중 하나이며, 본 논문에서는 전체 어플리케이션 소스 중 1개의 함수 안에 소스코드가 5라인 이상 중복된 건수만을 측정하였다. 소스코드가 중복되는 경우는 보통 여러페이지에 같은 함수가 똑같이 존재하는 경우나 서버와 통신하기 위한 Ajax 관련 구현체 들이다 다음은 실제 중복된 건수 1건에 대한 예시이다
제안 아키텍처의 효용성을 증명하기 위해, 본 논문에서는 Ajax 기반 회원관리 시스템을 구현하였는데, 구현된 시스템은 로그인 (인증), 회원관리 (게시판형식의 CRUD5)), 회원통계 (레포트)등 웹페이지의 대표적인 필수 요소들을 모두 포함하고 있다. 이러한 회원 관리 시스템의 구현에 제안한 CVC 아키텍처 패턴을 적용한 결과 디자인코드 내 개발코드의 비율 및 소스 코드의 중복도와 모듈의 재사용도, 소스파일의 크기 등에 있어 매우 큰 개선효과를 얻을 수 있었는데, 우선 디자인코드 내 개발코드의 비율이 기존 디자인페이지 (HTML)의 경우 67.
제안된 CVC 패턴의 View영역의 구현을 위한 디자인 코드와 개발자 코드의 구분도를 측정하기 위해, LOC결과의 산출에서와 마찬가지로 공백 줄과 주석을 제외한 후, 태그 안에 스타일시트를 로드하기 위한 니ink>태그를 디자인코드로 정의하고, 자바스크립트를 로드하고 개발하기 위한 태그를 개발 코드로 정의하였다.
한편, Stocklein 등은 차세대 사용자 인터페이스의 개발을 위해 MVC 모델을 확장하여 새로운 아키텍처 패턴을 제안하였다 1”]. 제안된 아키텍처는 차세대 사용자 인터페이스의 주요 요소인 다양한 센서 입력을 처리하기 위해 기존의 MVC 모델에 E (Environment) 차원을 도입한 MVCE 아키텍처로 사용자 인터페이스 응용이 요구하는 센서 정보와 실제 센서에서 발생시키는 정보량의 차이를 효과적으로 처리함으로써 가상현실 또는 복합현실을 기반으로 하는 차세대 사용자 인터페이스의 구현에 효과적인 프레임워크를 제공하였다. 하지만, 이 아키텍처 역시 Ajax를 기반으로 흐} 는복잡한 범용 웹 응용의 사용자 인터페이스 (또는 클라이언트) 구현에 효과적으로 적용할 수 없다.
위한 아키텍처 패턴을 정의 한다. 패턴의 명칭은 Communicator-View-Controller 의 약자인 CVC 패턴으로 명명하였고 표 [의 개선 방안이 효과적으로 수행될 수 있도록 구조화 하였다.
통해 전송하도록 하였다. 현행 Ajax 아키텍처를 사용하여 구현된 회원관리 시스템과 CVC 패턴을 기반으로 한 회원관리 시스템 모두 하나의 서버 측 어플리케이션으로 연계되도록 구성하였다.
대상 데이터
개발의 표준화와 생산성을 위해 최신 Javascript Library 중하나인 jQuery3)를 사용하여 Ajax를 구현하고 D0M을 컨트롤 하였으며, 회원통계의 차트를 표현하기 위해 jQuery기반의 Bar 차트 라이브러리4)를 사용하였다. 또한, 유틸리티성격의 함수와 차트를 표 설정 값은 자바스크립트 파일로 따로 작성하여 사용하였는데, 표 3에 작성된 파일과 사용된 라이브러리 및 구현된 기능에 대산 설명을 나타내었다.
이론/모형
그림 4에 도시된 바와 같이 View 영역은 비즈니스로직으로부터 완전히 분리 되어 있으므로, 다른 영역의 개발과 독립적 개발이 가능하게 되고 이를 통해 개발 생산성 및 유지 보수성을 크게 증대시킬 수 있다. 이러한 View영역의 완전한 독립을 위해 본 논문에서는 MVC 패턴에서 Passive ModeP)방식을 적용하여 Model영역에서 View 영역을 직접 제어 하지 못하도록 한다.
성능/효과
중복도가. 낮아지고 모듈-간 독립성이 보장되어 모듈의 재사 용도가 61% 이상 개선되었음을 확인할 수 있었는데, 이러한 결과는 소스코드의 중복도가 최소화됨으로써 소스 코드가 단순해지고 가독성이 좋아져 유지 보수성이 증가되고 모듈을 재■사용함으로써 개발시간을 단죽시켜 개발생산성 향상에 큰 도움을 주게 된다. 마지막으로 LOC 와 소스파일의 크기의 비교 측정에서는, 소스코드자체가 jQuery에 의해 많이 최적화 되어 있어 최적화된 소스에서는 차이가 작게 나온다는 LOC 측정의 특성을 감안하더라^, 22% 내외의 높은 개선 효과가 나타났는데, 이러한 LOC의 개선효과는 개발하는 응용의 크기가 커질수록 더욱 커질 수 있어 제안아키텍처를 통한 개발 생산성의 매우 높은 향상을 의미한다 할 수 있다
js와 기타 필수 라이브러리를 로드하기 위한 구문일 뿐 실제 비즈니스 로직은 아니다. 따라서 본 논문에서 제안하는 아키텍처 패턴을 적용함으로써 디자인 페이지 내 개발 코드가 실제로 100% 제거 되었다고 볼 수 있으며, 이로써 UI컴포넌트의 위치나 색상 등이 바뀌어도 해당 컴포넌트가 존재하고 속성만 바뀌지 않는다면 개발코드와는 별개로 처리될 수 있어 매우 높은 개발 생산성과 유지보수성 향상을 얻을 수 있다
낮아지고 모듈-간 독립성이 보장되어 모듈의 재사 용도가 61% 이상 개선되었음을 확인할 수 있었는데, 이러한 결과는 소스코드의 중복도가 최소화됨으로써 소스 코드가 단순해지고 가독성이 좋아져 유지 보수성이 증가되고 모듈을 재■사용함으로써 개발시간을 단죽시켜 개발생산성 향상에 큰 도움을 주게 된다. 마지막으로 LOC 와 소스파일의 크기의 비교 측정에서는, 소스코드자체가 jQuery에 의해 많이 최적화 되어 있어 최적화된 소스에서는 차이가 작게 나온다는 LOC 측정의 특성을 감안하더라^, 22% 내외의 높은 개선 효과가 나타났는데, 이러한 LOC의 개선효과는 개발하는 응용의 크기가 커질수록 더욱 커질 수 있어 제안아키텍처를 통한 개발 생산성의 매우 높은 향상을 의미한다 할 수 있다
본 논문에서 제안한 CVC 아키텍처 패턴은 고급 사용자 경험을 제공하는 복잡한 Ajax 기반 클라이언트 개발의 방법을 서술적으로 개념화시킴으로써, Ajax 관련 코드를 효과적으로 모듈화 하여 재사용하고 그래픽 디자인을 독립적으로 처리할 수 있도록 하여 Ajax 기반 웹 응용의 개발생산성 및 유지보수성을 획기적으로 높일 수 있도록 하였다. 이러한 CVC 아키텍처는 순수 표준 기술만으로 구현이 가능한 패턴이므로 기존 HTML의 한계로 인한 서버기술에 대한 개발 종속성을 벗어날 수 있는 기술이다.
필수 요소들을 모두 포함하고 있다. 이러한 회원 관리 시스템의 구현에 제안한 CVC 아키텍처 패턴을 적용한 결과 디자인코드 내 개발코드의 비율 및 소스 코드의 중복도와 모듈의 재사용도, 소스파일의 크기 등에 있어 매우 큰 개선효과를 얻을 수 있었는데, 우선 디자인코드 내 개발코드의 비율이 기존 디자인페이지 (HTML)의 경우 67.2%를 차지하던 것이 7.8% 로 감소하는 것을 확인할 수 있었다. 여기서, 이 7.
CVC 아키텍처는 Ajax 기반 클라이언트가 공통적으로 가지게 되는, 데이터 추출을 위한 비동기 통신 관련 코드를 Communicator 영역으로 분류함으로써, 그래픽 디자인 영역에 해당하는 View와, View 계층에 효과적으로 데이터를 갱신하는 Controller 영역으로 개발 코드를 분류한다. 이와 같은 구분을 통해, Ajax 기반 클라이언트 개발의 밥법을 서술적으로 개념화시킴으로써, Ajax 관련 코드를 효과적으로 모듈화 하여 재사용하고 그래픽 디자인을 독립적으로 처리할 수 있도록 하여 Ajax 기반 웹 응용의 개발생산성 및 유지보수성을 획기적으로 높일 수 있도록 하였다.
평가의 공정성을 위해, 현행 Ajax 아키텍처에서 CVC 아키텍처로 변경 시 중복되는 기능에 대한 추가, 수정, 삭제 작업 없이 본 논문에서 제안하는 방식으로 구조만을 변경하였음에도 LOC는 22.91 %가 줄었고, 소스코드의 파일크기는 21.71 %가 줄었다. 이는 제안아키텍처 패턴의 적용을 통해 개발 생산성 및 유지 보수성이 크게 높아질 수 있음을 의미한다.
표 5의 결과를 보면, CVC 패턴을 적용하여 시스템을 개발함으로써 모듈의 재사용도가 61% 이상 개선됨을 알 수 있는데, 이는 현행 Ajax기반 클라이언트 개발에서는 서버통신 모듈과, 비즈니스로직, UI 컨트롤 로직 등이 모두 섞여있어 어플리케이션 모듈의 재사 용도가 떨어지는 반면, 본 논문에서 제안하는 CVC 패턴을 사용하는 경우에는 각 기능별로 로직이 나뉘어져 있어 모듈의 재사용이 매우 용이하기 때문이다.
표 7에서 볼 수 있듯이, 본 논문에서 제안하는 CVC 패턴을 적용함으로써 소스코드의 중복도가 19 회에서 13회로 약 32% 개선되었다. 13 회의 중복건수 중 대부분은 모듈별로 분리되면서 자연스럽게 중복을 제거 할 수도 있었지만 평가의 공정성을 위하여 수정하지 않고 중복횟수에 추가 하였다.
후속연구
개선방안을 정리한 것이다. 기존 J2EE기반의 웹 응용 개발에서 Model 1 아키텍처의 단점을 개선하기 위해 MVC 패턴 기반의 Model2 아키텍처 패턴四을 적용 했던 사례를 상기하여, Model 1 아키텍처에서의 문제점들과 매우 유사한 Ajax 기반 웹 응용의 문제점들도 기본적으로 MVC 패턴의 기본 정신을 적용함으로써 상당부분 해결 할 수 있을 것으로 기대된다.
이러한 CVC 아키텍처는 순수 표준 기술만으로 구현이 가능한 패턴이므로 기존 HTML의 한계로 인한 서버기술에 대한 개발 종속성을 벗어날 수 있는 기술이다. 하지만 이를 보다 전문적으로 활용하기 위해서는 제안 CVC 패턴에 최적화된 아키텍처 프레임워크가 구현되어야 할 필요가 있으며, 웹 UI의 여러 요소들이 모두 포함된 아키텍처 프레임워크의 제공이 본 논문의 기술을 상용화하기 위한 향후 연구 방향^라 할 수 있다.
참고문헌 (15)
이성혜, "UI는 보여지는 것만을 위한 작업이다?," 마이크로소프트웨어, p.33, 7월 2003년.
Wikipedia, "Ajax (programming)," May 2011 [Online]. Available: http://en.wikipedia.org/wiki/Ajax
James Y. Xu, "Integrating REST and Ajax into Model-View Controller - A web based billing system case study using Python," IEEE IT Professional, issue 99, p.1, 2010.
K. Samkari and A. Joukhadar, "Comparison matrix for web HCI", in Proc. of Int. Conf. on ICT, 2008, pp.1-5.
X. Liu, L. Liao, Y. Duan, and B. Yang, "Email information integration with SSO in portal serviced based on Ajax," in Proc. of Int. Conf. on CASM, 2010, pp.544-548.
H. Yang, J. Shi, and X. Zhang, "The update version development of 'Wiki Message Linking' system - Integrated Ajax with MVC model," in Proc. of Int. Forum on CSTA, Dec. 2009, pp.209-212.
H. Song, M. Zhang, and Z. Xu, "Design and implementation of online stock trading system," in Proc. of Int. Conf. on CISE, Dec. 2009, pp.1-4.
H. Wang, Q. Zhu, J. Shen, and S. Cao, "Web-service-based design for rural industry by the local e-government," in Proc. of Int. Conf. MINS, Nov. 2010, pp.230-235.
Z. Wang, Z. Liu, and Y. Yang, "Design and implementation of flexible e-government platform based on XML data-bus and lightweight MVC execution framework ASSH," in Proc. of Int. Conf. on CASM, Oct. 2010, pp.422-427.
Wikipedia, "Model-view-controller," May 2011 [Online]. Available: http://en.wikipedia.org/wiki/
A. Goldberg, "Smalltalk80: The interactive programming environment", Addison-Wesley Publ., 19894.
Li Yan, "Intelligent multi-agent user interface design," in Proc. of IEEE Int. Forum on ITA, 2009, pp.496-498.
J. Stocklein, C. Geiger, V. Paelke, and P. Pogscheba, "Poster: MVCE - A design pattern to guide the development of next generation user interfaces," in Proc. of IEEE Sympo. on 3D User Interfaces, 2009, pp.153-154.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.