어떤 계기로 여러 사이트들의 Open API들을 살펴보다가 네이버의 지도 Open API를 이용한 억지 지도 검색 기능을  한 번 만들어봤습니다. ( http://ikspres.koruby.com/map/map )

그런데 네이버의 지도 자체는 휼륭하지만,  검색 기능이 좀 그렇더군요. 예를 들어 '선릉역' 과 같은 단어로는 검색이 안되고 '대치4동' 같은 행정명으로만 검색이 됩니다.

그래서 일반 명칭 검색도 가능하면서, 지도의 좌표를 알려주는 곳이 없는 지 찾다가  Daum의 지도 서비스에 검색 기능을 이용해 보기로 했습니다. http://local.daum.net/map/ 

사실 이 부분은 open api로 제공되는 것이 아니므로 form posting을 직접 하고 그 결과 html을 파싱했습니다. html 파싱에는 why 의 hpricot 이 최고더군요. 

만들면서 또 하나의 문제를 만났는데, 그것은 다음과 네이버가 사용하는 좌표계가 서로 다르다는 것이었습니다.  다행히도 앞서서 네이버 지도와 구글 지도를 하나로 합쳐서 보여주는 meshup 서비스를 몇 분이 개발하면서 지도 좌표계 변환에 대해서는 어느 정도 정리가 잘되어 있더군요. 덕분에 좌표계에 대해서도 배웠습니다.  aero님이 정리하신 내용이 가장 상세한 것 같습니다.  http://advance.sarang.net/~aero/map/analysis.html

P.S  어떤 이유인지 모르지만 제 호스팅 계정의 rails가 좀 이상하군요. 가끔 application error가 나는데 몇 번 reloading을 하면 괜챦아지네요.

P.S2 혹시나 하여 말씀드리면, 제가 이번에 만든 것은 상업적 목적으로 만든 것이 전혀 아니며, 개인 수준에서 그냥 한번 해본 것입니다. 공개한 링크도 곧  내릴 예정이므로 혹시 다음에 계신 분이 보시더라도 너무 기분나빠하지 말아주세요.)

드디어 높으신 분들이 알만한 곳에 레일스 레퍼런스가 생겼네요.

http://unspun.amazon.com

사용자들이 자유롭게 올리는 주제들에 대해서 순위 매기기 같은 consensus 서비스를 제공합니다.

예를 들어 최고의 영화 속 인물 ('Movie Character')은 인디아나 존스, 제임스 본드, 다스 베이더 순이네요.
그런데 최고의 맥주 1위는 도대체...  Warm Piss 라니^^

 루비세미나에 다녀왔습니다. 예상했던 20명보다 훨씬 더 많은 분들이 참석해주셨습니다. 덕분에 세미나실이 좁게 느껴졌지만 오히려 기분이 좋더군요.

발표 내용 중에서 개인적으로는 유니코드 지원에 대한 문제에 대해서 명쾌한 설명을 해주신 nohmad님의 발표가 가장 기억에 남습니다. 발표자료가 있었다면 훨씬 더 좋았을 텐데요.
딥블루님과 대산님의 발표는 역시 기대를 저버리지 않는 재밌있는 내용이었고, 정목님은 비 IT전공자라는 것이 믿기지 않는 깊이 있는 내용으로 Capistrano를 소개해 주셨습니다. Codian님의 현재 개발하시고 있다는 내용에 대해서는  흥미로운 구조의 시도라는 생각이 들었는데 시간이 부족하여 많이 아쉬웠습니다.

저는 최근 제가 사용해왔던 UJS Rails Plugin을 소개했습니다.

UJS Plugin은 CSS Selector 로  HTML element 나 element의 event 를 지정하여 behavior를 지정할 수 있게 해줍니다.
또 자바스크립트 코드들은 HTML 코드와 섞여있지 않고 자동으로 만들어지는 JS파일에 들어가게 됩니다.
UJS Plugin을 사용하면 그 동안 자바스크립트가 넘실대는 HTML 소스를 보면서 느끼던 죄책감에서 깔끔하게 벗어날 수 있습니다.

저의 발표자료는 '다카하시 방식'을 위장한 '게으른 자의 방식'이므로 거의 유용하지 않습니다.
Dan이 rails2006에서 발표한 자료를 보시기를 권합니다.


deepblue님 말씀처럼 루비 세미나가 앞으로 정기적으로 열린다면,  한국의  루비 커뮤니티가 더 성장하는 하나의 계기가 될 것이라고 생각됩니다.

11월 25일 루비를 사랑하는 사람들이 모이는 세미나가 열리게 되었습니다.
장소는 분당 오픈마루 사무실.


