본문 바로가기

블로그/HTML 팁

티스토리 - 블로그의 도메인을 변경한 후 글에 포함된 기존의 링크 주소를 일괄 변경하는 방법

현재 여러분이 보고 계시는 캐플 블로그는 원래 파워 윈도우즈 블로그(PowerWin.Tistory,com)였습니다. 이후 CAppleBlog.co.kr 도메인을 연결하여 캐플 블로그로 전환하였고, 그에 맞춰 티스토리 기본 도메인 주소도 CAppleBlog.Tistory.com 으로 바꾸었죠. 즉,

PowerWin.Tistory,com → CAppleBlog.co.kr + CAppleBlog.Tistory.com

도메인 주소가 위와 같은 구조로 바뀐 것이죠. 잠깐 옆길로 새자면 개인 도메인을 구매하여 대표 도메인을 변경하는 것은 큰 문제가 안 되지만, 기존까지 사용하던 티스토리 기본 도메인은 함부로 변경하지 마세요. 저는 대표 도메인이 변경되었고, 그걸로 사용한지 어느 정도 되었기에 별 문제 없을거라고 생각하고 뭣도 모르고 바꿨다가 말 그대로 전쟁을 치뤘습니다... 속된 말로 개고생했죠. 여러분은 그러지 마세요. ㅡㅡ


아무튼, 다시 이야기로 돌아와서 이렇게 되면 가장 먼저 지금까지 다른 커뮤니티나 블로그 등 웹상에 퍼져버린 제 글들에 대한 링크들 즉, 제 블로그 외부에서 기존의 제 블로그 주소로 연결된 PowerWin.Tistory,com 링크들이 문제가 됩니다. 이건 아주 단순하게 해결하였습니다. 다른 블로그를 하나 개설한 후 그곳에 기존의 PowerWin.Tistory,com 주소를 할당하고 해당 블로그의 스킨의 skin.html 에 아래와 같은 코드를 끼워 넣는 것이죠.

<script language="javascript">
    location.replace("http://cappleblog.co.kr[# #_article_rep_link_# #]");
</script>


이는 만약에 누군가가 http://PowerWin.Tistory,com/500 이라는 주소로 접근하면 자동으로 http://cappleblog.co.kr/500 으로 바로 이동하도록 만들어주는 아주 간단한 주소 치환 자바 스크립트입니다. 어차피 현재 제 블로그는 그대로고 도메인 주소만 바뀐 것이기 때문에 기존의 PowerWin.Tistory,com 부분만 그대로 CAppleBlog.co.kr 로 바꾸면 현재의 해당 글 주소가 되는 것이니까요. 즉, 새로 만든 PowerWin.Tistory,com 블로그는 순전히 링크 연결용 블로그의 역할만 하는 것이죠.


그런데 외부 뿐만 아니라 캐플 블로그 내부 글들의 링크도 문제가 되었습니다. 제 블로그는 글들간에 서로 연관된 내용들이 많기 때문에 내부적으로 서로 링크들로 연결되어 있는 경우가 매우 많습니다. 하지만 기존에 내부 링크들은 모두 PowerWin.Tistory,com 으로 작성이 되어 있죠. 결국 제 블로그에서 제 글의 링크를 클릭하면 링크 연결용 PowerWin.Tistory,com 으로 갔다가 다시 CAppleBlog.co.kr 로 되돌아오는 구조를 가지게 됩니다. 사실 이용에 문제는 없지만 좀 그렇긴 하죠.

그럼 모든 글을 수정하여 PowerWin.Tistory,com 이라는 링크를 CAppleBlog.co.kr 로 바꿔줘야 할까요? 그건 또 인간이 할 짓이 아닌 것 같습니다. 수백편에 이르는 글들을 일일히 직접 수정하는 것도 사람이 할 짓은 아닌 것 같고, 그렇다고 XML 파일로 백업 받고 에디터로 변환한 후 다시 복원하는 것도 좀 아닌 듯 합니다. 그래서 제가 선택한 방법이 역시나 또 자바 스크립트를 이용하는 것이었습니다.


