워드프레스 뉴스 매거진 테마 Newspaper로 홈페이지 리뉴얼

10

지난주에 잠시 시간을 내어 이 블로그의 테마를 Newspaper로 바꾸었습니다. 전체적인 분위기나 레이아웃은 가급적 유지하면서 리뉴얼했습니다.

워드프레스 뉴스페이퍼 테마 Newspaper

뉴스페이퍼는 Envato Market에서 꾸준히 Top 10 리스트에 이름을 올리고 있는 인기 워드프레스 뉴스 매거진 테마입니다. 이 테마는 현재 76,000개 이상 판매를 기록하고 있으며 블로그, 뉴스, 매거진 등의 사이트에 적합합니다.

왜 Newspaper인가?

이 블로그에서는 초기에 Enfold, Divi, Pluto 테마를 거쳐 2017년 7월 말부터 Publisher라는 매거진 테마를 사용해왔습니다.

퍼블리셔 테마는 나름대로 훌륭한 레이아웃과 많은 기능을 제공하는 괜찮은 테마 같습니다. 하지만 이 테마가 엔바토 마켓에서 규정 위반으로 퇴출된 후부터 인력 부족 때문인지 업데이트와 고객지원에서 지연되는 문제가 빈번해졌습니다. 예를 들어, 최근에도 버전 7.6 RC 버전을 2월 20일에 릴리즈하여 테스트를 진행하고 있지만 아직도 정식 버전이 나오지 않고 있습니다. 현재 RC4까지 나온 것을 보니 조만간 정식 버전이 나올 것으로 예상됩니다.

하지만 Publisher는 새로운 버전이 나올 때마다 많은 기능을 추가하면서 테마가 무거워지는 경향이 있고 버그가 제법 있습니다. 개인적인 생각은 버그를 잡고 테마를 경량화하여 속도를 개선한다면 충분한 경쟁력을 갖출 수 있는 테마 같습니다. 그러나 테마 개발자는 저와는 다른 생각을 가지고 있습니다. 테마를 더 많이 판매하기 위해 더 많은 기능과 더 많은 프리미엄 플러그인을 추가하는 전략을 사용하고 있습니다.

장기적으로 봤을 때 안정적으로 사이트를 운영하기 위해서는 검증된 인기 테마를 사용하는 것이 좋겠다는 생각을 이전부터 가지고 있었습니다. 사이트 규모가 커지면서 테마를 변경하는 것에 주저하다가 이번에 과감하게 뉴스/매거진 부문에서 가장 인지도가 높은 Newspaper로 변경했습니다.

변경 후 느낌

테마를 변경하기 전에 염려가 많이 되었습니다. 고장나지 않았으면 고치지 마라(If it ain’t broke, don’t fix it)는 영어 격언이 있듯이 멀쩡한 것을 고치려고 하다가 망가지는 경우가 종종 있습니다. 현재 지속적으로 방문자 유입이 늘어나고 있기 때문에 굳이 모험할 필요가 있을까 하는 생각이 들었습니다.

뉴스페이퍼로 변경한 후에 다행히 우려했던 문제는 나타나지 않았습니다. 뉴스페이퍼가 생각보다 사용이 쉽다는 것을 느꼈습니다. 이전에 몇 차례 Newspaper 테마의 설정 작업을 맡은 적이 있었습니다. 당시 이 테마에 익숙하지 않아서 그런지 사용이 조금 까다롭게 느껴졌습니다. 이번에 사이트를 리뉴얼하면서 뉴스페이퍼의 사용법에 익숙해지는 계기가 되었습니다.

특히 테마를 변경한 후에 속도가 느려지지 않을까 염려되었지만 이전과 속도가 비슷하게 나오는 것 같습니다. 모바일에서 애드센스 자동 광고 기능을 제거했기 때문에 애드센스 광고 수익은 이전보다 줄어들 것으로 예상됩니다.

몇 가지 팁

