워드프레스 미디어 라이브러리에 이미지가 표시되지 않는 문제 (이미지 엑박) 해결하기

워드프레스 사이트를 이전하거나 PHP 버전을 변경한 후에, 또는 별다른 이유 없이 갑자기 미디어 라이브러리에서 이미지들이 엑박으로 표시되는 문제가 발생하는 경우가 드물지만 있습니다.

워드프레스 미디어 라이브러리에 이미지가 제대로 표시되지 않는 문제 (이미지 엑박) 해결 방법

워드프레스 미디어 라이브러리 이미지 엑박 현상

위의 그림은 워드프레스 멀티사이트를 다른 웹호스팅으로 이전한 후에 이미지가 깨진 것처럼 표시되는 것을 보여줍니다.

이런 문제가 발생하면 다음과 같은 조치를 취하여 문제가 해결되는지 확인해보시기 바랍니다.

파일 퍼미션 문제

uploads 폴더의 퍼미션(권한)이 변경되어 이 문제가 발생할 수 있습니다. 이미지 업로드 폴더의 권한을 644나 755로 변경하도록 합니다.

퍼미션을 변경하려면 파일질라와 같은 FTP 클라이언트를 통해 FTP에 접속한 후에 /wp-content 폴더로 이동합니다.

FTP 폴더 파일 권한 변경

uploads 폴더를 선택하고 마우스 오른쪽 버튼을 누른 다음 "파일 권한"을 선택합니다. (FTP 클라이언트에 따라 실제 메뉴는 조금 다를 수 있습니다.)

파일질라 - 파일 속성 바꾸기 - 퍼미션 변경

파일질라(FileZilla)의 경우 파일 속성 바꾸기 창이 표시됩니다. 폴더와 하위 폴더는 755 또는 750, 파일은 644 또는 640으로 설정해야 합니다. (777로 변경하는 것은 보안상 문제가 발생할 수 있으므로 권장하지 않습니다.)

이미지 핫링크 보호 비활성화

이미지 핫링크(이미지 링크 무단 참조) 보호를 설정한 경우에 예기치 않게 이미지가 엑박으로 표시되는 문제가 발생할 수 있습니다.

"이미지 핫링크"란 사이트 운영자의 허락없이 이미지 링크를 그대로 가져다가 사용하는 것을 의미하며, 이미지를 도용할 뿐 아니라, 해당 이미지가 로드될 때마다 원래 사이트의 트래픽으로 이어진다는 점에 매우 바람직하지 않습니다. 이런 문제를 방지하기 위해 이미지 핫링크 보호 설정을 하여 인증되지 않은 사이트에서 이미지 링크를 로드할 경우 엑박으로 표시되도록 할 수 있습니다.

이미지 핫링크 보호는 .htaccess 파일에 코드를 추가하거나 블루호스트 등 cPanel을 지원하는 웹호스팅에서는 cPanel의 HotLink Protection 툴을 사용하여 설정할 수 있습니다.

이미지 핫링크 보호 툴
블루호스트의 HotLink Protection 툴

이미지 핫링크 보호 설정을 한 경우 도메인 주소를 변경했거나 기타 이유로 사이트의 이미지가 의도하지 않게 깨져서 표시될 수 있습니다.

이 경우 이미지 핫링크 보호 설정을 해제하면 문제가 해결됩니다. .htaccess 파일에서 해당 코드를 삭제하거나 cPanel에서 HotLink Protection 설정을 해제하도록 합니다.

이미지 이름에 한글이 포함된 경우

우리나라의 일부 웹호스팅에서는 PHP 버전 변경을 요청하면 수동으로 변경해줍니다. 서버를 옮겨서 사이트를 복원하는 과정을 거칠 수 있습니다. 이 과정에서 한글 이름이 포함된 이미지 파일의 이름이 깨질 수 있습니다.

그러므로 가급적 한글을 이미지 파일 이름에 사용하지 않는 것이 안전합니다. 이미지 URL을 브라우저 주소 필드에 입력했을 때 404 에러가 발생하면 먼저 FTP에 접속하여 이미지 파일이 존재하는지, 이미지 파일의 이름이 깨져 보이는지 여부를 체크해보시기 바랍니다.

이미지 파일 이름에 한글이 포함되어 파일 이름이 깨져 보이면, 백업본에 포함된 이미지 파일 이름도 깨졌는지 확인하도록 합니다. 백업본에서 한글이 포함된 이미지 파일들의 이름이 정상적으로 표시된다면 FTP를 통해 이미지 파일을 다시 업로드하면 문제가 해결될 것입니다.

