diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..7f00dcb208f73466ba554ecaed2fd53b0f61f391
Binary files /dev/null and b/.DS_Store differ
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..54826e2fd7eea798b410f1bfedea5b104fd879dd
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/man-Dall_E2.png b/images/man-Dall_E2.png
new file mode 100644
index 0000000000000000000000000000000000000000..104cd55aeb2397ac8e06ac3f3ee3d127c2e6b5ca
Binary files /dev/null and b/images/man-Dall_E2.png differ
diff --git a/images/man-top.jpg b/images/man-top.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0df9c37b623e6fd01f4d9841e50533a57b39a0c0
Binary files /dev/null and b/images/man-top.jpg differ
diff --git a/images/man.jpg b/images/man.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8e44320d8e03ef2997701823adad2f5e7cbe083e
Binary files /dev/null and b/images/man.jpg differ
diff --git a/images/man_panorama_withFace.png b/images/man_panorama_withFace.png
new file mode 100644
index 0000000000000000000000000000000000000000..98e2f6e51885b83f7f40b71fcfeb00158953264a
Binary files /dev/null and b/images/man_panorama_withFace.png differ
diff --git a/images/removeBgImage.png b/images/removeBgImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..edba168fce1cc08fceb8b3167ec25d9f9d8a51ab
Binary files /dev/null and b/images/removeBgImage.png differ
diff --git a/images/removeBgImage_black.png b/images/removeBgImage_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc1fe3252c668f3f509f304792415e696caf5f12
Binary files /dev/null and b/images/removeBgImage_black.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..93f17355ff546dee271569334aab7d09a55f4dff
--- /dev/null
+++ b/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
+      crossorigin="anonymous"
+    />
+
+    <link rel="stylesheet" href="app.css" />
+  </head>
+  <body>
+    <div class="navbar navbar-dark bg-dark shadow-sm">
+      <div class="container">
+        <a href="#" class="navbar-brand d-flex align-items-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            aria-hidden="true"
+            class="me-2"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
+            />
+            <circle cx="12" cy="13" r="4" />
+          </svg>
+          <strong>Image processing </strong>
+        </a>
+      </div>
+    </div>
+    <div class="container text-center">
+      <div class="row">
+        <div class="col-lg-6">
+          <img class="img-size" src="./images/man.jpg" alt="" />
+          <p>원본 이미지 525 x 700 px</p>
+        </div>
+        <div class="col-lg-6">
+          <img class="img-size" src="./images/man-Dall_E2.png" alt="" />
+          <p>배경 확장된 이미지 1024 x 1024 px</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <img class="img-size" src="./images/man.jpg" alt="" />
+          <p>Person</p>
+        </div>
+        <div class="col">
+          <img class="img-size" src="./images/man-top.jpg" alt="" />
+          <p>Top</p>
+        </div>
+        <div class="col">
+          <img src="./images/man_panorama_withFace.png" alt="" />
+          <p>panorama_withFace</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <img src="./images/OutputImage2.png" alt="" />
+          <p>배경 삭제된 이미지</p>
+        </div>
+        <div class="col">
+          <img src="./images/OutputImage_black.png" alt="" />
+          <p>배경 검은색</p>
+        </div>
+      </div>
+
+      <button type="button" class="btn btn-primary btn-lg">배경 흰색</button>
+      <button type="button" class="btn btn-secondary btn-lg">
+        배경 검정색
+      </button>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+      crossorigin="anonymous"
+    ></script>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/style.css b/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..ae58148f5d40e4e83d337d4a8d786d9e367caad5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,4 @@
+.img-size {
+  max-width: 100%;
+  margin-top: 20px;
+}