안녕하세요, 코딩은 못 하지만 IT가 너무 궁금한 비개발자 루카(Luka)입니다.

thumbnail

"Google Analytics Universal Analytics (UA) 서비스 종료"라는 소식에 저는 머리가 지끈거렸습니다. '분석 툴이 바뀐다고? 개발자만 아는 어려운 건가?'라는 생각에 막막했지만, 우리 웹사이트가 잘 돌아가는지, 사람들이 와서 뭘 하는지는 알아야 할 것 같아서 직접 GA4를 파헤쳐 보기로 결심했습니다. 검색하면 나오는 일반적인 이야기 말고, 저처럼 코딩 모르는 사람이 '이게 뭔데?' 하면서 직접 부딪히고 해결한 솔직한 경험담을 풀어볼까 합니다.

GA4, UA와 뭐가 다른데? (비개발자 시선으로 본 핵심 변화)

GA4를 처음 접했을 때 가장 크게 다가온 점은 '이벤트' 중심이라는 거였어요. UA에서는 '조회수', '이벤트', '전자상거래' 등 측정 항목이 나뉘어 있었는데, GA4는 모든 걸 '이벤트'로 본다는 거죠. 웹사이트 접속도, 버튼 클릭도, 심지어 구매도 다 이벤트! 처음엔 이 개념이 너무 낯설어서 "그럼 UA에서 쓰던 카테고리, 액션, 라벨은 어디 갔지?"라는 의문이 제일 컸습니다.

구글은 GA4를 '사용자 행동'에 더 집중하도록 만들었다고 합니다. 예를 들어, UA는 웹사이트 '페이지' 중심이었다면, GA4는 '사람'이 페이지에서 무엇을 하는지에 초점을 맞춘다는 것이죠. 제가 찾아본 바로는, 이런 사용자 중심 접근 덕분에 앱과 웹 데이터를 통합해서 볼 수 있게 된 점이 가장 큰 장점이라고 합니다. 또 개인 정보 보호 이슈가 중요해지면서, 쿠키 없이도 데이터를 측정할 수 있는 모델링 기능이 강화되었다는 것도 특징이고요.

UA와 GA4의 주요 차이점을 제가 이해한 대로 간단히 표로 정리해봤습니다.

특징 Universal Analytics (UA) Google Analytics 4 (GA4) 루카의 비개발자 해석
데이터 모델 세션, 페이지뷰 기반 이벤트 기반 (모든 상호작용이 이벤트) 페이지 봤니? -> 사람이 뭐 했니?
데이터 범위 주로 웹 (앱은 별도 GA360 필요) 웹 + 앱 통합 (사용자 중심) 웹 따로, 앱 따로 보던 걸 한 번에!
이벤트 구조 카테고리, 액션, 라벨, 값 event_name + 여러 사용자 정의 매개변수 복잡한 분류 대신, 딱 '이름'과 '정보'
보고서 미리 정의된 표준 보고서 중심 탐색 보고서 (자유로운 데이터 분석) 강화 정해진 틀보단, 내 맘대로 보고서!
개인정보 쿠키 기반 의존도 높음 머신러닝 기반 데이터 모델링 (쿠키 의존도 ↓) 쿠키 없어져도 대충 알아서 추측해 줌!
목표 설정 '목표' 개념 '전환' 개념 (중요 이벤트에 '전환' 표시) '달성' 대신 '중요 행동'으로 이름 바뀜

핵심 전환 지표 트래킹, 왜 중요할까?

웹사이트를 운영하는 목적은 결국 '성과'를 내는 거잖아요? 고객이 회원가입을 하거나, 문의를 남기거나, 특정 상품을 구매하는 것 같은 행동들이 바로 '전환'입니다. 이 전환을 얼마나 많이, 얼마나 효율적으로 이끌어냈는지 알아야 우리 웹사이트의 강점과 약점을 파악하고 개선할 수 있겠죠. GA4에서는 이런 '전환'을 추적하는 것이 핵심입니다. "우리 고객들이 어디서 뭘 하다가 떠나는지, 아니면 결국 뭘 하는지"를 파악하는 게 저 같은 비개발자에게도 너무 중요했습니다.

