워드프레스(WordPress) 블록 편집기(Gutenberg) 사용 방법

wordpress block editor

WordPress의 편집기는 버전이 업데이트될 때마다 계속 진화하여, 2018년에는 블록 편집기(Gutenberg)로 새롭게 태어났습니다.

이번 글에서는 블록 편집기를 활용해 글을 발행하는 흐름과 블록의 기본 조작법을 소개합니다.

블록 편집기는 처음 사용하는 사람도 깔끔한 글을 작성할 수 있지만, 기능이 방대해 다루기 어렵다고 느끼기 쉽습니다.

그래서 이번 글에서는 글 발행 과정을 차례대로 안내하면서 편집기 사용법과 블록 기본 조작을 자세히 알려드립니다.

이 글을 통해 블록 편집기 사용법을 익혀 보세요! 그럼 시작하겠습니다.

블록 에디터(Gutenberg)란?

블록 에디터(Gutenberg)란, WordPress 5.0부터 표준 탑재가 된 에디터로, 문장이나 이미지 등을 블록이라고 하는 단위로 관리 합니다.

블록 편집기 빈 화면

블록 에디터의 큰 특징은 HTML이나 CSS 지식이 없어도 문장이나 이미지의 위치 조정과 레이아웃 변경을 간편하게 할 수 있다는 점입니다.

또한, 자주 쓰는 문구 등을 등록해 재사용할 수 있는 기능이 기본으로 제공되어, 보다 효율적으로 글을 작성할 수 있습니다.

블록 에디터와 클래식 에디터, 어느 쪽이 더 추천될까?

WordPress에는 블록 에디터뿐만 아니라, WordPress 5.0 이전에 사용되던 ‘클래식 에디터’라는 것도 있습니다.

▼이쪽이 클래식 에디터입니다

참조-클래식 에디터

WordPress의 확장 기능인 플러그인을 사용하면 클래식 에디터로도 운영이 가능합니다. 하지만 이제 막 블로그를 시작하려는 분이든, 이미 시작하신 분이든 블록 에디터를 추천드립니다.

그 이유는 기능과 사용 편의성 면에서 블록 에디터가 훨씬 뛰어나기 때문입니다. 출시 이후 다양한 개선과 기능 추가가 이루어졌으며, 현재도 계속해서 발전하고 있습니다.

따라서 굳이 플러그인을 추가해가며 예전 에디터를 사용할 필요 없이, 바로 사용할 수 있는 블록 에디터를 추천드립니다!

참고로, 플러그인 ‘Classic Editor(클래식 에디터)’는 적어도 2025년까지, 또는 필요 없게 될 때까지는 완전히 지원 및 유지관리될 예정이라고 합니다.

관리자 소나무
관리자 소나무

무조건 블록 에디터로 시작하세요. 클래식 에디터는 한계점이 있습니다.
저처럼 클래식 에디터를 고집하다 블록 에디터로 넘어가는 우(愚)를 범하지 않으시길….

블록 에디터로 글을 발행하기까지의 5단계

우선은 어려운 건 생각하지 말고, 에디터를 활용해 글을 작성하고 각종 설정을 한 뒤, 공개까지 한 번 해보는 것이 좋습니다!

글이 공개되기까지의 절차는 다음 단계로 완료됩니다.

  1. 글 제목을 입력하기
  2. 글 작성하기
  3. 게시 설정하기
  4. 미리보기로 확인하기
  5. 글 공개하기

글 제목을 입력하기

제목 추가」를 클릭하고, 글 제목을 입력합니다.

제목 추가 클릭 후 제목 입력

글을 작성하기

글자를 입력한 뒤 마우스 커서를 위에 올리면 메뉴바가 나타납니다. 기능이 엄청 다양하지만, 사용하다 보면 같은 기능만 사용하게 되더군요.

시간이 여유로우실 때, 천천히, 장난감 만지듯이 가지고 노시다 보면 쉽게 배우실 수 있습니다.

메뉴바-문자
메뉴바-굵게

1. 문단 추가하기

문단은 “Enter로 줄바꿈만 해주면” 간단히 추가할 수 있습니다.
글꼴 크기“나 “글자 색상” 변경은 설정 사이드바에서 할 수 있습니다.

문단 추가하기

