워드프레스 구텐베르크 색상 팔레트 사용자 지정하기

핵심 요약

목차

1. 구텐베르그 색상 팔레트란?
2. 왜 색상 팔레트를 커스터마이징해야 할까?
3. functions.php에 색상 팔레트 등록하기
4. CSS로 색상 오버라이드하는 방법
5. 실수하지 않기 위한 주의사항
6. 자주 묻는 질문(Q&A)

구텐베르그 색상 팔레트란?

왜 색상 팔레트를 커스터마이징해야 할까?

functions.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' );

CSS로 색상 오버라이드하는 방법

.has-brand-blue-background-color {
    background-color: #2A5C8D !important;
}
.has-main-green-color {
    color: #4CAF50 !important;
}

실수하지 않기 위한 주의사항

자주 묻는 질문(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 파일로 더욱 세밀하게 제어할 수 있습니다.