제품 이미지 글자, 어디까지 작아져도 읽히나

제품 이미지 안의 글자는 화면에 실제로 보이는 크기에서 높이 12px 이상이면 대체로 읽힙니다. 어려운 것은 한 장이 한 크기로만 쓰이지 않는다는 점입니다 — 같은 파일이 목록 칸에서는 가로 200px대로, 상세 화면에서는 700px대로 보입니다. 그래서 원본에서 몇 px로 쓸지가 아니라 줄어든 뒤 몇 px로 남는지를 먼저 계산합니다. 기기와 화면마다 다르니 실제 화면에서 한 번 확인합니다.

같은 한 장이 몇 가지 크기로 보이나요

제품 컷 한 장은 보통 네 자리에 들어갑니다. 자리마다 보이는 폭이 다르고, 원본 폭을 그 폭으로 나눈 값이 축소 배율입니다.

보이는 자리	보이는 가로 폭	원본 1000px 기준	남길 글자
목록·검색 결과 칸	160~260px	1/4~1/6로 축소	없음 — 형태와 색만
상세 화면 본문	600~800px	거의 그대로	핵심 한두 단어
확대해서 보는 화면	원본 그대로	1배	세부 표기까지
사회관계망·배너 자리	300~500px	1/2~1/3로 축소	짧은 한 줄

배율만 알면 원본에 필요한 글자 높이가 바로 나옵니다. 보이는 자리에서 필요한 높이 × 배율입니다. 목록 칸에서 12px로 읽히게 하려면 1/5로 줄어드는 원본에서 60px가 필요한데, 그만한 글자는 제품을 거의 덮습니다. 그래서 목록 칸용 한 장에는 글자를 넣지 않고 형태와 색만 남깁니다.

여기서 갈리는 결정이 하나 있습니다. 한 장으로 네 자리를 다 덮으려 하면 글자가 가장 작게 보이는 자리에 맞추게 되고, 그러면 큰 화면에서 글자가 지나치게 큽니다. 자리가 두 개를 넘으면 같은 사진으로 파일을 두 벌 만드는 편이 빠릅니다 — 글자 없는 한 장과 글자 있는 한 장입니다. 사진 자체는 같으니 배경을 새로 만드는 일은 없습니다.

글자 높이와 굵기는 어떻게 잡나요

글자 성격	보이는 화면에서	가로 1000px 원본에서
한 단어 강조	20px 이상	28~40px
읽어야 하는 한 줄	14~16px	20~28px
용량·성분 같은 표기	12px 이상	16~20px
그보다 작은 글자	넣지 않습니다	글 영역으로 옮깁니다

높이만큼 굵기도 함께 봅니다. 획이 얇은 서체는 줄어들 때 획부터 끊깁니다 — 작게 쓸 글자는 크기를 키우기 전에 한 단계 굵은 서체로 바꾸는 쪽이 더 잘 듣습니다. 글자와 그 뒤 배경의 밝기 차이도 같이 봅니다. 사진 위에 바로 얹은 글자는 사진의 밝은 부분에서 사라지므로, 글자 뒤에 반투명 판을 깔거나 글자를 사진의 빈 자리로 옮깁니다. 밝기 차이는 대비를 재 주는 도구로 확인할 수 있고, 본문에 해당하는 글자는 4.5:1 이상을 기준으로 잡습니다.

글자 사이 간격도 줄어들면 달라집니다. 크게 볼 때 멋있어 보이라고 자간을 좁혀 두면 축소된 뒤 글자끼리 붙어 한 덩어리로 보입니다. 작게 쓸 글자는 자간을 오히려 조금 벌리고, 두 줄이 되면 줄 간격을 글자 높이의 1.4배 이상으로 둡니다. 기기와 화면마다 다르니 줄여서 한 번 확인합니다.

어떤 글자를 이미지 밖으로 빼나요

기준은 하나입니다 — 그 글자를 읽어야 결정이 되는가. 결정에 필요한 글자는 이미지에 굽지 않고 글 영역에 적습니다. 굽는다 — 글자를 이미지 파일 안에 그려 넣어 나중에 고칠 수 없게 만드는 것입니다.

이미지 안에 두는 것	이미지 밖에 적는 것
제품에 원래 인쇄된 글자	용량·성분·주의 표기
한 단어짜리 강조	가격과 할인 문구
장면을 설명하는 짧은 말	배송·교환 안내
제품 이름의 로고 형태	세 줄 넘는 설명

밖으로 빼면 세 가지가 따라옵니다. 기기에서 글자 크기를 키워 둔 사람에게 그 글자도 같이 커지고, 값이 바뀔 때 이미지를 다시 만들지 않아도 되고, 다른 언어로 바꿔 적기 쉽습니다.

이미지 안에 남기기로 한 글자는 같은 내용을 이미지 설명 한 줄로 함께 적어 둡니다. 이미지 설명 — 사진이 안 뜨거나 화면을 소리로 읽을 때 대신 나오는 짧은 문장입니다. 「제품 컷 3」처럼 파일 번호를 적으면 아무 도움이 안 되고, 「밝은 회색 배경 위 300ml 용기 정면」처럼 화면에 보이는 것을 그대로 적으면 됩니다. 한 줄이면 충분하고, 장식으로만 넣은 이미지에는 비워 둡니다.

줄어든 상태를 어떻게 확인하나요

세 가지를 순서대로 봅니다. 이미지 편집 도구에서 파일을 가로 200px로 줄여 저장한 뒤 그 파일만 열어 봅니다 — 여기서 읽히면 어느 자리에서도 읽힙니다. 다음으로 폰에 옮겨 화면 밝기를 낮추고 봅니다. 마지막으로 화면을 흑백으로 바꿔, 색으로만 구분되던 글자가 배경에 붙는지 봅니다. 세 가지 모두 한 장에 3분이면 끝납니다. 여러 장을 한꺼번에 볼 때는 줄인 파일을 한 폴더에 모아 큰 아이콘 보기로 펼쳐 놓으면 한 화면에서 비교됩니다.

안 읽히는 글자는 어떤 순서로 고치나요

글 영역으로 뺄 것을 먼저 빼고, 남은 글자의 서체를 굵게 바꾸고, 글자 뒤 배경을 정리하고, 그래도 안 되면 크기를 키웁니다. 크기부터 키우면 제품이 가려지고, 제품이 가려지면 다시 글자를 줄이게 됩니다. 이 순서로 가면 대개 세 번째에서 끝납니다.

다시 만들 때는 원본 파일을 지우지 말고 남겨 둡니다. 글자만 다른 여러 벌을 만들게 되므로, 글자를 넣기 전 사진 한 장을 따로 보관해 두면 다음 문구를 얹을 때 촬영이나 배경 작업을 되풀이하지 않습니다. 파일 이름 끝에 글자 유무만 표시해 두면 찾는 시간도 줄어듭니다.

오늘 할 일

지금 쓰는 제품 이미지 한 장을 가로 200px로 줄여 저장하고, 그 파일에서 읽히는 글자를 세어 보십시오. 읽히지 않는데 결정에 필요한 문장이 있으면 그 문장을 글 영역으로 옮겨 적는 것까지가 오늘 분량입니다.