제가 추적하고 싶었던 핵심 전환 지표는 다음과 같았습니다: 1. 문의하기 버튼 클릭: 잠재 고객이 우리에게 얼마나 관심이 있는지. 2. 문의 완료 페이지 방문: 실제 문의가 성공적으로 접수되었는지. 3. 회원가입 완료: 서비스에 가입하는 사용자 수.

이런 지표들을 GA4에서 정확히 트래킹하기 위해 구글 태그 매니저(GTM)를 사용했습니다. 개발자의 도움 없이도 제가 직접 해볼 수 있는 가장 현실적인 방법이었거든요!

개발자 도움 없이 GA4 설정, 그리고 핵심 이벤트 트래킹하기 (feat. GTM)

1단계: GA4 속성 생성 및 GTM 연동

GA4 속성 생성은 구글에서 시키는 대로 했습니다. '관리' -> '속성 만들기'를 통해 GA4 속성을 만들고, 가장 중요한 '측정 ID (Measurement ID)'를 확인합니다.

그다음은 GTM에 GA4 태그를 설치하는 일이었죠.

  1. GTM 워크스페이스에 접속합니다.
  2. '태그' -> '새로 만들기'를 클릭합니다.
  3. '태그 구성'에서 'Google 애널리틱스: GA4 구성'을 선택합니다.
  4. GA4에서 확인한 '측정 ID' (예: G-XXXXXXXXXX)를 입력합니다.
  5. '트리거'는 'All Pages (모든 페이지)'를 선택하여 모든 페이지에서 GA4 기본 설정이 로드되도록 합니다.
  6. 태그 이름을 'GA4 구성' 등으로 지정하고 저장합니다.

이렇게 설정하면 우리 웹사이트 모든 페이지에 GA4 기본 추적 코드가 심어지는 겁니다. 이걸 해냈을 때 저는 "나도 개발자처럼 뭐라도 한 건가?" 하는 뿌듯함을 느꼈습니다!

// 이건 GTM에서 자동으로 처리되지만, 만약 직접 웹사이트 <head> 안에 넣는다면 아래와 같은 형태입니다.
// <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
// <script>
//   window.dataLayer = window.dataLayer || [];
//   function gtag(){dataLayer.push(arguments);}
//   gtag('js', new Date());
//   gtag('config', 'G-XXXXXXXXXX'); // 이 부분이 GA4 측정 ID를 설정하는 부분입니다.
// </script>

2단계: 핵심 전환 이벤트 설정 (예: 문의하기 버튼 클릭)

이제 제가 가장 중요하게 생각했던 '문의하기 버튼 클릭' 이벤트를 추적해볼 차례였습니다.

  1. GTM 변수 설정:

    • '변수' -> '구성' -> '기본 제공 변수'에서 'Click ID', 'Click Classes', 'Click Text' 등을 활성화합니다. (나중에 특정 요소를 정확히 짚어내기 위해 필요합니다.)

  2. GTM 트리거 설정:

    • '트리거' -> '새로 만들기'를 클릭합니다.
    • '트리거 구성'에서 '클릭 - 모든 요소'를 선택합니다.
    • '일부 클릭'을 선택하고, 조건을 설정합니다. 예를 들어, 웹사이트의 '문의하기' 버튼에 id="contact-button" 속성이 있다면, Click ID '같음' contact-button으로 설정합니다. 만약 ID가 없다면, Click Classes '포함' btn-contact (버튼 클래스 이름) 등으로 설정할 수 있습니다.
    • 트리거 이름을 '문의하기 버튼 클릭' 등으로 지정하고 저장합니다.

    이때, 버튼의 정확한 ID나 클래스 이름을 알아내는 것이 중요했어요. 저는 크롬 브라우저에서 F12 키를 눌러 개발자 도구를 열고, 'Elements' 탭에서 버튼을 직접 클릭해서 ID나 클래스를 확인했습니다. 처음엔 이게 뭔지 몰라 당황했지만, "아, 이렇게 하면 웹사이트 요소의 정보를 볼 수 있구나!" 깨달았죠. 예를 들어, 제가 찾은 문의 버튼의 클래스는 btn-lg btn-primary였고, 저는 Click Classes '포함' btn-primary로 설정했습니다.

  3. GTM 태그 설정:

    • '태그' -> '새로 만들기'를 클릭합니다.
    • '태그 구성'에서 'Google 애널리틱스: GA4 이벤트'를 선택합니다.
    • '구성 태그'는 이전에 만든 'GA4 구성' 태그를 선택합니다.
    • '이벤트 이름'에 추적할 이벤트 이름을 입력합니다. (예: contact_button_click) GA4는 이벤트 이름에 소문자, 언더스코어를 권장합니다.
    • '이벤트 매개변수'를 추가하여 더 자세한 정보를 보낼 수 있습니다. 예를 들어, button_text를 매개변수 이름으로, {{Click Text}}를 값으로 설정하면, 사용자가 클릭한 버튼의 텍스트가 함께 전송됩니다.
    • '트리거'는 이전에 만든 '문의하기 버튼 클릭' 트리거를 선택합니다.
    • 태그 이름을 'GA4 이벤트 - 문의 버튼 클릭' 등으로 지정하고 저장합니다.

