ASP.NET 웹파트 적용 안될 때

읽을거리 > 디벨로퍼 플러스

웹파트로 개인화 서비스 구현

프린트 이메일 전송

웹페이지를 사용자 개개인이 자신의 취향대로 구성할 수 있도록 지원하는 것은 상당히 매력적인 콘텐츠가 될 수 있다. ASP.NET 2.0은 이러한 개인화 서비스 구현을 위해 웹파트(WebPart)라는 기술을 프레임워크 차원에서 제공한다. 웹파트를 이용하면 사용자가 직접 페이지의 내용과 위치를 원하는 형태로 구성 가능한 개인화 서비스를 쉽게 구현할 수 있다. 이 글에서는 웹파트의 기본적인 내용을 소개하고 간단하면서도 실용적인 개인화 페이지를 직접 구현해 보도록 한다.

박종명 mkex@naver.com｜Microsoft Visual C# MVP. 현재 오리온 계열 게임회사(이플레이온)에서 플랫폼 개발팀 팀장을 맡고 있다. 닷넷의 빠른 변화를 지켜보며 희망과 번뇌를 오가고 있지만 여전히 닷넷이라면 뭐든지 관심이 있다. 기술 커뮤니티(mkexdev.net)를 운영하면서 닷넷 기술을 공유하고 있다.

강준석 hanoul76@hotmail.com｜현재 오리온 계열 게임회사(이플레이온)에서 웹 개발 파트장을 맡고 있다. 웹을 지원하는 닷넷의 무궁무진한 기능들에 매료되어 가고 있으며 ASP.NET, Ajax 그리고 SilverLight 등 닷넷 웹 기반 기술들을 섭렵하고 공유하려 노력하고 있다.

요즘 많은 웹사이트들이 개인의 관심이나 취향을 존중해 주기 위한 다양한 콘텐츠를 선보이고 있다. 정보의 생산과 공급구조 역시 기존의 중앙으로부터의 단 방향 전파를 넘어 개인으로부터 쌍 방향 확산이 보편화되는 추세이다(ASP.NET 웹파트 기술의 모든 것을 다룰 수는 없으므로 이 글에서는 간단하면서도 실용적인 개인화 페이지를 함께 구현함으로써 웹파트의 기본을 이해시키는 데 중점을 둔다).
 
