워드프레스 한글 파일 링크 깨지는 이슈

최근 워드프레스에 업로드한 이미지 파일들이 엑스박스 처리되어 브라우저 화면에 나타나지 않는 현상이 발생하였다. 파일을 업로드한 뒤 바로 글을 보면 문제가 없는데 나중에 보면 이상하게 깨져나타나는 것이었다. 결론은 크롬에서 업로드한 파일에 한글이 들어있으면 사파리 브라우저에서 안보인다는 것이다.

라즈베리파이에 서버를 구축하여 운영하면서 나타나는 문제인 것 같아서 서버 설정에 문제가 있나 여러모로 검토를 해 보았으나 최근 배포되는 서버 이미지는 당연히 UTF-8을 지원하고, 설치한 APM도 UTF-8을 기본적으로 사용하도록 되어있었다.

그런데 희안하게 브라우저마다 다른 현상이 나타났다. 사파리 브라우저에서는 깨져나오는데, 크롬 브라우저에서는 제대로 나오는 것이 아닌가. 혹시나 싶어 Windows에서 한번 봤는데, 크롬, 에지, 인터넷 익스플로러 모두 제대로 나왔다. 음 이건 사파리의 버그인가…

wp-content 디렉토리를 살펴봤다. 주로 안보이는 이미지는 스크린샷-어쩌구.png 식의 이미지파일들로 맥에서 화면 캡춰하면 생기는 디폴트 이름들이다. 이 파일들이 크롬에서는 보이는데, 사파리에서는 404 에러가 뜨는 것이었다.

좀 더 확인해보니 사파리에서 업로드한 파일이름과 크롬에서 올리는 파일 이름이 서버에 다르게 저장된다는 것을 알았다. 사파리에서 업로드한 이미지들은 사파리에서도 잘 보이고 크롬에서도 잘 보인다. 그런데 크롬에서 업로드한 이미지는 크롬에서는 잘 보이는데 사파리에서는 404에러가 뜬다. (확인해본 다른 브라우저들은 모두 제대로 나온다.)

집에서는 사파리를 주로 쓰고, 회사에서는 업무용으로 크롬을 주로 쓰고있는데, 회사에서 작성한 포스트를 집에서 확인해볼 때 문제가 나왔던 것이었다.

서버를 좀 들여다보니, 업로드한 파일들이 똑같이 스크린샷 어쩌구란 이름으로 나오지만 정열되는 순서가 다르다. 즉 화면에는 스크린샷이라고 동일하게 보이지만, 사파리에서 업로드한 파일들은 알파벳 뒤에, 크롬에서 업로드한 파일들은 알파벳 앞에 나온다. 동일하게 보이지만 다른 파일인 것이다.

두 그룹으로 나뉜 스크린샷 파일들

추측해보건데 사파리에서는 맥의 파일시스템의 이름을 그대로 업로드하여 저장하는 것 같다. 맥에서는 풀어쓰기 방식의 유니코드를 사용하는데 (이름은 잘 기억이..) 이것이 그대로 Linux 서버에 저장되는 듯 싶다. 크롬에서는 UTF-8 변환을 하여 한글을 저장하는 것 같고..

풀어쓰기 형태로 저장된 스크린샷과 모아쓰기 형태로 저장된 스크린샷이 화면상에는 동일하게 보이지만 unicode가 달라서 정열되는 순서가 다르다.

왜 다르게 저장되는지 분석을 해보려다 이건 내가 할 일이 아닌것 같아서 한글 이름을 변환해서 업로드 해 주는 플러그인을 쓰기로 했다. uploading downloading non-latin filename 이라는 플러그인인데, 깔끔하고 괜찮다. 설치하고 활성화해 두기만 하면 한글이 들어간 이미지를 업로드할 때 자동으로 숫자로 된 파일로 바꿔준다.

아래 첨부 이미지는 크롬브라우저에서 업로드한 이미지 파일이다. 사파리에서는 안보이는데 다른 브라우저에서는 보인다.

시스템 환경설정

여튼 희안하다. 왜 이런건지 누가 좀… 사파리 설정 문젠가?? -_-

댓글 남기기