์ด ๊ฒ์์ ํด๋ดค๊ฑฐ๋ ๋ณธ ์ ์ด ์๋ ๋ถ์ ์ฐพ์ต๋๋ค...! ๐ง
์ฌ๋ฐ๊ฒ ํ๋ ์ด
๋๋ 2020๋ , ๊ณต๊ตฐ ์ผ๋ณ์ด์๋ ๋๋ ๋ณธ๋ถ ์งํ ์ ์ด๋ ํ ๋ถ๋์์ ํ์ ์ง์ ์ํํ๊ณ ์์๋ค.
18์ธ์น์ ๋ก์ ๋ชจ๋ํฐ์ ์ปดํจํฐ๋ฅผ ์์ ๋๊ณ ๊ธฐ๋ณธ์ ์ธ ํ์ ์ ๋ฌด๋ฅผ ์ํํ๋ ๊ฒ์ด ๋์ ์ผ์์ด์๋ค. ์ฌ๊ธฐ์ ์ฌ์ํ๋ค ๋ชปํด ๊ท์ฌ์ด ๊ฐ๋ฐ ์ ๋ฌด๋ฅผ ์ถ๊ฐ๋ก ๋งก๊ฒ ๋์๋๋ฐ, ๊ทธ ์ค ํ๋๊ฐ ๋ฐ๋ก ๋ถ๋ ์ ๊ตฌ์ ์๋ (์๋ง๋ ์ธ์์์ ๊ฐ์ฅ ์ธ๋ก์ด) ํค์ค์คํฌ๋ฅผ ๊ฐ๋ฐํ๊ณ ์ ์ง ๋ณด์ํ๋ ๊ฒ์ด์๋ค.
๊ทธ๋ฌ๋ ์ด ์์ ์
๋ฌด ๋๋ถ์(!) notepad++
๋ผ๋ ์ด๋ฆ์ ํ๋ก๊ทธ๋จ๊ณผ ํ์๋ง ์ธํธ๋ผ๋ท ์ ์์ด ๊ฐ๋ฅํ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋ชจ๋๋ฅผ ์์ ๋กญ๊ฒ ์ฌ์ฉํ ์ ์์๋ค. ํฌ๋กฌ ์์ง ์์์ Javascript๋ฅผ ๋ง์๊ป ์ปดํ์ผํ ์ ์๋ ํ๊ฒฝ์ด ๋ง๋ จ๋์์ผ๋โฆ
์ ๋ฌด์ ์ ๋ฌด ์ฌ์ด์ ํ์ ์ ๊ทน์ ์ผ๋ก ํ์ฉํ์ฌ ๋น์ ์ฒ์ ์ ํ๋ ๊ฐ์ฒด์งํฅ ์ค๊ณ๋ฅผ ๊ณต๋ถํ๊ณ ์ VanillaJS + canvas๋ฅผ ์ฌ์ฉํ ์์ ๊ฒ์์ ์ ์ํ๊ธฐ๋ก ๊ฒฐ์ฌํ๋ค.
![]()
๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ ๊ฒ์ฌ ์ ๋๋ง ์ง์ํ๋ ๋น์์ notepadd++
๋์ ์ฒซ ๋์ ์ ์ ์ง ๋ง๋งํ ์์นด๋ ธ์ด๋like ๊ฒ์์ด์๋ค. ๊ฒ์์ ๋ง๋ค์ด ๋ณธ ์ ๋ ์๊ณ , JS ์ด์ง์ธ ๋ด๊ฐ ๋ง๋ค์ด๋ธ ๊ฒ์์ ์ ๋ง ํํธ์์๋ค. ์ ์ฌ๋ฌด์ค์ ๋ชจ ์ผ๋ณ์ ํนํ๊ณผ ํจ๊ป ์ฒซ ๊ฒ์์ ์ดํ๋ง์ ์ธ์ธํ ์ํด์ ๊ธธ์ ๊ฑท๊ฒ ๋๋ค.
![]()
๋งํ ๋์ ์ฒซ ๊ฒ์์ด ์งํฅํ ์์นด๋ ธ์ด๋
๊ทธ๋ผ์๋ ์คํจ์ ๊ตดํ ์ ์๋ค! ๊ทผ๋ฌด ํ ์ ๋น ์๊ฐ์ ํ์ฉํด ์ธ์ง๋ฐฉ์์ ๊ฐ๋ฐ ์ ํ๋ธ๋ฅผ ์ด๋ฆฌ์ ๋ฆฌ ์ฐพ์๋ค๋
๋ค.
๊ทธ๋ฌ๋ ์ค ๋์๊ฒ ๊ฒ์์ ๊ฐ์ฅ ์ค์ํ ์์๊ฐ ๋ฌด์์ธ์ง ๊ณ ๋ฏผํ๊ฒ ๋๋ ์์์ ์ฐพ์์ผ๋, ํด๋น ์ ํ๋ฒ์ ์์๋ค์ ๊ฒ์ ์์ฒด์ ๋ํ ์์์ ์๋์์ง๋ง, ์์ด์ ์ฌ๋ฏธ์ ๊ธฐ๋ฐ์ด ๋๋ ์์ง์(animation)์ ๋ํ ์ ์์ ๋ฐฐ์ธ ์ ์์๋ค.
๋๋ ๋น๋ก์ ๋์ ์ฒซ ๊ฒ์์ ์ฌ๋ฏธ์๋ ์์ง์์ ๋๋ฌธ์ ๋งํ์์ ํ์
ํ๋ค. ๊ทธ๋ฆฌ๊ณ ํ๋ ์ดํ๊ธฐ ์ข๊ณ ์ง์ผ๋ณด๊ธฐ๋ ์ข์ ์ญ๋์ ์ธ ๊ฒ์์ ๊ฟ๊พธ๊ฒ ๋์๋ค.
๋์ ์์ํ ์๊ฐ interactive developer
![]()
์ข์ ์์ง์์ด๋ ๋ฌด์์ธ์ง, ์ด๋ป๊ฒ ๊ตฌํํ ์ ์๋์ง์ ๋ํ ์๋ง์ ์์๋ค
ํ์ ์กด๊ฒฝํ๋ ๊ฒ์ ๊ฐ๋ฐ์์ ์ค์์ดํ ๋ฒฝ๋๊นจ๊ธฐ๋ผ๋ ์ด๋ฆ์ผ๋ก ์๋ ค์ง ์ ๋ช ํ ๋ชจ๋ฐ์ผ ๊ฒ์์ ์์คํ ์ ํด๋ก ํ๊ธฐ๋ก ๊ฒฐ์ ํ๋ค. ์ถ๊ฐ๋ก ๋ ๋ง์ ์ํธ์์ฉ ์์์ ๋ณด๋์ค ์์๋ฅผ ๋ํด ํ๋ถํ ๊ฒ์์ ๋ง๋๋ ๊ฒ์ ๋ชฉํ๋ก ๋ณธ๊ฒฉ์ ์ธ ๊ฐ๋ฐ์ ์ํ๋ค.
![]()
[์ค์์ดํ ๋ฒฝ๋๊นจ๊ธฐ] ์ฐ๋ฆฌ์ ์ง๋ฃจํ ์งํ์ฒ ์ ์ฑ ์์ง๋ ๊ฒ์
๋น์ ๊ณต๊ตฐ ์ธํธ๋ผ๋ท์๋ ์ด๋ฏธ ๋ช๋ช ์๋ฌธ์ ์๋ ๊ฐ๋ฐ์๋ค์ด ๊ฐ๋ฐํ ๊ฒ์์ผ๋ก ๊ฐ๋์ฐจ ์์๋ค. ํ ํธ๋ฆฌ์ค๋ถํฐ ์ค๋์ฟ , 2048, ์ฌ์ง์ด๋ ์ฐ์ ์๋ฎฌ๋ ์ด์ ๊ฐ์ ๊ฒ์๋ค์ด ๋ ๋๊ณ ์์๋๋ฐ, ์ด๋ ์ ๊ตญ์ ์๋ง์ ๋น์ง ๊ทผ๋ฌด์์๊ฒ ์ฌ์ฌํ ์๋ก๊ฐ ๋์ด์ฃผ์๋ค.
๊ทธ ์๋ฌธ์ ๊ฒ์๋ค์ ํ๋๊ฐ์ด ๊ทธ ์ถ์ฒ์ ๊ฐ๋ฐ๋ ๋ ์ง์กฐ์ฐจ ๋ถ๋ช ํ์ง ์์์ง๋ง, ๊ทธ๊ฒ์ด ์คํ๋ ค ์ฅ์ ์ด ๋์ด, ์๋ง์ ๊ณ ์์ ๋ฆฌํฉํ ๋ง์ ๊ฑฐ์น ๊ถ๊ทน์ ์คํ์์ค ํ๋ก์ ํธ๊ฐ ๋์๋ค. ๋๋ ๋์ ๊ฒ์๋ ์ธ์ ๊ฐ ๊ทธ๋ค๊ณผ ๊ฐ์ ์์น์ ์์ ์ค๋ ์ญ์ฌ์ ๊ธฐ์์ด ๋๊ธฐ๋ฅผ ๊ธฐ๋ํ๋ฉฐ ์ฝ๋๋ฅผ ํ ์ค์ฉ ์จ ๋ด๋ ค๊ฐ ๊ฒ์ด๋ค.
์ฝ 3๊ฐ์์ ๊ธฐ๊ฐ ๋์, ํํ์ด ์ฝ๋๋ฅผ ์์ฑํ๋ค. ๊ฐ๋ฐํ๋ ๊ณผ์ ์์ ์ด์ฉ ์ ์์ด ์ง๋ฆฌ๋๋ก ๋ง์ ์๊ฐ ํ๋ ์ดํ๋๋ฐ, ์ด๋ ์๊ฐ์๋ ๋๋งํผ ์ด ๊ฒ์์ ์ํ๋ ์ฌ๋์ ์ฐพ์ ์ ์์ผ๋ฆฌ๋ผ๋ ์๊ฐ์ ๋น ์ก๋ค. ํ์ง๋ง ์ถํ ๊ฒ์์ด ๋๋ฆฌ ๋ฐฐํฌ๋๊ณ , ๋๋ณด๋ค ๋์ ์ ์๋ฅผ ์ฐจ์งํ ๋ง์ ์ฌ์ฉ์์ ์๋ํ๋ ๋ฉ์ผ ํญํ์ ๋ฐ๊ฒ ๋๋, ์ญ์ ์ฌ๋ฅ์ ๋ถ๊ณตํํจ์ด๋...!
์ฒซ ์ถ์ ์ดํ ๋ช๋ฒ์ ์ ๋ฐ์ดํธ๋ฅผ ๊ฑฐ์ณ 0.1.4 ๋ฒ์ ์ด 2021๋ ๋์ ์์ฑ๋์๊ณ , ์ถํ ๋ ์ด์์ ๊ฐ๋ฐ์ ์งํ๋์ง ์์๋ค.
![]()
[๋น์์ ๋ฉ์ธ ํ๋ฉด์ผ๋ก ์ถ์ธก] ๋์ ๋ ธํธ ์์์ ๋ฐ๊ฒฌ๋ ์ธ์ง๋ฐฉ์์ ๊ธ์กฐํ ๋ฉ์ธ ํ๋ฉด ํ๋กํ ํ์ ์ด๋ฏธ์ง
์์ฑ๋ ๊ฒ์์ ์์ HTML + CSS + JS
๋ง์ผ๋ก ์์ฑ๋์๊ธฐ์ ์ค์น๊ฐ ์ฝ๊ณ , ๊ตฐ๋์ ํ์๋ง ํน์ฑ์ ๋ง ๋ด์ ๋ชจ๋ ์ปดํจํฐ์ ์ค์น๋ ๋์ผํ ํ๊ฒฝ(๋์ผ ๋ฒ์ ์ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ )์์ ๊ตฌ๋๋์๋ค. ๊ทธ ๋๋ถ์ ๋น ๋ฅด๊ฒ ์ธ๊ธฐ๋ฅผ ์ป๊ณ ๋ณ์ฌ๋ค ์ฌ์ด์์ ํผ์ ธ ๋๊ฐ๊ฒ ๋์๋ค. ๋ง๋
์๋ ํด๋น ๊ฒ์์ ๋ํ ์ ๋ช
์ธ์ ํ์
์ด ์ํ๊ด ๋ด์์ ์งํํ๋ ์์ ๊ฐ๋ฐ ์ปจํผ๋ฐ์ค์์ ๋ฐํ๋ ํ๋ค. ๋ค์ ๊ฒ์ ์ ์์ ๋ํ ๋ฌด์ํ ์์ฒญ์ ๋ฐ์๋ ๊ธฐ์ต์ด ์๋ค.
์ ์ญ์ ํ๊ณ ๋ ์ดํ์๋ ํด๋น ๊ฒ์์ ๋๋ฆฌ ๋๋ฆฌ ํผ์ ธ ๋๊ฐ๋ ๊ฒ ๊ฐ๋ค. ํ์์ผ๋ก๋ถํฐ ํด๋น ๊ฒ์์ ์บก์ฒ ์ด๋ฏธ์ง๊ฐ ๊ณต๊ตฐ๋ณธ๋ถ ์ธํธ๋ผ๋ท ํํ์ด์ง ๊ณต์ง์ฌํญ์ ๊ทผ๋ฌด ์ค ๋ถ์ ์ ํ ํ๋ก๊ทธ๋จ ์ฌ์ฉ ๊ธ์ง
๋ผ๋ ํ์ดํ๊ณผ ํจ๊ป ์ฌ๋ผ์๋ค๋ ์์์ ๋ฃ๊ฒ ๋์๋ค.
๋๋์ ์ผ๋ก ๊ณต๊ฐ๋ ๊ฒ์์ ์บก์ฒ ์ด๋ฏธ์ง์ ๊ธ์ง ๋ฌธ๊ตฌ๋ ์คํ๋ ค ํธ๊ธฐ์ฌ์ ์๊ทนํ๋ ๋ ธ์ด์ฆ ๋ง์ผํ ํจ๊ณผ๋ฅผ ์ผ์ผ์ผฐ์ ๊ฒ์ด๋ค. ๊ฒฐ๊ตญ, ์ด๋ค ์์ผ๋ก๋ ๋์ ์์ ๊ฟ์ด ์ด๋ฃจ์ด์ก์์ ์ ์ ์์๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฏธ ์ ์ญํ๋ค๋ ์ฌ์ค์ ๋ฐ๋ ค์ค๋ ์๋๊ฐ!!
![]()
ํฌ๋ง ๋ฐ์ฌ!
2024๋ ์ ๊ณผ๊ฑฐ ๋ ธํธ์ ๋ด์ฉ์ ๋ค์ ธ๊ฐ๋ฉฐ, ๋ค์ ํ ๋ฒ ํด๋น ๊ฒ์์ ๊ตฌํํ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ๋ค.
์ธ์ ๊ฐ ๋์ ๊ธฐ์์ฌ ๋ฃธ๋ฉ์ดํธ๊ฐ ๊ณ ๋ฑํ๊ต ๋์ฐฝ์ธ ํด๊ฐ ๋์จ ๊ณต๊ตฐ ์น๊ตฌ๋ฅผ ์๊ฐํด์ค ์ ์ด ์๋ค. ๋๋ ์ ์ญํ ์ง 1๋ ์ด ๋ค ๋์ด๊ฐ๋ ์ํฉ์ด์์ง๋ง, ๊ตฐ ์ํ์ ์์ ์ํผ์๋๋ค์ ๋๋๋ฉฐ ๊ณต๊ฐ๋๋ฅผ ํ์ฑํ ์ ์์๋ค.
๊ทธ๋ฌ๋ค ์ค๋ง ํ๋ ๋ง์์ผ๋ก ๋์ ๋ฒฝ๋๊นจ๊ธฐ ๊ฒ์์ ์ด์ฌํ ๋ฌ์ฌํ๋ฉฐ, ํน์๋ผ๋ ๊ทธ๋ฐ ๊ฒ์์ ํด๋ณธ ์ ์ด ์๋์ง ๋ฌผ์ด๋ณด์๋ค. ๊ทธ๋, ๊ทธ ๊ณต๊ตฐ ์น๊ตฌ๋, ์์ ์ด ๊ทธ ๊ฒ์์ ์ด๋ ฌํ ํ๋ ์ด์ด๋ผ๊ณ ์ด์ผ๊ธฐํ๊ณ , ํด๋น ๊ฒ์์ ์ ์์๋ฅผ ์ค์ ๋ก ๋ง๋ฌ๋ค๋ ์ฌ์ค์ ๊ฝค๋ ์ ๋๋ณด์๋ค. ๋๋ ๋ค์ ํ๋ฒ ์ฌํ์์ ๊ทธ ๊ฒ์์ ๊ตฌํํ๊ณ ์ ๋ง์๋จน์๋ค. ์ด์ ๋์น๋ 20์ด์ ๋ง์์ผ๋ก.
๊ฒฐ๊ตญ ๋ฏธ๋ฃจ๊ณ ๋ฏธ๋ฃจ๋ค ์ฝ 4๋ ์ด ์ง๋ ํ ์์ ์์ ๋น์์ ๋ฏธ์ํ ๋๋๊น์ง ์ต๋ํ ๋ชจ๋ ์ด๋ ค์ ํด๋น ๊ฒ์์ ๊ตฌํํ๋ ๋ฐ ์ฑ๊ณตํ๋ค. ๊ณผ๊ฑฐ์ ์ฝ๋ ์์ฒด์ 98% ์ด์์ ์ผ์น์จ์ ๋ชฉํ๋ก ํ๊ธฐ์, ํน์๋ผ๋ ์ฝ๋๋ฅผ ์ฝ๋๋ค๋ฉด ์ด ์ ์ ๊ผญ ์ดํดํด์ฃผ์๊ธธ...!
1,000์ค์ ๋๋ ์ฝ๋๋ฅผ ๋ค์ ์์ฑํ์ง๋ง, ๊ทธ ์ด๋ค ๋ฆฌํฉํ ๋ง๊ณผ ๊ฐ์ ๋ ์ํํ์ง ์์๋ค.
asset/app.js
ํ์ผ์ ์ด๊ณ ์กฐ๊ธ๋ง ๋๋ฌ๋ณด๋ฉด ๋์น์ฑ ์ ์์ ๊ฒ์ด๋ค. ์ด ๊ฒ์์ ์ด๋ ํ ๊ฐ์ฒด ์งํฅ ์ค๊ณ ์์น๋ ์ค์ํ์ง ๋ชปํ์ผ๋ฉฐ, ์๋ง์ ๋นํจ์จ์ ์ผ๊ธฐํ๋ ๋ฐ๋ณต๋ฌธ๊ณผ ์ธ๋ชจ์๋ ๊ฐ์ฒด ๋ณต์ฌ ์์ฑ์ด ๋ฌด๋ถ๋ณํ๊ฒ ์กด์ฌํ๊ณ , ๊ธฐ์ดํ ์กฐ๊ฑด๋ฌธ๋ค๊ณผ ์ฌ์ง์ด ์ ์ธ ๋ฐ ํ ๋น ํ ๋จ ํ ๋ฒ๋ ์ฌ์ฉํ์ง ์๋ ์ธ์คํด์ค๋ ๋์ณ๋๋ค.
๋ถ์กฑํ๋ ์ค๋ ฅ ํ๋ ํฌ์ง๋ง, ์ด์จ๋ ์ด ๊ฒ์์ ํด๋ํฐ๋ ์ธํฐ๋ท ๊ฒ์๋ ์์ ์กด์ฌํ์ง ์๋ ๊ทธ๋ฐ ์ด๋ ์์์ ํ์ํ ๊ฒ์ด๋ค. ๋งค์ผ ์์์ ๋จน์ ํ ์ธ์ง๋ฐฉ์์ ๊ฒ์์ ์์ ๊ธฐ๋ฅ์ ํ๋์ฉ ๊ตฌํํด๋ณด๊ณ , ๊ทธ ๊ฒฐ๊ณผ๋ฌผ์ ํ๋ฆฐํธํ๊ฑฐ๋ ๋ ธํธ์ ์ง์ ์ฎ๊ฒจ ์ ์ ๊ฒ์ ์์คํ ์ฑ๊ฒผ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทผ๋ฌด ์ค ์งง์ ์ฌ๋ ์๊ฐ์ ์ด์ฉํ์ฌ ์์ ํผ์ฆ ์กฐ๊ฐ์ ๋ง์ถ๋ฏ ์ ์จ ์์ฑํ๋ค. ๊ทธ๋ ๋๋ ์ ๊ทธ๋ฌ์๊น?
๋ฐ๋์ ๊ตฌํํด๋ด๊ฒ ๋ค๋ ๊ทธ ์ง๋ , ์ด ๊ฒ์์ ๋ค์ ์ฐ๋ฉด์ ๊ทธ ์ด์ ์ ๋์ฐพ๊ณ ์ถ์๋ค!
ps. Github์์ ๊ตฌ๊ฒฝํ๊ธฐ
pps. ์ฌ๋ํ๋ ๋์ ํ์ ๊น๋ณ์ฅ๋๊ป ๊ฐ์ฌ๋ฅผ...!
ppps. ์ด ๊ฒ์์ ์ฌ๋ฐ๊ฒ ์ฆ๊ฒจ์ค ๊ณต๊ตฐ ์ถ์ ๋ค์๊ฒ ๊ฐ์ฌ๋ฅผ...!
์ค์์ดํ ๋ฒฝ๋ ๊นจ๊ธฐ๋ ๊ฒ์ ๋ฃฐ์ ๋น์ทํด๋ณด์ด๋๋ฐ ์ด ๊ฒ์์ด ํจ์ฌ ์ด๋ ต๋ค์
๊ธฐ์กด ์ค์์ดํ ๋ฒฝ๋ ๊นจ๊ธฐ์๋ ์๋ ์ด๋ก ๋ธ๋ก์ด ์ฐธ์ ํ ๊ฒ ๊ฐ์ต๋๋ค ์ ๋ณด๊ณ ๊ฐ๋๋ค
chat gpt ์์ด ๊ฐ๋ฐํ๋ ๊ฒ๋ ์์์ด ์๊ฐ๋ ์ธ์์์ ์ธํฐ๋ท ๊ฒ์ ํ๋ ์์ด ๋ ธํธ๋ง์ผ๋ก ๊ฒ์์ ๊ฐ๋ฐํ์ จ๋ค๋ ใ ใ ใ ์ง๋ ์ด ๋๋จํ์๋ค์
์ฐ์ ๊ฐ๋ฐ์ ๋ํ ์ด์ ์ด ๋ฉ์ ธ์ ๐
๊ธ๋ ์ ๋ง ์์ฐ์๋ค์ ~!
์ ์ง์ง 2๋ ๋์ ์ด๊ฑฐ๋งํ๋๋ฐ ์ฌ๊ธฐ์ ๋ง๋๋ค์ ใทใท
2๋
๋ง์ ํด๋ ์ฌ์ ํ ์ฌ๋ฐ๋ค ใ
ใ
ใ
2์ธต ๋ณต๋์์ ๊ฐ์ด ๋น๊ตฌ์น๋ ๋๊ฐ ๊ทธ๋ฆฝ๋ค..
ํญ์ ์์ํ๊ณ ์์๊ฒ!
์ค์์ดํ ๋ฒฝ๋ ๊นจ๊ธฐ ํ ์ ์๋ ๊ฒ์ ์์๋ค๋ฉด ๊ณต๊ตฐ ๊ฐ ๊ฑธ ๊ทธ๋ฌ๋ค์ ใ ใ