초보자를 위한 블로그디자인 잡는 방법, 글이 먼저 읽히게 만드는 기본값
처음 블로그를 열었을 때 3초가 꽤 중요하더라
얼마 전 지인 블로그를 같이 손보다가 재미있는 걸 봤습니다. 글 내용은 괜찮은데 첫 화면에서 바로 뒤로 가기를 누르는 사람이 많았어요. 이유는 거창하지 않았습니다. 제목은 작고, 광고와 배너는 먼저 보이고, 본문 폭은 너무 넓어서 한 줄을 읽는 데 눈이 계속 흔들렸습니다.
블로그디자인은 예쁘게 꾸미는 작업이라고 생각하기 쉽지만, 실제로는 글을 덜 피곤하게 읽게 만드는 설정에 가깝습니다. 특히 정보성 블로그라면 방문자는 오래 감상하러 오는 게 아니라 답을 찾으러 옵니다. 그래서 디자인의 목표도 명확합니다. 글 제목이 바로 보이고, 필요한 문단으로 이동하기 쉽고, 모바일에서 손가락으로 읽어도 답답하지 않아야 합니다.
저는 블로그를 손볼 때 색상보다 먼저 보는 게 3가지입니다. 첫 화면에 제목이 보이는지, 본문 글자가 충분히 큰지, 문단 사이 간격이 숨 쉴 만큼 있는지입니다. 이 세 가지만 바꿔도 체감이 큽니다.
본문 폭과 글자 크기부터 맞추는 게 빠르다
가장 흔한 실수가 본문 폭을 너무 넓게 잡는 겁니다. PC 화면에서 한 줄이 90자 가까이 길어지면 읽는 사람이 다음 줄을 찾기 어렵습니다. 개인적으로는 본문 영역을 680~760픽셀 정도로 두는 편이 안정적이었습니다. 이미지가 많은 글이면 조금 넓혀도 되지만, 텍스트 중심 글은 너무 넓을수록 산만해집니다.
글자 크기는 모바일 기준으로 봐야 합니다. PC에서 보기 좋은 15픽셀은 휴대폰에서는 작게 느껴질 때가 많습니다. 본문은 16~18픽셀, 줄간격은 1.7 안팎이면 무난합니다. 숫자로 보면 별 차이 없어 보여도 실제 화면에서는 꽤 다릅니다. 특히 파일 변환 방법이나 문서 양식 안내처럼 단계가 많은 글은 줄간격이 좁으면 중간에 놓치기 쉽습니다.
- 본문 폭은 PC 기준 680~760픽셀 정도가 읽기 편함
- 본문 글자는 16~18픽셀부터 테스트
- 줄간격은 1.6~1.8 사이가 무난
- 문단은 3~5줄을 넘기지 않게 끊기
근데 여기서 중요한 건 숫자를 외우는 게 아닙니다. 내 블로그 글 하나를 휴대폰으로 직접 열어보고, 침대에 누워서도 읽히는지 보는 게 더 정확합니다. 실제 독자 대부분은 그렇게 읽습니다.
색은 적게 쓰고 강조 규칙을 고정한다
블로그디자인을 망치는 빠른 길은 강조 색을 계속 바꾸는 겁니다. 어떤 문장은 빨간색, 어떤 문장은 파란색, 버튼은 초록색, 박스는 노란색이면 글이 친절해 보이기보다 피곤해집니다. 색은 2~3개만 정해도 충분합니다.
예를 들어 기본 글자는 진한 회색, 링크나 버튼은 파란 계열, 주의 문구는 붉은 계열로 고정합니다. 이렇게 정해두면 독자는 색을 볼 때마다 의미를 학습합니다. 파란색은 누를 수 있는 곳, 붉은색은 조심할 부분처럼요.
강조는 굵게, 색상은 보조로
사실 정보성 글에서는 형광펜처럼 색을 많이 칠하는 것보다 굵은 글씨가 더 안정적입니다. 특히 모바일에서는 배경색 강조가 과하면 화면이 조각조각 나뉘어 보입니다. 중요한 문장 하나만 굵게 처리하고, 정말 놓치면 안 되는 부분에만 색을 쓰는 게 낫습니다.
무료 도구나 기본 편집기를 쓰더라도 충분히 가능합니다. 스킨 전체를 갈아엎지 않아도 본문 스타일, 제목 크기, 버튼 색 정도만 통일하면 블로그가 훨씬 깔끔해 보입니다.
카테고리와 메뉴는 적을수록 찾기 쉽다
블로그를 오래 운영하다 보면 카테고리가 자꾸 늘어납니다. PDF, 이미지, 압축파일, 문서 양식, 무료 사이트, 프로그램 추천처럼 나누다 보면 어느 순간 메뉴가 서랍장처럼 복잡해집니다. 그런데 방문자는 내 분류 체계를 처음 봅니다. 너무 세세하면 오히려 어디를 눌러야 할지 모릅니다.
처음에는 큰 묶음 4~6개 정도가 적당합니다. 예를 들면 파일 변환, 압축과 용량 줄이기, 문서 양식, 무료 도구, 문제 해결 같은 식입니다. 세부 키워드는 글 제목과 태그에서 처리하면 됩니다. 메뉴는 길 안내판이라서 짧고 분명한 게 좋습니다.
- 상단 메뉴는 4~6개 안쪽으로 유지
- 비슷한 주제는 큰 카테고리로 묶기
- 태그는 검색 보조용으로만 사용
- 인기 글보다 문제 해결 글을 먼저 보여주기
저는 특히 사이드바에 너무 많은 위젯을 넣지 않는 쪽을 선호합니다. 최신 글, 인기 글, 프로필, 광고, 태그 구름이 한꺼번에 있으면 본문보다 주변 요소가 더 시끄러워집니다. 필요한 것만 남겨야 글이 살아납니다.
이미지와 버튼은 장식보다 안내 역할을 해야 한다
블로그디자인에서 이미지가 꼭 화려할 필요는 없습니다. 오히려 정보성 블로그에서는 실제 화면 캡처가 가장 강합니다. 예를 들어 파일 압축 방법을 설명한다면 예쁜 썸네일보다 버튼 위치가 보이는 캡처 한 장이 더 유용합니다. 단, 캡처는 너무 크게 넣지 말고 필요한 부분만 잘라 쓰는 게 좋습니다.
버튼도 마찬가지입니다. 모든 링크를 버튼처럼 만들면 뭐가 중요한지 흐려집니다. 다운로드, 신청, 템플릿 받기처럼 행동이 분명한 링크만 버튼으로 두면 충분합니다. 나머지는 일반 텍스트 링크나 굵은 안내 문장으로 처리하는 편이 자연스럽습니다.
모바일에서 버튼 간격을 꼭 확인한다
PC에서는 멀쩡한 버튼도 모바일에서는 손가락으로 누르기 힘들 때가 많습니다. 버튼 높이는 최소 44픽셀 정도, 버튼 사이 간격은 8~12픽셀 정도 확보하면 실수가 줄어듭니다. 특히 광고 근처에 버튼을 붙이면 오클릭이 생기기 쉬워서 독자 경험도 나빠집니다.
블로그디자인은 결국 독자가 덜 헤매게 만드는 일입니다. 화려한 스킨보다 안정적인 본문 폭, 읽히는 글자 크기, 통일된 강조 규칙, 단순한 메뉴가 오래 갑니다. 저도 여러 번 꾸몄다가 다시 덜어내는 쪽으로 돌아왔습니다. 예쁜 블로그보다 다시 찾아오기 편한 블로그가 실제로 더 강하다고 느낍니다.
