헤드리스 WordPress 란 무엇이며 사용 방법

게시 됨: 2021-12-23

지난 몇 년 동안 헤드리스 커머스 트렌드의 하위 주제인 헤드리스 워드프레스에 대해 인터넷에서 많은 이야기가 있었습니다. 많은 사람들에게 머리를 감싼다는 것은 어려운 개념일 수 있습니다(말장난 의도 없음).

WordPress의 템플릿과 플러그인은 사용자에게 수많은 옵션을 제공하지만 이 설정은 일부 사용자가 원하는 것보다 더 엄격하다는 비판을 받았습니다. 대안으로 헤드리스 워드프레스가 기존 워드프레스와 어떻게 비교되고 개발을 보다 유연하게 만들 수 있는지 살펴보겠습니다.

보시다시피 둘 사이의 가장 명백한 차이점은 복잡성입니다. 대부분의 경우 WordPress에는 코딩 경험이 거의 필요하지 않습니다. 반대로 헤드리스 워드프레스를 최대한 활용하려면 수많은 프로그래밍 언어와 프레임워크에 대해 잘 알고 있어야 합니다.

HTML, CSS 또는 JavaScript와 같은 프로그래밍 및 마크업 언어에 익숙하지 않은 경우 전문 개발자를 고용하는 것이 더 가치가 있음을 알 수 있습니다. 강력한 애플릿과 웹 서비스를 구축하려는 경우 C# 및 하드 코어 Java와 같은 다중 패러다임 프로그래밍 언어에 대한 경험이 있는 사람이 필요할 수 있습니다.

이제 옵션을 마련했으므로 헤드리스 WordPress와 기존 WordPress를 구분하는 요소에 대해 자세히 살펴보겠습니다.

전통적인 워드프레스

전통적인 WordPress는 PHP를 사용하여 웹사이트의 프론트엔드를 생성합니다. WordPress 인터페이스에 입력한 테마와 콘텐츠를 기반으로 시각적 HTML 구성 요소를 동적으로 생성하여 이를 수행합니다.

이 모든 것이 웹사이트의 프론트엔드이자 백엔드가 됩니다. PHP는 빠르고 안정적이지만 옵션이 제한됩니다. 웹사이트에 대해 다른 스크립팅 언어나 프레임워크를 사용하여 웹사이트의 프론트엔드를 구축하려는 경우 어떻게 해야 합니까? 이것이 헤드리스 WordPress가 등장하는 곳입니다.

헤드리스 WordPress의 차이점

헤드리스 워드프레스

헤드리스 워드프레스는 프론트엔드 개발을 워드프레스의 손에서 벗어납니다. 즉, WordPress의 PHP 구현으로 제한되지 않고 웹사이트의 프론트 엔드를 구축할 수 있습니다. WordPress 대시보드를 계속 사용할 수 있지만 백엔드만 생성하도록 위임할 수 있습니다.

그런 다음 다른 프레임워크를 사용하여 웹사이트의 사용자 인터페이스를 구성할 수 있습니다. 이것이 웹사이트에 여전히 WordPress의 "본문"을 사용하고 있지만 "얼굴"에 대해 다른 도구를 사용하고 있기 때문에 "헤드리스"라고 불리는 이유입니다. 따라서 미학이 아니라 데이터에 대해 WordPress의 대시보드를 사용하고 있습니다.

헤드리스 워드프레스는 보다 다재다능한 콘텐츠 관리 시스템(CMS)을 만듭니다. 또한 사용자에게 웹 개발을 위한 더 많은 옵션을 제공합니다. 예를 들어 Angular, Vue 또는 REACT와 같은 JavaScript 기반 프레임워크를 구현할 수 있습니다. 또는 Laravel, CodeIgniter 또는 Symfony와 같은 다른 PHP 프레임워크를 구현하도록 선택할 수 있습니다.

프런트 엔드에 이러한 도구를 사용한 다음 WordPress의 REST API(응용 프로그래밍 인터페이스)를 사용하여 데이터를 가져옵니다. 일반적으로 헤드리스 워드프레스를 사용할 때 프론트엔드와 백엔드는 다른 서버에 위치합니다. WordPress의 REST API는 이러한 서버 간, 즉 헤드와 본문 간의 통신을 용이하게 합니다.

