사용 안내서 취소

XML 및 XSLT 정보

검색

마지막 업데이트 날짜 2022년 11월 28일

Dreamweaver 웹 페이지를 통해 XML 및 XSLT를 사용합니다.

참고:

Dreamweaver CC 이상 버전에서 사용자 인터페이스가 간소화되었습니다. 따라서 이 문서에 설명된 옵션 중에 Dreamweaver CC 이상 버전에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.

웹 페이지를 통해 XML 및 XSL 사용

XML(Extensible Markup Language)은 정보를 구조화할 수 있는 언어입니다. XML을 사용하면 HTML과 마찬가지로 태그를 사용하여 정보를 구조화할 수 있지만, XML 태그는 HTML 태그처럼 미리 정의되지는 않습니다. 그 대신 XML을 사용하면 데이터 구조(스키마)를 가장 잘 정의하는 태그를 만들 수 있습니다. 태그는 다른 태그 안에 중첩되어 부모 태그 및 자식 태그의 스키마를 만들 수 있습니다. XML 스키마의 모든 태그는 대부분의 HTML 태그처럼 열기 태그 및 닫기 태그를 갖고 있습니다.

다음 예제에서는 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(겹쳐 놓기 스타일 시트s)를 사용하여 HTML의 서식을 지정하는 것처럼, XSL을 사용하여 XML 데이터의 서식을 지정할 수 있습니다. XSL 파일에서 스타일, 페이지 요소, 레이아웃 등을 정의한 후 XML 파일에 연결해 놓으면 사용자가 브라우저에서 XML 데이터를 볼 때 데이터의 서식이 XSL 파일에 정의된 대로 지정되어 표시됩니다. 내용(XML 데이터)과 표현(XSL 파일에서 정의)이 서로 완전히 구분되므로 웹 페이지에 정보가 표시되는 방식을 완벽하게 제어할 수 있습니다. 사실 XSL은 XML의 표시 기술로서 기본 출력은 HTML 페이지입니다.

XSLT(Extensible Stylesheet Language Transformations)는 XSL의 한 언어로서 XML 데이터를 실제로 웹 페이지에 표시하고 XSL 스타일과 함께 XML 데이터를 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 페이지(전체 XSLT 페이지) 또는 HTML 문서의 일부를 만드는 XSLT 부분을 만들 수 있습니다. 전체 XSLT 페이지는 정규 HTML 페이지와 유사하며, <body> 태그와 <head> 태그를 포함하고 있고 페이지에 HTML 및 XML 데이터 조합을 표시할 수 있도록 합니다. XSLT 부분은 서식이 지정된 XML 데이터를 표시하는 코드 부분이며 별도의 문서에 사용됩니다. 전체 XSLT 페이지와는 달리, XSLT 부분은 <body> 또는 <head> 태그가 없는 독립적인 파일입니다. 고유의 페이지에 XML 데이터를 표시하려면 전체 XSLT 페이지를 만들고 XML 데이터를 이 페이지에 바인딩합니다. 반면, 기존 동적 페이지의 특정 섹션에 XML 데이터를 표시하려면 XSLT 부분을 만들고 동적 페이지에 해당 참조를 삽입합니다. 예를 들어 RSS 피드의 스포츠 점수가 페이지 한 쪽에 표시되는 스포츠용품점의 동적 홈 페이지가 이에 해당합니다. XSLT 부분을 만든 후 다른 동적 페이지와 함께 사용하여 XML 데이터를 표시하는 시나리오는 일반적으로 많이 사용됩니다.

이러한 페이지 유형을 만드는 첫 번째 단계는 XSLT 부분을 만드는 것입니다. 이것은 동적 페이지를 표시하려는 경우 XML 데이터의 레이아웃, 서식 등이 들어 있는 별도의 파일입니다. XSLT 부분을 만들었으면 PHP나 ColdFusion 페이지와 같은 동적 페이지에 해당 XSLT 부분에 대한 참조를 삽입합니다. 삽입된 부분 참조는 SSI(Server Side Include)와 매우 유사하게 작동합니다. 서식이 적용된 XML 데이터(부분)는 별도의 파일에 상주하며, 디자인 뷰에서 단편에 대한 플레이스홀더가 동적 페이지 자체에 표시됩니다. 브라우저에서 XSLT 부분 참조가 포함된 동적 페이지를 요청하면 서버에서는 포함된 명령을 처리한 후 XML 데이터 플레이스홀더 대신 서식이 적용된 부분 내용이 표시되는 새 문서를 만듭니다.

