ASP.NET 2.0 사이트 맵은 웹 사이트 탐색 구조를 구축합니다.

저자：Eve Cole 업데이트 시간：2009-06-30 16:47:46

익숙하지 않은 목적지로 여행해 본 적이 있다면 지도의 중요성을 아실 것입니다. 지도는 여행을 더욱 편안하게 만드는 데 도움이 될 수 있습니다. 웹사이트에도 동일한 원칙이 적용됩니다. 웹사이트는 방문자가 웹사이트의 다른 부분으로 쉽게 이동할 수 있도록 단순하면서도 유연한 탐색 구조를 제공해야 합니다. ASP.NET 2.0은 이 기능을 구현하는 데 도움이 되는 SiteMap이라는 기능을 제공합니다. 이 문서에서는 사이트맵이 무엇인지 설명하고 이를 사용하는 웹사이트 탐색 구조를 개발하는 방법을 설명합니다.

1. 사이트맵

사이트맵은 웹사이트의 전체 탐색 레이아웃을 자세히 설명하는 XML 파일(확장자 .sitemap)입니다. 모든 요구 사항에 맞게 사이트맵 파일을 사용할 수 있습니다.

예를 들어 사이트맵 파일을 설명하는 데 도움이 될 것입니다. 그림 1은 예제 웹사이트의 디렉터리 구조를 보여줍니다.

그림 1: 웹사이트 구조

그림에서 홈 페이지(Default.aspx)와 문의처 페이지(contact.aspx)는 웹 사이트의 루트 폴더에 있습니다. 제품 및 서비스라는 두 개의 하위 폴더도 있습니다. 각 하위 폴더 아래에는 Product1.aspx 및 Product2.aspx, Service1.aspx 및 Service2.aspx에 해당하는 두 개의 웹 양식이 있습니다.

이제 다음 단계를 따르면 사이트맵을 사용하여 웹사이트의 구조를 설명할 수 있습니다.

1. VS.NET 2005를 사용하여 새 웹사이트를 만듭니다.

2. 웹사이트를 마우스 오른쪽 버튼으로 클릭하고 "새 항목 추가..."를 선택합니다.

3. "새 항목 추가..." 대화 상자(그림 2 참조)에서 사이트 맵을 선택하고 이름을 Web.sitemap으로 지정합니다.

그림 2: 새 사이트맵 추가하기

web.sitemap 파일에 다음 XML 마크업을 입력하세요.

<?xml 버전="1.0" 인코딩="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
＜siteMapNode url="default.aspx" title="홈" 설명="내 웹 사이트">
＜siteMapNode url="~/products/default.aspx" title="제품">
＜siteMapNode url="~/products/product1.aspx" title="첫 번째 제품" />
＜siteMapNode url="~/products/product2.aspx" title="두 번째 제품" />
</siteMapNode>
<siteMapNode url="~/services/default.aspx" title="서비스">
<siteMapNode url="~/services/service1.aspx" title="첫 번째 서비스" />
＜siteMapNode url="~/services/service2.aspx" title="두 번째 서비스" />
</siteMapNode>
<siteMapNode url="contact.aspx" title="문의하기" />
</siteMapNode>
</사이트맵>

사이트맵 파일의 루트는 siteMap입니다. 여기에는 siteMapNode 노드가 포함되어 있으며 웹 사이트 구조에 따라 여러 개의 siteMapNode 노드가 포함될 수 있습니다.

이 siteMapNode 태그에는 네 가지 중요한 속성이 있습니다(표 1 참조).

속성	설명
제목은	페이지 제목을 표시합니다. 이 속성은 탐색 컨트롤에서 URL 제목을 표시하는 데 자주 사용됩니다.
url은	이 노드가 설명하는 페이지의 URL을 표시합니다.
설명은	이 페이지에 대한 설명을 지정합니다. 이 설명을 사용하여 프롬프트 내용을 표시할 수 있습니다.
역할	보안 조정(나중에 설명)을 사용하여 이 속성은 이 페이지에 액세스할 수 있는 역할을 지정합니다.

