뮌헨에 기반을 둔 Game Studio가 WordPress와 Gutenberg를 사용하여 웹사이트를 강화하는 방법

뮌헨에 기반을 둔 수상 경력에 빛나는 게임 스튜디오인 Mimimi는 야생에서 Gutenberg에 대한 흥미로운 사례 연구를 제공하는 새로운 WordPress 웹사이트를 시작했습니다. 프론트엔드에서 구분할 수는 없지만 새로운 블록 기반 편집기는 사용자 지정 블록으로 레이아웃을 지원하므로 Mimimi 팀이 웹사이트의 다양한 섹션을 쉽게 업데이트할 수 있습니다.

지역 광고 대행사인 Luehrsen Heinrich는 Mimimi 팀의 편집 요구 사항을 지원하도록 맞춤화된 테마와 7개의 블록으로 사이트를 구축했습니다.

Luehrsen Heinrich의 CEO인 Hendrik Luehrsen은 "일반적인 작업은 유지 관리가 매우 쉽고 빠르며 나중에 블로그/뉴스 섹션을 갖게 될 우아한 웹사이트를 만드는 것이었습니다."라고 말했습니다. “우리 클라이언트에게는 우리를 신뢰하는 놀랍도록 창의적이고 기술에 정통한 사람들이 있다는 것을 알고 있었습니다. 그것이 우리가 구텐베르크에 들어갈 수 있는 자신감을 갖게 해주었습니다.”

이 사이트는 편집자가 다양한 배경 패턴과 물결 모양 구분 기호를 만들 수 있도록 하는 배경 블록을 사용합니다. Luehrsen은 열과 유사한 'InnerBlocks'와 함께 작동하므로 다른 블록을 호스트할 수 있다고 말했습니다.

이 사이트에는 Mimimi가 내부 통신에 사용하는 Discord의 사용자 집합을 표시하기 위해 일부 설정을 동적으로 가져오는 사용자 지정 Discord 블록도 있습니다. 블록에 업데이트된 팀 명단이 표시됩니다. 소셜 미디어 및 게임 블록을 통해 편집자는 이미 설정된 레이아웃으로 텍스트와 이미지를 쉽게 업데이트할 수 있습니다.

Luehrsen은 "열, 단락 및 이미지를 결합하여 동일한 레이아웃을 약 80%까지 만들 수 있다고 확신하지만 고객이 이미지를 배치하려고 할 때 MS Word에서처럼 만지작거리는 것을 원하지 않았습니다."라고 말했습니다. . "그래서 간단한 레이아웃 블록을 만드는 것은 논리적이었습니다."

Mimimi의 웹사이트는 또한 사용자 지정 Mailchimp 가입 블록과 보다 유연하고 응답성이 뛰어난 중단점을 제공하는 사용자 지정 스페이서 블록을 사용합니다.

Luehrsen은 “결국 우리(그리고 우리 고객)는 결과에 매우 만족합니다. “이 블록 기반 편집기를 통해 워드프레스의 미래를 미리 볼 수 있습니다. 그러나 더 이상 매끄럽게 할 것이 없을 때까지 갈 길이 매우 멉니다. 여전히 많은 작업이 필요한 특정 작업이 있습니다.”

개발 관점에서 Luehrsen은 그의 팀이 여전히 편집자의 백엔드 스타일로 어려움을 겪고 있으며 그 때문에 프론트엔드와 백엔드 스타일이 크게 다르다고 말했습니다. 그들은 또한 Gutenberg 편집기에 전역 스타일을 적용하는 유지 관리 가능하고 안정적인 방법을 아직 찾지 못했습니다. 이러한 미해결 문제 외에 에이전시는 새 편집자를 위한 구축을 즐겼고 다른 고객 세트를 위해 곧 또 다른 Gutenberg 페이지 제품을 출시할 예정입니다.

Mimimi Games의 Gutenberg 경험: 편집자는 블록 개념을 높이 평가하지만 여전히 사용성 문제에 직면해 있습니다.

Mimimi Games의 CEO인 Johannes Roth는 자신의 팀이 과거에 WordPress를 사용해 왔으며 Gutenberg를 콘텐츠 편집의 주요 개선점으로 보고 있다고 말했습니다.

“정말 좋아해요, 솔직히!” 로스가 말했다. “페이지 설정을 이해하고 사용자 정의하는 것이 훨씬 쉽습니다. Gutenberg 편집기가 몇 가지 사용자 경험 개선 사항을 얻는다면 페이지 유지 관리를 위한 새로운 최첨단 기술임을 확실히 알 수 있습니다. 하지만 아직 공식적으로 출시되지 않았다는 것을 알기에 제 입장에서는 매우 강력하고 이해하기 쉬웠습니다.”

Roth는 그의 팀이 블록 설정, 콘텐츠를 재구성하는 기능, 작업할 콘텐츠의 작은 덩어리, 블록당 맞춤형 옵션이 있는 것을 높이 평가한다고 말했습니다.

