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

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

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

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

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

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

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

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

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

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

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

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

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

시스템 환경설정

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

구글 검색에서 특정 사이트 제외하기

검색을 하다보면 접속해봐야 뻔한 내용이라던가, 아니면 그냥 단지 검색 결과를 보여주는 사이트던가, 아니면 광고 차단을 하면 안보여준다던가 등등 검색 결과에 나와도 거슬리기만 하는 사이트들이 있다.

이런 사이트들을 일일이 수동으로 -site:server.com 식으로 검색어에 추가로 입력함으로써 안나오게 할 수도 있지만, 항상 적용할 수 있도록 Personal Blocklist라는 크롬 플러그인을 구글이 공식적으로 제공해준다.

Personal Blocklist (by Google)

해당 플러그인을 설치하면 구글검색시 검색 결과 밑에 Block 어쩌구 하는 링크가 추가되는데, 해당 링크를 클릭할 경우 해당 사이트 내용을 검색 결과에 안나오게 할 수 있다.

쓸데없는 사이트들이 상위랭크되어 나오는 것을 차단함으로써 깔끔한 검색 결과를 얻을 수 있어서 추천. 🙂