jquery의 시대는 이제 끝난것인가?(w/ Google Tag Manager)

 

2021년 stackoverflow survey에서 드디어 React.js가 웹 프레임워크 1위를 차지 했다.

그동안 왕좌의 자리를 굳게 지켜온 jquery가 밀려난 첫 해이다.

 

 

Vue와 Angular 역시 여전히 jquery의 자리를 위협하고 있고 Svelte의 성장도 눈여겨 볼만 하다.

 

이 외 jquery에 대한 상황은 그닥 좋지 않다.

많은 부분을 jquery에 의존하던 bootstrap도 2019년 jquery를 완전히 걷어 내겠다고 선언했다.

 

개발자들의 인식 또한 점점 jquery는 구시대의 유물처럼 취급되고 있다.

 

 

 

그럼 이제 jquery는 쓸모없어지는 것인가 🤔

 

 

과거의 영광이 재현될 일은 없어 보인다. 🥺

 

엔터프라이즈 환경에서 웹기술을 활용한 화면을 만들때 React는 매우 효율적이고 유지보수, 타입스크립트와의 연계, 컴포넌트 기반 개발 방법론 등과 매우 잘 어울려 한동안은 왕좌를 굳게 지킬 듯 하다.

 

하지만 jquery가 쓸모없다고 필자는 생각하지 않는다. 🙅

 

 

write less, do more.

위 jquery의 캐치프레이즈처럼 적은 코드로 더 많은 것을 할 때 쓰일 수 있다. 

바로 디지털 고객경험 같은 곳에서다.

 

 

1. 디지털 고객경험 솔루션들의 대두

---

망할 코시국이 전세계를 덮치면서 디지털화는 가속화 되었다.

안그래도 성장하고 있는 분야였지만 제대로 부스터를 달아준 격이다.

 

디지털화의 가속은 디지털 고객경험들을 다양화, 다각화 시켰고 기업들은 이것을 고객들에게 잘 제공하기 위한 방안이 필요했다.

디지털 고객경험을 돕기 위한 솔루션들도 시장에 다양하게 쏟아졌다.

 

채널에서 고객의 행동을 수집하고 분석하는 솔루션, 개인 맞춤형으로 채널을 개인화 해주는 솔루션, 마케터들의 캠페인이나 광고를 도와주는 솔루션 등이 생겨났고 기업들은 이 솔루션들을 적극 도입해서 활용하는 중이다.

 

대표적인 솔루션이 Google Analytics(이하 GA)이다.

자신이 이용하는 사이트에 들어가서  Wappalyzer라는 크롬 확장프로그램을 통해 사이트에서 돌아가고 있는 솔루션들을 확인해봐라.

 

 

대부분 분석으로 GA와 유사한 툴들을 사용중일 것이다.

GA를 설치하는 행위를 태깅이라고 하는데 이를 도와줄 Google Tag Manager(이하 GTM)도 여기에 속한다.

 

GTM은 GA말고도 개인화나 A/B TEST를 위한 Google Optimize에 대한 설치도 도와주고 구글의 마케팅 솔루션들을 대부분 연결해서 사용할 수 있다.

 

솔루션들이 워낙 다양하고 다각화 되어 있어 셀 수도 없을 만큼 많지만 설치의 측면에서는 구글의 솔루션들과 크게 다르지 않은 방식을 가진다.

 

GTM은 사실 마케터들이 개발자들의 도움없이 GA 등의 솔루션을 설치할 수 있게 도와주는 솔루션이란 타이틀을 가졌지만 개발자가 쓰면 더 파워풀해 지는 것은 사실이다.

 

해당 이미지는 GTM의 맞춤 HTML 태그 화면이다.

 

여기에 원하는 코드들을 작성해서 채널에 배포할 수 있다.

그렇다. GTM은 단순히 GA 설치용도로만 쓸 수 있는 툴 그 이상이다.

 

복잡한 배포절차 없이 빠르게 기능들을 시험하고 그 결과를 측정할 수 있다.

애자일과 A/B테스트가 기본이 되어 가는 스피드전에서 매우 큰 메리트이다.

 

바로 여기에서 jquery는 빛이 난다.

 

 

 

2. GTM에서 jquery로 할 수 있는 예시들

---

화면단에 무엇인가 변경을 가하려면 필수적으로 자바스크립트를 써야한다.

 

특히나 많이 써야할 기능은 문서객체(DOM)을 컨트롤 하는 작업과 객체에 이벤트를 핸들링 하는 작업이다.

 

이 두 기능이야 말로 jquery가 가장 write less하고 do more할 수 있는 측면이다.

 

여기에서 만큼은 자바스크립트 코드가 아무리 모던화 되었고 많은 기능들이 추가되었어도  jquery의 코드양을 따라오지 못한다.

 

 

 

jquery는 신규 프로젝트에서는 배제될 수도 있지만 지금 운영 중인 많은 사이트에는 그 역사가 긴 만큼 거의 다 포함되어 있다.

 

없더라도 cdn방식으로 간단한 삽입이 가능하다.

 

 

그럼 디지털 고객경험관리 솔루션에서 할 수 있는 작업의 예시를 몇가지 살펴보자.

 

 

 

1. GA에서 특정 버튼을 눌렀을 때 이벤트 수집을 하려고 한다.

 

해당 버튼이 click되었을 시점을 알기 위해 해당 Dom 객체에 접근해야 한다.

 

HTML 속성으로 id값이 주어져 있다면 그마다 쉽게 자바스크립트로 접근이 가능할 것이다.

 

