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

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

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

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

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

 /* 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님이 소개하신 이미지를 사용하지 않는 둥근 모서리 박스는 기발한 아이디어로군요. 

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