사례 연구: GutenKit를 사용하여 구텐베르크에서 웹 사이트를 재구축한 후의 결과

최근 Wpmet 팀은 웹사이트(wpmet.com)를 Gutenberg 블록 편집기로 이전했습니다. 이전에는 기능이 풍부한 페이지 빌더를 사용했지만 웹 사이트의 속도와 성능에 어느 정도 영향을 미쳤습니다.

그래서 우리 팀은 WordPress 코어의 일부인 편집기로 전환하기로 결정했습니다. 하지만 다음과 같은 대규모 베테랑 웹사이트를 재구축하는 것은 wpmet.com 그 자체가 도전이다.

상황에 맞게 설명하자면, 우리는 상당한 양의 웹사이트 트래픽, 수천 개의 사용자 계정, 400개 이상의 블로그 게시물, 복잡한 디자인의 여러 제품 페이지를 보유하고 있습니다.

따라서 우리는 구텐베르크에서 웹사이트를 재구축하는 동안 디자인 손상, 데이터 손실, 사이트 트래픽 감소와 같은 잠재적인 문제에 대해 우려했습니다. 이들 중 하나라도 당사 웹사이트에 심각한 결과를 초래할 수 있습니다.

비록 큰 문제나 오류 없이 재구축 과정이 순조롭게 진행되었지만, 우리는 구텐베르크에 많은 고급 페이지 빌더 기능이 필요하다고 느꼈습니다. 그래서 우리 팀은 Gutenkit 블록 편집기 플러그인, 복잡한 웹 사이트를 구축하는 데 필요한 모든 페이지 빌더 기능이 포함되어 있습니다.

결과적으로는 꽤 인상적이네요!!

그래서 저는 GutenKit를 사용하여 구텐베르크에서 웹사이트를 재구축한 경험과 결과를 공유하려고 생각했습니다!

왜 구텐베르크로 전환했나요?

WordPress 사이트를 Gutenberg로 이전한 것은 정말 큰 성과를 거두었습니다. 이는 성능을 개선하고, 최신 기능과의 호환성을 유지하며, 웹사이트를 더 쉽게 관리하는 데 도움이 되었습니다.

이러한 전환의 주요 이유는 다음과 같습니다.

WordPress 코어의 일부

구텐베르그는 이제 WordPress 코어의 기본 부분으로, 버전 5.0 이후 모든 WordPress 설치의 기본 편집기가 되었습니다. 이것 블록 에디터는 워드프레스의 현재이자 미래입니다. 따라서 이 블록 편집기에서 믿을 수 있는 것이 있다면 바로 안정성입니다. 

Gutenberg는 WordPress 핵심 개발의 일부이므로 블록 편집기가 WordPress 버전만큼 안정적일 것으로 기대할 수 있습니다. 통합이나 호환성에는 문제가 없습니다. 이는 광범위한 테마 및 플러그인과의 호환성을 보장합니다. WordPress 코딩 표준.

Gutenberg로 전환함으로써 우리는 WordPress의 지속적인 개발에 대한 최신 정보를 유지하고 사이트가 최신 기능, 개선 사항 및 보안 강화를 얻을 수 있도록 보장합니다.

성능

Gutenberg로 전환하는 주요 이유 중 하나는 성능이 크게 향상되었기 때문입니다. 편집기는 보다 간단하고 빠른 편집 환경을 제공하도록 설계되었습니다. 

블록 기반 아키텍처를 통해 Gutenberg는 페이지 로드 시간과 전체 사이트 속도를 개선하여 더 나은 사용자 경험과 잠재적으로 더 높은 검색 엔진 순위에 기여합니다.

사용의 용이성

Gutenberg의 깔끔한 블록 기반 인터페이스는 콘텐츠 생성 프로세스를 단순화합니다. 일부 페이지 빌더와 달리 Gutenberg는 보다 간단한 접근 방식을 취합니다. 사용자는 코딩 지식이 없어도 다양한 콘텐츠 요소를 쉽게 추가, 정렬 및 스타일 지정할 수 있습니다.

