아트조이 프레젠테이션 v1 — 설계 · 결정 (2026-09-18)

제안서 v4 PDF(비용판)와 별개 병행 문서다. 이건 «기능 설득용» 스크롤 스토리형 단일 HTML 이고, 금액 · 계약안은 한 글자도 안 들어간다. 내용 출처는 같다 — C:\dev\_work\ax-biz\ax_artjoy.py. 상태 · 진행 = handoff.md · 고객사 고유 금기 = rules.md · 진행판 = http://100.108.234.45:8799/artjoy-presentation.html

발단

• 2026-09-18(금) KST [페페] 지시 — 「아트조이 제안서 v2를 만들어줘. V2는 비용은 제외하고 내가 아트조이와 협력할 때 개발할 수 있는 기능 · 프로그램 위주로 구성. HTML, 오직 스크롤로 화면을 내려가면서 스토리를 풀어나간다. 배경은 모션이펙트, 내용도 단순 스크롤이 아닌 반응형 스크롤. 텍스트도 다음 컨텐츠로 갈 때 전환 효과. 텍스트는 단순 폰트스타일이 아닌 타이포그래피 위주. 컬러 = 다크 네이비 배경 · 레드 포인트 · 화이트 폰트. 전체 컨셉 = 비지니스 미팅, 남자 대표들의 혁신의 미래를 논하는 느낌. 유통 및 재고관리 ERP · 제품 상세페이지 생성기 · 리뷰 활용 고객 분석 제품 전략 수립이 가장 중요한 포인트. 별도로 내가 가진 자산으로 영업을 직접 뛰는 대표들에게 필요한 어플들 소개(미팅용 live stt · 지피티 라이브를 통한 ERP 확인 · 직원 업무 지시 메세지 전달 — 우리의 클로드 연결 기술 포함). 그릴링 먼저.」
• [페페] 정정 — 「버전은 프레젠테이션 v1 로」. (「제안서 v2」는 ax-biz rules 에서 이미 옛 PDF 판을 가리키는 말이라 충돌했다)

🔑 확정 결정 (그릴링 · 재논의 금지)

🔑 관객 — 대표 2명 (페페 제공 · 이 문서의 설계 축)

• 40대 초반 남자 2명.
• ① 내부 지원 역할 · AI 기술에 관심 있다 → 접이식 기술설명이 이 사람 몫. 「진짜 되는 건가 · 어떻게 만드나」로 읽는다.
• ② 외향적 · 재고관리 · 중국 수입 · 영업 위주 → 본문 큰 타이포가 이 사람 몫. 「내 일이 얼마나 줄어드나」로 읽는다.
• ⛒한 화면에서 둘을 동시에 설득해야 한다 — 챕터를 사람별로 나누면 「내 챕터 아니면 안 본다」가 된다.

기술 결정 (코덱스 상의 반영 · 2026-09-18)

⚠ 코덱스가 지적한 «이 관객 기준» 연출 실수 3개 (설계에 반영)

1. 계속 움직여서 읽을 정지 구간이 없다.
2. 과도한 핀 · 스크롤 탈취 — 질문받고 앞뒤로 돌아가기가 어려워진다(미팅에선 치명적).
3. 효과가 핵심 수치 · 고객 가치보다 먼저 보여서 「멋진 데모」로만 기억된다.

🎨 팔레트 — 확정 = D 「폴리싱 스틸」

🔴1차 3안(A 미드나잇 코발트 · B 딥오션 스칼렛 · C 인디고 카본)은 페페가 기각했다 — ①세 안의 컬러 컨셉이 사실상 같았고 ②레드가 배경에 포인트로 들어갔다(미리보기의 레드 글로우). 2차는 배경 «처리 방식»으로 갈랐다(폴리싱 메탈 / 글래스 / 새틴).

🔑 [페페] 색 규칙 (재논의 금지)

1. 배경에 레드 금지. 배경은 네이비 계열 그라디언트 · 글래스 · 광택만. 배경 캔버스도 화이트 · 블루 계열만 그린다.
2. 레드는 라인 · 강조 글씨 · 큰 숫자에만.
3. 레드 글씨에는 화이트 「테두리」만 — -webkit-text-stroke:.7px rgba(255,255,255,.92) + paint-order:stroke fill. ⛔text-shadow 글로우는 기각됐다 — 「쉐도우로 인해 텍스트가 희뿌옇게 뭉개진다」(페페).
4. 본문 문단(16~18px · 모바일 15px) 안에서는 레드 글자를 안 쓴다 → 화이트 글자 + 레드 형광펜 (background:linear-gradient(transparent 58%,rgba(255,45,45,.48) 58%)).
5. 배지 · 칩 같은 작은 조각도 레드 글자 금지 → 테두리 · 바탕만 레드, 글자는 화이트, 15px 이상.

