Friday, April 28, 2006

HTML/CSS] 사이트 피드 자동검출/자동인식(Autodiscovery) 태그 수정하기

※ 이 글은 블로거닷컴(blogger.com+blogspot.com)의 블로그를 기준으로 설명합니다. HTML을 수정할 수 없는 블로그 서비스에는 적용되지 않을 것입니다.

우선, 블로그에 피드 아이콘 추가

피드버너(FeedBurner: https://www.feedburner.com/ )로 피드를 변환한 후, 피드버너의 Publicize / Chicklet Chooser 메뉴에서 링크 아이콘을 선택하여 블로그의 적당한 곳에 붙여 두는 것이 좋다. 방문객에게 피드 주소를 알려주어야 하기 때문이다.

이런 코드를 피드버너에서 자동으로 만들어 주고 있었다:

결과:

※ 아래의 글은 "FeedBurner Support :: View topic - Modifying the Autodiscovery Link in Blogger"(#현재 폐쇄) 이 도움말을 번안(?)한 것입니다. 영어가 편하신 분은 FeedBurner의 도움말을 읽으시면 됩니다.

피드 주소 자동검출(Autodiscovery) 태그

이 부분은 조금 손이 많이 가고 까다로웠다. 템플릿을 텍스트파일로 백업해 두지 않으면, 위험한 작업일 수도 있었다.

자동검출(Autodiscovery)이란, RSS리더기 등 각종 프로그램에, 블로그 주소만 입력하고도 그 블로그의 피드 주소를 자동으로 알아내게끔 하는 기능이다.

가령 필자의 블로그 주소는
http://mwultong.blogspot.com/
인데, 이 주소만 RSS/Atom리더기에 입력해도

필자의 블로그 피드 주소가
http://feeds.feedburner.com/mwultong
이라는 것을 자동으로 알아내게 된다.

HTML의 헤더에 이런 link 태그를 넣으면 된다(블로그의 경우, 템플릿을 통해 간접적으로 HTML을 편집하기에 템플릿에 넣어준다):

(단, 이 코드는 필자의 블로그에만 해당되는 내용으로 채워져 있다)

그런데 블로거닷컴에서는 직접 위와 같은 link 태그를 템플릿에 넣어줄 수 없었다. 왜냐하면 <$BlogMetaData$> 이 태그 속에, link 태그를 포함한 모든 헤더 태그들이 한덩어리로 뭉쳐서 들어가 있기 때문이다. 그래서 이 <$BlogMetaData$> 태그를 완전히 지우고 대신 그 내용을 분해해서 직접 편집하여 입력해야 했다.

작업 순서

우선, 템플릿이 아닌, 자신의 블로그의 HTML코드를 텍스트에디터로 열어보아야 한다. 템플릿이 아니라, 실제 HTML 코드라는 것에 주의! 블로그 첫 화면(메인 페이지)에 마우스 오른쪽 버튼을 눌러서 "소스 보기"를 하면 된다.

소스의 <head> 태그 바로 밑에, 템플릿에 있던 <$BlogMetaData$> 태그가 다음과 같이 장황하게 풀어져 나와 있다:

위의 이런 코드를, 메모장 등의 텍스트 편집기에서, Shift+화살표키로 선택한 후, Ctrl+C 키로 복사해야 한다. 단, 위의 코드는 필자의 블로그 설정이 반영되어 있기에, 바로 위의 코드를 직접 복사하면 절대 안된다. 반드시 자신의 블로그 HTML 소스 코드에서 복사해야 한다. 위의 코드 박스의 내용은 설명을 위해서 예로 든 것에 지나지 않는다.

또 하나의 주의 사항:
자신의 블로그가 유니코드(UTF-8)인 경우와,
자신이 사용하는 텍스트에디터가 울트라에디트(UltraEdit)인 경우에만 해당:

위의 코드 박스에 보면 ... charset=UTF-8 ... 라는 인코딩 정의 부분이 있다. 따라서 이 코드를 복사하여 텍스트파일에 임시로 저장할 때는 반드시 그 텍스트파일의 인코딩이 UTF-8이어야 한다. 그렇지 않으면 그 텍스트 파일의 모든 한글이 완전히 깨져 버리고 영원히 복구할 수 없게 된다. 자신의 블로그가 유니코드(UTF-8)가 아닌 euc-kr이라면 문제가 없지만, 블로거닷컴은 UTF-8이 기본이기에 각별히 주의해야 한다.

텍스트 파일의 실제 인코딩이 무엇이든 상관없이, 파일에 ... charset=UTF-8 ... 라는 문자열이 있으면 울트라에디트가 그 파일을 무조건 유니코드로 착각하는데 그 과정에서 한글이 완전히 깨져 버리는 것이다. 그렇지만 EmEditor에서는 이런 문제가 없었다.

다시 본론으로 들어가서,

이제 템플릿의 head 태그 밑의 <$BlogMetaData$> 라는 것을 지우고, 대신 그 자리에, 아까 복사한 그 코드 뭉치를 삽입한다. 그런 후 이렇게

이 태그 한 줄을, 자신의 피드에 맞게 적절히 수정해야 한다:

즉, 템플릿의 <head> 태그 바로 아랫부분이 이렇게 된다:

그리고 위의 코드들 아래에 <title> 태그가 위치해야 한다. <title> 태그가 <meta http-equiv="Content-Type... 태그보다 위에 있으면, 블로그 화면에 글자들이 전혀 나오지 않고 모두 하얗게 되어버리는 문제가 자주 생긴다. ("블로거(blogger.com)의 인코딩 버그 완벽 해결법" 참조)

어려운 부분은 없다. 다만 필자는 RSS 2.0 포맷을 기본으로 쓰기로 했기에(RSS 2.0이 가장 무난했음), type="application/rss+xml" 이렇게 정의해 주었다. (피드버너도 기본 출력은 Atom 이기에, 원래는 type="application/atom+xml" 이렇게 되어 있을 것이다.)

(피드버너로 만든 피드 주소로 가서
https://feeds.feedburner.com/mwultong
마우스 오른쪽 버튼으로 "소스 보기"를 하면, 필자의 경우 RSS 2.0으로 맞추었기 때문에
<rss version="2.0"> 이라는 태그가 보인다.)

그런 후 이제 블로그를 재게시하면 된다.

피드 자동 검출 테스트

한RSS( http://www.hanrss.com/ # 폐쇄됨)는 현재 피드자동인식이 지원되기 않기에

블로그라인( http://www.bloglines.com/ # 폐쇄됨)에서 테스트해 보았다. 블로그라인에 로그인한 후, Add 링크를 누른 후,
http://mwultong.blogspot.com/
이라는 블로그 주소만 입력해도
http://feeds.feedburner.com/mwultong
이라는 피드를 성공적으로 찾아내었다.
그런 후 Subscribe to This Feed(이 피드 구독)라는 링크를 누르면, 구독 리스트에 추가된다.

단, http://mwultong.blogspot.com/atom.xml 이라는 예전의 피드도 찾아내는데, 어떻게 찾았는지는 확실치 않다. 예전의 atom.xml 주소를 나오지 않게 하는 방법은 알 수 없었다. 피드 주소가 여러 개 나온다고 해서 그리 문제될 것은 없지만, 혹시라도 방문객들이 혼란을 느낄 수도 있다.

최기영님께서 주신 질문에, 제가 부족하나마 응답해 드렸습니다:

블로거닷컴은 아톰피드만 지원하고 RSS는 지원하지 않습니다. 그래서 아톰피드를 RSS로 직접 변환하셔야 합니다. www.feedburner.com 에 가신 후, 현재의 아톰피드 주소(가령 ... atom.xml 등)를 입력하시면 RSS 등으로 피드를 변환하실 수 있습니다. 물론 무료입니다.

만약 피드버너로 피드를 변환하신 후에도 호환이 잘 안된다든지 하는 문제가 발생하면, 피드버너에 로그인 하신 후 메뉴의 Optimize/Convert Format 에서 RSS 2.0 을 선택하시고 Save 버튼을 누르시면 해결될 것입니다.

그런 후, 블로그 템플릿에, 새로운 피드 주소로 가는 링크를 하나 만드시면 더욱 좋겠지요..

추가 사항:

그렇지만
원본 피드(예: http://mwultong.blogspot.com/atom.xml )를 블로거 대시보드에서 없애 버리면,
피드버너의 피드(예: http://feeds.feedburner.com/mwultong )도
작동하지 않습니다. 피드버너는 원본 피드를 재가공하는 것에 불과하기 때문입니다.

지금 생각해 보니 "자동검출"이 아닌 "자동발견"으로 번역해야 할 것 같군요...

tag: blogger

블로거 | 구글블로그 | Blogger.com + blogspot.com

tag: rss

RSS 피드 | Atom Feed

tag: html

HTML | CSS | 자바스크립트 JavaScript