이러한 사용 용이성은 개발 팀과 마케팅 팀 모두에게 도움이 되었으며 학습 곡선을 줄이고 생산성을 높였습니다. 개발팀은 우리 웹사이트에서 복잡한 디자인을 쉽게 구현할 수 있었고, 작가들은 매력적인 콘텐츠를 보다 효율적으로 작성하고 게시하는 것이 더 쉽다는 것을 알게 되었습니다.

미래를 염두에 두다

구텐베르크를 채택하는 것은 미래에 대한 우리의 비전과 일치합니다. WordPress가 계속 발전함에 따라 Gutenberg는 지속적인 업데이트와 새로운 기능을 받아 당사 사이트가 최첨단 상태를 유지할 수 있도록 설정되었습니다. 

WordPress의 공동 창립자 Matt Mullenweg의 최근 트윗에 따르면 Gutenberg는 WordPress의 미래입니다.

따라서 지금 이 최신 편집기를 채택함으로써 웹 사이트의 미래를 보장하고 향후 개선 사항을 더 쉽게 통합하고 장기적인 관련성을 유지할 수 있습니다.

구텐베르크에서 웹사이트를 재구축하면서 직면한 어려움

Gutenberg는 WordPress에서 더 빠른 웹사이트 편집 환경을 제공하지만 고유한 문제도 있습니다. 웹사이트를 블록 편집기로 전환하는 동안 몇 가지 장애물에 직면했습니다. 우리가 직면한 주요 과제는 다음과 같습니다.

사용자 정의의 한계

우리가 직면한 가장 중요한 문제 중 하나는 사용자 정의의 한계였습니다. Gutenberg는 유연하고 사용자 친화적이지만 웹 사이트의 특정 요소를 사용자 정의하는 데에는 제약이 있습니다.

Gutenberg는 다양한 블록을 제공하지만 기본 설정 이상으로 사용자 정의하려면 추가 CSS 또는 JavaScript가 필요한 경우가 많습니다. 결과적으로 이는 구텐베르크가 제공하고자 하는 단순성에 반하는 것입니다.

게다가 전체 웹사이트에서 일관된 스타일을 구현하는 것도 어려웠습니다. 구텐베르그의 블록별 스타일링 옵션은 제한되어 있어 맞춤형 코딩을 사용하지 않고는 통일된 디자인을 적용하기가 어렵습니다.

복잡한 디자인 구현

복잡한 디자인을 구현하는 것이 아마도 재구축 과정에서 가장 어려운 부분이었을 것입니다. Gutenberg는 단순한 레이아웃에는 적합하지만 더 복잡한 디자인 요구 사항을 처리하는 데 어려움을 겪었습니다.

• 중첩된 블록 및 레이아웃 문제: 다층의 중첩 블록을 생성하면 레이아웃 문제가 발생하는 경우가 많습니다. 편집자의 시각적 표현이 실제 디자인과 다르기 때문에 불일치가 발생하는 경우도 있었습니다.
• 고급 상호작용: 애니메이션 및 모션 효과와 같은 고급 상호 작용을 통합하는 것은 기본 Gutenberg 프레임워크 내에서 제한되었습니다. 우리는 종종 맞춤형 JavaScript에 의존해야 했고, 이로 인해 개발 프로세스가 복잡해졌습니다.
• 민감도: 복잡한 디자인이 다양한 장치에서 반응하도록 보장하면 또 다른 복잡성이 추가됩니다. 반응형 디자인을 위한 구텐베르크의 기본 제공 도구는 때때로 다소 까다로웠습니다.

고급 사이트 구축 기능 부족

구텐베르크의 고급 사이트 구축 기능에 대한 필요성은 또 다른 중요한 과제를 제기했습니다. 

구텐베르크는 표준 게시물과 페이지를 잘 처리하는 반면, 맞춤 게시물 유형 그리고 분류법 더 많은 일을 했습니다. 이로 인해 고도로 구조화되고 정리된 사이트를 만드는 능력이 제한되었습니다. 동적 콘텐츠.

또한 고정 콘텐츠, 복사하여 붙여넣기, 한 페이지 스크롤 등과 같은 페이지 빌더 기능의 필요성을 확인했습니다.

