12CODE
← 아카데미 academy 17강. 상세페이지 정보구조(IA) 설계: 상단 3초, 스크롤 순서, 필수 블록 예상 5분

들어가며

3초 안에 결정되는 것

고객이 상세페이지에 들어와 처음 눈에 들어오는 화면(스크롤하지 않은 상태)을 보는 시간은 매우 짧습니다. 이 몇 초 안에 "내가 찾던 것과 맞는가"라는 판단이 이뤄지고, 여기서 어긋나면 스크롤조차 하지 않고 이탈합니다. 그래서 상단 화면에는 상품의 모든 것을 보여주려 하지 말고, 11강에서 확인한 유입 검색어와 가장 관련 있는 정보를 압축해서 배치해야 합니다.

상단 3초 화면에 들어갈 것

이 화면만 보고도 "이게 내가 찾던 상품이 맞다"는 확신이 어느 정도 서야 합니다.

스크롤 순서는 장벽 우선순위를 따릅니다

14강에서 상세페이지를 "장벽 제거 장치"로 재정의했다면, 스크롤 순서도 15강에서 찾은 우선순위 장벽 순서를 따르는 것이 자연스럽습니다. 아래는 일반적으로 쓰이는 순서이며, 내 상품의 우선순위 장벽에 맞게 조정합니다.

  1. 상단 3초 화면(위 내용)
  2. 우선순위 1위 장벽 해소 블록(예: 품질/향 지속력에 대한 구체적 설명)
  3. 우선순위 2위 장벽 해소 블록(예: 배송 안내)
  4. 신뢰 요소(리뷰 요약, 인증, 제작 과정) - 18강에서 배치 원칙을 더 다룹니다
  5. 상세 스펙 정보(사이즈, 성분, 사용법)
  6. 세트 구성·추가구매 제안(12강에서 만든 아이디어)
  7. 교환·환불 정책 요약
  8. FAQ 또는 자주 묻는 질문

필수 블록 체크리스트

정보구조를 설계할 때 빠지기 쉬운 블록들이 있습니다.

글로우캔들 정보구조 예시

순서 블록 담을 내용
1 상단 3초 사용 장면 이미지 + "한 번 켜면 4시간, 2주 이상 지속" + 가격
2 품질 설명 향 지속력 근거, 원료 설명
3 배송 안내 포장 방식, 배송기간, 배송비 조건
4 신뢰 요소 리뷰 요약, 제작 과정 사진
5 스펙 정보 용량, 연소 시간, 성분표
6 세트 제안 라벤더+우디 세트 안내
7 정책 요약 7일 이내 교환 가능
8 FAQ 안전 사용법, 향 선택 가이드

정보구조를 설계한 뒤 확인할 것

정보구조는 한 번 정하고 끝이 아니라, 13강 리포트에서 발견한 문제가 실제로 이 구조 안에서 해소되는지 다시 대조해야 합니다. 예를 들어 결제 이탈이 배송 불안 때문이었다면, 배송 안내가 정보구조 안에 명확히 자리 잡고 있는지, 순서가 너무 뒤로 밀려 있지는 않은지 확인합니다.

바로 쓰는 템플릿: 상세페이지 블록 배치도

[담당 상품명]

| 순서 | 블록 | 담을 내용 | 대응하는 구매장벽(15강 기준) |
|---|---|---|---|
| 1 | 상단 3초 |  |  |
| 2 |  |  |  |
| 3 |  |  |  |
| 4 |  |  |  |
| 5 |  |  |  |
| 6 |  |  |  |
| 7 |  |  |  |
| 8 |  |  |  |

- 13강 리포트에서 발견한 문제가 이 구조 안에서 해소되는가(예/아니오, 어디서):

즉시 확인

  1. 상세페이지 상단 화면에 상품의 모든 정보를 다 넣지 말아야 하는 이유는 무엇인가요?
  2. 스크롤 순서를 정할 때 무엇을 기준으로 우선순위를 정해야 하나요?
  3. 배송 안내를 상단에서 한 번 언급했는데도 결제 버튼 근처에 다시 배치하는 이유는 무엇인가요?

정답·해설

  1. 고객이 상단 화면을 보는 시간이 매우 짧아, 정보를 다 담으려 하면 오히려 핵심 판단(내가 찾던 것이 맞는지)이 흐려지기 때문입니다.
  2. 15강에서 찾은 구매장벽 우선순위를 기준으로, 가장 크게 느끼는 장벽을 먼저 해소하는 순서로 배치해야 합니다.
  3. 결제 직전에 배송 불안이 다시 떠올라 이탈로 이어질 수 있어(9강), 그 지점에서 다시 확인시켜주면 이탈을 줄일 수 있기 때문입니다.

다음 레슨

18강. 신뢰 요소 배치: 리뷰·인증·A/S·교환정책을 어디에 얼마나에서 정보구조 안의 신뢰 요소 블록을 더 구체적으로 다룹니다.

핵심 정리

  1. 상세페이지 상단 3초 화면에는 유입 검색어와 관련된 핵심 정보만 압축해 담아야 합니다.
  2. 스크롤 순서는 15강에서 정한 구매장벽 우선순위를 따라 설계합니다.
  3. 완성된 정보구조는 13강 리포트에서 발견한 문제가 실제로 해소되는지 다시 대조해 확인해야 합니다.

→ 이 강의 퀴즈 풀어보기 (챌린지)