RIA기반의 웹 콘텐츠 관리에 관한 설계 및 구현
서준오*․김철원**
Design and Implementation of Web Contents Management System based on RIA
Jun-Oh Seo
*ㆍChul-Won Kim
**요 약
본 논문은 RIA 기술 중 하나인 어도비 플렉스 프레임워크를 기반으로 하는 CMS를 설계·구현 한다. 플렉스는 기존 HTML+CSS+Javascript 등으로 이루어진 마크업 언어 위에 다양한 시각적 컴포넌트를 쉽게 추가 할 수 있 어 보다 역동적인 웹사이트를 구현할 수 있게 해준다. HTTP요청 처리는 MVC기반의 스프링 프레임워크를 사 용한다. 스프링 프레임워크는 자바 플랫폼을 위한 오픈소스 프레임워크로 동적인 웹 사이트를 개발하기 위한 여 러 가지 서비스를 제공하고 있으며, 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표 준프레임워크의 기반 기술로 쓰이고 있다. 갈수록 방대해져 가는 웹 콘텐츠들을 보다 효율적으로 생산·관리하는 방법을 제시한다.
ABSTRACT
In this paper, design and implementation of RIA(: Rich Internet Application) technology, a CMS based on either of the Adobe Flex framework. Flex existing HTML + CSS + Javascript, etc. it can be easily added to a variety of visual components on a markup language consisting allow you to implement a more dynamic website. The HTTP request is processed using the Spring Framework of MVC based. Spring Framework provides a number of services for the development of a dynamic website to open source framework for the Java platform. It is being used as a standard-based technology for e-government framework used to develop recommendations and Republic of Korea during the Web service public institutions. Extensive production becomes increasingly thin web can be more efficiently managed, and will provide convenience to the user.
키워드
CMS, Flex, Spring Framework, User Experience 웹 콘텐츠관리, 플렉스, 스프링 프레임워크, 사용자 경험
* 호남대학교 컴퓨터공학과([email protected])
** 교신저자 : 호남대학교 컴퓨터공학과 ㆍ접 수 일 : 2015. 09. 01
ㆍ수정완료일 : 2015. 10. 13 ㆍ게재확정일 : 2015. 10. 23
ㆍReceived : Sep. 01, 2015, Revised : Oct. 13, 2015, Accepted : Oct. 23, 2015 ㆍCorresponding Author : Chul-Won Kim
Dept. of Computer Engineering, Honam University, Email : [email protected]
Ⅰ. 서 론
오늘날 우리주변의 학교, 은행, 병원, 관공서, 직장 등 인터넷 없이는 어떠한 일도 하지 못하는 시대에 직면해 있고 하루에도 엄청난 데이터와 콘텐츠들이
만들어지고 있다. 특히, 인터넷 기술의 발전은 우리나
라 사회 구조에도 엄청난 변화를 불러 일으켰다. 인터
넷을 이용해 쇼핑을 하고 각종 민원업무를 처리하며
멀리 있는 친구와 연락을 주고받는다. 이런 변화의 중
심에는 웹 어플리케이션 기술이 있다. 5년, 10년 전만
해도 최신영화를 보려면 길게는 30분 이상 줄을 서서 표를 끊어야 하는 시절이 있었다. 하지만 지금은 영 화 예매사이트에 접속해 관람 할 영화를 선택하고 시 간을 선택한다, 그리고 원하는 자리를 선택하고 신용 카드나 인터넷뱅킹을 통해 요금을 지불한다. 이렇게 웹 어플리케이션의 발전은 우리 생활을 보다 풍요롭 고 편리하게 해준다. 본 논문은 보여주기만 하는 단방 향 웹에서 벗어나, 풍부한(Rich) 콘텐츠를 통해 커뮤 니케이션과 인터랙션이 일어날 수 있는 어플리케이션 을 의미하는 RIA(: Rich Internet Application) 기술을 연구한다. RIA기술을 CMS(: Contents Management System) 와 접목시켜 홈페이지에서 필요로 하는 모든 웹 콘텐츠들을 보다 효율적으로 관리 할 수 있는 시 스템을 구현하였다.
Ⅱ. 관련연구
2.1 RIA의 개념 및 정의
RIA 이라는 용어는 2002년 매크로미디어(2005년 어도비 시스템즈에 합병)의 2002년 3월 플래시 MX 제품 백서에 처음 등장했다. 흔히 리치 인터넷 애플리 케이션 개념의 효시로 포레스터 리서치의 CEO인 조 지 콜로니(George Colony)가 2000년 10월 "My View:
X Internet"이라는 단문에 언급한 "X 인터넷"이라는 개념을 꼽기도 한다[1]. RIA는 사용자로 하여금 업무 를 보면서 즐길 수 있게 해준다. 동료들과 손쉽게 협 업을 하면서 도중에 흐름이 끊기지 않고 사용자가 흥 미를 가지고 현재 작업에 집중할 수 있게 한다. RIA 라는 개념은 전통적인 웹의 정적인 시각에 역동성을 불어넣었고 사용자가 원하는 대로 콘텐츠를 구성 할 수 있게 했다. 그리고 웹 브라우저의 한계를 넘어서 데스크톱 애플리케이션에서 기대했던 경험을 사용자 에게 전해준다. 결론적으로 리치 인터넷 애플리케이션 은 멋지게 보이는 것뿐만 아니라, 사용자를 만족시키 고 생산성을 향상시킬 수 있는 것이다[1-2].
또한 웹 애플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인 늦은 응답 속 도, 데스크톱 애플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭이다. 즉, 별도의 설 치가 필요 없는 웹 브라우저 기반의 애플리케이션 배
포 장점과 서버 측 웹 서비스와의 연동, 마크업 언어 기반의 선언적 애플리케이션 구성 등은 유지하면서 데스크톱 애플리케이션과 대등한 사용자 경험을 주는 것을 목표로 하는 기술이다[3],[5].
2.2 플렉스 프레임워크
플렉스 프레임워크의 핵심 중 하나는 리치 인터넷 애플리케이션을 빠르게 개발하고 배포할 수 있는 다 양한 시각적 컴포넌트다. 사용자가 애플리케이션을 사 용할 때 가장 먼저 만나고 다루게 되는 부분이기 때 문에 눈에 보이는 컴포넌트의 특성뿐 아니라 제약사 항을 잘 이해해야 한다. 경우에 따라서는 사용자의 요 구에 맞춰 기존 코드를 완전히 바꿔야 한다. 플렉스 프레임워크의 강력한 기능 중 하나는 동적인 레이아 웃을 만들어낼 수 있다는 점이다. 플렉스 애플리케이 션의 시각적인 구조는 콘텐츠를 보고 직관적으로 작 업을 하는데 적합하다. 컴포넌트는 작업의 흐름에 따 라 동적으로 속성을 바꿔 사용자를 안내해주고 레이 아웃을 적절하게 변화시키며 알맞은 콘텐츠를 보여준 다[6].
또한 다양한 시각적 컴포넌트들로 완벽하게 동작하 는 애플리케이션을 만들어낼 수 있다. 컴포넌트는 컨 테이너 내에서 레이아웃과 컨트롤의 모습으로 표현된 다. 이를 바탕으로 상대적으로 빠른 프로토타입을 만 들어 내거나 출시를 앞둔 시제품에 적용할 수 있다.
플렉스 컴포넌트는 필요에 따라 수정하거나 확장할
수 있다. 개발시간과 노력만 더해진다면 이러한 컴포
넌트는 완벽한 부품으로 재사용할 수 있다. 예를 들
어, 사용자 인터페이스 컴포넌트의 오픈소스 라이브러
리인 FlexLib의 경우를 보면 기본 컴포넌트인 탭 내
비게이터(Tab Navigator)를 확장해 추가적인 기능을
하게 만들었다[7].
그림 1. 플렉스 기본 내비게이터 컴포넌트 화면 Fig. 1 Flex navigator component view
그림 1 과 같이 기능적인 부분뿐만 아니라 플렉스 프레임워크 내에서 시각적 컴포넌트에 상세한 디자인 을 적용할 수 있다. 커서나 색상을 선택하는 컴포넌트 등을 다양하게 디자인할 수 있다. 시각적인 속성을 변 경하거나 외부에서 파일이나 글꼴을 삽입해서 프로그 램 적으로 시각적인 요소를 그려낼 수 있다.
또 플래시나 파이어웍스, 포토샵, 일러스트레이터 등 어도비 CS애플리케이션과의 연동을 통해 좀 더 섬 세한 디자인을 할 수 있다. 궁극적으로, 시각적인 변 화는 애플리케이션을 좀 더 기억에 남게 해줄 수 있 다. 좀 더 공을 들인다면 눈에 띄는 애플리케이션을 만들어 낼 수도 있다. 플렉스에서는 페이지를 다시 불 러오거나 정적인 콘텐츠를 동적으로 로딩 할 수 있으 며, 자연스러운 화면 전환이 가능하다. 레이아웃은 부 드럽게 전환해야 하고 시각적인 속성은 사용자의 반 응에 따라 우아하게 변한다. 그리고 모든 화면 구성은 사용자가 원하는 콘텐츠에 다가갈 수 있는 수단이 된 다[6],[8-9].
2.3 플렉스 애플리케이션 개발
플렉스에서는 리치 인터넷 애플리케이션을 구성하 기 위한 다양한 기능이 정의된, XML 기반의 마크업 언어인 MXML을 제공하고 있다. UI와 데이터 기반, 시각적 효과에 이르기까지 MXML로 만든 모든 것은 컴파일 시에 액션스크립트로 전환된다. MXML에서 button은 액션스크립트 Button 클래스의 인스턴스를 나타낸다. 파라미터를 포함한 클래스의 초기화가 마크 업 태그 형태로 정의된 것이다. 그리고 액션 스크립트
로 만든 모든 클래스는 MXML에서 사용할 수 있다.
플렉스 애플리케이션에서 MXML을 사용하면 레이아 웃과 애플리케이션의 기타 요소를 묶는 지루한 작업 들이 간단해진다. 따라서 MXML은 빠른 프로토타입 개발이나 반복적인 애플리케이션 개발에 적합하다.
텍스트 편집기와 플렉스 프레임워크, MXML 컴파일 러(MXMLC)를 포함한 플렉스 SDK(: Software Development Kit)만 있으면 비용을 들이지 않고도 플 렉스 애플리케이션을 개발할 수 있다. 하지만 실제 개 발환경에서는 그다지 실용적인 방법이 아니다. 어도 비에서는 독립적으로 실행할 수 있는 이클립스 플랫 폼 기반의 플렉스 빌더(Flex Builder)를 제공하고 있 다. 또한 이클립스 IDE 사용자를 위한 플러그인도 제 공한다. 두 가지 모두 기능적으로 동일하며 윈도우와 맥 OS X, 리눅스에서 모두 동작한다[3].
그림 2 와 같이 플렉스 애플리케이션은 플래시 플 레이어를 통해 브라우저 위에서 동작할 수 있는 SWF 파일로 배포된다. 플렉스 애플리케이션이 전체 웹페이 지를 담당할 수도 있고 HTML 콘텐츠와 함께 보여 질수도 있다. 브라우저 뿐 아니라 데스크톱 에서도 동 일한 코드를 사용할 수 있다[7].
그림 2. 플렉스 프레임워크 구조도 Fig. 2 Flex framework configuration
Ⅲ. 시스템 구조 및 설계
3.1 설계 개요
CMS는 텍스트나 이미지 등의 디지털 콘텐츠를 통
합적으로 관리, 배포하는 처리 시스템의 총칭이다. 웹
사이트, 포털 사이트의 구축·관리에 자주 사용한다. 웹 페이지를 작성해 운용하려면, HTML 파일이나 그것 을 보존하는 디렉토리에 대한 지식이 필요했다. 콘텐 츠 매니지먼트 시스템에서는 기술적인 지식이 없어도, 텍스트나 이미지 등의「콘텐츠」를 체계적으로 준비 할 수 있으며, 웹에 의한 정보 배포를 수행할 수 있도 록 돼 있다. 또한 템플릿에 의해 전체의 디자인을 용 이하게 변경할 수 있는 등 개발인력 절감에도 도움이 된다[4]. 콘텐츠 매니지먼트 시스템은, 범용적인 것으 로부터 특정의 목적으로 특화한 것까지 여러 가지 이 고, 규모도 가지각색이다. 대규모 콘텐츠 매니지먼트 시스템에서는, 페이지마다의 공개 기간의 엄밀한 시간 관리나, 공개를 승인하는 워크플로우, 사이트 내 링크 파손의 방지, 디자인의 통일, 버전 관리 등 여러 가지 기능이 있어, 품질을 유지하면서 많은 인원의 공동 작 업을 효율적으로 실시하는 것을 가능케 한다. 개인용 콘텐츠 매니지먼트 시스템으로서는 각종 Webblog 툴 을 들 수 있다. 블로그 툴에서는 페이지의 자동 생성 이나 공개일의 지정, 트랙백 등의 기능이 준비되어 있 다. Wikipedia로 사용되는 위키나, SNS, Commerce 사이트도 콘텐츠 매니지먼트 시스템의 하나이다. 대형 어플리케이션 개발이 활성화 되면서 기존 방식의 개 발과 시스템 관리, 유지보수 시 발생하는 어려움을 해 소하기 위해 개발 프레임워크의 필요성이 커지고 있 다. 실제로 웹사이트 구축 소요 기간 및 비용을 고려 할 때 프로그램 구축 파트가 차지하는 비중이 절반 이상을 차지하고 있는 것이 현실이다. RIA기술 기반 플렉스 콘텐츠 매니지먼트 시스템은 웹사이트 구축, 개편 시 이러한 반복되는 프로그램 부분의 중복 투자 를 막고 시스템 구축의 본질적인 설계, 기획 및 디자 인 부분에 투자가 더 이루어져 사용자에게 양질의 콘 텐츠를 서비스 할 수 있게 하며, 기관 및 기업은 개발 비용을 절감하게 하는 것과 아울러 관리자와 사용자 의 편의성을 고려해 사용자 경험(User Experience)을 중심으로 업무를 보면서 즐길수 있게 하고, 한 페이지 안에서 모든 작업이 끝나도록 하는 RIA 기술을 적극 사용하는 것에 목표를 두었다.
따라서 본 논문는 스프링 프레임워크 2.5를 사용, 플렉스 콘텐츠 매니지먼트 시스템을 구현 해 보았다.
구현할 콘텐츠 매니지먼트 시스템의 구조는 그림 3 과 같다.
그림 3. RIA기반 플렉스 CMS 구조도 Fig. 3 Flex CMS configuration based on RIA
3.2 MVC를 이용한 HTTP 요청처리
다른 MVC기반의 프레임워크와 마찬가지로 스프링 MVC도 컨트롤러를 사용하여 클라이언트의 요청을 처리하게 된다. 스프링에서 DispatcherServlet이 MVC 에서 C(Controller)부분을 처리하는데, Distpatcher Servlet을 비롯하여 스프링 MVC의 중요 구성 요소 및 처리 흐름은 그림 4 와 같다.
그림 4. 스프링 MVC의 HTTP 요청 처리 과정
Fig. 4 Spring MVC HTTP request processes
그림 5. 스프링 프레임워크 모듈 구성도 Fig. 5 Spring framework module configuration
그림 5 처럼 스프링 프레임워크는 AOP(: Aspect Oriented Programming)을 지원해 트랜잭션이나 로깅, 보안과 같은 여러 모듈에서 공통으로 필요로 하지만 실제 모듈의 핵심은 아닌 기능들을 분리해서 각 모듈 에 적용할 수 있다[10]. 또한 자체 MVC 모델링 패턴 을 지원하고, 트랜잭션 처리를 위한 일관된 방법을 제 공하며, 영속성과 관련된 다양한 API를 제공한다.
Ⅳ. 시스템 구현
RIA기반의 CMS는 웹 환경에서 구현 되어야 하기 때문에 유닉스 기반의 무료 공개 운영체제인 리눅스 를 사용하였다. 그림6. 또한 클라이언트의 요청에 맞 게 응답을 해주기 위해 무료 웹 서버와 어플리케이션 서버인 아파치 톰캣을 이용한다. DBMS는 웹 개발에 널리 이용되고 있는 무료 관계형 데이터베이스 Mysql 을 사용하였다. 또한 LAMP, 즉 리눅스 운영 체제와 Apache 서버 프로그램, MySQL, PHP 스크립트 언어 구성은 상호 연동이 잘되면서도 오픈 소스로 개발되 는 무료 프로그램이어서 홈페이지나 쇼핑몰 등 일반 적인 웹 개발에 널리 이용되고 있다. 웹 브라우저는 대한민국 시장 점유율이 가장 높은 마이크로 소프트 인터넷 익스플로러를 첫 번째 기준으로 개발하였고 두 번째로 모질라 파이어 폭스 브라우저를 기준으로 개발하였다. 개발언어는 Java JSP를 선택하였다. JSP 는 빈즈라는 자바 컴포넌트를 사용할 수 있다. 또한 최초 서블릿으로 컴파일 된 후에는 메모리에서 처리 되기 때문에 많은 사용자 접속도 원활하게 처리할 수 있고 다른 서블릿간 데이터 공유가 쉽다.
(a) 플렉스 CMS 메인 화면 (b) Flex CMS main page
(a) 플렉스 대쉬보드 모듈 구현 (b) Implementation of Flex dashboard module
그림 6. 플렉스 CMS 구현 화면 Fig. 6 Implementation of Flex CMS
Ⅴ. 결론
RIA기반의 CMS 활용범위는 홈페이지뿐만 아니라
전사적 자원관리를 비롯해 다양한 정보시스템과 연동
되면서 웹서비스에 필요한 소스코드까지 관리하는 복
합적인 개념이 되었다. 최근 선보이는 CMS에는 B2B
전자상거래, 전자 카달로그 관리시스템, SNS 등 그
영역이 확대되고 있다. 이는 어떤 콘텐츠를 제공할 것
인가를 규칙기반으로 삼아야 할 것이다. 웹을 통해서
제공되는 모든 콘텐츠들은 콘텐츠관리시스템에서 메
타데이터로 분류되어서 룰을 형성하기 때문에 CMS에
대한 영역은 무한하다고 할 수 있다. 현존하는 CMS
김철원(Chul-Won Kim)
1997년 광운대학교 컴퓨터공학과 졸업(공학박사)
현재 호남대학교 컴퓨터공학과 교수
※ 관심분야 : XML 응용, 멀티미디어 정보검색, 멀티미디어 정보처리 및 응용, 멀티미디어 정보 통신
제품들은 별도의 솔루션으로 구성되어 있어 대형 사 이트 및 시스템을 운영·관리 하는데 적합하다. 하지만 중·소형 홈페이지 및 시스템을 운영·관리하기 위해 많 은 비용을 들여 CMS를 도입할 사람은 없을 것이다.
따라서 중·소형 홈페이지 및 시스템을 위한 맞춤 솔루 션 개발도 병행 되어야 할 것이다. 향후 장애인차별 금지법 및 개인정보보호법 시행에 따라 간단한 조작 만으로 웹 접근성 설정, 개인정보 DB 탐색·삭제, 사이 트 보안 강도 조절 등 다양한 사용자 편의기능에 대 한 연구·개발이 필요 할 것이다.
References
[1] H. Kim and J. Yoon, "Analysis of User experience on RIA-based Website," J. of The Society of Design Convergence Research, vol. 9, no. 1, 2010, pp. 54-55.
[2] H. Kim and H. Lim, "Design and Implementation of RIA based E-learning System," J. of The Korea Institute of Information Technology, 2009, pp. 310-314.
[3] J. Yang and Y. Chun, "The Effect of Users Experience-Centered RIA upon the UI Design of Internet Banking - Focused on Internet Banking of Domestic Top 9 Banks," J. of The Korea Society of Design Science, vol. 2009, no.
5, 2009, pp. 122-123.
[4] S. You. "CMS(Contents Management System) Access Structure for Design and implement,"
Master's Thesis, Ewha Womans University Graduate School of Information Science and Technology, 2002
[5] H. Robert, UX design practice: learning to 31 different user experience scenarios. Gyeonggido:
Acon. 2009.
[6] J. Tapper, J. Talbot, and M. Boles, Adobe Flex 2: Training from the Source, San Francisco:
Macromedia Press, 2007.
[7] A. Mac and J. Sanchez, Creating Visual Experiences with Flex 3.0, Gyeonggido: Acon, 2009.
[8] D. Chai, K. Ban, and E. Kim, “Schema Mapping Method using Frequent Pattern Mining” J. of the Korea Institute of Electronic Communication Sciences, vol. 5, no. 1, 2010, pp.
93-101.
[9] W. Hong, “Analysis of Korean Language to Optimize the Hangul Character Coding for Information Processing and Communication,”
J. of the Korea Institute of Electronic Communication Sciences, vol. 10, no. 3, 2015, pp. 375-380.
[10] B. Song, “A Design and Implementation of Software Architecture for IPC in Vehicles Using Modeling Methodology,” J. of the Korea Institute of Electronic Communication Sciences, vol. 7, no.
6, 2012, pp. 1567-1578.
저자 소개
사이즈 23mm×28mm
서준오(Jun-Oh Seo)
