[Zendesk 고도화] 리퀴드 마크업 활용하기 #4
#4 리퀴드 마크업(Liquid markup)의 구성 요소
지난 시간에는 젠데스크에서 리퀴드 마크업을 만들고 테스트할 수 있는 환경을 구성해 보았습니다.
이번 시간에는 리퀴드 마크업을 구성하는 요소들에 대해 이야기해보려고 합니다.
리퀴드 마크업은 큰 틀에서 3가지 구성 요소를 가지고 있는데요.
바로 객체 / 태그 / 필터입니다.
각각의 항목이 무엇을 의미하는지 함께 이야기 나눠 보실까요?
1. 객체
프로그래밍 언어를 배우면서 객체는 이해하기 참 어려운 존재입니다. 설사 나 자신이 이해를 했다고 하더라도 다른 사람이 완벽히 이해할 수 있도록 설명하기는 불가능에 가깝다고 생각하고 있습니다. 그래서 객체를 장황하게 설명하지는 않겠습니다. 우리의 수준에서 객체는 젠데스크의 자리 표시자에 해당한다고 이해해 두시면 좋을 것 같습니다.
조금 더 정확하게는 "자리표시자에 담긴 정보" 정도가 되겠네요.
마크업 언어는 문자를 어떻게 처리할 것인지 명령을 주기 위해 만들어진 개발 언어라고 말씀드렸던 것 기억하시나요? 우리가 원하는 것은 자리 표시자에 담긴 정보를 그대로 가져오는 것이 아니라 변환해서 가져와야 하기 때문에 리퀴드 마크업에서는 이것이 단순히 표시할 문자가 아니라 객체이다!라고 명시를 해주어야 하는데요.
리퀴드 마크업에서 객체는 중괄호 두 개 사이에 표시됩니다.
어?? 중괄호 두 개..... 뭔가 익숙한 느낌인데요. 데자뷔 같은 느낌도 드는군요.
자리표시자를 사용할 때 상담사 이름을 어떻게 가져왔었나요?
기억이 잘 나지 않으셔도 괜찮습니다. 매크로 시간에 배운 자리표시자 설정 화면을 가져왔습니다.
아련하게 기억이 떠올랐을까요?
{{ticket.assignee.name}}
네 맞습니다. 리퀴드 마크업의 객체는 자리 표시자와 형태가 동일합니다.
우리가 리퀴드 마크업으로 해내야 할 일들은 대부분 객체(="자리표시자에 담긴 정보")를 가져다가 우리가 원하는 형태로 바꾸는 일이니까요.
객체는 리퀴드 마크업을 사용하기 위한 원재료 정도로 이해해 두시면 좋을 것 같습니다.
2. 태그
AI를 논하는 지금 이 시대에도 사실 컴퓨터가 할 수 있는 일은 너무 단순합니다. 0과 1밖에 인식하지 못하는 컴퓨터의 태생적 한계를 뛰어넘을 수는 없거든요. 그래서 프로그래밍 언어도 대부분 할 수 있는 일이 2가지라고 할 수 있는데요.
바로 분기와 반복입니다.
분기는 예/ 아니오 질문에 답변하는 것입니다.
엑셀을 사용해 보셨다면 IF 함수를 자주 사용하실 텐데요. IF 함수가 대표적인 분기의 예입니다. 예/ 아니오로 대답할 수 있는 질문을 만들고, 예일 때의 값 / 아니 오일 때의 값을 지정하여 각각의 값을 산출하는 것이 분기입니다.
예를 들어 젠데스크 체크 박스 필드에 V 표시가 되어 있다면 "고객이 연락 원함", V표시가 되어 있지 않다면 "고객이 연락 원하지 않음"으로 표시해 주는 작업이 필요하다고 생각해 볼까요? 이때 컴퓨터가 이해할 수 있도록 명령을 주는 작업이 태그입니다.
반복은 동일한 작업을 여러 번 수행하는 것입니다.
예를 들어 [ 1, 2, 3, 4 ]의 숫자열에서 3은 몇 번째에 포함되어 있는가?라는 질문을 하면 사람은 한눈에 보고 3번째라고 이야기하겠지만 컴퓨터는 그렇게 할 수 없습니다. 그래서 컴퓨터는 숫자열의 첫 번째 숫자인 1과 3이 같은지 비교하고, 틀리면 두 번째 숫자인 2와 비교하고, 틀리면 세 번째 숫자인 3과 3이 같은지 비교하여 3이라는 대답을 내놓습니다. 이렇게 하나씩 비교하거나, 숫자를 하나씩 더하고 빼는 작업을 여러 번 수행하는 것을 반복이라고 합니다.
리퀴드 마크업에서도 객체(=자리표시자)의 내용을 예/아니오로 판단하여 표시되는 글자를 바꾸어 주어야 한다거나, 객체(=자리표시자)에 포함된 값이 여러 개인 경우 그중에 적힌 한 것을 한 두 개만 표시해야 하는 경우들이 발생할 수 있습니다. 이때 컴퓨터에게 이러한 명령을 제시하는 것이 태그입니다.
그럼 태그는 어떻게 표시할 수 있을까요?
태그는 중괄호 { 와 % 기호로 표시됩니다.
예를 들어 볼게요.
{% if {{ticket.assignee.name}} == "장제노" %}
매니저 장제노입니다.
{% endif %}
이렇게 구문을 사용하였다면, 티켓 담당자가 "장제노"와 같을 경우에는
매니저 장제노입니다.라는 메시지를 표시하라는 리퀴드 구문입니다.
아직 저 구문 전체를 이해하시기엔 어려울 수 있기 때문에 두 가지만 기억해 주시면 될 것 같습니다.
1. 태그는 {% 와 %} 사이에 명령할 내용을 넣어서 표시한다.
(예시 : {% if {{ticket.assignee.name}} == "장제노" %} --> 만약 티켓 담당자가 장제노와 같다면)
2. {% 와 %}에 포함된 내용은 내부메모나 공개답장에 표시되지 않는다.
3. 필터
필터는 엑셀에서 함수와 같은 역할을 하는 항목입니다.
예를 들어 객체(=자리표시자)는 소문자로 저장이 되어 있는데, 화면에 표시될 때는 대문자로 바꾸어 출력하고 싶을 수 있습니다.
이 경우 엑셀에서는 =UPPER("jangzeno")와 같이 입력하게 되면 화면에는 JANGZENO로 표시된다는 것을 모두 아실 텐데요.
리퀴드 마크업으로 동일한 효과를 내려면 다음과 같이 입력합니다.
{{"jangzeno" | upcase }}
아직 저 구문 전체를 이해하시기엔 어려울 수 있기 때문에 한 가지만 기억해 주시면 될 것 같습니다.
1. 필터를 표현하기 위해서는 | 기호를 사용한다.
| 기호는 쉬프트(SHIFT) 키와 엔터 위에 있는 ￦ 키를 동시에 눌러서 입력합니다.
지금까지 리퀴드 마크업을 구성하는 3가지 요소에 대해 살펴보았는데요.
아직 우리는 리퀴드 마크업 구문을 작성해보지 않았기 때문에 오늘 이야기한 내용이 어렵게 느껴지실 수 있습니다. 지금 시점에서 구성 요소를 굳이 이해하거나 외우려고 하실 필요는 없습니다. 다음 시간부터는 리퀴드 마크업 구문을 작성해 볼 텐데요. 직접 구문을 작성하다 보면 구성 요소 들는 자연스럽게 머릿속에 녹아들게 될 것입니다.
감사합니다.