이제 GTM 워크스페이스에서 '미리보기' 모드를 사용해 웹사이트에서 버튼을 클릭하면, GTM 디버거에 contact_button_click 이벤트가 잘 발생하는지 확인할 수 있었습니다.

3단계: GA4에서 전환으로 표시하기

GTM에서 이벤트를 잘 보내고 있다면, 이제 GA4에서 해당 이벤트를 '전환'으로 표시해야 합니다.

  1. GA4 속성으로 이동합니다.
  2. '관리' -> '이벤트'로 들어갑니다.
  3. GTM에서 보낸 이벤트 이름 (예: contact_button_click)이 목록에 나타나면, 오른쪽에 '전환으로 표시' 스위치를 켭니다.

이벤트가 GA4에 나타나기까지 최대 24시간이 걸릴 수 있다고 구글 문서에 나와있었지만, 제 경험상 2~3시간 이내에 대부분의 이벤트는 목록에 나타났습니다.

// GTM을 통해 이벤트를 전송하는 것이 일반적이지만,
// 만약 개발자가 직접 웹사이트 코드에 이벤트를 심는다면 아래와 같은 형태가 됩니다.
// (GTM을 쓰는 비개발자 루카는 이 코드를 직접 만지진 않습니다.)

// 문의하기 버튼 클릭 시
document.getElementById('contact-button').addEventListener('click', function() {
  gtag('event', 'contact_button_click', {
    'button_name': '메인_문의하기',
    'location': '홈페이지_하단'
  });
});

// 문의 완료 페이지 로드 시
if (window.location.pathname === '/contact/thank-you') {
  gtag('event', 'contact_form_submission', {
    'form_id': 'contact_us_form',
    'status': 'success'
  });
}

위 코드는 GTM을 통하지 않고 직접 gtag() 함수를 호출하는 방식입니다. 저처럼 GTM을 활용하는 비개발자 입장에서는 GTM의 태그와 트리거 설정만으로도 충분히 이벤트를 보낼 수 있었지만, 혹시 개발팀과 협업할 일이 생긴다면 이런 코드를 통해 이벤트가 전송될 수 있다는 것을 알아두면 유용합니다.

비개발자가 헷갈리기 쉬운 부분과 해결법

GA4를 설정하면서 제가 가장 헷갈렸던 부분들을 정리해봤습니다. 저처럼 "이게 왜 안 되지?" 했던 분들에게 도움이 되길 바랍니다.

1. UA의 '카테고리, 액션, 라벨'이 GA4에서 사라졌다고?!

헷갈린 부분: UA에서는 이벤트를 보낼 때 '이벤트 카테고리', '이벤트 액션', '이벤트 라벨'을 지정해서 보냈는데, GA4에서는 이 개념 자체가 없어진 것처럼 보였습니다. 처음에는 "그럼 이벤트를 어떻게 분류하고 관리하라는 거지?"라는 생각에 막막했습니다. 이벤트 이름만으로는 너무 광범위하게 느껴졌고요.