표 1: <siteMapNode> 태그의 중요한 속성

이것이 사이트맵을 형성합니다. 이제 탐색 목적으로 사용할 수 있습니다.
2. 사이트맵 이용방법

이전 섹션에서 생성된 사이트맵 파일을 세 가지 일반적인 방법으로 사용할 수 있습니다.

· SiteMapPath 컨트롤 사용

· SiteMap 데이터 소스 컨트롤 사용

· SiteMap 클래스 사용

SiteMapPath 컨트롤을 사용하면 이동 경로를 생성할 수 있습니다. 그림 3은 탐색경로가 무엇인지 보여줍니다.

그림 3: 탐색경로 탐색

SiteMapPath 컨트롤은 다양한 수준의 탐색을 표시합니다. 예를 들어 상위 또는 루트 수준을 클릭하여 뒤로 이동하거나 최상위 수준으로 이동할 수 있습니다. 물론 탐색 계층 구조를 사용자 정의할 수도 있습니다.

ASP.NET 2.0에는 TreeView 및 메뉴를 포함한 우수한 탐색 컨트롤 세트도 함께 제공됩니다. SiteMap 데이터 소스 컨트롤을 사용하면 사이트 맵 파일을 이러한 컨트롤에 바인딩할 수 있습니다.

경우에 따라 내장 탐색 컨트롤이 요구 사항을 충족하지 못할 수도 있습니다. 이 경우 프로그래밍 방식으로 사이트맵 파일에 액세스하고 다양한 siteMapNode 노드를 읽을 수 있습니다. 그런 다음 siteMapNode의 제목 및 URL 속성을 사용하여 사용자 정의 탐색 구조를 생성할 수 있습니다.

3. SiteMapPath 컨트롤 사용

세부 사항에 들어가기 전에 먼저 필요한 디렉터리 구조와 웹 양식을 만들어 보겠습니다. 먼저 제품 및 서비스라는 두 개의 폴더를 웹 사이트에 추가합니다. 그런 다음 새 마스터 페이지 MasterPage.master를 추가합니다. 다음으로 표 2에 표시된 웹 양식을 추가하고, 추가할 때 해당 웹 양식에 대한 마스터 페이지를 설정해야 합니다.

웹 양식 이름	폴더
Default.aspx	웹 사이트 루트
Contact.aspx	웹 사이트 루트
Default.aspx	제품
Product1.aspx	제품
Product2.aspx	제품
Default.aspx	서비스
Service1.aspx	서비스
Service2.aspx	서비스

표 2: 웹 양식 목록

이제 앞서 추가한 마스터 페이지를 엽니다. Label 컨트롤과 SiteMapPath 컨트롤을 끌어 놓습니다. 그런 다음 레이블의 Text 속성을 "Welcome!"으로 설정합니다.

다음 목록은 MasterPage.master 페이지의 모든 태그를 보여줍니다.

<%@ 마스터 언어="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<헤드 runat="서버">
<제목>제목 없는 페이지</제목>
</머리>
<본문>
<양식 id="form1" runat="서버">
<div>
<asp:Label ID="Label1" runat="server" Font-Size="XX-Large" ForeColor="Blue" Text="환영합니다!"></asp:Label><br />
<asp:SiteMapPath ID="SiteMapPath1" runat="서버"
Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : ">
<PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" />
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#7C6F57" />
<RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" />
</asp:사이트맵경로>
<br />
<br />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="서버">
</asp:contentplaceholder>
</div>
</양식>
</본문>
</html>

이제 루트 폴더에서 Default.aspx를 엽니다. Default.aspx는 그림 4와 같아야 합니다.

그림 4: Default.aspx의 샘플 실행

이 페이지를 디자인하려면 행 4개와 열 1개가 있는 테이블을 추가합니다. Label 컨트롤을 맨 위 행으로 끌어서 Text 속성을 "Welcome to our website!"로 설정합니다. 그런 다음 세 개의 HyperLink 컨트롤을 나머지 행으로 끌어서 표 3에 표시된 대로 Text 및 NavigateUrl 속성을 설정합니다.

