파일질라 이미지 엑박 - pailjilla imiji egbag

FTP를 이용해 만든 홈페이지를 웹상에 올릴 때 Filezilla를 많이 사용합니다. 그런데 이번에 Filezilla를 쓸 때 중요한 것을 하나 배워서 짚어볼까 합니다.

목차 Show

워드프레스 미디어 라이브러리에 이미지가 제대로 표시되지 않는 문제 (이미지 엑박) 해결 방법
파일 퍼미션 문제
이미지 핫링크 보호 비활성화
이미지 이름에 한글이 포함된 경우
썸네일 재생성
플러그인 충돌로 인한 이미지 엑박 문제
500 내부 서버 오류로 인해 이미지가 깨지는 문제

메뉴에서 전송>전송 유형 박스로 가시면 자동(A) 아스키(S) 바이너리(B) 세 가지 선택지가 있는데 간혹 기본 설정이 아스키(S)로 되어 있는 경우가 있습니다. 이 경우 png 이미지 파일을 그대로 전송하면 그림 파일이 죄다 박살이 나서 올바른 주소로 그림을 인용해도 그림을 읽어들일 수가 없게 되며, 아스키 문자 이외의 문자로 이루어진 html이나 png, css 파일을 제대로 인식하지 못해 홈 페이지가 오작동할 수 있습니다. 이 곳에서 호스팅 서비스를 쓰시는 분들의 절대다수는 한국어를 모어로 하시는 분들일 텐데, 한글은 아스키 문자 밖의 문자열이므로 아스키 설정으로 파일을 업로드하면 난리가 나겠지요.

또는 메뉴에서 편집>설정 을 누르셔서 페이지 선택 상자의 전송>파일 종류 페이지를 여셔도 조정이 가능합니다. 맞게 들어가셨다면 이 페이지가 나와야 합니다.

개인적으로는 바이너리 선택지보다 자동 선택지가 더 좋지 않을까 싶습니다. 사실 저도 이 설정을 확인해야 한다는 사실을 스터디포어스 질문답변 게시판에서 도움을 받아 알았는데, 자료를 올렸더니 이미지 파일이 몽땅 깨지고 구현된 플러그인 몇 개가 작동을 안 해서 알게 되었네요.

도움을 주신 운영진 분들께 감사의 말씀을 올립니다.

출처: https://iwebschool.net/bbs/board.php?bo_table=gnsetting&wr_id=3

매뉴얼대로 그누보드5 설치를 하고, 글을 쓰고 이미지도 함께 첨부하려 하는데

DHTML 에디터도 장착하고... 이미지를 업로드 하면 엑박 또는 깨진다.

서버 설정이 잘못된 것인가?

Forbidden

You don't have permission to access /data/editor/1810/25adca35a28393cfbc91e134bc352965_1540693518_0852.png on this server.

Server unable to read htaccess file, denying access to be safe

Apache/2.4.29 (Ubuntu) Server at iwebschool.net Port 80

분명 서버단 문제인가?

아니면 .htaccess 파일 문제인가? 아파치 서버의 권한을 안 줘서 어쩌고 그런 것인가?

무료 호스팅을 받고 있는 처지라, 한참 호스팅 설정/질문나을 검색해도 나와 같은 경우가 없는 모양이다.

뭐지?

인터넷을 뒤져도 서버쪽 권한을 안 줘서, htaccess 파일 관련 권한, 폴더 권한 복잡하다... 찬찬히 한번 가 보기로 하였다.

파일질라로 ftp 접속을 한다.

그누보드 최초 설치시 data 폴더는 chmod 권한을 707로 변경하라고 한다. ok

보안에 문제가 있을지도 모르겠으나 707 권한에서 폴더에 아무 이미지 파일을 업로드하니업로드된 파일은 644로 권한이 잡혀 있다.

이 상태에서 해당 이미지 파일을 보기위해 주소창에 입력하니 같은 메세지가 뜬다.

data 폴더를 755로 수정 후, 확인하니 제대로 보여준다. ok

이런식으로 data 폴더 권한 755 변경, editor 폴더 권한 755변경, 1810 폴더 권한 755 변경하니 정상적으로 DHTML 에디터에 이미지를 업로드하면 제대로 이미지를 보여준다.

1810 폴더 하위에 이미지가 업로드되면 해당 이미지의 기본 권한은 644형태로 생김 확인할 수 있다.

.htaccess 파일을 수정한 사항은 없으며, 권한은 그대로 644 를 주었다. 괜히 건들까 말까 했지만 상관없음 확인되었다.
결론은 data부터 하위 특정관련 폴더들의 권한만 적절히 수정해 주면 끝

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

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

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

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

파일 퍼미션 문제

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

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

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이라고 합니다.

썸네일 재생성

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

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

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