워드프레스를 운영하는 사용자들은 사이트의 색상을 바꾸고 싶어도 어디서 어떻게 바꿔야 할지 몰라 어려움을 겪는 경우가 많습니다. 특히 자식 테마(child theme)를 만들거나 CSS 파일을 일일이 수정하는 과정은 초보자에게는 벽처럼 느껴질 수 있습니다. 하지만 최근에는 워드프레스 테마들이 CSS 변수(CSS Custom Properties)를 기본적으로 활용하고 있어서, 이 변수 값만 바꾸면 사이트 전체의 색상을 한 번에 바꿀 수 있습니다. 이번 글에서는 자식 테마 없이, 워드프레스 관리자 페이지에서 CSS 변수 값을 수정하여 테마 색상을 일괄 변경하는 방법을 알려드리겠습니다. 별도의 플러그인 없이도 누구나 쉽게 따라 할 수 있는 실전 방법을 알려드립니다. 초보자도 가능한 쉬운 방법이니 잘 따라해보세요.
1. CSS 변수란 무엇인가?
CSS 변수는 일종의 ‘색상 변수명’으로 생각하면 쉽습니다. 예를 들어 아래와 같이 선언된 변수를 사용하면, 해당 변수만 수정해도 그 값을 사용하는 모든 요소가 한꺼번에 바뀝니다.
:root {
--primary-color: #3498db;
--text-color: #333;
}
위 코드에서 --primary-color를 사용하는 요소들은 색상을 모두 자동으로 따라가게 됩니다. 워드프레스의 최신 테마들은 대부분 이 방식을 채택하고 있어 색상 수정이 매우 효율적입니다. 단 몇 줄이면 되는데 제가 초보자 시절에 이걸 몰라서 며칠을 고민했던 적이 있습니다.
2. 워드프레스 테마에서 CSS 변수가 쓰이는 위치
일부 테마(예: Twenty Twenty-One, Blocksy, Astra 등)는 기본적으로 :root 또는 body에 CSS 변수를 정의해두고 있으며, 해당 변수는 버튼, 링크, 배경, 타이틀 등에 폭넓게 적용되어 있습니다.
확인 방법
- 브라우저에서 사이트 열기
- 마우스 우클릭 → “검사” 클릭
<head>또는body에 정의된--color-xxx형태의 코드 확인
보통 --global-color-1, --button-bg, --link-color 등의 이름이 자주 쓰입니다. 제가 자주 사용하는 제너레이트프레스 테마도 이런 형식입니다. 국내엔 제너레이트프레스 사용자가 많으니 이 방법을 참고해보세요.
3. CSS 변수로 전체 색상 바꾸는 실전 예제
색상을 바꾸고 싶다면 아래처럼 ‘추가 CSS(Customizer)’ 기능을 이용해 변수 값을 덮어쓰기 하면 됩니다.
적용 단계
- 워드프레스 관리자 → 외모 → 사용자 정의하기 → 추가 CSS
- 아래 코드 삽입
:root {
--primary-color: #e74c3c; /* 붉은 계열로 변경 */
--link-color: #1abc9c;
--background-color: #f5f5f5;
}
적용 즉시 바뀌는 요소
- 모든 버튼 배경
- 링크 색상
- 일부 배경색, 헤더색
CSS 변수를 활용하면 단 몇 줄로 전반적인 테마 색상을 통일감 있게 조정할 수 있습니다. 참고로, 제너레이트프레스 테마의 경우엔 추가 css에서도 바꿀 수 있지만 기본 메뉴에서도 쉽게 변경할 수 있습니다.
4. 어떤 변수 이름을 수정해야 할까?
테마마다 변수 이름은 다르기 때문에, 사용자가 직접 변수 이름을 파악하는 것이 중요합니다. 가장 쉬운 방법은 브라우저 개발자 도구를 이용해 특정 요소를 클릭한 뒤, 적용된 CSS 변수명을 추적하는 것입니다.
예시 (Blocksy 테마 기준)
--color-accent: 링크 및 강조 색
--color-bg: 배경색
--color-heading: 제목 색상
이 변수명을 기준으로 원하는 색상만 정확히 수정하면 사이트의 인상 전체가 달라집니다.
5. 자식 테마 없이도 안전할까?
보통 유튜브나 온라인 강의에서는 디자인이나 사이트 변경시 꼭 차일드테마를 설치하라고 하는 경우가 많습니다. 저도 초보자땐 무조건 그래야 하는 줄 알고 메인 테마를 깔면 자식테마도 같이 깔았는데 꼭 그렇게 할 필요가 없습니다. php 코드 수정을 직접 하면 업데이트 될 때 날아가버리는 경우가 있어서 그런 것인데 CSS만 수정할 경우엔 자식테마를 안 깔아도 됩니다.
CSS 변수는 추가 CSS(Customizer) 영역에 적용되기 때문에 자식 테마 없이도 안전하게 활용할 수 있습니다. 단, 테마를 완전히 바꿀 경우 변수명이 달라질 수 있으므로, 동일한 테마를 유지할 경우 가장 안정적입니다.
마무리
CSS 변수는 워드프레스 테마 전체 색상을 한 번에 바꾸는 매우 강력한 도구입니다. 사용자는 별도의 개발 지식 없이도 몇 개의 변수 값만 바꿔서 사이트의 전체 분위기를 바꿀 수 있습니다. 특히 자식 테마나 고급 코딩 없이도 변경 사항을 적용할 수 있다는 점에서, 초보자에게도 추천되는 방법입니다. 이 글에서 안내한 방법대로 적용하면 워드프레스의 색상 커스터마이징이 훨씬 쉬워질 것입니다.
초보자땐 CSS란 단어만 들어도 어렵다고 느껴지지만 기본적인 사항만 알고 있으면 아주 간단하게 홈페이지의 기본 색상을 바꿀 수 있어서 편리합니다. 차근차근 따라해보시면서 각자의 홈페이지에 적용해 보시기 바랍니다.