헤드리스 WordPress에 대한 종합 가이드: 알아야 할 모든 것

워드프레스는 지구상에서 가장 인기 있는 콘텐츠 관리 시스템(CMS)입니다. 2022년 3월 기준으로 모든 웹사이트의 43.3%를 어떤 식으로든 운영하고 있습니다. 그리고 그 인기는 나날이 높아지고 있는 것 같습니다.

매우 인기 있고 사용자 친화적이며 안전하지만 WordPress에는 몇 가지 단점이 있습니다. 개발자의 가장 큰 우려는 플랫폼별 플러그인, 테마 및 도구에 대한 제한입니다. 이 영역에서 벗어나고자 한다면 작동하지 않을 것입니다.

매달 새로운 콘텐츠 채널이 시장에 진입하면서 기존의 WordPress는 콘텐츠 범위를 확장하는 것을 막을 수 있습니다. 이것이 헤드리스 WordPress가 등장한 곳입니다. 다중 채널 접근 방식, 더 높은 성능 및 더 나은 유연성이 함께 제공됩니다.

이 가이드에서는 다음에 대해 설명합니다.

헤드리스 워드프레스에 대해 배우고 싶으십니까? 바로 뛰어들자!

A. 헤드리스 워드프레스가 무엇인가요?

웹사이트에는 프론트엔드와 백엔드라는 두 가지 인터페이스가 있습니다. 프론트 엔드는 디스플레이 또는 웹 사이트를 방문할 때 보게 되는 웹 페이지로 구성됩니다. 백엔드는 스크립트와 콘텐츠 데이터베이스가 서버에 저장되는 곳입니다. 다른 웹 사이트 기능 중에서 콘텐츠를 생성, 삭제 및 관리하려면 백엔드에 액세스해야 합니다.

기존 워드프레스 CMS에서는 프론트엔드와 백엔드가 모두 연결되거나 결합됩니다. 대부분의 사람들은 비용 경쟁력은 말할 것도 없고 상대적으로 관리하기 쉽기 때문에 기존 콘텐츠 관리 시스템을 사용하는 것을 좋아합니다.

헤드리스 CMS 또는 헤드리스 워드프레스는 기존 대응 방식과 다릅니다. 여기서 프론트엔드와 백엔드는 모두 분리되거나 분리됩니다. 헤드리스라는 이름은 프런트 엔드 또는 헤드 가 백엔드 또는 Body 와 독립적으로 작동한다는 사실에서 비롯됩니다.

B. 헤드리스 WordPress는 어떻게 작동합니까?

헤드리스 WordPress의 의미를 이해했으므로 이제 작동 방식을 살펴보겠습니다. 기존의 WordPress에서 헤드리스 WordPress로 이동하면 계속해서 콘텐츠를 업로드, 편집 및 관리할 수 있습니다. 차이점은 콘텐츠가 표시되는 방식에 있습니다.

헤드리스 WP에서는 콘텐츠를 프런트 엔드로 직접 보내는 대신 REST API를 통해 라우팅됩니다. 즉, WordPress REST API는 콘텐츠 관리 기능을 유지하지만 콘텐츠를 표시하기 위해 테마와 플러그인을 사용할 필요가 없습니다.

당연히 헤드리스 WordPress는 콘텐츠가 표시되는 방식을 제어할 수 없습니다. 그러나 기존 시스템의 제약 없이 여러 채널에 콘텐츠를 자유롭게 게시할 수 있습니다. 콘텐츠가 어떻게 보이는지 보려면 채널별 프런트 엔드 애플리케이션을 사용해야 합니다. 이것이 헤드리스 WordPress CMS가 작동하는 방식입니다.

C. 헤드리스 WordPress를 설정하는 방법은 무엇입니까?

이미 WordPress CMS가 있는 경우 헤드리스 CMS로 변환할 수 있습니다. 헤드리스 WordPress 개발을 수동으로 수행하거나(그런 종류의 작업이 마음에 든다면) 플러그인을 사용할 수 있습니다.

방법을 알아보겠습니다.

1. 수동 설정

AWS는 가장 인기 있는 호스팅 제공업체 중 하나이므로 AWS를 사용하여 헤드리스 WordPress를 설정하는 방법에 대해 이야기해 보겠습니다.