하지만 그렇지 않다면 document.getElementsByClassName 등의 함수를 사용하고 자식노드나 부모노드 접근과 같은 함수등을 조합해서 해당 객체에 접근해야한다.

 

jquery를 활용한다면 $ 문법으로 적은 코드양으로 작성이 가능하다.

 

 

 

2. Google Optimize에서 긴 텍스트를 줄여서 보여주고 버튼을 하나 달아서 이것을 원본/줄임으로 바꿔서 볼 수 있는 이벤트를 적용해서 A/B테스트를 진행한다.

 

해당 기능을 자바스크립트를 활용하여 작성한다면 정말 코드가 길어질 것이다.

 

텍스트 길이를 줄이는 것부터 버튼을 만들고 해당 버튼에 클릭이벤트를 바이딩 하는 것까지 많은 함수들을 써야할 것이다.

 

jquery를 활용한다면 on를 활용해 이벤트 바잉딩이 쉽고 코드양 역시 적어진다.

 

 

3. 오래된 사이트의 개편을 앞두고 신규 사이트에 들어갈 기능들의 사용자 선호도를 알아보고 싶어 기존 사이트에 스크롤을 따라다니는 목차를 적용한다.

 

해당 기능역시 html을 insert 하는 것부터 스크롤 이벤트 바인딩과 CSS 컨트롤까지 해야한다.

 

자바스크립트를 활용한다면 정말 긴 코드가 생성될 것이다.

 

jquery는 앞서 말한 장점들을 활용해 짧은 양의 코드로 이를 해결할 수 있다.

 

 

 

 

이외도 할 수 있는 일은 무궁무진하다.

 

채널에 대한 대응이 속도전이 되면서 대규모의 기능 개발을 적용하지 않는 이상 jquery는 큰 역할을 할 수 있다.

 

특히 앞서 언급했듯이 Dom에 대한 컨트롤과 이벤트 핸들링은 자바스크립트 코드와 비교할 수 없게 적기 때문이다.

 

반응형

 

3. GTM등 솔루션에서 사용할 만한 jquery 기능

---

1) Dom 접근

 

jquery를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소의 값들을 가져올 수 있다.

jquery에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공하고 있다.

 

$('.cname')  //jquery로 class명이 cname인 dom에 접근

document.getElementsByClassName('cname')  //자바스크립트 활용

 

예시처럼 자바스크립트를 썼을 때와는 비교할 수 없을 정도로 효율적이다.

 

dom접근만 잘해도 많은 기능들을 구현할 수 있어 jquery가 많이 활용된다.

 

class말고 더 많은 요소에 대한 접근 법은 아래 링크를 참고하면 된다.

 

Selectors | jQuery API Documentation

 

2) 이벤트 바인딩

 

특정 버튼이 클릭되었을 때 요소를 숨기거나 특정 위치로 이동하거나 할 때 이벤트 바인딩이 필요하다.

 

jquery에서 이 기능에 필요한 문법은 on과 "click"이라는 매개변수 뿐이다.

 

var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
  hiddenBox.show();
});

 

위 처럼 손쉽게 컨텐츠 보이기 이벤트를 바인딩 했다.

 

"click" 말고도 "scroll", "resize", "mouseover" 등 필요한 이벤트를 바인딩해서 손쉽게 기능을 추가할 수 있다.

 

이벤트들에 대한 것은 아래 링크를 참고하면 된다.

 

Events | jQuery API Documentation

 

3) Data

 

이 기능을 사용하면 이벤트 바인딩과 함께 특정 데이터들을 특정한 dom요소에 저장해두었다가 동적으로 활용할 수 있다.

 

대표적으로 특정 텍스트들을 줄여서 보여주다가 더보기 버튼을 누르면 원래 텍스트를 전부 보여주는 기능이 있다.

 

<p id="writing">
이 것은 예시 글입니다. 정말 길어요.이 것은 예시 글입니다. 정말 길어요.이 것은 예시 글입니다. 정말 길어요.이 것은 예시 글입니다. 정말 길어요.이 것은 예시 글입니다. 정말 길어요.이 것은 예시 글입니다. 정말 길어요.이 것은 예시 글입니다. 정말 길어요.
</p>



$('#writing').each(function() {
  
    var fullTxt = $('#writing').html() + ' <a href="#" id="less">줄이기</a>';
    var shortTxt = shortTxt = cutByLen(fullTxt, 40) ++ '... <a href="#" id="more">더보기</a>';
    
    $(this).html(shortTxt);   //초기 세팅을 줄인 글자로
    $(this).data('full', fullTxt);   //full이라는 키로 원본 텍스트 저장
    $(this).data('short', shortTxt);  //short이라는 키로 줄인 텍스트 저장
  }
});

// 버튼 클릭 이벤트 바인딩
$('#writing').on('click', '#more', function(e) {
  e.preventDefault();
  $(this).closest('.text').html($(this).closest('.text').data('full'));
  $(this).closest('.text').find('#less').focus();
});

$('#writing').on('click', '#less', function(e) {
  e.preventDefault();
  $(this).closest('.text').html($(this).closest('.text').data('short'));
  $(this).closest('.text').find('#more').focus();
});

 

data 기능에 대한 자세한 사항은 아래 링크를 참고하면 된다.

 

Data | jQuery API Documentation

 

 

3마무리

---

jquery는 분명히 하향세를 탄 라이브러리 이다.

 

하지만 12년 가까이를 개발자들과 함께 하며 견고한 생태계를 가지고 있고 지금도 활용되는 곳이 많다.

 

고객경험관리 측면에서 GTM 등을 활용한 채널관리를 하고 있다면 빠른 대응을 위한 jquery 사용이 큰 장점을 가질 것이다.