RUKXER.net

레몬펜은 아주 유용하고 재미있는 서비스인데, 블로그에서 사용하기엔 치명적인 문제가 있었습니다. 바로, '블로그 주소 문제'입니다.

레몬펜의 기본 작동은 레몬펜이 사용된 페이지의 URL을 기준으로 잡는 것에 있습니다. 하지만 그것이 곧바로 문제의 원인이 되는 것이었습니다. 왜냐하면, 블로그는 같은 주소라도 항상 내용이 바뀌기 때문입니다.
예를 들면 http://rukxer.net 이라는 주소로 블로그를 열어 보시면 제가 포스팅을 올릴 때마다 내용이 바뀌어있는 것과 같이 말입니다.

그림으로 보면 다음과 같습니다.


이것은 지금 이 포스팅을 올리기 직전에 http://rukxer.net 으로 열었을 때 보이는 페이지의 일부입니다. 레몬펜이 두 군데서 사용되고 있음이 보입니다. 여기서 윗 부분의 쪽지를 잘 보시기 바랍니다.



그리고 이것이 해당 글의 고유 링크인 http://rukxer.net/2460672 로 페이지를 열었을 때의 화면 일부입니다. 윗부분에 있던 쪽지가 없어진 것이 보입니다. 그 쪽지는 http://rukxer.net 이라는 URL에 종속되어 보이도록 되어있기 때문에 http://rukxer.net/2460672 이라는 URL에서는 보이지 않는 것입니다.

반면에 아래쪽의 쪽지는 그대로 유지되고 있습니다. 이것이 블로그 주소 문제 해결책으로 제시된 방법을 적용한 결과입니다.


위 링크가 현재 오픈마루에서 공개하고 있는 이 문제에 관련된 해결책 글입니다. 아직 작업 단계에 있어서 완성되지는 않았지만 지금만으로도 꽤 효과적입니다.
오픈마루에서 공개한 방법은 블로그 주소 지원하기라는 스프링노트에 잘 기술되어있는데, 티스토리 스킨 입장에서 좀 더 쉽게 설명을 해보겠습니다.



1. 티스토리에서는 '공지', '보호된 글', '일반 글'의 본문 영역에 블로그 주소 지원 방식을 사용할 수 있다.
일단은 위 세 형식의 글의 본문 영역에만 적용됩니다. 이 영역 안에서 작성된 레몬펜의 쪽지는 해당 포스팅이 사라지지 않는 한 그 자리에 고정됩니다.
방법을 적용한 뒤 영역을 확인하는 방법은 쪽지를 드래그 해보는 것으로 할 수 있습니다. 다음 동영상을 봐주시기 바랍니다.


여기서 보셨듯이, 드래그를 했을 때 회색으로 오버랩 되는 영역이 문제 해결책이 적용된 영역입니다. 보시다시피 본문 영역만 해당되는 것을 알 수 있습니다.


2. skin.html의 코드를 직접 수정해야 한다.
공지, 보호된 글, 일반 글 모두 방법은 동일하며 약간만 주의해서 수정하면 쉽게 적용할 수 있습니다. 티스토리의 기본 스킨을 기준으로 설명드리며, 제가 만든 스킨들은 기본 스킨을 거의 그대로 이용하고 있으므로 동일하게 적용할 수 있습니다. 단, 다른 제작자 분들의 스킨까지는 장담하지 못합니다.

( 080102 ) 추가 수정
기본 스킨은 수정할 필요가 없다고 합니다. 아래 예시는 기본 스킨과 동일하지 않은 태그가 사용된 다른 스킨들일 때 응용하시기 바랍니다 :-)


※ 미리 말씀 드리자면, 아래 코드들에서 치환자 부분의 각괄호(［, ］)는 특수문자입니다^.^; 그냥 쓰면 진짜 치환자로 인식되어 보이지 않게 되길래 특수문자로 처리했습니다. 그러므로 코드를 그대로 긁어다 쓰시면 안 됩니다!

먼저, 수정을 위해 skin.html의 코드를 열어 보시기 바랍니다. 티스토리 내에서 직접 수정하셔도 좋고 별도의 툴을 써도 좋습니다.
그리고 검색으로 다음의 코드들을 찾습니다.


위에서부터 공지, 보호된 글, 일반 글의 본문 영역을 가리키는 코드들입니다. 이 코드들을 다음과 같이 수정합니다.


정확히 말하면 hentry라는 문구를 삽입하는 것입니다. 이 hentry에 대해서는 오픈마루의 문서가 상세히 설명하고 있으니 넘어가겠습니다 :-)

위 세 코드를 수정하셨다면, 각각의 코드 아래에 다음과 같은 코드가 공통적으로 있는 것이 보이실 겁니다.


공지는 ［##_notice_rep_link_##］, ［##_notice_rep_title_##］ 치환자가 쓰인 것 빼곤 동일합니다. 이 코드들에도 한 문구를 삽입해줍니다.


세 영역을 모두 수정했으면 작업이 다 끝난 것입니다 :-)



3. 위 방법을 응용해서 방명록에도 적용이 가능하다.
방명록에 적용하는 방법은 조금 복잡합니다만, 기본적인 원리는 동일합니다. 다음 코드를 검색해서 찾으시기 바랍니다.


위 코드는 두 군데에 있으며 서로 인접한 위치에 있습니다. 바로 방명록과 그 댓글에 해당하는 영역들입니다. 이 코드를 아래와 같이 수정합니다.


여기까지는 쉬운데, 방명록은 본문들과 달리 rel="bookmark"를 삽입할 <a>코드 영역이 없다는 것이 난관입니다. 그래서 레몬펜의 Kay 님께서 임시적인 방안을 내셨는데, 결과적으로는 잘 작동합니다.
위에서 수정한 코드들 각각의 아래 쪽에 보면 공통적으로 다음 코드가 있습니다.


이 코드를 수정하는 게 아니고, 이 코드 바로 윗줄에 새로운 코드를 삽입해줍니다. 삽입한 모습은 다음과 같습니다.


붉은 색으로 강조한 코드가 새로 만들어 삽입하는 코드입니다. 임의로 <a>코드를 생성하고 보이지 않게 처리를 한 것입니다. 이에 대해 Kay 님은 허위(?) 고유 링크 추가라고 말씀하고 계십니다^^;



다소 복잡하지만, 일단은 큰 고비는 넘긴 느낌입니다. 레몬펜 특성상 쪽지가 많이 생성될 수 있는 영역은 처리가 된 셈이니 말입니다.
스킨을 직접 수정해야 하는 부담이 있어서 문제인데, 레몬펜 사용자 분들은 과감히 한 번 도전해 보시는 것도 좋을 것 같습니다.

단, 특히나 방명록 영역에 대한 수정 방안은 아직 완전한 해결 방안이 아니라 계속 검토 중이므로 버그가 있을 수 있다는 건 염두에 두셔야 합니다 :-)



덧) 안타깝게도, 이 방법을 적용하기 전에 생성된 쪽지는 이전 방식을 그대로 따릅니다.