블로그 디자인을 바꾸고 싶은데 코딩을 몰라도 괜찮아요. Claude에게 원하는 스타일을 말로 설명하면 CSS 코드를 만들어주고, 그 코드를 워드프레스 커스터마이저 → 추가 CSS에 붙여넣기만 하면 바로 적용됩니다.
블로그를 처음 만들었을 때는 괜찮았는데, 시간이 지나니 디자인이 조금 심심해 보이시나요? 디자인을 손보는 일은 어렵게 느껴지지만, 사실 코딩을 전혀 몰라도 Claude의 도움을 받으면 훨씬 수월해집니다. 오늘은 초보자 눈높이에서 블로그 디자인을 바꾸는 방법을 하나씩 정리해 드릴게요.
테마와 커스터마이저, 무엇이 다를까요?
워드프레스 디자인은 크게 두 가지로 나뉩니다. 테마(Theme)는 블로그의 전체적인 틀로, 집으로 치면 건물 구조와 같습니다. 커스터마이저(Customizer)는 그 테마 안에서 색상·글꼴·배경 등을 세부 조정하는 공간이에요. Claude는 주로 커스터마이저의 추가 CSS 영역에 넣을 코드를 만들어 주는 방식으로 디자인을 도와줍니다.
Claude에게 디자인 도움을 요청하는 법
채팅창에 이렇게 부탁해 보세요. “제 워드프레스 블로그의 글씨 크기를 좀 더 크게 만들고 싶어요. 커스터마이저의 추가 CSS에 넣을 코드를 만들어 주세요.” 그러면 Claude가 body { font-size: 18px; } 같은 코드를 만들어 줍니다. 이 코드를 그대로 복사해서 워드프레스에 붙여 넣으면 끝이에요. 원하는 결과를 구체적으로 말할수록 더 정확한 코드가 나옵니다.
커스터마이저에서 CSS 적용하기
Claude가 만들어 준 코드를 실제 블로그에 적용하는 순서는 다음과 같습니다. 어렵지 않으니 천천히 따라와 보세요.
- 워드프레스 관리자 화면에서 왼쪽 메뉴 “디자인 → 커스터마이즈”를 클릭합니다.
- 커스터마이저가 열리면 왼쪽 메뉴에서 “추가 CSS”를 찾아 클릭합니다.
- 나타나는 입력창에 Claude가 만들어 준 코드를 붙여넣기(Ctrl+V) 합니다.
- 왼쪽 상단의 “게시” 버튼을 누르면 적용 완료. 오른쪽 미리보기로 실시간 확인이 가능합니다.
마음에 들지 않으면 붙여넣은 코드를 지우기만 하면 원래대로 돌아옵니다. 그래서 부담 없이 이것저것 시도해 볼 수 있어요.
이렇게 요청하면 됩니다 — 변경 예시
아래처럼 일상 언어로 부탁해도 Claude는 알아듣고 코드를 만들어 줍니다.
- 글씨 크기 키우기 — “본문 글씨 크기를 18px로 키워주세요”
- 줄 간격 넓히기 — “줄 간격을 좀 더 넓게, 읽기 편하게 해주세요”
- 제목 색상 바꾸기 — “h2 제목 색상을 파란색으로 바꿔주세요”
- 링크 색상 변경 — “클릭할 수 있는 링크 글자 색을 초록색으로 바꿔주세요”
- 배경색 변경 — “블로그 배경을 연한 베이지색으로 만들어주세요”
마지막으로 모바일 화면도 꼭 확인하세요. 커스터마이저 미리보기 하단에는 모바일·태블릿 아이콘이 있어서, 스마트폰에서 어떻게 보이는지 눌러서 점검할 수 있습니다. 요즘은 방문자 대부분이 휴대폰으로 글을 읽기 때문에 이 확인이 중요합니다.
- Claude에게 원하는 디자인을 설명하면 CSS 코드를 만들어 줍니다.
- 워드프레스 커스터마이저 → 추가 CSS에 코드를 붙여넣으면 바로 적용됩니다.
- 마음에 들지 않으면 코드를 지우기만 하면 원래대로 복구됩니다.
- 조금씩 바꾸고, 모바일 화면까지 확인하는 습관을 들이세요.
블로그 디자인, 이제 Claude와 함께 부담 없이 다듬어 보세요. 다음 편에서는 더 많은 사람이 내 블로그를 찾도록 만드는 검색 최적화(SEO) 이야기를 이어가겠습니다.
이 글은 초보자를 위한 안내 목적의 정보이며, 실제 화면 구성은 워드프레스 버전과 테마에 따라 조금씩 다를 수 있습니다.
답글 남기기