본문영역

웹 어플리케이션 - 1. RSS 리더기를 만들어보자!

웹 어플리케이션은 인터넷/인트라넷을 통해 접속하는 어플리케이션을 뜻한다.인터넷을 접속하는 방법은 다양하지만 그 중 가장 일반적인 것은 웹 브라우저이다. 따라서 웹 어플리케이션이라고 하면 보통 웹 브라우저에서 동작하는 어플리케이션을 뜻한다. 이 때 어플리케이션이란 특정한 작업을 수행하여 사용자를 돕는 컴퓨터 소프트웨어를 말한다.

웹 어플리케이션은 웹 문서와 마찬가지로 HTML+CSS+자바스크립트 언어로 작성되는 것이 일반적이다. 이 때문에 (적어도 나는) 웹 문서와 웹 어플리케이션의 구분이 모호해지는데, 웹 문서는 정보를 전달하는 데 집중하고 웹 어플리케이션은 특정 작업을 수행하는데 집중하는 것-이라고 생각하면 조금 마음이 편하다. 억지로 구분하려고 해 봤자 피곤할 뿐, 대세는 융합이므로 그냥 그러려니 하고 넘어가자.

나는 앞으로 몇 번의 연속된 포스트를 통해 RSS 리더기 제작 과정을 설명할 예정이다. 우선 오늘은 특정 블로그의 최신 글 제목들을 출력하는 간단한 예제를 작성한다. 이 예제는 다음 포스트에서 계속 다듬어질 것이다.

어플리케이션 구조

아무리 간단한 어플리케이션이라도 어떤 모습으로 어떤 기능을 수행해야 할지 명확하게 정의해야 한다. 이번 예제에서는 특정 블로그의 RSS를 통해 블로그 이름과 최신 글 제목들을 목록 형태로 출력할 것이다. 그래서 어플리케이션은 블로그 제목과 최신 글 목록, 이렇게 두 개의 구역으로 구성된다.

어플리케이션의 이러한 외형적 구조는 HTML로 정의한다. 이 예제에서는 블로그 제목을 출력하기 위해 <h2> 태그를 사용하였고, 최신 글 목록을 출력하기 위해 <ul> 태그를 사용했다. 각각은 어플리케이션 로직에서 쉽게 사용할 수 있도록 id 속성을 부여했다.

<!DOCTYPE HTML> <html><head><title>RSS Reader</title></head><body><h2 id="rssTitle">Blog Title</h2><ul id="rssContents"></ul></body> </html>

어플리케이션 로직

어플리케이션의 외형이 갖추어졌으니, 이제 특정 블로그의 RSS를 읽어서 그 내용을 해석하고 적당한 위치에 설정하는 일만 남았다. 웹 어플리케이션의 로직은 자바 스크립트로 구현한다. 나는 자바스크립트와 함께 jQuery 라이브러리를 사용했는데 jQuery는 다양한 웹 브라우저에서 일관된 동작을 보장하기 위해 지저분한 일을 대신 수행해 줄뿐만 아니라 HTML 엘리먼트를 조작하는 매우 막강한 방법을 제공하기 때문이다.

