{"id":43350,"date":"2024-11-26T12:35:22","date_gmt":"2024-11-26T12:35:22","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=43350"},"modified":"2024-11-26T12:35:22","modified_gmt":"2024-11-26T12:35:22","slug":"electron-006-electron%ec%9d%98-%ec%a3%bc%ec%9a%94-%ea%b5%ac%ec%84%b1-%ec%9a%94%ec%86%8c-%ec%9b%b9-%ea%b8%b0%ec%88%a0%ec%9d%84-%ed%99%9c%ec%9a%a9%ed%95%9c-ui-%ea%b0%9c%eb%b0%9c-html-css-javascr","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/43350\/","title":{"rendered":"[Electron] 006. Electron\uc758 \uc8fc\uc694 \uad6c\uc131 \uc694\uc18c, \uc6f9 \uae30\uc220\uc744 \ud65c\uc6a9\ud55c UI \uac1c\ubc1c (HTML, CSS, JavaScript)"},"content":{"rendered":"

<\/p>\n

Electron\uc740 \ud604\ub300 \uc6f9 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ub370\uc2a4\ud06c\ud0d1 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub294 \uc624\ud508 \uc18c\uc2a4 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c HTML, CSS, JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \uc124\uacc4\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c\ub294 Electron\uc758 \uc8fc\uc694 \uad6c\uc131 \uc694\uc18c\uc640 \uc6f9 \uae30\uc220\uc744 \ud1b5\ud574 UI\ub97c \uac1c\ubc1c\ud558\ub294 \ubc29\ubc95\uc744 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. Electron\uc758 \uc8fc\uc694 \uad6c\uc131 \uc694\uc18c<\/h2>\n

Electron\uc740 \uba87 \uac00\uc9c0 \ud575\uc2ec \uad6c\uc131 \uc694\uc18c\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4. \uac01 \uad6c\uc131 \uc694\uc18c\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uacfc \uae30\ub2a5\uc744 \uacb0\uc815\uc9d3\ub294 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/p>\n

1.1 Main Process<\/h3>\n

Main Process\ub294 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uba54\uc778 \uc2a4\ub808\ub4dc\ub85c, \ubaa8\ub4e0 \uc6f9 \ud398\uc774\uc9c0\ub97c \uad00\ub9ac\ud558\uba70 Node.js API\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc138\uc2a4\ub294 \ube0c\ub77c\uc6b0\uc800\uc640 \uc720\uc0ac\ud55c \uc6f9 \ud398\uc774\uc9c0\ub97c \uc2e4\ud589\ud558\ub294 Renderer Process\ub97c \uc0dd\uc131\ud558\uace0, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0dd\uba85 \uc8fc\uae30\uc640 \uad00\ub828\ub41c \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n

const { app, BrowserWindow } = require('electron');\n\nlet mainWindow;\n\napp.on('ready', () => {\n    mainWindow = new BrowserWindow({\n        width: 800,\n        height: 600\n    });\n    mainWindow.loadFile('index.html');\n});<\/code><\/pre>\n
1.2 Renderer Process<\/h3>\n
Renderer Process\ub294 \uc0ac\uc6a9\uc790\uac00 \ubcfc \uc218 \uc788\ub294 UI\ub97c \ub2f4\ub2f9\ud558\ub294 \ud504\ub85c\uc138\uc2a4\uc785\ub2c8\ub2e4. HTML, CSS, JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc2dc\uac01\uc801\uc73c\ub85c \ubcf4\uc5ec\uc918\uc57c \ud560 \ubaa8\ub4e0 \uc694\uc18c\ub97c \ucc98\ub9ac\ud569\ub2c8\ub2e4. \uac01 Renderer Process\ub294 \uc644\uc804\ud788 \ub3c5\ub9bd\uc801\uc73c\ub85c \uc2e4\ud589\ub418\uba70, Node.js API\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc9c0\ub9cc, \ubcf4\uc548\uc0c1\uc758 \uc774\uc720\ub85c \uc124\uc815\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n
1.3 IPC (Inter-Process Communication)<\/h3>\n
Main Process\uc640 Renderer Process \uac04\uc758 \ud1b5\uc2e0\uc740 \ubc18\ub4dc\uc2dc IPC\ub97c \ud1b5\ud574 \uc774\ub8e8\uc5b4\uc838\uc57c \ud569\ub2c8\ub2e4. Electron\uc740 ipcMain<\/code>\uc640 ipcRenderer<\/code> \ubaa8\ub4c8\uc744 \uc81c\uacf5\ud558\uc5ec \ub450 \ud504\ub85c\uc138\uc2a4 \uac04\uc5d0 \uba54\uc2dc\uc9c0\ub97c \uc8fc\uace0\ubc1b\uc744 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n
const { ipcMain } = require('electron');\n\nipcMain.on('message-from-renderer', (event, arg) => {\n    console.log(arg); \/\/ Renderer\uc5d0\uc11c \ubcf4\ub0b8 \uba54\uc2dc\uc9c0\n});<\/code><\/pre>\n
2. \uc6f9 \uae30\uc220\uc744 \ud65c\uc6a9\ud55c UI \uac1c\ubc1c<\/h2>\n
Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 UI\ub294 \uc804\ud1b5\uc801\uc778 \uc6f9 \uac1c\ubc1c \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ub9cc\ub4ed\ub2c8\ub2e4. HTML\uc740 \uad6c\uc870\ub97c \uc815\uc758\ud558\uace0, CSS\ub294 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud558\uba70, JavaScript\ub294 \uc778\ud130\ub809\uc158\uc744 \ucc98\ub9ac\ud558\ub294 \ubaa8\ub4e0 \uc791\uc5c5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4. \uc544\ub798\uc5d0\uc11c \uac01\uac01\uc758 \uae30\uc220\uc744 \uc0ac\uc6a9\ud55c UI \uac1c\ubc1c \uc608\uc81c\ub97c \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
2.1 HTML\ub85c UI \uad6c\uc131\ud558\uae30<\/h3>\n
HTML\uc740 \uc6f9 \ud398\uc774\uc9c0\uc758 \uae30\ubcf8 \uad6c\uc870\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. Electron\uc5d0\uc11c\ub294 index.html<\/code> \ud30c\uc77c\uc744 \ud1b5\ud574 UI\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n
\uc608\uc81c: \uae30\ubcf8 HTML \uad6c\uc870<\/h4>\n
<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>\ub098\uc758 Electron \uc571<\/title>\n<\/head>\n<body>\n    <h1>\uc548\ub155\ud558\uc138\uc694, Electron!<\/h1>\n    <button id=\"myButton\">\ud074\ub9ad\ud558\uc138\uc694!<\/button>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n
2.2 CSS\ub85c \uc2a4\ud0c0\uc77c \uc801\uc6a9\ud558\uae30<\/h3>\n
CSS\ub97c \ud1b5\ud574 UI\uc758 \uc2dc\uac01\uc801 \uc694\uc18c\ub97c \uac15\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\ub798\uc640 \uac19\uc774 \uae30\ubcf8 \uc2a4\ud0c0\uc77c\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n
\uc608\uc81c: \uae30\ubcf8 CSS \uc2a4\ud0c0\uc77c<\/h4>\n
body {\n    font-family: Arial, sans-serif;\n    background-color: #f0f0f0;\n}\n\nh1 {\n    color: #333;\n}\n\nbutton {\n    padding: 10px 15px;\n    background-color: #4CAF50;\n    color: white;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n}\n\nbutton:hover {\n    background-color: #45a049;\n}<\/code><\/pre>\n<\/div>\n
2.3 JavaScript\ub85c \ub3d9\uc801 \uae30\ub2a5 \ucd94\uac00\ud558\uae30<\/h3>\n
JavaScript\ub97c \uc0ac\uc6a9\ud558\uc5ec UI\uc758 \uc0c1\ud638\uc791\uc6a9\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ubc84\ud2bc \ud074\ub9ad \uc2dc \uba54\uc2dc\uc9c0\ub97c \ucd9c\ub825\ud558\ub294 \uae30\ub2a5\uc744 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n
\uc608\uc81c: \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc774\ubca4\ud2b8 \ucc98\ub9ac<\/h4>\n
document.getElementById('myButton').addEventListener('click', () => {\n    alert('\ubc84\ud2bc\uc774 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4!');\n});<\/code><\/pre>\n<\/div>\n
3. \uc608\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub9cc\ub4e4\uae30<\/h2>\n
\uc774\uc81c\uae4c\uc9c0 \uc124\uba85\ud55c \ub0b4\uc6a9\uc744 \ubc14\ud0d5\uc73c\ub85c \uac04\ub2e8\ud55c Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ubc84\ud2bc \ud074\ub9ad \uc2dc \uba54\uc778 \ud504\ub85c\uc138\uc2a4\uc5d0 \uba54\uc2dc\uc9c0\ub97c \ubcf4\ub0b4\uace0, \uadf8\uc5d0 \ub300\ud55c \uc751\ub2f5\uc744 \ubc1b\ub294 \uac04\ub2e8\ud55c \uad6c\uc870\ub85c \ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
3.1 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h3>\n
\uc544\ub798\uc640 \uac19\uc740 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub85c \uad6c\uc131\ud569\ub2c8\ub2e4:<\/p>\n
\n
\ub514\ub809\ud1a0\ub9ac \uad6c\uc870<\/h4>\n
my-electron-app\/\n    \u251c\u2500\u2500 package.json\n    \u251c\u2500\u2500 index.html\n    \u251c\u2500\u2500 style.css\n    \u2514\u2500\u2500 main.js<\/code><\/pre>\n<\/div>\n
3.2 package.json \uc124\uc815<\/h3>\n
\ud504\ub85c\uc81d\ud2b8\uc758 \uba54\ud0c0\ub370\uc774\ud130 \ubc0f \uc885\uc18d\uc131\uc744 \uad00\ub9ac\ud558\uae30 \uc704\ud574 package.json<\/code> \ud30c\uc77c\uc744 \uc544\ub798\uc640 \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\n
\uc608\uc81c: package.json<\/h4>\n
{\n    \"name\": \"my-electron-app\",\n    \"version\": \"1.0.0\",\n    \"main\": \"main.js\",\n    \"scripts\": {\n        \"start\": \"electron .\"\n    },\n    \"dependencies\": {\n        \"electron\": \"^latest\"\n    }\n}<\/code><\/pre>\n<\/div>\n
3.3 index.html \ud30c\uc77c \uc791\uc131<\/h3>\n
\uc774\uc81c HTML \ud30c\uc77c\uc744 \uc544\ub798\uc640 \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\n
\uc608\uc81c: index.html<\/h4>\n
<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>\ub098\uc758 Electron \uc571<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <h1>\uc548\ub155\ud558\uc138\uc694, Electron!<\/h1>\n    <button id=\"myButton\">\ud074\ub9ad\ud558\uc138\uc694!<\/button>\n\n    <script src=\"renderer.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n
3.4 main.js \uc791\uc131<\/h3>\n
Main Process\ub97c \uc81c\uc5b4\ud558\uae30 \uc704\ud55c main.js<\/code> \ud30c\uc77c\uc744 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\n
\uc608\uc81c: main.js<\/h4>\n
const { app, BrowserWindow, ipcMain } = require('electron');\n\nlet mainWindow;\n\napp.on('ready', () => {\n    mainWindow = new BrowserWindow({\n        width: 800,\n        height: 600\n    });\n    mainWindow.loadFile('index.html');\n});\n\nipcMain.on('message-from-renderer', (event, arg) => {\n    console.log(arg);\n    event.reply('reply-from-main', '\uc8fc\uc2e0 \uba54\uc2dc\uc9c0: ' + arg);\n});<\/code><\/pre>\n<\/div>\n
3.5 renderer.js \uc791\uc131<\/h3>\n
Renderer Process\uc5d0\uc11c \uc0ac\uc6a9\ud560 JavaScript \ud30c\uc77c\uc744 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\n
\uc608\uc81c: renderer.js<\/h4>\n
const { ipcRenderer } = require('electron');\n\ndocument.getElementById('myButton').addEventListener('click', () => {\n    ipcRenderer.send('message-from-renderer', '\uc548\ub155\ud558\uc138\uc694, \uba54\uc778 \ud504\ub85c\uc138\uc2a4!');\n});\n\nipcRenderer.on('reply-from-main', (event, arg) => {\n    alert(arg);\n});<\/code><\/pre>\n<\/div>\n
4. \uacb0\ub860<\/h2>\n
Electron\uc744 \uc0ac\uc6a9\ud558\uba74 \uc6f9 \uac1c\ubc1c\uc5d0 \uc775\uc219\ud55c \uac1c\ubc1c\uc790\ub4e4\uc774 \uc190\uc27d\uac8c \ub370\uc2a4\ud06c\ud0d1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. HTML, CSS, JavaScript\ub97c \ud65c\uc6a9\ud574 \uc2dc\uac01\uc801\uc774\uace0 \uae30\ub2a5\uc801\uc778 UI\ub97c \uad6c\uc131\ud560 \uc218 \uc788\uc73c\uba70, Main Process\uc640 Renderer Process\ub97c \ud1b5\ud574 \ud6a8\uc728\uc801\uc73c\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub85c\uc9c1\uc744 \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c \uc18c\uac1c\ud55c \ub0b4\uc6a9\uc744 \ubc14\ud0d5\uc73c\ub85c \uc5ec\ub7ec\ubd84\uc758 \uc544\uc774\ub514\uc5b4\ub97c \uc2e4\ud604\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
5. \ucc38\uace0 \uc790\ub8cc<\/h3>\n