WordPress 블록: 정의 및 사용 방법

WordPress는 사용자가 콘텐츠를 생성하고 관리하는 방식을 변화시켰으며 WordPress 블록은 이러한 진화의 큰 부분을 차지합니다.

구텐베르크 편집기의 도입으로 블록은 게시물, 페이지 및 전체 사이트를 디자인하는 데 필수적인 구성 요소가 되었습니다.

현재 WordPress 버전에는 90개 이상의 기본 블록이 포함되어 있습니다. 여기에는 텍스트, 미디어, 위젯, 테마 요소 및 삽입이 포함됩니다.

이 기사에서는 WordPress 블록이 유용한 이유, 사용 가능한 다양한 유형의 블록 및 사용 방법을 포함하여 WordPress 블록을 살펴보겠습니다. 또한 디자인에 도움이 되는 추가 콘텐츠 블록, 사용자 정의 기능 및 레이아웃 템플릿을 제공하는 가장 인기 있는 WordPress 블록 플러그인 중 일부도 살펴보겠습니다.

이제 WordPress 블록에 대한 간략한 개요부터 시작해 보겠습니다.

WordPress 블록이란 무엇입니까?

WordPress 블록은 Gutenberg라고도 알려진 WordPress 블록 편집기의 필수 구성 요소입니다. 블록을 사용하면 게시물과 페이지에 콘텐츠를 추가하고 구조화할 수 있습니다. 단락, 이미지, 비디오, 갤러리 등 콘텐츠의 각 섹션은 독립적으로 이동, 편집 및 사용자 정의할 수 있는 별도의 블록입니다. 이 시스템을 사용하면 기존 편집기에 비해 콘텐츠 생성이 훨씬 더 유연해집니다.

블록은 콘텐츠와 상호 작용하기 위한 시각적 인터페이스도 제공합니다. 변경 사항을 실시간으로 확인할 수 있으므로 일관된 레이아웃을 유지할 수 있습니다. 이 모듈식 접근 방식은 현재 WordPress 경험의 핵심이며 모든 사용자가 액세스할 수 있도록 해줍니다.

WordPress 블록을 사용하는 이유는 무엇입니까?

이전 WordPress 편집기는 TinyMCE 기반 텍스트 편집기였습니다. 인터페이스는 페이지나 게시물 미리보기를 위한 시각적 요소가 없다는 점에서 텍스트 편집기와 매우 유사했습니다.

반면, 콘텐츠 블록을 사용하면 페이지 레이아웃을 변경할 수 있으며 이전 클래식 편집기에서는 불가능했던 다양한 시각적 및 대화형 요소를 쉽게 포함할 수 있습니다.

또한 블록을 사용하면 여러 작업이 더 쉬워졌습니다. 예를 들어 YouTube 비디오와 같은 외부 미디어를 삽입하는 것은 이제 콘텐츠에 올바른 블록을 추가하고 URL을 붙여넣는 것만큼 간단합니다.

이전에는 이러한 콘텐츠 사용자 정의를 위해 추가 HTML 코드를 사용해야 했습니다.

또한 동기화된 블록 패턴을 사용하면 나중에 사용할 수 있도록 사전에 사용자 정의된 블록을 저장할 수 있으므로 처음부터 콘텐츠를 구축할 필요가 없습니다.

다른 옵션은 다양한 용도에 적합한 사전 구축된 블록 레이아웃인 일반 또는 동기화되지 않은 블록 패턴을 사용하는 것입니다.

더욱이 블록 기반 WordPress 테마에서는 블록 편집기와 전역 스타일 인터페이스를 사용하여 템플릿을 사용자 정의할 수도 있습니다. 콘텐츠 블록을 다시 정렬하여 템플릿이나 전체 사이트 레이아웃을 쉽게 사용자 정의할 수 있습니다.

전반적으로 새로운 WordPress 편집기는 콘텐츠 편집에 대한 사용자 경험을 향상시킵니다.

블록 편집기에서는 어떤 유형의 WordPress 블록을 사용할 수 있나요?

최신 WordPress 버전에는 텍스트, 미디어, 디자인, 위젯, 테마, 삽입 등 6가지 범주로 그룹화된 약 90개 이상의 블록이 있습니다.

WordPress 블록 편집기의 몇 가지 블록을 살펴보겠습니다.

텍스트 블록

