가독성을 높이는 블록 에디터(Gutenberg) 활용과 레이아웃 디자인

워드프레스의 기본 에디터인 '구텐베르크(Gutenberg)'는 단순한 글쓰기 도구를 넘어 강력한 디자인 툴입니다. 하지만 많은 분이 여전히 메모장처럼 텍스트만 나열하는 방식으로 글을 씁니다. 저 역시 초기에는 텍스트 위주로 작성했지만, 모바일에서 한눈에 들어오지 않는 긴 문단들이 독자들을 금방 이탈하게 만든다는 사실을 깨닫고 블록 활용법을 연구하기 시작했습니다.

애드센스 승인을 위한 전문성 있는 글은 시각적으로도 정돈되어 있어야 합니다. 구글은 사용자가 페이지에서 정보를 편하게 소비하는지(UX)를 중시하기 때문입니다. 오늘은 블록 에디터를 활용해 읽기 쉬운 '수익형 레이아웃'을 만드는 비결을 공개합니다.

1. '리스트(List)'와 '인용(Quote)' 블록으로 시선 붙잡기

벽돌처럼 꽉 찬 텍스트 문단은 독자를 숨 막히게 합니다. 핵심 요약이나 단계별 설명은 반드시 '리스트' 블록을 사용하세요. 불렛 포인트는 사용자가 정보를 스캔하는 속도를 높여줍니다.

또한, 강조하고 싶은 문장은 '인용' 블록을 활용해 시각적 변화를 주어야 합니다. 인용 블록은 자칫 단조로워질 수 있는 긴 글에서 일종의 '쉼표' 역할을 하며, 독자가 중요한 대목에서 멈춰 서게 만드는 효과가 있습니다.

2. '그룹'과 '열(Columns)' 블록으로 정보 구조화하기

서로 연관된 내용들은 '그룹' 블록으로 묶고 배경색을 살짝 지정해 보세요. 글 안에 작은 '박스'가 생기면서 정보의 위계질서가 명확해집니다.

두 가지 사례를 비교하거나 장단점을 나열할 때는 '열' 블록을 활용해 화면을 2분할 하는 것이 효과적입니다. 특히 PC 환경에서 전문적인 느낌을 주며, 반응형 설정이 잘 된 테마라면 모바일에서는 자동으로 위아래로 재배치되어 가독성을 유지해 줍니다.

3. 이미지와 텍스트의 조화: '미디어와 텍스트' 블록

사진 하나 넣고 아래에 글을 쓰는 전형적인 방식에서 벗어나 보세요. '미디어와 텍스트' 블록을 사용하면 이미지 바로 옆에 설명글을 배치할 수 있습니다.

이 방식은 잡지 같은 세련된 느낌을 줄 뿐만 아니라, 이미지가 설명하는 바를 독자가 즉각적으로 이해하도록 돕습니다. 단, 모바일에서는 이미지가 너무 작아지지 않는지 '모바일에서 스택' 옵션을 반드시 확인해야 합니다.

4. '구분선'과 '여백'의 미학

주제가 바뀔 때는 '구분선(Separator)' 블록을 적극적으로 사용하세요. 독자의 뇌에 "이제 새로운 내용이 시작된다"는 신호를 주는 것입니다.

또한 블록 사이의 간격이 너무 좁다면 '스페이서(Spacer)' 블록으로 적절한 여백을 추가하세요. 여백은 단순히 비어있는 공간이 아니라, 콘텐츠를 더 돋보이게 만들고 독자의 눈을 편안하게 만드는 디자인 요소입니다.

---

핵심 요약

• 나열식 정보는 리스트 블록으로, 강조할 문장은 인용 블록으로 시각적 리듬을 만드세요.
• 그룹 및 열 블록을 활용해 정보의 위계를 나누고 전문적인 레이아웃을 구성하세요.
• 적절한 구분선과 여백을 사용하여 주제 전환을 명확히 하고 가독성을 극대화하세요.

다음 편 예고: 디자인이 갖춰졌다면 이제 수익으로 연결할 차례입니다. 다음 편에서는 '클릭률(CTR)을 높이는 버튼 디자인과 행동 유도(CTA) 배치' 노하우를 다룹니다.

질문: 블록 에디터를 쓰면서 가장 다루기 힘들었던 블록은 무엇인가요? 혹은 더 예쁘게 꾸미고 싶은 부분이 있다면 댓글로 알려주세요!