티스토리 백업 파일을 이용하여 워드프레스로 이사하기

티스토리에서는 데이터센터 화재 사건 이후 글과 이미지를 백업할 수 있는 기능을 추가했습니다. 데이터를 백업하여 워드프레스로 이사 가는 방법에 대하여 살펴보겠습니다.

티스토리 백업 파일을 이용하여 워드프레스로 이사하기

티스토리 백업 파일은 html 파일로 되어 있습니다. 플러그인을 사용하여 html 파일의 콘텐츠를 워드프레스 포스트(글)로 임포트할 수 있습니다.

다음 단계에 따라 티스토리 블로그를 워드프레스로 이사할 수 있습니다.

티스토리 데이터 백업하기

먼저 티스토리 데이터를 백업합니다. 티스토리 관리자 페이지에 로그인한 다음, 관리 » 블로그를 클릭하고 데이터 관리 섹션의 데이터 관리하기 부분을 클릭하여 백업을 진행할 수 있습니다.

블로그 백업 페이지에서 "위 안내 사항을 모두 확인하였으며, 데이터 백업을 진행합니다." 체크란을 체크하고 백업하기 버튼을 클릭하면 백업이 시작됩니다.

기다리면 백업이 완료되고 알림이 표시됩니다. 백업 파일은 zip 압축 파일 포맷으로 되어 있습니다. 반디집 등의 압축 프로그램을 사용하여 압축을 해제할 수 있습니다. (알집 등 알시리즈 제품은 가급적 사용하지 마세요.😊)

백업 파일의 압축을 해제하면 글들이 각 하위 폴더 내에 html 파일로 되어 있습니다.

웹호스팅 가입하기

백업을 하였다면 새로 이사 갈 사이트를 만들어야 합니다. 워드프레스를 운영하기 위해서는 웹호스팅에 가입해야 하고, 도메인도 등록해야 합니다.

다양한 웹호스팅이 있습니다. 블로그 운영 목적이라면 이 블로그가 사용 중인 블루호스트(Bluehost)와 같은 해외 호스팅도 괜찮은 선택일 수 있습니다.

• 해외 웹호스팅 서비스 - 블루호스트(Bluehost) 소개

해외 호스팅이 속도가 느리다는 평도 있지만, GeneratePress와 같은 가벼운 테마를 사용하면 속도가 느리지는 않을 것입니다(참고).

보다 빠른 속도를 원하는 경우 Cloudways와 같은 클라우드 호스팅을 이용하여 AWS나 Vultr 등의 서버를 운영하는 것도 가능합니다.

• 클라우드웨이즈로 워드프레스 시작하기 및 도메인 연결하기

티스토리 블로그에 이미지가 많다면 웹 용량이 큰 상품을 선택해야 합니다. 특히 워드프레스로 이미지 파일을 임포트할 경우 더 많은 웹 공간이 필요합니다.

워드프레스 설치하기

요즘 웹호스팅에서는 가입하면 곧바로 워드프레스가 설치되어 운영이 가능하거나 워드프레스 자동 설치 옵션을 제공합니다.

우선은 워드프레스를 설치하고 테마를 선택하여 워드프레스를 시작할 수 있도록 준비합니다. 테마는 추후에 변경할 수 있습니다. 그리고 플러그인도 당장은 설치하지 않아도 됩니다.

• 워드프레스 블로그 시작하기

티스토리 백업 데이터 가공하기 - HTML 파일 이름 변경

티스토리 백업 데이터는 html 파일로 제공됩니다. 우선 html 파일의 이름을 폴더의 이름으로 대체하도록 합니다.

예시:

1234-글-제목.html  ==> 1234.html

저는 Bulk Rename Utility라는 프로그램을 사용하여 html 파일의 이름을 폴더의 이름으로 일괄적으로 대체했습니다.

프로그램을 실행한 다음, 폴더를 선택하고 위와 같이 설정하도록 합니다. 그런 다음, 모든 파일을 선택하고 Rename 버튼을 클릭하면 파일 이름이 일괄 변경됩니다.

티스토리 백업 데이터 가공하기 - 이미지 파일에서 공백 제거하기

img 폴더 내의 이미지 파일의 이름에는 공백이 없어야 합니다.

