WordPress Gutenberg: 새로운 블록 편집기를 경험하십시오

모든 새로운 WordPress 릴리스는 큰 열정을 가지고 있으며 WordPress 5.0 "Bebo"도 예외는 아닙니다.

사실, WordPress 5.0은 이전 버전보다 훨씬 더 많은 관심을 받았으며 이유는 간단합니다. "블록"을 기반으로 하는 새로운 WordPress 편집기인 Gutenberg는 이제 인기 있는 CMS의 필수 부분입니다!

이 기사에서는 구텐베르그 워드프레스 에디터가 무엇인지, 어떻게 익숙해지는지 설명하겠습니다. 시작하자!

워드프레스 구텐베르크란?

WordPress Gutenberg는 완전히 새롭게 디자인되고 재구성된 편집기입니다. 이것은 편집기를 일련의 문제에 대한 간단한 수정으로 보는 WordPress 사용자에게 큰 도움이 됩니다. 사실 콘텐츠 제작을 직접 다루는 사용자(블로거, 편집자, 카피라이터)는 구텐베르크 편집자에 대해 좋은 말만 합니다.

그것은 WordPress Classic Editor, TinyMCE를 대체했으며 WordPress 5.0 이상에서 WordPress 핵심의 일부가 되었습니다.

Gutenberg WordPress Editor는 게시물 및 페이지 작성 경험을 새로운 차원으로 끌어올려 콘텐츠 작성 경험을 풍부하게 합니다. 완벽한 블로그 게시물을 작성하는 데 사용할 수 있는 단순한 도구가 아니라 강력한 시각적 편집기입니다. 사용자가 모든 유형의 콘텐츠를 편리하게 생성할 수 있는 블록 아키텍처를 기반으로 합니다.

단축 코드 및 수동 HTML 블록을 제거하고 콘텐츠 편집 및 게시 프로세스를 크게 단순화하기 위해 Gutenberg는 동적 블록을 제공하여 콘텐츠 생성 및 페이지 관리를 보다 사용자 친화적으로 만듭니다.

구텐베르크 편집기 대 클래식 편집기

워드프레스 새 편집기에 대해 알아보기 전에 먼저 구텐베르크 블록 편집기와 클래식 편집기의 차이점을 비교하고 이해하겠습니다.

다음은 Classic WordPress Editor의 모습입니다.

WordPress 5.0으로 업그레이드하는 경우 새 블록 편집기는 다음과 같습니다.

보시다시피, 이들은 WordPress에서 콘텐츠를 만들기 위한 완전히 다른 두 개의 편집기입니다.

기존의 클래식 편집기는 Microsoft Word와 유사한 서식 지정 버튼이 있는 텍스트 편집기였습니다. 새 편집기에는 "블록"(따라서 블록 편집기라는 이름)이라는 편집에 대한 완전히 다른 접근 방식이 있습니다.

단락, 이미지, 비디오, 갤러리, 오디오, 목록 등에 대한 블록을 추가할 수 있습니다. 모든 공통 콘텐츠 요소에 대한 블록이 있으며 다른 요소는 WordPress 플러그인을 통해 추가하거나 코드를 통해 구텐베르크 편집기의 기능을 확장하여 추가할 수 있습니다.

구텐베르크 워드프레스 에디터를 사용하는 이유

• Gutenberg Editor는 시각적이고 직관적이며 깨끗합니다.
• 섹션별로 콘텐츠를 수정할 수 있습니다. 이것은 명확한 그림을 제시하고 실수를 피하는 데 도움이 됩니다.
• 거의 모든 사용 사례에 대해 다양한 블록을 선택할 수 있습니다.
• 머리글과 바닥글은 기본적으로 표시됩니다.
• WordPress Gutenberg를 사용하면 콘텐츠 스타일을 지정하기 위해 다른 빌더를 설치할 필요가 없습니다.
• 모바일 장치 및 태블릿에 대한 뛰어난 사용성.
• 다른 플랫폼의 콘텐츠를 쉽고 빠르게 임베딩합니다.

