구텐베르크 블록 편집기 검토(WordPress 고급 사용자 작성)

이 게시물에서는 Gutenberg 프로젝트의 일부로 플랫폼에 도입된 WordPress 블록 편집기를 검토할 것입니다. 그것은 4년 동안 있었고 WordPress에서 일어난 가장 논란이 많은 변화 중 하나였습니다.

이제는 성숙해질 시간도 있고 그런 감정이 깃든 주제이기 때문에 제가 한 몫 하는게 좋겠다는 생각이 들었습니다. 저는 워드프레스 전문 블로거로서 워드프레스에 글을 쓰는 것뿐만 아니라 하루 종일 하루를 보냅니다. 뿐만 아니라 다른 기사에 대해 플랫폼의 모든 측면을 반복해서 테스트합니다. 당연히 여기에는 블록 편집기와 성장하는 기능이 포함됩니다.

따라서 다음은 WordPress 고급 사용자의 관점에서 구텐베르크 블록 편집기에 대한 개인적인 리뷰입니다. 내가 좋아하는 것과 싫어하는 것, 그리고 개선할 수 있다고 생각하는 것에 대해 이야기하겠습니다.

WordPress 블록 편집기: 정의

찬반 양론으로 뛰어 들기 전에 먼저 정확히 우리가 말하는 내용을 신속하게 해결합시다. 처음 나왔을 때 Gutenberg는 WordPress 게시물 및 페이지 편집기만 교체했기 때문입니다. 그러나 이제는 사용자 인터페이스의 다른 부분으로 확장되었습니다. 따라서 우리가 같은 페이지에 있는지 확인하기 위해 다음은 구텐베르크의 일부입니다.

게시물/페이지 편집기

나는 이미 이것을 언급했습니다. 이것은 게시물/페이지 > 새로 추가로 이동하거나 기존 콘텐츠를 편집할 때 표시되는 것입니다. WordPress 5.0의 원래 Gutenberg 구현은 WordPress가 이전에 사용했던 TinyMCE를 대체하여 편집 경험의 이 부분만 교환했습니다. 당연히 여기에서 게시물과 페이지의 내용을 편집하지만 템플릿과 관련된 내용은 편집하지 않습니다.

사이트 편집자

FSE(Full-Site Editing)로 처음 도입된 Gutenberg의 이 부분은 현재 Site Editor로 재명명되었습니다. Twenty Twenty-Two 또는 Twenty Twenty-Three와 같은 블록 테마를 사용하는 경우 Appearance > Editor를 통해 액세스할 수 있습니다. 여기에서 WordPress를 사용하면 머리글, 바닥글, 메뉴, 페이지 템플릿, 위젯 및 홈페이지를 포함한 전체 사이트 아키텍처를 편집할 수 있습니다.

템플릿 편집기

많은 사람들이 알지 못하는 것은 Gutenberg에 페이지 또는 게시물 템플릿을 위한 독립 실행형 편집기도 포함되어 있다는 것입니다. 다시 말하지만 이것은 블록 테마에만 사용할 수 있습니다. 사용된 템플릿의 이름을 클릭하면 페이지/글 편집기에서 액세스할 수 있습니다.

여기에서 현재 템플릿을 수정하거나 사용자 지정 페이지 템플릿을 만들 수 있습니다. 사이트 편집기와 인터페이스가 약간 다르지만 전반적으로 매우 유사합니다.

위젯 편집기

이 부분은 나머지 블록 편집기에서 약간 벗어나 있지만 공식적으로 Gutenberg 프로젝트의 일부이므로 여기서 언급해야 합니다. 이제 블록 편집기 UI도 위젯 관리로 확장됩니다. 클래식 테마의 모양 > 위젯 에서 찾을 수 있습니다. 언급한 대로 블록 테마에서 위젯 처리는 사이트 편집기 내에서 발생합니다.

솔직히 말해서 나는 이것에 대해 별로 할 말이 없다. 나는 그것이 반드시 이전 메뉴보다 더 좋거나 나쁘다고 생각하지 않으며 제 역할을 합니다. 따라서 아래에서 Widget Editor에 대해 자세히 설명하지 않겠습니다. 다른 사람이 이것에 대해 강한 감정이나 의견이 있다면 댓글에서 듣고 싶습니다!

Gutenberg 게시물/페이지 편집기 검토

