지층의 단면

프롬프트 설정

AI가 읽는 제작 지시문입니다. 직접 읽지 않아도 됩니다.

완성된 HTML 파일 하나의 원문만 답하세요. 설명과 코드 울타리는 붙이지 마세요. 코드를 실행하지 말고 아래 조건에 맞는 HTML 소스만 작성하세요. 파일을 읽거나 쓰고 검색하거나 다른 도구를 호출하지 마세요. 이 답변 지시는 작품 화면에 표시하지 마세요.

[핵심 아이디어]
겹겹의 지층을 비스듬히 깎자 큰 암모나이트 화석 하나가 드러나는 움직이는 포스터입니다. 무엇을 발견하는지 첫3초 안에 분명히 알아볼 수 있어야 합니다.

[바꿀 곳]
제목: 지층의 단면
부제: 돌 속에서 드러난 나선
강조 색: #BBA18E

[크기]
PC에서는 16:9 가로 포스터, 폰에서는 창 전체를 쓰는 세로 포스터로 다시 배치합니다. 1440×900과 390×844 모두 글자와 조형물이 잘리지 않고 스크롤이 없습니다. 작은 카드에서도 화면 높이에 맞춰 여백과 글자를 줄이고 조형물을 충분히 크게 둡니다. 캔버스는 창 전체이며 현재 창의 비율에 맞는 기준 좌표계를 정해 또렷하게 그립니다.

[장면]
차분한 짙은 흙빛 #5C514B 바탕 위에 하나의 큰 퇴적암 덩어리를 놓습니다. 크림색 바탕·세이지 층·가운데 위 제목 구도는 쓰지 않습니다. 바탕·글자·층은 모두 저채도입니다. 지층은 회갈색 #B1A397, 밝은 석회색 #D1C7BA, 잿빛 #817970, 어두운 흙색 #655E57의16겹. 작은 강조 #BBA18E는 층 한두 곳뿐입니다. PC는 왼쪽 좁은 세로 구획에 ‘지층의 / 단면’ 제목과 짧은 부제를, 오른쪽부터 아래쪽까지 커다란 암석을 배치합니다. 암석과 얇은 바닥 그림자는 화면 높이의약80%, 폭의75%를 차지해 아래3분의1이 빈 화면이 되지 않습니다. 폰은 기존 세로 포스터처럼 제목 위·큰 암석 아래로 두고, 암석은 화면폭85%·높이70% 정도를 채웁니다. 글씨는 자연스러운 자간과 충분한 대비, 폰 제목30px·부제14px 안팎입니다.
암석 바깥은 비스듬한 하나의 둔덕 모양이고, 앞면을 사선으로 얇게 벗겨내는 절삭면이 깊이를 만듭니다. 안에 빈 동굴이나 무지개 터널을 만들지 않습니다. 노출된 단면 중앙에는 지름이 암석폭의35%인 큰 암모나이트 화석 하나가 있습니다. 나선 껍질의 외곽·중심으로 말려드는 한 줄·방사형 칸막이로 누구나 조개 화석을 알아볼 수 있게 합니다. 글자로 ‘화석’이라고 설명하는 대신 형태 자체가 읽혀야 합니다. 화석은 밝은 석회색, 섬세하지만 충분히 또렷한 어두운 홈으로 보이고 작은 점 장식이나 여러 광물을 섞지 않습니다.
모든 지층은 같은 좌표계의 동일한16개 곡선으로 계산합니다. 바깥 면과 새로 드러나는 단면 모두 그 같은 곡선을 클리핑해 쓰고, 깊이에 따른 작은 평행 이동만 적용합니다. 잘린 경계에서 층 높이와 순서가 자연스럽게 이어져야 하며 안쪽에 별도의 동심원 줄무늬를 그리지 않습니다. 종이처럼 얇은 층 사이 음영·사선 절삭면의 얇은 밝은 테두리·화석의 각진 홈으로 입체감을 줍니다.

