스타2가 떴다.

그리고 스타2를 홍보할 사이트가 떳다.
화투의 패를 못맞추듯 스타를 전혀 할줄 모르는 나 이기에 게임은 잘 모르겠고...
직업이 직업이니 사이트 분석을 해본다.

이 사이트는 3개의 도메인¹으로 6개 언어로 서비스 하고 있다.
해당 언어를 사용하는 자들을 위한 배려인지 해당 서버는 모두 해당 대륙에 있다. 당연 한국어 사이트는 우리를 위한 국내IDC센터에 서버가 있는걸 알 수 있다.²

이 사이트는 동일한 컨텐츠를 언어만 6가지로 다르게 서비스 하고 있다.
내용, 디자인은 같으나 텍스트, 이미지, 플래시, 동영상이 모두 해당 언어별로 다르다.
개발자 입장에서는 '뭔가 유지보수가 쉽고, 깔끔하게 공통화 할 수는 없을까...'하는 욕심이 나게 하는 구성이다.
물론 가장 손쉬운건 그냥 6개언어 6본을 만드는 것이겠지만 말이다.

그럼 어떤 방법이 이 있을까?
먼저 구분 인자를 두어 템플릿을 교채하는 방법을 생각할 수 있다.
구현방법에 따라서 약간 지저분해질 수도 있지만, 이런 케이스에 정석과도 같은 그런 방법이다.

좀더 욕심을 낸다면 XML + XSLT 혹은 XML+CSS를 생각할 수 있다. 내용을 담고 있는 XML를 언어별로 선택하고, 그에 맞는 디자인파일(XSLT, CSS)을 골라 서버에서 Transformation³를 하면 HTML stirng이 나오므로 그걸 브라우저에 주는거다.

그런데 블리자드는 ⁴ 선택할 수 있는 가장 독특하고 까다로운 방법을 택했다.

XML은 XML인데 서버의 XML Parser 를 사용하는게 아니라 브라우저에 있는 클라이언트의 XML Parser를 사용하도록 한것이다.

해당 사이트 메인에서 View Source를 해보자 다음과 같이 뜬다.

[code xml]
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="layout/frontpage.xsl"?>
<page lang="ko_kr">
  <frontpage/>
</page>
[/code]

선뜻 이해가 가지 않을 수 있다. 정상적으로 보이는 웹페이지의 소스인데, 왜 XML소스가 보이는가?
<page> 라는 Root Node에 <frontpage>라는 Node를 하나 가진 정말 심플한 XML 이다. XML를 브라우저에서 열면 그냥 XML로 보이는것이 정상이다. ⁵
이 스타2 사이트처럼 XML로 보이지 않는다는건 디자인적 요소를 담고 있는 다른것이 있기때문이다.
2 Line의 .xsl이 이건데, 따라가서 열어보면 다음 소스가 보인다.

[code xml]
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:import href="includes.xsl"/>
  ....
</xsl:stylesheet >
[/code]

이 파일은 페이지의 기본적인 골격을 정의하고, 세부적인 요소는 3 Line의 includes.xsl을 다시 들어가보자.

[code xml]
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"/>
  <xsl:template match="@*|node()">
  <xsl:variable name="lang" select="/page/@lang" />
  <xsl:variable name="loc" select="document(concat('/strings/',$lang,'/strings.xml'))" />
  ...
</xsl:stylesheet>
[/code]

 includes.xsl 은 무척 길고 복잡해서 XSL문법이 익숙하지 않으면 구조를 파악하기가 불가능할 정도다. 그러니 중요한 것만 것만 따라가보자.

5 Line.
 <xsl:variable name="lang" select="/page/@lang" /> 는 lang 이란 변수에 /page/@lang 값을 넣으란 소리다.
"/page/@lang"  는 XPath 문법인데 page Node의 lang이라는 attribute를 가리킨다.
이게 어디있었나? 맨 처음 본 XML의 Root Node가 바로 <page lang="ko_kr"> 였다.
그러므로 XSL 변수는 lang=ko_kr 이 된다.