✅ 1차 완성 (2026-09-18 KST)

산출물 경로

고치는 법 = src\ 를 고치고 cd C:\dev\_work\ax-biz\deck && PYTHONUTF8=1 python build.py --check. 산출 HTML 을 직접 고치면 다음 빌드가 덮어쓴다(헤더에 GENERATED · 편집 금지 + sha 가 박혀 있다).

⏳ 남은 것

• [페페] 실브라우저 육안 검토 1회 — 헤드리스는 GPU 캔버스 버그를 못 잡는다([[headless-hides-gpu-canvas-bugs]]). 같이 볼 것 = 회의실 프로젝터에서 레드 재현 · 트랙패드 관성으로 핀 구간이 과하게 넘어가는지 · 폰 실기.
• [페페] 대표에게 보낼 경로 확정 — 링크가 1차, 파일이 백업(메신저로 .html 을 보내면 iOS 미리보기에서 JS 가 안 돌 수 있다). 링크판이 정해지면 열람기록 수집 주소를 박아 다시 굽는다.

🔬 v2 모션 연구 — lusion.co 분석 · 응용 방법 (2026-09-18 KST · [코디])

발단

[페페] 지시 — 「처음에 내가 원했던 프레젠테이션은 https://lusion.co/ 와 같은 생생한 무빙효과가 포함된 페이지다. 텍스트 또한 살아있기를 원한다. 먼저 페이지 분석후 응용 방법 연구해봐」 → v1 1차 완성본이 그 기대에 못 미쳤다는 뜻.

1. lusion.co 실측 (Playwright · DOM · 네트워크 · 캔버스 컨텍스트)

🔑가장 중요한 발견 = lusion 은 반투명 dust 를 «안 쓴다». 3D 오브젝트도 텍스트도 전부 불투명이다 (C:\dev\_work\ax-biz\deck\refs\lusion-s1~s5.png). 「먼지 파티클」은 lusion 기법이 아니라 v1 이 임의로 넣은 것이다.

2. v1 이 죽어 보이는 진짜 원인 3개 (web-designer 실측 · 추정 아님)

