WPBeginner v6 – 새로운 사이트 디자인 비하인드 스토리

지난 몇 주 동안 WPBeginner를 방문했다면 아마도 새로운 웹사이트 디자인이 있다는 것을 눈치채셨을 것입니다. 지난번과 많은 유사점을 가지고 있지만, 무대 뒤에서 많은 변화가 있습니다.

뉴스레터에서 약속한 대로, 재설계 이면의 사고 과정, 우리가 배운 것, 사이트의 새로운 내용, 그리고 가장 중요한 것은 웹사이트를 개선하기 위해 우리의 학습을 어떻게 사용할 수 있는지 공유하고 싶습니다.

약간의 배경

저는 2009년에 WPBeginner를 시작했으며 대부분의 새로운 제작자와 마찬가지로 처음 3년 동안 웹사이트 테마 디자인을 4번 변경했습니다.

내 비즈니스가 성장함에 따라 웹사이트 재설계가 우리의 핵심 사명을 완수하는 데 더 잘 사용할 수 있는 많은 시간과 리소스를 필요로 한다는 것을 깨달았습니다.

그래서 저는 우리의 핵심 사명에 모든 초점을 바쳤고 우리 사업은 엄청나게 성장했습니다.

WPBeginner의 마지막 재설계는 2016년에 시작되었으며 그 이후로 먼 길을 왔습니다.

다음은 지난 5년 동안 일어난 일입니다.

• WPBeginner 블로그에서 천 개 이상의 무료 WordPress 자습서를 만들고 YouTube 채널에 수백 개의 새로운 비디오 자습서를 추가했습니다.
• 우리는 현재 80,000명 이상의 회원을 보유한 가장 큰 WordPress Facebook 그룹인 Facebook에서 WPBeginner Engage 커뮤니티를 시작했습니다(가입은 무료).
• MemberPress, Pretty Links, Formidable Forms, Uncanny Automator 및 기타 6개를 포함하여 우리가 가장 좋아하는 WordPress 플러그인에 투자하기 위해 WPBeginner Growth 펀드를 시작했습니다.
• WordPress 소셜 프루프 플러그인인 TrustPulse와 강력한 WordPress 경품 및 콘테스트 플러그인인 RafflePress라는 두 가지 새로운 WordPress 플러그인을 출시했습니다.
• 우리는 유명한 AIOSEO(WordPress용 올인원 SEO 플러그인), SeedProd(드래그 앤 드롭 WordPress 사이트 빌더), Smash Balloon(#1 소셜 미디어 피드 플러그인), PushEngage(웹사이트 푸시 알림 플러그인) 및 AffiliateWP(WordPress용 제휴 관리 플러그인).
• 우리는 또한 유명한 WP Mail SMTP 플러그인(이메일 배달 수정용), SearchWP(강력한 WordPress 검색 플러그인), Easy Digital Downloads(디지털 제품 판매를 위한 인기 있는 전자 상거래 플러그인), WP Simple Pay(이지 플러그인)를 포함한 5개의 WordPress 플랫폼 및 인프라 플러그인을 획득했습니다. 신용 카드 결제 허용) 및 Sugar Calendar(WordPress용 단순 이벤트 캘린더 플러그인).

총체적으로 우리의 플러그인은 현재 1,900만 개 이상의 웹사이트 에서 사용되며 플러그인 중 4개는 역대 상위 20개 WordPress 플러그인에 있습니다.

이 모든 것이 훌륭한 성취지만, 우리는 계속해서 개선하고 우리의 사명을 수행할 수 있도록 해결해야 할 새로운 도전 과제를 안고 있습니다.

이것은 나를 WPBeginner v6으로 안내합니다.

콘텐츠 검색 가능성에 중점을 둔 디자인

WPBeginner는 간단한 튜토리얼 블로그로 시작했지만 실제로는 WordPress용 Wikipedia가 되었습니다.

우리 사용자들은 WordPress 문제에 대한 답을 찾고 싶을 때 단순히 키워드를 검색하고 끝에 WPBeginner를 추가하여 최상의 솔루션을 찾는다고 반복해서 말했습니다.

