홈페이지 사진 교체, 파일만 보내면 끝일까: 시제품 사진 17장을 올리면서 같이 한 일 4가지

요청은 한 줄, 파일은 하나

지방의 한 제조업 고객사(비파괴검사 장비·시제품 제작, 업체명 비공개) 홈페이지입니다. 8월 29일 메일로 "블로그의 시제품 제작 메뉴에 사진을 추가해 달라"는 요청과 압축 파일 하나가 왔습니다. 안에는 사진 17장이 들어 있었고, 파일 이름이 제품 이름이었습니다.

사진을 홈페이지에 올리는 것 자체는 10분이면 됩니다. 나머지 시간은 그 사진이 홈페이지에서 제 역할을 하게 만드는 데 씁니다. 검색에 잡히고, 휴대폰에서 빨리 열리고, 나중에 주소가 깨지지 않게요. 이 글은 그 "나머지"가 무엇인지 적은 기록입니다.

실제로 한 일 4가지

1. 사진 변환: 크기, 용량, 위치정보

휴대폰이나 카메라로 찍은 사진은 한 장에 수 MB인 경우가 많습니다. 그대로 올리면 페이지 하나에 사진이 몇 장만 있어도 휴대폰에서 여는 데 몇 초씩 걸립니다. 그래서 긴 변을 1600픽셀로 맞추고, 화질 손실이 적으면서 용량이 작은 webp 형식으로 바꿨습니다. 17장 합계가 1.0MB, 가장 큰 한 장이 371KB입니다.

사진 파일에는 찍은 기기와 위치 정보가 같이 들어 있는 경우가 있습니다. 공장 사진이면 공장 위치가 그대로 남는 셈입니다. 변환하면서 이 정보는 지웁니다.

2. 한 페이지에 몰지 않고 제품별로 나누기

처음에는 "시제품 갤러리" 페이지 하나를 만들어 17장을 다 넣었습니다. 같은 날 제품별 글 11개로 다시 나눴습니다. 같은 제품을 찍은 사진 2장은 한 글에 묶었습니다.

이유는 검색이 페이지 단위로 움직이기 때문입니다. "산업용 마스크 시제품"을 검색하는 사람에게 갤러리 페이지 하나는 잡히지 않습니다. 제품 이름이 제목, 주소, 사진 설명에 들어간 페이지가 있어야 그 검색어에 나옵니다. 글 11개는 검색어 11개를 받을 수 있는 자리 11개입니다.

파일 이름도 그대로 씁니다. 사진 파일 이름이 IMG_0023 같은 번호면 검색엔진은 그 사진이 무엇인지 알 길이 없습니다. 이 고객사는 파일 이름을 제품 이름으로 보내 주셔서 그 이름을 영문 주소와 사진 설명에 그대로 옮겼습니다.

The filename can give Google very light clues about the subject matter of the image. When possible, use filenames that are short, but descriptive. For example, my-new-black-kitten.jpg is better than IMG00023.JPG.

3. 사이트맵에 새 주소 등록

사이트맵은 "우리 홈페이지에 이런 페이지들이 있다"고 검색엔진에 주는 목록입니다. 새 글 11개의 주소를 여기에 추가했습니다. 이걸 빼먹으면 검색엔진이 다른 페이지의 링크를 타고 우연히 찾을 때까지 기다리게 됩니다.

사이트맵에 글 주소 11개를 추가. 이전의 통합 갤러리 주소와 분할 과정에서 생긴 중복 주소는 제품별 정본 글로 리다이렉트.

4. 옛 주소는 새 글로 넘기기

작업 순서상 처음에 만든 갤러리 주소와, 분할 초기에 잠깐 있었던 "제품-1", "제품-2" 식의 주소가 이미 인터넷에 나가 있었습니다. 그 주소를 그냥 지우면 그 사이 링크를 저장해 둔 사람이나 검색엔진에는 "페이지 없음"이 뜹니다. 옛 주소마다 새 글 주소로 자동으로 넘어가도록 301 리다이렉트를 걸었습니다. 이런 줄이 28개입니다.

