스프링노트의 링크 편집 벌레

스프링노트를 사용하면서 여러 벌레를 발견했지만, 재현에 성공한 것은 거의 없다. 그러다가 바로 어제(2009년 4월 24일) 2개나 재현에 성공했다. 바로 스프링노트의 태그 표기 벌레와 지금 소개하는 링크 편집 벌레이다.

벌레의 유형

• 수작업으로 만든 링크와 외부에서 복사하여 붙인 링크를 차별하는 벌레이다. 복사하여 붙인 링크를 편집하면 그것의 주소를 마음대로 바꾸어 버리는 벌레이다.

직접 만든 링크와 복사해 붙여넣은 링크가 다르게 해석되는 이유를 알 수 없다. 또한 어떤 경우에는 직접 만든 링크와 동등하게 취급하고, 어떤 경우에는 다르게 취급한다. 직접 만든 링크와 동등하게 처리하는 경우는 스프링노트에서 내 블로그로 발행한 문서에 포함된 링크가 대부분이었다. 그밖에 다른 웹페이지의 링크를 붙여 넣은 경우에는 모두 링크 주소를 바꾸어 버렸다.

벌레의 발견

벌레의 발견이라고 할 수도 있고, 링크의 비교라고 할 수 있는 작업이다. 

스프링노트의 링크 만들기 기능을 이용하여 만든 링크

가장 먼저 스프링노트의 링크를 HTML 코드로 살펴보자. 모질라 파이어폭스에는 선택한 소스 보기라는 기능을 제공하고 있다. 그것을 이용하면 링크 부분의 HTML 소스만 떼어 살펴볼 수 있다.

마우스 오른쪽 단추를 눌러 팝업 메뉴를 부른 화면

위의 작업을 통해 보게된 선택한 영역의 HTML 소스

1. <a href="http://salm.pe.kr/entry/Springnote-Tag-Bug" class="external newWindow" title="http://salm.pe.kr/entry/Springnote-Tag-Bug">스프링노트의 태그 표기 벌레</a>

스프링노트의 링크 만들기 기능을 이용하여 링크를 만들게 되면 위와 같이 class="external newWindow" 라는 클래스 선택자를 추가하게 된다.

다음과 같이 링크를 수정하면 링크 대상이 현재 링크된 곳을 가리키게 된다.

 

링크 수정/삭제를 선택하는 팝업

링크 수정/삭제 팝업에서 수정을 선택한 화면

스프링노트의 링크 만들기 기능을 이용해서 만든 링크는 링크를 고칠 때 위와 같이 원래 주소, 곧 링크 대상을 유지해 준다.

스프링노트의 링크 만들기 기능을 이용하지 않은 링크

스프링노트의 링크 만들기 기능을 이용하지 않은 링크는 class="external newWindow" 라는 클래스 선택자를 가지지 않은 링크를 말한다.

도아의 세상사는 이야기의 게시글에서 링크 하나를 복사했다. 그런데 그것이 블로그 기사 제목이라서 아래와 같이 나타났다.

좌우 폭이 좁은 까닭은 화면 크기가 800×600px이기 때문이다.

아무튼 단락제목2(HTML 태그로는 <H2>)에 해당하며, 녹색 글씨에 녹색 밑줄이 생긴 이유는 링크가 걸려 있기 때문이다. 이것을 위의 링크 수정하는 법대로 링크를 수정하는 과정은 아래와 같다.

우선 단락을 본문으로 바꾸었다.

그 뒤 링크 편집창(편집 애플릿?)을 띄우면 뜬금없이 "PermaLink :: 옥션의 어이없는 판매자"라고 나타난다. 저 글귀는 어디에서 나타났을까? 왜 웹 주소(URL 등)가 아닌 저런 문장이 나타났을까?

선택한 영역의 HTML 소스를 살펴보면 답이 나온다. 그렇다. 링크(A 태그)의 title 속성을 따다가 나타내 주고 있다.

이것을 확인하기 위해 다른 태그도 복사했지만, 역시나 title 속성을 따서 나타내 주고 있었다. 그렇다면 굳이 class="external newWindow" 클래스 선택자를 넣을 필요도 없었다는 말인데 왜 굳이 그렇게 하는지 이해하기 힘들었다.

기술적인 해석

기술적인 측면으로 본다면 단순히 하이퍼링크(A 태그)의 title 속성을 따올 뿐이며, 벌레라고 보기는 힘들었다. 그러나 주소를 정상적으로 링크 대상에 나타내려면 링크 주소와 title 속성을 항상 같게 해야만 한다는 점에서는 문제가 있다고 하겠다. title 속성은 누구나 정할 수 있지만, 대부분 링크를 설명하는 문구를 넣게 된다. 위에서 예로 든 링크도 "PermaLink :: 옥션의 어이없는 판매자"와 같은 글귀가 그것이다. "옥션에서 본 어이없는 판매자에 대한 링크"임을 나타내기 위해 title 속성을 저렇게 주었음을 알 수 있다.

스프링노트 링크 대상을 표시하는 문제를 해결하기 위한 방법으로도 그다지 좋지 않다고 생각한다. 물론 title 속성을 참조함으로써 간단한 코드를 만들 수 있다는 점에서는 동의한다. 하지만 이번과 같은 상황에서는 너무 단순한 것을 찾다가 낭패가 생긴 경우이다. 외부 링크인지만 검사했더라도, 외부 링크이면 title 속성이 아닌 href 속성을 참조하게 만들었다면 이번 벌레는 애초에 생기지 않았으리라 생각한다.

회사 측 답변

2009년 4월 27일 현재 오류를 보고한 상태이며, 수정하겠다는 답변을 받았다.

관련 문서 및 페이지

• [벌레와 팁] - 스프링노트의 태그 표기 벌레
• 스프링노트 홈페이지 : http://www.springnote.com/ko

이 글은 스프링노트에서 작성되었습니다.