클로드(Claude)로 워드프레스 홈페이지 디자인을 통째로 바꿔봤습니다

이 블로그, 사실 얼마 전까지만 해도 워드프레스 테마(GeneratePress)를 그대로 깐 기본 상태였습니다. 콘텐츠는 꾸준히 쌓이는데 정작 첫인상은 여느 워드프레스 블로그와 다를 게 없어서 계속 마음에 걸렸어요. 그렇다고 디자이너를 따로 구하자니 비용과 시간이 부담스럽고, 제가 직접 CSS를 하나하나 손보자니 어디서부터 시작해야 할지 막막했습니다. 그러던 중 클로드(Claude)한테 “홈페이지 디자인 좀 바꿔볼 수 있을까?”라고 가볍게 물어본 게 시작이었는데, 실제로 시안을 받는 것부터 실제 사이트에 반영하고 세부적으로 다듬는 것까지 전 과정을 맡겨서 진행해봤습니다. 코드를 전혀 모르는 제가 겪은 과정을 최대한 그대로 정리해봤으니, 비슷한 고민이 있으신 분들께 참고가 됐으면 합니다.

1. 시안부터 받아봤습니다

바로 코드를 고치는 대신, 클로드가 먼저 방향이 뚜렷하게 다른 시안 3개를 아티팩트 화면에 실제 홈페이지처럼 그려서 보여줬습니다. 막연히 색상이나 폰트를 말로 설명 듣는 게 아니라 실제 화면처럼 눈으로 비교할 수 있어서 고르기가 훨씬 수월했어요. 제안받은 세 방향은 이랬습니다.

• A. 미니멀 에디토리얼 — 세리프 헤드라인과 여백 위주의 잡지 스타일 레이아웃. 테라코타 포인트 컬러 하나로 차분하고 신뢰감 있는 톤을 냈습니다.
• B. 다크 테크 — 다크 배경에 시안(cyan) 포인트, 모노스페이스 라벨을 섞어 개발자·테크 매니아 느낌을 강조했습니다.
• C. 따뜻한 모던 — 라운드 카드와 코랄 톤을 활용해 친근하고 정돈된 느낌을 낸 시안입니다.

이 중에서 저는 “따뜻한 모던” 쪽을 골랐습니다. 이 블로그 슬로건이 “테크 입문자를 위한 친절한 기술연구소”인데, 라운드 카드와 코랄 톤이 그 느낌과 가장 잘 어울린다고 생각했거든요. 다크 테크 쪽도 매력적이긴 했지만 입문자를 대상으로 하는 블로그 톤과는 살짝 거리가 있어서 제외했습니다.

2. 실제 사이트에 바로 반영

여기서부터가 진짜 재밌었는데, 클로드가 브라우저를 직접 열어서 워드프레스 관리자 화면(Customizer)에 들어가더니 제가 쓰는 GeneratePress 테마의 실제 CSS 클래스 구조를 하나하나 살펴보고, 거기에 맞는 커스텀 CSS를 짜서 “추가 CSS” 항목에 넣어줬습니다. 플러그인을 새로 깔거나 테마 파일을 직접 건드리는 게 아니라 커스텀 CSS만 추가하는 방식이라, 나중에 마음에 안 들면 그 코드만 지우면 원래 상태로 바로 되돌릴 수 있다는 점이 특히 안심됐습니다. 첫 번째 글은 코랄 배경의 큼직한 히어로 영역으로, 나머지 글들은 흰색 라운드 카드 3열 그리드로 자동 배치되도록 만들었습니다.

히어로 아래로는 예전처럼 글이 세로로 쭉 나열되는 대신, 카드 형태로 정돈되어 한눈에 훑어보기 좋아졌습니다. 특히 사진 위주로 훑어보는 방문자에게는 이 변화가 꽤 체감이 클 거라고 생각합니다.

3. 세부 수정도 말로만 하면 끝

처음 적용하고 나서 몇 가지 아쉬운 점이 있었는데, 그것도 그냥 채팅으로 이야기하니 바로바로 고쳐졌습니다.

