워드프레스에서 글을 쓰려고 에디터를 열었는데, 뭔가 낯설고 복잡하게 느껴졌던 적 있으신가요? 그 낯선 녀석이 바로 블록 에디터(구텐베르크)입니다. 처음엔 어렵게 보이지만, 한번 익히면 정말 강력한 글쓰기 도구가 됩니다. 오늘은 워드프레스 블록 에디터의 기초부터 각 블록을 활용한 고급 글쓰기까지, 초보자도 쉽게 따라할 수 있도록 11가지 필수 블록을 완벽하게 정리해드릴게요.

블록 에디터가 뭔데? 워드프레스 에디터 완벽 이해하기

워드프레스 블록 에디터는 2018년 워드프레스 5.0 버전부터 기본으로 탑재된 새로운 글쓰기 도구예요. 이전의 ‘고전 에디터’와는 완전히 다른 방식으로 작동합니다.

블록 에디터의 가장 큰 특징은? 글의 각 요소(텍스트, 제목, 이미지, 리스트 등)를 ‘블록’이라는 독립적인 단위로 생각한다는 점입니다. 마치 레고를 조립하듯이, 원하는 블록을 추가하고 배열하는 방식이죠.

고전 에디터는 단순한 텍스트 입력 상자에 불과했다면, 워드프레스 블록 에디터는 코딩 없이도 전문적인 레이아웃의 글을 만들 수 있게 해줍니다. 텍스트 색상, 배경색, 단계별 레이아웃까지 시각적으로 직관적으로 조작할 수 있어요.

블록 에디터의 장점:

• 초보자도 쉽게 사용 가능한 직관적 인터페이스
• 코드 없이 복잡한 레이아웃 구현
• 각 블록별로 세밀한 스타일 조정
• 드래그 앤 드롭으로 순서 변경 용이
• 반응형 디자인 자동 지원

그렇다면 이제 실제로 블록 에디터를 어떻게 사용하는지 살펴볼까요?

블록 추가하는 법 – 3가지 방법 마스터하기

워드프레스 블록 에디터에서 새 블록을 추가하는 방법은 3가지입니다. 상황과 취향에 따라 선택해서 사용하면 됩니다.

첫 번째, (+) 버튼으로 추가하기

에디터 화면에서 마우스를 옮기면 왼쪽에 (+) 표시가 나타나요. 이것을 클릭하면 모든 블록 목록이 팝업으로 나타납니다. 여기서 원하는 블록을 찾아 클릭하면 추가되는 가장 직관적인 방법이에요.

두 번째, 슬래시(/) 명령어로 빠르게 추가

글을 쓰다가 새 블록을 추가하고 싶으면 ‘/’ 기호를 입력하면 됩니다. 예를 들어 ‘/제목’ 또는 ‘/heading’을 입력하면 제목 블록이 바로 추가돼요. 손에 익으면 가장 빠른 방법이 됩니다.

세 번째, 드래그 앤 드롭으로 이동하기

이미 추가된 블록을 옮기고 싶을 때는 블록의 왼쪽 상단에 있는 여섯 개의 점(⋮⋮) 아이콘을 드래그하면 돼요. 마우스로 끌어다 놓기만 하면 원하는 위치로 옮길 수 있습니다.

텍스트 작성 블록 | Paragraph 블록 정복하기

Paragraph 블록은 일반적인 본문 텍스트를 작성할 때 사용하는 가장 기본적인 블록입니다. 대부분의 글이 이 블록으로 이루어져 있어요.

Paragraph 블록은 단순한 텍스트 입력만 되는 게 아니에요. 우측 사이드바의 ‘Block’ 탭에서 텍스트 색상, 배경 색상, 폰트 크기, 줄 높이 등을 자유롭게 조정할 수 있습니다.

실무 활용 팁:

일반적인 본문은 검은색 또는 진회색으로 충분하지만, 강조하고 싶은 문장은 다른 색상으로 표현할 수 있어요. 배경색을 넣으면 더욱 눈에 띄게 만들 수 있죠. 다만 너무 많은 색상을 사용하면 글이 지저분해 보이므로, 색상은 최대 2~3가지로 제한하는 게 좋습니다.

문단의 첫 글자를 크게 표현하는 드롭 캡(Drop Cap) 기능도 있어서, 좀 더 잡지 같은 느낌의 전문적인 글을 만들 수 있습니다.

제목과 구조 만들기 | Heading 블록의 모든 것

