빌더 기본: 블록 패턴 탐색

최신 버전의 WordPress는 1월 25일에 월말에 도착할 예정입니다. 아마도 이 글을 읽고 있을 즈음에는 버전 5.9가 이미 출시되었을 것입니다. 나는 더 흥분할 수 없었다. 무수히 많은 개선 사항과 새로운 기능이 있으며 그 중 많은 부분은 향후 기사에서 다루겠지만 오늘의 주제는 블록 "패턴"입니다.

워드프레스에 새로운 것은 아니지만 패턴은 버전 5.9, 특히 블록 기반 테마에서 활성화된 기능으로 인해 많은 새로운 관심을 받고 있습니다. 패턴은 빠르게 WordPress 자체의 기본 구성 요소가 되고 있으며 웹 사이트를 디자인하고 구축하는 방식을 재편할 태세를 갖추고 있는 것 같습니다. 그렇다면 진정한 블록 패턴이 무엇이며 어떻게 사용할 수 있는지 알아보기에 더 좋은 시간은 언제일까요?

기초

블록 패턴에 대해 알아보기 전에 기본부터 시작하여 몇 가지 용어를 설정해 보겠습니다. WordPress는 지난 몇 년 동안 꽤 많이 바뀌었습니다. 우리 모두가 같은 페이지에 있는지 확인하는 것이 좋습니다.

차단하다

블록 은 WordPress에서 콘텐츠의 기본 "단위"입니다. 텍스트 단락에서 이미지 갤러리에 이르기까지 블록은 거의 모든 형태를 취할 수 있습니다. 레고 한 조각을 상상하는 것을 좋아합니다. . 각 블록이 다르게 보이거나 고유한 기능을 제공할 수 있지만 모두 잘 어우러져 웹 페이지의 콘텐츠를 만듭니다.

무늬

블록 패턴 은 단순히 특정 레이아웃을 형성하는 미리 정의된 블록 모음입니다. 패턴은 단일 블록일 수도 있고 여러 블록으로 구성될 수도 있습니다. 나중에 살펴보겠지만 패턴을 사용하면 복잡한 페이지 레이아웃을 쉽고 재미있게 만들 수 있습니다.

편집자

편집기 는 블록에서 페이지와 게시물을 만드는 데 사용하는 사용자 인터페이스입니다. 2018년 WordPress 5.0에 도입된 이후로 Editor는 많은 이름으로 불려 왔습니다. 여기에는 Gutenberg, Gutenberg Editor, Block Editor 등이 포함됩니다. 이 기사의 목적을 위해 단순히 "편집자"라는 용어를 사용합니다.

삽입기

Editor 내에서 Inserter 는 페이지에 블록과 패턴을 추가하는 데 사용됩니다. 편집기의 왼쪽 상단 모서리에 있는 파란색(+) 기호를 클릭하여 삽입기에 액세스할 수 있습니다.

아래 스크린샷은 정의된 용어를 보여줍니다.

패턴을 차단하는 이유

Editor를 사용하면 단순한 블로그 게시물이든 정교한 방문 페이지이든 상관없이 블록으로 거의 모든 디자인을 구축할 수 있습니다. 이 기사를 예로 들어 보겠습니다. 지금 읽고 있는 것은 단락 블록입니다. 위의 표제는 표제 블록이고 스크린샷은 이미지 블록일 뿐입니다. 이러한 콘텐츠 요소를 페이지에 추가하는 것은 쉬웠습니다. 삽입기를 열고 적절한 블록을 찾은 다음 클릭하여 삽입했습니다.

빠른 팁: 슬래시 명령을 사용하여 블록을 삽입할 수도 있다는 사실을 알고 계셨습니까? "/" 키로 새 단락을 시작하면 사용 가능한 블록 목록이 나타납니다. 추가 문자를 입력하면 검색 결과가 미세 조정됩니다. 시도 해봐!

조금 더 복잡한 것은 어떻습니까? 웹 사이트에서 제품이나 서비스를 소개하는 데 일반적으로 사용되는 디자인인 다음 가격표를 고려하십시오.