해결법: GA4는 event_name 하나와 여러 개의 '매개변수(parameter)'를 사용합니다. 즉, UA의 카테고리, 액션, 라벨이 GA4에서는 event_name과 함께 전송되는 사용자 정의 매개변수로 대체되는 것입니다.

  • 예시 (UA): ga('send', 'event', '버튼 클릭', '메인 페이지', '문의하기');
  • 예시 (GA4): gtag('event', 'button_click', { 'button_category': '메인 페이지', 'button_name': '문의하기' });

저는 GTM에서 GA4 이벤트 태그를 설정할 때, event_name을 명확하게 하고, 필요한 추가 정보들을 '이벤트 매개변수'로 하나씩 추가하는 방식으로 해결했습니다. 예를 들어 '문의하기_클릭'이라는 event_name 아래 button_location: '상단', button_text: '지금 문의하세요' 같은 매개변수를 추가하는 식이죠. 이렇게 하니 UA의 분류 체계보다 훨씬 유연하게 데이터를 수집할 수 있다는 것을 깨달았습니다.

2. '데이터 스트림'은 또 뭔데? UA의 '보기'랑은 다른 건가?

헷갈린 부분: GA4 속성을 만들 때 '데이터 스트림'이라는 것을 추가하라고 하더군요. 웹, iOS 앱, Android 앱 이렇게 세 가지가 있는데, 저는 웹사이트만 운영하니까 '웹' 스트림만 만들었습니다. 그런데 UA의 '보기(View)' 개념에 익숙해져 있던 저는, 데이터 스트림이 UA의 보기와 비슷한 건지, 아니면 완전히 다른 건지 헷갈렸습니다.

해결법: 데이터 스트림은 UA의 '보기'와는 완전히 다릅니다. UA의 보기가 원본 데이터를 필터링하여 여러 버전으로 '보는' 방식이었다면, GA4의 '데이터 스트림'은 데이터의 원천(Source) 그 자체를 의미합니다. 즉, 웹사이트에서 오는 데이터, iOS 앱에서 오는 데이터, Android 앱에서 오는 데이터를 각각의 '데이터 스트림'으로 정의하고, 이 스트림들이 하나의 GA4 속성으로 모여 '사용자' 중심의 통합 분석을 가능하게 하는 겁니다.

저는 웹사이트만 운영하니 '웹' 데이터 스트림 하나만 만들면 된다는 것을 확인하고, 굳이 여러 개의 데이터 스트림을 만들 필요는 없다는 것을 알았습니다. 만약 나중에 모바일 앱을 출시하게 된다면 그때 앱용 데이터 스트림을 추가하면 되는 것이었죠. "하나의 속성 안에 여러 개의 데이터 원천을 담을 수 있는 그릇 같은 거구나!"라고 이해하니 속이 시원했습니다.

3. '디버그 뷰'와 '실시간 보고서', 데이터가 왜 바로 안 보이지?

헷갈린 부분: GTM에서 GA4 태그를 설정하고 '미리보기' 모드로 이벤트를 발생시키면 GTM 디버거에는 실시간으로 이벤트가 잘 찍히는데, 막상 GA4의 '실시간 보고서'에는 데이터가 바로바로 안 보일 때가 많았습니다. "내가 뭘 잘못한 건가? 왜 누락되지?"라는 생각에 답답했죠.

해결법: GA4의 '실시간 보고서'는 실제 사용자의 트래픽을 근 실시간(near real-time)으로 보여주지만, 아주 미세한 지연이 있을 수 있습니다. 그리고 GTM 미리보기 모드에서 발생하는 이벤트는 GTM 디버거와 GA4의 '디버그 뷰'에서만 정확하고 실시간으로 확인할 수 있습니다.

  • GTM 미리보기 모드 + GA4 디버그 뷰: 내가 설정한 이벤트가 정확히 잘 전송되고 있는지 테스트할 때 사용합니다. GTM 미리보기 모드를 실행한 브라우저에서 웹사이트를 탐색하면, GA4 '관리' -> '디버그 뷰'에서 거의 즉각적으로 이벤트가 발생하는 것을 볼 수 있습니다. 제가 이벤트를 설정하고 제대로 작동하는지 확인할 때는 무조건 '디버그 뷰'를 활용했습니다. "아, 내 실수는 아니었네!" 안도감을 느꼈죠.

  • 실시간 보고서: 실제 웹사이트에 방문하는 일반 사용자들의 현재 활동을 모니터링할 때 사용합니다. GA4 공식 문서에는 데이터 처리 지연이 최대 48시간까지 발생할 수 있다고 되어 있지만, 제 경험상 '실시간 보고서'에는 보통 2~3시간 이내에 대부분의 지표가 반영되었습니다. 중요한 건 '실시간 보고서'가 디버깅 용도는 아니라는 것이죠.

