워드프레스 설정, Claude와 함께한 코딩 에이전트, 바이브코딩 맛보기

블로그를 시작하기로 결심했습니다.

지난 글에서 보았듯이, 먼저 네이버 블로그로 시작했다가, 좀 더 자유롭게 커스터마이징이 가능한 워드프레스로 옮겨오기로 했습니다. 개인적으로 전산학을 전공했고, 소프트웨어, AI 관련 업무를 오래 해온 터라, 대수롭지 않게 생각했습니다. 예전에 다 해본 일들이었으니까요.

이번 글에서는 워드프레스 블로그 개설 관련된 전반적인 과정을 기록합니다. 제가 처음 블로그를 운영했던 건, 약 20년 전입니다. 대학원생 시절에 태터툴즈(Tattertools)라는 설치형 블로그를 이용했었는데, 이것 저것 많이 배울 수 있었습니다. 이후, 티스토리가 태터툴즈 기반으로 가입형 블로그 서비스를 시작하면서 자연스럽게 티스토리로 이주했습니다. … 더 읽기

워드프레스 블로그 개설 후기

그런데 호스팅을 완료하고 처음 관리자 화면에 들어가는 순간, 잠깐 멘붕이 왔습니다.

테마는 뭘로 할지, 플러그인은 뭘 깔아야 할지, 커스터마이징은 어디서부터 시작해야 할지…
테마 설정 수준에서 조정하는 것부터 CSS, HTML, PHP 코딩까지 선택의 폭이 너무 넓었습니다.
제가 아무리 충분한 지식과 경험을 했다고 한들, 현재는 오랫동안 실무를 하지 않은 시니어 엔지니어일 뿐이었죠.

결국 AI의 도움을 받기로 했습니다. 그 중 Claude를 선택했고, 이 글에서는 워드프레스 설정 과정을 기록하였습니다.

① 일하는 방식 — Human In The Loop
② 테마 선택 — 대화 기반 활용
③ 테마 커스터마이징 — 컴퓨터 직접 제어, Claude in Chrome
④ 플러그인 구성 — 멀티 모달 대화, 이미지로 피드백
⑤ 글 목록 페이지 — 공부시키고, 샘플 만들고, 단계적 프롬프팅
⑥ 페이스북 미리보기 403 문제 — 가설과 검증의 반복 작업
⑦ 기존 블로그 글 이전 및 콘텐츠 작업 — 리뷰어로서의 AI
⑧ 향후 계획 및 느낀점 — 바이브코딩을 향해

① 일하는 방식 — Human In The Loop

작업을 시작하면서, 처음에는 직접 코드를 건드리게 될 것이라 생각하지 않았습니다.
네이버나 다른 블로그처럼 웹 관리자 화면에서 설정하는 수준으로만 생각했습니다.

그러다 보니 자연스럽게 HITL(Human In The Loop) 방식이 됐습니다.
진행할 일이 생기면 Claude에게 먼저 묻고, Claude의 답에 따라 필요한 조치를 하고, 결과를 다시 피드백하면 Claude가 다음 방향을 제시하는 구조였습니다.

Claude가 Claude in Chrome 확장을 통해서 직접 PC를 제어하기도 했고, 제가 스크린 샷과 설명을 전달하면 Claude가 상황을 판단하고 가이드를 줬습니다.

기본적인 작업 우선순위는 아래와 같았습니다. Claude는 이 우선순위를 잘 따라줬습니다.

설정(Setting)으로 해결 — 가능하면 코드 없이
CSS로 해결 — 스타일 수준에서 처리
HTML/PHP 코딩으로 해결 — 그래도 안 될 때

무조건 코드를 먼저 제시하지 않았고, 설정이나 CSS로 가능한 방법을 먼저 찾았습니다.

② 테마 선택 — 대화 기반 활용

처음엔 기본 테마를 활용할까 잠시 고민도 했지만 여러 조건을 검토한 끝에 GeneratePress 테마를 선택했습니다.
알려지기로는 GeneratePress 테마가 상대적으로 가벼운 편이고, 커스터마이징 하기도 편하다고 합니다.
무엇보다도 많은 다른 블로그에서 사용 중인 테마로, 관련 정보를 얻기에 유리할 듯 하여 선택하게 되었습니다.