플러그인의 성능은 모든 장치에 적합하며 웹 사이트는 사용자에 대해 속도가 느려지지 않습니다.

— 출처: WordPress/Gutenberg Editor의 성능 벤치마크

그러나 WordPress의 모든 것과 마찬가지로 Gutenberg 플러그인에도 반전이 있습니다. 지금이 커뮤니티의 플러그인 채택에 부정적인 영향을 미칠 것으로 생각되는 포인트를 나열할 수 있는 좋은 기회라고 생각합니다.

구텐베르크 WordPress 편집기의 단점

콘텐츠 편집 문제 외에도 사용자는 Gutenberg Editor로 작업할 때 때때로 어려움을 겪습니다. 여기 예가 있습니다!

새로운 #WordPress 사이트에서 기본 작업을 수행하는 데 정기적으로 문제가 발생합니다. 아직 저장되지 않은 새 페이지의 텍스트에 하이퍼링크를 추가하고 현재 기존 페이지를 업데이트하는 블록 오류를 수신하는 데 어려움을 겪었습니다. 다시 클래식 편집기를 사용할 때입니다. 구텐베르크 pic.twitter.com/rdUII0OUZF

— 콜린 M. 브래디(@ColleenMBrady) 2019년 4월 12일

일부 사용자는 설치된 플러그인 및 테마와의 호환성 문제를 보고했습니다.

플러그인 호환성은 Gutenberg와 관련하여 심각한 문제입니다. 이유는 간단합니다. 대부분의 플러그인은 새로운 기능을 추가하고 핵심 기능을 확장하기 위한 단축 코드를 포함하기 위해 WordPress Editor와 직접 상호 작용합니다.

이러한 이유로 설치된 플러그인은 Gutenberg와 호환되어야 합니다. 많은 플러그인이 플러그인 호환성을 제공(또는 관리)하지 않기 때문에 이것은 심각한 문제입니다. 따라서 Gutenberg와 플러그인의 호환성 문제를 확인하는 것이 좋습니다.

워드프레스 구텐베르크로 작업하기

이제 완전히 새로운 WordPress 편집기인 Gutenberg의 주요 블록을 살펴보겠습니다.

구텐베르크 블록이란?

블록은 콘텐츠 레이아웃을 생성하기 위해 편집기에 추가하는 콘텐츠 조각입니다. 페이지 또는 게시물에 추가하는 각 항목은 블록입니다.

Classic WordPress Editor는 이미 이러한 요소를 지원하지만 Gutenberg는 코드 작성에 대한 심층적인 지식 없이도 콘텐츠 통합을 보다 쉽고 직관적으로 만듭니다.

오른쪽에 있는 "+" 버튼은 탭을 추가 탭으로 분할하여 엽니다. 각 탭은 논리적으로 구성된 블록 목록을 보여줍니다. "블록" 탭에는 다음 블록 그룹이 표시됩니다.

• "인라인 요소" 섹션에는 현재 인라인 이미지를 삽입하기 위한 단일 블록이 있습니다.
• "공통 블록" 섹션에는 게시물 또는 페이지를 생성하기 위한 단락, 이미지, 제목 등을 포함한 모든 기본 블록이 포함됩니다.
• "서식" 섹션에는 게시물 또는 페이지의 내용을 사용자 정의하기 위한 코드, 사용자 정의 HTML과 같은 더 많은 옵션이 있습니다.
• "레이아웃 요소" 섹션에서는 버튼, 열, 그룹, 미디어 및 텍스트를 사용자 지정할 수 있습니다.
• "위젯" 섹션에서는 단축 코드, 아카이브, 캘린더, 최신 댓글, 게시물 및 태그 클라우드를 포함할 수 있습니다.
• "임베딩" 섹션은 추가 플러그인 없이 Facebook, Twitter, YouTube 등과 같은 외부 리소스 통합에 대한 지원을 추가합니다.

구텐베르크 블록 관리자

이 기능은 대부분의 사용자가 사용하지 않을 모든 블록을 보는 것이 짜증난다고 생각하기 때문에 항상 수요가 있었습니다.

