다크 파티클 모션

슬라이드 개요.md 를 끝까지 읽고, 슬라이드 없이 영상만 봐도 이해되는 세련된 16:9 모션 디자인 영상을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘. 시각적으로 모던하게, 파티클과 선으로 내용을 받쳐 줘.

1. 장면 설계
- 개요의 장 하나를 장면 하나로 한다. 장마다 메시지와 '청자가 이해할 것'을 한 문장으로 줄여, 장면 하나에 메시지 하나만 둔다.
- 장면마다 핵심 숫자 하나 또는 그림 하나를 크게 둔다. 숫자가 여럿이면 가장 중요한 하나만 크게, 나머지는 작은 보조 숫자로 2~3개까지.
- 표와 긴 목록은 넣지 않는다. 시간순 일정은 선 위의 점(타임라인)으로, 비율은 점·막대·고리 그림으로 바꿔 넣는다.
- Part 이름은 제목 위 작은 머리글로 둔다.
- 장면마다 내용과 같은 모양의 파티클 움직임을 고른다(3번 목록).
- 장면 길이는 읽는 데 필요한 만큼(보통 8~15초), 전체 3~5분.
- (선택) 만들기 전에 장면 표(번호·메시지·숫자나 그림·파티클·길이)를 먼저 보여 주고 확인을 받는다.