HyperLink ID	텍스트 속성	NavigateUrl 속성
HyperLink1	제품	~/products/default.aspx
HyperLink2	서비스	~/Services/default.aspx
HyperLink3	문의처	~/contact.aspx표

3: HyperLinks 속성 설정

다음 목록은 Default.aspx의 전체 태그를 보여줍니다.

<%@ 페이지 언어="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Title="제목 없는 페이지" %>
<asp:콘텐츠 ID="콘텐츠1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="서버">
<중앙>
<테이블>
<tr>
<td 너비="60%">
<asp:Label ID="Label1" runat="서버" Font-Size="X-Large"
Text="저희 웹사이트에 오신 것을 환영합니다!"></asp:Label></td>
</tr>
<tr>
<td 너비="60%">
<asp:HyperLink ID="HyperLink1" runat="서버"
Font-Size="X-Large" NavigateUrl="~/Products/Default.aspx">제품
</asp:하이퍼링크></td>
</tr>
<tr>
<td 너비="60%">
<asp:HyperLink ID="HyperLink2" runat="서버" Font-Size="X-Large"
NavigateUrl="~/Services/Default.aspx">서비스
</asp:하이퍼링크></td>
</tr>
<tr>
<td 너비="60%">
<asp:HyperLink ID="HyperLink3" runat="서버"
Font-Size="X-Large" NavigateUrl="~/Contact.aspx">연락처
</asp:하이퍼링크></td>
</tr>
</테이블>
</중앙>
</asp:내용>

이제 Products 폴더에서 Default.aspx를 열고 그림 5와 같이 디자인합니다.

그림 5: 제품 폴더의 기본 페이지

표 4에는 웹 양식에 사용되는 모든 하이퍼링크가 나열되어 있습니다.

HyperLink ID	텍스트 속성	NavigateUrl 속성
HyperLink1	첫 번째 제품	~/products/product1.aspx
HyperLink2	두 번째 제품	~/products/product2.aspx

표 4: 제품 폴더 아래 기본 페이지의 하이퍼링크 정보

동일한 원칙에 따라 Services 폴더에서 Default.aspx를 디자인하면 결과가 그림 6에 표시됩니다.

그림 6. Services 폴더의 기본 페이지

표 5에는 웹 양식에 사용되는 하이퍼링크 정보가 나열되어 있습니다.

HyperLink ID	텍스트 속성	NavigateUrl 속성
HyperLink1	첫 번째 서비스	~/Services/service1.aspx
HyperLink2	두 번째 서비스	~/Services/service2.aspx

표 5: 제품 폴더 아래 기본 페이지의 하이퍼링크 정보

마지막으로 서로의 웹 양식에 태그를 추가하고 표 6과 같이 Text 속성을 설정합니다.

레이블

웹 양식 이름	의 텍스트 속성
~/Contact.aspx	문의처
~/Products/Product1.aspx	첫 번째 제품 세부 정보
~/Products/Product2.aspx	두 번째 제품 세부 정보
~/Services/Service1.aspx	첫 번째 서비스 세부 정보
~/Services/Service2. aspx	두 번째 서비스 세부 정보

양식 6: 나머지 웹 양식에서 레이블의 텍스트 속성 설정

이제 루트 폴더에서 Default.aspx를 실행하고 Product1.aspx 페이지로 이동합니다. 그림 7은 웹 양식의 샘플 실행을 보여줍니다.

그림 7: Product1.aspx의 샘플 실행

web.sitemap 파일의 제목과 URL 속성이 "탐색경로"를 생성하는 데 어떻게 사용되는지 확인하세요. 또한 현재 페이지 제목과 함께 상위 페이지가 어떻게 표시되는지 확인하세요. 다양한 페이지를 탐색하고 SiteMapPath 컨트롤을 관찰해 보세요.

4. SiteMap 데이터 소스 제어 사용

사이트 맵의 사용은 SiteMapPath 컨트롤에만 국한되지 않습니다. 탐색 가능한 컨트롤(예: TreeView)에 사이트맵을 첨부할 수도 있습니다. 다음 예제에서는 동일한 사이트 맵 파일을 사용하여 TreeView 컨트롤에 대한 바인딩을 구현합니다.