뉴스페이퍼 테마로 리뉴얼하면서 궁금한 부분이나 막히는 부분은 뉴스페이퍼 팀에 지원을 요청하여 도움을 받았습니다. 지원이 빠르고 실질적으로 도움이 되는 부분이 많았습니다. 고객지원(Customer Support) 부문에서 비교적 만족스러운 것 같습니다.

뉴스페이퍼 테마로 사이트를 만들 때 참고할 수 있는 몇 가지 사항을 정리해보았습니다.

데모 사용 vs. 직접 세팅

뉴스페이퍼 테마에는 현재 67개 정도의 데모가 제공됩니다. 쉽게 원하는 사이트를 만들려면 데모 중에서 마음에 드는 데모를 선택하여 로드하는 것입니다. 데모를 설치할 때 Include content를 체크해야 미리보기 페이지에서 보는 화면과 동일하게 사이트가 표시됩니다.

워드프레스 뉴스페이퍼 테마 - 데모 설치하기

Newspaper에서는 설치한 데모를 삭제하고 다른 데모를 쉽게 설치할 수 있는 기능을 제공합니다. 이와 비슷한 기능을 제공하는 테마로 Avada가 있습니다. 이 기능 덕분에 쉽게 데모를 변경할 수 있습니다.

Include content를 체크하지 않고 원하는 스타일의 데모를 설치한 후에 첫 페이지를 직접 만드는 방법도 시도해볼 수 있습니다. 이 테마에 포함된 tagDiv Composer는 비주얼 편집기이기 때문에 생각보다 쉽게 원하는 대로 페이지를 만들 수 있습니다.

저는 Lifestyle Magazine 데모를 콘텐츠 없이 로드한 후에 헤더, 사이드바 등 대부분의 스타일을 다시 설정했습니다. 그리고 프런트 페이지를 가능한 한 심플하게 만들어보았습니다.

※ 데모 콘텐츠를 로드하여 페이지를 어떻게 만드는지 확인한 후에 직접 페이지를 만들어보는 방법도 괜찮을 것 같습니다.

tagDiv Composer vs. Visual Composer

Newspaper 테마에는 tagDiv Composer라는 자체 페이지 빌더가 탑재되어 있습니다. 본래 비주얼 컴포저를 사용해오다 재작년에 tagDiv 컴포저를 도입했습니다.

뉴스페이퍼 테마에는 비주얼 컴포저(현재 명칭 "WPBakery Page Builder")도 번들로 포함되어 있습니다. 원하는 경우 비주얼 컴포저를 활성화하여 사용할 수 있지만, 비주얼 컴포저는 사이트 속도에 부정적인 영향을 미칠 수 있으므로 가급적 이 테마에서 기본적으로 제공하는 tagDiv Composer를 사용하는 것이 바람직한 것 같습니다.

최근 Jupiter라는 인기 워드프레스 테마도 비주얼 컴포저를 기본 페이지 빌더로 사용해오다가 Elementor로 페이지 빌더를 변경했습니다.

모바일 테마 플러그인

이 테마에는 tagDiv Mobile Theme이라는 모바일 테마용 플러그인이 옵션으로 포함되어 있습니다.

뉴스페이퍼 - tagDiv Mobile Theme 플러그인

모바일 기기에서 더 빠른 속도를 원하는 경우 이 플러그인을 설치하여 활성화할 수 있습니다. 그리고 Official AMP for WP 플러그인을 함께 설치하면 모바일 테마를 AMP용으로도 지정할 수 있습니다.

뉴스페이서 테마 - 모바일 설정
Official AMP Plugin for WordPress와 함께 tagDiv Mobile Theme 플러그인을 설치하면 모바일 테마를 AMP용으로도 지정이 가능하다. Mobile Theme만 설치한 상태에서는 그림과 같이 Mobile용으로만 모바일 테마가 사용된다

