# ๐ŸŽจ Visual Feedback & Signal Pattern (์‹œ๊ฐ์  ํ”ผ๋“œ๋ฐฑ ๋ฐ ์‹ ํ˜ธ ํŒจํ„ด) > **์นดํ…Œ๊ณ ๋ฆฌ**: Skybound, UI-UX, Graphics & Performance > **์ƒํƒœ**: ๐Ÿ”ต ํ‘œ์ค€ํ™” ์™„๋ฃŒ (Standardized) > **์ตœ์ข… ์—…๋ฐ์ดํŠธ**: 2026-04-22 --- ## ๐Ÿ“Œ ๊ฐœ์š” (Overview) Skybound์˜ ๋ Œ๋”๋ง ์‹œ์Šคํ…œ์€ ๊ฒŒ์ž„ ๋กœ์ง(ModularWeaponSystem ๋“ฑ)๊ณผ ๋ Œ๋”๋Ÿฌ(GameRenderer) ๊ฐ„์˜ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๊ธฐ ์œ„ํ•ด 'Auto-decay Signal Pattern'์„ ์‚ฌ์šฉํ•œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ณต์žกํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ƒํƒœ ๊ด€๋ฆฌ ์—†์ด๋„ ํ™”๋ คํ•œ ํŠน์ˆ˜ ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•œ๋‹ค. ## ๐Ÿ› ๏ธ ํ•ต์‹ฌ ๋””์ž์ธ ํŒจํ„ด (Core Patterns) ### 1. Auto-decay Signal Pattern - **์ž‘๋™ ์›๋ฆฌ**: ๋กœ์ง ์‹œ์Šคํ…œ์—์„œ ์‹œ๊ฐ ํšจ๊ณผ๊ฐ€ ํ•„์š”ํ•  ๋•Œ, ๊ณต์œ  `state` ๊ฐ์ฒด์— ์งง์€ ์ƒ๋ช…์ฃผ๊ธฐ(timer)๋ฅผ ๊ฐ€์ง„ ์‹ ํ˜ธ ๊ฐ์ฒด๋ฅผ ๊ธฐ๋กํ•œ๋‹ค. - **์˜ˆ์‹œ (Nova Burst)**: ```typescript state.novaBurstRingEffect = { x, y, radius, level, timer: 20 }; ``` - **๋ Œ๋”๋Ÿฌ ๋™์ž‘**: `GameRenderer`๋Š” ๋งค ํ”„๋ ˆ์ž„ ํ•ด๋‹น ์‹ ํ˜ธ๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ณ , ์žˆ์œผ๋ฉด ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฐ ๋’ค `timer--`๋ฅผ ์ˆ˜ํ–‰ํ•œ๋‹ค. ํƒ€์ด๋จธ๊ฐ€ 0์ด ๋˜๋ฉด ์‹ ํ˜ธ๋Š” ์ž์—ฐ ์†Œ๋ฉธํ•œ๋‹ค. - **์žฅ์ **: ๋กœ์ง๊ณผ ๋ Œ๋”๋ง ๋ ˆ์ด์–ด์˜ ์™„๋ฒฝํ•œ ๋ถ„๋ฆฌ, ์‹œ์Šคํ…œ ๊ฐ„ ์˜์กด์„ฑ ์ตœ์†Œํ™”. ### 2. Multi-Layer Canvas Compositing ํ™”๋ คํ•œ ์—ฐ์ถœ์„ ์œ„ํ•ด ๋‹จ์ผ `arc`๊ฐ€ ์•„๋‹Œ ์—ฌ๋Ÿฌ ๋ ˆ์ด์–ด์˜ ํ•ฉ์„ฑ(Compositing)์„ ์‚ฌ์šฉํ•œ๋‹ค. - **Base Layer**: ์ค‘์‹ฌ์ ์—์„œ์˜ ๊ฐ•ํ•œ ํ”Œ๋ž˜์‹œ (Radial Gradient). - **Shockwave Layer**: ์‹œ๊ฐ„์— ๋”ฐ๋ผ ํ™•์žฅ๋˜๋ฉฐ ์–‡์•„์ง€๋Š” ๋ฉ”์ธ ๋ง. - **Spike/Particle Layer**: ๋ฐฉํ–ฅ์„ฑ์„ ๊ฐ€์ง„ ์ŠคํŒŒ์ดํฌ ๋ผ์ธ ๋ฐ ํŒŒํ‹ฐํด ๋ฐฉ์ถœ. - **Color Branching**: ์ผ๋ฐ˜ ์Šคํ‚ฌ์€ ์ฒญ๋ก(#00e5ff), EVO ์Šคํ‚ฌ(Nova Guardian)์€ ํ™ฉ๊ธˆ(#ffd700) ํŒ”๋ ˆํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์œ„๊ณ„ ์ฐจ๋ณ„ํ™”. ### 3. Screen Shake & Damage Text - **Shake Intent**: ๊ฐ•๋ ฅํ•œ ํƒ€๊ฒฉ ์‹œ `SCREEN_SHAKE` ์ธํ…ํŠธ๋ฅผ ๋ฐœํ–‰ํ•˜์—ฌ ์นด๋ฉ”๋ผ ์ขŒํ‘œ์— ๋…ธ์ด์ฆˆ๋ฅผ ๊ฐ€์‚ฐ. - **Floating Text**: ํš๋“ ๋ณด์ƒ(Gold, Pass Points)์ด๋‚˜ ๋ฐ๋ฏธ์ง€๋ฅผ ์ƒ‰์ƒ๋ณ„๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ํ”Œ๋กœํŒ… ํ…์ŠคํŠธ๋กœ ์ฒ˜๋ฆฌ. ## ๐Ÿ’ก ์„ฑ๋Šฅ ์ตœ์ ํ™” (Optimization) - ๋ชจ๋“  ๋ Œ๋”๋ง์€ `Canvas 2D API`์˜ `globalAlpha`์™€ `save/restore` ์Šคํƒ์„ ํ™œ์šฉํ•˜์—ฌ ์ƒํƒœ ์˜ค์—ผ์„ ๋ฐฉ์ง€ํ•˜๊ณ  ์„ฑ๋Šฅ ๋ถ€ํ•˜๋ฅผ ์ตœ์†Œํ™”ํ•จ. --- **์Šน์ธ์ธ**: AI ๊ฐœ๋ฐœ๋ถ€์žฅ ์ฝ”๋‹ค๋ฆฌ ๐Ÿซก **๊ด€๋ จ ์ฝ”๋“œ**: `GameRenderer.ts`, `ModularWeaponSystem.ts`, `useGameEngine.ts`