글의 커버 이미지를 고를 때 많은 사람이 먼저 '보기 좋은 사진'을 찾습니다. 하지만 기업 웹사이트의 콘텐츠 운영에서 커버 이미지는 정보의 입구에 가깝습니다. 독자가 목록 페이지, 검색 결과, 공유 카드에서 이미지를 보는 순간 이 글이 어떤 서비스와 관련 있는지, 클릭할 가치가 있는지 빠르게 판단해야 하기 때문입니다. 그래서 '서비스 이미지에 어떤 정보를 넣어야 하는가'라는 질문의 답은 서비스 정보를 전부 넣는 것이 아니라, 작은 크기에서도 이해할 수 있는 소수의 내용을 고르는 것입니다.
이미지가 맡아야 할 역할부터 정하기
서비스 이미지는 보통 세 위치에 나타납니다. 카테고리 목록 페이지의 썸네일, 글 상세 페이지 상단의 큰 이미지, 그리고 공유될 때 표시되는 썸네일 카드입니다. 세 위치의 공통점은 크기가 제한적이고 독자의 시선이 머무는 시간이 짧다는 점입니다. 따라서 이미지의 첫 번째 역할은 '식별 가능성'이고, 두 번째 역할이 '보기 좋음'입니다.
이미지가 적합한지 판단하는 간단한 방법이 있습니다. 목록 페이지에서 실제로 보이는 크기로 줄인 뒤, 이 글을 모르는 동료에게 보여주고 '이 글은 대략 어떤 서비스에 관한 것 같나요'라고 물어보세요. 상대가 답하지 못한다면 이미지가 담은 정보가 부족하거나 너무 복잡하다는 뜻입니다.
서비스 이미지에 넣기 좋은 정보
제한된 영역 안에서 비교적 안정적으로 활용할 수 있는 정보는 다음과 같습니다.
서비스 이름 또는 핵심 동작
글이 특정 서비스를 중심으로 다룬다면, 이미지에 서비스 이름이나 그 서비스를 대표하는 동작을 넣는 것이 추상적인 패턴보다 효과적입니다. 이름은 관리 화면, 내비게이션, 글 제목에서 쓰는 표현과 일치해야 하며, 같은 서비스가 페이지마다 서너 가지 이름으로 불리는 일을 피해야 합니다.
예를 들어 기업 웹사이트에 '설비 설치 및 시운전' 서비스가 있다면, 커버 이미지에 이 표현이 들어갔을 때 독자는 목록 페이지에서 '설비 선정'이나 '사후 수리'와 구분할 수 있습니다. 여기서 서비스명은 예시일 뿐이며, 실제로는 웹사이트에 이미 있는 카테고리 명칭을 기준으로 해야 합니다.
서비스 대상 또는 상황
같은 서비스라도 대상 고객이 다를 수 있습니다. 이미지에 대상이나 상황을 표시하면 독자가 자신과 관련 있는지 판단하는 데 도움이 됩니다. 예를 들어 공장 작업장을 대상으로 하는 서비스와 사무 공간을 대상으로 하는 서비스는 각각에 맞는 환경 요소를 사용할 수 있습니다.
상황 요소는 사실적이고 흔한 것이어야 하며, 지나치게 연출된 소재는 피하는 것이 좋습니다. 작업대, 설비, 작업 환경이 보이는 사진이 단색 배경에 아이콘만 있는 이미지보다 이해하기 쉬운 경우가 많습니다.
브랜드 표시
기업 웹사이트의 글 커버에는 통일된 브랜드 표시를 유지할 수 있습니다. 예를 들어 고정된 위치의 로고나 일관된 색상 블록입니다. 이는 같은 카테고리의 글이 목록 페이지에서 하나의 그룹처럼 보이게 하고, 글마다 스타일이 제각각인 상황을 줄여줍니다.
브랜드 표시는 너무 크지 않아야 합니다. 로고가 이미지의 주요 면적을 차지하면 서비스 정보가 밀려나 독자가 글 내용을 파악하기 어려워집니다.
글 주제와 일치하는 보조 요소
아이콘, 선, 색상 블록 같은 보조 요소는 카테고리나 글 유형을 구분하는 데 쓸 수 있지만, 주제에 도움이 되어야 합니다. 예를 들어 조작 방법을 다루는 글에는 도구나 단계를 연상시키는 요소를, 설명형 글에는 상황 사진을 넣을 수 있습니다. 보조 요소가 너무 많으면 이미지가 콜라주처럼 보여 오히려 이해 부담이 커집니다.
서비스 이미지에 넣지 않는 것이 좋은 정보
다음 내용은 커버 이미지에 넣었을 때 얻는 것이 적고, 오히려 오해를 부를 수 있습니다.
- 긴 문장: 썸네일 크기에서는 읽을 수 없고 화면만 답답해집니다.
- 구체적인 가격과 프로모션 정보: 변경될 때마다 해당 이미지를 쓰는 모든 글을 수정해야 해 유지 비용이 큽니다.
- 검증되지 않은 약속성 표현: 이미지도 대외적으로 보이는 콘텐츠이므로 확인할 수 없는 효과 약속을 넣지 않아야 합니다.
- 글과 무관한 장식 이미지: '이미지가 있느냐'만 해결할 뿐, '독자가 내용을 판단할 수 있느냐'는 해결하지 못합니다.
- 출처가 불분명한 이미지: 기업 웹사이트에서 사용하는 이미지는 합법적 사용이 확인되어야 하며, 나중에 교체하거나 내려야 하는 상황을 피해야 합니다.
이미지 준비와 파일 이름 지정 방법
어떤 정보를 넣을지 정했다면, 팀이 이미지를 지속적으로 활용할 수 있어야 합니다. 다음 순서로 준비할 수 있습니다.
- 해당 서비스의 웹사이트 표준 명칭, 자주 쓰이는 상황, 관련 카테고리를 먼저 정리해 이미지 정보의 기준으로 삼습니다. 매번 새로 고민하지 않도록 합니다.
- 용도별 이미지 크기를 준비합니다. 목록 썸네일, 상세 페이지 상단 이미지, 공유 카드는 비율이 다를 수 있으므로 각 위치의 요구 사항을 미리 확인해 같은 이미지를 억지로 늘리는 일을 피합니다.
- 파일 이름에 서비스명과 용도를 포함합니다. 예를 들어 '설비-설치-시운전-커버-목록'처럼 지정하면 관리자 미디어 라이브러리에서 검색하고 교체하기 쉽습니다.
- 같은 서비스에 대해 한두 장의 대체 이미지를 준비합니다. 글이 많을 때 돌려 쓸 수 있지만 스타일은 통일합니다.
- 이미지를 압축한 뒤 업로드해 파일 크기 때문에 페이지 로딩이 느려지지 않도록 합니다. 구체적인 압축 설정은 실제 표시 결과에 따라 조정할 수 있습니다.
발행 전 점검 목록
이미지를 업로드한 뒤에는 발행 전에 몇 가지를 확인하는 것이 좋습니다. 별도 도구 없이 페이지를 열어 확인할 수 있습니다.
- 커버를 목록 페이지의 실제 크기로 줄여 서비스 이름이나 핵심 요소가 여전히 식별되는지 확인합니다.
- 이미지 정보가 글 제목과 본문에서 다루는 서비스와 일치하는지 대조해 혼동을 피합니다.
- 이미지가 변형되지 않았는지, 잘라내기로 중요한 부분이 잘리지 않았는지 확인합니다.
- 이미지 대체 텍스트가 입력되어 있고, 그 내용이 이미지와 글의 관계를 설명하는지 확인합니다.
- 휴대폰과 컴퓨터에서 각각 한 번씩 보며 썸네일 위치가 인터페이스 요소에 가려지지 않았는지 확인합니다.
글 유형에 따라 이미지의 강조점을 달리할 수 있습니다
서비스 이미지가 모든 글에 같은 템플릿을 적용할 필요는 없습니다. 글 유형에 따라 강조점을 조정할 수 있습니다. 서비스 소개 글은 서비스 이름과 상황을 중심으로, 조작 단계 글은 동작이나 도구 요소를 중심으로, 자주 묻는 질문 글은 통일된 질의응답형 시각 스타일로 구분할 수 있습니다. 사이트 개편이나 콘텐츠 정리 글은 자료, 목록 같은 요소를 활용할 수 있습니다.
이렇게 하면 독자가 제목을 하나하나 읽지 않고도 목록 페이지에서 글 유형을 대략 구분할 수 있습니다.
현재 웹사이트의 글 커버 스타일이 혼란스럽다면, 사용 빈도가 가장 높은 한두 개 서비스부터 시작해 이미지 정보, 크기, 파일 이름 지정 방식을 통일한 뒤 다른 서비스로 확장하는 것이 좋습니다. 정리 과정에서 교체가 필요한 이미지를 함께 기록해두면 한 번에 전면 개편하는 것보다 실행하기 쉽습니다.
