๐ ํ์ฐ ๋ถ์ถ ์๋ฎฌ๋ ์ด์ : ์ง์งํ ๋ค์ด์ด๊ทธ๋จ์ ์ธํฐ๋ํฐ๋ธ ๋ฒกํฐ ์ ๋๋ฉ์ด์ ์ผ๋ก
์๋ ํ์ธ์, ์ง์งํ ์ ํธ๊ฐ ์ฌ๋ฌ๋ถ! ์ค๋์ ์ ๋ง ํฅ๋ฏธ์ง์งํ ์ฃผ์ ๋ก ์ฌ๋ฌ๋ถ์ ๋ชจ์ จ์ต๋๋ค. ๋ฐ๋ก ํ์ฐ ๋ถ์ถ ์๋ฎฌ๋ ์ด์ ์ ์ธํฐ๋ํฐ๋ธ ๋ฒกํฐ ์ ๋๋ฉ์ด์ ์ผ๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณผ ๊ฑฐ์์. ๐จโจ ์ด ๊ธ์ ํตํด ์ฌ๋ฌ๋ถ์ ์ง์งํ์ ๋ณต์กํ ๊ฐ๋ ์ ์๊ฐ์ ์ผ๋ก ๋ฉ์ง๊ฒ ํํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๊ฒ ๋ ๊ฒ๋๋ค. ๋ง์น ํ์ฐ์ด ํญ๋ฐํ๋ฏ ์ฌ๋ฌ๋ถ์ ์ฐฝ์๋ ฅ๋ ํญ๋ฐํ ์ค๋น๊ฐ ๋์ จ๋์? ๊ทธ๋ผ ์์ํด๋ณผ๊น์!
๐ ์์๋์ธ์: ์ด ๊ธ์ ์ฌ๋ฅ๋ท(https://www.jaenung.net)์ '์ง์์ธ์ ์ฒ' ๋ฉ๋ด์ ๋ฑ๋ก๋ ์์ ์ ๋๋ค. ์ฌ๋ฅ๋ท์ ๋ค์ํ ์ฌ๋ฅ์ ๊ฑฐ๋ํ๋ ํ๋ซํผ์ผ๋ก, ์ฌ๋ฌ๋ถ์ ์ง์๊ณผ ๊ธฐ์ ์ ๋๋๊ณ ์ฑ์ฅํ ์ ์๋ ํ๋ฅญํ ๊ณต๊ฐ์ ๋๋ค.
1. ํ์ฐ ๋ถ์ถ์ ๊ธฐ์ด: ์ง์งํ์ ์ดํด
ํ์ฐ ๋ถ์ถ ์๋ฎฌ๋ ์ด์ ์ ์์ํ๊ธฐ ์ ์, ๋จผ์ ํ์ฐ ๋ถ์ถ์ ๊ธฐ๋ณธ์ ์ธ ๋ฉ์ปค๋์ฆ์ ์ดํดํด์ผ ํฉ๋๋ค. ํ์ฐ์ ์ง๊ตฌ ๋ด๋ถ์ ๋ง๊ทธ๋ง๊ฐ ์งํ๋ฉด์ผ๋ก ๋ถ์ถ๋๋ ํ์์ ๋งํฉ๋๋ค. ์ด ๊ณผ์ ์ ๋งค์ฐ ๋ณต์กํ๊ณ ๋ค์ํ ์์ธ๋ค์ด ์์ฉํ์ง๋ง, ์ฐ๋ฆฌ์ ์๋ฎฌ๋ ์ด์ ์ ์ํด ํต์ฌ์ ์ธ ์์๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
- ๋ง๊ทธ๋ง์ ํ์ฑ: ์ง๊ตฌ ๋ด๋ถ์ ๊ณ ์จ, ๊ณ ์ ํ๊ฒฝ์์ ์์์ด ๋ น์ ํ์ฑ
- ๋ง๊ทธ๋ง์ ์์น: ๋ฐ๋ ์ฐจ์ด์ ์๋ ฅ์ผ๋ก ์ธํด ์งํ๋ฉด์ผ๋ก ์์น
- ํ์ฐ ๋ถ์ถ: ๋ง๊ทธ๋ง๊ฐ ์งํ๋ฉด์ ๋๋ฌํ์ฌ ๋ถ์ถ
- ํ์ฐ ๊ตฌ์กฐ ํ์ฑ: ๋ถ์ถ๋ ๋ฌผ์ง์ด ์์ฌ ํ์ฐ์ฒด ํ์ฑ
์ด๋ฌํ ๊ณผ์ ์ ์๊ฐํํ๊ธฐ ์ํด, ์ฐ๋ฆฌ๋ SVG(Scalable Vector Graphics)๋ฅผ ์ฌ์ฉํ ๊ฒ์ ๋๋ค. SVG๋ ๋ฒกํฐ ๊ธฐ๋ฐ์ ๊ทธ๋ํฝ์ ํํํ๋ XML ํฌ๋งท์ผ๋ก, ํ๋ํด๋ ๊นจ์ง์ง ์๋ ์ ๋ช ํ ์ด๋ฏธ์ง๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ๊ฒ๋ค๊ฐ ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ฝ๊ฒ ์ ์ฉํ ์ ์์ด, ๋์ ์ธ ํ์ฐ ๋ถ์ถ ๊ณผ์ ์ ํํํ๊ธฐ์ ๋ฑ ๋ง์ฃ !
์์ SVG ์ ๋๋ฉ์ด์ ์ ํ์ฐ ๋ถ์ถ์ ๊ธฐ๋ณธ์ ์ธ ๊ตฌ์กฐ๋ฅผ ๋ณด์ฌ์ค๋๋ค. ๋ง๊ทธ๋ง ์ฑ๋ฒ์์ ์์๋ ๋ง๊ทธ๋ง๊ฐ ์์นํ์ฌ ์งํ๋ฉด์ผ๋ก ๋ถ์ถ๋๋ ๊ณผ์ ์ ๊ฐ๋จํ๊ฒ ํํํ์ต๋๋ค. ์ด์ ์ด ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ๋ฐํ์ผ๋ก, ๋ ๋ณต์กํ๊ณ ์์ธํ ์๋ฎฌ๋ ์ด์ ์ ๋ง๋ค์ด ๋ณผ ๊ฑฐ์์.
2. SVG ๊ธฐ์ด: ๋ฒกํฐ ๊ทธ๋ํฝ์ ์ธ๊ณ
SVG๋ฅผ ์ฌ์ฉํ์ฌ ํ์ฐ ๋ถ์ถ ์๋ฎฌ๋ ์ด์ ์ ๋ง๋ค๊ธฐ ์ ์, SVG์ ๊ธฐ๋ณธ ๊ฐ๋ ๊ณผ ์์๋ค์ ๊ฐ๋จํ ์ดํด๋ณด๊ฒ ์ต๋๋ค. SVG๋ XML ๊ธฐ๋ฐ์ ๋ฒกํฐ ์ด๋ฏธ์ง ํฌ๋งท์ผ๋ก, ์น์์ ํ์ฅ ๊ฐ๋ฅํ ๊ทธ๋ํฝ์ ๋ง๋๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
SVG์ ์ฃผ์ ์ฅ์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ํ์ฅ์ฑ: ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝํด๋ ํ์ง ์์ค์ด ์์ต๋๋ค.
- ํ ์คํธ ํธ์ง ๊ฐ๋ฅ: SVG ๋ด์ ํ ์คํธ๋ ๊ฒ์ ์์ง์ด ์ฝ์ ์ ์์ต๋๋ค.
- ์์ ํ์ผ ํฌ๊ธฐ: ๋ณต์กํ ๊ทธ๋ํฝ๋ ์๋์ ์ผ๋ก ์์ ํ์ผ ํฌ๊ธฐ๋ก ํํ ๊ฐ๋ฅํฉ๋๋ค.
- ์ ๋๋ฉ์ด์ ์ง์: CSS๋ JavaScript๋ฅผ ์ฌ์ฉํด ์ฝ๊ฒ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ ์ ์์ต๋๋ค.
SVG์ ๊ธฐ๋ณธ ์์๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
<svg width="800" height="600" viewBox="0 0 800 600">
<!-- SVG ๋ด์ฉ -->
</svg>
์ด๊ฒ์ด SVG์ ๊ธฐ๋ณธ ๊ตฌ์กฐ์ ๋๋ค. width์ height๋ SVG์ ํฌ๊ธฐ๋ฅผ, viewBox๋ SVG ์ขํ ์์คํ ์ ์ ์ํฉ๋๋ค.
์ฃผ์ SVG ๋ํ ์์:
- <rect>: ์ง์ฌ๊ฐํ
- <circle>: ์
- <ellipse>: ํ์
- <line>: ์
- <polyline>: ์ฐ๊ฒฐ๋ ์ง์ ๋ค
- <polygon>: ๋ค๊ฐํ
- <path>: ๋ณต์กํ ๊ฒฝ๋ก
์ด์ ์ด ์์๋ค์ ์ฌ์ฉํด ๊ฐ๋จํ ํ์ฐ ๋ชจํ์ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค:
์ด ์์ ์์๋ ๋ค์ํ SVG ์์๋ค์ ์ฌ์ฉํ์ฌ ๊ฐ๋จํ ํ์ฐ ๋ชจํ์ ๋ง๋ค์์ต๋๋ค. <rect> ์์๋ก ํ๋๊ณผ ๋ ์ ํํํ๊ณ , <polygon>์ผ๋ก ํ์ฐ์ ํํ๋ฅผ, <ellipse>๋ก ๋ถํ๊ตฌ๋ฅผ ๊ทธ๋ ธ์ต๋๋ค. ๋ํ <circle> ์์์ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ์ฌ ์ฐ๊ธฐ๊ฐ ์ฌ๋ผ๊ฐ๋ ํจ๊ณผ๋ฅผ ๋ง๋ค์์ฃ .
์ด์ SVG์ ๊ธฐ๋ณธ์ ์ดํดํ์ผ๋, ๋ ๋ณต์กํ๊ณ ์์ธํ ํ์ฐ ๋ถ์ถ ์๋ฎฌ๋ ์ด์ ์ ๋ง๋ค์ด ๋ณผ ์ค๋น๊ฐ ๋์์ต๋๋ค!
3. ํ์ฐ ๊ตฌ์กฐ์ ์ธ๋ถ ์์ ๊ตฌํ
ํ์ฐ ๋ถ์ถ ์๋ฎฌ๋ ์ด์ ์ ๋์ฑ ์ ๊ตํ๊ฒ ๋ง๋ค๊ธฐ ์ํด, ํ์ฐ์ ์ธ๋ถ ๊ตฌ์กฐ๋ฅผ SVG๋ก ๊ตฌํํด ๋ณด๊ฒ ์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ง๊ทธ๋ง์ ์ด๋ ๊ฒฝ๋ก์ ๋ถ์ถ ๊ณผ์ ์ ๋ ์์ธํ ํํํ ์ ์์ต๋๋ค.
ํ์ฐ์ ์ฃผ์ ๊ตฌ์กฐ์ ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ง๊ทธ๋ง ์ฑ๋ฒ: ์งํ ๊น์ ๊ณณ์ ์์นํ ๋ง๊ทธ๋ง ์ ์ฅ์
- ํ๋: ๋ง๊ทธ๋ง๊ฐ ์งํ๋ฉด์ผ๋ก ์์นํ๋ ํต๋ก
- ๋ถํ๊ตฌ: ํ์ฐ ์ ์๋ถ์ ๊ฐ๊ตฌ๋ถ
- ์ธกํ์ฐ: ์ฃผ ํ์ฐ์ฒด ์๋ฉด์ ํ์ฑ๋ ์์ ํ์ฐ
- ํ์ฐ์: ๋ถ์ถ๋ ๋ง๊ทธ๋ง๊ฐ ๊ตณ์ด ํ์ฑ๋ ์์
์ด์ ์ด๋ฌํ ์์๋ค์ ํฌํจํ ๋ ์์ธํ ํ์ฐ ๊ตฌ์กฐ๋ฅผ SVG๋ก ๊ตฌํํด ๋ณด๊ฒ ์ต๋๋ค:
์ด SVG ๋ค์ด์ด๊ทธ๋จ์ ํ์ฐ์ ๋ด๋ถ ๊ตฌ์กฐ๋ฅผ ๋์ฑ ์์ธํ๊ฒ ๋ณด์ฌ์ค๋๋ค. ์ฃผ์ ํน์ง์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ง๊ทธ๋ง ์ฑ๋ฒ: ํ์ ํํ๋ก ํํ๋๋ฉฐ, ๋ฐํฌ๋ช ํ ๋นจ๊ฐ์์ผ๋ก ์ฑ์์ ธ ์์ต๋๋ค.
- ํ๋: ๋ง๊ทธ๋ง ์ฑ๋ฒ์์ ๋ถํ๊ตฌ๊น์ง ์ด์ด์ง๋ ๊ตต์ ์ ์ผ๋ก ํํ๋ฉ๋๋ค.
- ๋ถํ๊ตฌ: ํ์ฐ ์ ์๋ถ์ ํ์ํ ๊ฐ๊ตฌ๋ถ์ ๋๋ค.
- ์ธกํ์ฐ: ์ฃผ ํ์ฐ์ฒด ์๋ฉด์ ์์ ์ผ๊ฐํ ๋ชจ์์ผ๋ก ํํ๋์์ต๋๋ค.
- ํ์ฐ์: ํ์ฐ ์ฃผ๋ณ์ ํ์ ์์ผ๋ก ํํ๋ ์์๋ค์ ๋๋ค.
๋ํ, ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ถ๊ฐํ์ฌ ๋ง๊ทธ๋ง์ ์ด๋๊ณผ ๋ถ์ถ ๊ณผ์ ์ ๋์ ์ผ๋ก ํํํ์ต๋๋ค:
- ๋ง๊ทธ๋ง ์ด๋: ๋ง๊ทธ๋ง ์ฑ๋ฒ์์ ๋ถํ๊ตฌ๊น์ง ๋นจ๊ฐ ์๋ค์ด ์์นํ๋ ์ ๋๋ฉ์ด์
- ๋ถ์ถ: ๋ถํ๊ตฌ์์ ํฌ๊ธฐ๊ฐ ๋ณํ๋ ์๋ค๋ก ๋ถ์ถ ๊ณผ์ ์ ํํ
์ด๋ฌํ ์์ธํ SVG ๊ตฌํ์ ํตํด, ์ฐ๋ฆฌ๋ ํ์ฐ์ ๋ณต์กํ ๋ด๋ถ ๊ตฌ์กฐ์ ๋์ ์ธ ๋ถ์ถ ๊ณผ์ ์ ์๊ฐ์ ์ผ๋ก ๋ช ํํ๊ฒ ํํํ ์ ์๊ฒ ๋์์ต๋๋ค. ์ด๋ ์ง์งํ์ ๊ฐ๋ ์ ์ดํดํ๋ ๋ฐ ํฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
4. ์ธํฐ๋ํฐ๋ธ ์์ ์ถ๊ฐํ๊ธฐ
์ด์ ์ฐ๋ฆฌ์ ํ์ฐ ๋ถ์ถ ์๋ฎฌ๋ ์ด์ ์ ์ธํฐ๋ํฐ๋ธ ์์๋ฅผ ์ถ๊ฐํด ๋ณด๊ฒ ์ต๋๋ค. ์ฌ์ฉ์๊ฐ ์ง์ ์๋ฎฌ๋ ์ด์ ๊ณผ ์ํธ์์ฉํ ์ ์๊ฒ ๋ง๋ค๋ฉด, ํ์ต ํจ๊ณผ๊ฐ ๋์ฑ ๋์์ง ๊ฒ์ ๋๋ค. SVG์ JavaScript๋ฅผ ๊ฒฐํฉํ์ฌ ๋ค์๊ณผ ๊ฐ์ ์ธํฐ๋ํฐ๋ธ ๊ธฐ๋ฅ์ ๊ตฌํํด ๋ณด๊ฒ ์ต๋๋ค:
- ๋ง๊ทธ๋ง ์๋ ฅ ์กฐ์
- ํ์ฐ ์ ํ ์ ํ
- ๋ถ์ถ ์์/์ ์ง ์ ์ด
๋จผ์ , HTML์ ํ์ํ ์ปจํธ๋กค ์์๋ค์ ์ถ๊ฐํฉ๋๋ค:
<div id="controls" style="margin: 20px 0;">
<label for="pressure">๋ง๊ทธ๋ง ์๋ ฅ: </label>
<input type="range" id="pressure" min="1" max="10" value="5">
<label for="volcanoType">ํ์ฐ ์ ํ: </label>
<select id="volcanoType">
<option value="shield">์์ํ์ฐ</option>
<option value="stratovolcano">์ฑ์ธตํ์ฐ</option>
<option value="caldera">์นผ๋ฐ๋ผ</option>
</select>
<button id="eruptButton">๋ถ์ถ ์์/์ ์ง</button>
</div>
์ด์ ์ด ์ปจํธ๋กค๋ค๊ณผ ์ฐ๋๋๋ JavaScript ์ฝ๋๋ฅผ ์์ฑํด ๋ณด๊ฒ ์ต๋๋ค: