1. ๋ชจ๋“  ์•„์ดํ…œ์„ ํ•˜๋‚˜์˜ ์Šคํ‚ค๋งˆ์— ๋ชฐ์•„ ๋„ฃ๊ณ  ์œ ์ €๋ช…์œผ๋กœ ๊ด€๋ฆฌ

- ๊ธฐ์กด ์ฝ”๋“œ๋“ค ๋ชจ๋‘ ์žฌ์ˆ˜์ •

- ๋ชจ๋“  ์ž‘์—…๋งˆ๋‹ค ์นด์šดํŠธํ•ด์„œ์ƒ๋‹จ์— ๋„ฃ๊ธฐ

- ๋‚ด ์•„์ดํ…œ ์นด์šดํŠธ์™€ ์ „์ฒด ์•„์ดํ…œ ์นด์šดํŠธ๋ฅผ ๋”ฐ๋กœ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์ถ”๊ฐ€ํ•˜๊ธฐ

2. ์„œ๋ฒ„์—์„œ ์‚ญ์ œ

- serial ์กฐ๊ฑด์ด ์ถฉ์กฑ๋˜์ง€ ์•Š์•˜์„ ๋•Œ '์ฒ˜์Œ ๊ฝƒ ๊ฐ€์ ธ์˜ค๊ธฐ'์—์„œ ๊ฐ๊ฐ์˜ ์ƒํ™ฉ์— ๋งž๊ฒŒ serial ์•„์ดํ…œ ์‚ญ์ œํ•˜๊ธฐ - ์—ฐ์†์ด ๋Š์–ด์ง€๋ฉด ๋ฐ”๋กœ ๋ชจ๋“  ์•„์ดํ…œ์„ ์‚ญ์ œํ• ์ง€, ๊ทธ๋ž˜๋„ ์œ ์ง€ํ• ์ง€ ์ด๊ฑด ๊ณ ๋ฏผํ•˜์ž - ์ง€๊ธˆ์€ ๊ทธ๋ƒฅ ๋ฐ”๋กœ ์‚ญ์ œ๋กœ ๋งŒ๋“œ๋Š”๊ฒŒ ๋‚˜์•„๋ณด์ธ๋‹ค.

3. ํด๋ผ์—์„œ ๋ณด์—ฌ์ฃผ๊ธฐ

- ํ•ด๋‹น ์•„์ดํ…œ์— ๋งž์ถฐ ๋ณด์—ฌ์ฃผ๊ธฐ

 

 

 

ํฌ์†Œํ•ด์•ผํ•œ๋‹ค.

๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๊ฐ€์น˜์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ด์•ผ ํ•œ๋‹ค.

๊ทธ๊ฒƒ์ด ๊ฐœ์ธ์„ ํ†ตํ•ด ๋“œ๋Ÿฌ๋‚˜์•ผํ•œ๋‹ค.

 

๊ทธ๋ž˜์„œ 'ํฐ ์žฌ์‚ฐ' ์ž์ฒด๊ฐ€ ๋ช…ํ’ˆ์ด ๋œ๋‹ค. ์‚ฌ๋žŒ๋“ค์€ ๋ˆ์ด ๋งŽ์€ - ๋ˆ์ด ๋งŽ๊ธฐ๋งŒ ํ•œ ์‚ฌ๋žŒ์ž„์—๋„ - ๊ทธ๋ฅผ ๋–  ๋ฐ›๋“ ๋‹ค. ๋‹ค๋งŒ ๊ทธ๊ฒƒ์€ ๊ทธ๊ฐ€ ์–ผ๋งˆ๋‚˜ ํฐ ์žฌ์‚ฐ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ์„ธ์ƒ์— ์•Œ๋ ค์•ผ๋งŒ ๋ฐœํšจ๋œ๋‹ค. ํ†ต์žฅ์†์—๋งŒ ์žˆ๋‹ค๋ฉด ๊ทธ ์˜๋ฏธ๊ฐ€ ๊ฐœ์ธ์„ ํ†ตํ•ด ๋“œ๋Ÿฌ๋‚˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

 

์šฐ๋ฆฌ์ง‘ ๊ณ ์–‘์ด๋Š” ๋น„์‹ผ ์ธ„๋ฅด๋ผ๊ณ  ์ข‹์•„ํ•˜์ง€ ์•Š๋Š”๋‹ค.

๋ง›์žˆ๋Š” ์ธ„๋ฅด๋ฅผ ์ข‹์•„ํ•œ๋‹ค.

 

ํ•˜์ง€๋งŒ ์‚ฌ๋žŒ์€ ๋ฏฟ์Œ์œผ๋กœ ๋ง›์„ ์ˆ˜์ •ํ•œ๋‹ค.

๋ฏฟ์Œ์œผ๋กœ ๋Šฅ๋ ฅ์„ ์ˆ˜์ •ํ•œ๋‹ค.