• AWS 계정 생성

  가장 먼저 AWS 계정이 필요합니다(아직 계정이 없는 경우). 간단한 과정입니다. 그러나 헤드리스 CMS, 바람직하게는 Amazon S3 계층에 적합한 계획을 세우는 것을 잊지 마십시오.

• 웹사이트의 정적 사본 만들기

  이 단계에서 WordPress를 사이트의 백엔드로 사용하려면 WordPress를 설치해야 합니다. 나중에 원할 때 프런트 엔드를 사용자 지정할 수 있습니다. 이상적으로는 백엔드를 다른 호스트 공급자에게 호스팅해야 합니다.

  그러나 다른 웹 호스팅 제공업체에 비용을 지불하고 싶지 않다면 로컬 설치를 이용할 수 있습니다. 이것은 XAMPP 또는 Local by Flywheel과 같은 도구를 사용하여 수행할 수 있습니다.

  백엔드 설치가 완료되면 원하는 방식으로 웹 사이트를 사용자 정의하십시오. 정적 복사본을 만들 준비를 하십시오. WP2Static 플러그인을 사용하여 동일한 것을 생성할 수 있습니다. 원하는 경우 다른 플러그인을 자유롭게 사용하십시오.

  WP2Static을 사용하는 경우 대시보드의 WP2Static 탭에서 웹사이트 설정에 액세스합니다. 정적 웹 사이트 배포 탭으로 직접 이동하라는 메시지가 표시됩니다.

  탭이 열리면:

  • 도착 URL 상자에 웹사이트 URL 추가
  • 맨 위의 드롭다운 메뉴에서 Amazon S3를 선택합니다(사이트의 최적화된 버전을 호스팅할 위치는 어디입니까?)

• 정적 페이지 자동 배포

  Amazon S3 옵션을 선택하면 여러 옵션이 있는 새 창이 표시됩니다. 고정 웹 사이트를 배포하는 데 이 정보가 필요하므로 액세스 키 ID와 보안 액세스 키를 가까이에 두십시오.

  • 적절한 필드에 키를 입력하십시오
  • AWS 버킷이 생성된 리전 선택
  • 페이지 하단으로 스크롤
  • 정적 사이트 내보내기 시작 버튼을 클릭합니다.

  웹사이트의 크기와 인터넷 속도에 따라 다소 시간이 걸릴 수 있습니다. 배포가 완료되면 WP 사이트의 라이브 정적 버전을 볼 수 있습니다.

2. 플러그인을 사용하여 설정

두 번째 옵션은 플러그인을 사용하는 것입니다. 플러그인을 사용하면 확실히 작업이 더 쉬워집니다. 그러나 웹사이트의 크기와 포함하려는 기능에 따라 둘 이상의 플러그인을 사용해야 할 수도 있습니다. 이 작업을 쉽게 수행할 수 있도록 노련한 WordPress 개발 에이전시와 협력하는 것이 좋습니다.

우리가 가장 좋아하는 플러그인은 다음 세 가지입니다.

• WPGraphQL

  WPGraphQL 은 무료 오픈 소스 WordPress 플러그인입니다. 프레젠테이션 레이어에서 CMS를 분리합니다. 이를 사용하여 모든 WordPress 사이트에 확장 가능한 GraphQL 스키마 및 API를 제공할 수 있습니다.

• 파우스트WP

  Faust.js와 함께 FaustWP 플러그인을 사용해야 합니다. 이들은 함께 GraphQL 변형 및 REST API 엔드포인트를 통해 WordPress로 인증하기 위해 분리된 프런트 엔드를 생성합니다. Faust.js로 구동되는 프론트엔드 앱과 워드프레스 백엔드를 연결하는 링크라고 생각하시면 됩니다.

• WPGraphQL Yoast SEO 애드온

  WPGraphQL Yoast SEO 애드온 은 WPGraphQL에 대한 Yoast SEO 지원을 활성화합니다. WPGraphQL 플러그인에 대한 SEO 지원을 받게 됩니다.

이것들은 우리가 자주 사용하고 사랑하게 된 플러그인이지만 몇 가지 좋은 선택이 있습니다. 그 두 가지는 다음과 같습니다.