이제 Gutenberg 블록 편집기를 포함하는 항목에 대한 아이디어를 얻었으므로 다양한 분할이 수행되는 방식을 검토해 보겠습니다. 게시물/페이지 편집기부터 시작합니다.

내가 좋아하는 것

우선, 저는 일반적으로 블록 편집기로 콘텐츠를 만드는 것을 정말 좋아합니다. 클래식 편집기로 돌아가고 싶지는 않습니다. 지금은 새 경험의 이점에 너무 익숙해져 있기 때문입니다. 그 이유는 다음과 같습니다.

매끄럽고 현대적

오랫동안 WordPress를 잘 지원해 온 진정한 일꾼인 TinyMCE에게 모든 영광을 돌립니다. 그러나 현실을 직시하자, 그것은 가장 현대적으로 보이는 소프트웨어가 아니다.

고전적인 편집자 경험은 약간 투박하고 2000년대 초반에 계속 머물러 있는 것처럼 보였습니다. 이와는 대조적으로 구텐베르크 또는 블록 편집기는 단순히 최신 버전으로 보입니다.

넓고 최소한으로 설계되었으며 깨끗합니다. 또한 모든 중요한 설정과 정보를 쉽게 찾을 수 있습니다. 나는 그것이 다른 콘텐츠 관리 시스템에 채택되고 있다는 사실에 놀라지 않습니다.

당신이 보는 것은 당신이 얻는 것입니다

둘째, 편집 경험이 페이지의 완성된 결과와 훨씬 더 일치한다는 점이 마음에 듭니다. TinyMCE에서는 편집기 스타일을 추가할 수 있는 기능이 있었지만 사이트에서 콘텐츠가 어떻게 보이는지 확인하기 위해 페이지를 미리 보기해야 했습니다.

이는 특히 버튼이나 양식과 같은 일반적이지 않은 요소에 적용됩니다. TinyMCE에서는 단축 코드를 통해 이러한 항목을 추가해야 하는 경우가 많았습니다. 결과적으로 어떤 일이 일어나고 있는지 해독하기 위해 의미를 알아야 하는 괄호로 가득 찬 문서로 끝나는 경우가 있습니다.

이와는 대조적으로 Gutenberg 블록 편집기에서는 쇼트코드 블록을 명시적으로 사용하는 경우를 제외하고 일반적으로 편집기에서 완성된 요소를 볼 수 있습니다. 그렇지 않더라도 적어도 유효한 자리 표시자는 있습니다.

콘텐츠에 시각적 요소를 추가하는 데 매우 유용합니다. 예전에는 이미지를 넣고 싶은 곳을 표시하고 찾기 위해 글에 “[스크린샷]” 같은 것을 많이 올려야 했어요. 구텐베르크에서는 글을 쓰는 동안 이미지 블록을 추가하고 스크린샷을 추가할 때가 되면 이미지 블록을 채울 수 있습니다.

앞뒤로 전환하지 않고도 게시물 콘텐츠를 구성할 수 있는 좋은 방법입니다. 물론 완벽하게 병렬적인 경험은 아닙니다. 예를 들어 이미지에 다른 정렬이 필요한지 자주 확인해야 합니다. 하지만 전보다 훨씬 나아졌습니다.

쉬운 탐색

클래식 편집기에 대해 기억나는 한 가지는 다음과 같습니다. 많이. 스크롤링.

이전 구절을 다시 읽거나 게시물의 다른 부분을 변경하려면 마우스 휠을 사용하는 것 외에 다른 선택이 없었습니다. 이로 인해 전체 콘텐츠를 놓치기 쉬웠고 때로는 특정 위치를 찾기가 어려웠습니다.

이는 블록 편집기에서 완전히 다른 것입니다. 왼쪽 상단의 작은 i 아이콘을 클릭하면 열리는 메뉴는 실제로 제가 가장 자주 사용하는 옵션 중 하나입니다.

제목을 통해 전체 게시물의 분류를 검토할 수 있으며 구텐베르크를 사용하면 클릭 한 번으로 다른 섹션으로 이동할 수 있습니다. 이것은 특히 나처럼 매우 긴 글을 쓰는 경향이 있는 경우 매우 유용합니다.

더 나은 점

물론 Post/Page Editor를 사용하는 것이 전부는 아닙니다. 또한 단점이 있으며 그 중 일부는 심각하다고 할 수 있습니다.

성능

