ONEIR

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

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

1. 01

   서사와 영상 구간을 데이터로 고정하기

   긴 랜딩의 카피와 이미지, 제품 정보, 영상 시간을 화면 구현과 분리합니다.

   출력

   • src/data/landingContent.js
   • src/data/scrubTimeline.js

   재현 프롬프트

   몰입 시퀀스, 꿈의 결과, 아침 시나리오, ATLAS 리포트, 제품 사양, 얼리 액세스의 카피와 이미지 경로를 안정적인 섹션 ID로 정리해줘. 별도의 scrubTimeline.js에는 90초 영상을 잇는 10개 클립의 시작과 끝, 정규화된 진행 구간을 정의해줘.

   확인

   섹션 콘텐츠와 영상 구간이 컴포넌트 밖의 두 데이터 모듈에서 각각 확인됩니다.

2. 02

   스크롤을 하나의 영상 시간축으로 변환하기

   사용자가 내린 거리와 영상의 장면 전환, 캡션의 등장 시점을 하나의 진행률로 맞춥니다.

   입력

   • src/data/scrubTimeline.js
   • src/components/scroll/VideoScrubbing.jsx

   출력

   • src/components/scroll/ScrubSequence.jsx

   재현 프롬프트

   scrubTimeline.js의 클립 구간을 읽는 0부터 1 사이의 공통 진행률을 만들어줘. ScrubSequence는 긴 세로 트랙 안에 100vh 영상 무대를 고정하고, VideoScrubbing은 그 값을 video.currentTime으로 바꾸게 해줘. 모바일 소스와 포스터 폴백도 유지해줘.

   확인

   스크롤을 앞뒤로 움직이면 고정 영상의 재생 시점이 같은 방향으로 이동합니다.

3. 03

   영상 진행률에 사운드 레이어 더하기

   자동 재생 제약을 지키면서 장면 사이의 감각적 연결을 강화합니다.

   입력

   • src/data/scrubTimeline.js

   출력

   • src/components/scroll/useScrubSoundEngine.js

   재현 프롬프트

   SCRUB_TIMELINE의 클립 ID와 진행 구간을 읽고, 각 ID를 오디오 디렉터리의 mp3 경로로 조합하는 스크럽 사운드 엔진을 만들어줘. 사용자 제스처 뒤에만 Web Audio를 활성화하고 현재 진행 위치, 정지 상태, 장면 경계에 맞춰 클립과 베드 사운드를 제어해줘.

   확인

   활성화 전에는 소리가 나지 않고, 활성화 뒤에는 장면 경계를 지날 때 클립 ID에 대응하는 파일이 재생됩니다.

4. 04

   꿈의 결과를 증거의 순서로 펼치기

   완성 이미지 한 장을 보여주는 데서 멈추지 않고 같은 결과가 만들어진 맥락을 연속해서 읽게 합니다.

   입력

   • src/data/landingContent.js
   • src/components/content-transition/HorizontalScrollContainer.jsx

   출력

   • src/components/templates/DreamOutputSection.jsx

   재현 프롬프트

   landingContent.js의 dream-output 슬라이드를 완성 구조, 시각적 영향, 마케트 계보, 평면과 단면, 재료와 빛 순서로 배치해줘. 모션이 허용되면 화면 크기와 관계없이 HorizontalScrollContainer로 세로 진행을 가로 이동으로 바꾸고, reduced motion에서만 이미지 전체가 보이는 세로 목록으로 전환해줘. 모바일에서는 첫 장면의 카피를 이미지 아래에 배치해줘.

   확인

   일반 설정에서는 다섯 증거가 가로로 이어지고, reduced motion 설정에서만 같은 순서의 세로 카드로 읽힙니다.

5. 05

   제품에서 결과물까지 한 시나리오로 설명하기

   HALO의 형태 설명과 ATLAS의 정보 구조가 서로 다른 기능 소개처럼 끊기지 않게 합니다.

   입력

   • src/data/landingContent.js

   출력

   • src/components/templates/AtlasScenarioSection.jsx
   • src/components/templates/AtlasReportSection.jsx

   재현 프롬프트

   scenario.steps의 WAKE, THE DEVICE, THE FIT, FRAGMENTS, MODULES, OUTPUT을 왼쪽 100vh 카피 셀과 오른쪽 고정 비주얼로 구성해줘. 현재 셀이 중앙선을 지날 때 비주얼만 교체하고 reduced motion에서는 즉시 바꿔줘. 이어지는 atlas 데이터는 4열 흑백 리포트 그리드로 정리하되 수치가 실제 제품 성능처럼 보이지 않도록 콘셉트 리포트의 맥락을 유지해줘.

   확인

   여섯 셀을 지날 때 대응 이미지가 바뀌고, 이후 리포트의 네 지표가 동일한 25% 칼럼 경계에 정렬됩니다.

6. 06

   섹션을 조립하고 신청으로 마무리하기

   영상, 결과, 제품 설명을 한 흐름으로 조립하고 같은 페이지에서 관심을 남기게 합니다.

   입력

   • src/data/landingContent.js
   • src/data/scrubTimeline.js
   • src/components/scroll/ScrubSequence.jsx
   • src/components/scroll/BeatCaptionOverlay.jsx
   • src/components/scroll/useScrubSoundEngine.js
   • src/components/templates/DreamOutputSection.jsx
   • src/components/templates/AtlasScenarioSection.jsx
   • src/components/templates/AtlasReportSection.jsx
   • src/components/templates/ProductSpecSection.jsx
   • src/components/input/PreorderForm.jsx

   출력

   • src/components/templates/CtaSection.jsx
   • src/components/templates/OneirLanding.jsx

   재현 프롬프트

   OneirLanding에서 안정적인 섹션 ID로 콘텐츠를 찾아 스크럽, 꿈의 결과, 아침 시나리오, ATLAS 리포트, 제품 사양, CTA 순서로 명시적으로 조립해줘. BeatCaptionOverlay는 ScrubSequence의 자식으로 넣고 같은 진행률을 사용하며, 사운드는 pointerdown, pointerup, touchend, keydown 또는 click 뒤에 활성화해줘. 제품 버튼은 #cta로 이동하고 CtaSection은 PreorderForm의 검증, 제출 중, 성공, 오류 상태를 보여주게 해줘.

   확인

   영상과 캡션이 함께 이동하고 모든 섹션이 지정된 순서로 이어지며, 제품 버튼에서 CTA 이동과 폼 상태를 확인할 수 있습니다.