사용자 삽입 이미지
우측의 shop gallery 위젯이 페이지를 새로 고칠 때마다 바뀌는 것을 볼 수 있을 것입니다.
티스토리의 스킨 바꾸기에서 다음 스크립트만 삽입하면 됩니다.

<script src="http://www.okjsp.pe.kr/mashup/shopg.jsp">
</script>

확장자는 jsp 입니다만 브라우저에 저 주소를 호출해보면 자바스크립트만 나오는 것을 알 수 있습니다.

서버 쪽의 소스는 따로 설명해드리겠습니다. shopg.jsp 의 소스를 공개하면 다음과 같습니다.

<%@ page pageEncoding="utf-8"
    import="java.util.*, service1.*"%><%
        String q = "macbook";
        Map item = GetSearchResults.getItemByRandom(q);
%>
function showShopGallery() {
  var shopg_link = 'http://itempage.auction.co.kr/detailview.aspx?itemno=<%= item.get("itemId") %>';
  var shopg_image = 'http://image.auction.co.kr/itemimage<%= item.get("image") %>';
  var shopg_name = '<%= item.get("name") %>';
  var shopg_price = '<%= item.get("buyItNowPrice") %>';
  var htmlCode =
'<link rel="stylesheet" type="text/css" href="http://www.okjsp.pe.kr/mashup/style.css" />\
\
<table class="shopg"><tr>\
<td rowspan="2"><a \
href="'+shopg_link+'"><img \
src="'+shopg_image+'"></a></td>\
<td><div class="shopg_name">'+shopg_name+'</div></td>\
</tr>\
<tr>\
<td>'+shopg_price+'</td>\
</tr></table>\
';

  document.write(htmlCode);
}

showShopGallery();

키워드는 "macbook"입니다. 이것을 자바스크립트 호출시 부르도록 바꿀 수도 있습니다. 그건 따로 설명하겠습니다. 아주 기본적인 프로그램이기 때문에 예외적인 데이터 처리는 빠져있습니다. 보안, 캐싱, 문자열 처리 등의 안전장치들이 앞으로도 추가되어야 합니다.

서버쪽에서 어떤 변화가 있었는지 궁금하신 분들은 프로젝트 홈페이지의 소스들을 받아보세요. 커밋해 놓았습니다. http://code.google.com/p/shopgallery

블로그에서 자바스크립트를 호출하는 도메인이 다른데도 "Access Violation" 에러가 나오지 않고 정상적으로 동작하는 것을 보면 현재 도메인의 함수와 원격 도메인의 자바스크립트가 서로 상관하는 것이 없어서인듯 생각되는군요.

일단 화면단에서 가장 기본적으로 처리해야하는 것은 일단락 지겠습니다.
일단 시작한 프로젝트라 고민이 많이 됩니다.
WoC를 통해서 멘토 역할을 합니다만, 한 번도 이런 것은 해 본 적이 없어서 정확히 무엇을 해야하는지 모르겠습니다. 그냥 옆에서 감 놔라 배 놔라 훈수 두는 것도 멘토링이라고 할 수 있겠지만, 맘에 안듭니다.

각설하고, 애플리케이션의 구조는 3가지로 나눌 수 있습니다.
  1. 화면 (UI)
  2. 엔진 (비즈니스 로직)
  3. 데이터 (DB)

두 명 이상 개발하는 경우, 화면과 데이터로 나눠서 개발하는 방법과 업무별로 나눠서 개발합니다. 요즘같이 서버와 클라이언트로 각기 특화된 기술을 필요로 하는 경우 데이터 인터페이스를 맞춘 뒤에 나뉘어서 개발합니다. 즉 openAPI로 데이터를 빼오는 작업과 그렇게 만들어진 데이터를 화면에 보여주는 작업으로 양분할 수 있습니다.

엔진은 화면과 데이터를 연결해주는 역할을 합니다. 엔진을 역할에 따라 세분화할 수도 있는데, 그것은 애플리케이션의 규모나 개발자의 역량에 따라 달라집니다.

shopgallery의 기본데이터
이 애플리케이션의 목적은 상품을 블로그의 위젯에 보여주고 지름신이 발동하도록 길을 열어주는 것입니다. 즉 다음과 같은 데이터가 필요합니다.

  1. 상품이미지
  2. 상품명
  3. 가격
  4. 링크