내 주요 문제는 때때로 편집자의 불규칙한 성능입니다. 이를 실행하는 데 필요한 모든 JavaScript는 브라우저에 큰 타격을 줄 수 있습니다.

예를 들어 제가 언급했듯이 저는 더 긴 기사를 쓰는 경향이 있습니다. 내 블로그의 게시물은 일반적으로 최소 3,000-4,000단어 길이이며 그 이상입니다.

나는 최근에 새 랩톱으로 업그레이드했는데 농담이 아닙니다. 주된 이유 중 하나는 특정 단어 수를 입력한 후 5년 된 내 컴퓨터에서 블록 편집기를 사용할 수 없게 되었기 때문입니다. 크롤링 속도가 느려지고 정상적인 작업을 수행하는 데 시간이 너무 오래 걸려 때때로 게시물의 섹션을 새 기사로 복사하고 편집한 다음 다시 복사해야 했습니다. 클래식 편집기에서 그렇게 해야 했던 기억이 없습니다.

따라서 상황이 이미 나아졌더라도 이것은 개선이 필요한 심각한 영역입니다. 안정성에 대해서도 할 말이 있지만 아래에서 더 자세히 설명하겠습니다.

누락된 키보드 단축키

클래식 편집기에서 가장 마음에 들었던 점 중 하나는 강력한 키보드 단축키 세트였습니다. 텍스트를 머리글로 바꾸거나, 머리글을 다른 순서로 변경하거나, 정렬된 목록과 정렬되지 않은 목록 사이를 쉽게 전환할 수 있습니다. 모두 마우스를 건드리지 않고.

이것은 단순히 블록 편집기에서 누락된 부분입니다. 현명한 키보드 단축키가 있지만(오른쪽 상단의 메뉴에서 찾거나 Shift+Alt+H를 눌러 찾을 수 있음) TinyMCE만큼 다루지는 않습니다.

예, 원하는 블록을 입력할 수 있는 슬래시 명령이 있습니다(훌륭합니다). 그러나 기존 텍스트를 제목으로 변경하거나 h2에서 h3로 전환하려면 일반적으로 마우스를 사용해야 합니다.

어쩌면 그것은 개인적인 애완 동물 오줌일지도 모르지만 확실히 내 의견으로는 더 나을 수 있는 것입니다.

사이트 편집기 살펴보기

다음으로 이 구텐베르크 리뷰에서 사이트 편집기에 대해 이야기해 보겠습니다. 여기에도 좋은 것도 많고 더 좋아질 수 있는 것도 있습니다. 그러나 이것은 아직 개발 중인 프로젝트라는 점을 명심하십시오(메뉴 항목 옆에 있는 베타 태그로 표시됨).

그러므로 내가 아래에 언급한 것 중 일부를 약간의 소금과 함께 섭취하십시오.

사이트 편집기가 잘하는 것

사이트 편집기가 이미 뛰어나다고 생각하는 것부터 시작하겠습니다.

아주 세다

사이트 편집기가 많은 일을 할 수 있고 비기술적인 사용자의 손에 엄청난 양의 권한을 부여한다는 사실을 부인할 수 없습니다.

페이지 템플릿 사용자 지정, 머리글, 바닥글 및 기타 사이트 요소 생성 및 변경 — 불과 몇 년 전만 해도 PHP를 알고 있거나 누군가를 고용하거나 이를 위한 페이지 빌더 플러그인을 설치해야 했습니다. 이제 올바른 테마를 사용하면 WordPress의 기본 기능이며 정말 훌륭합니다. 또한 한 번의 클릭으로 웹 사이트의 전체 스타일을 변경할 수 있는 기능은 정말 놀랍습니다.

둘 다 개발자가 아닌 사용자가 사이트를 매우 근본적으로 수정하고 기본적으로 사용자 정의 테마를 직접 만들 수 있도록 합니다. 특히 다른 웹 사이트에서 사용하기 위해 변경 사항을 내보낼 수도 있기 때문입니다. 이것은 분명히 진보이며 많은 사람들이 WordPress를 사랑하는 이유와 완전히 일치합니다.

블록 패턴 및 템플릿 부품

결정적인 방법으로 페이지 내용을 수정하는 데 가장 도움이 되는 두 가지 도구는 블록 패턴과 템플릿 부분입니다. 몇 번의 클릭만으로 쿼리 루프의 레이아웃을 완전히 변경하거나 머리글과 바닥글을 전환할 수 있다는 것은 매우 귀중합니다.

