해와 달 사이

프롬프트 설정

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

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

[핵심 아이디어]
입체로 접힌 종이 한 장에 두 그림을 엇갈려 인쇄한 아코디언 포스터입니다. 시점과 주름이 움직이며 탁한 장밋빛 해가 먹색 초승달로 바뀝니다. 두 그림의 투명도를 섞는 전환이 아니라 주름 면이 보이거나 가려져 장면이 교대해야 합니다. 종이 결, 얇은 접힌 모서리, 잔잔한 그림자에 집중한 고급 인쇄물 같은 화면을 원합니다.

[바꿀 곳]
제목: 해와 달 사이
부제: 한 장의 종이, 두 개의 하늘
강조 색: #BC9188

[크기]
캔버스는 창 전체를 사용하고 PC1440×900과 폰390×844에서 구도를 따로 계산합니다. 16:9 그림을 폰에 작게 축소해 가운데 좁은 띠로 두지 않습니다. PC에서는 화면 왼쪽 약68%를 큰 접힌 포스터로 채우고, 오른쪽 아래에 제목 ‘해와 달 사이’를 두 줄로 놓습니다. 제목과 부제는 가운데 위에 두지 않습니다. 제목의 글씨는 창 너비에 맞춰 약44~64px, 자연스러운 자간입니다. 작은 화면은 제목과 종이가 겹치지 않게 재배치합니다.
폰에서는 종이를 세로로 긴 포스터로 다시 그립니다. x=화면폭의8%~92%, y=화면높이의6%~75%에 종이가 크게 차고, 그 아래 제목32px·부제14px 안팎을 오른쪽 정렬합니다. 해와 달의 지름도 종이 폭의65%로 키웁니다. 상하 텅 빈 영역이나 읽을 수 없는 바닥 글씨를 두지 않습니다. 폭350·높이460 같은 작은 프레임도 높이 기준으로 종이와 제목을 같이 줄여 전부 보이게 합니다. 스크롤·잘림은 없습니다.
화면 제목은 정확히 ‘해와 달 사이’입니다. ‘아코디언 포스터’라는 별도 제목·장식 라벨은 쓰지 않습니다. 부제 자간은0~.015em으로 평범하게 읽히게 합니다.

[장면]
8초 동안 이어지는 반복입니다. 0초에는 해 그림이 충분히 보이는 시점 -32도에서 시작합니다. 0~1초에 +32도까지 확실하게 돌아 첫 1초 안에 큰 초승달과 산선으로 바뀝니다. 1~4초에는 -32도로 돌아 큰 원형 해와 수평선이 다시 나타납니다. 4~6초에는 +32도, 6~8초에는 -32도로 이어집니다. 정지한 도입이나 1초 이상의 대기는 없습니다. 각 구간은 부드럽게 이어지되 첫 1초 전체가 빠르고 분명한 회전이며 2~3초의 교대도 잘 보입니다. 폰의 좁고 긴 창에서도 같은 큰 변화가 보이도록 면의 밝기 차이와 두 그림의 명암 차이를 충분히 줍니다.
바탕은 차분한 진한 먹색 #272527, 종이는 밝은 회자주색 #DDD7DB, 글자는 #F1ECEE, 해는 #BC9188, 달은 #3C343B입니다. 파란 기운·남청색·고채도 배경은 없습니다. 크림·갈색·세이지 조합을 쓰지 않습니다. 접힌 면의 명암은 종이색 계열 안에서 충분히 차이를 주며 작은 장식과 배지는 없습니다. 큰 종이와 어두운 여백이 대비되는 전시 포스터처럼 마무리합니다.
해와 달의 그림은 각각 종이 한 장을 채우는 연속된 이미지입니다. 양쪽 모두 같은 크기의 종이 바탕 위에 큰 원형 해+수평선, 초승달+산선을 그리고 완성 이미지를 면의 개수대로 잘라 놓습니다. 한 이미지 전체를 각 면마다 반복하지 않습니다. 면의 투영 순서는 실제 깊이로 정렬하고, 뒷면은 보이지 않게 제거하며, 이웃하는 종이 면의 경계는 정확히 공유합니다. 0.5~1 화면 픽셀만 겹쳐 이음매를 닫되 다른 그림이 틈새로 비치지 않게 합니다. 양 끝 시점에서는 보이지 않는 쪽 면을 명확히 가려 해 뒤에 달의 검은 조각이 남지 않습니다. 단순히 검은 가림 사각형을 겹치는 방식은 쓰지 않습니다.
해의 원호가 면마다 위아래로 어긋나 계단이 되지 않게 모든 면의 세로 좌표·텍스처 원점을 공유하고, 종이 윗변·아랫변을 일관되게 투영합니다. 최대로 해가 보이는 순간에는 원 하나가 매끈하게 이어집니다. 폰에서도 같은 원리로 면의 폭과 이미지 크기를 다시 계산해 연속성을 유지합니다. 가운데 종이에 바탕색이 새는 구멍이나 검은 세로 틈이 없게 합니다.