이렇게 하면 백엔드를 작성하고 호스팅하지 않아도 됩니다. 물론 개발자에게 비용을 지불할 수는 있지만 대부분의 경우 비용이 더 많이 듭니다. 백엔드 개발자에게 시간당 최소 60달러를 지불할 것으로 예상할 수 있으며 이는 대규모 프로젝트의 경우 비용이 많이 들 수 있습니다. WordPress의 대시보드를 사용하면 더 많은 제어가 가능하며 초보자와 숙련된 개발자 모두 사용할 수 있습니다.

모든 개발 환경은 다르므로 구성 요구 사항도 다릅니다. 대부분의 경우 WordPress 웹 사이트의 새 인스턴스를 만들고 프레임워크의 IDE에 데이터베이스를 연결해야 합니다. 그런 다음 대시보드에서 WordPress API를 구성해야 합니다.

다행히 대부분의 프레임워크는 시작하는 데 도움이 되는 자습서를 제공합니다. 프론트엔드용으로 가장 많이 선택되는 프레임워크는 다음과 같습니다.

  • 반응
  • 모난
  • 뷰.js
  • 엠버.js
  • 제이쿼리
  • 시맨틱 UI
  • 기반

전통적 대 헤드리스의 비교

그렇다면 헤드리스는 기존 WordPress와 어떻게 비교됩니까? 이해를 돕기 위해 각각의 장단점을 논의해 보겠습니다.

전통적인 워드프레스의 장점

즉시 사용 가능한 다양한 솔루션 : 기존 WordPress를 고수하기로 결정한 경우 WordPress 에코시스템 전체에 액세스할 수 있습니다. 여기에는 사용 가능한 모든 플러그인, 단축 코드, 슬라이더, 갤러리 및 테마가 포함됩니다. 그들은 모두 잘 테스트되고 보장됩니다.

신속한 개발 : 전통적인 WordPress는 사용하기 쉽습니다. 모든 시각적 구성 요소는 마법사와 같은 인터페이스를 통해 제공됩니다. 또한 기존 WordPress를 최대한 활용하는 데 도움이 되는 리소스가 많이 있습니다. 처음부터 자신만의 테마를 만들 필요도 없습니다. 구매하거나 WordPress의 긴 무료 테마 목록을 사용할 수 있습니다. 이러한 요소를 사용하면 시각적으로 풍부한 웹 사이트를 빠르게 개발할 수 있습니다.

WYSIWYG 경험 : WordPress 비주얼 편집기를 사용하면 웹사이트가 즉석에서 어떻게 보일지 정확히 볼 수 있습니다. 또한 디자인을 시각화하기 위해 Elementor 또는 WP Bakery와 같은 추가 기능을 구입하기로 결정했습니다.

기존 WordPress의 단점

WordPress의 역학으로 제한됨 : WordPress는 인상적인 도구 상자를 제공하지만 제대로 사용하지 않으면 제한적일 수 있습니다. 예를 들어 프로그레시브 웹 애플리케이션과 같은 보다 동적인 프로젝트를 만드는 것은 거의 불가능합니다.

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

구획화 : 헤드리스 WordPress의 주요 장점은 WordPress를 백엔드로 사용하고 타사 솔루션을 프론트엔드로 사용할 수 있다는 것입니다. 그들은 독립적으로 작동하지만 서로 통합할 수 있습니다. 문제가 발생하면 어떤 구성 요소에 결함이 있는지 문제를 해결하는 것이 더 쉽습니다.

다양성 : Headless WordPress는 더 기능적인 웹사이트와 앱을 만들기 위한 더 다양한 도구를 제공합니다. 예를 들어, 빠른 정적 웹 페이지를 위해 Gatsby와 같은 프레임워크를 구현할 수 있습니다. 또한 타사 IDE(통합 개발 환경)와 협력하여 보다 전문화된 웹 앱을 구축할 수 있습니다.

