{"id":249,"date":"2026-06-26T13:33:54","date_gmt":"2026-06-26T13:33:54","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=249"},"modified":"2026-06-26T13:34:09","modified_gmt":"2026-06-26T13:34:09","slug":"ai%ec%9d%b4%eb%af%b8%ec%a7%80-%ec%83%9d%ec%84%b1%ea%b8%b0-%ea%b5%ac%ed%98%84","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=249","title":{"rendered":"ai\uc774\ubbf8\uc9c0-\uc0dd\uc131\uae30-\uad6c\ud604"},"content":{"rendered":"
\n

\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uc6f9\ud398\uc774\uc9c0\uc5d0 AI\uae30\ubc18 \uc774\ubbf8\uc9c0 \uc0dd\uc131 \uc11c\ube44\uc2a4\ub97c \uad6c\ud604\ud574 \ubd05\uc2dc\ub2e4.<\/p>\n<\/blockquote>\n

Chat-GPT \uc758 DALL-E \ubaa8\ub378\uc744 \ud65c\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4.
\nDALL-E\ub294 \ud14d\uc2a4\ud2b8 \uc124\uba85\uc744 \uae30\ubc18\uc73c\ub85c \uc774\ubbf8\uc9c0\ub97c \uc0dd\uc131\ud558\ub294 AI \ubaa8\ub378\ub85c, \uc790\uc5f0\uc5b4\ub97c \uae30\ubc18\uc73c\ub85c \uadf8\ub9bc\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.
\n \ud604\uc7ac \ubc84\uc804\uc740 DALL-E-3 \uc774\uba70 DALL-E-2 \uc640 DALL-E-3 \ubaa8\ub378 \uc911 \uc120\ud0dd\ud558\uc5ec \uc0ac\uc6a9\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n\n\n
\uc624\ud508ai api \ubb38\uc11c<\/th>\nhttps:\/\/platform.openai.com\/docs\/overview<\/a><\/th>\n<\/tr>\n<\/thead>\n
\uc774\ubbf8\uc9c0\uc0dd\uc131\uae30 \uac00\uc774\ub4dc \ub9c1\ud06c<\/td>\nhttps:\/\/platform.openai.com\/docs\/api-reference\/images<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\ud83d\udd17\uc644\uc131\ud654\uba74<\/a><\/p>\n

1. html \uad6c\uc870\uc791\uc131<\/h2>\n
\n

Info<\/strong>: \ud83d\udca1 html,css, \uc544\uc774\ucf58 \ubaa8\ub450 \ubd80\ud2b8\uc2a4\ud2b8\ub7a9 \uc2dc\uc2a4\ud15c\uc744 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

1.1.\ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c\ub4dc<\/h3>\n
    \n
  1. \uc544\ub798 \ucf54\ub4dc\ub97c \ubd99\uc5ec \ub123\uc5b4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub85c\ub4dc\ud558\uace0 \ud3f0\ud2b8\ub97c \uc138\ud305\ud569\ub2c8\ub2e4.<\/li>\n
  2. \uae30\ubcf8\uc801\uc778 css \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.
    \n    \ud83d\udd17bootstrap-cheatsheet<\/strong><\/a><\/li>\n<\/ol>\n
    <!DOCTYPE html>\n<html lang="ko">\n  <head>\n    <meta charset="utf-8" \/>\n    <meta name="viewport" content="width=device-width, initial-scale=1" \/>\n    <title>Bootstrap demo<\/title>\n    <link\n      rel="stylesheet"\n      href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css"\n    \/>\n    <link\n      href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css"\n      rel="stylesheet"\n      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"\n      crossorigin="anonymous"\n    \/>\n    <style>\n      @import url("https:\/\/cdn.jsdelivr.net\/gh\/orioncactus\/pretendard@v1.3.9\/dist\/web\/variable\/pretendardvariable.min.css");\n\n      body {\n        font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;\n\n        a {\n          font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;\n        }\n\n        h1 {\n          font-weight: 900;\n        }\n\n        p {\n          font-weight: 500;\n        }\n\n        .message,\n        #spinner {\n          display: none;\n        }\n      }\n    <\/style>\n  <\/head>\n\n  <body>\n    <h1>Hello, world!<\/h1>\n    <script\n      src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js"\n      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"\n      crossorigin="anonymous"\n    ><\/script>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n
    1.2. container \ucd94\uac00<\/h3>\n
    <body>\n  \n  <div class="container-fluid">\n    <div class="row justify-content-center">\n      <div class="col-12 col-md 10 col-lg-8 col-xl-6 mt-5">\n        <p class="lead">API \ud0a4\uac00 \ud544\uc694 \ud569\ub2c8\ub2e4.<a href="http:\/\/platform.openai.com" target="_blank" rel="noopener noreferrer">\uc5ec\uae30\uc11c \ubc1c\uae09 \ubc1b\uc73c\uc2e4\uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/a><\/p>\n      <\/div>\n    <\/div>\n  <\/div>  \n  ...\n<\/code><\/pre>\n
    1.3. button \ucd94\uac00<\/h3>\n
    <\/div>  \n<div class="position-absolute top-0 end-0 mt-2 me-3"><button type="button" id="api" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#Keymodal">API\ud0a4 \uc785\ub825\ud558\uae30<\/button>\n<\/div> \n...\n<\/code><\/pre>\n
    \ud83d\udd171.3.\uc644\uc131\ud654\uba74<\/a><\/p>\n
    1.4. \uba54\uc778\uc601\uc5ed\ucd94\uac00<\/h3>\n
      \n
    1. \ubaa8\ub2ec\ud31d\uc5c5<\/li>\n<\/ol>\n
      \n<div class="container mt-5">\n  <div class="modal fade" id="Keymodal" tabindex="-1">\n    <div class="modal-dialog">\n      <div class="modal-content">\n        <div class="modal-header">\n          <h5 class="modal-title" id="ModalLabel">\n            \uc785\ub825\ud558\uc2e0 API\ud0a4\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc758 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc800\uc7a5\ub418\uba70 \ucc3d\uc744 \ub2eb\ub294\n            \uc989\uc2dc \uc0ad\uc81c\ub429\ub2c8\ub2e4.\n          <\/h5>\n        <\/div>\n        <div class="modal-body">\n          <div class="form-group">\n            <label for="apikey">API KEY \uc785\ub825\ucc3d<\/label\n            ><input\n              type="text"\n              class="form-control"\n              id="apikey"\n              placeholder="GPT\uc5d0\uc11c \ubc1c\uae09\ubc1b\uc740 API\ud0a4\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694."\n            \/>\n          <\/div>\n        <\/div>\n        <div class="modal-footer">\n          <button\n            type="button"\n            class="btn btn-secondary"\n            data-bs-dismiss="modal"\n          >\n            \ucc3d\ub2eb\uae30<\/button\n          ><button type="button" class="btn btn-primary">\uc800\uc7a5\ud558\uae30<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
        \n
      1. \uba54\uc778\uc601\uc5ed<\/li>\n<\/ol>\n
        <div class="container mt-5">\n  <div class="row justify-content-center">\n    \n    <div class="col-md-8">\n      <div class="message alert alert-danger text-center" id="message"><\/div>\n    <\/div>\n  <\/div>\n  \n<\/div>\n\n\n\n<header class="mt-5">\n  <h1 class="text-center">AI \uc774\ubbf8\uc9c0 \uc0dd\uc131\uae30<\/h1>\n  <p class="lead text-center">\n    Generative AI\ub85c \uc0dd\uac01\uc744 \uadf8\ub9bc\uc73c\ub85c \uadf8\ub824 \ubcf4\uc138\uc694. \uba38\ub9bf\uc18d\uc758 \uc0dd\uac01\uc744 \uac04\ub2e8\ud788\n    \uc124\uba85\ud558\uc138\uc694!\n  <\/p>\n<\/header>\n\n\n<section class="mt-5">\n  <form id="generate-form">\n    <div class="row">\n      <div class="col-md-9">\n        <div class="form-group">\n          <input\n            type="text"\n            id="prompt"\n            class="form-control py-2 pb-2"\n            placeholder="\uc2e0\ubd84\uc774 \uacf5\uc8fc\uc778\ub370 \uc131\uaca9\uc740 \uac1c\uad6c\uc7c1\uc774\uc778 \ubab0\ud2f0\uc988 \uac15\uc544\uc9c0\ub97c \uadf8\ub824\uc918"\n          \/>\n        <\/div>\n      <\/div>\n      <div class="col-md-3">\n        <div class="form-group">\n          <button type="submit" class="btn btn-primary btn-lg" id="generate">\n            \ub098\uc640\ub77c \ubfc5!\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/form>\n<\/section>\n\n<div class="spinner-border text-danger" id="spinner"><\/div>\n\n<section class="container mt-5">\n  <div class="row justify-content-center" id="gallery">\n    \n  <\/div>\n<\/section>\n<\/div> \n<\/code><\/pre>\n
        \ud83d\udd171.4.\uc644\uc131\ud654\uba74<\/a><\/p>\n
        2. \uc2a4\ud06c\ub9bd\ud2b8 \uc791\uc131<\/h2>\n
        2.1. \uc678\ubd80 \uc2a4\ud06c\ub9bd\ud2b8 \uc5f0\uacb0<\/h3>\n
          <\/div> \n  <script src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"><\/script>\n  \n**  <script src="dalle.js"><\/script>**\n  \n<\/body>\n<\/code><\/pre>\n
        2.2. \ubaa8\ub2ec\ud31d\uc5c5 \uad6c\ud604<\/h3>\n
        \n
        Info<\/strong>: \ud83d\udca1 \ubaa8\ub2ec\uae30\ub2a5\uc740 \ubd80\ud2b8\uc2a4\ud2b8\ub7a9\uc758 \uba54\uc11c\ub4dc\ub97c \ud65c\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4<\/p>\n<\/blockquote>\n
        const keyModalEl = document.querySelector('#Keymodal');\n\/\/\ubd80\ud2b8\uc2a4\ud2b8\ub7a9 \ubaa8\ub2ec \uc778\uc2a4\ud134\uc2a4\ub85c keyModalEl \ub4f1\ub85d\nconst keyModal = new bootstrap.Modal(keyModalEl);\n\/\/keyModalEl\uc5d0 \uc774\ubca4\ud2b8\ud578\ub4e4\ub7ec \uc791\uc131. \uc774\ubca4\ud2b8\ub294 \ubaa8\ub2ec\uc778\uc2a4\ud134\uc2a4\uc758 \uac83\uc744 \uc0ac\uc6a9\nkeyModalEl.addEventListener('shown.bs.modal', () => {\n\tconst saveBtn = document.querySelector('.btn-primary');\n\tconst keyInput = document.querySelector('#apikey');\n\tsaveBtn.addEventListener('click', () => {\n\t\tconst keyVal = keyInput.value;\n\t\t\/\/\ub85c\uceec\uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \ud0a4\uac12 \uc800\uc815\n\t\tlocalStorage.setItem('API_KEY', keyVal);\n\t\t\/\/\ubaa8\ub2ec\ucc3d \ub2eb\uc74c\n\t\tkeyModal.hide();\n\t});\n});\n<\/code><\/pre>\n
        \ud83d\udd172.2.\uc644\uc131\ud654\uba74<\/a><\/p>\n
          \n
        1. shown.bs.modal : \ubd80\ud2b8\uc2a4\ud2b8\ub7a9\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uc18d\uc131\uc785\ub2c8\ub2e4.<\/li>\n
        2. \uc544\ub798 \uadf8\ub9bc\uc740 html \uacfc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud574\ub2f9 \ucf54\ub4dc\ub85c \uc5f0\uad00\ub41c \uc18d\uc131\ub07c\ub9ac \uac19\uc740 \uc0c9\uc0c1\uc758 \ud14c\ub450\ub9ac\ub85c \ud45c\uc2dc\ud558\uc600\uc2b5\ub2c8\ub2e4.
          \n  \ube68\uac04 \ud14c\ub450\ub9ac\uc758 \uc18d\uc131\uc740 \ud1a0\uae00\uad00\ub828 \uae30\ub2a5\/\ub514\uc790\uc778\uc744 \ub9cc\ub4e4\uc5b4 \uc8fc\uace0 \ud30c\ub780 \ud14c\ub450\ub9ac\uc758 \uc18d\uc131\uc740  \ubaa8\ub2ec\uad00\ub828 \uae30\ub2a5\/\ub514\uc790\uc778\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.
          \n\ubd80\ud2b8\uc2a4\ud2b8\ub7a9\uc744 \uc0ac\uc6a9\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8 \uc81c\uc791\uc2dc html \ud0dc\uadf8\uc5d0\uc11c \ud45c\uc2dc\ub41c \uc18d\uc131\uc744 \ud544\uc218\ub85c \uc791\uc131\ud574\uc57c \ud558\uba70 \uc18d\uc131\uc758 \uac12\uc744 \uac19\uac8c \uc791\uc131\ud574\uc57c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 \ud45c\uc2dc\ub41c \ubd80\ud2b8\uc2a4\ud2b8\ub7a9\uc758 \uc18d\uc131\uc774\ub098 \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n
          \"\ud83d\udd17\ubd80\ud2b8\uc2a4\ud2b8\ub7a9<\/p>\n
            \n
          1. \uc774\ud6c4\uc758 \uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc8fc\uc11d\uc744 \ucc38\uace0\ud558\uc138\uc694<\/li>\n
          2. \uc2e4\ud589\ud654\uba74\uc5d0\uc11c API\ud0a4 \uc785\ub825\ud558\uae30 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uace0 API \ud0a4\uac00 \ub85c\uceec\uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uc800\uc7a5\ub418\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
            \"\"<\/p>\n
            2.3. \ub354\ubbf8\uc774\ubbf8\uc9c0 \ucd94\uac00\ud558\uae30<\/h3>\n
            \n
            Info<\/strong>: \ud83d\udca1 \ub2ec\ub9ac\uac00 \uadf8\ub824\uc904 \uc774\ubbf8\uc9c0\ub97c \uc608\uc2dc\ub97c \ucd94\uac00\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
              \uc0ac\uc6a9\ud560 \uc774\ubbf8\uc9c0\uc758 \ub370\uc774\ud130\ub294 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc138\uc694<\/p>\n
            const images = [\n  "https:\/\/qwerewqwerew.github.io\/source\/js\/dall-E\/ai\/dog1.png",\n  "https:\/\/qwerewqwerew.github.io\/source\/js\/dall-E\/ai\/dog2.png",\n  "https:\/\/qwerewqwerew.github.io\/source\/js\/dall-E\/ai\/dog3.png",\n  "https:\/\/qwerewqwerew.github.io\/source\/js\/dall-E\/ai\/dog4.png",\n];\n<\/code><\/pre>\n
            const images = [\n  "https:\/\/qwerewqwerew.github.io\/source\/js\/dall-E\/ai\/dog1.png",\n  "https:\/\/qwerewqwerew.github.io\/source\/js\/dall-E\/ai\/dog2.png",\n  "https:\/\/qwerewqwerew.github.io\/source\/js\/dall-E\/ai\/dog3.png",\n  "https:\/\/qwerewqwerew.github.io\/source\/js\/dall-E\/ai\/dog4.png",\n];\n\nconst imageGallery = document.querySelector("#gallery");\nfunction displayImage() {\n  const imageMarkUp = images\n    .map((image) => {\n      return `\n       <div class="col-12 col-sm-6 col-md-3 mb-4 position-relative" id ="image-container ">\n          <img src="${image}" class="img-fluid" alt="Placeholder Image">\n        <\/div>\n        `;\n    })\n    .join("");\n  imageGallery.innerHTML = imageMarkUp;\n}\ndisplayImage();\n<\/code><\/pre>\n
            \ud83d\udd172.3.\uc644\uc131\ud654\uba74<\/a>
            \ndisplayImage<\/code> \ud568\uc218\ub97c \uc120\uc5b8\ud558\uace0 \ud568\uc218 \ubc14\ub514\uc5d0 imageMarkUp \ubcc0\uc218\ub85c images<\/code> \ubc30\uc5f4 \ubcc0\uc218\ub0b4\uc758 \uc6d0\uc18c\ub97c \uc21c\ud68c\ud558\uba70 img \uc694\uc18c\ub85c \ubc18\ud658\ud558\ub294 \ub85c\uc9c1\uc744 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
            \"\"<\/p>\n
            \uc544\ub798\ub294 \uc2e4\ud589 \ud654\uba74\uc5d0\uc11c \uc18c\uc2a4\ucf54\ub4dc \uc21c\uc11c\ub85c \ucd94\uc801\ud55c \uc774\ubbf8\uc9c0\uc785\ub2c8\ub2e4.
            \nalt \uc18d\uc131\uc758 \uac12\uc740 \ub354\ubbf8 \uc774\ubbf8\uc9c0 \uc774\ubbc0\ub85c \uc0c1\ud669\uc5d0 \ub530\ub77c \uc0dd\ub7b5 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n
            \"\"<\/p>\n
            2.4. \ub098\uc640\ub77c\ubfc5! \uad6c\ud604\ud558\uae30<\/h3>\n
            2.4.1. \uac80\uc0c9\ucc3d\uc758 \uc785\ub825\uac12 \ubc1b\uc544\uc624\uae30<\/h4>\n
              \n
            1. \uc785\ub825\uc744 \uc2dc\uc791\ud558\uba74 \ub354\ubbf8\uc774\ubbf8\uc9c0 \uc0ad\uc81c<\/li>\n<\/ol>\n
              const promptInp = document.querySelector('#prompt');\npromptInp.addEventListener('input', () => {\n\timageGallery.innerHTML = '';\n});\n<\/code><\/pre>\n
                promptInp\ub294 input \uc694\uc18c\uc785\ub2c8\ub2e4.
              \npromptInp\uc5d0 input \uc774\ubca4\ud2b8\uac00 \uac10\uc9c0\ub418\uba74 imageGallery \ub0b4\uc758 HTML\uc740 \uacf5\ubc31\ubb38\uc790\ub85c \ubc14\ub00c\ubbc0\ub85c \uc608\uc05c \ub9d0\ud2f0\uc988\ub294 \uc5c6\uc5b4\uc9d1\ub2c8\ub2e4.<\/p>\n
                \n
              1. \uc785\ub825\ud55c \ud14d\uc2a4\ud2b8\ub97c \uc804\ub2ec\ubc1b\uc544 openai api \uc5d0 \uc804\ub2ec\ud558\uc5ec \uc774\ubbf8\uc9c0\ub97c \uc0dd\uc131\ud558\ub294 \ub85c\uc9c1\uc744 \uc791\uc131\ud569\ub2c8\ub2e4.
                \n\ud83d\udd17                https:\/\/platform.openai.com\/docs\/api-reference\/images\/create?lang=node.js<\/a><\/li>\n
              2. \ub098\uc640\ub77c\ubfc5 \ubc84\ud2bc \ud074\ub9ad \uc774\ubca4\ud2b8\ud568\uc218<\/strong><\/li>\n<\/ol>\n
                const generateForm = document.querySelector('#generate-form');\ngenerateForm.addEventListener('submit', async (e) => {\n\te.preventDefault();\n\t\/\/input#prompt \uc758 \uc785\ub825\uac12\uc744 \ucde8\ub4dd\ud558\uc5ec prompt \ubcc0\uc218\uc5d0 \ud560\ub2f9\n\tconst prompt = promptInp.value;\n\t\/\/\ub85c\uceec\uc2a4\ud1a0\ub9ac\uc9c0\uc758 API_KEY\uc5d0 \uc800\uc7a5\ub41c \uac12\uc744 \ubcc0\uc218 key\uc5d0 \ud560\ub2f9\n\tconst key = localStorage.getItem('API_KEY');\n\t\/\/\ube44\ub3d9\uae30\uc2dd\uc73c\ub85c fetchImage \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud55c \uac12\uc744 \uc778\uc790\ub85c \uc804\ub2ec\n\tawait fetchImage(prompt, key);\n});\n<\/code><\/pre>\n
                  \n
                1. fetchImage \ud568\uc218\uc791\uc131<\/strong><\/li>\n<\/ol>\n
                  const fetchImage = async (prompt, API_KEY) => {\n  \/\/openai\uc758 \uc774\ubbf8\uc9c0\uc0dd\uc131 api \uc564\ub4dc\ud3ec\uc778\ud2b8. \ud574\ub2f9 \uc8fc\uc18c\ub294 2\ubc88\uc758 \ub9c1\ud06c \ucc38\uc870\n  const url = "https:\/\/api.openai.com\/v1\/images\/generations";\n  \/\/ \uc694\uccad\uc8fc\uc18c\uc5d0 \ud568\uaed8 \ubcf4\ub0bc \uc635\uc158 \uac1d\uccb4\n  \/\/ \ud1b5\uc2e0 \ubc29\ubc95\uacfc \ud1b5\uc2e0\uc694\uccad \ud5e4\ub354\uc640 \ubc14\ub514\uc5d0 \ub123\uc744 \ub370\uc774\ud130 \uc791\uc131\n  const opt = {\n    method: "POST",\n    headers: {\n      "Content-Type": "application\/json",\n      Authorization: `Bearer ${API_KEY}`,\n    },\n    body: JSON.stringify({\n      model: "dall-e-3", \/\/\uc0dd\uc131\ubaa8\ub378 dall e 3\n      prompt, \/\/\uc774\ubbf8\uc9c0\uc124\uba85(\ud504\ub86c\ud504\ud2b8)\ud3ec\ud568\n      n: 1, \/\/\uc774\ubbf8\uc9c0\uc0dd\uc131 \uac2f\uc218 1\n      size: "1024x1024", \/\/\uc774\ubbf8\uc9c0\ud06c\uae30 1024x1024\n    }),\n  };\n  try {\n    \/\/try \ubb38\uc5d0 \uc694\uccad\ud568\uc218 \uc791\uc131\n    \/\/fetch \ud568\uc218\ub85c \ube44\ub3d9\uae30 \ud1b5\uc2e0\uc744 \uc694\uccad\ud558\uba74\uc11c \uc778\uc790\ub85c url,opt \uc804\ub2ec\ud558\uace0 \uc751\ub2f5\ub0b4\uc6a9\uc744 response \ubcc0\uc218\uc5d0 \ud560\ub2f9\n    const response = await fetch(url, opt);\n    \/\/ response \uc758 \uac12\uc744 json \ud615\uc2dd\uc73c\ub85c \ubcc0\ud658\ud6c4 result \ubcc0\uc218\uc5d0 \ud560\ub2f9\n    const result = await response.json();\n    \/\/\ucf58\uc194\ucc3d\uc5d0 \ud655\uc778\n    console.log(result);\n    const newImageURL = result.data[0].url;\n    imageGallery.innerHTML += `<div class="col-12 col-sm-6 col-md-3 mb-4 position-relative">\n      <img src="${newImageURL}" class="img-fluid" alt="Generated Image">\n    <\/div>`;\n  } catch (error) {\n    console.error(error);\n  }\n};\n<\/code><\/pre>\n
                    \ud83d\udd174.\uc644\uc131\ud654\uba74<\/a><\/p>\n
                  2.4.3 \ud14c\uc2a4\ud2b8\ud574\ubcf4\uae30<\/h4>\n
                    \n
                  1. \ud83d\udd173\ubc88\uc73c\ub85c \uc774\ub3d9\ud558\uc5ec<\/a> API \ud0a4\ub97c \ubc1c\uae09 \ubc1b\uc2b5\ub2c8\ub2e4.<\/li>\n
                  2. \uc791\uc131\ud55c \uc6f9\ubb38\uc11c\ub97c \ub77c\uc774\ube0c\uc11c\ubc84\ub85c \uc5f4\uc5b4 \uc2e4\ud589\ud558\uc5ec \ud14c\uc2a4\ud2b8 \ud569\ub2c8\ub2e4.<\/li>\n
                  3. API \ud0a4 \uc785\ub825 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uace0 \ubc1c\uae09\ubc1b\uc740 \ud0a4\ub97c \ubd99\uc5ec\ub123\uc2b5\ub2c8\ub2e4.<\/li>\n
                  4. \uc800\uc7a5\ud558\uae30 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uace0 \ucf58\uc194\uba54\uc2dc\uc9c0\uc5d0 \uc544\ub798\uc640 \uac19\uc740 \uc624\ub958\uac00 \ub730 \uacbd\uc6b0 6\ubc88\uc73c\ub85c \uac00\uc138\uc694.<\/a><\/li>\n<\/ol>\n
                    \"<\/p>\n
                      \n
                    1. \uc6b0\uc120 \uc81c\ub300\ub85c \ub41c API \ud0a4\ub97c \uc785\ub825\ud560 \uacbd\uc6b0 \uc544\ub798\uc758 \uc774\ubbf8\uc9c0 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                      \"\"<\/p>\n
                        \n
                      1. \ub2f9\uc2e0\uc740 \uc65c \ub2f9\ucca8 \ub418\uc5c8\uc744\uae4c\uc694?
                        \n\ubc14\ub85c \uc2e0\uc6a9\uce74\ub4dc \ubc88\ud638\ub97c \uc785\ub825\ud558\uc9c0 \uc54a\uc544\uc11c \uc785\ub2c8\ub2e4.
                        \nGPT\ub294 \ubbf8\uc81c\uc774\ubbc0\ub85c \uae30\ube0c\uc564\ud14c\uc774\ud06c\uac00 \ud655\uc2e4\ud569\ub2c8\ub2e4.
                        \n  \ubb34\ub8cc\ud2f0\uc5b4\ub294 1\ubd84\ub3d9\uc548 5\ubc88 \uc774\ubbf8\uc9c0 \uc694\uccad \uac00\ub2a5. \ud558\ub8e8 \ucd5c\ub300 200\ubc88 \uc694\uccad \uac00\ub2a5 \ud569\ub2c8\ub2e4.
                        \n  \ud55c\ub3c4\uac00 \ucd08\uacfc\ub418\uba74 \uc790\ub3d9 \uacb0\uc81c\uac00 \ub418\ub294\ub370 \uc774\ub54c \uacb0\uc81c\ub420 \uc2e0\uc6a9\uce74\ub4dc \ub4f1\ub85d\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.
                        \n  \uc2e0\uc6a9\uce74\ub4dc \ub4f1\ub85d\ud6c4 API \ud0a4\ub97c \uc7ac\ubc1c\uae09 \ubc1b\uace0 \ud655\uc778\ud558\uba74 \uc774\ubbf8\uc9c0\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4.
                        \n                          \ud83d\udd17\uc2e0\uc6a9\uce74\ub4dc \ub4f1\ub85d\ud558\uae30<\/a><\/li>\n<\/ol>\n
                        2.4.4. \ud14c\uc2a4\ud2b8\ud574\ubcf4\uae30<\/h4>\n
                          \n
                        1. API\ud0a4\ub97c \ubc1c\uae09 \ubc1b\uc2b5\ub2c8\ub2e4.<\/a><\/li>\n
                        2. \ubc1c\uae09\ubc1b\uc740 \ud0a4\ub97c \uc785\ub825\ucc3d\uc5d0 \ubd99\uc5ec \ub123\uc2b5\ub2c8\ub2e4\u2192\uc800\uc7a5\ud558\uae30 \ud074\ub9ad<\/li>\n<\/ol>\n
                          \"\ub85c\uceec<\/p>\n
                            \n
                          1. \uadf8\ub9ac\uace0 \uc2f6\uc740 \uadf8\ub9bc\uc744 \uc11c\uc220\ud558\uace0 \ub098\uc640\ub77c \ubfc5\uc744 \ud074\ub9ad\ud558\uc138\uc694<\/li>\n<\/ol>\n
                            \"\"<\/p>\n
                              \uc2dc\uac04\uc774 \uc880 \uac78\ub9ac\ub354\ub77c\ub3c4 \uac00\ub9cc\ud788 \uae30\ub2e4\ub9ac\uc138\uc694. \uc598 \ud55c\ud14c\ub3c4 \uadf8\ub9b4 \uc2dc\uac04\uc744 \uc8fc\uc154\uc57c\uc8e0!!!
                            \n  \ub358\uc838\uc8fc\uace0 \ubc14\ub85c \uacb0\uacfc\ubb3c\uc744 \ub0b4\ub193\uc73c\ub77c\ub294 \uac83\uc740 \ub098\uc05c\uc0ac\ub78c \uc774\uc5d0\uc694.<\/p>\n
                              \n
                            1. \uacb0\uacfc\ubb3c\uc774 \ub098\uc654\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                              \"\ud5d8\ud55c<\/p>\n
                              2.4.5. \uacb0\uacfc\ucf54\ub4dc \ubd84\uc11d\ud558\uae30<\/h4>\n
                              \n
                              Info<\/strong>: \ud83d\udca1 \uc704\uc5d0\uc11c \uc791\uc131\ud55c fetchImage \ud568\uc218\uc758 <\/a>   console.log(result);<\/code>  \ub2e4\uc74c \ub77c\uc778 \ubd80\ud130 \ud655\uc778\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
                                \n
                              1. \uc2a4\ud3f0\uc9c0\ubc25\uc758 \ub6b1\uc774\ub97c \uadf8\ub824\uc918 \ub77c\ub294 \ud504\ub86c\ud504\ud2b8\ub97c \uc791\uc131 \ud6c4 \ucf58\uc194\uba54\uc2dc\uc9c0\ub85c \ubc18\ud658\uac12\uc744 \ud655\uc778\ud588\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                                \"\"<\/p>\n
                                  \n
                                1. result\ubcc0\uc218\uc758 data[0] \uc5d0 \uc800\ud76c\uc5d0\uac8c \ud544\uc694\ud55c \uac12\uc774 \uc800\uc7a5\ub41c \uac83\uc774 \ubcf4\uc785\ub2c8\ub2e4. \ud504\ub86c\ud504\ud2b8\ub294 \uc601\uc5b4\ub85c \ubc88\uc5ed\ub418\uc5c8\ub124\uc694.
                                  \n  url \ud0a4\uc5d0 \ub2ec\ub9ac\uac00 \uc0dd\uc131\ud55c \uc774\ubbf8\uc9c0\uc758  \uc8fc\uc18c\uac00 \uc800\uc7a5\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
                                2. \uc774\ubbf8\uc9c0\uc758 \uc8fc\uc18c\uac00 \uc800\uc7a5\ub41c \ud0a4\ub97c \uc0c8 \ubcc0\uc218\uc5d0 \ud560\ub2f9\ud6c4 \uc774\uc804 \ub354\ubbf8\uc774\ubbf8\uc9c0\ub97c \ucd94\uac00\ud558\ub4ef imageGallery \ubcc0\uc218\uc758 \ud558\uc704\uc694\uc18c\ub85c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                                  \"\"<\/p>\n
                                    \n
                                  1. catch \ubb38\uc740 try \ubb38\uc758 \uc694\uccad \uc2e4\ud328\uc2dc \uc2e4\ud589\ud560 \ub0b4\uc6a9\uc744 \uc791\uc131\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4.
                                    \n\ud1b5\uc2e0 \uc694\uccad \uc2e4\ud328\uc2dc error \ub9e4\uac1c\ubcc0\uc218\ub97c \uc804\ub2ec\ubc1b\uc544 console.error \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uba70 \ub9e4\uac1c\ubcc0\uc218 error \uc744 \uc804\ub2ec\ud558\ub294 \ub85c\uc9c1\uc785\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                                    2.5. \uc0dd\uc131\uc911,\uc2e4\ud328 UI \ub9cc\ub4e4\uae30<\/h3>\n
                                    \n
                                    Info<\/strong>: \ud83d\udca1 \uc0dd\uc131\uc911\uacfc \uc0dd\uc131\uc2e4\ud328\ub97c \ud45c\uc2dc\ud558\ub294 UI\ub97c \uad6c\ud604 \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
                                      \uc774\ubbf8\uc9c0 \uc0dd\uc131\uc911\uc5d0\ub294 \uc2a4\ud53c\ub108\ub97c \ud45c\uc2dc\ud558\uace0 \uc0dd\uc131\uc2e4\ud328\uc2dc \uba54\uc2dc\uc9c0\ub97c \ud654\uba74\uc5d0 \ub744\uc6b0\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
                                    2.5.1. displayMsg \ud568\uc218\uc791\uc131<\/h4>\n
                                    const spinner = document.querySelector('#spinner');\nlet message = document.querySelector('#message');\ngenerateForm.addEventListener('submit', async (e) => {\n\te.preventDefault();\n\tconst prompt = document.querySelector('#prompt').value;\n\tconst key = localStorage.getItem('API_KEY');\n\t\/\/\ud504\ub86c\ud504\ud2b8 \uac12\uc774 false\n\tif (!prompt) {\n\t\tdisplayMsg('\ud504\ub86c\ud504\ud2b8(\uba85\ub839\uc5b4)\ub97c \uc785\ub825\ud558\uc138\uc694');\n\t\treturn;\n\t}\n\t\/\/key \uac12\uc774 false\n\tif (!key) {\n\t\tdisplayMsg('APIKEY\ub97c \uc785\ub825\ud558\uace0 \uc800\uc7a5\ubc84\ud2bc\uc744 \ud074\ub9ad\ud574\uc8fc\uc138\uc694.');\n\t\treturn;\n\t}\n\tawait fetchImage(prompt, key);\n});\nfunction displayMsg(msg) {\n\tmessage.textContent = msg;\n\tmessage.style.display = 'block';\n\tsetTimeout(() => {\n\t\tmessage.style.display = 'none';\n\t}, 3000);\n}\n<\/code><\/pre>\n
                                      \n
                                    1. generateForm.addEventListener<\/code> \uc758 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \ud568\uc218 \ubc14\ub514\uc5d0 prompt\uc640 key \ubcc0\uc218\uc758 \uac12\uc774 false \uc77c\ub54c \ubcf4\uc5ec\uc904 \uba54\uc2dc\uc9c0\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/li>\n
                                    2. displayMsg<\/code> \ud568\uc218\ub294 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc804\ub2ec\ubc1b\uc544 textContent \uc18d\uc131\uc5d0 #message \uc694\uc18c\uc5d0 \uc804\ub2ec\ubc1b\uc740 \ub9e4\uac1c\ubcc0\uc218\ub97c \ub3d9\uc801\ud560\ub2f9 \ud569\ub2c8\ub2e4.
                                      \n3\ucd08\ud6c4 \uba54\uc2dc\uc9c0\ub294 \ud654\uba74\uc5d0\uc11c \uc0ac\ub77c\uc9d1\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                                      2.5.2. fetchImage \ud568\uc218 \uc218\uc815<\/h4>\n
                                        \n
                                      1. fetchImage\ud568\uc218\ub294 \uc774 \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c \ud575\uc2ec\uc801\uc778 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.
                                        \ngenerateForm<\/code>\uc758 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc5d0\uc11c \uc804\ub2ec\ud558\ub294 \uc778\uc790\ub97c \ub9e4\uac1c\ubcc0\uc218\ub85c \ubc1b\uc544 \uc11c\ubc84\uc5d0 \ud1b5\uc2e0\uc744 \uc694\uccad\ud558\uace0 \uc751\ub2f5\ubc1b\ub294 \ub85c\uc9c1\uc774 \uc5ec\uae30 \ub4e4\uc5b4\uc788\uc2b5\ub2c8\ub2e4.
                                        \n\uadf8\ub7ec\ubbc0\ub85c \uc694\uccad\uacfc \uc751\ub2f5\ub3d9\uc548 \ub300\uae30\ud558\ub294 \uc2a4\ud53c\ub108\ub294 \uc774 \ud568\uc218\uc5d0\uc11c \ud45c\uc2dc\ud558\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                                        const fetchImage = async (prompt, API_KEY) => {\n\tconst url = 'https:\/\/api.openai.com\/v1\/images\/generations';\n\tconst opt = {\n\t\tmethod: 'POST',\n\t\theaders: {\n\t\t\t'Content-Type': 'application\/json',\n\t\t\tAuthorization: `Bearer ${API_KEY}`,\n\t\t},\n\t\tbody: JSON.stringify({\n\t\t\tmodel: 'dall-e-3',\n\t\t\tprompt,\n\t\t\tn: 1,\n\t\t\tsize: '1024x1024',\n\t\t}),\n\t};\n\n\ttry {\n\t\t\/\/ \uc2a4\ud53c\ub108 \ubcf4\uc784\n\t\tspinner.style.display = 'block';\n\t\tconst response = await fetch(url, opt);\n\t\tconsole.log(response);\n\t\tif (!response.ok) {\n\t\t\tconst error = await response.json();\n\t\t\tconst errormsg = error.error.message ? error.error.message : '\uc774\ubbf8\uc9c0 \uc0dd\uc131\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.';\n\t\t\tdisplayMsg(errormsg);\n\t\t\treturn;\n\t\t}\n\t\tconst result = await response.json();\n\t\tconst newImageURL = result.data[0].url;\n\t\timageGallery.innerHTML += `<div class="col-12 col-sm-6 col-md-3 mb-4 position-relative">\n      <img src="${newImageURL}" class="img-fluid" alt="Generated Image">\n    <\/div>`;\n\t} catch (error) {\n\t\tconsole.error(error);\n\t\tdisplayMsg('\uc77c\uc2dc\uc801\uc778 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4. \uc7a0\uc2dc\ud6c4 \ub2e4\uc2dc \uc2dc\ub3c4\ud574 \uc8fc\uc138\uc694.');\n\t} finally {\n\t\tspinner.style.display = 'none';\n\t}\n};\n<\/code><\/pre>\n
                                          \ud83d\udd17<\/a>\uc644\uc131\ud654\uba74<\/strong><\/a><\/p>\n
                                          \n
                                        1. \uc644\uc131\ud55c \ud504\ub85c\uc81d\ud2b8\ub97c \uae43\ud5c8\ube0c\uc5d0 push \ud6c4 \ubc30\ud3ec\ud558\uc138\uc694.
                                          \n\uc774\uc6a9\uc790\ub4e4\uc758 \ub3d9\uc120\uc744 \ucd94\uc801\ud558\uba70 \ud14c\uc2a4\ud2b8 \ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/li>\n
                                        2. 1\u21922\u2192A\u2192B\u21923\u21924 \uc758 \uc21c\uc11c\ub85c \uc9c4\ud589\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                                          \"\"<\/p>\n
                                            \n
                                          1. spinner \ud655\uc778\ud558\uae30<\/li>\n<\/ol>\n
                                              \n
                                            1. error \ud655\uc778\ud558\uae30<\/li>\n<\/ol>\n
                                                \uc720\ud6a8\ud558\uc9c0 \uc54a\uc740 \uc778\uc99d\ud0a4 \uc785\ub825\uc2dc \ud45c\uc2dc\ub418\ub294 \uba54\uc2dc\uc9c0\ub294 openai \uc758 \uc751\ub2f5\uba54\uc2dc\uc9c0 \uc785\ub2c8\ub2e4.<\/p>\n
                                              \"\"<\/p>\n
                                              3. \uc0ac\uc6a9\uc790\uc6a9 API \ud0a4\ubc1c\uae09<\/h2>\n
                                              3.1. openai.com<\/a> \ud68c\uc6d0\uac00\uc785<\/h3>\n
                                              \ub85c\uadf8\uc778 \ud6c4 \ub300\uc2dc\ubcf4\ub4dc\ub85c \uc774\ub3d9\ud55c\ub2e4.<\/p>\n
                                              3.2. api\ud0a4 \ubc1c\uae09<\/h3>\n
                                                \n
                                              1. \uc544\ub798 \uc21c\uc11c\ub300\ub85c \ud074\ub9ad\ud55c\ub2e4.<\/li>\n<\/ol>\n
                                                \"\"<\/p>\n
                                                  \n
                                                1. \ub2e4\uc74c \ud398\uc774\uc9c0\uc5d0\uc11c \ubc18\ub4dc\uc2dc  \ud45c\uc2dc\ub41c \ubd80\ubd84\uc744 \ud074\ub9ad\ud558\uc138\uc694<\/li>\n<\/ol>\n
                                                  \"\"<\/p>\n
                                                    \n
                                                  1. \ud0a4 \uc774\ub984 \uc785\ub825<\/li>\n<\/ol>\n
                                                    \"\"<\/p>\n
                                                      \n
                                                    1. <\/li>\n<\/ol>\n
                                                      \"\"<\/p>\n
                                                      4. \uc2e0\uc6a9\uce74\ub4dc \ub4f1\ub85d<\/h2>\n
                                                      \n
                                                      Info<\/strong>: \u26a0\ufe0f \ub4e4\uc5b4\uac00\ub294 \ub9d0\uc500<\/strong><\/p>\n<\/blockquote>\n
                                                        \ubc1c\uae09 \ubc1b\uc740 API\ud0a4\uac00 \uc720\ud6a8\ud558\ub824\uba74 \uacc4\uc815\uc5d0 \uacb0\uc81c \uac00\ub2a5\ud55c \uce74\ub4dc\uc815\ubcf4\uac00 \uc800\uc7a5\ub418\uc5b4 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.
                                                      \n\uc774\ub54c \ucd5c\ucd08 \ud55c\ubc88 5.5\ub2ec\ub7ec\ub97c \uacb0\uc81c\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
                                                      \n
                                                        \n
                                                      1. openai.com<\/a> \uc5d0 \ub85c\uadf8\uc778 \ud6c4 \uc544\ub798 \uc774\ubbf8\uc9c0\uc758 \uc21c\uc11c\ub300\ub85c \ud074\ub9ad\ud558\uc138\uc694.<\/li>\n<\/ol>\n
                                                        \"\"<\/p>\n
                                                          \n
                                                        1. <\/li>\n<\/ol>\n
                                                          \"\"<\/p>\n
                                                            \n
                                                          1. \ube44\uc790,\ub9c8\uc2a4\ud130 \uce74\ub4dc\uc815\ubcf4\uc785\ub825\ud558\uc138\uc694 – \ud654\uba74\uc5d0 \ubcf4\uc774\ub294 \uc815\ubcf4\ub294 \ub354\ubbf8\ub370\uc774\ud130 \uc785\ub2c8\ub2e4.
                                                            \n\ubcf8\uc778\uc758 \uce74\ub4dc \uc815\ubcf4 \uc785\ub825 \ud6c4 Continue \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc138\uc694<\/li>\n<\/ol>\n
                                                            \"\"<\/p>\n
                                                              \n
                                                            1. \uacb0\uc81c \uc124\uc815 \ucc3d\uc785\ub2c8\ub2e4. \ub300\ucda9 \ub208\uce58\uaecf \ucd5c\uc18c \uae08\uc561\uc744 \uc791\uc131\ud55c\ud6c4 Continue \ubc84\ud2bc\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                                                              \"\"<\/p>\n
                                                                \n
                                                              1. \ud1b5\uc7a5\uc758 \uc794\uace0\ub97c 0\uc73c\ub85c \ube44\uc6b0\uace0 \uacfc\uac10\ud788 \uacb0\uc81c\ub97c \ud5c8\ub77d\ud588\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n
                                                                \"\"<\/p>\n
                                                                  \n
                                                                1. \n
                                                                  \uc794\uc561\ubd80\uc871 \uacb0\uc81c \uc2e4\ud328\ub85c \ubb38\uc790\uac00 \uc654\uc2b5\ub2c8\ub2e4. (\uc774 \ubc29\ubc95\uc774 \uc548\ub41c\ub2e4\ub294\u2026 )
                                                                  \n\uc81c\uac00 \uc0ac\uc6a9\ud558\ub294 BC \uce74\ub4dc\uc0ac\uc758 \ud398\uc774\ubd81\uc740 \ud574\uc678\uacb0\uc81c\uc6a9 \uac00\uc0c1\uce74\ub4dc \ubc88\ud638 \uc0dd\uc131 \uae30\ub2a5\uc774 \uc788\uc2b5\ub2c8\ub2e4.
                                                                  \n\uc774 \uae30\ub2a5\uc740 \uc720\ud6a8 \uae30\uac04 \ud55c\ub2ec \uc9dc\ub9ac \uac00\uc0c1 \uce74\ub4dc\ubc88\ud638 \ub97c \uc0dd\uc131\ud574\uc90d\ub2c8\ub2e4.
                                                                  \n\uc0ac\uc6a9\ud558\uc2dc\ub294 \ud398\uc774\ub098 \uce74\ub4dc\uc0ac \uc571\uc5d0 \uc774\ub7f0 \uae30\ub2a5\uc774 \uc788\ub294\uc9c0 \ud655\uc778\ud574 \ubcf4\ub294\uac83\ub3c4 \uc88b\uc744\uac83 \uac19\uc2b5\ub2c8\ub2e4.
                                                                  \n  \ucd94\uac00\ub85c \ub354\ubbf8 \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud574\uc11c \uc5b4\ub5bb\uac8c \ud654\uba74\uc740 \ub118\uc5b4\uac00\ub3c4 \uc2e4\uc81c \uce74\ub4dc\uc0ac \uacb0\uc81c\uc2b9\uc778 \uacfc\uc815\uc744 \uac70\uce58\uae30 \ub54c\ubb38\uc5d0 \uc2e4\ud328\ud569\ub2c8\ub2e4.<\/p>\n<\/li>\n
                                                                2. \n
                                                                  \ucd5c\ucd08 5\ub2ec\ub7ec \uacb0\uc81c \uc644\ub8cc \ud6c4\uc5d0\ub294 \ucd94\uac00 \uacb0\uc81c \uc5c6\uc774 \ubb34\ub8cc \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8 \ubcc4 limit \uc5d0\uc11c \uc81c\ud55c\uc744 \uc124\uc815\ud558\uc5ec \uc870\uc808 \ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/li>\n<\/ol>\n
                                                                  \"\"<\/p>\n
                                                                    \n
                                                                  1. \ub2e4\uc2dc \uc774\uc804\uc73c\ub85c \ub3cc\uc544\uac00\uc11c \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4<\/a><\/li>\n<\/ol>\n
                                                                    5. \ubb38\uc81c<\/h2>\n
                                                                    AI \uc774\ubbf8\uc9c0 \uc0dd\uc131\uae30 \uc571\uc744 \ub9ac\uc561\ud2b8\ub85c \uad6c\ud604\ud574\ubcf4\uc138\uc694.<\/p>\n","protected":false},"excerpt":{"rendered":"
                                                                    \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c \uc6f9\ud398\uc774\uc9c0\uc5d0 AI\uae30\ubc18 \uc774\ubbf8\uc9c0 \uc0dd\uc131 \uc11c\ube44\uc2a4\ub97c \uad6c\ud604\ud574 \ubd05\uc2dc\ub2e4. Chat-GPT \uc758 DALL-E \ubaa8\ub378\uc744 \ud65c\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. DALL-E\ub294 \ud14d\uc2a4\ud2b8 \uc124\uba85\uc744 \uae30\ubc18\uc73c\ub85c \uc774\ubbf8\uc9c0\ub97c \uc0dd\uc131\ud558\ub294 AI \ubaa8\ub378\ub85c, \uc790\uc5f0\uc5b4\ub97c \uae30\ubc18\uc73c\ub85c \uadf8\ub9bc\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. \ud604\uc7ac \ubc84\uc804\uc740 DALL-E-3 \uc774\uba70 DALL-E-2 \uc640 DALL-E-3 \ubaa8\ub378 \uc911 \uc120\ud0dd\ud558\uc5ec \uc0ac\uc6a9\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc624\ud508ai api \ubb38\uc11c https:\/\/platform.openai.com\/docs\/overview \uc774\ubbf8\uc9c0\uc0dd\uc131\uae30 \uac00\uc774\ub4dc \ub9c1\ud06c https:\/\/platform.openai.com\/docs\/api-reference\/images \ud83d\udd17\uc644\uc131\ud654\uba74 1. html \uad6c\uc870\uc791\uc131 Info: \ud83d\udca1 html,css, \uc544\uc774\ucf58 \ubaa8\ub450 … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-249","post","type-post","status-publish","format-standard","hentry","category-javascript-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=249"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/249\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/249\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}