[Zendesk 고도화] 리퀴드 마크업 활용하기 #1
#1 마크업 언어(Mark-Up language)가 무엇인가요?
이번 시간부터는 리퀴드 마크업 언어(Liquid markup language)를 활용하는 방법에 대해 이야기해보려고 하는데요.
이전 시간에 말씀드린 것처럼 마크업 언어에는 여러 가지 종류가 있고, 리퀴드 마크업은 그중 한 가지 언어 해당합니다. 다른 유명한 마크업 언어들은 HTML, SAMI, XML 등이 있습니다. 가장 유명한 마크업 언어는 HTML이며, 리퀴드 마크업은 주로 쇼핑몰과 관련된 개발자들이 주로 사용하는 것으로 알고 있습니다.
먼저 넓은 의미에서 마크업 언어가 무엇인지부터 이야기하는 것이 필요할 것 같습니다.
우리는 CX 담당자가 알고 있으면 좋은 아주 얇고 좁은 개발 지식을 지향하기 때문에 이론적인 서술을 최대한 배제하고 알기 쉬운 비유와 설명으로 구성해보려고 합니다.
마크업 언어의 정의를 이야기하는 것은 매우 쉽습니다.
위키 백과에서 마크업 언어를 검색해 보았는데요.
내용을 함께 보실까요?
마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다.
일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다. 다만 MXML이나 XAML처럼 특정 프로그래밍 언어와 강하게 연관되어 기능하거나 제한적으로 프로그래밍 언어의 기능을 갖춘 것도 일부 있는데, 이런 경우엔 구별이 명확하지 않다.
음..... 와닿지 않습니다.
좀 더 쉬운 이해를 돕기 위해 옛날이야기를 조금 해볼게요.
1970년대로 돌아가보겠습니다.
여러분 앞에 오른쪽과 같은 컴퓨터가 한 대 놓여 있습니다.
우리가 지금 사용하는 모니터를 LCD 모니터라고 하고, 70년대 사용했던 이런 모니터를 모노크롬 모니터라고 합니다.
LCD 모니터는 빨주노초파남보 등등의 여러 가지 색을 화면에 표시할 수 있지만, 모노크롬 모니터는 지금 보시는 것처럼 오로지 검은 화면에 녹색 글씨로 표시가 됩니다.
오늘 우리가 해야 할 일은 오른쪽에 보이는 이 컴퓨터로 오늘 워드 프로세서를 사용하여 A4용지에 인쇄물을 출력해야 합니다.
아래와 같은 문서를 하나 만든다고 가정해 볼게요.
https://channel.io/ko/blog/cs-cx 중 일부 발췌워드 프로세서를 열고 문서를 입력해 볼까요?
키보드로 타자를 쳐서 글자를 입력하는 것은 현재와 크게 다르지 않겠지만,
조금 난감한 점이 하나 등장하게게 되는데요.
위 문서에서 보면 제목을 진하게 처리하고, 중요 문구에는 파란색 밑줄이 그어져 있습니다.
현재의 컴퓨터로는 이 작업이 너무 간단합니다.
내가 진하게 하고 싶은 부분을 드래그해서 Ctrl+b 버튼을 누르면 화면에 보이는 글자가 진하게 표시될 것이고, ctrl과 +키를 눌러서 글자 크기를 조정하면 화면에 그대로 보이게 될 것입니다.
그러나 70년대의 컴퓨터로는 글씨체나 폰트 크기도 동일하고 진하게 글자 색을 바꾸는 작업을 해도 모니터 화면에 그대로 보여 줄 수 없다는 것이었죠.
그래서 사람들은 문서 작업을 할 때 이런 내용들을 모두 알아볼 수 있도록 약속을 정하게 됩니다.
예를 들어 위 문서를 마크업 언어의 약속으로 표현한다면 이렇게 될 것 같습니다.
<진하게 시작> 1단계. 하루 고객 문의가 30건 이하라면? <진하게 끝>
<밑줄 시작><밑줄 색상: 파란색 시작>"제품의 개선점을 발견하기 위해 대표도, 개발자도, 마케터도 고객 문의를 공유하세요." <밑줄 끝><밑줄 색상:파란색 끝>
<문단 시작>1단계에서 모두가 고객 문의를 모니터링하고 프로덕트의 장점과 단점을 찾아가는 것이 중요합니다. 이 때는 CS 전담팀을 두기보다는 누구나 CS 메인 콜이 될 수 있어요. 창업한 지 몇 년이 지나도 대표가 직접 CS를 잡고 계시는 경우도 있어요. 개발 중심 회사는 개발자들이 직접 고객 응대를 하며 제품의 로드맵을 잡아가고요. 마케터가 고객과 대화 중 건진 카피로 효율이 떡상하는 마케팅 메시지를 건지기도 합니다. <문단 끝>
모노크롬 모니터에서는 글자를 키우거나 색상을 보여주기 어렵기 때문에 이렇게 약속을 해서 문서를 서로 공유하고, 실제 출력을 할 때는 < > 안의 내용에 맞춰 글자 크기나 형태를 변환해서 출력해 주는 것이죠.
그러면 모노크롬 모니터에서도 충분히 문서를 편집/ 저장하고, 다른 사람이나 다른 컴퓨터와 교환해도 동일한 형태로 출력하는 것이 가능해질 것입니다. 다른 방식에 비해 수정도 훨씬 간결해질 것이고요.
이해가 조금 되셨을까요?
마크업 언어는 이렇게 탄생하게 됩니다.
여러분이 잘 알고 계시는 HTML도 이런 의도를 가지고 탄생하게 되었습니다.
CERN(유럽 입자 물리학 연구소)이라는 곳에서 내부 문서와 논문을 서로 공유하려고 하다 보니 논문의 특성상 인용 표시를 하는 것이 매주 중요했는데요. 하나의 논문에서 다른 논문을 검색하기 위해 들이는 시간을 줄이기 위해서 글자를 클릭하면 인용한 논문으로 이동하는 약속을 가진 마크업 언어를 만들게 되었습니다.
우리가 알고 있는 하이퍼 텍스트 링크 (<- 글자를 클릭하면 다른 링크로 이동하는 기능)는 원래 글자를 클릭하면 인용 논문으로 이동하기 위한 마크업 언어 약속의 하나였고, 이것이 점점 발전해서 인터넷의 표준이 된 것입니다.
리퀴드 마크업은 그럼 어떻게 탄생하게 되었을까요?
쇼핑몰을 제작하는 개발자의 관점에서 빈번하게 발생하는 일들을 생각해 봅시다.
1. 고객의 화면에 보여야 하는 개인화 콘텐츠(구매목록, 장바구니 내역 등)를 손쉽게 표현하는 방법이 필요하였을 것입니다.
2. 결제/구매/취소/환불에 대한 이메일 발송이 많을 수밖에 없고, 정해진 템플릿에 각각의 고객의 이름이나 구매 액수 등만 수정을 해서 답변을 발송해야 하는 경우가 많았을 것입니다.
3. 국가/지역 문화를 고려하여 고객의 이름을 가공하거나, 고객이 거주하는 국가 화폐에 맞게 구매 금액을 변환하여 보여주어야 한다거나 하는 일들이 많았을 것이고, 불러온 고객 정보를 간단하게 변환해야 하는 경우가 많았을 것입니다.
이러한 작업들을 손쉽게 도와줄 수 있는 마크업 언어가 있다면 쇼핑몰 제작이 훨씬 수월해질 것입니다.
위와 같은 발상으로 shopify라는 회사에서 쇼핑몰의 콘텐츠 관리를 쉽게 하기 위한 목적으로 만들어진 것이 리퀴드 마크업입니다.
https://selosele.github.io/liquid/shopify라는 플랫폼회사는 온라인 쇼핑몰의 생성과 관리를 도와주는 기업입니다.
네이버에서 전문 기술 없이도 클릭 몇 번으로 블로그를 만들 수 있듯이 shopify를 사용하면 전문 기술을 적게 사용하면서도 누구나 온라인 쇼핑몰을 구축할 수 있는 것이죠.
shopify를 통해 쇼핑몰의 토대를 구축하고, 각 웹페이지에서 고객 정보를 불러오거나 가공할 때 리퀴드 언어를 사용하여 개발자의 편의를 높이는 것이 첫 목적이었습니다.
HTML에 단순히 문서/논문을 공유하는 역할에서 지금의 웹으로 발전했듯이, 리퀴드 언어도 단순히 쇼핑몰 웹페이지나 대량 이메일 발송 개발을 서포트 하는 역할에 머물지 않고, 고객과 기업을 연결하는 솔루션 내에서 그 역할을 확장하고 있습니다.
어쩌면 젠데스크는 그저 리퀴드 마크업을 사용하는 기업 중 하나에 불과할지도 모릅니다.
엑셀 함수를 배우면, 구글 스프레드시트에서도 넘버스에서도 쉽게 적응이 가능한 것처럼 리퀴드 마크업을 알아두시면 다른 CX 솔루션을 접하실 때에도 큰 도움이 되시리라 생각합니다.
지금까지 마크업 언어의 배경에 대해 살짝 이야기해보았습니다.
마크업 언어가 무엇이고 왜 필요한지 이해가 되셨을까요?
아직 조금 뜬구름처럼 보일 수도 있습니다. 아직 리퀴드 마크업에 대한 이야기를 시작조차 하지 않았으니까요.
그러니까 너무 걱정하지 않으셔도 괜찮습니다.
다음 시간부터는 젠데스크에서 리퀴드 마크업을 활용하기 위해 리퀴드 마크업을 이루고 있는 태그에 대해 이야기해보겠습니다.
감사합니다.
