작년 3월 이후 아직까지 미투데이에서 떨어질 줄 모르고 있습니다. 요즘엔 활동이 뜸하지만, 한때는 아주 살다시피 했었죠. 신규 회원분들도 많이 들어왔을텐데, 새로한 친구신청이 올들어 손가락에 꼽을 수 있을 정도니 큰일입니다.

미투데이를 하다보면 많은 사람들이 한번씩 경험하는게 있는데 바로 번개입니다. 대규모, 혹은 소규모로 사람들이 모여서 먹고 마시고 떠들죠. ^^ 개인적으로는 커뮤니티들의 정모와는 살짝 분위기가 다르다 생각해요. 만나면 처음엔 어색해도 어느샌가 오래된 친구들 처럼 편하게 대하는 자신을 발견하게 되죠.

뜬금 없지만, 얼마 전에 다음지도 OpenAPI가 오픈했습니다. 이걸로 뭔가 재밌는걸 만들어볼게 없을가 고민하던 중에 우리 미투데이의 특성을 살려서 지도와도 부합하는 번개도우미를 만들어보면 어떨까 생각했습니다. 사실 이 아이템은 작년에 생각한건데, 그 때는 지도대신 지하철 노선도를 만들어서 지하철역을 중심으로 하는 번개도우미였습니다. 

지도로 만들자고 결정했을 때만 해도, 지하철노선도로 만들고 싶은 생각이 간절했으나. 상황에 조금 타협했습니다. 하지만 만들고 보니까 지하철노선도 보다는 좀 더 쓸모있겠다 싶네요.

Daum API는 지역검색을 지원하지 않아서, 원하는 지명의 좌표값을 받기 위해서는 다른 API를 사용해서 좌표값을 얻어와야 했습니다. 처음엔 네이버 geocode 로 그 작업을 진행했는데, 네이버는 단순히 지역만 리턴해주고, 지하철역이나 좀 더 세부적은 곳은 검색해내지 못하는 문제가 있어서 야후 POI로 급 노선 변경하였습니다.

2008/11/18 - [Review/IT] - 네이버(Naver) 를 통해 다음(Daum) 지도를 검색하자.


우선 개발상태는 다음과 같습니다. 이게 좀 직관적이지 못한것도 같네요. 뭐 설명도 하나 없어서 당황스러운것도 사실입니다. ㅎㅎ


뭐 보면 검색어를 입력할 수 있는 검색창이 있고, 검색된 상태에서 클릭하면 그 지역으로 지도가 이동합니다.

검색어를 입력하면 위 이미지와 같이 검색된 내용이 출력됩니다. 참 쉽죠?
이제 원하는 곳의 근방을 클릭해서 지도를 이동합니다.


위치 이동후 원하는 지역을 더블클릭 합니다.(한번클릭으로 변경 되었습니다.) 더블클릭하면 클립이미지가 뜨고, ( <-- 이런 이미지 입니다.) 거기에 한번 더 클릭을 하게 되면 위에 보이는 작은 레이어창이 뜹니다. 여기에 번개정보를 입력하고 등록을 누르면 완료입니다.

어때요, 참 쉽죠?

등록을 위해서 날짜, 미투아이디만날 장소는 필수입력이고, 사용자키를 입력하면 자신은 자동으로 참여 됩니다. 그리고 이 번개 내용을 자신의 미투에 알리고 싶다면 사용자키를 입력하셔야 합니다. 사용자키. 뭔지 아시죠? ^^

등록이 완료되면 아래와 같이 등록된 내역이 보입니다.

여기서 빨간색 부분을 클릭하면 지도에서 바로 이동하고, X명 으로 표시된 부분을 누르면 이 번개의 현재까지의 참가자를 볼 수 있습니다. 그리고 참여하기를 누르시면 이 번개에 참여가 되지요.(로그인 필요합니다.)
** 참여하기는 버튼을 누를 경우 사용자키를 입력받아서 별도의 수고를 들이지 않도록 개발할 예정입니다.


리스트에서 선택한 부분으로 지도가 이동하면 클립이 나타나는데, 이 클립을 한번 클릭하면 등록자가 어떤 번개를 생성하였는지 확인할 수 있습니다.

마지막으로 Me2Meet은 IE8의 최신 기중 중 webslices 를 지원합니다.
2008/08/12 - [Review/IT] - [ IE8 ] 웹슬라이스를 적용한 미투데이 최근 댓글 구독.
2008/08/11 - [Review/IT] - [ IE8 ] 웹슬라이스(webslices) 적용했습니다.

