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

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

Gutenberg = 블록 = 레고

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

핵심 블록 한눈에 보기

텍스트 블록

미디어 블록

디자인 블록

위젯 블록

임베드 블록

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 5.9(2022)부터 사이트 전체를 블록으로 편집 (블록 테마):
– 헤더·푸터·사이드바도 블록으로
– 외모 > 편집기
– 디자이너 친화적, 고급 사용자 권장

실전 노트. 저희는 회사소개·서비스 같은 “고정 페이지”는 블록 에디터 대신 테마 템플릿 코드로 만들고, 블로그 글만 에디터로 작성합니다. 고정 페이지는 디자인 정밀도가 중요하고 한번 완성하면 구조가 거의 안 바뀌는 반면, 글은 계속 쌓이기 때문입니다. 일반 사용자라면 반대로 기억하시면 됩니다 — 코드를 다루지 않는 이상 고정 페이지도 블록 에디터로 만드는 것이 표준이고, 이 글의 사용법이 그대로 적용됩니다.

자주 하는 실수

• 모든 블록 다 외우려고 함: 자주 쓰는 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 다루기
• 테마 커스터마이저
• 홈페이지 유지보수 비용 안내 — 직접 관리가 부담될 때의 선택지와 비용 기준