수안이의 컴퓨터 연구실

웹2.0 도입을 위한 마이그레이션 프레임워크

웹2.0(Ajax)과 아키텍처의 구현

이동호, 윤현희, 손범성, 박정은

Ajax는 웹2.0의 기반이 되는 기술이다. 기존 웹을 재활용하는 측면에서 웹2.0과 Ajax, 그리고 웹2.0 환경으로 마이그레이션하는 방법을 함께 알아보자. 이번 시간은 웹2.0 및 Ajax의 개념과 전체적인 구조에 대한 기본 라이브러리를 어떻게 구현했는지 살펴본다.


구글 애드센스, 비트토런스, 넵스터 등 최근 언론의 주목을 끄는 사이트의 공통된 특징은 웹2.0 기반의 성공사례로 꼽힌다는 점이다. 전문가들은 웹2.0을 두 가지 측면으로 해석한다. 우선 콘텐츠의 질적, 양적 팽창이 사용자 중심으로 이뤄지는 구조로 흘려간다는 것이고 다른 하나는 마케팅 용어에 불과하다는 시각이다. 그런데 대다수 기업은 웹2.0의 의미보다는 자사 서비스가 웹2.0에 기반 한다는 사실을 사용자에게 더 알리고 싶어 한다. Time to Market(적기 시장 진입)이 기업 성공의 필수조건이니 만큼 트렌드를 따라가야겠다는 생각이다. 여기에는 웹2.0 기반의 개발 환경이 필연적이다.

이번 프로젝트의 결과물인 ‘Web2.0 Migration Framework’는 기존 웹의 재활용성을 높이고, 적기 시장 진입을 충족시켜줄 수 있는 환경을 제시한다. 기존 웹을 재활용하기 위해서는 범용성을 위한 언어 독립적 구현이 필요하고, 도입의 판단을 위해 기존 웹을 데이터적인 측면에서 바라보는 시각이 요구된다. 이번 호는 웹2.0 기반의 기술인 Ajax와 설계적인 측면에서 프로젝트 결과물을 살펴보고자 한다.




웹2.0과 Ajax

웹2.0은 X-인터넷과 더불어 현재 이슈화되고 있는 개념이다. 이 둘의 공통점은 웹 서비스의 애플리케이션화와 가벼운 리치 클라이언트 구현의 중심이라는 것이다. 이러한 웹 서비스의 애플리케이션화에 도움을 주는 것이 Ajax이다. Ajax는 Asynchronous JavaScript and XML의 줄임말로, 사용자 요청에 JavaScript와 XML을 이용, 비동기적으로 처리한다는 의미이다. 즉 Ajax는 특별한 기술을 요구하는 것이 아니라 실용성과 효율성을 바탕으로 현존하는 기술을 조합하고 웹 애플리케이션을 개발하려는 새로운 시도인 셈이다.




<그림 1>에서 기존 동기 통신은 애플리케이션이 서버와의 인터랙션을 필요로 할 때 매번 브라우저가 사용자와의 인터랙션을 멈추고, 서버의 응답을 기다린다. 반면 비동기 통신은 사용자 동작과 상관없이 연속적인 작업 진행이 가능하다. Ajax의 구현과 확장에 대해서는 뒤에서 살펴보도록 하겠다.




