워드프레스 블록편집기(구텐베르크)는 2018년 워드프레스 5.0 버전과 함께 처음 도입이 되었습니다. 이전의 클래식 에디트보다 다양한 기능을 제공하면서 많은 사용자들에게 호응을 받았습니다. 다양한 종류의 블록을 제공하여 텍스트, 미디어, 디자인 요소, 위젯 및 임베드 콘텐츠 등을 쉽게 추가하고 편집할 수 있도록 UI를 제공해줍니다.
이번 퍼스트를 통해 워드 프레스 블록 에디터에 대한 이용법을 확인해보고 기본적인 블록 에디터의 이용방법 과 함께 패턴을 사용하는 방법도 배워보도록 하겠습니다.
글 목차
블록에디터 선택 및 변경
워드프레스 설치 시 기본적으로 블록 에디터가 편집기로 적용이 됩니다. 하지만 다른 에디터 혹은 편집기를 이용 하게 되는 경우 사용자편집기 옵션을 통해서 원하는 편집기를 선택해 주셔야 합니다. 관리자 페이지에서 다음의 메뉴로 이동하시기 바랍니다.
관리자 설정 다시 쓰기 다시 모든 이용자의 에 대한 기본 편집기 옵션에서 현재 설치된 에디터를 확인할 수 있습니다. 사용하기 원하는 편집기를 선택하여 확인을 눌러주시기 바랍니다.
블록에디터 화면구성
블록에디터 편집화면은 다음과 같이 구성되어 있습니다.
- 제목영역
- 내용영역
- 글 : 작성중인 글의 속성을 설정하는 부분
- 블록 : 페이지에 블록을 삽입할 경우 블록의 속성을 설정하는 부분
- 블록삽입 : 페이지에 원하는 요소들을 입력할 수 있는 패널
- 공개 / 미리보기 : 글을 작성 후 공개 혹은 임시글로 저장할 수 있는 버튼
블록 편집기의 경우 위와 같이 화면이 구성되어 있습니다. 제목을 입력하고 본문 영역에는 블록 에디터에서 제공하는 다양한 요소들을 삽입할 수 있습니다 요소들을 삽입할 때에는 오 번 버튼을 클릭하여 다양한 요소들을 확인하여 필요한 요소를 삽입하시면 되겠습니다. 글을 모두 작성한 후에는 글에 카테고리 그리고 태그 특성 이미지 등을 설정하여 공개를 해주시면 되겠습니다.
블록요소 추가와 설정
페이지의 본문 영역에 블록 요소를 추가하는 방법은 다음의 순서로 하시면 되겠습니다.
- 블럭추가 버튼
- 블록 탭 : 페이지에 삽입할 수 있는 다양한 블록요소를 표시합니다.
- 패턴 탭 : 블록에디터에서 제공하는 미리 만들어진 요소를 삽입합니다.
- 미디어 : 다양한 미디어파일을 삽입하도록 합니다.
- 요소 : 요소를 선택하면 자동으로 삽입이 됩니다.
- 요소 속성 : 초기 속성을 설정할 수 있습니다.
- 블록 속성페이지 : 6 요소의 개별항목에 대한 옵션을 설정할 수 있습니다.
노동권 요금 블루베리터에서 제공하는 다양한 요소를 페이지에 삽입할 때는 블록 추가 버튼을 클릭하여 전체 요소들을 표시합니다. 버튼이나 이미지 혹은 파일 같은 다양한 요소들이 표시가 됩니다. 삽입하기 원하는 요소를 선택을 하게 되면 자동으로 삽입이 됩니다. 예를 들어 이미지를 삽입했다면 이미지가 본문에 삽입이 되며 이미지라고 하는 요소위에 설정할 수 있는 다양한 버튼들이 표시가 됩니다. 직접 컴퓨터에서 파일을 업로드 할 수도 있고요 미디어 라이브러리에서 이미 업로드된 파일을 선택할 수도 있습니다. 오른쪽에 블록탭을 확인하면 삽입된 이미지에 대해서 자세한 속성이나 정보를 확인할 수가 있습니다.
대체 텍스트나 이미지 사이즈의 와 같은 설정 내용을 확인하시고 공개 버튼을 눌러 글 작성을 완료할 수 있습니다.
에디터에서 제공하는 문단이라고 하는 요소를 삽입했습니다 문단은 텍스트의 색상 배경의 색상 폰트의 크기와 같은 텍스트를 표시할 때 지정해야 할 요소들을 설정할 수 있도록 제공하고 있습니다. 자체의 크기 경우에는 사이즈버튼을 눌러보면 직접 사용자가 픽셀단위로 번트 크기를 설정할 수도 있습니다 아래쪽의 css 클래스 항목에서는 사용자가 지정할 수 있는 클래스를 입력해서 스타일을 변경을 해줄 수도 있습니다.
패턴의 활용
블럭에디터에서 제공하는 특별한 기능 중 하나는 패턴입니다. 쉽게 설명을 하자면 어느 정도 디자인이 된 블록들의 모임이라고 보면 되겠습니다. 특성 글 텍스트 갤러리와 같은 다양한 패턴을 제공하고 있으며 그중 갤러리를 추가해 보도록 하겠습니다.
- 패턴탭 선택
- 갤러리 이동
- 원하는 갤러리 선택
- 페이지 삽입갤러리 확인
- 추가 설정완료
블록 대신 패턴 탭으로 이동하여 갤러리를 선택해 보면 블록 에디터에서 제공하는 다양한 갤러리들이 표시되게 됩니다. 여러분이 마음에 드는 하나의 갤러리를 선택을 해서 본문에 삽입을 하시면 되겠습니다. 본문에 삽입된 갤러리는 일반적으로 텍스트 그리고 이미지의 조합으로 만들어져 있습니다.
변경을 원하는 이미지는 이미지를 클릭해보면 오른쪽 속성 탭에서 다른 이미지로 변경이 가능합니다. 이미지의 변경 뿐만 아니라 이미지의 크기 그리고 대체 텍스트와 같은 다양한 설정을 진행해줄 수가 있습니다.
- 이미지 선택
- 기본속성 조정
- 블록속성 조정
- 추가플러그인 설치
목록 활용하기
블록 에디터에서 제공하는 목록이라고 하는 기능은 전체 구조를 파악하는 데 많은 도움이 됩니다. 목록 버튼을 이용해서 본문에 있는 요소들을 수정하고 편집하도록 하겠습니다.
- 목록버튼
- 목록보기 탭
- 요소선택
- 설정버튼을 통해 요소를 편집
- 요소삭제 기능
목록 보기 버튼을 클릭을 하면 현재 페이지에 표시되어 있는 모든 요소들을 확인할 수가 있습니다. 수정이나 삭제하기 원하는 하나의 요소를 선택을 하면 오른쪽에 점 세계의 버튼이 표시가 되고 해당 버튼을 표시하면 다양한 옵션들이 펼쳐지게 됩니다. 블록을 복사하는 기능이나 제거하는 기능 그리고 위치를 옮기는 설정까지 다양한 설정을 이곳에서 해주실 수가 있습니다. 요소에 대한 설정을 마치고 나서 업데이트를 눌러서 페이지 수정을 완료해 주시면 되겠습니다.
마무리
초기 버전과 달리 요즘 사용하는 블록 에디터는 다양한 편의성과 사용자 UI를 제공하고 있습니다. 무료로 제공하는 다양한 요소들과 함께 글을 작성할 수도 있고 페이지를 만들어 볼 수도 있습니다. 필요하다면 이르러 제공되는 다양한 요소들과 더 멋지고 고급스러운 홈페이지를 만들어 볼 수도 있습니다. 적절한 블록에디터의 활용으로 작업의 효율성을 높여보시기 바랍니다.
