블로그꾸미기 초보자가 바로 손대면 좋은 세팅 방법
처음 손댈 곳은 디자인보다 읽는 흐름입니다
얼마 전 오래된 PC 오류 해결 글을 다시 고치다가 느낀 건데, 블로그꾸미기는 예쁜 스킨을 고르는 일보다 글을 읽는 사람이 어디서 멈추는지 확인하는 쪽에 가깝습니다. 조립PC도 RGB 팬을 먼저 고르면 나중에 케이블 정리와 흡기 흐름에서 꼬이듯이, 블로그도 배경색이나 폰트만 먼저 만지면 정작 글이 안 읽히는 경우가 많습니다.
저는 블로그를 세팅할 때 먼저 본문 폭을 봅니다. PC 화면 기준으로 본문 가로폭이 680~760px 정도면 기술 글을 읽기에 편한 편입니다. 너무 넓으면 한 줄이 길어져서 눈이 지치고, 너무 좁으면 줄바꿈이 많아서 설명 흐름이 끊깁니다. 특히 윈도우 오류 코드나 BIOS 설정값처럼 숫자와 영문이 섞이는 글은 본문 폭 차이가 체감됩니다.
모바일에서는 더 단순하게 봅니다. 좌우 여백이 16px 안팎으로 확보되어 있고, 본문 글자 크기가 16px 이하로 내려가지 않으면 대체로 무난합니다. 14px로 빽빽하게 넣은 글은 정보가 많아 보여도 실제로는 이탈이 빨라집니다. 방문자는 참고서 보러 온 게 아니라 문제를 해결하러 들어온 사람이니까요.
블로그꾸미기에서 폰트와 색상은 과하게 만지지 않는 게 낫습니다
PC 세팅할 때도 드라이버를 이것저것 깔다가 오히려 충돌을 만드는 경우가 있습니다. 블로그꾸미기도 비슷합니다. 폰트, 색상, 강조 박스, 버튼을 한 번에 많이 바꾸면 꾸민 느낌은 나지만 글의 우선순위가 흐려집니다.
본문 폰트는 기본 시스템 폰트나 가독성 좋은 웹폰트 하나면 충분합니다. 제목은 조금 굵게, 본문은 보통 굵기로 두는 정도가 안정적입니다. 줄간격은 1.65~1.8 사이가 읽기 편했습니다. 하드웨어 리뷰처럼 표와 숫자가 많은 글은 줄간격을 너무 넓히면 정보 밀도가 떨어지고, 오류 해결 글처럼 순서를 따라가야 하는 글은 너무 좁으면 단계가 뭉쳐 보입니다.
색상은 3개 정도로 제한하는 편이 좋습니다. 본문 글자색, 링크색, 강조색입니다. 예를 들어 본문은 거의 검정에 가까운 진회색, 링크는 파란 계열, 경고나 체크 포인트는 붉은색이나 노란색 계열을 아주 조금만 쓰는 식입니다. 모든 문장을 형광펜처럼 칠하면 중요한 문장이 사라집니다.
- 본문 글자 크기: 16~18px 권장
- 본문 폭: 데스크톱 기준 680~760px 정도
- 줄간격: 1.65~1.8 사이
- 강조색: 1~2개만 사용
- 배경색: 완전한 흰색 또는 아주 옅은 회색
사이드바와 메뉴는 적을수록 체감 속도가 좋아집니다
블로그 첫 화면을 보면 사이드바에 카테고리, 인기글, 최근글, 광고, 프로필, 검색창, 배너가 전부 들어간 경우가 많습니다. 그런데 실제 방문자는 대부분 검색으로 특정 글에 바로 들어옵니다. 특히 윈도우 업데이트 오류나 그래픽카드 드라이버 문제를 검색한 사람은 사이드바 구경을 하러 온 게 아닙니다.
저라면 사이드바에는 꼭 필요한 것만 남깁니다. 검색창, 카테고리, 최근 글 정도면 충분합니다. 인기글은 블로그 성격에 따라 도움이 되지만, 너무 많은 썸네일을 붙이면 페이지가 무거워집니다. 이미지가 10장 이상 불필요하게 로드되면 모바일 LTE 환경에서 체감 차이가 납니다.
메뉴 이름도 짧아야 합니다. 예를 들어 “윈도우 오류 해결”, “조립PC”, “부품 선택”, “최적화”처럼 바로 이해되는 이름이 좋습니다. “IT 이야기”, “정보 창고” 같은 이름은 운영자는 익숙하지만 처음 들어온 사람에게는 목적지가 흐릿합니다.
썸네일은 예쁜 것보다 내용을 예상할 수 있어야 합니다
블로그꾸미기에서 썸네일을 빼놓기 어렵습니다. 그런데 썸네일을 너무 카드뉴스처럼 만들면 본문과 따로 노는 경우가 생깁니다. PC 관련 블로그라면 실제 부품 사진, BIOS 화면, 오류 메시지 캡처, 작업 전후 비교 이미지가 훨씬 강합니다. 방문자는 멋진 이미지를 누르는 게 아니라 자기 문제와 비슷한 화면을 찾습니다.
썸네일에 글자를 넣는다면 6~10자 정도가 적당합니다. “윈도우 부팅 오류”, “SSD 인식 안됨”, “CPU 온도 잡기”처럼 짧게 가는 편이 모바일 목록에서 잘 보입니다. 글자를 너무 많이 넣으면 작은 화면에서 뭉개지고, 결국 이미지도 글자도 애매해집니다.
이미지 용량도 체크해야 합니다. 1920px 원본 사진을 그대로 올리면 품질은 좋아 보여도 페이지가 느려질 수 있습니다. 본문용 이미지는 긴 쪽 기준 1000~1400px 정도로 줄이고, JPG 품질을 75~85% 정도로 맞추면 대체로 충분합니다. 캡처 이미지는 PNG가 선명하지만 용량이 커질 수 있으니, 단순 화면이면 WebP도 괜찮습니다.
방문자가 다음 행동을 하기 쉽게 만드는 세팅
블로그를 꾸밀 때 놓치기 쉬운 부분이 글 아래 영역입니다. 글을 다 읽은 사람이 바로 닫아버릴 수도 있지만, 비슷한 문제를 더 찾아볼 수도 있습니다. 이때 관련 글 목록이 제대로 붙어 있으면 체류 시간이 자연스럽게 늘어납니다.
관련 글은 같은 카테고리 안에서 3~5개 정도만 보여주는 게 좋습니다. 너무 많이 보여주면 선택 피로가 생깁니다. 예를 들어 “윈도우 11 설치 중 드라이브가 안 보일 때” 글 아래에는 “인텔 RST 드라이버 넣는 방법”, “BIOS에서 VMD 끄는 위치”, “USB 설치 디스크 다시 만드는 방법” 같은 글이 붙는 식입니다. 이런 연결은 꾸미기라기보다 사용성을 맞추는 작업입니다.
광고 위치도 중요합니다. 본문 첫 문단 위에 큰 광고가 먼저 나오면 방문자는 답을 보기 전에 한 번 막힙니다. 정보성 블로그에서는 첫 화면에 제목과 첫 문단이 보여야 신뢰가 생깁니다. 광고를 넣더라도 첫 문단 이후, 중간 소제목 사이, 글 하단처럼 흐름을 덜 끊는 위치가 낫습니다.
체크할 때는 실제 기기로 보는 게 가장 빠릅니다
관리자 화면에서 보기 좋은 블로그가 실제 휴대폰에서 보기 좋은 블로그와 꼭 같지는 않습니다. 저는 새 스킨을 적용하거나 CSS를 만진 뒤에는 데스크톱 크롬, 13인치 노트북, 스마트폰 화면으로 한 번씩 봅니다. 특히 제목 줄바꿈, 버튼 크기, 광고가 본문을 밀어내는지, 표가 옆으로 튀어나가는지를 봅니다.
블로그꾸미기는 한 번에 완성하는 작업이 아닙니다. 조립PC 선정리도 처음 조립할 때보다 몇 번 부품을 바꿔보면서 더 깔끔해지듯이, 블로그도 글이 쌓인 뒤에 손봐야 보이는 문제가 있습니다. 처음에는 본문 가독성, 모바일 화면, 메뉴 구조, 이미지 용량 이 네 가지만 잡아도 체감이 꽤 큽니다. 예쁜 장식은 그다음에 붙여도 늦지 않습니다.
