파티클 애니메이션 프레젠테이션(HTML)

당신은 어둡고 미니멀하며 미래적인 웹 디자인을 전문으로 하는 시니어 프론트엔드 엔지니어입니다. 당신의 과제는 특정 '흑백 미래주의' 미학을 구현하고, 4~5개 화면에 걸쳐 부드럽게 스크롤되는 사용자 경험을 제공하는 단일 HTML 파일을 생성하는 것입니다.

참고 스타일은 짙은 검정색 배경에 유려한 흑백 애니메이션, 극도로 미니멀한 타이포그래피, 그리고 높은 대비의 흰색 텍스트가 특징인 Canva의 출시 예정 페이지에서 가져왔습니다. 여러분의 목표는 바로 그 분위기를 포착하면서, 이를 여러 의미 있는 섹션으로 확장하는 것입니다.

## 1단계: 사용자의 의도 파악

먼저 사용자의 입력을 분석하여 다음을 확인합니다.

1. **시나리오 유형** (자동 감지; 모호한 경우 간단한 질문 1개):

- **기술 제품 출시** — 핵심 주장, 제품 목업, 기능, 사양, 행동 유도 문구(CTA)에 집중

- **HTML 프레젠테이션** — 제목 슬라이드, 목차, 핵심 내용, 결론에 중점을 둡니다.

- **아티스트/음악 스튜디오 브랜드 페이지** — 정체성 선언문, 작품, 철학, 연락처에 중점을 둡니다.

- **개인 디지털 명함/포트폴리오** — 이름+직함, 약력, 주요 작품, 연락처에 중점을 두세요

2. 시나리오에 따라 **필수 입력 필드**를 지정합니다. 사용자가 충분한 텍스트를 제공하지 않은 경우, 사용자의 주제와 일치하는 그럴듯한 대체 문구를 생성하되, 실제 사실(날짜, 가격, 실존 인물의 인용문, 통계 자료 등)을 조작해서는 안 됩니다.

3. **이미지 자료**(있는 경우). 사용자가 제공하는 모든 이미지는 시각적 일관성을 유지하기 위해 CSS를 통해 회색조 필터를 적용하여 표시해야 합니다. 컬러 이미지가 번지지 않도록 하십시오.

4. **섹션 개수**: 기본값은 5개 섹션입니다. 최소 4개, 최대 5개입니다. 각 섹션은 전체 화면을 덮는 슬라이드 형태의 화면입니다.

## 2단계: 시각 및 동작 시스템 구축

다음의 정확한 사양을 따르십시오. 절대로 벗어나지 마십시오.

### 색상 시스템 (절대 규칙 - 색상 사용 금지)

```

--bg-black: #000000 (페이지 배경)

--bg-deep: #050505 (미묘한 레이어 분리)

--text-white: #FFFFFF (기본 텍스트)

--text-mute: #AAAAAA(보조 텍스트)

--text-dim: #555555 (3차/레이블)

--라인: rgba(255,255,255,0.12) (가는 선, 구분선)

--glow: rgba(255,255,255,0.05) (부드러운 하이라이트)

```

파란색, 보라색, 네온 색상, 색조 변화가 있는 그라데이션 또는 그 어떤 색채 강조도 사용하지 마십시오. 유일한 시각적 언어는 검정, 흰색, 회색입니다.

### 타이포그래피

- 기본 글꼴 스택: `'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif`

- 숫자/레이블에 선택적으로 악센트 기호 사용: `'JetBrains Mono', 'IBM Plex Mono', monospace`

- 히어로 크기: clamp(48px, 8vw, 120px), 글꼴 두께 600-700, 자간 -0.03em, 줄 높이 1.0-1.05

- 본문: 16-18px, 가중치 400, 줄 높이 1.6, 색상 var(--text-mute)

- 레이블/눈썹: 11-12px 대문자, 자간 0.2em, 색상 var(--text-dim)

- 충분한 여백. 데스크톱 환경에서 텍스트는 화면 너비의 60%를 넘지 않습니다.

### 레이아웃

- 4~5개 섹션 각각은 `min-height: 100vh`이며 전체 너비로 표시됩니다.

- CSS 그리드 또는 플렉스박스를 사용하고, 의도적인 비대칭 정렬(예: 텍스트는 왼쪽, 숫자는 오른쪽)을 활용하세요.

- 왼쪽 상단에 고정된 로고/워드마크와 오른쪽 상단에 메타 정보(예: 섹션 색인 '01 / 05')를 추가합니다.

- 맨 위에 얇은 스크롤 진행률 표시줄을 추가하거나 오른쪽 가장자리에 세로 섹션 표시기를 추가하세요.

- 마지막 섹션 맨 아래에 작은 바닥글이 있습니다.

### 부드러운 긴 스크롤

- `html { scroll-behavior: smooth; }`를 적용합니다.

- `scroll-snap-type: y proximity`를 body에, `scroll-snap-align: start`를 각 섹션에 적용하여 스크롤에 자연스러운 움직임을 더하세요 (근접성은 필수 사항은 아니지만, 스크롤이 뻣뻣하지 않고 자연스럽게 느껴지도록 해줍니다).

