스크롤은 리듬이다

들어가며 — 글과 그림이 만나는 가장 긴 페이지

22장에서 상세페이지 문안 7섹션을 썼다. 28장까지 이미지를 만들었다. 오늘 둘이 만난다. 상세페이지는 마케팅에서 가장 긴 페이지이고, 가장 전환에 가까운 페이지다. 긴 페이지를 끝까지 내리게 하는 것은 정보가 아니라 리듬이다 — 이미지와 글자, 큰 것과 작은 것, 밝은 것과 어두운 것이 교대로 와야 손가락이 멈추지 않는다.

오후에는 6부 다섯 수업의 이미지 전체를 한 보드에 놓고 발표한다. 14장·24장과 같은 방식 — 5분, 루브릭, 수정 기록.

1. 섹션별 비주얼 규칙

섹션 (22장)	비주얼	유형 (28장)	글자 비율	리듬
1 첫 화면	히어로 컷 + UVP + 보장 한 줄	히어로	글자 20%	밝음 · 큼
2 해결	가이드 다이어그램 (3단계)	그래픽	글자 50%	어두운 면 · 중간
3 증거	숫자 3 + 후기 캡처	디테일 · 실사	글자 60%	밝음 · 작음
4 사용 장면	사용 · 라이프스타일 컷 2~3	사용 · LS	글자 10%	큼 · 가로 꽉
5 비교	비교표	그래픽	글자 70%	중간
6 FAQ	아이콘 + 질문 5	그래픽	글자 80%	작음
7 보장 + CTA	히어로 변형 + 보장 + 버튼	히어로	글자 30%	밝음 · 큼

글자 비율이 교대한다 — 20 → 50 → 60 → 10 → 70 → 80 → 30. 이미지가 많은 섹션 뒤에 글자가 많은 섹션, 다시 이미지. 이것이 스크롤 리듬이다. 4번 사용 장면이 숨 고르는 자리이고, 7번이 1번을 되받아 닫는다.

모바일 우선 — 860px 폭 하나로

상세페이지는 80% 이상이 모바일에서 읽힌다. 그래서 860px 폭(국내 오픈마켓 기준) 하나로 만들고 데스크톱은 가운데 정렬로 둔다. 모바일 규칙 셋 — 글자 최소 28px(860 기준), 한 화면(세로 1,500px)에 메시지 하나, 버튼은 엄지 폭(최소 높이 100px).

스크롤 리듬의 세 도구

1. 면 전환 — 밝은 배경 ↔ 어두운 면(ink). 섹션 2·5를 어두운 면으로 두면 리듬이 생긴다.
2. 크기 전환 — 가로 꽉 찬 이미지 ↔ 여백 있는 작은 요소.
3. 반복 요소 — 섹션 번호, 시리즈 태그, 구분선. 같은 요소가 반복되면 "아직 같은 페이지"라는 안정감.

미니 실습 — 섹션 1·7 (30분)

첫 화면과 마지막 화면을 먼저 만든다(둘이 같은 보장을 말한다 — 22장). 히어로 컷 + UVP + 보장 + 버튼. 860px 폭, 세로 1,500px 안. 두 화면을 위아래로 놓고 "같은 페이지의 시작과 끝으로 보이는가".

평가 기준: 글자 비율 20~30%. 보장이 두 화면에 모두 있는가. 버튼 높이 100px 이상.