데이터가 즉시 보이지 않는다고 당황하지 말고, '디버그 뷰'를 통해 먼저 정확히 이벤트가 수집되는지 확인하는 것이 가장 중요합니다.

시행착오와 해결법: 루카의 좌충우돌 GA4 여정

1. 시행착오: 이벤트 중복 전송 문제 (데이터가 두 배로 찍히는 기현상!)

상황: '문의 완료' 페이지 방문 이벤트를 설정했는데, GA4에 데이터가 두 배씩 찍히는 것을 발견했습니다. 예를 들어, 한 명이 페이지를 방문했는데 이벤트 발생 횟수가 2로 나타나는 식이었죠.

원인 분석: GTM에서 '문의 완료 페이지 방문' 이벤트를 두 가지 방식으로 설정했던 것이 문제였습니다. 하나는 페이지 뷰를 기준으로 하는 '페이지 뷰' 트리거였고, 다른 하나는 특정 요소 클릭 후 랜딩 되는 페이지를 기준으로 하는 '페이지 로드' 트리거였습니다. 두 트리거가 모두 발동되면서 같은 이벤트가 중복으로 전송된 것이었죠.

해결법: GTM '미리보기' 모드를 켜고 웹사이트에서 직접 문의 과정을 시뮬레이션했습니다. 그리고 '디버그 뷰'를 통해 어떤 트리거가 몇 번 발동하는지 면밀히 관찰했죠. 결국, '페이지 뷰' 트리거가 해당 페이지에서 불필요하게 한 번 더 이벤트를 발생시킨다는 것을 알아냈고, 불필요한 '페이지 뷰' 트리거를 비활성화하거나, 더 명확한 '페이지 경로(Page Path)' 조건을 추가하여 한 번만 발동되도록 수정했습니다.

// GTM 트리거 조건 수정 예시
// 기존: Page Path '포함' '/contact/thank-you' (이 조건 하나로도 태그가 두 번 발동할 수 있었음)
// 수정: Page Path '정규식 일치' '^/contact/thank-you/?$' (정확히 해당 경로만, 슬래시 유무까지 고려하여 한 번만 발동하도록)

이런식으로 GTM 미리보기와 GA4 디버그 뷰를 오가며 직접 테스트해보는 것이 가장 정확하고 빠르게 문제를 해결할 수 있는 방법이었습니다. "데이터는 거짓말을 안 한다!"는 진리를 깨달았죠.

2. 시행착오: 특정 버튼 클릭 이벤트가 추적되지 않음 (GTM에서 안 잡혀!)

상황: 특정 페이지의 '다운로드' 버튼 클릭 이벤트를 설정했는데, GTM 미리보기에서도 이벤트가 잡히지 않고 GA4에도 전혀 데이터가 들어오지 않았습니다.

원인 분석: GTM의 '클릭 - 모든 요소' 트리거를 설정할 때, 버튼의 ID나 Class 값을 정확하게 입력하지 않은 것이 원인이었습니다. 개발자 도구(F12)로 확인해보니, 제가 처음에 생각했던 ID 값과 실제 버튼의 ID 값이 달랐던 것이죠. 혹은 Class 이름이 여러 개인데 그중 하나만 적어서 정확히 매칭이 안 된 경우도 있었습니다.