보다 정교한 제어 : Headless WordPress를 사용하면 프로젝트 프레젠테이션을 보다 잘 제어할 수 있습니다. 레이아웃 및 구성 요소 위치 지정에 대한 더 많은 옵션이 있기 때문에 더 많은 프런트엔드 사용자 지정을 제공합니다.

더 많은 콘텐츠 게시 옵션 : Headless WordPress는 플랫폼 간 게시를 지원하므로 웹 애플리케이션에 국한되지 않습니다. 예를 들어 WordPress API를 사용하여 데스크톱 및/또는 전화 애플리케이션을 만들 수 있습니다.

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

덜 사용자 친화적 : 전통적인 WordPress의 주요 장점은 사용 용이성입니다. WordPress 프로젝트를 다른 콘텐츠 개발자나 클라이언트에게 넘길 수 있으며, 그들이 작동 방식을 이해하는 것은 매우 쉬울 것입니다. 그러나 헤드리스 WordPress 프로젝트는 공동 작업이 더 어려울 수 있습니다(특히 개발자가 아닌 경우). 프론트엔드 프레임워크와 워드프레스 백엔드 사이에서 작업하려면 특히 Angular 및 React와 같은 프레임워크에 대해 공부해야 하는 경우 시간과 노력이 필요합니다. 헤드리스 WordPress를 사용하려는 경우 개발 프로세스를 문서화하는 것이 가장 좋습니다.

더 비싸다 : 헤드리스 워드프레스를 구현하는 것은 전통적인 워드프레스를 사용하는 것보다 더 비쌀 수 있습니다. 프론트엔드 API/프레임워크, 개발 환경, 워드프레스 대시보드/API 비용을 지불해야 하는 경우가 많습니다.

헤드리스 워드프레스 솔루션

헤드리스 워드프레스 솔루션

이제 헤드리스 WordPress가 무엇인지 이해했으므로 사용 가능한 도구를 살펴보겠습니다. 아래 옵션은 프레임워크와 플러그인을 모두 포함합니다. 이러한 도구를 사용하면 헤드리스 WordPress 개발 경험을 보다 원활하게 진행할 수 있습니다. 시작하기 전에 모든 개발 환경이 다르기 때문에 각각 고유한 구성 집합이 필요하다는 점에 유의하는 것이 중요합니다.

헤드리스 워드프레스를 위한 최고의 프레임워크

결국 헤드리스 WordPress 프로젝트의 성공은 프런트 엔드를 구축하는 데 사용하는 프레임워크에 달려 있습니다. 각 프레임워크는 기능과 접근성이 다릅니다. 위의 가이드에서 그 중 일부를 간략하게 언급했음을 알 수 있습니다. 다시 말하지만, 모든 것을 스스로 할 계획이라면 좌초되지 않을 것입니다. 각 프레임워크는 튜토리얼 팩을 제공합니다. 또한 문제가 발생하면 방문할 수 있는 번창하는 온라인 커뮤니티가 있습니다.

  • React JS: React는 Meta(FKA Facebook)의 오픈 소스 프런트 엔드 JavaScript 라이브러리입니다. 시각적으로 풍부한 대화형 사용자 인터페이스를 구축할 수 있습니다. Meta와의 관계로 인해 현재 매우 인기가 있습니다.
  • AngularJS: Angular JS는 주로 단일 페이지 웹 응용 프로그램을 만드는 데 중점을 둔 오픈 소스 JavaScript 프레임워크입니다. React의 훌륭한 대안입니다. 현재 Google에서 유지 관리하고 있습니다.
  • Vue.js: Vue.js는 사용자 인터페이스를 구축하기 위한 오픈 소스 JavaScript 프레임워크입니다. Vue.js를 다른 프레임워크와 구분하는 것은 MVVM(모델 보기 모델) 아키텍처와 강력한 템플릿입니다.
  • Gatsby JS: Gatsby는 정적 웹 페이지 및 사이트 생성기입니다. Gatsby는 데이터 소스가 필요하지 않은 사이트를 구축한다는 점에서 기존의 프레임워크 및 방법과 다릅니다. 이렇게 하면 이러한 웹 페이지가 더 빨리 로드됩니다. 그러나 WordPress와 같은 CMS 위에 Gatsby를 구축합니다.
  • jQuery: jQuery를 언급하지 않고 JavaScript 프레임워크 및 라이브러리 목록을 컴파일할 수 없습니다. 2006년부터 사용되었으며 원래 JavaScript 웹 개발을 더 이해하기 쉽게 만들기 위해 만들어졌습니다. 현재 시장에서 가장 많이 사용되는 JavaScript 라이브러리입니다. 헤드리스 WordPress 개발의 경우 UI 라이브러리만 필요합니다.
  • 기초: CSS는 먼 길을 왔습니다. 요즘에는 CSS와 HTML을 중심으로 전체 웹페이지를 구축할 수 있습니다. 재단은 이 원칙에 따라 기능합니다. HTML 및 CSS 기반 프런트 엔드를 만드는 데 도움이 되는 템플릿과 그리드를 제공합니다. 또한 필요한 경우 JavaScript 확장과 함께 제공됩니다.
  • Faust.JS: Faust는 사용자가 헤드리스 WordPress용 프론트엔드 GUI를 구성할 수 있도록 특별히 제작된 Javascript 프레임워크입니다. Next.JS를 기반으로 하며 GraphQL을 사용하여 데이터를 검색합니다. Faust를 사용하면 사이트를 정적으로 렌더링(SSR)하거나 서버 측(SSG)에서 생성할 수 있습니다.

