⚡ 실시간 동작 검증 리모컨
9:41
📶 🔋
☰
자동 (1/10) · 5.0초
지금 뜨는 콘텐츠
요즘 반응 좋은 콘텐츠로 수익화 트렌드를 살펴보세요.
UI/UX Technical Specification (Standalone)

메인 상단 '지금 뜨는 콘텐츠' 캐러셀 기술명세서

대상: 기획 / 프론트엔드 개발팀
총 DOM 카드 개수 (고정)
13개 고정
현재 활성 카드
1위 카드 (Index 0)
'콘텐츠 더보기' 카드 상태
숨김 (자동롤링 중)
우측 복제 카드(Clone) 상태
활성 (1~10 무한루프)

3. 상태 전이 및 인터랙션 상세 로직 (Interaction Specification)

자동 재생(Auto-Play) 시에는 '콘텐츠 더보기' 카드를 숨기고 1위~10위 콘텐츠만 무한 반복하며, 사용자가 수동으로 스와이프(Manual Swipe)할 때만 '콘텐츠 더보기' 카드를 노출하고 끝에서 멈추도록(Hard Stop) 제어합니다.

현재 상태 트리거 이벤트 시스템 동작 및 상태 변경 상세
자동 롤링 중
(1~9위 카드)		 5초 타이머 만료 • '콘텐츠 더보기' 카드 숨김(display: none) / 1, 2위 복제 카드 활성화(display: flex) 상태 유지.
• currentIndex를 +1 증가시키고 -currentIndex * 294px 위치로 부드럽게 이동.
• 9위➔10위로 이동 시, 10위 카드 우측 여백에는 '더보기'가 아닌 1위 복제 카드가 자연스럽게 노출됨.
자동 롤링 중
(10위 ➔ 1위 루프)		 5초 타이머 만료 [10위 ➔ 1위 다이렉트 Seamless 스왑]
1) '더보기' 카드를 건너뛰고, 10위 우측에 바로 붙어있는 1위 복제 카드 위치(-10 * 294px = -2940px)로 한 칸 전진 애니메이션 실행.
2) 애니메이션 종료 직후(460ms 후), transition: none 상태에서 진짜 1위 카드 위치(0px)로 좌표를 즉시 치환(Swap).
수동 터치/드래그 시작 가로 포인터 이동 8px 이상 1) 자동 롤링 타이머 초기화(elapsedMs = 0) 및 일시 정지.
2) 현재 화면에 표시된 좌표를 드래그 시작점으로 삼고, 복제 카드(Clone)를 숨긴 뒤, 11번째 '콘텐츠 더보기' 카드를 활성화(display: flex).
3) 이를 통해 사용자가 수동으로 스와이프할 때는 10위 우측에 '콘텐츠 더보기' 카드가 나타나도록 전환.
수동 드래그 중 pointermove 손가락/마우스 이동 거리(diff)만큼 실시간 트랙 이동.
• 양끝 저항감(Resistance): 1위 카드 좌측(> 0px) 또는 11번째 '더보기' 카드 우측(< -2940px)으로 넘어갈 경우 이동량의 25%만 반영하여 끝임을 직관적으로 전달.
수동 터치/드래그 종료 pointerup / pointercancel 일반 드래그는 가장 가까운 카드로 스냅합니다. 24px 이상 움직이고 평균 속도가 0.35px/ms 이상이면 시작 카드 기준으로 한 장 이동합니다.
• 1~10위 카드(Index 0~9)에 안착 시: 수동 모드를 유지해 10위 오른쪽에 더보기가 보이도록 합니다. 조작이 끝나고 5초가 지나면 자동 롤링을 재개합니다.
• 11번째 '더보기' 카드(Index 10)에 안착 시: 사용자가 '더보기' 버튼을 누를 수 있도록 '더보기' 카드 노출을 유지하고 더보기에 머무는 동안 자동 롤링 정지(isStoppedAtEndByUser = true).
💡 [참고] Seamless 무한 루프의 실제 작동 원리 (메모리 및 성능 안전성)