해결법: 1. 개발자 도구 활용: 다시 한번 크롬 개발자 도구(F12)를 열고, 'Elements' 탭에서 해당 버튼 요소를 정확히 찾아 ID, Class 이름을 확인했습니다. 버튼의 HTML 코드를 보면 <button id="download-asset" class="btn btn-download">다운로드</button> 와 같이 ID나 클래스 이름이 명확히 나와있습니다. 2. GTM 트리거 수정: GTM에서 해당 트리거를 열고, Click ID 또는 Click Classes 조건을 개발자 도구에서 확인한 정확한 값으로 수정했습니다. 예를 들어, Click ID '같음' download-asset으로 수정하니 즉시 이벤트가 정상적으로 추적되기 시작했습니다.

// GTM 트리거 설정 시 사용 예시 (코드 블록은 아니지만, 설정값 명시)
// 변수: Click ID
// 연산자: 같음
// 값: download-asset  ( <-- 개발자 도구에서 확인한 정확한 ID 값 )

// 또는
// 변수: Click Classes
// 연산자: 포함
// 값: btn-download  ( <-- 개발자 도구에서 확인한 정확한 Class 값 중 하나 )

개발자 도구가 이렇게 유용할 줄은 상상도 못 했습니다. 개발 지식이 없어도 웹사이트의 '속살'을 들여다볼 수 있게 해주는 마법 같은 도구였죠. 이 과정을 통해 개발자 도구와 GTM의 연동이 얼마나 중요한지 몸소 깨달았습니다.

마치며: 비개발자도 충분히 할 수 있다!

GA4는 UA보다 분명 더 복잡하고 생소한 부분이 많았습니다. '이벤트' 기반으로 모든 것이 바뀌면서 저처럼 UA에 익숙했던 비개발자에게는 학습 곡선이 꽤 높게 느껴졌죠. 하지만 하나하나 직접 부딪히고 구글링하며 해결해나가니, 결국 핵심 전환 지표들을 성공적으로 트래킹할 수 있었습니다.

물론 모든 기능을 완벽하게 마스터한 건 아니지만, 우리 웹사이트의 사용자 행동을 이해하고 개선하는 데 필요한 기본적인 데이터는 충분히 얻을 수 있게 되었습니다. 저처럼 코딩은 모르지만 IT 서비스에 대한 호기심과 개선 의지가 있는 비개발자라면, 충분히 GA4를 설정하고 활용할 수 있다고 확신합니다. 시작이 반입니다! 여러분도 도전해보세요!

핵심 요약 3줄

  1. GA4는 UA와 달리 '이벤트' 중심으로 데이터를 수집하며, '데이터 스트림'을 통해 웹/앱 통합 분석이 가능합니다.
  2. 비개발자도 GTM을 활용하면 개발자 도움 없이 GA4 기본 설정 및 핵심 전환 이벤트 트래킹이 가능합니다.
  3. '디버그 뷰'와 개발자 도구(F12)는 GA4 설정 시 발생할 수 있는 시행착오(이벤트 누락/중복)를 해결하는 데 필수적인 도구입니다.

질문 형식 FAQ

GA4 전환 이벤트 이름은 어떻게 정하는 게 좋을까요?

GA4에서는 이벤트 이름에 소문자와 언더스코어를 사용하는 것을 권장합니다. (예: form_submission, button_click, purchase_complete) 너무 추상적인 이름보다는 이벤트의 목적이나 내용을 명확히 알 수 있는 이름을 사용하는 것이 좋습니다.

GTM을 사용해야만 GA4를 설정할 수 있나요?

필수 사항은 아닙니다. 웹사이트 코드에 직접 gtag.js 스니펫을 추가하여 GA4를 설정하고 이벤트를 전송할 수도 있습니다. 하지만 GTM은 코딩 지식이 없는 비개발자도 태그를 쉽게 추가, 수정, 관리할 수 있게 해주므로 훨씬 효율적이고 편리합니다.

GA4에서 설정한 이벤트가 '전환'으로 표시되기까지 왜 시간이 오래 걸리나요?

GTM에서 이벤트를 설정하고 웹사이트에 배포한 후, 해당 이벤트가 GA4의 '이벤트' 목록에 나타나기까지 보통 몇 시간(최대 24시간)의 데이터 처리 시간이 필요합니다. 이벤트가 목록에 나타난 후에 '전환으로 표시'를 켤 수 있습니다. 실시간으로 이벤트가 잘 작동하는지 확인하려면 '디버그 뷰'를 사용하세요.