한 줄의 선

슬라이드 개요.md 를 끝까지 읽고, 선 하나가 화면을 떠나지 않고 세 가지 재료(종이 위 연필 → 청사진의 선 → 어둠 속 빛)로 세 번 승격되며 이야기를 이끄는 16:9 모션 영상을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘.

1. 서사 설계
- 개요를 세 막으로 나눈다: 1막 지금까지(출발점·진단·문제, 종이 위 연필), 2막 바꾸는 방법(일정·도구·교육·설계, 청사진), 3막 결과와 앞으로(사용·효과·지금 위치·내년, 빛). 막마다 장면 3~5개, 전체 9~12장면, 자동 재생 90~150초.
- 개요의 장이 더 많으면 결론·인용·질문처럼 선으로 그리기 어려운 장은 빼거나 다른 장면에 합치고, 무엇을 뺐는지 알려 준다. 숫자 없는 장면(일정, 마무리)도 된다.
- 장면은 옆으로 나란히 펼쳐 두고 카메라가 펜 끝을 따라 이동한다(같은 자리를 지우고 다시 쓰지 않음).
- 선 하나가 모든 것을 그린다: 업무 흐름, 칸, 숫자의 밑줄, 도형, 연결선. 장면이 바뀌어도 선은 끊기지 않고, 이전 장면의 마지막 획이 다음 장면의 첫 획이 된다.
- 막이 바뀔 때 재료가 승격된다: 연필 선이 굵어지고 종이가 청사진 격자로 물들고(1.5~2초), 청사진 선이 빛을 내며 배경이 어두워진다(1.5~2초).
- 마지막 장면은 빛의 선이 1막에서 연필로 그린 업무 흐름을 다시 그리되, 짧아진(다시 설계한) 모양으로 끝난다.
- 장면마다 멈춤 지점은 장면 끝 하나가 기본.
- (선택) 만들기 전에 막·장면 표(막, 장면, 선이 그리는 것, 숫자, 다음 장면으로 이어지는 획)를 먼저 보여 주고 확인을 받는다.

2. 재료별 화면
- 1920×1080 무대를 창 크기에 맞춰 비율 유지. 글꼴 Pretendard(CDN: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css), word-break: keep-all.
- 종이(1막): 따뜻한 미색 #F3EEE3에 종이 결 노이즈, 연필 선 #2B2B2B 2~3px(막 전환 때 4px로 굵어짐), 선 경로에 낮은 주파수 흔들림(진폭 1.5px)과 끝이 가늘어지는 획.
- 청사진(2막): 바탕 #0F3D7A, 흰 격자(40px 간격, 불투명 12%), 흰 선 2px, 치수선·주석 화살표.
- 빛(3막): 바탕 #05070D, 선은 파랑 #3B82F6 빛(바깥 번짐 2겹), 앞으로 할 일은 주황 #F97316 빛, 선 위를 흐르는 빛 점.
- 글자: 제목 56~72px, 숫자 120~200px. 선이 밑줄을 먼저 긋고, 글자는 펜 끝 40px 뒤를 따라 왼쪽에서 오른쪽으로 드러나 획이 끝날 때 완성된다. 출처 같은 작은 글자는 밑줄 없이.
- 펜이 글자 위를 지나가지 않게 배치한다(이동은 글자 기준선을 따라).

3. 선 움직임
- 선을 그리는 펜 끝(작은 점)이 늘 보인다. 펜 끝이 다음 그릴 곳으로 갈 때도 선을 끌고 가거나, 이미 그린 선을 되짚어 간다(허공을 건너뛰는 빈 이동 금지).
- 그리는 속도는 일정하지 않게: 직선은 빠르게, 모서리에서 잠깐 느려진다(획마다 easeInOut).
- 숫자 변화는 선으로: 칸을 그어 나누고(6 → 19), 이전 숫자에는 취소선을 긋고 흐리게, 지우개 획으로 지우며 묶는다(19 → 8). 빛의 막에서 지우개는 주황 획이 지나가며 선이 꺼지는 모습.
- 카메라는 펜 끝을 부드럽게 따라간다(지연 0.3초, 이동 중 회전 없음). 확대는 기본 1.0배, 강조하는 순간만 1.06~1.15배.
- 멈춘 동안에도 펜 끝이 숨 쉬듯 맥박(1.5초 주기)하고, 3막에서는 빛 점이 선을 따라 계속 흐른다.

4. 금지
- 선이 끊기고 새로 시작하기, 펜 끝 없이 선이 저절로 나타나기, 정해진 자리에서 투명도만 바뀌며 나타나기, 글머리 기호 목록, 장면 사이가 빈 화면으로 끊기기, 등속 움직임, 재료가 막 중간에 섞임.

