초보자를 위한 블로그디자인, 첫 화면부터 읽히게 만드는 방법
얼마 전 지인 블로그를 같이 손보다가 꽤 흥미로운 장면을 봤습니다. 글 내용은 정말 괜찮은데, 첫 화면에서 어디를 눌러야 할지 몰라 방문자가 금방 나갈 것 같더라고요. 사실 블로그디자인은 예쁘게 꾸미는 일만은 아닙니다. 읽는 사람이 편하게 머물고, 원하는 정보를 빨리 찾고, 다음 글까지 자연스럽게 보게 만드는 구조에 더 가깝습니다.
첫 화면은 3초 안에 방향을 보여주는 방법
방문자는 블로그에 들어오자마자 이곳이 어떤 공간인지 빠르게 판단합니다. 보통 3초 안에 계속 읽을지, 뒤로 갈지 결정한다고 봐도 크게 틀리지 않습니다. 그래서 첫 화면에는 블로그 이름, 주제, 대표 글 또는 카테고리가 또렷하게 보여야 합니다.
예를 들어 생활 정보 블로그라면 상단 메뉴에 생활비, 건강, 정부지원, 여행 같은 큰 주제가 보이는 편이 좋습니다. 반대로 메뉴가 10개 넘게 펼쳐져 있으면 풍성해 보이기보다 복잡하게 느껴질 수 있습니다. 처음에는 4~6개 정도로 줄이고, 방문자가 자주 찾는 글을 앞쪽에 두는 방식이 훨씬 실용적입니다.
- 블로그 제목은 작게 숨기지 않고 상단에서 바로 보이게 둡니다.
- 카테고리 이름은 멋진 표현보다 직관적인 단어가 좋습니다.
- 첫 화면에는 최근 글보다 대표 글, 인기 글, 필수 안내 글을 섞어 배치합니다.
글이 편하게 읽히는 블로그디자인 기준
블로그는 결국 글을 읽는 공간입니다. 디자인이 아무리 좋아도 본문이 답답하면 오래 머물기 어렵습니다. 특히 모바일에서 줄 간격이 좁거나 글자 크기가 작으면 내용이 좋아도 피로감이 빨리 옵니다. 일반적으로 본문 글자는 모바일 기준 16px 안팎, 줄 간격은 1.6 정도가 무난합니다.
문단 길이도 중요합니다. 한 문단이 8줄, 10줄씩 이어지면 화면이 꽉 막힌 느낌이 납니다. 정보형 글이라면 한 문단을 2~4문장 정도로 끊는 편이 읽기 좋습니다. 소제목은 독자가 중간에 들어와도 흐름을 잡게 해주는 표지판 역할을 합니다. 검색으로 들어온 사람은 처음부터 끝까지 읽지 않는 경우도 많으니까요.
본문에서 바로 바꿀 수 있는 요소
- 문단 사이 여백을 넉넉하게 둡니다.
- 중요한 정보는 목록으로 나눠 눈에 잘 들어오게 합니다.
- 강조색은 한두 가지로 제한합니다.
- 광고와 본문 사이 간격을 충분히 둡니다.
솔직히 블로그디자인에서 가장 많이 아쉬운 부분은 과한 강조입니다. 굵은 글씨, 형광색, 밑줄, 큰 글자, 배경색이 한 화면에 모두 나오면 어디가 중요한지 알기 어렵습니다. 강조는 적을수록 힘이 생깁니다.
색과 이미지로 분위기를 만드는 방법
색은 블로그의 첫인상을 크게 좌우합니다. 하지만 색을 많이 쓰는 것이 개성은 아닙니다. 배경은 흰색이나 아주 연한 회색처럼 읽기 편한 색을 두고, 포인트 색 하나를 정해 버튼이나 링크, 강조 박스에 반복해서 쓰면 안정감이 생깁니다.
예를 들어 금융 정보 블로그는 파랑이나 짙은 초록 계열이 신뢰감을 주기 쉽고, 육아나 생활 팁 블로그는 따뜻한 노랑, 코랄, 연한 초록을 적당히 섞으면 친근하게 보입니다. 다만 전체 화면이 한 가지 색으로만 꽉 차면 오래 보기 피곤할 수 있습니다. 배경, 글자, 포인트 색의 역할을 나눠두는 게 좋습니다.
이미지는 글의 이해를 돕는 방향으로 쓰는 편이 좋습니다. 단순히 예쁜 사진을 넣기보다, 체크리스트 화면, 전후 비교, 실제 사용 장면처럼 글 내용과 이어지는 이미지가 훨씬 강합니다. 썸네일도 마찬가지입니다. 제목을 그대로 반복하기보다 독자가 얻을 이득을 짧게 보여주는 문구가 클릭률에 도움이 됩니다.
방문자가 다음 글로 넘어가게 만드는 배치
좋은 블로그디자인은 한 글에서 끝나지 않게 만듭니다. 글을 다 읽은 뒤 관련 글이 자연스럽게 보이면 방문자는 한 번 더 클릭할 가능성이 높아집니다. 예를 들어 ‘블로그 글쓰기 방법’을 읽은 사람에게 ‘제목 짓는 법’, ‘썸네일 만드는 법’, ‘방문자 체류시간 늘리는 법’을 보여주면 흐름이 이어집니다.
사이드바도 목적이 있어야 합니다. PC에서는 유용하지만 모바일에서는 아래로 밀려 잘 보이지 않는 경우가 많습니다. 그래서 모바일 방문자가 많은 블로그라면 본문 중간과 하단에 관련 글 링크를 넣는 방식이 더 효과적입니다. 카테고리 이동 버튼, 인기 글 묶음, 검색창도 눈에 잘 띄는 위치에 두면 좋습니다.
- 글 상단에는 독자가 바로 읽기 시작할 수 있게 불필요한 장식을 줄입니다.
- 본문 중간에는 관련 글을 1~2개만 자연스럽게 연결합니다.
- 글 하단에는 다음에 읽을 글을 주제별로 보여줍니다.
- 댓글 영역은 너무 멀리 밀리지 않게 구성합니다.
초보자가 먼저 고치면 체감이 큰 부분
블로그를 처음 꾸밀 때는 전체를 한꺼번에 바꾸려다 지치기 쉽습니다. 근데 실제로 효과가 큰 부분은 꽤 단순합니다. 제목이 잘 보이는지, 본문이 편하게 읽히는지, 메뉴가 헷갈리지 않는지, 모바일에서 광고가 내용을 가리지 않는지부터 보면 됩니다.
특히 모바일 화면 확인은 꼭 필요합니다. 방문자의 상당수는 휴대폰으로 들어옵니다. PC에서는 괜찮아 보이던 배너가 모바일에서는 본문을 밀어내거나, 버튼이 너무 작아 누르기 어려울 수 있습니다. 글 하나를 발행한 뒤 휴대폰으로 직접 읽어보면 어색한 부분이 금방 보입니다.
블로그디자인은 대단한 감각보다 배려에 가깝다고 느낍니다. 읽는 사람이 헤매지 않게 길을 열어주고, 중요한 내용이 묻히지 않게 덜어내는 작업이니까요. 처음부터 완벽한 화면을 만들려고 애쓰기보다, 방문자가 머무는 시간이 조금씩 길어지는 방향으로 고쳐가면 블로그의 인상이 꽤 빠르게 달라집니다.