• WP 개츠비

  WP Gatsby 는 오픈 소스 WordPress 플러그인입니다. 이를 사용하여 Gatsby 의 데이터 소스로 작동하도록 WordPress 사이트를 최적화할 수 있습니다.

• 헤드리스 모드

  헤드리스 모드 는 사이트에 액세스하려는 모든 사용자에 대해 리디렉션을 설정합니다. REST API 및 WP GraphQL API 요청만 통과합니다. 표준 게시물 편집기를 계속 사용할 수 있습니다.

D. 헤드리스 워드프레스를 위한 최고의 프레임워크 옵션

헤드리스 WordPress 프론트엔드의 성공은 적절한 프레임워크를 선택하는 데 달려 있습니다. 이것은 아마도 헤드리스 WordPress 개발의 가장 중요한 측면일 것입니다. 다음은 헤드리스 WordPress에서 사용할 수 있는 몇 가지 프레임워크입니다.

1. JS 반응

Facebook에서 제공하는 React.js는 인기 있는 프레임워크입니다. React JS를 사용하여 시각적으로 매력적인 대화형 디지털 경험을 만들 수 있습니다. 프로그레시브 인터넷 프로그램(PWA)과 단일 페이지 소프트웨어(SPA)를 생각해 보십시오.

2. 파우스트 JS

Faust.js는 헤드리스 워드프레스 프레임워크입니다. 정적 사이트 생성, 서버 측 렌더링, TypeScript, 데이터 가져오기, 게시물 및 페이지 미리보기 등과 같은 기능이 함께 제공됩니다.

3. 개츠비 JS

개인적으로 가장 좋아하는 Gatsby.js는 뛰어난 성능, 확장성 및 보안을 제공하는 React 기반 오픈 소스 프레임워크입니다. 정적 웹 페이지 및 사이트 생성기입니다.

4. 뷰 JS

또 다른 다목적 프레임워크인 Vue.js는 특히 헤드리스 WordPress와 관련하여 개발자들 사이에서 인기가 있습니다. Headless WordPress를 백엔드로 사용하여 프런트 엔드용 Vue.js를 사용하여 빠르고 강력하며 적응 가능한 웹 앱 또는 사이트를 구축할 수 있습니다.

5. 다음 JS

Next.js는 Node.js를 기반으로 구축된 오픈 소스의 최소한의 프레임워크입니다. 서버 측 렌더링 및 정적 웹 사이트 생성과 같은 기능이 함께 제공됩니다.

6. 앵귤러 JS

Google에서 유지 관리하는 Angular.js는 React의 훌륭한 대안입니다. 단일 페이지 웹 응용 프로그램을 만드는 데 더 적합합니다. 현재 장기 지원 모드입니다.

7. 재단

Foundation은 가장 진보되고 반응이 빠른 프론트엔드 프레임워크 중 하나입니다. HTML 및 CSS 기반 프런트 엔드를 구축하는 데 도움이 되는 템플릿 및 그리드와 함께 제공됩니다.

8. 제이쿼리

jQuery는 프레임워크가 아니라 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다. 가장 인기 있는 JS 라이브러리 중 하나입니다. 그러나 헤드리스 WP의 경우 jQuery UI 라이브러리만 있으면 됩니다.

E. 헤드리스 워드프레스의 장점

헤드리스 WordPress CMS는 특히 중대형 WP 웹사이트에 몇 가지 고유한 이점을 제공합니다. 제공하는 내용은 다음과 같습니다.

1. 프론트엔드 유연성 향상

프런트 엔드 유연성은 헤드리스 WordPress 시스템의 가장 찬사를 받는 이점일 것입니다. 헤드리스 WP로 다음을 수행할 수 있습니다.

• 다양한 프로그래밍 언어로 플레이
• 다양한 도구 또는 응용 프로그램으로 작업
• 콘텐츠를 변경하지 않고 디자인 사용자 지정
• React, Faust, Next 등과 같은 프론트엔드 프레임워크를 사용하십시오.
• 손쉽게 프런트 엔드 확장

2. 보안 강화

오늘날 DDoS와 같은 사이버 공격은 너무 흔합니다. 2021년 상반기에는 2020년 상반기에 비해 11% 증가한 540만 건의 DDoS 공격이 있었습니다. 이러한 공격의 위험과 피해를 완화하는 것은 매우 어렵습니다.