텍스트 블록은 웹 사이트에 서면 콘텐츠를 작성하는 데 기초가 됩니다. 가장 일반적인 텍스트 블록은 다음과 같습니다.

• 단락 블록: 텍스트 내용을 추가하고 서식을 지정하는 데 가장 널리 사용되는 블록입니다.
• 제목 블록: 제목(H1, H2, H3 등)을 삽입하여 콘텐츠를 논리적으로 구성할 수 있습니다.
• 목록 블록: 정보를 분류하기 위해 글머리 기호 또는 번호 매기기 목록을 만드는 데 적합합니다.
• 인용 블록: 인용문이나 사용후기를 삽입하여 콘텐츠의 핵심 사항을 강조할 수 있습니다.
• 코드 블록: 적절한 형식으로 코드 조각을 표시하는 데 유용합니다.
• 테이블 블록: 행과 열로 구조화된 콘텐츠를 생성하여 정보를 표시합니다.
• 그리고 더.

미디어 블록

미디어 블록을 사용하면 파일을 미디어 라이브러리에 업로드하고 콘텐츠에 포함할 수 있습니다. 여기에는 다음이 포함됩니다.

• 이미지 블록: SEO용 캡션 및 대체 텍스트를 포함한 이미지를 추가하고 사용자 정의합니다.
• 비디오 블록: 비디오를 직접 삽입하거나 YouTube와 같은 외부 소스에서 비디오를 삽입합니다.
• 갤러리 블록: 여러 이미지를 그리드 형식으로 표시하므로 풍부한 갤러리를 만드는 데 적합합니다.
• 오디오 차단: 팟캐스트나 음악 사이트에 적합한 오디오 파일을 업로드하고 공유합니다.
• 파일 블록: 콘텐츠 내에 PDF, Word 문서 등 다운로드 가능한 파일을 포함합니다.
• 그리고 더.

디자인 블록

디자인 블록은 게시물과 페이지의 시각적 레이아웃을 향상시키는 데 도움이 됩니다. 다음을 포함하여 콘텐츠를 구조화하고 스타일을 지정하는 옵션을 제공합니다.

• 열 블록: 다중 열 레이아웃을 만들어 콘텐츠를 섹션으로 나누어 가독성을 높입니다.
• 스페이서 블록: 요소 사이에 빈 공간을 추가하여 더욱 깔끔하고 정돈된 모습을 연출합니다.
• 버튼 차단: 사용자를 다른 페이지나 작업으로 안내하는 클릭 유도 문구용 사용자 정의 가능한 버튼을 삽입합니다.
• 구분자 블록: 가로선을 추가하여 콘텐츠의 여러 섹션을 시각적으로 구분합니다.
• 그룹 블록: 더 나은 레이아웃 관리를 위해 여러 블록을 단일 그룹으로 결합합니다.
• 그리고 더.

위젯 블록

위젯 블록을 사용하면 다음을 포함하여 사이트에 동적 콘텐츠를 삽입할 수 있습니다.

• 단축 코드 차단: 플러그인이나 사용자 정의 기능의 단축 코드를 사용하여 콘텐츠를 강화하세요.
• 최신 게시물 차단: 최근 게시물 목록을 표시하여 내부 연결 및 탐색 기능을 강화합니다.
• 캘린더 블록: 사이트에 캘린더 보기를 추가하면 이벤트 중심 블로그에 적합합니다.
• 사용자 정의 HTML 블록: 사용자 정의 HTML 코드를 추가하고 편집하면서 미리 봅니다.
• 소셜 아이콘 차단: 소셜 프로필이나 사이트에 연결되는 아이콘을 표시합니다.
• 그리고 더.

테마 블록

테마 블록은 사이트의 전체 레이아웃과 관련된 콘텐츠를 추가하고 관리하는 데 사용됩니다. 예는 다음과 같습니다:

• 사이트 로고 블록: 게시물이나 페이지에 웹사이트 로고를 표시합니다.
• 탐색 블록: 콘텐츠 영역에 메뉴 또는 탐색 링크를 직접 추가합니다.
• 제목 블록: 게시물, 페이지 또는 기타 콘텐츠 유형의 제목을 표시합니다.
• 작성자 차단: 이름, 아바타, 약력 등 게시물 작성자 세부정보를 표시합니다.
• 쿼리 블록: 다양한 쿼리 매개변수를 기반으로 게시물 유형을 표시할 수 있습니다.
• 그리고 더.