Roth는 "이상한 도구 모음으로 산만함이 줄어들고 콘텐츠에 집중할 수 있습니다."라고 말했습니다. "또한 콘텐츠에서 서식 및 장식 부분을 분리하고 SEO 친화성을 위해 적절한 페이지를 설정하는 것에 대해 생각하는 방식과 더 유사합니다."

Roth는 Mimimi 팀이 이전 편집자에게서 놓치고 있는 두 가지 사항을 확인했습니다.

• 탭을 눌러 글머리 기호 목록을 들여쓰고 탭을 눌러 반대 방향으로 이동
• ctrl+a를 사용하여 블록 안의 모든 텍스트를 빠르게 선택합니다(때로는 전체 페이지를 선택하지만 도움이 되지 않음).

Roth는 "지금까지 사용성의 가장 큰 문제는 블록과 기둥의 조합으로, 때때로 마우스 오버 영역이 누적되기 때문에 '...' 아이콘을 누르기가 정말 어렵습니다."라고 말했습니다.

현대 웹에서 스토리텔러 활성화: Luehrsen Heinrich가 에이전시로서 Gutenberg Development로 도약한 이유

Luehrsen은 자신의 대행사가 새로운 페이지 빌더를 만들기 위한 자신의 아이디어를 버리고 작년 WordCamp Europe에서 Gutenberg 기차에 탑승하기로 결정했다고 말했습니다.

Luehrsen은 "파리에서 WCEU가 개최되기 1~2개월 전에 우리는 블록 기반 접근 방식과 매우 유사한 자체 페이지 빌더 시스템의 알파 버전과 개념을 사용하고 있었습니다."라고 말했습니다. “Matt의 Q&A는 우리 프로젝트가 이미 쓸모가 없다는 것을 빨리 깨닫게 해주었습니다. 우리는 슬픔의 5단계(구조화된 데이터에 대한 이 게시물은 "교섭"이었을 것임에 틀림없음)를 꽤 빨리 통과한 것이 운이 좋았습니다. 우리는 우선순위를 재정렬하고 2017년 10월 말이나 11월 말에 구텐베르크와 함께 작업하기 시작했습니다.”

Luehrsen Heinrich는 모두 다른 방식으로 Gutenberg와 관련된 단 4명의 작은 기관입니다. Luehrsen은 프로젝트에 적극적으로 기여했으며 크리스마스 휴가에 첫 PR을 제출했습니다. 또한 팀에는 블록 생성을 안팎으로 아는 개발자, 블록의 UX와 스타일을 디자인하는 디자이너, 구텐베르크 편집 요구 사항에 대해 클라이언트와 협력하는 프로젝트 관리자가 있습니다.

Luehrsen은 React 및 ES6에 대한 사전 경험이 없음에도 불구하고 Gutenberg 기여자가 학습 블록 생성에 엄청난 도움이 되었다고 말했습니다.

Luehrsen은 "Gutenberg와 협력하고 프로젝트에 기여하고 놀라운 Gutenberg 팀으로부터 즉각적인 피드백을 얻은 것은 프로세스를 부트스트랩하는 데 많은 도움이 되었습니다."라고 말했습니다. "현재 우리의 블록 생성 프로세스는 Gary, Adam, Matias 및 다른 모든 사람들이 수행한 작업에 크게 기반을 두고 있습니다. 단, SCSS가 아닌 내부적으로 LESS를 사용한다는 점만 예외일 수 있습니다. 그러나 폴더 구조, 빌드 프로세스, 파일 구조화에 이르기까지 우리는 가능한 한 구텐베르그 리포지토리 스타일을 따르려고 노력합니다. 그래야 디버깅하고 문제를 매우 쉽게 찾을 수 있기 때문입니다."

Mimimi Games의 새로운 Gutenberg 기반 웹사이트를 성공적으로 구축한 후 Luehrsen의 팀은 새 편집기를 사용하여 더 많은 클라이언트 사이트를 구축하는 데 참여하고 있습니다. 그는 이를 고객에게 더 나은 가치로 더 나은 사용자 경험을 제공하는 방법으로 보고 있습니다.

Luehrsen은 "우리 고객들은 현대 웹에서 스토리텔링이 단순히 텍스트를 작성하는 것 이상이라는 우리의 믿음을 공유하고 있습니다. “TinyMCE는 '서식 있는 텍스트' 편집자로서 놀라운 일을 해냈지만 여전히 다양한 유형의 미디어를 일관된 스토리에 결합하는 것은 메타박스, 단축 코드로 엉망이었고 티저의 경우 편집 화면을 떠나야 하는 경우도 있었습니다. Gutenberg는 이 모든 것을 훌륭하고 눈에 거슬리지 않는 방식으로 결합합니다. 그리고 항상 그렇듯이: 더 빠른 방법으로 좋은 결과를 얻을 수 있다면 절약된 시간은 고객이 본질적으로 구매하는 것입니다.”