프론트엔드와 백엔드가 분리된 헤드리스 워드프레스는 DDoS 공격에 덜 취약합니다. 활성 웹 서버와 접근 가능한 데이터베이스가 없다는 것은 공격 표면이 상당히 작아진다는 것을 의미합니다. 따라서 귀하의 웹 사이트는 이러한 사이버 공격에 의해 어뢰 공격을 받을 가능성이 적습니다.

3. 더 나은 성능

동적 페이지 렌더링은 기존 WordPress의 핵심입니다. 기술적인 측면에서 WordPress는 PHP를 사용하여 웹 페이지를 생성합니다. 또한 데이터베이스에서 모든 리소스를 가져와 단일 파일에 넣어야 합니다. 시간이 걸리고 웹사이트 속도가 느려집니다.

그러나 REST API는 PHP 프로세스보다 훨씬 빠르게 콘텐츠를 렌더링합니다. 또한 플러그인과 테마가 전체 시스템에 부담을 주지 않습니다. 이것이 헤드리스 WordPress가 더 부드럽고 빠르며 응답성이 뛰어난 경향이 있는 이유입니다.

4. 확장성 향상

전통적인 WordPress 개발을 통해 컴퓨터 및 모바일 장치를 위한 우수한 웹사이트를 구축할 수 있습니다. 그게 다야. WordPress 영역 외부에 기능이나 사용자 경험을 추가하는 것은 불가능합니다.

IoT 장치, 스마트 스피커, 디지털 디스플레이, 스마트 TV 등과 같은 다른 채널로 콘텐츠를 확장할 수 없습니다. 2030년까지 활성 IoT 장치의 수가 254억 개에 이를 것으로 예상됨에 따라 다중 채널 퍼블리싱은 더 이상 사치가 아니라 필수입니다.

이것이 헤드리스 WordPress가 훨씬 쉽게 만드는 것입니다. 새로운 콘텐츠 채널에 원활하고 신속하게 접근할 수 있습니다. 이것이 오늘날의 성장하는 디지털 환경에서 확장성 101입니다.

5. 다양한 기술력

기존 WordPress에서 기술 기술은 플랫폼별 기술로 제한됩니다. 물론 그것은 당신을 전문가로 만들지만, 눈에 보이는 것보다 더 많은 것을 제공할 수 있는 새로운 기술을 탐색할 자유가 없습니다.

헤드리스 WP를 사용하면 새로운 기술을 자유롭게 탐색할 수 있습니다. 수요가 많은 기술로 작업하거나 더 나은 기능과 유연성을 제공할 수 있습니다. 하늘이 한계입니다.

F. 헤드리스 워드프레스의 단점

헤드리스 WordPress는 훌륭한 발견이지만 몇 가지 단점이 있습니다. 뛰어들기 전에 다음과 같은 단점을 고려해야 합니다.

1. WYSIWYG 편집기 없음

이것은 많은 사람들, 특히 기술에 정통하지 않은 사람들에게 중요한 전환점이 될 수 있습니다. 헤드리스 WordPress를 사용하면 실시간 미리보기인 WYSIWYG 편집기를 잃게 됩니다. 이는 개발자 의존도를 높입니다. 크거나 작은 문제뿐만 아니라 콘텐츠 관리를 위한 개발자도 필요합니다. 이는 콘텐츠 민첩성을 상당히 감소시킵니다.

2. 점점 복잡해지는 구조

예, 헤드리스 WordPress는 매우 유연합니다.

그러나 유연성에는 복잡성이 따릅니다.

새로운 프런트 엔드 경험을 추가할 때마다 구조적 복잡성도 증가합니다. 기본적으로 업데이트, 유지 관리 및 그 사이의 모든 것을 관리해야 하는 시스템이 하나 더 있습니다. 즉, 전문성을 갖춘 워드프레스 개발자를 고용하는 것이 중요합니다.

3. 점점 비싸다

유연성에는 대가가 따릅니다. 처음부터 프론트엔드 경험을 구축해야 합니다. 새로운 디지털 경험을 할 때마다 생성, 통합, 배포 및 유지 관리에 더 많은 돈, 시간 및 리소스를 사용해야 합니다. 이는 전체 예산에 심각한 타격을 줄 수 있습니다.