http://ottd.iruis.net/~onionmen/me2/meet/meet_list.php 이 주소로 들어가시면 IE8이나 FF with webchunks 사용자는 다음과 같은 표시를 볼 수 있습니다.

웹슬라이스를 등록 하면 지도에서 확인하는것과 같은 것은 무리일지 몰라도 어떤 번개가 어디서 열리는지는 쉽게 확인 할 수 있습니다.


Me2Meet 을 사용한 모든 번개정보는 http://me2day.net/me2meet 이라는 계정에 기록됩니다. 이 계정의 RSS(http://me2day.net/me2meet/rss)를 등록해놓으면 번개정보를 바로바로 확인 할 수 가 있지요. 번개에 목마른 미투인들. 이참에 한번 번개 호스트가 되어 보는게 어떠신가요?

관심Tag로 me2meet 을 등록해 놓으면 이 역시 바로바로 번개글 확인이 가능합니다. 참고하세요!

Me2Meet 의 주소는 http://ottd.iruis.net/~onionmen/me2/meet/  이곳 입니다. :-)

아쉽지만 해외는 지원하지 않아요!

  • 08년 11월 30일  미투데이 쉬운웹인증을 추가했습니다. 좀 더 사용하기 편리할 거 에요.
  • 08년 11월 30일  등록 후 모임등록하기 창을 꺼버리는데 성공했습니다. 정확히 얘기하면 끄는건 아니지만 어쨋든 사용성면에서 프러스가 되겠네요. 
  • 08년 11월 30일  등록 후 번개리스트가 자동갱신 되도록 수정하였습니다. 역시 사용성 향상에 도움을 줄 수 있겠네요.

이렇게 대충 개발을 마치긴 했는데, 아직 미흡한 것이, 장소를 등록하고, 등록창을 끄지 못하고 있습니다. 어떻게 창을 없애야 하는지 좀 감이 잡히지 않네요. 또, 등록을 완료하면 아래 창에 자동 갱신이 되게 하고 싶은데, 이거 쉽지가 않네요. 계속 Failed to open POST stream 이 뜨는데, 정확한 원인은 모르겠네요.
-> mark 를 두개 만들어서 새로 호출하는 방식으로 해결했습니다.
-> 해결했습니다. ajax.request 에서 onSuccess 부분에 parent.parent. 넣어주니 되는군요. -_-

디자인도 좀 입히고 싶은데, 디자인하기 너무 힘드네요. 디자인 하는게 PPT만드는거만큼만 쉬웠어도, 좀 더 이쁜놈이 나왔을텐데 살짝 아쉽습니다.

마지막으로 IE6에서 어떻게 나올지 모르겠네요. 미투사용자중에 IE6를 사용하는 사람은 많이 없겠지만, 간혹가다 있을지 모르니..
처음이랑 인터페이스가 변경 되었는데, IE6에서 깨지는 문제로 하루종일 작업했습니다. ㅠㅠ IE6싫어요! 뭐 그렇다고 파이어폭스3이나 IE7,8 에서 이쁘게 나온다거나 그런건 아니에요.

이 서비스는 Daum 지도 OpenAPI, Yahoo POI API, Me2day OpenAPI 그리고 Me2PHP를 사용하여 개발되었습니다.
API를 제공해주신 분들께 감사드리고, 특히 me2php를 제작해주신 홍민희 님께 너무너무 감사드려요~!!

신고
Posted by onionmen

댓글을 달아 주세요

  1. 김복정씨 2008.11.24 00:18 신고  댓글주소  수정/삭제  댓글쓰기

    간지나는데? ㅋㄷㅋㄷㅋㄷㅋㄷ

  2. Favicon of http://www.annonce-su.com/ BlogIcon Suisse 2009.01.13 09:08 신고  댓글주소  수정/삭제  댓글쓰기

    마지막으로 Me2Meet은 IE8의 최신 기중 중 webslices 를 지원합니다?

    • Favicon of http://onionmen.kr BlogIcon onionmen 2009.01.13 23:45 신고  댓글주소  수정/삭제

      네, 곧 출시할 마이크로소프트의 익스플로러8.0이 지원하는 웹슬라이스를 지원합니다. ^^
      http://onionmen.kr/255 여기 참고하세요

블로그에 웹슬라이스를 적용했었습니다.