자세히 보면 이 레이아웃을 만드는 데 사용된 개별 블록을 인식할 수 있습니다. 베이스는 3개의 동일한 간격의 기둥이 있는 기둥 블록입니다. 각 열 블록 내부에는 구분 기호, 제목, 단락, 버튼 및 스페이서 블록이 있습니다. 얼마나 많은 것을 발견할 수 있었습니까?

실제로 이 가격표는 25개의 개별 블록으로 구성되어 있습니다. WordPress에 대한 기술 수준에 관계없이 처음부터 이 레이아웃을 복제하는 것은 지루하고 약간 어려울 것입니다.

이제 이 25개 블록 그룹이 이미 구성되어 있다고 상상해 보십시오. 클릭 한 번으로 전체 가격표를 삽입하고 개별 요구 사항에 맞게 조정할 수 있습니다. 더욱이, 각각 테마의 미학과 일치하는 방대한 디자인 컬렉션이 손끝에 있다면 어떨까요? 창의적인 이미지와 텍스트 레이아웃, 클릭 유도문안, 머리글, 바닥글, 전체 페이지 레이아웃까지 생각해 보십시오. 이러한 유형의 "시작 콘텐츠"를 사용하면 많은 시간을 절약할 수 있고 새로운 WordPress 사용자가 편집기에 더 쉽게 액세스할 수 있습니다.

여기에서 블록 패턴이 등장합니다. 위의 가격표는 실제로 WordPress 5.9와 함께 출시될 예정인 Twenty Twenty-Two 테마에 포함된 패턴입니다!

이 작은 연습이 내가 블록 패턴의 잠재력에 대해 그렇게 흥분하는 이유를 설명했지만 실제로 어떻게 사용합니까?

패턴 사용 방법

블록과 마찬가지로 삽입기를 사용하여 페이지에 패턴을 추가할 수 있습니다. 삽입기가 열린 상태에서 범주별로 분류된 사용 가능한 모든 패턴을 표시하는 "패턴" 탭으로 이동합니다. 나에게 맞는 레이아웃을 선택하고 클릭하여 삽입하세요. 그런 다음 다른 블록과 마찬가지로 패턴을 구성하는 개별 블록을 편집할 수 있습니다. 삽입할 수 있는 패턴의 수에는 제한이 없습니다. 믹스 앤 매치하여 독특한 페이지 디자인을 만듭니다.

삽입기가 블록 패턴에 쉽게 액세스할 수 있도록 하지만 각 패턴의 미리보기가 매우 작고 모두 단일 열에 쌓여 있음을 알 수 있습니다. 레이아웃을 시각화하고 비교하는 것이 어려울 수 있으므로 올바른 레이아웃을 선택하기가 어렵습니다.

이 문제를 해결하기 위해 WordPress 5.9에는 패턴 탐색기가 포함되어 있습니다. 이 흥미로운 새 기능은 "패턴" 탭의 카테고리 드롭다운 옆에 있는 "탐색" 버튼을 클릭하여 액세스할 수 있습니다.

Explorer는 그리드에 표시되는 패턴으로 향상된 브라우징 경험을 제공하는 모달 창을 엽니다. 또한 카테고리별로 쉽게 검색하거나 필터링할 수 있습니다.

위의 스크린샷은 패턴 탐색기의 첫 번째 반복입니다. 향후 WordPress 릴리스는 Explorer의 기능을 확장할 것으로 예상됩니다. 현재 실험은 모바일/태블릿 미리보기 및 그리드 레이아웃과 달리 개별적으로 패턴을 데모하는 옵션을 추가합니다. 확인된 것은 없지만 2022년 중반에 WordPress 6.0의 추가 개선 사항을 주시하십시오.

패턴에 대한 이 모든 논의를 통해 패턴이 실제로 어디에서 왔는지 궁금해 할 수 있습니다.

어디에서 찾을 수 있습니까?

현재 테마, 타사 플러그인 또는 패턴 디렉토리를 통해 WordPress 자체를 통해 세 가지 방법 중 하나로 패턴을 등록할 수 있습니다. 각각의 방법을 알아보자.

주제