블록 삽입

Embeds 블록을 사용하면 소셜 미디어 게시물, 비디오, 팟캐스트와 같은 외부 콘텐츠를 쉽게 통합할 수 있습니다. WordPress는 다양한 삽입을 지원합니다.

• YouTube 차단: 간단한 URL을 사용하여 YouTube 동영상을 콘텐츠에 직접 삽입하세요.
• Twitter 차단: 트윗의 URL을 붙여넣어 트윗 또는 전체 Twitter 스레드를 표시합니다.
• Spotify 블록: Spotify의 재생 목록, 앨범 또는 노래를 삽입하여 멀티미디어 콘텐츠를 향상시킵니다.
• Pinterest 블록: Pinterest 핀, 보드 및 프로필을 삽입할 수 있습니다.
• 그리고 더.

WordPress 블록을 사용하는 방법

이제 WordPress 블록이 무엇인지 배웠으므로 이를 사용하여 웹사이트를 디자인하는 방법을 살펴보겠습니다.

WordPress 블록을 추가하는 방법

새 블록을 추가하려면 인터페이스에서 더하기(+) 아이콘 중 하나를 클릭하여 블록 삽입기를 엽니다. 그런 다음 추가하려는 블록을 검색하여 선택합니다.

전체 블록 삽입기를 열려면 기본 도구 모음에서 더하기(+) 아이콘을 클릭합니다. 그런 다음 블록을 선택합니다. 블록 위로 마우스를 가져가면 블록이 어떻게 보일지 미리 볼 수 있습니다.

또한 콘텐츠의 특정 영역 위에 마우스를 놓고 더하기(+) 아이콘을 클릭하면 더 작은 블록 삽입기 인터페이스를 얻을 수도 있습니다. 이 방법으로 블록을 선택하면 아이콘을 클릭한 영역에 블록이 자동으로 삽입됩니다.

WordPress 블록을 사용자 정의하는 방법

블록을 사용자 정의하려면 해당 블록을 클릭하여 선택하면 됩니다. 적절한 블록을 찾는 데 문제가 있는 경우 목록 보기를 열고 목록에서 선택하세요. 이에 대한 자세한 내용은 다음 섹션에서 설명합니다.

블록을 선택한 후에는 이를 사용자 정의할 수 있는 두 가지 기본 옵션이 있습니다. 첫째, 많은 블록은 부동 도구 모음에서 몇 가지 기본 옵션을 제공합니다. 일반적으로 텍스트 서식을 추가하고 정렬을 조정하며 기타 기본 변경 작업을 수행할 수 있습니다.

그런 다음 고급 설정에 액세스하려면 오른쪽 사이드바에 있는 차단 설정을 사용하세요. 이러한 설정은 각 블록마다 고유하므로 작동 방식을 완벽하게 제어할 수 있습니다.

예를 들어 단락 블록에는 색상, 활자체, 여백 및 안쪽 여백, 기타 디자인 요소를 사용자 정의하는 옵션이 있습니다.

목록 보기를 사용하여 블록을 선택하는 방법

일반적으로 블록을 클릭하기만 하면 선택할 수 있습니다. 하지만 원하는 블록을 정확하게 선택하기 어려울 때가 있을 수 있습니다. 이는 나중에 논의할 열 및 그룹 블록의 경우 특히 그렇습니다.

이 문제를 해결하려면 블록 편집기의 목록 보기를 사용하세요. 목록 보기를 열면 게시물의 모든 블록 목록이 나타나는 순서대로 표시됩니다.

블록을 선택하려면 목록에서 해당 블록을 클릭하세요.

WordPress 블록을 재정렬하는 방법

WordPress 블록을 재정렬하는 경우 두 가지 옵션이 있습니다.

먼저, 블록을 몇 위치 위나 아래로 이동해야 하는 경우 아래 이미지에 표시된 대로 해당 블록을 선택한 다음 위쪽 또는 아래쪽 화살표를 클릭합니다.

둘째, 더 많은 제어가 필요한 경우 끌어서 놓기 기능을 사용하여 페이지의 어느 곳으로나 블록을 이동할 수 있습니다. 이를 사용하려면 블록을 선택하고 6개의 점 아이콘에 커서를 클릭하세요(위 이미지 참조).