그리고 제가 자주 사용하는 웹서비스 미투데이(링크)에도 이 기능을 적용 할 수 있을 것 같아 시험삼아 만들어 봤습니다.

아이디만 알면 그사람의 최근 덧글을 가져올 수 있는 일종의 가젯입니다.
이용하시려면 IE8을 설치하시거나, 아니면 일전에 소개해드린 파이어폭스의 확장기능인 Webchunks (다운로드링크) 를 설치하셔야 합니다.

웹슬라이스를 적용하기 위해 HTML을 파싱하는 simple HTML DOM parser(링크) 를 사용했습니다.


DOM parser를 이용해 Comment To Me의 내용만 추출했습니다.

사용자 삽입 이미지

이 곳에 webslices 를 적용시킬 div 태그만 넣으면 끝날 줄 알았는데, 아니더군요. -_-;

사용자 삽입 이미지

링크부분에 http://me2day.net 이라는 부분이 빠져있어서 /eyedamping 이라는 Mr.면도날드님의 아이디만 링크로 연결되어 있었습니다. 그래서 클릭해도 제대로된 링크로 갈 수 없었습니다.

그래서 저 HTML을 다시 파싱하여 링크를 넣었습니다.
사용자 삽입 이미지

사용자 삽입 이미지

제대로 된 링크가 잡혔고, 웹슬라이스를 적용시킬 태그 몇개를 더 넣어주어 완성하였습니다.

사용자 삽입 이미지

파이어폭스에서 모습


사용자 삽입 이미지

IE8에서의 활용 모습

완성!

사용자 삽입 이미지

여기 이렇게 아이디만 바꿔서 webslices 로 등록하면 됩니다!

사용자 삽입 이미지


별도의 OpenAPI를 사용하지 않고도 HTML 포함 41줄 코딩하여 간단하게 최근댓글을 불러올 수 있게 되었어요.
간단한 CSS도 적용해서 좀 더 예쁘게 만들 수도 있어요.

어떄요. 참 쉽죠?



덧1. FF는 클릭 즉시 읽어오기 때문에 덧글 내용을 바로바로 확인할 수 있는데, IE8의 경우는 15분의 수집시간이 있어서 내용을 바로바로 확인할 수 없어서 아쉽습니다!

덧2. PHP5를 지원하고 allow_url_fopen 옵션이 On 으로 되어있는 웹서버가 없어서 외부서버에서 돌릴 수가 없네요. ㅠㅠ

덧3. 조금의 수고를 들여서 RSS로도 만들수 있겠네요.