일단 본문 영역의 Div 박스와 댓글 영역의 Div 박스에 각각 ID 를 부여합니다. [제 블로그는 댓글에서도 링크들이 많이 있거든요. ^^]

<div class="article" id="capple_article">
    [# #_article_rep_desc_# #]
</div>

.
.
.

<div class="commentList" id="capple_comment">
...
</div>


그런 후 skin.html 의 가장 마지막, 간단하게 </body> 바로 앞에 다음과 같은 자바 스크립트를 삽입합니다.

<script language="javascript">
    var CAppleDoc = document.getElementById("capple_article");
    CAppleDoc.innerHTML = CAppleDoc.innerHTML.replace(/powerwin\.tistory\.com/gi,"cappleblog.co.kr");

    var CAppleCom = document.getElementById("capple_comment");
    CAppleCom.innerHTML = CAppleCom.innerHTML.replace(/powerwin\.tistory\.com/gi,"cappleblog.co.kr");
</script>0oO1lL


스크립트에 대해 좀 더 첨언하자면 /powerwin\.tistory\.com/gi 부분은 찾을 문자열로 정규 표현식을 사용합니다. 저도 정규 표현식은 깊이 알지 못하기 때문에 큰 조언을 드리진 못하지만, 이와 같이 매우 단순한 문자열 치환에선 그냥 /바꿀 문자열/ 형태로 하면 된다고 생각하시면 됩니다. 단 . 은 정규표현식에서 사용하는 특수문자이기 때문에 \. 으로 해줘야 . 문자열로 정상 인식합니다. 즉, powerwin\.tistory\.com 은 powerwin.tistory,com 을 의미하는 것이죠.

정규표현식에서 한 가지 더 아셔야 할 점이 있는데요. / 뒤의 g 는 지정한 문자열을 문서 전체에서 찾음을 의미하고[전역 매칭, 생략하면 처음 만난 패턴만 인식. 즉, 생략하면 처음에 만난 powerwin.tistory,com 만 cappleblog.co.kr 로 교체되고 나머지는 바뀌지 않음], i 는 대소문자를 구별하지 않음을 의미합니다. 즉, 지정한 문자열을 대소문자를 구별하지 않고 전부 찾은 후 치환하는 것이죠.


굉장히 단순한 코드이기 때문에 구조는 금방 이해되실 겁니다. 아무튼, 이렇게 하면 현재 블로그의 모든 글과 댓글에 포함된 PowerWin.Tistory,com 이 CAppleBlog.co.kr 로 바뀌어 출력이 됩니다. 즉, 일일히 글과 댓글을 수정하지 않아도 자동으로 지정한 주소로 바뀌어서 출력이 된다는 의미이죠. 캐플 블로그에는 현재 이러한 자바 스크립트가 적용되어 글에 포함된 기존 주소로 되어 있는 모든 링크를 새 주소로 바꿔서 출력하고 있습니다.

자바 스크립트 Replace 적용 전


자바 스크립트 Replace 적용 후


캐플 블로그는 물론 백업용인 신비 블로그에도 이러한 자바스크립트가 적용되어 글 내부의 링크 주소를 자동으로 바꿔주고 있습니다. 그 망할놈의 예전 CApple 주소도 이런식으로 바꿔서 전부 여기로 오게 만들었죠. 어후... 그거 생각하니까 또 혈압이...

아무튼 흔하진 않지만 개인 도메인 설정 등으로 블로그의 주소가 바뀌는 경우는 종종 있고, 그럴 때 기존 글들의 내부 링크들을 새로운 주소에 맞춰 변경하는데에 이 내용이 도움이 될 수 있을 것 같아 올려 봅니다. 사실 저처럼 기존 티스토리 주소까지 함께 바꾸는 경우는 극히 드물고, 기존 티스토리 주소를 바꾸지 않았다면 뭐 굳이 저처럼 이렇게 바꿔줄 필요는 없지만요. 뭐 그래도 이사를 갔을 수도 있고 그럴 땐 쓸만 하겠죠.

여기까지 하죠. 이상입니다. ^^

단! 모바일 버전에선 해당 자바 스크립트가 적용이 되질 않습니다. 그게 단점이라면 단점이겠네요.