준비가 부족한 템플릿

또 다른 과제는 적절하게 준비된 템플릿이 부족하다는 점이었습니다. 구텐베르크에는 사전 구축된 템플릿이 일부 포함되어 있지만 특정 요구 사항에 항상 적합한 것은 아닙니다.

그래서 우리는 각 웹 사이트 페이지를 처음부터 구축하기 위해 디자이너와 프런트 엔드 개발자로 구성된 전담 팀을 배치해야 했습니다. 이를 위해서는 인력의 상당한 시간과 자원이 필요했습니다.

그래서 우리는 준비된 템플릿과 패턴이 기존 편집기에 추가할 것이 많은 분야라고 느꼈습니다.

구텐베르크에서 웹사이트를 재구축하는 것은 도전과 함께 학습 경험이었습니다. 그래서 우리는 전환을 더 쉽게 할 뿐만 아니라 Gutenberg로의 마이그레이션을 계획하고 있는 수천 명의 WordPress 사용자를 위한 솔루션을 구축하기로 결정했습니다.

그래서 우리는 Gutenberg를 위한 최고의 페이지 빌더 블록인 GutenKit를 만들었습니다!

웹사이트를 Gutenberg로 이전하는 동안 우리는 디자인을 구현하기 위해 다수의 맞춤형 블록을 생성하고 맞춤형 코드를 작성해야 했습니다. 그래서 우리는 구텐베르크에서 전체 웹사이트를 구축하는 데 필요한 모든 것이 포함된 블록 편집기 플러그인을 구축하자고 생각했습니다.

따라서, GutenKit 블록 편집기 플러그인이 생성되었습니다. 우리는 이를 Gutenberg의 Ultimate Page Builder Block이라고 표시했습니다.

GutenKit는 다음과 같습니다.

• 경량 플러그인 웹사이트가 더 빠르게 로드되도록 도와줍니다.
• 수많은 제품이 함께 제공됩니다. 페이지 빌더 기능.
• 모든 블록과 템플릿은 전체 사이트 편집기(FSE)와 호환 가능.
• 5개 있음00개 이상의 준비된 패턴 및 템플릿 아직도 계산 중이에요.

GutenKit는 모든 페이지 빌더 기능을 제공합니다. 구텐베르크로 바로 들어갑니다. 사전 디자인된 템플릿부터 컨테이너 및 메가 메뉴까지 다양한 기능을 제공하여 매우 유연하고 기능적인 웹 사이트를 구축하는 데 필요한 모든 것을 제공합니다.

우선, 구텐베르크에서 웹사이트를 구축하는 데 필요한 모든 기능을 나열했습니다. 그런 다음 우리 플러그인 팀은 이러한 모든 기능을 개발하여 GutenKit에 추가했습니다.

이런 식으로 우리는 복잡한 디자인의 웹사이트를 구축하는 데 무엇이 필요한지 항상 알고 있었습니다. 그래서 우리는 플러그인에 불필요한 코드와 기능을 넣기보다는 필수 기능을 추가했습니다.

GutenKit의 특징:

...그리고 목록은 계속됩니다.

이러한 기능을 사용하여 우리는 웹사이트를 이전에 디자인했던 것과 정확히 동일하게 재구축할 수 있었습니다. 그리고 그 끝에 우리는 믿을 수 없을 만큼 놀라운 결과를 얻었습니다.

GutenKit로 웹사이트를 재구축한 결과

웹사이트를 재구축하기로 결정했을 때 우리의 주요 목표는 성능을 향상하고 디자인 연속성을 보장하는 것이었습니다. 마이그레이션을 완료한 후 이러한 핵심 영역에서 눈에 띄게 긍정적인 변화가 나타났습니다. 

결과와 GutenKit가 우리가 이를 달성하는 데 어떻게 도움이 되었는지 살펴보겠습니다.

웹사이트 성능이 크게 향상되었습니다.

GutenKit로 전환한 후 당사 웹사이트의 성능이 크게 향상되었습니다.

