워드프레스가 블록 편집기로 바뀐지 한참 되었지만, 아직도 모르는 기능들이 많습니다. 특히 ‘버튼 만들기’ 기능이 있다는 것은 저도 최근에서야 알았습니다. 이제까지 잘 모르는 html이나 css를 사용해 더듬더듬 만들던 것을 블록 기능을 이용해 간단하게 만들 수 있게 되었죠.
유용한 블록 편집기 기능들을 활용한 간편한 팁들을 이번 글에서 아낌없이 나눠드립니다.
이제 복잡한 코딩 없이도 클릭을 부르는 디자인이 가능합니다. 이번 글에서는 수익형 블로그 운영의 핵심인 버튼 만들기부터 가독성을 높이는 레이아웃 배치까지, 하루페이퍼의 수익을 실질적으로 높여줄 워드프레스 블록 편집기 기능의 정수 4가지 활용 팁을 정리해 드립니다. 핵심만 알면 누구나 전문 매거진 같은 포스팅을 완성할 수 있습니다.
1. 블록 block 활용하기
구텐베르크 편집기를 열어봅시다. 블록을 추가하는 + 단추가 왼쪽에서 오른쪽으로 이동하며 더욱 직관적으로 변했습니다.
가. 소셜 아이콘
본문 내에 소셜 미디어 아이콘을 추가할 수 있습니다. 이를 통해 독자들이 포스팅을 공유하거나 SNS로 유입되도록 유도하여 더욱 적극적으로 참여하는 글을 작성할 수 있습니다.
1) 블록 추가
블록 추가 + 단추를 누르면, 아래 스크린샷 이미지처럼 ‘위젯’ 메뉴가 나옵니다. 이것을 선택하세요.
- 경로: 블록 추가 > 단추 > 위젯
2) Social Icons
Social Icons 항목을 클릭 합니다.
3) 소셜 아이콘 블록 설정
그러고 나면, 소셜 아이콘 블록이 놓이게 됩니다. 아이콘 위의 작은 화살표로 위치를 이동시킬 수 있으며, 원하지 않는 아이콘은 오른쪽 세 점 메뉴를 눌러 삭제하면 됩니다. 아이콘을 탭하면 연결할 링크 주소를 넣는 창이 바로 나타납니다.
나. 단추 만들기
블록 메뉴에서 ‘Buttons’를 선택해 전문적인 단추를 만들 수 있습니다. 블록을 선택한 다음 검색창에 입력해 찾을 수도 있고, 글씨와 배경 색을 브랜드 이미지에 맞춰 자유롭게 지정할 수 있습니다.
활용 예시: 위와 같이 만든 단추를 누르면 특정 페이지로 바로 연결되어 독자의 행동을 이끌어냅니다.
디자인 팁: 선택한 색상 조합이 가독성이 떨어질 경우, 오른쪽 사이드바에 적절한 대비를 추천하는 정보창이 떠서 초보자도 실패 없는 디자인이 가능합니다.
위와 같이 단추를 만들어 보았습니다.
단추를 눌러보세요. wpbeginner.com 해당 페이지로 바로 연결됩니다.
다. 텍스트 색깔 옵션
워드프레스에서도 제목과 본문 텍스트에 색깔을 입힐 수 있게 되었습니다. 글씨에 색을 넣기 원했던 분들은 이번 업데이트로 한결 편하게 작업할 수 있게 되었습니다.
텍스트 색상은 선택할 수 있지만, 블록의 바탕색은 아쉽게도 아직 지정할 수 없습니다. 하지만 블록>커버로 들어가서 적당히 조정하면 아래와 같이 비슷한 효과는 볼 수 있습니다.
팁: 블록 전체 배경색 지정이 아직 아쉽다면, ‘커버 블록’을 활용해 보세요. 배경 이미지를 단색처럼 활용하면 블록 바탕색을 지정한 것과 비슷한 시각적 효과를 볼 수 있습니다.
커버 블록으로 블록 바탕색 지정 효과내기
라. 미디어 및 텍스트 레이아웃
‘레이아웃 요소 > 미디어 및 텍스트’ 메뉴를 활용해 보세요. 이미지와 설명을 나란히 배치하여 전문 잡지 같은 구성을 만들 수 있습니다. 배치 형태도 옵션에 따라 다양하게 조절이 가능합니다.
여러 가지 미디어와 텍스트를 함께 나타낼 수 있습니다.
배치 형태도 옵션에 따라 다르게 가능하고, 그 외에도 블록 종류가 상당히 다양해진 것을 볼 수 있었습니다.
2. 깔끔한 UI, 쉬워진 탭
편집기 로딩이 14%, 타이핑 시간은 51% 빨라졌습니다. 기존의 번거로운 ‘팁’ 창 대신 깔끔한 ‘웰컴 가이드’가 생겨 필요할 때마다 도움을 받을 수 있습니다. 현재 내가 편집 모드인지 탐색 모드인지도 슬쩍 보기만 해도 알 수 있을 만큼 직관적입니다.
마치며: 수익형 블로그를 위한 실전 적용
이번 글에서는 버튼 만들기, 소셜 아이콘, 텍스트 색상 설정 같은 실무적인 워드프레스 블록 편집기 기능을 담아 보았습니다. 제 경험을 바탕으로 정리했기 때문에 워드프레스 초보자도 바로 따라할 수 있을 것이라 생각합니다. 글을 더 보기 좋게 만드는 실전 팁도 함께 담았으니, 꼭 한번 적용해 보세요.
사실 이런 변화는 단순한 업데이트를 넘어 블록 편집기 기능 자체가 매우 강력해졌음을 의미합니다. 클래식 편집기나 마크다운에 익숙하신 분들은 체감이 덜할 수 있지만, 구텐베르크를 적극적으로 활용하면 포스팅 속도와 퀄리티가 확실히 달라집니다.
저 역시 외부 에디터인 타이포라(Typora)에서 초안을 작성한 뒤 워드프레스로 옮겨오는 방식을 고수하고 있어 모든 기능을 다 쓰지는 않습니다. 하지만 클릭을 부르는 버튼이나 독자와 소통하는 소셜 아이콘만큼은 블록 기능을 활용해 완성도를 높이고 있습니다. 사소해 보이지만 이런 디테일이 모여 수익을 만드는 차이를 만들어냅니다.
마지막으로, 글의 완성도를 결정짓는 숨은 공신은 텍스트 정렬입니다. 특히 양쪽 정렬은 모바일과 PC 모두에서 텍스트를 훨씬 정돈되어 보이게 하므로 꼭 설정해 보시길 권장합니다. 하지만, 워드프레스 블록 편집기에는 좌측, 우측, 가운데 정렬 방법만 있을뿐, 양쪽 정렬 방법은 빠져있죠. 양쪽 정렬 실제 적용 방법은 아래 제 경험을 정리한 글에서 확인해 보세요.
쿠팡파트너스 및 네이버 브랜드 커넥트 활동으로, 판매 발생 시 수수료를 제공받습니다.
“Harupaper의 새로운 이야기를 가장 먼저 만나보세요”
구독하시면 새 글을 빠르고 편하게 받아보실 수 있습니다.