와분만에만든블로그자동진단기—협업실전시연

"내 블로그, SEO 점수가 몇 점일까?"

블로그 글을 열심히 쓰고 나면, 항상 드는 의문이 있습니다. "이 글, 구글에 잘 잡힐까?" 제목은 적당한 길이인지, 메타 디스크립션은 들어갔는지, 이미지에 alt 태그는 넣었는지 — 하나하나 체크하자니 귀찮고, 대충 넘어가자니 찝찝하죠.

그래서 오늘은 Claude와 함께 "내 블로그 SEO 자동 진단기"를 직접 만들어보겠습니다. URL 하나만 넣으면 주요 SEO 항목을 자동으로 체크해주는 간단한 웹 도구예요. 코딩을 몰라도 괜찮습니다. 처음부터 끝까지 Claude에게 시키면서 만드는 과정을 그대로 보여드릴 거니까요.

완성물 미리보기 — 이런 걸 만듭니다

먼저 완성된 모습부터 보고 가시죠. 우리가 만들 SEO 진단기는 이런 항목들을 자동으로 체크합니다.

진단 항목	체크 내용	왜 중요한가
페이지 제목(title)	존재 여부, 글자 수(30~60자 권장)	검색 결과에 표시되는 첫 번째 정보
메타 디스크립션	존재 여부, 글자 수(70~160자 권장)	검색 결과 제목 아래 요약 문구
H1 태그	존재 여부, 개수(1개 권장)	페이지의 핵심 주제를 검색엔진에 알림
H2~H3 구조	소제목 개수, 계층 구조	글의 논리적 구조를 검색엔진이 이해
이미지 alt 태그	alt 누락된 이미지 수	이미지 검색 노출 + 접근성 향상
내부/외부 링크	각각의 개수	사이트 구조와 신뢰도 판단 근거
모바일 뷰포트	viewport 메타태그 존재 여부	모바일 검색 순위에 직접 영향
페이지 용량	HTML 크기(KB)	로딩 속도와 사용자 경험

URL을 넣고 "진단" 버튼을 누르면 이 항목들이 쭉 나오고, 각각 ✅(양호) / ⚠️(개선 권장) / ❌(문제) 표시와 함께 구체적인 개선 방법까지 알려줍니다.

Step 1 — Claude에게 첫 번째 지시

만들기의 시작은 간단합니다. Claude에게 이렇게 말했습니다.

"블로그 URL을 입력하면 SEO 주요 항목을 자동으로 체크해서 결과를 보여주는 웹페이지를 만들어줘. HTML + JavaScript 한 파일로, 서버 없이 브라우저에서만 돌아가게."

핵심은 "서버 없이 브라우저에서만"이라는 조건입니다. 서버를 세우면 복잡해지니까, 프록시 API(allorigins 같은 무료 CORS 우회 서비스)를 활용해서 순수 클라이언트 사이드로 동작하게 했어요. 이렇게 하면 HTML 파일 하나만 열면 바로 쓸 수 있습니다.

Step 2 — 첫 결과물 확인, 그리고 수정 요청

Claude가 처음 만들어준 버전은 기본 기능은 돌아갔지만, 몇 가지가 아쉬웠습니다.

① 결과가 텍스트로만 나와서 한눈에 안 들어옴 → "각 항목마다 ✅/⚠️/❌ 아이콘을 넣고, 카드 형태로 보여줘"라고 수정 요청

② 개선 방법이 안 나옴 → "문제가 발견된 항목에는 구체적인 개선 팁을 함께 표시해줘"라고 추가 요청

③ 모바일에서 레이아웃이 깨짐 → "반응형으로 만들어줘. 모바일에서도 깔끔하게 보이게"라고 수정 요청

이런 식으로 결과를 보고 → 아쉬운 점을 말하고 → Claude가 수정하는 사이클을 3~4번 반복하면, 처음에 머릿속에 있던 모습에 거의 가까운 결과물이 나옵니다. 코드를 직접 수정할 필요 없이, "이 부분이 이상해"라고 말만 하면 됩니다.

Step 3 — 실전 테스트, 내 블로그로 돌려보기

완성된 진단기에 트렌드랩(trendlab.ai.kr) URL을 넣어봤습니다. 결과는?

✅ 양호: 페이지 제목(42자), H1 태그 1개, 모바일 뷰포트 설정 완료

⚠️ 개선 권장: 메타 디스크립션 미설정(Tistory 기본 테마 한계), 일부 이미지 alt 태그 누락

❌ 문제: 내부 링크 부족(글 간 연결이 약함)

이렇게 내 블로그의 SEO 현황이 숫자로 딱 보이니까, 뭘 먼저 개선해야 하는지가 바로 명확해집니다. "감으로 대충 괜찮겠지"에서 "데이터 기반으로 우선순위를 정하는" 접근으로 바뀌는 거죠.

AI 협업의 핵심 — "완벽한 첫 지시"보다 "빠른 반복"

이 과정에서 배운 가장 중요한 교훈이 있습니다. Claude에게 처음부터 완벽한 명세서를 줄 필요가 없다는 거예요. 대략적인 방향만 잡아서 먼저 결과를 받고, 거기서 "이건 좋은데 저건 고쳐줘"를 반복하는 게 훨씬 빠릅니다.

마치 디자이너에게 시안을 요청할 때와 비슷해요. 10페이지짜리 기획서를 써서 한 번에 완벽한 결과를 기대하는 것보다, 러프 시안을 빠르게 받고 "여기 색 바꿔줘, 이 글자 키워줘"를 3번 하는 게 결과가 좋잖아요? AI 협업도 똑같습니다.

직접 써보세요

이 글에서 만든 SEO 진단기 코드는 아래 첨부 파일로 공유합니다. HTML 파일 하나를 다운받아서 브라우저로 열면 바로 사용할 수 있어요. 본인 블로그 URL을 넣어보고, 어떤 항목이 ✅이고 어떤 항목이 ❌인지 확인해보세요.

그리고 결과를 보고 "이 항목도 추가해줘"라고 Claude에게 말하면? 여러분만의 맞춤형 SEO 도구가 됩니다. 이게 AI 시대의 도구 사용법이에요. 남이 만든 도구를 그대로 쓰는 게 아니라, AI와 대화하면서 내 필요에 맞는 도구를 직접 만드는 것이죠.

오늘의 핵심 요약

• Claude와 함께 "블로그 SEO 자동 진단기"를 처음부터 끝까지 만들어봤습니다
• 코딩 지식 없이도, "이렇게 만들어줘" → "이 부분 고쳐줘"를 반복하면 도구가 완성됩니다
• 진단 항목: 제목 길이, 메타 디스크립션, H태그 구조, 이미지 alt, 링크 수, 모바일 대응, 페이지 용량
• AI 협업의 핵심은 "완벽한 첫 지시"가 아니라 "빠른 결과 확인 + 반복 수정"
• 남이 만든 도구를 쓰는 시대에서, AI로 내 도구를 만드는 시대로 전환 중