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


웹 어플리케이션은 웹 문서와 마찬가지로 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> 태그 안에 삽입하자. 이 문장의 의미는 자바스크립트로 작성된 어플리케이션 로직이 지정한 위치에 있음-을 뜻한다.
 
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./script/reader1.js"></script>


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

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

  1. Kata Pro 2010.06.30 01:19 ADDRESS | MODIFY/DELETE | REPLY

    이렇게 훌륭한 글에 아무도 댓글을 달지 않았네요.
    재미있는 글(내용)입니다. 나중에 RSS 리더를 한번 만들어 보고 싶은 생각이 듭니다.

    • semix2 2010.07.04 23:51 ADDRESS | MODIFY/DELETE

      감사합니다. 한 주 제주도에 다녀오느라 답글이 늦었네요; CSS로 효과 좀 입히고, 웹 스토리지를 써서 정말 어플스럽게 만들어 볼 생각입니다...만; 웹 스토리지는 살짝 자신이 없네요. ^^

  2. furang 2010.07.01 08:37 ADDRESS | MODIFY/DELETE | REPLY

    따라해보겠음!!!(사실은 살짝 시작 ㅎㅎ)
    실행된 화면도 보여주지...
    (다 다른가???)

    • semix2 2010.07.04 23:52 ADDRESS | MODIFY/DELETE

      실행 해 볼 수 있게 링크를 달긴 했는데.. ^^;; 직접 만들어서 HTML 파일을 웹 브라우저 위에 끌어다 놓으면 확인할 수 있어요. 근데 저 예제 돌리려면 jQuery 라이브러리가 있어야 함! 구글에서 검색하면 바로 찾을 수 있을거에요. ㅎㅎ

  3. Kata Pro 2010.07.11 01:13 ADDRESS | MODIFY/DELETE | REPLY

    안녕하세요? 그런데 요새는 블로그 안쓰시나요? RSS후속글이 궁금한데요. 블로그의 RSS 리더 기능을 추가하는데 활용해보고 싶은데, 후속작을 기대합니다.
    좋은 하루 되세요.

    • semix2 2010.07.13 14:09 ADDRESS | MODIFY/DELETE

      안녕하세요 Kata Pro님! 요즘 살짝 정신이 없었어요. ^^ 약간의 슬럼프도 있었고;; ㅋㅋ 갑자기 아이폰 어플이 만들고 싶어져서 한 주 달리고;; 오늘 저녁부터 2회차를 써야겠습니다. 아마도 내일이면 볼 수 있을거에요. (기대해주셔서 감사합니다!!)

    • Kata Pro 2010.07.14 00:37 ADDRESS | MODIFY/DELETE

      그러면 기대하고 있겠습니다.
      슬럼프라니, 안타깝습니다. 무슨 종류의 슬럼프인지 모르겠지만 회복되시기 바랍니다.
      최근 머리를 식힐겸 오래된 수필을 블로그에 올렸습니다. 그중에는 재미난 글도 한개 올렸는데, 시간나시면 둘러 보세요.
      http://manofpro.tistory.com/113
      행복한 하루되세요.

  4. 서승현 2010.10.10 16:49 ADDRESS | MODIFY/DELETE | REPLY

    정말 좋은 정보 감사드립니다.^^

    • semix2 2010.10.18 16:10 ADDRESS | MODIFY/DELETE

      도움이 되셨다니 다행입니다. 스타일시트를 적용하는 예제를 작성하려고 했는데 도통 글쓰기에 집중이 되지 않아서 꽤 오랫동안 멈춰있네요;; 마음 잡고 얼른 포스팅할 수 있도록 노력하겠습니다. ^^

CATEGORIES