헤드리스 WordPress 개발을 위한 최고의 플러그인

올바른 프레임워크를 선택하는 것이 중요합니다. 그러나 다시 한 번 강조하자면 헤드리스 워드프레스 개발은 식은 죽 먹기가 아닙니다. 그러나 플러그인을 한두 개 추가하여 작업을 더 쉽게 만들 수 있습니다. 다음은 최고의 몇 가지입니다.

  • WP Gatsby: WP Gatsby를 사용하면 Gatsby JS 프레임워크를 사용할 때 WordPress를 데이터 소스로 사용할 수 있습니다. 헤드리스 WordPress를 Gatsby에 쉽게 연결할 수 있습니다.
  • WPGraphQL: WPGraphQL은 WordPress의 Rest API 구현에 대한 대안입니다. 기본적으로 프론트엔드 GUI가 일련의 쿼리 또는 명령을 통해 WordPress의 백엔드와 통신할 수 있습니다.
  • 헤드리스 CMS: WordPress에 내장된 헤드리스 API의 기능을 확장하는 플러그인입니다. 사용자 지정 Rest API 끝점, 위젯에 대한 추가 사용자 지정, 범주에 대한 이미지 업로드 등을 추가합니다. WooCommerce 및 Gatsby와 함께 사용할 수 있습니다.
  • FaustWP: Faust.JS 프레임워크와 함께 작동하는 플러그인입니다. 여기에는 헤드리스 마이그레이션과 WordPress 백엔드와 프런트엔드 간의 통신 촉진이 포함됩니다.
  • Headless WP: Headless WP 플러그인에 대한 miniOrange 대안. 헤드리스 WordPress로 훨씬 쉽게 전환할 수 있습니다. WordPress 프런트 엔드를 손쉽게 비활성화하고 모든 WP 테이블 또는 API 엔드포인트에서 데이터를 검색할 수 있습니다.

WordPress는 놀라운 CMS이므로 왜 그렇게 큰 시장 점유율을 가지고 있는지 궁금하지 않습니다. 그러나 때로는 약간의 유연성이 필요합니다. 헤드리스 WordPress는 더 많은 유연성과 확장성을 제공하지만 단순한 프로젝트에는 과도할 수 있습니다. 따라서 프레임워크에 대한 쇼핑을 시작하기 전에 사용 가능한 모든 플러그인을 철저히 조사했는지 확인하십시오. WordPress의 한계에 도달했다고 확신하면 헤드리스 경로로 가는 것을 고려해야 합니다.