여러분에게 찾아올 새로운 블록 관리자를 가지고 노는 것 #Gutenberg #WordPress 설치 *곧*! 지금까지 본 것이 마음에 듭니다. 이 기능은 사용자 수준에서 차단을 켜고 끄는 데 큰 가치가 있다고 생각합니다(이미 워크샵에서 이에 대한 질문이 있었습니다!) pic.twitter.com/uZfAMNgF2y

— Monique Dubbelman(@BOEmedia) 2019년 3월 15일

이 기능은 현재 최신 Gutenberg 버전에서 사용할 수 있으며 WordPress 5.2와 함께 제공될 예정입니다. WordPress 5.0을 사용하는 경우 Gutenberg 플러그인을 다운로드합니다. 모든 페이지 또는 게시물에서 세로 줄임표(⋮)로 표시되는 "추가 도구 및 옵션 숨기기"에서 "차단 관리자" 설정을 구성할 수 있습니다.

" 블록 관리자 "를 클릭하면 블록 활성화 및 비활성화를 허용하는 메뉴가 나타납니다. 비활성화하려는 블록의 선택을 취소하기만 하면 됩니다.

구텐베르크 블록 만들기

Gutenberg Editor의 상단 표시줄은 직관적인 사후 관리를 위한 일련의 도구를 제공합니다. 도구 모음 아래에는 콘텐츠를 만들기 위한 두 영역과 설정 메뉴가 있습니다.

새 페이지 또는 게시물의 편집 영역에는 제목과 첫 번째 단락을 위한 두 개의 기본 블록과 새 블록을 추가하기 위한 버튼이 있습니다(아래 참조).

기본 블록

기사 블록을 구성할 수 있는 경우 단락 블록에는 두 개의 도구 모음이 제공됩니다. 첫 번째 왼쪽 상단은 서식 도구를 제공합니다. 두 번째는 오른쪽 버튼으로 활성화되는 메뉴 형식으로 구성되어 있습니다.

이 메뉴에서 현재 블록 유형을 변경하고 단락을 헤더, 목록 또는 인용문으로 변환할 수도 있습니다. 메뉴는 블록 유형에 따라 다릅니다.

도구 메뉴

"+" 기호 아래에 숨겨진 버튼을 사용하면 새 블록을 삽입할 수 있습니다. 마우스를 가져가면 기본 블록의 바로 가기가 표시됩니다. 그리고 이 블록을 클릭하면 사용 가능한 블록 패널이 열립니다.

포함 블록 추가

필요한 블록을 선택하면 편집기에 코드 생성 옵션이 포함된 양식이 표시됩니다. 이제 사용자는 코드를 관리할 필요 없이 마법사를 따르기만 하면 됩니다. 다음 예에서는 YouTube 동영상의 URL을 입력하기만 하면 됩니다.

포함 양식 추가

"Embed Block"이 삽입되면 사용 가능한 옵션이 아래 이미지와 같이 변경됩니다.

포함 블록 구성

많은 블록을 사용하여 유형을 변경할 수 있습니다(예: 단락에서 목록으로, 인용문 또는 머리글로 변경). 이 간단한 기능이 사용자에게 제공하는 자유도를 상상할 수 있습니다.

목록 블록

삽입된 블록은 간단한 드래그 앤 드롭 또는 블록 왼쪽에 있는 위/아래 버튼을 클릭하여 재정렬할 수 있습니다.

도구 모음

새 편집기의 도구 모음은 클래식 편집기의 사이드바와 유사합니다. 차이점은 사용성 원칙과 더 일치하고 확실히 사용자 경험을 풍부하게 하는 인터페이스에 있습니다.

기본 사이드바

새 사이드바는 "문서" 및 "차단"의 두 탭으로 나뉩니다.

첫 번째 탭에는 아코디언 메뉴와 같은 방식으로 압축하거나 확장할 수 있는 여러 위젯이 있습니다. 블록이라고 하는 두 번째 탭에는 선택한 블록의 고급 설정이 표시됩니다. 다음 이미지에서 "단락" 블록에 대한 설정을 볼 수 있습니다.