G. 헤드리스 WordPress에 대한 SEO 기본 사항이 변경됩니까?

SEO는 그렇게 많이 바뀌지 않습니다. 그러나 처음부터 기초를 다져야 할 수도 있습니다. 그리고 기반을 강화하려면 다음 모범 사례를 고려하십시오.

1. Schema.org 구조화된 데이터

Schema.org 구조화된 데이터 마크업 스키마를 사용하면 검색 엔진 가시성을 높이는 데 도움이 됩니다. 또한 가이드 및 튜토리얼과 같은 교육 콘텐츠가 추천 스니펫으로 표시될 가능성도 높아집니다.

2. 메타 태그

그들은 아마도 SEO에서 가장 중요한 부분일 것입니다. 메타 태그를 사용할 때 다음을 유지하세요.

• 70자 미만의 제목 태그
• 160자 미만의 메타 설명 및 관련성
• 제목 및 설명 키워드 최적화

3. SEO 감사

Google Analytics 또는 SemRush와 같은 도구를 사용하는 정기적인 SEO 감사는 SEO를 요점으로 유지하는 데 큰 도움이 될 수 있습니다. WPGraphQL Yoast SEO Addon과 같은 플러그인도 SEO 개선에 도움이 될 수 있습니다.

4. 정적 사이트 생성기

Gatsby, Hugo 및 Pelican과 같은 많은 정적 사이트 생성기(SSG)에는 SEO가 내장되어 있습니다. 몇 번의 클릭만으로 대부분의 기술적 SEO 문제를 해결할 수 있습니다.

5. CDN 사용

Cloudflare, StackPath 및 Sucuri와 같은 콘텐츠 전송 네트워크는 페이지 속도를 최적화하는 데 도움이 됩니다. 이미 알고 계시겠지만, 이것은 중요한 SEO 요소 중 하나입니다.

6. 이미지 최적화

SEO를 개선하는 또 다른 방법은 이미지와 미디어를 최적화하는 것입니다. 다음을 수행해야 합니다.

• 이미지 및 비디오에 지연 로딩 사용
• SVG 또는 WebP 형식의 이미지 사용
• 모든 이미지에 관련 Alt 태그 추가
• 이미지에 대한 오픈 그래프 메타태그 추가

7. 모든 곳에서 HTTPS

사용자가 자신의 안전에 대해 더 많은 관심을 갖게 됨에 따라 웹사이트에 보안 계층을 추가해도 문제가 되지 않을 것입니다. 따라서 모든 곳에서 HTTPS를 사용하십시오.

웹사이트의 크기, 새로운 콘텐츠 추가 빈도 및 다중 채널 존재 여부에 따라 추가 SEO 단계를 수행해야 할 수 있습니다. 게다가 SEO는 한 번에 끝나는 것이 아닙니다. 검색 엔진과 온라인 트렌드가 발전함에 따라 계속 업데이트해야 합니다. 장기적 SEO를 계획하려면 SEO 대행사에 문의하는 것이 좋습니다.

H. 헤드리스 워드프레스를 사용하면 안 되는 경우는?

예, 헤드리스 WordPress는 훌륭한 기술입니다. 그러나 많은 작업이 필요합니다. 따라서 문제는 시간, 노력 및 돈을 투자할 가치가 있습니까?

짧은 대답은 다음과 같습니다.

헤드리스 워드프레스는 모든 사람을 위한 것이 아닙니다.

총을 점프하기 전에 다음 요소를 고려해야 합니다.

1. 고급 스킬 세트

더 큰 유연성과 사용자 정의를 즐길 수 있지만 WordPress 개발 외에도 다양한 기술이 필요합니다. 더 많은 프런트 엔드 기술을 사용할수록 더 많은 기술이 필요합니다. 웹 사이트를 혼자서 처리하려는 경우 헤드리스 CMS를 구축하고 유지 관리하기가 어려울 수 있습니다.

우선, 튜토리얼은 지금까지 당신을 얻을 수 있습니다. 게다가 새로운 프로그래밍 언어나 프론트엔드 프레임워크를 배우는 데는 시간이 걸립니다. 이렇게 하면 콘텐츠 전송이 지연됩니다.

