목차
워드프레스
워드프레스는 전 세계적으로 가장 많은 사용자를 가지고 있는, CMS이자 BLOG 구축 시스템입니다. 설치가 간편하고 관리 또한 편하다는 장점때문에 수 많은 사용자가 이용하고 있으며, 관련 시장도 넓어지고 있습니다. 쉬운 사용자 인터페이스에 더해서, 직접 원하는 커스텀 테마를 제작하거나, 부족한 기능을 보완하는 플러그인까지 사용할 수 있습니다. 이러한 유연성에 기반해 다양한 변형 및 확장이 가능해짐에 따라, 전 세계에서 수많은 서드파티 플러그인과 테마들이 제작/판매 중입니다.
기능 vs 성능
앞에서 언급한대로 워드프레스는 전세계 제작자들이 만들어내는 다양한 플러그인과 테마를 골라서 설치할 수 있는데요. 다양한 기능과 확장성은 좋지만, 너무 많은 플러그인 때문에 사이트 반응 속도가 느려지는 것을 꺼려하는 사용자들이 선호하는 플러그인과 테마가 있습니다. 제작단계에서 부터 웹페이지 반응 속도 향상에 집중한, GeneratePress 테마와 이 테마에서 사용 가능한 GenerateBlocks 플러그인 조합이 그렇습니다. 테마와 플러그인 모두 무료로 사용할 수 있는데다, 기본 기능만 사용해도 워드프레스 사이트를 충분히 구축할 수 있기 때문입니다.
직접 커스터마이징 vs 부분 유료 플러그인
블로그를 운영하면서 하나 둘 내 입맛에 맞게 블로그 설정을 바꿔보고, 좀더 이쁘게 꾸미려 이것저것 커스터마이장을 하게 될겁니다. 이렇게 고칠 부분이 하나, 둘 늘어날 때마다 CSS를 배워야 하거나, 서버에 파일을 직접 업로드 하기도 하고 평소 익숙하지 않은 SSH, SFTP 등을 들여다 봐야하는 경우가 발생하게 되는데요. 검색 엔진이나 기술 사이트에서 답을 찾아보고 따라하면서 차츰 문제를 해결할 수 있습니다. 물론, 그렇게 한번에 모든 일이 잘 되면 럭키이지만, 직접 하나하나 고쳐가는 과정에서는, 안타깝게도 한번에 안되는 상황이 더 빈번할 겁니다. 그래서 어떤 분들은 머리아프게 검색하고 씨름하는 시간이 아까워서 유료 플러그인 구매를 선택하기도 합니다.
간혹, 운명의 장난처럼, 머리아프지 않고 편하게 사용하려고 플러그인을 구매했는데 설치 과정에서 분명히 써있는 대로, 시키는 대로 정확히 따라했는데도, 어떤 에러 메시지도 보이지 않고, 성공했다고 나왔음에도 불구하고 내가 원하는 기능이 제대로 동작하지 않는다면, 이만큼 억울하고 답답한 일도 없을겁니다.
GP Premium 과 Font Library
그래서 오늘은 GenerateBlocks의 기능 확장 플러그인 GP Premium에서 제공하는 기능 중 하나인 Font Library에서 발생할 수 있는 문제를 다뤄보겠습니다. GP Premium의 Font Library 기능은 Google Font 등의 웹폰트를 가져다 쓰는 것이 아닌, 사용자가 가지고 있는 폰트 파일을 직접 등록해 사용할 수 있게 만들어주는 기능입니다. 사용자가 Custom Fonts Library 화면에서 직접 업로드한 폰트파일이 동작하지 않는 상황에 대해서 알아보겠습니다.
문제 환경과 증상
환경, 기능
우선 워드프레스와 플러그인 설치 상태를 먼저 살펴보겠습니다. 워드프레스는 정상 동작하고 있고, Generate Press 테마가 설치되어 있으며, GP Premium 플러그인 설치 후 활성화 된 상태입니다. 플러그인은 GP Premium를 활성화시 플러그인 설정 메뉴가 관리자 페이지 메뉴에 추가되며, 관리자 페이지 좌측 메뉴들 중 ‘모양‘ → ‘GeneratePress‘에서 추가 기능 관리 화면을 찾을 수 있습니다. ‘모양‘ → ‘GeneratePress‘ 메뉴로 진입하면, 추가된 여러 기능들의 목록이 보이고 그 목록에서 Font Library 항목의 Activate 버튼을 클릭해서 활성화까지 된 상황입니다.
GP Premium에서 제공하는 Font Library 기능은, 사용자가 소유한 폰트 파일을 워드프레스에 업로드 해서 웹폰트로 사용할 수 있게 합니다. 구글폰트에서도 많은 한글 폰트를 무료로 사용할 수 있도록 제공하지만, 폰트 제작사가 별도 배포하는 한글 폰트를 적용하고 싶을때 이 기능을 활용 할 수 있습니다.
증상
Font Library 메뉴의 Upload Custom Fonts 탭에서 폰트파일을 업로드하고 Font Library 탭에서도 잘 표시가 되지만, 테마를 수정하면서 업로드한 폰트를 설정했음에도, 실제 웹페이지를 방문하면 폰트 적용이 안되어있는 상황이 발생합니다. 폰트 파일 업로드도 잘 되었고, Font Library에서도 확인할 수 있고, 테마를 수정하면서 폰트 스타일을 선택할 수도 있는데, 정작 화면에선 적용된 글꼴이 보이지 않는 상황인거죠.
점검 항목 및 해결 방법
파일 업로드
- 폰트 파일이 정상적으로 업로드 되었는지 확인하기 여기서 업로드한 폰트는 워드프레스의 업로드 디렉토리 밑에서 찾을 수 있습니다. 워드프레스 루트 디렉토리로 이동 후,
wp-content/uploads/generatepress/fonts/내부에 폰트 파일이 있는지, 파일 크기가 일치하는지 확인합니다. 만약 여기 파일이 없다면 해당 디렉토리에 워드프레스 프로세스가 파일을 쓸 수 있는지 디렉토리 접근권한을 확인해야 합니다.
폰트 CSS
- 폰트 설정 내용(
fonts.css)을 읽어오는지 확인합니다. 크롬 브라우저를 기준으로, 개발자 도구 화면에서Sources또는Network탭에서domain/wp-content/uploads/generatepress/fonts/fonts.css파일을 읽어오는지 확인합니다. 해당 요청이 차단되었다고(Blocked) 나오거나 CSS 파일 내용이 없다면 CSS파일 URL주소의 프로토콜, 도메인을 확인합니다.
URL 주소
워드프레스에 접속한 URL 주소와, CSS파일을 가져오는 주소를 확인합니다. 두 주소의 프로토콜(http/https) 혹은 도메인이 일치하지 않는다면 이 문제를 수정해야 합니다. 이렇게 워드프레스 접속 주소와 CSS를 읽는 주소가 다를 경우, CORS(Cross-Origin Resource Sharing/교차 출처 자원 공유)라는 일종의 브라우저 보안 메커니즘에 의해, 다른 주소애 있는 파일 접근이 차단 당할 수 있습니다.
결과적으로, 사용자는 폰트파일을 정상적으로 업로드도 했고, 관리자 페이지 Font Library 메뉴에서 Custom Fonts 설정을 올바르게 마쳤음에도 불구하고, 커스텀 폰트 설정 내용이 담겨있는 CSS 파일을 읽을 수 없는 상황인 거죠.
원인 확인 및 해결 방법
원인 확인
앞에서 두 주소가 일치하지 않음을 확인했다면, 다음과 같이 설정값을 바꿔주면 문제를 쉽게 해결할 수 있습니다. 이러한 상황은 워드프레스를 설치하는 과정에서 IP주소를 사용했다가, 이후에 도메인을 설정한 등의 이유로 발생할 수 있습니다.
해결 방법
아래 메뉴로 이동해서 설정을 변경합니다.
- 워드프레스의 관리자 페이지에 접속합니다.
- 좌측 메뉴에서 ‘설정‘ → ‘일반‘으로 이동합니다.
- 설정 화면에서 워드프레스 주소(URL), **사이트 주소(URL)**를 수정합니다.
위 단계대로 URL주소를 수정하고 워드프레스에 접속하면, fonts.css 파일을 정상적으로 읽어오면서 사용자정의 폰트가 동작할겁니다. 설정 값을 확인하시고, URL주소의 프로토콜, 도메인이 제대로 되어있는지 확인하세요.
CORS에 의해 파일이 차단되는 문제는 폰트 CSS읽기 문제에 국한되지 않습니다. 워드프레스 주소(URL), 사이트 주소(URL) 설정이 잘못 된 경우 많은 문제가 발생할 수 있으므로, 설정을 꼭 확인해보세요.
혹시나 같은 문제를 겪은 분들께 이 글이 도움이 되었길 바랍니다. 즐거운 워드프레스 생활 하세요! 감사합니다.