구텐베르크와 함께한 1년

게시 됨: 2020-01-24

구텐베르크가 워드프레스의 공식 부분이 된 것이 엊그제 같은데, 믿거나 말거나, 벌써 1년이 넘었습니다! 2019년은 의심할 여지 없이 워드프레스에서 구텐베르크의 해였습니다. 좋든 싫든 곧 사라지지 않을 것이며, 실제로 더 나은 사용자 경험 제공을 목표로 하는 우리의 사랑받는 CMS의 새로운 표준이 되었습니다.

오늘의 게시물에서는 지난 몇 개월 동안 WordPress 블록 편집기 가 달성한 모든 것을 빠르게 검토하고 싶습니다. 특히, 나는 그것을 특별하게 만드는 이유, 왜 어떤 사람들은 그것을 좋아하고 어떤 사람들은 그것을 싫어하는지, 그리고 그것이 우리 개발자들에게 무엇을 의미하는지 논의하고 싶습니다. 끝내자!

구텐베르크의 발사

2016년의 State of the Word에서 Matt는 WordPress 편집기를 개선하기 위해 많은 작업이 필요하기 때문에 우리가 집중해야 하는 것 중 하나라고 말했습니다. 당시 '위젯 통합', ' 쇼트코드 개선'을 위한 '블록 기반 편집기'에 대한 첫 번째 루머가 나왔다. 그것이 구텐베르크가 될 첫인상이었습니까?

1년 후, State of the Word 2017에서 Matt는 이미 개발에 11개월이 걸렸고 아직 몇 일이 더 남은 프로젝트인 Gutenberg를 공식 발표했습니다. 이 프로젝트는 콘텐츠 생성 및 관리에 대한 우아한 솔루션으로 "블록" 개념을 도입했습니다. 구텐베르크는 여전히 워드프레스 코어의 일부가 되기에는 너무 친환경적이어서 아직 몇 개월 동안 플러그인으로 남아 있었습니다.

마침내 임신 2년 후, 새로운 아이를 사회에 선보일 때가 되었고 2018년 말 Gutenberg는 마침내 WordPress Core의 일부가 되었습니다 . 제 생각에는(그리고 해당 분야의 다른 많은 전문가들은) 성급한 결정처럼 느껴졌습니다. 우리는 플러그인이 아직 일반 대중을 위해 준비되지 않은 것처럼 느꼈지만 유감스럽게도 있었습니다. 새 버전의 WordPress에 Gutenberg의 통합은 논쟁으로 가득 차 있었고 많은 사람들이 그것을 싫어했습니다.

큰 문제를 피하기 위해 WordPress 개발 팀은 또한 Gutenberg를 완전히 비활성화하여 클래식 편집기를 계속 사용할 수 있는 병렬 플러그인을 준비했습니다. 하지만 Gutenberg의 개발은 물론 여기서 멈추지 않았습니다!

첫걸음

위에서 언급했듯이 Gutenberg의 공식 출시는 다소 거칠었습니다. 특히 비방하는 사람들이 많았고 다듬어야 할 세부 사항이 많았기 때문입니다. 확실히 성급한 결정처럼 느껴졌다. WordCamp US 2018이 얼마 남지 않았으며 "구텐베르그가 이미 참여해야 합니다." 그래서 그들은 그렇게 했습니다.

사실이지만 2019년 1월까지 우리 모두는 WordPress 대시보드에 이 새로운 편집기를 갖게 되었습니다. 이것은 사용자와 개발자가 이 새로운 현실에 적응해야 한다는 것을 의미했습니다... 그리고 더 빨리 적응할수록 좋습니다!

Google 지도 구텐베르크 블록.
Google 지도 블록 Gutenberg 블록 편집.

처음 몇 주 동안 우리 모두가 직면한 주요 문제는 성능이 떨어지는 UX였습니다. Gutenberg 주석 API 문제로 인해 Yoast와 함께 사용하면 편집기를 완전히 사용할 수 없었던 것으로 기억합니다. 블록이 이상한 방식으로 이동했고, 키보드 단축키가 다르고 예측할 수 없었으며, 구형 컴퓨터에서는 편집기가 느렸습니다...

