WORDPRESS · AI WRITING · PART 04
블로그 이미지 준비부터 워드프레스 삽입까지: 대표 이미지·본문 이미지·ALT 정리
원고를 다 쓰고 나서 이미지를 찾기 시작하면 생각보다 손이 많이 갑니다. 어울리는 그림을 골랐는데 본문과 관련이 약하거나, PC에서는 잘 보이던 화면 캡처가 휴대전화에서는 읽히지 않기도 합니다. 이미지를 세 장 넣었지만 모두 비슷한 장면이라면 독자가 얻는 정보도 크게 늘지 않습니다.
먼저 정할 것은 이미지 개수보다 각 이미지가 맡을 일입니다. 대표 이미지는 글의 주제를 보여주고, 본문 이미지는 독자가 이해하거나 실행하는 데 필요한 장면을 보여줍니다. 이번 글에서는 역할을 정한 뒤 파일을 준비하고, 구텐베르그에 넣어 확인하는 순서로 진행합니다.
3편에서 만든 문체 기준표가 있다면 이미지 기준도 짧게 덧붙여 두세요. 색상과 질감은 이어가되 모든 그림의 구도까지 같게 만들 필요는 없습니다.
1. 이미지를 만들기 전에 한 줄씩 역할 정하기
소제목을 훑으며 ‘이 부분은 무엇을 보여주면 설명이 쉬워질까?’를 적어봅니다. 대표 이미지 한 장과 본문 두세 장은 시작하기 좋은 작업 범위지만, 반드시 채워야 할 수량은 아닙니다. 이미 글로 충분히 설명했다면 이미지를 생략해도 됩니다.
제품 리뷰라면 대표 이미지에는 제품 전체, 본문에는 사용 중인 모습과 판단에 필요한 세부를 담을 수 있습니다. WordPress 사용법에서는 어느 버튼을 누르는지 실제 화면이 도움이 되고, 문체나 편집 판단 같은 추상적인 주제에는 일러스트가 어울립니다.
| 배치 | 역할 | 예시 |
|---|---|---|
| 대표 이미지 | 글 전체 주제 소개 | 글과 이미지가 함께 놓인 작업대 |
| 본문 앞부분 | 선택 기준 설명 | 서로 다른 장면의 이미지 고르기 |
| 본문 중간 | 구체적인 판단 예시 | 잘리면 안 되는 부분 확인 |
| 본문 끝부분 | 발행 전 확인 | 휴대전화 화면에서 확인 |
2. 같은 스타일 안에서 장면은 바꾸기
이미지마다 노트북과 카드 몇 개를 반복하면 색상이 달라도 비슷하게 보입니다. 시리즈의 색상·질감·선 굵기를 유지하면서 시점과 피사체를 바꿔보세요. 넓은 작업 장면, 필요한 부분의 클로즈업, 손이 직접 작업하는 장면을 섞으면 같은 글 안에서도 역할이 구분됩니다.
이 글에서는 전체 작업대, 자료를 고르는 손, 크롭 도구, 휴대전화 확인 장면을 사용했습니다. 모두 설명용 AI 일러스트입니다. 실제 WordPress 화면이나 제품 성능을 입증하는 사진으로 제시하지 않습니다.
버튼 이름이나 오류 메시지를 보여줄 때는 실제 캡처를 사용하세요. AI로 그럴듯한 관리자 화면을 만들면 실제 메뉴와 달라질 수 있습니다. 캡처 전에는 예제용 글과 가상 데이터를 준비하고, 공유할 파일에 계정 정보나 실제 수치가 남지 않았는지 확인합니다.
3. 표시할 위치에 맞춰 자르고 파일 준비하기
먼저 이미지가 놓일 곳을 봅니다. 글 목록의 가로 썸네일과 본문의 세로 화면 캡처는 같은 비율일 필요가 없습니다. 대표 이미지의 피사체는 가장자리에 바짝 붙이지 마세요. 테마가 목록에서 다르게 잘라도 핵심이 남도록 여유를 둡니다. 대표 이미지의 표시 위치와 크기는 테마에 따라 달라집니다. WordPress 대표 이미지 안내를 참고하세요.
예를 들어 가로 일러스트는 1600×900으로 먼저 준비해 볼 수 있습니다. 이는 이 작업에서 사용할 출발점이지 WordPress 필수 규격은 아닙니다. 긴 화면 캡처는 무조건 같은 비율로 자르기보다 설명에 필요한 영역을 남기고 글자가 읽히는지 확인합니다.
사진은 JPEG나 WebP, 선과 작은 글자가 중요한 캡처는 PNG 또는 선명도를 유지한 WebP를 후보로 두고 실제 결과를 비교하세요. 한 가지 형식이나 파일 용량을 모든 이미지의 정답으로 정하지 않습니다. 압축 후에는 작은 글자와 경계가 뭉개지지 않았는지 봅니다.
파일명은 blog-image-crop-example처럼 내용을 구분할 수 있게 짓습니다. Google도 설명적인 파일명, 문맥에 맞는 ALT, 관련 본문 가까이 배치하는 방식을 안내합니다. 이것만으로 검색 순위나 클릭률이 보장되지는 않습니다. Google 이미지 SEO 안내
4. ALT와 캡션에는 서로 다른 일을 맡기기
ALT는 이미지를 보지 못해도 이 문맥에서 필요한 정보를 알 수 있도록 씁니다. 캡션은 화면에 보이는 설명으로, 독자가 어디를 봐야 하는지 짚어줄 수 있습니다. 같은 문장을 두 곳에 그대로 반복하기보다 각각 필요한 내용을 적으세요.
예를 들어 크롭 그림의 ALT는 ‘주황색 주전자의 손잡이와 주둥이를 안쪽에 둔 크롭 프레임’처럼 쓸 수 있습니다. 캡션은 ‘가장자리가 잘려도 설명에 필요한 부분이 남는지 확인합니다’라고 적으면 판단할 기준이 더해집니다.
장식만을 위한 이미지에는 빈 ALT를 사용하는 경우가 있습니다. 링크 역할을 하는 이미지는 이동 목적을 설명해야 할 수 있으므로 무조건 비워두지는 마세요. 그래프의 수치나 복잡한 설명은 짧은 ALT에 몰아넣기보다 본문이나 표에도 제공합니다. W3C 이미지 접근성 안내
5. 구텐베르그에 넣고 언어별로 확인하기
대표 이미지는 글 설정의 대표 이미지 항목에서 지정합니다. 본문에 이미지 블록을 넣는 것과는 별개입니다. 테마가 대표 이미지를 본문 위에 이미 표시한다면 같은 그림을 첫 이미지 블록에 다시 넣었을 때 중복되지 않는지 미리보기에서 확인하세요.
본문에서는 필요한 위치에 이미지 블록을 추가하고 업로드 또는 미디어 라이브러리를 선택합니다. 이미 넣은 그림을 바꾸려면 해당 블록의 교체 기능을 사용합니다. ALT와 캡션을 입력한 뒤 관련 설명 가까이에 배치하세요. 메뉴 위치는 설치 버전에 따라 다를 수 있습니다. WordPress 이미지 블록 안내
한국어와 영어를 함께 운영한다면 이미지 안의 글자도 확인해야 합니다. 글과 ALT만 번역해도 화면 캡처 속 한국어 메뉴는 그대로 남습니다. 실제 사용법을 설명하는 영문 글에는 영문 인터페이스로 촬영한 캡처를 준비하세요. 글자가 없는 개념 일러스트는 공유하고 ALT와 캡션을 언어별로 작성할 수 있습니다.
미디어 설정이나 테마에 따라 대표 이미지의 ALT 처리 방식이 달라질 수 있으므로, 한쪽 언어에서 수정한 설명이 다른 쪽에도 영향을 주는지 실제 페이지에서 확인하세요. 번역 글 연결만으로 이미지 속 글자까지 바뀌었다고 단정하지 마세요.
6. 이미지 요청도 재사용할 수 있게 남기기
AI에게 이미지를 부탁할 때는 먼저 배치 계획을 받고, 필요한 장면을 확정한 뒤 제작하는 편이 수정 범위를 좁히기 쉽습니다. 아래 요청문을 원고와 함께 전달해 보세요.
첨부 원고의 이미지 배치 계획을 먼저 작성해 줘. 대표 이미지와 본문 이미지마다 다음을 적어 줘. - 배치할 소제목과 독자가 이해해야 할 내용 - 필요한 유형: 실제 사진 / 실제 화면 캡처 / 개념 일러스트 - 피사체와 시점, 이전 이미지와 달라야 할 구도 - 비율과 잘리면 안 되는 영역 - 한국어·영어 ALT와 캡션 초안 스타일 기준: 차콜·아이보리·주황색 포인트, 종이 질감. 이미지마다 같은 노트북·카드 구도를 반복하지 마. 개념 일러스트에는 글자를 넣지 마. 실제 화면·데이터·제품 사용 증거가 필요하면 생성하지 말고 필요한 자료를 알려 줘. 제공하지 않은 이미지 URL·미디어 ID·사용 경험은 만들지 마. 확정된 계획에 따라 제작한 뒤 파일과 배치표를 함께 전달해 줘.
7. 마지막 확인은 휴대전화 크기로
초안을 저장하고 다시 엽니다. 대표 이미지와 본문 이미지가 각각 보이는지, 사진 속 핵심이 잘리지 않았는지, 캡션이 너무 길지 않은지 확인합니다. 화면 캡처의 글자가 작다면 이미지 전체를 더 크게 넣는 것만으로 해결하려 하지 말고 필요한 부분을 확대해 별도 컷으로 나눠보세요.
모바일 미리보기뿐 아니라 가능하면 실제 휴대전화에서도 확인합니다. 언어 전환 후 이미지 안의 글자와 ALT·캡션이 맞는지 다시 봅니다. 로딩 속도는 파일만 보고 좋다고 판단하지 말고, 실제 페이지에서 확인한 결과를 기준으로 조정하세요.
다음 글에 넘길 것은 완성 이미지, 배치 위치, 언어별 ALT·캡션, 대표 이미지 지정 여부입니다. 이 정보를 한 묶음으로 두면 같은 설명을 다시 입력하는 일을 줄일 수 있습니다. 5편에서는 이 묶음을 이용해 이미지 업로드와 초안 생성을 자동화하는 방법을 다룹니다.