루비와 레일스에 대한 단순 소개 수준을 조금 넘어서, 여러가지 재미있는 내용들의 발표와 지식 공유의 시간이 될 것입니다.

현재 선착순 20명 받고 있습니다. 발표주제 및 참가 신청은 아래에서...

http://wiki.rubykr.org/show/RubySeminar

todo list 관리 툴을 rails로 한 번 만들어 봤습니다. 사실 todo 관리의 방식은 각 개인마다 차이가 있기 마련이기에 자신에게 맞는 툴을 찾기는 쉽지 않습니다. 그래서 제 개인적인 요구사항들을 반영해서 만들었고  아직 완성도는 떨어지나  나름대로 만족하며 사용하고 있습니다.



제가 꼭 필요하다고 생각했던 요소들은 다음과 같습니다.

• Online : 집에서도, 회사에서도 사용할 수 있어야 한다.
• CLI : 코딩을 하다가 shell에서 바로 사용 가능해야 한다.
• Tagging : 쉽게 분류하고 찾을 수 있어야 한다.

어제 jania님이 비슷한 내용을 javascript로 만드신 것을 보고 제 것도 한 번 공개해봅니다. todo.txt 에서 concept를 가져온 것이 공통점이네요. 사실 todo 관리는 웹같은 GUI 보다는 CLI(Command Line Interface) 기반이 훨씬 편리한 것 같습니다. todo list 관리를 할 때마다  브라우저를 기동하고(실행 중인 브라우저가 없다면) 해당 웹사이트로 접속해야 한다면 너무 불편할 겁니다.

pyvnc2swf(정말 멋진 툴입니다.)로 사용법 동영상도 한 번 만들어 봤습니다. 아무나 한 번 사용해보시라고 오픈해 둔  웹 사이트에서 직접 해 보시거나, CLI 클라이언트를 다운로드 받아서 해 보실 수 있습니다. 클라이언트는 원래 ruby스크립트인데 몇가지 gem도 있어야 하고 해서 rubyscript2exe 를 이용해서 exe를 만들었습니다.

다른 분들은 Todo 관리를 어떻게 하시는 지 궁금하네요. 어떤 기능들이 더 있다면 좋을까요?

구글 북마크를 처음 봤을 때 Delicious를 위협할 수 있는 서비스가 될 것이라고 생각했고, 마침 당시의 del.icio.us 속도가 너무나 느렸기에 그 이후로 구글 북마크를 주로 사용해 왔습니다. 그런데 곧 개선될 것으로 믿었던 불편한 점들이 그동한 거의 개선되지 않아서 다시 del.icio.us로 돌아갑니다.

(이 길고 긴 리스트를 보세요. 화살표에 있는 버튼을 눌러서 한 참 스크롤을 해야 원하는 tag를 찾을 수 있습니다.)

제가 사용하면서 느낀 불편한 점은 다음과 같습니다. 우선 저장해놓은 북마크들에 대해서 tag 기반으로 검색을 할 수 없습니다. 제대로 된 tag기반 북마크 시스템이 아니라는 얘깁니다.  일반적인 검색은 할 수 있으나 구글 툴바에서 직접할 수는 없고 구글 북마트 사이트로 일단 이동해야 합니다. 이렇게 되면 del.icio.us보다  더 나은 점이 정말 없는 게 됩니다.

그런데 오늘 del.icio.us로 다시 돌아가려고 하다가 또 한번 실망했습니다. 구글 북마크에서는 export를 지원하지 않는군요. 이런이런 요즘같은 세상에 이런 닫힌 서비스가... 혀를 차면서 이리저리 찾아보다가 Firefox에서 구글 북마크를 이용할 수 있게 해주는 플러그인의 하나인 Gmarks에서 export를 지원하는 것을 알게되었습니다. 출력 포맷은 OPML 같은 표준 방식은 아니고 HTML 이군요. 그래도 참 다행입니다.  이 놈을 IE나 Firefox같은 브라우저의 Local bookmark export 포맷으로 변환한 후에 delicious에서 import 하면 되겠군요.

다행히 저는 구글 북마크에 저장된 링크가 많지 않고,  필요없는 링크도 상당 수 있어서 이번 참에 필터링도 한 번 할 겸하여 그냥 수동으로 이사했습니다.  수동으로 이사할 때도 Gmarks에서 만들어준 html을 열어놓고 작업하니 훨씬 편리하고 빠르더군요.