그러나 초기 오류와 문제에도 불구하고 플러그인 개발의 빠른 속도로 인해 거의 불가능해 보였던 일, 즉 Gutenberg를 사용하는 동안 사용자 경험을 신속하게 수정하고 개선하는 것이 가능했습니다. 솔직히 말해서 고전 편집기가 꽤 구식이었으므로 매우 필요했습니다.

기본 WordPress 게시물 편집기의 스크린샷.
기본 WordPress 게시물 편집기의 스크린샷.

진화

공공 생활의 첫 해 동안 구텐베르크의 발전은 정말 놀랍습니다. 업데이트가 잇달아 발생했으며 개발자는 더 친근하고 효율적인 인터페이스가 될 때까지 Gutenberg의 모든 세부 사항을 연마했습니다. 숫자, 특히 Gutenberg의 채택률을 보면 올바른 방향으로 가고 있는 것처럼 보입니다. 이 게시물을 작성하는 시점에서 WordPress 설치 세 개 중 두 개는 버전 5.x를 사용하고 있습니다. 즉, 기본적으로 모든 WordPress 사용자의 2/3가 Gutenberg를 사용할 수 있습니다.

그러나 사실은 Classic Editor 플러그인을 설치하기만 하면 Gutenberg를 완전히 비활성화할 수 있다는 것을 기억하십시오. 현재 이 플러그인은 500만 개 이상의 활성 설치와 700개 이상의 별 5개 등급과 함께 "오래된 것이 금", "가장 중요한 플러그인" 또는 "내 모든 웹사이트에서 사용하는 플러그인"과 같은 댓글이 있습니다. 그렇다면 구텐베르크가 실패작일 가능성이 있습니까?

Classic Editor 플러그인의 활성 설치 수의 진화
Classic Editor 플러그인의 활성 설치 수의 진화.

글쎄요, 제 생각에는 아닙니다. Classic Editor 플러그인에 해당하는 활성 설치의 현재 추세를 보면 속도가 느려지고 있음을 알 수 있습니다. 즉, 시간이 지남에 따라 이 플러그인을 사용하는 사람이 점점 줄어들고 있습니다. 이에 대한 한 가지 가능한 설명은 Gutenberg가 이미 "충분히 훌륭"하므로 이전 버전의 편집기를 사용할 필요가 없다는 사실입니다. 그리고 이것은 의심할 여지 없이 매우 좋은 소식입니다.

블록 라이브러리

공식적으로 구텐베르그를 워드프레스에 통합한 결과 중 하나는 콘텐츠를 만드는 데 사용되는 새로운 블록의 확산이었습니다. 분명히 개발자는 문제점을 파악하고 전반적인 경험을 개선하기로 결정했습니다.

Atomic Blocks에서 사용할 수 있는 블록입니다.
Atomic Blocks에서 사용할 수 있는 블록입니다.

지난 몇 달 동안 우리는 Gutenberg에서 사용할 수 있는 블록의 범위를 확장하기 위한 유일한 목적으로 플러그인이 어떻게 등장했는지 보았습니다. 따라서 예를 들어 새 블록을 추가하는 Atomic Blocks와 같은 플러그인과 새로운 스타일을 포함하고 기존 블록에 추가 편집 옵션을 제공하는 Stackable 또는 EditorsKit과 같은 플러그인이 있습니다.

구텐베르크의 장점

WordPress에 항상 존재하는 큰 비판 중 하나는 inframous lock-in 효과였습니다. 기본적으로 이 효과는 특정 테마 또는 플러그인을 사용하기 시작할 때 나타나는 종속성을 설명합니다. 이 고정 프로젝트 중 하나로 콘텐츠를 생성하면 쉽게 제거할 수 없거나 해당 콘텐츠를 잃게 됩니다.

Visual Composer(현재 WordPress용 WPBakery Page Builder로 알려짐)에 의해 추가된 편집 레이어가 있는 WordPress 페이지 편집기.
페이지 빌더 «WPBakery Page Builder for WordPress»에 의해 추가된 편집 레이어가 있는 WordPress 페이지 편집기.