필자 메모
Web2.0 Migration Framework라는 이번 프로젝트를 진행하면서 기존 시스템에서 스크랩한 정보, 즉 Html 파싱 부분이나 파싱한 정보에 Ajax 코드를 넣는 부분, 서비스에 필요한 설정과 여러 코드들의 생성, 이클립스 플러그인의 구현 등에 대한 부분에서 많은 어려움을 겪었다. Html 파싱의 경우, Html은 XML과 같은 Well-Formed 문서가 아닌 탓에 별도의 변환 과정을 거치고, 여러 사이트를 스크랩하면서 테스트를 수행해야 했다. 또한 서비스 구조에 대한 정확한 데이터 처리가 필요해 웹 서버에 대한 배경 지식도 요구되었다. 이클립스 플러그인이라는 생소한 부분도 직접 구현해야 했기에 이에 대한 조사는 물론 구현에 많은 시간을 할애할 수 밖에 없었다. Html 파싱은 NekoHtml이라는 라이브러리를 부분적으로 사용, 구현하였다. 파싱된 정보는 프로젝트 전반에 걸쳐 사용하기 때문에 Well-Formed 문서로 구성하는데 중점을 뒀다. 그리고 서비스 가운데 기존 시스템에서 스크랩한 부분은 페이지의 여러 부분에서 사용자 요청이 있을 수 있으니 이에 대한 정확한 처리를 위해 페이지 상태와 요청에 대한 부분을 별도로 관리했다. 아울러 Html 수정과 Ajax 코드를 끼워 넣을 때는 트리 형태로 파싱한 정보를 오브젝트에 바인딩 하여 관리하고, 서비스시 동적으로 Html 코드를 생성하여 사용자한테 보낼 수 있도록 했다.




전체 시스템의 설계

그럼 프로젝트의 전체 시스템 구조가 어떤 방향으로 설계되었는지 살펴보자.

우선 설계의 기본 개념을 열거하면 기존 웹의 부분적인 마이그레이션(MVC 패턴의 도입)과 웹2.0 기술인 Ajax의 손쉬운 도입, 그리고 기존 시스템의 구조적 수정 불가(데이터적 관점), 기존 시스템의 재활용, 언어 독립성 등이다.



<그림 2>에서 Scraper는 Html 소스를 스크랩하고 언어 독립적인 구현을 위해 존재한다. 최초 작업을 위해 Scraper에서 Html 소스를 스크랩한다. 이를 Html Parser에서 Html 소스를 well-formed 문서로 변환 후 파싱, ParseTree 형식으로 객체에 바인딩 한다. 이후 소스에 대한 수정과 Ajax 기능에 대한 추가 작업이 끝나면, 작업 히스토리에 대한 정보를 바탕으로 Web Service Configuration Module에서 Xml Parser와 Xml Generator로 웹 서비스를 위한 설정을 한다.

최종적으로 Struts Handle에서 web.xml, struts-config.xml, java, jsp 등의 파일을 생성한다. Web 2.0 Extension Module은 이 같은 부분을 바탕으로 웹2.0 기술인 Ajax에 대한 구현을 하며 javascript, java, html을 생성하는 역할을 한다. 사용자 인터페이스는 이클립스 플러그인 형태로 구현하였다. 이제 최종 작업이 완료된 후 서비스가 어떤 형태로 운영되는지 보자.


Struts MVC

웹 프로젝트에서 사용하는 MVC는 크게 Struts와 Spring로 나뉜다. 여기서는 대부분의 시스템에서 사용하는 Struts를 사용한다. Struts는 Java Servlet, Java Server Pages, Java Beans, Resource Bundle 그리고 Extended Markup Language(XML)처럼 표준 기술에 기반 한 오픈소스 프레임워크이다. Struts는 아파치 소프트웨어 재단이 지원하는 자카르타 프로젝트의 일부이며 Struts의 공식 홈페이지는 http://jakarta.apache.org/struts이다.


서비스 구조의 설계

먼저 Controller와 View, Model의 경우 MVC의 구조로 코드가 생성된 부분이고 Ajax Module은 Ajax 기능에 대해 코드가 생성된 부분이다. 최초 사용자의 페이지 요청이 있을 때 Cont roller에서 그 요청을 받아 Model 부분에 적합한 페이지를 요구한다.