하지만, 역시 Setting을 통해 조정 가능한 것들과 추가CSS 반영 만으로는 원하는 대로 꾸미기는 쉽지 않았습니다.

Claude는 CSS만으로는 어려우니, PHP 수정을 제안했고,
유지 보수 관점에서 원본 테마 파일을 직접 건드리면 테마 업데이트 시 좀 귀찮아진다는 문제가 있었습니다.

Software Engineering 분야 전문가로서 그런 방법을 오케이 할 순 없었죠.

그래서, Claude에게 “원본을 유지하면서 수정하는 방법이 있냐”고 물었더니, Child Theme 개념을 알려줬습니다.
부모 테마는 그대로 두고, 자식 테마에서 커스터마이징하면 업데이트에 영향을 받지 않는 구조입니다. 일종의 상속 이죠.

Child Theme 생성도 여러 방법이 있었는데, 저는 Child Theme Configurator 플러그인으로 생성했습니다.

최종 파일 구조:

generatepress-child/
  style.css                    ← 커스텀 CSS
  functions.php                ← 훅/필터/JS 삽입
  archive.php                  ← 아카이브 루프 커스텀
  index.php                    ← 홈/월별 루프 커스텀
  content-archive-custom.php   ← 글 카드 템플릿

③ 테마 커스터마이징 — 컴퓨터 직접 제어, Claude in Chrome

테마를 고치는 일 역시 만만한 작업이 아니었습니다.

GeneratePress 테마 무료버전에서는 Setting만으로 할 수 있는 일들이 별로 없어서, 우선 CSS를 추가하게 되었습니다.

CSS 우선순위

대표적으로 애를 먹은 이슈는 사이트 타이틀 폰트 크기였습니다. CSS를 아무리 수정해도 반영이 잘 안되더라구요.

/* 이것도 안 됨 */
.main-title { font-size: 15px; }

/* 이것도 안 됨 */
h1.main-title, h1.main-title a { font-size: 15px !important; }

/* 이것도 안 됨 */
body h1.main-title, body h1.main-title a { font-size: 15px !important; }

Claude in Chrome을 통해 Claude가 직접 Chrome을 제어해서 실제 적용된 스타일 값을 확인했습니다.
CSS 규칙 전체를 스캔했고, 확인 결과 테마 Setting에서 입력한 값이 다른 스타일보다 우선순위가 높아서 생긴 일이었습니다.

사실, HTML, CSS 좀 해본 분들은 아시겠지만, CSS 우선순위가 한번 꼬이면 정말 답이 없죠.
Claude가 없었더라면, 원인 파악하는 데만 꽤 오랜 시간이 소요 되었을 것으로 생각됩니다.

이미지 하단 여백도 같은 패턴이었습니다. figure를 타겟으로 잡았다가 계속 실패하다가, Claude in Chrome으로 DOM 구조를 확인하니 부모 div.wp-block-image에도 margin: 0이 강제 적용되어 있었습니다. figure가 아닌 부모 div를 타겟으로 바꾸니 해결됐습니다.

썸네일 제어

썸네일 관련해서는 글 목록과 블로그 본문에서 각각 다르게 처리하고 싶었는데, 테마 Setting에서는 적용이 불가능했습니다.
결국, Coding을 통해 처리하기로 하고 Claude의 도움을 받아 PHP 훅으로 처리했습니다. 훅 위치를 세 번 바꾼 끝에 generate_after_entry_header에서 정상 동작했네요.

add_action('generate_after_entry_header', function() {
    if (has_post_thumbnail() && !is_singular()) {
        the_post_thumbnail('large', ['style' => 'width:100%;height:auto;']);
    }
});

그나마 CSS는 바로 이해가 되긴 했지만, Coding의 경우 Claude 도움 없이 혼자 처리하는 건 쉽지 않았을 것 같네요.

④ 플러그인 구성 — 멀티 모달 대화, 이미지로 피드백

워드프레스 설정의 큰 허들 중 하나는 플러그인 설정입니다.
단, 플러그인을 너무 많이 설치하면 성능을 떨어뜨릴 수 있으므로, 꼭 필요한 것만 선택해 설치하는 것이 중요합니다.

Claude에게 기본적으로 설치된 플러그인 목록을 분석하도록 요청했고, 불필요하거나 중복되는 것들을 정리했습니다.
제거한 플러그인 목록은 아래와 같습니다.

