Damien Hirst: Fame Algorithm

상세 레시피

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

1. 01

   작품·사건·검색량·표본 데이터 정리

   작품, 경력 사건, 검색 관심 추이, 생물 표본 기록을 화면 코드와 분리된 데이터로 먼저 정리합니다.

   데이터

   hirst_works.json, hirst_events.json, hirst-trend-data.json, hirstBioSpecimenData

   결과

   작품 72점, 사건 52건, 검색 관심 봉우리, 종별 표본 집계가 이후 화면이 함께 읽는 근거로 준비됩니다.

2. 02

   스크롤로 넘기는 히어로 영상과 프롤로그

   프롤로그와 다섯 관점의 한영 문안을 데이터로 두고, 기기별 히어로 영상을 스크롤에 연결해 첫 장면을 만듭니다.

   데이터

   BRIDGE_SECTIONS

   이미지

   상어에서 작가 초상으로 이어지는 히어로 영상

   컴퍼넌트

   HeroSection

   결과

   스크롤을 내리는 만큼 상어 영상이 작가 초상까지 넘어가고, 큰 이름 타이포가 빠져나간 자리에 프롤로그가 나타납니다.

3. 03

   연도를 따라 펼친 가로 타임라인

   작품과 사건의 연도를 가로 위치로 계산하고, 같은 시간축 위에 작품 이미지와 사건, 검색 관심 곡선을 배치합니다.

   데이터

   hirst_works.json, hirst_events.json, hirst-trend-data.json

   이미지

   작품 이미지 72장

   컴퍼넌트

   useTimelineLayout, TimelineCanvas

   결과

   작품 이미지가 연도 순서로 축 위에 놓이고, 축 아래에는 경력 사건이, 배경에는 검색 관심 곡선이 그려집니다.

4. 04

   종별 표본 집계 카드

   표본 기록을 종별 개체 수로 모으고, 종마다 그 종이 쓰인 작품을 연결합니다.

   데이터

   hirstBioSpecimenData, hirst_works.json

   이미지

   종별 표본 일러스트, 관련 작품 이미지

   컴퍼넌트

   SpecimenInfographicSection

   결과

   8종의 표본 카드에 개체 수가 표시되고, 카드를 누르면 종 이미지와 관련 작품 이미지가 담긴 상세 화면이 열립니다.

5. 05

   타임라인과 페이지, 앱 조립

   타임라인과 표본 섹션을 하나의 탐색 화면으로 묶어 히어로와 관점 카드 뒤에 잇고, 앱에서 네 데이터를 페이지에 넘깁니다.

   데이터

   BRIDGE_SECTIONS, hirst_works.json, hirst_events.json, hirst-trend-data.json, hirstBioSpecimenData

   이미지

   네 관점 카드에서 반복 재생되는 모션 영상 4편

   컴퍼넌트

   WorldviewTimeline, LandingPage, App

   결과

   세로 스크롤에 따라 연대기가 가로로 흐르고, 작품이나 검색 봉우리를 누르면 상세 화면이 열립니다.