이 데이터를 복수개로 가져갈 것이냐 하는 것은 확장된 개념으로 보겠습니다.
일단 하나의 상품이라도 보이게 되면 가장 기본적인 지름도구로서의 자격은 갖춘 것입니다.

CSS를 이용해서 레이아웃도 코딩하고 싶지만, 위젯 특성상 얹혀지는 페이지의 DOCTYPE 에 따라 예상치 못한 결과가 올 수 있기에 테이블구조의 형식으로 일단 만들어 봅니다.

<table class="shopg"><tr>
<td><a href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503">
<img src="http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif">
</a></td>
<td>1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</td>
<td>8,900원</td>
</tr></table>

사용자 삽입 이미지
이렇게 나옵니다. ^^; 좀 다듬어야겠죠.

<table class="shopg"><tr>
<td rowspan="2"><a href="http://itempage.auction.co.kr/detailview.aspx?itemno=A099090503">
<img src="http://image.auction.co.kr/itemimage/016/85/02/0168502107.gif">
</a></td>
<td><div class="shopg_name">1+1고객행복상품07가을/에니팅그래픽티셔츠시즌2/R13552/남여공용/착불</div></td>
</tr>
<tr>
<td>8,900원</td>
</tr></table>
<style type="text/css">
 .shopg {
    border: 1px solid #88F;
   background-color: #FEE;
   padding : 1px;
 }
  .shopg img {
    border: 1px solid #88F;
    width : 65px;
  }
  .shopg td {
    font-size : 11px;
    width: 65px;
    overflow: hidden;
  }
  .shopg_name {
    height: 40px;
  }
</style>

많이 길어졌습니다. ^^;
그나마 이것도 파이어폭스2.0만 제대로 보입니다.

사용자 삽입 이미지

일단 요기까지 올립니다.
숙제는 ie와 오페라에서 잘 보이는 것이겠죠. 아, 제 숙제입니다. ^^;


 

관련글 : http://okjsp.tistory.com/tag/openapi

