펜션닷컴

커뮤니티

게시판

갤러리

웹진게시판

자유게시판

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

작성자: FfDrAl

조회: 446 등록일: 2026-01-03

<a href="https://f7lc.damoa.top/super/?JoinID=blog&DistributionID=31" target="_blank">
<div align="center"><h2>워드프레스 구텐베르크 색상 팔레트 사용자 지정하기</h2>
<img src="https://i.imgur.com/EYCWwcN.jpeg" width="400" >
</div><br><br>
워드프레스의 블록 에디터인 구텐베르크는 시각적인 콘텐츠 제작을 훨씬 쉽게 만들어줍니다. 특히 사이트 디자인의 일관성을 유지하기 위해 색상 팔레트를 사용자 지정하면 브랜드 정체성을 강화할 수 있습니다. 이 글에서는 테마 수정 없이도 구텐베르크의 기본 색상 팔레트를 직접 커스터마이징하는 방법을 단계별로 안내합니다.<br>

<h2>핵심 요약</h2>
<div class="summary">
<ul>
<li><strong>색상 팔레트의 중요성</strong>: 브랜드 이미지와 웹사이트 일관성을 유지하는 데 핵심 역할을 합니다.</li>
<li><strong>PHP 또는 함수 추가</strong>: 테마의 functions.php 파일에 코드를 추가해 색상을 정의할 수 있습니다.</li>
<li><strong>커스텀 색상 등록</strong>: 원하는 색상 이름과 HEX 코드를 설정하여 블록 편집기에서 바로 사용 가능합니다.</li>
<li><strong>테마 독립성 유지</strong>: 자식 테마를 사용하면 업데이트 시에도 설정이 유지됩니다.</li>
</ul>
</div>

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

<h3 id="section1">구텐베르그 색상 팔레트란?</h3>
워드프레스 5.0부터 도입된 구텐베르크 블록 에디터는 기존의 클래식 에디터와 달리 블록 단위로 콘텐츠를 구성합니다. 이 블록들은 텍스트 색상, 배경 색상 등을 쉽게 변경할 수 있도록 기본 색상 팔레트를 제공합니다. 기본적으로 회색, 검정, 흰색, 파랑, 초록, 빨강 등 몇 가지 색상이 미리 설정되어 있으며, 각 블록의 스타일 패널에서 바로 선택할 수 있습니다. 하지만 이 기본 색상들만으로는 기업이나 브랜드 고유의 시각적 정체성을 표현하기 어렵습니다. 그래서 사용자 정의 색상 팔레트를 설정하면 블로그나 홈페이지 전체에 걸쳐 통일된 디자인을 적용할 수 있습니다.<br>

<h3 id="section2">왜 색상 팔레트를 커스터마이징해야 할까?</h3>
웹사이트의 색상은 사용자 경험(UX)과 브랜드 인식에 큰 영향을 미칩니다. 예를 들어, 기업의 로고 색상이 #2A5C8D(딥블루)라면, 에디터에서 매번 HEX 코드를 입력하거나 임의의 색상을 선택하는 것은 비효율적입니다. 사용자 지정 색상 팔레트를 설정하면 팀원 누구나 동일한 색상을 쉽게 선택할 수 있어 디자인 일관성이 유지됩니다. 또한, 관리자뿐만 아니라 일반 작성자도 브랜드 가이드라인에 맞춰 콘텐츠를 제작할 수 있어 전문성 있는 외관을 유지할 수 있습니다.<br>

<h3 id="section3">functions.php에 색상 팔레트 등록하기</h3>
구텐베르크의 색상 팔레트를 커스터마이즈하려면 현재 사용 중인 테마의 <code>functions.php</code> 파일에 PHP 코드를 추가해야 합니다. 반드시 자식 테마를 사용하세요. 부모 테마를 수정하면 테마 업데이트 시 설정이 초기화되기 때문입니다. 아래는 커스텀 색상 팔레트를 등록하는 예제 코드입니다:<br>
<pre><code>
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' );
</code></pre>
이 코드를 자식 테마의 <code>functions.php</code>에 삽입하면, 블록 에디터 내 색상 선택 패널에 '브랜드 블루', '메인 그린' 등의 이름으로 새로운 색상이 나타납니다. 각 색상은 <code>name</code>(표시 이름), <code>slug</code>(CSS 클래스 이름), <code>color</code>(HEX 코드)로 구성됩니다.<br>

<h3 id="section4">CSS로 색상 오버라이드하는 방법</h3>
때로는 테마가 자체적으로 색상을 정의하고 있어 새로 추가한 색상이 제대로 반영되지 않을 수 있습니다. 이 경우, <code>style.css</code> 또는 관리자 화면용 CSS를 별도로 로드하여 색상 값을 명시적으로 재정의할 수 있습니다. 다음은 예시입니다:<br>
<pre><code>
.has-brand-blue-background-color {
    background-color: #2A5C8D !important;
}
.has-main-green-color {
    color: #4CAF50 !important;
}
</code></pre>
이렇게 하면 프론트엔드에서도 정확한 색상이 표시되며, 블록에서 선택한 색상과 실제 출력 결과가 다를 때 문제를 해결할 수 있습니다. 다만, <code>!important</code>는 과도하게 사용하지 말고, 필요할 때만 적용하는 것이 좋습니다.<br>