Heading 블록은 글의 구조를 잡는 데 가장 중요한 역할을 합니다. 단순한 시각적 강조를 넘어 SEO(검색 엔진 최적화)에도 영향을 미쳐요.

워드프레스 블록 에디터에서는 H1부터 H6까지 6단계의 제목을 지정할 수 있습니다. 일반적으로는 H2(대제목), H3(소제목), H4(세부 항목) 정도만 사용해도 충분합니다.

제목 태그 사용 규칙:

H1: 글 전체의 가장 큰 제목 (보통 1개만 사용)

H2: 주요 섹션 구분 (목차의 주요 항목)

H3: H2 아래의 세부 항목

H4 이상: 매우 깊은 단계의 제목 (거의 사용 안 함)

SEO 관점에서는 Heading 블록에 메인 키워드를 넣는 것이 중요합니다. 예를 들어 ‘워드프레스 블록 에디터’라는 주제의 글이라면, H2나 H3에 이 키워드를 자연스럽게 포함시켜야 검색 결과에 유리합니다.

리스트로 정보 정리하기 | List 블록 활용법

List 블록은 정보를 깔끔하게 정렬할 때 정말 유용한 블록입니다. 검색 엔진도 리스트 형태의 정보를 좋아해서, 이 블록을 잘 활용하면 검색 결과에 ‘스니펫’으로 노출될 확률이 높아집니다.

List 블록은 세 가지 유형을 제공합니다. 첫째는 일반 글머리 기호 리스트(bullet list)이고, 둘째는 번호가 매겨진 숫자 리스트(numbered list)예요. 셋째는 체크박스가 있는 체크리스트(checklist)로, 할 일 정리에 정말 좋습니다.

활용 예시:

• 제품 리뷰를 쓸 때는 장점을 글머리 기호로 정리하고, 설치 방법이나 단계별 가이드를 쓸 때는 숫자 리스트를 사용하세요.
• 독자가 따라야 할 단계가 명확해져서 이해도가 확 올라갑니다.

인용과 강조 | Quote와 Pullquote 블록

Quote 블록은 다른 사람의 말이나 중요한 구절을 인용할 때 사용합니다. 왼쪽에 진한 세로줄이 표시되어서 일반 텍스트와 명확히 구분돼요.

전문가의 의견이나 통계, 논문의 내용을 인용할 때 이 블록을 쓰면, 글에 신뢰성과 전문성이 더해집니다. 또한 시각적으로도 눈에 띄는 요소가 되어 독자의 시선을 사로잡죠.

Pullquote 블록은 Quote의 강화 버전이라고 생각하면 됩니다. 훨씬 크고 진하게 표현되어서, 본문의 가장 핵심적인 문장 하나를 강조할 때 써요. 마치 잡지에서 본문 중간에 크게 표시된 문장처럼 말이에요.

두 블록 모두 우측 사이드바에서 색상, 배경, 폰트 크기 등을 자유롭게 커스터마이징할 수 있습니다.

코드 삽입하기 | Code & Preformatted 블록

Code 블록은 프로그래밍 코드나 명령어를 삽입할 때 사용합니다. 일반 텍스트로 표현하면 들여쓰기나 공백이 무너지기 쉬운데, Code 블록을 쓰면 정확한 형식이 유지돼요.

웹 개발 튜토리얼을 쓰거나, API 사용 예시를 보여줄 때 이 블록이 정말 유용합니다. 코드의 각 부분을 정확히 표현할 수 있으니까요.

Preformatted 블록은 Code와 비슷하지만, 더 일반적인 텍스트 형식을 유지할 때 사용해요. 특정 포맷이 정해진 데이터나 시 같은 형식이 중요한 텍스트에 쓰입니다.

둘 다 ‘코드 보기’ 기능이 있어서, 발행 전에 어떻게 표현될 것인지 미리 확인할 수 있습니다.

정보를 효과적으로 정렬하기 | Columns 블록

예를 들어 상품 비교 글을 쓸 때, 각 제품의 특징을 3단 레이아웃으로 나란히 배치하면 독자가 한눈에 비교할 수 있죠. 또는 좌측에 텍스트, 우측에 관련 이미지를 배치하는 방식도 자주 사용됩니다.

Columns 블록 안에 다른 블록들을 추가할 수 있어서, 매우 자유로운 레이아웃을 만들 수 있습니다. 다만 모바일에서도 잘 보이려면, 너무 많은 단으로 나누지 않는 게 좋아요. 일반적으로 2단이나 3단 정도가 적당합니다.

상세 내용 숨겼다 펼치기 | Details 블록 (아코디언)