Really Simple Security 삭제 — NinjaFirewall + Login Lockdown + 2FA로 이미 커버. 비활성 상태의 보안 플러그인 중복은 충돌 위험
안녕 달리 삭제 — WordPress 기본 샘플

물론 현재는 더 많은 플러그인들을 추가로 설치했는데,
사전에 Claude에게 필요한 기능을 물어보면, 몇 가지 플러그인을 추천해줬고, 비교/분석을 통해 선택해 설치하고 있습니다.

또한, 플러그인을 설정하는 과정에서도 Claude를 활용 중입니다. 다음은 대표 사례 두가지입니다.

Visual Link Preview 커스터마이징

블로그 글에 외부 URL을 포함하면 링크 미리보기를 생성할 수 있습니다.
그런데 워드프레스에 기본적으로 들어있는 기본 wp-embed 블록의 경우 iframe으로 렌더링되어서 외부 CSS 적용이 어려웠습니다. 그래서 유사한 기능을 제공해주는 Visual Link Preview을 설치했습니다.

플러그인 안에 포함된 템플릿 에디터와 CSS 변경을 통해서 원하는 모양의 미리보기를 구성할 수 있었고,
최종 아래와 같은 형태로 표시됩니다.

30년 운전 경력자의 테슬라 모델Y 후기, 50일간, 약 4,000km 실 주행. 전기차와 SDV의 패러다임 전환을 직접 경험했습니다.

테슬라 모델Y 후기 ① – 구매 결정과 전반적인 후기 | ckarch

Rank Math SEO 설정

블로그 글들이 검색엔진에서 잘 검색되도록 하기 위해서 RankMath SEO 플러그인을 설치했습니다.

SEO(검색 엔진 최적화)란,
구글, 네이버 등 검색 엔진에서 특정 키워드 검색 시 웹사이트를 상위에 노출해 자연 유입 트래픽을 높이는 기술입니다. 고품질 콘텐츠 생성, 온페이지 기술 최적화, 백링크 구축을 통해 검색 엔진과 사용자 모두에게 웹사이트의 가치를 인정받는 작업입니다.

플러그인을 설치하면, 마법사 형태로 설정을 하게 되는데,
이때는 각 단계 별 스크릿샷을 Claude에게 전달해 주고 그에 해당하는 가이드를 받아서 진행했습니다.

⑤ 글 목록 페이지 — 공부시키고, 샘플 만들고, 단계적 프롬프팅

글 목록이 나오는 페이지를 원하는 스타일로 바꾸고 싶어서, Claude와 함께 작업을 해보려고 했는데,
이때는 프롬프트를 작성하는 것 조차 쉽지가 않았습니다.

그래서 일단, 좀 더 쉬운 플러그인으로 먼저 샘플 페이지를 만들고, 그것을 기준으로 아카이브 페이지를 똑같이 만드는 방식을 이용했습니다.

플러그인 활용: Display Posts → List Category Posts

다양한 형태로 글 목록을 만들수 있는 플러그인은 꽤 종류가 많았고, 처음에는 Display Posts 라는 플러그인으로 작업을 했으나, 커스터마이징이 쉽지가 않아서, List Category Posts 플러그인을 이용했습니다.

현재 이 플러그인은 https://ckarch.kr/recent-posts/ 에 적용되어 있습니다.

이런 플러그인들은 보통 Short Code 를 이용해서 커스터마이징을 하게 됩니다.

간단한 형태의 요청에 대해서는 Claude가 별다른 추가 정보 없이도 잘 답변해 주었습니다.
그런데 제 요청이 좀 복잡해 지자 잘못된 대답을 하기 시작했고, 결국 플러그인 공식 문서를 주고 공부할 것을 지시했습니다.
이후 대답부터는 곧바로 정확한 파라미터 구조를 파악하고 해결 방법을 찾아냈습니다.

필요한 정보를 제때 제공하는 것이 중요합니다.

그리고, 플러그인을 활용하다 보니, DOM object가 고정이 되는 바람에, CSS 만으로 원하는 위치로 자리 잡는 게 쉽진 않았습니다. 결국 JavaScript 코딩을 이용해서 원하는 형태로 DOM 조작을 했습니다.