이 블로그에서는 이전 테마에 탑재된 AMP 플러그인을 사용했지만, AMP 페이지용 URL이 잘못 설정되어 이번에 테마를 변경하면서 AMP 페이지를 제거했습니다.

번역 기능

Newspaper 테마에는 po 파일을 번역할 필요 없이 워드프레스 알림판 > Newspaper > Theme Panel > Translations에서 프런트 페이지에 나타나는 문자열을 직접 번역할 수 있는 옵션을 제공합니다.

워드프레스 매거진 테마 Newspaper 번역 기능

이 메뉴에서 프런트 엔드에 표시되는 문자열을 쉽게 번역할 수 있습니다.

tagDiv Cloud Library

뉴스페이퍼에서 사용자 편의를 위해 심혈을 기울여서 만든 플러그인 중 하나가 tagDiv Cloud Library입니다. 이 플러그인에서는 620개 이상의 사전 제작된 레이아웃을 제공합니다.

이 플러그인을 사용하려면 사이트에 대하여 라이선스를 등록해야 합니다.

워드프레스 뉴스페이퍼 테마 - tagDiv Composer
tagDiv 클라우드 라이브러리. 클릭하면 전체 크기를 볼 수 있습니다.

tagDiv Cloud Library를 사용하면 콘텐츠를 처음부터 만들 필요가 없이 선택한 요소를 쉽게 임포트하여 원하는 대로 쉽게 커스터마이징할 수 있습니다.

편리한 광고 배치

안정적인 사이트 운영을 위해 Newspaper와 Hueman 중에서 테마를 선택하기로 하고, 두 테마를 모두 테스트해보았습니다. ("워드프레스 Newspaper vs. Publisher vs. Hueman 테마" 참고)

Hueman은 무료 테마이지만 기능과 성능면에서 괜찮은 것 같아서 개인적으로 호감을 가지고 있는 테마 중 하나입니다. 하지만 무료 테마라서 구글 애드센스 광고를 정교하게 배치할 수 없고, 광고 개수가 늘어나면 속도가 느려지는 현상을 경험했습니다.

그에 반해 Newspaper는 다양한 위치에 광고를 정교하게 배치할 수 있고, PC, 태블릿, 모바일 기기에 따라 크기도 조정이 가능했습니다. 또한, 광고가 늘어나고 속도가 눈에 띄게 느려지지 않았습니다.

뉴스페이퍼 테마 - 광고 기능

기기(데스크톱, 태블릿 가로, 태블릿 세로, 폰)에 따라 특정 광고를 비활성화하는 것도 가능합니다.

생성되는 썸네일 크기 지정

테마를 바꾼 후에는 이전 테마나 플러그인에서 사용된 썸네일과의 크기 차이 때문에 Regenerate Thumbnails 플러그인을 사용하여 썸네일을 재생성해주어야 썸네일 이미지들이 제대로 표시될 것입니다.

이 블로그에는 글이 매우 많기 때문에 썸네일을 다시 생성하는 데 거의 하루 종일 걸렸습니다. 그런데 썸네일을 생성한 후에 사이트의 데이터 용량을 보니 이전보다 거의 두 배가 되어 깜짝 놀랬습니다. uploads 폴더를 살펴보니 생성된 썸네일 개수가 무려 18개나 되었습니다.ㅠㅠ

이 문제를 Newspaper에 문의하여 생성할 썸네일 크기를 지정할 수 있는 옵션이 제공된다는 것을 알게 되었습니다. Newspaper > Theme Panel > Block Settings > Thumbs on Modules/Blocks에서 생성할 썸네일 크기를 선택할 수 있습니다.

워드프레스 뉴스페이퍼 테마 - 모듈/블록의 썸네일 크기 지정

그런 다음 Regenerate Thumbnails 플러그인을 사용하여 썸네일을 다시 생성해주어야 합니다. 혹시 Newspaper로 테마를 변경한 후에 이 작업을 하지 않았다면 꼭 필요한 썸네일 크기만을 선택하여 썸네일을 다시 생성할 것을 권장합니다.

