자유게시판
워드프레스 구텐베르크 색상 팔레트 사용자 지정하기
- 작성자 : zqwvopdw
- 작성일 : 26-04-03 18:26
- 조회수 : 13
워드프레스의 블록 에디터인 구텐베르크는 시각적인 콘텐츠 제작을 훨씬 쉽게 만들어줍니다. 특히 사이트 디자인의 일관성을 유지하기 위해 색상 팔레트를 사용자 지정하면 브랜드 정체성을 강화할 수 있습니다. 이 글에서는 테마 수정 없이도 구텐베르크의 기본 색상 팔레트를 직접 커스터마이징하는 방법을 단계별로 안내합니다.
핵심 요약
색상 팔레트의 중요성: 브랜드 이미지와 웹사이트 일관성을 유지하는 데 핵심 역할을 합니다.
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)을 통해 색상, 타이포그래피, 스페이싱 등을 선언하는 것을 권장하고 있습니다. 이렇게 설정된 색상 팔레트는 사이트 전반에 걸쳐 일관된 시각적 언어를 제공하며, 특히 다수의 기여자가 참여하는 사이트에서 혼란을 줄이는 데 효과적입니다. 따라서 디자인 품질 향상과 운영 효율성 두 가지를 동시에 추구하려는 사용자라면 꼭 적용해볼 만한 기능입니다.
자주 묻는 질문(Q&A)
Q: 색상 팔레트를 추가했는데 에디터에서 보이지 않아요. 어떻게 해야 하나요? A: 먼저 자식 테마를 사용하고 있는지 확인하세요. 또한, 코드에 문법 오류가 없는지 체크하고, 워드프레스 캐시 또는 플러그인 캐시를 삭제한 후 다시 시도해보세요. PHP 에러 로그를 확인하면 문제 원인을 더 쉽게 찾을 수 있습니다. Q: 기존 테마의 색상을 덮어쓰고 싶어요. 어떻게 하나요? A: 테마에서 제공하는 색상 팔레트를 비활성화한 후, 새로운 팔레트를 등록하면 됩니다. add_theme_support('editor-color-palette')를 다시 호출하면 기존 설정이 덮어씌워지므로, 원하는 색상만 포함된 배열을 새로 전달하세요. Q: 모바일에서 색상이 다르게 보여요. 왜 그런가요? A: 브라우저나 기기마다 색상 렌더링 방식이 다를 수 있습니다. CSS에서 정의한 색상 값은 동일하지만, 디스플레이 특성에 따라 약간씩 차이가 날 수 있습니다. 가능하면 실제 기기에서 미리보기를 통해 확인하는 것이 좋습니다. Q: 색상 외에 폰트나 간격도 커스터마이징할 수 있나요? A: 네, 워드프레스는 'editor-font-sizes', 'custom-spacing-size' 등의 옵션을 통해 폰트 크기, 여백 등을 사용자 정의할 수 있습니다. 블록 테마를 사용하면 theme.json 파일로 더욱 세밀하게 제어할 수 있습니다. 키워드: 워드프레스 색상 팔레트, 구텐베르크 커스텀 색상, functions.php 색상 등록, 블록 에디터 색상, 워드프레스 브랜드 색상
수정
삭제
글쓰기네티즌 의견 총 0개
| 번호 | 분류 | 제목 | 작성자 | 작성일 | 추천 |
|---|---|---|---|---|---|
| 108723 | 분류 |
야일라정20mg 시알리스 정5mg 관련 안전하고 신뢰할 수 있는 정보 페이지 소개
|
csuacfvy | 04-03 | 0 |
| 108722 | 분류 |
선물실체결대행【문의 텔:@SPEED4321】횡성 실체결솔루션가격 가상솔루션임대비용 선물데이터API업체 실체결…
|
바로출장 | 04-03 | 0 |
| 108721 | 일반 |
나미툰 우회 접속 주소 - 나미툰 뭔가요? 바로가기 주소 - 나미툰 접속 방법 ( 최신주소 업데이트) - …
|
djhgeutl | 04-03 | 0 |
| 108720 | 테스트 |
도지코믹스
|
votkidig | 04-03 | 0 |
| 108719 | 분류 |
뉴툰 Newtoon
|
tbsdiacm | 04-03 | 0 |
| 108718 | 분류 |
비아그라, 안전하고 합법적으로 구매하는 방법
|
vilwamvs | 04-03 | 0 |
| 108717 | 분류 |
주식솔루션분양【문의 텔:@SPEED4321】영양 주식레버리지분양 주식사이트제작 주식프로그램임대 주식HTS분양…
|
바로출장 | 04-03 | 0 |
| 108716 | 일반 |
렌즈목카드구입》ØIغ64.53º79.Ø8《랜즈목카드문의》ØIغ64.53º79.Ø8《목카드렌즈
|
아로미 | 04-03 | 0 |
| 108715 | 분류 |
주식사이트비공개분양【문의 텔:@SPEED4321】구로 주식솔루션프라이빗 주식분양보안상담 주식솔루션고객센터 주…
|
바로출장 | 04-03 | 0 |
| 108714 | 분류 |
해외선물솔루션분양【문의 텔:@SPEED4321】프로소프트솔루션 해외선물솔루션임대 HTS 제작 HTS 프로그램…
|
바로출장 | 04-03 | 0 |
| 108713 | 분류 |
주식서버분양【문의 텔:@SPEED4321】고창 주식솔루션임대 레버리지사이트제작 주식대여계좌솔루션 주식미수솔루…
|
바로출장 | 04-03 | 0 |
| 108712 | 분류 |
대구 프로코밀 vmfhzhalf
|
bdndrhai | 04-03 | 0 |
| 108711 | 일반 |
정품 비아그라 구별법
|
odocnkez | 04-03 | 0 |
| 108710 | 테스트 |
발기부전치료약 부작용과 대처법
|
blzriulr | 04-03 | 0 |
| 108709 | 테스트 |
정품아드레닌 50mg 구입 - 파워약국
|
vmjyospm | 04-03 | 0 |