Yoast-SEO-Search-Console.jpg (O)
Yoast SEO Search Console.jpg (X)

만약 이미지 파일 이름에 공백이 있다면 공백을 대시(-) 등으로 일괄 변경하여 스페이스를 제거해야 합니다. 그렇지 않으면 이미지를 미디어 라이브러리로 임포트할 수 없게 됩니다.

저는 살펴보니 일부 글에서 이미지 파일 이름에 공백이 있었습니다. 파일 이름에 공백이 있는 이미지 파일 이름이 많다면 추가적으로 다음 작업을 진행해야 합니다.

1. 이미지 파일 이름에서 공백을 하이픈(-)으로 대체하기
2. 모든 html 파일에서 이미지 경로에 있는 공백을 하이픈(-)으로 대체하기

혹시 이미지 파일 이름에 공백이 있는 경우 다음 글에서 다루는 방법을 통해 이미지 파일에서 공백을 모두 제거하시기 바랍니다.

• 폴더 내의 모든 파일 이름에서 공백을 하이픈(-)으로 일괄 변경하는 방법
• 여러 텍스트/HTML 파일에서 문자열 일괄 변경

티스토리 데이터를 워드프레스 포스트로 가져오기

위의 단계가 모두 완료되었다면 이제 티스토리 데이터를 워드프레스로 포스트(글)로 임포트할 수 있습니다.

FTP를 통해 티스토리 데이터를 업로드합니다. 이미지 파일이 많은 경우 웹 용량이 충분한지 확인하시기 바랍니다.

예를 들어, 이미지 크기가 1GB인 경우, 우선 ftp를 통해 업로드해야 하는 1GB 용량 외에 워드프레스에서 이미지들을 미디어 라이브러리로 임포트해야 하므로 2~3GB 용량이 필요할 수 있습니다. 워드프레스에서는 다음 그림과 같이 원본 이미지만 있는 것이 아니라 여러 크기의 썸네일을 생성하므로 생각보다 많은 웹 용량이 있어야 할 것입니다.

위의 그림에서는 3가지 크기가 추가로 생성되었지만 설치하는 테마나 플러그인에 따라 더 많은 크기의 썸네일이 생성될 수도 있습니다.

FTP를 통해 웹서버에 접속하여 워드프레스가 설치된 루트 폴더에 tistory라는 폴더를 만들고 티스토리 백업 파일들을 업로드합니다. (폴더 이름은 원하는 대로 지정하도록 합니다.)

FTP 사용 방법은 여기를 참고해보세요.

이제 마지막 단계로서 html 파일을 워드프레스 포스트로 변환할 수 있습니다. 워드프레스 관리자 페이지에 로그인한 다음, 플러그인 » 새로 추가를 선택하고 "HTML Import 2"를 검색하여 HTML Import 2 플러그인을 설치하고 활성화합니다.

이 플러그인은 5년 이상 업데이트가 안 되었지만 최신 워드프레스에서 잘 작동할 것입니다.

설정 » HTML Import를 클릭합니다.

File 탭

File 탭에서는 다음과 비슷하게 지정하도록 합니다.

Directory to import에서는 "워드프레스 설치 폴더/tistory"로 입력하면 됩니다. 워드프레스 설치 디렉터리 경로는 Hint 부분에 있으므로 참고하시기 바랍니다.

Old site URL은 중요한 것 같지는 않습니다. File extensions to include에는 html을 입력합니다.

그리고 Preserve file names 섹션에서는 Use the file's name as the imported page's slug를 체크하도록 합니다.

Content 탭

Content 탭에서는 다음 그림과 같이 설정합니다.

Select content by 부분은 제 티스토리 블로그의 백업 데이터를 기준으로 한 것입니다. 이 부분은 티스토리에 사용된 스킨에 따라 다른지는 모르겠습니다. 아마도 모든 티스토리 백업 파일에서 동일하지 않을까 생각됩니다.

More content options에서는 Import linked images 옵션을 체크하도록 합니다.

Title & Metadata 탭

Title & Metadata 탭에서는 아래 그림과 같이 설정합니다.

Import files as는 "글"을 선택하고 Set status to는 draft (임시글) 또는 publish (발행)를 선택합니다.