마치며

이 블로그와 같이 정보를 제공하는 사이트나 뉴스, 매거진 사이트에 Newspaper와 같은 뉴스, 매거진 테마를 사용하면 콘텐츠를 보다 효과적으로 표시할 수 있는 것 같습니다. 저처럼 심플하게 사이트를 만들 수 있고, 데모처럼 정교하게 사이트를 만들 수도 있습니다.

시간이 부족하여 전체적인 레이아웃을 세팅하고 본문 글자 크기 등 중요한 부분만 설정했습니다. 앞으로 시간이 날 때 세부적인 부분을 하나씩 조정해나갈 생각입니다.

참고:

10 개 댓글

  1. 뉴스페이퍼 테마 마음에 들어요.
    저도 개편했는데, 이번 테마는 Hueman Pro입니다. 마음에 들어서 정착하고자 합니다.

    • 축하합니다. Hueman Pro로 정착하시는군요.

      Hueman 테마도 고려하여 판매자에게 연락하여 몇 가지를 물어보았습니다.

      Hi, Hueman Pro is designed to create a blog / magazine website. It won't look exactly like the one you linked to but you'll find most of important features for a magazine : post grids, list of articles in the sidebars / footer, image lazy loading for speed performances, infinite scroll...

      현재 사이트와 같이 정확하게 만들 수는 없지만 포스트 그리드 등 매거진에 필요한 중요한 요소를 제공한다는 답변을 받았습니다. 그리고 Pro를 사용할 경우 Related Posts 부분의 속도가 크게 개선될 것이라고도 하네요.

      일반 블로그에 Hueman Pro를 이용하면 좋을 것 같다는 생각이 들었습니다.
      다만, 요금제(플랜) 부분에서는 조금 아쉬운 것 같습니다.
      두 가지 플랜이 제공되고, 두 플랜 모두 1년의 기간 동안만 업데이트가 제공됩니다.

      https://www.screencast.com/t/VT5OvElaOxx

      • 저도 그점이 아쉬웠습니다. 옆에 'unlimited'라는 것이 있어서 그것은 1년이 아니라 계속 업데이트와 서포트가 제공되는줄 알았는데, 그게 아니었습니다. 1년 써보고 그때 다시 생각을 해봐야겠어요.

      • 네. Hueman Pro Unlimited는 무제한 사이트에 설치가 가능한 플랜이고 연간 갱신해야 하는 상품입니다.

  2. 리뉴얼 포스팅을 언제하나 했는데 오늘에서야 올리셨네요..
    늘 그렇지만 워드님 블로그 한결 깔끔하네요..^^
    리뉴얼 축하 드립니다..

    • 감사합니다~

      이제는 뉴스페이퍼 테마로 정착하려고 합니다.ㅎㅎ
      이때까지 자주 테마를 변경한 것 같습니다.

      • 저도 이것을 처음 설치를 했는데 용량이 2배로 늘어서 매우 당황한 기억이 납니다..
        각각 썸네일 지정과 다시 재생성을 모르고 말이죠..^^

      • 저만 그런 경험을 한 것이 아니군요.
        사용되는 블록과 모듈을 자동 인식하여 필요한 썸네일 크기만 알아서 생성하면 좋겠다는 생각이 드네요.

  3. 같은 뉴스페이퍼 테마를 사용하는 입장에서 무척 반가운 포스트네요!

    예전보다 훨씬 더 깔끔하고~ 정교해졌습니다.
    중국에서 접속속도도 그리 느리지 않구요~

    축하드립니다.

    • 중국에서 속도를 체크해주셔서 감사합니다.

      방금 체크해보니 중국에서는 유입이 아예 안 되고 있네요.ㅠㅠ
      중국어로 콘텐츠가 되어 있다면 중국 검색엔진에 노출되도록 하는 방법을 강구해보겠지만... 어렵네요.

댓글 남기기

Please enter your comment!
Please enter your name here