--- title: "Groupon API 활용법 – 3부" date: "2011-08-23" categories: - "xpath" tags: - "altova-xmlspy" - "code-generation" - "data-integration" - "data-mapping" - "mapforce" - "missionkit" - "stylevision" - "xpath" - "xslt" description: 이 기사에서는 MapForce와 StyleVision을 사용하여 Groupon API에서 가져온 XML 데이터를 HTML로 변환하는 방법을 자세히 설명합니다. 또한 향후 업데이트를 위한 자동화 기술도 다룹니다. --- Status: #blog Tags: #altova-xmlspy #code-generation #data-integration #data-mapping #mapforce #missionkit #stylevision #xpath #xslt Categories: [xpath+xquery](/blog/ko/category/xpathxquery.md) # Groupon API 활용법 – 3부 이번 게시글에서는 앞서 만든 Groupon API 매핑을 통해 생성된 XML 데이터를 HTML로 변환하기 위해 스타일시트를 적용하여 시리즈를 마무리하겠습니다. 지난번에 만든 데이터 매핑을 통해 생성된 XML 출력의 예시는 다음과 같습니다 [![MapForce를 사용하여 Groupon API로부터 생성된 XML 데이터](https://lh3.ggpht.com/-h0F6UNg0mYE/TkrQemSqO1I/AAAAAAAAAfU/9P9AGv4m8A0/clip_image001_thumb.png?imgmax=800 "XML produced by MapForce from the Groupon API")](http://lh5.ggpht.com/-XL3rbj8xibk/Tkqn-_a3EnI/AAAAAAAAAfQ/4zpv56LY3n0/s1600-h/clip_image0013.png) **XML 변환을 위한 스타일시트 지정** MapForce 매핑의 출력 구성 요소 설정 대화 상자를 통해 [Altova StyleVision](https://www.altova.com/ko/stylevision.html)으로 생성된 스타일시트를 지정할 수 있습니다. [![맵포스(MapForce) 구성 요소에 스타일 비전(StyleVision) 스타일 시트를 적용하는 방법](https://lh5.ggpht.com/-pEOLdoTlHi8/TkrQgawhHbI/AAAAAAAAAfc/oMOs9DkhVQg/clip_image002_thumb.png?imgmax=800 "Assigning a StyleVision Stylesheet to a MapForce component")](http://lh6.ggpht.com/-jkc4oqy44F8/TkrQfV8KTuI/AAAAAAAAAfY/SnuxbQJpTZA/s1600-h/clip_image0023.png) 데이터 매핑 출력 구성 요소에 스타일 시트를 적용하면 MapForce와 StyleVision의 기능을 통합하게 되며, MapForce 매핑 창 하단에 HTML, RTF, PDF, Microsoft Word 형식에 대한 새로운 버튼들이 나타납니다. (MapForce와 StyleVision을 컴퓨터에 모두 설치해야 합니다.) [![스타일시트를 통해 MapForce에서 지원하는 다양한 출력 형식을 사용할 수 있습니다](https://lh6.ggpht.com/--s7AXIp_w0s/TkvWFVa96cI/AAAAAAAAAfk/7itaFHSma0c/clip_image003_thumb.png?imgmax=800 "MapForce ouput formats available through a stylesheet")](http://lh4.ggpht.com/-GfSEJ5Q-sTI/TkrQhetcQgI/AAAAAAAAAfg/HkruS5kOnHo/s1600-h/clip_image0033.png) 이 출력 형식 버튼 중 하나를 클릭하면, MapForce는 이전 게시물에서 설명한 것처럼 데이터를 정확하게 매핑합니다. MapForce는 XML 출력을 StyleVision으로 원활하게 전달하고, StyleVision은 이를 선택한 형식으로 변환합니다. 그런 다음 MapForce는 변환된 문서를 출력 창에 표시합니다. 아래는 위에서 지정한 StyleVision 스타일 시트를 기반으로 한 HTML 형식의 MapForce 출력 창입니다 [![MapForce가 Groupon API로부터 생성한 HTML 결과물](https://lh6.ggpht.com/-jDCDPWVxHqw/TkvWGgysN5I/AAAAAAAAAfs/QDZMscS7T_Y/clip_image004_thumb.png?imgmax=800 "HTML output produced by MapForce from the Groupon API")](http://lh6.ggpht.com/-tjJnbT8WLrY/TkvWGE62H3I/AAAAAAAAAfo/iy0l9HADNAA/s1600-h/clip_image0043.png) MapForce의 출력 메뉴를 사용하면 XML 데이터 매핑 결과 또는 스타일시트에 따라 형식이 지정된 HTML 문서를 저장할 수 있습니다. **스타일 시트 만드는 방법** 저희는 Altova StyleVision을 사용하여 Groupon API 데이터 매핑을 위한 스타일 시트를 설계했습니다. 이 스타일 시트는 MapForce 출력 구성 요소의 XML 스키마를 기반으로 합니다. StyleVision의 직관적인 인터페이스와 강력한 데이터 접근 및 조작 기능 덕분에 XML 파일을 사용하여 HTML, RTF, PDF, Microsoft Word 형식의 매력적인 문서를 쉽게 만들 수 있습니다. 아래 스크린샷은 Extreme Groupon 스타일 시트의 StyleVision 디자인 뷰를 보여줍니다. 이미지 아래에 나열된 각 디자인 요소의 위치는 파란색으로 번호가 매겨진 원으로 표시되어 있습니다. [![MapForce 그룹온 API 매핑을 위한 StyleVision 스타일 시트 ](https://lh6.ggpht.com/-pnx-fT078tc/TkvWHLUifZI/AAAAAAAAAf0/66UAjZTag7I/clip_image005_thumb.png?imgmax=800 "StyleVision stylesheet for the MapForce Groupon API mapping ")](http://lh3.ggpht.com/-udSLWXUrC48/TkvWG3rY1rI/AAAAAAAAAfw/m_acYhFa4oY/s1600-h/clip_image0053.png) **SPS 파일의 특징** 1. 사용자가 정의한 HTML은 모바일 기기를 위한 뷰포트 메타 태그를 지정합니다. 이를 통해 우리는 하나의 스타일 시트를 사용하여 컴퓨터와 모바일 기기 모두에서 사용할 수 있는 단일 HTML 파일을 생성할 수 있습니다 2. 문서 제목에 사용자 정의 글꼴, 크기, 색상을 적용할 수 있습니다 3. 자동 계산 요소는 XPath의 `count` 함수를 사용하여 XML 입력 문서에 포함된 거래 건수를 세고, 그 총 건수를 삽입합니다 4. 날짜 정보는 XML 입력 데이터 파일의 마지막 부분에 위치하지만, 문서의 맨 위에 날짜 정보가 표시됩니다 5. 알토바(Altova)와 그루폰(Groupon) 웹사이트의 이미지는 하이퍼링크를 통해 연결되어 있으며, 이미지 데이터 자체로 삽입되어 있지 않습니다 6. 가로선은 각 거래 항목을 구분하는 역할을 합니다. HTML 문서의 경우, 가로선은 자동으로 브라우저 창의 너비에 맞춰 표시됩니다 7. 다양한 요소에 대해 맞춤 설정된 글꼴과 크기를 적용했습니다 8. 두 개의 열로 구성된 표를 통해 각 거래에 대한 설명을 체계적으로 정리했습니다 9. XML 파일 내의 URL은 이미지, 고정 텍스트, 그리고 동적 데이터에 대한 하이퍼링크로 동적으로 할당됩니다 StyleVision의 파워 스타일시트는 여러 개의 .xsd 파일, 기존의 .css 스타일시트, 데이터베이스 스키마, XBRL 분류 체계 등을 결합하여 다양한 스타일로 디자인된 보고서를 생성할 수 있습니다. 또한, 자동으로 생성된 차트까지 포함할 수 있습니다. StyleVision을 사용하여 데이터 입력 필드, 드롭다운 메뉴, 라디오 버튼 등 다양한 고급 기능을 갖춘 전자 양식을 정의할 수도 있습니다. **스타일시트 변환 미리보기** StyleVision을 사용하면 스타일시트를 디자인하는 동안 결과를 미리 보려면 작업용 XML 파일을 지정할 수 있습니다. 디자인 창 하단에 있는 버튼을 통해 디자인을 개선하면서 작업 파일의 형식을 미리 볼 수 있어 편리합니다. 저희는 MapForce 매핑의 XML 출력을 저장하고 이를 작업 문서로 지정했습니다. 스타일시트가 완성되면 StyleVision의 HTML 미리보기 화면은 위에서 보여드린 MapForce의 HTML 출력 창과 완전히 동일했습니다. 모바일 기기에서 문서를 보려면 HTML 파일을 웹사이트의 페이지로 배포하거나 이메일 첨부 파일로 보낼 수 있습니다. [![모바일 기기에서 MapForce로 매핑된 데이터를 HTML 형식으로 확인합니다](https://lh4.ggpht.com/-Xd-xWOlrDcA/TkvWIWhzLVI/AAAAAAAAAf8/Nx5x5yHOlaU/clip_image006_thumb.png?imgmax=800 "HTML version of the MapForce mapped data on a mobile device")](http://lh5.ggpht.com/-iQk8CUjKs9s/TkvWH5NOz2I/AAAAAAAAAf4/Ko9ZkvHYH1o/s1600-h/clip_image0063.png) StyleVision은 스타일 시트 자체와 작업 문서의 서식화된 버전 외에도, 생성된 XSLT 파일을 저장할 수 있도록 지원합니다. 이를 통해 StyleVision 애플리케이션 외부에서도 저장된 XSLT 파일을 사용하여 다른 XML 파일을 변환할 수 있습니다. **다음에는 자동화 기술에 대해 알아보겠습니다** 향후 데이터 매핑을 다시 실행하고 최신 데이터로 HTML 문서를 업데이트해야 할 때, 이 과정을 자동화하는 방법은 크게 두 가지가 있습니다 - MapForce는 다음 환경에서 실행할 수 있습니다 [명령줄](https://www.altova.com/ko/mapforce/mapforce-api.html#MF_ed_comp_5) 매핑 정의 파일의 이름을 지정하는 매개변수를 사용하거나, 심지어 StyleVision을 호출하여 서식화된 출력을 생성할 수 있습니다 - XSLT, Java, C++, 또는 C#를 사용하여 매핑에 대한 로열티 걱정 없는 코드를 [생성](https://www.altova.com/ko/mapforce/code-generation.html)할 수 있으며, StyleVision에서 제공하는 XSLT 코드와 결합하여 자체적인 통합 애플리케이션을 구축할 수 있습니다 XMLSpy, MapForce, 그리고 StyleVision은 특별 할인 가격으로 제공되는 Altova MissionKit에 함께 포함되어 있습니다. MissionKit을 사용하여 웹 API에서 데이터를 변환하는 것이 얼마나 쉬운지 직접 확인해보세요. [무료 30일 체험판을 다운로드하세요!](https://www.altova.com/ko/download/missionkit/software_development_tools_enterprise.html) **편집자의 글:** 저희가 제공했던 Groupon API 데이터를 활용한 시리즈는 총 세 부분으로 구성되어 있으며, 아래 링크를 클릭하시면 각 부분을 확인하실 수 있습니다. 1부, [Altova MapForce를 사용하여 Groupon API 처리하기](https://www.altova.com/blog/2011/08/processing-groupon-api-with-altova.html)에서는 여러 URL에서 데이터를 수집하여 동적인 입력 데이터를 생성하는 방법을 설명합니다. 2부, [MapForce를 사용하여 Groupon API 처리하기 – 2부](https://www.altova.com/blog/2011/08/processing-groupon-api-with-mapforce.html)에서는 API에서 데이터를 필터링하고, 가장 흥미로운 정보만 추출하도록 출력 형식을 정의하는 방법을 설명합니다. 3부, [Groupon API 처리 – 3부](https://www.altova.com/blog/2011/08/processing-groupon-api-part-3.html)에서는 데스크톱 및 모바일 기기에 최적화된 단일 HTML 문서로 출력을 포맷하는 방법과, 반복적인 작업을 자동화하는 방법을 소개합니다.