독자가 WordPress 질문에 대한 답변을 빠르게 찾을 수 있도록 새 홈페이지에서 검색 기능을 크게 강조했습니다.

콘텐츠 라이브러리를 검색하기 위해 방문하는 재방문자이든 WordPress를 처음 사용하는 새로운 독자이든 이제 WPBeginner의 홈페이지에서 원하는 것을 쉽게 찾을 수 있습니다.

또한 검색 아이콘을 클릭하면 모든 단일 게시물 페이지의 사이드바와 웹사이트 헤더에서 유사한 검색 위젯을 볼 수 있습니다.

WPBeginner가 비전문 사용자를 위한 최대 WordPress 리소스 사이트가 된 이유 중 하나는 복잡한 WordPress 주제를 일반 영어로 단계별로 설명하기 때문입니다.

새로운 디자인에서는 WordPress 용어집 섹션에 라이브 검색 기능을 추가하여 일반적인 WordPress 용어에 쉽게 익숙해질 수 있습니다. 이것은 기본적으로 WordPress 용어 사전과 같습니다.

WPBeginner 사용자는 인기 있는 플러그인, 프리미엄 테마, 호스팅 및 기타 마케팅 도구에 대한 최고의 WordPress 할인에 독점적으로 액세스할 수 있습니다.

우리 팀은 당신을 위해 최고의 거래를 협상하는 데 정말 훌륭한 일을 해냈고, 이 섹션은 100개 이상의 쿠폰과 거래를 가질 정도로 꽤 성장했습니다.

인기있는 사용자 요청으로 인해 거래 섹션에 라이브 검색을 추가하여 좋아하는 WordPress 제품에 대한 최고의 거래를 빠르게 찾을 수 있습니다.

2022년이 되면서 우리의 최우선 과제는 콘텐츠 검색 가능성입니다.

이는 최고의 사용자 경험을 제공하고 사이트에 머문 시간을 늘리며 페이지뷰를 늘리고 전반적인 이탈률을 줄이는 데 도움이 됩니다.

2022년에는 사용자 경험 최적화(UXO)가 SEO에서 중요한 역할을 할 것이라고 믿습니다.

경쟁자를 이기고 경쟁 우위를 확보하고 싶다면 UXO에 주목하는 것이 좋습니다.

이 기사를 통해 새로운 테마에서 했던 것처럼 사이트에서 유사한 기능을 구현하는 방법에 대한 팁을 공유하겠습니다.

WordPress 검색을 개선하는 방법

기본 WordPress 검색 기능은 그다지 강력하지 않으므로 순위 알고리즘을 사용자 지정하고 각 검색에 대해 표시되는 항목을 제어하려면 SearchWP 플러그인을 사용하는 것이 좋습니다.

또는 Google 알고리즘을 사용하는 Google 맞춤 사이트 검색을 사용할 수도 있지만 단점은 Google이 검색 페이지에 좋지 않은 광고를 표시한다는 것입니다.

거래 섹션 또는 용어집에서 수행한 것처럼 사이트에 실시간 검색을 추가하려는 경우 WordPress에 AJAX 실시간 검색을 추가하는 방법에 대한 이 자습서를 따르십시오.

도움이 될 수 있는 다른 WordPress 검색 자습서는 사용자 지정 WordPress 검색 양식을 만드는 방법과 WordPress 메뉴에 검색 창을 추가하는 방법입니다.

새로운 WordPress 메가 메뉴

콘텐츠 검색 가능성이라는 주제에 따라 이전 WordPress 드롭다운 메뉴를 새로운 다중 열 메가 메뉴로 업그레이드했습니다.

이를 통해 신규 사용자는 최고의 콘텐츠를 빠르고 쉽게 찾을 수 있습니다.

또한 새로운 제품, 우리가 구축한 무료 비즈니스 도구 등을 더 잘 강조할 수 있습니다.

WordPress에 메가 메뉴를 추가하는 방법

WPBeginner용 맞춤형 솔루션을 구축했지만 WordPress에 메가 메뉴를 추가하여 상위 페이지를 더 잘 강조 표시하는 방법에 대한 이 자습서를 따를 수 있습니다.

