초보자를 위한 블로그꾸미기 방법, 예쁜 것보다 읽기 편하게 만드는 순서
처음 블로그꾸미기를 할 때 가장 많이 놓치는 것
얼마 전 지인 블로그를 같이 손봤는데, 스킨은 예쁜데 글을 읽기가 꽤 힘들었다. 배경색은 화려하고 위젯도 많았지만 제목, 본문, 버튼, 메뉴가 서로 따로 노는 느낌이었다. 사실 블로그꾸미기는 예쁜 이미지를 많이 넣는 작업이라기보다 방문자가 글을 덜 피곤하게 읽도록 길을 만들어 주는 작업에 가깝다.
특히 처음에는 상단 배너, 프로필, 카테고리, 사이드바, 폰트까지 한 번에 바꾸고 싶어진다. 그런데 한꺼번에 건드리면 어디서 불편해졌는지 찾기 어렵다. 저는 보통 글 본문부터 보고, 그다음 메뉴, 장식 요소를 만진다. 방문자가 실제로 오래 머무는 곳은 결국 글 화면이기 때문이다.
블로그 첫 화면보다 중요한 건 글 상세 화면이다. 검색으로 들어오는 사람은 대부분 홈이 아니라 특정 글로 바로 들어온다. 그래서 블로그꾸미기를 시작할 때는 내 글 하나를 열어 놓고 제목 크기, 본문 폭, 줄 간격, 광고 위치, 관련 글 영역을 먼저 확인하는 게 훨씬 실용적이다.
글이 편해 보이는 기본 설정부터 맞추기
가장 먼저 볼 건 본문 폭이다. PC 화면에서 한 줄이 너무 길면 눈이 좌우로 크게 움직여야 해서 피로하다. 보통 본문 영역은 680~820px 정도가 읽기 편하다. 모바일에서는 좌우 여백이 너무 좁지 않은지도 봐야 한다. 화면 끝에 글자가 붙어 있으면 아무리 좋은 내용이어도 답답해 보인다.
폰트는 개성보다 가독성이 먼저다. 제목은 조금 굵게, 본문은 너무 얇지 않게 설정하는 편이 안정적이다. 본문 글자 크기는 16px 안팎, 줄 간격은 1.6 전후가 무난하다. 근데 블로그마다 스킨 구조가 달라서 숫자만 믿으면 안 된다. 실제 글을 열고 3분 정도 읽어 보면 답이 빠르게 나온다.
- 본문 글자가 작아 보이면 15px 이하인지 확인
- 줄이 빽빽하면 line-height 값을 1.5~1.8 사이로 조정
- 문단 사이가 붙어 있으면 p 태그 아래 여백 추가
- 강조 색은 1~2개만 사용
색상도 중요하다. 검정 글자와 흰 배경만 고집할 필요는 없지만, 본문 배경과 글자색의 대비는 충분해야 한다. 연회색 글자는 화면에서는 세련돼 보여도 오래 읽으면 흐릿하다. 저는 본문 글자색을 완전 검정보다는 살짝 부드러운 #222나 #333 정도로 두는 편이다.
메뉴와 카테고리는 적을수록 찾기 쉽다
블로그꾸미기를 하다 보면 메뉴를 많이 만들고 싶어진다. 그런데 방문자는 생각보다 오래 찾지 않는다. 상단 메뉴가 8개, 사이드바 카테고리가 20개쯤 되면 오히려 어디를 눌러야 할지 애매해진다. 블로그가 파일 변환, 압축, 문서 양식, 무료 자료처럼 실용 정보 중심이라면 큰 묶음 4~6개 정도가 적당하다.
예를 들어 디지털 잡무 블로그라면 메뉴를 이렇게 나눌 수 있다. 파일 변환, PDF, 압축 프로그램, 문서 양식, 무료 도구, 문제 해결. 이렇게 나누면 처음 온 사람도 내가 뭘 다루는 블로그인지 바로 알 수 있다. 이름은 짧게 쓰는 게 좋다. ‘무료로 쓸 수 있는 유용한 사이트 모음’보다 ‘무료 도구’가 메뉴에서는 훨씬 잘 읽힌다.
사이드바에는 꼭 필요한 것만 남기는 게 낫다. 최근 글, 인기 글, 카테고리 정도면 충분한 경우가 많다. 방문자 수 위젯, 배너, 긴 프로필, 여러 개의 외부 링크가 한꺼번에 있으면 본문보다 옆이 더 시끄러워진다. 솔직히 블로그를 오래 운영할수록 빼는 작업이 더 중요해진다.
이미지와 버튼은 목적이 있을 때만 쓰기
이미지는 블로그 분위기를 만드는 데 좋지만, 아무 이미지나 많이 넣으면 페이지가 느려진다. 특히 캡처 화면이 많은 글은 용량이 금방 커진다. 저는 캡처 이미지를 올릴 때 가로 1200px을 넘지 않게 줄이고, JPG나 WebP로 저장한다. 파일 하나가 1MB를 넘으면 모바일에서 체감 속도가 떨어질 수 있다.
버튼도 마찬가지다. 다운로드, 공식 사이트 이동, 관련 글 이동처럼 행동이 분명할 때만 버튼으로 만드는 게 좋다. 모든 링크를 버튼처럼 만들면 어떤 게 중요한지 흐려진다. 버튼 색은 블로그 전체에서 하나로 맞추고, 위험한 느낌의 빨간색은 삭제나 경고 같은 상황에만 쓰는 편이 자연스럽다.
- 공식 사이트 링크는 버튼으로 강조
- 본문 안 설명 링크는 일반 텍스트 링크로 유지
- 버튼 문구는 “다운로드”보다 “공식 사이트에서 받기”처럼 구체적으로 작성
- 이미지는 올리기 전 용량을 줄인 뒤 업로드
블로그꾸미기에서 은근히 효과가 큰 건 썸네일 통일감이다. 모든 썸네일을 완전히 똑같이 만들 필요는 없지만, 제목 위치와 배경 톤 정도는 맞추면 목록 화면이 훨씬 안정적으로 보인다. Canva 같은 무료 도구에서 1개 템플릿을 만들어 두고 글마다 제목만 바꿔 쓰면 시간이 많이 줄어든다.
무료 도구로 충분히 손볼 수 있는 부분
유료 스킨이나 고급 플러그인을 쓰면 편한 부분도 있지만, 처음부터 돈을 쓸 필요는 별로 없다. 기본 스킨의 CSS만 조금 바꿔도 꽤 달라진다. 제목 크기, 본문 폭, 문단 간격, 링크 색, 버튼 모양 정도는 대부분 무료로 조정할 수 있다. 티스토리라면 스킨 편집에서 CSS를 수정하고, 네이버 블로그라면 제공되는 레이아웃과 위젯 설정을 먼저 만져 보는 식이다.
캡처는 윈도우 기본 캡처 도구나 macOS 스크린샷 기능이면 충분하다. 이미지 압축은 Squoosh, TinyPNG 같은 무료 웹 도구가 편하다. 색 조합은 Coolors 같은 사이트에서 참고할 수 있지만, 블로그 전체에 색을 너무 많이 쓰지는 않는 게 좋다. 메인 색 1개, 보조 색 1개, 회색 계열 정도면 대부분 충분하다.
작업 순서는 간단하게 잡으면 된다. 글 화면을 먼저 편하게 만들고, 메뉴를 줄이고, 이미지 규칙을 만든 뒤, 작은 장식을 더한다. 이 순서로 가면 블로그가 예뻐지는 동시에 실제로 읽기 쉬워진다. 예쁜데 복잡한 블로그보다 덜 화려해도 길이 잘 보이는 블로그가 오래 운영하기에는 훨씬 편하다.