GutenKit의 깔끔한 코드와 최적화된 리소스 관리는 페이지 로드 시간을 줄이는 데 도움이 되었습니다. 우리는 Google의 PageSpeed Insights(Lighthouse라고도 함) 도구를 사용하여 웹사이트 성능을 테스트했습니다.

이전에는 Lighthouse의 전체 성능 점수가 85점이었습니다. 마이그레이션 후에는 99까지 올라갔습니다. 또한 접근성과 모범 사례도 향상되었습니다.

구텐베르크로 이동하기 전에:

구텐베르크로 이동한 후:

결과를 분석하기 위해 당사 웹사이트 점수의 전후 비교는 다음과 같습니다.

기본 Gutenberg 편집기 외에도 GutenKit도 이 작업에 도움이 되었습니다. GutenKit는 더 적은 수의 플러그인으로 모든 기능을 갖춘 하나의 플러그인이기 때문에 사이트 안정성이 향상되어 가동 중지 시간과 유지 관리 요구 사항이 줄어듭니다.

디자인의 일관성

재구축 과정에서 가장 큰 과제 중 하나는 웹사이트 전반에 걸쳐 디자인 연속성을 유지하는 것이었습니다. 우리가 사용하고 있던 페이지 빌더에는 디자인 요소가 꽤 많았기 때문에 우리의 관심은 구텐베르크에서 해당 디자인을 복제할 수 있는지였습니다.

여기서 GutenKit는 이전과 동일한 디자인으로 웹사이트를 정확하게 재구축하는 데 큰 도움을 주었습니다.

주목할 만한 디자인 개선 사항:

• 디자인 요소: 사이트 전반에 걸쳐 글꼴, 색상, 레이아웃의 일관성을 유지하여 브랜드 아이덴티티를 강화했습니다.
• 현대적인 미학: 시차 효과, 스크롤 효과, Glassmorphism, CSS 변환, 입구 애니메이션 등과 같은 모든 최신 애니메이션 및 모션 효과가 포함됩니다.
• 사용자 경험: 탐색 및 접근성이 향상되어 사용자가 더 쉽게 정보를 찾고 콘텐츠에 참여할 수 있습니다.
• 반응형 디자인: 이 웹사이트는 다양한 장치에 반응하므로 데스크탑, 태블릿, 스마트폰 등 어느 기기에서 접속하든 원활한 경험을 보장합니다.

전환을 통해 브랜드 아이덴티티가 유지되었으며 블록 디자인 요소는 웹 페이지를 구축하는 더 쉬운 방법을 제공했습니다.

SEO에 미치는 영향

GutenKit로 웹사이트를 재구축하는 것은 SEO 점수와 사이트 트래픽에 긍정적인 영향을 미쳤습니다. 더 빨라진 로딩 시간과 디자인 개선으로 인해 검색 엔진에서 인지도가 높아져 핵심 웹 바이탈 점수가 높아졌습니다.

코어 웹 바이탈 점수:

전에

후에:

성능 및 디자인 개선으로 인해 이러한 향상된 핵심 웹 바이탈 점수로 인해 주요 페이지의 순위가 높아졌습니다. 그 결과 트래픽과 참여도가 높아졌습니다.

전반적으로 GutenKit로의 전환으로 인해 웹 사이트의 SEO 성능이 크게 향상되어 순위가 높아지고 참여도가 높아지며 온라인 입지가 더욱 강화되었습니다.

결론

GutenKit를 통해 우리는 원래 디자인을 복제했을 뿐만 아니라 성능, 접근성 및 SEO 점수에서 괄목할 만한 향상을 달성했습니다. 마이그레이션을 통해 우리 웹사이트는 최고의 사용자 경험을 제공하려는 우리의 비전에 맞춰 더욱 빠르고 효율적이며 미래에도 사용할 수 있는 형태로 변모했습니다.

저는 우리의 경험이 다른 사람들이 구텐베르크로 전환하는 데 도움과 영감을 줄 수 있도록 이 이야기를 공유했습니다.

이 사례 연구가 유용하다고 생각되면 Gutenberg를 사용하여 WordPress 사이트를 구축하는 데 대한 경험과 관점을 댓글로 남겨주세요.