WordPress 블록 편집기(마침내)

2019년 WordPress는 콘텐츠 생성을 위한 매우 강력한 블록 편집기(일명 Gutenberg)를 도입했습니다.

바로 개인 블로그에서 사용하기 시작했지만 WPBeginner는 사용자 정의 코딩된 기능이 많은 레거시 테마를 사용하고 있었기 때문에 전환이 쉽지 않았습니다.

그래서 지난 2년 동안 우리는 WPBeginner 사이트에서 Classic Editor를 사용하는 데 매달렸고 우리의 모든 최신 웹사이트에는 WordPress 블록 편집기의 최신 기능이 포함되었습니다.

마지막으로 새로운 테마로 이제 WordPress 블록 편집기의 모든 멋진 기능을 사용할 수 있습니다.

예를 들어, 이제 코드를 작성하지 않고도 정말 멋진 "Did You Know" 블록을 추가할 수 있습니다.

또한 WordPress 블록 편집기를 사용하여 여러 랜딩 페이지를 완전히 재설계했습니다.

예를 들어, 새로운 무료 WordPress 블로그 설정 방문 페이지를 확인하십시오.

또한 블록 편집기를 사용하여 무료 비즈니스 도구를 재설계하여 우리가 구축한 최근 무료 도구 중 일부를 강조 표시했습니다.

적절한 드래그 앤 드롭 WordPress 페이지 빌더이기 때문에 필요할 때 완전히 맞춤형 랜딩 페이지를 만드는 데 SeedProd를 계속 사용할 것입니다.

Gutenberg를 사용하여 사용자 지정 랜딩 페이지를 만드는 방법을 배우는 것은 재미있었지만 마케팅 팀이 사용자 지정 랜딩 페이지를 만들기 전에 설정을 위해 수행해야 하는 많은 코딩이 필요합니다.

반면에 페이지 빌더 플러그인을 사용할 때 마케팅 팀은 개발 팀의 도움 없이 사용자 정의 랜딩 페이지, 깔때기 레이아웃 등을 빠르게 만들 수 있습니다.

WordPress 핵심 팀은 전체 사이트 편집 기능에 열심히 노력하고 있지만 SeedProd, Divi 또는 Beaver Builder와 같은 페이지 빌더와 함께 얻을 수 있는 강력한 기능과 경쟁하려면 여전히 많은 작업이 필요합니다.

그렇긴 하지만 블록 편집기는 매우 훌륭하며 콘텐츠를 향상시키기 위해 멋진 디자인 요소를 만드는 데 사용할 수 있는 WordPress 블록 플러그인이 많이 있습니다.

다음은 추천 플러그인을 강조하기 위한 새로운 테마의 또 다른 멋진 블록입니다.

SeedProd 는 WordPress용으로 가장 초보자에게 친숙한 드래그 앤 드롭 페이지 빌더입니다. 150개 이상의 미리 만들어진 템플릿과 함께 제공되며 테마 빌더 기능을 사용하면 코드 없이 완전히 맞춤형 WordPress 테마를 구축할 수 있습니다. 지금 SeedProd를 사용해 보세요. »

다음 블로그 게시물에서는 콘텐츠 가독성을 더욱 향상시키기 위해 더 많은 콘텐츠 디자인 블록을 보게 될 것이라고 확신합니다.

Yoast에서 AIOSEO로 전환

가장 오랜 시간 동안 WPBeginner 사이트는 Yoast SEO 플러그인(v 2.3.5)의 매우 오래된 맞춤형 버전을 사용했습니다.

원근법에 따르면 현재 버전 17입니다.

Yoast의 팀이 SEO에 중요하다고 생각되는 일부 필수 기능을 제거했기 때문에 Yoast를 업데이트하고 싶지 않았습니다.

나는 또한 전반적인 WordPress SEO 공간이 혁신을 멈췄다는 것을 느꼈습니다.

그래서 2020년 초, 우리는 원래의 올인원 SEO 플러그인인 AIOSEO를 인수했고 팀에서 완전히 개편했습니다.