1. 🔴배경 모션이 «안 보이는» 수준이다. C:\dev\_work\ax-biz\deck\src\deck.js L159-169 렌더 알파 = c.a*.55, c.a∈[.18,.68] → 실효 알파 0.099~0.374. 다크 네이비(#0B1626) 위 이 알파의 흰 점 74개는 육안으로 거의 안 잡힌다. ⛒밝은 배경은 저알파도 값 차이로 보이지만 다크는 저알파가 배경에 흡수된다 — 라이트 레퍼런스 기법을 다크에 그대로 옮기다 생긴 사고. 마우스 반응도 ±13px 뿐이고 스크롤과는 무관(scene 모듈 안에 scrollY 참조 0).
2. 🔴콘텐츠 열 밖이 매 챕터 빈다. @1440 실측 = .ch-inner 1180px / .ch-title 1013px / .step h3 638px / .step p 611px → 뷰포트 오른쪽 약 75%가 완전히 빈 캔버스. 이 패턴이 9챕터에 반복된다.
3. 🔴이미 만들어 둔 모션 예산을 안 쓴다. rAF 가 매 프레임 챕터 진행률 --p(0~1)를 계산하는데 소비처는 C:\dev\_work\ax-biz\deck\src\deck.css L86 딱 한 줄(ch-head translateY 최대 -40px). .reveal(어절 클립리빌)도 chapters\01-opening.html L13 한 곳뿐이고 그나마 문장 전체를 span 1개로 감싼 통짜다. .step 리빌은 제목·본문·카드 구분 없이 블록 전체가 같은 0.62s 로 24회 반복.

➕감정곡선 없음 — 챕터01 오프닝과 챕터09 클로징(「말보다 이틀이 빨랐습니다」)이 구도·모션·템플릿이 완전히 동일하다. 피치의 결론 문장이 중간 데이터 챕터와 같은 무게로 지나간다.

📱모바일(390)은 상대적으로 양호(핀 비활성 · dead space 없음 · 줄바꿈 정상). 실기 안드로이드·카톡 인앱은 미검증.

3. 🔑 three.js 가 필요한가 — 실측으로 답했다: 아니다

C:\dev\_work\ax-biz\deck\refs\proto-bg.html(Canvas2D 70줄 · 의존성 0)로 찍어 확인했다 — 캡처 C:\dev\_work\ax-biz\deck\refs\proto-bg-shot.png · 게시본 http://100.108.234.45:8799/media/ax-biz/_proto-bg.html?p=0.35

⛒결론 = three.js(+700KB) 불필요. 다크 배경 · 오프라인 자립(외부요청 0) · 저사양 티어 분기와 전부 양립한다. 못 내는 것 = lusion 의 「십자 블록 쏟아짐」 같은 강한 실루엣·물리 — 아트조이 미팅엔 과한 연출이라 버린다.

4. 응용 방법 — lusion 기법별 판정

5. 우선순위 — 비용 대비 체감 큰 순

6. 🔴 한글 어절 분할 함정 (영문 word 분할과 다른 자리)

• ✅어절 단위는 그대로 먹힌다 — deck.css L36 에 word-break:keep-all 이 이미 걸려 있어 분할 단위(공백)와 줄바꿈 단위가 일치한다.
• 🔴인라인 강조 태그 경계가 진짜 위험 — 헤딩 안에 이미 <span class="r">시스템이</span> 가 박혀 있다(01-opening.html L4 · 03-erp.html L5 등). 자동 분할기가 태그를 무시하고 텍스트만 쪼개면 레드 강조 span 이 깨지거나 이중 중첩된다 → 기존 인라인 태그는 통짜 토큰으로 다뤄야 한다.
• ⚠음수 자간(-.03em~-.045em) + inline-block span 경계에서 자간이 미세하게 어긋날 수 있다 — 자동검사로 못 잡는다. 사람 눈 필요.
• ⛔음절(글자) 단위로 더 쪼개지 마라 — 한글 조판 리듬과 안 맞아 눈에 거슬린다. 어절까지만.

7. 타이포 — 크기는 문제가 아니었다

@1440 실측: .cover-title 103.68px · .ch-title 72px · .ch-num 144px · .step h3 36px · .step p 16.56px. 모바일(390) .ch-title 31.2px · .step p 16px — 13px 하한 여유 충분. 「타이포가 죽었다」의 원인은 px 이 아니라 §2 의 구도·웨이트 고정·뭉텅이 리빌이다.

Pretendard Variable 은 wght 축 하나뿐(wdth·slnt 없음) → 「굵기가 실시간으로 변한다」가 유일하고 유효한 변수폰트 연출이다. - 숫자·강조어 진입 시 wght 100→900 램프(400ms) · 배지/버튼 hover 600→900(150ms) · .ch-num 고스트넘버 45→900(「확정」 느낌). - ⚠긴 문단 전체에 매 프레임 wght 스크럽 금지 — font-variation-settings 변경은 텍스트 reshape 비용이 있어 저사양 모바일에서 프레임드랍. 대상은 짧은 텍스트(숫자·1줄 헤드·배지) + 1회성 트리거로 한정.

8. 🔑 레드 규칙은 임팩트를 안 죽인다 — 「정적 색 배치」 규칙이지 「정적 모션」 규칙이 아니다

색은 그대로 두고 등장 방식만 동적으로 바꾸면 규칙 위반 0 으로 임팩트가 는다.

9. ⚠ 설계 전제 충돌 — [페페] 결정 필요

C:\dev\design-refs\dark-scroll-deck-2026-09\README.md §6 에 v1 전제가 박혀 있다: 「배경 모션 1레이어」 「스크롤 하이재킹 금지」 「계속 움직여서 읽을 정지구간 없는 것 금지」 「효과가 핵심 수치보다 먼저 보이는 것 금지」. v1 의 얌전함은 사고가 아니라 의도였다. lusion 화는 이 전제를 완화하는 것이다.

⛒다만 하이재킹 없이 §5 의 1~5 만으로도 체감은 크게 바뀐다 — 전제 중 「하이재킹 금지」·「정지구간」은 그대로 두고 간다는 게 코디 추천.

미팅 리스크 차단 장치

✅ v2 구현 완료 (2026-09-18 KST · [페페] 선택 = 「C. 전제까지 깨고 풀 lusion 화」)

🔑아키텍처 = Lenis(네이티브 스크롤 위 관성) 채택 · lusion 식 완전 가상스크롤(scrollY 0 고정)은 기각. lusion 의 body{overflow:hidden} + 53,104px 컨테이너는 체감의 원천이 아니라 구현 세부다 — 관객이 느끼는 건 ①휠 관성 ②단일 시간축 스크럽 ③멈추지 않는 배경이고 셋 다 scrollY 를 살린 채 낸다. 반대로 버리면 앵커 · Ctrl+F 찾기 · 위치복원 · sticky · IntersectionObserver · 인쇄가 전부 같이 죽는다(코덱스 상의 일치).

🔴 이번에 잡은 v1 잠복 버그 — 04 챕터가 한 번도 활성화되지 않았다

활성 챕터 판정이 threshold 0.28 이었는데 04 의 최대 교차비는 0.243(뷰포트보다 3~4배 긴 챕터는 교차비가 낮다) → 도트 · 발표자바 · 씬 전환이 04 를 통째로 건너뛰었다. rootMargin:'-45% 0px -45% 0px' 중앙 밴드로 교체. ⛒핀을 9개로 늘리면 03 도 같은 함정에 빠질 뻔했다 — 길이와 무관한 판정이어야 한다. 9챕터 순회 실측으로 확인.

🔴 관성 엔진의 진짜 함정 (다음에 또 밟는다)

브라우저가 직접 위치를 바꾸는 길이 여럿이다 — Ctrl+F 찾기 · 스크롤바 드래그 · 앵커 · 새로고침 위치복원. 그때 Lenis 내부 위치는 옛 값에 머문다 → 그 뒤 키 이동이 먹통(실측: End 가 안 먹음). ⛒매 프레임 Math.abs(lenis.scroll - lenis.actualScroll) > 2 면 조용히 맞춘다. 🔴단, 우리가 «의도한» 이동 중에는 쉬어야 한다(quietUntil) — 안 그러면 동기화가 막 시작한 scrollTo 를 되돌려 목적지에 못 간다(webkit 간헐 실패의 정체였다).

그 밖의 함정

• ⚠검사환경 함정 — webkit 은 앞 컨텍스트가 닫힌 뒤 페이지가 포커스를 잃어 키 이벤트가 document 에 안 간다 (y=0 인 채 실패). 단독 실행하면 멀쩡했다 → bring_to_front() + window.focus(). 제품 버그가 아니라 검사 버그였다.
• ⚠「멈추면 종료」 폴링은 오탐이다 — 관성이 출발하기 전 두 번 연속 같은 값이 잡히면 실패로 판정된다.
• ⚠deck.json 에 Windows 경로를 넣을 때 \ 는 JSON 이스케이프로 깨진다 → / 로 쓴다.
• 🔴배경 캔버스 색은 CSS 검사로 못 잡는다(코드로 그린다) → 빌더가 scene.js 의 모든 색 리터럴에 r ≤ b 를 강제한다.
• 🔴글자 열 보호막이 필요하다 — 튜브가 흰 제목을 가로질러 겹쳤다(09 「빨랐습니다」 실측). 구도는 오른쪽에서 보여주고 왼쪽~가운데는 어둠 그라디언트로 누른다. 둘 다 살리는 유일한 방법.

10. 사람 눈이 필요한 것 (v2 기준)

• 어절 분할 span 경계의 자간 어긋남(§6) — 자동검사 불가.
• 09 클로징 위계 상향 후 01 과의 균형(오프닝을 잡아먹으면 안 된다).
• 배경 솔리드의 금속 광택에 붉은기가 섞이는지(「배경 레드 금지」를 색상값으로는 못 잡는다).
• 실기 안드로이드 · 카톡 인앱 브라우저 — 이번 진단은 Playwright 뷰포트 시뮬레이션까지.

🔬 v3 재편성 조사 — 스크롤 연출 10컨셉 · 동적 텍스트 · 팔레트 3안 (2026-09-18 KST · [코디])

발단

[페페] 지시 — 「기대한 효과들은 구현 됐다. 하지만 기존에 있는 게 아닌 신규제작을 하다 보니 그래픽적인 완성도가 떨어진다. 실제로 스크롤 무빙 효과를 HTML 적용한 웹사이트를 조사해 디자인 레퍼런스에 추가해라. 특히 프레젠테이션 · 회사소개에 쓰인 것. 그 기술을 그대로 카피해서 효과 적용이 가능하면 제일 좋다. 안 되면 관련 프리셋 · 라이브러리를 찾아 모아라. 실제 있는 자료를 재활용해서 품질을 높인다. 색상 제한은 없다. 현재 텍스트가 정적이다 — 파편화 등 동적 텍스트가 되면 좋겠다. 글씨체 · 색상 · 크기 등 컨셉은 참고에 따라 완전 재편성한다. 2D 뿐 아니라 3D 포함. 대량 말고 프레젠테이션 스토리 기준 스크롤 진행에 대해 10개 컨셉 정도.」

산출물 (전부 자산으로 남겼다)

🔑 핵심 발견 — three.js 가 원인이 아니었다

실브라우저 프로브(14곳)로 확인한 것:

• 토스 「새로운 차원」 = WebGL 0(Lottie + ScrollMagic) · Lightship RV = 모션 라이브러리 0(SVG 마스크만). 둘 다 lusion 과 같은 «완성도 높다» 인상을 낸다. → 차이는 3D 가 아니라 타이포 크기 · 한 화면 한 메시지 · 전환 타이밍.
• oryzo.ai(Lusion 제작)는 문서높이 56,691px 의 네이티브 스크롤이다 — lusion.co 본진만 휠을 가로챈다(문서 900px 고정). 즉 하이재킹 없이도 그 체감이 나온다(v2 에서 이미 내린 결론이 실측으로 재확인).
• basement.studio 는 소스가 GitHub 에 공개(basementstudio/website-2k25) — 이번 13곳 중 구현을 읽을 수 있는 유일한 곳.

컨셉 10 — 스토리 배치 (전문 = concepts.json · 데모는 페이지에서 굴려 본다)

코디 추천 조합 = 1 + 4 + 7 + 9 를 먼저 깔고 8 을 오프닝·클로징에 한 번씩. 3D(10)는 08 에서만. 근거 = 코덱스 상의(「B2B 의사결정자에 효과 검증된 것 = 진행표시 · 수치 카운트업 · 전후 비교 와이프 · 단계 공개 · 짧은 전환」 / 「피할 것 = 긴 핀 · 휠 강탈 · 역스크롤에 깨지는 1회성 애니 · 질문 중 계속 움직이는 연출」).

⛒파편화 상한 = 코덱스 판정 「오프닝 · 클로징 한 줄만. ERP · 기능 · 수치 · 표에 쓰면 유치하다」. 희소성이 곧 효력이다.

동적 텍스트 — 한글 판정

• ✅바로 되는 것 = 마스크 리빌(clip-path) · 어절 스태거(anime.js splitText = Intl.Segmenter) · 가변폰트 굵기 램프(Pretendard 는 wght 1축뿐이라 이게 유일한 가변 연출) · 숫자 디코딩(스크램블은 숫자만).
• 🔑파편화는 «음절 분할 금지» 규칙의 예외다 — 글자가 아니라 픽셀을 쪼개기 때문(캔버스 getImageData).
• ⛔글리치는 기술적으론 되지만 B2B 미팅 톤에 과하다. 윤곽선 드로잉은 한글 자모 밀도 때문에 지저분하다.

🎨 팔레트 재편성 3안 — [페페] 결정 대기 (색 제한 해제 반영)

web-designer 실측 상담 결과. 🔴1차 3안이 「전부 다크 네이비」라 기각됐던 실수를 피해 «명도 자체»를 갈랐다.

• web-designer 추천 = A(보드룸 무드 유지 + 스티커감 제거). B 는 lusion 재현도 최고지만 무드 이탈이 크다.
• ⛒레드를 메인 강조로 계속 쓰면 한국 회계 관행상 「적자·경고」 연상 리스크(통설 · 1차 출처 없음). A·C 는 금/주황으로 회피, B 만 레드를 «희소 사용»으로 살렸다.

🔴 v2 의 «그래픽 완성도» 실제 원인 3개 (web-designer 실측 — 규칙 위반이 아니었다)

대비 · 13px 하한은 위반 0건이다(레드 on 네이비 4.897:1 = AA 통과). 진짜 원인:

1. 9장이 전부 같은 템플릿(고스트넘버 + 64px 룰 + 타이틀). 배경 구체 위치만 바뀌고 골격은 100% 고정.
2. 레드 강조가 9장 내내 같은 기법 하나(플랫레드 + .7px 화이트 스트로크) → 「인장 스티커」처럼 보인다. ⛒.7px 고정값이라 148px 제목에선 안 보이고 14~16px 에선 과하다 → 0.006em 비례값으로 바꾼다(난이도 하 · 효과 큼).
3. 제품 스크린샷이 원본 밝기 그대로 다크 신에 박혀 눈부시다 → 프레임 안에서 듀오톤·감광.
4. ➕lusion 재대조 = lusion 은 악센트색을 글자에 안 쓴다(라인 1개뿐). 우리는 9장 내내 악센트 = 글자색.

타이포는 안 죽었다 — Pretendard Variable 유지 추천(OFL 한글 가변폰트는 사실상 이것뿐). 고칠 건 굵기 단 수(800/900 두 단만 쓰지 말 것)와 스트로크 비례화.

⏳ [페페] 결정 대기 3건

1. 채택할 컨셉 — 추천 조합(1·4·7·9 + 8 양끝)으로 갈지, 다른 조합인지. 페이지에서 직접 굴려 보고 지목.
2. 팔레트 A / B / C — 이게 정해져야 폰트 크기·강조 기법이 따라 정해진다.
3. 3D 채택 여부 — 08 확장 챕터 한 곳(CSS 3D 무료 / OGL 133KB / three.js 392KB). 안 쓰면 단일 HTML 용량 그대로.

🐟 v3 — 연출 보정 · 청고등어 항해 · 발표 구간 (2026-09-19(토) KST · [코디])

🔴 기준 파일이 바뀌었다 (페페 지시 · 재논의 금지)

[페페] 「…/design-refs/scroll-motion-2026-09/sample-deck.html 이 기준으로 봐야 한다. 프레젠테이션 구버전으로 보면 안돼」 → 정본 = C:\dev\design-refs\scroll-motion-2026-09\sample-deck.html 한 장.

• 게시 = 마스터를 고치고 PYTHONUTF8=1 python C:/dev/design-refs/publish_devplan.py 로 미러(md5 동일 확인). 게시본 = C:\dev\devplan\design-refs\scroll-motion-2026-09\sample-deck.html.
• 구판 본덱 C:\dev\_work\ax-biz\deck\ 은 «실제 본문 문구·수치·이미지의 출처»로만 쓴다. 마크업·빌드·팔레트는 안 가져온다.
• v1 · v2 산출본(devplan\media\ax-biz\artjoy-presentation-v{1,2}.html)은 비교용 보존.

[페페] 지적 4건 → 원인(실측)과 처방

🔑「효과도 구간 나누는 시점 동일한 스타일 적용」(페페) = 같은 stepped() 를 분해도 · 카드스택 · 숫자조립 · 카피시퀀스에도 걸었다. 발표 스텝 경계와 저절로 맞는다 — stepped(p,n) 의 정지 구간 시작이 i/(n-1) 이고 구간 기본값을 그 값으로 뒀다.

긴 항해 = 등푸른 청고등어 무리 (도형 블롭 폐기)

• [페페] 「그려놓은 도형은 그대로 쓰지 말고 제미나이나 지피티의 도움을 같이 받아서 생성」 → 둘 다 받아 나란히 렌더해 비교했다.
• 제미나이(나노바나나) = 고등어 픽토그램 PNG → 윤곽추적(Moore-neighbor + Douglas-Peucker)으로 단일 Path2D(viewBox 100×34.6 · 133점). 채택
• GPT(codex exec) = SVG path 직접 작성. 탈락 — 꼬리가 몸통에 붙어 뭉개지고 등지느러미가 덩어리였다.
• ⛒좌표만 보고는 물고기인지 모른다 — 같은 캔버스에 둘 다 그려 스크린샷으로 판정했다. 추적 스크립트 원형 = 세션 스크래치패드 trace_fish.py.
• PNG 가 아니라 Path2D 인 이유 = 회전·확대 무손실(도약 접선 각도로 돌린다) · 용량 0에 가깝다 · base64 인라인 불필요.
• 구성 = 파도 3층(사인 3겹 + 마루선) + 무리 24마리(저사양 11). 등푸른 = 세로 그라디언트(등 #24406f → 배 #f4f8ff), 그라디언트 좌표는 CTM 을 따라가므로 한 번만 만든다.
• 🔑시간축을 둘로 나눴다 — 행선지·도약 높이·수면 높이 = 진행률 P 의 순수함수(되감으면 같은 그림 = 미팅 중 앞뒤 이동 대비), 파도 출렁임·헤엄·바람만 시계(time0). 그래서 스크롤을 멈춰도 화면이 안 죽는다(페페 「계속 역동적으로」). 파편화의 바람도 같은 규칙 — 흔들림 진폭이 t 에 비례하므로 집적 상태에서는 시계가 돌아도 그림이 100% 고정이다.
• rAF 를 연속 구동으로 바꿨다(옛 판은 vel≈0 이면 멈췄다). document.hidden 이면 정지(회의실 노트북 팬 소음).

발표 구간 + 구간 편집 패널

• 구간을 data-stops 분수(0~1) 로 적는다 — 뷰포트가 바뀌어도 유효(px 이면 깨진다). 우선순위 = localStorage(페페가 고친 값) > data-stops > data-steps 균등분할 폴백.
• 🔴옛 균등분할의 결함 = 첫 구간이 p=0 이라 마스크가 닫힌 «빈 유리판»이 먼저 떴다. 기본값을 각 연출의 정지 지점에 맞췄다.
• 패널(#panel) = 자유 모드 전용. body.present #panel{display:none} 으로 CSS 가 무조건 숨긴다(페페 「발표모드에서는 보이지 않는다」). 섹션별 구간 칩(× 삭제) · 「+ 현재 위치」 · 「기본값」 · 전환 속도 · JSON 복사/붙여넣기(확정되면 data-stops 에 박아 영구화) · 전체 초기화.
• 조작 = 스페이스·좌클릭·→ 다음 / 우클릭·← 이전 / Home·End / Esc = 발표↔자유 / 자유 모드에서 O = 패널.

🔴 이 세션에서 잡은 «조용한» 버그 (같은 패턴을 또 밟을 자리다)

1. updaters 래퍼가 인자를 하나만 넘겼다 → 바람 계산이 Math.sin(undefined) = NaN → fillRect(NaN,…) 은 예외도 경고도 없이 아무것도 안 그린다. 증상 = 흩어진 구간만 통째로 빈 화면(집적 상태는 파편 루프를 건너뛰어 멀쩡해 보였다). ⛒캔버스가 «비어 보이면» 좌표에 NaN 이 섞였는지부터 본다. 판정 = getImageData 로 잉크 픽셀 수를 세면 0 으로 딱 떨어진다.
2. anime.js 를 로드만 하고 한 번도 호출하지 않았다(어절 분할은 자체 splitInit). 태그 삭제 → 외부 의존성 0.
3. 컨셉06 속도반응이 --skew 를 «쓰기만» 하고 CSS 가 안 읽었다(var(--skew) 0건) → 여태 아무 일도 안 일어났다. ⛒.scard/.layer/.room 에는 걸지 마라 — JS 가 인라인 transform 을 매 프레임 덮어써서 CSS transform 이 통째로 무시된다.
4. 🔑클래스명 충돌 — 패널 칩줄에 .chips 를 썼다가 효과4 의 .chips{height:210px} 를 물려받아 한 줄이 210px 로 부풀었다. 한 파일 안에서 연출용 클래스와 UI 용 클래스는 이름을 겹치지 않는다(→ .stops 개명). 같은 뿌리 = [[bootstrap-class-collision-in-svg]].
5. ⚠검사 지표를 틀리게 잡을 뻔했다 — inner.scrollHeight > stick.clientHeight 로 «잘림»을 판정하면 오탐이다. CSS 는 변형된 자식의 영역까지 스크롤 오버플로에 넣는다(방이 Z로 밀린 만큼 440 → 936px 로 부풀었다). ⛒진짜 잘림 판정 = 보이는 요소의 getBoundingClientRect() 가 .stick 사각형 밖으로 나가는가.
6. ⚠Playwright MCP 는 브라우저 «한 대»를 공유한다 — 내가 다른 페이지를 열자 같이 돌던 web-designer 에이전트가 멈췄다(8분+ 무활동). ⛒브라우저를 쓰는 에이전트를 띄웠으면 내가 Playwright 를 잡지 않는다(또는 에이전트를 먼저 끝낸다).

기계검증 (헤드리스 chromium 1440×900 · 1366×768 · 26.9.19)

⚠테스트 함정 — 패널은 저장할 때마다 행을 다시 그린다. 캡처해 둔 노드를 나중에 클릭하면 detach 돼 이벤트가 안 뜬다 (「기본값이 안 먹는다」로 오판했다). 검증 스크립트는 매번 새로 조회해야 한다.

✅ 본문 이식 1단계 — 자산 + 그릇 (26.9.19 같은 날 · [코디])

「이식」을 «내용 옮기기» 전에 «옮길 수 있게 만들기»로 먼저 쳤다. 옛 구조에선 카드·층·방 문구가 전부 JS 배열에 박혀 있어 한 줄 고치려면 코드를 열어야 했다 — 그대로 9챕터를 부으면 JS 가 본문 저장소가 된다.

검증 = 외부요청 0 · 콘솔 0 · 숫자 36,000건·763개·4,737행 정확 도달 · 분해도 마지막 층 강조(나머지 .52) · 카드 z 10/11/12 역전 + 64px 간격 · 방·문장 시퀀스 마지막까지 도달 · 구간 27개.

⏳ 남은 것 — 본문 «내용» 이식 (다음 한 걸음)

지금 샘플덱은 9챕터 제목·수치만 실제 값이고 분량은 샘플이다. 이번에 더미에서 고친 것 = 와이프 칩(주문 프로그램·엑셀·사람 머릿속·대화방·사진 폴더) · 분해도 층(견적→발주→입고→재고→정산, 제조 용어 「생산·네스팅」 제거) · 숫자(후기 3.6만 · 제품 763 · 정리한 자료 4,737행) · 방(재고 바닥 경보 · 입고 지연 · 어제 판매 요약).

Fable 5 계획이 낸 18섹션 배치표(챕터 → 섹션 → 컨셉 → 살릴 내용 → 이미지 → stops)가 이식 설계다. 핵심 제약 = - .stick{min-height:100vh;overflow:hidden} → 한 섹션 = 한 화면. 구판 챕터(스텝 3~5 + 문단 + 카드 + 샷 + 접이식)를 한 섹션에 못 넣는다 → 챕터를 여러 섹션으로 쪼개는 게 구조상 필연. - details.tech 9개 → <template data-tech="NN"> + 고정 모달(스크롤 밖 오버레이라 구간과 충돌 0). - 이미지 8장 = WebP q80 569KB → base64 759KB(실측 · 원본 C:\dev\_work\ax-biz\out\img\). 예산 6MB 의 1/8. - 🔴이 PC 에 Pretendard 가 없다 → 지금 샘플덱은 맑은고딕으로 렌더되고 가변폰트 굵기 램프(300→900)가 죽는다. 이식 때 구판 build.py 의 embed_font(서브셋 + OFL 「AJ Sans」 개명)를 같이 가져와야 한다. - 금지어 assert(deck.json forbidden) · 13px 하한 · 「신동승 차장」 호칭은 이식본에도 그대로 건다.

✅ 본문 이식 2단계 — 9챕터 → 20섹션 (26.9.19(토) 같은 날 · [코디])

1단계에서 연출을 DOM 구동으로 바꿔 둔 덕에 JS 를 한 줄도 안 고치고 HTML 편집만으로 끝났다(아래 주석 버그 1건 제외). 문구는 전부 구판 원문이고 길면 자르기만 했다 — 창작 0.

18섹션 계획 → 실제 20섹션. 이유 하나 — .stick{overflow:hidden} 이라 한 섹션 = 한 화면이고 구판 한 챕터(스텝 3~5 + 샷 + 카드)가 한 화면에 안 들어간다. 내용을 자르는 대신 챕터를 쪼갰다. 접이식 기술설명 9개는 구판 원문 그대로 넣었다 — 스크롤 밖 오버레이라 분량 제한이 없다(본문만 한 화면 제약을 받는다).

🔴 또 잡은 «조용한» 버그 — 컨셉06 속도 반응이 «여전히» 죽어 있었다

1단계 기록엔 「CSS 가 --skew 를 안 읽는 걸 고쳤다」고 적혀 있었지만, 실제로는 그 자리의 CSS 주석이 중간에서 한 번 닫혀(*/ 두 번) 남은 줄이 «셀렉터»로 먹혔고 .glass{transform:skewY(var(--skew,0deg))} 규칙이 통째로 버려지고 있었다. 에러도 경고도 없다. ⛒더 고약한 것 — 그 함정을 설명하려고 주석에 닫는 기호를 글자로 적었다가 같은 자리에서 또 깨뜨렸다. 지금은 실측 최대 9deg(상한값)까지 살아서 움직인다. 판정법은 rules.md 🆕 신규 참조.

기계검증 (헤드리스 chromium · 1440×900 · 1366×768 · 26.9.19)

⚠잘림 판정을 두 번째로 고쳤다 — scrollHeight 오탐(1단계 기록)에 이어 인접 섹션 오탐. sticky 로 가장자리에 걸친 섹션은 진행률이 중간값이라, 통과 중인 방(translateZ 3배 확대)·올라오는 중인 카드가 유리판 밖인 게 정상이다 → 화면 중앙을 차지한 섹션 하나만 잰다. 전환이 «끝난» 정지 상태에서 재는 것도 같은 이유.

⏳ 남은 것 — 3단계 단일파일 패킹

• 글꼴·이미지 base64 인라인 + 금지어 assert + 실기검사. 현 실측 = HTML 101KB + 글꼴 106KB + 이미지 716KB ≈ 0.9MB(환산 1.2MB) — 목표 6MB 의 1/5.
• 🔴그때 개발 주석을 스트립한다 — 지금 마스터 소스 주석에는 내부 호칭이 남아 있다(화면·기술설명·이미지 경로에는 0). 마스터에서 지우면 함정 기록이 날아가므로 패킹 단계에서만 턴다.
• 검증 스크립트 원형 = 이 세션 스크래치패드 verify.py(발표 스텝 전진 + 중앙 섹션 판정 + 섹션별 스크린샷).