블로그 글이 갑자기 정리돼 보이는 이유, 요약박스와 강조문구 직접 만들어봤습니다.

글을 쓰다 보면 내용은 충분한데 어딘가 밋밋하게 느껴질 때가 있습니다. 불가피하게 글의 내용이 장황해져 중요한 내용이 눈에 잘 들어오지 않거나, 글의 내용을 대표해주는 요소의 부재로 인해 전체적으로 정리가 덜 된 느낌이 드는 경우 말입니다.

그럴 때 어떤 도구를 사용하면 좋을까 생각하며 찾아보니 요약박스와 강조문구라는 기능이 있었습니다.
다른 블로그들을 둘러보다 보니 생각보다 많은 분들이 이 도구들을 활용하고 계셨습니다.

생각해보면, 요약박스는 핵심 키워드만 박스에 요약해주는 형태니까 앞으로 글의 내용이 길고 전문적으로 진행될수록 유용하게 쓰일 수 있을 것 같았고 강조문구는 요약박스처럼 대표성을 띠지는 않지만 글이 진행되면서 중간중간에 이목을 집중시키거나 특히 강조할 만한 내용이 있을 때 아주 효과적인 도구가 될 것으로 보였습니다. 그래서 직접 적용해보고 느낀 점을 공유해보기로 했습니다.

이번 글에서는 플러그인을 활용해 요약박스와 강조문구를 직접 만들어보면서,
초보자 기준에서 어떤 식으로 설정했고 실제로 어떻게 활용할 수 있었는지 정리해보겠습니다.


요약 박스 만들어보기

📌 핵심 요약
  • 요약박스로 글 핵심 정리
  • 가독성 상승
  • 초반 이탈 방지

먼저 요약박스가 어떤 것인가 보여드리기 위해 예시를 만들어 보았습니다.

요약 박스는 앞서 말씀드린 것과 같이, 글의 핵심을 정리해 독자들이 글을 쉽게 읽을 수 있도록 하는데 도움이 되어 보입니다. 덕분에 처음 방문한 사람도 글의 핵심을 빠르게 파악할 수 있을 것 같았습니다.

요약박스를 만드는 것은 HTML블록으로 만드는 것이 가장 쉽고 간편했습니다.

지금 보시는 요약박스는 명령어를 입력한 결과이고,
편집화면에서는 아래와 같이 보여지고, 실제로 이런 명령어들을 입력하셔야 작동합니다.

  • background = ‘배경색’을 의미합니다.
  • border = ‘테두리’를 의미합니다.
  • border-radius = ‘둥글기’를 의미합니다.

기본적으로 박스 형태를 만들기 위해 AI는 배경색과 테두리를 설정해주고, 안쪽 여백을 주는 방식으로 구성했습니다. 이런 식으로 설정하면 글 상단에 핵심 내용을 따로 정리해서 보여줄 수 있습니다.

처음에는 매번 HTML 블록에 코드를 붙여넣어 사용했습니다.
하지만 글을 여러 개 작성하다 보니 같은 코드를 반복해서 입력하는 것이 생각보다 번거롭게 느껴졌습니다.

그래서 더 편한 방법을 찾아보다가 WPCode의 단축코드 기능을 알게 되었습니다.

WPCode가 설치된 기준으로 관리자 화면에서 사용자 정의 코드 추가의 ‘새 스니펫’ 메뉴에 요약 박스 코드를 붙여넣고, 삽입 위치를 ‘단축코드’로 설정한 뒤 저장하면 됩니다.

저는 위와 같이 입력하니, wpcode id=”483″이라는 단축코드가 발급되었습니다.
이제 이 코드를 대괄호 안에 입력하니 저장해두었던 요약박스 코드가 불러와졌습니다.

[wpcode id=”123″]

(실제 작성할 때 입력방법 예시)

실제 글에서 작성 할 때는 단축코드 블록을 사용해 입력하시면 됩니다.
(글 작성화면에서는 코드가 입력된 박스 형태로 보이고 상단 미리보기 혹은 Preview 버튼을 통해서 글에서 어떻게 보일지 미리 볼 수 있습니다.)

강조 문구 (중요 문장 띄우기)

다음으로는 중요한 문장을 더 잘 보이게 하기 위해서 유용하게 쓸 수 있는 강조문구에 대해서 알아보았습니다.
글을 쓰다 보면 핵심 내용이 묻히는 경우가 많은데, 이 부분을 보완하는데 효과가 있어 보였습니다.

사용하는 방법은 특정 문장에 스타일을 적용해서 배경색이나 라인으로 구분해주는 방식이었습니다.
저의 경우에는 너무 화려하게 하기보다는 눈에 자연스럽게 들어오는 정도로 설정하는 것이 더 좋았습니다.

강조 문구도 요약 박스와 비슷하게 만들 수 있습니다.
아래처럼 문장을 더 눈에 띄게 강조해서, 글에서 중요한 부분임을 알릴 수 있습니다.

👉 이 부분이 핵심입니다. 글을 훑어봐도 눈에 들어오게 만들었습니다.

(강조 문구도 요약박스와 동일하게 WPCode에 스니펫을 추가하여 불러낼 수 있습니다.)

직접 적용해보니 글을 훑어보더라도 중요한 부분이 바로 보이기 때문에 가독성이 훨씬 좋아진 느낌을 받았습니다.

직접 적용해보니 느껴진 변화

요약 박스와 강조 문구를 함께 사용해보니 글의 전체적인 인상이 확실히 달라졌습니다.

이전에는 글이 단순히 나열된 느낌이었다면, 지금은 핵심이 정리된 글처럼 보였습니다. 특히 요약 박스는 본문과 다른 색상으로 구분되어 자연스럽게 시선을 끌었고, 글의 핵심 내용을 한눈에 파악할 수 있도록 도와주었습니다. 덕분에 독자 입장에서도 글을 훑어보기가 훨씬 편해졌습니다.

강조 문구 역시 효과가 있었습니다. 중요한 문장이 시각적으로 구분되다 보니 자연스럽게 눈길이 갔고, 긴 글을 읽는 과정에서 집중력이 흐트러지는 것을 어느 정도 줄여주는 느낌이었습니다.

전체적으로 두 기능 모두 처음 방문한 사람이 글의 핵심을 빠르게 파악할 수 있도록 도와주었고, 글의 완성도와 가독성을 높이는 데 큰 도움이 되었습니다.

마무리

처음에는 코드 설정이라는 점에서 어렵게 느껴졌지만, 직접 적용해보니 생각보다 간단하게 구현할 수 있었습니다.
예전에는 코드에 대한 지식이 필요했겠지만, 요즘은 AI를 통해 비교적 쉽게 원하는 스타일의 코드를 적용할 수 있습니다.

이처럼 이번 글에서는 요약박스와 강조문구와 같은 간단한 도구 만으로도 글의 가독성과 전달력을 크게 개선할 수 있고,
이후 다양한 방식으로 확장해서 활용할 수 있어 보인다는 점이 인상적이었습니다.

조금 더 정리된 형태의 글을 쓰고 싶다면 요약박스와 강조문구를 한번 사용해 보시는것이 어떨까요?

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