블로그디자인은 읽기 편한 글부터 만드는 방법
얼마 전 오래된 글을 휴대폰으로 다시 읽다가 첫 문단에서 손가락이 멈췄습니다. 내용은 쓸 만한데 글씨가 작고, 이미지가 화면을 밀어내고, 다음 단계가 어디서 시작하는지 보이지 않았거든요. 블로그디자인을 바꿀 때는 예쁜 색을 고르기 전에 독자가 글을 따라갈 수 있는지부터 확인하는 편이 빠릅니다.
첫 화면에서 글의 용도를 보여주기
파일 변환 방법을 찾는 사람은 사이트 소개보다 지금 가진 파일로 무엇을 할 수 있는지 먼저 알고 싶어 합니다. 그래서 첫 화면에는 블로그 이름, 짧은 설명, 글 목록이 자연스럽게 이어지는 구성이 좋습니다. 설명은 ‘무료 도구로 파일을 바꾸고 문서를 다듬는 방법’처럼 실제 다루는 일을 한 문장으로 적으면 충분합니다.
메뉴도 처음부터 많이 만들 필요는 없습니다. 예를 들어 ‘파일 변환’, ‘압축’, ‘문서 양식’, ‘무료 자료’ 정도면 방문자가 갈 곳을 고르기 쉽습니다. 같은 내용을 여러 메뉴에 중복해서 넣으면 오히려 망설이게 됩니다. 카테고리를 정할 때는 운영자가 쓰는 말보다 독자가 검색할 법한 말을 기준으로 삼는 게 낫습니다.
글 목록에서는 제목이 가장 먼저 읽혀야 합니다. 썸네일을 크게 넣었는데 제목이 두 줄 아래로 밀린다면 순서를 다시 보세요. ‘PDF 용량 줄이는 방법’처럼 해결할 일이 드러나는 제목, 한 줄 설명, 필요한 경우에만 썸네일을 붙이면 목록이 한결 가벼워집니다.
본문 폭과 글씨를 먼저 맞추기
컴퓨터 화면을 꽉 채운 긴 문장은 읽다가 다음 줄을 찾기 어렵습니다. 본문 영역은 데스크톱에서 대략 680~760픽셀부터 시험해 보고, 휴대폰에서는 화면 양옆에 여백이 남도록 조절해 보세요. 이 수치가 정답은 아닙니다. 실제 글 한 편을 열어 한 줄이 지나치게 길거나 짧지 않은지 보는 게 더 정확합니다.
글자 크기는 본문 16~18픽셀, 줄 간격은 글자 크기의 약 1.5~1.7배를 출발점으로 잡을 만합니다. 다만 사용하는 글꼴에 따라 같은 숫자도 다르게 보입니다. 특히 한글은 획이 빽빽한 글꼴을 작게 쓰면 피로가 빨리 옵니다. 꾸미는 글꼴은 제목 정도에만 쓰고 본문은 익숙한 글꼴로 두는 편이 안정적입니다.
문단은 화면에서 보이는 길이로 판단합니다. 설명이 길어지면 세 문장 안팎에서 끊고, 단계가 바뀌면 소제목을 넣습니다. ‘설치하기’, ‘파일 선택하기’, ‘변환 결과 확인하기’처럼 작업 순서가 보이는 소제목은 목차 없이도 길을 알려줍니다. 굵은 글씨를 모든 문단에 넣기보다 오류 메시지나 저장 형식처럼 놓치기 쉬운 정보에만 쓰는 게 효과적입니다.
색과 이미지는 필요한 곳에만 쓰기
처음 디자인을 손볼 때 버튼마다 다른 색을 주기 쉽습니다. 그런데 다운로드 버튼, 관련 글 버튼, 광고가 모두 눈에 띄면 독자는 무엇부터 눌러야 할지 헷갈립니다. 기본 글자색과 배경색을 정하고, 강조색은 한 가지부터 시작하세요. 링크와 버튼에는 같은 계열의 색을 쓰되 버튼은 모양과 문구로도 역할이 드러나게 합니다.
화면 캡처는 장식보다 설명에 가깝습니다. 메뉴 위치를 알려주는 글이라면 화면 전체를 그대로 올리는 것보다 필요한 부분이 보이도록 잘라 쓰는 편이 낫습니다. 버튼을 찾는 글에는 버튼 주변 맥락이 조금 남아 있어야 하고요. 이미지 아래에는 ‘오른쪽 위 내보내기 버튼을 선택’처럼 다음 행동을 짧게 적으면 캡처만 봐도 흐름을 이어갈 수 있습니다.
한 글에 캡처가 열 장 들어간다면 모두 필요한지 살펴볼 만합니다. 예를 들어 같은 창에서 옵션만 두 번 바뀌는 과정은 한 장의 이미지와 문장으로 설명할 수도 있습니다. 이미지가 많을수록 페이지가 길어지고, 휴대폰에서는 중요한 설명이 화면 밖으로 밀리기 때문입니다.
휴대폰에서 실제 글 한 편으로 점검하기
블로그 첫 화면이 멀쩡해 보여도 본문에서는 문제가 드러납니다. 휴대폰으로 최근 글 하나를 열고 제목부터 마지막 문단까지 직접 내려가 보세요. 표가 화면 밖으로 튀어나오는지, 캡처 속 글씨를 읽을 수 있는지, 버튼을 손가락으로 누르기 편한지 확인하면 됩니다. 가로로 화면을 밀어야 하는 부분이 있다면 독자도 같은 곳에서 멈출 가능성이 큽니다.
점검할 때는 실제 작업도 한 번 따라 해보는 게 좋습니다. 예를 들어 ‘사진 여러 장을 PDF로 만드는 방법’이라면 글을 보며 파일 선택부터 저장까지 진행해 봅니다. 중간에 다음 버튼을 찾으려고 화면을 여러 번 오가게 된다면 디자인과 설명의 순서를 함께 고쳐야 합니다. 단계 바로 아래에 해당 캡처를 놓는 것만으로도 읽는 흐름이 좋아질 수 있습니다.
새 글을 쓸 때마다 모든 요소를 다시 디자인할 필요는 없습니다. 제목, 도입, 단계별 설명, 결과 확인의 순서가 비슷하면 독자가 다음 정보를 예상할 수 있습니다. 파일 작업을 급하게 해결하려고 들어온 사람에게는 화려한 첫인상보다 막히지 않고 끝까지 따라갈 수 있는 화면이 오래 기억에 남습니다.