재사용 가능한 블록 생성

블록의 장점 중 하나는 개별적으로 저장하고 재사용할 수 있다는 것입니다. 이는 특정 콘텐츠 형식 스니펫을 출판물에 자주 사용해야 하는 블로거와 편집자에게 특히 유용합니다.

각 블록의 도구 모음 오른쪽 모서리에 있는 메뉴 버튼을 클릭하기만 하면 됩니다. 팝업 메뉴에서 "재사용 가능한 블록에 추가" 옵션을 선택합니다.

재사용 가능한 블록의 이름을 입력하라는 메시지가 표시됩니다. 이름을 입력하고 "저장" 버튼을 클릭합니다.

블록 편집기는 이제 이를 재사용 가능한 블록으로 저장합니다. 이제 블록을 저장했으므로 재사용 가능한 블록을 웹사이트의 다른 게시물과 WordPress 페이지에 추가하는 방법을 살펴보겠습니다.

구텐베르크 블록 가져오기/내보내기

재사용 가능한 블록을 추가하려는 페이지로 이동하기만 하면 됩니다. 편집 섹션에서 "블록 추가" 버튼을 클릭합니다.

"재사용 가능" 탭에서 저장된 블록을 찾을 수 있습니다. 검색창에 이름을 입력하여 찾을 수도 있습니다.

마우스를 가져가면 블록에 대한 빠른 개요를 볼 수 있습니다. 블록을 클릭하여 페이지에 삽입하기만 하면 됩니다.

모든 재사용 가능한 블록은 WordPress 데이터베이스에 저장되며 " 모든 재사용 가능한 블록 관리 " 링크를 클릭하여 목록을 관리할 수 있습니다. " 블록 관리자 " 페이지로 이동합니다. 여기에서 재사용 가능한 블록을 편집하거나 삭제할 수 있습니다. 재사용 가능한 블록을 내보내고 다른 WordPress 웹 사이트에서 사용할 수도 있습니다.

구텐베르크 편집기를 비활성화하는 방법?

새로운 WordPress 편집기는 가장 논란이 많은 WordPress 기능 중 하나입니다. 다행히 "차단" 패러다임을 견딜 수 없는 사용자는 항상 클래식 편집기로 돌아갈 수 있습니다. 그리고 그들은 앞으로 몇 년 동안 그것을 할 수 있습니다.

@SassCSS 또는 @PostCSS(또는 둘 다)가 기본 `wp-scripts` 빌드 프로세스에 포함되어야 하는지 여부에 대해 #Gutenberg repo에서 흥미로운 논쟁이 일어나고 있습니다. 귀하의 의견은 소중합니다: https://t.co/qbPmY80NhJ #WordPress

— Morten은 이 모든 것에서 장기간 휴식 중입니다(@mor10) 2019년 4월 4일

Disable Gutenberg는 가장 인기 있는 'Anti-Gutenberg' 플러그인 중 하나입니다. 블록 편집기를 근절하고 클래식 워드프레스 편집기로 대체할 계획입니다.

플러그인은 WordPress 5.0 이전 버전에 표시된 "Try Gutenberg" 초대를 포함하여 WordPress에서 모든 Gutenberg 트랙을 삭제할 수 있는 가능성을 제공합니다. 플러그인이 설치되면 "설정" 영역의 새 섹션에서 모든 옵션을 사용할 수 있습니다(기본적으로 활성화됨).

마무리!

워드프레스 구텐베르크 에디터를 보면 실제 콘텐츠를 만드는 것보다 블록을 추가하고 조정하는 데 더 많은 시간을 할애할 것인지 궁금할 것입니다. 글쎄, 새로운 블록 편집기는 믿을 수 없을 정도로 빠르며 몇 분 동안 아주 기본적인 사용만으로도 플러그인을 더 자주 사용하게 될 것입니다.

이 기사와 관련된 피드백이 있는 경우 아래의 댓글 섹션을 자유롭게 사용하세요.