한눈에 보기
- 홈페이지 글 현황과 방문 흐름을 휴대폰에서 바로 보려고 관리자 전용 통계 화면을 만들었어요.
- 기존 워드프레스 호스팅 안에서 돌아가고, 로그인한 관리자만 열 수 있어요.
- 실제로 눌러 보며 찍은 화면이라 회사명·글 제목·방문 수 같은 비공개 정보는 가렸어요.
이런 용도로 만들었어요
홈페이지에 글은 쌓이는데, 어떤 글이 올라갔고 어디로 사람들이 들어오는지 매번 찾아보기가 번거로웠어요. 워드프레스 관리자 화면과 구글 애널리틱스를 왔다 갔다 하다 보면, 정작 보고 싶던 게 뭐였는지 잊어버릴 때도 있었고요. 그래서 제가 보기 편한 통계 화면을 만들어 봤어요.
필요한 건 딱 세 가지였어요. 카테고리별로 글이 몇 개인지, 글 목록을 간단하게, 그리고 궁금한 글을 누르면 그 글의 기록이 열리는 것. 제가 이렇게 원하는 걸 말하고, 실제 코드와 화면은 GPT가 만들었어요.
사용한 AI와 도구
- 요구·기획: 저 (필요한 화면과 고칠 점을 말로 정리)
- 구현: GPT — 워드프레스 플러그인(PHP·JavaScript·CSS)으로 만들고, frontend-design 지침을 참고해 기존 사이트의 모바일 정렬·가독성에 맞춤
- 데이터: 워드프레스 글·카테고리 정보 + Site Kit로 연결한 구글 애널리틱스(GA4) 집계
- 실제 조작 촬영: 브라우저 자동화로 화면을 직접 누르며 연속 캡처 → Pillow로 비공개 정보 가림 → FFmpeg로 영상화 (생성형 가짜 화면·수치 없음)
- 이 글과 영상: 딸깍 담당 Claude가 글·내레이션·편집·발행 (목소리는 무료 마이크로소프트 목소리 edge-tts, 편집은 FFmpeg)
직접 써본 기능
따로 켜 둘 PC 없이 홈페이지 안에서 돌아가는 구조
통계 화면은 일단빌드 홈페이지가 이미 돌아가는 워드프레스 호스팅 안에 작은 플러그인으로 들어가 있어요. 그래서 제 PC에 서버를 켜 둘 필요가 없어요. 대신 관리자로 로그인해야만 열리는 화면이라, 손님이 보는 공개 통계 페이지는 아니에요.
휴대폰에서는 Safari로 열어서 홈 화면에 추가해 두고 앱처럼 열어 쓰는 방식이에요. 다만 인터넷이 연결돼 있어야 하고, 앱스토어에 올린 앱이나 오프라인에서 되는 앱은 아니에요.
첫 화면에서 오늘 방문 현황부터 봐요
첫 화면은 '전체' 탭이에요. 오늘 방문 현황과 최근 30분 방문자, 지금 관심받는 페이지가 한 화면에 나와요. 사진의 숫자 칸은 운영 정보라 가렸어요.
오늘 집계와 최근 30분, 기준이 달라서 헷갈렸어요
처음에 가장 헷갈렸던 부분이에요. 최근 30분 방문자에는 숫자가 보이는데, 오늘 방문 현황은 아직 '그래프를 준비하고 있어요'라고 나올 때가 있었거든요.
알고 보니 둘은 기준이 달랐어요. 최근 30분은 지금 막 들어온 활동을 분 단위로 보여 주고, 오늘 집계는 구글 쪽에서 처리가 끝난 뒤에 들어와요. 그리고 최근 30분 숫자는 동시에 접속한 사람 수가 아니에요. 같은 사람이 여러 번 잡힐 수도 있고요. 화면 아래에도 이 설명을 적어 두게 했어요.
글 현황에서 카테고리로, 목록으로 좁혀 보기
'글 현황'을 누르면 공개 글과 초안 수, 카테고리별 글 수가 나와요. 여기서 카테고리를 하나 고르면 그 분야의 글만 남고, 목록에는 글마다 조회 상태만 간단하게 보여요. 검색, 언어, 발행 상태, 정렬도 고를 수 있어요.
글을 누르면 그 자리에서 상세 창이 열려요
궁금한 글을 누르면 다른 페이지로 넘어가지 않고 화면 안에서 상세 창이 열려요. 글 정보와 이 글 조회, 이 글을 본 방문자 수가 위에 나오고, 닫으면 보던 목록 자리로 바로 돌아와요.
조회 추이·유입경로·국가·기기 — 촬영 때는 집계 대기였어요
상세 창을 내리면 조회 추이, 어디를 통해 읽었는지(유입경로), 접속 국가, 접속 기기가 차례로 나와요. 영상을 찍은 날은 그 글의 자료가 아직 집계되지 않아서 '집계된 자료가 아직 없어요'로 나왔어요. 조회가 0이라는 뜻도, 연결이 끊겼다는 뜻도 아니라서 그대로 보여 드려요. 자료가 쌓이면 그래프가 채워지는 자리예요.
요약을 복사해서 AI와 다음 글을 의논해요
전체 탭 맨 아래에 '요약 복사' 버튼을 넣었어요. 누르면 통계 요약이 복사되고, 저는 그걸 AI 채팅에 붙여 넣어서 다음에 어떤 글을 쓸지 같이 고민해요. AI가 알아서 분석하거나 글을 올리는 기능은 아니고, 복사해 주는 것까지가 이 화면의 일이에요.
입력부터 결과까지
휴대폰에서 열면 이런 순서로 화면이 만들어져요.
- 휴대폰 Safari 또는 홈 화면 바로가기
- ildanbuild.com/insights/ (관리자 전용 화면)
- 워드프레스 관리자 로그인 확인
- 서버에서 글·카테고리 목록과 GA4 집계를 함께 불러옴
- 휴대폰 화면에 현황판으로 보여 줌
완성 영상
막힌 부분과 다음 개선
- 글별 조회 추이·유입경로 그래프가 실제로 채워지는 모습은 아직 못 봤어요. 촬영한 날은 집계 대기 상태였어요.
- 통계는 동의 여부, 광고 차단, 처리 지연 때문에 실제 방문을 전부 담지 못할 수 있어요.
- 조회수는 고른 기간의 페이지 조회 기준이라, 같은 사람이 여러 번 보면 늘어날 수 있어요. 누적 조회수로 보지 않으려고 해요.
- 다음에는 자료가 쌓인 뒤 그래프가 제대로 읽히는지 다시 보고, 휴대폰에서 더 빨리 열리게 손볼 생각이에요.