타일 뒤집기 로고

프롬프트 설정

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

타일 뒤집기 로고 리빌 영상을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 화면 끝까지 깔린 주황 타일 144장이 왼쪽 위 모서리에서 퍼지는 물결을 따라 한 장씩 카드처럼 뒤집히고, 뒷면들이 모여 로고 한 장이 된다. 뒤집히는 타일은 두께가 있는 판이다 — 옆면이 보이고, 돌아간 만큼 어두워지며, 제자리를 지나쳤다가 스프링처럼 돌아온다. 로고가 다 모이면 타일 사이 줄눈이 닫혀 로고가 매끈한 한 장이 되고, 다시 줄눈이 열린 뒤 반대쪽 모서리에서 두 번째 물결이 같은 방향으로 마저 돌려 처음의 주황 면으로 돌아온다. 3D 라이브러리 없이 원근을 직접 계산한다.

[바꿀 곳]
- 브랜드 이름: TESSEL
- 슬로건: 작은 조각이 큰 그림이 된다
- 색: 줄눈(배경) #101013 · 앞면 #FF5B2E · 뒷면 바탕 #F2EEE6 · 로고 잉크 #17171C · 타일 옆면 #34333A
- 마크: 네 칸 중 오른쪽 위 한 칸이 뒤집히는 중인 타일(앞면 색 사다리꼴)인 기본 마크. 자기 마크를 쓰려면 CONFIG.drawMark(ctx, x, y, M) 함수만 바꾼다(왼쪽 위 x, y 에서 한 변 M 인 정사각 안에 그린다).
- 격자: 12×12
- 첫 물결 시작점: 왼쪽 위 모서리 (0, 0) · 두 번째 물결 시작점: 오른쪽 아래 모서리 (1, 1) — 화면 폭·높이에 대한 비율
- 길이: 8초 (끝나면 처음으로 이어서 반복)
- 화면비: 1:1 (캔버스 1080×1080)

[크기] — W = H = 1080
- 칸 한 변 s = W / 12 = 90px. 격자는 화면을 가장자리까지 꽉 채운다(바깥 여백 0).
- 줄눈 g: 기본 g0 = 0.045s(약 4px). 타일 앞면 한 변 a = s − g. 타일 중심 = 칸 중심 ((열 + 0.5)·s, (행 + 0.5)·s).
- 타일 두께 T = 0.10s(9px). 원근 거리 F = 3.5s(315px).
- 로고(뒷면 이미지)는 위에서 아래로 쌓은 한 덩어리이고, 덩어리 전체의 세로 가운데를 0.5H 에 둔다. 가로는 모두 가운데 정렬.
  · 마크: 한 변 M = 0.34H 정사각. 2×2 칸, 칸 한 변 q = 0.465M, 칸 사이 0.07M.
    왼쪽 위·왼쪽 아래·오른쪽 아래 칸 = 로고 잉크 정사각(모서리 각짐).
    오른쪽 위 칸 = 앞면 색 사다리꼴 하나: 칸 중심 (cx, cy) 에서 왼쪽 변은 x = cx − 0.16q, y = cy ± 0.50q · 오른쪽 변은 x = cx + 0.16q, y = cy ± 0.38q.
  · 마크 아래 0.07H 띄우고 이름. 이름 폭(글자별 advance 합 + 글자 사이 간격 0.08em × (글자 수 − 1))이 0.70W 가 되게 글꼴 크기를 정하되,
    대문자 높이(measureText('H').actualBoundingBoxAscent)가 0.15H 를 넘으면 0.15H 로 묶는다. 글자마다 advance 를 왼쪽부터 누적해 x 를 구한다.
  · 이름 기준선 아래 0.055H 띄우고 슬로건. 한글 글자 높이('한'의 ascent + descent) 0.040H, 굵기 700, 글자 사이 0.02em. 폭이 0.70W 를 넘으면 그 안에 들어가게 줄인다.
  · 덩어리 높이 = 0.34H + 0.07H + 대문자 높이 + 0.055H + 0.040H. 예: 대문자 0.15H 이면 0.655H → 마크 위끝 0.1725H, 슬로건 아래끝 0.8275H.
    대문자 높이는 기기 글꼴마다 달라서 덩어리 위치는 코드가 잰 값으로 계산한다.

