[구글 애드센스 #14] 블로그 이미지, 넣기 전에 확인할 여섯 가지
글을 열몇 편 쓰면서 화면 캡처를 계속 넣었습니다. 처음에는 그냥 올리면 되는 줄 알았는데, 몇 번 겪고 나서야 규칙이 생겼습니다.
이미지를 예쁘게 만드는 이야기가 아닙니다. 넣은 이미지가 제 역할을 하게 만드는 이야기입니다.
이미지는 장식이 아닙니다
글이 길면 이미지를 넣어야 한다고들 합니다. 틀린 말은 아닌데, 그 이유가 "허전해서"라면 안 넣는 편이 낫습니다.
제가 쓰는 기준은 두 가지입니다.
| 넣는 경우 | 이유 |
|---|---|
| 말로 설명하기 어려울 때 | 화면 위치, 버튼 생김새 |
| 주장의 근거가 될 때 | 실제로 이렇게 나왔다는 증거 |
※ 둘 다 아니면 넣지 않습니다.
근거로 넣었는데 반대로 읽힌 경우
실제로 겪은 일입니다. 워드프레스 관리가 번거로웠다는 이야기를 쓰면서, 플러그인 업데이트 알림 메일을 캡처해 넣었습니다.
그런데 다시 보니 그 메일에는 "추가 작업은 필요 없습니다"라고 적혀 있었습니다. 관리가 번거롭다는 근거로 넣은 이미지가, 오히려 알아서 잘 관리해준다는 인상을 주고 있었습니다.
이미지를 넣기 전에 한 번 더 볼 것은 이게 내 문장을 뒷받침하는가입니다. 관련 있어 보인다고 다 근거가 되지는 않습니다.
캡처는 필요한 부분만
화면 전체를 그대로 올리면 두 가지 문제가 생깁니다.
첫째, 어디를 보라는 건지 알 수 없습니다. 설정 화면 전체를 올려두고 "여기서 이걸 누르세요"라고 하면 독자가 찾아야 합니다.
둘째, 세로로 길어집니다. 세로가 긴 캡처를 그대로 넣으면 화면을 한참 차지해서, 독자가 스크롤하다 흐름을 놓칩니다.
필요한 부분만 잘라내면 둘 다 해결됩니다. 가로로 넓게 자르면 본문 흐름에도 잘 붙습니다.
올리기 전에 확인할 것
화면 캡처에는 생각보다 많은 것이 같이 찍힙니다.
| 확인할 것 | 어디에 나오나 |
|---|---|
| 계정 이름 · 이메일 | 화면 우측 상단 |
| 전화번호 | 관리 화면 개인정보란 |
| 결제 정보 · 금액 | 서비스 이용 내역 |
| 관리자 전용 주소 | 주소창 |
| 다른 탭 제목 | 브라우저 상단 |
한번 발행하면 검색엔진의 이미지 검색에도 잡힙니다. 나중에 글에서 지워도 이미 수집된 것은 남을 수 있습니다. 올리기 전에 확인하는 편이 확실합니다.
가장 간단한 방법은 계정 정보가 나오는 영역을 아예 잘라내는 것입니다. 가리는 것보다 자르는 쪽이 실수가 적습니다.
크기를 키웠는데 흐려지는 문제
여기서 한참 헤맸습니다.
이미지를 넣었는데 글씨가 작아 안 읽혀서, 코드의 폭 값을 320에서 640으로 바꿨습니다. 그런데 크기만 커지고 글씨는 여전히 뭉개져 있었습니다.
원인은 이미지 주소에 있었습니다. 블로그스팟은 업로드한 이미지를 여러 크기로 만들어두고, 주소 안의 값으로 어느 크기를 내보낼지 정합니다.
.../s320/파일이름.png ← 320픽셀짜리를 내보냄 .../s640/파일이름.png ← 640픽셀짜리를 내보냄
즉 폭 값만 640으로 바꾸면 320짜리 작은 이미지를 억지로 늘리는 셈입니다. 당연히 흐려집니다.
주소의 값과 폭 값을 함께 바꿔야 합니다.
| 바꿀 곳 | 전 | 후 |
|---|---|---|
| 주소 안의 값 | s320 | s640 |
| 폭 지정 | width="320" | width="640" |
※ 둘 중 하나만 바꾸면 흐려지거나 작게 나옵니다.
대체 텍스트
쓰는 원칙은 하나입니다. 보이는 것을 담담하게 적는 것.
| 피할 것 | 대신 |
|---|---|
| 비워두기 | 한 문장으로 설명 |
| 키워드 나열 | 화면에 있는 것만 |
| 해석 넣기 | 해석은 본문이 담당 |
| "이미지1" 같은 표기 | 내용을 알 수 있게 |
예를 들어 설정 화면을 캡처했다면 "블로그스팟 설정의 측정 ID 입력 화면" 정도면 충분합니다. 여기에 "애드센스 수익화 필수 설정"처럼 키워드를 욱여넣으면 역효과입니다. 검색에서 스팸으로 볼 수 있고, 화면을 못 보는 사람에게는 아무 정보가 안 됩니다.
설정 창보다 코드에 직접
편집기에서 이미지를 클릭하면 대체 텍스트 입력 칸이 나옵니다. 그런데 그 화면을 거치는 것 자체가 서식이 정리되는 계기가 됩니다.
그래서 저는 이미지 코드 안에 직접 써넣습니다. 이미지 태그 끝에 대체 텍스트를 적어두면 편집기를 거칠 일이 없습니다.
여러 장을 나란히 넣을 때
이미지 두 장을 연달아 넣었더니 한 장처럼 보였습니다. 어디서 끊기는지 알 수 없어서 무슨 그림인지 파악이 안 됐습니다.
각 이미지 아래에 한 줄짜리 설명을 넣으니 바로 해결됐습니다.
그리고 폭은 맞추는 편이 낫습니다. 세로 길이는 달라도 상관없지만 가로가 들쭉날쭉하면 어긋나 보입니다.
비교를 보여줄 때는 아예 한 장으로 합치는 방법도 있습니다. 위아래로 붙이고 각각에 라벨을 달면, 스크롤 없이 차이가 한눈에 들어옵니다.
정리
| 순서 | 할 일 |
|---|---|
| 1 | 이 이미지가 문장을 뒷받침하는지 확인 |
| 2 | 필요한 부분만 잘라내기 |
| 3 | 계정 정보가 나오는 영역 제거 |
| 4 | 주소 값과 폭 값을 함께 지정 |
| 5 | 대체 텍스트를 코드에 직접 입력 |
| 6 | 여러 장이면 설명으로 구분 |
여섯 개지만 익숙해지면 이미지 한 장에 1분이 안 걸립니다. 처음에 규칙을 정해두지 않아서 발행 후에 다시 손보는 일이 반복됐는데, 순서를 정하고 나서는 그럴 일이 없어졌습니다.
댓글
댓글 쓰기