9월에 받은 사진 한 장은 가로 280픽셀이었습니다

같은 고객사에서 9월 중순에 사례 글 두 편을 추가로 요청하셨습니다. 이번에는 개바리 보드의 티켓으로 글 본문과 사진이 왔습니다. 그중 한 장이 가로 280, 세로 199 픽셀이었습니다.

이 홈페이지의 글 사진 자리는 폭 1600픽셀 기준입니다. 280을 1600으로 늘리면 뿌옇게 번집니다. 홈페이지는 사진을 줄일 수는 있어도 없는 화소를 만들어 내지는 못합니다. 그래서 그 사진만 절반 크기(폭 560)로 넣어 흐림을 줄이고, 큰 파일이 생기면 보내 달라고 티켓에 적어 두었습니다.

“High-quality photos appeal to users more than blurry, unclear images. Also, sharp images are more appealing to users in the result thumbnail and can increase the likelihood of getting traffic from users.”

검색 결과의 작은 미리보기에서도 선명한 사진이 클릭을 더 받는다는 뜻입니다. 사진이 흐린 홈페이지는 보기에만 안 좋은 게 아니라 검색에서도 손해입니다.

PCB 사례 글의 대표 사진은 280×199 (고객사가 보낸 BMP 파일이 그 크기). 폭 560으로 제한해서 넣고, 더 큰 파일이 생기면 보내 달라고 요청.

전후

위 검사는 이 글을 쓰는 날 다시 실행한 결과입니다.

사장님이 직접 확인할 체크 항목 1개

홈페이지에 넣을 사진을 보내기 전에, 파일 정보에서 가로 픽셀이 1200 이상인지 한 번만 보세요. 아이폰은 사진 앱에서 사진을 열고 위로 쓸어 올리면 크기가 나옵니다. 윈도우는 파일에서 마우스 오른쪽 버튼, 속성, 자세히 순서입니다.

카톡으로 사진을 보내면 기본으로 줄여서 보냅니다. 보낼 때 "원본" 체크를 켜거나, 메일이나 드라이브 링크로 보내 주시면 됩니다. 홈페이지 사진이 흐린 이유는 십중팔구 이겁니다. 메신저를 거치며 줄어든 파일이 홈페이지에서 다시 늘어난 것입니다.

이 작업이면 무료로 봐 드립니다

개바리는 사진 교체, 글 추가 같은 수정을 월 관리 구독 안에서 처리합니다. 사진 몇 장 바꾸고 싶은데 만든 업체와 연락이 안 된다, 올려 놓은 사진이 흐리다 싶으면 무료 수정 3건 안에서 먼저 해 드립니다. 홈페이지 주소와 사진 파일만 보내 주시면 됩니다.

자주 묻는 질문

사진 몇 장 올리는데 왜 이렇게 여러 단계를 거치나요?

올리는 것 자체는 10분입니다. 나머지는 사진이 검색에 잡히고, 휴대폰에서 빨리 열리고, 나중에 주소가 깨지지 않게 하는 일입니다. 이걸 빼면 사진은 보이지만 아무도 찾지 못하는 페이지가 됩니다.

홈페이지를 만든 업체와 연락이 안 되는데 사진만 바꿀 수 있나요?

홈페이지 관리 화면이나 파일이 올라가 있는 곳의 접속 정보가 있으면 대부분 됩니다. 접속 정보가 전혀 없으면 도메인 소유 확인부터 같이 진행합니다.

카톡으로 보낸 사진은 쓸 수 없나요?

쓸 수는 있지만 줄어든 파일이 옵니다. 보낼 때 원본 체크를 켜 주시면 됩니다. 이미 보낸 사진이 작으면 위 사례처럼 작게 넣고 큰 파일을 다시 받습니다.