워드프레스의 블록 에디터인 구텐베르크는 시각적인 콘텐츠 제작을 훨씬 쉽게 만들어줍니다. 특히 사이트 디자인의 일관성을 유지하기 위해 색상 팔레트를 사용자 지정하면 브랜드 정체성을 강화할 수 있습니다. 이 글에서는 테마 수정 없이도 구텐베르크의 기본 색상 팔레트를 직접 커스터마이징하는 방법을 단계별로 안내합니다.
핵심 요약
색상 팔레트의 중요성: 브랜드 이미지와 웹사이트 일관성을 유지하는 데 핵심 역할을 합니다.
PHP 또는 함수 추가: 테마의 functions.php 파일에 코드를 추가해 색상을 정의할 수 있습니다.
커스텀 색상 등록: 원하는 색상 이름과 HEX 코드를 설정하여 블록 편집기에서 바로 사용 가능합니다.
테마 독립성 유지: 자식 테마를 사용하면 업데이트 시에도 설정이 유지됩니다.
목차
구텐베르그 색상 팔레트란? 왜 색상 팔레트를 커스터마이징해야 할까? functions.php에 색상 팔레트 등록하기 CSS로 색상 오버라이드하는 방법 실수하지 않기 위한 주의사항 자주 묻는 질문(Q&A)구텐베르그 색상 팔레트란?
워드프레스 5.0부터 도입된 구텐베르크 블록 에디터는 기존의 클래식 에디터와 달리 블록 단위로 콘텐츠를 구성합니다. 이 블록들은 텍스트 색상, 배경 색상 등을 쉽게 변경할 수 있도록 기본 색상 팔레트를 제공합니다. 기본적으로 회색, 검정, 흰색, 파랑, 초록, 빨강 등 몇 가지 색상이 미리 설정되어 있으며, 각 블록의 스타일 패널에서 바로 선택할 수 있습니다. 하지만 이 기본 색상들만으로는 기업이나 브랜드 고유의 시각적 정체성을 표현하기 어렵습니다. 그래서 사용자 정의 색상 팔레트를 설정하면 블로그나 홈페이지 전체에 걸쳐 통일된 디자인을 적용할 수 있습니다.왜 색상 팔레트를 커스터마이징해야 할까?
웹사이트의 색상은 사용자 경험(UX)과 브랜드 인식에 큰 영향을 미칩니다. 예를 들어, 기업의 로고 색상이 #2A5C8D(딥블루)라면, 에디터에서 매번 HEX 코드를 입력하거나 임의의 색상을 선택하는 것은 비효율적입니다. 사용자 지정 색상 팔레트를 설정하면 팀원 누구나 동일한 색상을 쉽게 선택할 수 있어 디자인 일관성이 유지됩니다. 또한, 관리자뿐만 아니라 일반 작성자도 브랜드 가이드라인에 맞춰 콘텐츠를 제작할 수 있어 전문성 있는 외관을 유지할 수 있습니다.functions.php에 색상 팔레트 등록하기
구텐베르크의 색상 팔레트를 커스터마이즈하려면 현재 사용 중인 테마의functions.php 파일에 PHP 코드를 추가해야 합니다. 반드시 자식 테마를 사용하세요. 부모 테마를 수정하면 테마 업데이트 시 설정이 초기화되기 때문입니다. 아래는 커스텀 색상 팔레트를 등록하는 예제 코드입니다:
function custom_gutenberg_color_palette() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => '브랜드 블루',
'slug' => 'brand-blue',
'color' => '#2A5C8D',
),
array(
'name' => '메인 그린',
'slug' => 'main-green',
'color' => '#4CAF50',
),
array(
'name' => '어시스턴트 레드',
'slug' => 'assist-red',
'color' => '#F44336',
),
array(
'name' => '라이트 그레이',
'slug' => 'light-gray',
'color' => '#F5F5F5',
),
) );
}
add_action( 'after_setup_theme', 'custom_gutenberg_color_palette' );
functions.php에 삽입하면, 블록 에디터 내 색상 선택 패널에 '브랜드 블루', '메인 그린' 등의 이름으로 새로운 색상이 나타납니다. 각 색상은 name(표시 이름), slug(CSS 클래스 이름), color(HEX 코드)로 구성됩니다.CSS로 색상 오버라이드하는 방법
때로는 테마가 자체적으로 색상을 정의하고 있어 새로 추가한 색상이 제대로 반영되지 않을 수 있습니다. 이 경우,style.css 또는 관리자 화면용 CSS를 별도로 로드하여 색상 값을 명시적으로 재정의할 수 있습니다. 다음은 예시입니다:
.has-brand-blue-background-color {
background-color: #2A5C8D !important;
}
.has-main-green-color {
color: #4CAF50 !important;
}
!important는 과도하게 사용하지 말고, 필요할 때만 적용하는 것이 좋습니다.실수하지 않기 위한 주의사항
색상 팔레트를 설정할 때 가장 흔한 실수는 부모 테마를 직접 수정하는 것입니다. 반드시 자식 테마를 사용해 작업하세요. 또한, 색상 이름과 슬러그는 중복되지 않도록 주의하고, 가능한 한 의미 있는 이름을 지정하는 것이 좋습니다. 예를 들어, '컬러1', '컬러2'보다는 '헤드라인 블루', '서브텍스트 그레이'처럼 용도를 알 수 있게 짓는 것이 장기적으로 관리하기 쉽습니다. 마지막으로, 색상 대비(contrast ratio)를 고려해 접근성 문제를 방지하세요. 밝은 배경 위에 매우 밝은 텍스트를 사용하면 시각 장애 사용자가 내용을 읽기 어려울 수 있습니다.최근 워드프레스는 블록 테마(Block Theme)와 템플릿 파트(template parts) 기능을 강화하면서, 디자인 커스터마이징의 자유도가 크게 늘었습니다. 전문 개발자가 아니더라도 functions.php에 간단한 코드 한 줄로 브랜드 색상을 통합할 수 있다는 점은 큰 장점입니다. 실제로 워드프레스 공식 문서에서도 테마 지원 기능(theme support)을 통해 색상, 타이포그래피, 스페이싱 등을 선언하는 것을 권장하고 있습니다. 이렇게 설정된 색상 팔레트는 사이트 전반에 걸쳐 일관된 시각적 언어를 제공하며, 특히 다수의 기여자가 참여하는 사이트에서 혼란을 줄이는 데 효과적입니다. 따라서 디자인 품질 향상과 운영 효율성 두 가지를 동시에 추구하려는 사용자라면 꼭 적용해볼 만한 기능입니다.
현대해상 아이보험