상세페이지 기획·디자인 전문 하오스튜디오

■ 핵심 요약 ① 앱에서 잘 보이는 상세페이지는 한 화면에 메시지 하나만 남긴 페이지예요. ② 상세 이미지 가로는 860px 기준으로 잡아야 작은 화면에서 글씨가 안 뭉개져요. ③ 중요한 문구는 이미지에 묻지 말고 첫 두 화면 안에 올려두세요. 안녕하세요, 하오스튜디오입니다. 제품상세페이지를 모바일 앱에서 잘 보이게 하려면, 글씨 크기와 이미지 가로폭을 작은 화면 기준으로 다시 잡는 게 먼저예요. 오늘은 실제 진행한 상세페이지 제작 프로젝트로 그 기준을 짚어볼게요. 모바일 앱에서 잘 보이는 제품상세페이지는 뭐가 다를까요? 앱 화면에서 잘 보이는 제품상세페이지는, 손가락으로 한 번 넘길 때마다 메시지가 딱 하나씩만 남도록 끊어 만든 페이지예요. 제품상세페이지는 제품 정보를 세로로 긴 이미지 묶음으로 엮어 보여주는 판매 화면인데, PC 모니터에서는 두세 가지 정보를 가로로 늘어놓아도 한눈에 들어오지만 앱은 세로 한 칸씩만 보여주거든요. 그래서 같은 원고라도 앱에서는 '넘김 단위'로 다시 잘라야 읽힙니다. 기준선이 되는 숫자는 가로폭이에요. 네이버 스마트스토어가 안내하는 상세 이미지 권장 가로는 860px인데, 이 폭을 넘겨 만든 이미지는 앱에서 자동으로 줄어들면서 작은 글씨가 먼저 뭉개져요. 반대로 860px 안에서 설계하면 축소가 거의 없어 성분표나 주의사항 같은 작은 텍스트도 살아남습니다. 앱 입점을 앞두고 있다면 디자인을 시작하기 전에 이 폭부터 고정해 두는 게 순서예요. 이번 프로젝트는 유제품·음료·생활용품 등 여러 업종의 제품상세페이지를 처음부터 휴대폰 화면 기준으로 설계한 작업이에요. 사진처럼 완성 시안을 실제 화면 틀에 하나씩 얹어 확인했는데, 디자인 파일에서는 멀쩡하던 소제목이 화면에 올리면 두 줄로 넘어가는 경우가 바로 드러나거든요. 그래서 제목은 굵은 두세 단어로 줄이고, 설명 문장은 그 아래 한 덩어리로만 붙였습니다. 앱 입점을 앞두고 제품상세페이지는 어떻게 설계할까요? 앱 입점용...