Model 부분은 기존 페이지를 스크랩하여 View 부분으로 업데이트해 사용자 요청에 응답한다. 만약 비동기적인 요청인 경우엔 Ajax Module에서 처리하여 응답하는 서비스 구조를 갖는다. 이 방식은 웹2.0 도입이 적합하지 않다고 판단되면 <그림 3>의 ‘1’에 대한 부분만 빼내면 기존의 서비스를 다시 가동할 수 있다는 이점이 있다. 기존 시스템을 데이터적 관점에서 관찰하고 구조적인 수정을 하지 않는 형태의 웹2.0 프로젝트 콘셉트와 관련된다.




작업 파일의 구성

전체 시스템 구조에서 알 수 있듯이 사용자 인터페이스는 이클립스 플러그인으로 작성되었다. 이클립스의 에디트뷰, 즉 에디트할 수 있는 창은 파일 확장자와 연관 관계가 있는 것으로 파일 확장자에 대한 에디트 방법의 정의가 필요하다. 여기선 새로운 작업 파일에 대한 구성이 필요한 만큼 잠깐 살펴보도록 하자. 마이그레이션 작업을 위한 파일 포맷은 XML 형식을 따른다. 파일 포맷을 구성하는데 고려된 사항은 다음과 같다.

- 현재 작업 상태와 작업 편의성을 위한 작업 히스토리를 저장할 수 있어야 한다.
- 웹 서비스를 위한 각종 맵핑 정보와 스크랩을 위한 정보들을 보관해야 한다.

이를 바탕으로 구성한 스키마는 <리스트 1>과 같다.



<리스트 1>은 전체적인 작업 파일의 스키마 구성이다. 스키마는 크게 세 부분으로 분류할 수 있으며, 각 요소는 init, recently-html, histories 등이다.



<리스트 2>의 init 부분은 url-pattern, scrap-path, scrap-html 등으로 나눠진다. url-pattern은 서비스시 맵핑에 대한 정보를, scrap-path는 서비스시 스크랩할 주소, scrap-html은 작업을 위한 파일 생성시 스크랩된 html 정보를 포함한다. recen tly-html 부분은 연속적인 작업을 위한 최근 작업의 html 소스 부분을 담는다. histories 부분은 history라는 요소를 하부 항목으로 갖는다. 관련 스키마는 <리스트 3>과 같다.



<리스트 3>은 extension과 operations를 하부 항목으로 갖는다. extension의 경우 Ajax 기능, 즉 웹2.0 기술에 필요한 정보를 담고, operations는 html 소스의 수정에 대한 정보를 담는다. 작업 파일에 대한 파싱과 코드 생성은 스키마에 따라 XmlBeans를 사용하여 기본 라이브러리를 생성했고, 이를 토대로 작업 파일을 처리하는 부분을 작성하였다.


기본 라이브러리의 구현
Scraper(Screen Scraping의 구현)

> ● HttpClient 라이브러리의 사용

Scraper는 언어 독립적인(JSP, ASP, PHP 등에 독립적인) 구현을 위해 필요한 기술이다. Scraper는 또 웹 서비스시 사용자에 대한 요청을 기존 웹 서버로 보내 스크랩할 수 있는 형태로 구현돼야 한다. 그래서 선택한 것이 HttpClient 라이브러리이다. Http 프로토콜의 기본적인 메소드인 Post와 Get에 대한 서버측에 전송이 가능한 라이브러리이다.