이 효과의 대부분의 예는 페이지 빌더에서 찾을 수 있습니다. 클래식 WordPress 편집기만 있었을 때 많은 테마 개발자는 또 다른 요구 사항을 확인했습니다. 사용자는 콘텐츠 블록을 끌어다 놓아 페이지를 쉽게 구축할 수 있는 시각적 편집기를 사용하여 페이지를 레이아웃할 수 있기를 원했습니다. 불행히도 이러한 페이지 빌더로 페이지를 빌드한다는 것은 해당 페이지 빌더와 영원히 잠겨 있어야 함을 의미합니다. 더 이상 페이지 빌더를 사용하지 않으려면 먼저 페이지를 다시 생성해야 합니다. 그렇지 않으면 손실 위험이 있습니다. 그것.

구텐베르크는 이 점에서 혁명이었다. 이제 "블록" 개념의 공식 도입 덕분에 페이지 빌더는 마침내 페이지 모양을 정의하는 표준 메커니즘을 사용할 수 있게 되었습니다. 그들은 단순히 Gutenberg에서 제공한 새로운 인터페이스를 활용하기만 하면 됩니다. 물론 현재 페이지 빌더를 WordPress 블록으로 표준화하는 과정은 느릴 것이지만 결국에는 그렇게 될 것이라고 믿어 의심치 않습니다.

지속적인 개선

모든 단일 버전에 새로운 기능과 몇 가지 개선 사항이 포함되어 있기 때문에 Gutenberg는 새로운 릴리스가 나올 때마다 점점 더 좋아지고 있습니다. 예를 들어, 몇 주 전에 Gutenberg 플러그인의 새 버전(이미 7.1)은 Gutenberg를 "만나는" 환영 대화 또는 다중 블록 콘텐츠 선택의 개선과 같이 사용자를 위한 약간의 사용성 개선과 함께 나타났습니다.

그러나 내가 특히 좋아하는 개선 사항이 하나 있는데 그것은 편집기의 동작입니다. "움직임이 변화를 이해하는 데 어떻게 도움이 되는지"에 대한 매우 자세한 설명이 있는 Matias Ventura의 이 게시물을 살펴보십시오.

구텐베르그가 우리에게 의미한 것 (Nelio에서)

Gutenberg의 도착은 또한 우리 회사에 흥미로운 업데이트를 가져왔습니다. 기본적으로 제품을 개발하고 구텐베르크와 호환되도록 하려면 완전히 새로운 개발 스택을 재활용하고 배워야 했습니다.

몇 주 전에 Toni가 말했듯이 우리는 지난 2년 동안 React와 Redux를 연구하고 배웠습니다. 이 학습 단계의 결과로 우리는 Nelio Maps, Nelio Translate 또는 Nelio Compare Images와 같은 Gutenberg를 위한 몇 가지 특정 플러그인을 출시했습니다. 또한 Nelio A/B Testing을 현대화하는 데 많은 시간과 자원을 할애했으며 현재 Nelio Content와 동일한 작업을 수행하고 있습니다.

Nelio A/B 테스팅 — 테스트 에디터
신기술을 사용한 Nelio A/B 테스팅.

우리는 새로 습득한 기술 중 일부를 WordPress에 기여하기 위해 적용하고 몇 가지 풀 리퀘스트를 제안했습니다.

  • 날짜와 관련된 버그 수정
  • JS의 쿼리 인수 및 URL 조각과 관련된 버그 수정
  • 블록 API에서 숫자 및 부울 속성 작업 제안
  • (un)이스케이프 처리된 HTML 엔터티의 버그 수정

아무도 변화를 좋아하지 않습니다. 일련의 도구나 기술에 익숙해지면 새로운 것을 배우기 위해 남겨두고 싶지 않을 것입니다. 사람들은 무언가가 바뀌는 것을 꺼려하지만… 솔직히 말해서 변화는 우리를 잘 섬겼습니다. 우리는 그 과정에서 배운 모든 것과 구텐베르크 덕분에 오늘날 할 수 있는 일에 대해 매우 자랑스럽게 생각합니다.

당신은 어때요? 당신은 구텐베르크를 좋아합니까? 그것이 당신의 삶을 어떻게 바꾸었나요? 아래 댓글 섹션에 알려주십시오.

Freestocks.org의 Unsplash에 있는 추천 이미지.