같은 문단 내에서 줄을 바꾸며 글을 쓰고 싶을 때는 「Shift + Enter」,
새로운 문단으로 넘어가고 싶을 때는 「Enter」로 줄바꿈을 합니다.

2. 제목(헤드라인) 삽입하기

방법 1

제목으로 만들고 싶은 텍스트를 입력한 뒤, 블록 변환 기능을 이용해 제목(헤드라인)으로 변경합니다.

블록 변환 기능을 이용해 제목(헤드라인)으로 변경
방법 2

문단의 앞부분에 제목 레벨에 맞는 「#」기호를 입력하면, 빠르게 제목 블록을 불러올 수 있습니다.
예:

  • # 제목 1 → H1
  • ## 제목 2 → H2
  • ### 제목 3 → H3
방법 3

가장 추천드리는 방법은「Shift + alt + 숫자」입니다.
익숙해지면 이 방법이 가장 빠르고 편합니다.

  • Shift + alt + 1 → H1
  • Shift + alt + 2 → H2
  • Shift + alt + 3 → H3

제목 1(h1)은 기본적으로 글 제목에 사용되기 때문에, 본문에서는 사용하지 않고 제목 2(h2)부터 제목 4(h4)까지 사용하는 것이 좋습니다.

제목은 h2 → h3 → h4 순서대로 계층을 지켜가며 설정하는 것을 추천드립니다.
순서가 어긋나면 SEO 측면에서도 좋지 않고, 글의 가독성도 떨어지는 블로그가 될 수 있습니다.

3. 목록 삽입하기

방법 1

목록으로 만들 항목들을 줄바꿈(Enter)으로 구분해서 입력한 뒤, 블록 변환 기능을 이용해 목록으로 변경합니다.

블록 변환 기능을 이용해 목록으로 변경
방법 2

블록 추가하기에서 바로 목록을 추가하는 방법도 있습니다.

블록 추가하기에서 바로 목록을 추가하는 방법

목록은 글머리 기호(•)뿐만 아니라, 번호 매기기(1. 2. 3.) 형식으로도 만들 수 있습니다.
항목의 성격에 따라 적절하게 구분해서 사용해 보세요!

4. 이미지 삽입하기

왼쪽 상단의 「+」아이콘을 클릭한 후, 「미디어」에서 「이미지」를 클릭합니다. (검색창에 이미지를 검색하셔도 됩니다.)

이미지 삽입하기1

이미지 블록을 추가하면 3개의 버튼이 표시됩니다.

새로운 이미지를 업로드할 때는 「업로드」를,
이미 업로드된 파일을 사용할 때는 「미디어 라이브러리」를 클릭하세요.
이미지 URL을 직접 지정하고 싶을 경우에는 「URL에서 삽입」을 클릭하면 됩니다.

이미지 삽입하기2

이미지를 업로드하면 에디터 상에 이미지가 표시됩니다.

이미지의 위치나 크기 조절, 그리고 대체 텍스트(alt 텍스트 : 링크가 끊겼거나 이미지가 표시되지 않을 때 대신 보여줄 텍스트) 설정도 할 수 있습니다.

이미지 삽입하기3

대체 텍스트(Alt텍스트)는 꼭! 꼭! 반드시! 기입해 주세요. SEO측면에서 매우 중요합니다!

게시 설정하기

글 작성이 완료되면, 공개를 위한 준비와 설정을 진행합니다.

1. 퍼머링크 (Permalink)

퍼머링크란, 블로그 글마다 설정되는 URL을 의미합니다. 기본값으로는 글 제목(한국어)이 설정되어 있으므로, 이를 영어 표기로 수정하는 것이 좋습니다.

설정 사이드바에서 「슬러그」 링크를 클릭한 뒤, 슬러그를 영어 표기로 변경하세요.

퍼머링크 (Permalink)

퍼머링크를 한국어로 하느냐? 영어로 하느냐? 는 오래된 논쟁거리 중 하나입니다.

SEO측면에서 결론은 “영어로 표기하면 좋지만, 크게 중요하지 않다” 입니다.