ASP.NET 웹파트
블로그나 SNS 등 1인 미디어가 빠르게 확산되는 것 역시 이를 잘 반영하고 있다고 볼 수 있다. 포털과 같은 대표적인 중앙 집중형 정보 구조는 다양한 정보를 한 곳에서 접할 수 있는 장점이 있는 반면, 모든 사람에게 획일적인 형태로 정보를 전달하는 구조여서 각 개인의 특성이 잘 반영되지 못한다. 사람마다 성향도 다르며 관심을 두는 정보 역시 다를 수밖에 없다. 개개인에게 정보를 취사선택할 수 있는 방법을 제공하고 정보의 배치(layout)도 자유롭게 구성할 수 있게 하는 것은 개인화 웹서비스의 한 가지 중요한 요소가 될 것이다. 얼마 전 서비스를 내놓은 유디엠(http://www.udiem.com/)이나 ‘나만의 포털(내가 만드는 나만의 시작페이지)’라는 슬로건을 내건 e-myportal(http: //demo.netville.co.kr/MyPortal/myportal/main.do?mediaType=3)과 같은 서비스를 살펴보면 이러한 정보의 개인화 구성을 더 잘 느낄 수 있다. 구글 역시 <화면 1>과 같이 개인의 입맛에 맞도록 콘텐츠를 자유롭게 구성할 수 있는 iGoogle 서비스를 선보이고 있다.

개인의 취향대로 페이지를 구성할 수 있도록 지원하기 위한 프로그래밍 방법은 이전에도 존재했었다. 그러나 웹페이지 구성이라는 것이 결국에는 클라이언트 브라우저에서 표현되는 부분이라 어쩔 수 없이 클라이언트 스크립트를 사용할 수밖에 없었다. 따라서 구현이 상당히 까다롭고 유지보수하기가 만만치 않았던 것이 사실이었다(이러한 구성을 직접 스크립트와 html 코드만으로 개발해본 사람은 이 의미를 잘 알 것이다). ASP.NET 2.0은 이러한 시대적 트렌드를 반영하고 개발자가 개인화 페이지를 더 쉽게 개발할 수 있도록 다양한 컨트롤과 라이브러리를 프레임워크 차원에서 제공하는데 이것을 통칭해 웹파트(WebPart)라고 한다.

웹파트 개요와 구성요소
웹파트 기술을 이용하면 다음과 같은 개인화 페이지를 쉽게 구현할 수 있다.

● 페이지 내용의 개인화 - 페이지에 표현되는 내용을 선택할 수 있다. 즉 원하는 정보만을 페이지에 노출시키고 그렇지 않은 정보는 제거할 수 있다. 또한 노출된 영역을 최소화하거나 숨길 수도 있다.
● 페이지 배치(Layout)의 개인화 - 페이지 각 영역의 위치를 변경할 수 있다. 특정 내용을 끌어다 원하는 위치로 이동하고 배치할 수 있다.
● 사이트 수준 개인화 - 개인 수준이 아닌 사이트 수준의 개인화 페이지를 구성할 수 있다. 즉 관리자 또는 관리 권한을 부여받은 특정 사용자가 설정한 개인화 페이지는 전체 사용자에게 동일하게 공유될 수 있다. 이상의 개인화 구현 이외에도 사이트간 또는 페이지간 웹파트 컨트롤 설정을 XML 형식으로 내보내거나 가져올 수 있어 사용자의 웹파트 컨트롤 설정 작업을 더 편리하게 할 수 있다. 또한 각각의 웹파트 컨트롤들이 서로 상호작용하도록 컨트롤들을 연결할 수도 있다. 웹파트는 실제로 개인화 페이지를 구성하기 위한 닷넷 컨트롤 집합이라 할 수 있다.

웹파트 컨트롤 집합은 <그림 1>과 같은 빌딩 블록으로 구성된다.

웹파트 컨트롤 집합 빌딩 블록의 각 요소들을 살펴보기 이전에 웹파트 페이지의 구성을 개괄적으로 표현한 <그림 2>를 자세히 보자.

웹파트 페이지에는 몇 가지 다른 성격의 영역(Zone)이 존재하며 각 영역은 개인화 페이지의 내용을 표현하거나 사용자가 페이지를 관리하고 조작할 수 있는 기능을 제공한다. 또한 개인화 설정을 유지하기 위해 SQL Server와 같은 저장소를 표현하고 있으며 페이지와 저장소를 연결하는 프로바이더(Provider)를 나타내고 있다. 이제부터 이들 웹파트 요소들을 하나씩 살펴보자.

웹파트 UI 컨트롤
● WebPartManager
웹파트 페이지에는 한 개의 WebPartManager 컨트롤과 한 개 이상의 WebPartZone 컨트롤을 정의할 수 있으며 선택적으로 EditorZone 및 CatalogZone, ConnectionZone 등을 정의할 수 있다. WebPartManager 컨트롤은 ASP.NET이 지원하는 다른 Manager 컨트롤처럼(예: Ajax Extensions의 Script Manager 컨트롤) 다른 웹파트 컨트롤보다 앞서 선언되어야 하며 한 페이지에는 반드시 하나만 정의되어야 한다. 또한 이 컨트롤은 페이지 UI 상에는 표시되지 않으나 웹파트 컨트롤 집합의 핵심 클래스로서 영역 내 웹파트 컨트롤, 기능 및 웹페이지에서 발생하는 모든 이벤트 등을 관리한다.

● WebPartZone
WebPartZone은 개인화된 페이지에서 사용자들이 실제로 콘텐츠를 조작할 수 있는 영역이라 할 수 있다. <그림 2>를 보면 WebPartZone 안에 실제 콘텐츠가 포함되는데, 이 콘텐츠는 닷넷 프레임워크의 WebPart 클래스로부터 파생된 클래스들이 올 수 있다. 서로 다른 존(Zone)에 존재하는 각각의 콘텐츠를 이동 및 조작할 수 있도록 만드는 단위가 WebPartZone이며 이 컨트롤의 주요 역할이다. WebPartZone에 웹파트 컨트롤을 추가하기 위해서는 <ZoneTemplate> 내부에 컨트롤을 선언하거나(<리스트 1> 참조) 프로그래밍 방식으로 추가하면 된다(<리스트 2> 참조).

웹파트 컨트롤
ASP.NET 표준 서버 컨트롤이나 UserControl, Custom Control 등이 웹파트 컨트롤로 사용될 수 있다. 이는 단지 디자인 타임에 WebPartZone 영역에다 끌어다 놓는 것만으로도 개인설정 및 연결, 가져오기, 내보내기, 끌어서 놓기, 사용자 UI Verb 기능(최소화, 닫기, 삭제 등의 기능)과 같은 웹파트 기능들을 모두 사용할 수 있다. 실제 웹파트 컨트롤은 닷넷 프레임워크의 System.Web.UI.WebControls.WebParts.WebPart 클래스를 상속받은 컨트롤이어야 한다. 하지만 일반 ASP.NET 서버 컨트롤은 이 클래스를 상속받지 않고 있음에도 웹파트 컨트롤로서 역할이 가능한데 이것은 바로 GenericWebPart라는 클래스 덕분이다. 이 컨트롤이 런타임에 ASP.NET 서버컨트롤을 자동으로 래핑(wrapping)하여 실제 웹파트 컨트롤과 동일한 기능을 수행하도록 만든다.

● EditorZone
웹파트 컨트롤의 모양이나 레이아웃, 동작 및 기타 여러 가지 속성들은 EditorPart를 상속한 컨트롤을 통해 편집이 가능한데, 이러한 EditorPart 컨트롤들을 호스팅하는 것이 EditorZone 컨트롤이다. EditroZone 컨트롤은 LayoutEditorPart 컨트롤, AppearanceEditorPart 컨트롤, BehaviorEditorPart 컨트롤 및 PropertyGridEditorPart 컨트롤을 제공하여 최종 사용자가 페이지에서 웹파트 컨트롤을 편집하고 개인설정을 할 수 있도록 한다.

● CatalogZone
CatalogZone 컨트롤은 PageCatalogPart 및 Declarative CatalogPart 등의 컨트롤을 제공하여 사용자가 런타임에 새로운 웹파트 컨트롤을 추가하거나 (닫기 등의 사용자 UI Verb 기능에 의해) 숨겨놓은 컨트롤들을 페이지에 다시 추가할 수 있게 한다.

● ConnectionZone
ConnectionZone 컨트롤을 사용하여 사용자에게 연결을 만들고 관리하는 방법을 제공할 수 있다. 여기에서 연결이란 웹파트 컨트롤간에 연결을 설정하여 데이터를 공유할 수 있음을 의미한다. 이 영역에 있는 컨트롤들은 EditorZone 및 CatalogZone과는 달리 컨트롤을 실제로 연결하는 작업이 수반되어야만 올바르게 동작하는데, 특정한 하나의 웹파트 컨트롤이 웹파트 공급자가 되고 이외 다른 한 개 이상의 웹파트 컨트롤(들)이 웹파트 소비자가 된다. 물론 컨트롤간 데이터가 공유되기 위해서는 공급자로부터 넘어온 정보를 처리할 수 있는 인터페이스 및 데이터가 설정되어 있어야 한다. 예를 들면 <그림 3>과 같이 지역을 선택할 수 있는 웹파트 영역이 데이터 공급자가 되고 최종 사용자가 입력한 지역이 공유 데이터가 되어 오늘의 날씨, 내일의 날씨, 주간 날씨 등을 표시하는 웹파트 영역으로 전달되며 이렇게 전달된 데이터를 표시하는 웹파트(들)가 소비자가 되는 것이다.

UI 구조적 구성 요소
● 웹파트 Display Mode
ASP.NET 웹파트는 모두 다섯 가지의 DisplayMode를 지원하는데 페이지에서는 한 번에 하나의 디스플레이 속성만 설정될 수 있다. Browse Mode는 설정된 웹파트의 기본적인 UI를 표시하고 Design 및 Edit Mode를 사용하여 레이아웃을 변경하거나 웹파트 컨트롤을 수정할 수 있다. Catalog Mode에서는 Catalog Zone에 포함된 웹파트 컨트롤들을 페이지에 추가하거나 제거할 수 있다. 그리고 Connected Mode는 ConnectionZone이 포함되어 있는 경우 활성화할 수 있으며 사용자가 웹파트 컨트롤간의 연결을 관리할 수 있도록 한다.

Browse Mode를 제외한 Display 속성들은 페이지 내 해당 Mode를 지원하기 위한 컨트롤이 포함되어 있어야 활성화되는데(예: Edit mode의 경우 위에서 살펴본 EditorZone이 페이지에 정의되어 있는 경우 활성화), 이는 WebPartManager의 SupportedDisplayModes 속성을 통해 확인할 수 있다. <리스트 3>은 페이지에 EditDisplayMode가 포함되어 있는지를 확인하는 코드이다.

개별화(웹파트 개인 설정)
● 웹파트 프로바이더
웹파트로 개인화된 페이지의 설정을 유지하기 위해 어딘가에 설정 정보를 저장해 두어야 한다. 웹파트에서는 이러한 설정 정보를 저장하고 조회하기 위해 ASP.NET 표준 프로바이더 모델을 여전히 채택하고 있는데, ASP.NET의 멤버십(MemberShip)이나 역할(Role) 그리고 사이트 탐색(Sitemap) 서비스와 같이 공급자(Provider) 기반 모델을 사용한다. 기본적으로 웹파트는 SQL Server를 저장소로 이용하며 이를 위한 프로바이더인 SqlPersonalizationProvider를 이용한다. ASP.NET 2.0에서 기본 제공되는 aspnetdb.mdf를 사용하거나 <리스트 4>처럼 자신의 SQL Server에 웹파트를 위한 구성을 별도로 할 수 있다. 닷넷 프레임워크의 명령 줄 유틸리티인 aspnet_regsql.exe를 이용하여 다음과 같이 명령한다.

aspnet_regsql -U 사용자아이디 -P 비밀번호 -S 서버 -d 데이터베이스 -A c

SQL Server에 웹파트 구성요소들이 설치가 완료되면 Web.config 파일에 <리스트 4>와 같이 연결 정보와 개인화 정보를 구성해 주도록 한다.

이렇게 설정된 정보를 통해 ASP.NET은 사용자 및 페이지의 아이디를 기반으로 하여 모든 개인 설정들을 단순이진 데이터(byte[])로 SQL Server의 이미지 필드에 기록하게 된다.

SqlPersonalizationProvider는 PersonalizationProvider 클래스를 상속받아 구현되어 있는데 개발자가 임의로 프로바이더를 확장할 수도 있다. 즉 PersonalizationProvider를 상속 받아 규약에 맞도록 클래스를 구현한다면 (XML 또는 이진 형태의) 파일과 같은 다른 저장소를 이용할 수도 있으며 저장소와의 상호작용을 적절히 확장할 수 있게 된다.

<리스트 5>는 이러한 확장 프로바이더를 구현하는 기본 코드 구조이다.

● 범위(사용자 및 공유 범위)
개인화 설정은 ‘사용자 범위’ 및 ‘공유 범위’로 저장될 수 있다. ‘사용자 범위’는 개인화 설정 변경이 해당 사용자에게만 유지되도록 저장된다. 해당 사용자뿐만 아니라 다른 사용자에게도 동일하게 설정을 공유하려면 ‘공유범위’로 설정하면 된다. 통상 사이트 관리자나 특정 권한을 받은 사용자에 의해 공통 페이지가 관리될 때 ‘공유범위’를 사용하게 된다. 한 가지, ‘사용자 범위’가 ‘공유 범위’보다 우선됨을 기억하자.

샘플 구현(웹파트로 구현된 개인화 페이지)
지금까지 웹파트의 기본적인 내용을 살펴봤다. 이제 실제 간단한 개인화 페이지를 구현하면서 웹파트를 실제로 이용해 보자. 구현할 개인화 페이지는 다음과 같이 구성한다.

- WebPartManager 컨트롤과 2개의 WebPartZone 영역을 포함
- CatalogZone 컨트롤을 지원하며 PageCatalogPart 및 Declarative CatalogPart를 포함
- DisplayMode 및 Scope를 변경할 수 있는 웹파트 관리 영역 생성
- WebPartZone에서 사용할 1개의 사용자 정의 컨트롤 생성

개인화 페이지 구현을 위한 준비
우선 <리스트 4>와 같이 개인화 설정 데이터를 저장하기 위한 프로바이더를 구성한다. 참고로 웹파트는 개인의 설정에 관련한 부분이므로 로그인한 사용자에게 제공할 수 있다. 따라서 웹파트 페이지를 테스트하기 위해서는 ASP.NET 폼 인증 등을 통한 간단한 로그인 과정이 선행되어야 한다. 다음으로 <리스트 6>과 같이 웹페이지에 WebPartManager와 2개의 WebPartZone 컨트롤을 추가한 후 왼쪽의 WebPartZone 영역 내에 웹파트 컨트롤로 사용할 Lable 및 Calendar 컨트롤을 추가하고 오른쪽 Web PartZone 영역에는 Lable 및 사용자정의 컨트롤(UserControl)을 추가한다. 참고로 <리스트 6>은 페이지의 HTML 코드와 CSS코드가 제거된 코드이다.

다음으로 <리스트 7>처럼 CatalogZone 컨트롤을 페이지에 추가한 뒤 PageCatalogPart 및 DeclarativeCatalogPart를 Zone Template 내에 선언한다. 그리고 DeclarativeCatalogPart 내에 레이블을 선언하여 웹파트를 추가한다.

웹파트 관리 영역 구성
DisplayMode를 변경하여 개인화 작업을 수행하거나 페이지 및 선언적 카탈로그 영역에 웹파트를 포함시켜 페이지에 추가하기 위한 웹파트 관리영역을 만들어 보자. 우선 각각의 Display Mode의 활성화 및 현재 범위(Scope)를 변경(Toggle)할 수 있는 링크 버튼을 페이지에 추가한다. 그리고 각각의 링크 버튼 클릭 이벤트와 이벤트 핸들러를 연결하여 변경 작업을 수행할 수 있도록 한다. 지면상 범위 변경과 BrowseDisplayMode에 대해서만 코드를 소개한다. <리스트 8>의 코드를 참조하자.

이제 웹파트를 지원하는 페이지 구현이 완료되었다. 로그인 후 웹파트의 이동 및 닫기, 삭제, 최소화 등의 기능을 테스트하여 보자. 또한 범위를 변경하여 User Scope일 때와 Shared Scope일 때 어떻게 페이지의 개인화가 적용되는지 확인해 보자. 마지막으로 페이지 카탈로그 및 선언적 카탈로그를 각각 클릭하여 닫기로 인해 사라진 웹파트나 선언적 카탈로그 내의 웹파트를 특정 영역에 추가하여 보자. 완성된 페이지의 모습은 <그림 4>와 같다.

http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=32718