헤드리스 다국어 워드프레스 구축 - WPML GraphQL 출시

Last Updated: 2023년 07월 16일 | | 댓글 남기기

지난 5월에 WPML은 WPML과 WPGraphQL의 가교 역할을 하는 새로운 글루(glue) 플러그인인 WPML GraphQL을 출시하여 GraphQL 스키마 내에서 다국어 지원이 가능하게 되었습니다.

Gatsby, React, Vue 및 기타 인기 프런트엔드 기술을 사용하는 개발자를 위해 개발된 WPML GraphQL은 다국어로 헤드리스 워드프레스 사이트 생성을 위한 최적의 솔루션이라고 WPML은 소개하고 있습니다.

아래 내용은 WPML 블로그 글을 참고하여 정리한 것입니다. 기술적으로 잘못된 표현이 있다면 댓글을 통해 알려주시면 수정하도록 하겠습니다.

헤드리스 워드프레스(Headless WordPress)란?

간단히 설명하면 “헤드리스 워드프레스(headless WordPress)”는 프런트엔드용으로 별도의 기술을 사용하면서 워드프레스가 부수적인 작업을 수행하는 설정을 일컫습니다.

종종 워드프레스 템플릿 및 URL 계층 구조를 따를 필요 없이 완전히 사용자 정의된 프런트엔드 애플리케이션을 빌드해야 할 수 있습니다. 즉, 워드프레스 테마의 작동에 제약을 받지 않으면서 자신만의 프런트엔드를 빌드하고 싶을 수 있습니다.

하지만 모든 콘텐츠 생성과 편집에 대해서는 여전히 워드프레스를 사용할 수 있습니다.

이 경우, 프런트엔드 기술로 무엇을 사용하든 워드프레스 백엔드에서 데이터를 쉽게 전달할 수 있는 방법이 필요합니다. 여기에서 WPGraphQL이 개입합니다. WPGraphQL을 사용하면 각 프런트엔드 파트에 대하여 필요로 하는 콘텐츠 요소만을 선택적으로 정확히 끌어올 수 있습니다.

최종적으로 WPML GraphQL은 WPML 플러그인으로부터 언어 데이터와 번역을 가져오게 해주는 마법과 같은 요소입니다. 이를 통해 사용자 지정이 가능한 다국어 헤드리스 워드프레스 사이트를 구축할 수 있습니다.

헤드리스 워드프레스 사이트 구축에 권장되는 개발 스택

프런트엔드백엔드
Gatsby(개츠비):
사용자 대면 애플리케이션 또는 사이트 구축용 프런트엔드 프레임워크

✅Gatsby Add-on for WordPress:
Gatsby가 워드프레스 백엔드에서 데이터를 가져올 수 있도록 하는 gatsby-source-wordpress(개츠비-소스-워드프레스) 애드온
워드프레스:
모든 콘텐츠 관리 요구를 위한 CMS. 백엔드 전용.

✅WPGraphQL plugin for WordPress (워드프레스용 WPGraphQL 플러그인):
워드프레스에 GraphQL 지원 추가

WPML GraphQL plugin for WordPress(워드프레스용 WPML GraphQL 플러그인):
GraphQL 스키마 내에서 다국어 기능 활성화

WPGatsby plugin for WordPress(워드프레스용 WPGatsby 플러그인):
선택 사항. 요구 사항에 따라 유용할 수 있음.

WPML GraphQL로 기능 개선

WPML GraphQL 플러그인은 WPGraphQL과 통합되며 GraphQL 스키마에 새로운 필드와 필터를 추가합니다. 이 플러그인을 설치한 후에 GraphQL → GraphQL IDE로 이동하여 Query Composer(쿼리 컴포저)를 사용하여 여러 언어, 즉 다국어로 콘텐츠를 쿼리하고 필터링할 수 있습니다.

아래 스크린샷에서는 language 필드를 사용하여 워드프레스 사이트에서 언어 코드, 슬러그, URI 등을 포함하여 모든 게시물의 목록을 가져오는 것이 얼마나 쉬운지 확인할 수 있습니다. 이 목록에는 가 포함됩니다. 또한, translations 필드를 사용하여 각 게시물의 번역에 대하여 유사한 정보를 가져올 수 있습니다:

헤드리스 다국어 워드프레스 구축 - WPML GraphQL 출시

WPML GraphQL과 WPGraphQL 간 통합은 다국어 지원을 가능하게 합니다.

  • 헤드리스 멀티링구얼 워드프레스 사이트 구축
  • 새 필드(language, language code, translations)를 사용하여 WPML 플러그인으로부터 특정 언어 데이트와 번역 끌어오기
  • 포스트 타입(글 유형), 분류, 댓글을 언어별로 필터링
  • 오브젝트(objects)와 노드(nodes)를 위한 언어 데이터 가져오기
  • 설치된 모든 언어 또는 특정 언어에 기반하여 데이터 쿼리하기
  • 또한, WPML GraphQL은 ACF, ACF Multilingual 및 WPGraphQL for Advanced Custom Fields와 잘 작동합니다. 이를 통해 ACF 필드의 다국어 데이터와 쉽게 인터랙션할 수 있습니다.

다운로드 및 설치

WPML GraphQL은 WPML 다운로드 페이지에서 다운로드할 수 있습니다.

헤드리스 다국어 워드프레스 구축 - WPML GraphQL 다운로드

설치하려면 워드프레스 관리자 페이지 → 플러그인 → 새로 추가로 이동한 다음, 플러그인 업로드 버튼을 클릭하여 다운로드한 설치 파일을 업로드할 수 있습니다.

참고로 WPML은 현재 연간 구독 형태의 라이선스로만 구입이 가능합니다. 저렴하게 WPML 영구 라이선스(평생 라이선스)로 다국어 작업을 원하시는 경우 여기를 참고해보세요.

마치며

이상으로 최근 릴리스된 헤드리스 다국어 워드프레스 사이트 구축을 가능하게 하는 WPML GraphQL 플러그인에 대하여 살펴보았습니다.

최근 WPML을 사용하여 엘리멘터 페이지 빌더로 제작된 사이트를 영어, 일본어, 중국어 등 3개 언어로 변환하는 작업을 수행하였습니다("워드프레스 엘리멘터 템플릿을 WPML을 사용하여 다른 언어로 번역하기" 참고). WPML이 이전보다 사용이 쉬워졌고 속도면에서도 개선되었다는 느낌을 받았습니다.

참고


댓글 남기기

Leave a Comment