Vanilla JS์ SVG Math๋ฅผ ์ด์ฉํ Zero-Backend ํ์ ๋ฐ์๊ตญ ์๊ฐํ ๊ตฌํ
I Built a Carbon Footprint Calculator That Generates Unique SVG Fingerprints โ Hereโs How (Earth Day 2026 ๐)
AI ์์ฝ
Context
๊ธฐ์กด ํ์ ๊ณ์ฐ๊ธฐ์ ์ ํํ๋ ํผ ์ ๋ ฅ ๋ฐฉ์๊ณผ ๋จ์ ์์น ๊ฒฐ๊ณผ ์ ๊ณต์ผ๋ก ์ธํ ๋ฎ์ ์ฌ์ฉ์ ๊ฒฝํ ๋ฐ ๊ณต์ ๊ฐ์น ํ๊ณ. ๋ณต์กํ ํ๋ ์์ํฌ ๋์ ์ ๋ฐ์ํ๋ ์ค๋ฒํค๋ ์์ด ๊ณ ์ ํ ์๊ฐ์ ์ ์ฒด์ฑ์ ์ ๊ณตํ๋ ๊ฒฝ๋ ์ํคํ ์ฒ ํ์์ฑ ๋๋.
Technical Solution
- ์ฌ์ฉ์ ์๋ต ๊ฐ์ Seed๋ก ํ์ฉํ Procedural Generation ๊ธฐ๋ฐ์ ์ ๋ํฌํ SVG Fingerprint ๋ ๋๋ง ๊ตฌ์กฐ ์ค๊ณ
- 3์ค Sine Wave Perturbation ๋ก์ง์ ์ ์ฉํ์ฌ ๋์ฌ์ ํํ์ ์ ๊ธฐ์ ์ง๋ฌธ ํจํด์ ์์ฑํ๋ ์ํ์ ๋ชจ๋ธ ๊ตฌํ
- IPCC AR6 ๋ฐ NASA GISS์ ์ ๋์ ๋ฐ์ดํฐ์ ์ JSON ํํ๋ก ๋ด์ฅํ์ฌ ์๋ฒ ํต์ ์๋ Client-side ์ฐ์ฐ ์ฒ๋ฆฌ
- CSS stroke-dashoffset ์ ๋๋ฉ์ด์ ๊ณผ Staggered Delay ๊ธฐ๋ฒ์ ํตํ SVG ๊ฒฝ๋ก์ ์ ์ง์ ๋๋ก์ ํจ๊ณผ ๊ตฌํ
- Single HTML ํ์ผ ๊ตฌ์กฐ๋ฅผ ์ฑํํ์ฌ Build Step๊ณผ Dependency๋ฅผ ์์ ํ ์ ๊ฑฐํ Zero-Config ๋ฐฐํฌ ์ ๋ต ์๋ฆฝ
- PWA Manifest ์ ์ฉ ๋ฐ ๋ฐ์ดํฐ ์๋ฒ ๋ฉ์ ํตํ ์์ ํ Offline-first ํ๊ฒฝ ๊ตฌ์ถ
์ค์ฒ ํฌ์ธํธ
1. ๋จ์ ์ํ ๊ด๋ฆฌ์ ์ ์ ๋ฐ์ดํฐ ์ค์ฌ ์ฑ์ ๊ฒฝ์ฐ Framework-less ์ค๊ณ ๊ฒํ
2. ์๊ฐ์ ๋ฐ์ดํฐ ํํ ์ Canvas ๋์ SVG๋ฅผ ์ฌ์ฉํ์ฌ ์ ๊ทผ์ฑ(ARIA) ๋ฐ ๋ฒกํฐ ํด์๋ ํ๋ณด
3. ์ธ๋ถ API ์์กด์ฑ์ ์ค์ด๊ธฐ ์ํด ์ ๋ขฐํ ์ ์๋ ๋ฐ์ดํฐ์ ์ ๋ด์ฅ(Embedded) ๊ฐ๋ฅ ์ฌ๋ถ ํ๋จ
4. ์ฌ์ฉ์ ๊ฒฝํ ์ฐจ๋ณํ๋ฅผ ์ํด ์ ์ ๊ฒฐ๊ณผ๊ฐ ๋์ ์ ๋ ฅ๊ฐ ๊ธฐ๋ฐ์ ์๊ณ ๋ฆฌ์ฆ ์์ฑํ ์๊ฐํ ๋์