WoC(Winter of Code)에서 함께 할 파트너가 정해졌습니다. 돌아오는 토요일에 처음 만나게 됩니다. 함께 진행하지 못하는 네분의 신청자분들에게 고마움과 미안함을 전합니다. 이 프로젝트가 어떻게 진행되는지는 프로젝트 홈페이지(http://code.google.com/p/shopgallery)를 통해서 확인할 수 있습니다.

사용자 삽입 이미지

구걸 코드에서 제공하는 오픈소스 프로젝트 호스팅 서비스를 이용해서 다음과 같은 일들을 진행할 수 있습니다.

  • 프로젝트 홈페이지
  • 다운로드 서비스
  • 위키
  • 이슈트래커
  • 소스버전관리 - subversion
  • 프로젝트 멤버 관리
비슷한 류의 원조격인 서비스는 sourceforge.net 입니다. 한국어로 된 서비스로 kldp.net도 있습니다. 자바닷넷도 오픈소스 프로젝트 인큐베이터를 자처하고 있습니다.

현재 프로젝트에는 옥션의 openAPI 샘플만 들어가 있습니다. 소스 탭에 나온 설명대로 다음의 소스 주소를 통해서 확인할 수 있습니다.

svn checkout http://shopgallery.googlecode.com/svn/trunk/ shopgallery-read-only

내년 2월까지 진행되는 이 프로젝트를 통해서 오픈소스에 대한 감각을 좀 더 익히고 싶습니다.

올 겨울 누군가와 좋은 기억을 남기면 좋겠습니다.
제가 알고 있는 프로그램에 대한 경험을 새롭게 입문하는 사람에게 잘 전달이 되면 좋겠습니다. 요즘 제가 고민하는 가치있는 프로그램이란 어떤 것일까에 대한 고민도 같이 하겠지요.
단순히 먹고 살기 위해서 제가 이 직업을 선택했다면 저는 한 없이 우울해졌을 것입니다.
삶 속에 낙을 느낄 수 있는 그런 프로그램을 만들고 싶습니다.

아래는 포스터와 행사 안내입니다.
--------------------------------------------------------------------

사용자 삽입 이미지


Code your passion!!

-       당신의 열정이 code로 불타오르는 Open camp!

 

-       나를 이끌어 주는 멘토와 함께

-       다른 이들과 열정과 지식을 나누고

-       새로운 경험이 나의 실력이 되는 Camp

 

WoC

학생과 실력있는 개발자(멘토)가 짝이 되어 오픈소스를 활용한 프로젝트를 하는 행사입니다.

 

학생들에게 오픈소스를 알리고 관련활동 참여의 기회를 제공하는 WoC는 아래와 같이 진행될 예정입니다.

1.     수행학생에 대한 1:1 멘토링

2.     인적 네트워크를 형성할 수 있는 온,오프라인 프로그램

3.     많은 사람들이 사용할 수 있는 공개된 오픈소스

 

행사의 진행은 다음의 일정대로 진행 됩니다.

일정

항목

비고

11/26~12/10,

프로젝트 제안기간

 

12/03

1차 프로젝트 공지일

11/30 이전에 접수된 프로젝트

12/11

2차 프로젝트 공지일

12/1~12/10 까지 접수된 프로젝트

12/03~12/26

학생등록기간

수행자 공지: 12/28

08 01/05~03/03

Project 수행기간

 

 

행사 kick-off이후 진행 일정

일정

항목

비고

2008.01.05

WoC BootCamp (project kick-off행사)*

offline 행사

2008.01.26

WoC SnowCamp I *

offline 행사

2008.02.04

프로젝트 중간평가

online

2008.02.23

WoC SnowCamp II *

offline 행사

2008.03.03

프로젝트 제출마감

online

2008.03.10.

최종평가

1차 멘토/최종 WoC 운영위

2008.03.22

마감행사 *

offline 행사

 

* 각 오프라인 행사의 시간과 장소는 추후 공지 예정

* 상기 일정은 변동될 수 있음.

 

WoC에 참가하면 홍보, 자원지원, 교류라는 세 가지의 효과를 누릴 수 있습니다.

1.     홍보효과

-       참여한 이들이 블로그, 기사 및 참여업체/단체의 사이트 등을 통해 노출되고,

-       완성된 결과물을 open lab에 공개하고 누구나 들어와서 결과물을 보고 공유할 수 있습니다.

 

2.     프로젝트 진행 지원

-       수행하는 프로젝트에 대해 수행 보상금 또는 보조금이 지급됩니다.

-       온라인 뿐만 아니라 오프라인 캠프에서 오픈소스와 관련 프로그램 개발방법에 대한 정보와 지식을 얻을 수 있습니다.

.

3.     참여자들과의 교류

-       참여자들간의 교류로 오픈소스와 관련된 정보를 공유하고

-       다른 참여자들과의 인맥 형성이 가능합니다.

 

작년에 진행된 프로젝트는 13개로 다음 표를 참조 하세요.

  (프로젝트 관련 사항은 12/3일 이후 http://labs.openmaru.com 에서 확인하실 수 있습니다.)

업체

멘토

진행프로젝트

오픈마루

창신

오픈 API를 이용한 가제트 개발

오픈마루

강문식

오픈 API를 이용한 브라우저 확장 – Firefox

오픈마루

강문식

오픈 API를 이용한 브라우저 확장 – IE

오픈마루

배재현

기초적인 RSS 포스트 자동 분류 시스템

㈜위자드웍스

김현철

RSS crawler parser 개발

㈜위자드웍스

김현진

OpenAPI를 이용한 메쉬업 서비스 위젯 개발

HanRSS

서성렬

RSS 중요한 글/피드목록/즐겨찾기목록 데이타의 Export 도구 개발

osxdev.org

왕수용

Keynote 3을 위한 LinkBack Plugin

JCO

최상훈

Jumb (Java UDP Messaging Bus) - Reliable UDP Multicasting을 이용한 Messaging Bus Framework

JCO

이은호

Issue Tracking System on Subversion

데브피아

김태현

FTP를 이용한 인터넷 파일저장 서비스 개발

태터앤컴퍼니

신정규

Tattertools v1.1 메타블로그페이지 제작

모질라한국 커뮤니티

윤석찬

한국 파이어폭스 사용자를 위한 통합 확장 기능 팩 개발

 

궁금한 사항이 있으면 연락주세요.

홈페이지: http://woc.openmaru.com/   Blog: http://woc.openmaru.com/blog

문의사항: woc@openmaru.com

담당자: 송시은 02 6201 0741 / 신재혁 02 6201 5455 / Fax: 02 6201 5300 

+ Recent posts