헤드리스 커머스(Headless Commerce) ,헤드리스 CMS

 

새로운 커머스 트렌드, 헤드리스 커머스

아이보스에서 Headless Commerce라는 개념을 들고와서 소개하는 글을 보았는데, 사람들이 생각보다 관심을 많이 갖고 있는 것 같습니다. 표현이 거창해서 그렇지 백엔드와 프론트엔드를 왜 분리하는지에 대해 생각해보면 쉽습니다.

 

예전에는 그냥 서버에서 HTML 문서를 만들어서 뿌리는 방식으로 서비스해도 무리가 없었지만, 이제는 핸드폰으로도 봐야되고, 스마트 워치, 인공지능 스피커 등 다양한 디바이스를 통해서 서버의 자원을 끌어다 써야합니다.

메세지를 받거나 날씨를 띄운다던지 하는 일들 말이죠. 

---

그런데 이런걸 예전처럼 아예 HTML 문서로 만들어 서버에서 뿌리면 디바이스마다 모두 HTML을 해석할 수 있는 웹브라우저를 내장시키거나 따로 만들어서 보여줘야합니다. 이 웹브라우저라는 놈이 PC나 스마트폰에서 사용할때는 잘 모르지만, 의외로 메모리 소모도 크고 이것저것 신경쓰이는 부분이 많단 말이죠.

 

하다못해 인공지능 스피커는 음성으로 안내해주는데 웹브라우저를 설치한다는건 의미도 없고 말도 안되는 부분이고요. 

---

그래서 Headless 라는 개념으로 운영할때는 '머리가 없다'라는 개념이, 그냥 얼굴 - 디자인 요소가 없다고 이해하는게 쉬울것 같습니다.

 

서버에서는 그냥 딱 데이터만 날려줍니다.

이미지만해도 이미지 자체를 보내주는게 아니라 "아마존 서버에 저장해놨으니 주소 알려줄께 주소를 연결해서 쓰렴" 이런식으로 주소 데이터만 보내주는 식입니다.

 

이런식으로 보내면 네트워크 상에서 몇줄의 텍스트로 해결되니까 통신, 네트워크 자원의 소모가 줄어듭니다.

속도도 올라가고 비용도 절감이 되는 셈이죠. 이미지, 비디오, 데이터베이스 등등 분산을 시켜놓다보니 만들땐 복잡하고 어렵지만, 데이터가 최소한으로 오가다보니 속도 면에서도 개선되고 그로인해 사용자 경험이 개선도 노려볼 수 있습니다. 

---

그리고 기성 솔루션의 한계는 어디까지나 디자인 조차 서버에서 만들어서 던져주다보니 한정된 범위 내에서 디자인을 만들어야한다는 한계가 있습니다. HTML/CSS/JS만으로도 해소가 안되는 부분들이 있습니다.

 

처음부터 만들어서 뿌려주다보니 우회해서 쓴다는게 어렵기도 하지만, 성능 저하로도 이어져 사용자에게 긍정적인 경험을 안겨주기 어렵습니다. 

 

요즘처럼 사용자경험(UX)가 강조되는 시대에는 그래서 더 이런 요구가 많아지는 것 같습니다. 그래서 Headless라는건 결국 디자인 - HTML/CSS/JS 없이 데이터만 던져주는 것을 의미합니다. 

[
    {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
        "userId": 1,
        "id": 2,
        "title": "qui est esse",
        "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
    },
    {
        "userId": 1,
        "id": 3,
        "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
        "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
    }
]

// 출처: https://jsonplaceholder.typicode.com/posts

서버에 요청하면 HTML 문서가 완성되서 날아오던 과거와 달리, 위와같이 데이터만 날아오는겁니다.

사용자 아이디는 몇번이고, 그 아이디로 작성한 글 중에 몇번째 글이며, 제목은 뭐고, 내용은 이렇다 간략하게 날아오는겁니다. 

---

하지만 Headless가 항상 옳은 선택은 아닙니다.

백엔드와 프론트엔드가 분리되어있다는건 결국 서버도 최소한 두대는 돌려야한다는 이야기거든요.

 

물론 세부적으로 들어가면 백엔드 서버, 프론트엔드 서버, 데이터베이스 서버, 스토리지 서버 등 필요에 따라 얼마던지 세분화해서 나눠 쓰기도 합니다.

서버간의 통신을 하기 위해서 요구되는 기술들이 단순하지도 않습니다.

당연히 인력, 시간, 비용에 대한 투자도 뒤따라야 합니다.

만드는것으로 끝나는게 아니라 관리의 수요도 발생하기 때문이죠.  

 

그래도 수요가 발생하다보니 일찌기 워드프레스와 같은 CMS들은 앞다투어 Headless CMS라는 개념으로 전환하는 움직임이 있었습니다. 제가 알기로 국내에는 API 위주로 제공하는 CMS 솔루션이 없습니다.

있는데 제가 모를 수도 있는지라 알고 계신분은 댓글로 알려주시면 감사하겠습니다.

솔루션 위주로 보자면 주로 해외 CMS중에 이런 것들이 많은데 아래와 같습니다. 

---

Headless CMS

https://strapi.io/

Strapi - Open source Node.js Headless CMS 🚀

https://www.contentful.com/

API-first content platform to build digital experiences

https://www.sanity.io/

The Platform For Structured Content – Sanity.io

---

Headless Commerce 지원 솔루션

쇼핑몰 솔루션은 따로 정리했습니다.

CMS와 달리 국내 쇼핑몰 솔루션 중에는 클레이풀처럼 API로 제공하는 서비스도 있습니다.

 

https://snipcart.com/

Add a Shopping Cart to Any Website in Minutes

https://www.shopify.co.kr/

비즈니스의 시작, 성장 및 확장 - Shopify

https://clayful.io/

유연한 커머스 솔루션

대표적으로 위와같은 서비스들이 적극적으로 API를 제공해 Headless CMS / Commerce가 가능하도록 제공하는 서비스들입니다. 그리고 어디나 빠지면 섭섭한 워드프레스도 플러그인을 통해 Headless CMS/Commerce가 가능합니다.

 

다들 아시다시피 워드프레스는 거의 만능이죠.

 

그런데 항상 워드프레스라는게 뭔가 맥가이버 칼 같은 느낌입니다.

만능도구라는게 모든 상황에 대응하다보니 급할땐 요긴하지만, 주력으로 계속 밀고가기엔 피로가 상당하잖아요? 그래서 기존의 시스템을 유지하는게 아닌이상 새로운 쇼핑몰 서비스로 헤드리스 커머스로 써야할 필요가 있는지는 고민을 해봐야하는 부분이라고 생각합니다.