add_action('wp_footer', function() { ?>
<script>
document.querySelectorAll('.lcp_catlist li').forEach(function(li) {
    var title   = li.querySelector('.lcp_title');
    var cats    = li.querySelector('.lcp_cats');
    var date    = li.querySelector('.lcp_date');
    var author  = li.querySelector('.lcp_author');
    var thumb   = li.querySelector('.lcp_thumbnail');
    var excerpt = li.querySelector('.lcp_excerpt');
    var tags    = li.querySelector('.lcp_tags');

    if (cats) cats.innerHTML = cats.innerHTML.trim();

    var row1 = document.createElement('div'); row1.className = 'lcp_row1';
    if (cats)   row1.appendChild(cats);
    if (title)  row1.appendChild(title);
    if (author) row1.appendChild(author);
    if (date)   row1.appendChild(date);

    var left = document.createElement('div'); left.className = 'lcp_left';
    // ... 이하 생략
    li.innerHTML = '';
    li.appendChild(thumbDiv);
    li.appendChild(left);
});
</script>
<?php });

아카이브 페이지 통일

샘플 페이지가 완성된 후, “이것과 똑같이 아카이브 페이지를 만들어 달라” 고 요청했고, 몇 번의 대화 만에 완성됐습니다.
현재 이 글 목록 방식은, 첫화면, 카테고리, 태그 등 블로그 전체에 적용되어 있습니다.

⑥ 페이스북 미리보기 403 문제 — 가설과 검증의 반복 작업

보통 Social Network 에 글을 작성할 때 URL을 붙여 넣으면 미리보기가 작성됩니다.

링크드인, 스레드, 네이버 블로그 등은 문제가 없었는데, 유독 페이스북만 미리보기가 나오지 않았습니다.

이를 해결하기 위해 Claude와 함께 “문제 → 가설 → 테스트 → 배제 → 다음 가설” 을 반복했습니다.

먼저 자체적으로 아래와 같은 것들을 검토해 보았으나, 원인을 찾을 수 없었습니다.

OG 태그 문제 의심 → Rank Math 미리보기 정상, 링크드인 등 다른 Social Networks에서 정상 동작 중
캐시 문제 의심 → Facebook Crawler 캐시 초기화 시도했으나 해결 안 됨
플러그인 충돌 가능성을 고려하여, 플러그인 전체 비활성화 → 변화 없음
.htaccess, robots.txt 등 접근 권한 설정 점검 → 문제 없음
호스팅 설정 점검 → 문제 없음

이후 Facebook에서 보내는 요청이 워드프레스 앞 단, 즉 웹서버까지 잘 도달하는지 점검할 필요가 있다고 생각해서,
Claude에게 관련 방법을 찾으라고 요청하니, 별도의 PHP 파일을 생성하고 Log 남기기를 제안하였습니다.

Log 를 확인해 보니, Facebook 요청은 최초 1회는 웹서버까지 잘 도달하지만, 이때 403이 반환되고, 이후 Facebook Crawler는 추가 요청을 하지 않는 것으로 보였습니다. 결국 Facebook IP 대역에서만 403이 반환되는 상황이었던 거죠.

고객센터에서는 1차 대응으로 서버 위치를 이전해 주었으나, 잠시 정상화 된 후에 증상이 재발하였고,
저와 Claude가 테스트한 전체 데이터를 기반으로 업체의 대응을 요청했더니 방화벽의 설정 문제라는 대답을 들었습니다.
현재는 정상적으로 표시가 되고 있긴 하나 상황을 더 지켜봐야 할 것 같습니다.

이 과정에서 Claude가 없었다면, 사실 어떻게 대응해야 할지 좀 막막했을 것 같습니다. 초기 점검 포인트를 찾는 것부터, 업체 고객센터에 대응하는 것 까지요. 예를 들어, 고객센터에서 “페이스북 IP를 허용 목록에 추가하라”는 말도 안되는 답변에는 Claude가 수백 개 이상의 IP 대역을 모두 파악하는 건 현실적으로 불가능하고 User-Agent 기반 허용이 맞다는 논리를 제공해 재문의할 수 있었습니다.

⑦ 기존 블로그 글 이전 및 콘텐츠 작업 — 리뷰어로서의 AI

워드프레스 환경이 어느 정도 갖춰진 후, 기존 네이버 블로그 글들을 이전하는 과정이 필요했습니다.

