Claude Code와 Chrome 확장프로그램으로 워드프레스 블로그를 만들었습니다.

Spread the love

요즘 AI가 코딩도 해주고, 그림도 그려주고, 글도 써준다는 이야기는 이제 익숙합니다.

그런데 AI가 제 크롬 브라우저를 직접 조작해서 워드프레스 블로그를 세팅해준다면 어떨까요?

사실 그동안 워드프레스를 이용해서 블로그를 운영해 보고 싶었지만 설치며 세팅이며 테마 엄두가 나지 않아 엄두를 내지 못했습니다.

저도 처음에는 반신반의했습니다. 그런데 실제로 해보니 정말 가능했습니다. 심지어 지금 이 글도 AI의 도움을 받아 정리하고 있습니다.

이번 작업을 하면서 가장 인상적이었던 점은, AI가 단순히 답변만 해주는 수준이 아니라 실제로 브라우저를 열고, 화면을 보고, 필요한 작업을 하나씩 수행했다는 점입니다.

사용한 도구

이번에 사용한 도구는 크게 두 가지입니다.

1. Claude Code

Claude Code는 Anthropic에서 만든 AI 코딩 에이전트입니다. 터미널에서 동작하며, 단순히 코드를 생성하는 수준을 넘어서 파일을 읽고 수정하고 명령을 실행하는 방식으로 실제 작업을 처리합니다.

2. Chrome 확장프로그램

이번 작업의 핵심은 여기에 있었습니다. Claude Code가 크롬 브라우저와 연결되어 웹페이지를 직접 보고, 클릭하고, 타이핑하고, 필요한 화면을 확인할 수 있었습니다.

이 두 가지가 결합되니, 터미널에서 AI에게 요청만 해도 워드프레스 관리자 페이지에 접속해서 설정을 변경하고, CSS를 입력하고, 메뉴를 정리하는 작업까지 수행할 수 있었습니다.

실제로 AI가 해준 것들

제가 직접 한 것은 많지 않았습니다. 웹 호스팅에 가입한것이 전부이며 Claude Code에게 웹 호스팅에 가입했는데 워드프레스를 설치해달라고 요청했어요.

그 이후에는 Claude가 필요한 작업을 순서대로 진행했습니다.

1. 컬러 스킴 설정

투자와 금융 느낌에 어울리는 네이비와 골드 조합을 제안하고, 이를 CSS 변수로 정리해 사이트 전반에 적용했습니다. 헤더, 버튼, 링크, 위젯, 푸터까지 전체적인 톤을 맞춰주는 방식이었습니다.

2. 히어로 배너 구성

홈페이지 상단에는 주식 차트 느낌이 나는 배경 이미지와 함께 슬로건, 부제 문구를 배치했습니다. 플러그인

을 쓰지 않고 CSS만으로 정리했다는 점도 흥미로웠습니다.

3. 메뉴와 카테고리 정리

투자, 수익화, 앱 개발, 일상기록, 생각정리 같은 카테고리를 만들고 메뉴에 배치했습니다. 블로그 방향에 맞게 구조를 먼저 잡아준 셈입니다.

4. 사이트 제목 변경

기존 제목 대신 더 브랜드처럼 보이도록 사이트 제목을 수정했습니다. 색상과 헤더 스타일에 맞춰 적용하니 사이트 분위기가 훨씬 정돈되어 보였습니다.

5. 홈페이지 설정 변경

정적 페이지로 되어 있던 홈 화면을 최신 글 목록 중심으로 바꾸고, 캐시 문제까지 함께 정리했습니다. 이런 부분까지 스스로 판단하면서 처리하는 점이 꽤 인상적이었습니다.

가장 놀라웠던 점

이번 작업에서 가장 놀라웠던 점은, AI가 실제 사람처럼 브라우저를 다룬다는 느낌을 줬다는 것입니다.

제가 옆에서 본 방식은 대략 이랬습니다. 화면을 확인하고, 필요한 버튼이나 입력창을 찾고, 클릭과 입력을 반복하면서 결과를 다시 확인하는 식이었습니다.

특히 워드프레스 커스터마이저에서 CSS를 입력할 때는 일반적인 방식으로 하나씩 입력하기보다, 더 효율적인 방법을 찾아 한 번에 적용하려고 시도하는 모습도 보였습니다.

완벽하지는 않았지만, 문제가 생겼을 때 다른 방법을 찾아가며 계속 해결하려는 점이 꽤 인상적이었습니다.

물론 시행착오도 있었습니다

AI라고 해서 모든 작업이 한 번에 깔끔하게 끝나는 것은 아니었습니다. 중간중간 예상하지 못한 문제들도 있었습니다.

  • CSS 내용이 길어지는 과정에서 입력이 매끄럽지 않았던 경우
  • 홈페이지 설정을 바꿨는데 캐시 때문에 바로 반영되지 않았던 경우
  • 메뉴를 수정하는 과정에서 브라우저가 멈추거나 예상대로 저장되지 않았던 경우

그렇지만 중요한 건, 그런 문제가 생겼을 때 다른 방법을 시도하면서 결국 해결 방향을 찾아간다는 점이었습니

다.

그리고 이 글도 AI의 도움을 받았습니다

사실 지금 읽고 계신 이 글도 Claude가 작성해주었어요. 나와 지금까지 한 일에 대해서 블로그에 정리하고 싶다고 말했습니다.

제가 블로그를 만드는 과정을 글로 써달라고 요청하자, Claude는 워드프레스 글 작성 화면을 열고 제목과 본문, 이미지, 카테고리 같은 요소를 함께 정리해주었습니다.

저는 옆에서 보면서 “이 부분은 조금 더 자연스럽게 써줘”, “이 표현은 바꿔줘” 정도의 피드백만 주면 됐습니다.

예전 같으면 직접 하나하나 만들고 수정해야 했을 일을, 이제는 AI와 함께 훨씬 빠르게 정리할 수 있게 된 셈입니다.

앞으로의 계획

이 블로그에서는 앞으로 크게 세 가지를 기록해보려고 합니다.

  1. 투자 기록 — 실제 투자 과정과 생각을 정리할 예정입니다.
  2. 앱 개발 — 안드로이드 앱을 만들면서 배우는 과정과 시행착오를 기록할 생각입니다.
  3. AI 활용 — Claude 같은 AI를 실생활과 작업에 어떻게 활용할 수 있는지, 실제 경험을 바탕으로 정리해보려고 합니다.

특히 AI 활용 부분은 단순한 소개가 아니라, 실제로 어디까지 도움이 되고 어디에서 한계가 있는지 솔직하게 기록해보려 합니다.


코딩을 잘 몰라도, 디자인 감각이 부족해도, AI에게 원하는 방향을 설명할 수만 있다면 블로그 하나 정도는 충분히 만들어볼 수 있는 시대가 된 것 같습니다.

물론 아직 완벽하지는 않고 손봐야 할 부분도 많습니다. 하지만 그것 역시 과정이라고 생각합니다. 하나씩 기록하면서 계속 다듬어가 보겠습니다.

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