워드프레스 블록 편집기 사용 방법: 초보자 가이드

워드프레스 블록 편집기는 처음 열었을 때 다소 복잡해 보일 수 있습니다. 레이아웃이 다르고 모든 것이 블록 단위로 작동하며, 초보자는 기본적인 옵션을 찾는 데 예상보다 시간이 더 걸릴 수 있습니다.

하지만 블록 편집기는 모든 워드프레스 설치 기본적으로 포함되어 있으므로 사용자는 무료로 사용할 수 있는 도구입니다.

블록 작동 방식을 이해하면 기존 편집기에서보다 페이지를 더 빠르게 구축하고, 콘텐츠 서식을 쉽게 지정하고, 레이아웃을 훨씬 효과적으로 제어할 수 있습니다.

블록 편집기는 직관적이고 유연하게 설계되어 사용자가 블록을 드래그 앤 드롭하여 원하는 위치에 배치할 수 있습니다. 약간의 연습만 하면 몇 분 만에 페이지를 만들고 사용자 지정할 수 있습니다.

요약

• 구텐베르크 라고도 함 )는 워드프레스 5.0에서 기존 편집기를 대체했으며, 개별 블록을 사용하여 콘텐츠를 구축할 수 있도록 해줍니다.

• 페이지의 모든 요소(텍스트, 이미지, 버튼, 레이아웃 등)는 각각 별도의 블록에 배치되며, 각 블록마다 전용 설정이 적용됩니다.

• 코드 작성 없이 블록 설정 패널에서 직접 색상, 간격, 글꼴 및 정렬을 사용자 지정할 수 있습니다.

• 블록 패턴은 바로 시작할 수 있는 레이아웃을 제공하며, 재사용 가능한 블록을 사용하면 사이트 전체에서 자신만의 요소를 저장하고 재사용할 수 있습니다.

워드프레스 블록 편집기란 무엇인가요?

블록 편집기(구텐베르크라고도 함)는 워드프레스의 기본 콘텐츠 편집기입니다. 워드프레스 5.0 버전에서 기존 편집기를 .

하나의 텍스트 영역 대신 개별 블록을 사용하여 콘텐츠를 구성합니다. 각 단락, 이미지, 제목, 버튼 및 비디오는 각각 독립적인 블록으로 제공되며, 이 블록들을 개별적으로 이동, 서식 지정 및 사용자 지정할 수 있습니다.

워드프레스는 블록 기반 시스템으로 전환하여 별도의 페이지 빌더나 사용자 정의 코드 없이도 페이지 레이아웃을 더욱 자유롭게 제어할 수 있게 되었습니다.

워드프레스 블록 편집기 vs. 기존 편집기

기존 편집기는 서식 옵션이 제한적인 기본 텍스트 영역만 제공했습니다. 표준 텍스트와 이미지 외의 다른 내용을 작성하려면 추가 플러그인을 설치하거나 기술적인 지식이 필요했습니다.

블록 편집기를 사용하면 모든 요소에 전용 설정이 있는 개별 블록이 제공됩니다. 코드를 한 줄도 작성하지 않고도 콘텐츠를 이동하고, 열 레이아웃을 만들고, 버튼을 추가하고, 미디어를 삽입하고, 간격을 조정할 수 있습니다.

WordPress는 더 이상 기존 편집기를 적극적으로 개발하지 않습니다. 블록 편집기로 전환하면 전체 사이트 편집, 블록 패턴, 재사용 가능한 블록 등 WordPress에서 현재 제공하는 모든 기능을 이용할 수 있습니다.

블록 편집기 인터페이스를 탐색하는 방법은 무엇입니까?

블록 편집기를 처음 열면 화면에 많은 것들이 나타나는 것처럼 느껴질 수 있습니다. 하지만 알아야 할 주요 영역은 세 가지입니다. 각 영역을 이해하고 나면 편집기를 훨씬 쉽게 사용할 수 있습니다.

• 상단 도구 모음: 상단 도구 모음은 화면 상단에 있습니다. 이 도구 모음을 사용하여 블록 추가, 오류 되돌리기, 콘텐츠 미리 보기 및 게시 설정에 액세스할 수 있습니다.