그런 다음 블록을 새로운 위치로 이동합니다. 올바른 영역에 있는지 확인하는 데 도움이 되도록 마우스를 놓으면 블록이 움직일 위치에 파란색 선이 나타납니다.

목록 보기를 사용하여 블록을 재정렬할 수도 있습니다.

여러 블록을 선택하는 방법

경우에 따라 여러 블록을 선택해야 할 수도 있습니다. 이는 위에 나열된 방법을 사용하여 많은 블록을 정렬하려는 경우 특히 유용합니다.

여러 블록을 선택하려면 텍스트 문서에서 여러 단락을 선택하는 것처럼 블록을 클릭하고 드래그하면 됩니다.

더 많은 제어를 원할 경우에도 목록 보기를 사용하여 추가 제어를 위한 여러 블록을 선택할 수도 있습니다. 그렇게 하려면 선택하려는 첫 번째 블록을 클릭하기만 하면 됩니다. 그런 다음 키보드에서 Shift를 누른 상태에서 선택할 마지막 블록을 클릭하세요. 첫 번째 블록과 마지막 블록 사이의 모든 블록이 자동으로 선택됩니다.

WordPress 블록을 열에 나란히 배치하는 방법

블록을 나란히 놓는 것은 매우 쉽습니다. 열 블록을 사용하면 이 작업을 수행할 수 있습니다.

이렇게 하려면 더하기(+) 아이콘을 클릭한 다음 열 블록을 검색하여 편집기에 추가하면 됩니다. 블록을 추가하면 원하는 열 구조를 선택하라는 메시지가 표시됩니다. 예를 들어 비슷한 크기의 열 두 개를 사용하거나 한 열을 다른 열보다 크게 만들 수 있습니다. 또는 세 개 이상의 열을 사용하세요.

열 구조를 설정한 후에는 각 열에 더하기(+) 아이콘이 표시됩니다. 해당 아이콘을 사용하여 각 열에 콘텐츠를 바로 추가하여 나란히 배치할 수 있습니다.

나중에 열 레이아웃을 변경해야 하는 경우 기본 열 블록의 설정을 편집하면 쉽게 변경할 수 있습니다.

WordPress 블록을 함께 그룹화하는 방법

블록을 그룹화하는 것은 동일한 배경색을 여러 블록에 적용하는 경우와 같은 경우에 유용할 수 있습니다.

그룹 블록을 사용하면 이 작업을 수행할 수 있습니다.

Gutenberg WordPress 편집기에 새 그룹 블록을 추가하기만 하면 됩니다. 그런 다음 그룹 블록 내의 더하기(+) 아이콘을 클릭하여 해당 그룹에 다른 콘텐츠 블록을 추가합니다.

색상 배경을 추가하는 등 기본 그룹 블록의 설정을 편집하면 그룹의 모든 블록에 영향을 미칩니다. 그룹 블록을 이동할 수도 있습니다. 다른 모든 블록은 내부에 유지됩니다.

최고의 WordPress 블록 플러그인

WordPress 플러그인을 설치하는 것은 WordPress 편집기에 다른 많은 차단 옵션을 추가하는 훌륭한 방법입니다.

블록 라이브러리에 더 많은 콘텐츠 블록, 사용자 정의 옵션, 심지어 레이아웃 템플릿을 추가하는 데 사용할 수 있는 여러 가지 WordPress 플러그인이 있습니다.

다음은 WordPress용 최고의 블록 플러그인 중 일부입니다.

1. 제네시스 블록

Genesis Blocks는 다양한 맞춤형 WordPress 블록을 포함하는 무료 Gutenberg 플러그인입니다.

14개의 핵심 구텐베르그 블록, 4개의 사전 구축된 페이지 레이아웃 및 8개의 사전 구축된 페이지 섹션이 있습니다.

라이브러리의 일부 블록은 다음과 같습니다.

• 고급 열 블록
• 뉴스레터 블록
• 가격 블록
• 추천 블록
• 아코디언 블록
• 그리고 더

Genesis Blocks는 더 많은 블록, 사전 구축된 전체 페이지 레이아웃 26개, 사전 구축된 섹션 56개 및 기타 기능을 포함하는 유료 버전인 Genesis Pro를 제공합니다. 놀랍고 기능적인 웹사이트를 즉시 제작하기 위한 최고의 선택입니다.

