jQueryUI – XML 연동 실험

제이쿼리 웹앱과 XML 간의 AJAX 연동을 실험하여 보았습니다.

실험 대상은 예전에 제이쿼리 웹앱 디자인 예시로 사용한 걸그룹 여자친구 관련 웹앱입니다. (원본: https://pjw48.net/portfolio/jwa/)

연동할 XML 문서를 다음과 같이 만들었다고 가정합니다.

<?xml version="1.0" encoding="UTF-8"?>
<gfriend>
  <mainpage>
    <image>images/gfriend_2015.jpg</image>
    <description>여자친구 공연 사진</description>
  </mainpage>
  <profile>
    <image>images/gfriend_2017_greeting.jpg</image>
    <description><![CDATA[
      <p>여자친구(GFRIEND)는 2015년 1월 25일 데뷔한 걸그룹으로 소속사는 쏘스뮤직이며 멤버 수는 6명입니다.</p>
      <p>데뷔앨범은 미니앨범 &lt;Season of Glass&gt;이고 데뷔곡은 &lt;유리구슬 (Glass of Bead)&gt;입니다.</p>
    ]]></description>
    <member>
      <timage>images/t_sowon.jpg</timage>
      <name alias="Sowon" realname="김소정">소원</name>
      <birthday year="1995" month="12" date="7" />
      <position>리더, 서브보컬</position>
    </member>
    <member>
      <timage>images/t_yerin.jpg</timage>
      <name alias="Yerin" realname="정예린">예린</name>
      <birthday year="1996" month="8" date="19" />
      <position>서브보컬, 리드댄서</position>
    </member>
    <member>
      <timage>images/t_eunha.jpg</timage>
      <name alias="Eunha" realname="정은비">은하</name>
      <birthday year="1997" month="5" date="30" />
      <position>리드보컬</position>
    </member>
    <member>
      <timage>images/t_yuju.jpg</timage>
      <name alias="Yuju" realname="최유나">유주</name>
      <birthday year="1997" month="10" date="4" />
      <position>메인보컬</position>
    </member>
    <member>
      <timage>images/t_sinb.jpg</timage>
      <name alias="SinB" realname="황은비">신비</name>
      <birthday year="1998" month="6" date="3" />
      <position>메인댄서, 서브보컬</position>
    </member>
    <member>
      <timage>images/t_umji.jpg</timage>
      <name alias="Umji" realname="김예원">엄지</name>
      <birthday year="1998" month="8" date="19" />
      <position>서브보컬</position>
    </member>
  </profile>
  <songs>
    <album type="싱글" title="Season of Glass" href="#cover_glass">
      <song>Intro (Season of Glass)</song>
      <song t="yes" href="#videos_glass">유리구슬 (Glass Bead)</song>
      <song>Neverland</song>
      <song>White (하얀마음)</song>
      <song>유리구슬 (Glass Bead) (Inst.)</song>
    </album>
    <album type="싱글" title="Flower Bud" href="#cover_flowerbud">
      <song>Intro (Flower Bud)</song>
      <song t="yes" href="#videos_mgt">오늘부터 우리는 (Me gustas tu)</song>
      <song>하늘 아래서</song>
      <song>ONE</song>
      <song>기억해 (My Buddy)</song>
      <song>오늘부터 우리는 (Me gustas tu) (Inst.)</song>
    </album>
    <album type="싱글" title="SNOWFLAKE" href="#cover_snowflake">
      <song>Intro (Snowflake)</song>
      <song t="yes" href="#videos_rough">시간을 달려서 (Rough)</song>
      <song>내 이름을 불러줘 (Say My Name)</song>
      <song>사랑별 (Luv Star)</song>
      <song>그런 날엔 (Someday)</song>
      <song>TRUST</song>
      <song>시간을 달려서 (Rough) (Inst.)</song>
    </album>
    <album type="정규" title="LOL" href="#cover_lol">
      <song>INTRO</song>
      <song>물들어요 (Fall in Love)</song>
      <song t="yes" href="#videos_navillera">너 그리고 나 (NAVILLERA)</song>
      <song>LOL</song>
      <song>한 뼘 (Distance)</song>
      <song>물꽃놀이 (Water Flower)</song>
      <song>Mermaid</song>
      <song>나의 일기장 (Sunshine)</song>
      <song>나침반 (Compas)</song>
      <song>찰칵 (Click)</song>
      <song>바람에 날려 (Gone with the wind)</song>
      <song>너 그리고 나 (NAVILLERA) (Inst.)</song>
    </album>
  </songs>
  <videos>
    <video src="https://www.youtube.com/embed/IxnD5AViu6k">유리구슬 (Glass of Bead) MV</video>
    <video src="https://www.youtube.com/embed/m-CKVr6Z1Tw">오늘부터 우리는 (Me gustas tu) MV</video>
    <video src="https://www.youtube.com/embed/0VKcLPdY9lI">시간을 달려서 (Rough) MV</video>
    <video src="https://www.youtube.com/embed/j-_g5Pz5zBg">여자친구 스쿨 트릴로지 공연</video>
    <video src="https://www.youtube.com/embed/Se8bbsUFjC8">너 그리고 나 (NAVILLERA) MV</video>
  </videos>
  <videopage>
    <page id="glass" src="https://www.youtube.com/embed/IxnD5AViu6k">유리구슬 뮤직비디오</page>
    <page id="mgt" src="https://www.youtube.com/embed/m-CKVr6Z1Tw">오늘부터 우리는 뮤직비디오</page>
    <page id="rough" src="https://www.youtube.com/embed/0VKcLPdY9lI">시간을 달려서 뮤직비디오</page>
    <page id="navillera" src="https://www.youtube.com/embed/Se8bbsUFjC8">너 그리고 나 뮤직비디오</page>
  </videopage>
  <coverpage>
    <page id="glass" src="./images/cov_glass.jpg">Season of Glass</page>
    <page id="flowerbud" src="./images/cov_flowerbud.jpg">Flower Bud</page>
    <page id="snowflake" src="./images/cov_snowflake.jpg">SNOWFLAKE</page>
    <page id="lol" src="./images/cov_lol.jpg">LOL</page>
  </coverpage>
</gfriend>

이 내용의 XML 문서를 페이지에 연동하기 위한 제이쿼리 스크립트를 삽입하여 처리합니다. 기존 index.html 문서에 들어 있던 데이터 부분을 이 XML 문서로 옮겨 놓은 후, XML 문서의 데이터를 추출하여 알맞은 자리에 배치하도록 만들어져 있습니다.

XML 연동 형식을 도입하여 코드를 재구성한 페이지의 URL은 다음과 같습니다: https://pjw48.net/portfolio/jwa2/

이 방식은 제이쿼리 웹앱에서 특정 데이터의 수정이 빈번할 경우 이를 XML 문서로 처리하면 수정이 더욱 간편해져서 유용합니다. 물론 제이쿼리 웹앱 형식이 아니더라도 사용 가능합니다.