- XSLT를 웹 브라우저에서 실행되는 클라이언트 측 빌드 시스템처럼 사용해 XML 데이터를 HTML로 변환하고, 정적 사이트 생성기의 복잡성을 줄일 수 있음
- 일반적인 정적 사이트는
.json, .md, .txt 같은 데이터와 Hugo, Next.js, Astro 같은 빌드 시스템, 정적 HTML 출력으로 구성되지만, 큰 프레임워크는 단순한 Markdown 블로그에도 과한 복잡성을 만들 수 있음
- HTML과 CSS만 쓰려 하면 여러 페이지의 헤더와 푸터를 직접 복사해야 하고, HTML import는 없으며 Web Component는 JavaScript 엔진이 필요하다는 제약이 있음
- XML 문서에
<?xml-stylesheet type="text/xsl" href="blog.xsl"?>를 추가하고 XSLT 템플릿을 작성하면 브라우저가 방문 시점에 HTML 출력을 생성할 수 있음
- 이 방식은 JavaScript 없이 정적 파일로 배포할 수 있지만, 모든 것을 대체하는 완벽한 해법은 아니며 웹 개발 도구함에 추가할 수 있는 또 다른 선택지임
정적 사이트 빌드의 복잡성
- 일반적인 정적 웹사이트 제작 흐름은 데이터, 빌드 시스템, 정적 HTML 출력으로 나뉨
- 데이터는
.json, .md, .txt 같은 파일로 저장됨
- 빌드 시스템 예시는 Hugo, Next.js, Astro 등이 있음
- 최종 결과물은 정적 HTML임
- 프레임워크를 제거하고 단순한 HTML과 CSS만 쓰고 싶어도, 페이지가 많아지면 공통 헤더와 푸터를 계속 복사해야 함
- 대안으로 떠올릴 수 있는 선택지는 각각 제약이 있음
- HTML import는 존재하지 않음
- Web Component는 JavaScript가 필요하고, 따라서 JavaScript 엔진이 필요함
브라우저를 빌드 시스템으로 쓰는 발상
- 웹 브라우저는 이미
text/html, text/markdown, application/xml 같은 여러 형식을 이해할 수 있음
- 브라우저를 데이터에서 HTML을 만드는 시스템으로 쓰면, 별도 빌드 도구 없이 웹 표준 기반 흐름을 만들 수 있음
- RSS 피드를 더 보기 좋게 표시하려는 과정에서 XSLT를 XML 문서용 스타일시트로 사용할 수 있음을 발견함
- XML은 HTML과 비슷하게 보이지만 웹 데이터에만 한정되지 않는 데이터 표현 방식이며, XML spec을 통해 확인할 수 있음
XML에서 HTML로 변환하는 방식
- XML 문서는 블로그 글 같은 데이터를 담을 수 있음
<?xml version="1.0"?>
<blog>
<post id="42" publishedAt="2025-06-26">
<title>Hello XSLT</title>
<tags>…</tags>
</post>
</blog>
- XML 문서에 XSL 스타일시트를 연결하는 선언을 추가할 수 있음
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="blog.xsl"?>
<blog>
<post id="42" publishedAt="2025-06-26">
<title>Hello XSLT</title>
<tags>…</tags>
</post>
</blog>
- XSLT 템플릿은 XML 입력을 받아 HTML 구조를 출력함
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">;
<xsl:output method="html" indent="yes" />
<xsl:template match="/">
<html>
<head> … </head>
<body> … </body>
</html>
</xsl:template>
</xsl:stylesheet>
- XSLT는
(XML) => HTML 형태로 볼 수 있으며, 반복문, 변수, import 같은 빌드 시스템 기능을 제공함
- 부모 XML 문서의 데이터를 XSLT에서 가져와 동적으로 출력할 수 있음
<head>
<xsl:value-of select="title" /> | Blog
</head>
실행과 배포 방식
- XML 파일을 브라우저로 열면 XSLT 변환을 실행할 수 있음
open blog.xml -a Safari
- 모든 웹 브라우저는 페이지 방문 시 XSLT 변환을 지원하고, 변환 결과 HTML을 표시함
- 이 방식은 사용자의 컴퓨터에서 실행되는 클라이언트 측 빌드 시스템처럼 동작함
- 정적 파일 배포가 쉽고 JavaScript 없이 동작함
한계와 위치づけ
- 블로그 데이터를 JSON이 아니라 XML로 저장해야 하지만, XML은 HTML처럼 보이고 파싱하기 쉬우며 유연하고 웹에서 네이티브로 지원됨
- XSLT 방식은 완벽하지 않고 모든 것을 대체하지는 않음
- 오래된 웹 표준, 명세, 브라우저 기능을 활용해 단순한 정적 웹사이트 제작에 쓸 수 있는 또 다른 도구가 됨