\uac8c\uc784 \uadf8\ub798\ud53d\uc740 \ud50c\ub808\uc774\uc5b4\uc5d0\uac8c \uc911\uc694\ud55c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \uac15\uc88c\uc5d0\uc11c\ub294 \uac8c\uc784\uc5d0\uc11c \uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc5b4\ub5bb\uac8c \ub354 \ub9ce\uc740 \uc0dd\ub3d9\uac10\uc744 \uc904 \uc218 \uc788\ub294\uc9c0\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud1b5\ud574 \uc544\uc774\ud15c\uc758 \ub3d9\uc791\uacfc \uc0c1\ud638\uc791\uc6a9\uc744 \ud45c\ud604\ud568\uc73c\ub85c\uc368, \uac8c\uc784\uc758 \ubab0\uc785\uac10\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
1. \uac8c\uc784 \uadf8\ub798\ud53d\uc758 \uae30\ucd08 \uc774\ud574<\/h2>\n
\uac8c\uc784 \uadf8\ub798\ud53d\uc740 2D \ub610\ub294 3D \ud615\ud0dc\ub85c \uc874\uc7ac\ud558\uba70, \uac01\uae30 \ub2e4\ub978 \uc2a4\ud0c0\uc77c\uacfc \uae30\ubc95\uc744 \ud1b5\ud574 \ud50c\ub808\uc774\uc5b4\uc5d0\uac8c \uc2dc\uac01\uc801 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \uc139\uc158\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\ucd08\uc801\uc778 \uac1c\ub150\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4:<\/p>\n
- \n
- 2D vs 3D \uadf8\ub798\ud53d<\/li>\n
- \uc2a4\ud504\ub77c\uc774\ud2b8\uc640 \ubaa8\ub378\ub9c1<\/li>\n
- \ud504\ub808\uc784\uacfc FPS(\ud504\ub808\uc784 \ud37c \ucd08)<\/li>\n<\/ul>\n
2D vs 3D \uadf8\ub798\ud53d<\/h3>\n
2D \uadf8\ub798\ud53d\uc740 \ud3c9\uba74 \uc774\ubbf8\uc9c0\ub85c \ud45c\ud604\ub418\uba70, \uc8fc\ub85c \uc2a4\ud504\ub77c\uc774\ud2b8\ub85c \uad00\ub9ac\ub429\ub2c8\ub2e4. \ubc18\uba74, 3D \uadf8\ub798\ud53d\uc740 \uacf5\uac04\uc801\uc778 \uae4a\uc774\ub97c \uac16\uace0, \ubaa8\ub378\ub9c1 \ubc0f \ud14d\uc2a4\ucc98\ub9c1 \uacfc\uc815\uc744 \ud1b5\ud574 \uc81c\uc791\ub429\ub2c8\ub2e4. \ub450 \uac00\uc9c0 \uc2a4\ud0c0\uc77c\uc740 \uac01\uac01\uc758 \uc7a5\uc810\uacfc \ub2e8\uc810\uc744 \uac00\uc9c0\uace0 \uc788\uc73c\uba70, \uac8c\uc784\uc758 \uc8fc\uc81c\uc640 \uc2a4\ud0c0\uc77c\uc5d0 \ub530\ub77c \uc120\ud0dd\ub429\ub2c8\ub2e4.<\/p>\n
\uc2a4\ud504\ub77c\uc774\ud2b8\uc640 \ubaa8\ub378\ub9c1<\/h3>\n
\uc2a4\ud504\ub77c\uc774\ud2b8\ub294 2D \uac8c\uc784\uc5d0\uc11c \uce90\ub9ad\ud130, \uc544\uc774\ud15c \ub4f1\uc758 \uc2dc\uac01\uc801 \uc694\uc18c\ub97c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. \ubc18\uba74\uc5d0 3D \ubaa8\ub378\ub9c1\uc740 Blender, Maya \ub4f1\uacfc \uac19\uc740 \uc18c\ud504\ud2b8\uc6e8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec 3D \uac1d\uccb4\ub97c \ub9cc\ub4dc\ub294 \uacfc\uc815\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4.<\/p>\n
\ud504\ub808\uc784\uacfc FPS<\/h3>\n
FPS\ub294 \ucd08\ub2f9 \ud45c\uc2dc\ub418\ub294 \ud504\ub808\uc784 \uc218\ub97c \uc758\ubbf8\ud558\uba70, FPS\uac00 \ub192\uc744\uc218\ub85d \ub354 \ubd80\ub4dc\ub7ec\uc6b4 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud560 \ub54c\ub294 \uc801\uc808\ud55c \ud504\ub808\uc784 \uc218\ub97c \uace0\ub824\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n
2. \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc911\uc694\uc131<\/h2>\n
\uc560\ub2c8\uba54\uc774\uc158\uc740 \uac8c\uc784\uc758 \uc0dd\ub3d9\uac10\uc744 \ub354\ud558\ub294 \ub370 \ud544\uc218\uc801\uc785\ub2c8\ub2e4. \uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud1b5\ud574 \ubb3c\uccb4\uc758 \uc6c0\uc9c1\uc784, \uc0c1\ud638\uc791\uc6a9 \ubc0f \ud2b9\uc9d5\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc544\uc774\ud15c\uc774 \ubc14\ub2e5\uc5d0 \ub5a8\uc5b4\uc9c0\uac70\ub098, \uc0ac\uc6a9\ub420 \ub54c\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 \ud50c\ub808\uc774\uc5b4\uc5d0\uac8c \uba85\ud655\ud55c \ud53c\ub4dc\ubc31\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n
\uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc885\ub958<\/h3>\n
\uc544\uc774\ud15c\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc740 \uc5ec\ub7ec \uac00\uc9c0 \ubc29\uc2dd\uc73c\ub85c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc8fc\uc694\ud55c \uc885\ub958\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
- \n
- \ud68c\uc804 \uc560\ub2c8\uba54\uc774\uc158<\/li>\n
- \ud754\ub4e4\ub9bc \uc560\ub2c8\uba54\uc774\uc158<\/li>\n
- \uc544\uc774\ud15c \ub4f1\uc7a5 \ubc0f \uc0ac\ub77c\uc9d0 \uc560\ub2c8\uba54\uc774\uc158<\/li>\n
- \uc0c1\ud638\uc791\uc6a9 \uc560\ub2c8\uba54\uc774\uc158<\/li>\n<\/ul>\n
3. \uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158 \uae30\ucd08<\/h2>\n
\uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 \ud544\uc694\ud55c \uae30\ucd08 \uc9c0\uc2dd\uacfc \uae30\uc220\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc5d0 \ud544\uc694\ud55c \uac83\uc740 \uc560\ub2c8\uba54\uc774\uc158 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \uc544\ud2b8\uc6cc\ud06c\uc785\ub2c8\ub2e4.<\/p>\n
\uc560\ub2c8\uba54\uc774\uc158 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/h3>\n
\ub9ce\uc740 \uac8c\uc784 \uc5d4\uc9c4\uc5d0\uc11c\ub294 \uae30\ubcf8\uc801\uc778 \uc560\ub2c8\uba54\uc774\uc158 \uae30\ub2a5\uc744 \uc81c\uacf5\ud0a4 \ub54c\ubb38\uc5d0, \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ub370 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 API\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4:<\/p>\n
const item = document.getElementById('item');\nitem.animate([\n { transform: 'scale(1)' },\n { transform: 'scale(1.2)' },\n { transform: 'scale(1)' }\n], {\n duration: 600,\n iterations: Infinity,\n direction: 'alternate'\n});<\/code><\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub294 HTML \uc694\uc18c\uc5d0 \ub300\ud55c \uac04\ub2e8\ud55c \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n
\uc544\ud2b8\uc6cc\ud06c<\/h3>\n
\uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud574\uc11c\ub294 \uace0\uc720\uc758 \uc544\ud2b8\uc6cc\ud06c\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uc774 \uc544\ud2b8\uc6cc\ud06c\ub294 2D \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8 \ub610\ub294 3D \ubaa8\ub378\ub85c \uc81c\uacf5\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc2a4\ud504\ub77c\uc774\ud2b8 \uc560\ub2c8\uba54\uc774\uc158\uc758 \uac04\ub2e8\ud55c \uc608\uc2dc\uc785\ub2c8\ub2e4.<\/p>\n
const spriteSheet = new Image();\nspriteSheet.src = 'spritesheet.png';\n\nconst frameWidth = 64;\nconst frameHeight = 64;\n\nfunction animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n const frameX = (currentFrame % framesPerRow) * frameWidth;\n const frameY = Math.floor(currentFrame \/ framesPerRow) * frameHeight;\n ctx.drawImage(spriteSheet, frameX, frameY, frameWidth, frameHeight, x, y, frameWidth, frameHeight);\n currentFrame = (currentFrame + 1) % totalFrames;\n requestAnimationFrame(animate);\n}\nanimate();<\/code><\/pre>\n4. \uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158 \uad6c\ud604\ud558\uae30<\/h2>\n
\uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\uc81c\ub85c \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc124\uba85\uc740 \uc544\ub798\uc640 \uac19\uc774 \ub098\ub204\uc5b4 \uc9c4\ud589\ud558\uaca0\uc2b5\ub2c8\ub2e4:<\/p>\n
- \n
- \uc544\uc774\ud15c \ubaa8\ub378 \ub610\ub294 \uc2a4\ud504\ub77c\uc774\ud2b8 \ub9cc\ub4e4\uae30<\/li>\n
- \uc560\ub2c8\uba54\uc774\uc158 \uc2a4\ud06c\ub9bd\ud2b8 \ub9cc\ub4e4\uae30<\/li>\n
- \uac8c\uc784 \uc5d4\uc9c4\uc5d0 \ud1b5\ud569\ud558\uae30<\/li>\n<\/ol>\n
\uc544\uc774\ud15c \ubaa8\ub378 \ub610\ub294 \uc2a4\ud504\ub77c\uc774\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n
\uc6b0\uc120, 2D \ub610\ub294 3D \uc18c\ud504\ud2b8\uc6e8\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc544\uc774\ud15c\uc758 \ubaa8\ub378\uc744 \ub9cc\ub4e4\uac70\ub098 \uc2a4\ud504\ub77c\uc774\ud2b8\ub97c \ub514\uc790\uc778\ud574\uc57c \ud569\ub2c8\ub2e4. \uc544\ub798\ub294 2D \uc544\uc774\ud15c \uc2a4\ud504\ub77c\uc774\ud2b8\ub97c \uc81c\uc791\ud558\ub294 \uacfc\uc815\uc785\ub2c8\ub2e4:<\/p>\n
- \n
- \ub514\uc790\uc778 \ud234(\uc608: Adobe Photoshop, GIMP)\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2a4\ud504\ub77c\uc774\ud2b8\ub97c \uadf8\ub9bd\ub2c8\ub2e4.<\/li>\n
- \ud3f4\ub9ac\uace4 \uc218, \ud14d\uc2a4\ucc98 \ub9f5 \ub4f1\uc744 \uace0\ub824\ud558\uc5ec \uc544\uc774\ud15c\uc744 3D\ub85c \ubaa8\ub378\ub9c1\ud569\ub2c8\ub2e4.<\/li>\n
- \uc2a4\ud504\ub77c\uc774\ud2b8 \uc2dc\ud2b8\ub97c \uc0dd\uc131\ud558\uc5ec \uac01 \uc560\ub2c8\uba54\uc774\uc158 \ud504\ub808\uc784\uc744 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
\uc560\ub2c8\uba54\uc774\uc158 \uc2a4\ud06c\ub9bd\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n
\uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud55c \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc791\uc131\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uac04\ub2e8\ud55c \uc608\uc2dc\uc785\ub2c8\ub2e4:<\/p>\n
class Item {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.currentFrame = 0;\n this.frames = [];\n this.loadFrames();\n }\n \n loadFrames() {\n for (let i = 0; i < totalFrames; i++) {\n const image = new Image();\n image.src = `itemFrame${i}.png`;\n this.frames.push(image);\n }\n }\n\n update() {\n this.currentFrame = (this.currentFrame + 1) % totalFrames;\n }\n\n draw(ctx) {\n ctx.drawImage(this.frames[this.currentFrame], this.x, this.y);\n }\n}\n\n\/\/ \uc0ac\uc6a9 \uc608\nconst item = new Item(100, 100);\nfunction gameLoop() {\n item.update();\n item.draw(ctx);\n requestAnimationFrame(gameLoop);\n}\ngameLoop();<\/code><\/pre>\n\uac8c\uc784 \uc5d4\uc9c4\uc5d0 \ud1b5\ud569\ud558\uae30<\/h3>\n
\ub9c8\uc9c0\ub9c9\uc73c\ub85c, \uc560\ub2c8\uba54\uc774\uc158\uc744 \uac8c\uc784 \uc5d4\uc9c4\uc5d0 \ud1b5\ud569\ud558\uc5ec \ud50c\ub808\uc774\uc5b4\uac00 \ud574\ub2f9 \uc544\uc774\ud15c\uacfc \uc0c1\ud638\uc791\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4. Unity\ub098 Unreal Engine\uacfc \uac19\uc740 \uc5d4\uc9c4\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6cc\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
5. \ud0c1\uc6d4\ud55c \uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc758 \ube44\uacb0<\/h2>\n
\ud0c1\uc6d4\ud55c \uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc740 \ub2e8\uc21c\ud55c \uc6c0\uc9c1\uc784\uc744 \ub118\uc5b4\uc11c\uc57c \ud569\ub2c8\ub2e4. \ud6a8\uacfc\uc801\uc778 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uc791\ud558\uae30 \uc704\ud55c \ud301\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n
- \n
- \ub9ac\uc5bc\ub9ac\uc998\uacfc \uc2a4\ud2f0\ub9ac\ud654\uc758 \uade0\ud615\uc744 \ub9de\ucd94\uae30<\/li>\n
- \uc0c1\ud638\uc791\uc6a9\uc5d0 \ubc18\uc751\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ucd94\uac00\ud558\uae30<\/li>\n
- \uc0ac\uc6a9\uc790\uc758 \ud53c\ub4dc\ubc31\uc744 \uace0\ub824\ud55c \ub514\uc790\uc778<\/li>\n<\/ul>\n
\ub9ac\uc5bc\ub9ac\uc998\uacfc \uc2a4\ud2f0\ub9ac\ud654\uc758 \uade0\ud615<\/h3>\n
\uc2e4\uc81c \ubb3c\ub9ac \ubc95\uce59\uc744 \ubc18\uc601\ud558\uba74\uc11c\ub3c4 \uac8c\uc784\uc758 \uc2a4\ud0c0\uc77c\uc5d0 \ub9de\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac8c\uc784\uc758 \ubab0\uc785\uac10\uc744 \ub354\uc6b1 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc0c1\ud638\uc791\uc6a9\uc5d0 \ubc18\uc751\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158<\/h3>\n
\uc544\uc774\ud15c\uc774 \uc0ac\uc6a9\ub418\uac70\ub098 \ud074\ub9ad\ub420 \ub54c \uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc18\uc751\ud558\ub3c4\ub85d \ud568\uc73c\ub85c\uc368, \ud50c\ub808\uc774\uc5b4\ub294 \ubcf4\ub2e4 \uc9c1\uad00\uc801\uc778 \uc0c1\ud638\uc791\uc6a9\uc744 \uacbd\ud5d8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc0ac\uc6a9\uc790\uc758 \ud53c\ub4dc\ubc31\uc744 \uace0\ub824\ud55c \ub514\uc790\uc778<\/h3>\n
\ud50c\ub808\uc774\uc5b4\uc758 \ud53c\ub4dc\ubc31\uc744 \uc218\uc9d1\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc758 \ubc18\uc751\uc131\uacfc \uc2dc\uac01\uc801\uc778 \uc694\uc18c\ub97c \uc870\uc815\ud558\uba74, \ub354\uc6b1 \uae0d\uc815\uc801\uc778 \uac8c\uc784 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub9c8\uce58\uba70<\/h2>\n
\uc544\uc774\ud15c \uc560\ub2c8\uba54\uc774\uc158\uc740 \uac8c\uc784 \uadf8\ub798\ud53d\uc5d0\uc11c \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\ub97c \ud1b5\ud574 \ud559\uc2b5\ud55c \ub0b4\uc6a9\uc744 \ubc14\ud0d5\uc73c\ub85c, \uadc0\ud558\uc758 \uac8c\uc784\uc5d0 \uc0dd\ub3d9\uac10\uc744 \ubd88\uc5b4\ub123\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub418\uae38 \ubc14\ub78d\ub2c8\ub2e4. \uc560\ub2c8\uba54\uc774\uc158\uc758 \ub2e4\uc591\ud55c \uae30\ubc95\uc744 \uc801\uc6a9\ud558\uc5ec \ub2e4\ucc44\ub85c\uc6b4 \uac8c\uc784 \uacbd\ud5d8\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uc138\uc694!<\/p>\n
\uac10\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n<\/article>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"