그리고 오늘 예전부터 delicious에서 가장 불편하게 생각했던 점을 해결했습니다.
브라우저에서 delicious에  북마크를 바로 추가하는 것은 한 번에 가능한데(delicious에서는 지원하는 브라우저용 플러그인이 제공하는 버튼 사용) 저장해둔 북마크들 중에 하나를 찾으려면 delicious로 일단 가야 한다는 사실이 저는 참 불편했습니다.  이 문제를 어떻게 해결 하는 방법이 없을까 알아보다가  '구글' 툴바에서 제공하는 '사용자 정의 검색 생성 이라는 기능을 사용하면 구글 툴바의 검색 유형에 delicious에 있는 나의 북마크들에 대한 검색을 추가할 수 있다는 것을 알게 되었습니다.




ㅎㅎ 아이러니입니다. 'delicious를 위협한다'고 생각했던 구글이 delicious를 도와주는 꼴이 되었습니다.

아주 간단히 설명하면 HTA(HTML Application)은 html 파일의 확장자를 hta 로 바꾼 것입니다. 따라서 hta에서는 기존에 사용하던 HTML/XHTML, CSS, Javascript를 모두 사용할 수 있습니다. 하지만 주목해야 할 사실은 hta는 로컬에서 실행되는 것이 보장되기 때문에 외부 프로그램 실행과 로컬 파일들의 입출력이 자유스럽다는 점입니다.(이러한 작업들은 주로 Windows Script 에서 제공하는 기능들을 이용하여 가능합니다.)

요 몇일간 개인적으로 사용하던 루비 스크립트에 GUI를 추가하고 싶어서 마땅한 GUI툴을 또 다시 조사해보다가 갑자기 'html, css, javascript'를 이용해서 만든 페이지를 루비의 GUI로 사용할 수 있다면 좋겠다는 생각이 들었습니다. 그리고 곧 hta라는 것이 있다는 사실을 알게되었고 약간의 시행착오 끝에 상당히 마음에 드는 GUI를 만들 수 있게 되었습니다.

HTML를 GUI로 사용하겠다는 생각이 든 것은 다음과 같은 이유 때문입니다.
현재 루비의 GUI 환경로는 qt-ruby, wxruby2, ruby-gtk2, fxruby, tk 등 여러 가지가 있지만  아직은 이 것이다라고 할 만큼 널리 사용되거나 안정적이고 문서화가 잘된 것이 없습니다.  따라서 이들 중 하나를 사용하기 위해서는 초기에 상당한 노력과 시행착오가 필요하게 됩니다.  그런데 다들 아시겠지만 정적인 화면 구성만 가능했던 예전과 달리 이제는 CSS와 Javascript 기술을 잘 사용하면 HTML을 가지고도  GUI를 충분히 잘 만들 수 있습니다. 따라서 HTA로 GUI를 개발 한다면  새로운  GUI 개발 환경을 익히는데  노력을 투자할 필요없이, 웹 UI 개발 기술(HTML+CSS+Javascript) 한 가지에 집중할 수 있게 됩니다.

그런데 간과할 수 없는 하나의 큰 문제점이 있습니다. 그것은 HTA는 MS의  IE에서만 지원하므로 Windows기반에서만 사용할 수 있다는 사실입니다.

하지만 저는 앞에서의 장점이 꽤나 마음에 들고, 또 개인적으로 사용하는 프로그램의 경우에는 다양한 OS에서 수행할 필요가 없으므로 당분간은 루비의 GUI는 HTA를 이용해서 해볼 생각입니다.


조만간 Ruby의 GUI를 HTA로 만든 기본 방식과 샘플을 올려보도록 하겠습니다.

WEB 2.0 디자인에서 자주 사용되는 rounded box 를 제대로 구현하는 것은 그 심플한 모양과는 달리 꽤나 복잡합니다.
여기서 '제대로'라 함은 박스의 크기가 그 내용에 따라 자유자재로 늘어나거나 줄어들 수 있음을 의미합니다.(왜 늘어나는 박스를 사용해야 하는 지와 어떻게 구현 하는 지에 대해서는 친절한 방탄웹에 잘 나와 있습니다.)


보통 많이 사용되는 박스는 다음과 같은 모양입니다.
구현은 여러가지로 가능하겠지만, 방탄웹등 여기 저기의 내용을 참조하여 처음으로 만들어 본 HTML코드는 다음과 같았습니다.

 /* HTML */

<div class='filled_rounded_box'>
            <div class='rbox_top'><div></div></div>
            <div class='rbox_content'>
                <p> item 1</p>
                <p> item 2 </p>
                <p> item 3 </p>
            </div>
            <div class='rbox_bottom'><div></div></div>
 </div>

/* CSS */

/* four rounded corner images */

.rbox_top {
    height: 5px;
    background: #B5EDBC url(images/corner_tl.gif) no-repeat top left;
}

