워드프레스 한글 파일명, 캐시 문제를 위한 파일명 변환 플러그인 활용 방법

워드프레스를 이용해 블로그나 사이트를 운영하게 되면 본문 텍스트와 함께 필수적으로 자리잡는게 바로 이미지 파일입니다.

첨부 파일은 에디터의 ‘미디어 추가’ 기능에서 파일 업로드가 가능한데 워드프레스는 파일 업로드시 Xpress Engine 이나 그누보드 처럼 파일명 변환 과정 없이 그대로 업로드하기 때문에 첨부 파일명이 한글로 되어 있다면 UTF-8 인코딩으로 서버 및 워드프레스가 설정이 되어 있음에도 불구하고 사파리등의 브라우저에서 이미지가 깨지는 현상이 생길 수 있습니다.

이러한 문제는 게시물을 업데이트 하는 사람이 신경을 써줘야 하는데 개인 블로그 같은 경우에는 파일명을 영문 및 숫자로 조합해 업로드하면 문제가 없지만 팀블로그나 회사등에서 운영하게 되면 사용자에게 이러한 문제를 알려줘야 하는데 제대로 지켜진다는 보장도 없고 작업 효율이 떨어질수도 있습니다.

그리고 웹서버의 트래픽을 절감하기 위해 아파치나 NGINX등의 서비스에서 이미지 및 CSS, JS등 자주 요청이 들어오는 파일 확장자에 대해 브라우저 캐시 설정을 하게 되는데요.

앞서 얘기했던 Xpress Engine 이나 그누보드 같은 경우 파일 업로드시 파일명을 원래 이름이 아닌 일련의 숫자 알파벳 조합으로 자체 처리해 업로드 하기 때문에 브라우저 캐시를 PUBLIC으로 설정해도 이미지 파일 수정 후 업로드시 파일명이 달라지기 때문에 문제가 없지만 워드프레스 같은 경우 같은 파일명으로 업로드 되기 때문에 브라우저에서 이전 이미지가 캐싱되어 있다면 수정한 이미지가 반영이 되지 않는 경우도 있습니다.

이러한 문제를 간단하게 해결하려면 첨부 파일을 업로드시 파일명을 자동으로 변경하게 해서 간단하게 해결할 수 있습니다.

파일명 자동 변환 플러그인 활용

파일명 자동 변환 플러그인 File Renaming on Upload(링크)는 파일 업로드시 지정한 규칙(Rules)대로 파일명을 변환해 주는 역할을 합니다.

같은 역할을 하는 Media File Renamer 도 있지만 중요한 기능이 유료인데 반해 File Renaming on Upload는 기능에 제한이 없는 무료 플러그인이며 업데이트 또한 꾸준히 이루어 지고 있습니다.

File Renaming on Upload 플러그인을 설치한 후 관리자 메뉴의 설정 > File renaming에서 파일명 규칙을 설정할 수 있습니다.

설정이 어려운 편은 아니기 때문에 한글 파일명 문제에 대한 해결과 파일 이름 중복으로 인한 브라우저 캐싱 문제를 해결하기 위한 세팅에 대해 간략히 알아보겠습니다.

File Renaming on Upload 설정

플러그인을 사용하는 이유가 한글이 들어간 파일명 이름을 없애고 새로운 이름으로 바꾸기 위함이기 때문에 필자는 업로드하는 날짜와 시간을 기준으로 삼았습니다.

우선 General Settings 탭 옵션의 Filename structure 기본값인 {siteurl}{posttitle}{filename}에서 {siteurl}{filename}로 변경합니다.

파일 구조에서 posttitle을 뺀 이유는 로고나 사이드바등에서 사용하는 부수적인 이미지 파일 같은 경우 페이지나 포스트에 포함되지 않는 경우가 있기 때문인데 글 작성시 미디어 추가가 아닌 미디어 메뉴에서 업로드 하는 경우 {posttitle}이 무시되므로 기본값으로 둬도 무방하지만 필자 성격상 없애버렸습니다.

참고로 아래의 Character(s) used separate rules는 Filename structure에서 지정한 {filename}{siteurl}{posttitle} 사이에 위치하는 구분자입니다.

Rules 탭의 Filename 옵션은 기존 파일명을 ASCII 및 소문자로 치환하는 설정과 ASCII 문자열이 아닌 경우 삭제하는 옵션등이 있는데 이 옵션을 켜놔야 한글이 들어간 파일명 부분이 삭제됩니다. (한글은 ASCII 문자열이 아니므로)

site URL 옵션은 꼭 URL 형식을 입력하지 않아도 되므로 파일명에 넣고 싶은 텍스트를 입력하면 됩니다.

파일 구분의 기준이 되는 Datetime 같은 경우 깔끔하게 하기 위해 기존 Y-m-d_H-i-s_u 포맷에서 하이픈(-, hyphen)과 언더라인(_, underline)을 삭제했습니다.

파일명 확인

설정이 끝난 다음 한글 파일명으로 된 이미지 파일을 업로드해봤습니다. 파일 이름에 지정한 설정대로 변환이 이루어 지는 것을 확인할 수 있습니다. 타이틀에는 원본 파일명이 제대로 들어가네요.