초보자를 위한 블로그디자인 만드는 방법
처음 보는 3초가 생각보다 큽니다
얼마 전 지인 블로그를 같이 보다가 재미있는 걸 느꼈습니다. 글 내용은 꽤 알찬데, 첫 화면에서 제목이 잘 안 보이고 메뉴가 복잡하니까 저도 모르게 뒤로 가기를 누르고 싶어지더라고요. 블로그디자인은 예쁘게 꾸미는 문제처럼 보이지만, 사실은 독자가 글을 편하게 읽게 만드는 길 안내에 가깝습니다.
특히 방문자는 생각보다 오래 기다려주지 않습니다. 보통 첫 화면에서 3초 안팎으로 계속 읽을지 말지를 판단하는 경우가 많습니다. 그래서 블로그 첫인상은 화려한 배너보다 글 제목, 카테고리, 본문 가독성이 먼저입니다. 예쁜데 읽기 힘든 블로그보다 조금 단순해도 정보가 바로 보이는 블로그가 훨씬 오래 머물게 만듭니다.
블로그디자인은 색보다 구조가 먼저입니다
디자인을 시작하면 가장 먼저 색상부터 고르고 싶어집니다. 그런데 색보다 먼저 잡아야 할 것은 구조입니다. 독자가 들어왔을 때 어디를 봐야 하는지, 다음 글은 어디서 찾는지, 본문은 어떤 흐름으로 읽히는지가 정해져야 나중에 꾸며도 어색하지 않습니다.
초보자라면 블로그 화면을 크게 세 구역으로 나눠보면 좋습니다. 상단에는 블로그 이름과 메뉴, 가운데에는 글 목록이나 본문, 하단에는 관련 글이나 소개 정도만 두는 식입니다. 사이드바가 있다면 프로필, 검색창, 인기 글 정도로 줄이는 편이 깔끔합니다. 너무 많은 위젯을 한 번에 넣으면 정보가 풍성해 보이기보다 산만해 보일 수 있습니다.
- 상단 메뉴는 4~6개 정도가 적당합니다.
- 카테고리 이름은 짧고 직관적인 표현이 좋습니다.
- 첫 화면에는 가장 중요한 글이나 최신 글이 바로 보여야 합니다.
- 광고, 배너, 위젯은 본문 읽기를 방해하지 않는 위치에 둡니다.
예를 들어 여행 블로그라면 상단 메뉴를 국내여행, 해외여행, 숙소, 준비물처럼 나누면 바로 이해됩니다. 반대로 일상, 이야기, 생각, 기록처럼 비슷한 느낌의 메뉴가 반복되면 처음 온 사람은 어디를 눌러야 할지 망설이게 됩니다.
글을 오래 읽게 만드는 본문 디자인
블로그디자인에서 가장 자주 놓치는 부분이 본문입니다. 방문자는 결국 글을 읽으러 들어옵니다. 그런데 본문 글씨가 너무 작거나 줄 간격이 좁으면 내용이 좋아도 오래 읽기 어렵습니다. 개인적으로는 본문 글자 크기를 16~18px 정도로 두고, 줄 간격은 글자 크기의 1.6배 안팎으로 맞췄을 때 가장 편하게 느껴졌습니다.
문단 길이도 중요합니다. 모바일에서는 4~5줄만 되어도 꽤 길게 보입니다. 그래서 한 문단에 하나의 생각만 담는 편이 좋습니다. PC에서는 괜찮아 보였던 긴 문단도 휴대폰으로 보면 벽처럼 느껴질 때가 많거든요.
제목과 소제목은 안내판처럼 쓰면 됩니다
소제목은 단순히 글을 나누는 장식이 아닙니다. 독자가 대충 훑어봐도 내용을 예상하게 해주는 장치입니다. 예를 들어 “색상 선택”보다 “블로그 색상은 3개 안에서 고르면 편합니다”처럼 쓰면 더 구체적입니다. 검색으로 들어온 독자도 자신이 원하는 정보가 있는지 빠르게 판단할 수 있습니다.
본문 안에서 굵은 글씨를 너무 많이 쓰는 것도 조심해야 합니다. 강조가 많아지면 아무것도 강조되지 않습니다. 정말 중요한 기준, 숫자, 선택 포인트에만 제한적으로 쓰는 게 읽기 편합니다.
색상과 이미지로 분위기 잡는 방법
색상은 블로그의 성격을 빠르게 보여줍니다. 정보성 블로그라면 흰 배경에 검정 또는 진한 회색 글씨가 가장 무난합니다. 포인트 색상은 1~2개만 정해도 충분합니다. 예를 들어 파란색을 버튼과 링크에만 쓰고, 연한 회색을 구분선이나 배경에 쓰면 단정한 느낌이 납니다.
처음부터 다섯 가지 이상의 색을 섞으면 전체 분위기가 쉽게 흔들립니다. 특히 형광색, 강한 빨강, 진한 보라색을 넓은 영역에 쓰면 피로감이 생길 수 있습니다. 색을 잘 모르겠다면 배경은 밝게, 글자는 진하게, 버튼만 포인트 색으로 두는 방식이 실패 확률이 낮습니다.
이미지도 마찬가지입니다. 블로그 대표 이미지가 매번 다른 스타일이면 글 목록이 어수선해 보입니다. 사진을 쓰든 썸네일을 만들든 비율과 폰트 위치를 어느 정도 통일하면 블로그가 훨씬 정돈돼 보입니다. 썸네일 크기는 1:1 또는 16:9처럼 일정하게 맞추는 편이 관리하기도 쉽습니다.
- 포인트 색상은 버튼, 링크, 강조 요소에만 반복해서 씁니다.
- 썸네일에는 글 제목을 너무 길게 넣지 않습니다.
- 본문 이미지는 같은 가로폭으로 맞추면 안정감이 생깁니다.
- 배경색과 글자색 대비는 충분히 크게 둡니다.
초보자가 바로 점검할 수 있는 디자인 체크
블로그디자인을 바꿀 때는 한 번에 전부 고치려 하면 부담이 큽니다. 사실 방문자가 체감하는 부분부터 손보는 게 더 효율적입니다. 저는 보통 모바일 화면, 본문 가독성, 메뉴 구조, 썸네일 통일감 순서로 확인하는 편입니다. 요즘은 블로그 방문자의 상당수가 모바일에서 들어오기 때문에 PC 화면만 보고 판단하면 놓치는 부분이 꽤 많습니다.
가장 쉬운 점검법은 내 글 하나를 휴대폰으로 직접 읽어보는 겁니다. 제목이 한눈에 들어오는지, 첫 문단이 답답하지 않은지, 광고나 이미지 때문에 본문이 끊기지 않는지 확인하면 됩니다. 친구에게 보여주고 “어디를 먼저 눌러야 할 것 같아?”라고 물어보는 것도 꽤 현실적인 테스트입니다.
디자인 수정은 작은 변화부터
블로그를 운영하다 보면 갑자기 전체 스킨을 바꾸고 싶어질 때가 있습니다. 근데 방문자가 이미 익숙해진 구조가 있다면 너무 큰 변화는 오히려 혼란을 줄 수 있습니다. 메뉴 이름을 바꾸거나 썸네일 스타일을 바꾸는 정도부터 시작해도 충분합니다.
특히 수익형 블로그라면 광고 위치도 함께 봐야 합니다. 광고가 너무 위에 몰려 있으면 첫인상은 답답해지고, 너무 아래에만 있으면 노출 기회가 줄어듭니다. 본문 흐름을 끊지 않는 선에서 자연스럽게 배치하는 게 중요합니다. 독자가 글을 읽는 경험이 나빠지면 체류 시간도 줄어들 수밖에 없습니다.
블로그디자인은 전문가처럼 멋진 화면을 만드는 일이 아니라, 내 글을 더 편하게 읽히게 만드는 작업입니다. 메뉴를 줄이고, 글씨를 편하게 만들고, 색을 단순하게 맞추는 것만으로도 분위기가 꽤 달라집니다. 꾸미는 재미도 좋지만, 결국 다시 찾고 싶은 블로그는 읽는 사람이 덜 피곤한 블로그라고 생각합니다.
