구글 경고 메일을 계기로 GA4와 Search Console을 도입해봤습니다

| 서론

안녕하세요, 팡일입니다.

"당신의 사이트에서 문제가 감지되었습니다."

어느 날 구글에서 이런 메일이 오면, 덜컥 겁이 나지 않으세요? 저도 그랬습니다. 그런데 이 메일 한 통이 결국 우리 홈페이지에 제대로 된 방문자 분석 시스템을 갖추는 계기가 되었습니다. 오늘은 그 과정을 처음부터 끝까지, 그대로 공유해봅니다. (Google Analytics 4 + Search Console, 둘 다 무료입니다!)

| "구조화된 데이터 문제"? 이게 대체 뭔가요

메일 내용은 이랬습니다. 우리 사이트의 이벤트(Event) 구조화 데이터에 권장 필드 5개(address, performer, eventStatus, offers, endDate)가 빠져 있다는 것이었죠.

처음엔 "뭘 잘못했나?" 싶었지만, 찬찬히 뜯어보니 핵심은 "심각하지 않은 문제(non-critical)" 였습니다. 검색 순위가 떨어지거나 색인에서 빠지는 게 아니라, "이 정보를 더 채우면 검색 결과가 풍부해집니다"라는 권장 안내였어요.

우리 홈페이지는 무료 집회를 소개하는 곳이라, performer(공연자)·offers(티켓 가격) 같은 필드는 사실상 필요가 없었습니다. 해당 필드는 원래 유료 콘서트·공연을 위한 규격이거든요.

? 교훈 1: 구글의 경고가 다 "고쳐야 할 오류"는 아닙니다. 필수(error)인지 권장(warning)인지부터 구분하세요. 권장 항목은 무리해서 채우기보다, 우리 서비스에 정말 맞는지 먼저 따져보는 게 맞습니다.

그런데 이 메일을 계기로 문득 이런 생각이 들었습니다.

"그러고 보니… 우리 홈페이지에 사람들이 얼마나, 어디서, 어떻게 들어오는지 나는 전혀 모르고 있잖아?"

그래서 방문자 분석 도구를 도입하기로 했습니다.

| 어떤 분석 도구를 골라야 할까?

도구	특징
Google Analytics 4 (GA4)	무료, 가장 상세한 유입 분석, Search Console 연동 가능
Cloudflare Web Analytics	무료, 쿠키 없음(프라이버시 친화적), 대신 분석은 얕음
Netlify Analytics	설치 불필요, 대신 월 $9 유료

찾아보니 선택지가 여러 개였는데요? 그중에서 저는 GA4를 골랐고, 이유는 명확했습니다.

이미 Search Console을 쓰고 있었으니, 연동하면 "검색에서 어떤 키워드로 들어왔나" + "들어와서 뭘 했나" 가 하나로 이어집니다.
무료인데 유입 분석 기능이 가장 강력합니다.
우리 사이트(Next.js)에 붙이기도 쉬웠습니다.

| GA4 속성 만들기

구글 애널리틱스에 들어가니, 처음엔 당황했습니다. essence 전용이 안 보였거든요. 그런데 알고 보니 오류가 아니라 아직 안 만든 것이었습니다.. ㅎㅎ

GA는 계정 → 속성 → 데이터 스트림 3단계 구조라, essence 속성을 새로 만들면 되는 거였죠.

왼쪽 아래 "⚙️ 관리" 클릭
계정은 기존 것 아무거나 써도 되지만, 관리 편하게 하려면 상단에서 계정을 고른 뒤 "속성 만들기" 클릭
속성 이름, 보고 시간대, 통화를 입력 및 선택하고 "다음" 클릭
- 시간대: 대한민국
- 통화: 대한민국 원
업종, 비즈니스 세부정보 선택 후 "다음" 클릭
비즈니스 목표 선택 후 "만들기" 클릭
플랫폼 중 하나를 선택
데이터 스트림 설정 패널에서 웹사이트 URL, 스트림 이름을 입력 후 "만들고 계속하기" 클릭

만들고 나니, G-XXXXXXXXXX 형식의 측정 ID가 나왔습니다. 이게 홈페이지와 GA를 잇는 열쇠입니다.

| 홈페이지에 GA 연결하기 (Next.js + Netlify)

여기서 개발 팁 하나. 구글이 주는 <script> 스니펫을 그냥 붙여도 되지만, Next.js에서는 공식 패키지를 쓰는 게 더 좋습니다.

CSS

npm install @next/third-parties

JavaScript

// app/layout.tsx
import { GoogleAnalytics } from "@next/third-parties/google";

const GA_ID = process.env.NEXT_PUBLIC_GA_ID;

// ...body 아래에
{GA_ID && <GoogleAnalytics gaId={GA_ID} />}