• 설정 패널: 설정 패널은 화면 오른쪽에 있습니다. 블록을 클릭하면 블록 설정이 표시되고, 아무것도 선택하지 않으면 카테고리, 태그, 추천 이미지와 같은 게시물 설정이 표시됩니다. 여기에서 블록 탭에 접근하여 선택한 블록의 설정을 구성할 수 있습니다.

• 블록 삽입기: 블록 삽입기는 왼쪽 상단에 있는 파란색 더하기 버튼입니다. 이 버튼을 클릭하면 검색창을 사용하여 블록을 빠르게 찾아 삽입하거나, 카테고리별로 찾아보거나, 저장해 둔 재사용 가능한 블록을 찾을 수 있습니다.

목록 보기를 사용하면 레이아웃을 더욱 효과적으로 관리하고 구성할 수 있습니다.

사용 가능한 블록 유형

블록 편집기는 모든 것을 다섯 가지 범주로 분류합니다. 각 범주는 블록의 기능별로 그룹화되어 있어 페이지와 게시물을 작성할 때 필요한 블록을 쉽게 찾을 수 있습니다.

기본 블록은 다양한 콘텐츠 유형을 지원하므로 사용자는 이미지, 비디오, 갤러리 등을 포함한 미디어 콘텐츠가 풍부한 페이지를 만들 수 있습니다.

각 항목의 내용은 다음과 같습니다

• 텍스트 블록: 단락, 제목, 목록, 인용문, 코드 조각, 표. 페이지에 작성하는 모든 내용은 이 범주에 속합니다.

• 미디어 블록: 이미지, 비디오, 오디오 파일, 이미지 갤러리 및 다운로드 가능한 파일. 이미지 갤러리를 포함한 여러 블록을 사용하여 시각적으로 매력적인 콘텐츠와 미디어가 풍부한 페이지를 만들 수 있습니다.

• 디자인 블록: 열, 버튼, 그룹, 구분선, 간격 조절선. 여러 블록을 조합하여 복잡한 레이아웃을 만들고 콘텐츠 표시 방식을 제어할 수 있습니다.

• 위젯 블록: 검색창, 아카이브 목록, 카테고리 목록, 최신 게시물, 캘린더. 이러한 기능적인 요소들은 페이지에 더 많은 가치를 더해줍니다.

• 임베드 블록: YouTube, Vimeo, Spotify, Twitter 및 수십 개의 기타 플랫폼. 블록 편집기를 사용하면 YouTube 및 Vimeo와 같은 타사 소스의 콘텐츠를 코드를 작성하지 않고도 페이지에 직접 쉽게 삽입할 수 있습니다.

초보자들이 가장 많이 사용하는 일반적인 워드프레스 블록

처음 시작할 때는 모든 블록을 한 번에 배울 필요는 없습니다. 이 블록들은 거의 모든 페이지와 게시물에서 사용하게 될 블록들입니다.

단락 및 제목 블록

단락 블록은 편집기에서 가장 기본적인 블록입니다. 입력을 시작할 때마다 단락 블록을 사용하게 됩니다. 블록 도구 모음에서 코드를 건드리지 않고도 글꼴 크기, 텍스트 색상 및 정렬을 직접 변경할 수 있습니다.

제목 블록은 단락 블록과 함께 콘텐츠에 구조를 부여합니다. 페이지 구성 방식에 따라 H1부터 H6까지 다양한 크기 중에서 선택할 수 있습니다.

제목 레벨을 올바르게 사용하면 검색 엔진이 콘텐츠를 더 잘 이해할 수 있으며, 이는 SEO .

이미지 및 미디어 차단

이미지 블록을 사용하면 미디어 라이브러리 또는 URL에서 이미지를 직접 업로드할 수 있습니다. 이미지를 업로드한 후에는 왼쪽, 오른쪽 또는 가운데로 정렬하고, 크기를 조정하고, SEO 및 접근성을 위해 대체 텍스트(alt text)를 추가할 수 있습니다.

여러 이미지를 표시할 경우, 갤러리 블록은 깔끔한 그리드 레이아웃으로 이미지를 보여줍니다. 열 개수, 이미지 크기, 그리고 각 이미지 아래에 캡션을 표시할지 여부를 사용자가 직접 설정할 수 있습니다.

버튼 및 링크 블록

버튼 블록을 사용하면 디자인 기술 없이도 페이지 어디에든 클릭 유도 버튼을