[구현]
- 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)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

- 각 주름의 양쪽 면을 사각형으로 투영하고, 각 면 안에 해당 그림의 세로 조각을 정확히 이어 그립니다. 면의 방향에 따라 명암을 바꾸고 겹침 순서를 정하세요. 양쪽 그림은 코드로 그린 원·호·선이며 외부 이미지를 쓰지 않습니다.
- 각 그림과 종이 결은 초기화 때 작은 오프스크린 캔버스에 한 번만 그려 캐시합니다. 면당 텍스처 그리기는 두 번 이하로 하고 삼각형의 추가 세분은 하지 않습니다. 매 프레임 큰 블러·종이 결 생성·픽셀 루프를 돌리지 않습니다. 프레임당 작업을 가볍게 유지하세요.
- 포스터 외곽이 화면 밖으로 나가지 않게 투영 범위를 계산하세요. render(0)에서 초기 그림을 즉시 그리고, 시간 0의 첫 프레임을 검은 화면이나 로딩으로 비우지 마세요.

[첫 화면과 크기 변경]
폰에서도 초기화가 반드시 끝나도록 준비 순서를 명확히 나눕니다. CONFIG와 색상 값·난수 함수·모든 그리기 함수를 먼저 정의한 뒤, 맨 끝에서 DOM과 캔버스 context를 얻고, 유효한 창 크기를 읽고, 화면에 정지 포스터를 먼저 그린 다음, 오프스크린 그림과 종이 결을 만들고, 마지막으로 requestAnimationFrame을 한 번 시작합니다. 초기화 도중 아직 채워지지 않은 배열의 [0]이나 없는 팔레트를 읽지 마세요. 색은 CONFIG의 이름 붙은 확정 값으로만 가져오고 색상 변환 함수는 유효한 입력과 기본값을 갖습니다. 종이 결 함수에 필요한 색·크기를 직접 인자로 주며 아직 생성 중인 캐시나 전역 배열에 의존하지 않습니다.
창 크기는 canvas.clientWidth/Height가0이면 innerWidth/Height로 정하고 계산된 모든 오프스크린 크기는 최소1인 정수로 제한합니다. 글꼴 로딩을 기다려야만 시작하는 구조는 쓰지 않습니다. 시스템 글꼴로 즉시 그리며 document.fonts가 없거나 늦어도 치수와 첫 화면이 유효해야 합니다. resize는 초기화 완료 전에는 예약만 하고 준비된 뒤 한 번 적용하며, resize 때마다 애니메이션 루프를 새로 만들지 않습니다.
정지 포스터 함수는 텍스처·종이 결·비동기 준비에 의존하지 않고 기본 Canvas2D 도형과 CONFIG의 확정 색만으로 큰 해와 접힌 종이·제목을 완성해 그립니다. 장식용 캐시나 이후 애니메이션 준비가 실패해도 이미 그린 포스터가 남아야 하며 먹색 바탕만 남는 검은 화면을 만들지 않습니다. 오류 뒤 화면을 먼저 clear한 채 반환하지 마세요. 가능한 복구는 정지 포스터를 다시 그리는 방식으로 하고, 정상 상태에서는 전체 교대 애니메이션이 끝까지 이어집니다.

[하지 말 것]
남청색·검푸른색·고채도 바탕, 사람 캐릭터, 막대 인간, 도형을 설명하는 인포그래픽처럼 만들지 마세요. 두 그림을 단순 크로스페이드하지 마세요. 글꼴·이미지·라이브러리·오디오를 외부에서 불러오지 마세요. 대기 화면, 시작 단추, 스크롤, 잘린 글자, 깜박이는 화면은 넣지 마세요.