Heptapod B Encoder

완성 코드에서 복원한 제작 단계

아래 지시는 원본 프롬프트가 아니라 예제 프로젝트의 완성 코드 구조를 바탕으로 다시 작성한 재현 프롬프트입니다.

1. 01

   장면을 스크롤 시간표로 바꾸기

   영상 시간과 읽는 시간을 분리해 장면마다 다른 호흡을 줍니다.

   입력

   • src/data/heptapodHeroStory.js

   출력

   • src/data/heptapodScrubTimeline.js

   재현 프롬프트

   여섯 장면에 영상 시작과 끝 시간, 100vh 기준 스크롤 가중치, 카피와 키네틱 모드를 정의하고, 이 데이터를 정규화된 클립 목록과 스크롤 진행도에서 영상 진행도로 가는 구간별 선형 함수로 변환해줘.

   확인

   각 장면의 스크롤 길이를 바꾸면 영상 구간은 유지된 채 체류 시간만 달라집니다.

2. 02

   가역적인 문자 버킷 설계하기

   무작위처럼 보이는 형태 안에 원문을 되찾을 수 있는 정보를 보존합니다.

   입력

   • src/utils/heptapod/reversibleCodec.js

   출력

   • src/utils/heptapod/reversibleModel.js

   재현 프롬프트

   한글 자모, 영문, 숫자와 공백을 고정 알파벳으로 정규화하고 지원하지 않는 문자는 제외한 뒤 이름을 bijective base-K BigInt로 바꿔줘. 그 정수를 링 하모닉, 틈 위치, 가닥 수, 무게중심, 최대 세 개의 덩어리 버킷으로 분해하고, 용량 초과 여부를 표시하며 범위 안에서는 동일한 필드에서 원문을 복원하는 모델을 만들어줘.

   확인

   지원 문자와 버킷 용량 범위의 이름을 모델로 만든 뒤 decode하면 입력 문자열과 정확히 일치하고, 용량 초과 입력은 복원 불가 상태로 표시됩니다.

3. 03

   형태를 잉크 입자로 전개하기

   정보를 담는 기하와 장식적인 잉크 질감을 분리합니다.

   입력

   • src/utils/heptapod/reversibleModel.js

   출력

   • src/utils/heptapod/logogramParticles.js
   • src/components/motion/LogogramRendererCanvas.jsx

   재현 프롬프트

   가역 형태 모델의 링과 덩어리를 720 좌표계의 결정론적 잉크 입자로 전개해줘. 같은 입자 생성기를 실시간 Canvas 애니메이션과 정적 페인트가 공유하게 하고, 장식 지터는 시드로 고정해줘.

   확인

   같은 이름을 다시 렌더링하면 링 구조와 입자 배치가 반복 재현됩니다.

4. 04

   성능에 맞는 인터랙티브 인코더 조립하기

   기기 조건과 모션 선호가 달라도 하나의 Canvas 렌더러로 입력과 분석의 핵심 경험을 유지합니다.

   입력

   • src/utils/heptapod/reversibleModel.js
   • src/utils/heptapod/logogramParticles.js
   • src/utils/heptapod/detectRenderTier.js
   • src/components/motion/LogogramRendererCanvas.jsx

   출력

   • src/components/templates/HeptapodEncoderPage.jsx

   재현 프롬프트

   이름 입력과 Enter 인코딩, 원문 복원 상태, 분석 오버레이, 문단에서 글자까지의 단계별 분해를 한 페이지에 조립해줘. WebGL 지원과 기기 성능을 감지해 성능 구성을 계산하되 현재 세 등급은 모두 LogogramRendererCanvas를 사용하고, 모션 감소 설정으로 애니메이션 동작을 조절해줘.

   확인

   이름을 확정하면 글리프와 Decode 값이 함께 바뀌고, 분해 가능한 글리프를 누르면 하위 단위가 나타납니다.

5. 05

   결과를 저장하고 공유하기

   생성 결과를 화면 밖에서도 동일하게 남기고 다시 열 수 있게 합니다.

   입력

   • src/utils/heptapod/logogramParticles.js
   • src/utils/heptapod/reversibleModel.js

   출력

   • src/utils/heptapod/exportPng.js
   • src/components/templates/HeptapodEncoderPage.jsx

   재현 프롬프트

   완성 모델을 기준 크기의 2배 오프스크린 캔버스에 같은 입자 함수로 그려 PNG로 내려받게 해줘. 현재 이름은 name 쿼리에 넣어 복사하고, 그 주소로 다시 열면 즉시 같은 모델을 만들게 해줘.

   확인

   저장한 PNG는 완성 상태로 출력되고 복사한 링크에서는 같은 이름과 글리프가 열립니다.

6. 06

   시네마틱에서 도구로 전환하기

   세계관 소개와 실제 생성 도구를 끊김 없는 한 경험으로 연결합니다.

   입력

   • src/data/heptapodScrubTimeline.js
   • src/components/templates/HeptapodEncoderPage.jsx

   출력

   • src/components/templates/HeptapodHeroIntro.jsx
   • src/App.jsx

   재현 프롬프트

   먼저 heptapodScrubTimeline.js를 읽는 HeptapodHeroIntro를 만들어 고정 영상을 스크롤로 탐색하고 각 장면의 카피와 사운드를 동기화해줘. START로 오디오와 스크롤을 열고 SKIP을 제공하며 마지막 화이트아웃 뒤 120vh 구간에서 children을 제자리 페이드로 넘겨줘. 그다음 App에서 HeptapodEncoderPage를 HeroIntro의 children으로 전달하고 name 쿼리가 있으면 인트로 없이 인코더를 직접 렌더해줘.

   확인

   처음 방문하면 인트로가 나타나고 마지막 장면에서 인코더로 전환되며, 공유 링크는 바로 인코더를 엽니다.