Details 블록은 아코디언 형태로 작동해요. 제목을 클릭하면 내용이 펼쳐지고, 다시 클릭하면 접히는 방식이죠.

Q&A 콘텐츠를 만들 때 정말 강력합니다. 자주 묻는 질문을 제목으로 놓고, 답변을 Details 블록 안에 숨겨두면, 사용자가 관심 있는 항목만 펼쳐서 볼 수 있거든요.

또 다른 활용법은 길게 설명해야 하는 부가 정보를 Details 블록으로 숨겨두는 것입니다. 글의 주요 내용이 길어지는 것을 방지하면서도, 상세한 정보를 필요한 사람은 확인할 수 있게 해주죠.

디자인으로 시각적 포인트 주기 | Group 블록

Group 블록 안에는 모든 종류의 블록을 추가할 수 있어서, 레이아웃의 자유도가 정말 높습니다. 유료 페이지 빌더 플러그인 없이도 전문적인 디자인을 구현할 수 있어요.

특별한 형식 유지하기 | Verse & 사용자 정의 HTML

Verse 블록은 시나 가사처럼 행 바꿈이 중요한 텍스트를 입력할 때 사용해요. 일반 문단 블록에서는 엔터를 쳐도 줄이 자동으로 병합되지만, Verse 블록은 입력한 그대로의 형식을 유지합니다.

문학 콘텐츠나 좋아하는 명언을 소개할 때 이 블록을 쓰면, 원본의 리듬감과 형식이 살아나요.

사용자 정의 HTML 블록은 워드프레스의 강력한 기능입니다. HTML 코드를 직접 입력해서 블록 에디터로는 구현할 수 없는 고급 기능을 만들 수 있거든요. 유튜브 영상 임베드, 외부 위젯, 커스텀 스타일링 등이 모두 가능합니다.

다만 HTML을 모르면 쓰기 어려울 수 있어서, 초보자라면 자신이 필요한 HTML을 찾아서 복사-붙여넣기하는 방식으로 시작하면 됩니다.

초보자가 꼭 알아야 할 블록 에디터 팁 5가지

첫 번째, 키보드 단축키로 시간 절약하기

블록 에디터에서 Alt+Shift+H를 누르면 모든 단축키가 나타나요. 자주 쓰는 단축키를 외우면 마우스 없이도 글을 빠르게 작성할 수 있습니다.

두 번째, 블록을 복제해서 시간 절약하기

이미 만든 블록을 다시 만드는 건 비효율적이에요. 블록을 선택한 후 우측 상단의 메뉴에서 ‘복제’ 옵션을 선택하면, 같은 형식의 블록이 바로 추가됩니다.

세 번째, 재사용 블록으로 자주 쓰는 콘텐츠 저장하기

자주 사용하는 코드 스니펫이나 문단이 있다면, 그걸 재사용 블록으로 저장해두세요. 나중에 다른 글에서 한 번의 클릭만으로 추가할 수 있어요.

네 번째, 정기적으로 저장하기

워드프레스는 자동 저장 기능이 있지만, 길고 복잡한 글을 쓸 때는 수동으로 자주 저장하는 게 좋습니다. Ctrl+S 단축키로 언제든 저장할 수 있어요.

다섯 번째, 미리보기로 발행 전 확인하기

글을 다 썼으면 ‘미리보기’ 버튼을 눌러서 실제 웹사이트에 어떻게 표현되는지 확인하세요. 모바일 화면에서도 어떻게 보이는지 확인할 수 있습니다.

마무리: 블록 에디터는 더 이상 어렵지 않다

이제 워드프레스 블록 에디터의 주요 블록 11가지를 모두 살펴봤어요. 처음엔 많아 보이겠지만, 사실 자주 쓰는 건 Paragraph, Heading, List, Image 정도 4가지입니다. 나머지는 특별한 상황에 따라 선택해서 쓰면 되니까요.

블록 에디터의 가장 큰 장점은 코드를 몰라도 전문적인 레이아웃을 만들 수 있다는 거예요. 색상, 배경, 여백을 자유롭게 조정할 수 있어서, 글쓰기에만 집중할 수 있죠.

처음 블록 에디터를 접했을 때 어렵고 낯설었던 것도 지금 생각하면 단순한 ‘적응의 문제’였을 거예요. 한 두 글을 써보면 금방 손에 익을 것 같습니다.

워드프레스 블록 에디터를 마스터해서, 더 빠르고 쉽게 전문적인 글을 만들어보세요!