본문 내 링크를 만들려면 단락 블록에서 텍스트를 선택하고 도구 모음의 링크 아이콘을 클릭하기만 하면 됩니다. 코드나 플러그인 없이 몇 초 만에 깔끔한 하이퍼링크를 추가할 수 있습니다.

목록 및 인용 블록

목록 블록을 사용하면 한 번의 클릭으로 글머리 기호 또는 번호 매기기 목록을 만들 수 있습니다. 목록 스타일을 전환하고, 항목을 들여쓰기하여 중첩 목록을 만들고, 단락 블록처럼 각 목록 항목 내의 텍스트 서식을 지정할 수 있습니다.

인용 블록은 콘텐츠에서 중요한 문장이나 인용문을 강조합니다. 텍스트를 시각적으로 부각시켜 페이지의 다른 부분과 구분되도록 합니다.

추천글, 핵심 요점 또는 독자들이 주목했으면 하는 모든 것에 사용하세요.

블록을 추가, 이동 및 삭제하는 방법은 무엇입니까?

구텐베르크 편집기에서 수행하는 모든 작업은 블록 추가, 이동 및 삭제의 세 가지

워드프레스 편집기에서 블록 추가하기

페이지나 게시물에 블록을 추가하는 방법은 세 가지입니다. '새 블록 추가' 버튼을 클릭하거나 슬래시 명령어(/ 뒤에 블록 이름을 입력)를 사용하여 새 블록을 추가할 수 있습니다

• 블록 삽입기: 왼쪽 상단의 파란색 더하기 버튼을 클릭하여 블록 삽입기를 엽니다. 여기에서 필요한 블록을 검색하거나 찾아볼 수 있으며, 미리 디자인된 블록 패턴과 레이아웃이 있는 블록 패턴 라이브러리를 탐색하여 삽입하고 사용자 지정할 수도 있습니다.

• 인라인 삽입: 페이지의 기존 블록 사이에 마우스 커서를 가져가면 블록 사이에 나타나는 작은 더하기 버튼을 클릭합니다.

• 슬래시 명령: 빈 단락 블록을 클릭한 다음 슬래시(/)를 입력하고 블록 이름을 입력합니다. 이렇게 하면 새 블록을 즉시 추가할 수 있습니다.

구텐베르크에서 블록 이동 및 재배치하기

페이지에서 블록을 새로운 위치로 이동하는 방법은 세 가지가 있습니다

• 화살표 버튼: 모든 블록의 툴바에는 두 개의 화살표 버튼이 있습니다. 이 버튼을 사용하여 블록을 한 칸씩 위아래로 이동할 수 있습니다.

• 드래그 핸들: 블록 왼쪽에 있는 6개의 점으로 이루어진 드래그 핸들을 잡고 페이지의 아무 곳에나 드래그하세요.

• 문서 개요: 상단 도구 모음에서 문서 개요 패널을 열면 모든 블록이 순서대로 나열되어 표시되며, 거기서 블록을 드래그하여 원하는 위치에 배치할 수 있습니다.

워드프레스에서 블록 삭제 및 제거하기

차단을 해제하는 데는 단 몇 초밖에 걸리지 않습니다

• 점 세 개 메뉴: 블록을 선택하고 블록 도구 모음에서 점 세 개 메뉴를 클릭한 다음 삭제를 선택합니다.

• 키보드 단축키: 블록을 선택한 다음 키보드의 백스페이스 또는 삭제 키를 누르면 즉시 제거됩니다.

• 실수 되돌리기: 실수로 삭제한 블록을 복구하려면 Windows에서는 Control Z, Mac에서는 Command Z를 누르세요.

코딩 없이 블록 사용자 지정하기

블록의 모양을 사용자 지정하는 데 코드를 알 필요가 없습니다. WordPress 편집기 화면 오른쪽에 자체 설정 패널이 있습니다.

아무 블록이나 선택하면 사이드바가 즉시 업데이트되어 해당 블록에서 변경할 수 있는 항목을 정확하게 보여줍니다.

다음은 블록 설정 패널에서 직접 제어할 수 있는 항목입니다

• 텍스트 설정: 글꼴 크기, 글꼴 두께, 줄 간격 및 자간을 콘텐츠 스타일에 맞게 변경하세요.

• 색상 옵션: 색상 선택 도구를 사용하거나 16진수 코드를 입력하여 모든 블록의 텍스트 색상과 배경 색상을 변경할 수 있습니다.

