초보자를 위한 블로그디자인 잡는 방법
얼마 전 지인 블로그를 같이 고치다가 재미있는 걸 봤습니다. 글은 꽤 괜찮았는데, 첫 화면에서 광고 배너와 위젯이 너무 많이 보여서 정작 글 제목이 눈에 잘 안 들어오더군요. 방문자는 보통 3초 안에 계속 읽을지 나갈지 판단합니다. 블로그디자인은 예쁘게 꾸미는 일이 아니라, 방문자가 글을 편하게 발견하고 읽게 만드는 작업에 가깝습니다.
처음에는 색보다 구조가 먼저입니다
블로그를 꾸밀 때 가장 먼저 색상표부터 고르는 경우가 많습니다. 그런데 실제로 체감 차이가 큰 부분은 색보다 구조입니다. 상단 메뉴, 본문 폭, 사이드바, 글 목록 카드, 검색창 위치가 먼저 잡혀야 합니다.
예를 들어 정보형 블로그라면 첫 화면에 최근 글 6개만 또렷하게 보여도 충분합니다. 반대로 배너, 프로필, 카테고리, 태그 구름, 인기 글, 외부 링크가 한 화면에 전부 들어오면 사용자는 어디를 눌러야 할지 헷갈립니다. 특히 모바일에서는 이런 요소가 세로로 길게 밀리면서 본문 접근이 늦어집니다.
- 상단 메뉴는 4~6개 안쪽으로 줄이기
- 첫 화면에는 대표 카테고리와 최신 글 위주로 배치하기
- 사이드바 위젯은 꼭 필요한 것만 남기기
- 검색창은 상단이나 메뉴 근처에 두기
블로그디자인을 처음 손볼 때는 장식 요소를 추가하기보다 빼는 쪽이 빠릅니다. 실제로 위젯 5개를 2개로 줄였을 때 스크롤 길이가 줄고, 글 목록 클릭률이 올라가는 경우가 많습니다.
본문 폭과 글자 크기가 체류 시간을 바꿉니다
방문자가 글을 오래 읽게 하려면 본문이 편해야 합니다. 데스크톱 기준으로 본문 폭은 대략 680~760px 정도가 읽기 좋습니다. 너무 넓으면 한 줄이 길어져 시선 이동이 피곤하고, 너무 좁으면 줄바꿈이 잦아져 글이 산만해 보입니다.
글자 크기는 16px 이상을 권합니다. 모바일 방문자가 많은 블로그라면 17px도 괜찮습니다. 줄 간격은 1.6 전후가 무난합니다. 실제로 파일 변환 방법이나 문서 양식 설명처럼 단계가 많은 글은 줄 간격이 좁으면 금방 답답해 보입니다.
가독성을 높이는 기본값
- 본문 글자 크기: 16~18px
- 줄 간격: 1.55~1.75
- 문단 간격: 글자 크기의 1.2~1.6배
- 본문 폭: 데스크톱 기준 680~760px
- 강조 색상: 1~2개만 사용
근데 여기서 중요한 건 숫자를 외우는 게 아닙니다. 내 블로그 글을 스마트폰으로 직접 1분만 읽어보면 답이 빨리 나옵니다. 눈이 자꾸 흐트러지거나 문단이 벽처럼 보이면 글자 크기, 줄 간격, 문단 간격 중 하나가 빡빡한 상태일 가능성이 큽니다.
카테고리는 방문자의 언어로 바꾸는 게 좋습니다
블로그디자인에서 의외로 많이 놓치는 부분이 카테고리 이름입니다. 운영자 입장에서는 “자료실”, “팁”, “기타”가 편할 수 있습니다. 하지만 방문자 입장에서는 무엇을 얻을 수 있는지 바로 보이지 않습니다.
파일 유틸 블로그라면 “PDF 변환”, “이미지 압축”, “엑셀 양식”, “무료 템플릿”처럼 검색 의도에 가까운 이름이 좋습니다. 이렇게 바꾸면 메뉴 자체가 안내판 역할을 합니다. 사용자가 원하는 글을 찾는 시간이 줄어들고, 검색엔진에도 주제가 더 분명하게 전달됩니다.
카테고리를 너무 많이 만드는 것도 피곤합니다. 글이 50개 이하라면 4~6개 정도면 충분한 경우가 많습니다. 글이 쌓인 뒤 세부 분류를 나누는 편이 낫습니다. 처음부터 15개를 만들어두면 빈 카테고리가 많아지고 블로그가 덜 관리된 느낌을 줍니다.
썸네일은 예쁜 이미지보다 정보 전달이 우선입니다
썸네일은 블로그디자인의 첫인상입니다. 그런데 정보형 블로그에서 썸네일은 감성 사진보다 내용이 바로 보이는 쪽이 유리합니다. “PDF 용량 줄이기”, “JPG를 PDF로 변환”, “이력서 양식 다운로드”처럼 글의 결과물이 보이면 클릭 판단이 빨라집니다.
추천하는 방식은 간단합니다. 배경색 2~3개를 정하고, 큰 제목 1줄과 작은 보조 문구 1줄만 넣습니다. 폰트도 1~2개면 충분합니다. 모든 썸네일에 다른 색과 다른 폰트를 쓰면 개별 이미지는 튀어 보일 수 있지만, 블로그 전체는 어수선해집니다.
썸네일에서 줄이면 좋은 것
- 긴 문장형 제목
- 너무 작은 캡처 화면
- 비슷한 색의 텍스트와 배경
- 장식용 아이콘 과다 사용
- 글마다 완전히 다른 템플릿
저는 썸네일을 만들 때 제목을 최대 12~16자 안쪽으로 줄이는 편입니다. 작은 모바일 화면에서도 읽히는지가 더 중요하기 때문입니다. 블로그 목록에서 썸네일이 160px 정도로 줄어도 핵심 단어가 보여야 합니다.
광고와 버튼은 읽는 흐름을 끊지 않게 배치합니다
수익형 블로그라면 광고를 아예 뺄 수는 없습니다. 다만 광고가 본문 흐름을 자주 끊으면 방문자는 뒤로 가기를 누릅니다. 특히 첫 문단 바로 아래에 큰 광고가 나오고, 두 번째 문단 뒤에 또 광고가 나오면 글보다 광고가 먼저 보입니다.
본문 상단에는 글의 문제 상황과 해결 방향이 먼저 보여야 합니다. 예를 들어 “PDF 파일이 25MB라 메일 첨부가 안 될 때” 같은 상황을 먼저 제시하고, 첫 번째 해결 단계까지는 빠르게 이어지는 게 좋습니다. 광고는 그다음에 들어가도 늦지 않습니다.
- 첫 화면에서 제목과 첫 문단이 바로 보이게 하기
- 버튼 문구는 “다운로드”, “변환하기”, “예시 보기”처럼 행동 중심으로 쓰기
- 본문 중간 광고는 큰 단계가 끝난 뒤 배치하기
- 모바일에서 버튼 높이는 44px 이상 확보하기
버튼 색도 모든 곳에 강한 색을 쓰면 효과가 떨어집니다. 다운로드나 이동처럼 중요한 행동에만 진한 색을 쓰고, 보조 링크는 일반 텍스트나 얇은 테두리 버튼으로 처리하는 편이 깔끔합니다.
블로그디자인 점검은 실제 글 하나로 해보면 빠릅니다
전체 스킨을 한 번에 바꾸려면 부담이 큽니다. 그래서 저는 대표 글 하나를 정해서 먼저 점검합니다. 방문자가 많이 들어오는 글, 검색 유입이 꾸준한 글, 또는 내가 앞으로 밀고 싶은 카테고리의 글이 좋습니다.
그 글에서 제목, 썸네일, 첫 문단, 목차, 본문 폭, 버튼, 광고 위치를 차례대로 봅니다. 수정 전후로 평균 체류 시간이나 클릭 수를 비교하면 감이 옵니다. 숫자가 없더라도 스마트폰에서 직접 읽어보면 불편한 지점이 꽤 분명하게 보입니다.
블로그디자인은 한 번에 완성되는 작업이 아닙니다. 글이 쌓이고 방문자 흐름이 보이면서 조금씩 손보는 쪽이 현실적입니다. 화려한 스킨보다 중요한 건 원하는 자료를 빠르게 찾고, 설명을 막힘없이 읽고, 필요한 파일이나 방법까지 자연스럽게 도착하게 만드는 흐름입니다. 그 정도만 잡혀도 블로그는 훨씬 믿음직하게 보입니다.
