워드프레스 글이 밋밋해 보이거나 가독성이 떨어지는 이유는 대부분 기본 CSS 설정에 있습니다. 이 글에서는 폰트, 문단 간격, 제목 구조를 한 번에 정리할 수 있는 CSS 코드를 공유드립니다.
특히 H2 소제목 디자인을 한 가지가 아닌 3가지 스타일로 나누어 제공하여, 글 분위기와 콘텐츠 성격에 맞게 선택 적용할 수 있도록 구성했습니다. 복잡한 설정 없이 그대로 복사해 적용하면 전체 글 디자인이 훨씬 정리되고 읽기 쉬운 구조로 바뀝니다. (워드프레스당 한개의 코드를 적용할수 있습니다)
폰트와 기본 타이포그래피 통일
기본 글꼴을 ‘Noto Sans KR’로 통일하고, 글자 크기와 줄 간격을 조정해 읽기 편한 구조로 맞춘 설정입니다.
문단 간격도 일정하게 유지되도록 설계되어 있어 글 전체 흐름이 자연스럽게 이어집니다.
이 부분만 적용해도 글이 훨씬 정돈된 느낌으로 바뀌기 때문에 가장 먼저 적용해보시는 것을 추천드립니다.
문단 간격과 구조 정리
본문의 p, ul, ol 요소 간격을 동일하게 맞춰 시각적인 리듬을 만들어주는 설정입니다.
글이 길어질수록 이 간격 차이가 체류시간에 영향을 주기 때문에, 단순하지만 효과가 큰 부분입니다.
특히 리스트와 문단이 섞인 글에서도 흐름이 끊기지 않도록 균형을 맞춰주는 역할을 합니다.
H2 소제목 디자인 3가지 선택 적용(3가지중 원하시는걸 적용하시면 됩니다)
소제목은 단순히 구분 역할을 넘어서, 독자의 시선을 끌고 내용을 정리해주는 핵심 요소입니다.
이번 CSS에서는 H2 스타일을 하나로 고정하지 않고, 서로 다른 3가지 디자인중에 선택해서 적용할 수 있도록 구성했습니다.
파란 그라데이션 박스 형태처럼 강조형 스타일부터, 깔끔한 라인형 스타일, 기본형 스타일까지
선택해 사용할 수 있습니다.
불필요한 요소 정리로 집중도 강화
글과 직접 관련 없는 요소들을 정리하면 독자의 시선이 분산되지 않고 본문에 집중되게 됩니다.
콘텐츠 중심 구조로 바꾸는 것만으로도 체류시간과 스크롤 깊이에 영향을 줄 수 있습니다.
과하게 꾸미기보다는 필요한 요소만 남기는 것이 오히려 더 좋은 결과로 이어지는 경우가 많습니다.
복사 적용만으로 전체 디자인 완성
이 설정의 가장 큰 장점은 별도의 수정 없이 그대로 복사해서 적용할 수 있다는 점입니다.
CSS에 익숙하지 않더라도 그대로 넣기만 하면 글 전체 스타일이 자동으로 정리됩니다.
한 번 세팅해두면 모든 글에 동일하게 적용되기 때문에, 작성 속도와 퀄리티를 동시에 잡을 수 있는 구조입니다.
지금 사용 중인 글이 만족스럽지 않다면, 한 번 적용해보는 것만으로도 체감이 달라질 수 있습니다.
아래는 컨테이너800px, H2소제목 스타일적용과 폰트, 문단간격등을 적용한 일부 캡쳐본입니다.
컨테이너 너비를 800px로 맞추는 이유
대표적인 뉴스 사이트들을 보면 본문 영역이 화면 전체를 쓰지 않고 일정 너비로 제한되어 있습니다. 이는 사용자가 긴 글을 읽을 때 눈의 이동 거리를 최소화하기 위한 설계입니다.
너비가 너무 넓어지면 한 줄에 들어가는 글자 수가 많아지고, 다음 줄로 시선을 옮길 때 피로도가 크게 증가합니다. 반대로 800px 정도로 제한하면 한 줄 길이가 적당해져 자연스럽게 읽히는 흐름이 만들어집니다.
결과적으로 독자는 덜 피로하고, 더 오래 머무르게 됩니다.
설정 : 워드프레스관리자페이지 ( 모양 - 사용자정의 - 레이아웃 - 컨테이너 )
설정후에 상단에 공개를 눌러야 적용이 됩니다
사이드바 제거 이유
사이드바를 제거한 이유는 독자가 글에만 집중하도록 만들기 위해서입니다.
사이드바가 있으면 시선이 분산되고 클릭 요소가 많아져 흐름이 끊기기 쉬운데, 이를 제거하면 화면이 단순해지면서 자연스럽게 글을 끝까지 읽게 되는 구조가 됩니다.
결과적으로 체류시간과 스크롤 깊이를 높이기 위한 구조적인 선택입니다.
설정 : 워드프레스관리자페이지 ( 모양 - 사용자정의 - 레이아웃 - 사이드바 )
아래 이미지처럼 설정후 공개버튼 클릭
CSS적용 방법
설정 : 워드프레스관리자페이지 모양 - 사용자정의 - 추가 CSS
위 이미지중 순서대로 원하는 이미지의 코드를 복사해서 기존 CSS삭제후 붙쳐넣기한 다음
공개 버튼 누르시면됩니다.
첨부파일 코드는 원하시는 것을 아래에서 위로 드레그 복사하시면 됩니다 (PDF파일입니다)
자주묻는 질문 1순위 :
글작성하는데 소제목이 적용이 안됩니다?
< 편집화면에서는 적용되지 않으며 발행시 자동으로 발행됩니다 >
모든 글에 적용할려면 어떻게 하나요?
< CSS에 적용하시면 기존에 작성되었던 글과 앞으로 발행되는 모든 글에 자동 적용이 됩니다 >
CSS코드는 첨부파일 참조하세요
주의사항 :
본 내용은 워드프레스 디자인 및 가독성 개선을 위한 참고 자료로, 현재 수업 내용과는 직접적인 관련이 없습니다.
따라서 해당 내용과 관련된 문의는 놀이터에서 자제 부탁드립니다.
CSS코드.pdf
다운로드
