블로그 방문자가 글을 끝까지 읽지 않고 이탈한다면, 목차 디자인을 점검해보셔야 합니다. 밋밋한 기본 목차는 클릭 욕구를 떨어뜨리고, 결국 체류시간 감소로 이어지기 때문입니다.
워드프레스 목차 디자인을 세련되게 바꾸면 방문자의 시선을 사로잡고, 원하는 정보로 빠르게 이동할 수 있어 사용자 경험이 크게 개선됩니다. 특히 Easy Table of Contents 플러그인은 CSS 커스터마이징이 자유로워 많은 블로거들이 선호하는 도구입니다.
오늘은 워드프레스 목차 디자인을 미니멀하고 깔끔한 카드 스타일로 변경하는 방법을 단계별로 안내해드리겠습니다. 복사해서 바로 적용할 수 있는 CSS 코드까지 함께 제공하니, 끝까지 읽어보시기 바랍니다.
1. Easy Table of Contents 플러그인이란
Easy Table of Contents는 워드프레스에서 가장 널리 사용되는 목차 자동 생성 플러그인입니다. 글의 제목 태그(H2, H3 등)를 자동으로 인식해 목차를 만들어주며, 2026년 기준 400만 건 이상의 활성 설치 수를 기록하고 있습니다.
기본 제공 스타일도 깔끔하지만, CSS를 추가하면 브랜드 컬러에 맞는 고유한 디자인을 구현할 수 있습니다. 별도의 코딩 지식 없이도 복사-붙여넣기만으로 적용 가능합니다.
2. 목차 디자인 변경 시 얻는 이점
SEO 측면의 이점이 가장 큽니다. 구글은 목차가 있는 페이지를 구조화된 콘텐츠로 인식해 검색 결과에서 점프 링크로 노출시켜 줍니다. 이는 클릭률(CTR) 상승으로 직결됩니다.
사용자 경험 측면에서는 체류시간 증가 효과가 있습니다. 시각적으로 매력적인 목차는 방문자가 콘텐츠 전체를 탐색하도록 유도합니다. 반대로 목차가 없거나 디자인이 조잡하면 이탈률이 높아지고, 이는 검색 순위 하락의 원인이 될 수 있습니다.
3. CSS 적용 방법 단계별 가이드
1단계: 플러그인 설치 확인 워드프레스 관리자 페이지에서 플러그인 > 설치된 플러그인으로 이동해 Easy Table of Contents가 활성화되어 있는지 확인합니다.
2단계: 추가 CSS 메뉴 접근 외모 > 사용자 정의하기 > 추가 CSS 순서로 이동합니다. 또는 외모 > 테마 파일 편집기에서 style.css 파일 하단에 추가해도 됩니다.
3단계: CSS 코드 붙여넣기 아래 미니멀 카드 스타일 CSS 전체를 복사해 붙여넣습니다.
4단계: 저장 및 확인 '공개' 버튼을 클릭한 후, 목차가 있는 게시글에서 디자인이 적용되었는지 확인합니다.
실전 팁: 적용 전 기존 CSS를 백업해두면, 문제 발생 시 빠르게 복구할 수 있습니다.
아래는 디자인 적용시 보여지는 모습입니다.
/* =====================================================
EZ-TOC : Minimal Card Final (Full Width)
- 데스크톱 / 모바일 모두 100% 폭
- 카드형 디자인 + hover 포인트
===================================================== */
#ez-toc-container.ez-toc-container-direction{
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 16px;
padding: 18px 18px 14px;
margin: 24px 0;
box-shadow: 0 14px 34px rgba(0,0,0,.07);
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
}
/* 상단 포인트 라인 */
#ez-toc-container.ez-toc-container-direction::before{
content:"";
position:absolute;
top:0; left:0; right:0;
height: 4px;
background: linear-gradient(
90deg,
rgba(30,64,175,.9),
rgba(37,99,235,.65)
);
}
/* 제목 영역 */
#ez-toc-container .ez-toc-title-container{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
margin: 4px 0 12px;
}
#ez-toc-container .ez-toc-title{
margin:0;
font-weight: 800;
font-size: 16px;
letter-spacing: -0.2px;
}
/* 토글 버튼 */
#ez-toc-container .ez-toc-title-toggle a.ez-toc-toggle{
display:inline-flex;
align-items:center;
gap: 6px;
padding: 7px 10px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(0,0,0,.02);
text-decoration:none;
transition: transform .15s ease,
box-shadow .15s ease,
background .15s ease;
}
#ez-toc-container .ez-toc-title-toggle a.ez-toc-toggle:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0,0,0,.08);
background: rgba(0,0,0,.04);
}
#ez-toc-container .ez-toc-title-toggle svg{
color:#666 !important;
fill: currentColor !important;
}
/* 리스트 */
#ez-toc-container ul.ez-toc-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap: 8px;
}
/* 링크 */
#ez-toc-container a.ez-toc-link{
display:block;
padding: 10px 12px 10px 14px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.06);
background: rgba(0,0,0,.02);
text-decoration:none;
color: inherit;
position: relative;
transition: transform .12s ease,
background .12s ease,
border-color .12s ease;
}
/* 왼쪽 포인트 바 */
#ez-toc-container a.ez-toc-link::before{
content:"";
position:absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 999px;
background: rgba(30,64,175,.55);
opacity: 0;
transition: opacity .12s ease;
}
#ez-toc-container a.ez-toc-link:hover{
transform: translateY(-1px);
background: rgba(30,64,175,.06);
border-color: rgba(30,64,175,.18);
}
#ez-toc-container a.ez-toc-link:hover::before{
opacity: 1;
}
/* 이모지 사이즈 보정 */
#ez-toc-container img.emoji{
width: 1em;
height: 1em;
vertical-align: -0.12em;
}
4. 주요 CSS 코드 상세 설명
제공된 CSS는 크게 네 가지 영역으로 구성됩니다.
| 영역 | 기능 | 주요 속성 |
| 컨테이너 | 전체 목차 박스 스타일 | border-radius: 16px, box-shadow |
| 상단 포인트 라인 | 파란색 그라데이션 강조선 | linear-gradient, height: 4px |
| 토글 버튼 | 목차 접기/펼치기 버튼 | hover 시 transform 효과 |
| 링크 스타일 | 각 목차 항목 디자인 | hover 시 배경색 변경, 좌측 포인트 바 |
핵심 포인트: border-radius: 16px와 box-shadow가 모던한 카드 느낌을 만들어주고, hover 시 translateY(-1px) 효과가 인터랙티브한 반응성을 더합니다.
5. 적용 시 주의사항과 문제 해결
테마 충돌 문제: 일부 테마는 자체 목차 스타일을 가지고 있어 CSS가 제대로 적용되지 않을 수 있습니다. 이 경우 속성 뒤에 !important를 추가하면 해결됩니다.
플러그인 업데이트 주의: 플러그인 업데이트 시 설정이 초기화될 수 있으므로, 추가 CSS는 테마 사용자 정의 영역에 저장하는 것이 안전합니다.
모바일 최적화 확인: 제공된 CSS에는 @media (max-width: 768px) 반응형 코드가 포함되어 있지만, 실제 모바일 기기에서 터치 영역이 충분한지 반드시 테스트해보시기 바랍니다.
주의: CSS 문법 오류(중괄호 누락, 세미콜론 빠짐 등)가 있으면 전체 레이아웃이 깨질 수 있으니 꼼꼼히 확인하세요.
마무리
워드프레스 목차 디자인은 작은 변화지만 블로그 전체의 완성도를 높이는 핵심 요소입니다. 오늘 소개한 미니멀 카드 스타일 CSS를 적용하면 방문자에게 전문적인 인상을 주고, 체류시간 증가와 SEO 개선이라는 실질적인 효과를 얻을 수 있습니다.
CSS 커스터마이징이 처음이라면 제공된 코드를 그대로 사용하시고, 익숙해지면 컬러값이나 여백을 조금씩 수정해 자신만의 스타일을 만들어보시기 바랍니다. 작은 디테일이 블로그의 경쟁력을 만듭니다.
본 글은 일반적인 정보 제공 목적이며, 테마나 플러그인 버전에 따라 결과가 다를 수 있습니다. 적용 전 반드시 백업을 권장드립니다.
댓글