# AI Tech Studio (AI 기술 스튜디오)

> Game graphics, VFX, physics, AI and system techniques for web games (mostly three.js + TypeScript, also Canvas 2D and Web Audio), each with a live demo, a ready-to-use build spec, principles, pitfalls, acceptance checks and the actual demo source code. Content is written in Korean; English technical terms are included for each technique.

게임 그래픽 · 연출 · 물리 · 시스템 기술 모음. 기술마다 라이브 견본 · AI 주문서 · 원리 · 흔한 실수 · 완성 기준 · 견본 실제 코드가 있다.

## How to use (for coding agents)
- Search: fetch https://ai-techstudio.web.app/ai/index.json (fields: id, name, en[], summary, domain, category, dim, level, cost, platforms, variants, related, md). Match the user's goal against `name`, `en`, `summary`.
- Read: fetch https://ai-techstudio.web.app/ai/t/<id>.md — section 「주문서」 is the spec to implement, 「완성 기준」 is the acceptance checklist, 「견본 실제 코드」 is working reference code.
- Combine: scene recipes that stack several techniques are at https://ai-techstudio.web.app/ai/recipes/<id>.md.
- MCP server (Streamable HTTP, no auth): https://ai-techstudio.web.app/mcp — tools search_techniques · get_technique · list_categories · list_recipes · get_recipe. Add it in any MCP-capable tool, e.g. `claude mcp add --transport http --scope user ai-techstudio https://ai-techstudio.web.app/mcp` · `codex mcp add ai-techstudio --url https://ai-techstudio.web.app/mcp` · Cursor / Gemini CLI / VS Code: the URL in their MCP settings.
- Setup guide for people: https://ai-techstudio.web.app/#connect
- Adapt the reference code to the user's project; do not copy studio-only scaffolding (demo frame, control sliders).