5. 문구
- 장면 제목은 존댓말 문장, 나머지는 명사형(표지·마무리는 개요 원문 문구 그대로). 한 화면에 제목 하나, 큰 숫자 하나, 짧은 설명 한두 줄.
- 숫자·이름·인용은 개요에 있는 것만 쓴다. 새 숫자를 만들지 않고, 인용과 질문은 원문 그대로. 기준일·출처는 작은 글씨로.

6. 렌더 계약 (MP4로 뽑을 수 있게)
- 화면은 시간 t(초)만으로 정해진다. window.renderAt(t)를 부르면 그 시각의 화면을 그 자리에서 그린다. window.DURATION에 전체 길이(초, 자동 재생 기준).
- setTimeout, CSS transition·animation, Date.now, Math.random을 쓰지 않는다. 난수는 시드를 고정한 함수로, 스프링도 t로 계산하는 식으로.
- 실시간 재생은 requestAnimationFrame으로 t를 진행시키며 같은 그리기 함수를 부른다. 바깥에서 renderAt(t)를 부르면 실시간 재생을 멈춘다.
- 발표 모드에서 멈춘 동안의 계속 움직임(흐르는 빛, 그레인 등)은 실제로 흐른 시간으로, 등장 움직임은 이야기 시간 t로 계산한다(renderAt(t)에서는 둘이 같음).
- 글꼴 준비가 끝나면 풀리는 window.READY(Promise). 글꼴 대기는 3초 상한(requestAnimationFrame으로 잼). Canvas에 쓰는 글꼴은 부분 글꼴 대신 Pretendard 가변 글꼴 전체 파일로.

7. 재생과 조작
- 기본은 발표 모드: 장면에 들어가면 등장 움직임이 재생되고, 다 나타난 상태로 멈춰 기다린다(계속 움직임은 유지). →·Space·Enter·PageDown·클릭으로 다음(장면 사이 변형·이동을 재생하며 다음 장면으로), ←·PageUp으로 이전(이전 장면은 다 나타난 상태로). 재생 중에 다음을 누르면 장면 안 멈춤 지점이 남았으면 그 지점으로, 없으면 다음 장면으로 바로 넘어간다.
- 모바일: 탭으로 다음, 화면 왼쪽 1/3 탭은 이전, 좌우 스와이프로 이전·다음. window의 click 대신 pointerdown·pointerup으로 처리한다(아이폰 Safari는 화면 탭을 window click으로 보내지 않음). touch-action: none. 마우스 클릭은 어디를 눌러도 다음이고, 한 번 눌러 두 장 넘어가지 않게 한다.
- A로 자동 재생(영상 모드) 켜고 끄기. 자동 재생에서는 Space 일시정지, ←/→ 장면 처음으로, 마지막에서 멈춘다. F 전체화면, H·Home 처음부터.
- 화면 아래에 얇은 진행 막대와 '번호 / 전체 · 장면 이름', 키 안내는 처음 3초만.
- 주소 옵션: ?s=N(N번 장면으로 가는 이동부터), ?t=초(그 시각에서 멈춤), ?auto(자동 재생으로 시작), ?record(자동 재생 + 진행 막대·안내 숨김)
- 지금 장면 번호를 주소 끝에 #N으로 표시한다(history.replaceState). 새로고침하거나 #N으로 열면 그 장면부터 시작하고, 주소의 #N을 바꾸면 그 장면으로 다시 연다. #N이 있으면 ?s보다 먼저 따른다.
- 외부 파일은 글꼴 CDN 하나만.

8. 검수
- 브라우저 자동화(Playwright 등)로 1920×1080에서 renderAt(t)를 불러, 장면마다 다 그려진 프레임과 그리는 중간 프레임, 막이 바뀌는 재료 전환 중간(시작 +0.5초, +1초)를 캡처해 직접 본다. 헤드리스 크롬은 --use-angle=metal(맥) 등으로 GPU를 켠다.
- 확인할 것: 선이 한 번이라도 끊기는지(획 사이 간격 0, 펜 끝이 1/60초에 150px 넘게 움직이면 끊김 의심), 글자와 선 겹침, 연필 흔들림이 지저분하지 않은지, 재료 전환 중 빈 화면, PPT처럼 보이는 곳.
- 발표 모드에서 멈추는 프레임이 모두 완성된 화면인지(덜 나왔거나 빠지기 시작한 상태가 아닌지), 다음·이전·클릭·A도 눌러 본다.
- 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
- 고칠 것을 '몇 초, 무엇을, 어떻게'로 적고 고친 뒤 다시 캡처한다(2~4회). 확인한 것과 못 한 것을 나눠 알려 주고, 캡처 파일은 끝나면 지운다.