블로그 주소 지원 패턴 안내

포함글 패턴 안내

레몬펜으로 블로그 페이지에 형광펜을 긋거나 쪽지를 붙였는데, 다시 방문했을 때 해당 하이라이트나 쪽지가 사라지는 경우가 있습니다.
버그라기 보다는 블로그의 주소와 컨텐츠 관계의 특성에서 비롯된 것입니다.
레몬펜은 일반적으로 하나의 주소를 하나의 컨텐츠로 간주하게 됩니다. URL 자체가 하나의 컨텐츠(Resource) 에 대한 주소로 고안되었기 때문입니다. 다만, 블로그나 게시판 등 웹에서 보편화된 시스템들의 경우, 하나의 블로그 대표주소에 여러개의 컨텐츠들을 나열하고, 또한 시간에 따라서 새로운 글이 추가되면서, 예전의 글이 다음 페이지로 넘어가면서 특정 블로그페이지 에서 사라집니다. 이 경우, 레몬펜이 페이지 주소와 연결해서 붙여놓은 하이라이트는 선택된 텍스트를 찾지 못하여 나타나지 않으며, 쪽지의 경우 페이지내 절대 위치에 계속 남아 있어서, 새로운 컨텐츠로 변경된 페이지 내용과 맞지 않게 됩니다.
(사진에 쪽지를 붙였는데, 사진의 글이 새로운 글에 밀려 내려가도 쪽지가 계속 그 위치에 붙어 있는 경우에 해당됩니다.)

레몬펜은 블로그 글과 주소와의 이러한 특성을 '포함글 패턴' 이라고 정리하고, 이 패턴을 여기에 기재된 스펙에 따라서 지원합니다.

1. 블로그 글/주소에 대한 가정

이 문제를 해결하기 위해서는 우선 블로그 글과 주소와의 관계에 대한 가정을 명확히 정리하는 것이 필요합니다.

2. 블로그 페이지/글 간의 관계 - '포함글 패턴'

블로그에서 개별 글은 여러 블로그 페이지에 출력될 수 있습니다. 이를 설명하기 위해서 '포함글 패턴' 이라는 용어를 도입합니다. 즉, 하나의 블로그 페이지에 블로그 글이 '포함' 되어있다고 설명하는 것입니다. 이때, 모든 블로그 페이지의 영역은 포함된 글들 각자의 '글 영역'들과, 이 글들을 포함하는 '테두리 영역' 으로 구분될 수 있습니다.

레몬펜으로 블로그에 만든 모든 하이라이트나 쪽지는 특정 '글 영역' 이나 '테두리 영역' 에 붙는 것으로 구분합니다. '테두리 영역' 남긴 하이라이트/쪽지는 기존처럼 해당 페이지의 주소와 연관해서 기억지만, '글 영역' 에 남긴 것은, 특정 글에 붙인 것으로 간주되어, 아래와 같이 개선된 사용자 경험을 제공합니다.

포함글 패턴은 의외로 단순하지만, 웹의 컨텐츠와 페이지간의 관계에서 흔히 발견되는 패턴이므로 아래의 패턴 구성 조건만 만족되면 어디에나 쉽게 응용하실 수 있습니다.

• 포함글 패턴 구성 조건

  • • 글의 영역을 둘러싸는 하나의 블럭 태그가 있다.
    • 글의 영역내에 글의 고유링크가 있다.

  • 실제 응용 사례

    • textcube 방명록 포함글
    • 레몬펜쪽지카트

3. 블로그 페이지내 포함글 패턴이 자동으로 지원되는 패턴들

블로그 페이지에서 글 영역과 테두리 영역을 파악하기 위해서는 블로그 엔진/버전별 태그 패턴, 권장 표준이 정리되어야 합니다. 다만, 블로그별 예외처리와, 블로그가 아닌 사이트의 지원을 위해서 사이트 개별적인 커스토마이징을 스크립트 차원의 수정을 통해서 지원합니다. microformat 패턴을 따라서 html 태그의 'class','rel' 속성값들의 패턴을 지원합니다. 참고로, 'class', 'rel' 값은 공백을 구분자로하여 여러값을 가질 수 있으므로, 기존 스킨을 수정하실 경우, 필요한 class, rel 값들을 적절히 추가하시면 됩니다.

1. 태터툴즈 계열 블로그

   1. 티스토리, 태터툴즈, 텍스트 큐브 1.5.x 까지 해당됩니다.

   2. 테터툴즈 여부 식별

      • 표준화된 방법이 없습니다.

   3. 아래의 태그/class 패턴에 따라서 글 영역과 글의 고유주소를 파악합니다. (중간 태그들 허용합니다.)

      1. <div class="entry  ...">글영역시작 ...
          <div class="titleWrap  ...">...<a href="글고유주소" >글제목</a> ...</div>
      2. </div>

   4. 추가로 'entry' 자리에 허용되는 태그[ entry-class ] 명은 ..

      1. div[class="entry"], div[class="entry_notice"], div[class="entryNotice"], div[class="entryProtected"]

   5. 'titleWrap' 자리에 허용되는 태그[ title-class ] 명은 ..

      1. div[class="titleWrap"], div[class="subject"]

   6. 텍스트큐브 1.6 이후로는 hAtom 패턴 지원이 예상됩니다.

2. 워드프레스 블로그

   1. 워드프레스 식별

      • <meta content="WordPress 2.2.3" name="generator"/>

   2. 아래의 태그/class 패턴에 따라서 글 영역과 글의 고유주소를 파악합니다. (중간 태그들 허용합니다.)

      1. <div class="post ...">글영역시작 ...
            <a rel="bookmark ..." href="글고유주소">글제목</a>
         ...
         </div>

   3. 추가로 'entry' 자리에 허용되는 태그[ entry-class ] 명은

      1. div[class="entry"], div[class="post"]

   4. 제목 A 태그에는

      1. <a rel="bookmark" href="">를 반드시 포함

레몬펜 권장 표준

1. hAtom 패턴을 지원합니다. (hAtom 은 가벼운 시멘틱웹 포맷 microformat 의 일종입니다.)

2. 아래의 태그/class 패턴에 따라서 글 영역과 글의 고유주소를 파악합니다. (중간 태그들 허용합니다.)

   1. <div class="hentry...">글영역시작 ...
         <a rel="bookmark..." href="글고유주소">글제목</a>
   2. ...
   3. </div>

3. 글영역 태그는 'div' 가 아니어도, class='hentry' 를 가지는 모든 html 태그이면 지원됩니다.

   1. *[class="hentry"]

관련글 : 블로그 주소 지원