구텐베르크 블록 에디터 사용법

처음 글을 작성할 때는 문장을 입력하는 것만 익숙해도 충분해 보이지만, 글이 길어지면 제목과 이미지, 목록을 어떻게 배치할지 고민하게 됩니다. 문단을 옮기거나 표를 추가하는 일도 처음에는 생각보다 번거롭게 느껴집니다.

구텐베르크 블록 에디터는 이런 작업을 각각의 블록으로 나누어 처리할 수 있게 만든 워드프레스의 기본 편집기입니다. 문단 하나, 이미지 하나, 제목 하나를 별도의 블록으로 다루기 때문에 글의 순서를 바꾸거나 필요한 요소를 추가하기도 편합니다.

모든 기능을 외울 필요는 없습니다. 실제 글을 작성하면서 자주 사용하는 블록 몇 가지만 익혀도 대부분의 정보성 글을 충분히 구성할 수 있습니다.

1. 구텐베르크는 블록으로 글을 작성한다

구텐베르크에서는 글의 각 요소를 하나의 블록으로 취급합니다.

문장을 입력하면 문단 블록이 만들어지고, 이미지를 넣으면 이미지 블록이 생성됩니다. 제목, 목록, 표, 인용문 등도 각각 다른 블록으로 추가할 수 있습니다.

블록을 선택하면 위치를 위아래로 이동하거나 복제하고, 필요 없는 블록을 삭제할 수 있습니다.

긴 글을 작성하다가 특정 문단을 다른 위치로 옮겨야 할 때도 전체 내용을 다시 작성할 필요가 없다는 것이 편리한 점입니다.

2. 글 작성에 자주 사용하는 블록

처음부터 모든 블록을 알아둘 필요는 없습니다. 일반적인 블로그 글이라면 다음 정도만 익혀도 충분합니다.

블록사용하는 경우
제목글의 큰 주제와 세부 주제 구분
문단일반적인 본문 작성
이미지화면이나 제품, 상황을 보여줄 때
목록여러 항목을 간단하게 정리할 때
여러 내용을 비교할 때
인용문다른 문장이나 핵심 내용을 구분할 때

특히 제목 블록은 글의 구조를 만드는 데 활용하면 좋습니다.

글의 제목 아래에 주요 내용을 H2로 나누고, 필요한 경우 H3로 세부 내용을 구분하면 긴 글도 한눈에 구조를 파악하기 쉬워집니다.

3. 슬래시(/)로 블록 빠르게 찾기

구텐베르크에서 편리하게 사용할 수 있는 기능 중 하나가 슬래시 명령입니다.

새로운 줄에서 /를 입력하면 사용할 수 있는 블록 목록이 나타납니다.

예를 들어 /이미지, /표, /목록처럼 입력하면 원하는 블록을 빠르게 찾을 수 있습니다.

글을 작성하다가 계속 마우스로 + 버튼을 찾아가는 것보다 키보드로 바로 블록을 선택할 수 있어 작성 흐름을 유지하기 편합니다.

4. 블록 위치와 모양 쉽게 바꾸기

작성하다 보면 이미지와 문단의 순서를 바꾸거나 같은 형식의 블록을 하나 더 만들고 싶은 경우가 있습니다.

이럴 때 블록을 선택하면 이동이나 복제와 관련된 메뉴를 사용할 수 있습니다.

특히 비슷한 형식의 내용을 반복해서 작성한다면 기존 블록을 복제한 뒤 문장만 수정하는 방법이 편합니다.

다만 같은 내용을 여러 글에 그대로 반복해서 넣기보다는 각 글의 내용에 맞게 필요한 부분만 사용하는 것이 좋습니다.

5. 이미지와 대체 텍스트 확인하기

이미지를 추가했다면 대체 텍스트(Alt Text)도 확인해 보세요.

대체 텍스트는 이미지가 정상적으로 표시되지 않을 때 이미지의 내용을 설명하거나 접근성을 높이는 데 활용됩니다.

예를 들어 워드프레스 관리자 화면을 캡처한 이미지라면 단순히 이미지1이라고 입력하기보다 “워드프레스 글 편집 화면”처럼 이미지가 무엇을 보여주는지 설명하는 방식이 좋습니다.

모든 이미지에 같은 키워드를 반복해서 넣을 필요는 없습니다. 실제 이미지의 내용을 정확하게 설명하는 것이 우선입니다.

6. 표와 목록은 필요한 곳에서 사용하기

설명을 길게 이어가는 것보다 여러 항목을 비교해야 할 때는 표가 더 편할 수 있습니다.

예를 들어 플러그인의 특징이나 설정 방법을 비교할 때 표를 사용할 수 있습니다.

반대로 순서대로 따라 해야 하는 작업이라면 표보다 번호 목록이 적합합니다.

무조건 표를 많이 넣는 것이 좋은 것은 아닙니다. 정보를 전달하는 데 더 이해하기 쉬운 형태를 선택하면 됩니다.

7. 글을 작성한 뒤에는 실제 화면 확인하기

편집 화면에서 보기 좋다고 해서 방문자 화면에서도 항상 똑같이 보이는 것은 아닙니다.

글을 발행하기 전에 미리보기를 이용해 PC와 모바일 화면을 각각 확인해 보세요.

특히 다음 부분을 확인하면 좋습니다.

  • 제목과 본문 사이 간격이 적당한가?
  • 이미지가 화면 밖으로 잘리지 않는가?
  • 표가 모바일에서 가로로 너무 길어지지 않는가?
  • 목록의 들여쓰기가 지나치지 않은가?
  • 링크와 버튼을 쉽게 누를 수 있는가?
  • 문단이 지나치게 길지는 않은가?

이 과정을 거치면 편집 화면에서는 발견하지 못했던 문제를 쉽게 찾을 수 있습니다.

자주 묻는 질문

Enter와 Shift + Enter는 어떻게 다른가요?

Enter를 누르면 일반적으로 새로운 문단 블록이 만들어집니다.

반면 Shift + Enter는 같은 문단 안에서 줄만 바꾸는 데 사용할 수 있습니다.

문단을 완전히 나누려는 것인지 단순히 한 줄을 바꾸려는 것인지에 따라 구분해서 사용하면 됩니다.

클래식 에디터를 사용하면 안 되나요?

클래식 에디터를 사용한다고 해서 글을 작성할 수 없는 것은 아닙니다.

다만 현재 워드프레스의 기본 편집 방식은 블록 에디터이므로 앞으로 워드프레스를 계속 사용할 예정이라면 기본적인 블록 기능을 익혀두는 것이 편리합니다.

마무리

구텐베르크의 장점은 많은 기능을 제공한다는 것보다 글의 각 요소를 필요한 만큼 조합하고 수정할 수 있다는 점에 있습니다.

처음부터 모든 블록을 외우려고 하기보다는 문단, 제목, 이미지, 목록, 표처럼 자주 사용하는 기능부터 익혀보세요.

그리고 글을 완성한 뒤에는 편집 화면만 보지 말고 실제 모바일 화면에서도 직접 확인하는 습관을 들이는 것이 좋습니다.

결국 좋은 편집은 화려한 효과를 많이 사용하는 것이 아니라 읽는 사람이 내용을 쉽게 이해할 수 있도록 필요한 요소를 적절하게 배치하는 것에 가깝습니다.

댓글 남기기