Genesis Blocks는 가장 인기 있는 관리형 WordPress 호스팅 회사 중 하나인 WP Engine이 소유하고 있습니다. 또한 Genesis Blocks 플러그인과 완벽하게 작동하는 고품질 StudioPress 테마를 제공합니다.

가격:

무료 버전을 사용할 수 있습니다. 프로 버전은 월 30달러입니다.

창세기 블록 받기

2. 스펙트럼

이전에 Gutenberg용 Ultimate Addon으로 알려진 Spectra는 가장 인기 있는 Gutenberg 블록 라이브러리 플러그인입니다.

인기 있는 Astra 테마를 만든 개발자가 만든 이 플러그인은 현재 900,000개 이상의 사이트에 설치되어 있습니다.

여기에는 다음을 포함하여 30개 이상의 구텐베르크 블록이 포함되어 있습니다.

• 슬라이더 블록
• 카운터 블록
• 별점 블록
• FAQ 블록
• 정보 상자 블록
• 그리고 더

이 플러그인을 사용하면 Astra 테마는 물론 모든 시작 사이트와 템플릿 키트도 지원한다는 장점이 있습니다. 결과적으로 시작 사이트를 가져오고 블록 편집기를 사용하여 멋진 레이아웃을 디자인할 수 있습니다.

가격:

무료 버전을 사용할 수 있습니다. 프로 버전은 연간 49달러 또는 단일 사이트의 평생 라이센스의 경우 199달러부터 시작합니다.

스펙트럼 받기

3. 케이던스 블록

Kadence Blocks는 또 다른 훌륭한 WordPress 블록 플러그인입니다. 여기에는 가장 널리 사용되는 블록이 포함되어 있으며 콘텐츠 편집기에 추가 기능을 추가할 수 있습니다.

플러그인은 무료 버전과 유료 버전으로 제공됩니다. 무료 버전에는 다음을 포함하여 23개의 사용자 정의 블록이 제공됩니다.

• 아코디언 블록
• 고급 버튼 블록
• 고급 갤러리 블록
• 카운트다운 블록
• 목차 블록
• 그리고 더

플러그인을 사용하면 필요하지 않은 블록을 비활성화하여 편집기를 깨끗하고 가볍게 유지할 수 있습니다.

또한 게시물이나 페이지를 사용자 정의하는 데 사용할 수 있는 블록 패턴 라이브러리와 전체 페이지 레이아웃이 있는 디자인 라이브러리도 제공합니다.

이러한 블록을 즐기고 Kadence 테마에서 더 많은 것을 보고 싶다면 프로 플러그인이나 멤버십 플랜을 구매할 수 있습니다.

가격:

무료 버전을 사용할 수 있습니다. 프로 버전은 연간 149달러부터 시작됩니다.

케이던스 블록 받기

결론

Gutenberg 편집기는 컨텐츠를 생성하고 관리하는 유연한 방법을 제공하는 WordPress 블록을 기반으로 구축되었습니다. 텍스트, 미디어, 위젯, 삽입 등 다양한 블록 유형을 사용하여 전문가 수준의 페이지를 쉽게 만들 수 있습니다. 구성 가능한 특성 덕분에 블록을 사용하면 SEO와 사용자 경험도 향상됩니다.

또한 더 많은 블록과 기능을 원할 경우 블록 플러그인을 사용하여 새로운 디자인 가능성을 열어보세요.

다양한 블록과 플러그인을 실험하여 귀하의 사이트에 가장 적합한 것이 무엇인지 알아보세요. WordPress 블록을 알면 눈에 띄는 설득력 있고 역동적인 콘텐츠를 구축할 수 있습니다.

이제 WordPress 편집기를 열고 블록이 제공하는 무한한 가능성을 발견해보세요!

자세한 내용은 다음과 같은 유용한 리소스를 확인하세요.

• 전체 사이트 편집을 위한 12가지 최고의 WordPress 블록 테마
• Elementor 대 Gutenberg 비교: 어느 것이 더 낫습니까?
• 2024년 최고의 WordPress 페이지 빌더: 상위 13개 비교

마지막으로 Facebook과 Twitter에서 우리를 팔로우하여 최신 WordPress 및 블로그 관련 기사에 대한 최신 소식을 받아보세요.