저는 우리 팀이 수행한 작업이 매우 자랑스럽습니다. 이 팀에는 경쟁 우위를 확보하는 데 필요한 모든 SEO 기능이 있습니다.

블록 편집기와 마찬가지로 우리의 새로운 웹 사이트는 AIOSEO로 전환하기 시작했고 순위가 향상되기 시작했습니다. 그래서 저는 WPBeginner에서 그것을 사용하기 시작하고 싶었습니다.

이제 우리는 올인원 SEO의 최신 SEO 기능을 사용하고 있습니다.

이제 동영상으로 콘텐츠 순위를 높이는 데 도움이 되는 동영상 사이트맵, 콘텐츠를 더 빠르게 색인화하는 데 도움이 되는 RSS 사이트맵, 사이트 SEO를 보다 세밀하게 제어할 수 있는 고급 SEO 모듈 등의 기능이 있습니다.

나는 그것이 시장에서 최고의 SEO 플러그인이라고 진정으로 믿으며, 가장 중요한 것은 중소기업과 대행사를 위해 공정하게 가격이 책정된다는 것입니다.

나는 앞으로 몇 주 안에 세부 기능 분석으로 전환한 이유에 대해 전체 글을 작성할 계획이지만 그 동안에는 All in One SEO의 무료 버전을 사용해 보거나 모든 강력한 기능을 갖춘 Pro 버전을 확인할 수 있습니다. WPBeginner에서 사용하고 있는 기능입니다.

워드프레스 속도 개선

많은 연구에 따르면 웹 사이트가 빠를수록 사용자 경험이 향상되고 사이트에 머문 시간이 늘어나고 전체 전환이 증가합니다.

이것이 Google이 웹사이트 속도를 SEO 순위 요소로 만든 이유이기도 합니다.

이제 잠시 동안 사이트를 팔로우했다면 내가 성능 최적화에 집착한다는 것을 알 것입니다.

WPBeginner 사이트는 우리의 놀라운 WordPress 호스팅 파트너인 SiteGround 덕분에 이미 꽤 빨랐습니다. 그들은 Google 클라우드 플랫폼 위에 구축된 고도로 최적화된 WordPress 호스팅 솔루션을 제공합니다.

물론 우리는 WordPress 속도 모범 사례를 따르고 있었지만 새로운 테마 디자인으로 몇 가지 주목할만한 속도 개선을 이루었습니다.

Google Page Speed ​​결과는 다음과 같습니다.

다음은 GTMetrix 및 Pingdom의 홈페이지 결과입니다.

그리고 우리는 새로운 섹션, 홈페이지에 더 많은 콘텐츠, 더 넓은 이미지 등을 추가했음에도 불구하고 이 결과를 얻었습니다.

그리고 물어보기 전에 WPBeginner 사이트에는 현재 68개의 활성 플러그인 이 있습니다.

그렇다면 페이지 크기를 줄이고 모든 것을 더 빠르게 만드는 동시에 사이트에 더 많은 콘텐츠를 추가할 수 있었던 방법이 궁금할 것입니다.

글쎄, 나는 우리에게 더 이상 필요하지 않다고 생각되는 것들을 제거했고, 이것들은 더 많은 웹사이트 소유자들도 고려하기를 정말로 바라는 것입니다.

이것은 SEO 순위에 도움이 되는 사이트 속도를 높이는 데 도움이 될 뿐만 아니라 전체 대역폭 소비를 줄이고 비용을 줄이며 웹사이트의 탄소 발자국을 개선합니다.

WordPress 댓글에서 Gravatar 비활성화

WordPress에는 Globally Recognized Avatars의 약어인 Gravatar라는 타사 서비스가 내장되어 있습니다.

이렇게 하면 사용자가 WordPress 사이트에 댓글을 남길 때 사용자의 프로필 사진이나 아바타를 볼 수 있습니다.

문제는 웹사이트 방문자가 대부분의 사용자가 하지 않는 Gravatar 계정을 설정해야 한다는 것입니다. 따라서 귀하의 웹사이트는 보기에 좋지 않은 회색 미스터리 남자 아바타를 로드합니다.

