[Zendesk 고도화] 리퀴드 마크업 활용하기 #6
#6 리퀴드 마크업(Liquid markup)의 필터 Vol. 2
지난 시간에는 "upcase" 필터를 통해 상담사들이 소문자로 입력한 항목들을 대문자로 바꾸어 표시하는 것이 가능하다는 것을 이야기했습니다.
이번에는 조금 더 다양한 문자 필터들을 다뤄보면서 인수의 개념을 함께 이야기해보려고 합니다.
필터에 따라 인수가 필요한 경우가 있는데요.
문자열에 관련된 필터들을 다루어 보면서 인수의 개념과 인수가 왜 필요한지 간단하게 설명하려고 합니다.
지난 시간에 이어 고객에게 메일을 보낼 때 고객의 이름을 수정해서 발송해야 하는 이야기를 계속 이어가 보겠습니다.
그럼 시작해 볼까요?
지난 시간에 가정했던 상황 기억나시나요?
상담사들이 고객과 통화할 때 고객명을 적어야 하는데, 빠르게 상담을 진행하다 보니 고객 이름을 소문자로 적을 때도 있고, 대문자로 적을 때도 있습니다.
하지만 고객에게 이메일을 보낼 때는 반드시 고객 이름을 대문자로 발송해야 합니다.
티켓 필드 영역에 상담사가 입력한 이름을 대문자로 무조건 바꾸어서 이메일을 보내야 한다는 지침이 내려왔고, 우리는 리퀴드 마크업의 "upcase" 필터를 통해 슬기롭게 이슈를 해결했습니다.
그런데, 오늘 새로운 지침이 내려왔습니다.
상담사들이 고객과 통화할 때 고객명을 적어야 하는데, 빠르게 상담을 진행하다 보니 고객 이름을 소문자로 적을 때도 있고, 대문자로 적을 때도 있습니다.
하지만 고객에게 이메일을 보낼 때는 반드시 고객 이름을 첫 글자만 대문자로, 나머지는 소문자로 표시하여 발송해야 합니다.
하지만 고객에게 이메일을 보낼 때는 반드시 고객 이름을 대문자로 발송해야 합니다.
하지만 고객에게 이메일을 보낼 때는 반드시 고객 이름을 첫 글자만 대문자로, 나머지는 소문자로 표시하여 발송해야 합니다.
이럴 때는 어떻게 하면 좋을까요?
이럴 때는 "capitalize" 필터를 사용하시면 됩니다.
사용 방법은 지난 시간과 동일합니다.
{{"jangzeno" | capitalize }}
"capitalize" 필터의 장점은 명확합니다.
상담사가 필드 값을 대문자로 적어도, 소문자로 적어도 정확하게 첫 글자만 대문자로 만들고 나머지는 소문자료 표시해 준다는 것입니다.
{{"jang_zeno" | capitalize }} ---> 결과 값 : Jang_zeno
{"JANG_ZENO | capitalize }} ---> 결과 값 : Jang_zeno
{{"Jang_Zeno" | capitalize }} ---> 결과 값 : Jang_zeno
그럼 이번에는 반대의 경우를 생각해 볼까요?
모든 문자를 소문자로 표시해야 하는 경우에는 어떻게 해야 할까요?
잠시 모든 문자를 대문자로 표시하는 경우를 생각해 봅시다.
{{"jangzeno" | upcase }}
UP의 반대인 Down으로 바꿔 보면 어떨까요?
{{"jangzeno" | downcase }}
넵 맞습니다.
"downcase" 필터는 모든 문자열을 소문자로 만들어 줍니다.
상담사들이 바쁘게 업무를 하면서 입력을 하다 보면 앞 뒤에 공백이 생기는 경우가 있습니다.
고객들에게 입력을 받아야 하는 젠데스크의 문의 등록 폼 형태라면 더 말할 것도 없겠죠.
극단적으로 고객 이름 필드에 아래와 같이 입력을 했다고 가정해 봅시다.
1. jang_zeno--> 정상입력 ( 앞 뒤 공백이 없음)
2. jang_zeno--> 정상입력 ( 앞에 공백이 있음)
3. jang_zeno --> 정상입력 ( 뒤에 공백이 있음)
4. jang_zeno --> 정상입력 ( 앞 뒤 공백이 있음)
상담사들이 제각기 입력한 값을 리퀴드로 단순히 가져온다면 다음과 같이 메일이 시작하게 될 것입니다.
1. 안녕하세요. 제품을 사랑해 주시는 jang_zeno 고객님.
2. 안녕하세요. 제품을 사랑해 주시는 jang_zeno 고객님.
3. 안녕하세요. 제품을 사랑해 주시는 jang_zeno 고객님.
4. 안녕하세요. 제품을 사랑해 주시는 jang_zeno 고객님.
이런 이슈를 해결하려면 어떻게 해야 할까요?
즉 상담사가 입력한 내용의 앞 뒤 공백을 몇 개가 되었든 모두 제거하고 글자면 입력하는 것입니다.
이럴 때 사용하는 필터는 "strip" 필터입니다.
1. {{"jang_zeno" | strip }} --> 결과 값 : jang_zeno
2. {{" jang_zeno" | strip }} --> 결과 값 : jang_zeno
3. {{"jang_zeno " | strip }} --> 결과 값 : jang_zeno
4. {{" jang_zeno " | strip }} --> 결과 값 : jang_zeno
"strip" 필터"는 문자열의 앞 뒤에 발생하는 공백, 탭, 줄 바꿈을 모두 제거합니다.
단, 단어 사이의 띄어쓰기는 제어되지 않는다는 점에 유의해주세요.
상담사들이 고객님의 이름과 성을 구분하기 위해 언더바(_)를 삽입하고 있는데요.
이번 지침은 고객님의 이름에서 언더바를 제거해 달라고 합니다.
하.... 무슨 고객 이름에 미친 회사 같지만 그래도 어떻게 하나요.
특정 문자를 제거하는 필터는 "remove"입니다.
그럼 이렇게 사용하면 될까요?
{{"jang_zeno" | remove }}
그런데 이게 컴퓨터 입장에서는 조금 이상합니다.
지우긴 지워야 하는데 뭘 지워야 하는지를 알려주지 않았습니다.
저 리퀴드 마크업 어딘가에 언더바(_)를 지우라고 알려줘야 컴퓨터도 알아들을 것 같습니다.
그래서 "remove" 필터는 기존에 배운 필터들과 사용법이 조금 다릅니다.
기존의 필터들은 모든 값을 대문자로, 혹은 소문자와 같이 모든 문자열에 적용되었지만 "remove" 필터는 특정한 문자를 제거하는 필터이므로 어떤 문자를 제거하고 싶은지 컴퓨터에게 정확하게 알려줘야 하기 때문입니다.
이렇게 필터에서 특정한 값을 지정하여 명시해 주는 것을 "인수"라고 합니다.
"remove" 필터를 사용할 때는 아래와 같은 형태로 사용해야 합니다.
{{"jang_zeno" | remove : "_" }}
{{ 바꾸려는 문자 | 필터명 : "인수"}}
필터 뒤에 콜론(:)을 삽입하고 내가 제거하고 싶은 인수를 넣어주면 됩니다.
{{"jang_zeno" | remove : "_" }} --> 결과 값 : jangzeno
{{"jang_zeno" | remove : "j" }} --> 결과 값 : angzeno
{{"jang_zeno" | remove : "en" }} --> 결과 값 : jang_zo
언더바를 제공하고 나니 또 새로운 지침이 내려왔습니다.
이번 지침은 고객님의 이름에서 언더바(_)를 공백( )으로 달라고 합니다.
하.... 회사인지 작명소인지 모르겠습니다.
그래도 어쩌나요. 나의 리퀴드 마크업 실력 향상을 위해 도전해 봅시다.
이번에도 필터를 먼저 말씀드릴게요.
"replace" 필터를 사용하면 특정 문자를 다른 문자로 변경할 수 있습니다.
그런데 이번에도 조금 다른 부분들이 느껴지시나요?
1. upcase /downcase -> 모든 문자를 대문자 / 소문자로 바꾼다 --> 인수 필요 없음
2. remove --> 특정 문자를 제거한다. -> 특정 문자(인수)
3. replace --> 특정 문자 1을 특정문자 2로 교체한다. --> 특정문자 1(인수) , 특정문자 2(인수)
"remove" 필터가 무엇을 제거한다. 에 해당한다면,
"replace" 필터는 무엇을 무엇으로 바꾼다.라고 생각 할 수 있는데요.
즉, remove 필터와 달리 인수가 두 개가 필요한 상황입니다.
이럴 때는 어떻게 구문을 작성하면 좋을까요?
{{"jang_zeno" | replace : "_" , " " }}
{{ 바꾸려는 문자 | 필터명 : "인수 1" , "인수 2" }}
이와 같이 하나의 필터에 인수가 여러 개 필요한 경우에는 인수와 인수 사이를 쉼표로 구분해 주면 됩니다.
{{"jang_zeno" | replace : "_" , " " }} --> 결과 값 : jang zeno
{{"jang_zeno" | replace : "_" , "& " }} --> 결과 값 : jang&zeno
{{"jang_zeno" | replace : "jang" , "kim " }} --> 결과 값 : kim zeno
이번 시간에는 문자열 필터를 중심으로 필터에 인수가 필요한 경우에 대해 이야기해 보았습니다.
어떠셨나요?
아직 조금 어렵게 느껴지실 수 있는데요.
젠데스크 매크로에서 직접 구문을 만들면서 연습하시면 훨씬 수월하게 이해하실 수 있습니다.
다음 시간에는 필터의 중첩에 대해 이야기해 보겠습니다.
감사합니다.