## 그래픽 · 셰이더 — 재질 · 빛 · 후처리 · 셰이더로 화면의 느낌을 만들어요
- [툰 셰이딩 (3단 명암)](https://ai-techstudio.web.app/ai/t/u01.md): 빛 받는 정도를 2~3단 계단으로 끊어 칠해, 3D 물체를 셀 애니메이션처럼 보이게 한다. (Toon shading (cel shading))
- [외곽선 (뒤집은 껍데기)](https://ai-techstudio.web.app/ai/t/u02.md): 같은 모양을 조금 키워 뒷면만 검게 그려, 물체 가장자리에 만화 같은 테두리 선을 두른다. (Inverted hull outline)
- [PBR + 클리어코트](https://ai-techstudio.web.app/ai/t/u04.md): 나뭇결 · 색 재질 위에 반짝이는 투명 막을 한 겹 더 얹어, 니스 칠한 나무 · 반들한 플라스틱 말처럼 보이게 한다. (Clearcoat (PBR coat layer))
- [투과 · 굴절 (유리 · 얼음)](https://ai-techstudio.web.app/ai/t/u07.md): 빛이 물체 속을 지나며 꺾이고 색이 갈라지게 해, 뒤가 휘어 비치는 유리 · 얼음 · 보석을 만든다. (Transmission (physically based refraction))
- [재질에 셰이더 끼워 넣기](https://ai-techstudio.web.app/ai/t/u08.md): 기본 재질의 셰이더 중간에 몇 줄을 끼워 넣어, 빛 · 그림자 계산은 그대로 두고 풀이 흔들리거나 갓이 속에서 빛나게 한다. (Material.onBeforeCompile (shader injection))
- [캔버스로 그린 무늬 (CanvasTexture)](https://ai-techstudio.web.app/ai/t/u09.md): 2D 캔버스에 얼굴 · 숫자 · 무늬를 그려 텍스처로 붙여, 그림 파일 없이 3D 물체에 글씨와 무늬를 입히고 바로 바꾼다. (CanvasTexture)
- [그린 요철 · 노멀 맵](https://ai-techstudio.web.app/ai/t/u10.md): 캔버스로 그린 흑백 높이 그림을 요철 맵으로 붙여, 모양은 매끈한 그대로인데 빛이 돌면 점 · 결이 오돌토돌 솟아 보이게 한다. (Bump mapping (bumpMap · bumpScale))
- [환경 반사 (RoomEnvironment + PMREM)](https://ai-techstudio.web.app/ai/t/u12.md): 스튜디오 조명 장면을 한 번 구워 반사 지도로 깔아, 금속 · 유리 · 니스 칠한 물체에 빛이 비쳐 반짝이게 한다. (Image-based lighting (environment map))
- [3점 조명 (반구 + 해 + 테두리)](https://ai-techstudio.web.app/ai/t/u14.md): 반구 빛 · 해 · 뒤쪽 테두리 빛 셋을 겹쳐, 납작하던 캐릭터가 입체로 서고 윤곽이 배경에서 떠오르게 한다. (Three-point lighting (key · fill · rim))
- [스포트라이트 · 움직이는 점광](https://ai-techstudio.web.app/ai/t/u15.md): 원뿔 스포트라이트로 탁자를 훑고, 촛불 점광은 사인 두세 개로 일렁이고, 가끔 번쩍 하는 빛으로 장면에 숨결을 준다. (SpotLight)
- [그림자 맵 (PCF · PCF Soft)](https://ai-techstudio.web.app/ai/t/u17.md): 해에서 본 깊이를 그림자 지도에 찍어, 물체가 바닥에 그림자를 드리우게 한다 — 반지름으로 또렷하게(만화) · 부드럽게 고른다. (Shadow mapping)
- [빛 번짐 (UnrealBloom)](https://ai-techstudio.web.app/ai/t/u20.md): 그린 화면에서 문턱보다 밝은 곳만 골라 여러 크기로 흐려 다시 더해, 네온 · 전구 · 빛나는 물체 둘레에 빛이 번지게 한다. (Bloom (UnrealBloomPass))
- [후처리 사슬 (EffectComposer → OutputPass)](https://ai-techstudio.web.app/ai/t/u21.md): 장면을 바로 화면에 그리지 않고 그림으로 받아 빛 번짐 · 색 보정 같은 단계를 차례로 거친 뒤 마지막에 sRGB 로 바꿔 내보내는 후처리의 기본 틀. (Post-processing chain (EffectComposer))
- [흐르는 강물 셰이더](https://ai-techstudio.web.app/ai/t/u22.md): 겹친 잡음 높이를 흐름 방향으로 흘리고 그 기울기로 물결 면을 만들어, 프레넬 하늘 반사 · 햇빛 반짝 · 기슭 거품이 있는 강물을 그린다. (Flowing water shader)
- [물 바닥 빛무늬 (커스틱)](https://ai-techstudio.web.app/ai/t/u23.md): 물결 잡음을 sin 으로 접어 가는 선만 남겨, 물속 바닥에 일렁이는 빛 그물(커스틱)을 셰이더로 그린다 — 빨 · 초 · 파를 조금 어긋나게 해 무지개 테까지. (Caustics (procedural))
- [기울여도 평평한 물](https://ai-techstudio.web.app/ai/t/u25.md): 통 안 물 상자에서 세계 높이 y = h 위쪽 픽셀을 버리고 뒷면을 수면으로 칠해, 통이 기울어도 물 표면은 늘 수평으로 남게 한다. (World-space plane clipping (discard))
- [피사계 심도 (Bokeh)](https://ai-techstudio.web.app/ai/t/i01.md): 카메라에서 초점 거리만큼 떨어진 곳은 또렷하게, 앞뒤는 거리만큼 흐리게 해, 사진처럼 주인공만 도드라지게 한다. (Depth of field (Bokeh))
- [구석 그늘 (SSAO / GTAO)](https://ai-techstudio.web.app/ai/t/i02.md): 화면의 깊이 · 법선으로 각 점 둘레가 얼마나 막혀 있는지 재서 틈 · 구석 · 맞닿은 곳을 어둡게 해, 블록이 붕 떠 보이지 않고 입체감이 산다. (Ambient occlusion (SSAO / GTAO))
- [후처리 외곽선 (깊이 · 법선 경계)](https://ai-techstudio.web.app/ai/t/i03.md): 장면의 깊이 · 법선 그림을 한 번 더 그려 값이 갑자기 바뀌는 곳에 선을 그어, 얇은 표지판 · 바닥 선까지 일정한 굵기의 만화 외곽선을 넣는다. (Post-process edge detection outline)
- [계단 줄이기 (SMAA · FXAA · 다중 샘플)](https://ai-techstudio.web.app/ai/t/i04.md): 후처리를 쓰면 꺼지는 기본 안티앨리어싱 대신 SMAA 단계를 더해, 가는 바퀴살 · 상자 모서리의 계단을 다시 매끈하게 다듬는다. (Anti-aliasing (SMAA · FXAA · MSAA))
- [잔상 · 움직임 흐림 (Afterimage)](https://ai-techstudio.web.app/ai/t/i05.md): 지난 화면을 조금씩 옅게 남겨 지금 화면과 겹쳐, 빠르게 미끄러지는 별 · 도는 공 · 달리는 차 뒤에 꼬리가 생겨 속도감이 난다. (Afterimage (frame feedback / ghosting))
- [빛살 (God rays)](https://ai-techstudio.web.app/ai/t/i06.md): 해만 하얗고 나머지는 검게 그린 그림을 해 쪽으로 60번 끌어 모아 더해, 풍차 · 나무 사이로 빛줄기가 쏟아지게 한다. (God rays (crepuscular rays))
- [색 보정 LUT · 색수차 · 필름 결](https://ai-techstudio.web.app/ai/t/i07.md): 3D 색 표(LUT)로 화면 색을 한 번에 노을 · 밤 · 옛날 필름으로 바꾸고, 필름 결과 「쿵!」 순간 RGB 어긋남을 얹어 분위기와 충격을 준다. (Color grading LUT (3D lookup table))
- [매트캡 (MatCap)](https://ai-techstudio.web.app/ai/t/i09.md): 빛 계산 없이 둥근 그림 한 장에서 색을 읽어, 도자기 · 젤리 · 금처럼 보이는 아주 가벼운 재질을 만든다. (MatCap (material capture))
- [테두리 빛 (rim light, 프레넬)](https://ai-techstudio.web.app/ai/t/i10.md): 카메라에서 옆으로 비껴 보이는 가장자리일수록 빛을 더해, 어두운 배경에서도 캐릭터 윤곽이 또렷하게 떠 보이게 한다. (Rim light (Fresnel rim))
- [만화 망점 · 해칭 셰이더](https://ai-techstudio.web.app/ai/t/i11.md): 빛 받는 정도에 따라 그늘을 화면 격자의 점 크기나 빗금 겹 수로 바꿔, 만화책 망점 · 연필 해칭 그림처럼 그린다. (Halftone shader)
- [디졸브 (잡음으로 사라짐)](https://ai-techstudio.web.app/ai/t/i12.md): 잡음 값이 진행도보다 작은 곳부터 조각을 버리고 경계를 금빛으로 빛내, 물체가 타들어 가듯 사라졌다 다시 나타나게 한다. (Dissolve shader (noise threshold + discard))
- [정점 흔들기 (바람 · 물결)](https://ai-techstudio.web.app/ai/t/i13.md): 정점 셰이더에서 시간 · 위치로 만든 sin 물결만큼 정점을 밀어, 깃발 · 나무가 바람에 일렁이게 한다 — CPU 계산 없이. (Vertex displacement (wind sway))
- [평면 반사 (Reflector)](https://ai-techstudio.web.app/ai/t/i14.md): 바닥 아래에서 본 장면을 한 장 더 그려 바닥에 붙여, 얼음 · 거울 · 젖은 바닥에 물체가 거꾸로 비치게 한다. (Planar reflection)
- [접촉 그림자 (Contact shadow)](https://ai-techstudio.web.app/ai/t/i15.md): 바닥 아래에서 위로 깊이를 한 장 찍어 두 번 흐려 바닥에 깔아, 발밑에 부드러운 그림자가 생기고 높이 뛰면 옅어지게 한다. (Contact shadow (baked depth shadow))
- [절차 마모 재질 (CG 티 없애기)](https://ai-techstudio.web.app/ai/t/i84.md): 미리 구운 3D 잡음 텍스처 하나로 거칠기 얼룩 · 색 차이 · 그을음 줄 · 열 변색을 물체 좌표에 입혀, 플라스틱 같은 CG 금속을 실제 쓰던 금속처럼 만든다. (Procedural wear / weathering material)
- [홀로그램 · 주사선 셰이더](https://ai-techstudio.web.app/ai/t/i221.md): 푸른 빛을 더하기 섞기로 그리고 가장자리 빛 · 흐르는 주사선 · 깜박임 · 가로 찢김을 얹어, 투사기 위에 뜬 홀로그램처럼 보이게 한다. (Hologram shader)
- [툰 물 (기슭 거품 테)](https://ai-techstudio.web.app/ai/t/i222.md): 물 셰이더가 섬 높이 식을 그대로 알아 물 깊이를 구해, 깊이로 색 3단을 끊고 기슭 거품 띠 · 배 뒤 V자 물거품 · 바위 둘레 고리를 그린다. (Toon water (stylized water))
- [대기 산란 하늘](https://ai-techstudio.web.app/ai/t/i224.md): 레일리 · 미 산란 하늘(three Sky)에 해 높이 하나를 넣어, 낮 파랑 → 노을 → 땅거미 → 별 · 은하수 밤이 저절로 이어지게 한다. (Atmospheric scattering sky (Preetham model))
- [절차 뭉게구름](https://ai-techstudio.web.app/ai/t/i225.md): 잡음(fbm)을 문턱으로 잘라 구름 모양을 만들고 해 쪽으로 한 번 더 읽어 명암을 넣어, 몽실몽실 흘러가는 구름 두 겹을 그린다. (Procedural clouds (fbm threshold))
- [선택 강조 맥박 테](https://ai-techstudio.web.app/ai/t/i226.md): 고른 물체만 조금 큰 뒷면 껍데기 테와 바깥 빛무리를 숨 쉬듯 키웠다 줄여, 「지금 누를 것」이 판 위에서 바로 보이게 한다. (Selection highlight (pulsing outline))
- [삼면 투영 무늬 (triplanar)](https://ai-techstudio.web.app/ai/t/i229.md): UV 대신 물체 좌표의 세 평면(yz · xz · xy)에 무늬를 투영하고 법선 방향으로 섞어, 어떤 모양에도 무늬가 늘어나거나 이음새 없이 고르게 덮는다. (Triplanar mapping)
- [시차 차폐 매핑 (POM)](https://ai-techstudio.web.app/ai/t/i230.md): 평평한 판에서 눈길을 따라 높이 그림 속으로 광선을 한 걸음씩 걸어 들어가 닿은 곳의 색을 읽어, 벽돌 · 타일이 진짜로 움푹 파여 보이고 스스로 그림자까지 진다. (Parallax occlusion mapping (POM))
- [가짜 방 창문 (interior mapping)](https://ai-techstudio.web.app/ai/t/i231.md): 평평한 벽의 창 칸마다 눈길을 상자 모양 가짜 방 속으로 쏘아 천장 · 바닥 · 옆벽 · 뒷벽 중 먼저 닿는 곳을 칠해, 모델 없이 창마다 진짜 방이 보이는 건물을 만든다. (Interior mapping)
- [디더링 화풍 (Bayer · 1비트)](https://ai-techstudio.web.app/ai/t/i237.md): 3D 장면을 낮은 해상도로 그려 밝기를 구한 뒤 8×8 Bayer 문턱 표와 비교해 두 색 점으로 바꿔, 흑백 점 밀도로 명암을 그리는 1비트 그림체를 만든다. (Ordered dithering (Bayer matrix))
- [아스키 렌더](https://ai-techstudio.web.app/ai/t/i238.md): 3D 장면을 글자 칸 크기로 작게 그려 칸마다 밝기를 글자 사다리( . : - = + * # % @ )로 바꾸고, 밝기 경계는 기울기 방향에 맞춘 사선 글자로 그려 장면을 글자로 보여 준다. (ASCII art shader)
- [저해상 3D 도트 + 1px 외곽선](https://ai-techstudio.web.app/ai/t/i239.md): 3D 장면을 화면의 1/4 해상도로 그려 가까운 픽셀 그대로 크게 늘리고, 깊이 차이로 1px 어두운 외곽선 · 법선 차이로 모서리 밝힘을 넣어 도트 그림 같은 3D 를 만든다. (Low-res pixel-art 3D (pixelation))
- [셰이더 전환 (잡음 녹기 · 도트 녹기)](https://ai-techstudio.web.app/ai/t/i243.md): 두 장면 그림을 화면 셰이더 하나에서 진행도 p 로 갈아 끼워, 잡음 녹기(불탄 테) · 도트 녹기 · 시계 쓸기 · 동그라미 열기로 장면을 넘긴다. (Shader transition (gl-transitions style))
- [별 하늘 (실제 등급 · B-V 색 · 반짝임)](https://ai-techstudio.web.app/ai/t/i522.md): 별 6만 개를 점 하나씩 — 어두운 별일수록 많은 등급 분포로 크기 · 밝기를, B-V 색지수 → 온도 → 흑체 색으로 색을, 별마다 다른 사인으로 반짝임을 준다. (Starfield (magnitude distribution))
- [은하수 띠 (먼지 줄 · 밝은 팽대부)](https://ai-techstudio.web.app/ai/t/i523.md): 하늘 방향을 은하 좌표로 돌려 위도로 띠를 만들고, 미리 구운 잡음으로 별구름 · 가운데 먼지 줄(파랑을 더 먹어 붉게)을 그려 은하수를 띄운다. (Milky Way band (galactic coordinates))
- [부피 성운 (레이마칭 · 별빛 산란)](https://ai-techstudio.web.app/ai/t/i524.md): 상자 안을 빛줄로 최대 48걸음 지나며 3D 잡음 텍스처로 밀도를 읽어 빛을 모으고 가림을 곱해, 가운데 별이 비추는 부피 성운을 그린다. (Volumetric ray marching)
- [나선 은하 (입자 20만 · 밀도파 팔)](https://ai-techstudio.web.app/ai/t/i525.md): 별 20만 개가 반지름마다 조금씩 돌아간 타원 궤도를 정점 셰이더에서 돌아, 타원이 몰리는 곳에 저절로 나선 팔이 생기는 은하를 만든다. (Density wave theory (spiral arms))
- [행성 대기 (림 산란 · 낮밤 경계 · 구름 · 도시 불빛)](https://ai-techstudio.web.app/ai/t/i526.md): 대기 껍질 구에서 빛줄을 12걸음 지나며 레일리(파랑) · 미(해 쪽 빛무리) 산란을 모아 행성 테두리가 빛나게 하고, 땅 · 구름 · 밤쪽 도시 불빛은 3D 잡음으로 그린다. (Atmospheric scattering (single scattering))
- [고리 행성 (고리 그림자 · 행성 그림자)](https://ai-techstudio.web.app/ai/t/i527.md): 그림자 지도 없이 — 행성 픽셀에서 해 쪽으로 쏜 빛줄이 고리 면과 만나는 반지름의 밀도로 고리 그림자를, 고리 픽셀에서 쏜 빛줄이 행성에 닿으면 행성 그림자를 계산한다. (Analytic shadows (ray-plane / ray-sphere))
- [태양 표면 · 코로나 · 홍염](https://ai-techstudio.web.app/ai/t/i528.md): 흐르는 3D 잡음으로 태양 표면 쌀알 무늬 · 중위도 흑점 · 가장자리 어둡게(주연 감광)를 칠하고, 둘레 판에 줄무늬 코로나 · 붉은 채층 · 고리 홍염을 그린다. (Solar granulation)
- [블랙홀 (중력 렌즈 · 강착 원반 도플러)](https://ai-techstudio.web.app/ai/t/i529.md): 픽셀마다 빛줄을 슈바르츠실트 근사 가속도로 휘며 96걸음 따라가, 원반 면을 지날 때 색을 모으고 남은 빛은 휜 방향의 하늘을 읽어 블랙홀을 그린다. (Gravitational lensing (ray bending))
- [워프 · 초공간 이동](https://ai-techstudio.web.app/ai/t/i530.md): 별을 인스턴싱 사각형으로 두고 머리 · 꼬리를 화면에 투영해 그 사이를 띠로 늘려 속도만큼 빛줄로 — 시야각을 넓히고 터널을 열었다가 번쩍 빠져나온다. (Warp / hyperspace streaks)
- [소행성대 인스턴싱 + 렌즈 플레어](https://ai-techstudio.web.app/ai/t/i531.md): 잡음 · 크레이터로 빚은 바위 5종을 InstancedMesh 로 4천 개 띄우고, 바위마다 회전은 정점 셰이더(축 · 빠르기 속성)로 CPU 0 — 해를 보면 렌즈 플레어. (InstancedMesh asteroid field)
- [혜성 (이온 꼬리 · 먼지 꼬리)](https://ai-techstudio.web.app/ai/t/i532.md): 케플러 궤도를 도는 혜성에서 입자 두 종류를 뿜어 — 이온은 해 반대쪽으로 곧게 빠르게, 먼지는 복사압 β 만큼 약해진 중력으로 궤도 뒤로 휘게 해 두 꼬리를 만든다. (Comet ion tail / dust tail)
- [오로라 (커튼 · 호수 반사)](https://ai-techstudio.web.app/ai/t/i533.md): 하늘을 가로지르며 굽이치는 띠 메시에 잡음을 가로로만 읽어 세로 빛줄을 넣고, 장면을 위아래 뒤집은 복사본 위에 반투명 호수를 덮어 오로라와 호수 반사를 만든다. (Aurora curtain (ribbon mesh))
- [초신성 · 충격파 고리](https://ai-techstudio.web.app/ai/t/i534.md): 부풀던 별이 번쩍 → 테두리가 밝은 충격파 껍질과 3D 잡음 필라멘트가 감속하며 퍼지고, 충격파가 적도 고리에 닿으면 구슬 빛이 켜지며 남은 펄서가 빛줄을 돌린다. (Supernova explosion sequence)
- [시차 별층 (패럴랙스 스크롤 · 성간 먼지)](https://ai-techstudio.web.app/ai/t/i535.md): 성운 · 먼 별 · 별 · 먼지 구름 · 밝은 별 · 가까운 바위 6층을 미리 그려 두고 멀수록 느리게 옮기기만 해서, 2D 화면에 깊이를 준다. (Parallax scrolling)
- [휘는 지평선 (굴러가는 세계)](https://ai-techstudio.web.app/ai/t/i537.md): 정점 셰이더에서 카메라와의 수평 거리² 만큼 높이를 내려, 평평한 맵이 둥근 작은 행성처럼 굴러가 보이게 한다 — 맵 · 충돌은 평평한 그대로. (Curved world shader (vertex bend))
- [하루 시간 흐름 (해 · 하늘색)](https://ai-techstudio.web.app/ai/t/i431.md): 시각(0~24시) 하나로 해 방향을 정하고, 빛 색 · 세기 · 그림자 길이 · 하늘색 · 창 불빛을 함께 바꿔 하루가 흐르게 한다. (Day-night cycle)
- [밤 장면 (어둠 속 빛나는 것만)](https://ai-techstudio.web.app/ai/t/i432.md): 장면 전체를 아주 어둡게 깔고 켜진 창 · 가로등 · 반딧불만 밝게 해, 어둠과 빛의 대비로 밤 분위기를 만든다. (Night scene lighting (high contrast))
- [실내 조명 (창 빛 · 전등)](https://ai-techstudio.web.app/ai/t/i433.md): 창으로 드는 해 그림자 · 보이는 빛 기둥 · 그 안을 떠도는 먼지 · 따뜻한 전등 · 바닥에서 튀는 반사광 흉내를 겹쳐 아늑한 방을 밝힌다. (Interior lighting (window light + practical lamp))
- [날씨 (비 · 눈 · 안개 바꾸기)](https://ai-techstudio.web.app/ai/t/i434.md): 맑음 · 비 · 눈 · 안개 네 묶음 값(해 세기 · 하늘색 · 안개 짙기)을 부드럽게 섞고 입자 · 젖은 바닥 · 웅덩이 · 눈 쌓임을 함께 바꿔 날씨를 바꾼다. (Weather system (blended presets))
- [노드 재질 (TSL — 코드로 셰이더 짜기)](https://ai-techstudio.web.app/ai/t/i494.md): 셰이더를 GLSL 글자 대신 TSL 함수 조립으로 짜서, 같은 재질 코드가 WebGPU 와 WebGL2 에서 모두 돌게 한다. (TSL (Three.js Shading Language))
- [GPU 계산 입자 (수십만 개)](https://ai-techstudio.web.app/ai/t/i495.md): 입자 수십만 개의 위치 · 속도를 계산 셰이더로 GPU 에서 바꿔, CPU 는 명령 두 줄만 보내고도 눈보라 · 불꽃놀이를 띄운다. (GPU compute particles)
- [화면 반사 (SSR)](https://ai-techstudio.web.app/ai/t/i496.md): 화면에 이미 그려진 색 · 깊이 · 법선만으로 반사 광선을 화면 위에서 걸어, 젖은 바닥 웅덩이에 횃불 · 기둥 · 푸른 문이 비치게 한다 (WebGPU · TSL). (Screen-space reflections (SSR))

## 3D 모델 · 캐릭터 — 블렌더 없이 코드로 — 나무 · 바위 · 캐릭터 · 뼈대 · 걷기 · 표정
- [보이는 선 · 숨은 선 · 굵은 선](https://ai-techstudio.web.app/ai/t/u31.md): 모서리를 뽑아 보이는 선은 실선, 가려진 선은 점선, 강조할 선은 굵은 선으로 그려 교과서 입체 그림처럼 보이게 한다. (Hidden line rendering (EdgesGeometry))
- [3D 입체 글씨 (글꼴 윤곽 돌출 · 모서리 깎기)](https://ai-techstudio.web.app/ai/t/i17.md): 캔버스에 그린 글자의 윤곽을 마칭 스퀘어로 따고(구멍 포함) 단순화해, 돌출 + 모서리 깎기로 진짜 두께 있는 입체 글씨를 만든다. (Glyph outline extrusion (ExtrudeGeometry with bevel))
- [복셀 렌더 (덩어리 메시)](https://ai-techstudio.web.app/ai/t/i241.md): 블록 세계에서 보이는 면만 골라 같은 색 · 같은 그늘끼리 큰 네모로 합치고 꼭짓점 구석 그늘을 넣어, 한 메시로 가볍게 그린다. (Greedy meshing (voxel))
- [동화 뭉게 나무 (구 법선 잎 · 층별 바람)](https://ai-techstudio.web.app/ai/t/i538.md): 잎 카드의 법선을 덩이를 감싸는 구의 법선으로 바꾸고 줄기 · 가지 · 잎을 다른 빠르기로 흔들어, 동화풍 뭉게 나무를 만든다. (Spherical normals for foliage (normal transfer))
- [GPU 경로 추적 (사진 같은 렌더 · 샘플 쌓기)](https://ai-techstudio.web.app/ai/t/i545.md): 픽셀마다 빛줄을 쏘아 여러 번 튀는 길을 따라가고 샘플을 쌓아 평균 — 반사 · 굴절 · 부드러운 그림자가 저절로, 블렌더 없이 사진 같은 한 장. (Path tracing (progressive, Monte Carlo))
- [노이즈 제거 (적은 샘플 → 깨끗하게 · OIDN)](https://ai-techstudio.web.app/ai/t/i546.md): 픽셀당 몇 샘플뿐인 자글자글한 경로 추적 그림을 법선 · 깊이 · 바탕색 길잡이로 걸러 — 모서리와 무늬는 지키고 노이즈만 지워 렌더 시간을 몇 분의 일로. (Denoising (Intel Open Image Denoise, OIDN))
- [경로 추적 영상 굽기 (프레임마다 수렴 → mp4)](https://ai-techstudio.web.app/ai/t/i547.md): 시각 t 를 프레임마다 정확히 놓고 샘플을 다 모아 찍은 뒤 다음 프레임 — 헤드리스 크롬 + ffmpeg 로 블렌더 없이 사진 같은 설명 영상을 mp4 로. (Offline frame-by-frame rendering (deterministic time))
- [가지가 자라는 나무 (공간 군체화)](https://ai-techstudio.web.app/ai/t/i444.md): 잎이 될 점 구름을 뿌려 두고 가장 가까운 가지 끝을 그 점 쪽으로 한 마디씩 뻗게 해, 자연스럽게 갈라지는 나무를 키운다. (Space colonization algorithm (tree growth))
- [L-시스템 나무 · 풀 (규칙으로 그리기)](https://ai-techstudio.web.app/ai/t/i445.md): A → F[&A]/[&A]/[&A] 같은 바꿔 쓰기 규칙을 되풀이해 글자열을 만들고, 거북이가 그 글자대로 걸어 나무 · 고사리 · 산호를 그린다. (L-system (Lindenmayer system))
- [SDF 조각 모델링 (부드럽게 합치기)](https://ai-techstudio.web.app/ai/t/i446.md): 구 · 캡슐 · 타원체의 거리 함수를 부드럽게 녹여 붙인 뒤 메시로 바꿔, 점토로 빚은 듯한 캐릭터를 코드로 만든다. (SDF (signed distance field))
- [메타볼 몸 (말랑한 덩어리)](https://ai-techstudio.web.app/ai/t/i447.md): 공마다 퍼지는 값을 격자에 더하고 일정 값 면을 마칭 큐브로 매 프레임 뽑아, 가까운 공끼리 녹아 붙는 말랑한 슬라임 몸을 만든다. (Metaballs (implicit surface))
- [서브디비전 (각진 모양 → 매끈하게)](https://ai-techstudio.web.app/ai/t/i448.md): 각진 상자 틀을 Catmull-Clark 로 한 단계씩 나눠 매끈한 곡면으로 녹이고, 표시한 모서리만 날카롭게 남긴다. (Catmull-Clark subdivision)
- [스윕 · 로프트 (곡선 따라 단면 끌기)](https://ai-techstudio.web.app/ai/t/i449.md): 단면 모양을 곡선을 따라 끌고 가며 크기 · 비틀림 · 납작함을 바꿔, 뿔 · 덩굴 · 달팽이 껍데기 같은 관 모양을 만든다. (Sweep / loft along a curve)
- [선반 회전체 + 장식 (윤곽선 하나로)](https://ai-techstudio.web.app/ai/t/i450.md): 반쪽 윤곽선 하나를 직선 · 둥근 모서리 · 원호로 그려 축으로 돌려, 체스 말 · 화분 · 꽃병을 홈 · 테 · 받침까지 한 번에 만든다. (Lathe / surface of revolution)
- [깎고 붙이기 (CSG 불리언)](https://ai-techstudio.web.app/ai/t/i451.md): 모양을 다각형 목록으로 바꿔 BSP 나무로 서로 잘라, 합치기 · 빼기 · 겹친 곳만 남기기로 창문 구멍 난 집과 둥근 주사위를 만든다. (CSG (Constructive Solid Geometry) boolean)
- [바위 · 돌 절차 생성](https://ai-techstudio.web.app/ai/t/i452.md): 공을 찌그리고 → 평면으로 깎고 → 잡음으로 울퉁불퉁하게 → 위쪽에 이끼를 얹어, 씨앗만 바꿔 수십 가지 바위를 만든다. (Procedural rock generation)
- [정점 구석 그늘 굽기 (AO 를 미리)](https://ai-techstudio.web.app/ai/t/i453.md): 정점마다 반구 방향으로 광선 수십 개를 쏴 가려진 정도를 미리 계산해 정점 색에 구워, 실행 비용 0 으로 구석 · 맞닿은 곳을 어둡게 한다. (Baked per-vertex ambient occlusion)
- [표면에 디테일 흩뿌리기 (풀 · 꽃 · 자갈)](https://ai-techstudio.web.app/ai/t/i455.md): 섬 표면 삼각형을 넓이에 비례해 무작위로 골라 경사 · 높이 규칙대로 풀잎 · 꽃 · 자갈을 인스턴스로 흩뿌려, 들판이 저절로 채워지게 한다. (Surface scattering (area-weighted sampling))
- [코드로 뼈대 만들기 (Bone · SkinnedMesh)](https://ai-techstudio.web.app/ai/t/i456.md): 골반 → 척추 → 머리 · 팔 · 다리 뼈 16개를 코드로 하나씩 세우고 메시에 묶어, 뼈를 돌리면 살이 따라 움직이게 한다. (Skeletal rigging (Bone · Skeleton · SkinnedMesh))
- [자동 스킨 가중치 (뼈까지 거리)](https://ai-techstudio.web.app/ai/t/i457.md): 정점마다 뼈 막대까지 거리로 가중치를 주고 표면 이웃과 열 번 평균 내 퍼뜨린 뒤 큰 넷만 남겨, 팔꿈치 · 무릎이 접혀도 덜 찌그러지게 한다. (Automatic skin weights (distance-based))
- [절차 걷기 · 뛰기 (애니메이션 파일 없이)](https://ai-techstudio.web.app/ai/t/i458.md): 속도 하나에서 걸음 폭 · 박자 · 팔 흔들기 · 골반 오르내림을 식으로 계산하고 발은 두 뼈 IK 로 놓아, 애니메이션 파일 없이 가만히 → 걷기 → 뛰기가 이어진다. (Procedural locomotion (gait cycle))
- [두 뼈 IK (팔 · 다리가 목표를 잡기)](https://ai-techstudio.web.app/ai/t/i459.md): 위팔 · 아래팔 길이와 목표 위치만으로 어깨 · 팔꿈치 각도를 계산해, 손이 목표를 따라가게 한다. (Two-bone IK)
- [사슬 IK (FABRIK — 꼬리 · 촉수 · 목)](https://ai-techstudio.web.app/ai/t/i460.md): 관절 사슬을 끝 → 뿌리, 뿌리 → 끝으로 번갈아 당기는 FABRIK 로 촉수 끝이 목표를 따라가게 하고, 관절마다 굽는 각도를 제한한다. (FABRIK (Forward And Backward Reaching IK))
- [시선 따라가기 (머리 · 눈 돌리기 제한)](https://ai-techstudio.web.app/ai/t/i461.md): 목표를 볼 때 눈이 먼저 빠르게 돌고 머리 · 목은 각도 제한 안에서 천천히 뒤따르며, 크게 돌 때 깜빡여 캐릭터가 살아 있어 보이게 한다. (Look-at with constraints (head · eye tracking))
- [흔들리는 뼈 (귀 · 머리카락 · 꼬리 2차 움직임)](https://ai-techstudio.web.app/ai/t/i462.md): 귀 · 머리카락 · 꼬리 뼈의 끝점을 베를레 점으로 따로 움직여 스프링으로 제자리에 당기고, 그 방향으로 뼈를 돌려 몸이 멈춰도 출렁이게 한다. (Jiggle bones (secondary motion))
- [표정 모프 (눈 감기 · 웃음 · 놀람)](https://ai-techstudio.web.app/ai/t/i463.md): 같은 얼굴의 변형 모양 6가지(깜빡 · 웃음 · 놀람 · 화남 · 아 · 오)를 모프 타깃으로 만들어 비율로 섞어, 표정과 말하는 입을 움직인다. (Morph targets (blend shapes · shape keys))
- [애니메이션 섞기 (가만히 ↔ 걷기 ↔ 뛰기)](https://ai-techstudio.web.app/ai/t/i464.md): 코드로 만든 가만히 · 걷기 · 뛰기 클립 셋을 AnimationMixer 로 함께 틀고 속도에 따라 가중치를 섞되, 걷기 ↔ 뛰기 발 박자를 맞춘다. (Animation blending (blend tree by speed))
- [발 땅에 붙이기 (울퉁불퉁한 지형)](https://ai-techstudio.web.app/ai/t/i465.md): 발 아래로 광선을 쏴 땅 높이를 재고 다리 IK 와 골반 높이를 맞춰, 계단 · 언덕에서도 발이 뜨거나 묻히지 않게 한다. (Foot IK / foot placement on uneven terrain)
- [래그돌 흉내 (넘어지는 몸)](https://ai-techstudio.web.app/ai/t/i466.md): 몸의 뼈 끝 · 관절을 베를레 점으로 바꾸고 점 사이 거리 제약을 되풀이해 맞춰, 공에 맞으면 흐물흐물 넘어졌다가 원래 자세로 섞으며 일어나게 한다. (Ragdoll (Verlet particles + distance constraints))
- [무료 모델 가져와 쓰기 (CC0 GLB · 애니메이션)](https://ai-techstudio.web.app/ai/t/i467.md): Quaternius 같은 CC0 GLB 모델을 GLTFLoader 로 불러와 클립을 바꿔 틀고, 재질 색을 바꾸고, 머리 · 꼬리 뼈에 모자 · 깃발을 붙인다. (GLTFLoader (glTF 2.0 / GLB))
- [실사 PBR 텍스처 (무료 CC0 스캔 재질)](https://ai-techstudio.web.app/ai/t/i474.md): Poly Haven 사진 스캔 재질의 색 · 법선 · ARM(AO · 거칠기 · 금속) 지도를 입혀, 같은 벽 · 바닥 · 상자 · 기둥이 단색에서 실사로 바뀌는 과정을 보여 준다. (PBR texture set (albedo · normal · ARM))
- [HDRI 환경 빛 · 반사](https://ai-techstudio.web.app/ai/t/i475.md): 실제 사진관 빛을 담은 HDR 사진 한 장을 PMREM 으로 구워 조명과 반사를 함께 맡겨, 크롬 · 금 · 유리가 진짜처럼 보이게 한다. (HDRI image-based lighting (IBL))
- [FPS 1인칭 무기 연출](https://ai-techstudio.web.app/ai/t/i476.md): 카메라 자식으로 단 무기에 걸음 8자 흔들림 · 숨 · 조준 확대 · 반동 스프링 · 섬광을 겹쳐, 1인칭 사격의 손맛을 낸다. (First-person viewmodel (weapon sway / bob))
- [쿼터뷰 던전 조명 (횃불 · 그림자 · 안개)](https://ai-techstudio.web.app/ai/t/i477.md): 내려다보는 카메라와 아주 어두운 바탕 위에 일렁이는 횃불 점광원 · 그림자 하나 · 같은 색 안개로, 어둠 속 빛이 주인공인 던전을 만든다. (Isometric / three-quarter view camera)
- [데칼 (글자 · 경고 표시 · 총알 자국)](https://ai-techstudio.web.app/ai/t/i479.md): 물체 표면 모양을 따라 잘라 낸 그림 조각(DecalGeometry)을 붙여, 경고 스티커 · 일련번호 · 긁힘 · 그을음 · 탄흔을 덧입힌다. (Decal (projected decal))
- [수천 캐릭터 군중 (구운 뼈 애니메이션 텍스처)](https://ai-techstudio.web.app/ai/t/i498.md): 뼈 애니메이션을 프레임마다 뼈 행렬 텍스처 한 장에 구워 두고, 정점 셰이더가 사람마다 다른 클립 · 박자로 읽어 스키닝해 수천 명을 그리기 한 번으로 움직인다. (Baked animation texture (bone-matrix VAT, GPU crowd skinning))

## 이펙트 · 연출 — 마법 · 입자 · 손맛 · 카메라 · 움직임으로 순간을 극적으로
- [스프라이트 글씨 · 표시](https://ai-techstudio.web.app/ai/t/u35.md): 글씨 · 하트 · Z 를 캔버스에 그려 Sprite 로 띄워서, 카메라가 어디로 돌아도 늘 정면으로 보이는 점수 · 표시를 만든다. (Billboard sprite (THREE.Sprite))
- [인스턴싱 (InstancedMesh)](https://ai-techstudio.web.app/ai/t/u36.md): 같은 모양 수천 개를 InstancedMesh 하나로 묶고 행렬 · 색만 칸마다 넣어서, 관중 4000명을 그리기 호출 2번으로 그리고 파도타기도 행렬만 바꿔 움직인다. (GPU instancing (THREE.InstancedMesh))
- [만화 연출 층 (DOM)](https://ai-techstudio.web.app/ai/t/u38.md): 3D 판 위에 HTML 층을 하나 덮고 CSS 로 집중선 · 번쩍 · 컷인 띠 · 별 터짐 글자 · 꽃가루를 띄워서, 결정적 순간을 만화처럼 크게 보여 준다. (DOM overlay effects (CSS animation))
- [도장 찍기 연출 (쾅 · 흔들림)](https://ai-techstudio.web.app/ai/t/u39.md): 도장을 크게 · 흐리게 위에서 0.32초에 내려찍고 닿는 순간 살짝 눌림 · 종이 흔들림 · 잉크 번짐을 붙여서, 판정이 「쾅」 하고 박힌다. (Stamp slam animation)
- [비대칭 카메라 (off-axis 투영)](https://ai-techstudio.web.app/ai/t/u40.md): 카메라는 그대로 두고 투영 중심만 setViewOffset 으로 옮겨서, 위 HUD · 아래 단추 · 오른쪽 패널에 가린 화면에서도 판이 남은 빈 자리 가운데에 온다. (Off-axis projection (lens shift))
- [화면에 꼭 맞는 카메라 거리](https://ai-techstudio.web.app/ai/t/u41.md): 판 모서리 8점을 화면에 투영해 95% 틀 안에 드는지 보고 카메라 거리를 반씩 좁혀서(이분 탐색), 판 크기 · 화면 비율이 바뀌어도 판이 꽉 차게 맞춘다. (Fit camera to bounds (binary search))
- [여러 화면 동시에 (정사영 카메라 여럿)](https://ai-techstudio.web.app/ai/t/u43.md): 렌더러 한 대로 화면을 칸으로 나눠 setViewport · setScissor 로 칸마다 다른 카메라를 그려서, 한 3D 물체를 원근 큰 화면 + 정면 · 옆 · 위 정사영 작은 창으로 나란히 보여 준다. (Multiple viewports (scissor test))
- [주사위 던지기 연출](https://ai-techstudio.web.app/ai/t/u47.md): 나올 눈을 먼저 정해 두고, 그 눈이 위로 오는 회전을 목표로 포물선 · 통통 세 번 튀기 · 남은 회전 풀기를 겹쳐, 진짜 굴린 듯 정한 눈에 멈추게 한다. (Predetermined dice roll (scripted outcome))
- [화면 전환 효과 (카드가 화면으로 커지기)](https://ai-techstudio.web.app/ai/t/i23.md): 누른 카드의 자리 · 크기 · 모서리를 화면 전체로 이어 키우고 나머지는 옅게 사라지게 해서, 메뉴에서 게임으로 화면이 툭 바뀌지 않고 이어진다. (Shared element transition)
- [SDF 레이마칭](https://ai-techstudio.web.app/ai/t/i56.md): 메시 없이 화면 사각형 하나의 셰이더에서 거리 함수로 장면을 정의하고 광선을 한 걸음씩 진행시켜서, 매끈한 도형과 녹아 붙는 합 · 교 · 차를 그린다. (SDF raymarching (sphere tracing))
- [부피 불 · 연기 · 구름](https://ai-techstudio.web.app/ai/t/i57.md): 3D 잡음으로 만든 밀도를 화면 픽셀마다 광선으로 40걸음 훑으며 빛을 모아, 속이 꽉 찬 불 · 구름을 그린다. (Volumetric ray marching)
- [2D 불 셰이더](https://ai-techstudio.web.app/ai/t/i58.md): 위로 흐르는 잡음을 불꽃 모양으로 깎고 밝기에 따라 색 띠를 입혀, 판 하나로 일렁이는 불을 만든다. (Procedural 2D fire shader)
- [플립북 (스프라이트 시트)](https://ai-techstudio.web.app/ai/t/i59.md): 폭발 그림 16칸을 한 장에 모아 두고 시간에 따라 칸을 넘겨, 계산 없이 화려한 폭발 · 연기를 싸게 보여 준다. (Flipbook animation (sprite sheet))
- [충격파 화면 왜곡](https://ai-techstudio.web.app/ai/t/i60.md): 장면을 텍스처로 먼저 그리고 퍼지는 고리 띠 안의 픽셀만 바깥쪽으로 밀어 읽어, 터지는 순간 화면이 출렁이게 한다. (Shockwave distortion (screen-space))
- [아지랑이 (heat haze)](https://ai-techstudio.web.app/ai/t/i61.md): 장면을 텍스처로 그린 뒤 불 위 기둥 · 지평선 띠 안에서만 잡음만큼 읽는 자리를 흔들어, 뜨거운 공기가 일렁이게 한다. (Heat haze (heat distortion))
- [포털](https://ai-techstudio.web.app/ai/t/i64.md): 다른 세상을 같은 카메라로 텍스처에 그린 뒤 문 모양 판에 화면 좌표로 붙이고, 가장자리를 소용돌이치게 해 진짜 다른 곳이 보이는 문을 만든다. (Portal (render-to-texture, screen-space UV))
- [꼬리 · 리본 (궤적)](https://ai-techstudio.web.app/ai/t/i65.md): 움직이는 점의 지난 위치를 시간과 함께 모아 카메라를 보는 띠로 이어, 꼬리가 점점 가늘고 옅어지며 사라지게 한다. (Trail ribbon (motion trail))
- [글자 차례 등장 (키네틱 타이포)](https://ai-techstudio.web.app/ai/t/i90.md): 글자를 하나씩 따로 그리고 차례 지연(stagger)을 주어, 튀어 올라 통 내려앉았다가 차례로 떨어지는 움직이는 제목을 만든다. (Kinetic typography)
- [길 따라 흐르는 글자](https://ai-techstudio.web.app/ai/t/i92.md): SVG textPath 로 문장을 원 둘레 길에 얹고 시작 위치(startOffset)만 계속 바꿔, 글자가 궤도를 따라 끝없이 흐르게 한다. (SVG textPath)
- [암호 풀리는 글자 (scramble)](https://ai-techstudio.web.app/ai/t/i93.md): 칸마다 무작위 글자를 빠르게 바꾸다가 왼쪽부터 하나씩 정답으로 딸깍 고정해, 암호가 풀리는 해독 연출을 만든다. (Text scramble / decode effect)
- [숫자 굴러가기 (계기판)](https://ai-techstudio.web.app/ai/t/i94.md): 자릿수마다 숫자 띠를 세로로 굴려 값을 바꾸고, 아래 자리가 9 → 0 으로 넘어갈 때만 윗자리가 함께 돌아 받아올림이 눈에 보이게 한다. (Odometer / rolling counter)
- [도형 모핑 (모양 바꾸기)](https://ai-techstudio.web.app/ai/t/i96.md): 삼각형 · 사각형 · 오각형 · 육각형 · 원을 모두 같은 점 60개로 다시 나눠 두고, 점끼리 이어 섞어 모양이 부드럽게 바뀌게 한다. (Shape morphing (point-matched path interpolation))
- [마스크 와이프 · 원 조리개](https://ai-techstudio.web.app/ai/t/i99.md): 다음 화면을 비스듬한 띠 · 커지는 원 모양으로 잘라(clip) 그 안에만 그려, 띠가 쓸고 원이 열리며 화면이 바뀌게 한다. (Wipe transition)
- [격자 물결 (stagger grid)](https://ai-techstudio.web.app/ai/t/i101.md): 격자 칸마다 「가운데에서의 거리 × 지연」 만큼 늦게 뒤집혀, 곱셈표 칸이 물결처럼 퍼지며 답을 드러내게 한다. (Staggered grid animation (distance-based delay))
- [스프링 · 예비 동작 · 찌그러짐](https://ai-techstudio.web.app/ai/t/i102.md): 뛰기 전에 움츠리고(예비 동작), 공중에서 늘어나고, 착지 때 찌그러졌다 감쇠 스프링으로 통통 돌아오게 해 움직임에 무게와 탄력을 준다. (Squash and stretch)
- [경로 따라 움직이기 (방향 포함)](https://ai-techstudio.web.app/ai/t/i103.md): 곡선 위 점의 미분(접선)으로 진행 방향 각도를 구해, 길을 따라가는 물체가 가는 쪽으로 몸을 돌리게 한다. (Path following with tangent orientation)
- [2D 시차 층 · 무한 확대](https://ai-techstudio.web.app/ai/t/i104.md): 먼 층은 느리게 · 가까운 층은 빠르게 옮기는 2D 카메라(시차)와, 확대 배율을 10 의 거듭제곱으로 돌려 수직선을 끝없이 확대하는 방법. (Parallax scrolling)
- [휩 팬 · 줌 통과 · 매치 컷](https://ai-techstudio.web.app/ai/t/i106.md): 휙 지나가며 한 방향으로 번지는 휩 팬, 숫자 0 의 구멍으로 빨려 드는 줌 통과, 같은 자리 · 크기의 모양으로 잇는 매치 컷으로 장면을 바꾼다. (Whip pan transition)
- [움직이는 오로라 그라디언트](https://ai-techstudio.web.app/ai/t/i110.md): 색 원 여러 개를 정수 박자로 떠돌게 하고 큰 방사 그러데이션을 screen 으로 겹쳐, 이음새 없이 천천히 흐르는 오로라 배경을 만든다. (Animated mesh / aurora gradient)
- [렌즈 플레어 · 빛 새기](https://ai-techstudio.web.app/ai/t/i111.md): 밝은 빛에서 화면 가운데를 지나는 줄 위에 둥근 · 육각 고스트를 늘어놓고 가로 빛줄 · 가장자리 주황빛을 더해, 카메라 렌즈 플레어처럼 빛나게 한다. (Lens flare (ghosts along the flare axis))
- [글리치 · 주사선 · CRT](https://ai-techstudio.web.app/ai/t/i112.md): 화면을 빨강 · 초록 · 파랑 세 장으로 나눠 어긋나게 더하고 가로 띠를 찢어 밀어, 글리치를 내고 주사선 · 둥근 화면으로 옛 CRT 느낌을 더한다. (Glitch effect (RGB split + slice displacement))
- [와이어프레임에서 완성으로](https://ai-techstudio.web.app/ai/t/i114.md): 같은 모양을 면(아래 남김)과 선 뼈대(위 남김)로 두 번 그리고 자르는 평면 하나를 올려, 빛 띠가 쓸며 설계도가 입체로 차오르게 한다. (Wireframe-to-solid reveal (clipping-plane sweep))
- [데이터 애니 (막대 경주 · 자라는 차트)](https://ai-techstudio.web.app/ai/t/i116.md): 막대 너비는 CSS 트랜지션으로 자라게 하고, 순위가 바뀌면 FLIP(처음 자리 → 새 자리 차이만큼 되돌렸다 풀기)으로 줄이 미끄러지게 해 막대 경주 차트를 만든다. (Bar chart race)
- [Manim식 수식 변환](https://ai-techstudio.web.app/ai/t/i117.md): 식의 기호마다 고유 id 를 주고 단계마다 자리를 재어, 같은 기호는 새 자리로 날아가고 사라질 기호는 녹고 합쳐질 기호는 한 점으로 모이게 한다 (Manim 의 TransformMatchingTex 방식). (Equation transform (Manim TransformMatchingTex style))
- [이음새 없는 반복 고리](https://ai-techstudio.web.app/ai/t/i120.md): 모든 움직임을 시간 p(0~1)의 정수 박자 주기 함수로만 만들어, 마지막 프레임이 첫 프레임과 꼭 같아 끝없이 이어지는 반복 고리를 만든다. (Seamless loop (perfect loop))
- [생성 패턴 (흐름장 · 보로노이 · 트루쳇)](https://ai-techstudio.web.app/ai/t/i122.md): 규칙 몇 줄로 무늬를 만든다 — 흐름장 각도를 따라 흐르는 입자 선, 가장 가까운 점의 세포(보로노이), 사분원 두 개 타일을 돌려 놓는 트루쳇 미로. (Flow field)
- [스톱모션 · 2프레임에 한 번](https://ai-techstudio.web.app/ai/t/i123.md): 그리는 시간을 12fps 로 끊고 장마다 씨앗 무작위로 살짝 흔들어(boiling), 매끈한 움직임을 점토 · 종이 오리기 같은 뚝뚝 끊긴 손맛으로 바꾼다. (Stop motion / animating on twos)
- [타임라인 연출 + 프레임 효과음](https://ai-techstudio.web.app/ai/t/i127.md): 그림을 「프레임 번호의 함수」 로 만들고 장면 · 키프레임 · 효과음을 한 시간표에 두어, 재생 막대가 지나는 프레임에서 그림을 계산하고 소리를 울린다. (Timeline-driven animation (frame as a function))
- [입자 방출기 (수명 곡선)](https://ai-techstudio.web.app/ai/t/i170.md): 입자를 점 · 원 · 원뿔 · 구 모양에서 뿜고 수명 동안 크기 · 색 · 투명도를 곡선으로 바꿔서, 모든 마법 효과의 바탕이 되는 입자 방출기를 만든다. (Particle emitter (emission shape))
- [층 쌓기 (핵 · 빛무리 · 불티 · 연기)](https://ai-techstudio.web.app/ai/t/i171.md): 마법 하나를 밝은 핵 · 큰 빛무리 · 튀는 불티 · 꼬리 연기 · 바닥 빛 다섯 층으로 나눠 따로 움직여서, 효과가 한 덩어리가 아니라 풍성하게 보인다. (VFX layering (core · glow · sparks · smoke · ground light))
- [흐르는 무늬 메시 (UV 스크롤)](https://ai-techstudio.web.app/ai/t/i172.md): 끝이 열린 원통 · 원뿔 · 원판 메시에 잡음 무늬를 UV 를 따라 흘려서, 입자 없이도 소용돌이 기둥 · 불기둥 · 빔을 화려하게 만든다. (UV scrolling (panning) shader)
- [컬 잡음 소용돌이 (curl noise)](https://ai-techstudio.web.app/ai/t/i174.md): 입자를 무작위로 흔드는 대신 컬 잡음(소용돌이만 있는 흐름) 위에 띄워서, 연기 · 치유 오라가 지글거리지 않고 부드럽게 휘감기며 흐른다. (Curl noise)
- [부드러운 입자 (soft particles)](https://ai-techstudio.web.app/ai/t/i175.md): 장면 깊이를 먼저 그려 두고 입자 깊이와 비교해서, 연기 · 안개 입자가 바닥 · 기둥과 만나는 곳의 딱 잘린 선을 부드럽게 지운다. (Soft particles (depth fade))
- [충격 고리 · 땅 파동](https://ai-techstudio.web.app/ai/t/i178.md): 맞은 자리 바닥에 퍼지는 빛 고리 두 개와 식어 가는 그을음 자국을 붙여서, 폭발 · 착지의 「쾅」이 바닥까지 전해진다. (Shockwave ring)
- [마법진 (돌아가는 룬 고리)](https://ai-techstudio.web.app/ai/t/i180.md): 룬 무늬 판 세 겹을 바닥에 눕혀 각도로 그려지게 하고 반대로 돌리다가, 차오르면 흐르는 무늬 빛기둥이 솟게 해서 시전 준비를 보여 준다. (Magic circle (rotating rune rings))
- [광역 표시 (바닥 범위 원)](https://ai-techstudio.web.app/ai/t/i181.md): 떨어질 곳을 바닥 원 · 부채꼴이 가장자리부터 안쪽까지 차오르며 미리 보여 주고, 다 차면 그 범위에 터지게 해서 피하거나 노릴 시간을 준다. (AoE telegraph (area indicator))
- [연쇄 번개 (튀는 번개)](https://ai-techstudio.web.app/ai/t/i184.md): 번개를 가장 가까운 대상 순서로 이어 튀게 하고 중간점을 흔드는 지그재그로 그려서, 맞을 때마다 번쩍 · 불티 · 바닥 빛이 따라오는 연쇄 번개를 만든다. (Chain lightning)
- [비전 미사일 (유도 탄)](https://ai-techstudio.web.app/ai/t/i185.md): 빛 구슬 여러 개를 부채꼴로 쏜 뒤 매 프레임 목표 쪽으로 속도를 조금씩 돌려서, 휘어지며 움직이는 목표를 쫓아가 맞는 유도 미사일을 만든다. (Homing missile (steering))
- [방패 · 보호막 맞음](https://ai-techstudio.web.app/ai/t/i191.md): 반투명 구에 프레넬 테두리 · 육각 무늬를 그리고 맞은 방향을 셰이더에 넘겨서, 맞은 곳에서 육각 물결이 퍼지고 금이 갔다 아무는 보호막을 만든다. (Force field / energy shield shader)
- [시간 정지 · 왜곡 구](https://ai-techstudio.web.app/ai/t/i195.md): 장면을 먼저 텍스처로 그려 두고 구 표면에서 그 텍스처를 휘게 · 흑백으로 다시 읽어, 구 안쪽만 색이 빠지고 굴절되며 안에 든 것들이 그 자리에 멈춘다. (Screen-space refraction (scene texture))
- [VFX 그래프 · 효과 편집기](https://ai-techstudio.web.app/ai/t/i196.md): 효과를 방출량 · 속도 · 크기 · 수명 · 색조 · 중력 · 퍼짐 · 층 켬/끔 값 묶음으로 만들고 JSON 으로 저장해서, 코드를 안 고치고 조절판으로 효과를 다듬는다. (Data-driven VFX (effect presets))
- [투명 은신 (굴절 실루엣)](https://ai-techstudio.web.app/ai/t/i516.md): 몸을 뺀 배경을 먼저 텍스처로 그리고 몸 표면 방향만큼 밀어 읽어 일렁이는 투명 몸을 만들고, 발끝부터 올라가는 전기 경계로 은신을 켜고 끈다. (Refraction cloak (screen-space refraction))
- [카메라 킥 · 펀치 줌](https://ai-techstudio.web.app/ai/t/i199.md): 맞는 순간 화면 전체를 때린 쪽으로 툭 밀고 2~5% 확대했다가, 임계 감쇠 충격 곡선으로 넘침 없이 돌아오게 해 타격감을 준다. (Camera kick (screen push))
- [임팩트 프레임 (반전 번쩍)](https://ai-techstudio.web.app/ai/t/i200.md): 맞는 순간 게임 시간을 멈추고 두 프레임 동안 흑백 반전 실루엣 + 집중선을 보여 준 뒤 이어 가, 애니메이션 필살기 같은 임팩트를 낸다. (Impact frame)
- [피격 흰 번쩍](https://ai-techstudio.web.app/ai/t/i201.md): 맞은 물체의 재질만 emissive 흰색을 1 → 0 으로 0.1초 빼서 하얗게 번쩍이게 해, 어느 것이 맞았는지 한눈에 보이게 한다. (Hit flash (white flash))
- [튀어 오르는 숫자](https://ai-techstudio.web.app/ai/t/i202.md): +10 · ×2 같은 숫자가 탄성 이징으로 톡 커졌다가 떠오르며 사라지고, 크리티컬은 더 크게 · 흔들리며, 빼기는 떨며 가라앉아 점수 변화를 바로 느끼게 한다. (Floating combat text (damage numbers))
- [슬로모션 · 시간 배율 곡선](https://ai-techstudio.web.app/ai/t/i204.md): 결정적 순간 직전 남은 시간에 따라 게임 시간 배율을 0.15 까지 부드럽게 낮췄다가, 「쾅」 하는 순간 1 로 되돌려 「빨랐다 → 늘어짐 → 쾅」 의 긴장을 만든다. (Slow motion (time scale curve))
- [젤리 단추 (누름 깊이 · 출렁)](https://ai-techstudio.web.app/ai/t/i206.md): 단추를 그림자 판(아래) · 얼굴(위) 두 겹으로 두고, 누르면 얼굴이 쑥 내려가고 떼는 순간 튕겨 오르며 가로세로로 출렁이는 젤리 단추를 스프링 둘로 만든다. (Jelly button (squash-and-stretch press))
- [동전 빨려 들기 (UI 로 날아가기)](https://ai-techstudio.web.app/ai/t/i208.md): 보상 동전이 하나씩 간격을 두고 곡선으로 날아가 점수 칸에 쏙 들어가고, 들어갈 때마다 칸이 통 튀며 숫자가 오른다. (Collect-to-UI animation (coin fly))
- [착지 먼지 뭉게](https://ai-techstudio.web.app/ai/t/i214.md): 블록이 떨어지거나 친구가 폴짝 착지하는 순간 발밑 좌우로 동글동글 먼지가 굴러 나가, 「쿵」 하는 무게가 느껴진다. (Landing dust puff)
- [3D 속도선 (질주감)](https://ai-techstudio.web.app/ai/t/i216.md): 빠르게 달릴 때 카메라 둘레로 가는 빛줄이 휙휙 지나가게 해서, 속도가 오를수록 선이 길어지고 진해지며 시야도 넓어진다. (Speed lines (3D motion streaks))
- [액체 진행 막대](https://ai-techstudio.web.app/ai/t/i217.md): 진행 막대를 물이 차오르는 병 · 관으로 그려서, 값이 바뀌면 물이 출렁이며 살짝 넘쳤다 가라앉는다. (Liquid progress bar (fill gauge))
- [홀로 포일 카드](https://ai-techstudio.web.app/ai/t/i220.md): 수집 카드 위에 무지개 띠 · 반짝이 층을 color-dodge 로 겹치고 기울기에 따라 옮겨서, 기울일 때마다 빛 띠가 미끄러지는 홀로 포일을 만든다. (Holographic foil card effect)
- [따라가는 카메라 (부드러운 추적)](https://ai-techstudio.web.app/ai/t/i426.md): 카메라와 바라보는 곳을 SmoothDamp 스프링으로 따라가게 하고 목표를 가는 쪽으로 조금 앞질러 두어서, 흔들림 없이 따라가며 앞길을 더 보여 준다. (Smooth follow camera (SmoothDamp))
- [극적인 확대 (결정적 순간)](https://ai-techstudio.web.app/ai/t/i428.md): 결정적 수가 닿는 순간 게임 시간을 0.14배로 늦추고 카메라를 그 자리로 다가가며 시야를 좁혀서, 체크메이트 · 정답 순간을 영화처럼 짧게 강조했다 돌아온다. (Dramatic zoom (slow-motion punch-in))
- [카메라 흔들림 (잡음 기반 · 감쇠)](https://ai-techstudio.web.app/ai/t/i429.md): 충격마다 trauma 값을 올리고 빠르게 줄이며 trauma² 만큼 부드러운 잡음으로 카메라를 옆 · 위 · 기울기로 흔들어서, 덜컹거리지 않고 묵직하게 흔들렸다 잦아든다. (Trauma-based camera shake)
- [장면 전환 카메라 (궤도 이동)](https://ai-techstudio.web.app/ai/t/i430.md): 장소마다 바라볼 곳 · 거리 · 방위 · 높이를 정해 두고 그 값들을 구면 좌표로 보간하며 가운데에서 위로 부풀려서, 장면 사이를 원호로 날아가며 바라보는 곳도 함께 옮긴다. (Orbit camera transition (spherical interpolation))

## 게임 시스템 · AI — 조작 · 충돌 · 전투 · 컴퓨터 상대 · 입력 · 성능 · 온라인
- [기기 기울이기 · 흔들기](https://ai-techstudio.web.app/ai/t/u51.md): 폰은 devicemotion 센서의 중력 방향으로 화면 속 중력을 바꾸고 흔들림을 받아, PC 는 끌기 · 방향키 · 빠른 손짓으로 같은 값을 만들어 준다. (DeviceMotionEvent.accelerationIncludingGravity)
- [포인터 끌기 · 3D 고르기](https://ai-techstudio.web.app/ai/t/u79.md): 누른 화면 점에서 카메라 광선(Raycaster)을 쏘아 맞은 3D 말을 고르고, setPointerCapture 로 손가락이 판 밖에 나가도 끌기가 이어지게 한다. (Pointer Events + setPointerCapture)
- [바뀔 때만 그리기 (멈춘 화면은 쉬기)](https://ai-techstudio.web.app/ai/t/u81.md): 그리기 직전 화면에 영향을 주는 값(물체 자리 · 색 · 빛 · 카메라 · 크기)을 모두 적어 지난번과 맞대 보고, 같으면 그리지 않아 멈춘 화면에서 배터리 · 열을 줄인다. (Render on demand (dirty checking))
- [오프라인 (서비스 워커)](https://ai-techstudio.web.app/ai/t/u84.md): 빌드 때 만든 파일 목록으로 서비스 워커가 첫 화면 파일을 미리 받아 두고, 한 번 해 본 게임 파일은 저장해 인터넷이 끊겨도 다시 열리게 한다. (Service worker (offline cache))
- [접근성 · 움직임 줄이기](https://ai-techstudio.web.app/ai/t/u86.md): 「움직임 줄이기」를 켠 기기에서는 튀고 도는 연출을 살짝 나타나기로 바꾸고, 그림 단추에는 aria-label 을 달아 화면 읽기가 이름을 소리로 읽게 한다. (prefers-reduced-motion)
- [화면 밖 캔버스 (OffscreenCanvas)](https://ai-techstudio.web.app/ai/t/i32.md): 시작할 때 큰 캔버스 무늬를 굽는 일을 일꾼(Worker) 안의 화면 밖 캔버스로 넘겨, 굽는 동안에도 게임 화면이 먼저 열리게 한다. (OffscreenCanvas)
- [아주 많은 물체 (BatchedMesh)](https://ai-techstudio.web.app/ai/t/i34.md): 모양이 서로 다른 소품 여러 개를 BatchedMesh 한 묶음에 넣어, 그리기 호출 수십 번을 한 번으로 줄인다. (BatchedMesh)
- [BVH 빠른 고르기 (three-mesh-bvh)](https://ai-techstudio.web.app/ai/t/i67.md): 삼각형을 경계 상자 나무(BVH)에 나눠 담아, 광선이 맞을 만한 상자 속 삼각형만 검사해 큰 모델에서도 누른 곳을 빨리 찾는다. (Bounding volume hierarchy (BVH))
- [지형 조각 캐시 (청크 · LRU)](https://ai-techstudio.web.app/ai/t/i78.md): 큰 지도를 512×256 조각 캔버스로 미리 구워 두고 카메라에 걸친 조각만 붙여 그리며, 오래 안 쓴 조각부터 버려 메모리를 지킨다. (Chunked tile cache)
- [빌보드 대역 (impostor)](https://ai-techstudio.web.app/ai/t/i232.md): 먼 나무를 8방향에서 한 번 찍어 그림 한 장(아틀라스)에 구워 두고, 보는 각도에 맞는 그림을 골라 섞은 판 하나로 그려 숲 수백 그루를 가볍게 만든다. (Impostor (billboard impostor))
- [작은 행성 산책 (구면 중력 · 따라 도는 카메라)](https://ai-techstudio.web.app/ai/t/i536.md): 발밑을 늘 행성 중심 쪽으로 두고 한 걸음마다 접평면으로 옮긴 뒤 구 위로 되돌려, 작은 행성을 어디서나 똑바로 서서 걷게 한다. (Spherical gravity (planet walking))
- [스프라이트 묶기 · 텍스처 아틀라스](https://ai-techstudio.web.app/ai/t/i303.md): 흩어진 작은 그림 수십 장을 큰 것부터 「가장 낮은 빈자리」에 꾸려 넣어 한 장으로 합쳐, 그리기 한 번 · 텍스처 바꾸기 0번으로 그린다. (Texture atlas (sprite sheet packing))
- [미니맥스 게임 나무](https://ai-techstudio.web.app/ai/t/i340.md): 게임을 끝까지 다 둬 본 결과(승 +1 · 무 0 · 패 −1)를 내 차례엔 가장 큰 값, 상대 차례엔 가장 작은 값으로 위로 올려 최선의 수를 고른다. (Minimax (game tree search))
- [알파베타 가지치기](https://ai-techstudio.web.app/ai/t/i341.md): 미니맥스 탐색에서 「더 봐도 결과가 안 바뀌는 가지」를 잘라, 같은 답을 훨씬 적게 보고 찾는다. (Alpha-beta pruning)
- [반복 심화 + 시간 예산](https://ai-techstudio.web.app/ai/t/i343.md): 깊이 1, 2, 3 … 차례로 끝까지 탐색하며 끝난 깊이의 최선 수를 늘 들고 있다가, 시간이 다 되면 하던 깊이는 버리고 그 수를 둔다. (Iterative deepening)
- [같은 판 기억 (전치표 · 조브리스트 해시)](https://ai-techstudio.web.app/ai/t/i344.md): 칸 · 말마다 무작위 비트를 정해 두고 놓인 말의 비트를 XOR 로 모은 값을 판의 이름표로 써서, 다른 순서로 온 같은 판의 결과를 표에서 바로 꺼낸다. (Zobrist hashing)
- [정지 탐색 (수평선 효과 막기)](https://ai-techstudio.web.app/ai/t/i345.md): 깊이 끝에서 바로 평가하지 않고 잡기가 끝나 판이 조용해질 때까지 잡는 수만 더 봐서, 「공짜 룩!」 같은 수평선 착각을 막는다. (Quiescence search)
- [평가 함수 설계 (가중치)](https://ai-techstudio.web.app/ai/t/i346.md): 판 점수를 「가운데 × w₁ + 내 3줄 × w₂ − 상대 3줄 × w₃」 처럼 특징 × 가중치의 합으로 매겨, 가중치만 바꿔도 AI 성격이 달라지게 한다. (Evaluation function (weighted features))
- [몬테카를로 트리 탐색 (UCT)](https://ai-techstudio.web.app/ai/t/i347.md): 고르기 → 펼치기 → 끝까지 아무렇게나 둬 보기 → 결과 올리기를 수백 번 되풀이해, 평가 함수 없이도 많이 이긴 가지를 찾고 방문 수로 수를 고른다. (Monte Carlo tree search (MCTS))
- [기대값 탐색 (주사위 확률 마디)](https://ai-techstudio.web.app/ai/t/i348.md): 주사위 마디는 나올 수 있는 결과마다 확률을 곱해 평균을 내서, 「굴릴까 · 멈출까」를 기대 점수로 비교한다. (Expectimax (chance nodes))
- [끝에서 거꾸로 푸는 완전 해법 (후퇴 분석)](https://ai-techstudio.web.app/ai/t/i349.md): 끝난 자리부터 거꾸로 — 지는 칸으로 갈 수 있으면 이기는 칸, 모든 수가 이기는 칸으로만 가면 지는 칸 — 으로 모든 자리의 승패 표를 만든다. (Retrograde analysis)
- [님합 · 그런디 수 (게임 이론)](https://ai-techstudio.web.app/ai/t/i350.md): 더미 크기를 이진수로 써서 자리마다 XOR 한 님합이 0 이면 지는 자리 — 님합을 0 으로 만드는 수를 두면 늘 마지막 돌을 가져간다. (Nim-sum (bitwise XOR))
- [너비 우선 퍼즐 풀이 (상태 공간 겹 수)](https://ai-techstudio.web.app/ai/t/i354.md): 처음 판에서 한 번 · 두 번 … 움직여 닿는 판을 겹겹이 넓혀 가서, 목표 판에 처음 닿은 겹이 가장 짧은 풀이가 되게 한다. (Breadth-first search (BFS))
- [백트래킹 (8 여왕)](https://ai-techstudio.web.app/ai/t/i355.md): 한 줄씩 안전한 칸에 여왕을 놓다가 놓을 곳이 없으면 바로 윗줄로 돌아가 다음 칸을 시도해, 모든 답을 빠짐없이 찾는다. (Backtracking)
- [선형 대수로 퍼즐 풀기 (GF(2) 가우스 소거)](https://ai-techstudio.web.app/ai/t/i356.md): 「칸 i 를 누르면 어느 불이 바뀌나」를 0 · 1 표로 쓰고 덧셈 대신 XOR 로 줄을 지워 가면, 오른쪽 끝 열이 바로 「누를 칸」이 된다. (Gaussian elimination over GF(2))
- [미니맥스 추측 (최악의 경우 줄이기)](https://ai-techstudio.web.app/ai/t/i357.md): 물어볼 수마다 「대답별로 남는 후보 수」를 세어, 가장 나쁜 대답이 와도 후보가 가장 적게 남는 질문을 고른다. (Minimax guessing (Knuth strategy))
- [난이도 = 사람 같은 실수 (온도 소프트맥스)](https://ai-techstudio.web.app/ai/t/i358.md): 수마다 매긴 점수를 온도 T 로 확률로 바꿔 뽑아서, T 가 낮으면 늘 최선(고수) · 높으면 그럴듯한 차선도 가끔(유아) 두게 한다. (Softmax with temperature)
- [화면 안 멈추는 계산 (Web Worker)](https://ai-techstudio.web.app/ai/t/i359.md): 무거운 AI 탐색을 화면 그리는 메인 스레드 대신 Web Worker 에 맡기고 결과만 메시지로 받아, 생각하는 동안에도 화면이 멈추지 않게 한다. (Web Worker)
- [느린 화면 슬로모션 없애기 (시간 조각 나누기)](https://ai-techstudio.web.app/ai/t/i384.md): 프레임 시간을 0.05초로 잘라 버리던 것을, 0.25초까지 받아 0.05초 조각으로 여러 번 갱신해, 느린 폰에서도 게임이 슬로모션이 되지 않게 한다. (Fixed timestep with substeps)
- [셰이더 미리 데우기](https://ai-techstudio.web.app/ai/t/i385.md): 처음 보이는 효과의 셰이더가 그 순간 컴파일되며 화면이 멈칫하는 것을, 로딩 중에 미리 컴파일해 없앤다. (Shader warm-up (pre-compile))
- [소리 장치 미리 깨우기](https://ai-techstudio.web.app/ai/t/i386.md): 첫 터치 때 소리 장치를 만들며 0.3~0.4초 멈추던 것을, 홈에서 미리 만들어 두고 게임 카드를 누를 때 깨워 첫 터치 멈춤 · 첫 소리 늦음을 없앤다. (AudioContext warm-up (resume on user gesture))
- [무거운 표 미리 · 나눠 만들기](https://ai-techstudio.web.app/ai/t/i387.md): 풀이표 · 해법 표를 한 번에 만들어 화면이 0.4초 멈추던 것을, 프레임마다 10ms 씩 나눠 만들어 60fps 를 그대로 지키며 진행 막대를 보여 준다. (Time slicing (chunked work))
- [미리 생각하기 (상대가 두는 동안)](https://ai-techstudio.web.app/ai/t/i389.md): 사람 말이 움직이기 시작하는 순간 컴퓨터가 생각을 시작해, 말 이동 연출과 계산이 겹치게 하고 체감 대기를 계산 시간만큼 줄인다. (Concurrent AI thinking (overlap with animation))
- [고정 물체 합치기 (그리기 호출 줄이기)](https://ai-techstudio.web.app/ai/t/i391.md): 움직이지 않는 메시를 같은 재질끼리 한 덩어리로 합쳐, 물체 1,500개 · 그리기 1,500번을 재질 수만큼으로 줄인다 — 모양 · 색은 그대로. (Static mesh merging (geometry batching))
- [입력 줄 세우기 (컴퓨터 차례에 누른 것 기억)](https://ai-techstudio.web.app/ai/t/i393.md): 컴퓨터 차례에 누른 것을 버리지 않고 줄에 세워 두었다가, 차례가 오자마자 처리해 「다시 눌러야 하는」 답답함을 없앤다. (Input buffering (input queue))
- [긴 작업 찾기 (longtask · 프레임 그래프)](https://ai-techstudio.web.app/ai/t/i394.md): PerformanceObserver 로 50ms 넘는 긴 작업을 잡아 프레임 시간 그래프 아래 빨간 막대로 그려, 무엇이 화면을 멈추는지 눈으로 찾게 한다. (Long Tasks API (PerformanceObserver "longtask"))
- [「거의 맞았어요」 판정 (근접 정답)](https://ai-techstudio.web.app/ai/t/i400.md): 답을 맞음 · 틀림 둘로만 가르지 않고 단위 빠짐 · 약분 안 한 분수 · 오차 범위를 구별해, 「한 걸음 더」라고 알려 준다. (Partial-credit answer checking)
- [알맞은 난이도 고르기 (적응형)](https://ai-techstudio.web.app/ai/t/i402.md): 최근 정답률을 늘 재서 85%를 넘으면 한 단계 위, 70% 밑이면 한 단계 아래 문제를 내, 늘 「조금 어려운」 몰입 구간에 머물게 한다. (Adaptive difficulty (dynamic difficulty adjustment))
- [간격 반복 (잊을 때쯤 다시)](https://ai-techstudio.web.app/ai/t/i403.md): 틀린 문제를 1일 · 3일 · 7일 뒤에 다시 내서, 잊을 때쯤 복습할 때마다 기억이 100%로 돌아오고 더 천천히 잊게 한다. (Spaced repetition)
- [손가락 크기 누름 영역](https://ai-techstudio.web.app/ai/t/i418.md): 보이는 단추보다 누름 영역을 넓히고 그 안에서 가장 가까운 단추 하나를 골라, 작은 칸이 많은 폰 화면에서도 손가락이 놓치지 않게 한다. (Touch target expansion (hit slop))
- [끌기 축 잠금](https://ai-techstudio.web.app/ai/t/i419.md): 끌기를 시작해 8px 움직인 순간 가로 · 세로 중 많이 움직인 쪽으로 축을 잠가, 손이 비스듬히 휘어도 블록이 다른 줄로 엇나가지 않게 한다. (Drag axis locking)
- [착 붙기 · 관성 (스냅과 던지기)](https://ai-techstudio.web.app/ai/t/i420.md): 카드를 놓을 때의 속도로 미끄러질 도착점을 미리 계산해 가장 가까운 칸을 고르고, 미끄러지다 스프링으로 그 칸에 착 붙게 한다. (Inertial fling with snap points)
- [길게 누르기 · 두 번 누르기 구별](https://ai-techstudio.web.app/ai/t/i421.md): 누른 시간과 앞 누름과의 간격으로 한 번 · 두 번 · 길게를 가려, 한 칸에서 열기 · ✕ 표시 · 깃발을 따로 할 수 있게 하고 길게 누르는 동안 원 진행을 보여 준다. (Gesture disambiguation (tap · double-tap · long-press))
- [두 손가락 몸짓 (확대 · 회전)](https://ai-techstudio.web.app/ai/t/i422.md): 두 손가락 거리 비로 확대, 각도 차로 회전하되 중심을 두 손가락 가운데로 잡아, 손가락 밑 그림 점이 손가락을 그대로 따라오게 한다. (Pinch-zoom and two-finger rotate)
- [끌어다 놓기 미리 보기](https://ai-techstudio.web.app/ai/t/i424.md): 조각을 끄는 동안 칸에 맞춰 반올림한 놓일 자리를 그림자로 미리 그려, 놓을 수 있으면 초록 · 겹치거나 판 밖이면 빨강으로 알려 준다. (Drop preview (ghost / placement shadow))
- [손 떨림 걸러내기 (누름 vs 끌기 문턱)](https://ai-techstudio.web.app/ai/t/i425.md): 누른 점에서 몇 px(기본 10) 안의 움직임은 누름으로 보고 그 문턱을 넘어야 끌기로 바꿔, 아이 손 · 폰의 떨림 때문에 누름이 끌기로 사라지지 않게 한다. (Touch slop (drag threshold))
- [지연 숨기기 (먼저 보여 주고 확인)](https://ai-techstudio.web.app/ai/t/i439.md): 온라인 대전에서 내 수를 누르자마자 흐리게 판에 보여 주고 서버 확인이 오면 진하게, 거절되면 되돌려 지연을 느끼지 않게 한다. (Optimistic update (client-side prediction))
- [다시 접속 (판 이어 하기)](https://ai-techstudio.web.app/ai/t/i440.md): 연결이 끊긴 사이 놓친 수가 있어도, 다시 접속할 때 서버에서 판 전체와 차례를 받아 화면을 맞추고 이어 하게 한다. (Reconnection with state resync)
- [차례 시계 · 시간 초과](https://ai-techstudio.web.app/ai/t/i441.md): 핑 · 퐁으로 내 기기 시계와 서버 시계 차이를 재서, 차례 남은 시간을 서버 마감 시각 기준으로 보여 주고 초과하면 서버가 자동 처리한다. (Clock offset estimation (Cristian's algorithm))
- [동시에 둔 수 정리 (순서 정하기)](https://ai-techstudio.web.app/ai/t/i442.md): 두 사람이 거의 동시에 같은 칸에 둔 수를 서버에 먼저 「도착한」 순서로 정해, 늦은 쪽은 거절 · 되돌려 두 화면의 판을 같게 만든다. (Server-side ordering (first-arrival wins))
- [상대 상태 보여 주기 (생각 중 · 나감)](https://ai-techstudio.web.app/ai/t/i443.md): 상대가 보내는 숨결(0.8초마다)과 상태 신호로 「보는 중 · 생각 중 · 자리 비움 · 나감」을 점과 글로 보여 줘, 상대가 사라졌는지 기다리는지 알게 한다. (Presence (online status))
- [LOD · 텍스처 예산 (폰에서도)](https://ai-techstudio.web.app/ai/t/i478.md): 거리에 따라 정밀 → 중간 → 단순 모델로 바꾸고 텍스처 크기를 정해, 폰에서도 삼각형 수 · GPU 메모리 · 받을 크기를 예산 안에 맞춘다. (Level of detail (THREE.LOD))
- [캐릭터 조작기 (경사 · 계단 · 점프 · 벽 미끄러지기)](https://ai-techstudio.web.app/ai/t/i480.md): 캡슐을 바닥 · 벽 삼각형과 맞대어 겹친 만큼 밀어내고, 닿은 면 기울기로 바닥 · 가파른 경사 · 벽을 나눠 계단 오르기 · 땅 붙기 · 코요테 점프까지 처리한다. (Kinematic character controller (capsule))
- [카메라가 벽을 뚫지 않게](https://ai-techstudio.web.app/ai/t/i481.md): 주인공에서 바라는 카메라 자리까지 작은 구를 쓸어 벽에 닿는 곳을 찾고, 그 앞까지 바로 당겼다가 벗어나면 천천히 되돌아가게 한다. (Camera collision (sphere cast))
- [적 AI (상태 기계 · 행동 나무)](https://ai-techstudio.web.app/ai/t/i483.md): 경비의 행동을 순찰 · 의심 · 추격 · 공격 · 귀환 상태로 나누고, 매 장면 행동 나무를 위에서부터 훑어 처음 성공하는 가지를 고른다 — 시야 원뿔과 발소리로 주인공을 알아챈다. (Finite state machine (FSM))
- [전투 판정 (휘두르기 · 히트스톱 · 넉백)](https://ai-techstudio.web.app/ai/t/i484.md): 칼이 지난 프레임부터 지금까지 쓸고 간 부채꼴로 맞음을 판정하고, 맞는 순간 잠깐 멈춤 · 번쩍 · 밀려남으로 손맛을 준다. (Swept hit detection)
- [천 시뮬레이션 (망토 · 깃발)](https://ai-techstudio.web.app/ai/t/i485.md): 천을 점 격자로 두고 지난 위치와의 차이로 움직인 뒤(베를레) 이웃 점 사이 거리를 여러 번 되맞춰, 망토 · 깃발이 바람과 걸음에 펄럭이게 한다. (Verlet cloth (position-based dynamics))
- [부서지는 물체 (조각내기)](https://ai-techstudio.web.app/ai/t/i486.md): 물체 안에 씨앗 점을 뿌리고 씨앗마다 이웃 씨앗과의 수직 이등분면으로 잘라 보로노이 조각을 미리 구워 두었다가, 맞으면 조각으로 바꿔 튕겨 흩어지게 한다. (Voronoi fracture (pre-fractured))
- [시야와 안개 (가 본 곳만 밝게)](https://ai-techstudio.web.app/ai/t/i487.md): 주인공 시야를 칸마다 광선으로 재 「지금 보임 · 가 본 곳」 두 값을 작은 텍스처에 쓰고, 모든 재질이 그 텍스처로 밝게 · 푸르스름하게 · 검게 칠한다. (Fog of war (visibility grid))
- [가리는 벽 투명 처리](https://ai-techstudio.web.app/ai/t/i488.md): 카메라에서 주인공 발 · 가슴 · 머리로 쏜 광선에 걸리는 벽 · 기둥만 골라, 주인공 둘레 화면 원 안을 바이어 점무늬로 비우고 벽 너머엔 윤곽선을 그린다. (Occluder fade (dithered cutout))

## 2D · 화면 — 캔버스 그리기 · 2D 움직임과 충돌 · 손그림 느낌 · 화면 맞춤
- [2D 조명 흉내 (Light2D)](https://ai-techstudio.web.app/ai/t/u19.md): 어두운 바탕빛에 손전등 · 전등 빛을 더한 「빛 지도」를 따로 그려 그림에 곱해, 2D 장면에 어둠 속 빛을 만든다. (2D lighting (light map multiply))
- [캔버스 그러데이션 · 흐림 · 빛 섞기](https://ai-techstudio.web.app/ai/t/u52.md): 단색 원 대신 방사 그러데이션 · 흐림 필터 · 빛 번짐 그림자 · 더하기 혼합을 겹쳐, 겹친 곳이 환하게 빛나는 빛 덩어리를 캔버스로 그린다. (Canvas radial gradient (createRadialGradient))
- [잡음으로 그린 성운 (fbm)](https://ai-techstudio.web.app/ai/t/u54.md): 도메인 워프 잡음을 64×40 작은 캔버스에 화소로 계산한 뒤 부드럽게 크게 키우고 별을 얹어, 가볍게 흐르는 성운 하늘을 만든다. (fBm (fractal Brownian motion))
- [9분할 그림 (캔버스로 한 장)](https://ai-techstudio.web.app/ai/t/u56.md): 테두리 그림을 9조각으로 잘라 귀퉁이는 그대로 두고 변 · 가운데만 늘이되, 캔버스 한 장에 이어 그려 확대해도 조각 사이 실선이 생기지 않게 한다. (9-slice scaling (nine-patch))
- [코드로 그린 SVG 아이콘 · 도장](https://ai-techstudio.web.app/ai/t/u57.md): 아이콘 · 마스코트 · 도장을 그림 파일 대신 SVG 코드로 그려, 글자가 번역되고 크기가 바뀌어도 또렷하며 속성만 바꿔 움직인다. (Inline SVG)
- [SVG 필터 (종이 결 feTurbulence)](https://ai-techstudio.web.app/ai/t/u58.md): SVG 필터의 feTurbulence 잡음으로 가장자리를 찢고 섬유 결 · 얼룩을 입혀, 그냥 네모를 손으로 만든 종이처럼 보이게 한다. (SVG filter feTurbulence (fractalNoise))
- [반짝 단추 그림 (glossy)](https://ai-techstudio.web.app/ai/t/u60.md): 두께 → 몸통 그러데이션 → 흰 테 → 윗빛 → 글자를 한 겹씩 캔버스에 쌓아 반질반질한 게임 단추를 굽고, 색 세 개만 바꿔 여러 벌 만든다. (Glossy button (layered canvas painting))
- [테마 갈아입히기 (공통 틀 + CSS 변수 옷)](https://ai-techstudio.web.app/ai/t/u61.md): 화면 틀(HUD · 패널 · 단추)은 하나로 두고, 색 · 모서리 · 무늬를 CSS 변수로 빼서 data-game 값만 바꾸면 게임마다 다른 옷을 입힌다. (Theming with CSS custom properties)
- [CSS 무늬 (그러데이션 · 데이터 SVG)](https://ai-techstudio.web.app/ai/t/u62.md): 그림 파일 없이 CSS 그러데이션(줄 · 원 · 원뿔 반복)과 주소에 넣은 SVG 만으로 나뭇결 · 공책 · 줄무늬 · 집중선 · 모눈 · 물방울 무늬를 만든다. (CSS gradient patterns (repeating-linear / radial / conic-gradient))
- [마스크 · 섞기 · 잘라내기](https://ai-techstudio.web.app/ai/t/u63.md): CSS 마스크 xor 로 테두리만 남기고, mix-blend-mode 로 색을 곱해 섞고, clip-path 다각형으로 별 ↔ 육각형을 바꾸고, backdrop-filter 로 뒤를 흐린 유리를 만든다. (CSS mask + mask-composite (exclude / xor))
- [글자 테 · 그러데이션 글자](https://ai-techstudio.web.app/ai/t/u64.md): 같은 글자를 네 겹 겹쳐 — 뒤는 굵은 어두운 테와 그림자, 가운데 흰 테, 앞은 그러데이션 글자, 맨 위 흐르는 빛 — 만화 같은 제목 글씨를 만든다. (-webkit-text-stroke (outlined text))
- [CSS 3D (카드 뒤집기)](https://ai-techstudio.web.app/ai/t/u66.md): 카드 앞 · 뒷면을 겹치고 뒷면을 미리 180° 돌려 두면, perspective 아래에서 카드를 rotateY 로 돌리는 것만으로 진짜처럼 뒤집힌다. (CSS 3D card flip)
- [고정 크기 화면 확대](https://ai-techstudio.web.app/ai/t/u68.md): 게임 화면을 1600×900 같은 고정 크기 판 하나로 만들고, 화면 크기에 맞춰 transform: scale 로 통째로 키우거나 줄여 PC · 태블릿 · 폰에서 배치가 똑같게 한다. (Fixed-resolution stage scaling (letterbox))
- [넘칠 때만 줄이기 (자동 축소)](https://ai-techstudio.web.app/ai/t/u70.md): 패널마다 쓸 수 있는 자리를 정해 두고, 넘칠 때만 넘친 비율만큼 그 패널의 zoom 을 줄여 — 넘치지 않는 패널은 그대로 두고 잘림을 막는다. (Shrink-to-fit (overflow-only scaling))
- [화면 방향 고정 · 노치 피하기](https://ai-techstudio.web.app/ai/t/u71.md): 폰에서 게임을 열 때 전체 화면 + 화면 방향 고정을 걸고, 노치는 safe-area 여백으로 피하고, 높이는 주소창에 맞춰 줄어드는 100dvh 로 잡는다. (Screen Orientation API (screen.orientation.lock))
- [다국어 (원문을 번역 키로)](https://ai-techstudio.web.app/ai/t/u74.md): 한국어 문장 자체를 번역 열쇠로 써서 $t('시작하기') 가 언어별 사전에서 찾아 바꾸고, 빠진 번역은 원문 그대로 · 게임별 사전은 따로 나눠 불러온다. (Source-string-as-key i18n (gettext style))
- [미리 그린 3D 스프라이트 (pre-rendered)](https://ai-techstudio.web.app/ai/t/i73.md): 구 · 캡슐로 짠 3D 인물에 화소마다 광선을 쏘아 2:1 등각 2D 그림으로 굽고, 몇 단계 명암 · 디더 · 테두리를 넣어 그림 없이 8방향 걷기 스프라이트를 만든다. (Pre-rendered sprites)
- [SVG 선 그리기 (stroke-dashoffset) · 손떨림](https://ai-techstudio.web.app/ai/t/i80.md): SVG 선에 「선 길이만큼의 점선 간격」을 주고 시작점을 길이 → 0 으로 밀어 선이 그려지는 것처럼 보이게 하고, 점을 살짝 흔들어 손그림 느낌을 낸다. (SVG line drawing animation (stroke-dashoffset))
- [스프라이트 동작 상태기 + 섞기](https://ai-techstudio.web.app/ai/t/i233.md): 서기 · 걷기 · 뛰기 · 점프를 상태기가 고르고, 바뀔 때 0.3초 동안 앞뒤 두 자세 · 걸음 빠르기를 섞어 동작이 툭 끊기지 않게 한다. (Animation state machine)
- [노멀 맵 스프라이트 조명](https://ai-techstudio.web.app/ai/t/i234.md): 평평한 그림 한 장에 높이 지도를 더해 화소마다 법선을 구하고, 움직이는 횃불 빛으로 음영 · 반사를 계산해 2D 그림이 입체로 보이게 한다. (Normal-mapped sprite lighting)
- [2D 시야 다각형 (빛 그림자)](https://ai-techstudio.web.app/ai/t/i235.md): 벽 꼭짓점마다 광선 3개를 쏘아 맞은 점을 각도 순으로 이어 「보이는 다각형」을 만들고, 그 안만 밝혀 벽 뒤는 어둠 속에 숨긴다. (Visibility polygon (2D field of view))
- [팔레트 색 순환 (그림은 그대로, 색만 흐름)](https://ai-techstudio.web.app/ai/t/i236.md): 그림은 색 번호로만 그려 두고 팔레트의 몇 칸만 매 프레임 돌려, 그림을 다시 그리지 않고도 폭포 · 물결 · 반짝이가 흐르게 한다. (Palette color cycling)
- [공간 나누기 (쿼드트리)](https://ai-techstudio.web.app/ai/t/i263.md): 물체가 많은 칸만 4칸씩 더 쪼개는 쿼드트리를 만들어, 범위 찾기 · 충돌 검사 때 겹치는 칸 안의 물체만 열어 보아 검사 수를 크게 줄인다. (Quadtree)
- [플랫폼 점프 손맛 (코요테 · 버퍼 · 가변 점프)](https://ai-techstudio.web.app/ai/t/i282.md): 발판을 막 벗어나도 0.1초는 점프되고(코요테), 땅에 닿기 0.12초 전에 누른 점프를 기억하며(버퍼), 일찍 떼면 낮게 뛰게(가변 점프) 해 점프 손맛을 살린다. (Coyote time)
- [타일 충돌 (축마다 따로 밀어내기)](https://ai-techstudio.web.app/ai/t/i283.md): 캐릭터를 가로로 먼저 움직여 벽에서 밀어내고 세로로 나중에 움직여 바닥 · 천장에서 밀어내며, 경사는 발 높이를 맞추고 한쪽 발판은 위에서만 밟히게 한다. (Tile collision (axis-separated resolution))
- [분리축 충돌 (SAT · 다각형)](https://ai-techstudio.web.app/ai/t/i284.md): 두 볼록 다각형을 변마다의 법선 축에 그림자로 비춰 보고, 하나라도 틈이 있으면 안 겹침 · 다 겹치면 가장 얕게 겹친 축으로 그만큼 밀어낸다. (Separating Axis Theorem (SAT))
- [쓸고 지나는 충돌 (빠른 물체 뚫림 막기)](https://ai-techstudio.web.app/ai/t/i285.md): 한 걸음에 벽을 건너뛰는 빠른 총알을, 그 순간 자리만 보지 않고 지나온 선분을 반지름만큼 넓힌 벽과 맞대어 닿는 순간을 찾아 뚫림을 막는다. (Continuous collision detection (swept test))
- [베를레 밧줄 · 사슬](https://ai-techstudio.web.app/ai/t/i286.md): 점들을 지난 자리와의 차로 움직이고(베를레) 「이웃 점과 길이 지키기」를 12번 되풀이해 풀어, 출렁이는 밧줄 · 다리를 만들고 가위로 자르면 사탕이 떨어진다. (Verlet integration)
- [말랑한 몸 (스프링 젤리 · 압력)](https://ai-techstudio.web.app/ai/t/i287.md): 둘레 점을 스프링으로 잇고 안쪽 넓이를 지키는 압력을 더해, 떨어지면 찌그러졌다가 통 돌아오는 말랑한 슬라임을 만든다. (Pressure soft body (mass-spring))
- [2D 물 표면 (스프링 기둥 · 퍼짐)](https://ai-techstudio.web.app/ai/t/i288.md): 수면을 점 72개의 스프링 기둥으로 나누고 이웃으로 높이를 퍼뜨려, 물건이 떨어지면 첨벙 출렁이고 물결이 양옆으로 번지게 한다. (2D water surface (spring columns))
- [부서지는 땅 (비트맵 지형)](https://ai-techstudio.web.app/ai/t/i289.md): 땅을 한 칸 = 한 픽셀인 칸 지도(비트맵)로 들고 폭발 자리를 동그랗게 지워, 남은 땅 위를 캐릭터가 걷고 떨어지게 한다. (Destructible terrain (bitmap mask))
- [궤도 · 중력 우물](https://ai-techstudio.web.app/ai/t/i290.md): 행성마다 거리 제곱에 반비례하는 중력을 더해 휘는 궤도를 만들고, 쏘기 전에 같은 계산을 앞당겨 궤적 점선과 「도착 · 충돌 예상」을 보여 준다. (N-body gravity (inverse-square law))
- [탄막 무늬 (극좌표 · 나선)](https://ai-techstudio.web.app/ai/t/i291.md): 쏘는 각도를 한 발마다 조금씩 돌리거나 속도를 각도의 식으로 바꾸기만 해서, 나선 · 꽃 · 물결 탄막 무늬를 만든다 — 수식이 곧 무늬. (Bullet hell patterns (danmaku))
- [이징 곡선 모음 (트윈 비교)](https://ai-techstudio.web.app/ai/t/i292.md): 같은 거리 · 같은 시간의 이동을 linear · easeInOut · easeOut · back · elastic · bounce 로 나란히 돌리고 곡선 그래프를 붙여, 움직임 맛을 비교해 고르게 한다. (Easing functions (tweening))
- [스프링 · 감쇠 움직임 (임계 감쇠)](https://ai-techstudio.web.app/ai/t/i293.md): 목표를 따라가는 스프링에 감쇠비 ζ 를 달리 주어, 덜 감쇠(출렁) · 임계 감쇠(가장 빨리 딱) · 과감쇠(느릿느릿)를 나란히 비교한다. (Damped harmonic oscillator)
- [스프라이트 외곽선 · 빛 테 (알파 넓히기)](https://ai-techstudio.web.app/ai/t/i294.md): 그림 알파 둘레로 거리 지도를 만들어 n칸 넓힌 테와 멀리 옅게 퍼지는 빛 무리를 구워, 고른 캐릭터만 테두리가 빛나게 한다. (Sprite outline (alpha dilation))
- [색 바꾸기 · 팔레트 교체 (2D)](https://ai-techstudio.web.app/ai/t/i296.md): 도트 그림을 색 번호(0~7)로 한 번만 그리고 색 표만 갈아 끼워, 같은 그림으로 팀 색 · 피격 깜빡임 · 얼음 · 무지개 돌리기를 만든다. (Palette swap)
- [AI 픽셀풍 그림 정리 (격자 · 팔레트 되찾기)](https://ai-techstudio.web.app/ai/t/i500.md): AI 가 그린 픽셀풍 그림에서 격자 간격을 찾아 칸마다 대표 색을 뽑고 색을 수십 가지로 줄여, 번진 그림을 진짜 도트 그림으로 되돌린다. (Pixel art cleanup (grid detection · downsampling))
- [픽셀 그림 한 장 살리기 (부위 겹 · 칸 단위 움직임)](https://ai-techstudio.web.app/ai/t/i501.md): 도트 그림 한 장을 부위별로 오려 겹으로 나누고 통째로 칸 단위로 옮겨, 외곽선을 깨지 않고 가만히 · 걸음 · 공격 · 맞음 · 사라지기까지 움직인다. (Cutout animation for pixel art (part layers))
- [그림자 · 반사 (2D 바닥)](https://ai-techstudio.web.app/ai/t/i297.md): 같은 그림을 납작하게 눌러 해 반대쪽으로 기울이면 바닥 그림자, 거꾸로 뒤집어 줄마다 흔들면 물 반사가 되어 2D 장면에 깊이가 생긴다. (Projected sprite shadow (skew + squash))
- [2D 잔상 꼬리 · 대시 잔상](https://ai-techstudio.web.app/ai/t/i298.md): 지난 0.6초 위치를 기억해 두었다가 0.035초 간격 자리마다 색을 입힌 반투명 복제를 그려, 대시할 때 캐릭터 뒤로 잔상이 사라지게 한다. (Afterimage (ghost trail))
- [변형 메시 (그림을 쭈욱 늘리기)](https://ai-techstudio.web.app/ai/t/i299.md): 그림 한 장을 7×7 격자 삼각형으로 잘라 꼭짓점만 움직이고 삼각형마다 그림을 아핀 변환으로 붙여, 숨쉬기 · 깃발 출렁 · 당기기 · 말랑 흔들기를 만든다. (Mesh deformation (2D warp))
- [2D 뼈대 애니 (코드로)](https://ai-techstudio.web.app/ai/t/i300.md): 팔 · 다리를 뼈로 이어 각도만 돌려 걷게 하고(FK), 앞팔은 손 끝이 목표에 닿도록 두 뼈 각도를 코사인 법칙으로 거꾸로 계산한다(IK). (2D skeletal animation (forward kinematics))
- [2D 빛 반사 · 반짝 쓸기 (sheen)](https://ai-techstudio.web.app/ai/t/i301.md): 동전 · 카드 · 금 글씨 위로 대각 빛 띠를 지나가게 하되 source-atop 으로 그림이 있는 화소에만 칠해, 보상이 반짝 빛나 보이게 한다. (Sheen sweep (shine highlight))
- [캔버스 입자 엔진 (2D)](https://ai-techstudio.web.app/ai/t/i302.md): 방출기마다 수명 · 힘 · 크기 · 색이 다른 입자를 쏘고 미리 구운 점 그림으로 그려, 불 · 연기 · 반짝이 · 꽃잎을 캔버스 2D 하나로 만든다. (Particle system (emitter · lifetime))
- [픽셀 아트 확대 (계단 그대로 · 서브픽셀)](https://ai-techstudio.web.app/ai/t/i304.md): 도트 그림을 정수 배로만 키우고 위치도 정수 칸에 맞추며, 필요하면 scale2x(EPX)로 대각선만 매끈하게 해 흐림 · 떨림 없이 또렷하게 보이게 한다. (Integer scaling (nearest neighbor))
- [모드 7 바닥 (원근 평면)](https://ai-techstudio.web.app/ai/t/i305.md): 평면 지도를 화면 아래 줄마다 「거리 = 높이 × 초점 ÷ 줄 번호」로 늘려 찍어, 옛 레이싱 게임처럼 깊이 있는 원근 바닥을 2D 로 만든다. (Mode 7 (perspective floor))
- [광선 투사 미로 (1인칭 옛 방식)](https://ai-techstudio.web.app/ai/t/i306.md): 화면 세로줄마다 광선 하나를 칸 지도에 쏘아 벽까지의 거리로 벽 높이 · 어둡기 · 무늬 줄을 정해, 옛 1인칭 미로를 2D 계산만으로 그린다. (Raycasting (Wolfenstein-style))
- [의사 3D 도로 (줄마다 커브 누적)](https://ai-techstudio.web.app/ai/t/i307.md): 도로를 짧은 조각 수백 개로 나누고 조각마다 커브를 누적 · 높이를 투영해, 굽이치고 오르내리는 옛 아케이드식 도로를 2D 사다리꼴로 그린다. (Pseudo-3D road (segment projection))
- [스프라이트 쌓기 (sprite stacking)](https://ai-techstudio.web.app/ai/t/i308.md): 물체를 가로로 썬 단면 도트 그림 여러 장을 아래부터 한 칸씩 위로 쌓아 함께 돌려, 3D 모델 없이 차 · 집 · 나무가 입체처럼 돌아 보이게 한다. (Sprite stacking)
- [2.5D 시차 깊이 (층층 무대)](https://ai-techstudio.web.app/ai/t/i309.md): 먼 산 · 언덕 · 마을 · 풀 · 앞 잎 다섯 층을 깊이만큼 다른 빠르기(0.12 ~ 1.7배)로 흘리고, 먼 층엔 안개를 덮어 납작한 그림을 깊이 있는 무대로 만든다. (Parallax scrolling (2.5D layers))
- [등각 깊이 정렬 (큰 물체 · 겹침)](https://ai-techstudio.web.app/ai/t/i310.md): 등각 판에서 여러 칸을 차지하는 물체를 칸 번호 합으로 줄 세우면 생기는 겹침 오류를, 「완전히 뒤에 있나」 관계의 위상 정렬로 바로잡는다. (Isometric depth sorting)
- [부드러운 붓 선 (곡선 보정 · 압력)](https://ai-techstudio.web.app/ai/t/i312.md): 손이 찍은 떨리는 점을 이동 평균으로 다듬고 중점 2차 곡선으로 잇고, 빠르게 그은 곳은 가늘게 해, 서툰 손도 매끈한 붓 선이 되게 한다. (Stroke smoothing (moving average))
- [도장 붓 (크레파스 · 수채 · 분필)](https://ai-techstudio.web.app/ai/t/i313.md): 획을 따로 한 겹에 그린 뒤 종이에 고정된 결 무늬로 군데군데 지워 얹어, 크레파스(종이 결) · 수채(번짐 · 겹치면 섞임) · 분필(칠판) 붓을 만든다. (Stamp brush (dab spacing))
- [페인트 통 (영역 채우기)](https://ai-techstudio.web.app/ai/t/i314.md): 누른 픽셀과 이어진 같은 색 칸을 너비 우선으로 찾아 채우고, 찾은 순서대로 조금씩 칠해 물결처럼 퍼지게 하는 페인트 통 도구. (Flood fill (BFS))
- [도형 알아보기 (손그림 → 원 · 네모 · 세모)](https://ai-techstudio.web.app/ai/t/i315.md): 삐뚤게 그린 선에서 닫힘 · 꼭짓점 수 · 둥근 정도를 재어 원 · 타원 · 삼각형 · 사각형 · 직선을 알아채고, 반듯한 모양으로 착 바꿔 준다. (Sketch shape recognition)
- [숫자 손글씨 알아보기](https://ai-techstudio.web.app/ai/t/i316.md): 손으로 쓴 숫자를 28×28 칸으로 줄여 0 ~ 9 기준 모양 여럿과 거리 지도(챔퍼 거리)로 비교해, 가장 닮은 숫자와 몇 % 인지 맞힌다. (Handwritten digit recognition (template matching))
- [되돌리기 · 다시 하기 (명령 기록)](https://ai-techstudio.web.app/ai/t/i317.md): 획 하나를 명령 하나로 기록해 쌓고 「지금 위치」만 앞뒤로 옮겨 되돌리기 · 다시 하기를 만들고, 되돌린 뒤 새로 그으면 다시 하기 갈래를 잘라 낸다. (Undo / redo (command pattern))
- [대칭 그리기 (만화경 · 거울)](https://ai-techstudio.web.app/ai/t/i318.md): 한 번 그은 토막을 중심 둘레로 N 번 돌리고 거울로 한 번 더 뒤집어 그려, 대칭 축 수에 따라 만화경 · 눈송이 무늬가 저절로 생기게 한다. (Rotational symmetry (N-fold))
- [펜 도구 (베지에 조절점)](https://ai-techstudio.web.app/ai/t/i319.md): 누르면 꼭짓점, 끌면 양쪽 대칭 곡선 손잡이를 만드는 펜 도구로 3차 베지에 곡선을 잇고, 첫 점을 누르면 닫힌 모양 · 손잡이를 끌어 고치게 한다. (Pen tool (cubic Bézier path))
- [모눈 · 자석 맞춤 (스냅)](https://ai-techstudio.web.app/ai/t/i320.md): 찍은 점을 다른 점 · 모눈 · 15° 각도 중 가까운 곳에 착 붙여, 대충 눌러도 반듯한 도형이 되고 변 길이 · 각도 · 넓이가 저절로 표시되게 한다. (Snapping (grid · angle · point))
- [자 · 각도기 · 컴퍼스 도구](https://ai-techstudio.web.app/ai/t/i321.md): 화면 위 자 · 컴퍼스 · 각도기를 손가락으로 대고 돌려 선 긋기 · 원호 그리기 · 각 재기를 하게 해, 두 원이 만나는 점으로 정삼각형을 작도한다. (Geometric construction tools)
- [그린 그림을 물체로 (선 → 물리)](https://ai-techstudio.web.app/ai/t/i322.md): 손을 떼는 순간 그은 선을 5px 간격 점 묶음으로 바꾸고, 베를레 적분 + 원래 모양 되맞추기로 단단한 물체처럼 떨어져 경사판을 굴러가게 한다. (Drawn physics (line to rigid body))
- [선 들끓기 (line boil)](https://ai-techstudio.web.app/ai/t/i323.md): 같은 그림을 살짝 다르게 떨리는 선으로 2~4장 그려 10fps 로 번갈아 보여 줘, 손으로 매번 다시 그린 애니처럼 선이 살아 움직이게 한다. (Line boil)
- [스케치 선 (넘침 · 두 번 긋기)](https://ai-techstudio.web.app/ai/t/i324.md): 도형의 변을 하나씩 따로, 양 끝을 살짝 넘겨 떨리게 긋고 두 번 겹쳐 그어, 반듯한 도형을 연필로 슥슥 그린 스케치처럼 보이게 한다. (Sketchy rendering (overshoot · double stroke))
- [연필 빗금 명암 (해칭 · 교차 빗금)](https://ai-techstudio.web.app/ai/t/i325.md): 면의 어둡기에 따라 빗금 겹 수를 정해 — 밝으면 한 겹, 어두울수록 방향을 바꾼 빗금이 한 겹씩 더 — 밝기를 선의 밀도로 나타내는 연필 명암. (Hatching · cross-hatching)
- [지그재그 칠하기 (scribble fill)](https://ai-techstudio.web.app/ai/t/i326.md): 면을 기울인 줄로 잘라 왔다 갔다 이어 한 줄 지그재그로 칠하고, 끝이 테두리를 살짝 삐져나가게 해, 색연필로 낙서하듯 칠한 느낌을 낸다. (Scribble fill (zigzag hatching))
- [수채화 (번짐 · 가장자리 짙게)](https://ai-techstudio.web.app/ai/t/i327.md): 면 둘레를 여러 번 잘게 흔든 반투명 다각형을 수십 겹 쌓고 가장자리만 짙게 해, 물감이 종이에 스며 경계가 짙어지고 겹치면 진해지는 수채화를 만든다. (Watercolor simulation (layered polygon deformation))
- [먹 붓 (붓 압력 · 갈필)](https://ai-techstudio.web.app/ai/t/i328.md): 붓 길을 따라 굵기가 들어갈 때 꾹 · 몸통 · 빠질 때 가늘게 변하는 띠로 먹을 칠하고, 붓털 34가닥을 마를수록 끊기게 그어, 먹 붓의 압력과 갈필을 낸다. (Ink brush stroke (sumi-e))
- [마커 · 형광펜 (겹치면 진하게)](https://ai-techstudio.web.app/ai/t/i329.md): 마커 · 형광펜 줄을 곱하기(multiply) 혼합으로 그어, 겹친 줄은 더 진해지고 아래 인쇄 선 · 글씨는 가려지지 않고 비쳐 보이게 한다. (Multiply blend mode)
- [색연필 · 크레파스 결 (종이 이)](https://ai-techstudio.web.app/ai/t/i330.md): 칠한 겹의 알파를 종이 결 높낮이 지도와 비교해 골짜기만 비게 해, 크레파스 · 색연필 색이 군데군데 하얗게 빠지고 세게 누를수록 메워지는 질감을 낸다. (Paper tooth texture)
- [점묘 (스티플링)](https://ai-techstudio.web.app/ai/t/i331.md): 어두운 곳일수록 점을 많이 뿌린 뒤, 가중 보로노이 이완으로 점을 고르게 펴서 점의 밀도만으로 명암을 낸다. (Stippling (weighted Voronoi stippling))
- [종이 오려 붙이기 (콜라주)](https://ai-techstudio.web.app/ai/t/i332.md): 도형 테두리를 잡음으로 들쭉날쭉 밀고 흰 속지 띠 · 종이 결 · 흐린 그림자 · 살짝 기운 각도를 더해 색종이를 찢어 붙인 콜라주로 만든다. (Paper cut-out collage (torn paper edge))
- [칠판 · 분필 (번짐 · 지운 자국)](https://ai-techstudio.web.app/ai/t/i333.md): 분필 결 무늬를 패턴으로 칠한 흔들린 선 · 손글씨에, 문지른 번짐과 흐릿한 지운 자국을 한 번 구운 칠판에 겹쳐 칠판 풀이처럼 보이게 한다. (Chalkboard style (chalk texture stroke))
- [만화 펜선 + 스크린톤](https://ai-techstudio.web.app/ai/t/i335.md): 양끝이 가늘고 가운데가 굵은 펜 선, 45° 격자 점으로 찍은 스크린톤 그늘, 가운데로 모이는 집중선과 충격 흔들림으로 만화 한 컷을 만든다. (Manga inking (tapered stroke))
- [목판화 · 판화 (깎은 선)](https://ai-techstudio.web.app/ai/t/i336.md): 픽셀마다 「어느 면 위인가」에 따라 굵기가 다른 줄무늬 홈을 계산하고 가장자리를 잡음으로 일그러뜨려, 칼로 판 목판을 찍은 흑백 판화처럼 그린다. (Woodcut / linocut print style)
- [손글씨 글자 흔들기](https://ai-techstudio.web.app/ai/t/i337.md): 글자를 하나씩 따로 그리며 기울기 · 크기 · 기준선 · 간격을 시드 난수로 살짝 달리해, 같은 글꼴이 손으로 쓴 글씨처럼 보이게 한다. (Handwriting jitter (per-glyph transform))
- [설계도 · 모눈 도면 (블루프린트)](https://ai-techstudio.web.app/ai/t/i339.md): 파란 종이에 모눈 · 접은 자국을 굽고 흰 선 · 치수선 · 화살표 · 손글씨 주석을 얹어, 전개도가 접히는 설계도(블루프린트)를 그린다. (Blueprint style (technical drawing))

## 물리 · 수학 원리 — 물리 시뮬레이션 · 구조 설명 · 수학 시각화를 만드는 방법
- [2D 물리 엔진 (Box2D · planck)](https://ai-techstudio.web.app/ai/t/u48.md): Box2D 의 JS 판 planck 으로 강체 · 마찰 · 관절 · 센서를 돌리고, 고정 시간 간격(0.02초)으로 나눠 계산해 — 같은 설정값이면 늘 같은 움직임이 나오게 한다. (Box2D (planck.js))
- [3D 강체 물리 (충돌 · 마찰 · 쌓기 — 직접 만든 엔진)](https://ai-techstudio.web.app/ai/t/i24.md): 상자 · 공의 접촉점을 찾고 충격량을 여러 번 되풀이해 맞춰, 주사위가 구르고 쌓은 나무 탑이 진짜처럼 무너지는 3D 물리를 라이브러리 없이 만든다. (Rigid body dynamics (sequential impulses))
- [3D 를 따라가는 이름표 · 지시선](https://ai-techstudio.web.app/ai/t/i38.md): 3D 부품의 한 점을 매 프레임 화면 좌표로 투영해 HTML 이름표와 SVG 지시선을 붙이고, 그 점이 다른 면에 가려지면 이름표를 흐리게 한다. (3D-anchored labels (Vector3.project))
- [그래프 + 3D 연동 (슬라이더 하나로)](https://ai-techstudio.web.app/ai/t/i39.md): 각도 θ 하나로 3D 피스톤과 옆 그래프를 함께 움직이고, 3D 피스톤 높이와 그래프 위 점을 선으로 이어 「같은 값」임을 보여 준다. (Linked views (3D model + graph))
- [광선 추적 광학 (2D)](https://ai-techstudio.web.app/ai/t/i40.md): 얇은 렌즈 공식 1/f = 1/a + 1/b 로 상의 자리를 구하고 대표 광선 셋을 렌즈에서 꺾어 그려, 물체가 움직이면 실상 · 허상이 생기는 과정을 보여 준다. (2D ray optics (thin lens))
- [층 벗기기 (해부)](https://ai-techstudio.web.app/ai/t/i43.md): 겹친 공 껍질을 바깥부터 한 겹씩 투명하게 바꿔, 지각 → 맨틀 → 외핵 → 내핵처럼 속 구조를 슬라이더 하나로 벗겨 본다. (Layer peeling (cutaway by transparency))
- [흐름선 · 입자 흐름](https://ai-techstudio.web.app/ai/t/i44.md): 날개 둘레 흐름 식(주코프스키 변환)으로 칸마다 속도를 구해 공기 알갱이 520개를 흘리고, 빠르기에 따라 노랑 · 흰 · 파랑 꼬리선으로 그린다. (Particle flow visualization (streaklines))
- [단계 이야기 (scrollytelling · 다음 단추)](https://ai-techstudio.web.app/ai/t/i45.md): 설명을 단계 목록(이름 · 글 · 카메라 자리 · 색)으로 적어 두고 「다음」을 누르면 카메라 · 부품 · 글이 그 단계로 부드럽게 넘어가게 한다. (Step-by-step explainer (scrollytelling))
- [GPU 유체 (stable fluids — 셰이더 핑퐁)](https://ai-techstudio.web.app/ai/t/i46.md): 속도 · 압력 · 잉크를 렌더 타깃 두 장씩(핑퐁)에 담고 이류 → 발산 → 압력 야코비 → 기울기 빼기를 셰이더 패스로 돌려, 손으로 저으면 잉크가 소용돌이치는 유체를 GPU 로 만든다. (Stable Fluids on GPU (Jos Stam · GPU Gems ch.38))
- [SPH · 입자 물](https://ai-techstudio.web.app/ai/t/i47.md): 물을 입자 500개로 두고, 이웃 입자와의 거리로 밀도를 재서 너무 몰리면 서로 밀어내게 해 — 수조를 기울이면 물처럼 출렁이게 한다. (SPH-style particle fluid (double density relaxation))
- [물결 파동 (높이 지도)](https://ai-techstudio.web.app/ai/t/i48.md): 물 높이를 격자(80×80)에 두고 「이웃 평균 × 2 − 이전 높이」로 매 프레임 갱신해, 물방울이 떨어지면 동심원이 퍼지고 서로 겹치며 바닥에 빛무늬가 생기게 한다. (Height-field water (2D wave equation))
- [무리 짓기 (boids)](https://ai-techstudio.web.app/ai/t/i50.md): 물고기 한 마리마다 「너무 가까우면 떨어지기 · 이웃과 같은 방향 · 이웃 가운데로」 세 규칙만 주면, 아무도 지휘하지 않는데 떼가 생긴다. (Boids (flocking))
- [화이트보드 그리기 애니메이션](https://ai-techstudio.web.app/ai/t/i79.md): 손떨림 · 굵기 변화가 있는 마커 선을 길이 비율만큼 그어 펜이 따라가며 그리게 하고, 글씨는 한 글자씩, 장면 끝은 지우개로 지우며 자막과 맞춘다. (Whiteboard animation (draw-on strokes))
- [내레이션 동기화 (낱말 시각표)](https://ai-techstudio.web.app/ai/t/i81.md): 내레이션을 낱말 단위 시각표로 — 그림 · 자막 · 목소리 · 음악이 같은 시계를 따라감 (음성 합성 speechSynthesis 또는 TTS 파일) (speechSynthesis)
- [영상으로 굽기 (헤드리스 브라우저 → mp4)](https://ai-techstudio.web.app/ai/t/i82.md): 장면 코드를 헤드리스 브라우저로 1/30초씩 시계를 돌려 프레임을 찍고 · 목소리 · 음악과 ffmpeg 로 묶어 mp4 — 홍보 영상 · 설명 영상 (mp4)
- [감독 투어 + 프레임 단위 녹화](https://ai-techstudio.web.app/ai/t/i89.md): 전시마다 이름 붙은 카메라 구도 · 커서 이동 · 실제 UI 클릭을 대본으로 → 시뮬레이션을 한 프레임씩 진행하며 녹화(Playwright + ffmpeg) — 느린 컴퓨터도 완벽한 60fps 영상 (Playwright)
- [도형 조각 잘라 옮기기 애니메이션](https://ai-techstudio.web.app/ai/t/i360.md): 도형을 조각으로 잘라 미끄러지듯 옮겨 다른 모양으로 맞추는 애니메이션 — 예: 평행사변형의 삼각형을 옮겨 직사각형으로. (Equal-area transformation (dissection))
- [접히는 전개도 (경첩 회전)](https://ai-techstudio.web.app/ai/t/i362.md): 전개도의 면마다 「부모 면과 맞닿은 변」을 경첩 축으로 정해 행렬을 부모에서 자식으로 곱해 내려가며 접어, 전개도가 입체로 접히고 안 되는 전개도는 겹친 면이 빨갛게 보이게 한다. (Hinged net folding (hierarchical transforms))
- [빈틈없이 까는 무늬 (테셀레이션)](https://ai-techstudio.web.app/ai/t/i365.md): 타일 하나의 꼭짓점을 격자 공식으로 만들어 평행 이동으로 이어 깔고 가운데부터 톡톡 튀어나오게 해, 한 꼭짓점에 모인 각의 합이 360° 일 때만 빈틈없이 덮이는 것을 보여 준다. (Tessellation (tiling))
- [반복 실험 시뮬레이션 (분포가 쌓이는 그래프)](https://ai-techstudio.web.app/ai/t/i380.md): 공 하나하나가 핀마다 왼쪽 · 오른쪽을 반반 확률로 실제로 골라 떨어지며 칸에 쌓이고, 그 막대 위에 이론 이항 분포 선을 겹쳐 반복 실험이 종 모양으로 모이는 것을 보여 준다. (Galton board (bean machine))
- [재귀로 그리는 도형 (프랙탈)](https://ai-techstudio.web.app/ai/t/i382.md): 도형 하나를 같은 규칙으로 쪼개는 함수를 자기 자신으로 다시 부르는 재귀로 시에르핀스키 삼각형 · 코흐 눈송이를 그리고, 무작위 점 찍기(카오스 게임)로도 같은 삼각형이 생기게 한다. (Recursive fractal drawing)

## 기계 · 구조 — 톱니 · 엔진 · 로봇 팔 같은 기계 장치와 분해도 · 조립 · 단면으로 구조를 보여 주는 방법
- [단면 자르기 (스텐실 단면 · 원뿔 곡선)](https://ai-techstudio.web.app/ai/t/i35.md): 평면으로 물체를 잘라 속을 보이고, 잘린 면은 스텐실로 셈해 평면 위에 진짜 평평한 단면(빗금)을 메운다 — 속 빈 관 · 겹친 입체도 정확히. (Stencil capping (cross-section cap))
- [분해도 (exploded view)](https://ai-techstudio.web.app/ai/t/i36.md): 부품마다 「제자리」와 「끼우는 축 방향의 펼친 자리」를 정해 조립 순서대로 미끄러뜨려, 기계가 분해됐다 다시 조립되는 분해도를 만든다. (Exploded view (assembly animation))
- [기구학 연결 (크랭크 · 인벌류트 톱니 · 캠)](https://ai-techstudio.web.app/ai/t/i37.md): 크랭크 각 θ 하나로 피스톤 · 인벌류트 톱니(16 : 32) · 캠 · 밀대 자리를 모두 식으로 계산해, 맞물림이 겹치지 않고 미끄러지듯 돌게 한다. (Involute gear profile (pressure angle 20°))
- [설명서 그림체 (액소노메트릭 일러스트)](https://ai-techstudio.web.app/ai/t/i70.md): 정사영 카메라 · 흰 단색 재질 · 가는 모서리 선으로 설명서처럼 그리고, 단계마다 이번 부품만 주황으로 떨어뜨리며 지시점 · 평면도 · 축척을 얹는다. (Instruction manual illustration (axonometric))
- [톱니바퀴 장치 (인벌류트 톱니 · 기어비 · 유성 기어)](https://ai-techstudio.web.app/ai/t/i540.md): 압력각 · 모듈 · 잇수로 톱니 윤곽을 계산해 돌출 + 모서리 깎기, 잇수 비대로 맞물려 돈다 — 유성 기어는 무엇을 고정하느냐로 비가 바뀜 (Gear train (involute gears))
- [4기통 엔진 단면 (크랭크 · 피스톤 · 캠 · 밸브)](https://ai-techstudio.web.app/ai/t/i541.md): 크랭크 각 하나로 피스톤 · 커넥팅 로드 · 캠축 · 밸브 위치를 모두 식으로, 블록 앞 절반을 잘라 속을 보여 줌 — 흡입 · 압축 · 폭발 · 배기 (Engine cutaway (inline-4))
- [산업용 로봇 팔 (회전체 관절 · 유압 실린더 · IK 집기)](https://ai-techstudio.web.app/ai/t/i542.md): 회전체와 모서리 깎은 돌출로 두툼한 관절 몸, 두 핀 사이 실린더가 늘고 줄며, 목표점까지 각을 식으로 풀어 상자를 집어 옮김 (Industrial robot arm)
- [터보팬 제트엔진 단면 (비틀린 날개 · 압축 단)](https://ai-techstudio.web.app/ai/t/i543.md): 뿌리에서 끝으로 비틀리는 날개 단면을 직접 만들어 원형 배열, 압축기 · 연소실 · 터빈을 반쪽 잘라 보이고 공기 흐름 입자로 (Turbofan jet engine cutaway)
- [굴착기 (무한궤도 링크 · 유압 실린더 · 4절 링크)](https://ai-techstudio.web.app/ai/t/i544.md): 트랙 링크 수십 개가 바퀴 둘레 경로를 따라 돌고, 붐 · 암 · 버킷 실린더가 두 핀 사이에서 늘고 줄며 흙을 퍼 옮김 (Excavator)
- [옆모습 윤곽 돌출 + 모서리 깎기 (베벨)](https://ai-techstudio.web.app/ai/t/i468.md): 모서리마다 반지름을 준 정확한 2D 윤곽을 두께로 돌출하고 테두리를 둥글게 깎아, 하드서피스 부품 모서리에 빛이 맺히게 한다. (Profile extrusion with bevel (ExtrudeGeometry))
- [부품 조립 (치수대로 맞추기)](https://ai-techstudio.web.app/ai/t/i469.md): 몸체 · 총열 · 레일 · 조준경 · 손잡이 · 탄창을 따로 만들어 치수로 조립 — 분해도로 펼쳤다 모으기 (Mechanical assembly)
- [나사 · 볼트 · 패널 이음선](https://ai-techstudio.web.app/ai/t/i470.md): 패널 이음선 · 환기구 · 각인은 높이 그림을 구운 법선 맵으로 새기고, 나사 58개는 InstancedMesh 로 한 번에 박아, 삼각형을 늘리지 않고 기계 디테일을 채운다. (Panel lines via baked normal map)

## 지도 · 길찾기 — 지도 만들기 · 격자와 좌표 · 길찾기 · 지도 보여 주기
- [잡음 섬 지도 (높이 → 생물군)](https://ai-techstudio.web.app/ai/t/i245.md): 잡음을 여러 겹 쌓아 높이를 만들고 가장자리를 낮춰 섬 모양으로, 높이 · 습도로 바다 · 모래 · 숲 · 눈을 색칠한다. (Procedural island map (fBm noise heightmap))
- [보로노이 지역 · 나라 나누기](https://ai-techstudio.web.app/ai/t/i246.md): 씨앗 점마다 가장 가까운 땅을 한 지역으로 나누고, 씨앗을 무게중심으로 옮기기를 되풀이해 지역 크기를 고르게 한다. (Voronoi diagram)
- [방 + 복도 던전 (BSP)](https://ai-techstudio.web.app/ai/t/i247.md): 공간을 반씩 쪼개는 나무(BSP)를 만들고 잎마다 방 하나, 형제 칸끼리 꺾인 복도로 이어 늘 연결된 던전을 만든다. (BSP dungeon generation (binary space partitioning))
- [동굴 (셀룰러 오토마타)](https://ai-techstudio.web.app/ai/t/i248.md): 무작위로 벽을 뿌린 뒤 「이웃 8칸 중 벽이 5개 이상이면 벽」 규칙을 몇 번 되풀이해, 자연스러운 동굴 모양을 만든다. (Cellular automata cave generation)
- [파동 함수 붕괴 (WFC) 타일 맞춤](https://ai-techstudio.web.app/ai/t/i249.md): 칸마다 「아직 될 수 있는 타일」을 남겨 두고, 가능성이 가장 적은 칸부터 하나씩 확정하며 이웃 규칙을 퍼뜨려 해안 · 숲이 저절로 이어진 지도를 만든다. (Wave Function Collapse (WFC))
- [미로 생성 (깊이 우선 · 크루스칼 · 윌슨)](https://ai-techstudio.web.app/ai/t/i250.md): 같은 크기 판을 깊이 우선 · 크루스칼 · 윌슨 세 알고리즘으로 파 내려가, 긴 복도 미로와 짧은 갈래 미로가 어떻게 다른지 나란히 보여 준다. (Maze generation (spanning tree))
- [강 흘려보내기 (내리막 따라)](https://ai-techstudio.web.app/ai/t/i251.md): 높이 지도의 웅덩이를 먼저 메운 뒤 칸마다 빗물 1 을 가장 낮은 이웃으로 넘겨 모으면, 물줄기가 합쳐져 강이 되고 메운 곳은 호수가 된다. (Flow accumulation (D8 drainage))
- [침식 지형 (물방울 침식)](https://ai-techstudio.web.app/ai/t/i253.md): 물방울 수만 개를 높이 지도 위에 굴려 비탈에서는 흙을 깎고 느려지면 쌓게 해서, 골짜기 · 능선 · 아래쪽 모래 부채꼴이 저절로 생긴 3D 지형을 만든다. (Hydraulic erosion (particle / droplet based))
- [포아송 원판 흩뿌리기](https://ai-techstudio.web.app/ai/t/i254.md): 이미 놓인 점 둘레 고리(r ~ 2r)에서만 새 점을 던져 서로 최소 거리를 지키게 해서, 나무 · 바위가 뭉치지도 비지도 않고 고르게 흩어진다. (Poisson disk sampling (Bridson))
- [시드 지도 (같은 수 = 같은 지도)](https://ai-techstudio.web.app/ai/t/i255.md): 지도를 만드는 모든 무작위를 시드 숫자 하나에서 뽑아, 같은 시드면 누가 어디서 만들어도 똑같은 섬이 나오고 한 자리만 달라도 전혀 다른 섬이 된다. (Seeded procedural generation)
- [육각 격자 좌표 (큐브 · 축)](https://ai-techstudio.web.app/ai/t/i256.md): 육각 칸을 (q, r, s) 세 수로 적고 늘 합을 0 으로 두어, 이웃 · 거리 · 고리 · 직선을 덧셈과 반올림만으로 구한다. (Hexagonal grid — cube coordinates (q, r, s))
- [아이소메트릭 (등각) 타일](https://ai-techstudio.web.app/ai/t/i257.md): 네모 격자를 45° 돌리고 세로를 반으로 눌러 비스듬한 화면으로 바꾸고, 뒤(x + y 작은 칸)부터 그려 겹침을 맞춘다. (Isometric projection (2:1 dimetric tiles))
- [자동 타일 (비트마스크 이음)](https://ai-techstudio.web.app/ai/t/i258.md): 땅 칸마다 이웃 4칸이 땅인지를 비트(위1 · 오른쪽2 · 아래4 · 왼쪽8)로 더해, 그 수에 맞는 가장자리 모양을 저절로 고른다. (Autotiling (bitmask tiling))
- [마칭 스퀘어 (등고선 · 경계)](https://ai-techstudio.web.app/ai/t/i259.md): 칸 네 귀가 기준보다 높은지 낮은지로 16가지 선 조각을 고르고 이어, 높이 지도에서 매끈한 해안선 · 등고선을 뽑는다. (Marching squares)
- [구면 → 평면 지도 투영](https://ai-techstudio.web.app/ai/t/i261.md): 같은 지구 윤곽을 등거리 원통 · 메르카토르 · 몰바이데 식으로 펴서 부드럽게 바꿔 보이고, 같은 크기 원과 넓이 비로 왜곡을 드러낸다. (Map projection (equirectangular · Mercator · Mollweide))
- [구 지도 (지구본 · 위도 경도)](https://ai-techstudio.web.app/ai/t/i262.md): 위도 · 경도를 지구본 위 3D 점으로 바꾸고, 두 도시를 구면 보간(slerp)으로 이어 가장 짧은 큰 원 길과 비행 곡선을 그린다. (Latitude/longitude to 3D (spherical coordinates))
- [A* 길찾기 (열린 · 닫힌 칸 보기)](https://ai-techstudio.web.app/ai/t/i264.md): 열린 칸(노랑)과 닫힌 칸(파랑)이 퍼지는 모습을 한 걸음씩 보여, A* · 다익스트라 · 탐욕 탐색이 길을 찾는 방식을 나란히 비교한다. (A* pathfinding (f = g + h))
- [흐름장 (많은 유닛 한꺼번에)](https://ai-techstudio.web.app/ai/t/i265.md): 목표에서 거꾸로 거리 지도를 한 번 만들고 칸마다 내리막 화살표를 두어, 수백 마리 유닛이 그 지도 하나만 보고 몰려가게 한다. (Flow field pathfinding)
- [다익스트라 비용 지도 (지형 비용)](https://ai-techstudio.web.app/ai/t/i266.md): 길 1 · 풀 2 · 모래 3 · 늪 5 처럼 칸마다 비용이 다른 지도에 다익스트라를 돌려, 같은 시간 선(등시선)이 지형 따라 퍼지는 모습을 그린다. (Dijkstra's algorithm with terrain cost (weighted grid))
- [내비 메시 (다각형 길찾기)](https://ai-techstudio.web.app/ai/t/i267.md): 걸을 수 있는 땅을 들로네 삼각형으로 나누고, 삼각형 줄을 A* 로 찾은 뒤 깔때기 알고리즘으로 당겨 모서리를 스치는 곧은 길을 만든다. (Navigation mesh (navmesh))
- [시야 · 가림 (그림자 던지기 FOV)](https://ai-techstudio.web.app/ai/t/i268.md): 칸 지도에서 여덟 조각으로 그림자 던지기를 해 벽 뒤는 안 보이게 하고, 횃불 반경 안만 밝게 · 이미 본 칸은 흐리게 기억해 보여 준다. (Field of view — recursive shadowcasting)
- [외판원 순회 (배달 길 최적화)](https://ai-techstudio.web.app/ai/t/i269.md): 여러 집을 한 번씩 도는 배달 길을 가까운 곳부터 고르는 욕심 길로 만들고, 엇갈린 두 길을 풀어 잇는 2-opt 로 점점 짧게 다듬는다. (Traveling salesman problem (TSP))
- [그래프 지도 (노선도 · 지하철)](https://ai-techstudio.web.app/ai/t/i270.md): 역을 점 · 노선을 선으로 둔 그래프에서 환승이 가장 적은 길을 찾고, 구불구불한 실제 지도를 곧은 노선도로 부드럽게 바꿔 보인다. (Transit map (schematic diagram))
- [미니맵 (작은 지도 + 시야 틀)](https://ai-techstudio.web.app/ai/t/i271.md): 큰 화면은 캐릭터 둘레만 확대해 따라가고, 구석 작은 지도에 섬 전체 · 내 위치 · 보이는 범위 틀 · 깜박이는 목표를 함께 그린다. (Minimap)
- [확대 · 끌기 지도 (슬리피 맵 · 타일 층)](https://ai-techstudio.web.app/ai/t/i272.md): 세계를 확대 단계(z)마다 2ᶻ × 2ᶻ 타일로 나눠 보이는 타일만 그때그때 만들어 끼우고, 아직 없는 타일은 윗단계 그림을 늘려 임시로 채운다. (Slippy map (tiled web map, z/x/y))
- [보물 지도 그림체 (양피지)](https://ai-techstudio.web.app/ai/t/i273.md): 양피지 결 · 얼룩 · 접힌 자국 · 탄 가장자리를 코드로 구워 깔고, 그 위에 잉크 점선 길이 깃펜 끝을 따라 그려지다 X 표로 끝나게 한다. (Treasure map style (parchment texture))
- [디오라마 지도 (3D 섬 판)](https://ai-techstudio.web.app/ai/t/i275.md): 높이 지도를 칸마다 블록 기둥으로 쌓아 계단식 섬 판을 만들고, 옆면에 지층 줄무늬 · 둘레에 물 찬 유리 상자를 둔다. (Diorama map (voxel terraced terrain))
- [등치 지도 (색칠 통계 지도)](https://ai-techstudio.web.app/ai/t/i277.md): 지역마다 값을 같은 간격 몇 단계로 나눠 색칠하고 범례로 읽게 하며, 자료를 바꿀 때 색이 부드럽게 넘어가고 마우스를 댄 지역 값이 뜬다. (Choropleth map)
- [열 지도 (히트맵)](https://ai-techstudio.web.app/ai/t/i278.md): 누른 자리마다 가우스 번짐을 작은 격자에 더해 쌓고, 가장 뜨거운 값으로 나눈 세기를 색 사다리로 칠해 많이 눌린 곳이 빨갛게 빛나게 한다. (Heatmap (kernel density))
- [등고선 3D 지형 (높이 띠)](https://ai-techstudio.web.app/ai/t/i279.md): 지형 높이를 셰이더에서 간격으로 나눠 높이별 색 띠와 늘 같은 굵기의 등고선을 그리고, 오르내리는 물 높이와 만나는 선을 빛나게 한다. (Contour lines in fragment shader (fract + fwidth))
- [육각 타일 행성 (골드버그 다면체)](https://ai-techstudio.web.app/ai/t/i539.md): 정이십면체를 잘게 나눈 구의 쌍대를 만들어, 육각형 칸과 늘 12개뿐인 오각형 칸으로 덮인 행성을 짓고 칸마다 이웃 · 높이를 준다. (Goldberg polyhedron (hex sphere))

## 소리 — 파일 없이 코드로 만드는 효과음 · 배경음악 · 공간 소리
- [배경음악 넣기 (반복 · 페이드 · 켜고 끄기)](https://ai-techstudio.web.app/ai/t/u77.md): 게임마다 곡을 정해 이음새 없이 반복하고, 열 때 서서히 · 장면이 바뀌면 부드럽게 갈아 끼우고 · 탭을 숨기면 멈추고 · 소리 단추로 끈다. (Background music (looping HTMLAudioElement))
- [읽어 주기 (음성 합성)](https://ai-techstudio.web.app/ai/t/u78.md): 브라우저 음성 합성으로 게임 방법 글을 문장마다 끊어 소리 내어 읽고, 읽는 낱말을 밝혀 글을 아직 못 읽는 아이도 따라오게 한다. (Web Speech API — speechSynthesis)
- [공간 소리 (PannerNode)](https://ai-techstudio.web.app/ai/t/i31.md): PannerNode 로 소리에 3D 자리를 주고 그 자리를 시간에 따라 옮겨, 공이 왼쪽에서 오른쪽으로 날면 소리도 왼쪽 귀에서 오른쪽 귀로 옮겨 간다. (Spatial audio — Web Audio PannerNode)
- [소리 보기 (Web Audio FFT)](https://ai-techstudio.web.app/ai/t/i52.md): 두 음을 실제로 울려 AnalyserNode 의 FFT 로 주파수 막대를 그리고 파형을 겹쳐, 맥놀이 · 화음 비(2:3)가 눈으로 보이게 한다. (FFT spectrum — Web Audio AnalyserNode)
- [절차 음악 · 소리 (파일 없음)](https://ai-techstudio.web.app/ai/t/i77.md): 도리아 음계 위에서 가락을 그때그때 지어 수금처럼 뜯고 낮은 드론을 깔아, 소리 파일 하나 없이 끝나지 않는 배경음악을 실시간으로 합성한다. (Procedural / generative music (Web Audio))
- [정답 아르페지오 (조성 맞춤)](https://ai-techstudio.web.app/ai/t/i141.md): 배경음악과 같은 조의 1 · 3 · 5 · 8 음을 70ms 간격으로 차례로 울려, 정답 소리가 어느 곡 위에서도 늘 어울리게 한다. (Arpeggio (major triad + octave))
- [음계 양자화 (값 → 음)](https://ai-techstudio.web.app/ai/t/i143.md): 0 ~ 100 같은 어떤 값이든 세 옥타브의 5음계 음 15개 중 하나로 맞춰 울려, 큰 수는 높은 음이 되고 아무렇게나 쳐도 음이 어긋나지 않는다. (Pitch quantization (scale snapping))
- [말소리 옹알이 (글자마다 짧은 음)](https://ai-techstudio.web.app/ai/t/i145.md): 대사 글자마다 짧은 톱니파 블립을 내되 글자 코드로 음 높이를 · 한글 모음으로 두 공명 필터를 바꿔, 녹음 없이 캐릭터가 「옹알옹알」 말하는 소리를 만든다. (Gibberish voice / babble (Animal Crossing-like speech))
- [반복 피로 막기 (라운드 로빈)](https://ai-techstudio.web.app/ai/t/i147.md): 자주 나는 소리를 변형 3개로 돌려 쓰고 매번 속도 1±0.05 · 크기 ±2dB 를 살짝 흔들어, 같은 「톡」이 기계처럼 똑같이 반복되지 않게 한다. (Round-robin sample variation)
- [층 쌓기 (타격 + 몸통 + 꼬리)](https://ai-techstudio.web.app/ai/t/i148.md): 효과음 하나를 짧은 잡음 타격 · 내려가는 몸통 · 잔향 꼬리 세 층으로 나눠 층마다 따로 사라지게 해서, 도장 「쾅」이 또렷하면서도 묵직하게 들린다. (Layered sound design (transient + body + tail))
- [엔진 소리 (속도 연동)](https://ai-techstudio.web.app/ai/t/i156.md): 엔진 회전수에서 기본 음(rpm/60 × 실린더 수 ÷ 2)을 계산해 톱니 · 네모 · 사인 배음과 잡음을 필터로 섞고, 속도가 오르면 음 높이와 밝기가 함께 올라가게 한다. (Procedural engine sound (RPM-driven synthesis))
- [도플러 「니이이용」](https://ai-techstudio.web.app/ai/t/i157.md): 지나가는 차의 거리 · 다가오는 속도를 미리 곡선으로 계산해 음 높이(f × c/(c + v)) · 크기 · 좌우를 함께 바꿔, 다가올 땐 높고 지나가면 낮아지는 「니이이용」을 만든다. (Doppler effect)
- [가림 저역 필터 (벽 뒤 소리)](https://ai-techstudio.web.app/ai/t/i158.md): 벽 뒤에 있는 소리를 저역 필터에 통과시켜 고음을 자르고 크기를 줄여, 같은 가락이 벽 너머에서 먹먹하게 들리게 한다. (Sound occlusion (low-pass filtering))
- [방 크기 잔향](https://ai-techstudio.web.app/ai/t/i159.md): 지수로 사라지며 점점 먹먹해지는 잡음을 코드로 만들어 ConvolverNode 의 울림으로 쓰고, 꼬리 길이(방 크기)와 섞는 양으로 작은 방 ~ 큰 동굴 느낌을 낸다. (Convolution reverb — ConvolverNode)
- [메아리 · 딜레이 「야호~」](https://ai-techstudio.web.app/ai/t/i160.md): 소리를 DelayNode 로 늦춰 되먹임(0.6 아래)으로 돌리고 고리 안에 저역 필터를 넣어, 「야호~」 메아리가 점점 작고 먹먹하게 되돌아오게 한다. (Feedback delay (echo) — DelayNode)
- [박자 검출 · 반응 그림](https://ai-techstudio.web.app/ai/t/i163.md): 음악의 150Hz 아래 저음 에너지를 매 프레임 재서 최근 평균의 1.35배를 넘으면 「박」으로 잡아, 그림이 음악에 맞춰 통통 튀게 한다. (Beat detection (energy-based onset detection))
- [오디오 스프라이트](https://ai-techstudio.web.app/ai/t/i164.md): 효과음 여러 개를 틈을 두고 버퍼(파일) 하나에 이어 붙이고 시작 위치 · 길이 표를 둬서, start(때, 시작, 길이) 로 골라 재생해 받기 요청을 5번에서 1번으로 줄인다. (Audio sprite)
- [채널 버스 · 음량 조절](https://ai-techstudio.web.app/ai/t/i165.md): 모든 소리를 음악 · 효과음 · 목소리 · 환경음 버스로 나눠 주 음량 → 가벼운 리미터로 모으고, 버스마다 음량을 조절 · 저장해 소리 균형을 사용자가 맞추게 한다. (Mixer buses (submix groups))
- [그레인 합성](https://ai-techstudio.web.app/ai/t/i169.md): 짧은 소리를 20 ~ 80ms 알갱이로 잘라 한 개씩 부드러운 창을 씌워 초당 수십 개 흩뿌려, 짧은 녹음으로도 끝없이 이어지는 신비한 환경음을 만든다. (Granular synthesis)
- [코드로 효과음 합성 (견본판 70가지)](https://ai-techstudio.web.app/ai/t/i499.md): 소리 파일 없이 발진기 · 잡음 · 필터 · 소리 크기 봉투를 엮어 동전 · 점프 · 폭발 같은 효과음을 코드로 만든다. (Procedural SFX synthesis (Web Audio API))
- [배경음악 층 쌓기 (층마다 켜고 끄기)](https://ai-techstudio.web.app/ai/t/i435.md): 북 · 베이스 · 화음 · 멜로디를 같은 박자 시계로 늘 함께 울리고 층마다 음량만 켜고 꺼서, 음악이 끊기지 않고 상황에 따라 분위기만 바뀐다. (Vertical layering (vertical remixing))
- [긴장에 따라 바뀌는 음악 (적응형)](https://ai-techstudio.web.app/ai/t/i436.md): 긴장 값 하나(0 평온 ~ 1 위기)로 빠르기 · 필터 밝기 · 음 높이 · 층 수를 함께 바꿔, 남은 시간이 줄수록 음악이 빨라지고 밝아지고 올라간다. (Adaptive music (intensity parameter))
- [소리 낮추기 (덕킹)](https://ai-techstudio.web.app/ai/t/i437.md): 안내 말소리 · 중요한 효과음이 나오는 동안만 배경음악 음량을 −14dB 쯤 쑥 낮췄다가 끝나면 천천히 되돌려, 말이 음악에 묻히지 않게 한다. (Audio ducking)
- [박자 맞춰 연출 (비트 동기)](https://ai-techstudio.web.app/ai/t/i438.md): 화면 연출의 시계를 음악이 실제로 예약된 박자 자리에서 읽어, 공이 땅에 닿는 순간 · 별 터짐을 박에 딱 맞추고 제멋대로 타이머처럼 어긋나지 않게 한다. (Beat-synced visuals (music clock))

## 조합 레시피 (Recipes)
- [블렌더 없이 기계 원리 영상](https://ai-techstudio.web.app/ai/recipes/mech-explainer-video.md): 코드로 만든 기계 부품을 반 잘라 속을 보이고, 경로 추적으로 사진처럼 한 프레임씩 구워 mp4 로 — 유튜브 설명 영상
- [쿼터뷰 던전](https://ai-techstudio.web.app/ai/recipes/quarter-dungeon.md): 비스듬히 내려다보는 어두운 던전 — 횃불 빛 · 실사 돌 · 가리는 벽 비우기 · 시야 안개 · 카메라 충돌 · 스킬 연출
- [점토 캐릭터 걷게 하기](https://ai-techstudio.web.app/ai/recipes/clay-walker.md): 코드로 빚은 점토 곰돌이에 뼈를 심고 가중치를 입혀, 애니메이션 파일 없이 걷고 귀가 출렁이고 표정이 바뀌게
- [그림 한 장으로 도트 보스](https://ai-techstudio.web.app/ai/recipes/pixel-boss.md): AI 로 뽑은 도트 캐릭터 한 장을 정리하고, 부위를 오려 숨쉬기 · 공격 · 맞음 · 사라지기 · 분노까지 — 프레임을 따로 그리지 않고

## Optional
- 효과 예시 83개 (같은 방법으로 만든 다른 모양) — index.json 에서 `of` 가 있는 항목