[타일 입체 — 원근은 직접 계산]
타일마다 자기 중심을 원점으로 하는 몸체 좌표(x 오른쪽, y 아래, z 화면 쪽)를 쓴다. 판은 x, y ∈ [−a/2, a/2], z ∈ [−T/2, T/2]. 앞면은 z = +T/2, 뒷면은 z = −T/2.
모든 타일은 자기 중심을 지나는 세로축(y축)으로 돈다. 각도 θ 일 때 몸체 점 (x, y, z) →
  X = x·cosθ + z·sinθ,  Z = −x·sinθ + z·cosθ,  Y = y
  화면 점 = (타일 중심 x + X·P, 타일 중심 y + Y·P),  P = F / (F + T/2 − Z)
  (θ = 0 의 앞면과 θ = 180° 의 뒷면은 Z = T/2 라서 P = 1 — 쉬고 있는 타일은 정확히 a×a 로 보인다.)
  θ 가 늘면 왼쪽 가장자리가 화면 쪽으로 다가오며 커지고 오른쪽 가장자리는 멀어진다.
보이는 면(카메라가 타일마다 중심 위 F + T/2 에 있다고 보고 계산한 정확한 조건. κT = (T/2)/(F + T/2) = 0.0141, κa = (a/2)/(F + T/2) = 0.1345):
  앞면 cosθ > κT · 뒷면 cosθ < −κT · 왼쪽 옆면(몸체 x = −a/2) sinθ > κa · 오른쪽 옆면(x = +a/2) sinθ < −κa.
  위아래 옆면은 이 카메라에서 늘 안 보이므로 그리지 않는다. 볼록한 판이라 보이는 면끼리는 겹치지 않는다(옆면을 먼저, 얼굴 면을 나중에).
얼굴 면 이미지 붙이기 — 사다리꼴은 setTransform 한 번으로 안 나온다. 이렇게 한다:
  1) 얼굴 면의 네 꼭짓점을 위 식으로 투영해 정확한 사다리꼴 경로로 clip 한다.
  2) 띠를 그리기 전에 같은 clip 안을 면 바탕색(앞면 = 그 칸의 앞면 색, 뒷면 = 뒷면 바탕색)으로 한 번 채운다 — 띠 사이에 틈이 생겨도 줄눈색 대신 바탕색이 비친다.
  3) 몸체 x 를 12등분한 세로 띠마다 두 경계 x_i, x_(i+1) 의 화면 X 와 반높이 h = (a/2)·P 를 구한다.
     띠의 화면 사각형: 왼쪽 = 두 X 중 작은 값, 폭 = 두 X 의 차 + 1px, 위 = 중심 y − 두 h 중 큰 값, 높이 = 그 큰 h × 2.
     (+1px 이어야 한다 — 0.5px 겹침은 띠 경계가 픽셀 가운데에 걸릴 때 반투명 가장자리 두 장이 겹쳐 줄눈색이 약 6% 비치는 세로선을 남긴다.
      12등분이면 크게 돈 면에서 이웃 띠 위아래 끝의 계단이 1.1px 안이다 — 8등분은 1.6px 라 글자 곡선이 지그재그로 꺾인다.)
  4) 원본 이미지 열: 앞면은 (타일 중심 x + x), 뒷면은 (타일 중심 x − x). 두 경계의 열 중 작은 값이 띠의 원본 왼쪽, 폭 a/12, 원본 위 = 타일 중심 y − a/2, 높이 a.
     원본도 화면도 「작은 쪽이 왼쪽」으로 짝지으면 앞면·뒷면 모두 똑바로 붙는다(뒷면의 거울 뒤집힘이 이 열 규칙으로 상쇄된다 — θ = 180° 에서 몸체 x 는 화면 −x 에 오고 거기에 이미지 −x 열이 붙는다).
  5) 같은 clip 안에서 사다리꼴을 검정 투명도 α 로 덮어 음영을 준다.