또한, 개발자들이 정말로 못 박은 것은 패턴 디렉토리를 포함하여 블록 패턴을 추가할 수 있는 용이성입니다. 복사하여 붙여넣기만 하면 필요한 곳에서 즉시 사용할 수 있습니다. 이를 통해 매우 짧은 시간에 완전히 완성된 레이아웃을 구축할 수 있습니다.

개선의 여지

동시에 블록 편집기의 이 부분에 대해 평준화할 수 있는 상당한 양의 비판이 있습니다.

가장 사용자 친화적이지 않음

사이트 편집기가 제공하는 원시 기능에 감탄하지만 사용자의 관점에서 사이트 편집기를 사용하기가 항상 쉬운 것은 아닙니다. 사용자 인터페이스는 페이지 및 게시물 편집에 적합할 정도로 압축되어 있지만 전체 사이트를 사용자 지정하는 것이 더 복잡하기 때문에 설정을 찾아야 하는 경우가 많습니다. 메뉴의 수가 제한되어 있어 목표를 달성하기 위해 많은 클릭을 해야 하는 경우가 많습니다.

그 외에도 종종 작은 것들이 있습니다.

• 마우스를 통해 목록 보기에서 블록을 이동하는 것은 매우 어렵습니다. 그들은 종종 당신이 원하지 않는 곳에서 끝납니다.
• 일반적으로 페이지 요소를 배치하는 것은 약간의 드래그일 수 있습니다.
• 웹사이트 구축에 익숙한 사람이라도 시간이 걸릴 수 있는 작업을 어디서 해야 하는지 알아보세요.

지금까지 가장 혼란스러운 작업은 메뉴를 만드는 것입니다. 솔직히 말해서 지금까지 완전히 이해했는지조차 확신할 수 없습니다. 페이지에서 일종의 작업을 수행할 수 있지만 차단 옵션에는 실제로 아무것도 할 수 없는 이전 UI로 이동 하는 메뉴 관리 링크도 있습니다.

이것이 사용자들 사이에서 많은 불만을 야기하는 것을 볼 수 있으며 비판 중 일부는 절대적으로 타당합니다.

문서 부족

이것은 위의 내용과 함께 진행됩니다. 사이트 편집기로 작업하는 동안 저는 적어도 Google에서 특정 문제에 대한 좋은 도움말을 찾는 것이 매우 어렵다는 것을 알았습니다. 공식 지원 페이지가 있다는 것을 알고 있으며 엄청난 일을 하고 있는 지원팀을 빼앗고 싶지 않습니다.

그러나 사실은 대체할 좋은 리소스를 실제로 찾을 수 없었기 때문에 특정 작업을 수행하는 방법을 시행착오를 통해 알아내야 하는 경우가 더 많았습니다. 특히 특정 블록 기능에 대한 도움말을 찾을 때.

이것은 모두 꽤 새롭지만 사이트 편집기에 관한 좋은 기사가 뚜렷하게 부족하다는 사실 때문일 수도 있습니다.

누락된 기능

저를 괴롭히는 또 다른 사항은 사이트 편집기로 (아직) 단순히 할 수 없는 몇 가지 일이 있다는 것입니다. 예를 들면 음수 마진 설정 또는 상자 그림자 생성(로드맵에 있지만)이 있습니다.

그 중 하나를 활용하려면 여전히 사용자 지정 CSS를 사용해야 합니다. 그것은 a) 초보 사용자가 알지 못하는 것이고 b) 편집기의 목적을 무너뜨리는 것입니다. 최소한 사이트 편집기를 사용하여 기본 페이지 구조와 광범위한 디자인 획을 작성하지만 마지막 손질을 위해 여전히 스타일 시트로 돌아가야 하는 하이브리드 접근 방식을 강요합니다.

물론 편집기가 CSS가 제공하는 모든 가능한 옵션을 제공할 것이라고 기대할 수는 없습니다. 그러나 때로는 기능 세트가 여전히 약간 얇은 것처럼 보입니다.

반면에 사이트 편집기는 단순히 어려운 위치에 있습니다. 특정 기능이 없기 때문에 페이지 빌더는 아니지만 WordPress 사용자 지정 프로그램과 같은 기본 옵션을 훨씬 뛰어넘습니다. 결과적으로, 그것은 항상 호의를 베풀지 않는 중간 회색 영역의 어딘가에서 끝납니다.

