초보자를 위한 블로그디자인 하는 방법, 글이 먼저 보이게 만드는 기본값
블로그디자인은 예쁜 스킨보다 읽는 흐름이 먼저입니다
얼마 전 지인 블로그를 같이 손봤는데, 글 내용은 꽤 괜찮은데 첫 화면에서 5초 만에 나가고 싶어지는 느낌이 있었습니다. 이유는 단순했어요. 배너는 크고, 메뉴는 많고, 본문 글씨는 작았습니다. 블로그디자인을 바꾼다고 하면 보통 색감이나 로고부터 떠올리지만, 실제 방문자는 글을 읽으러 들어옵니다. 그래서 디자인의 첫 기준은 “내가 쓴 글이 얼마나 빨리, 편하게 보이느냐”가 되어야 합니다.
특히 정보형 블로그라면 더 그렇습니다. 파일 변환 방법, 무료 양식 다운로드, 프로그램 사용법 같은 글은 방문자가 답을 빨리 찾고 싶어 합니다. 상단 이미지가 화면의 70%를 차지하거나, 본문보다 광고와 사이드바가 먼저 보이면 체감 품질이 확 떨어집니다. 예쁜 것보다 막힘없는 구조가 오래 갑니다.
첫 화면은 3가지 정보만 남기는 게 좋습니다
블로그 첫 화면에는 욕심이 들어가기 쉽습니다. 인기글, 최신글, 카테고리, 프로필, 배너, 검색창, 구독 버튼까지 전부 넣고 싶어지죠. 그런데 실제로는 첫 화면에서 보여줄 정보가 많을수록 방문자는 뭘 눌러야 할지 헷갈립니다.
처음에는 딱 3가지만 남겨도 충분합니다. 블로그가 다루는 주제, 최근 글 목록, 검색 또는 카테고리 이동. 이 정도면 방문자가 “여기가 어떤 블로그인지”, “내가 찾는 글이 있는지”, “다음에 어디를 눌러야 하는지”를 바로 판단할 수 있습니다.
- 상단 문구는 1줄로 짧게 쓰기
- 메뉴는 4~6개 정도로 줄이기
- 본문 위 큰 배너는 모바일 기준 한 화면을 넘기지 않기
- 검색창은 숨기지 말고 찾기 쉬운 위치에 두기
예를 들어 “파일 변환, 압축, 문서 양식을 쉽게 다룹니다”처럼 주제를 바로 보여주는 문구가 좋습니다. “일상과 정보가 함께하는 공간”처럼 넓은 표현은 예쁘지만, 검색으로 들어온 사람에게는 별 도움이 안 됩니다.
본문 디자인은 글씨 크기와 간격에서 거의 결정됩니다
블로그디자인에서 가장 체감이 큰 부분은 의외로 폰트입니다. PC에서는 괜찮아 보여도 모바일에서 글씨가 작으면 바로 피로해집니다. 요즘 방문자는 대부분 휴대폰으로 글을 읽기 때문에 본문 기준을 모바일에 맞추는 편이 낫습니다.
본문 글씨는 16~18px 정도가 무난합니다. 줄 간격은 1.6 안팎이면 숨이 트입니다. 문단은 3~5줄을 넘기지 않는 게 좋고, 설명이 길어질 때는 h3 소제목이나 목록을 넣어 시선을 끊어주는 편이 읽기 쉽습니다. 솔직히 디자인 스킨을 바꾸는 것보다 이 세 가지만 맞춰도 블로그가 훨씬 안정적으로 보입니다.
본문에서 바로 고치기 좋은 요소
- 본문 폭은 너무 넓히지 않기, PC 기준 680~760px 정도가 편함
- 링크 색은 본문 색과 확실히 구분하기
- 강조색은 1~2개만 사용하기
- 표와 이미지 아래에는 짧은 설명을 붙이기
- 소제목 위아래 여백을 충분히 두기
특히 정보형 글에서는 강조색을 많이 쓰면 오히려 중요한 부분이 묻힙니다. 빨강, 파랑, 노랑 형광펜이 한 글에 다 들어가면 방문자는 어디를 봐야 할지 모릅니다. 무료 도구를 소개하는 글이라면 도구 이름, 다운로드 위치, 주의할 점 정도만 진하게 보여줘도 충분합니다.
카테고리는 운영자 기준보다 방문자 기준으로 나눕니다
블로그를 오래 운영하다 보면 카테고리가 자꾸 늘어납니다. “문서”, “PDF”, “이미지”, “압축”, “윈도우”, “꿀팁”, “무료자료”처럼 처음에는 괜찮아 보여도, 비슷한 글이 여러 곳에 흩어지면 방문자는 길을 잃습니다. 카테고리는 내가 글을 관리하기 편한 기준보다 방문자가 문제를 찾는 기준으로 만드는 게 좋습니다.
예를 들어 파일 관련 블로그라면 “PDF 작업”, “이미지 변환”, “압축과 용량 줄이기”, “문서 양식”, “무료 도구”처럼 행동 중심으로 나누면 이해가 빠릅니다. 방문자는 “나는 PDF를 합치고 싶다”, “사진 용량을 줄이고 싶다”처럼 문제를 갖고 들어오기 때문입니다.
카테고리 이름도 짧을수록 좋습니다. “업무 효율을 높이는 다양한 디지털 도구 모음”보다는 “무료 도구”가 더 빨리 읽힙니다. 메뉴는 설명문이 아니라 표지판에 가깝습니다. 한눈에 알아보이는 이름이 이깁니다.
모바일 화면에서 한 번 더 확인해야 합니다
PC에서 열심히 꾸민 블로그가 모바일에서 무너지는 경우가 정말 많습니다. 사이드바가 본문 위로 올라오거나, 표가 화면 밖으로 밀리거나, 버튼 글자가 두 줄로 깨지는 식입니다. 방문자가 모바일에서 글을 읽다가 확대해야 한다면 이미 불편한 디자인입니다.
글 하나를 발행하기 전에 휴대폰으로 직접 들어가 보면 좋습니다. 첫 화면에서 제목이 잘 보이는지, 본문 첫 문단까지 너무 멀지 않은지, 이미지가 흐릿하지 않은지 확인합니다. 표를 자주 쓴다면 가로 스크롤이 자연스럽게 되는지도 봐야 합니다. 특히 다운로드 버튼이나 외부 링크 버튼은 손가락으로 누르기 쉬운 크기여야 합니다.
- 제목이 모바일에서 2~3줄 안에 들어오는지 확인
- 본문 첫 문단이 과도하게 아래로 밀리지 않는지 확인
- 이미지 너비가 화면에 맞게 줄어드는지 확인
- 광고가 본문 흐름을 심하게 끊지 않는지 확인
- 버튼 간격이 너무 붙어 있지 않은지 확인
블로그디자인은 한 번에 완성하는 작업이라기보다, 글을 올리면서 조금씩 손보는 운영 습관에 가깝습니다. 처음부터 화려한 화면을 만들려고 하면 금방 지칩니다. 우선 글씨 크기, 본문 폭, 메뉴 개수, 모바일 화면만 잡아도 방문자가 느끼는 편안함은 꽤 달라집니다. 저는 디자인을 바꿀 때마다 “이 화면에서 글을 계속 읽고 싶은가”를 먼저 봅니다. 그 질문에 괜찮다고 느껴지면, 이미 블로그는 제 역할을 꽤 잘하고 있는 편입니다.