$().ready(function() {var api = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?';api = api + '&q=' + 'http://semix2.tistory.com/rss';api = api + '&num=' + 10;$.getJSON(api, function(resp) {if (resp.responseStatus == 200) {var feeds = resp.responseData.feed;// 블로그 제목 설정$('#rssTitle').text(feeds.title);// 최신 글 목록 설정var contents = $('#rssContents');for (var i=0; i<feeds.entries.length; i++) {var entry = feeds.entries[i];var link = $('<a/>').text(entry.title).attr('href', entry.link);var listElement = $('<li/>').append(link);contents.append(listElement);}}}); });
외부 RSS를 읽어 들이기 위해 한 가지 주의해야 할 것이 있다. 이 웹 어플리케이션은 동적으로 특정 블로그의 RSS를 읽어오는데 동일 출처 정책 제한으로 인해 사실상 정보를 받아올 수 없다.그래서 약간의 우회로를 파야 한다. 이 우회로는 JSONP(JSON with Padding) 인데 자세한 건 참고 링크를 확인하자.

다행히 구글에서 RSS 수신을 위한 우회로를 제공하므로 이를 활용한다(2~6행). $.getJSON(...) 은 두 개의 인자를 갖는데 하나는 대상 URL, 그리고 수신된 정보를 처리할 핸들러이다. 여기서 사용된 구글 API는 RSS 정보를 JSON 객체로 반환한다. 응답 데이터에서 feed 값을 꺼내면 RSS 정보를 얻을 수 있고, 여기로부터 title 값을 얻으면 대상 블로그 이름을 얻을 수 있다(8~11행).

블로그 이름을 얻었으니 이제 HTML의 <h2> 태그 안에 설정해야 한다. 그래야 웹 브라우저 화면에 블로그 제목이 표시된다. 블로그 제목을 표시하기 위한 <h2> 태그를 유일하게 찾기 위해 앞서 설정한 id를 활용한다. jQuery의 $('#id') 를 통해 특정 id가 지정된 엘리먼트를 찾을 수 있다. <h2> 태그를 찾아 jQuery의 text() 함수를 사용해서 블로그 제목을 설정한다(11행).

각각의 글은 entries 로 얻을 수 있다. 각각의 엔트리를 순회하여 글 제목과 링크 주소를 얻어 링크를 생성하고 <li> 태그로 감싸 HTML의 <ul> 태그 안에 넣는다(16~19행). <ul> 태그 역시 $('#id') 방법으로 지정할 수 있는데 루프를 순회하기 전에 미리 찾아서 contents 변수에 할당해 효율을 높였다(14행).

어플리케이션 로직은 어디에?

웹 어플리케이션 또한 웹 문서와 마찬가지로 HTML 웹 문서로부터 출발한다. 따라서 어플리케이션 로직은 HTML 문서에 포함되어야 한다. 두 가지 방법이 있다. 하나는 HTML 문서 내에 직접 삽입하는 것이고, 다른 하나는 어플리케이션을 별도의 파일에 저장한 뒤 HTML 문서가 이 파일을 가리키도록 하는 것이다.

나는 두 번째 방법을 선호한다. 왜냐하면 로직을 분리함으로써 나중에 로직을 변경할 때 HTML 문서에 독립적으로 변경할 수 있기 때문이다. 다음 포스트에서 웹 문서를 꾸미는 CSS 를 작성할 건데 이 역시도 같은 이유로 분리시킬 것이다.

로직을 별도의 파일에 저장하고 아래의 문장을 HTML 문서의 <head> 태그 안에 삽입하자. 이 문장의 의미는 자바스크립트로 작성된 어플리케이션 로직이 지정한 위치에 있음-을 뜻한다.

완성된 예제는 이 링크를 통해 확인할 수 있다.

오늘은 HTML과 자바스크립트를 이용한 아주 간단한 RSS 리더를 만들어 봤다. 웹 어플리케이션은 브라우저에서 실행되므로 HTML 문서에서 출발한다. HTML 문서는 어플리케이션의 외형 구조, 특히 정보의 구획을 결정하는 역할을 한다. 정보를 생산하고 가공/관리하는 어플리케이션 로직은 자바스크립트 언어로 구현하며 HTML 문서 내에 포함하거나 별도의 파일로 저장하여 웹 문서가 참조하도록 할 수 있다.

아직은 이렇다할 감흥이 없다. 어플리케이션이라면 뭔가 더 화려하고 역동적이기를 기대하는 게 우리네 청춘! 다음 포스트에서는 CSS를 이용하여 어플리케이션의 UI를 예쁘게 가꿀 것이다. 그리고 사용자 편의를 위한 간단한 장치를 설치할 예정이다.