새 웹 양식 SiteMapDataSourceDemo.aspx를 웹 사이트에 추가합니다. 그런 다음 SiteMap 데이터 소스 컨트롤(SiteMapDataSource1)과 TreeView 컨트롤(TreeView1)을 폼으로 끌어 놓습니다. 이 TreeView 컨트롤의 DataSourceID 속성을 SiteMapDataSource1로 설정합니다. 또한 TreeView 컨트롤의 ShowLines 속성을 true로 설정합니다. SiteMapDataSourceDemo.aspx 페이지의 전체 마크업은 다음과 같습니다.

<%@ 페이지 언어="C#" AutoEventWireup="true"
CodeFile="SiteMapDataSourceDemo.aspx.cs"
Inherits="SiteMapDataSourceDemo" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<헤드 runat="서버">
<제목>제목 없는 페이지</제목>
</머리>
<본문>
<양식 id="form1" runat="서버">
<asp:TreeView ID="TreeView1" runat="서버" DataSourceID="SiteMapDataSource1"
ShowLines="참">
</asp:트리뷰>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="서버" />
</양식>
</본문>
</html>

이제 웹 양식을 실행하여 동일한 탐색 구조가 TreeView에 자동으로 생성되는 방식을 확인하십시오(그림 8 참조).

그림 8: 사이트맵 파일을 TreeView 컨트롤에 바인딩

5. SiteMap 클래스 사용

SiteMapPath 또는 TreeView 컨트롤에 사이트맵 데이터를 표시하는 것이 효과적입니다. 그러나 때로는 사용자 정의 생성 논리를 디자인해야 할 수도 있습니다. 예를 들어 상위 항목을 세로로만 표시하는 사용자 지정 탐색 컨트롤을 개발할 수 있습니다. 이 경우 프로그래밍 방식으로 사이트맵 파일에 액세스해야 합니다. SiteMap 클래스를 사용하면 이를 정확하게 달성할 수 있습니다.

이 SiteMap 경로에는 RootNode 및 CurrentNode라는 두 가지 중요한 속성이 있습니다. 해당 유형은 모두 SiteMapNode이며 둘 다 사이트 맵의 루트 노드와 현재 노드를 각각 참조할 수 있도록 합니다. 표 7에는 SiteMapNode 클래스의 몇 가지 중요한 속성이 나열되어 있습니다.

사이트 맵 파일

속성	설명
ChildNodes는	현재 노드의 모든 하위 노드 컬렉션을 나타냅니다.
HasChildNodes는	사이트 맵 노드에 하위 노드가 있는지 여부를 나타냅니다(true/false).
Title은	에 지정된 제목 특성 값을 반환합니다.
Url은	사이트 맵 파일에 반환합니다. 지정된 url 속성의 값
설명은	사이트 맵 파일에 지정된 설명 속성의 값을 반환합니다.
ParentNode는	현재 노드의 상위 사이트 맵 노드에 대한 참조를 나타냅니다.

표 7: SiteMapNode 클래스의 일부 중요한 속성

다음 예에서는 사이트맵 경로를 사용하여 사이트맵 파일의 단일 노드에 액세스합니다. 그런 다음 프로그래밍 방식으로 TreeView 컨트롤에 추가합니다.

SiteMapCustom.aspx라는 웹 양식을 추가합니다. 그런 다음 TreeView 컨트롤을 끌어 놓습니다. 이 웹 양식의 Page_Load 이벤트에 목록 코드를 추가합니다.

protected void Page_Load(개체 전송자, EventArgs e)
{
int 개수 = SiteMap.RootNode.ChildNodes.Count;
for (int i = 0; i < count; i++)
{
SiteMapNode smNode=SiteMap.RootNode.ChildNodes[i];
TreeNode tvNode = new TreeNode(smNode.Title, "", "", smNode.Url, "");
TreeView1.Nodes.Add(tvNode);
if(smNode.HasChildNodes)
{
int childCount=smNode.ChildNodes.Count;
for(int j = 0; j < childCount; j++)
{
SiteMapNode smChildNode = smNode.ChildNodes[j];
TreeNode tvChildNode = 새 TreeNode(smChildNode.Title,
"", "",
smChildNode.Url, "");
tvNode.ChildNodes.Add(tvChildNode);
}
}
}
}

