워드프레스 블로그 감성 살리기 (폰트 변경과 버튼 디자인 커스터마이징)

문득 오늘은 뭔가 ‘내 블로그만의 느낌과 감성이 없다’는 생각이 들었습니다. 블로그를 만들고 기본 테마를 그대로 쓰다 보니 깔끔하긴 하지만 뭔가 텅 빈 느낌이었기 때문이었죠.

최소한의 기본 디자인은 꾸며야겠다 싶어서 찾아보니, 폰트와 버튼 디자인은 CSS와 플러그인으로 쉽게 변경할 수 있었습니다. 폰트와 버튼 디자인만 변경해도 블로그의 첫 인상을 크게 바꿀 수 있습니다.

그래서 이 글에서는 폰트 변경과 버튼 디자인을 수정해보고 어떻게 적용하는지 다루어 보았습니다.

---

폰트는 ‘적용’보다 ‘불러오기’가 먼저

처음엔 CSS만 건드리면 되는 줄 알았는데 이게 작동하지 않았습니다. 왜 이런가 싶어 이것저것 알아보니, 폰트를 먼저 불러와야 한다는 것을 알게 되었습니다. 그래서 폰트를 불러오기 위한 플러그인인 WPCode를 설치해 주었습니다.

• 코드 스니펫(Code Snippets) → 헤더 및 푸터 (Header & Footer)
• 헤더(Header) 영역에 코드 추가

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

(명령어 예시)
이런 명령어를 넣으면 CSS에서 폰트를 쓸 수 있는 상태가 됩니다.

---

전체 폰트 한 번에 바꾸기

제가 원했던 건 블로그 전체의 폰트를 바꾸는 것이었는데, 처음에 버튼 하나만 바꾸는 명령어를 입력하다가 시간을 많이 허비했습니다. 아래는 블로그 전체의 폰트를 바꾸는 명령어의 예시입니다.

body,
button,
input,
textarea,
select,
* {
  font-family: 'Gowun Dodum', sans-serif !important;
}

(CSS추가는 관리자 페이지에서 사용자정의 -> 추가CSS에서 명령어를 입력할 수 있습니다.)

이렇게 적용하면 블로그 전체 분위기가 한 번에 바뀝니다. 딱딱한 느낌이 사라지고 훨씬 부드럽고 귀여운 톤으로 변했습니다.

폰트는 꼭 위의 명령어 그대로가 아니라, 자신의 블로그 스타일에 맞춰 변경하면 되는데 저는 AI를 활용해 블로그 컨셉과 맞는 폰트를 정하고 명령어를 받아서 입력했습니다.

🌸잠깐 짚고 넘어가기🌸

CSS명령어는 옵션 별로 어떻게 구분하는지, 입력할 때는 어떻게 해야 할지 모르시는 분들을 위해
아래 예시 이미지를 준비했습니다.

💡인공지능의 도움을 받아 CSS명령어를 생성했지만, 저 그룹들 사이에 한 칸 씩 띄워서 구분을 지어줘야 제대로 작동한다는 부분은 블로그 초보들에게는 꽤 중요한 포인트일 수도 있겠다 생각했습니다.

---

버튼 하나로 분위기 완성하기

폰트를 바꾸고 나니 내 블로그 이미지와 어울리지 않는 버튼 블록의 디자인이 계속 신경 쓰였습니다.
그래서 다시 CSS 명령어를 통해 디자인을 바꿔주기로 했습니다.

.wp-block-button__link {
  background: linear-gradient(135deg, #ffd6e7, #f8c8dc);
  color: #5a3e4d;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font-weight: 600;
}

이 명령어 역시 AI에게 블로그 스타일에 맞는 버튼 디자인과 색상을 추천받았습니다.
이렇게 바꾸고 나니까 그냥 버튼이 아니라 ‘디자인 요소’가 된 느낌이었습니다.

---

마무리

이번 작업을 하면서 AI의 도움을 받아 명령어는 쉽게 얻을 수 있었지만, 적용하는 방법과 명령어 그룹을 구분하는 방법 그리고 블로그 컨셉에 맞게 디자인을 결정하는 일 등 직접 결정해야 하는 부분이 많았습니다.

변경 사항을 어디까지 적용할 지, 어떤 방향으로 구성할지 등 직접 해보면서 감을 익히며 하나씩 적용해보는 재미를 느끼시는 것도 좋은 방법이라고 생각합니다.

AI는 항상 정확하지는 않기 때문에, 적용하려는 부분이 내가 의도한 방향과 맞는지 지속적으로 확인하는 과정이 중요하다고 생각합니다. 특히 저는 컴퓨터 명령어에 익숙하지 않았기 때문에 작업을 하면서 꾸준히 AI와 지금의 방향이 맞는지 검증하려고 노력했습니다.

워드프레스가 CSS추가를 통해 직접 커스텀 하는 재미가 있고, 세심하게 설정이 가능하긴 하지만 조금 장벽으로 느껴진 부분도 있었는데 이번 경험을 통해 CSS명령어와 조금 친해진 것 같았습니다.