6Line.
보기 쉽게 정리하면 다음가 같다.
[code javascript]
loc = document(concat('/strings/',$lang,'/strings.xml'));
[/code]
우린 lang 의 값을 알고 있으니 다음처럼 바꾸자.
[code javascript]
loc = document('/strings/ko_kr/strings.xml')
[/code]
/strings/ko_kr/strings.xml  를 열면 드디어 마지막 파일인 stirngs.xml를 볼 수 있다.


[code xml]
<?xml version="1.0" encoding="UTF-8"?>
<strs>
 <!--General Strings-->
 <str id="sc2">스타크래프트 II</str>
 <str id="sc2.lang">한국어</str>
 <str id="sc2.region">한국</str>
 <str id="sc2.mediahost">http://media.blizzard.co.kr/starcraft2</str> <!--media host path -->
 <str id="sc2.labels.languagecolon">언어:</str>
 <str id="sc2.labels.english-us">English (US)</str>
 <str id="sc2.labels.english-gb">English (EU)</str>
 <str id="sc2.labels.spanish">Español</str>
 <str id="sc2.labels.french">Français</str>
 <str id="sc2.labels.german">Deutsch</str>
 <str id="sc2.labels.korean">한국어</str>
 <str id="sc2.colon">:</str>
 <str id="sc2.labels.overview">스타크래프트 II 소개</str>
 <str id="sc2.labels.updates">업데이트</str>
 <str id="sc2.labels.rssfeed">RSS Feed</str>
 <str id="sc2.labels.blizzardlink">Blizzard.co.kr</str>
 <str id="sc2.labels.bnetlink">Battlenet.co.kr</str>
 <str id="sc2.labels.privacypolicy">온라인 개인 정보 보호정책</str>
 <str id="sc2.link.blizzardmain">http://www.blizzard.co.kr</str>
  ...
  ...
</strs>
[/code]


스타2의 사이트 구조는 이렇다.

index.xml -> frontpage.xsl ->includes.xsl -> strings.xml

두개의 XSL이 디자인 구조와 Javascript를 잡고, 언어별로 strings.xml을 두어서 그걸 원래의 XML에 Transformation을 하는것이다. 

모든 텍스트와 이미지 패스, 동영상 패스, 플래시 패스가 stirngs.xml에 있으므로, 스타2사이트는 언어별로 strings.xml만 준비하면, 지원언어가 100개든 200개든 상관없다.
또한 대개는 같은 구조라고 해도 java, .net 등의 서버용 XML Parser를 이용해서 Transformation을 하여 HTML을 던져주는데, 이 사이트는 모두 xml, xsl 로만 되어서 asp, jsp, php와 같은 서버스크립트를 위한 WAS가 필요없다.
그저 XML Parser 가 내장된 브라우저만 있으면 볼 수 있다.
그러므로 이 사이트는 다국어 추가로 인한 확장이 겁나게 용의하고, 서버 부하를 최소한을 줄인 이상적인 형태이다.

이런 구조는 사실 난 한번도 본적이 없다.
이렇게 무식해보일정도의 XSL을 본적도 없지만⁶ 브라우저에서 Parseing을 하게 하다니. -0-;;;;

근래에 본 사이트중 가장 인상적이고, 구조적이고, 혁신적이고, 목적에 맞는 최고의 기술을 사용했지만..,
XSL을 진짜로 겁나게 잘하는 개발자였다면 모르겠지만, 누군지 몰라도...















개발자... 욕봤다.. >.<b



스타2 내 함 해주마.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

1. www.starcraft2.com, eu.starcraft2.com, 그리고 kr.starcraft2.com [Back]
2. netcraft.com [Back]
3. 데이터 파일인 XML과 이를 시작적으로 꾸며주는 XSLT 를 합치는 것을 Transformation이라고 한다. [Back]
4. 혹은, 그 외주 업체 [Back]
5. 물론 IE7.0, FF2.x에서 RSS을 열떄는 다르다. XML이지만 우리눈에는 그냥 조금 심플한 HTML페이지로 보인다. 이건 브라우저가 XML스키마가 RSS 일때 알아서 Transformation을 해주기 때문이다. [Back]
6. 해본사람만 알겠지만... XSL문법이라는게 장난이 아니다. 겁나 어렵다. [Back]