옆면: 네 꼭짓점(몸체 x = ∓a/2, y = ±a/2, z = ±T/2)을 투영한 사각형을 옆면 색으로 채운 뒤 같은 방식으로 검정 α 를 덮는다.
음영: 빛 방향 L = (−0.4, 0, 1)/1.0770(왼쪽 앞에서 오는 빛). 면의 법선 n(θ): 앞면 (sinθ, 0, cosθ) · 뒷면 (−sinθ, 0, −cosθ) · 왼쪽 옆면 (−cosθ, 0, sinθ) · 오른쪽 옆면 (cosθ, 0, −sinθ).
  k = max(0, n·L) / 0.9285, α = 0.5·(1 − min(1, k)). 쉬는 면은 α = 0(색 그대로). 앞면이 60° 돌면 α ≈ 0.42, 90° 에서 옆면은 α = 0 이라 옆면 색이 그대로 선다.
  90° 순간 보이는 것은 폭 약 10px(0.114s)·높이 약 98px(1.09s)의 옆면 기둥 하나다 — 이것이 두께감이다.
그리는 순서: 줄눈 색으로 화면 전체를 칠한다 → 쉬는 타일 전부(θ 가 정확히 0·180·360 인 타일, drawImage 한 번씩) → 움직이는 타일을 |sinθ| 작은 것부터 큰 것 순으로.
  옆으로 선 타일은 원근으로 위아래가 칸보다 최대 4px 커져 이웃을 살짝 덮는데, 이 순서면 서 있는 타일이 위에 온다.
쉬는 타일: 면 이미지의 (타일 중심 ± a/2) 영역을 원본·화면 같은 자리에 그대로 drawImage. 줄눈이 1px 보다 좁을 때는 원본·화면 모두 사방으로 e = max(0, 0.5 − g/2)px 넓혀 그린다(줄눈 0 일 때 타일 사이 머리카락 같은 이음선 방지).

[면 이미지 — 시작할 때 한 번 그려 둔다. 이미지 파일 없음]
- 앞면 이미지(1080×1080 화면 밖 캔버스): 칸마다 앞면 색 × (1 − 0.07·r) 로 칸 전체를 칠한다. r 은 시드 고정 난수(칸마다 하나, 0~1). 타일마다 조금씩 다른 유약 같은 결이 생긴다.
- 뒷면 이미지(1080×1080 화면 밖 캔버스): 뒷면 바탕색 위에 마크·이름·슬로건을 [크기]대로 그린다.
- 모든 타일은 이 두 장에서 자기 자리 조각을 잘라 붙인다. 그래서 다 모이면 로고가 한 장으로 이어진다.

[장면] (박자 없이 물결 한 번, 머묾, 물결 한 번. 아래 t 는 「시간표 시각」, τ = 그 타일의 출발 후 초)
재생 위상 phase = 0.50초: render 에 넘기는 t 는 (재생 경과 초 + phase) mod 8 이다. 시간표의 모든 시각은 그대로 둔다.
  재생 첫 프레임은 이미 왼쪽 위 모서리에서 원호가 퍼지는 중인 화면(타일 37장 회전 중, 20장은 벌써 뒷면)이다. 첫 1초 안에 시그니처(시간표 0.89초 = 재생 0.39초)와
  로고가 거의 다 모인 화면이 들어온다. 루프를 돌려 자르는 것이라 끝 화면과 첫 화면은 여전히 이어진다.
  거의 정지한 주황 화면(시간표 7.3~8.0초)은 재생 6.8~7.5초, 곧 두 번째 물결의 꼬리에 놓인다.