2. 비개발자를 위한 도전

웹사이트 처리에 관련된 모든 사람이 개발자만큼 기술에 정통한 것은 아닙니다. WYSIWYG 편집기 및 라이브 미리 보기 기능이 없기 때문에 작가, 편집자 및 마케터와 같은 비기술적 팀 구성원은 헤드리스 WordPress에서 콘텐츠를 업데이트하는 데 어려움을 겪을 것입니다.

즉, 분할된 환경에서 작업하려면 연습과 적응 의지가 필요합니다. 즉, 새로운 개발자는 헤드리스 WordPress로 작업하는 것이 어려울 수도 있습니다.

3. 두 배의 유지 관리

별도의 프론트엔드와 백엔드가 있다는 것은 서버와 유지 관리가 두 배라는 의미입니다. 또한 두통을 2배 증가시킵니다. 당신이 당신의 돈 가치를 얻고 있다면 이 모든 시련을 겪을 가치가 있습니다. 그렇지 않으면 현재 WordPress CMS를 고수하십시오.

4. 라이브 미리보기 부족

앞에서 언급했듯이 라이브 미리 보기와 WYSIWYG 편집기가 없다는 것은 특히 기술이 없는 팀원에게 큰 실망을 줄 수 있습니다. 또한 헤드리스 CMS는 처음에는 또는 나중에 새로운 프런트 엔드 채널을 추가할 때 제대로 작동하지 않을 수 있습니다. 즉, 버그 등을 수정하는 데 상당한 시간을 할애하게 됩니다.

5. 비싸다

이것은 중요한 고려 사항입니다. 사용자 정의 프런트 엔드를 코딩하는 것은 시간이 많이 소요될 뿐만 아니라 비용도 많이 듭니다. 새로운 디지털 경험을 활용할 때마다 추가 장기 유지 관리가 필요합니다. 무엇보다도 더 많은 개발자를 고용하고 호스팅과 보안에 더 많은 돈을 지출해야 합니다.

I. 헤드리스 워드프레스의 미래 전망

모든 말과 완료, 헤드리스 WordPress가 여기에 있습니다. 모든 새로운 기술과 마찬가지로 사용자는 이를 이해하고 활용하는 데 시간이 걸립니다. 그러나 우리는 그 인기가 앞으로는 아무데도 가지 않는 것을 보게 될 것입니다.

이유는 다음과 같습니다.

• 새로운 플러그인과 솔루션이 시장에 출시되면서 프론트엔드와 백엔드를 분리하는 것이 더 쉬워지고 있습니다. 헤드리스 WordPress로의 전환이 쉬워짐에 따라 더 많은 사람들이 헤드리스로 전환하는 것을 고려할 것입니다.
• IoT 장치 및 기타 디지털 채널의 보급이 증가함에 따라 헤드리스 WordPress에 대한 수요가 증가할 것입니다. 바로 지금이 이 급성장하는 트렌드에 대한 최선의 답인 것 같습니다.
• 실험하기 좋은 곳입니다. 개발자, 특히 사용자 정의를 좋아하는 개발자는 원하는 라이브러리 및 프레임워크 또는 프로그래밍 언어를 가지고 놀 수 있습니다. 이것이 개발자들이 미래에도 헤드리스 워드프레스 개발을 환영할 가능성이 높은 이유 중 하나입니다.
• 마지막으로 두 세계의 장점을 모두 제공합니다. 유연성과 우수한 WordPress 백엔드를 얻을 수 있습니다. 많은 사람들에게 이것은 몇 가지 명백한 결점에도 불구하고 캐치입니다.

결론

헤드리스 워드프레스(headless WordPress)에 대해 들어본 적이 없거나 들어본 적이 있을 수 있으며 헤드리스로 전환할 생각을 하고 있을 것입니다. 두 경우 모두 이 새로운 콘텐츠 관리 시스템이 무엇인지, 작동 방식, 장점과 단점, 투자를 고려해야 하는지 여부를 이해해야 합니다. 이를 위해 이 짧은 안내서가 도움이 될 것입니다.

기존 WordPress에서 헤드리스 WordPress로 전환하거나 추가 정보가 필요하면 언제든지 저희에게 연락하십시오. 저희 전문가가 처음부터 끝까지 도와드립니다.