제가 초안을 작성해서 Claude에게 리뷰를 요청하면, Claude는 보완할 부분과 어떻게 바꾸면 좋을지 가이드를 줍니다.
이후 검색엔진 친화적인 글을 만들기 위해 Rank Math SEO에 입력할 값들도 Claude가 초안을 작성해 주었습니다.

글 한 편당 평균 3~5회 반복했습니다.
“남은 이슈만” 이 핵심입니다. 이미 해결한 것을 반복해서 언급하지 않도록 지시하는 것이 편집 속도를 크게 높였습니다.
또 이게 마지막이라는 말과 함께 최종본을 전달하면, 정말 심각한 이슈들만 리뷰하는 모습을 보이기도 했습니다.

참고로, Claude와 작업을 하다 보니, 제 글쓰기 습관도 알게 되더군요. 예를 들면, 도입부에서 너무 빨리 결론을 내버리고 글을 시작한다거나, 글 마지막 부분에 메시지가 여러 줄에 거쳐 중복되는 등 Claude에게 자주 지적 받는 부분들을 통해 저를 돌아보는 계기도 되었답니다. ^^

SEO 작업의 경우도 Rank Math 항목별로 Claude가 초안을 잡고 제가 다듬었습니다.

Focus Keyword: 독자가 검색할 핵심 명사구 1개
추가 키워드: 본문에 자연스럽게 등장하는 연관어 3~5개
SEO 제목: 검색 의도에 맞춰 본문 제목과 별개로 검색 의도에 맞게 작성
메타 설명: 2문장 구조. 첫 문장 = 핵심 주장, 둘째 문장 = 독자가 얻을 것. 160자 내외

SEO 항목은 매 글 최종본 확정 후 일괄 산출했습니다.
초안 단계에서 잡으면 글이 바뀔 때마다 다시 해야 하기 때문입니다.

⑧ 향후 계획 및 느낀점 — 바이브코딩을 향해

지금까지는 대부분 과정에 제가 직접 개입하는 HITL 방식으로 진행했지만, 이제는 다음 단계로 넘어갈 계획입니다.

Git + VS Code + Claude Code 환경을 구축해서 진정한 바이브코딩 환경을 만들어 볼 예정입니다.
이번에 경험한 HITL 방식이 그 준비 단계였다고 생각합니다.

본격적인 바이브코딩까지는 아니었지만, 이번 경험 정도면 준 바이브코딩은 충분히 경험했다고 생각합니다.
생산성은 체감상 3~10배 좋아졌습니다.

중요한 건 단순히 Claude를 쓴다는 것이 아닙니다.

AI가 제공하는 말을 잘 이해하는 것이 핵심입니다.
전산학을 전공했고, 오랜 실무 경험이 있었기 때문에 Claude가 제시하는 코드와 구조를 빠르게 판단할 수 있었습니다.
비전문가였다면 같은 효과를 누리기 어려웠을 것입니다.

AI는 항상 최적해를 내지 않습니다. 잘 이끌어 가는 것이 중요합니다.
대화를 이어가다 보면 앞 대화를 조금씩 개선하는 방식으로 다음 대답이 나옵니다. 엉뚱한 방향이라고 판단되면 과감하게 “처음부터 다시 생각해” 를 지시했고, 답의 모순을 찾아 알려주거나, 불필요하거나 중복된 조치를 지적하면서 최적화를 유도했습니다. PL, Architect로서 의사결정을 하고 방향을 제시해본 경험이 여기서도 그대로 쓰였습니다.

AI에게 충분한 컨텍스트를 제공하는 것이 중요합니다. 관련 매뉴얼이나 자료, 예제를 충분히 제공하고,
필요하면 프롬프팅을 반복하며 결과의 품질을 높여야 합니다.

결론적으로, Claude는 재능은 출중하지만 경험이 부족한 주니어 엔지니어 같았습니다.
태권도장에 처음 온 흰 띠 초등학생인데, 검은 띠 고등학생이랑 붙어도 쉽게 이기는 슈퍼 재능을 가진 아이처럼요.

어떻게 지시하고 어떻게 피드백하느냐에 따라 결과는 완전히 달라집니다.
도구가 바뀌어도, 일을 이끄는 건 결국 사람입니다.

ChulJoo Kim (김철주).

워드프레스 설정 with Claude – 바이브코딩 경험

목차