A. 브라우저: 동적 페이지 요청 B. 웹 서버: 페이지를 검색하여 애플리케이션 서버에 전달 C. 애플리케이션 서버: 페이지에서 지침을 검색하고 XSLT 부분 가져오기 D. 애플리케이션 서버: 변환 수행(XSLT 부분 읽기, xml 데이터 가져오기 및 서식 지정) E. 애플리케이션 서버: 변환된 부분을 페이지에 삽입하여 다시 웹 서버에 전달 F. 웹 서버: 브라우저에 마무리된 페이지 전송

XSL 변환 서버 비헤이비어를 사용하여 동적 페이지에 XSLT 부분에 대한 참조를 삽입합니다. 참조를 삽입하면 Dreamweaver에서는 런타임 라이브러리 파일이 포함된 사이트의 루트 폴더에 includes/MM_XSLTransform/ 폴더를 생성합니다. 애플리케이션 서버는 지정된 XML 데이터를 변환할 때 이 파일에서 정의된 기능을 사용합니다. 이 파일은 XML 데이터 및 XSLT 부분을 가져오고 XSL 변환을 수행하며 그 결과를 웹 페이지에 출력하는 역할을 담당합니다.

페이지를 올바르게 표시하려면 XSLT 부분이 포함된 파일, 데이터가 포함된 XML 파일 및 생성된 런타임 라이브러리 파일이 모두 서버에 있어야 합니다. 예를 들어 데이터 소스로 RSS 피드의 원격 XML 파일을 선택할 경우 이 파일은 인터넷에 상주하고 있어야 합니다.

Dreamweaver를 사용하여 서버측 변환에 사용할 전체 XSLT 페이지를 만들 수도 있습니다. 전체 XSLT 페이지는 XSLT 부분과 동일한 방식으로 작동합니다. XSL 변환 서버 비헤이비어를 사용하여 전체 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 스키마의 세 가지 다른 요소인 item, description 및 price를 보여 줍니다. 반복 영역 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>

다음은 반복 영역 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에서 변환을 수행하여 약간 다른 결과가 나타날 수 있습니다. Dreamweaver를 사용하면 작성하는 동안 XSLT 부분을 미리 볼 수 있지만 XSLT 부분을 삽입한 후 애플리케이션 서버를 사용하여 동적 페이지를 미리 보면 가장 정확한 데이터 렌더링 결과를 볼 수 있습니다.

클라이언트측 변환에 대한 페이지 미리보기

클라이언트측 변환의 경우 사이트 방문자가 보는 내용은 브라우저에서 변환됩니다. XML 파일을 XSLT 페이지에 추가하면 됩니다. Dreamweaver에서 XML 파일을 열고 브라우저에서 미리 볼 경우 브라우저에서 XML 파일을 로드하여 변환을 수행하게 할 수 있습니다. 그러면 사이트 방문자가 보는 것과 똑같이 볼 수 있습니다.

하지만 이 방법을 사용하면 브라우저가 XML을 변환하고 내부적으로 HTML을 생성하므로 페이지의 디버깅이 더욱 어려워집니다. 브라우저의 [소스 보기] 옵션을 선택하여 생성된 HTML을 디버깅할 경우 페이지 렌더링을 담당하는 전체 HTML(태그, 스타일 등)이 아니라 브라우저에서 받은 원래 XML만 보게 됩니다. 소스 코드를 볼 때 전체 HTML을 보려면 브라우저에서 XSLT 페이지를 미리보기해야 합니다.

전체 XSLT 페이지와 XSLT 부분 미리보기

전체 XSLT 페이지와 XSLT 부분을 만들 경우 미리보기를 통해 데이터가 제대로 표시되는지 확인할 수 있습니다. [브라우저에서 미리보기]를 사용하여 전체 XSLT 페이지나 XSLT 부분을 표시할 경우 Dreamweaver에서는 내장 변환 엔진을 사용하여 변환을 수행합니다. 이 방법을 사용하면 결과를 빨리 얻고 보다 쉽게 페이지를 추가로 작성하고 디버깅할 수 있습니다. 또한 브라우저에서 [소스 보기] 옵션을 선택하여 전체 HTML(태그, 스타일 등)을 볼 수도 있습니다.

참고:

이 미리보기 방법은 클라이언트를 사용하여 데이터를 변환할지 아니면 서버를 사용하여 데이터를 변환할지에 관계없이 XSLT 페이지 작성을 시작할 때 주로 사용됩니다.

유사 검색

쉽고 빠르게 지원 받기

신규 사용자이신가요?