.rbox_top div{
    font-size: 1px;
    line-height:0;
    height: 5px;
    background: url(images/corner_tr.gif) no-repeat top right;
}

.rbox_bottom {
    height: 5px;
    background: #B5EDBC url(images/corner_bl.gif) no-repeat bottom left;
}

.rbox_bottom div{
    font-size: 1px;
    line-height:0;
    height: 5px;
    background: url(images/corner_br.gif) no-repeat bottom right;
}

.filled_rounded_box {
    background: #B5EDBC;
}

/* rbox_content for border in for b_rbox and t_rbox */
.rbox_content {
    border-left: #b5EDBC 4px solid;
    border-right: #b5EDBC 4px solid;
}

.rbox_content p {
        margin: 0;
        margin-left: 5px;
}

먼저 위의  CSS에 대해서는 생각하지 말고 HTML에 대해서만 생각해봅시다.

 /* HTML */

<div class='filled_rounded_box'>
            <div class='rbox_top'><div></div></div>
            <div class='rbox_content'>
                <p> item 1</p>
                <p> item 2 </p>
                <p> item 3 </p>
            </div>
            <div class='rbox_bottom'><div></div></div>
 </div>

실제 박스에 나오는 내용은 item1, item2, item3 와 같이 간단한 내용인데 HTML의 내용은 꽤나 복잡합니다. 그 이유는 바로 네 귀퉁이의 둥근 모서리 이미지를 표현하기 위해서입니다.

각 모서리를 하나의 background-image로 표현했고, 이 4개의 모서리 이미지를 배경이미지로 달기 위해서는  실제 내용과는 상관없는  여러개의 div 들이 추가로 필요하게 된 것입니다.(위에서 빨갛게 표시한 부분) 

이런 식으로 구현하다보니 HTML 속에 data가 아닌 design 요소들이 들어가게 되어버렸습니다.   CSS는 제껴두고서라도 아래의 복잡한 HTML의 내용을 보고 화면에 표시될 내용이 뭔지 파악하는 것이 쉽지 않습니다.

그런데 똑같은 박스의 표현이 가능하도록 하면서 HTML의 내용을 간결하게 할 수는 없을까요?

<div class='fIlled_rounded_box'>
     <p> item 1 </p>
     <p> item 2 </p>
     <p> item 3 </p>
 </div>

 

이렇게만 된다면 멋지겠군요. 화면에 표시될 내용의 묶음인 div의 class에 표시할 박스의 모양을 적어주는 것으로 끝입니다.

이것을 가능하게 하려면 javascript의 도움이 필요합니다.

var init = function {
  var prefix =  "<div class='rbox_top'><div></div></div>" + "<div class='rbox_content'>";
  var postfix =    "</div>" + "<div class='rbox_bottom'><div></div></div>";

  var list = document.getElementsByClassName('filled_rounded_box');
     listt.each( function(b) { b.innerHTML = prefix + b.innerHTML + postfix; });
}

코드가 짧지만 좀 복잡합니다. 간단히 설명하면 클래스가 'filled_rounded_box'인 놈들을 모두 뽑아서 list에 집어 넣습니다.

list에 있는 각각에 대해서 그 innerHTML의 앞 뒤로 필요한 div들을(앞에서 빨갛게 표시했던 부분) 붙여주는 겁니다. (아참! 이 코드는 prootype.js 를 사용했기 때문에 getElementByClassName이나 each 같은 멋진 함수들을 사용할 수 있었습니다.)

위의 자바스크립트를 cssbox.js 에 담아두고 html의 body tag를 <body onload="init()"> 처럼  해주면 페이지가 로딩되자마자  위의 코드가 살행되면서 그 페이지내에 있는 모든 박스들의 모양을 만들어줍니다.

멋지지 않나요? 같은 테크닉으로 다른 모양의 박스도 만들어 봤습니다.

 

이런 박스들을 포함하는 페이지의 HTML 소스 아래와 같이 간결합니다.

        <h2> Filled Box </h2>

        <div class='filled_rounded_box'>
            <p> item 1 </p>
            <p> item 2 </p>
            <p> item 3 </p>
        </div>

        <br />

        <h2> Bordered Box </h2>

        <div class='bordered_rounded_box'>
            <p> item 1 </p>
            <p> item 2 </p>
            <p> item 3 </p>
        </div>

        <br />

        <h2> Titled Box </h2>

        <div class='titled_rounded_box'>
            <h3> Long and Very Loooong title </h3>
            <p> titled box </p>
            <p> titled box </p>
            <p> titled box </p>
        </div>

 