몇 년 전만 해도 URL에 한글이 포함되면 오류가 발생하는 국내 웹호스팅 업체들이 있었지만 지금은 대부분 이 문제가 해결된 것 같습니다. 아직도 간혹 URL에 한글이 포함되면 문제를 일으키는 호스팅 업체가 있습니다. 그런 경우 가급적 다른 웹호스팅으로 바꾸는 것이 바람직합니다. 한글 사이트인 경우 SEO적인 측면에서도 URL에 한글이 포함되는 것이 유리합니다. 이런 URL을 Semantic URL이라고 합니다.

.htaccess 파일 문제

예를 들어, 도메인에 SSL 인증서를 설치한 후에 .htaccess 파일이 잘못 설정되는 경우에도 이런 현상이 발생할 수 있습니다. .htaccess 파일을 백업한 후에 이 파일을 삭제하고 설정 » 고유주소에서 (아무런 설정을 바꾸지 말고) 변경사항 저장 버튼을 여러 번 클릭하여 문제가 해결되는지 체크할 수 있습니다.

썸네일 재생성

경우에 다라 글을 새로 작성하여 이미지를 업로드해보면 이미지가 표시되지 않지만, 이미지 크기를 체크해보면 가로 길이와 세로 길이가 각각 1px로 설정될 수 있습니다. 이와 같은 현상이 발생하면 Regenerate Thumbnails 플러그인을 사용하여 썸네일을 다시 생성해주면 문제가 해결됩니다.

플러그인 충돌로 인한 이미지 엑박 문제

워드프레스 또는 플러그인 업데이트 후에 이미지 엑박 문제가 발생한다면 플러그인 충돌을 의심해볼 수 있습니다. 플러그인을 모두 비활성화하여 문제가 해결되는지 체크해보면 문제의 원인이 플러그인 충돌로 인한 것인지 확인해볼 수 있습니다. 플러그인을 하나씩 활성화하면서 문제를 일으키는 플러그인을 찾아서 삭제하거나 다른 대체 플러그인(예: Wordfence Security가 문제를 일으키면 Solid Security(이전 명칭 "iThemes Security")와 같이 동일한 기능을 하는 보안 플러그인을 대체)으로 바꾸도록 합니다.

500 내부 서버 오류로 인해 이미지가 깨지는 문제

미디어 파일의 URL을 클릭하면 500 내부 서버 오류 (500 Internal Server Error)가 발생하면서 이미지가 깨져 엑박으로 표시되는 경우가 있습니다. 이 문제는 .htaccess 파일 손상이 원인일 수 있습니다.

FTP에 접속하여 /wp-content/uploads/ 폴더에 .htaccess 파일이 있는지 확인해보시기 바랍니다. 만약 .htaccess 파일이 있다면 백업한 후에 삭제하면 문제가 해결될 것입니다.

참고:


4개 댓글

  1. 저는 미디어라이브러리목록의 이미지가 사각형의 정가운데에 안보이고 오른쪽으로 쏠려있어서 거슬리는데 이건 해결방법이 없을까요?

    1. 안녕하세요, spact79님.
      우선 모든 플러그인을 비활성화하여 문제가 해결되는지 체크해보시겠어요?
      또한, 워드프레스, 테마, 플러그인이 최신 버전이 아니라면 모두 최신 버전으로 업데이트하여 문제가 해결되는지도 확인해보시겠어요?

  2. 안녕하세요 항상 좋은 정보 얻고 있습니다
    지금 워프 시작하면서 글 1개를 발행했는데
    관리자 모드에서는 사진이 보이는데 워프 메인에서 글을 보거나 다른사람이
    글을 보면 사진이 누락되서 빈 공간만 나오고 있습니다
    방법이 있을까요?
    현재 호스팅을 서버로 시작해서 휍호스팅과는 상관없는 것 같습니다
    위에 글을 봐도 미디어 라이브러리에서는 액박없이 나오고 있는데
    발행된 글에서는 사진이 안 나오고 빈 공간만 나오고 있습니다.ㅠㅠ

    1. 썸네일 재생성을 해보셨어요?
      그리고 캐시 플러그인의 캐시와 브라우저 캐시도 삭제해보시기 바랍니다.

      또, 다른 경우로 뉴스페이퍼 테마와 같은 일부 테마의 경우 생성되는 썸네일 크기를 지정하는 옵션을 제공합니다.
      만약 필요한 썸네일 크기를 지정하지 않는다면 해당 썸네일이 누락되어 표시될 것입니다.
      이 경우 올바른 크기의 썸네일을 지정하고 썸네일 재생성을 해주면 문제가 해결될 것입니다.

      https://avada.tistory.com/1253

댓글 남기기

* 이메일 주소는 공개되지 않습니다.