덧4. 소켓통신을 이용해서 외부에서 접근할 수 있도록 만들었습니다.
주소 : http://ottd.iruis.net/~onionmen/?me2id=
me2id 다음에 자신의 미투데이 주소를 넣으세요.
(예: http://ottd.iruis.net/~onionmen/?me2id=3rdtype)

신고
Posted by onionmen

댓글을 달아 주세요

  1. Favicon of http://www.hwanny.net BlogIcon Noel 2008.08.12 13:09 신고  댓글주소  수정/삭제  댓글쓰기

    "참 쉽죠?" 라는 말이 밥 로스가 문득 생각나는군요 ^^;

  2. Favicon of http://icehit3.tistory.com BlogIcon 파초 2008.08.12 14:40 신고  댓글주소  수정/삭제  댓글쓰기

    재밋어 보이긴 한데, ie 8을 설치해야 된다는 얘기에 귀차니즘이 도지는군요 ^^;

    • Favicon of http://onionmen.kr BlogIcon onionmen 2008.08.12 14:49 신고  댓글주소  수정/삭제

      IE8 말고도 파이어폭스 사용하신다면 확장기능 설치로 사용 가능합니다. 파폭 사용 안하신다면 어쩔수 없지만요. ㅎ 언젠가 IE8 정식버전이 나온다면 한번 사용해보세요. ^^

  3. Favicon of http://pys.i21c.net BlogIcon 박영식 2008.08.12 16:38 신고  댓글주소  수정/삭제  댓글쓰기

    좋아요 좋아요.

  4. Favicon of http://marketings.co.kr BlogIcon 마케팅스 2008.09.07 00:24 신고  댓글주소  수정/삭제  댓글쓰기

    와, 하지만 역시 8 버전이 선행되어야 한다는 ,.., 웹슬라이스를 보고 웨슬리스나입스가 생각나는건 웨일까 ,,. 웨 ..

    • Favicon of http://onionmen.kr BlogIcon onionmen 2008.09.17 23:43 신고  댓글주소  수정/삭제

      ㅎㅎ 안녕하세요 넷물고기님. 제가 답글이 많이 늦었네요 ^^;;

      오늘 IE8 Beta2 세미나에 다녀왔습니다.
      참 많이 좋아졌더군요. 이참에 IE8한번 설치해보심이 ^^

      웹슬라이스와 웨슬리스나입스 ㅋㅋ 비슷하네요. ㅎㅎ

  5. Favicon of http://echoya.com/ BlogIcon 에코 2008.09.10 23:25 신고  댓글주소  수정/삭제  댓글쓰기

    님하, 언제쯤 쉬워지나요?ㅋㅋ

webslice 라고 적어놨는데, webslices 군요. 제목 수정했습니다.


언젠가 uxfactory 에서 글을 보고 내 블로그에도 적용시켜 봐야지 했는데, 오늘 회사에서 시간이 잠시 비어 적용해 봤습니다.

IE8에 도입된 새로운 기능 중 하나인 웹슬라이스를 사용할 수 있도록 적용해봤습니다.
어려운 기술이 들어가는 것은 아니고 단지 HTML 태그 두세개만 추가해주면 쉽게 적용 가능하네요.

다음 URL을 가보시면 쉽게 적용시킬 수 있을 것 같습니다.

링크

간단히 요약하자면 다음과 같은 태그를 적용시키고자 하는 부분에 넣어주시면 됩니다.

<div class=”hslice” id=”1”>
  <p class=”entry-title”>item - $66.00</p>
  <div class=”entry-content”>high bidder:buyer1
     적용시킬 태그를 이곳에 넣어주세요.
  </div>
</div>

div나 p 와 같은 태그는 신경안쓰셔도 되고, class 부분에 들어가는 이름만 적용하시면 될 듯 합니다.
그에 맞는 CSS도 함께 적용시켜주시면 한층 이쁘겠죠?

현재 IE8 베타1에서 이 기능을 사용하실 수 있고, FF3에서는  Webchunks (다운로드링크) 라는 이름의 확장기능을 통해 사용하실 수 있습니다. 이 확장기능은 IE8 beta1이 공개되자마자 다음날 바로 FF용 확장기능으로 나와 사람들의 입에 오르내린적이 있습니다. 현재 FF 3.0.1에서 사용가능한 버전은 webchunks 0.13 버전입니다. 위 링크에서 받으세요.

IE8과 부가기능을 설치한 FF 사용자가 제 블로그 사이드바의 최근 댓글에 마우스를 올리시면 손쉽게 추가하실 수 있습니다.

사용자 삽입 이미지

파이어폭스에서의 이미지


사용자 삽입 이미지

요건 IE8에서의 모습.

재미로 적용시켜 봤는데, 추후에 IE8이 보급될 경우 많은 확장성이 있겠네요. ^^

IE의 경우에는 즐겨찾기의 빠른연결에 등록이 가능한데, FF의 경우는 빠른연결 하단에 또다른 Bar 가 생기는점이 아쉽습니다.

그리고 IE는 아직 버그인지 이름을 수정해도 반영이 되지 않는군요. 조만간 Beta2나 정식버전이 나오면 수정될 부분인것 같습니다.

신고
Posted by onionmen

댓글을 달아 주세요

  1. Favicon of http://dbjang.tistory.com BlogIcon dbjang 2008.08.22 20:32 신고  댓글주소  수정/삭제  댓글쓰기

    아이콘을 누르면 옆으로 프레임처럼 나타나는건가요??
    내가 정확히 이해를 잘 못하는 듯.. ^^;;;;;

    • Favicon of http://onionmen.kr BlogIcon onionmen 2008.08.24 01:31 신고  댓글주소  수정/삭제

      아이고, 안녕하세요 란♡님. 오랜만입니다.
      제 글에 설명이 부족했나봅니다.
      아이콘을 누르면 프레임처럼 나타나는건 아니고, 즐겨찾기처럼 등록이 됩니다.

      익스플로러(또는 FF)의 주소표시줄 아래에 등록이 됩니다. 그리고 그걸 클릭하시면 별도의 창이 뜨지 않고 바로 그부분에 대한 업데이트된 내용을 확인하실 수 있는거죠.

      자세한 내용은 이곳(http://joongs.net/15)을 참고하시면 될 것 같아요 ^^

이전버튼 1 이전버튼

블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2017.12
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday140
Today105
Total1,625,740

티스토리 툴바