์šฐ๋ฆฌ ์‚ฌ๋žŒ์ข… ์‚ฌ๋žŒ์† ์‚ฌ๋žŒ๊ณผ ์˜์žฅ๋ชฉ ํฌ์œ ๊ฐ• ์ฒ™์‚ญ๋™๋ฌผ๋ฌธ ๋™๋ฌผ๊ณ„๋Š”

๊ทธ๋ ‡๊ฒŒ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹ค.

 

๊ทธ๊ฒƒ์ด ์ง€๊ธˆ์˜ ์šฐ๋ฆฌ ๋ฌธํ™”๋ฅผ ์žˆ๊ฒŒํ•œ ์—”์ง„์ด๋ฉฐ

์ธ๋ฅ˜์˜ ๊ฑฐ์˜ ๋ชจ๋“  ์ „์Ÿ์„ ์œ ๋ฐœ์‹œํ‚จ ์›์ธ์ด๋‹ค.

 

ํ˜ธ๋ชจ ์‚ฌํ”ผ์—”์Šค์˜ ํ•œ๊ณ„๋Š” ๋ฏฟ์Œ์œผ๋กœ ๊ฒฐ์ •๋œ๋‹ค.

๋ช…ํ’ˆ์„ ํ–ฅํ•œ ์š•๋ง์ด ๊ทธ๋Ÿฌํ•˜๋ฉฐ

์ด์Šค๋ผ์—˜๊ณผ ์ฃผ๋ณ€๊ตญ๋“ค์˜ ์ „์Ÿ์ด ๊ทธ๋ ‡๊ณ 

๋Œ€๋งŒ์„ ํ–ฅํ•œ ์ค‘๊ตญ์˜ ์•ผ์š•์ด ๊ทธ๋Ÿฌํ•˜๋ฉฐ

์ž์œจ์ฃผํ–‰ ๋˜ํ•œ ๊ทธ๋ ‡๊ณ  AI๋„ ๊ฒฐ๊ตญ ๊ทธ๋ ‡๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค.

 

์šฐ๋ฆฌ ์ข…์กฑ์˜ ์ง‘ํ•ฉ์€

์•„์ฃผ ๋ถ„๋ช…ํ•œ ์ •์ฒด์„ฑ์„ ๊ฐ–๋Š”๋‹ค.

1. ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฃจํ”„ ๋Œ๋ฆฌ๊ณ  ํ‚ค๋ณด๋“œ ๋˜๋Š” ํ„ฐ์น˜(๋งˆ์šฐ์Šค)๋กœ ์ปจํŠธ๋กค ํ•˜๋Š” ๊ฒƒ๊นŒ์ง€ ๋งŒ๋“ค๊ธฐ

2. ์ˆ˜ํ’€ 2,3ํ”„๋ ˆ์ž„์งœ๋ฆฌ ์• ๋‹ˆ ๋งŒ๋“ค๊ธฐ

3. ๊ฐ ์ƒํ™ฉ์— ๋งž๋Š” ํ”„๋ž๋“ค ๋ฐฐ์น˜ํ•ด์„œ ์–ด์šธ๋ฆฌ๊ฒŒ ํ•˜๊ธฐ

4. 5์ผ์— ๊ทธ๋ผ์šด๋“œ ๋ฐ”๋€Œ๊ณ  ๋Œ์•„๊ฐ€๋Š”๊ฑฐ ๊ฐœ๋ฐœํ•˜๊ธฐ

5. 10์ผ์— ์ˆ˜ํ’€ ์ถ”๊ฐ€๋˜๊ณ  ์‚ญ์ œํ•˜๋Š”๊ฑฐ ๊ฐœ๋ฐœํ•˜๊ธฐ

6. 100์ผ๊นŒ์ง€ ๋‚˜๋จธ์ง€ ํ”„๋ž๋“ค ๋ชจ๋‘ ์ ์šฉํ•˜๊ธฐ(100์ผ ์ดํ›„ ํ”„๋ž๋“ค์€ ๋‚˜์ค‘์— ๊ฐœ๋ฐœ)

7. ํ”„๋ฆฌ๋ฏธ์—„ ์„œ๋น„์Šค ์œ ๋ฃŒ ๊ฒฐ์ œ๋ถ€ํ„ฐ db, ์„œ๋ฒ„, ํด๋ผ ๋ฐ ๋ฒ•์ ์ธ ๋ฌธ์ œ์ฒ˜๋ฆฌ๊นŒ์ง€ ๋ชจ๋‘ ๊ฐœ๋ฐœํ•˜๊ธฐ

8, ์‹œ ๋ฌธ๊ตฌ db์ถ”๊ฐ€ํ•˜๊ณ  ์ ์šฉํ•˜๊ธฐ

9. ์„œ๋น„์Šค ๋‹ค๋“ฌ๊ณ  ์˜คํ”ˆํ•˜๊ธฐ

์˜ˆ์ „, ๊ฑฐ์˜ 10๋…„์ „์˜ canvas ์กฐ์ž‘ ๋ฐฉ์‹๊ณผ ๋งŽ์ด ๋‹ฌ๋ผ์กŒ๋‹ค.