자동 롤링이 계속 오른쪽으로 넘어간다고 해서 매 주기마다 카드가 10개씩 무한 복제(appendChild)되어 쌓이는 구조가 아닙니다. 프론트엔드 표준 '착시 스왑(Illusion Swap)' 기법을 사용하여 메모리는 항상 고정된 상태를 유지합니다.

원리 1
고정된 DOM 개수 (총 13개 고정): 초기 렌더링 시 1~10위 카드(10개) + 더보기 카드(1개) + 1, 2위 복제 카드(2개)를 합쳐 딱 13개만 생성합니다. 하루 종일 화면을 켜두어도 카드를 추가로 생성하지 않습니다.
원리 2
모드별 동적 스위칭 (자동 vs 수동): 11번째 슬롯 자리에 자동 롤링 중에는 '1위 복제 카드'를 켜두고('더보기' 숨김), 가로 스와이프가 확인되면 '콘텐츠 더보기 카드'를 켜서('복제 카드' 숨김) 수동 탐색 중 더보기를 표시합니다. 10위에서 1위로 넘어가는 도중 드래그하면 복제 카드가 먼저 안착한 뒤 실제 1위로 바뀝니다.
원리 3
0.001초 만의 좌표 순간이동: 자동 롤링 시 10위(-2646px)에서 1위 복제본(-2940px)으로 부드럽게 이동한 직후, 애니메이션을 끄고(transition: none) 진짜 1위 카드(0px)로 좌표를 순간이동시킵니다. UI가 100% 동일하므로 사용자는 눈치채지 못합니다.
❌ 잘못된 무한 생성 방식 (메모리 누수 발생)
1~10 ➔ 1~10(새로 복제) ➔ 1~10(또 복제)...
* 시간이 지날수록 DOM이 수천 개씩 쌓여 브라우저 멈춤
⭕ 현재 적용된 착시 스왑 방식 (성능 저하 없음)
• 자동: 1 ➔ ... ➔ 10 ➔ [복제1위 도착 후 0px 순간이동]
• 수동: 1 ➔ ... ➔ 10 ➔ 11(콘텐츠 더보기에서 정지!)

4. 예외 처리 및 엣지 케이스 (Edge Cases)

  • 1) 10위 카드에서 수동 터치 시 우측 Peeking 카드 전환 처리 자동 롤링으로 10위 카드에 머물고 있을 때는 우측 여백에 '1위 복제 카드'가 살짝 보이지만, 가로 스와이프가 확인되면 우측 카드가 '콘텐츠 더보기' 카드로 전환되어 자연스럽게 '더보기'로 스와이프할 수 있도록 처리합니다.
  • 2) 드래그(스와이프)와 클릭 이벤트 분리 가로 드래그로 판정된 경우 ‘콘텐츠 더보기’ 클릭을 차단합니다. 세로 이동이 우세하면 페이지 스크롤에 맡깁니다. 포인터 취소 시에는 가까운 카드에 안착합니다.
  • 3) 브라우저 탭 비활성화 / 앱 백그라운드 전환 시 처리 사용자가 다른 탭을 보거나 앱을 백그라운드로 내려두었다가 돌아왔을 때 타이머가 어긋나지 않도록 document.visibilitychange 이벤트 발생 시 타이머를 일시 정지하고, 화면 복귀 시 카운트를 재시작합니다.

5. 개발 구현 가이드 (프론트엔드 참고사항)

  • Swiper.js 등 외부 슬라이더 라이브러리 사용 시 주의점 Swiper의 기본 loop: true 옵션은 모든 슬라이드(더보기 포함)를 무조건 회전시키므로, "자동일 때는 더보기 숨김 + 1~10위 루프 / 수동일 때는 더보기 노출 + 끝에서 정지" 로직을 기본 옵션만으로는 구현할 수 없습니다.
    따라서 기본 loop: false 환경에서 위 명세서와 같이 more-card와 clone-card의 CSS 노출 상태(display)를 가로 스와이프 판정에 맞춰 토글하는 커스텀 제어 방식을 권장합니다.