<h3 id="section5">실수하지 않기 위한 주의사항</h3>
색상 팔레트를 설정할 때 가장 흔한 실수는 부모 테마를 직접 수정하는 것입니다. 반드시 자식 테마를 사용해 작업하세요. 또한, 색상 이름과 슬러그는 중복되지 않도록 주의하고, 가능한 한 의미 있는 이름을 지정하는 것이 좋습니다. 예를 들어, '컬러1', '컬러2'보다는 '헤드라인 블루', '서브텍스트 그레이'처럼 용도를 알 수 있게 짓는 것이 장기적으로 관리하기 쉽습니다. 마지막으로, 색상 대비(contrast ratio)를 고려해 접근성 문제를 방지하세요. 밝은 배경 위에 매우 밝은 텍스트를 사용하면 시각 장애 사용자가 내용을 읽기 어려울 수 있습니다.<br>

최근 워드프레스는 블록 테마(Block Theme)와 템플릿 파트(template parts) 기능을 강화하면서, 디자인 커스터마이징의 자유도가 크게 늘었습니다. 전문 개발자가 아니더라도 functions.php에 간단한 코드 한 줄로 브랜드 색상을 통합할 수 있다는 점은 큰 장점입니다. 실제로 워드프레스 공식 문서에서도 테마 지원 기능(theme support)을 통해 색상, 타이포그래피, 스페이싱 등을 선언하는 것을 권장하고 있습니다. 이렇게 설정된 색상 팔레트는 사이트 전반에 걸쳐 일관된 시각적 언어를 제공하며, 특히 다수의 기여자가 참여하는 사이트에서 혼란을 줄이는 데 효과적입니다. 따라서 디자인 품질 향상과 운영 효율성 두 가지를 동시에 추구하려는 사용자라면 꼭 적용해볼 만한 기능입니다.<br>

<h2 id="qa">자주 묻는 질문(Q&A)</h2>
<dl class="qa">
<dt>Q: 색상 팔레트를 추가했는데 에디터에서 보이지 않아요. 어떻게 해야 하나요?</dt>
<dd>A: 먼저 자식 테마를 사용하고 있는지 확인하세요. 또한, 코드에 문법 오류가 없는지 체크하고, 워드프레스 캐시 또는 플러그인 캐시를 삭제한 후 다시 시도해보세요. PHP 에러 로그를 확인하면 문제 원인을 더 쉽게 찾을 수 있습니다.</dd>
<dt>Q: 기존 테마의 색상을 덮어쓰고 싶어요. 어떻게 하나요?</dt>
<dd>A: 테마에서 제공하는 색상 팔레트를 비활성화한 후, 새로운 팔레트를 등록하면 됩니다. add_theme_support('editor-color-palette')를 다시 호출하면 기존 설정이 덮어씌워지므로, 원하는 색상만 포함된 배열을 새로 전달하세요.</dd>
<dt>Q: 모바일에서 색상이 다르게 보여요. 왜 그런가요?</dt>
<dd>A: 브라우저나 기기마다 색상 렌더링 방식이 다를 수 있습니다. CSS에서 정의한 색상 값은 동일하지만, 디스플레이 특성에 따라 약간씩 차이가 날 수 있습니다. 가능하면 실제 기기에서 미리보기를 통해 확인하는 것이 좋습니다.</dd>
<dt>Q: 색상 외에 폰트나 간격도 커스터마이징할 수 있나요?</dt>
<dd>A: 네, 워드프레스는 'editor-font-sizes', 'custom-spacing-size' 등의 옵션을 통해 폰트 크기, 여백 등을 사용자 정의할 수 있습니다. 블록 테마를 사용하면 theme.json 파일로 더욱 세밀하게 제어할 수 있습니다.</dd>
</dl>
키워드: 워드프레스 색상 팔레트, 구텐베르크 커스텀 색상, functions.php 색상 등록, 블록 에디터 색상, 워드프레스 브랜드 색상<br><br>
</a>

댓글 : 0 건



이전글	팔팔정과 비아그라의 차이점 비교 - 비아센터
다음글	오케이 툰 모바일 유용한 사이트 100% 활용하기 (2026년)

번호	제목	작성자	조회	등록일

165	땡땡티비 같은 사이트 - 땡땡티비 주소찾기 - 땡땡티비 최신 현...		2085	2025-08-31

164	경주 비아그라 시알리스		2172	2025-08-31

163	비아그라판매 정보 알 수 있는 인기 사이트		2093	2025-08-31

162	주소월드: 새로운 디지털 공간의 탐험		2178	2025-08-31

161	피나스테리드 5mg x 90정 (탈모방지제) 구매대행 - 러시아 ...		2343	2025-08-31

160	동해 비아그라 건강정보		2295	2025-08-31

159	메벤다졸은 과연 항암효과가 있는가? - 러시아 직구 우라몰 ulA...		2086	2025-08-31

158	전생의 원수가 아빠라고요? 웹툰 미리보기 사이트		2063	2025-08-31

157	동해 시알리스후기 【vEbb.top】 tldkffltmgnrl		2176	2025-08-31

156	횡성 비아몰 【vbjJ.top】		2173	2025-08-31

155	비아그라 효과 지속시간: 실제 경험과 주의사항 【veBb.top】		2177	2025-08-31

154	조루지연제: 자신감 있는 시간을 위한 완벽 가이드		2071	2025-08-31

153	비아그라 당일 구매 내용 찾기 쉽고 빠른 곳 보기~! 인기 사이...		1885	2025-08-31

152	신종코로나바이러스(SARS-CoV-2) 치료제는 아연? - 러시아 ...		2104	2025-08-31

151	2025�� 댄넗��(NEWTOKI) 理쒖떊 二쇱냼 �덈궡		1949	2025-08-31

381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390