단청 문양 그리기
흰 분 점선 밑그림 위로 오방색이 세 겹 칠해지고, 먹선과 흰 선이 한 바퀴 돌아 단청 연꽃이 선다.
설정값 미리보기
바꾼 문구·색으로 다시 재생합니다
프롬프트 설정
Claude 가 읽는 제작 지시문입니다. 직접 읽지 않아도 됩니다.
단청 연꽃 문양이 실제 단청 공정대로 — 흰 분 점선 밑그림, 세 겹 채색, 먹선과 흰 선 마무리 — 그려지는 애니메이션을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.
핵심 아이디어: 단청 장인의 공정을 그대로 따른다. 화면은 완성된 단청에서 시작한다(앞 바퀴의 마지막 화면). ① 그 칠이 오래된 듯 얼룩지며 벗겨져 뇌록(녹청) 바탕만 남고, ② 구멍 뚫은 초지를 대고 분주머니로 두드리듯 문양의 밑그림이 흰 분 점선으로 네 쪽에 차례로 찍히고(타초), ③ 색이 바깥에서 안으로 밀려 들어오며 점선을 덮는데 같은 색을 밝은 것→중간→짙은 것 세 번 겹쳐 칠해 띠 모양 바림(빛넣기)이 생기고, ④ 선 하나 없는 색면 위로 12시에서 시계방향으로 반직선이 한 바퀴 돌며 먹선과 그 안쪽 흰 선(분선)을 한 쌍씩 세워 문양이 단번에 또렷해진다(먹기화·분긋기). 그대로 머물다 처음으로 이어진다. 움직이는 것은 공정뿐이고 문양 자체는 한 번도 돌거나 움직이지 않는다.
[바꿀 곳]
- 색 — 바탕(뇌록) #4C7A68 · 먹선 #1D1B19 · 분선·분 점(흰 선) #F3EEE2
- 색 — 각 계열의 바림 3단(밝음 · 중간 · 짙음). 밝음은 중간색에 흰 분을 조금 섞은 맑은 색이지 우유 탄 파스텔이 아니다.
청 #9FC4DC · #3D7DB5 · #1E3E74
적 #EFA587 · #D4562F · #8A2A1F
황 #F4D985 · #E0A72C · #9C6A18
녹 #A6D6B9 · #2F9970 · #1F5945
(안료처럼 채도를 조금 낮춘 값이다. 순수한 원색이나 형광으로 바꾸지 말 것.)
- 대칭 차수: N = 8 (연잎·바깥 잎·속잎·연밥 둘레 씨 각 N, 잎새·구슬 각 2N)
- 길이: 14초 (끝나면 처음으로 이어서 반복)
- 화면비: 1:1 (캔버스 1080×1080)
[크기] — S = 화면 한 변(1080), 중심 O = (0.5S, 0.5S), 연꽃 단위 R = 0.44S
- 연꽃 전체 지름 = 2R = 0.88S. 가장 바깥 잎 끝이 R, 그 사이 잎새 끝이 0.97R 이라 바깥 윤곽은 24개의 뾰족한 끝이 도는 별 모양이다.
- 화면 가장자리 0.004S ~ 0.070S 는 휘(색 줄무늬) 테두리, 네 귀에는 귀꽃(모서리에서 화면 중심을 향해 피는 작은 꽃). 잎 끝과 휘 안쪽 가장자리 사이는 0.011S 이상 떨어진다(잎새 끝 0.081S, 연잎 끝 0.091S, 바깥 잎 끝 0.094S — 화면 가장자리에서 잰 거리).
- 연꽃 + 귀꽃 + 휘를 합치면 화면의 약 83% 가 칠해진다. 화면 가운데에 작은 문양만 떠 있으면 실패다.
- 선 굵기 위계: 먹선 0.0050S(약 5.4px) > 분선 보이는 폭 0.0035S(약 3.8px) = 휘 줄 사이 먹선 0.0035S. 분 점 반지름 0.0026S(약 2.8px), 점 간격 0.0085S.
[문양 — 도형 정의]
각도 φ 는 「12시 방향에서 시계방향으로 잰 각」이다(캔버스 arc 의 각 = φ − 90°). 방향 벡터 d = (sin φ, −cos φ), 수직 벡터 n = (cos φ, sin φ).
꽃잎 하나(모든 잎 공통 함수): 매개변수 r0(밑동 반지름) · r1(끝 반지름) · hw(가장 넓은 곳 반폭) · b(밑동 반폭) · m(가장 넓은 곳의 위치, 길이 비율). 지역 좌표 (u, v) 에서 u 는 밑동 0 → 끝 1 의 길이 비율, v 는 축에서 옆으로 떨어진 거리(단위 U).
- 반쪽 = 3차 베지어 두 개
A: (0, b) → 제어 (0.06, b + 0.7·(hw − b)) → 제어 (m − 0.22, hw) → (m, hw)
B: (m, hw) → 제어 (m + 0.22, hw) → 제어 (0.88, 0.12·hw) → (1, 0)
B 의 두 번째 제어점이 축에 붙어 있어서 끝이 오목하게 좁아지며 뾰족해진다(보주처럼).
- 끝 모양은 겹마다 다르다: 연잎과 속잎만 B 의 두 번째 제어점을 (0.90, 0.35·hw) 로 바꾼다 — 몸통이 둥글게 부풀다가 끝에서 짧게 뾰족해지는 연판형이다. 바깥 잎·잎새·귀꽃은 위의 (0.88, 0.12·hw) 그대로 가늘고 뾰족하다. 네 겹이 모두 같은 끝 모양이면 이국적인 양파지붕 만다라로 읽힌다.
- 나머지 반쪽은 v 를 −v 로 뒤집는다. 밑동의 두 점은 직선으로 닫는다(이 직선은 언제나 앞 겹 밑에 숨으므로 선도 점도 두지 않는다).
- 화면 좌표 = 원점 + U·((r0 + u·(r1 − r0))·d + v·n).
- 시작할 때 각 베지어를 24 구간으로 잘라 폴리라인으로 만들고 누적 길이를 저장한다. 채우기·선·점 찍기 모두 이 폴리라인을 쓴다.
연꽃(원점 O, U = R). 표는 뒤 겹 → 앞 겹 순서(그리는 순서와 같다).
| 이름 | 개수 | 축 각 φ | r0 | r1 | hw | b | m | 색 |
| 잎새 | 16 | 11.25° + 22.5°·k | 0.55 | 0.97 | 0.090 | 0.03 | 0.55 | 녹 |
| 바깥 잎 | 8 | 22.5° + 45°·k | 0.42 | 1.00 | 0.165 | 0.05 | 0.50 | 청 |
| 연잎 | 8 | 45°·k (12시 포함) | 0.34 | 0.93 | 0.215 | 0.06 | 0.45 | 적 |
| 받침 원판 | 1 | 원, 반지름 0.44R | | | | | | 청 |
| 속잎 | 8 | 22.5° + 45°·k | 0.26 | 0.60 | 0.130 | 0.04 | 0.45 | 녹 |
| 연주띠 | 1 | 고리, 반지름 0.215R ~ 0.285R | | | | | | 청 |
| 연밥 원판 | 1 | 원, 반지름 0.215R | | | | | | 황 |
| 연밥 씨 | 9 | 가운데 1개 + 반지름 0.125R 위 φ = 22.5° + 45°·k 에 8개, 각 반지름 0.034R | | | | | | 적 |
| 구슬 | 16 | 반지름 0.25R 위 φ = 11.25° + 22.5°·k, 각 반지름 0.020R | | | | | | 분선 색(분긋기 때만 나타남) |
귀꽃(네 모서리 각각, 원점 = 화면 모서리 점, 축 = 그 모서리에서 화면 중심을 향하는 방향, U = S). 뒤 → 앞 순서:
| 이름 | 축에서 벌어진 각 | r0 | r1 | hw | b | m | 색 |
| 귀 잎 2장 | −17°, +17° | 0.045 | 0.24 | 0.033 | 0.013 | 0.45 | 녹 |
| 귀 곁잎 2장 | −34°, +34° | 0.045 | 0.21 | 0.042 | 0.013 | 0.45 | 황 |
| 귀 가운데 잎 | 0° | 0.045 | 0.25 | 0.052 | 0.013 | 0.45 | 황 |
| 귀 원판 | 모서리 점 중심, 반지름 0.07S (3/4 은 화면 밖) | | | | | | 적 |
휘 테두리: 화면 가장자리에서 안쪽으로 0.004S ~ 0.070S 를 폭 0.022S 의 네모난 고리 세 줄로 나눈다(경계 0.004 · 0.026 · 0.048 · 0.070S). 바깥부터 적 · 청 · 황 — 난색과 한색이 번갈아 온다. 네 모서리는 45° 로 맞닿는다(사각형 고리라 저절로 그렇게 된다). 휘가 가장 뒤, 그 위에 귀꽃.
- 휘의 선은 연꽃과 다르다: 휘 전체의 가장 바깥(0.004S)과 가장 안쪽(0.070S) 가장자리에만 먹선(0.0050S)과 그 안쪽 분선을 둔다. 줄과 줄 사이 경계 두 곳(0.026S 적|청, 0.048S 청|황)에는 먹선만 긋는다(폭 0.0035S, 분선 없음).
- 휘 줄의 바림은 3단이 아니라 2단이다: 1단(밝음) 줄 전체, 3단(짙음) 줄 가운데 선 기준 폭 0.45배. 중간 단은 쓰지 않는다. 줄 가장자리가 밝고 가운데가 짙다.
- 산수(폭 0.022S = 23.8px): 가운데 청 줄은 먹 1.9px · 밝음 4.6px · 짙음 10.7px · 밝음 4.6px · 먹 1.9px. 바깥·안쪽 줄은 분선 쪽 밝음(6.5px)이 먹·분(6.5px)에 묻히고 짙음 10.7px + 반대쪽 밝음 4.6px 가 보인다. 휘 영역의 약 71~72% 가 색이다. 줄마다 먹·분 한 쌍을 넣으면 선이 색을 다 덮어 13줄짜리 바코드가 된다.
대칭 차수 N 을 바꾸면 표의 각도는 45° 를 360°/N 으로, 22.5° 를 180°/N 으로, 11.25° 를 90°/N 으로 바꿔 다시 계산하고, 연꽃 잎 네 종의 hw 와 b 는 8/N 배로 줄인다(이웃 잎이 겹치지 않게).
전체 그리는 순서(뒤 → 앞): 휘 3줄 → 귀꽃 4벌 → 잎새 → 바깥 잎 → 연잎 → 받침 원판 → 속잎 → 연주띠 → 연밥 원판 → 연밥 씨 → 구슬.
오방색 배치 규칙: 연꽃 안에서 바로 이웃한 겹은 같은 색 계열을 쓰지 않는다(잎새 녹 / 바깥 잎 청 / 연잎 적 / 속잎 녹 / 연주띠 청 / 연밥 황 / 씨 적). 백은 분선·분 점·구슬, 흑은 먹선이 맡는다.
[고리 도형 — 채우기 규칙]
- 띠(연주띠·휘 세 줄)는 바깥 윤곽과 안쪽 윤곽을 한 경로에 넣은 고리다. 이 경로로 채우거나 clip 할 때는 언제나 'evenodd' 를 쓴다 — 가림 채우기, 색 단, 분선 clip 모두. nonzero 로 채우면 고리 안쪽 전체(휘라면 화면 거의 전부)가 칠해지고 흰 선이 구멍 쪽으로 샌다.
[색 바림 — 같은 색 세 겹]
- 모든 도형은 같은 계열의 3단을 차례로 겹쳐 칠한다: 1단(밝음)은 도형 전체, 2단(중간)은 도형을 0.76배로 줄인 것, 3단(짙음)은 0.50배로 줄인 것. 경계가 또렷한 평평한 색 띠이고, 띠 사이에 선은 없다. 바깥이 밝고 안쪽이 짙다(단청의 빛넣기 원리).
- 줄이는 기준점: 꽃잎은 밑동 가운데(u = 0, v = 0) — u 와 v 를 둘 다 그 배율로 곱한다. 원판·씨·귀 원판은 자기 중심. 띠(연주띠·휘)는 띠의 가운데 선을 기준으로 폭만 줄인다(가장자리가 밝고 가운데 줄이 짙다). 휘만 2단([1, 0.45], 위 휘 테두리 절)이다.
- 넓이로 보면 밝음 42% · 중간 33% · 짙음 25% 다.
[선과 점]
- 분 점(타초): 각 도형의 윤곽 폴리라인을 따라 누적 길이 0.00425S 에서 시작해 0.0085S 마다 원 하나, 반지름 0.0026S, 분선 색 불투명도 85%. 꽃잎은 밑동 직선을 뺀 두 반쪽에만, 원·고리는 닫힌 윤곽 전체에. 휘는 경계마다 점선 한 줄 — 줄마다 바깥 윤곽에만 찍고, 가장 안쪽 황 줄만 안쪽 윤곽에도 찍는다. 전체 약 5,600개다(숨은 것 포함).
- 먹선: 윤곽선 위에 폭 0.0050S, 불투명도 100%, lineCap·lineJoin round.
- 분선: 도형 안쪽에만, 윤곽선에서 0.0025S ~ 0.0060S 떨어진 띠(보이는 폭 0.0035S). 만드는 법 — 도형 경로로 clip 한 상태에서 분선 색으로 윤곽선을 폭 2 × 0.0060S 로 stroke 하고, clip 을 풀고 그 위에 먹선을 긋는다. 바깥에서부터 먹 → 흰 선 → 색 순서가 정확히 평행하게 남는다.
- 띠는 바깥 윤곽과 안쪽 윤곽 둘 다 선을 긋고, 분선도 둘 다 띠 안쪽으로 들어간다(휘 제외 — 휘는 위 휘 테두리 절의 규칙: 바깥·안쪽 가장자리만 먹+분, 줄 사이는 먹 0.0035S 만).
- 매 프레임 도형마다 그리는 순서대로: ① 바탕 그림(뇌록 바탕 캔버스를 패턴으로)으로 도형을 먼저 채워 뒤 겹을 가린다 ② 이 도형의 분 점 ③ 색 단 ④ 분선 ⑤ 먹선. ①이 있어서 아직 색이 없는 타초 단계에서도 앞 겹이 뒤 겹의 점선을 가린다.
- 바탕 패턴 배율: 가림 채우기의 바탕 패턴은 화면에 바탕을 깔 때와 같은 변환(ctx.setTransform(K, 0, 0, K, 0, 0), K = 화면 배율 × devicePixelRatio) 아래에서 채운다. 경로 좌표에 K 를 곱하지 않는다 — 그러면 패턴과 바탕이 어긋나 도형이 얼룩처럼 비친다.
[바탕]
- 시작할 때 1080×1080 바탕 캔버스를 한 번 만든다: #4C7A68 로 칠하고, 그 위에 가칠(밑칠) 붓결 400개 — 가로에서 ±4° 기운 살짝 휜 2차 곡선, 길이 0.10S ~ 0.30S, 폭 0.006S ~ 0.016S, 흰색 또는 검정 불투명도 0.5% ~ 1.2%, round. 바탕 휘도의 표준편차가 1.5 를 넘지 않아야 한다(폰 크기에서 나뭇결 줄무늬가 보이면 실패).
- 매 프레임 이 바탕 캔버스를 먼저 깔고, 가림 채우기와 바램에도 똑같은 이 캔버스를 쓴다.
[장면] (easeInOutSine(q) = (1 − cos πq)/2 · easeInOutCubic(q) = q < 0.5 ? 4q³ : 1 − (−2q + 2)³/2 · q 는 0~1 로 자른다)
0.00초 화면 = 완성된 단청(머묾 구간과 같은 화면). 14.00초 화면과 픽셀까지 같다.
1. 0.00–1.60 바램. 앞 바퀴의 칠이 오래되어 바래고 벗겨지듯 바탕이 얼룩지며 덮는다.
완성 화면을 그린 뒤 덮는 마스크를 얹는다(해상도 270×270, 화면에 늘려 그릴 때 부드럽게 보간). 칸마다 a = max(0.25·smoothstep(0, 0.4, p), smoothstep(0.6·N, 0.6·N + 0.4, p)), p = t/1.60.
N 은 시작할 때 한 번 만든 0~1 값잡음: 0.7 × (10×10 격자 값잡음) + 0.3 × (40×40 격자 값잡음), 격자 사이는 smoothstep 보간, 시드 고정, 최솟값 0·최댓값 1 로 늘린다. 두 격자는 화면 중심 기준으로 각각 27°, −19° 돌린 좌표에서 표본한다 — 돌리지 않으면 문턱으로 자를 때 얼룩 경계가 가로·세로 직선으로 꺾여 네모 덩어리로 벗겨진다.
그리는 법: 화면 밖 캔버스에 바탕 캔버스를 그리고 destination-in 으로 마스크를 덮은 뒤 화면에 얹는다. 처음엔 전체가 옅어지고(최대 25%), N 이 낮은 곳부터 얼룩처럼 먼저 벗겨진다. 0.5초에 화면의 약 29%, 1.0초에 약 72% 가 0초 화면과 눈에 띄게 달라진다. 1.60초에 a = 1 이 모든 칸에서 성립해 바탕만 남는다.
2. 1.60–3.40 타초. 화면을 두 대각선으로 네 쪽(위·오른쪽·아래·왼쪽 삼각형)으로 나눈 사분초를 12시 쪽 → 3시 쪽 → 6시 쪽 → 9시 쪽 순서로 0.45초 간격으로 대고 두드린다.
쪽 k(0~3)의 창 = [1.60 + 0.45k, 2.05 + 0.45k]. 점이 어느 쪽인지는 화면 중심에서 본 그 점의 각으로 정한다(12시 쪽 = φ 가 −45° ~ 45°).
두드림 한 번 = 한 칸: 화면을 0.06S 격자 칸으로 나누고, (칸 번호, 쪽 번호)로 시드한 난수로 칸마다 지연 0 ~ 0.45초를 정한다. 쪽의 창 시작 + 칸 지연에 그 칸 안의 점이 한꺼번에, 페이드 없이 찍힌다. 그래서 점선 조각이 두드리는 박자로 툭툭 생긴다.
3.40초에 화면 전체에 흰 점선 밑그림이 깔린다.
3. 3.50–7.90 채색. 앞선 셋이 바깥에서 안으로 밀려 들어온다.
k단 앞선의 반지름 ρk(t) = ρmax·(1 − easeInOutSine(q)), q = (t − 시작)/2.80, ρmax = 0.7071S(중심에서 화면 모서리까지).
시작: 1단(밝음) 3.50 · 2단(중간) 4.30 · 3단(짙음) 5.10. 끝: 6.30 · 7.10 · 7.90.
k단 색은 모든 도형에서 「중심에서 거리 ≥ ρk」인 곳에만 칠한다(화면 사각형 + 반지름 ρk 원을 한 경로에 넣고 evenodd clip). 앞선은 완전한 원이고 경계는 또렷하다.
분 점은 「중심에서 거리 < ρ1」 인 것만 그린다 — 1단 앞선이 지나가는 순간 칠에 덮여 사라진다.
귀꽃과 휘가 먼저 칠해지고, 1단 앞선은 약 4.68초에 연꽃 바깥 끝(R)에, 5.63초에 연밥 원판(0.215R)에 닿는다. 2단·3단은 0.8초씩 늦게 같은 길을 따라와 세 겹의 색 띠가 동심원 물결처럼 안으로 밀려간다.
4. 7.90–8.10 숨 고르기. 화면에는 선이 하나도 없는 색면만 있다.
5. 8.10–9.26 먹기화·분긋기(시그니처). 화면 중심에서 12시 방향 반직선이 시계방향으로 한 바퀴 돈다.
먹 반직선 각 θ먹(t) = −90° + 360° × easeInOutCubic((t − 8.10)/1.10), 8.10–9.20 (캔버스 각).
분선 반직선 각 θ분(t) = 같은 식, 8.16–9.26 (0.06초 늦게 — 둘이 가장 벌어지는 순간, 약 8.68초에 약 56°).
먹 반직선이 지나간 부채꼴(화면 중심, 반지름 0.8S — 모서리 0.7071S 까지 덮는다, 캔버스 각 −90° → θ먹) 안에 먹선이, 분선 반직선이 지나간 부채꼴 안에 분선과 구슬 16개가 나타난다. 부채꼴 바깥은 선 없는 색면 그대로다.
반직선이 지나가는 곳마다 선 없던 색면에 먹과 흰 선 한 쌍이 생겨 문양이 세워진다. 9.26초에 화면 전체 — 연꽃 지름 0.88S, 네 귀꽃, 휘 — 가 완성된다. 반직선 자체는 보이지 않는다.
6. 9.26–14.00 머묾. 아무것도 움직이지 않는다. 14.00초 = 0.00초 화면.
[합격 기준] — 만든 뒤 스스로 이 숫자로 확인한다(채널 차 = R·G·B 중 가장 큰 차)
- 첫 1초: 1.0초 화면과 0.0초 화면을 비교해 채널 차가 30 을 넘는 픽셀이 화면의 50% 이상(설계값 약 72%).
- 폰 크기 시그니처: 두 화면을 400×400 으로 줄였을 때 8.05초 화면과 9.30초 화면에서 채널 차가 30 을 넘는 픽셀이 20% 이상(설계값 약 23%).
- 흰 선: 완성 화면(1080)에서 분선 색과 채널 차 20 이하인 픽셀이 5.5% 이상(설계값 약 6.4% — 휘 줄 사이 분선을 뺀 만큼 줄었다), 먹선 색 픽셀은 약 11%.
- 휘: 완성 화면 위쪽 휘(y 0.004S ~ 0.070S, x 300 ~ 780)에서 먹선 색(차 ≤ 25)도 분선 색(차 ≤ 20)도 아닌 색 픽셀이 70% 이상(설계값 약 72%). 각 줄 안에 밝음과 짙음 두 단이 둘 다 보여야 한다.
- 채움: 완성 화면에서 바탕색과 다른 픽셀이 약 83%.
- 이음매: 14.00초(= 0.00초) 직전 프레임과 0.00초 프레임이 같다.
[구현]
- 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)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.
이 작품에만 해당하는 구현:
- 기준 크기 1080×1080. 화면에 글자는 하나도 없다.
- 상태가 쌓이지 않는다. 모든 값은 t 만의 순수 함수다. 도형 폴리라인·누적 길이·분 점 좌표와 칸 지연·바탕 캔버스·잡음 N 은 시작할 때 한 번만 만들어 캐시한다.
- 완성 화면(0~1.60초와 9.26~14.00초에 쓰는 것)은 화면 밖 캔버스에 한 번 그려 두고 다시 써도 된다. 단 직접 그린 9.26초 화면과 픽셀까지 같아야 한다.
- 도형 목록을 { 종류(잎/원/고리), 색 계열, 3단 경로, 윤곽 폴리라인, 분 점 } 의 배열 하나로 만들고, render(t) 는 그 배열을 그리는 순서대로 한 번 돈다. 대칭은 같은 정의를 각도만 바꿔 반복해서 만든다(손으로 좌표를 늘어놓지 않는다).
- CONFIG.timing 에 [장면]의 시각을 전부 이름 붙여 모은다: fade [0, 1.60] · pounce 시작 1.60 / 쪽 간격 0.45 / 칸 지연 최대 0.45 · fill [3.50, 4.30, 5.10] 과 fillDur 2.80 · inkSweep [8.10, 9.20] · whiteSweep [8.16, 9.26] · hold [9.26, 14.00] · loop 14.00.
- CONFIG.geom 에 R 비율 0.44, 꽃잎 표의 숫자, 휘 경계 [0.004, 0.026, 0.048, 0.070]S·휘 바림 [1, 0.45]·휘 줄 사이 먹선 0.0035S, 연잎·속잎 끝 제어점 (0.90, 0.35), 바림 배율 [1, 0.76, 0.50], 먹선 폭 0.0050S, 분선 띠 [0.0025, 0.0060]S, 분 점 반지름 0.0026S·간격 0.0085S, 두드림 칸 0.06S 를 넣는다.
[하지 말 것]
- 밑그림을 검은 연필선·먹선처럼 긋지 않는다 — 건물 위의 밑그림은 분주머니로 두드린 흰 점선(타초)이다. 검은 초안선은 「스케치 → 색칠 → 펜선」이라는 서양 일러스트 공정으로 읽히고, 어두운 바탕 위에서 폰 크기로는 보이지도 않는다.
- 채색 중이나 채색 뒤, 먹기화 전에 윤곽선을 미리 그어 두지 않는다 — 시그니처는 「선 없던 색면에 먹과 흰 선이 한 쌍씩 생긴다」이다. 선이 이미 있으면 「선이 조금 굵어진다」에 그쳐 폰에서 변화가 안 보인다.
- 테두리를 한 색 띠로 두지 않는다 — 휘(난색·한색이 번갈아 오는 줄무늬)가 없으면 단청이 아니라 만다라 타일로 읽힌다.
- 휘 줄마다 먹선·분선 한 쌍을 두르거나 휘에 3단 바림을 쓰지 않는다 — 줄 폭 0.022S 에서 선과 분선이 밝음·중간 단을 다 덮어 색은 짙은 단만 남고, 테두리가 가는 핀스트라이프 바코드로 읽힌다.
- 문양 전체를 돌리거나 확대·축소하지 않는다 — 단청은 건물에 칠해져 고정된 문양이다. 문양이 돌면 만다라 화면보호기가 되고, 「장인이 칠한다」는 이야기가 사라진다. 움직이는 것은 점, 색 앞선, 반직선뿐이다.
- 바림을 선형·방사형 그라디언트로 만들지 않는다 — 단청의 빛넣기는 경계가 또렷한 평평한 색 띠 세 단이다. 부드러운 그라디언트는 에어브러시로 뿌린 벡터 클립아트처럼 보인다.
- 1단(밝음)을 흰색에 가깝게 띄우거나 색마다 흰색을 많이 섞지 않는다 — 넓이의 42% 를 차지하는 색이라 화면 인상을 정한다. 파스텔로 가면 안료의 무게가 사라지고 아동 색칠 그림이 된다.
- 꽃잎 가장자리를 sin 이나 잡음으로 흔들거나 물결치게 하지 않는다 — 단청 꽃잎은 초지를 대고 옮긴 매끈한 곡선이다. 흔들리면 손낙서처럼 보이고 대칭이 깨진다. 모양은 위의 베지어 두 개로만 만든다.
- 각 꽃잎에 색을 무작위로 주거나 겹마다 색을 섞지 않는다 — 오방색 배치는 규칙이다. 한 겹은 한 색 계열이어야 대칭이 색으로도 읽힌다.
- 색을 순수 원색(#FF0000, #0000FF, #FFFF00)이나 형광으로 바꾸지 않는다 — 장난감 같은 색이 된다. 먹선도 순수 #000000, 분선도 순수 #FFFFFF 가 아니다(먹과 호분은 약간 따뜻하다).
- 발광·그림자·광택·금박 반짝임·입자를 넣지 않는다 — 단청 안료는 무광이다. 그림자는 겹 사이에 검은 이중선을 만들어 먹선 위계를 흐리고, 반짝임은 흰 분 점이나 흰 선과 섞여 공정이 읽히지 않는다.
- 분 점을 반짝이거나, 커졌다 작아지거나, 투명도로 떠오르게 하지 않는다 — 두드려 찍힌 가루는 한 번에 생기고 그대로 있다. 움직이는 점은 반짝이 파티클로 읽힌다.
- 반직선 끝이나 선 끝에 붓끝 점·불빛·작은 원을 달지 않는다 — 선이 생기는 것으로 충분하다. 끝에 달린 장식은 레이더·레이저 포인터처럼 보인다.
- 분선을 먹선 바깥에 긋거나 먹선보다 굵게 하지 않는다 — 단청의 분선은 먹선 안쪽에 붙는 흰 선이다. 위계가 뒤집히면 문양이 흰 테두리 스티커처럼 뜬다.
- 고리 도형(연주띠·휘)을 nonzero 로 채우거나 clip 하지 않는다 — 고리 안쪽 전체가 칠해져 화면이 한 색으로 덮이고 흰 선이 구멍 쪽으로 샌다. 언제나 evenodd.
- 색이 투명도로 서서히 떠오르게(페이드) 하지 않는다 — 색은 칠하는 앞선이 지나가며 생겨야 「칠한다」로 읽힌다. 투명도로 나타나면 슬라이드 전환이 된다.
- 색 앞선을 붓자국처럼 들쭉날쭉하게 만들거나 앞선에 테두리 선을 긋지 않는다 — 앞선은 완전한 원이고 보이는 것은 색의 경계뿐이다. 장식을 붙이면 세 단이 안으로 밀려가는 동심원 리듬이 흐려진다.
- 앞 겹 밑에 숨어야 할 뒤 겹의 점·선을 앞 겹 위에 그리지 않는다 — 점이나 선을 전부 마지막에 한꺼번에 그리면 꽃잎들이 겹친 철사 그물처럼 보인다. 도형마다 바탕으로 가리고, 점·색·선을 그 도형 차례에 그린다.
- 바램을 화면 전체 균일한 페이드로 하지 않는다 — 단청은 칠이 얼룩지며 벗겨지듯 바랜다. 균일한 페이드는 영상 편집기의 장면 전환처럼 보인다.
- 시작을 빈 바탕으로 두지 않는다 — 0초 화면은 완성된 단청이다. 빈 초록 화면으로 시작하면 첫 몇 초가 아무것도 없는 화면이 되어 넘겨진다.
- 태극 문양·한복·전통 글자·제목 글씨를 넣지 않는다 — 한국적인 느낌은 장식 기호가 아니라 타초 → 채색 → 먹기화·분긋기라는 공정과 안료 색, 휘에서 온다. 화면에 글자는 없다.
사용 방법
필요한 것: claude.ai 계정 — 무료 계정에서도 Claude Opus 5.5 를 고를 수 있습니다
- claude.ai 에서 새 대화를 엽니다.
- 모델 메뉴에서 Claude Opus 5.5 를 고르고, 같은 메뉴의 Effort(답변 깊이)를 High 로 둡니다.
- 복사한 프롬프트를 붙여 넣고 전송합니다. 결과로 나온 HTML 파일을 브라우저로 열면 재생됩니다.
- 권장 모델
- Claude Opus 5.5 · Effort High
- 화면비
- 1:1 (정사각)
- 재생 길이
- 14초
- 결과물
- HTML 파일 하나 · 따로 설치할 것 없음
- 영상 파일
- 위 「MP4 저장 기능 포함」을 켜면 결과 화면에 녹화 단추가 생깁니다 1080 기준 · 12 Mbps · 브라우저에 따라 MP4 또는 WebM
추가 요청 예시
결과가 나온 뒤 같은 대화에서 이어서 요청하면 해당 부분만 수정됩니다.
- 바탕을 녹청(뇌록) 대신 짙은 붉은 흙빛(석간주) #6E3B2E 로 바꾸고, 연잎은 빨강 대신 노랑 계열로 칠해 줘. 맞닿은 겹끼리 같은 색이 되지 않게 나머지도 맞춰 줘.
- 완성된 문양이 머무는 시간을 4초 더 늘려 전체 18초로 해 줘. 다른 시각은 그대로 두고 완성 화면이 머무는 끝부분만 뒤로 밀어서.
- 꽃잎 수(대칭 차수)를 8에서 12로 바꿔 줘. 각도와 잎 폭은 프롬프트에 적힌 규칙대로 다시 계산해서 더 촘촘한 꽃으로.
한국 미학