그리고 Set timestamps to 옵션을 custom field로 지정하고 Custom Fields 탭에서 설정해주어야 글 발행 날짜가 티스토리에서 발행한 글 날짜로 임포트됩니다.

Custom Fields 탭

Custom Fields 탭에서는 Select date by 섹션을 아래와 같이 지정하도록 합니다.

이제 하단의 Save Settings를 클릭하고 파일 임포트를 실행할 수 있습니다.

데이터 임포트 후 작업

데이터를 임포트한 후에는 FTP 서버에서 tistory 백업 파일을 삭제하고 HTML Import 2 플러그인도 제거하도록 합니다.

이제 워드프레스 관리자 페이지 » 글 » 모든 글을 클릭하면 티스토리 글들이 임포트된 것을 확인할 수 있습니다. 또한, 미디어 라이브러리에 이미지 파일들이 임포트되어 있을 것입니다.

링크에 기존 티스토리 URL이 있다면 플러그인을 사용하여 일괄적으로 변경이 가능합니다(예: example.tistory.com => your-domain.co.kr).

• 워드프레스 사이트 URL을 일괄 변경하는 Go Live Update URLS 플러그인

전체 백업을 한 후에 URL을 일괄 변경하시기 바랍니다.

리디렉션 설정하기

이전이 완료되었다면 기존 티스토리 주소로 유입되는 방문자들을 새로운 주소로 리디렉션시켜주어야 합니다(예: example.tistory.com => your-domain.co.kr).

이와 관련하여 다음과 같은 코드(출처: How to redirect from a domain to another keeping the path component?)를 티스토리 HTML 파일 편집에서 <head>...</head> 부분에 추가하여 테스트해볼 수 있습니다.

<script>
window.location.href = "http://" + "here-your-target-domain" + window.location.pathname
</script>

실제로 잘 작동하는지는 체크해보지 않았습니다. 잘 안 되는 경우 아래 댓글을 통해 알려주시면 테스트해보고 잘 작동하는 코드로 대체하도록 하겠습니다.

개인 도메인을 티스토리에 연결하여 사용하다가 워드프레스로 이전하는 경우에는 Redirection 플러그인을 설치하여 리디렉션을 정교하게 설정하는 것이 가능합니다. 정규표현식을 조금 알면 어렵지 않게 301 리디렉션 설정이 가능할 것입니다.

고전 편집기 vs. 블록 에디터

워드프레스에서는 블록 에디터가 기본 편집기로 사용되고 있습니다. 단축키를 익혀서 활용하면 능률적으로 글 작성이 가능합니다.

• 시간과 능률을 향상시키는 워드프레스 구텐베르크 키보드 단축키

HTML Import 2 플러그인을 사용하여 티스토리 데이터를 임포트하면 고전 편집기에서 글이 편집됩니다. 이는 HTML 태그 때문인데요. 원하는 경우 "블록으로 변환"이 가능합니다. 하지만 HTML 태그 때문에 제대로 변환되지 않을 것입니다. 글을 수정해야 하는 경우 아래의 단계에 따라 블록으로 변환이 가능합니다. (이 단계는 굳이 할 필요가 없지만 글을 블록 에디터에서 수정하고 싶은 경우에 참고하세요.)

① 글 편집 화면에서 Ctlr+Shift+Alt+M 단축키를 눌러 HTML 모드로 전환합니다.

② 맨 위의 <div class="contents_style">과 맨 아래의 "</div>"를 삭제합니다.

③ Ctlr+Shift+Alt+M 단축키를 눌러 비주얼 보기로 전환합니다.

④ 글 본문을 선택하고 상단의 블록으로 변환 버튼을 클릭하면 정상적으로 블록으로 변환될 것입니다.

마치며

이상으로 티스토리 백업 데이터를 워드프레스로 이전하는 방법에 대하여 살펴보았습니다. 이 방법을 이용하면 포스트와 이미지를 모두 이전이 가능합니다.

티스토리 백업 데이터를 이용하여 워드프레스로 이전하는 것과 관련하여 어려움을 겪을 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고

• 워드프레스 Divi 테마 전체 사이트 프런트엔드 편집 기능 도입
• 워드프레스 뉴스페이퍼 테마 데모 설치하기
• 효과적인 글쓰기를 위한 Rank Math 활용 방법 (SEO 글쓰기)