• 사이드바 광고 이미지가 파란색이라 전체 톤이랑 안 맞아서 “주황 계열로 바꿔줘”라고 했더니, 이미지 파일 자체를 새로 그리는 대신 CSS 필터(hue-rotate)로 색조만 자연스럽게 바꿔줬습니다. 원본 파일은 그대로 남아 있어서 나중에 다시 바꾸고 싶으면 필터 값만 조정하면 됩니다.
• 휴대폰으로 보니 메인 글씨가 너무 커서 깜짝 놀랐는데, “모바일은 줄여줘” 한마디에 화면 크기별로 제목 크기를 다시 조정해줬습니다.
• 그 다음엔 데스크탑에서도 조금 커 보여서 추가로 줄여달라고 하니 그것도 바로 반영됐습니다.
• 다른 글들의 카드 썸네일도 정리해달라고 했더니, 세로로 긴 스크린샷이 억지로 확대되면서 글자만 크게 잘려 보이던 썸네일들을 찾아서 다시 손봐줬습니다. 룰렛 게임 글은 여백 없이 휠 그래픽만 꽉 차게 다시 잘랐고, 로고나 아이콘이 과하게 확대되던 글들은 여백 있는 카드 형태로 다시 만들어 올렸습니다. 본문에 들어간 원본 이미지는 그대로 두고 대표 이미지만 바꾼 거라 글 내용에는 영향이 없습니다.

중간중간 실제로 게시하기 전에 “지금 게시할까요, 미리보기만 볼까요?”라고 먼저 물어봐준 것도 좋았습니다. 덕분에 실수로 이상한 디자인이 바로 공개되는 일은 없었어요.

비슷하게 해보고 싶은 분들을 위한 팁

이 과정을 겪으면서 느낀, 코드를 몰라도 시도해볼 만한 팁 몇 가지를 정리해봤습니다.

• 테마 파일을 직접 건드리지 말고 “추가 CSS”부터 활용하기 — 워드프레스 커스터마이저에는 대부분 “추가 CSS” 항목이 있습니다. 여기에 코드를 넣는 방식이면 실수해도 그 부분만 지우면 원상 복구가 되니 훨씬 안전합니다.
• 말로 설명하기보다 화면으로 먼저 비교하기 — “세련되게 해줘” 같은 추상적인 요청보다, 시안 여러 개를 실제 화면처럼 눈으로 보고 고르니 방향을 정하기가 훨씬 쉬웠습니다.
• 한 번에 다 바꾸려 하지 말기 — 히어로 영역, 카드 목록, 모바일 화면 순서로 하나씩 확인하면서 넘어가니 중간에 이상해져도 어느 단계에서 문제가 생겼는지 바로 알 수 있었습니다.

Q. 워드프레스 초보자도 따라 할 수 있나요?
네. 저도 이번에 처음으로 “추가 CSS”라는 메뉴가 어디 있는지 알았을 정도로 초보였는데, 직접 코드를 짤 필요 없이 원하는 부분을 말로 설명하고 결과를 눈으로 확인하는 방식이라 큰 어려움은 없었습니다.

Q. 테마를 바꾸면 디자인이 다시 초기화되나요?
테마 자체를 바꾸지 않고 같은 테마(GeneratePress) 위에 커스텀 CSS만 얹은 방식이라, 테마 업데이트가 있어도 디자인이 통째로 사라지지는 않았습니다. 다만 테마를 완전히 다른 테마로 교체하면 커스텀 CSS도 다시 손봐야 할 수 있습니다.

정리하며

디자인 시안을 받아보는 것부터, 실제 사이트에 CSS로 반영하고, 모바일 대응까지 다듬는 과정을 전부 대화로만 진행했습니다. 코드를 몰라도 “이 부분이 마음에 안 든다”만 정확히 말할 수 있으면 되는구나 싶었던 경험이었습니다. 다음에는 카테고리 페이지나 단일 글 페이지 디자인도 같은 방식으로 손봐볼 계획입니다. 진행 상황은 이어서 공유하겠습니다.