Damien Hirst: Fame Algorithm

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

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

1. 01

   서로 다른 조사 자료를 준비하기

   작품, 사건, 관심도와 생물 기록을 화면보다 먼저 독립된 근거 데이터로 정리합니다.

   출력

   • src/data/hirst/hirst_works.json
   • src/data/hirst/hirst_events.json
   • src/data/hirst/hirst-bio-specimen-data.js
   • data/hirst-trend-data.json

   재현 프롬프트

   72점의 작품과 52건의 경력 사건, 생물 표본 기록, 검색 관심 시계열을 네 정적 데이터 파일로 분리해줘. 작품과 사건에는 안정적인 ID, 연도와 세계관 분류를 두고, 검색 봉우리에는 관련 사건 ID와 출처, 수치 해석의 주의사항을 남겨 이후 화면이 원자료를 직접 소비하게 해줘.

   확인

   네 파일에서 작품 72점과 사건 52건을 각각 셀 수 있고, 검색 봉우리와 표본 항목에 연결 식별자와 근거 필드가 남아 있습니다.

2. 02

   스크롤로 첫 장면 연출하기

   작품 이미지를 설명보다 먼저 체감하게 하고 기기별 미디어 비용을 조절합니다.

   입력

   • src/assets/video/hirst-scrub-graded.mp4
   • src/assets/video/hirst-scrub-mobile.mp4

   출력

   • src/components/templates/HeroSection.jsx

   재현 프롬프트

   데스크톱과 모바일 영상을 브레이크포인트로 나누고, 100dvh sticky 무대에서 페이지 스크롤을 영상 currentTime에 연결해줘. 데스크톱은 초반에 70퍼센트에서 전체 크기로 확대하고, 거대한 DAMIEN HIRST 타이포는 서로 다른 속도로 흘러가게 해줘.

   확인

   화면 폭에 따라 다른 영상이 선택되고 첫 구간의 스크롤이 영상 프레임과 타이포 위치를 함께 바꿉니다.

3. 03

   분석 관점을 편집 서사로 준비하기

   긴 연대기에 들어가기 전에 프롤로그와 다섯 관점을 독립된 데이터로 고정합니다.

   출력

   • src/components/templates/bridgeNarrative.js

   재현 프롬프트

   경력 전체를 여는 프롤로그와 DEATH, PRICE, GRID, BURN, INDEX의 다섯 관점을 짧은 한영 데이터 객체로 작성해줘. 각 항목에는 안정적인 id, 레이아웃 variant, 큰 영문 제목, 한국어와 영어 설명, 선택적인 모션 이미지 경로를 담아 HeroSection과 LandingPage가 같은 배열을 나눠 쓰게 해줘.

   확인

   BRIDGE_SECTIONS에 프롤로그 한 개와 다섯 관점이 정해진 순서로 들어 있고 두 언어의 설명이 짝을 이룹니다.

4. 04

   연도를 긴 가로 좌표로 바꾸기

   수십 년의 작품과 사건을 같은 시간 감각 안에서 비교하게 합니다.

   입력

   • src/data/hirst/hirst_works.json
   • src/data/hirst/hirst_events.json
   • data/hirst-trend-data.json

   출력

   • src/components/timeline/useTimelineLayout.js
   • src/components/timeline/TimelineCanvas.jsx

   재현 프롬프트

   작품과 사건의 연도를 반응형 pxPerYear 기준의 x 좌표로 바꾸고 연도 눈금과 시기 밴드를 계산해줘. 같은 캔버스에 작품 노드, 사건, 검색 관심 배경과 생물 카테고리를 배치하되 화면에서 먼 작품은 그리지 않아도 되도록 위치 데이터를 분리해줘.

   확인

   연도가 빠른 항목이 왼쪽에 놓이고 화면 폭이 좁아지면 연도 간격과 노드 크기가 함께 줄어듭니다.

5. 05

   생물 수치를 작품에 다시 연결하기

   강한 이미지 뒤에 숨은 종과 개체 수를 별도의 증거 층으로 보여줍니다.

   입력

   • src/data/hirst/hirst-bio-specimen-data.js
   • src/data/hirst/hirst_works.json

   출력

   • src/components/timeline/SpecimenInfographicSection.jsx

   재현 프롬프트

   생물 표본 기록을 분류군과 종별로 집계하고 개체 수, 상태, 관련 작품을 함께 보여주는 인포그래픽을 만들어줘. 종 카드는 SpecimenDetailModal을 열어 대표 이미지와 연결된 작품 목록을 보여주고, 작품 정보는 hirst_works.json에서 찾아 결합해줘.

   확인

   종 카드의 숫자와 관련 작품이 데이터 집계와 일치하고 카드를 누르면 해당 종 상세가 열립니다.

6. 06

   세로 탐색을 가로 데이터 에세이로 조립하기

   영상 도입, 분석 관점, 근거 탐색과 표본 집계를 의존 순서에 맞춰 하나의 앱으로 연결합니다.

   입력

   • src/components/templates/HeroSection.jsx
   • src/components/templates/bridgeNarrative.js
   • src/components/timeline/useTimelineLayout.js
   • src/components/timeline/TimelineCanvas.jsx
   • src/components/timeline/SpecimenInfographicSection.jsx
   • src/data/hirst/hirst_works.json
   • src/data/hirst/hirst_events.json
   • src/data/hirst/hirst-bio-specimen-data.js
   • data/hirst-trend-data.json

   출력

   • src/components/timeline/WorldviewTimeline.jsx
   • src/components/templates/LandingPage.jsx
   • src/App.jsx

   재현 프롬프트

   먼저 WorldviewTimeline에서 useTimelineLayout과 TimelineCanvas를 연결해 세로 스크롤 진행도를 긴 가로 이동으로 바꾸고, 뷰포트 두 배 너비의 청크와 버퍼로 작품을 가상화해줘. 작품과 검색 봉우리 상세, 미니맵 이동을 연결하고 끝에 SpecimenInfographicSection을 배치해줘. 다음으로 LandingPage에서 HeroSection, 프롤로그와 다섯 관점, WorldviewTimeline을 이어 붙이고 모달 상태에 따라 고정 UI를 숨겨줘. 마지막으로 App이 네 데이터 파일을 import해 LandingPage에 props로 주입하고 언어, 테마, 부드러운 스크롤 공급자를 감싸게 해줘.

   확인

   App에서 시작한 네 데이터 묶음이 LandingPage를 거쳐 가로 타임라인과 표본 섹션에 표시되고, 작품과 봉우리, 미니맵, 종 카드를 각각 조작할 수 있습니다.