• 간격 조절: 블록 주변의 패딩과 마진을 조정하여 콘텐츠 위, 아래 및 주변의 여백 크기를 제어하세요.

• 정렬 설정: 레이아웃 요구 사항에 따라 블록을 왼쪽, 가운데, 오른쪽으로 정렬하거나 전체 너비로 설정할 수 있습니다.

• 재사용 가능한 패턴: 모든 블록 또는 블록 그룹을 재사용 가능한 패턴으로 저장하세요. 매번 다시 만들 필요 없이 여러 페이지와 게시물에서 사용할 수 있습니다.

블록 패턴과 재사용 가능한 블록 사용하기

블록 패턴과 재사용 가능한 블록은 모두 페이지 제작 시간을 절약해 주지만, 작동 방식은 다릅니다. 각각의 기능에 대해 자세히 알아보겠습니다.

블록 패턴은 WordPress.org 에서 제공하는 공식 블록 패턴 라이브러리를 통해 다양한 사전 디자인 레이아웃을 이용할 수도 있습니다 .

마음에 드는 템플릿을 골라 페이지에 추가하고, 원하는 콘텐츠로 교체하면 끝입니다. 처음부터 모든 걸 직접 만들 필요가 없어요.

재사용 가능한 블록은 이제 동기화된 패턴이라고 합니다. 이를 통해 자신만의 콘텐츠를 만들고 저장하여 사이트의 모든 블록에서 재사용할 수 있습니다.

동기화된 패턴을 저장한 후에는 어떤 페이지나 게시물에든 드롭할 수 있으며, 수정하면 해당 패턴이 나타나는 모든 곳에 자동으로 변경 사항이 적용됩니다.

행동 유도 문구, 연락처 정보 또는 반복적으로 사용하는 면책 조항 등에 적합합니다.

블록 편집기를 처음 사용하는 사람들이 흔히 저지르는 실수

대부분의 초보자는 블록 편집기를 처음 사용할 때 동일한 문제에 직면합니다. 다음 사항에 주의해야 합니다

• 블록 과다 사용: 모든 콘텐츠에 개별 블록이 필요한 것은 아닙니다. 작은 콘텐츠에 너무 많은 블록을 추가하면 페이지 관리가 어려워지고 편집 속도가 느려집니다.

• 제목 구조 무시: 많은 초보자들이 제목의 의미보다는 보기 좋게 보이도록 제목 크기를 선택합니다. 제목 레벨은 검색 엔진에 콘텐츠 구성 방식을 알려줍니다. H2에서 H4로 바로 넘어가거나 H1을 여러 번 사용하는 것은 SEO에 악영향을 미칩니다.

• 사이드바 설정을 사용하지 않는 경우: 블록 설정 패널은 대부분의 사용자 지정이 이루어지는 곳입니다. 이 패널을 사용하지 않으면 기본 제공되는 타이포그래피 제어, 색상 옵션 및 간격 설정을 활용할 수 없게 됩니다.

• 실수로 블록 배치를 망가뜨리는 경우: 드래그 핸들을 사용하여 블록을 이동하는 것은 쉽지만, 잘못된 위치에 블록을 놓으면 배치가 엉망이 될 수 있습니다. Windows에서는 Ctrl+Z, Mac에서는 Command+Z를 눌러 실행 취소하고 빠르게 복구할 수 있습니다.

결론

구텐베르크 편집기는 처음 열었을 때 다소 복잡해 보일 수 있습니다. 모든 요소가 블록 형태로 되어 있고, 인터페이스도 새롭기 때문에 기본적인 옵션을 찾는 데에도 약간의 시간이 필요합니다.

블록 작동 방식을 이해하면 페이지 제작과 콘텐츠 작성이 훨씬 빠르고 유연해집니다. 레이아웃을 제어하고, 콘텐츠를 맞춤 설정하고, 코드를 한 줄도 작성하지 않고 전체 사이트를 관리할 수 있습니다.

가장 자주 사용하는 블록부터 시작하세요. 설정 패널을 익히세요. 패턴과 재사용 가능한 블록을 활용하여 시간을 절약하세요. 편집기를 많이 사용할수록 더욱 익숙해질 것입니다.

워드프레스 블록 에디터 관련 FAQ