Gutenberg 블록 에디터 다루기 — 블록·패턴·재사용 블록

Gutenberg는 WordPress 5.0(2018)부터 도입된 블록 기반 에디터입니다. 옛 Classic Editor에 익숙한 분에게 처음엔 어색하지만, 적응하면 훨씬 강력해요. 핵심 블록·단축키·재사용 블록 정리.

Gutenberg = 블록 = 레고

모든 콘텐츠가 블록 단위:

• 문단, 헤딩, 이미지, 인용, 표, 버튼 등
• 각 블록은 독립적으로 이동·복제·삭제
• 블록 안의 옵션 (정렬·색·크기) 따로 설정

핵심 블록 25개

텍스트 블록

미디어 블록

디자인 블록

위젯 블록

임베드 블록

YouTube·Twitter·Instagram 등 URL 붙여넣기만으로 임베드.

블록 추가 — 3가지 방법

1. + 아이콘 클릭

블록 사이 호버 → + 클릭 → 블록 선택.

2. / 슬래시 명령

새 블록 위치에서 / 입력 → 블록 이름 입력.

예: /img → 이미지 블록.

3. 단축키 Ctrl+Alt+T

새 블록을 위에 추가.

자주 쓰는 단축키

블록 옵션 — 우측 사이드바

블록 선택 → 우측 패널:

• 색상: 텍스트·배경·링크
• 타이포그래피: 크기·줄간격·자간
• 레이아웃: 정렬·폭
• 고급: HTML 클래스·앵커 (자식 테마와 연동)

그룹 블록 — 묶음 관리

여러 블록을 하나로 묶어 배경·여백 일괄 적용:

1. 블록 다중 선택
2. 우상단 ⋮ → 그룹
3. 그룹 블록의 배경색 등 설정

칼럼 — 다중 컬럼

칼럼 블록으로 1·2·3·4컬럼 레이아웃.

각 칼럼 안에 다른 블록 자유 배치. 모바일에선 자동 1컬럼.

재사용 블록 — 같은 콘텐츠 반복

자주 쓰는 블록 묶음을 저장해 여러 페이지에 사용.

예시 활용

• 모든 글 끝에 들어가는 작성자 소개
• “예약하기” CTA 박스
• 가격표 (변동 시 한 곳만 수정)

만드는 법

1. 재사용할 블록(들) 선택 → 그룹화
2. 우상단 ⋮ → 재사용 블록에 추가
3. 이름 입력 → 저장
4. 다른 페이지에서 /재사용 검색 → 삽입

동기화 vs 비동기화

WordPress 6.x부터:

• 동기화 패턴: 한 곳에서 수정하면 모두 반영
• 비동기 패턴(템플릿): 한 번 삽입하고 개별 수정 가능

패턴 (Pattern) — 디자인 템플릿

블록 조합의 디자인 시작점. WordPress 6+에서 공식 패턴 라이브러리.

활용

• • 클릭 → 패턴 탭
• 카테고리별 패턴 (Hero·Gallery·Testimonial 등)
• 클릭 → 페이지에 삽입 → 텍스트·이미지만 교체

직접 패턴 만들기

자식 테마에 block-patterns 폴더 추가하고 패턴 등록 코드. 또는 플러그인 BlockMeister 사용.

블록 차단 / 활성

너무 많은 블록이 혼란스러우면:

• WordPress 6.x: 핵심 블록만 표시 설정
• 플러그인 Disable Gutenberg Blocks

또는 역할별로 사용 가능 블록 제한 (저자는 코드 블록 차단 등).

Classic Editor — 옛 에디터 유지

Gutenberg가 어색하면 옛 에디터로:

플러그인 Classic Editor 설치 → 활성화.

💡 다만 Gutenberg가 WordPress의 미래. 새로 시작하면 Gutenberg 권장.

풀 사이트 편집 (FSE)

WordPress 6.x부터 사이트 전체를 블록으로 편집 (블록 테마):

• 헤더·푸터·사이드바도 블록으로
• 외모 > 편집기
• 디자이너 친화적, 고급 사용자 권장

⚠️ 자주 하는 실수

• 모든 블록 다 외우려고 함: 자주 쓰는 10개만 익히면 충분
• H1 헤딩 여러 개: 페이지당 H1 1개. 제목 외에는 H2부터
• 인라인 스타일 박제: 자식 테마 CSS 클래스로 통일
• 재사용 블록을 너무 많이: 5~10개 핵심만
• Gutenberg 거부하고 Classic만 사용: 장기적으로 손해

❓ FAQ

Q. 글이 너무 안 보일 때 한 번에 미리보기? A. 우상단 미리보기 → 새 탭. 또는 화면 옵션의 거리·집중 모드로 사이드바 숨김.

Q. 옛 글을 Gutenberg로 변환하려면? A. 옛 글 편집 → 본문 위 알림 “클래식 블록을 블록으로 변환” 클릭. 자동 변환되지만 디자인 일부 깨질 수 있어 검토 필요.

Q. 코드를 글에 넣고 싶어요. A. 코드 블록 (단일 줄) 또는 미리 서식화 블록 (여러 줄). HTML 직접 작성은 사용자 정의 HTML 블록.

Q. 글 안에 표를 잘 그리려면? A. 표 블록 기본 가능. 더 강력하려면 플러그인 TablePress (복잡한 표·정렬·검색).

Q. 블록 에디터 너무 느려요. A. 글이 너무 길면 (1만자+) 느려질 수 있음. 글 분할 또는 자동 저장 빈도 ↓ (플러그인 Disable Autosave).

관련 가이드

• 글 vs 페이지 차이
• 미디어 라이브러리
• Elementor 다루기
• 테마 커스터마이저