[8초의 흐름]
시간0부터 암석과 화석의 일부가 보이는 완성된 포스터입니다. 0~1초에 앞면의 넓은 조각이 비스듬히 밀려 나가며 나선의 대부분이 드러나 첫1초 안에 화면의 큰 영역이 변합니다. 1~3초에는 절삭면이 더 지나가 나선 전체와 연결된 지층을 보여 줍니다. 3~5초에도 멈추지 않고 얇은 앞면 조각이 반대편에서 연속해서 이동하며 화석 홈의 빛과 층 깊이가 바뀝니다. 5~8초에는 절삭면이 부드럽게 돌아 시간0의 위치에 이어집니다. 처음과 끝이 같은8초 반복이며 매 구간에 읽을 수 있는 움직임이 있습니다. 6~8초를 정지 화면으로 두지 않습니다. 작은 먼지만 떠다니는 것을 움직임으로 대신하지 않습니다. 화석 전체가 완전히 사라지는 순간 없이 알아볼 수 있는 나선 중심은 항상 남기고, 어느 프레임을 멈춰도 한 장의 포스터로 읽히게 합니다.
움직임은 주요 절삭면의 위치·얇은 조각·아주 약한 시점 변화뿐이며 층들이 제각각 흔들리거나 색이 번쩍이지 않습니다. 떨어지는 조각은 최대10개, 암석 아래 여백 안에서 사라지고 화면 밖으로 잘리지 않습니다. 한 주기의 끝에도 주요 면이 느리게 이어 움직이되 작품 전체를 통째로 출렁이거나 돌아가게 하지 않습니다.

[구현]
- HTML 파일 하나로 만든다. 외부 파일·글꼴·라이브러리·네트워크 요청을 쓰지 않는다(미리보기에서 막히거나 느려진다).
- 첫 <script> 맨 앞에 CONFIG 객체를 두고 [바꿀 곳]의 값과 이 글에 나온 숫자(시간표·크기·색·세기)를 이름 붙여 모은다. 나중에 숫자만 바꿔 다듬을 수 있게.
- 그림은 시간 t(초)만으로 계산하는 함수 render(t) 로 그린다. requestAnimationFrame 의 타임스탬프나 performance.now() 로 t 를 구한다. setTimeout·setInterval·CSS 애니메이션·transition 으로 움직이지 않는다(프레임마다 속도가 달라지고, 다시 재생할 때 어긋난다). 시뮬레이션처럼 상태가 쌓이는 작품은 고정 시간 간격으로 상태를 진행하되 그 진행도 타임스탬프로만 정한다.
- 난수는 시드 고정 난수(mulberry32 등)만 쓴다. Math.random 은 쓰지 않는다(매번 다른 화면이 나온다).
- 캔버스 내부 해상도는 화면비에 맞춘 기준 크기로 고정하고, 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게 보이게 한다(남는 곳은 배경색). 스크롤이 생기지 않게 한다. devicePixelRatio 는 그리는 선명도에만 반영한다.
- 글자는 시스템 글꼴만 쓴다: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif. 붓글씨·손글씨 느낌은 글꼴이 아니라 획을 그려서 낸다.
- 길이가 정해진 작품은 끝나면 처음과 같은 화면으로 돌아가 이음매 없이 반복한다.
- 모든 함수·상수·셰이더 문자열을 먼저 정의하고, 시작(초기화와 첫 requestAnimationFrame)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

- Canvas 2D의 곡선·클리핑·종이 단면과 음영으로 깊이를 만듭니다. 층의 형태와 종이 결은 처음에 고정 시드로 계산하고 필요하면 작은 오프스크린 캔버스에 캐시하세요. 매 프레임 큰 블러나 픽셀 루프는 돌리지 않습니다.
- 절삭 위치·앞면 조각·낙하 조각은 모두 시간으로 계산합니다. 끝까지 절삭면의 움직임이 이어지고 render(0)에서 완성 화면을 즉시 그립니다.
- 글꼴은 시스템 한글 글꼴만 쓰고 제목과 부제를 단정하게 배치하세요. 실제 사람·이름·브랜드나 만드는 과정에 대한 설명은 화면에 넣지 않습니다.

[하지 말 것]
단순한 차트·일렬 사각형 막대·얼굴·사람 캐릭터·막대 인간, 남청색·검푸른색·고채도 바탕, 외부 파일·글꼴·이미지·오디오, 시작 단추·빈 첫 화면·스크롤·잘린 글자·타이머 기반 애니메이션은 넣지 마세요. 층을 무작위로 흔들거나 뒷부분을 정지시키지 마세요.