2. 화면
- 1920×1080 무대를 만들고, 창 크기에 맞춰 비율을 유지한 채 확대·축소한다.
- 배경은 아주 어두운 남색(#050913 근처)에 은은한 빛 번짐, 옅은 격자, 가장자리 어둡게.
- 강조색은 시점별로 하나씩: 지난 일과 현재는 파랑(#4F8CFF), 앞으로 할 일은 주황(#FFB54A). 장면이 바뀌면 파티클과 배경 빛이 그 색으로 천천히 바뀐다. 한 장면에 두 시점이 함께 나오면 위치로 나눠 각각의 색을 쓴다(왼쪽 파랑, 오른쪽 주황).
- 글꼴 Pretendard(CDN: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css), 한글은 단어 단위 줄바꿈(word-break: keep-all).
- 글자 크기: 제목 60px 이상, 본문 26px 이상, 출처·기준 21px 안팎. 좌우 여백 140px, 요소 사이도 넉넉히.

3. 파티클
- canvas 하나에 파티클 200~250개. 가까운 파티클끼리(120px 안팎) 옅은 선으로 잇고, 겹치는 곳이 밝아지게 합성한다.
- 장면이 바뀌어 모드가 바뀌면 파티클이 새 자리로 부드럽게 옮겨 간다.
- 모드와 쓰는 곳
  - ring: 표지·마무리. 화면 가운데를 감싸는 고리
  - flow: 흐름·타임라인. 왼쪽에서 오른쪽으로 흐르는 여러 줄
  - scatter: 흩어진 출발점, 따로 노는 상태
  - drift: 인용·설명. 천천히 떠다니는 배경
  - split: 한 줄기가 두 방향으로 갈라짐(두 가지 방식으로 시작)
  - converge: 숫자 요약. 가운데로 모임
  - hub: 중심에서 여러 기능으로 퍼짐(플랫폼·구성도)
  - stations: 한 곳에서 여러 지점으로 이동(지역·확산)
  - rise: 아래에서 위로 오름(증가·차트)
  - fade: 오르며 옅어짐(사라진 일·줄어든 것)
  - grid: 격자로 물결치듯 깜빡임(만든 것이 많음)
  - stages: 단계 원들을 잇는 흐름(로드맵·지금 위치)
  - merge: 여러 줄기가 하나로 합류(통합)
  - burst: 한 점에서 퍼짐(행사·확산의 순간)
  - 맞는 모드가 없으면 내용과 같은 모양의 모드를 새로 만든다.
- 파티클이 도식을 따라 흐를 때는 SVG 도식과 같은 좌표를 써서 선과 점 위를 정확히 지나가게 한다.
- 파티클은 글자 뒤에서 내용을 받치는 역할. 장면마다 세기(투명도)를 정하고, 제목·본문 영역 안에서는 파티클을 흐리게 해 글자를 가리지 않게 한다.

4. 움직임
- 장면 안 요소는 정해진 시각에 차례로 나타난다(아래에서 올라오며 선명해짐, 좌우에서 밀려옴, 흐림이 걷힘).
- 선과 도식은 SVG로 그리고, stroke-dashoffset으로 그려지듯 나타나게 한다.
- 숫자는 0이나 이전 값에서 카운트업, 막대는 바닥에서 자란다.
- 인용이 여러 개면 한 장면에서 하나씩 바꿔 보여 준다.
- 장면이 바뀔 때 이전 장면은 0.5초 안에 사라진다.

5. 그래프·소개·지도·사진
- 추이 그래프(값 10개 이상): 막대가 왼쪽부터 차례로 자란다. 최근 구간만 밝은 색, 개요의 '그래프에 표시할 일'은 세로 점선과 짧은 라벨로. 값 라벨은 처음·마지막·최고값과 꺾인 곳(연휴 등)만. 그래프 위에는 장의 핵심 숫자를 크게 카운트업한다.
- 제품·도구 소개: 로고가 먼저 나타나고 이름과 한 줄 소개가 이어서 펼쳐지며, 옆에 화면 캡처가 떠오른다. 다음 단계에서 로고가 왼쪽 가운데로 옮겨 가고 기능이 동심원으로 하나씩 그려지며 오른쪽에 설명이 붙는다. 파티클은 동심원을 따라 돈다.
- 장소가 있는 내용: 점으로 찍은 지도 위에 장소마다 원(크기는 횟수·인원에 비례)과 라벨. 옆에 장소별 막대, 그 아래로 현장 사진 띠가 천천히 옆으로 흐른다. 지도는 공개 행정구역 경계 데이터(GeoJSON)를 받아 점으로 바꿔 HTML 안에 넣고, 장소는 실제 위경도로 찍는다.
- 사진이 있는 장면: 화면 오른쪽 2/3를 사진으로 채우고, 왼쪽으로 어두워지는 그라데이션 위에 글을 둔다. 사진은 천천히 확대되며, 인용이 바뀔 때 사진도 교차 전환된다.
- 이미지는 개요 '장표 자산'에 있는 것만 쓴다. 없으면 그 장치는 쓰지 않는다.

6. 문구
- 장면 제목은 존댓말 문장(~했습니다, ~합니다), 나머지는 명사형 개조식. 표지·마무리는 명사구도 된다. 장면 하나에 본문 3줄 이내.
- 숫자·이름·인용은 개요에 있는 것만 쓴다. 새 숫자를 만들지 않고, 인용과 질문은 원문 그대로. 인용 출처는 '— 팀 이름'.
- 숫자에는 단위를 붙이고, 기준일·출처는 화면 아래 작은 글씨로.

7. 재생과 조작
- 기본은 발표 모드: 장면에 들어가면 등장 움직임이 재생되고, 다 나타난 상태로 멈춰 기다린다(파티클은 계속 움직임). →·Space·Enter·PageDown·클릭으로 다음, ←·PageUp으로 이전(이전 장면은 다 나타난 상태로). 인용처럼 장면 안에서 차례로 바뀌는 곳은 바뀔 때마다 멈춘다. 재생 중에 다음을 누르면 다음 장면으로 바로 넘어간다.
- 모바일: 탭으로 다음, 화면 왼쪽 1/3 탭은 이전, 좌우 스와이프로 이전·다음. window의 click 대신 pointerdown·pointerup으로 처리한다(아이폰 Safari는 화면 탭을 window click으로 보내지 않음). touch-action: none. 마우스 클릭은 어디를 눌러도 다음이고, 한 번 눌러 두 장 넘어가지 않게 한다.
- A로 자동 재생(영상 모드) 켜고 끄기. 자동 재생에서는 장면이 정해진 길이만큼 흐르고 Space 일시정지, 마지막 장면에서 멈춘다. F 전체화면, H·Home 처음부터.
- 화면 아래에 진행 막대(장면 경계 눈금)와 '현재 번호 / 전체 · 장면 이름'.
- 주소 옵션: ?s=N(N번 장면부터), ?auto(자동 재생으로 시작), ?record(자동 재생 + 진행 막대·안내 숨김, 화면 녹화용), ?loop, ?speed=1.5
- 지금 장면 번호를 주소 끝에 #N으로 표시한다(history.replaceState). 새로고침하거나 #N으로 열면 그 장면부터 시작하고, 주소의 #N을 바꾸면 그 장면으로 다시 연다. #N이 있으면 ?s보다 먼저 따른다.
- 검수용 옵션: ?t=초(장면 안 그 시각으로 이동, 이미 지난 움직임은 끝난 상태로), ?hold(장면 요소가 다 나타난 상태로 멈춤). 예: ?s=5&hold
- 외부 파일은 글꼴 CDN 하나만. 개요에 '장표 자산' 이미지가 있으면 상대 경로로 넣는다.

8. 검수
- 브라우저 자동화(Playwright 등)로 1920×1080에서 장면마다 ?s=N&hold로 열어 캡처해 직접 본다. 인용이 바뀌는 장면은 인용마다 캡처한다.
- 확인할 것: 글자 겹침, 화면 밖으로 잘림, 파티클이 글자를 가림, 도식과 파티클 경로가 어긋남, 어색한 줄바꿈, 한쪽이 비어 보이는 배치, 사진 위 글자가 잘 읽히는지, 지도 위 장소 위치.
- 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
- 고친 뒤 다시 캡처하고, 확인한 장면과 확인하지 못한 장면을 나눠 알려 준다. 캡처 파일은 끝나면 지운다.