이제 10%의 사용자에게만 Gravatar 이미지가 있고 90%는 그렇지 않은 50개의 댓글이 달린 인기 있는 블로그 게시물이 있다고 가정해 보겠습니다. 글쎄, 그것은 당신의 페이지가 실제로 콘텐츠에 중요한 가치를 추가하지 않는 50개의 추가 이미지를 로드하고 있습니다.

이것이 많은 인기 블로그가 Gravatar를 비활성화하기 시작한 이유이며 WPBeginner에서도 동일한 작업을 수행하고 있습니다.

이 간단한 변경으로 페이지 로드 시간과 사이트 속도 점수가 크게 향상되었습니다.

타사 사용자 정의 글꼴 제거

솔직히 말해서, 나는 과거에 사용자 정의 글꼴에 대해 두 번 생각한 적이 없습니다.

그것은 그저 평범하게 느껴졌고 적어도 당신이 빠른 인터넷을 가질 만큼 운이 좋다면 타이포그래피의 관점에서 사이트를 좋게 보이게 만드는 것이었습니다.

이전 WPBeginner 테마에서는 FontAwesome이라는 인기 있는 아이콘 글꼴인 Proxima Nova라는 사용자 지정 Adobe 글꼴을 사용했으며 OptinMonster 팝업은 Google 글꼴의 Source Sans Pro를 사용했습니다.

인터넷 품질이 좋지 않은 원격 위치에서 사이트를 방문했을 때 이러한 글꼴이 사용자 경험에 얼마나 큰 성능 영향을 미치는지 진정으로 깨달았습니다.

새로운 디자인에서 저는 이 문제를 해결하고 싶었습니다. 그래서 개발도상국의 학생과 비즈니스 소유자가 WPBeginner에 액세스하고 WordPress를 배우고 온라인 인지도를 높이기 쉽게 만들 수 있습니다.

새로운 WPBeginner v6 테마는 먼 길을 온 기본 시스템 글꼴을 사용합니다. 모든 장치에서 멋지게 보이며 물론 매우 빠릅니다.

스타일이 지정되지 않은 텍스트(FOUT)의 플래시가 없고 누적 레이아웃 이동(CLS)이 없으며 차단 시간이 크게 단축되었습니다.

WordPress 대시보드에 로그인하거나 Github를 사용하면 두 플랫폼 모두 더 일찍 시스템 글꼴로 전환했기 때문에 글꼴이 비슷하다는 것을 알 수 있습니다.

사용자 정의 글꼴을 제거하는 것이 모든 비즈니스 웹사이트에서 실행 가능한 솔루션은 아닐 수 있지만, 속도와 관련하여 디자이너와 개발자 모두 염두에 두어야 할 사항입니다.

도움이 될 수 있는 몇 가지 모범 사례:

• 제목 대 콘텐츠에 두 개의 별도 글꼴을 사용하는 대신 둘 다에 동일한 글꼴을 사용하는 것이 좋습니다.
• 얇은, 일반, 반볼드, 볼드, 엑스트라 볼드, 블랙, 이탤릭체 버전과 같은 다양한 글꼴 두께와 스타일을 사용하는 대신 글꼴 두께를 일반 및 볼드의 두 가지로 줄이는 것이 좋습니다.
• 전체 FontAwesome 또는 다른 아이콘 글꼴 라이브러리를 로드하는 대신 필요한 아이콘의 직접 SVG를 추가하는 것을 고려하십시오.

OptinMonster에서 사용자 정의 글꼴 비활성화

테마를 디자인하고 코딩한 후에도 글꼴 문제를 하나 더 해결해야 했습니다.

내 웹사이트 팝업 및 이메일 구독 양식은 OptinMonster를 사용하며 여전히 Google 글꼴을 로드하고 있었습니다.

이제 OptinMonster를 비활성화하는 것은 더 많은 이메일 구독자를 확보하고 웹사이트 전환을 높이는 데 도움이 되었기 때문에 선택 사항이 아니었습니다.

운 좋게도 우리 회사 중 하나이기 때문에 개발 팀에 Google 글꼴을 비활성화하는 솔루션을 요청했습니다.

