Claude Code

  • fire-your-seo-agency 스킬로 4개 블로그 자동 SEO 최적화한 후기

    fire-your-seo-agency 스킬로 4개 블로그 자동 SEO 최적화한 후기

    이번에 Claude Code로 fire-your-seo-agency라는 스킬을 설치하고 블로그 4개에 SEO를 한꺼번에 적용했다. 중간에 파일이 세 번 중복으로 받아지는 해프닝도 있었고, 생각보다 빠르게 끝났다. 경험한 것 그대로 적는다.

    fire-your-seo-agency 스킬이 뭔데? 5가지를 한 번에 본다는 게 무슨 뜻일까?

    이 스킬의 이름을 처음 봤을 때 “SEO 대행사를 해고해라”라는 뜻이라는 걸 바로 알아챘다. 이름부터 꽤 직설적이다.

    설치하고 싶었던 이유는 단순했다. 이 스킬 하나가 아래 다섯 가지를 한꺼번에 진단하고 고쳐준다고 했기 때문이다.

    • SEO(Search Engine Optimization, 검색엔진 최적화) — 구글 같은 검색엔진에 잘 노출되도록 글과 구조를 다듬는 작업
    • AEO(Answer Engine Optimization, 답변엔진 최적화) , 검색 결과에서 바로 답변으로 뜨도록 최적화하는 방식
    • GEO(Generative Engine Optimization, 생성형 엔진 최적화) , ChatGPT 같은 AI가 답변할 때 내 콘텐츠를 인용하도록 최적화하는 방식
    • LLMO(Large Language Model Optimization, 대형 언어모델 최적화) , AI 언어모델이 내 글을 더 잘 이해하고 활용하도록 다듬는 것
    • 네이버 노출 , 네이버 검색에서 잘 걸리도록 최적화하는 작업

    다섯 가지를 따로 따로 챙기려면 도구도 각각 써야 하고, 시간도 각각 든다. 그걸 스킬 하나로 묶어준다는 게 핵심이다. 궁금해서 바로 설치해달라고 했다.

    ‘말 안 해도 알아서 해줘’라고 한 이유, 반복 작업의 부담감

    블로그를 운영하다 보면 신경 써야 할 게 한두 가지가 아니다. 글 쓰는 것 자체도 일인데, 그 글이 검색에 잘 뜨는지 확인하고, 제목 태그는 맞는지, 메타 설명(meta description, 검색 결과에서 제목 아래 뜨는 짧은 요약 글)은 채워져 있는지까지 매번 챙기는 건 솔직히 귀찮다.

    “SEO 해줘”라고 매번 말하는 것도 결국 반복이다. 한 번 설치해뒀으면 글을 올릴 때마다 자동으로 챙겨주는 게 맞다고 생각했다. 그래서 처음부터 “말 안 해도 알아서 적용해줘”라고 정리해서 요청했다.

    이게 게으른 건지 효율적인 건지는 모르겠다. 다만 반복 작업에 쓰는 시간을 줄이고 싶었던 건 사실이다.

    1개 블로그가 아닌 4개 블로그 전부에 적용한 이유

    블로그가 4개다. 주제가 각각 다르고, 독립적으로 운영하고 있다.

    처음엔 테스트 삼아 하나만 적용할까도 생각했다. 근데 금방 판단을 바꿨다. 하나만 적용하면 나머지 세 개는 결국 나중에 또 따로 손을 봐야 한다. 그건 지금 귀찮음을 미루는 것뿐이다.

    이왕 하는 거 다 적용하는 게 나중에 편하다. “다 적용해줘”라고 한 줄로 정리했다. 결과적으로 이 판단은 맞았다.

    파일이 3번 중복으로 받아진 문제

    스킬을 설치하는 과정에서 이상한 일이 있었다. 다운로드 폴더(컴퓨터에서 파일이 저장되는 기본 폴더)를 열어보니 같은 파일이 세 개 들어 있었다.

    이건 좀 웃겼다.

    fire-your-seo-agency 스킬 설치 화면 ,  다운로드 폴더 확인

    위 화면처럼 동일한 파일명으로 세 개가 나란히 쌓여 있었다. 왜 세 번이나 받아진 건지 정확한 원인은 파악하지 못했다. 버튼을 여러 번 눌렀을 수도 있고, Claude Code 쪽에서 재시도(retry, 실패했을 때 다시 시도하는 것)가 반복됐을 수도 있다.

    실제로 문제가 생긴 건 아니었다. 중복 파일 두 개를 지우고 하나만 남겨서 진행하면 된다. 다만 초보자라면 “세 개 중 어느 게 제대로 된 파일이지?”라고 헷갈릴 수 있다.

    이 상황에서 원칙은 하나다. 파일 내용이 동일하다면 어느 것을 써도 상관없다. 파일명이 똑같고 용량도 같다면 중복이다. 두 개는 지워라.

    초보 개발자도 따라 할 수 있는 자동 적용 순서

    실제로 내가 진행한 순서를 기준으로 정리한다. 인터뷰에서 확인된 내용만 적는다.

    1. Claude Code에서 fire-your-seo-agency 스킬을 설치 요청한다.
    2. 다운로드 폴더를 열어 파일이 정상적으로 받아졌는지 확인한다.
    3. 중복 파일이 있다면 하나만 남기고 나머지는 삭제한다.
    4. 적용할 블로그가 여러 개라면 처음부터 “전부 다 적용해줘”라고 명시한다.
    5. “매번 말 안 해도 자동으로 적용해줘”라고 한 번에 요청한다.

    주의할 점이 있다.

    • 블로그가 여러 개라면 각각의 이름이나 URL(인터넷 주소)을 미리 정리해서 한 번에 넘겨야 한다. 하나씩 따로 말하면 결국 반복이다.
    • 중복 파일은 반드시 정리하고 넘어가야 한다. 그냥 두면 나중에 어느 파일이 실제로 적용된 건지 추적하기 어려워진다.
    • “알아서 해줘”라고 했다고 해서 완전히 손을 놓으면 안 된다. 처음 한 번은 결과를 직접 확인해야 한다.

    지금까지 실제로 바뀐 것들

    지금 시점에서 바뀐 건 이거다. 스킬이 설치됐고, “말 안 해도 알아서 적용해줘”라는 규칙이 4개 블로그 전부에 걸렸다. 매번 “SEO 해줘”라고 말할 필요가 없어진 것 자체가 편하다.

    다섯 가지를 따로 챙기지 않아도 된다는 것도 실질적인 변화다. 특히 GEO나 LLMO는 따로 도구를 찾아서 적용하기가 까다로운 영역인데, 스킬 하나로 묶여서 처리되는 건 낫다.

    다만 한 가지는 분명히 짚고 넘어간다. 규칙을 걸어놨다고 해서 검색 순위가 바로 오르는 건 아니다. 이제부터 블로그 작업을 할 때마다 배경에서 진단·수정이 돌아가는 거고, 실제로 검색에 노출되는 결과는 시간이 걸린다. 이걸 착각하면 나중에 실망한다.

    지금은 규칙을 걸어놓은 상태로 각 블로그에 글을 계속 올리면서 변화를 지켜보는 중이다. 수치로 확인할 수 있는 변화가 생기면 그때 다시 정리할 생각이다.

    이 문제는 워드프레스 SEO 버그 5개 총정리 글에도 다른 4개 사례와 함께 정리해뒀다.

  • Claude Code로 UI 재설계하면서 배운 AI 협업 꿀팁과 함정

    Claude Code로 UI 재설계하면서 배운 AI 협업 꿀팁과 함정

    Claude Code 사용법을 실전에서 익혔다. Claude Code로 블로그 UI를 처음 손봤다. 홈 화면 재설계, 스크롤 목차, 로봇 로고 브랜딩까지 한꺼번에 작업했다. 빠르지 않았다. 하지만 혼자 했으면 못 끝냈을 작업을 끝냈다.

    Claude Code 사용법, UI를 직접 만들어보니 어땠나?

    Claude Code는 AI(인공지능) 기반 코딩 도구다. 터미널(terminal, 텍스트로 컴퓨터에 명령을 내리는 창)에서 명령어를 치면, AI가 코드를 직접 읽고 수정하고 실행까지 해준다. 에디터(editor, 코드를 작성하는 프로그램)를 오가며 복사 붙여넣기 할 필요가 없다.

    이번에 작업한 항목은 세 가지였다. 홈 화면 레이아웃(layout, 화면 구성 방식) 재설계, 글 목록을 따라다니는 스크롤 목차, 그리고 블로그 로고 교체. 규모가 작지 않았다.

    Claude Code로 홈 화면 카드 그리드 재설계, 스크롤 따라다니는 목차, 로봇 로고+파비콘까지 브랜딩 다시 한 후기 스크린샷 1

    재설계를 마친 지금 홈 화면이다. 글 목록이 카드 그리드로 정리됐다.

    처음엔 속도가 붙는 느낌이었다. “홈 화면 카드 간격 늘려줘”, “목차 위치 고정해줘” 같은 말만 해도 AI가 코드를 찾아서 고쳐줬다. 근데 작업이 길어질수록 문제가 생기기 시작했다.

    텍스트 안 보임, 위치 계산 오류… 실제로 마주친 버그들

    제일 시간을 잡아먹은 버그는 두 가지였다. 텍스트가 안 보이는 문제, 그리고 요소(element, 화면을 구성하는 개별 블록) 위치 계산 오류.

    텍스트가 안 보이는 건 CSS(Cascading Style Sheets, 화면의 색상·크기·위치를 정하는 코드) 문제였다. 배경색이랑 글자색이 같아져버리는 식이다. 눈에 안 보이니까 버그인지도 한참 몰랐다. 위치 계산 오류는 더 번거로웠다. 스크롤 목차가 엉뚱한 곳에 붙거나, 화면 밖으로 튀어나갔다.

    Claude Code로 홈 화면 카드 그리드 재설계, 스크롤 따라다니는 목차, 로봇 로고+파비콘까지 브랜딩 다시 한 후기 스크린샷 2

    새로 만든 헤더다. 로봇 로고와 카테고리 메뉴가 나란히 붙었다.

    이런 버그들은 Claude Code한테 증상을 설명하면 고쳐줬다. 완전히 못 고친 건 아니다. 다만 시간이 걸렸다. “텍스트가 안 보여”라고 말하면 원인을 찾고, 수정하고, 다시 확인하는 과정을 반복해야 했다. 빠른 척하지만 한 번에 되는 경우는 드물었다.

    모르는 버그가 더 있을 수 있다는 것도 문제다. 눈에 보이는 버그는 고칠 수 있다. 눈에 안 보이는 버그는 존재 자체를 모른다.

    AI가 기억을 못 하는 문제에 대처한 방법

    이게 진짜 스트레스였다.

    Claude Code는 대화 맥락이 길어지면 앞에서 한 말을 잊는다. 정확히는 잊는다기보다 우선순위가 밀린다. 내가 “이 스타일은 건드리지 마”라고 했어도, 나중에 다른 수정을 요청하면 그 스타일을 다시 바꿔놓는 경우가 생겼다.

    더 황당한 경우도 있었다. 내가 특정 레퍼런스를 요청했는데, AI가 그걸 무시하고 자기가 찾은 걸 벤치마킹해버렸다. 내 요구사항이 아니라 AI가 판단한 방향으로 가버린 거다. 이건 버그인지 특성인지도 모르겠다.

    Claude Code로 홈 화면 카드 그리드 재설계, 스크롤 따라다니는 목차, 로봇 로고+파비콘까지 브랜딩 다시 한 후기 스크린샷 3

    글을 스크롤하면 옆에 목차가 따라다니고, 지금 읽고 있는 항목이 강조 표시된다.

    그래서 이렇게 대처했다.

    • 작업 단위를 작게 쪼개야 한다. 한 번에 많은 걸 요청하면 맥락이 흔들린다.
    • 중요한 조건은 매 요청마다 반복해서 명시해야 한다. 한 번 말했다고 AI가 기억한다고 믿지 마라.
    • AI가 자의적으로 바꾼 부분이 없는지 결과물을 꼭 직접 확인해야 한다. 확인 없이 넘어가면 나중에 더 꼬인다.
    • 레퍼런스를 요청할 때는 URL(인터넷 주소)이나 구체적인 예시를 함께 줘야 한다. 막연하게 “이런 느낌으로”는 AI 마음대로 해석된다.

    궁극적으로는 버그를 스스로 찾아서 고치는 AI를 원하는데, 지금 Claude Code는 거기까지는 못 간다. 내가 발견한 것만 고친다. 이 한계는 명확히 알고 써야 한다.

    로봇 로고를 선택한 이유: AI 시대를 표현하다

    로고를 바꿨다. 이전 로고 얘기는 길게 안 한다. 중요한 건 왜 로봇으로 바꿨냐는 거다.

    지금이 AI 시대다. 이 블로그도 AI 도구를 활용하는 내용을 다룬다. 그걸 가장 직관적으로 보여주는 이미지가 로봇이라고 판단했다. 복잡한 이유는 없다.

    Claude Code로 홈 화면 카드 그리드 재설계, 스크롤 따라다니는 목차, 로봇 로고+파비콘까지 브랜딩 다시 한 후기 스크린샷 4

    최종적으로 정한 로봇 로고 아트웍이다.

    스타일 방향은 Claude Code가 몇 가지 후보를 제안했고, 그중에서 로봇 아이콘을 직접 골랐다. AI 시대를 표현하는 데 제일 직관적인 이미지라고 판단했다. 지금 보니 잘 고른 것 같다.

    로고 작업 자체는 다른 버그들에 비해 순탄했다. 방향이 명확하면 AI도 잘 따라온다. 방향이 흐릿할 때 문제가 생긴다.

    완성 후 느낀 점: 완벽함보다는 계속된 개선이 정답

    버그 때문에 시간은 오래 걸렸다. 하지만 완성은 했다.

    완성된 걸 보고 “완벽하다”는 생각은 안 들었다. 완성인지 미완성인지도 솔직히 아직 모른다. 지금은 만족스럽다. 근데 계속 쓰다 보면 만족스럽지 못한 부분이 또 나올 거다. 그게 당연한 과정이다.

    Claude Code로 홈 화면 카드 그리드 재설계, 스크롤 따라다니는 목차, 로봇 로고+파비콘까지 브랜딩 다시 한 후기 스크린샷 5

    워드프레스에 등록된 로봇 파비콘이다. 브라우저 탭에 이렇게 뜬다.

    지금은 계속 사용하면서 버그를 잡고 있다. 더 유용한 기능이나 플러그인이 있는지도 알아보는 중이다. Claude Code도 계속 쓰면서 어떻게 하면 더 잘 쓸 수 있는지 파악하고 있다.

    AI 도구는 만능이 아니다. 기억을 못 하고, 자의적으로 판단하고, 눈에 안 보이는 버그는 그냥 둔다. 그걸 알고 쓰는 것과 모르고 쓰는 건 결과가 다르다. 다음 작업은 이번에 파악한 한계를 기준으로 접근할 생각이다.

    워드프레스 템플릿을 직접 고친 다른 사례는 관련 글 카드로 바꾸다 만난 버그 3개, 워드프레스 템플릿 직접 수정기에도 있다.