타일 회전 스프링: S(τ) = 1 − e^(−aτ)·(cos bτ + (a/b)·sin bτ), a = 5.301, b = 7.854(= π/0.40). S(0) = 0, 출발 속도 0.
  0.141초에 90°(옆으로 섬), 0.276초에 180°를 처음 지나고, 0.40초에 201.6°까지 넘쳤다가(12%), 0.80초에 177.4°로 덜 돌아오고, 그 뒤 잦아든다.
  τ ≥ 1.05 이면 정확히 목표 각도로 둔다(그 순간 남은 오차 0.17° — 보이지 않는다. 이렇게 해야 줄눈이 다 닫히는 2.35초에 모든 타일이 쉬고 있다). 각도는 언제나 t 의 닫힌 식이다.
물결 출발 시각: 타일 (열, 행) 의 출발 = 물결 시작 + k·(d − d_min). d = 물결 시작점에서 그 타일 중심까지의 거리(칸 단위),
  k = 1.30 / (d_max − d_min). 모서리 시작이면 d_min = 0.707, d_max = 16.263, k = 0.0836초. 출발점에서 원호 모양으로 퍼진다. 난수 흔들림 없음.
1. 0.00–2.35 첫 물결(앞면 → 뒷면). 물결 시작 0.00, 시작점 왼쪽 위 모서리. 타일 각도 θ = 180°·S(τ).
   시간표 0.00 에 왼쪽 위 첫 타일이 출발한다. 마지막 타일(오른쪽 아래) 출발 1.30, 정착 2.35.
   0.79초쯤 옆으로 선 타일들의 원호가 화면 가운데를 지나고, 0.89초에 타일의 52% 가 뒷면을 보인다(시그니처 — 왼쪽 위 절반은 로고, 오른쪽 아래 절반은 주황, 그 경계에 옆면 기둥과 음영이 원호로 늘어선 화면).
   0.97~1.45초에는 타일 120장 넘게가 동시에 스프링 구간(0 < τ < 1.05) 안에 있다(가장 많을 때 1.19~1.20초에 137장).
   1.95초면 남은 흔들림이 모든 타일에서 2.6° 아래로 잦아들어 눈에는 거의 멈춘다 — 그래서 줄눈 닫힘이 바로 이어진다.
2. 1.95–2.35 줄눈 닫힘. g: g0 → 0 (easeInOutCubic). 마지막 몇 장이 잦아드는 동안 타일 사이 줄이 사라지며 로고가 매끈한 한 장이 된다.
   (1.95초에 아직 42장이 스프링 구간에 있지만 흔들림은 2.6° 이하다. 2.20초에 줄눈이 1px 아래로 내려갈 때 남은 것은 6장, 2.35초에 0장.)
3. 2.35–5.10 머묾. 아무것도 움직이지 않는다. 로고가 읽히는 시간이다.
4. 5.10–5.50 줄눈 열림. g: 0 → g0 (easeInOutCubic). 다시 타일로 갈라진다.
5. 5.50–8.00 두 번째 물결(뒷면 → 앞면, 같은 방향으로 마저 돈다). 물결 시작 5.50, 시작점 오른쪽 아래 모서리. θ = 180° + 180°·S(τ) — 180°에서 360°까지.
   이때는 오른쪽 옆면이 보이고, 넘침은 381.6°(= 360° + 21.6°)까지 갔다 온다. 마지막 타일(왼쪽 위) 출발 6.80, 정착 7.85.
   7.85–8.00 모든 타일 360° = 0°(앞면)로 쉰다. 8.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. 위의 px 값은 전부 이 기준 좌표다(devicePixelRatio 배율은 ctx.scale 로 한 번만).
