구텐베르크 블록의 패턴 라이브러리 구축

Gutenberg는 패턴 기반 웹 디자인으로의 거대한 전환을 나타냅니다. 이 기사에서는 맞춤형 구텐베르크 블록의 유연한 라이브러리를 만들 때 취한 접근 방식에 대해 설명합니다.

배경

구텐베르크의 2018년 12월 릴리스는 워드프레스 출시 이후 가장 큰 변화를 나타냈습니다. 새로운 블록 기반 '드래그 앤 드롭' 인터페이스는 개발자가 테마를 만드는 방식, 디자이너가 사이트를 구성 요소로 나누는 방법, 콘텐츠 편집자가 콘텐츠 생성을 관리하고 계획하는 방법을 변경합니다.

이것은 패턴 기반 웹사이트 디자인을 향한 근본적인 변화입니다. 최고의 사용자 경험을 만들고 워크플로를 간소화하기 위해 웹사이트 전체에 일관되게 적용할 수 있는 재사용 가능한 요소 시스템입니다. 우리 중 많은 사람들이 이미 패턴으로 작업하고 있었지만 Gutenberg는 이러한 변화를 가속화된 속도로 추진합니다. WordPress는 전 세계 웹 사이트의 1/3을 지원하므로 이 변경의 영향은 아무리 강조해도 지나치지 않습니다.

이 기사에서는 패턴 라이브러리를 계획하고 구축하기 시작할 때 개발자로서 직면한 몇 가지 문제, Gutenberg 고유의 한계를 극복한 방법 및 유연한 맞춤형 블록 시스템을 만들기 위해 취한 접근 방식을 강조합니다.

우리의 목표

맞춤형 WordPress 웹 사이트의 전문 빌더로서 Gutenberg는 패턴의 통합 라이브러리를 만들 수 있는 완벽한 기회를 제공했습니다. 많은 사용자 정의 웹 사이트 빌드에 사용할 수 있는 맞춤형 블록 세트입니다.

우리는 이 새로운 편집 경험을 수용하고 싶었을 뿐만 아니라 제한된 코어 구텐베르크 블록 세트 또는 기성 타사 솔루션의 패치워크에 의존하지 않고 자체 시스템을 사용하여 솔루션을 제공할 수 있기를 원했습니다.

손끝에 있는 포괄적인 블록 세트는 또한 새로운 Gutenberg 웹 사이트 빌드를 위해 처음부터 각 블록을 만들 필요가 없다는 것을 의미합니다. 이를 통해 우리는 사이트의 미학을 다듬는 데 더 많은 시간을 할애하고 웹사이트를 경쟁 제품과 분리하는 데 도움이 되는 일종의 마무리 작업과 최적화를 추가할 수 있습니다.

도전

설계 유연성

다양한 맞춤형 테마를 만들 수 있는 유연성을 제공하는 여러 패턴이 있는 다용도 디자인 시스템이 필요했습니다.

테마 디자인을 손상시키지 않으면서 유한하고 현실적인 패턴 수를 유지하는 것 사이에서 좋은 균형을 유지하는 것은 어려운 일이었습니다.

테마 개발의 변화

Gutenberg 이전에는 테마 개발에 대해 다양한 접근 방식을 취했습니다. 가장 일반적인 것은 사이트의 개별 부분에 대한 개별 페이지 템플릿을 만드는 것이었습니다. 템플릿은 매우 규범적이며 디자인된 각 섹션에 대한 사용자 정의 필드를 포함합니다. 예를 들어 '사례 연구' 템플릿에는 텍스트 편집기, 이미지 갤러리, 평가 등을 위한 필드가 포함될 수 있습니다. 그러나 템플릿에 포함되면 쉽게 변경할 수 없습니다.

이 접근 방식은 페이지 레이아웃 측면에서 제한적일 뿐만 아니라 일반적으로 모든 새로운 템플릿 기반 사이트에서 반복적인 노력이 필요함을 의미했습니다. 필드를 만들고 템플릿을 설정하고 프런트 엔드에 표시하기 위해 코딩된 구성 요소를 분리해야 합니다.

