인트로 자동 진입 두 번 만들고 다 롤백한 이야기 — "자동 전환은 사용자로부터 통제권을 빼앗는다" — POP-SPOT v2.1~v2.3 실패담
v2.1: 첫 방문 7 초 자동 리다이렉트 → 폐기. v2.2: 한 화면 5 단계 13초 자동 슬라이드 → 폐기. v2.3: 원래 풀스크린 비디오 + 스크롤 스냅 구조로 복구. 실패에서 얻은 UX 원칙.
인트로를 사용자 클릭 없이 영상처럼 흐르도록 두 번 만들어봤다. 동의는 잘 될 거라고 생각했다. 둘 다 일주일 안에 롤백했고, 원래의 풀스크린 비디오 + 스크롤 스냅 구조로 돌아갔다.
이 글에서 다루는 것
모르는 단어 한 줄로
| 용어 | 한 줄 설명 |
|---|---|
| 리다이렉트 | 현재 페이지에서 다른 페이지로 강제 이동시키는 것 |
| 스크롤 스냅 | 스크롤 할 때 섭션마다 "철캵" 하고 걸리는 표준 기능. <code>scroll-snap</code> |
| v1.7.3 | 인트로 매거진 리디자인의 중간 쿤포인트. 풀스크린 비디오 + 5 섭션 스크롤 스냅 |
세 버전의 시도와 결과
| 버전 | 시도 | 결과 |
|---|---|---|
| v2.1 | 첫 방문 시 7 초 동안 인트로 영상 보여주고 자동 메인으로 리다이렉트 | 폐기 — "그냥 자동 진입에 불과·강제되는 느낌만 남음" |
| v2.2 | 한 화면에서 5 단계 자동 슬라이드 (각 2~3 초, 총 13 초) | 폐기 — "오류 많고 자동 전환은 역효과" |
| v2.3 | v1.7.3 의 풀스크린 영상 + 5 섹션 스크롤 스냅으로 복구 | 성공 — 사용자가 손으로 스크롤/Skip 이 가능 |
왜 이렇게 했음 (시도 이유)
v2.1의 아이디어 — v1.7·v1.8·v1.9 로 디자인을 많이 다듬었으니 첫 방문자에게 "이렇게 생겼어" 를 겪게 하고 싶었다. 마치 공항 곳곳의 광고 영상처럼, 자동으로 7 초 흐르고 메인으로 넘어가면 되겠다 생각함.
v2.2의 변형 — v2.1 을 롤백하고도 "자동 소개" 의 미련이 남아 한 화면 안에서 자동 슬라이드하는 방식으로 재시도. "구조는 다르게 갈아엎은 셌이잨" 이었지만 본질은 같았음.
둘 다 같은 근원으로 실패 — 둘 다 "사용자가 보는 시점" 을 내가 정했다. 읽는 속도·제한 시간·다음 단계 이동을 전부 내가 결정. 사용자 입장에서는 텍스트를 거의 읽다 말고 다음 섹션으로 넘어가고, "잠깐 멈춰" 가 안 되며, 동의도 안 구했는데 흐르고 있다. "자동 소개" 는 이상적으로 "동의·일시정지 보장" 이 있어야 하는데 둘 다 빠졌음.
v2.3 으로 몇 일 안에 롤백 — 사용자가 손으로 손가락으로 스크롤하는 원래 구조가 상당히 좋은 이유가 있었다.
한 줄 원칙
자동 전환은 사용자로부터 통제권을 빼앤는다. 인트로는 보여주는 곳이 아니라 둘러보고 결정하는 곳이다. 조금 남아 시간을 더 쿨도 되고, 바로 Skip 해도 되며, 며칠 뒤 다시 옼을 때 또 읽을 수도 있어야 한다.
코드로는 어떻게 (v2.3 복구)
/* v1.7.3 를 되살린 스크롤 스냅 */
.intro-section {
scroll-snap-align: start;
height: 100dvh;
}
.intro-container {
scroll-snap-type: y mandatory;
overflow-y: auto;
}핵심 파일: popspot-frontend/src/app/intro/page.tsx