HttpClient
HttpClient는 자카르타의 오픈소스 프로젝트로 진행되는 Http 프로토콜 메소드에 대한 부분을 자바로 구현한 것이다. GET, POST, PUSH 등 모든 Http 프로토콜에 대한 메소드가 정의되어 있어 Screen Scraping 기술 구현시 적합하다 (http://jakarta.apache.org/httpcomponents /index.html 참고).


● Scraper의 구현



<리스트 4>는 get 방식에 대한 Http 메소드의 구현 부분이다. 서비스 구조의 구현, 즉 서비스시 기존 웹에서 페이지를 스크랩할 때 쓰일 라이브러리 역시 동일한 방식으로 구현한다. 이에 대한 것은 Default Servlet의 구현 항목에서 자세히 알아보자.


Html Processing Handle의 구현

● ParseTree의 구현

ParseTree는 Html 파싱과 생성시 필요한 도큐먼트를 오브젝트에 트리구조로 바인딩하기 위한 부분이다. ParseTree는 크게 사용자에 보이는 인터페이스 구현 부분과 감춰진 내부 구현에 사용된다. 사용자 인터페이스는 사용자에게 직접적으로 영향을 미치므로 사용자 편의성이 우선시 된다. 소스 뷰, 트리 뷰, 브라우저 뷰 등 작업 환경 관련 노드에 대한 비주얼적인 어시스트/어프로치 구현은 물론 Ajax 기능 삽입시 Html 소스에 구조적 접근으로 요소요소를 핸들링하고 처리할 때 쓰인다.



<리스트 5>의 absolutePosition 메소드는 트리 인덱스를 인자로 노드에 한 번에 접근하기 위한 것으로 정확한 노드의 인덱스를 알고 있을 때 사용성이 증가한다. 즉 사용자의 노드 선택시 활용성이 크다. toList 메소드는 트리 구조를 순차적으로 액세스할 수 있다. 각 노드가 포함된 범위내의 하부 노드를 가져올 때 사용성이 증가한다. toList 메소드는 비지터 패턴으로 구현하였다. <리스트 5>의 visit 메소드가 비지터를 받아들이는 역할을 하며, 비지터는 각 노드가 된다.


● Html Parser의 구현

Html은 기본적으로 well-formed 형식의 문서가 아니다. 때문에 파싱시 well-formed 문서 형태로 변환하는 과정이 요구된다. SAX 파서를 기본으로 구현하였다. 또한, 각 웹 서비스를 위한 언어에서 동적으로 Front-End Html 소스가 변하는 부분에서의 필터링이 필요하다(<리스트 6> 참조).



● Html Generator의 구현

Html Generator는 Html Processing Handle에 포함되며, 기본적으로 ParseTree를 도큐먼트로 생성하는 기능과 Html 소스 변경에 대한 히스토리 처리 등의 기능을 한다.


Web Service Configuration Module

WebConfigParser와 WebConfigGenerator를 이용하여 web.xml에 각종 맵핑 정보(servlet-mapping/taglib 등)를 추가/삭제한다. WebConfigParser와 Generator는 web.xml의 스키마 문서를 XmlBeans를 사용하여 라이브러리를 생성, 오브젝트에 바인딩한다. XmlBeans는 내부적으로 SJSXP(StAX)를 사용하여 파싱을 한다.


Sun Java Streaming XML Parser(SJSXP : StAX)
XML 문서에 대한 파서는 크게 SAX, DOM, SJSXP 등 세 가지로 구분된다. SAX는 이벤트 기반의 API로 일반적으로 개발자가 파서와 몇 개의 리스너를 등록하고, XML 문서의 요소나 속성이 도착되면 리스너의 메소드가 호출된다. DOM은 반대로 전체 문서를 읽어 트리를 생성한다. 그러니 개발자는 트리 생성이 완료된 후 트리에 접근하여 처리할 수 있다. SAX나 DOM과 달리 SJSXP는 스트리밍 방식의 XML 문서의 처리가 가능하다. 개발자가 XML 문서의 요소나 속성에 능동적으로 처리가 가능함을 의미한다.


● WebConfigGenerator

웹 서버 톰캣의 구동에 대한 기본적 설정 파일인 web.xml 파일을 파싱하여 매핑된 정보의 getter와 setter를 구현하고 web.xml 파일에 정보를 추가/삭제/생성하는 기능을 구현한다. 또한 Request Filter와 Default Servlet에 대한 url-pattern 맵핑을 한다(<리스트 7> 참조).



StrutsHandle의 구현

Web Service Configuration Handle을 기반으로 기본적인 맵핑을 하며, struts-config.xml의 action-mapping과 data-source 설정, Servlet, JSP 등의 서비스가 가능한 파일 등을 생성하는 기능을 구현했다. Struts Handle의 경우 여러 파일을 생성하기 때문에 이에 대한 generate-map을 구성하여 각 파일에 대해 독립적으로 구현하였다. XmlBeans는 Xml 스키마 파일인 XSD 파일 기반으로 라이브러리를 생성한다. 그런데 Struts에 대한 설정 파일인 struts-config.xml의 스키마는 DTD 파일이다. 때문에 DTD 파일을 XSD 파일로 변환하는 작업이 필요하다. 스키마 문서를 변환할 수 있는 프로그램을 사용하여 변환하였다. 그리고 web.xml 경우 XSD 파일이 필요하다. 썬마이크로시스템즈 홈페이지에서 web-app_2_4.xsd, jsp_2_0.xsd, j2ee_1_4.xsd, j2ee_w eb_services_client_1_1.xsd 등의 여러 파일을 다운로드할 수 있다.



<리스트 8>은 generate-map에 대한 스키마이다. generate-map은 크게 Java 파일에 대한 부분과 JSP 파일 부분으로 나눠 정의하였다. 기본적인 파일 이름 및 확장자 부분과 import, path, JSP의 contentType의 정의를 볼 수 있다. Struts를 적용, 서비스하기 위해 다음의 세 가지 파일로 나눠 생성하였다.


● Action

애플리케이션의 모든 Action은 Struts의 org.apache.struts. action.Action을 확장한다. 이 Action 클래스는 애플리케이션의 Model 레이어 인터페이스를 제공하면서 비즈니스 로직 주변의 래퍼로 작동한다. Action 클래스는 각각의 구현을 perform 메소드에 정의한다. perform 메소드는 ActionForward의 값을 리턴하며, ActionForward의 값은 strust-config.xml 주소로 맵핑된다. 최초 사용자의 요청은 Action으로 들어오며, forwardedPage를 사용자에게 넘겨주게 된다.


● forwardedPage(JSP)

Action의 ActionForward의 값, 즉 맵핑된 주소에 해당하는 JSP 페이지 관련 부분이다. 사용자에게 직접적으로 보이는 뷰로 특히 이 부분에서 Scraper로 기존 시스템의 페이지를 스크랩하며, 스크랩한 정보의 수정 사항(줄 단위의 삽입/삭제에 대한 오퍼레이션)을 포함하여 처리한다. 수정 정보, 즉 코드의 삽입/삭제에 대한 부분은 작업시 HtmlHandle에서 생성하는데 다음 항목에서 살펴보도록 하자.


● FrontEndPage

FrontEndPage는 Struts와는 관련이 적다. Struts의 경우 주소에 일반적으로 ‘.do’로 web.xml에 맵핑하여 사용한다. 이러한 부분을 그대로 사용하면, 마이그레이션된 페이지의 링크가 바뀜으로 해서 기존 페이지를 수정해야 하는 번거로움이 있다. Front EndPage는 이를 해결하기 위한 파일이다. FrontEndPage를 생성함으로써 기존의 페이지 링크에 맞게 맵핑하고, 링크가 바뀌는 것을 막을 수 있다.



HtmlHandle의 구현


<리스트 9>는 HtmlHandle의 구현 부분이다. HtmlHandle은 크게 두 가지 역할을 하는데 한 가지는 수정 전, 후의 코드에 대해 삽입/삭제된 줄 정보를 알아내고 저장한다. 다른 하나는 이 정보를 이용하여 수정 전의 소스를 수정 후의 소스로 변경하는 역할이다. <리스트 9>는 수정된 부분에 대한 코드로 프로젝트 초기에는 이 부분의 설계에서 Html 소스의 골격이 서버에서 동적으로 변화하는 부분을 수용하려고 ParseTree의 노드를 비교, 노드 단위로 바뀐 부분을 잡아 연산하도록 했다. 하지만 이는 정확히 변경된 부분을 집어내기엔 다소 버겁다. 그래서 앞에서 설명한 줄 단위 비교로 바뀐 부분을 잡아내고, 이에 대한 소스 생성을 할 수 있도록 변경하였다.


Request Filter의 구현

웹 서비스시 사용자의 페이지 요청이 마이그레이션된 서버에 있는지, 기존 웹 서버에 있는지를 판단한다. 기존 웹의 정보라고 판단되면 Default Servlet으로 포워딩하여 처리하도록 했다.



<리스트 10>은 로컬상의 web.xml 파일에 맵핑된 페이지 정보와 로컬상의 페이지 이외의 이미지나 기타 파일이 존재하는지에 대한 검증 작업을 보여준다. <리스트 10>과 같이 작은 String 연산으로 맵핑 정보를 판단하는 코드로 구현한 이유는 웹 서버인 톰캣이 정확한 맵핑 정보를 얻을 수 없었기 때문이다. Request Filter는 전처리와 후처리를 가능하도록 Sevlet Filter로 구현하였다.


Default Servlet의 구현

web.xml에 맵핑되어 있는 페이지 이외의 페이지를 스크랩하여 사용자에게 보내주는 역할이다. Post, Get 등의 Http 메소드를 포함하는 Request를 구현하여 기존 웹 페이지가 사용자의 요청에 응할 수 있도록 하였다. web.xml에 url-pattern이 ‘/’ 로 맵핑된다.

<리스트 11>은 사용자 요청에서 Post 및 Get 메소드에 대한 판단을 하며, 응답 부분은 Scraper의 구현과 동일하다. 각 사이트별 사용 언어의 인코딩이 다르기 때문에 이에 대한 처리가 필요한데 모든 부분을 ‘utf-8’을 기준으로 변환하여 처리하였다. ‘utf-8’을 기준으로 변환한 것은 인코딩 문제가 Html에 대해 한정된 것이 아닌 Xml 파싱에서도 나타났기 때문이다. Xml 파싱의 경우 ‘utf-8’에 안정적으로 처리가 가능하다. 다음 시간에는 웹2.0 기술 확장과 Ajax 기본 기능의 구현, 이크립스 플러그인을 기반으로 사용자 편의성 향상에 대해 알아본다.


리스트 11> Default Servlet의 구현
…<중략> if("POST".equals(request.getMethod())){ // post …<중략> while(names.hasMoreElements()){ name = (String)names.nextElement(); post.addParameter(name, request.getParameter(name)); } if(request.getQueryString() != null) post.setQueryString(request.getQueryString()); client.executeMethod(post); InputStream is = post.getResponseBodyAsStream(); while((readSize = is.read(read)) != -1){ baos.write(read, 0, readSize); } is.close(); if(post.getResponseHeader("Content-Type").getValue().indexOf("text/html") != -1) source = baos.toString(); else source = baos.toByteArray(); post.releaseConnection(); if(post.getResponseHeader("Location") != null) redirect = post.getResponseHeader("Location").getValue(); }else if("GET".equals(request.getMethod())){ // && request.getQueryString() != null}{ // get …<중략>

참고 자료
1.Java 디자인 패턴 입문
2.프로그래머를 위한 서블릿 / JSP
3.http://kr.sun.com/developers/techtips/e2005_0222.html#2
4.http://struts.linuxstudy.pe.kr/
5.http://network.hanbitbook.co.kr/view.php?bi_id=1141 Web 2.0이란 무엇인가
6.http://network.hanbitbook.co.kr/view.php?bi_id=1148
7.http://network.hanbitbook.co.kr/view.php?bi_id=1152 8.http://www-12
8.ibm.com/developerworks/kr/library/j-sr2.html 필수 자바 라이브러리 - 출처 : IBM


제공 : DB포탈사이트 DBguide.net