여기에서는 먼저 루트 노드의 총 하위 노드 수를 가져옵니다. 그런 다음 루트 노드의 ChildNodes 컬렉션을 반복합니다. 반복할 때마다 TreeNode 클래스의 새 인스턴스를 만들고 생성자에 제목과 URL을 지정합니다. 그런 다음 이 TreeNode를 TreeView의 Nodes 컬렉션에 추가합니다. 그런 다음 현재 SiteMapNode에 하위 노드가 있는지 확인합니다. 있는 경우 이를 탐색하고 TreeNode 생성 프로세스를 반복합니다. 이번에는 현재 TreeNode 개체의 ChildNodes 컬렉션에 새 TreeNodes를 추가합니다.

두 가지 수준의 중첩만 있다는 것을 알고 있으므로 루프에서 2를 사용합니다. 논리를 보다 일반화하려면 재귀를 사용하여 TreeView를 채울 수 있습니다.

웹 양식을 실행하면 그림 8과 비슷한 내용이 다시 표시됩니다.

6. 안전 유지 관리를 사용하십시오.

웹사이트에서는 역할 기반 보안 모델을 구현하는 경우가 많습니다. 예를 들어 시스템 관리자, 제품 테스터, 서비스 테스터 등 애플리케이션에서 다양한 역할을 가질 수 있습니다. 이와 같은 상황에서는 사용자에게 표시되는 사이트 탐색 링크를 제어해야 하는 경우가 많습니다. 예를 들어, 현재 로그인한 사용자에게 제품 테스터 역할이 있는 경우 제품과 관련된 링크만 표시하고 다른 링크는 숨길 수 있습니다. 역할을 처리하는 한 가지 방법은 직접 코딩을 사용하는 것입니다. 그러나 이를 위해서는 모든 인증 논리를 프로그래밍 방식으로 구현해야 합니다. 다행히 사이트맵 파일과 사이트맵 데이터 소스 컨트롤은 함께 보안 조정이라는 기능을 제공합니다.

보안 점검을 테스트하려면 사이트의 멤버십 및 역할 기능을 활성화해야 합니다. web.config 파일을 열고 다음 태그를 추가합니다.

<인증 모드="양식" />
<인가>
<사용자 거부="?"></거부>
</인증>

여기에서는 인증 모드를 양식으로 설정했습니다. 익명 사용자가 사이트에 액세스하는 것을 차단하도록 인증 규칙을 설정할 수도 있습니다. 그런 다음 web.config 파일에 다음 플래그를 추가하여 역할 관리 기능을 활성화해야 합니다.

그런 다음 VS.NET 메뉴에서 "WebSite>ASP.NET 구성"을 선택하여 웹 사이트 관리 도구를 엽니다. 이 도구를 사용하여 ProductTesters 및 ServiceTesters라는 두 가지 역할을 추가합니다(그림 9 참조). ProductTesters 역할에 속한 사용자가 로그인하면 탐색 TreeView 컨트롤에 제품 관련 링크만 표시하려고 합니다. 마찬가지로 ServiceTesters 역할에 속한 사용자가 체크인하면 서비스 관련 링크만 TreeView에 표시되어야 합니다.

그림 9: 웹 사이트 관리 도구를 사용하여 역할 추가

웹 사이트 관리 도구를 사용하여 user1과 user2라는 두 명의 사용자를 만듭니다. ProductTesters 역할에 user1을 추가하고 ServiceTesters 역할에 user2를 추가합니다(그림 10 참조).

그림 10: 웹 사이트 관리 도구를 사용하여 사용자 생성

