하려던 것
코딩을 전혀 모르는 1인 운영자가 AI 에이전트 하나로 개인 웹진 사이트의 구조 개편부터 기사 발행, 검색·방문 측정까지 직접 운영해 보는 것이 목표였습니다. 개발자에게 맡기지 않고, 대화만으로 "기획 → 미리보기 → 확인 → 게시"를 반복할 수 있는지 확인하고 싶었습니다.
구체적으로는 다섯 가지였습니다.
메뉴와 홈 화면 흐름을 독자의 일상 관심사 중심으로 다시 짜기
방문자가 오래 머물도록 화면 사이 동선 만들기 (테스트 → 학습 페이지 → 뉴스레터)
따로 써 둔 기사 원고를 사이트 양식에 맞춰 발행하기
검색 노출 상태를 점검하고 방문 통계를 처음으로 설치하기
페이지 메타 정보(제목·설명·공유 이미지)를 도구로 점검하기
활용한 툴
대화 창 하나(Claude)에서 요청하면, 코드 저장·배포는 에이전트가 처리하고 저 는 미리보기 화면만 보고 결정하는 구조였습니다.
도구
역할
제가 직접 한 일
Claude (클라우드 작업 세션)
코드 작성·수정, 미리보기 스크린샷, 배포, 출처 대조
요청과 판단, "올려줘" 승인
GitHub
사이트 파일 저장소. 실험용 가지(브랜치)와 실제 가지를 나눠 운영
없음
Cloudflare Pages
저장소에 올라온 파일을 자동으로 사이트에 반영
없음
Playwright(가상 브라우저)
PC·폰 화면 캡처, 버튼 동작·이벤트 확인
스크린샷 보고 수정 요청
Google Search Console
색인 상태·사이트맵 확인, 색인 생성 요청
화면 캡처 전달, 요청 버튼 클릭
Google Analytics 4
방문·행동 측정
속성 만들기, 측정 ID 전달
Meta Checker(크롬 확장)
제목·설명·대표 URL·공유 정보 점검
설치와 검사, 결과 캡처
AI 이미지 생성 도구
기사 삽화
이미지 생성과 선택
Claude 문서·아티팩트
기사 원고·시안 작성
원고 작성과 검토
진행 세부내용
모든 작업은 "실험용 가지에서 만들기 → 스크린샷으로 확인 → 제가 '올려줘'라고 하면 실제 사이트에 반영 → 라이브 페이지 재확인" 순서로 돌았습니다. 작은 문구 수정은 바로 올리고, 구조가 바뀌거나 이미지를 고칠 때는 반드시 미리 보여달라고 했습니다.
단계
한 일
확인한 증거
1. 구조 개편
메뉴를 일상 주제 3개 + 행사 + 학습 코너로 재편. 홈 흐름을 "이번 주 입구 → 발견의 여정 → 테스트 → 행사 → 학습 → 뉴스레터"로 재 배치. 없앤 주소는 새 주소로 자동 이동
PC·폰 미리보기 스크린샷
2. 세로형 숏폼 피드
행사 영상을 릴스처럼 넘겨 보는 섹션. 위로 밀기에서 옆으로 밀기로 변경
터치 동작 자동 테스트
3. 떠 있는 음악 플레이어
홈의 중복 섹션을 없애고 화면 오른쪽 아래에 플레이어 배치. 페이지를 옮겨도 음악이 끊기지 않도록 본문만 바꿔 끼우는 방식 적용
홈 → 테스트 → 학습 → 뒤로가기에서도 플레이어 유지
4. 테스트 → 학습 → 뉴스레터 동선
테스트 결과 화면에 학습 페이지로 가는 버튼. 넘어간 페이지 맨 위에 "내 결과" 환영 카드, 그 아래 뉴스레터 연결
결과값이 다음 페이지에 그대로 뜨는 화면
5. 카피·브랜드 표기
홈 제목·소개문 교체, 슬로건 삭제, 에디터 표기 통일. 링크 공유 이미지도 새 문구로 다시 제작
라이브 페이지 문구 확인
6. 기사 2편 발행
따로 쓴 원고를 사이트 양식으로 옮김. 게재 전 원문 출처와 숫자·발언을 대조하고, 오타와 시점 표현을 수정
출처 페이지별 대조 결과
7. AI 이미지 표시
AI 사진 폴더에 넣으면 사진 오른쪽 아래에 'AI 생성' 표시가 자동으로 붙도록 설정
기사별 표시 개수 자동 점검
8. 검색 노출 점검
서치 콘솔 '리디렉션이 포함된 페이지' 알림 분석, 새 기사 색인 생성 요청
색인 2개, 미색인 6개(리디렉션 1, 발견됨 5)
9. 방문 통계 설치
GA4 새 속성 생성, 전 페이지에 코드 설치. 핵심 행동 6가지를 이벤트로 측정. 소개 페이지에 방문 통계 안내 추가
자동 테스트에서 이벤트 6개 모두 기록
10. 메타 정보 점검
Meta Checker로 기사 페이지 검사
제목·설명·대표 URL 모두 '동일'
측정하는 핵심 행동은 다음 다섯 가지입니다. 버튼에 이름표 하나만 붙이면 새 행동도 추가로 측정할 수 있게 해 두었습니다.
뉴스레터 구독 버튼 클릭
테스트 완료(결과값 포함)
테스트 결과 공유
테스트 결과 저장
결과 화면에서 학습 페이지로 이동
시행착오
가장 많이 부딪힌 건 기술보다 "실제 독자가 보는 상황"을 놓친 경우였습니다.
상황
원인
해결
반영했는데 PC에서는 옛 디자인이 보임
브라우저가 이전 디자인 파일을 기억함(캐시)
강력 새로고침으로 확인. 파일 주소에 버전 표시를 붙이는 근본 해결은 숙제로 남김
숏폼 피드가 어색함
위로 밀기는 페이지 스크롤과 겹침
옆으로 밀기로 변경 후 터치 테스트
음악을 자동으로 틀고 싶었음
브라우저가 자동 재생을 막고, 저작권상 공식 퍼가기 플레이어만 쓸 수 있음
방문자가 누르면 재생, 플레이어는 항상 보이게, 닫으면 정지
"이번 주라면 ○○으로" 같은 문장
행사가 끝나면 틀린 정보가 됨
기간이 지나도 맞는 문장으로 수정
원고의 발언 인용이 원문보다 강함
기자의 설명을 당사자 발언처럼 옴김
원문의 실제 직접 발언으로 교체
실제 장소·사람처럼 보이는 AI 사진
독자가 보도 사진으로 오해할 수 있음
가장 사실적인 1장은 빼고, 나머지는 'AI 생성' 표시
AI 이미지 속 글자 철자 오류
생성 도구가 글자를 자주 틀림
글자 부분만 고쳐 그리고, 전후 비교를 보고 승인
서치 콘솔 '리디렉션' 경고 메일
대부분 주소 정리에 따른 정상 동작
두 번 넘어가던 주소 1곳만 한 번에 가도록 수정
측정·분석 과제를 하려는데 데이터가 0
사이트에 GA4 코드가 아예 없었음. 기존 속성은 다른 사이트용일 수 있었음
전용 속성을 새로 만들고 설치부터 시작
다국어 URL 개선 과제
사이트가 한국어 한 가지라 전제 자체가 맞지 않음
억지로 번역본을 만들지 않고 '해당 없음'으로 기록
배운 점
코드를 몰라도 사이트를 운영할 수 있었습니다. 다만 운영자의 일은 "판단과 확인"으로 바뀌었습니다.
팩트체크는 "출처 페이지를 직접 열어서"입니다. 검색 요약이나 기억이 아니라 원문 문장과 대조하면 숫자는 맞아도 뉘앙스가 다른 곳이 보입니다.
측정은 분석보다 먼저 시작해야 합니다. 분석하려고 보니 코드가 없었습니다. 무엇을 잴지(핵심 행동 6가지)를 먼저 정하고 설치해야 다음 주에 볼 것이 생깁니다.
경고 메일이 곧 문제는 아닙니다. 서치 콘솔 알림은 대부분 정상 동작이었고, 목록을 열어 "진짜 글 주소가 빠졌는지"만 보면 됐습니다.
향후 계획
다음 단계는 "처 음 쌓인 데이터로 개선 한 가지를 고르는 것"입니다.
기사별 공유 이미지 만들기: 지금은 모든 기사 링크에 같은 대표 이미지가 뜸. Meta Checker로 수정 전후를 남길 예정
GA4 데이터가 며칠치 쌓이면 서치 콘솔 검색어와 함께 페이지별 방문·행동 분석
GA4에서 테스트 완료와 뉴스레터 클릭을 주요 이벤트로 지정, 데이터 보관 기간 14개월로 변경
디자인 파일에 버전 표시를 붙여 브라우저 캐시 문제 막기
샘플로 채워 둔 코너와 음악 플레이리스트를 실제 콘텐츠로 교체
기사를 꾸준히 발행하면서 서치 콘솔 색인 수 변화 기록
다국어 페이지는 외국인 독자를 겨냥 때 핵심 페이지 한 쌍부터 만들어 볼 생각입니다.
