워드프레스(WordPress)는 전세계 웹의 30%를 점유하는 자타공인 넘버원 CMS 솔루션입니다. LAMP 스택 기반이라 호스팅도 용이하고 또 설치와 사용법이 쉬워 세계적으로 많은 사이트가 이 워드프레스 기반으로 제작, 운영되는 게 사실입니다.
하지만 이런 좋은 솔루션도 늘 좋은 것만은 아닙니다. 이런 저런 플러그인들을 설치하다 보면 속도도 느려질 수 있고 또 소스코드가 공개되어 있고 업데이트가 잦은 솔루션이다 보니 이래저래 보안 문제가 발생하곤 합니다.
정적 사이트 생성기
그래서인지 최근엔 워드프레스보다 “좀 더 가벼운” 솔루션들이 인기를 얻고 있기도 합니다. 소위 “정적 웹사이트(Static Website) 생성”이라고 불리는 방식인데요. 서버측에서 데이터를 모두 처리하여 아웃풋으로 HTML 페이지만 내보내는 방식입니다.
시중에는 이런 정적 웹사이트 생성 솔루션들이 이미 많이 나와 있습니다. 예를 들면, 지킬(Jekyll)이나 휴고(Hugo), 게스비(Gatsby) 같은 것들이죠.
헤드리스 워드프레스(Headless WP)
한편, 워드프레스 역시 진화를 거듭하고 있습니다. 내부적으로 구텐베르크(Gutenberg)라는 리액트(React) 기반의 블록 방식 편집기를 적용하여 콘텐츠 제작의 사용성을 높이고 있고 또 REST API를 제공해 모든 데이터를 JSON 형태로 외부에 내보낼 수 있게 하고 있습니다.
특히 REST API는 워드프레스에 여러 새로운 가능성을 만들어 주고 있는데요. 대표적인 것이 헤드리스 CMS(Headless CMS) 입니다. 즉 워드프레스를 CMS로 사용은 하되, 프론트 UI 단은 없이 백엔드에서 그야말로 ‘콘텐츠를 관리’하는 용도로만 사용하는 방식입니다.
https://blog.usefulparadigm.com/headless-cms와-wordpress-c635a9eb2517
앞서 소개한 “정적 웹사이트 생성기”와 이 “헤드리스 CMS” 방식을 결합하면, 워드프레스는 그야말로 CMS로만 사용하고 프론트 단은 정적 웹사이트 생성기를 이용하여 정적으로 만들어 쓰는 “헤드리스 워드프레스(Headless WP)”가 됩니다.
리액트가 좋아요!
여기에 리액트(React)를 빼 놓을 순 없겠죠!
요즘 웹은 자바스크립트 세상이 되었고 리액트는 그중에도 가장 인기있는 자바스크립트 UI 솔루션 중 하나죠. 그래서 헤드리스를 만들든, 정적인 웹사이트를 만들든 자바스크립트와 리액트 기반이 되면 좋을 것 같습니다.
일전에 Next.js로 리액트 기반의 헤드리스 CMS를 한번 만들어 본 적이 있는데요.
https://blog.usefulparadigm.com/next-js와-headless-cms-973a9a7217b7
오늘은 비슷한 솔루션이긴 하지만, 아예 워드프레스에 초점을 맞춰 만들어진 Frontity라는 솔루션을 소개합니다.
소개하길, “The React framework for WordPress”라고 하고 있네요.
이 프레임워크의 기본 작동 원리는 서버측 렌더링(SSR, Server Side Rendering) 입니다. 즉, 서버측에서 워드프레스 REST API를 호출하여 데이터를 불러와 (Node 서버 환경에서) 사이트를 렌더링합니다.
실제로 브라우저로는 렌더링된 HTML이 전달되기 때문에 빠른 사이트 속도와 최초 로딩 속도를 냅니다. 또한 검색최적화(SEO) 처리도 상당 부분 고려되어 있습니다.
그럼 한번 실행해 볼까요?
Frontity 시작하기
Frontity는 CLI 방식으로 설치합니다. 명령행에서 다음 명령을 주면 기본적인 사이트 구조가 자동으로 생성되죠.
npx frontity create my-app
설치된 사이트의 디렉터리 구조는 다음과 같습니다.
my-app/
├── README.md
├── build
├── favicon.ico
├── frontity.settings.js
├── node_modules
├── package-lock.json
├── package.json
└── packages
이 상태에서 아래와 같은 명령을 내리면 서비스(서버)를 개발 모드로 실행시킬 수 있습니다.
npx frontity dev
이제 브라우저에서 http://localhost:3000/에 접속하면 아래와 같이 워드프레스 사이트로부터 데이터를 가져와 정적으로 생성된 사이트를 볼 수 있습니다.
간단하죠?
워드프레스 사이트 소스 수정하기
frontity.settings.js 파일이 Frontity에서 설정 파일입니다. 이 파일을 열어 참조할 워드프레스 사이트 소스를 수정할 수 있습니다.
아래 “api” 값에 참조할 사이트의 REST API 엔드 포인트를 지정하면 됩니다.
{
"name": "@frontity/wp-source",
"state": {
"source": {
"api": "https://test.frontity.org/wp-json"
}
}
},
그 밖에 사이트의 제목이나 메뉴 구조도 마찬가지로 frontity.settings.js 파일에서 수정할 수 있습니다.
Frontity 테마
현재 2종의 기본 테마를 제공하며,
GitHub 등에는 이미 여러 개발자들이 만든 3rd-party 테마들이 등록되어 있습니다. 물론 마음에 드는 테마가 없으면 직접 만들어 써도 되겠죠.
리액트 기반이니까요!
Frontiy 사이트 배포하기
배포는 다른 웹사이트 생성기들과 다르지 않습니다. 프러덕션 환경에 맞춰 빌드하여 배포하면 됩니다.
명령행에서 다음 명령으로 내리면 사이트를 빌드(build) 합니다.
npx frontity build
빌드된 사이트는 다음 명령으로 서비스하면 됩니다.
npx frontity serve
노드(NodeJS) 기반의 서버 환경이면 어디든 빌드하여 배포할 수 있습니다. 배포와 관련한 자세한 내용은 공식문서를 참조하세요!
완성된 Frontity 사이트의 모습은 아래 데모에서 확인할 수 있습니다.
- DEMO 사이트: Test Frontity Blog
개인적인 생각
요즘들어 정적인 웹사이트로 사이트를 구성하려는 움직임이 많아지고 있습니다. 아마도 워드프레스가 너무 “무겁다”는 생각들이 이런 움직임을 부축이고 있는 것 같습니다.
그래서인지 워드프레스 시장에서도 정적 페이지 생성 도구나 솔루션들이 많이 출시되는 분위기입니다. Strattic, Shifter 같은 상용 서비스들도 있고 WP2Static 같은 오픈소스 솔루션도 나와 있습니다.
하지만 저는 왜 굳이 워드프레스와 좋은 테마들을 두고 이렇게 정적인 사이트를 따로 만들어 써야 하는지 그 이유를 아직 잘 모르겠습니다. 속도가 문제라면 캐시(cache)를 달면 되고 디자인이 문제라면 테마를 수정하면 될 문제일텐데요.
하지만 이해는 갑니다. 세상이 온통 자바스크립트(리액트) 중심으로 흐르다 보면 모든 걸 자바스크립트로 해결하려는 생각이 커질 수 있습니다. “망치를 들면 모든 게 못으로 보인다”는 말도 있듯, 내가 잘 다루는 기술로 모든 걸 바꾸고 싶은 마음도 있겠죠.
물론 헤드리스 CMS가 꼭 필요한 경우도 있을 겁니다. 그럴 땐 써야겠죠. 하지만 굳이 먼저 헤드리스 방식부터 고려하는 결정은 조금 성급한 결정 같아 보이네요. 🙂
