여섯 가지로 넘기는 작품 갤러리

너는 이 저장소에서 작업하는 프론트엔드 엔지니어다. 아래 지시를 읽고 먼저 계획을 3줄로 말한 뒤 바로 파일을 만들어라. 질문은 정말 막힐 때 한 번만 해라.

# 작업: 여섯 가지로 넘기는 작품 갤러리

## 언제 쓰는 작업인가
포트폴리오·작품집·제품 갤러리처럼 같은 자리에서 여러 장을 보여 줘야 할 때 쓴다. 전환 여섯 개가 각각 render(진행도) 함수 하나로만 구현되기 때문에, 하나를 지우거나 새로 만드는 데 다른 코드를 건드리지 않는다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 보여 줄 항목이 여섯 개 있다. 각 항목에 제목과 연도
- 사진이 있다면 16:9 로 준비한다. 없으면 이 프롬프트가 CSS 로 그린 포스터를 대신 쓴다
- GSAP·Swiper·Framer Motion 은 설치하지 않는다

## 건드릴 범위
갤러리 무대와 전환 여섯 가지, 썸네일 줄, 전환 설명 목록, 마감 CTA 까지다. 이미지 업로드·정렬·좋아요 같은 기능은 만들지 않는다. 확대해서 보는 화면도 만들지 않는다.

## 결과가 이렇게 보여야 한다
거의 검은 배경 한가운데 16:9 무대가 하나 있고, 그 안에서 장면이 바뀐다. 무대 아래에 전환 이름 여섯 개가 알약 버튼으로 놓이고 지금 쓰는 것만 형광 연두로 채워진다. 그 아래에 썸네일 여섯 장이 한 줄로 늘어서고 지금 보는 것만 테두리가 형광 연두가 된다. 전환 도중에는 원이 커지거나, 세로 조각 여섯이 시차를 두고 올라오거나, 카드가 뒤집히거나, 빨강과 청록이 갈렸다 모이거나, 점이 커지며 창이 되거나, 옆에서 밀려 들어온다.