참고: 기본적으로 사용자 및 역할 정보는 웹 사이트의 App_Data 폴더 아래 ASPNETDB 데이터베이스에 저장됩니다. 이 데이터베이스가 존재하지 않는 경우 ASP.NET에서 자동으로 생성됩니다.

이제 새 사이트맵 파일인 SecurityTrimming.sitemap을 웹사이트에 추가하고 다음 태그를 입력하세요.

<?xml 버전="1.0" 인코딩="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
＜siteMapNode url="default.aspx" title="홈" 설명="내 웹 사이트">
＜siteMapNode title="제품" 역할="제품 테스터">
＜siteMapNode url="~/products/product1.aspx" title="첫 번째 제품" />
＜siteMapNode url="~/products/product2.aspx" title="두 번째 제품" />
</siteMapNode>
<siteMapNode title="서비스" 역할="서비스테스터">
＜siteMapNode url="~/services/service1.aspx" title="첫 번째 서비스" />
<siteMapNode url="~/services/service2.aspx" title="두 번째 서비스" />
</siteMapNode>
<siteMapNode url="contact.aspx" title="문의하기" />
</siteMapNode>
</사이트맵>

여기에 있는 대부분의 마크업은 web.sitemap 파일과 동일합니다. 그러나 제품 및 서비스에는 siteMapNodes:roles라는 중요한 속성이 추가되었습니다. 역할 속성은 이 노드와 해당 하위 노드에 액세스할 수 있는 역할을 지정합니다. 제품과 연결된 링크는 ProductTesters 역할에 속한 사용자에게만 표시되므로 제품 siteMapNode의 역할 속성을 ProductTesters로 설정합니다. 동일한 논리에 따라 서비스 siteMapNode의 역할 속성을 ServiceTesters로 설정합니다. 지정된 역할 속성이 없는 SiteMapNodes는 모든 사용자가 액세스할 수 있습니다. 또한 제품 및 서비스 노드에는 더 이상 지정된 URL 속성이 없습니다.

이제 SiteMap 데이터 소스 제어가 요구 사항에 따라 작동할 수 있도록 사이트 맵 공급자를 구성하고 보안 혁신을 활성화해야 합니다. web.config 파일에 다음 태그를 추가합니다.

여기에서 <siteMap> 섹션을 추가하고 SecurityTrimming.sitemap 파일을 가리키는 공급자를 지정합니다. 여기서 securityTrimmingEnabled 속성은 보안 트리밍을 지원하기 위해 true로 설정되어 있습니다. <siteMap> 섹션을 구성한 후 SiteMap 데이터 소스 컨트롤은 이 섹션에서 이러한 설정을 자동으로 "선택"합니다.

Login.aspx라는 새 웹 양식을 웹 사이트에 추가합니다. 그런 다음 로그인 컨트롤을 끌어서 DestinationPageUrl 속성을 "~/SiteMapDataSourceDemo.aspx"로 설정합니다. 이전에 SiteMapDataSourceDemo.aspx를 개발했습니다.

Login.aspx를 실행하고(그림 11 참조) user1의 자격 증명을 입력합니다.

그림 11: 로그인 페이지

성공적으로 로그인하면 그림 12에 표시된 TreeView가 표시됩니다. user1은 ProductTesters 역할에 속하므로 서비스에 대한 링크는 숨겨집니다.

그림 12: 안전 개조 사용

7. 요약

사이트맵은 XML 파일로, 웹 사이트 구조에 대한 모든 세부 정보가 포함되어 있습니다. 사이트맵 파일을 사용하여 탐색 구조를 생성할 수 있습니다. 사이트 맵 파일을 사용하는 세 가지 일반적인 방법은 SiteMapPath 컨트롤 사용, SiteMap 데이터 소스 컨트롤 사용 또는 SiteMap 클래스 사용입니다. 보안 트리밍이라는 기능을 사용하여 생성된 탐색 링크에 대한 역할 기반 보안을 지원할 수도 있습니다. 이러한 컨트롤과 클래스를 함께 사용하면 웹 사이트에 대한 전문적인 탐색 구조를 만드는 데 도움이 됩니다.