알고 보니 이 기능을 요청한 사람은 제가 처음이 아니었고 OptinMonster에는 이미 Google 글꼴을 비활성화할 수 있을 뿐만 아니라 원하는 사용자 정의 웹 글꼴을 로드할 수 있는 API 솔루션이 있었습니다.

저는 기술에 정통하고 팀이 문서에서 공유하는 작은 스니펫을 구현할 수 있지만 많은 고객이 그렇지 않다는 것을 알고 있습니다.

이제 우리 팀은 실제로 캠페인 빌더 내에서 이 기능을 구축했습니다(코딩 필요 없음).

그러나 코드에 익숙하고 각 캠페인에 대해 수동으로 이 설정을 해제하고 싶지 않다면 내가 사용하는 해킹 방법을 따르기만 하면 됩니다.

먼저 다음 JS 스니펫을 추가하여 OptinMonster가 사이트에 웹 글꼴을 로드하지 못하도록 합니다.

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) 
event.detail.Scripts.enabled.fonts= false;
);
</script>

다음으로 style.css 파일에 다음 CSS를 추가합니다.

html .Campaign *  font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; 

물론 웹 사이트 글꼴과 일치하도록 글꼴을 변경하는 것을 잊지 마십시오. 이것은 기본적으로 귀하의 사이트에 로드되는 모든 OptinMonster 캠페인에 위의 글꼴 모음을 적용합니다.

W3 Total Cache에서 WP Rocket으로 전환

가장 오랜 시간 동안 저는 WPBeginner에서 W3 Total Cache 플러그인의 고도로 맞춤화된 구성을 실행했습니다.

작업이 완료되는 동안 모든 제품 사이트에서 사용하고 있는 WP Rocket과 일치하지 않았습니다.

그래서 이 재설계를 통해 마침내 안정적인 캐시 사전 로드 및 파일 축소와 같은 뛰어난 웹 사이트 속도 기능이 많이 제공되는 WP Rocket으로 전환했습니다.

이 플러그인은 웹사이트 속도를 향상시키려면 매우 중요합니다.

ThirstyAffiliates 또는 Pretty Links를 사용하여 제휴사 링크를 관리하는 경우 간단히 메모한 다음 해당 링크를 캐시에서 제외해야 합니다.

고급 규칙 탭으로 이동하여 절대 캐시 URL 설정에서 제휴 슬러그를 추가하기만 하면 됩니다.

이 작업을 수행하지 않고 캐시 사전 로드를 활성화한 경우 WP Rocket은 내부 링크처럼 보이기 때문에 제휴 링크를 캐시하려고 시도합니다.

이것은 인위적으로 클릭 수를 부풀려 제휴 메트릭에 영향을 줄 수 있습니다.

WP Rocket 팀에 인기 있는 제휴 플러그인을 자동으로 감지하고 제외된 URL 태그를 미리 채워 초보자에게 더 친숙하게 만들 수 있는지 확인하도록 요청했으며 제안을 구현하기를 바랍니다.

다음은 무엇입니까?

저는 2022년에 대한 큰 계획이 있기 때문에 올해 말 이전에 새로운 사이트 디자인을 공개하고 싶었습니다.

지난 2년 동안 많은 분들이 궁금해하셨던 WPBeginner의 새로운 섹션을 선보일 예정입니다.

곧 출시될 예정이며 2022년 2분기 초에 출시할 수 있기를 바랍니다.

또한 더 나은 전반적인 읽기 경험을 제공하기 위해 새 블록 편집기에서 더 많은 실험을 할 계획입니다.

그 외에도 2022년에는 YouTube 채널에서 정말 멋진 일을 할 예정이니 계속 지켜봐 주세요.

항상 그렇듯이 수년 동안 지속적인 지원과 피드백을 보내주신 모든 분들께 감사드립니다.

당신의 진정으로,
시에드 발키
WPBeginner 설립자

WPBeginner v6 이후 – 새로운 사이트 디자인의 비하인드 스토리가 WPBeginner에 처음 등장했습니다.