## 구현 순서
1. 무대를 만든다. aspect-ratio 16 / 9 에 overflow hidden, isolation isolate 인 상자를 두고 그 안에 position absolute·inset 0 인 레이어 세 장을 겹친다. 아래부터 A(지금 장면), B(다음 장면), 그리고 z-index 10 인 효과 레이어다. 효과 레이어는 pointer-events none 이고, 전환마다 필요한 조각을 여기에 만들었다가 끝나면 비운다.
2. 장면 한 장은 사진이 아니라 요소로 만든다. 배경 그라디언트 한 겹, 가운데 도형 하나, 미세한 점 무늬 한 겹(4px 간격 radial-gradient, mix-blend-mode overlay), 좌하단에 제목과 연도, 우상단에 번호를 넣는다. 이렇게 두면 이미지 파일 없이도 장면이 여섯 장 나오고, 나중에 사진으로 바꿀 때 배경만 교체하면 된다.
3. 전환을 { id, 이름, 설명, 길이, setup?, render } 객체 배열로 둔다. render(진행도, 컨텍스트) 는 0 과 1 사이 값 하나를 받아 스타일만 바꾸고, 시간이나 이전 프레임을 절대 보지 않는다. 컨텍스트에는 두 레이어와 효과 레이어, 무대의 실제 폭과 높이가 들어간다. setup 은 조각이 필요한 전환에서만 쓴다.
4. 보간 함수 넷을 먼저 만든다. clamp 는 0~1 로 자르고, inOut 은 p<0.5 일 때 4p³·아니면 1-(-2p+2)³/2, smooth 는 p²(3-2p), bell 은 sin(pπ) 다. bell 은 가운데에서 1, 양끝에서 0 이라 전환 도중에만 세지는 효과(그림자·색 어긋남)에 쓴다.
5. 원형 아이리스: 다음 장면에 clip-path circle(반지름 at 50% 50%) 을 건다. 반지름은 무대 대각선의 절반에 2 를 더한 값에 p^1.35 를 곱한다. 퍼센트 대신 대각선을 쓰는 이유는, 비율이 달라져도 네 귀퉁이까지 반드시 덮이기 때문이다.
6. 스태거 패널: 다음 장면을 여섯 벌 복제해 각각 clip-path inset 으로 세로 6분의 1 씩만 남긴다. i 번째 조각의 진행도를 (p - 0.34*i/5) / (1-0.34) 로 늦추고 inOut 을 태워 translateY(높이*(1-q)) 로 올린다. 원본 다음 장면은 opacity 0 으로 숨긴다. 올라오는 동안 brightness 를 0.86 에서 1 로 올리면 조각마다 깊이가 생긴다.
7. 카드 뒤집기: 효과 레이어에 perspective 를 준 상자를 만들고, 그 안에 transform-style preserve-3d 인 카드를 넣는다. 카드 앞면은 지금 장면, 뒷면은 다음 장면을 rotateY(180deg) translateZ(1px) 로 붙이고 둘 다 backface-visibility hidden 으로 둔다. 카드를 rotateY(180*q) 로 돌리면서, bell(p) 로 translateZ 를 뒤로 뺐다가 되돌리고 같은 값으로 그림자와 모서리 둥글기를 키운다.
8. 밀어 넘기기와 색 분리 슬라이드는 한 뿌리다. 먼저 밀어 넘기기를 만든다. 지금 장면을 translateX(-폭*q), 다음 장면을 translateX(폭*(1-q)) 로 두면 두 값이 맞물려 사이에 빈틈이 생기지 않는다. 밀려나는 장면은 brightness 를 1 에서 0.72 로 낮춰 앞뒤를 구분한다. 여기에 각 장면의 복제본을 둘씩 더 만들어 하나는 sepia(1) saturate(6) hue-rotate(-38deg) 로 붉게, 하나는 hue-rotate(140deg) 로 청록으로 바꾸고 mix-blend-mode screen 으로 얹는다. 복제본은 원본에서 좌우 반대로 무대 폭의 4% 만큼 어긋나게 두되, 어긋나는 양과 불투명도에 bell(p)^1.35 를 곱해 전환 중간에만 벌어지게 한다.
9. 하프톤 점: 다음 장면에 mask-image 로 radial-gradient(circle, #000 반지름, transparent 반지름+1.2px) 을 걸고 mask-size 를 무대 폭의 26분의 1 로 반복시킨다. 반지름을 0 에서 간격의 0.82 배까지 키우면 점이 서로 만나 면이 된다. 여기에 효과 레이어에서 90도 방향 검정 그라디언트를 mix-blend-mode multiply 로 덮고 그 경계를 왼쪽에서 오른쪽으로 옮기면, 점이 왼쪽부터 번져 들어온다.
10. 재생과 정리. 전환이 시작되면 두 레이어를 초기화하고 장면을 새로 그린 뒤 setup 을 부르고, requestAnimationFrame 안에서 경과 시간을 길이로 나눠 render 에 넘긴다. 1 에 도달하면 다음 장면만 남기고 효과 레이어를 비운다. 진행도가 0 일 때 두 장면의 opacity 를 강제로 여닫지 않는다. opacity 를 되돌리지 않는 전환에서 다음 장면이 끝까지 안 보이게 된다. prefers-reduced-motion 이면 길이를 1ms 로 줄여 사실상 바로 넘긴다. 자동 재생은 무대가 화면에 있을 때만 IntersectionObserver 로 돌리고 사람이 버튼이나 썸네일을 누르면 멈춘다. 900px 미만에서는 썸네일을 3열로 접고 상단 링크를 숨기며, 버튼에 aria-pressed·썸네일에 aria-current·무대에 aria-live polite 를 붙인다.

## 기본값(필요하면 바꿔라)
- 전환 길이: 560 ~ 900ms (바꿀 수 있는 범위: 400ms ~ 1200ms(1200 을 넘으면 기다리는 느낌이 든다))
- 패널 시차: 0.34 (바꿀 수 있는 범위: 0.1 ~ 0.6(클수록 조각이 하나씩 따로 올라온다))
- 하프톤 점 간격: 무대 폭 ÷ 26 (바꿀 수 있는 범위: ÷14 ~ ÷40(작을수록 점이 촘촘하다))
- 색 어긋남 폭: 무대 폭의 4% (바꿀 수 있는 범위: 1% ~ 8%)
- 자동 재생 간격: 2600ms (바꿀 수 있는 범위: 1800ms ~ 5000ms)

## 하지 말 것
- GSAP·Swiper·Framer Motion 을 설치하지 않는다. 전환 여섯 개가 각각 열 줄 남짓이다.
- render 안에서 시간을 읽지 않는다. 진행도만 받아야 스크롤 연동이나 되감기로 바꿔 쓸 수 있다.
- 진행도 0 에서 다음 장면을 opacity 0 으로 숨기지 않는다. 밀어 넘기기와 아이리스에서 다음 장면이 끝까지 안 나타난다.
- 무대 폭을 CSS 에 픽셀로 고정하지 않는다. 전환 계산은 getBoundingClientRect 로 잰 실제 값을 쓴다.
- 전환을 여섯 개보다 많이 넣지 않는다. 고르는 사람이 차이를 기억하지 못한다.
- 전환 도중에 만든 조각을 효과 레이어에 남기지 않는다. 다음 전환에 겹쳐 보인다.

## 출력 규칙 (HTML 단일 파일)
- 결과는 index.html 파일 하나로 저장한다. 외부 CDN 을 쓰지 않고 CSS·JS 를 파일 안에 넣는다.
- HTML 파일 하나로 완결한다. 별도 CSS·JS 파일을 만들지 않는다.
- 폰트는 시스템 폰트 스택을 기본으로 쓰고, 한글은 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic' 순으로 폴백한다.
- 색·간격·둥글기는 :root 의 CSS 변수로 모아 두고, 본문에서는 변수만 참조한다.
- 1200px 데스크톱과 400px 모바일에서 가로 스크롤이 생기지 않아야 한다.
- 움직임은 prefers-reduced-motion 을 존중한다.

끝나면 만든 파일 목록과 브라우저에서 확인할 URL 을 한 줄씩 적어라.