솔직히 고백하자면 디자인이 그렇게 마음에 들지는 않고 기능적으로도 아직 몇 군데 손볼 데가 있지만 그런대로 쓸만한 박스가 된 것 같습니다. (조금만 더 손보면 Titled Box에 조그만 삼각형을 클릭해서 제목 아래의 내용을 닫았다 열었다 하도록 할 수 있을 겁니다.)

실제 동작하는 페이지와 HTML, CSS, Javascript 코드들은  여기에서 보실 수 있습니다.

끝으로 위의 설명에서는 생략했지만, IE에서는 높이가 20px미만인 div를 그냥 만들어지지 않기 때문에 실제 코드에서는 div 본문에 &nbsp;를 넣고 font-size 와 line-height를 지정하는 hack을 사용했습니다.

 

업데이트:  codian님이 소개하신 이미지를 사용하지 않는 둥근 모서리 박스는 기발한 아이디어로군요. 

 

 

 

아직도 mac과 textmate을 사용하지 못하고 있는 저는 여전히 vi(vim)을 사용합니다. 그래서 vi에서 ruby 또는  rails 작업을 도와주는 팁이나 플러그인에 관심이 많습니다. 오늘 vi 사용 중에 ruby interactive help 인 ri 를 편리하게 사용하는 법을 알게되어 소개해 봅니다.

먼저 .vimrc 파일에 다음의 내용을 추가합니다 .

function Ri()
let b:x = system("ri '" . input("ri: ") . "' > /tmp/ri_output")
sp /tmp/ri_output
endfunction
map <F2> :call Ri()<CR>

(내용을 가만히 들여다 보면 굳이 vim 매크로 언어를 몰라도 이해하는 것이 그리 어렵지 않습니다.  이 패턴을 잘 기억했다가 외부 명령어를 vi 내에서 호출할 때 사용하면 좋을 듯.)

사용법은  vi 내에서 F2 키를 치며, 하단 명령어줄에 " ri:" 라고 나오며, 여기에 조회하고자 하는 클래스나 메소드 이름을 입력하면 됩니다..

 

대안 언어 축제에 이어서 열린 Framwork 2.1 에 다녀왔습니다.

항상 궁금하기만 했던 Django 에 대해서 배울 수 있는 좋은 기회였고, 무엇보다 대안언어와 대안 프레임워크에 대해 관심과 열정을 공유한 사람들이 만나는 자리에 참석하는 것 자체가 즐거운 경험이었습니다.

먼저 발표내용에 대한 소감을 간단히 말하자면,
대산님의 레일스 발표는 언제나처럼 깔끔하고 멋졌습니다. Rails의 기본적인 특징들을 일일이 잘 설명해주셔서 많은 개발자들이 감명을 받았을 것으로 보입니다.

'쟁고'의 발표도 재미있고 유익했습니다. 두 분이 페어로 발표하는 독특한 형태로 진행되었는데 많은 준비를 하신 것을 느낄 수 있었고 실제 개발을 해보신 경험을 기반으로 설명을 해주셔서 더 실감나는 발표였습니다. 특히 '쟁고'의 admin 쪽은 Rails에서도 일부 도입할 필요가 있을 것 같습니다. 기존에 Scaffold를 그냥 한번 만들었다가 개발이 진행되면서 버리는 것으로만 사용하지 말고  쟁고의 admin 처럼 계속 유지할 수 있도록 하는 것이 좋겠다는 생각이 듭니다.

다음 기회에 진행예정인 파이썬의 TurboGears와 스몰토크의 Seaside에 대한 예고편도 정말 재미있었습니다. 언제나 그렇지만 스몰토크에서는 강한 '포스'가 느껴집니다.

하나의 작은 세미나실에서 진행된 행사였지만, 앞으로 이런 행사들이 점점 더 자주 더 큰  규모로 열리기를  기대합니다.

특히나 레일스에 대한 관심들이 대단하다고 느꼈고 한 사람의 루비스트로서 뿌듯했고, 곧 레일스 단독 세미나라도 열리면 좋지 않을까 생각했습니다. 레일스의 단순한 소개 수준을 넘어서 좀 더 깊이 있는 주제들을 발표하고, 각 자가 만들어 본 재미있는 내용들을 소개하고 개발 상의 고민들을 나누며 앞으로의 동향이나 소식도 나누는 그런 자리가 한국에서도 열릴 수 있다면 참 좋겠습니다.

10월에는  BarCampSeoul 과 같은 행사가 열린다고 하는데, 루비스트 여러분! 우리도  RubyCampSeoul 이나 RailsCampSeoul 을 한 번 해보면 어떨까요.