jQueryUI – XML 연동 실험

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

실험 대상은 예전에 제이쿼리 웹앱 디자인 예시로 사용한 걸그룹 여자친구 관련 웹앱입니다. (원본: http://parkjuwan.dothome.co.kr/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은 다음과 같습니다: http://parkjuwan.dothome.co.kr/portfolio/jwa2/

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

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다