안정

마지막으로 전체 사이트 편집의 가장 큰 단점 중 하나이자 모든 구텐베르그 리뷰의 일부가 되어야 하는 주제는 안정성입니다. 사이트 편집기는 내가 가장 많이 충돌을 본 것 중 하나입니다.

그것의 방어에서 지금까지 큰 데이터 손실로 이어지지 않았습니다. 즉, 충돌하기 전에 내가 한 작업을 항상 매우 쉽고 빠르게 다시 실행할 수 있었는데, 이는 주로 우수한 자동 저장 기능 때문입니다.

그러나 앞서 언급한 성능 문제와 함께 안정성은 매우 빠르게 성가시게 될 수 있기 때문에 확실히 가장 주의를 기울여야 하는 영역입니다.

템플릿 편집기

언급한 바와 같이 이것은 페이지/게시물 편집기에 태그가 지정된 편집기입니다. Full-Site Editing 경험의 약간 축소된 버전입니다.

그 목적은 사이트 편집기로 돌아가지 않고도 페이지 템플릿을 즉시 변경하는 것이라고 가정합니다. 그것은 일반적으로 좋은 생각이지만 이것이 내가 가장 적게 사용한 블록 편집기의 일부라고 말해야 합니다. 따라서 그것에 대한 나의 의견은 상대적으로 중립적입니다. 그러나 그것이 내가 가지고 있지 않다는 것을 의미하지는 않습니다.

여기 내가 좋아하는거야

템플릿 편집기가 자체적으로 어떤 작업을 수행하는지 살펴보겠습니다.

용도에 적합

이 편집자의 목적이 진정으로 이동 중에 템플릿을 변경하는 것이라면 충분히 잘하고 있다고 생각합니다. 추천 이미지 및 페이지 제목의 순서를 수정하고 글꼴 및 색상을 전환하거나 머리글 또는 바닥글을 변경할 수도 있습니다.

따라서 페이지나 게시물에서 작업할 때 템플릿에 대한 변경이 필요한 경우 빠르고 쉽게 변경할 수 있습니다. 또는 바로 그 자리에서 사용자 정의 페이지 템플릿을 생성하는 것도 가능합니다. 이렇게 하면 해당 페이지에만 변경 사항을 적용하거나 선택한 다른 콘텐츠에 할당할 수 있습니다. 다시 말하지만 이전에 코드 편집기가 필요했던 것에 대해 코드가 필요하지 않습니다.

내가 탑승하지 못한 것

반면에 나는 그다지 마음에 들지 않았습니다.

초보자에게는 혼란스러울 수 있음

템플릿 편집기에 대해 제가 상상할 수 있는 주요 문제는 웹 사이트 구축에 대해 잘 모르는 초보자가 어디서 무엇을 해야 하는지 이해하기 어렵다는 것입니다. 예를 들어 템플릿 편집기에서 콘텐츠로 페이지를 채우지 않고 템플릿 자체의 구조만 변경한 다음 페이지/게시물 편집기에서 콘텐츠를 추가해야 합니다.

여기에서도 어떻게 적용 방법을 제대로 가르치지 않고 사용자의 손에 이 정도의 힘을 쥐어줄 수 있는지에 대한 약간의 질문이 있습니다.

최종 생각: 구텐베르크 검토

매일 전문적으로 플랫폼을 사용하는 사람의 WordPress 블록 편집기 및 Gutenberg 프로젝트 구현에 대한 리뷰가 있습니다.

많은 비판을 받았지만 일반적으로 나는 새로운 편집 경험의 열렬한 팬입니다. 특히 게시물 및 페이지용 블록 편집기는 놓치고 싶지 않은 기능입니다. 물론 개선의 여지가 있지만 확실히 이미 좋은 수준입니다.

또한 위의 목록은 완전한 것이 아닙니다. 나는 내 작업에서 나에게 일어난 가장 중요한 점에 집중했습니다. 긍정적으로나 부정적으로나 말할 수 있는 것이 더 있습니다. 그러나 이것은 광범위한 스트로크입니다. 당신의 의견은 무엇입니까?

내 구텐베르크 리뷰에 동의하십니까? 블록 편집기에 대한 귀하의 의견은 무엇이며 어떻게 구현되었습니까? 아래 댓글로 공유해주세요!