ChatGPT GA4 데이터 분석 보드 30분 만에 만들기
지난 편에서 깃허브 블로그 자동 배포를 다뤘다면, 이번에는 그 블로그에 쌓인 방문자 데이터를 맛있게 요리해 볼 차례입니다.
구글 애널리틱스(GA4)는 다들 한 번쯤 들어가 보지만, 솔직히 화면이 너무 복잡해서 핵심만 한눈에 보기 어렵더군요. 오늘은 GA4에서 다운로드한 방문 페이지 CSV 파일을 넣으면, 3초 만에 깔끔한 Chart.js 그래프와 '이 키워드로 글을 쓰세요'라는 AI 추천 카드까지 보여주는 로컬 웹앱을 만들어 보겠습니다.
준비물은 간단합니다. 구글 애널리틱스(GA4) 계정에서 내려받은 '페이지 및 화면' 보고서 CSV 파일 하나, 그리고 ChatGPT(또는 Claude나 Cursor 중 편한 도구 하나)만 있으면 됩니다.
만들어진 index.html을 더블클릭해서 열어도 되지만, 보안 문제로 CSV 파싱이 막힐 수 있습니다. 터미널을 열고 파이썬 기본 웹서버를 띄워 봅니다.
파이썬 웹서버 실행 명령어:python -m http.server 8000
웹 브라우저에서 http://localhost:8000에 접속하고 GA4 CSV 파일을 올려봅니다. 3초 만에 다크 모드의 세련된 대시보드가 뜨면서 내 블로그의 인기 글 순위와 추천 키워드가 차트로 시각화됩니다.
여기서 막히면
- 현상: CSV 파일을 업로드했는데 차트가 전혀 그려지지 않고 빈 화면만 유지됩니다.
원인: 구글 애널리틱스 CSV 파일의 첫 10줄가량에 메타데이터(보고서 이름, 날짜 범위 등)가 포함되어 있어, 파서가 실제 헤더(페이지 경로, 뷰 등)를 찾지 못하고 에러가 나는 경우입니다.
해결: 메모장으로 CSV 파일을 열어서 첫 부분의 불필요한 메타데이터 행을 지우고 컬럼명이 있는 줄이 첫 행이 되도록 수정하거나, 파싱 코드에서 '페이지 경로' 문자가 포함된 행부터 읽기 시작하도록 프롬프트에 "CSV 첫 행의 메타데이터를 스킵하는 예외 처리를 추가해줘"라고 명확히 지시해야 합니다. - 현상: Chart.js 차트가 깨져 보이거나 한쪽으로 심하게 찌그러집니다.
원인: 부모 컨테이너(div)에 고정된 크기(width, height)나 반응형 옵션(responsive: true, maintainAspectRatio: false)이 빠져 있어서 브라우저 창 크기에 따라 레이아웃이 무너집니다.
해결: CSS 파일이나 style 태그 안의 차트 컨테이너 영역에 'position: relative; width: 100%; height: 400px;'를 명시하고, Chart.js의 options 설정에 'responsive: true'를 꼭 켜두어야 깔끔하게 렌더링됩니다. - 현상: 브라우저 콘솔에 CORS 에러가 뜨거나 파일 리더 에러(FileReader Error)가 발생합니다.
원인: 파일 선택이 아니라 로컬 경로의 CSV를 fetch API로 직접 읽으려 하거나 로컬 파일 보안 정책(file:///) 때문에 브라우저가 실행을 차단한 경우입니다.
해결: input[type=file]을 통해 사용자가 수동으로 파일을 드래그앤드롭하거나 선택해서 FileReader API로 로컬 메모리상에서 파싱하게 하거나, 반드시 Python이나 live server 같은 로컬 서버 환경에서 웹앱을 실행해야 안전하게 작동합니다.
다음에 붙여볼 것
여기에 ChatGPT API 연동을 붙이면, 매번 정해진 규칙대로 추천하는 대신 실제 내 블로그 글을 읽고 지금 시점에 더 잘 맞는 키워드를 뽑아주는 실시간 소싱 대시보드로 진화시킬 수 있습니다. 다음 편에서는 이 대시보드에 실제로 OpenAI API를 연동해서 분석을 고도화하는 법을 알아보겠습니다.
이런 글도 있어요
관련 검색어
- 🔍 ChatGPT 사용법
- 🔍 ChatGPT 비교
- 🔍 GA4 데이터 분석 사용법
- 🔍 GA4 데이터 분석 비교
- 🔍 시각화 대시보드 사용법
- 🔍 시각화 대시보드 비교
