상세페이지 디자인 전 긴 문단을 2줄 설명과 1줄 요약으로 나누기

상세페이지 디자인, 문단을 줄인 뒤 화면에 올려야 합니다

긴 원고를 그대로 넣으면 모바일에서 정보가 막혀 보입니다

🧾 상세페이지 디자인은 긴 원고를 이미지 위에 그대로 올리는 작업이 아닙니다. 고객이 스크롤하면서 바로 읽을 수 있도록 문장을 줄이고, 설명과 요약을 나누고, 필요한 정보는 카드·표·FAQ로 분리하는 작업입니다.

📱 모바일 기준으로 본문 1문장은 35~45자 안팎, 설명 문단은 2줄 이내, 요약 문장은 20~30자 안팎으로 잡는 것이 좋습니다. 한 화면에 강조 문구는 1~2개 이하로 줄이고, 메인 첫 문구는 25자 안팎으로 압축합니다.

디자인 전 문장 길이 기준

📝 기존 5줄 문단은 2줄 설명, 1줄 요약, 보조 아이콘 3개로 나누면 화면이 덜 답답해 보입니다.

세부 확인 기준

✅ 디자인 전에 원고를 먼저 줄여야 모바일 화면에서 정보가 막혀 보이지 않습니다.

1. 긴 문단은 어디서부터 잘라야 할까?

한 문단 안에서 주장과 보조 설명을 먼저 나눕니다

✂️ 긴 문단은 첫 문장부터 무작정 줄이지 말고, 먼저 가장 중요한 주장 1개와 보조 설명 1개를 나눠야 합니다. 나머지 부연 설명은 카드, 아이콘, FAQ, 비교표로 이동시키면 화면 구성이 더 명확해집니다.

🔍 예를 들어 상품 장점, 사용 상황, 관리 방법, 요약 문장이 한 문단에 섞여 있다면 먼저 상품 장점만 남깁니다. 고객 상황은 카드로 빼고, 관리 방법은 FAQ로 보내고, 요약 문장은 별도 박스로 분리합니다.

세부 확인 기준

✅ 한 문단에 장점, 상황, 사용법, 요약이 모두 섞여 있지 않은지 확인합니다.

2. 2줄 설명은 70~90자 안팎으로 맞춥니다

모바일에서 두 줄로 읽히는 길이를 기준으로 잡습니다

📏 2줄 설명은 70~90자 안팎으로 맞추면 모바일 화면에서 읽기 좋습니다. 1줄은 35~45자 안팎으로 보고, 쉼표는 한 문장에 1개 이하로 줄입니다. “그리고, 또한, 그래서”가 반복되면 문장을 나누는 편이 좋습니다.

🧮 수치 정보가 있다면 문장 앞쪽에 둡니다. 예를 들어 “국내산 사과를 저온에서 천천히 졸여 과육의 식감이 살아 있는 잼입니다”처럼 원산지, 조리 방식, 상품 특징을 앞에서 바로 보여줍니다.

세부 확인 기준

✅ 2줄 설명이 90자를 넘으면 카드형 문구나 FAQ로 분리합니다.

3. 1줄 요약은 20~30자 안팎으로 씁니다

요약 문장은 고객이 기억할 한 줄이어야 합니다

🎯 1줄 요약은 설명을 다시 반복하는 문장이 아니라 고객이 기억할 한 줄이어야 합니다. 글자 수는 20~30자 안팎으로 줄이고, 숫자 1개나 상품의 대표 단어 1개를 포함하면 화면에서 더 빨리 읽힙니다.

🏷️ 요약 문장은 디자인에서 배지, 박스, 굵은 글씨로 활용하기 쉽습니다. “넉넉한 수납”보다 “출퇴근용 수납 가방”처럼 사용 상황이 들어가면 고객이 상품 용도를 더 빠르게 이해할 수 있습니다.

세부 확인 기준

✅ 요약 문장은 설명을 반복하지 않고 고객이 기억할 표현으로 줄입니다.

4. 상품 장점이 많으면 3개 카드로 나눕니다

장점 6개를 한 문단에 넣으면 읽히지 않습니다

🧩 상품 장점이 6개 이상이면 한 문단에 모두 넣지 말고 3개 카드로 압축합니다. 카드 1개당 제목은 12자 안팎, 설명은 2줄 이내로 맞추고, 카드 제목은 비슷한 문장 구조로 통일합니다.

📦 예를 들어 방수, 가벼움, 접이식, 대용량, 생활 오염 방지, 손잡이 보강이라는 장점이 있다면 “생활 방수 원단”, “접이식 보관”, “보강 손잡이”처럼 3개 묶음으로 줄이는 편이 화면에서 더 읽기 쉽습니다.

세부 확인 기준

✅ 카드 제목끼리 길이와 문장 구조가 비슷한지 확인합니다.

