Why Blog #6. Gatsby and WordPress

전세계에서 가장 많이 사용하는 블로그 서비스는 워드프레스이다. 70% 이상의 웹사이트가 워드프레스를 기반으로 되어 있다고 말한다. 워드프레스의 플러그인만 설치하면 왠만한 기능이나 서비스는 뚝딱 만들어진다.

Gatsby 에서 워드프레스를 사용할 수 있다는 내용을 알게 되었지만, 처음에는 이게 어떻게 구성이 되는지 딱히 감이 오지 않았습니다.

일단 몸으로 부딪치면서 그 원리들을 알 수 있게 되었다.

Gatsby 에서 워드프레스의 역할이란?

결론부터 정리하면 워드프레스를 통해 본문 글을 쉽게 작성할 수 있는 CMS 기능을 활용할 수 있다. Headless CMS 라고도 표현하고 있다.

이런 플러그인도 워드프레스에 있는 것 같은데, 이걸 공부하는 것도 시간이 걸릴 것 같아서 접근 가능한 정보들을 기반으로 하나씩 정리를 했다.

그러면 연동을 위해서는 어떤 작업이 필요한가?

워드프레스 설정

워드프레스를 보유하고 있다면 Gatsby 를 연동하기 위해 몇가지 플러그인이 필요하다. 가장 기본이 되는 플러그인은 다음 두가지이다.

WPGraphql

WPGatsby

해당 플러그인은 Gatsby 연동과 Graphql 을 통해 워드프레스 데이터를 쿼리하는 기능을 위해 활성화 작업이 필요하다.

실제로 더 세팅을 하다보면 SEO 관련한 플러그인도 필요하기 때문에 가장 유명한 플러그인인 Yoast SEO 를 설치하는 것을 권장한다.

이왕 워드프레스를 좀 정리하고 가려고 한다면 테마도 적절하게 선택해서 본래의 워드프레스 사이트도 약간 꾸며보는 것도 좋은 것 같다.

언젠가 풀로 워드프레스를 가지고 서비스를 해야할 상황이 올지도 모른다. (현재 진행형으로 검토 내용을 정리하고 있기 때문에 글의 내용이 언제 뒤바뀔지 모른다… ㅠㅠ)

위 플러그인을 설치했다면 기본적인 워드프레스 연동환경은 준비되었다.

더 준비해야한다고 하면 워드프레스로 글을 쉽고 가시성 있게 하는 여러 노하우를 익히면 좋을 것 같다.

워드프레스가 준비되었으니 이제 Gatsby 도 설정이 필요하다.

일단 추천하는 것은 Gatsby 가 제공하는 기본 워드프레스 테마를 처음에 사용하면서 어떻게 작동하는지 원리를 파악하면 좋다. Gatsby에서도 다음과 같은 플러그인이 필요하다.

Gatsby-source-wordpress

이 플러그인은 설정된 워드프레스를 감시하면서 업데이트 되는 글의 내용을 Gatsby에 반영한다.

설치된 플러그인을 사용하려면 gatsby-config.js 파일에 설정을 해야한다. 다음과 같이 워드프레스 주소를 통해 graphqld을 쿼리하는 페이지를 설정한다.

이제 로컬에서 개발 버전으로 Gatsby 를 실행시켜보자.

실행되는 로그들 중에 워드프레스의 데이터를 임포트하는 작업들이 나온다면 성공이다. 이제 워드프레스와 Gatsby의 글이 연동되는 기본 설정은 잘 정리되었다.

블로그가 localhost:8080 으로 실행되고, 연동된 글들을 확인할 수 있다.

글들을 열어보니 신기하게 워드프레스로 작성한 HTML 기반의 글이 잘 보이는 것을 볼 수 있다.

그런데 순서대로 Gatsby 를 다루던 분들은 한가지 혼란스러운 부분이 차자온다.

마크다운으로 글을 안써도 되나?

Gatsby를 마크다운으로 글을 써서 연동하는 내용들이 많이 있어서 왠지 마크다운을 쓰지 않으면 안되는 것이 아닌가 생각할 수 있다.

그러나 워드프레스를 사용하면 마크다운 잊어도 된다.

워드프레스 CMS로 블럭별 글을 나누어서 색 강조도 하고 이미지도 넣고 각종 편집기 기능을 사용하여 가시성 있는 글을 만들 수 있다.

Gatsby 테마? 워드프레스 테마? 어떤 것으로 사이트가 나오나?

Gatsby 사이트와 글은 테마를 통해 표현된다. 그리고, 워드프레스도 테마 기능이 있어서 사이트를 꾸며준다. 그러면… Gatsby와 워드프레스의 테마는 어떻게 되는건가? 정리하면, 당연히 Gatsby 로 이루어진 테마를 사용해야한다. 두 프레임워크의 테마의 역할이 궁금하다면 smashingmagazine 사이트에서 설명하는 글을 참고하면 좋다.

사이트의 테마가 Gatsby 를 꾸미는 일에 종속되어 있으니, 이제 본격적으로 꾸미는 작업이 필요하다.

사이트를 꾸미기 위해서 어떤 작업들을 해야할까?

필자는 그동안의 경험을 기반으로 최소한의 UI 구성과 기능들을 정리하고 하나씩 확인하는 작업을 하였다.

블로그 인덱스 페이지, 포스트, 그리고 카테고리 페이지를 화면으로 구성하는 것이 최소한의 여건을 갖추는 일이라고 판단하여 해당 작업들을 진행했다.

이 내용은 다음 글들을 통해 소개하겠다.