- 이름 글꼴: 'Avenir Next', 'Century Gothic', 'Futura', 'Bahnschrift', 'Segoe UI', sans-serif 굵기 700(전부 시스템 글꼴). 슬로건은 위 한글 스택, 굵기 700.
  이름 글꼴 크기·글자별 x·슬로건 크기는 그 기기의 글꼴로 measureText 해서 코드가 계산한다.
- 앞면·뒷면 이미지 두 장과 타일별 출발 시각 두 개(물결 1·2)는 시작할 때 한 번 계산해 둔다. render(t) 는 타일마다 각도를 닫힌 식으로 구하기만 한다.
- 타일 각도: τ1 = t − 출발1, τ2 = t − 출발2. τ1 < 0 이면 0°, 0 ≤ τ1 < 1.05 이면 180°·S(τ1), 그 뒤 τ2 < 0 이면 180°, 0 ≤ τ2 < 1.05 이면 180° + 180°·S(τ2), 그 뒤 360°.
  보이는 면 판정과 이미지 선택은 이 θ 로 한다(360° 에서는 앞면).
- 쉬는 타일은 drawImage 한 번, 움직이는 타일만 clip + 바탕색 채움 + 띠 12개 + 옆면 하나 + 음영 덮개. 움직이는 타일이 137장일 때도 매끄럽게 돌아야 한다.
- CONFIG 에 모은다: grid 12 · gap0 0.045(s 배) · thickness 0.10 · perspective 3.5 · strips 12 · stripOverlap 1 · shadeMax 0.5 · light [−0.4, 0, 1] · jitter 0.07 ·
  spring { a: 5.301, b: 7.854, settle: 1.05 } · wave1 { start: 0.00, origin: [0, 0], sweep: 1.30 } · wave2 { start: 5.50, origin: [1, 1], sweep: 1.30 } ·
  gapClose [1.95, 2.35] · hold [2.35, 5.10] · gapOpen [5.10, 5.50] · duration 8.0 · phase 0.50 · 로고 크기(mark 0.34, markGap 0.07, nameWidth 0.70, capMax 0.15, sloganGap 0.055, sloganHeight 0.040).
- 물결 시작점을 화면 가운데(0.5, 0.5)로 바꿔도 같은 식이 맞도록 d_min·d_max 는 그 시작점에서 코드가 잰다.
- 합격 기준 — 시작할 때 한 번, render 가 쓰는 바로 그 함수(스프링 S·타일 출발 시각 표·타일 각도 함수)로 아래를 계산해
  console.table 로 [항목, 기대, 실제, 통과] 를 찍고 마지막 줄에 「합격 n/11」을 찍는다. 화면에는 아무것도 띄우지 않는다.
  기대값은 기본 CONFIG(12칸·모서리 시작·위 시간표) 기준이다.
  ① 180°·S(0.141) = 90° ±1° · ② τ 0~1.05 를 0.001초로 훑은 최대 각도 201.6° ±0.1°, 그 시각 0.40초 ±0.01
  ③ |180°·S(1.05) − 180°| ≤ 0.2° · ④ 첫 물결이 화면 가운데(거리 8.485칸)를 90° 로 지나는 시각 = 출발 + 0.141 = 0.79초 ±0.01
  ⑤ 시간표 0.89초 뒷면이 보이는 타일(cosθ < −κT) 75장(52%) ±1장 · ⑥ 시간표 1.00초 뒷면 96장 ±1장
  ⑦ 시간표 0~2.5초를 0.001초로 훑은 스프링 구간 동시 최대 137장 ±1, 그 시각 1.19~1.20초 · ⑧ 시간표 2.35초 스프링 구간 0장·줄눈 g = 0
  ⑨ 재생 0초 → 시간표 0.50초, 그때 스프링 구간 37장·뒷면 20장 · ⑩ 시간표 0.00 과 7.999초의 모든 타일 각도가 360° 로 나눈 나머지 0(차이 0)
  ⑪ CONFIG.strips = 12 이고 stripOverlap = 1px.