5. 긴 사용법은 1→2→3 단계로 바꿉니다

순서가 있는 설명은 문단보다 단계 이미지가 읽기 쉽습니다

🔢 사용법, 조리법, 조립법처럼 순서가 있는 설명은 긴 문단보다 1→2→3 단계형 구성이 더 읽기 쉽습니다. 각 단계 제목은 10자 안팎, 설명은 1줄로 줄이고, 단계마다 이미지 1장을 붙입니다.

⚠️ 주의사항은 단계 설명 안에 섞지 말고 단계 아래 작은 박스로 분리합니다. 이렇게 나누면 고객은 먼저 사용 순서를 보고, 필요한 경우 주의 문구를 따로 확인할 수 있습니다.

세부 확인 기준

✅ 순서가 있는 설명은 긴 문단보다 3단계 이미지로 나눕니다.

6. 비교 설명은 3열 표로 줄입니다

A와 B를 비교할 때는 문단보다 표가 빠릅니다

📊 비교 설명은 문단보다 표가 더 빠르게 읽힙니다. 표는 3열 이하로 만들고, 열은 “항목 / 기존형 / 개선형”처럼 단순하게 구성합니다. 행은 4~5개 이하, 셀 안 문장은 2줄 이하로 줄입니다.

🧾 긴 설명은 표 안에 모두 넣지 말고 표 아래 보조 설명으로 이동합니다. 스마트폰 화면에서 표 안 문장이 3줄 이상으로 늘어나면 비교 정보보다 텍스트 덩어리처럼 보일 수 있습니다.

세부 확인 기준

✅ 표 안 문장이 2줄을 넘으면 문장을 줄이거나 별도 설명으로 뺍니다.

7. 고객 불안 문장은 FAQ 박스로 옮깁니다

걱정을 줄이는 문장은 질문형으로 바꾸면 읽기 쉽습니다

❓ 고객이 자주 묻는 불안 요소는 일반 문단보다 FAQ 박스로 옮기는 편이 좋습니다. 질문은 18~25자 안팎, 답변은 2줄 이내로 쓰고, 배송·교환·사용 전 주의·구성품·사이즈처럼 반복 문의가 많은 내용을 우선 배치합니다.

📌 FAQ는 반드시 하단에만 둘 필요는 없습니다. 세탁 관련 질문은 관리법 섹션 근처에, 구성품 질문은 구성품 이미지 아래에, 배송 질문은 배송 안내 앞뒤에 배치하면 고객이 필요한 순간에 바로 확인하기 쉽습니다.

세부 확인 기준

✅ 반복 문의가 많은 문장은 일반 문단보다 FAQ 박스로 분리합니다.

8. 디자인 전 원고 검수표를 만들어야 합니다

문단 길이와 요약 문구를 표로 먼저 점검합니다

📄 상세페이지 디자인 전에 원고 검수표를 만들면 문구 수정과 이미지 부족 구간을 동시에 확인할 수 있습니다. 검수표는 섹션 번호, 원문 문단, 2줄 설명, 1줄 요약, 이미지 필요 여부, 수정 상태 6개 열로 구성합니다.

🧩 이 표를 먼저 만들면 디자이너가 원고를 보고 다시 줄이는 시간을 줄일 수 있습니다. 또한 어떤 섹션에 제품 단독컷이 필요한지, 어떤 섹션에 사용컷 3장이 필요한지 함께 표시할 수 있습니다.

세부 확인 기준

✅ 디자인 전 원고와 이미지 필요 여부를 한 표에서 함께 확인합니다.

9. 모바일 캡처 5장으로 최종 확인합니다

PC 화면보다 모바일에서 문단이 더 길게 보입니다

📱 상세페이지 디자인을 마무리하기 전에는 모바일 캡처 5장을 기준으로 다시 확인해야 합니다. 메인 비주얼, 장점 카드, 사용법 또는 상세 설명, 비교표 또는 FAQ, 배송·교환 안내 화면을 각각 캡처해 봅니다.

🔎 확인 항목은 한 화면 강조 문구 2개 이하, 본문 문단 2줄 이내, 표 안 글자 2줄 이하, 요약 문장 20~30자, 이미지 위 문구가 제품을 가리지 않는지입니다. 모바일에서 문단이 3줄 이상 보이면 다시 줄이는 것이 좋습니다.

세부 확인 기준

✅ 모바일 캡처에서 문단이 3줄 이상 보이면 다시 줄입니다.

📌 상세페이지 디자인 전 긴 문단을 2줄 설명과 1줄 요약으로 나누면 모바일 화면에서 정보가 더 빠르게 읽힙니다. 35~45자 문장, 70~90자 설명, 20~30자 요약, 카드 3개, FAQ 5개, 모바일 캡처 5장 기준으로 검수하면 원고를 디자인 화면에 맞게 정리하기 쉽습니다.