블로그꾸미기 처음이라면 이렇게 세팅하는 방법
처음부터 화려하게 가지 않는 이유
얼마 전 지인이 PC 견적 글을 올리는 블로그를 새로 만들었는데, 첫 화면을 보자마자 예전 윈도우 튜닝하던 시절이 떠올랐습니다. 배경은 움직이고, 위젯은 네 개나 떠 있고, 글 목록보다 배너가 먼저 보였습니다. 보기에는 열심히 꾸민 티가 나는데 막상 글을 읽으려니 눈이 먼저 피곤해졌습니다.
블로그꾸미기도 PC 세팅이랑 비슷합니다. RGB 팬을 10개 달아도 공기 흐름이 막히면 온도는 올라갑니다. 블로그도 장식이 많다고 좋은 게 아닙니다. 방문자가 들어와서 제목을 보고, 글을 누르고, 본문을 읽는 흐름이 막히지 않아야 합니다.
처음 세팅할 때는 세 가지부터 보는 게 좋습니다. 첫 화면에서 글 제목이 잘 보이는지, 모바일에서 메뉴가 눌리는지, 본문 글자가 오래 읽어도 피곤하지 않은지입니다. 이 세 가지가 잡히면 나머지는 취향을 얹어도 크게 무너지지 않습니다.
블로그꾸미기 기본값은 가독성부터 맞추기
제가 블로그 스킨을 만질 때 제일 먼저 보는 건 폰트 크기입니다. 데스크톱 기준 본문은 보통 16px보다 17~18px이 읽기 편합니다. 줄 간격은 1.6 전후가 무난합니다. 너무 촘촘하면 윈도우 메모장에 로그 파일 띄워놓은 느낌이 나고, 너무 넓으면 글이 괜히 늘어져 보입니다.
색상도 중요합니다. 검은 배경에 흰 글자는 순간적으로는 강해 보이지만 긴 글에서는 피로도가 빨리 옵니다. PC 오류 해결 글처럼 스크린샷, 경로, 명령어가 섞이는 글이라면 배경은 밝게, 본문 글자는 짙은 회색 계열로 두는 편이 안정적입니다. 완전한 검정 글자보다 #222나 #333 정도가 눈에 덜 부담스럽습니다.
- 본문 글자 크기: 17~18px 권장
- 줄 간격: 1.55~1.75 사이가 무난
- 본문 폭: 데스크톱 기준 680~760px 정도
- 강조색: 링크, 버튼, 카테고리에만 제한적으로 사용
본문 폭은 생각보다 많이 놓칩니다. 화면이 넓다고 글줄까지 길어지면 읽는 속도가 떨어집니다. 32인치 모니터에서 한 줄이 너무 길게 늘어지는 블로그를 보면, 사양표는 좋은데 케이블 정리가 엉망인 본체를 보는 느낌입니다. 글은 적당히 좁아야 리듬이 생깁니다.
첫 화면은 방문자의 동선으로 잡기
블로그 첫 화면에 모든 걸 보여주고 싶은 마음은 이해합니다. 인기글, 최신글, 프로필, 광고, 검색창, 카테고리, 배너까지 올려두면 뭔가 꽉 찬 느낌이 납니다. 그런데 실제 방문자는 대부분 검색으로 특정 글에 들어옵니다. 그래서 블로그꾸미기에서 중요한 건 대문보다 글 상세 페이지입니다.
특히 PC 조립이나 윈도우 오류 글을 읽는 사람은 급합니다. 부팅이 안 되거나, 드라이버가 꼬였거나, 게임 프레임이 이상해서 검색했을 확률이 높습니다. 이때 상단에 큰 이미지와 긴 소개 문구가 계속 나오면 이탈이 빨라집니다. 본문으로 내려가는 길은 짧게 만드는 게 낫습니다.
메뉴는 적게, 이름은 직관적으로
카테고리 이름도 멋을 부리기보다 바로 이해되는 쪽이 좋습니다. 예를 들어 ‘Tech Lab’보다 ‘윈도우 오류’, ‘PC 조립’, ‘부품 추천’, ‘최적화 기록’처럼 쓰는 편이 클릭 판단이 빠릅니다. 블로그 주제가 명확하다면 메뉴는 5개 안쪽으로도 충분합니다.
검색창은 상단이나 사이드바에서 바로 보이게 두는 게 좋습니다. 오래 운영한 블로그일수록 방문자는 최신 글보다 특정 증상을 찾습니다. ‘0xc000 오류’, ‘램 오버 실패’, ‘DP 신호 없음’ 같은 키워드를 바로 넣을 수 있어야 체류 시간이 늘어납니다.
이미지와 광고는 속도를 보면서 넣기
블로그꾸미기에서 가장 흔한 실수가 고해상도 이미지를 그대로 올리는 겁니다. 요즘 스마트폰 사진 한 장이 4~8MB 나오는 경우도 흔합니다. 글 하나에 이런 이미지가 10장 들어가면 모바일에서는 꽤 무겁습니다. 와이파이에서는 괜찮아 보여도 LTE나 지하철 환경에서는 로딩이 바로 느껴집니다.
PC 하드웨어 글이라면 사진은 중요합니다. 케이블 방향, 슬롯 위치, 바이오스 화면은 말보다 이미지가 빠릅니다. 다만 원본 그대로 올리기보다 가로 1200px 안팎으로 줄이고, JPG 품질을 75~85% 정도로 맞추면 체감 품질은 크게 안 떨어지면서 용량은 많이 줄어듭니다.
- 스크린샷: PNG가 선명하지만 용량 확인 필요
- 제품 사진: JPG 압축 후 업로드
- 긴 설명 이미지: 본문 텍스트로 분리
- GIF: 꼭 필요한 장면에만 사용
광고도 비슷합니다. 광고가 나쁜 게 아니라 위치가 문제입니다. 첫 문단 위, 소제목 바로 아래, 이미지 사이마다 광고가 들어가면 글의 흐름이 끊깁니다. 특히 오류 해결 글은 순서가 생명이라 중간에 시선이 튀면 사용자가 단계를 놓치기 쉽습니다. 광고는 본문 흐름을 막지 않는 위치에 적당히 두는 쪽이 오래 갑니다.
스킨을 바꾸기 전 체크할 것들
스킨을 바꾸면 분위기는 확 달라집니다. 근데 운영 중인 블로그라면 바로 적용하기 전에 꼭 확인할 게 있습니다. 기존 글의 표, 코드 박스, 이미지 폭, 목차 링크가 깨지지 않는지 봐야 합니다. 예전에 스킨만 바꿨다가 예전 윈도우 설치 가이드의 단계 번호가 전부 이상하게 밀린 적이 있었습니다. 방문자는 새 디자인보다 깨진 본문을 먼저 봅니다.
가능하면 대표 글 5개 정도를 골라 테스트하면 됩니다. 긴 글, 이미지 많은 글, 표가 있는 글, 댓글 많은 글, 모바일 유입이 많은 글을 각각 하나씩 보면 문제가 빨리 드러납니다. 이건 새 파워서플라이 달고 바로 케이스 닫기 전에 부팅 테스트하는 과정과 같습니다.
모바일 화면은 따로 봐야 합니다
데스크톱에서 예쁜 블로그가 모바일에서도 좋은 건 아닙니다. 모바일에서는 사이드바가 아래로 밀리고, 메뉴가 접히고, 광고가 본문 중간에 들어옵니다. 그래서 실제 휴대폰으로 글 하나를 끝까지 내려보는 게 가장 확실합니다. 버튼이 너무 작거나, 표가 화면 밖으로 밀리거나, 이미지 캡션이 겹치면 바로 손봐야 합니다.
블로그꾸미기는 결국 예쁜 부품을 고르는 일이 아니라 사용자가 글을 편하게 읽게 만드는 세팅에 가깝습니다. 꾸민 티가 덜 나도 읽기 편하면 다시 들어옵니다. 오래 가는 블로그는 첫인상보다 본문에서 신뢰가 쌓입니다. 저는 그래서 스킨을 만질 때마다 장식 하나를 추가하기 전에, 이게 글 읽는 데 실제로 도움이 되는지부터 봅니다.