영어 표기로 하지 않으면, 한국어 URL의 경우 아래처럼 문자 깨짐 현상, 주소가 지나치게 길어지는 현상이 발생해 어떤 페이지인지 알기 어려워 독자에게 불안감을 줄 수 있습니다. > 하지만, 블로그에 글이 많아지면 많아 질수록 귀찮아서 영어로 변경하지 않게 되더군요.

한국어 URL 사용 시 예시

.https://dealcut.net/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%eb%b8%94%eb%a1%9c%ea%b7%b8-%ea%b0%9c%ec%84%a4-%ed%9b%84-%eb%b0%98%eb%93%9c%ec%8b%9c-%ed%95%b4%ec%95%bc-%ed%95%a0-%ec%b4%88%ea%b8%b0-%ec%84%a4%ec%a0%95-4/

2. 카테고리 / 태그

카테고리와 태그는 관련된 글들을 하나로 묶기 위한 도구입니다. 보통 “카테고리는 폴더”, “태그는 포스트잇”에 비유되곤 합니다.

일반적으로 한 글에는 “카테고리는 1개”, “태그는 여러 개 가능”이라고 알려져 있습니다.

설정 사이드바에서 「카테고리」나 「태그」를 클릭해 원하는 카테고리와 태그를 설정하세요.

카테고리

「신규 카테고리 추가」나 「신규 태그 추가」를 할 경우, URL의 일부가 되는 슬러그가 한국어로 설정되므로, 아래 절차에 따라 수정해 주세요!

이번에는 카테고리를 예로 들었지만, 태그도 같은 방법으로 수정할 수 있습니다.

메뉴에서 「글」 → 「카테고리」를 선택하고, 수정하고 싶은 카테고리에 마우스를 올린 뒤 「빠른 편집」을 클릭합니다.

슬러그」에 영어 주소를 입력한 후, 「카테고리 업데이트」를 클릭합니다.

태그의 필요성과 활용법에 대해서는 다음 글에서 자세히 설명하고 있습니다.

3. 대표 이미지

대표 이미지(아이캐치)란, 글 목록 화면 등에서 표시되는 이미지를 말합니다.
독자의 관심을 끌 뿐만 아니라 블로그 자체를 더 화사하게 만들어 주므로 반드시 설정하는 것이 좋습니다.

설정 사이드바에서 「대표 이미지」를 선택한 뒤, 「대표 이미지 설정」을 클릭하세요.

대표 이미지

미디어 라이브러리가 표시되면, 「파일 업로드」 탭에서 대표 이미지를 업로드하세요.

업로드가 완료되면, 설정하려는 대표 이미지에 체크가 되어 있는지 확인한 후, 「대표 이미지 설정」을 클릭합니다.

저에게 워드프레스 사이트 제작 의뢰를 맡기신 경우,
대표 이미지 설정을 따로 할 필요 없이, 게시글의 첫번째 이미지를 자동으로 대표 이미지로 설정할 수 있습니다.
저도 이 방법을 이용 중 입니다.

미리보기로 확인하기

글이 완성되면, 미리보기로 결과물을 확인해 봅시다.

에디터 상과 실제 블로그에서는 레이아웃이 다를 수 있으니, 의도한 대로 잘 나왔는지 꼭 확인하세요!

미리보기는 헤더 메뉴의 「미리보기」 버튼을 클릭하면 됩니다.

미리보기

글 게시하기

수고하셨습니다! 이로써 게시 전 작업이 모두 완료되었습니다!
마지막으로 글을 공개해 볼까요?

헤더 메뉴에서 「공개」 버튼을 클릭하면, 글이 전 세계에 공개됩니다.

글 게시하기

절차가 많아서 처음엔 조금 복잡할 수 있지만, 익숙해지면 척척 빠르게 작업할 수 있게 될 거예요!!

마치며

이번에는 블록 에디터 사용법을 초보자도 알기 쉽게 설명했습니다.

블록 에디터를 잘 다루기 위해서는 “장난감을 가지고 놀 듯, 이것저것 만져보는 것”이 가장 빠른 길입니다!

연습용으로 한 편의 글을 만들어 다양한 블록 추가와 변환을 시도해 보는 것이 좋습니다.

이 글을 참고해서 블록 에디터 사용법을 마스터하고, 스트레스 없이 블로그를 작성해 보세요!

여기까지 읽어주셔서 감사합니다!

댓글

제목과 URL을 복사했습니다