ONEIR

상세 레시피

완성된 코드에서 거꾸로 읽어 낸 조립 과정입니다. 단계마다 어떤 데이터와 이미지, 컴퍼넌트를 조합했는지 보여 줍니다.

1. 01

   카피와 영상 구간을 데이터로 정리

   섹션별 카피와 사진 경로, 제품 정보, 영상 클립 구간을 화면 코드 밖의 두 데이터로 나눠 둡니다.

   데이터

   LANDING_SECTIONS, SCRUB_TIMELINE

   결과

   이후 만드는 섹션은 모두 이 두 데이터에서 카피와 사진, 장면 구간을 꺼내 씁니다.

2. 02

   스크롤에 맞춰 움직이는 영상과 소리

   스크롤 진행률 하나로 영상 재생 위치와 장면 캡션, 사운드를 함께 맞춥니다.

   데이터

   SCRUB_TIMELINE, LANDING_SECTIONS

   이미지

   90초 꿈 시퀀스 영상, 첫 장면 포스터 이미지, 장면별 사운드 클립 10개와 배경 루프

   컴퍼넌트

   VideoScrubbing, ScrubSequence, BeatCaptionOverlay, useScrubSoundEngine

   결과

   스크롤한 만큼 고정된 영상이 앞뒤로 넘어가며 장면 캡션이 바뀌고, 첫 클릭이나 터치 뒤에는 그 장면의 소리도 함께 납니다.

3. 03

   꿈의 결과를 가로로 넘기는 갤러리

   꿈에서 나온 건축물 하나를 결과, 근거, 계보, 도면, 재료 순서의 이미지로 펼칩니다.

   데이터

   LANDING_SECTIONS

   이미지

   젖은 채 건축물을 발표하는 인물 사진, 같은 건축물의 결과 이미지 5장

   컴퍼넌트

   HorizontalScrollContainer, DreamOutputSection

   결과

   세로로 스크롤하는 동안 같은 건축물을 다른 관점으로 담은 이미지가 가로로 이어서 지나갑니다.

4. 04

   제품 설명 시나리오와 ATLAS 리포트

   HALO 착용부터 ATLAS가 정리한 결과물까지 여섯 단계로 설명하고, 하룻밤의 기록을 리포트로 정리합니다.

   데이터

   LANDING_SECTIONS

   이미지

   HALO 정면·착용 사진, ATLAS 모니터·패널 사진 4장

   컴퍼넌트

   AtlasScenarioSection, AtlasReportSection

   결과

   넓은 화면에서는 왼쪽 설명을 내릴 때마다 오른쪽에 고정된 사진이 단계에 맞게 바뀌고, 이어서 흑백 리포트 그리드가 나옵니다.

5. 05

   제품 사양과 신청 폼, 전체 조립

   제품 사양과 플랜, 얼리 액세스 신청 섹션을 만들고 모든 섹션을 정해진 순서로 이어 붙입니다.

   데이터

   LANDING_SECTIONS, SCRUB_TIMELINE

   이미지

   HALO·ATLAS 사진의 검정 배경 버전, HALO를 쓰고 잠든 인물의 루프 영상

   컴퍼넌트

   ProductSpecSection, PreorderForm, CtaSection, OneirLanding

   결과

   몰입 영상에서 시작한 페이지가 제품 사양을 거쳐 신청 폼으로 끝나고, 제품 섹션의 버튼을 누르면 신청 폼으로 바로 내려갑니다.