테마는 웹사이트에서 패턴을 사용할 수 있는 가장 직접적인 방법일 것입니다. 위의 가격표에서 보았듯이 많은 블록 기반 테마에는 고유한 맞춤 패턴 컬렉션이 포함되어 있습니다. 이것은 테마를 차별화하는 또 다른 방법이며 강력한 레이아웃 옵션 세트는 사용자에게 큰 이점이 될 것입니다. 글을 쓰는 시점에 Twenty Twenty-Two 테마는 60개 이상과 함께 제공됩니다!

패턴 디렉토리(WordPress)

WordPress 5.9 릴리스부터 WordPress는 Pattern Directory를 통해 자체 패턴을 제공합니다.

패턴 디렉토리는 WordPress 플러그인 및 테마 리포지토리와 매우 유사한 패턴의 커뮤니티 기반 리포지토리이며 5.9 릴리스까지 공개 제출을 위해 공개됩니다. 제출 및 승인된 모든 패턴은 패턴 탐색기에서 직접 찾아보고 삽입할 수 있습니다. 즉, WordPress 사용자는 수천은 아니더라도 수백 개의 블록 패턴에 액세스할 수 있습니다.

빠른 팁: 일부 테마는 패턴 디렉토리에서 WordPress에 포함된 패턴을 비활성화할 수 있습니다. 이는 테마 개발자가 고유한 패턴 컬렉션을 포함하고 보다 선별된 사용자 경험을 제공하고자 할 때 종종 수행됩니다.

타사 플러그인

마지막으로 플러그인이 있습니다. 패턴은 수년 동안 사용되어 왔기 때문에 Genesis Blocks 및 Redux와 같은 많은 타사 플러그인이 광범위한 패턴 라이브러리를 생성했습니다. 종종 이러한 라이브러리는 패턴 탐색기와 같은 기능과 WordPress 코어에서 찾을 수 없는 기능 사용자 정의 블록과 직접 통합되지 않습니다. 그들은 또한 패턴을 삽입하는 고유한 방법을 사용하는 경향이 있지만 시간이 지남에 따라 많은 사람들이 WordPress의 새로운 표준화된 접근 방식을 따르기 시작할 것으로 예상합니다.

패턴 디렉토리가 계속 발전하는 동안 틈새 블록 및 레이아웃을 찾고 있거나 고유한 패턴이 있는 테마를 사용하지 않는 경우 타사 플러그인이 제공해야 하는 항목을 탐색하는 것이 좋습니다.

패턴의 미래

WordPress 5.9는 블록 패턴에 많은 개선 사항을 가져올 것입니다. 논의한 바와 같이 패턴 탐색기를 사용하면 웹사이트에 적합한 디자인을 더 쉽게 선택할 수 있습니다. 패턴 디렉토리를 사용하면 테마에 완벽하게 통합되는 방대한 커뮤니티 구축 패턴 컬렉션에 액세스할 수 있습니다.

개별 블록에서 항상 고유한 디자인을 만들 수 있지만 대부분의 사람들은 곧바로 패턴 탐색기로 이동할 것입니다. 테마나 디렉토리에서 제공하는 레이아웃을 선택한 다음 필요에 따라 조정합니다. 내가 할 거란 걸 알아.

또한 새로운 블록 기반 테마는 기본 제공 블록 패턴 컬렉션이 얼마나 광범위한지 판단할 수 있습니다. 100개 이상의 패턴이 있는 테마가 모두 깔끔하게 분류되고 광범위한 사용 사례를 포함하는 것이 표준이 될 것입니다. 테마의 미학도 중요하지만 사용자에게 아름다운 웹 페이지를 손쉽게 만드는 데 필요한 도구를 제공하는 것이 가장 중요합니다.

패턴은 WordPress의 미래이며 미래는 밝습니다.

마무리

이 기사에서 우리는 블록 패턴이 무엇인지, 어떻게 사용할 수 있는지, 왜 이것이 워드프레스 웹사이트 구축 방식을 근본적으로 변화시키는지 살펴보았습니다. 다음 빌더 기본 기사에서 우리는 조금 더 깊이 파고들어 실제로 자신의 패턴을 만드는 방법을 가르칠 것입니다!

그럼 패턴은 어떻게 생각하시나요? 웹사이트에서 사용하고 있습니까? 이 기사에서 다루지 않은 질문이 있습니까? 의견에 알려주십시오.