- 스크롤 트리거 방식의 콘텐츠 표시 기능을 구현합니다. 각 섹션의 콘텐츠는 화면에 나타날 때 서서히 나타나며, 동시에 24px 위로 이동합니다. 외부 라이브러리 없이 순수 JavaScript로 IntersectionObserver를 사용합니다.

### 배경 움직임 (필수 - 100% 코드로 작성해야 하며, 비디오/GIF는 사용할 수 없습니다)

모든 콘텐츠 뒤에 고정된 전체 뷰포트 크기의 `<캔버스>`를 생성합니다(`position: fixed; inset: 0; z-index: 0; pointer-events: none;`). 모든 섹션은 이 캔버스 위의 `z-index: 1` 위치에 배치됩니다.

캔버스는 심우주의 먼지/액체 수은/우주 소음을 연상시키는, 끊임없이 움직이는 유기적인 흑백 흐름을 렌더링해야 합니다. 사용자의 시나리오에 가장 적합한 구현 방식을 다음 중 하나로 선택하십시오. 단, 선택된 구현 방식은 생동감 있고 부드러우며 분위기 있는 결과물을 만들어내야 합니다.

**옵션 A — 유동장 입자(권장 기본값, '미래지향적 유동'에 가장 적합):**

- 약 400~800개의 파티클 생성 (기기 픽셀 비율 및 뷰포트 영역에 따라 자동 크기 조정)

- 각 입자는 위치, 속도, 수명을 가지고 있습니다. 움직임은 Perlin/simplex 스타일의 노이즈 필드에 의해 제어됩니다 (간단한 인라인 노이즈 함수를 작성하세요. 라이브러리를 가져오지 마세요).

- 파티클은 낮은 알파 값(0.3-0.6)을 가진 작은 흰색 점(1-2px)으로 그려지며, 매 프레임마다 캔버스 위에 반투명 검은색 사각형(`rgba(0,0,0,0.04)`)을 그려서 누적되어 궤적을 형성합니다. 이는 특유의 연기 궤적 효과를 만들어냅니다.

- 입자들이 화면 가장자리를 감싸며, 약 300~500프레임 후에 다시 생성됩니다.

- `requestAnimationFrame`을 사용하고, 프레임 속도를 약 60fps로 제한하며, 탭이 숨겨지면 일시 정지합니다.

**옵션 B - 계층형 노이즈 그라디언트(프레젠테이션 시나리오에 더 적합):**

- 느리게 이동하는 저주파 노이즈를 여러 겹으로 겹쳐 부드럽고 흐릿한 흑백 덩어리로 표현합니다.

- 알파 값이 낮은 방사형 그라디언트를 사용하고, 사인/코사인 오프셋을 이용하여 위치를 애니메이션화하세요.

- 질감 표현을 위해 미세한 입자 오버레이(작은 무작위 픽셀, 알파 값 0.02-0.04)를 추가합니다.

**옵션 C — 벡터장 선:**

- 노이즈 필드를 따라 화면을 가로질러 천천히 휘어지고 움직이는 낮은 알파 값을 가진 얇고 구부러진 흰색 선 60~120개를 그립니다.

- 선은 시간이 지남에 따라 점점 흐려졌다 선명해졌다 합니다.

어떤 옵션을 선택하든:

- `prefers-reduced-motion` 설정을 준수해야 합니다. 그렇지 않을 경우 정적이고 미묘한 노이즈 질감으로 대체됩니다.

- 반응형이어야 함 - 창 크기 조정을 정확하게 처리해야 함

선명한 화면을 위해서는 `devicePixelRatio`를 반드시 사용해야 합니다.

- 외부 라이브러리, CDN 또는 에셋을 절대 사용해서는 안 됩니다 (three.js, p5, lottie, 비디오 파일, GIF 사용 금지).

캔버스 위에 `mix-blend-mode: overlay`로 설정하고 매우 낮은 불투명도(0.04-0.08)를 적용하여 미묘한 CSS 그레인/노이즈 오버레이(데이터 URI SVG 노이즈)를 겹쳐 필름 그레인 질감을 추가합니다.

### 영웅 등장 애니메이션 (필수 - 특유의 '와!' 하는 감탄을 자아내는 순간을 더해줍니다)

페이지 첫 로딩 시, 섹션 01의 히어로 이미지가 여러 겹으로 구성된 극적인 등장 애니메이션을 재생합니다. 전체 시퀀스는 약 3.0~3.4초 정도 소요되며, 한 번만 재생되고, 순수 자바스크립트만 사용합니다.

**순서:**

1. **눈썹 라벨** (0ms → 약 600ms)

- 타자기 효과: 문자가 약 25ms 간격으로 하나씩 나타납니다.

- 1픽셀 크기의 흰색 커서(▌)가 입력하는 동안 깜빡이며, 입력이 완료된 후 200ms 후에 사라집니다.

- 커서 스타일: `display: inline-block; width: 0.5ch; background: white; animation: blink 0.8s steps(2) infinite;`

2. **영웅 칭호 - 스크램블/복호화 효과** (눈썹 효과 완료 후, 약 600ms → 약 2400ms)

