상세페이지 모바일 화면에서 어떻게 보이나

상세페이지는 만든 크기 그대로 보이지 않습니다. 폰 화면 폭에 맞춰 가로가 통째로 줄어들고, 그 안의 글자도 같은 비율로 함께 작아집니다. 그래서 모바일에서 읽히게 만드는 일은 세 가지로 끝납니다 — 원본 가로 폭을 하나로 정하고, 그 폭을 기준으로 글자 크기를 잡고, 긴 이미지를 내용 단위로 나눕니다.

왜 컴퓨터에서 본 것과 다르게 보이나요

상세페이지는 글이 아니라 이미지 한 장으로 올라가는 경우가 많습니다. 이미지는 화면 폭에 맞춰 전체가 한 번에 축소됩니다 — 글자만 따로 남아 커지지 않습니다. 예를 들어 가로 1,000px로 만든 이미지가 가로 400px 화면에 들어가면 40%로 줄고, 원본에서 30px이던 글자는 12px이 됩니다.

디자인 프로그램은 화면에 꽉 차게 띄워 주기 때문에 만드는 사람 눈에는 늘 큼직합니다. 축소 비율을 먼저 적어 두면 이 차이가 사라집니다.

원본 가로 폭	줄어드는 비율	원본 30px 글자가 보이는 크기
750px	약 53%	약 16px
860px	약 47%	약 14px
1,000px	약 40%	약 12px
1,200px	약 33%	약 10px

가로 400px 화면을 놓고 계산한 예시 값입니다. 폰마다 화면 폭이 달라 실제 값은 조금씩 달라집니다. 원본 폭은 하나로 정해 두는 편이 낫습니다 — 폭이 섞이면 같은 30px 글자가 장마다 다른 크기로 보입니다.

글자는 원본에서 몇 px로 잡아야 하나요

줄어든 뒤의 크기를 기준으로 거꾸로 잡습니다. 아래는 원본 가로 폭 860px로 만들 때 자리별로 쓰는 크기입니다.

자리	원본 크기	줄어든 뒤	쓰는 자리
큰 제목	48~60px	22~28px	사진 위에 얹는 한 줄
소제목	34~40px	16~19px	문단을 여는 줄
본문	28~32px	13~15px	설명 문장
단위·유의사항	24px 이상	11px 이상	더 줄이지 않습니다

하나만 지킨다면 본문 28px입니다. 줄어든 뒤 13px보다 작아지면 대부분 읽지 않고 지나갑니다. 함께 정할 값이 두 개 더 있습니다. 한 줄에 한글 20~25자까지만 넣고, 줄과 줄 사이를 글자 크기의 1.6배로 벌립니다. 줄이 너무 길거나 붙어 있으면 크기가 맞아도 읽는 속도가 떨어집니다.

글자 색도 크기와 함께 봅니다. 옅은 회색은 원본에서 차분해 보여도, 축소되고 화면 밝기까지 낮아지면 배경과 붙어 버립니다. 본문은 배경과 확실히 갈리는 색으로 잡고, 강조는 색이 아니라 굵기로 합니다 — 굵기는 작아져도 남지만 색 차이는 먼저 사라집니다.

이미지는 몇 장으로 나눠 올리나요

세로로 긴 이미지 한 장은 화면에 뜨는 데 오래 걸립니다. 8~15장으로 나눠 올리면 위에서부터 차례로 떠서 기다리는 느낌이 줄어듭니다. 수정할 때도 그 장만 다시 만들어 바꿔 끼우면 됩니다.

자르는 자리는 픽셀 수가 아니라 내용으로 정합니다. 문단과 문단 사이 여백에서 자르고, 글자 줄 가운데나 얼굴·제품 위는 피합니다. 한 장은 세로 1,500~2,000px 안쪽이면 다루기 쉽습니다. 첫 장은 가장 가볍게 만듭니다 — 사람이 제일 먼저 마주하는 화면이라 여기서 기다리게 되면 그대로 나갑니다.

장 번호는 01부터 두 자리로 붙입니다. 1 · 2 · 10 순으로 이름을 붙이면 올릴 때 1 다음에 10이 와서 순서가 바뀝니다. 마지막 한두 장에는 배송·교환처럼 자주 고치는 안내만 모아 둡니다. 그 부분만 바꿔 끼우면 되기 때문에 나머지 장을 다시 만들 일이 없습니다.

모바일에서 자주 무너지는 자리는 어디인가요

축소되면서 먼저 사라지는 것들이 있습니다. 만들 때 미리 바꿔 두면 검수에서 되돌릴 일이 없습니다.

• 가로 5칸이 넘는 표 — 칸이 좁아져 글자가 세로로 쌓입니다. 세로 목록으로 풀어 씁니다
• 옆으로 나란히 놓은 사진 3장 — 한 장이 화면의 3분의 1이 됩니다. 위아래로 쌓습니다
• 1px 얇은 선과 연한 회색 글자 — 축소되면 선은 끊기고 글자는 배경에 묻힙니다. 선은 2px 이상, 글자는 진하게 잡습니다
• 이미지 가장자리에 붙은 글자 — 좌우 여백을 원본 폭의 5% 이상 남깁니다
• 흰 배경에 흰 제품 — 밝기를 낮춘 화면에서는 형태가 보이지 않습니다. 배경을 옅은 회색으로 바꿉니다

다섯 가지 모두 컴퓨터 화면에서는 멀쩡해 보입니다. 축소된 뒤에야 드러나기 때문에, 만드는 중간중간 화면 배율을 40%로 내려 보면 그 자리에서 걸러집니다.

내 폰으로 확인하는 순서는 어떻게 되나요

기준은 하나입니다 — 확대하지 않고 읽히는가. 확대하면 무엇이든 읽히기 때문에 확인이 되지 않습니다. 완성본이 나오면 아래 다섯 단계를 그대로 밟습니다. 12분이면 끝납니다.

순서	하는 일	시간	왜 이렇게 보나
1	완성 이미지를 내 폰으로 보낸다	1분	컴퓨터 화면에서는 판단하지 않습니다
2	확대하지 않고 끝까지 한 번 내린다	2분	손이 멈추는 자리를 적습니다
3	팔을 뻗은 거리에서 다시 본다	2분	실제로 보는 거리에 가깝습니다
4	화면 밝기를 30%로 낮추고 본다	2분	밝은 곳에서 보는 상태와 비슷해집니다
5	판매 화면에 올려 두고 본다	5분	위아래 다른 요소와 함께 보입니다

2단계에서 손이 멈춘 자리가 곧 고칠 자리입니다. 읽으려고 눈을 좁히게 되는 곳, 무슨 사진인지 한 번에 모르겠는 곳 두 가지만 적어도 고칠 목록이 나옵니다.

오늘 할 일

지금 쓰고 있는 상세페이지 이미지 한 장을 폰으로 보내, 확대하지 않고 처음부터 끝까지 읽어 보십시오. 본문 글자가 읽히지 않으면 원본 파일을 열어 본문만 28px 이상으로 키우고 줄간격을 1.6배로 벌립니다. 30분이면 한 장을 고칠 수 있습니다.