브라우저에서 미리 보는 페이지 유형
마지막 업데이트 날짜
2024년 4월 25일
Dreamweaver 웹 페이지를 통해 XML 및 XSLT를 사용합니다.
메모
Dreamweaver의 현재 버전 이후로 사용자 인터페이스가 간소화되었습니다. 따라서 이 문서에 설명된 옵션 중에 Dreamweaver의 현재 버전에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.
웹 페이지를 통해 XML 및 XSL 사용
XML(Extensible Markup Language)은 정보를 구조화할 수 있는 언어입니다. HTML과 마찬가지로 XML은 태그를 사용하여 정보를 구조화할 수 있지만, XML 태그는 HTML 태그처럼 미리 정의되어 있지 않습니다. 대신 XML은 데이터 구조(스키마)를 가장 잘 정의하는 태그를 만들 수 있게 해줍니다. 태그는 다른 태그 안에 중첩되어 상위 태그와 하위 태그의 스키마를 만듭니다.대부분의 HTML 태그와 마찬가지로, XML 스키마의 모든 태그에는 여는 태그와 닫는 태그가 있습니다.
다음 예제에서는 XML 파일의 기본 구조를 보여 줍니다.
<?xml version="1.0">
<mybooks>
<book bookid="1">
<pubdate>03/01/2004</pubdate>
<title>Displaying XML Data with Adobe Dreamweaver</title>
<author>Charles Brown</author>
</book>
<book bookid="2">
<pubdate>04/08/2004</pubdate>
<title>Understanding XML</title>
<author>John Thompson</author>
</book>
</mybooks>
이 예제에서 각 마스터 <book> 태그는 세 개의 하위 태그인 <pubdate>, <title>, 그리고 <author>를 포함합니다. 하지만 각 <book> 태그는 스키마에서 한 레벨 위에 있는 <mybooks> 태그의 하위 태그이기도 합니다. 태그를 다른 태그 안에 적절히 중첩하고 각 여는 태그에 해당하는 닫는 태그를 할당하기만 하면 XML 태그를 원하는 방식으로 이름을 지정하고 구조화할 수 있습니다.
XML 문서에는 서식이 포함되지 않으며, 단순히 구조화된 정보의 컨테이너입니다. XML 스키마를 만든 후에는 XSL(Extensible Stylesheet Language)을 사용하여 정보를 표시할 수 있습니다. CSS(Cascading Style Sheets)가 HTML 형식을 지정할 수 있게 해주는 것처럼, XSL은 XML 데이터 형식을 지정할 수 있게 해줍니다. XSL 파일에서 스타일, 페이지 요소, 레이아웃 등을 정의하고 이를 XML 파일에 첨부하여 사용자가 브라우저에서 XML 데이터를 볼 때 XSL 파일에서 정의한 대로 데이터가 서식 지정되도록 할 수 있습니다. 콘텐츠(XML 데이터)와 프레젠테이션(XSL 파일로 정의됨)이 완전히 분리되어 있어 웹 페이지에서 정보가 표시되는 방식을 더욱 효과적으로 제어할 수 있습니다. 본질적으로 XSL은 XML을 위한 프레젠테이션 기술이며, 주요 출력은 HTML 페이지입니다.
XSLT(Extensible Stylesheet Language Transformations)는 XSL의 하위 집합 언어로, 실제로 웹 페이지에서 XML 데이터를 표시하고 XSL 스타일과 함께 HTML 형태의 읽기 쉽고 스타일이 적용된 정보로 '변환'할 수 있게 해줍니다.Dreamweaver를 사용하여 애플리케이션 서버나 브라우저를 통해 XSL 변환을 수행할 수 있는 XSLT 페이지를 만들 수 있습니다. 서버측 XSL 변환에서는 서버가 XML과 XSL을 변환하여 페이지에 표시하는 작업을 수행합니다. 클라이언트측 변환에서는 브라우저(예: Internet Explorer)가 해당 작업을 수행합니다.
궁극적으로 취하는 접근 방식(서버측 변환 대 클라이언트측 변환)은 최종 결과로 달성하고자 하는 목표, 사용 가능한 기술, XML 소스 파일에 대한 액세스 레벨 및 기타 요소에 따라 달라집니다. 두 방법은 모두 장단점을 가지고 있습니다. 예를 들어, 서버측 변환은 모든 브라우저에서 작동하지만 클라이언트측 변환은 최신 브라우저에서만 가능합니다(Internet Explorer 6, Netscape 8, Mozilla 1.8, Firefox 1.0.2). 서버측 변환을 사용하면 자체 서버나 웹의 다른 곳에서 XML 데이터를 동적으로 표시할 수 있지만, 클라이언트측 변환은 자체 웹 서버에 로컬로 호스트된 XML 데이터를 사용해야 합니다. 마지막으로, 서버측 변환은 구성된 애플리케이션 서버에 페이지를 배포해야 하지만, 클라이언트측 변환은 웹 서버에 대한 액세스만 필요합니다.
XML 이해에 도움이 되는 튜토리얼은 www.adobe.com/go/vid0165_kr 사이트를 참조하십시오.
서버측 XSL 변환
Dreamweaver는 서버측 XSL 변환을 수행할 수 있는 XSLT 페이지를 만드는 방법을 제공합니다. 애플리케이션 서버가 XSL 변환을 수행할 때, XML 데이터가 포함된 파일은 자체 서버에 있거나 웹의 다른 곳에 있을 수 있습니다. 또한, 모든 브라우저에서 변환된 데이터를 표시할 수 있습니다. 그러나 서버측 변환을 위한 페이지 배포는 다소 복잡하며, 애플리케이션 서버에 대한 액세스가 필요합니다.
서버 측 XSL 변환으로 작업할 때, Dreamweaver를 사용하여 완전한 HTML 문서(전체 XSLT 페이지)를 생성하거나 HTML 문서의 일부를 생성하는 XSLT 조각을 만들 수 있습니다.전체 XSLT 페이지는 일반 HTML 페이지와 유사합니다. <body> 태그와 <head> 태그가 포함되어 있어 페이지에서 HTML과 XML 데이터의 조합을 표시할 수 있습니다. XSLT 조각은 별도의 문서에서 사용되며 형식이 지정된 XML 데이터를 표시하는 코드 조각입니다. 전체 XSLT 페이지와 달리, <body>나 <head> 태그가 없는 독립적인 파일입니다. 자체 페이지에서 XML 데이터를 표시하려면 전체 XSLT 페이지를 만들고 XML 데이터를 바인딩합니다. 반면에 기존 동적 페이지의 특정 섹션에 XML 데이터를 표시하려는 경우(예: 스포츠용품 웹 스토어의 동적 홈 페이지에서 RSS 피드의 스포츠 점수가 페이지 한쪽에 표시되는 경우)에는 XSLT 조각을 만들고 동적 페이지에 참조를 삽입합니다. XSLT 조각을 만들고 다른 동적 페이지와 함께 사용하여 XML 데이터를 표시하는 것이 더 일반적인 시나리오입니다.
이러한 유형의 페이지를 만드는 첫 번째 단계는 XSLT 조각을 만드는 것입니다. 이는 동적 페이지에서 최종적으로 표시하려는 XML 데이터의 레이아웃, 형식 등이 포함된 별도의 파일입니다. XSLT 조각을 만든 후에는 동적 페이지(예: PHP 또는 ColdFusion 페이지)에 해당 조각에 대한 참조를 삽입합니다.삽입된 프래그먼트 참조는 서버측 포함(SSI)과 매우 비슷하게 작동합니다. 형식이 지정된 XML 데이터(프래그먼트)는 별도 파일에 있으며, Design view에서는 동적 페이지 자체에 프래그먼트의 플레이스홀더가 나타납니다.브라우저가 프래그먼트에 대한 참조가 포함된 동적 페이지를 요청하면, 서버는 포함된 명령을 처리하고 플레이스홀더 대신 프래그먼트의 형식이 지정된 내용이 나타나는 새 문서를 만듭니다.
A. 브라우저: 동적 페이지 요청 B. 웹 서버가 페이지를 찾아 애플리케이션 서버로 전달합니다 C. 애플리케이션 서버: 페이지에서 지침을 검색하고 XSLT 부분 가져오기 D. 애플리케이션 서버: 변환 수행(XSLT 부분 읽기, xml 데이터 가져오기 및 서식 지정) E. 애플리케이션 서버: 변환된 부분을 페이지에 삽입하여 다시 웹 서버에 전달 F. 웹 서버: 브라우저에 마무리된 페이지 전송
XSL Transformation 서버 동작을 사용하여 동적 페이지에 XSLT 프래그먼트에 대한 참조를 삽입할 수 있습니다.참조를 삽입하면 Dreamweaver가 사이트의 루트 폴더에 런타임 라이브러리 파일이 포함된 includes/MM_XSLTransform/ 폴더를 생성합니다.애플리케이션 서버는 지정된 XML 데이터를 변환할 때 이 파일에 정의된 함수를 사용합니다.이 파일은 XML 데이터와 XSLT 프래그먼트를 가져오고, XSL 변환을 수행하며, 웹 페이지에 결과를 출력하는 역할을 합니다.
XSLT 프래그먼트가 포함된 파일, 데이터가 포함된 XML 파일, 생성된 런타임 라이브러리 파일이 모두 서버에 있어야 페이지가 올바르게 표시됩니다.(RSS 피드의 원격 XML 파일과 같이 원격 XML 파일을 데이터 소스로 선택하면 해당 파일은 당연히 인터넷의 다른 곳에 있어야 합니다.)
Dreamweaver를 사용하여 서버측 변환과 함께 사용할 전체 XSLT 페이지를 만들 수도 있습니다.전체 XSLT 페이지는 XSLT 프래그먼트와 정확히 동일한 방식으로 작동하지만, XSL Transformation 서버 동작을 사용하여 전체 XSLT 페이지에 대한 참조를 삽입할 때 HTML 페이지의 전체 내용을 삽입하게 됩니다.따라서 컨테이너 페이지 역할을 하는 동적 페이지(.cfm, .php 또는 .asp 페이지)는 참조를 삽입하기 전에 모든 HTML을 지워야 합니다.
Dreamweaver는 ColdFusion, ASP, PHP 페이지에 대한 XSL 변환을 지원합니다.
메모
서버측 변환을 수행하려면 서버가 올바르게 구성되어 있어야 합니다.자세한 내용은 서버 관리자에게 문의하십시오.
클라이언트측 XSL 변환
애플리케이션 서버를 사용하지 않고도 클라이언트에서 XSL 변환을 수행할 수 있습니다. Dreamweaver를 사용하면 이러한 작업을 수행할 전체 XSLT 페이지를 만들 수 있지만, 클라이언트측 변환을 사용하려면 표시할 데이터가 포함된 XML 파일을 조작해야 합니다. 또한 클라이언트측 변환은 Internet Explorer 6, Netscape 8, Mozilla 1.8, Firefox 1.0.2 등의 최신 브라우저에서만 작동합니다.
먼저 전체 XSLT 페이지를 만들고 XML 데이터 소스를 첨부합니다. Dreamweaver에서 새 페이지를 만들면 데이터 소스를 첨부하라는 메시지가 표시됩니다. 처음부터 새로 XSLT 페이지를 만들거나 기존 HTML 페이지를 XSLT 페이지로 변환할 수 있습니다. 기존 HTML 페이지를 XSLT 페이지로 변환할 경우 [바인딩] 패널(윈도우 > 바인딩)을 사용하여 XML 데이터 소스를 첨부해야 합니다.
XSLT 페이지를 만들었으면 XML 파일 자체에 XSLT 페이지에 대한 참조를 삽입하여 XML 데이터가 들어 있는 .xml 파일에 연결해야 합니다. HTML 페이지의 <head> 섹션에 외부 CSS 스타일 시트에 대한 참조를 삽입하는 것과 같습니다. 사이트 방문자는 브라우저에서 XSLT 페이지가 아니라 XML 파일을 보게 됩니다. 사이트 방문자가 페이지를 볼 때 브라우저에서 XSL 변환을 수행하고 링크된 XSLT 페이지로 서식이 지정된 XML 데이터를 표시합니다.
링크된 XSLT와 XML 페이지 사이의 관계는 개념적으로 비슷하지만 외부 CSS/HTML 페이지 모델과 다릅니다. 텍스트와 같은 내용이 들어 있는 HTML 페이지의 경우 외부 스타일 시트를 사용하여 해당 내용의 서식을 지정합니다. HTML 페이지는 내용 및 외부 CSS 코드(사용자에게는 표시되지 않음)를 정의하고 표시를 결정합니다. XSLT 및 XML을 사용하면 이와 반대로 XML 파일(행 형식에서 사용자에게 표시되지 않음)이 내용을 결정하고 XSLT 페이지가 표시를 결정합니다. XSLT 페이지에는 표준 HTML에 일반적으로 들어 있는 표, 레이아웃, 그래프 등이 들어 있습니다. 사용자가 브라우저에서 XML 파일을 보면 XSLT 페이지가 내용 서식을 지정합니다.
A. 브라우저: XML 파일 요청 B. 서버가 XML 파일을 브라우저로 보내어 응답합니다 C. 브라우저: XML 지시문을 읽고 XSLT 파일 호출 D. 서버: 브라우저에 XSLT 파일 전송 E. 브라우저: XML 데이터를 변환하여 브라우저에 표시
Dreamweaver를 사용하여 XSLT 페이지를 XML 페이지에 연결하면 Dreamweaver가 XML 페이지의 상위에 적절한 코드를 삽입합니다.연결하려는 XML 페이지를 소유하고 있다면(즉, XML 파일이 웹 서버에만 있는 경우) Dreamweaver를 사용하여 두 페이지를 연결하는 적절한 코드를 삽입하기만 하면 됩니다.XML 파일을 소유하고 있으면 클라이언트가 수행하는 XSL 변환이 완전히 동적입니다.즉, XML 파일의 데이터를 업데이트할 때마다 연결된 XSLT 페이지를 사용하는 모든 HTML 출력이 새 정보로 자동 업데이트됩니다.
메모
클라이언트 측 변환에 사용하는 XML 및 XSL 파일은 동일한 디렉터리에 있어야 합니다.그렇지 않으면 브라우저가 XML 파일을 읽고 변환을 위한 XSLT 페이지를 찾지만 XSLT 페이지의 상대 링크로 정의된 에셋(스타일시트, 이미지 등)을 찾지 못합니다.
연결하려는 XML 페이지를 소유하지 않은 경우(예: 웹의 RSS 피드에서 XML 데이터를 사용하려는 경우) 워크플로가 좀 더 복잡합니다.외부 소스의 XML 데이터를 사용하여 클라이언트 측 변환을 수행하려면 먼저 XML 소스 파일을 XSLT 페이지가 있는 동일한 디렉터리로 다운로드해야 합니다.XML 페이지가 로컬 사이트에 있으면 Dreamweaver를 사용하여 XSLT 페이지에 연결하는 적절한 코드를 추가하고, 두 페이지(다운로드된 XML 파일과 연결된 XSLT 페이지)를 모두 웹 서버에 게시할 수 있습니다.사용자가 브라우저에서 XML 페이지를 볼 때, XSLT 페이지가 이전 예제와 마찬가지로 콘텐츠의 형식을 지정합니다.
외부 소스에서 가져온 XML 데이터에 클라이언트측 XSL 변환을 수행하는 단점은 XML 데이터가 부분적으로만 "동적"이라는 것입니다. 다운로드하고 변경하는 XML 파일은 웹의 다른 곳에 있는 파일의 단순한 "스냅샷"일 뿐입니다. 웹상의 원본 XML 파일이 변경되면 파일을 다시 다운로드하고, XSLT 페이지에 링크한 다음, XML 파일을 웹 서버에 다시 게시해야 합니다. 브라우저는 원본 XML 소스 파일에 포함된 데이터가 아니라 웹 서버의 XML 파일에서 받은 데이터만 렌더링합니다.
XML 데이터 및 반복 요소
반복 영역 XSLT 오브젝트를 사용하면 XML 파일의 반복 요소를 페이지 내에 표시할 수 있습니다.XML 데이터 자리 표시자가 포함된 모든 지역을 반복 지역으로 만들 수 있습니다. 그러나 가장 일반적인 지역은 테이블, 테이블 행 또는 일련의 테이블 행입니다.
다음 예는 반복 지역 XSLT 오브젝트가 레스토랑의 메뉴 정보를 표시하는 테이블 행에 적용되는 방법을 보여줍니다.초기 행은 XML 스키마의 세 가지 다른 요소를 표시합니다: 항목, 설명, 가격. 반복 지역 XSLT 개체가 테이블 행에 적용되고 애플리케이션 서버나 브라우저에서 페이지가 처리되면, 각각의 새로운 테이블 행에 고유한 데이터가 삽입되어 테이블이 반복됩니다.
문서 창의 요소에 반복 지역 XSLT 오브젝트를 적용하면 반복 지역 주위에 얇은 탭이 있는 회색 윤곽선이 나타납니다.브라우저에서 작업을 미리볼 때([파일] > [브라우저에서 미리보기]) 회색 윤곽선이 사라지고 선택 영역이 확장되어 이전 그림과 같이 XML 파일에서 지정된 반복 요소가 표시됩니다.
페이지에 반복 지역 XSLT 개체를 추가하면 문서 창의 XML 데이터 자리 표시자 길이가 줄어듭니다. 이는 Dreamweaver가 XML 데이터 자리 표시자의 XPath (XML 경로 언어) 표현식을 업데이트하여 반복 요소의 경로와 상대적이 되도록 하기 때문입니다.
예를 들어, 다음 코드는 반복 지역 XSLT 오브젝트가 적용되지 않은 두 개의 동적 자리 표시자가 포함된 테이블용 코드입니다:
<table width="500" border="1">
<tr>
<td><xsl:value-of select="rss/channel/item/title"/></td>
</tr>
<tr>
<td><xsl:value-of select="rss/channel/item/description"/></td>
</tr>
</table>
다음 코드는 Repeating Region XSLT 오브젝트가 적용된 동일한 테이블의 코드입니다:
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
<tr>
<td><xsl:value-of select="description"/></td>
</tr>
</table>
</xsl:for-each>
이전 예제에서 Dreamweaver는 반복 지역 내에 포함되는 항목(제목 및 설명)에 대한 XPath를 전체 문서가 아닌 <xsl:for-each> 태그를 둘러싸는 XPath에 상대적이 되도록 업데이트했습니다.
Dreamweaver는 다른 경우에도 컨텍스트 상대적 XPath 식을 생성합니다.예를 들어 이미 반복 지역 XSLT 객체가 적용된 테이블에 XML 데이터 플레이스홀더를 끌어다 놓으면 Dreamweaver가 자동으로 <xsl:for-each> 태그를 둘러싸는 기존 XPath에 상대적인 XPath를 표시합니다.
XML 데이터 미리보기
브라우저에서 미리 보기([파일] > 브라우저에서 미리 보기)를 사용하여 XSLT 프래그먼트나 전체 XSLT 페이지에 삽입한 XML 데이터를 미리 볼 때 XSL 변환을 수행하는 엔진은 상황에 따라 달라집니다.XSLT 프래그먼트가 포함된 동적 페이지의 경우 애플리케이션 서버가 항상 변환을 수행합니다.다른 경우에는 Dreamweaver나 브라우저가 변환을 수행할 수 있습니다.
다음 테이블은 브라우저에서 미리 보기를 사용할 때의 상황과 각 변환을 수행하는 엔진을 요약한 것입니다.
|
|
데이터 변환을 수행하는 엔진 |
|---|---|
|
XSLT 부분이 들어 있는 동적 페이지 |
애플리케이션 서버 |
|
XSLT 부분 또는 전체 XSLT 페이지 |
Dreamweaver |
|
전체 XSLT 페이지에 대한 링크가 있는 XML 파일 |
브라우저 |
다음 주제는 필요에 따라 적절한 미리 보기 방법을 결정하는 데 도움이 되는 지침을 제공합니다.
서버 측 변환에 대한 페이지 미리 보기
서버측 변환의 경우 사이트 방문자가 최종적으로 보는 콘텐츠는 애플리케이션 서버에 의해 변환됩니다.서버측 변환과 함께 사용할 XSLT 및 동적 페이지를 작성할 때는 XSLT 프래그먼트 자체보다는 XSLT 프래그먼트가 포함된 동적 페이지를 미리 보는 것이 항상 바람직합니다.전자의 시나리오에서는 애플리케이션 서버를 사용하므로 사이트 방문자가 페이지를 방문할 때 보게 될 내용과 미리 보기가 일치하도록 보장됩니다.후자의 시나리오에서는 Dreamweaver가 변환을 수행하며 약간 일관성이 없는 결과를 제공할 수 있습니다.XSLT 프래그먼트를 작성하는 동안 Dreamweaver를 사용하여 미리보기할 수 있지만, XSLT 프래그먼트를 삽입한 후 애플리케이션 서버를 사용하여 동적 페이지를 미리보기하면 데이터 렌더링의 가장 정확한 결과를 볼 수 있습니다.
클라이언트측 변환에 대한 페이지 미리 보기
클라이언트측 변환의 경우 사이트 방문자가 최종적으로 보는 콘텐츠는 브라우저에 의해 변환됩니다.XML 파일에서 XSLT 페이지로 링크를 추가하여 이를 수행합니다.Dreamweaver에서 XML 파일을 열고 브라우저에서 미리 보면 브라우저가 XML 파일을 로드하고 변환을 수행하도록 합니다.이렇게 하면 사이트 방문자와 동일한 경험을 제공합니다.
하지만 이 방법을 사용하면 브라우저가 XML을 변환하고 내부적으로 HTML을 생성하기 때문에 페이지를 디버그하기가 더 어려워집니다. 생성된 HTML을 디버그하기 위해 브라우저의 [소스 보기] 옵션을 선택하면 페이지 렌더링을 담당하는 전체 HTML(태그, 스타일 등)이 아닌 브라우저가 받은 원본 XML만 볼 수 있습니다. 소스 코드를 볼 때 전체 HTML을 보려면 대신 브라우저에서 XSLT 페이지를 미리보기해야 합니다.
전체 XSLT 페이지와 XSLT 부분 미리 보기
전체 XSLT 페이지와 XSLT 조각을 만들 때는 데이터가 올바르게 표시되는지 확인하기 위해 작업을 미리보기하는 것이 좋습니다.전체 XSLT 페이지나 XSLT 조각을 표시하기 위해 [브라우저에서 미리보기]를 사용하면 Dreamweaver가 내장된 변환 엔진을 사용하여 변환을 수행합니다. 이 방법은 빠른 결과를 제공하며 페이지를 점진적으로 작성하고 디버그하기 쉽게 만듭니다. 또한 브라우저에서 [소스 보기] 옵션을 선택하여 전체 HTML(태그, 스타일 등)을 볼 수 있는 방법을 제공합니다.
메모
이 미리보기 방법은 클라이언트나 서버 중 어느 것을 사용하여 데이터를 변환하든 상관없이 XSLT 페이지 작성을 시작할 때 일반적으로 사용됩니다.
