나만의 홈페이지 만들기 - 블록 에디터 활용법

블록 에디터는 노션의 블록 쌓기처럼 사용자가 콘텐츠를 블록 단위로 구성하고 편집할 수 있는 접근 방식을 말합니다. 이러한 편집기를 이용해서 텍스트, 이미지, 영상, 숏코드 등을 자유자재로 삽입할 수 있으며, 복잡한 코딩 작업 없이도 직관적인 웹사이트를 만들 수 있게 합니다.

이번 포스팅에서는 블록 에디터의 기본 개념과 활용법을 소개하며, 향후 여러분이 홈페이지든 콘텐츠를 만들어야 할 때 워드프레스를 가지고 쉽게 할 수 있는 방법을 안내하고자 합니다. 

블록 에디터란 무엇일까?

워드프레스 블록 에디터는 2018년 12월 워드프레스 5.0 버전에서부터 도입된 새로운 콘텐츠 편집 도구라고 할 수 있습니다. 기존에 클래식 에디터가 하던 역할인 콘텐츠 편집을 전적으로 대체하면서, 워드프레스 기본 에디터로 설정되었습니다.

블록 에디터는 워드프레스 페이지나 글 편집창에 들어온 상태에서 /만 누르면 다양한 블록이 제공되며, 그 종류는 크게 6가지로 나뉩니다.

- 텍스트 블록 : 문단, 제목, 인용구

- 미디어 블록 : 이미지, 갤러리, 비디오, 오디오

- 디자인 블록 : 버튼, 칼럼, 구분선

- 위젯 블록 : 최신 글, 카테고리 목록, 검색창

- 테마 블록 : 사이트 로고, 제목, 내비게이션

- 임베디드 블록 : 유튜브, 숏코드, 트위터등

이런 다양한 종류의 블록을 활용해서 홈페이지 디자인을 할 수 있게 됩니다.  

블록 에디터 활용법

블록 에디터는 기본적으로 하나의 블록을 계속 쌓아가는 것이라고 말했습니다. 그건 노션이랑 전혀 다르지 않습니다. 

1. 사용하는 블록 확인하기

먼저 블록 에디터를 사용하기 전에 왼쪽의 계단 모양을 클릭해서 현재 내가 사용하는 블록이 어떤 것인지 확인하는 습관을 가지는 것이 좋습니다. 이는 포토샵이나 피그마를 사용할 때 현재 내가 쌓아가는 블록의 레이어가 무엇인지 확인하는 것과 비슷합니다.

2. 블록은 항상 2방향으로 쌓는다.

블록은 크게 2가지 방식으로 쌓을 수 있습니다. 하나는 내부적으로 쌓고요. 다른 하나는 외부적으로 쌓을 수 있습니다. 홈페이지를 보다 보면 스크롤을 내릴 때마다 색상이나 이미지를 달리해서 섹션이 구분되어지는 것을 볼 수 있습니다. 이는 홈페이지라는 전체적인 레이아웃을 구성할 때 섹션을 통해서 이를 구분 짓는다고 볼 수 있어요.

여기서 이 섹션을 만다는 것이 바로 내부적으로 콘텐츠를 쌓는다고 볼 수 있어요. 이럴 때는 주로 칼럼을 이용하는 편입니다. 칼럼 같은 경우는 내부에다가 글이나 콘텐츠를 구분 지을 수 있습니다. 일반적으로 흔히들 봤을 카드 레이아웃이 바로 칼럼에 따라서 해당한다고 볼 수 있어요. 

칼럼 안에는 안에 넣어야 할 콘텐츠를 넣고, 칼럼 밖에는 다시 경계를 나누는 칼럼을 만드는 것을 확인할 수 있어요.

3. 구텐베르크 에드온을 활용하자

워드프레스의 가장 큰 장점은 확장성이라고 봅니다. 이 말은 워드프레스 자체적으로 부족한 기능이나 커스터마이징을 플러그인이나 커스터 마이징을 통해서 개선시킬 수 있습니다. 특히 구텐베르크 에디터는 있을 블록은 다 있지만, 디테일하게 설정하기에는 까다로운 점이 많습니다. 홈페이지에 넣었던 블록들을 내 입맛대로 커스터마이징 하기에는 여간 까다롭기 때문입니다.

이럴 때 구텐베르크 에드온 블록인 케이던스, 제너레이트프레스, 스펙트라의 도움을 받습니다. 특히 워드프레스로 홈페이지를 전문적으로 해보고 싶다면 애드온 블록을 쓰는 것을 강력하게 권해드리는 바입니다. 기능은 많지만, 사용하는데 손이 가지 않는 구텐베르크를 능숙하게 사용할 수 있습니다.

그러면 왜 블록 에디터를 쓸까?

워드프레스 홈페이지 제작 하다 보면 제일 많이 듣는 용어는 바로 엘리멘터입니다. 엘리멘터는 아시는 분은 아시겠지만, 가장 강력한 페이지 빌더 플러그인입니다. 이 플러그인을 설치하면, 쉽게 드래그 앤 드롭방식처럼 원하는 블록을 자유자재로 가져다가 쓸 수 있습니다. 하지만 이 플러그인을 쓰면 문제가 있습니다. 홈페이지 제작 및 관리 경험이 일관적이지 않습니다.

왜냐하면 엘리멘터는 워드프레스 자체에 내장된 것이 아니라 별도의 페이지 빌더이기 때문에 별도로 로딩을 해야 합니다. 특히 글 같은 경우는 블로그 포스팅 영역이다 보니 구텐베르크 에디터로 한다고 해도, 반복되지 않는 html을 제작하는 페이지 같은 경우는 엘리멘터로 수시로 작업해야 합니다. 이거 할 때, 이거하고 저거 할 때는 저거 하는 것은 초보자 입장에서는 굉장히 까다롭고 성가실 수밖에 없습니다.

게다가 페이지 편집창을 번거롭지만 수시로 열어야 하고, 별도로 편집창을 점유하는 만큼 많은 코드를 잡아먹습니다. 그래서 홈페이지 제작 및 편집을 일관적으로 할 수 있는 블록 에디터를 추천하는 바입니다.

홈페이지 제작은 원하는 목적의 사이트 제작도 중요하지만, 향후 관리자가 문제없이 홈페이지 내부의 콘텐츠를 잘 수정하고 관리하는 것에 있다고 합니다. 자체 개발이 아니라 워드프레스 활용한다면,  블록 방식으로 직관적으로 콘텐츠를 업로드할 수 있고, 페이지도 스스로 수정 및 관리할 수 있는 블록 에디터 방식은 절대적으로 고려해야 한다고 봅니다.