블로그를 시작했는데 디자인이 마음에 안 드세요? 혹은 처음 만들었을 때는 괜찮았는데 이제 좀 바꾸고 싶으신가요?
디자인을 바꾸는 건 어렵다고 생각하실 수 있어요. 하지만 Claude의 도움을 받으면 훨씬 쉬워요. 코딩을 전혀 몰라도 괜찮아요!
오늘은 Claude를 활용해서 블로그 디자인을 바꾸는 방법을 초보자 눈높이에서 알려드릴게요! 😊
🎨 블로그 디자인, 어디서 바꾸나요?
워드프레스 블로그의 디자인은 크게 두 가지로 나뉘어요:
- 테마(Theme): 블로그의 전체적인 틀이에요. 집으로 치면 건물 구조 같은 거예요.
- 커스터마이저(Customizer): 테마 안에서 색상, 글꼴, 배경 등을 세부 조정하는 곳이에요.
Claude는 주로 커스터마이저에서 추가 CSS를 입력하는 방법으로 디자인을 도와줄 수 있어요!
🤖 Claude에게 디자인 도움 받기
Claude에게 이렇게 물어보세요:
“제 워드프레스 블로그의 글씨 크기를 좀 더 크게 만들고 싶어요. 커스터마이저의 추가 CSS에 넣을 코드를 만들어 주세요.”
그러면 Claude가 이런 코드를 줄 거예요:
body { font-size: 18px; }
이 코드를 복사해서 워드프레스에 붙여 넣으면 돼요! 정말 쉽죠? 😊
🖥️ 커스터마이저에서 CSS 적용하기
Claude가 만들어준 코드를 블로그에 적용하는 방법을 단계별로 알려드릴게요.
① 워드프레스 관리자 화면에서 왼쪽 메뉴 “디자인” → “커스터마이즈”를 클릭하세요.
② 커스터마이저 화면이 열리면 왼쪽 메뉴에서 “추가 CSS”를 찾아 클릭하세요.
③ 나타나는 텍스트 입력창에 Claude가 만들어준 코드를 붙여넣기(Ctrl+V)하세요.
④ 왼쪽 상단의 “게시” 버튼을 클릭하면 적용 완료!
오른쪽 미리보기 화면에서 실시간으로 변화를 확인할 수 있어요. 마음에 안 들면 코드를 지우면 원래대로 돌아와요.
💡 Claude에게 요청할 수 있는 디자인 변경 예시
아래처럼 다양하게 부탁해 볼 수 있어요:
- 글씨 크기 키우기: “본문 글씨 크기를 18px로 키워주세요”
- 줄 간격 넓히기: “줄 간격을 좀 더 넓게 해주세요. 읽기 편하게요”
- 제목 색상 바꾸기: “h2 제목 색상을 파란색으로 바꿔주세요”
- 링크 색상 변경: “클릭할 수 있는 링크 글자 색을 초록색으로 바꿔주세요”
- 배경색 변경: “블로그 배경을 연한 베이지색으로 만들어주세요”
Claude는 이런 요청을 받으면 CSS 코드를 바로 만들어줘요. 그걸 커스터마이저의 추가 CSS에 넣기만 하면 끝이에요!
⚠️ 주의할 점
변경 전에 꼭 메모해두세요! 어떤 코드를 추가했는지 메모장에 적어두면, 나중에 원래대로 돌아가고 싶을 때 쉽게 지울 수 있어요.
한 번에 너무 많이 바꾸지 마세요! 조금씩 바꾸면서 마음에 드는지 확인하는 게 좋아요.
모바일에서도 확인해보세요! 커스터마이저에서 미리보기 화면 하단에 모바일/태블릿 아이콘이 있어요. 클릭해서 스마트폰에서는 어떻게 보이는지 확인해보세요!
✨ 오늘의 핵심 정리
- Claude에게 원하는 디자인을 설명하면 CSS 코드를 만들어줘요
- 워드프레스 커스터마이저 → 추가 CSS에 코드를 붙여넣으면 바로 적용돼요
- 코딩 지식이 없어도 Claude의 도움으로 디자인을 바꿀 수 있어요
- 마음에 안 들면 코드를 지우면 원래대로 돌아와요
블로그 디자인, 이제 Claude랑 함께 예쁘게 바꿔봐요! 💪
다음 편에서는 “검색에 잘 걸리게 하기 (SEO)”를 배워볼게요. 더 많은 사람들이 내 블로그를 찾을 수 있게 만드는 방법이에요. 기대해주세요! 😊