Gutenberg에 적응하기 위해 우리는 개발 접근 방식을 변경하고 재사용 가능한 구성 요소를 생성하는 방법을 이해하고 Gutenberg가 새로운 웹 사이트 구축을 위해 현재 제공하는 유연성을 수용해야 했습니다.

구텐베르크는 그렇게 유연하지 않다

기본적으로 Gutenberg는 30개 이상의 코어 블록을 사용할 수 있습니다. 단락, 제목 및 목록 요소와 같은 기본 콘텐츠 구성 요소에서 더 복잡한 위젯 및 포함에 이르기까지 모든 것이 포함됩니다.

우리 웹사이트 빌드 중 상당수는 관련성이 없거나 테마에서 요구하는 기능 수준이 없는 코어 블록이 많습니다. 테마 디자인에 적합한 매우 구체적인 기능을 수행하는 고유한 패턴 세트를 만드는 방법이 필요했습니다.

Gutenberg에서 곧 발견한 또 다른 문제는 코어 블록을 사용하여 더 복잡한 레이아웃을 만드는 것이 쉽지도 직관적이지도 않다는 것입니다.

예를 들어 "컨텐츠 및 이미지" 블록에 대한 패턴은 이미지 옆에 표시할 제목, 단락, 목록 및 버튼을 요구할 수 있으며 해당 컨텐츠의 왼쪽 또는 오른쪽에 이미지를 표시하는 옵션과 함께 이러한 요소가 일관된 레이아웃으로 표시됩니다.

이러한 수준의 자유는 구텐베르크에서 쉽게 얻을 수 없습니다. 텍스트, 이미지 및 버튼을 추가할 수 있는 여러 블록이 있지만 이들은 본질적으로 매우 원자적이며 개별적으로 추가될 때 별도의 스택 블록으로 나타납니다. Gutenberg가 충분히 유연하지 않고 우리 자신의 맞춤형 블록을 구축할 수 있어야 한다는 것이 일찍부터 분명해졌습니다.

우리의 솔루션

다양한 디자인 시스템

Gutenberg가 출시되기 전에 우리는 이미 패턴 라이브러리의 패턴 연구 및 시각화에 많은 시간을 투자했습니다.

여기에는 일반적으로 사용되는 요소의 와이어프레임 라이브러리를 컴파일하기 위해 여러 기존 웹사이트와 프로토타입을 감사하는 작업이 포함되었습니다.

우리의 디자이너와 개발자는 이러한 요소를 Gutenberg 블록으로 결합하는 방법과 특정 블록 유형을 생성하여 제한된 사용자 지정 옵션으로 단일 블록을 테마별로 크게 다르게 만들 수 있는 방법을 이해하기 위해 계속 협력했습니다.

패턴을 블록으로 분류했으면 구축을 시작할 준비가 되었습니다.

고급 사용자 정의 필드가 있는 빌딩 블록

모든 테마 개발자는 어느 시점에서 ACF(Advanced Custom Fields)를 접했을 것입니다. 직관적인 인터페이스를 통해 다양한 필드 유형을 생성할 수 있습니다. 기본 텍스트 필드 및 콘텐츠 편집기에서 날짜 선택기, 지도 삽입 및 갤러리 필드에 이르기까지 모든 것이 가능합니다. 이들은 게시물 유형, 페이지 템플릿, 카테고리 및 사용자 페이지와 같은 사이트의 다양한 영역에 쉽게 할당할 수 있습니다.

ACF의 최신 버전인 ACF 블록은 이 모든 친숙한 기능을 구텐베르크로 확장합니다. 필드 그룹을 생성하고 사이트의 다른 영역과 동일한 방식으로 다른 ACF 기반 블록에 할당할 수 있습니다.