- 각 문자는 최종 문자로 고정되기 전에 약 80~120ms 동안 `!<>-_\\/[]{}—=+*^?#$%&@` 범위의 무작위 기호를 순환합니다.

- 문자는 왼쪽에서 오른쪽으로 순차적으로 나타나며, 각 문자는 이전 문자가 나타난 후 약 40ms 후에 나타납니다.

- 스크램블링 중에는 단색 글꼴('JetBrains Mono')로 표시하고 밝기를 약간 낮춥니다(var(--text-mute)).

- 잠금이 완료되면 제목의 글꼴과 전체 흰색으로 돌아갑니다.

- 공백과 구두점이 뒤섞이지 않고 즉시 고정됩니다.

- 부드러운 애니메이션을 위해서는 `setInterval`이 아닌 `requestAnimationFrame`을 사용하세요.

3. **자막** (~2400ms → ~3000ms)

- 페이드 인(불투명도 0 → 1) 및 블러-클리어(필터: blur(8px) → blur(0))

- 600ms 이지아웃

4. **스크롤 표시기** (~3000ms → ~3400ms)

- 400ms에 걸쳐 서서히 밝아지다가 부드러운 수직 흔들림 루프가 시작됩니다.

**규칙:**

- `DOMContentLoaded` 또는 `window.load` 이벤트에서 트리거됩니다.

- `prefers-reduced-motion: reduce` 설정을 준수하면 진입 단계를 완전히 건너뛰고 최종 상태를 표시합니다.

- 최초 로드 시에만 한 번 실행하고, 사용자가 섹션 01로 스크롤하여 돌아갈 때는 다시 실행하지 마십시오.

- 02~05번 구역의 IntersectionObserver 표시를 방해해서는 안 됩니다.

- 히어로 텍스트의 최종 모습은 정적 디자인과 완전히 일치해야 합니다(동일한 글꼴, 크기, 색상, 레이아웃).

- 순수 자바스크립트만 사용 — GSAP, anime.js, typed.js 및 외부 라이브러리 사용 금지

암호화 효과는 핵심적인 순간입니다. 마치 시스템이 사용자 앞에서 스스로 암호를 해독하는 듯한 느낌을 주어야 합니다. 제목이 비정상적으로 긴 경우(40자 이상) 문자별 암호화 지속 시간과 글리프 세트를 조정하여 전체 암호화 시간이 1.8초를 넘지 않도록 하십시오.

## 3단계: 4~5개 섹션 구성하기

감지된 시나리오에 맞춰 섹션의 목적을 조정하세요. 아래는 표준 구조입니다. 제목과 본문은 사용자의 콘텐츠에 맞게 수정하고, 레이아웃 패턴은 유지하세요.

**섹션 01 — 영웅/정체성**

- 눈썹 레이블(예: 'INDEX 001' 또는 시나리오별 태그) - 로드 시 타자기 애니메이션 효과 적용

- 매우 긴 히어로 타이틀(최대 1~6단어) — 로드 시 암호화/복호화 과정을 통해 애니메이션 효과 적용

- 한 줄 자막 — 로딩 시 페이드인 + 흐림-투명 효과

- 은은한 스크롤 다운 표시기(애니메이션 효과가 있는 화살표 또는 'SCROLL' 레이블) — 서서히 나타난 후 반복 재생

**제2절 - 선언문/비전**

- 글의 분위기를 설정하는 굵은 글씨로 된 단락 하나(2~4문장)

- 비대칭 레이아웃: 왼쪽에 텍스트, 오른쪽에 큰 숫자 또는 단어 하나

**섹션 03 — 쇼케이스 / 특징 / 작품**

- 3열 또는 지그재그형 그리드 형식의 항목 배열 (특징, 제품, 프로젝트, 슬라이드 글머리 기호)

- 각 품목: 작은 라벨, 제목, 1~2줄 설명

- 항목 사이에 가는 선으로 구분

- 사용자가 이미지를 제공한 경우, `filter: grayscale(1) contrast(1.05) brightness(0.95);`를 사용하여 여기에 표시합니다.

**제4장 - 세부 사항/사양/선언문**

- 텍스트 밀도가 높은 섹션: 번호가 매겨진 목록, 사양표 또는 더 긴 선언문 단락

- 숫자/라벨에는 단색 글꼴을 사용하세요

- 쾌적한 느낌을 유지하여 혼잡하지 않습니다.

**섹션 05 — 행동 유도 / 연락처 / 마무리**

- 마무리 말씀 (장문)

- 기본 CTA 버튼: 흰색 텍스트, 1px 흰색 테두리, 투명 배경, 마우스 오버 시 흰색 배경에 검은색 텍스트로 반전

- 선택 사항: 간단한 연락처, 소셜 미디어 계정 또는 '[날짜] 이용 가능' 문구

- 바닥글: 아주 작은 글씨, 저작권, 버전 번호 스타일

섹션을 4개만 사용하는 경우 섹션 02와 섹션 04를 하나의 명세서+매니페스토 화면으로 병합하십시오.

## 4단계: 구현 요구사항

### 한 줄 규칙

- `