최근에 워드프레스를 이용한 작업을 몇 개 진행했습니다. 빠른 구축 시간과 가성비로 따지자면 워드프레스 만한 게 없는 것 같다는 생각입니다. 그 동안 HTML/CSS에 대해 공부를 다시 진행해오면서, 웹 페이지에 대한 독해/응용력이 다소간 성장한 것 같습니다. 특히 Divi 테마를 사용해보면서 그 효과를 실감하고 있습니다.
도메인 연결 후 워드프레스 깨짐 현상
워드프레스를 로컬 환경에서 작업하거나, 호스팅 환경에서 작업을 진행 한 후 완성된 사이트에 도메인을 연결하는 경우가 왕왕 존재합니다. 이번에도 카페24 웹호스팅 환경에서 웹사이트를 만들고난 후 도메인을 연결하는 과정에서 아래 그림처럼 Divi Carousel 슬라이더의 좌우측 버튼이 깨지는 현상을 목격하게 되었습니다.
저는 커스텀 구축을 주로 해왔기 때문에, 워드프레스에 대한 이해도는 깊이가 있는 정도는 아닙니다. 일단 막 만들어보다가 문제에 봉착하면 해결을 위해 구글링을 해가면서 하나씩 완성해나가기도 합니다.
뭔가 잘 나오던 엘리먼트였는데, 저렇게 깨진다는 것은, 도메인을 적용하면서 경로가 변경이 되었거나 워드프레스 혹은 Divi 테마가 보유하고 있는 Cache 파일들 어딘가에서 엉켜 있다는 얘기가 됩니다.
워드프레스 주소(URL) 및 사이트 주소의 차이
일단은 워드프레스 관리자 모드로 접속을 해서, 워드프레스 주소와 사이트 주소를 확인해봅니다.
워드프레스 주소는 워드프레스가 설치된 경로를 말하고, 사이트 주소는 사용자들이 접속하는 URL을 말합니다. 그게 그거 같은데 무지 헷갈리죠? 예를 들어, 워드프레스를 ugbs.mycafe24.com/wp 경로에 설치를 했지만 사용자들 접속은 ugbos.mycafe24.com으로 하게 하는 경우라면 순서대로 각각 워드프레스 주소와 사이트 주소가 되는 겁니다. 초보자들의 경우 이 상관관계를 충분히 학습하시고 건드리는 것이 좋습니다.
한 두 달 전 쯤에 이거 맘대로 수정했다가, 웹사이트가 먹통이 되어서 phpMyAdmin으로 DB에 붙어서 경로 수정을 해서 다시 살렸던 추억(?)이 떠올랐습니다. 음... 일단 이거는 좀 나중에 건드리자고 생각하고, 플러그인을 통해서 URL 경로 수정을 해보기로 합니다.
그림에서 보는 것처럼, 카페24에서 생성해주는 서브 도메인 환경에서 웹사이트를 구성했더랬습니다.
Automatic Domain Changer 플러그인 설치
플러그인 메뉴로 가서, 플러그인을 하나 추가해줍니다.
automatic domain changer. [지금 설치]를 클릭하면 알아서 잘 설치가 됩니다.
그리고 [Activate]를 눌러줘서 활성화시켜줍니다.
그러면 관리자 > 도구 메뉴에서 실행할 수 있게 됩니다.
윗 칸에는 현재 도메인, 아랫 칸에는 바뀔 도메인을 입력해주는 직관적인 방식입니다. 바로 변환 진행을 할까 하다가... 혹시라도 만의 하나라도 발생할 수 있는 불상사에 대비하기 위해 DB와 DATA 백업을 먼저 진행하기로 합니다.
완성에 실패한 작업자는 용서 받을 수 있어도, 백업에 실패한 작업자는 용서 받지 못한다는 IT 격언도 있죠.
DB 백업 받기 & DATA 백업 받기 - cafe24
카페24 관리 페이지에 접속 한 후 호스팅관리 > 백업받기/올리기 메뉴로 들어갑니다.
DB백업받기에 체크하고, [백업받기] 버튼을 클릭하면 Database 내용을 FTP에다 백업파일로 생성해줍니다.
물론 DB 패스워드를 입력해줘야 합니다. DB는 소중하니까요!
DB 백업이 끝나면, 아래쪽에 있는 DATA 백업받기도 실행해줍니다. FTP에 올라 있는 파일들을 통째로 압축해서 백업해주는 기능입니다.
일단 백업을 해두니 마음이 든든하기는 합니다.
3분 카레를 먹고 돌아와서, FTP로 서버에 붙어보면,
이렇게 Data와 DB가 백업이 되어 있습니다. 안전하게 내 PC로 다운로드 받아둡니다.
다시 Automatic Domain Changer
오토매틱 도메인 체인저로 다시 들어갑니다.
변경할 대상 도메인을 타이핑해준 후 [change domain] 버튼을 당장 클릭!
하지만, 제작자의 면책 안내사항에 체크를 해야 합니다. 일이 잘 안되도 제작자는 책임없으니 백업을 꼭 받아두라는 조언 말씀입니다.^^ 저는 뭐 그냥 세 개 다 체크하고 [change domain] 버튼을 꾹 눌렀습니다.
그러면 이렇게 연관된 DB Table이 검색되고, 경로 값들이 변경이 됩니다..
엇! Old domain과 New domain이 같다니!! 제대로 타이핑해서 한번 더 진행했습니다.
WordPress Address (URL) & Site Address (URL) 변경
플러그 인을 이용해서 DB내의 경로를 모두 바꾸준 후, General Setting 메뉴에서 변경될 도메인 주소로 모두 동일하게 변경을 하였습니다. 혹시라도 홈페이지가 먹통이 될까봐 은근 마음을 졸였으나, 잘 변경되었습니다.
DB 내 도메인 경로는 변경을 해줘서, 링크가 오작동 되는 경우는 사라졌으나, 아래 그림처럼 슬라이더 버튼은 아직 깨져 있는 상태였습니다. 아무래도 Cache를 비워줘야 겠습니다.
CACHE 비워주기
저는 Divi 테마를 설치했기 때문에, 테마 옵션 > 빌더 > Advanced 메뉴로 들어가서 [CLEAR] 버튼을 눌러줍니다.
그러면 Divi 테마가 가지고 있던 캐시를 싹 청소해주게 됩니다.
웹 페이지 소스를 확인해보니, 웹 페이지로 생성되는 경로들은 새로운 도메인 경로로 아직 바뀌지 않았습니다.
경로를 생성해주는 설정 파일들이 갖고 있는 캐시도 비워줘야 하는 것 같아 보입니다.
WP Fastest Cache 플러그인 설치
사람들이 많이 사용한다는 WP Fastest Cache 플러그인을 설치해줬습니다.
그리고 설명을 참고하면서 아래와 같이 선택을 해주고 [Submit] 버튼을 꾹~ 눌러줍니다.
그리고, Delete Cache 탭으로 들어간 후 [Clear All Cache] 버튼 한번 눌러주고, [Delete Cache and Minified CSS/JS]도 한번 꾹 눌러줬습니다. Clear Cache와 Delete Cache의 차이를 잘 모르겠어서 그냥 둘 다 해줬습니다. 어쨌든 캐시 파일은 정리해주면 좋은 거니까.
다시 웹페이지를 확인해보니, 이제 좌우 넘김 버튼이 제대로 나타납니다.
코드를 수정한 것은 없었는데, 제대로 표시가 되는 것을 보니 현상의 원인은 캐시(Cache) 파일에 있었나 봅니다.
워드프레스 사용시 다양한 캐시 기능이 활용됩니다. 워드프레스가 관리하는 캐시, 테마가 관리하는 캐시, 내 PC의 브라우저가 관리하는 캐시 그리고 서버 안에도 캐시 파일이 생성됩니다.
도메인 경로를 변경하는 경우, 바로 적용이 되면 좋을 텐데, 캐시 파일의 작동원리 상 도메인 변경해도 기존 바뀌기 전의 정보를 담고 있는 캐시 파일이 사용되는 경우가 존재합니다. 그래서 캐시 파일을 삭제해줘야 하는 것이고 그러면 워드프레스는 캐시 파일을 새로 생성하기 시작하는데 바로 이때 새로 변경된 도메인 경로 정보가 잘 기록되게 되는 원리입니다.
웹 페이지 소스 한번 더 확인
마우스 우측 버튼을 누르고, 팝업 메뉴에서 페이지 소스 보기를 선택해줍니다.
웹 페이지 소스를 확인해보니, 이제 원하던 도메인 URL로 변경이 된 상태로 잘 나타납니다.
정리 및 마침
도메인이 변경된다는 것은 프로그램이 작동하는 경로가 변경이 된다는 것이니, 해당 URL을 참조하는 영역에서의 캐시 파일에 이슈가 발생하는 것으로 생각하면 될듯 싶습니다.
그거 왜 워드프레스로 페이지 작업을 할 때, 이미지를 영구삭제 하더라도 같은 이름으로 이미지를 업로드하면 이전의 이미지가 그대로 보여지는 그런 현상을 겪어보셨을 텐데, 그것도 워드프레스가 가지고 있는 캐시 파일 때문에 발생하는 현상이지 않을까 싶습니다.
오늘의 경험자산 : 워드프레스 작업 시 도메인 경로를 변경하면 캐시를 싹 정리해주자!
댓글