상세페이지 이미지 준비하기

긴 이미지 한 장의 문제

상세페이지를 이미지 한 장으로 길게 만드는 방식이 흔합니다. 만들기는 편하지만 몇 가지가 걸립니다.

파일이 큽니다. 전부 받기 전까지 아무것도 안 보입니다. 이동통신망에서는 빈 화면을 한참 봐야 합니다.

일부가 깨지면 전체가 안 보입니다. 나눠 두었다면 한 장만 문제가 됩니다.

그리고 이미지 안의 글자는 검색되지 않고, 화면 낭독기로도 읽히지 않습니다. 복사할 수도 없습니다.

나눠서 올립니다

내용 단위로 몇 장으로 나눕니다. 위에서부터 순서대로 뜨므로 방문자가 먼저 읽기 시작할 수 있습니다.

각 장의 세로 길이를 너무 길게 잡지 않습니다. 한 화면에 들어오는 정도가 다루기 편합니다.

나눈 이미지를 한 번에 처리하려면 여러 파일을 함께 다루는 기능이 있으면 편합니다.

글자는 밖으로

설명 문구를 이미지에 박아 넣는 대신 본문 텍스트로 두면 여러 문제가 한 번에 풀립니다.

검색에 잡히고, 화면 낭독기로 읽히고, 복사할 수 있고, 나중에 문구만 고칠 수 있습니다. 이미지에 박아 두면 오타 하나에 이미지를 다시 만들어야 합니다.

이미지에는 실제로 보여 줘야 하는 것 — 사진, 도표, 색상 견본 — 을 담고 설명은 밖에 두는 구성이 관리하기 좋습니다.

휴대폰 폭을 기준으로

대부분 휴대폰에서 봅니다. 데스크톱 화면 폭을 기준으로 만들면 휴대폰에서 글자가 작아 읽히지 않습니다.

휴대폰 화면 폭에서 읽히는 크기로 만들고, 데스크톱에서는 가운데 정렬해 적당한 폭으로 두는 방식이 흔합니다.

만들고 나면 반드시 실제 기기에서 봅니다. 편집 화면에서 괜찮아 보이는 것과 손에 쥐고 보는 것은 다릅니다.