워드프레스를 막상 하려고 하면 생각보다 어렵습니다. 알아야 할 게 너무 많기 때문입니다. 플러그인, 테마, 관리, 콘텐츠, seo 등으로 분야도 다양합니다. 플러그인은 어떤걸 써야하고, 전부다 영어인데, 어떻게 사용해야 하는지 말이죠. 그런데 걱정하지 마세요. 간단한 워드프레스 홈페이지 제작 정도는 쉽게 할 수 있어요. 영어 위주이고 낯설어서 복잡하고 어려울 뿐이지, 사실 노션처럼 차곡차곡 블록 쌓듯이 쉽게 만들 수 있습니다. 거짓말 같다고요? 진짜입니다.
이번 포스팅에서는 워드프레스 홈페이지 제작하기에 앞서서 블록 기반의 직관적인 편집 방식에 대해서 한 번 알아보려고 합니다.
노션의 블록 방식
노션은 사용자에게 직관적인 블록 기반의 편집 환경을 제공합니다. 각 블록은 텍스트, 이미지, 표 등 다양한 형태로 구성되어, 사용자가 원하는 대로 자유롭게 블록을 배치할 수 있습니다. 이러한 방식을 통해 굳이 레이아웃을 고민하지 않고도 필요한 콘텐츠를 쉽게 채워 넣을 수 있습니다. 대표적인 예로는 노션 템플릿을 들 수 있습니다.
게다가 사용자는 `/`나 검색을 통해 원하는 블록을 바로 불러올 수 있고, 불러온 블록을 드래그 앤 드롭 방식으로 이동하거나 삭제할 수 있습니다. 그래서 원하는 결과물을 빠르게 만들 수 있습니다. 이렇게 직관적으로 블록을 쌓는 방식이 바로 워드프레스에서도 동일하게 적용된다는 점을 강조하고 싶습니다.
워드프레스의 블록 에디터란?
워드프레스 홈페이지 제작을 할 때는 두 가지 모드가 병행되었습니다. 정적인 HTML 기반의 웹페이지를 제작할 때는 엘리멘터나 디비 같은 페이지 빌더를 사용했으며, 반면 콘텐츠를 발행할 때는 워드프레스가 제공하는 기본 편집기를 사용했습니다.
하지만 워드프레스 버전이 5.0 이상으로 넘어가면서 최근에는 구텐베르크 기반의 블록 에디터를 사용하고 있습니다. 게다가 엘리멘터 점유율도 점점 떨어지고 있습니다.사용자는 콘텐츠든 페이지든 상관없이 블록 단위로 편리하게 편집할 수 있게 된 것이죠. 기존의 고전 편집기는 답답한 화면에 네이버 카페처럼 정해진 위젯들만 골라서 사용했다면, 구텐베르크 에디터는 콘텐츠를 자유롭게 조합하여 넣을 수 있습니다.
문서 작성뿐만 아니라 웹사이트 디자인 관련 블록도 있으며, 게다가 설치한 플러그인에서 가져오는 블록도 모두 불러올 수 있습니다. (워드프레스 자체가 구텐베르크 기반이기 때문입니다.) 또한, 내가 만든 숏코드도 쉽게 불러올 수 있습니다.
물론 처음에는 노션처럼 학습 곡선이 있어서 자유자재로 다루기는 어렵지만, 익숙해지면 더욱 효율적으로 콘텐츠를 만들고 관리할 수 있습니다. 기술적인 지식이나 코딩에 대한 지식 없이도 누구나 개인 웹사이트를 쉽게 만드는 시대가 도래한 것입니다.
하지만 워드프레스 버전이 5.0 이상으로 넘어가면서 최근에는 구텐베르크 기반의 블록 에디터를 사용하고 있습니다. 게다가 엘리멘터 점유율도 점점 떨어지고 있습니다.사용자는 콘텐츠든 페이지든 상관없이 블록 단위로 편리하게 편집할 수 있게 된 것이죠. 기존의 고전 편집기는 답답한 화면에 네이버 카페처럼 정해진 위젯들만 골라서 사용했다면, 구텐베르크 에디터는 콘텐츠를 자유롭게 조합하여 넣을 수 있습니다.
문서 작성뿐만 아니라 웹사이트 디자인 관련 블록도 있으며, 게다가 설치한 플러그인에서 가져오는 블록도 모두 불러올 수 있습니다. (워드프레스 자체가 구텐베르크 기반이기 때문입니다.) 또한, 내가 만든 숏코드도 쉽게 불러올 수 있습니다.
물론 처음에는 노션처럼 학습 곡선이 있어서 자유자재로 다루기는 어렵지만, 익숙해지면 더욱 효율적으로 콘텐츠를 만들고 관리할 수 있습니다. 기술적인 지식이나 코딩에 대한 지식 없이도 누구나 개인 웹사이트를 쉽게 만드는 시대가 도래한 것입니다.
블록 에디터의 주요 기능
블록 에디터가 제공하는 다양한 기능에 대해 말씀드리겠습니다.
1. 드래그앤 드롭 방식
블록 에디터의 가장 큰 장점 중 하나는 드래그앤 드롭 방식입니다. 사용자는 블록을 원하는 위치로 손쉽게 이동할 수 있어 레이아웃 조정이 직관적입니다. 예를 들어, 1로우에서 2컬럼을 사용하거나, 1컬럼을 선택한 후 그 아래에 이미지나 텍스트 블록을 자유롭게 추가할 수 있습니다.
2. 다양한 블록 옵션 제공
블록 에디터는 노션이 제공하는 블록처럼, 기본적으로 텍스트, 이미지, 비디오, 버튼 등 다양한 형태의 블록을 제공합니다. 이러한 다양한 옵션 덕분에 콘텐츠를 구성하는 데 있어 더 많은 선택의 자유를 누릴 수 있습니다.
3. 스타일링 옵션 제공
각 블록에 대해 스타일을 쉽게 조정할 수 있어 디자인을 개선할 수 있습니다. 예를 들어, 버튼의 색상 변경, 크기 조절, 썸네일에 그림자 효과를 추가하는 등의 작업이 가능합니다. 이를 통해 보다 매력적이고 시각적으로 돋보이는 콘텐츠를 만들 수 있습니다.
워드프레스 홈페이지 제작 = 블록 쌓기
홈페이지 제작은 결국 노션처럼 블록을 쌓는 작업이라고 볼 수 있습니다. 노션은 텍스트, 테이블, 파일, 링크 등을 이용해 나만의 빈 공간을 개인의 관점으로 채울 수 있습니다. 마찬가지로, 워드프레스에서도 제공하는 블록을 활용하여 차곡차곡 쌓아 섹션과 레이아웃을 구성할 수 있습니다. 여기에 스토리보드와 카피라이팅을 추가하면 멋진 랜딩 페이지나 홈페이지가 완성됩니다.
모든 작업은 단순하게 진행해야 한다고 생각합니다. 컨셉이나 기획에 따라 세부적인 수정이나 커스터마이징이 필요할 뿐, 본질을 구성하는 토대는 동일하기 때문입니다. 너무 깊게 하나씩 파고들기보다는, 워드프레스라는 도구에 친숙해지는 것이 더 중요하다고 봅니다. 그래서 아직 답답함을 느끼실 수도 있지만, 저는 최대한 천천히 시리즈를 연재하며 함께 나아가려고 합니다.