[하지 말 것]
- 3D 라이브러리·WebGL·CSS 3D transform(rotateY·perspective 속성)을 쓰지 않는다 — 요소 144개를 CSS 로 돌리면 render(t) 하나로 그리는 규칙이 깨지고, 캔버스 녹화에도 담기지 않는다. 원근은 위의 식으로 직접 계산한다.
- 타일 폭만 cosθ 배로 줄였다 늘리는 가짜 뒤집기를 하지 않는다 — 두께·원근·음영이 없으면 카드가 납작하게 접히는 2D 효과로 보이고, 이 작품의 입체감이 통째로 사라진다.
- 얼굴 면 이미지를 setTransform 한 번(평행사변형)으로 붙이지 않는다 — 다가오는 가장자리가 커지는 사다리꼴이 안 나와 원근이 죽고, 면 테두리와 이미지가 어긋나 삐져나온다. clip + 세로 띠로 붙인다.
- 뒷면을 앞면과 같은 열 규칙(중심 + x)으로 붙이지 않는다 — 뒤집힌 판의 뒷면은 좌우가 바뀌어 보이므로 로고 조각이 타일마다 거울상으로 붙고, 다 모여도 글자가 읽히지 않는다.
- 로고를 타일마다 fillText 로 따로 그리지 않는다 — 타일 경계에서 획이 이어지지 않는다. 화면 밖 한 장에 그려 두고 잘라 쓴다.
- 스프링을 1 − e^(−aτ)·cos bτ 꼴로 쓰지 않는다 — 출발 순간 속도가 0이 아니라서 쉬던 타일이 첫 프레임에 툭 꺾인다. sin 항이 있는 위 식은 정지에서 부드럽게 출발한다.
- 물결 출발 시각에 난수 흔들림을 넣지 않는다 — 원호가 지글거리는 소음이 되고, 「모서리에서 퍼지는 물결」이 읽히지 않는다.
- 회전축을 타일마다 다르게(대각선·물결 방향) 하지 않는다 — 뒷면 열 규칙은 세로축에서만 이 간단한 꼴이다. 축이 바뀌면 로고 조각이 비틀려 붙는다.
- 두 번째 물결을 거꾸로(180° → 0°) 돌리지 않는다 — 되감기처럼 보인다. 같은 방향으로 360° 까지 마저 돌아야 끝 화면이 처음 화면과 같은 앞면이 된다.
- 그림자·바닥 반사·광택 띠(반짝 쓸고 지나가는 빛)·렌즈 플레어·파티클을 넣지 않는다 — 입체감은 옆면과 면 방향에 따른 어둡기 하나가 맡는다. 광택 띠는 흔한 템플릿 인트로처럼 보이게 하고, 그림자는 줄눈 색과 섞여 얼룩이 된다.
- 잔상·모션 블러를 넣지 않는다 — 띠 그리기를 여러 장 겹치면 타일 137장이 함께 움직이는 구간에서 프레임이 떨어진다. 속도감은 스프링 넘침이 맡는다.
- 머묾 구간에 숨쉬기 확대·맥박·반짝임을 넣지 않는다 — 로고 인트로의 쓸모는 이름이 읽히는 정지이고, 줄눈이 닫히는 것이 이미 그 구간의 사건이다.
- 페이드(투명도로 나타나고 사라지기)를 쓰지 않는다 — 화면이 바뀌는 방법은 타일 뒤집기 하나여야 한다. 투명도로 넘기면 장면 전환으로 읽힌다.
- 격자를 화면 가운데 작게 두거나 바깥 여백을 남기지 않는다 — 타일이 화면 끝까지 깔려야 첫 프레임이 꽉 찬 면이 되고, 로고가 「화면 전체가 뒤집혀 생긴 것」으로 읽힌다.
- 색을 더하지 않는다(무지개 타일·그라디언트 앞면) — 앞면은 한 색의 결 차이(7%)만 있어야 뒤집힌 로고의 대비가 산다.