๊ทธ๋• html5๊ฐ€ ๋ง‰ ๋ณดํŽธํ™”๋˜๊ธฐ ์‹œ์ž‘ํ–ˆ๊ณ  ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์ง€์›ํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ๋‹ฌ๋ž๊ณ  ํ•จ์ˆ˜ ์ด๋ฆ„๋„ ๋ชจ๋‘ ๋‹ฌ๋ž๋‹ค.

javascript์— class๊ฐ€ ๋„์ž…๋˜๊ธฐ ์ด์ „์ด์–ด์„œ object๋ฅผ ๋น„์Šทํ•œ ๋Š๋‚Œ์œผ๋กœ overridingํ•ด์„œ ์‚ฌ์šฉํ–ˆ๋‹ค.

 

๋ฌด์—‡๋ณด๋‹ค ๊ฐ€์žฅ ๋‹ฌ๋ผ์ง„ ๊ฑด requestAnimationFrame()๊ฐ™์€ renderํ•จ์ˆ˜๋‹ค.

์ด์ œ ๋” ์ด์ƒ setInterval()์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฒƒ ๊ฐ™์•„ ๋‹คํ–‰์ด๋‹ค.

 

๊ทธ๋Ÿฌ๊ณ  ๋ณด๋‹ˆ svg ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ๋ช‡๊ฐœ ๋งŒ๋“ค์–ด๋ดค์ง€๋งŒ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋งŒ๋“ค์–ด ๋ณธ ์ ์ด ์—†์—ˆ๋‹ค.

๊ตฌํ˜„์ด ๊ฐ„๋‹จํ•  ๊ฑฐ๋ผ ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์ƒ๊ฐ๋ณด๋‹ค ๊ฐ„๋‹จํ•˜์ง€ ์•Š์•˜๋‹ค.

 

1. ์ผ๋‹จ canvas๊ด€๋ จ ์ฝ”๋”ฉ์„ ๋งŽ์ด ์žŠ์–ด๋ฒ„๋ ธ๊ณ  - ๋” ์ด์ƒ ์ด๋Ÿฐ ์ผ์ด ์—†๋„๋ก ํ™•์‹คํžˆ ์ •๋ฆฌํ•ด๋†“์ž

2. ์—ฐ์Šต์šฉ ์ƒ˜ํ”Œ ์ด๋ฏธ์ง€๋“ค์˜ width๊ฐ€ ๋ชจ๋‘ ๋‹ค๋ฅด๊ฑฐ๋‚˜ ๊ฐ€๋กœx์„ธ๋กœ๋กœ ๋งŒ๋“ค์–ด์ง„ ์Šคํ”„๋ผ์ดํŠธ ์ด๋ฏธ์ง€์—ฌ์„œ ์ฒ˜์Œ ์ต์ˆ™ํ•ด์ง€๋Š”๋ฐ ๊ณ ์ƒํ–ˆ๋‹ค.

์ด์ œ ํƒ€์ผ ์ด๋ฏธ์ง€๋กœ ๋ฐฐ๊ฒฝ์„ ์ฑ„์šฐ๊ณ  requestAnimationFrame์œผ๋กœ ์• ๋‹ˆ์—์ด์…˜์„ ํ•˜๊ณ  ์ปจํŠธ๋กค ํ•˜๋Š” ๊ฒƒ๊นŒ์ง€ ๋งŒ๋“ค๊ณ  ์ด๊ฑธ ๋ชจ๋“ˆํ™” ํ•ด๋†“์ž.

์Šฌ๋ผ์ž„ ์ด๋ฏธ์ง€ 2์žฅ์œผ๋กœ ๋งŒ๋“ค๊ธฐ ์—ฐ์Šต

 

์ด์ œ,

1. ๊ณ ์–‘์ด ์Šคํ”„๋ผ์ดํŠธ ์ด๋ฏธ์ง€๋ฅผ ๊ตฌํ•œ ํ›„

2. ์›น์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๊ตฌ๋™์‹œ์ผœ๋ณด๊ณ 

3. ์ขŒ์šฐ ์ด๋™ ์ปจํŠธ๋กค์„ ๋งŒ๋“ค์–ด ๋ณด๊ณ 

4. ๋‘˜๋‹ค ์ฝ”๋“œ๋กœ ๋ชจ๋“ˆํ™” ํ•œ ๋‹ค์Œ

5. ๋‚˜๋งŒ์˜ ๊ณ ์–‘์ด ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ ์šฉํ•˜์ž

6. ๋‚ด๊ฐ€ ๋งŒ๋“  ๊ณ ์–‘์ด ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์Šคํ…Œ์ด๋ธ” ๋””ํ“จ์ ผ์„ ํ†ตํ•ด ์ˆ˜๋ฐฑ๊ฐ€์ง€์˜ ๋ฒ„์ „์„ ๋งŒ๋“ค์–ด๋ณด๊ณ  ๊ฐ€์žฅ ์ข‹์€๊ฒƒ๋“ค์„ ์ฐพ์•„๋ณด์ž

+ Recent posts