워드프레스블로그에 이미지와 PDF 올리는 방법

얼마 전 워드프레스블로그에 작업 안내문을 올리다가 사진 한 장 때문에 페이지가 유난히 늦게 열리는 걸 봤습니다. 원본 사진이 8MB였는데, 화면에서는 가로 800픽셀 정도로만 보이더군요. 파일을 올리는 일 자체는 간단하지만, 올리기 전에 크기와 용도를 맞추면 방문자가 읽고 내려받는 과정이 훨씬 편해집니다.

이미지는 올리기 전에 크기부터 줄입니다

휴대전화로 찍은 사진은 가로 길이가 4000픽셀을 넘는 경우가 흔합니다. 블로그 본문에 그렇게 큰 원본을 그대로 넣을 이유는 거의 없습니다. 먼저 글에서 이미지가 표시될 너비를 생각하고, 일반적인 본문 사진이라면 가로 1200~1600픽셀 정도로 줄여 보세요. 확대해서 세부 사항을 보여줘야 하는 캡처라면 글자가 읽히는 크기를 우선합니다.

파일 형식도 내용에 맞춰 고르면 됩니다. 사진은 JPEG나 WebP, 투명한 배경이 필요한 그림은 PNG가 편합니다. 메뉴와 작은 글자가 들어간 화면 캡처는 JPEG로 저장하면 글자 주변이 번져 보일 수 있어 PNG가 나을 때가 많습니다. 다만 형식만 바꾼다고 반드시 작아지는 건 아닙니다. 저장한 뒤 파일 크기와 실제 화면을 함께 확인해야 합니다.

• 사진 원본을 복사해 두고, 블로그에 올릴 사본의 가로 크기를 줄입니다.
• 기본 사진 앱이나 이미지 편집 도구의 내보내기 기능으로 저장합니다.
• 글자와 경계선이 깨지지 않는지 확인한 뒤 업로드합니다.

예를 들어 8MB 사진을 300KB 안팎으로 줄일 수 있다면 한 페이지에 사진 다섯 장을 넣을 때 차이가 큽니다. 이 수치는 목표치가 아니라 비교 기준입니다. 제품 사진의 작은 글씨가 뭉개진다면 용량을 조금 늘리는 편이 낫습니다.

파일 이름과 설명은 업로드 전에 챙깁니다

워드프레스의 미디어 라이브러리에서 이미지를 바로 올릴 수도 있지만, 파일 이름부터 손보면 나중에 찾기가 쉽습니다. 카메라가 만든 임의의 숫자 대신 ‘pdf-압축-전후-비교’처럼 내용을 알 수 있는 이름을 쓰면 됩니다. 같은 이름의 파일을 여러 번 올리기보다는 수정본에 버전이나 날짜를 붙여 구별하세요.

글에 이미지를 넣을 때는 대체 텍스트도 작성합니다. 이미지를 볼 수 없는 사람이 내용을 이해하도록 돕는 설명입니다. ‘이미지’나 ‘사진’이라고만 적기보다 ‘압축 전 8MB, 압축 후 320KB로 표시된 파일 정보’처럼 사진에서 전달하려는 정보를 쓰는 편이 유용합니다. 단순한 장식 그림이라면 설명이 필요한 정보인지 먼저 판단하면 됩니다.

여기서 자주 놓치는 게 개인정보입니다. 캡처 화면에 이름, 이메일, 주문 번호가 남아 있지 않은지 확대해서 확인하세요. PDF 표지의 작성자 정보뿐 아니라 문서 속성에 남은 작성자 이름도 살펴보는 게 좋습니다. 파일을 업로드한 뒤에는 삭제하거나 교체해도 이전 파일을 받은 사람의 복사본까지 회수할 수는 없습니다.

PDF는 읽는 방식에 맞춰 넣습니다

문서 양식이나 체크리스트를 제공할 때는 먼저 방문자가 화면에서 읽을지, 내려받아 편집할지 구분합니다. 내용을 바로 읽게 할 자료라면 중요한 설명을 본문에도 적고 PDF를 곁들이는 편이 좋습니다. PDF에만 안내를 담으면 휴대전화에서 파일을 열기 전까지 무엇이 들어 있는지 알기 어렵습니다.

워드프레스 편집기에서는 파일을 업로드한 뒤 글에 파일 블록이나 다운로드용 링크를 넣을 수 있습니다. 편집기 화면과 공개된 글의 모습은 다를 수 있으니 게시 전에 미리보기에서 버튼 이름과 파일 열림 방식을 확인하세요. 버튼에는 ‘자료 받기’보다 ‘월간 지출표 PDF 받기’처럼 파일 내용을 적으면 방문자가 선택하기 쉽습니다.

스캔한 종이 문서는 이미지로만 저장된 PDF일 수 있습니다. 이런 파일은 글자를 선택하거나 검색하기 어렵고 용량도 커지기 쉽습니다. 가능하다면 원본 문서에서 바로 PDF로 내보내고, 스캔본만 있다면 문자 인식 기능을 사용해 검색이 되는지 확인합니다. 압축을 할 때도 표의 작은 글씨와 서명 칸이 흐려지지 않았는지 한 페이지씩 보는 게 안전합니다.

게시 후에는 방문자처럼 한 번 열어봅니다

업로드가 끝나면 관리자 화면에서만 확인하지 말고 공개된 글을 휴대전화에서도 열어봅니다. 사진이 지나치게 크게 잘리지는 않는지, PDF 버튼을 눌렀을 때 의도한 파일이 열리는지, 파일 이름과 설명이 맞는지 확인합니다. 특히 기존 파일을 새 버전으로 바꿨다면 글 안의 다운로드 버튼이 예전 파일을 가리키고 있지 않은지 점검해야 합니다.

자료를 자주 배포한다면 원본, 블로그용 사본, 게시한 최종본을 폴더에서 구분해 두면 편합니다. ‘양식-원본’, ‘양식-배포용’처럼 단순한 이름이면 충분합니다. 수정이 생겼을 때 어느 파일을 다시 내보내야 하는지 금방 찾을 수 있고, 실수로 편집 가능한 원본을 공개하는 일도 줄어듭니다.

워드프레스블로그에서 파일을 잘 다루는 기준은 특별한 도구보다 방문자가 겪는 과정에 있습니다. 페이지가 무리 없이 열리고, 그림의 글자가 읽히고, 필요한 문서를 정확히 받을 수 있다면 파일 준비에 들인 몇 분이 제 몫을 한 셈입니다.