블록 및 출력 필드를 등록하는 데 필요한 몇 줄의 코드로 몇 분 안에 기본 사용자 지정 블록을 생성할 수 있습니다. 이 접근 방식으로 블록을 쉽게 생성할 수 있으므로 블록 구성, 출력 및 스타일 지정에 집중할 수 있습니다.

이제 우리는 Gutenberg의 모든 유연성을 제공하지만 일관된 레이아웃에 도움이 되는 테마 디자인으로 제한되는 사용자 정의 블록 제품군을 만들 수 있었습니다.

패턴 라이브러리 플러그인

몇 가지 예제 블록을 만든 후 엔지니어링 팀의 도움을 받아 사용자 정의 플러그인에 블록을 패키징하기로 결정했습니다.

이 블록 기반 플러그인을 사용하면 새로운 웹사이트 빌드를 위한 맞춤형 패턴을 빠르게 배포할 수 있습니다. 그런 다음 테마 수준에서 추가로 사용자 지정됩니다.

패턴 라이브러리 플러그인에는 다음과 같은 몇 가지 유용한 기능이 포함되어 있습니다.

1. 새 블록을 빠르게 추가할 수 있는 기본 블록 템플릿 파일
2. 코어 블록 및 사용자 정의 블록을 초기화하고 사용자 정의 범주에 포함할 수 있는 기능.
3. 각 블록을 활성화 또는 비활성화할 수 있는 관리자 설정 화면.
4. 테마 내에서 블록의 레이아웃 및 구조를 재정의하는 기능.
5. 테마 수준에서 블록 스타일을 재정의하는 기능.
6. 블록 관리자 미리보기가 프런트 엔드 블록과 동일하게 보이도록 Gutenberg 내에서 테마 수준 스타일 시트를 로드합니다. CSS 그리드를 사용하여 구조적 변경을 최소화하면서 미학과 레이아웃의 유연성을 극대화할 수 있었습니다.
7. 특정 블록은 일관성을 유지하기 위해 특정 포스트 유형으로 제한될 수 있습니다.

패턴 라이브러리 플러그인의 개발은 계속해서 발전할 것이지만 이제 유연한 테마 디자인의 상당 부분을 구축하는 데 사용할 수 있는 15개 이상의 블록이 있습니다.

우리의 블록 제품군에는 갤러리, 통계 및 슬라이더를 포함한 더 많은 '쇼케이스' 스타일 패턴과 함께 콘텐츠 및 이미지 패턴, 평가, 관련 기사 및 팀 블록이 포함됩니다.

요약

우리는 Gutenberg와 우리의 커스텀 패턴 라이브러리가 열어준 기회에 대해 정말 기쁩니다.

최신 편집 경험을 사용하여 맞춤형 웹사이트 제공을 계속 추진할 수 있을 뿐만 아니라 최종 사용자를 위한 풍부한 경험을 만드는 데 도움이 되는 통합 개발 접근 방식을 통해 매우 유연한 웹사이트를 제작할 수 있습니다.

우리가 지금 많은 새로운 사이트 빌드에서 사용하고 있는 Gutenberg 블록의 패턴 라이브러리를 처음 사용하기 시작한 지 거의 2개월이 되었습니다. 고객은 Gutenberg를 사용하기를 열망했으며 고객 피드백은 지금까지 매우 긍정적이었습니다.

“Matt와 Pammy는 귀하가 만든 사이트 요소에 대한 자습서를 제공했으며 훌륭합니다!! 유연성과 전문성은 환상적이며 지금까지 이 작업에 대한 모든 놀라운 작업에 감사드립니다. 감사합니다"

– 레이첼 스미스, YMCA 노팅엄

우리는 계속해서 사용자 정의 블록의 패턴 라이브러리를 확장하고 Gutenberg와 더 많은 시간을 보내면서 추가 개선을 통해 개선할 것입니다. 우리는 현재 5번째 Gutenberg 기반 사이트에서 작업 중이므로 곧 사례 연구를 기대하십시오!

WordPress 개발에 도움이 필요하면 주저하지 말고 저희에게 연락하십시오.