diff --git a/.gitignore b/.gitignore
index c64072a..1b31ba8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ libs/__pycache__/painting.cpython-38.pyc
 libs/__pycache__/utils.cpython-38.pyc
 *.pyc
 *.pyc
+*.pyc
diff --git a/__init__.py b/__init__.py
index d5f2fd0..0d5e0ee 100644
--- a/__init__.py
+++ b/__init__.py
@@ -1 +1,14 @@
-# 2021 EasyPipo
\ No newline at end of file
+# 2023 EasyPipo
+
+"""Temporary to avoid No Attribute'asscalar' Error
+File: __init__.py
+Created: 2023-06-22
+
+@author: Minku-Koo
+LastModifyDate: 2023-06-22 
+LastModifier: Ji-yong219
+"""
+import numpy
+def patch_asscalar(a):
+    return a.item()
+setattr(numpy, "asscalar", patch_asscalar)
\ No newline at end of file
diff --git a/__main__.py b/__main__.py
index ec64b69..d7ee047 100644
--- a/__main__.py
+++ b/__main__.py
@@ -1,11 +1,10 @@
 # -*- coding: utf-8 -*-
-from web.app import create_app
+import logging
+log = logging.getLogger('werkzeug')
+log.setLevel(logging.DEBUG) #logging.ERROR
 
-# Temporary to avoid No Attribute'asscalar' Error
-import numpy
-def patch_asscalar(a):
-    return a.item()
-setattr(numpy, "asscalar", patch_asscalar)
+from src.main.app import create_app
 
-app = create_app()
-app.run()
+if __name__ == "__main__":
+    app = create_app()
+    app.run()
diff --git a/__pycache__/__main__.cpython-38.pyc b/__pycache__/__main__.cpython-38.pyc
index 6ef4561..2b34517 100644
Binary files a/__pycache__/__main__.cpython-38.pyc and b/__pycache__/__main__.cpython-38.pyc differ
diff --git a/libs/__pycache__/__init__.cpython-38.pyc b/libs/__pycache__/__init__.cpython-38.pyc
deleted file mode 100644
index a1b86e1..0000000
Binary files a/libs/__pycache__/__init__.cpython-38.pyc and /dev/null differ
diff --git a/libs/__pycache__/brush.cpython-38.pyc b/libs/__pycache__/brush.cpython-38.pyc
deleted file mode 100644
index c9ff4ae..0000000
Binary files a/libs/__pycache__/brush.cpython-38.pyc and /dev/null differ
diff --git a/libs/__pycache__/colorCode.cpython-38.pyc b/libs/__pycache__/colorCode.cpython-38.pyc
deleted file mode 100644
index b40b0b3..0000000
Binary files a/libs/__pycache__/colorCode.cpython-38.pyc and /dev/null differ
diff --git a/libs/__pycache__/drawLine.cpython-38.pyc b/libs/__pycache__/drawLine.cpython-38.pyc
deleted file mode 100644
index d39e1af..0000000
Binary files a/libs/__pycache__/drawLine.cpython-38.pyc and /dev/null differ
diff --git a/libs/__pycache__/getSession.cpython-38.pyc b/libs/__pycache__/getSession.cpython-38.pyc
deleted file mode 100644
index 2d66a72..0000000
Binary files a/libs/__pycache__/getSession.cpython-38.pyc and /dev/null differ
diff --git a/libs/__pycache__/imageProcessing.cpython-38.pyc b/libs/__pycache__/imageProcessing.cpython-38.pyc
deleted file mode 100644
index d825c2b..0000000
Binary files a/libs/__pycache__/imageProcessing.cpython-38.pyc and /dev/null differ
diff --git a/libs/__pycache__/painting.cpython-38.pyc b/libs/__pycache__/painting.cpython-38.pyc
deleted file mode 100644
index 097dcd8..0000000
Binary files a/libs/__pycache__/painting.cpython-38.pyc and /dev/null differ
diff --git a/libs/__pycache__/painting2.cpython-38.pyc b/libs/__pycache__/painting2.cpython-38.pyc
deleted file mode 100644
index 3cb46c2..0000000
Binary files a/libs/__pycache__/painting2.cpython-38.pyc and /dev/null differ
diff --git a/libs/__pycache__/utils.cpython-38.pyc b/libs/__pycache__/utils.cpython-38.pyc
deleted file mode 100644
index fd794ce..0000000
Binary files a/libs/__pycache__/utils.cpython-38.pyc and /dev/null differ
diff --git a/web/__init__.py b/src/main/__init__.py
similarity index 100%
rename from web/__init__.py
rename to src/main/__init__.py
diff --git a/src/main/app.py b/src/main/app.py
new file mode 100644
index 0000000..a89ac44
--- /dev/null
+++ b/src/main/app.py
@@ -0,0 +1,30 @@
+# flask create app
+# Author : Ji-yong219
+# Project Start:: 2021.03.10.
+# Last Modified from Ji-yong 2023.06.22.
+
+from flask import Flask
+from src.main.easypipo.index.indexController import contoller as idx_controller
+from src.main.easypipo.imageProcess.imageContoller import contoller as img_controller
+import os
+
+"""App factory
+File: app.py
+Created: 2023-06-22
+
+@author: Ji-yong219
+LastModifyDate: 
+LastModifier: 
+"""
+def create_app():
+    app = Flask(__name__)
+    app.register_blueprint(img_controller, url_prefix="/imageProcess")
+    app.register_blueprint(idx_controller)
+    app.template_folder = "webapp/templates"
+    app.static_folder = "webapp/static"
+    app.secret_key = "wh2fdjqw3k4rvna5dml46smv"
+    
+    UPLOAD_FOLDER = f"{os.getcwd()}/src/main/webapp/static/org_image"
+    app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+
+    return app
\ No newline at end of file
diff --git a/src/main/easypipo/imageProcess/imageContoller.py b/src/main/easypipo/imageProcess/imageContoller.py
new file mode 100644
index 0000000..9016112
--- /dev/null
+++ b/src/main/easypipo/imageProcess/imageContoller.py
@@ -0,0 +1,121 @@
+# Image Contoller
+# Author : Ji-yong219
+# Project Start:: 2021.03.10.
+# Last Modified from Ji-yong 2023.07.02.
+
+from flask import (
+    request,
+    render_template,
+    jsonify,
+    Blueprint,
+    redirect,
+    url_for,
+    session
+)
+import os
+
+from ..imageProcess.imageService import (
+    process_start,
+    reduce_color,
+    draw_line,
+    numbering_sector
+)
+
+contoller = Blueprint("image_controller", __name__)
+
+
+@contoller.route("/processStart", methods=["POST"])
+def processStart():
+    image_path = request.form['image_path']
+    image_name = os.path.basename(image_path)
+    image_path_o = f"{os.getcwd()}/src/main/webapp/static/org_image/{image_name}"
+    image_path_r = f"{os.getcwd()}/src/main/webapp/static/render_image/{image_name}"
+
+    target, img_name = process_start(image_name, image_path_o, image_path_r)
+
+    return jsonify(
+        target = target,
+        img_name = img_name
+    )
+
+
+@contoller.route("/reduceColor", methods=["POST"])
+def reduceColor():
+    image_path = request.form['image_path']
+    img_name = os.path.basename(image_path)
+    image_path = f"{os.getcwd()}/src/main/webapp/static/render_image/{img_name}"
+
+    reduce_data = request.form['reduce_data']
+
+    clusters = [int(i) for i in reduce_data.split(',')[:3]]
+
+    target, img_name, colorNames, colors = reduce_color(
+        img_name,
+        image_path,
+        reduce_data,
+        clusters,
+    )
+
+    session['colorNames'] = colorNames
+    session['colors'] = colors
+
+    return jsonify(
+        target = target,
+        img_name = img_name,
+        clusters = clusters
+    )
+
+
+@contoller.route("/drawLine", methods=["POST"])
+def drawLine():
+    image_path = request.form['image_path']
+    img_name = os.path.basename(image_path).split("?")[0]
+    session['reduce_img_name'] = img_name
+    reduce_data = request.form['reduce_data']
+
+    colors = session['colors']
+    
+    target, img_name, img_lab, lab = draw_line(
+        img_name,
+        reduce_data,
+        colors
+    )
+
+    session['img_lab'] = img_lab
+    session['lab'] = lab
+    session['linedraw_img_name'] = img_name
+
+    return jsonify(
+        target = target,
+        img_name = img_name
+    )
+
+
+@contoller.route("/numbering", methods=["POST"])
+def numbering():
+    image_path = request.form['image_path']
+    img_name = os.path.basename(image_path).split("?")[0]
+    reduce_data = request.form['reduce_data']
+
+    reduce_img_name = session['reduce_img_name']
+    linedraw_img_name = session['linedraw_img_name']
+
+    colors = session['colors']
+    colorNames = session['colorNames']
+    img_lab = session['img_lab']
+    lab = session['lab']
+
+    target, img_name = numbering_sector(
+        reduce_img_name,
+        linedraw_img_name,
+        reduce_data,
+        colors,
+        colorNames,
+        img_lab,
+        lab
+    )
+
+    return jsonify(
+        target = target,
+        img_name = img_name
+    )
\ No newline at end of file
diff --git a/src/main/easypipo/imageProcess/imageService.py b/src/main/easypipo/imageProcess/imageService.py
new file mode 100644
index 0000000..b2001f9
--- /dev/null
+++ b/src/main/easypipo/imageProcess/imageService.py
@@ -0,0 +1,211 @@
+# Image Service
+# Author : Ji-yong219
+# Project Start:: 2021.03.10.
+# Last Modified from Ji-yong 2023.07.02.
+
+from multiprocessing import Process, Manager
+import os
+from ast import literal_eval
+
+from ..libs.utils import *
+from ..libs.imageProcessing import *
+from ..libs.drawLine import DrawLine
+from ..libs.painting import Painting, imageExpand
+
+"""reduce color process function for Multiprocessing
+File: imageService.py
+Created: 2023-06-22
+
+@author: Ji-yong219
+LastModifyDate: 
+LastModifier: 
+"""
+def reduce_color_process(idx, image_path, img, cluster, result, colorNames, colors):
+    idx = str(idx)
+
+    paintingTool = Painting(image_path)
+
+    print(f'{idx}번 프로세스 컬러 군집화 시작')
+    clusteredImage = paintingTool.colorClustering( img, cluster = cluster )
+    
+    print(f'{idx}번 프로세스 이미지 확장')
+    # expandedImage = imageExpand(clusteredImage, guessSize = True)
+    expandedImage = imageExpand(clusteredImage, guessSize = False, size=3)
+    
+    print(f'{idx}번 프로세스 컬러 매칭 시작')
+    paintingMap = paintingTool.expandImageColorMatch(expandedImage)
+
+    print(f'{idx}번 프로세스 컬러 추출 시작')
+    colorNames_, colors_ = getColorFromImage(paintingMap)
+
+    print(f'{idx}번 프로세스 컬러 {len(colorNames_)}개')
+    
+    # number_of_color = paintingTool.getNumb
+    # erOfColor(paintingMap)
+    # print("Number of Color :", number_of_color)
+
+    colorNames[idx] = colorNames_
+    colors[idx] = colors_
+
+    result.put(paintingMap)
+
+    return
+
+
+def process_start(image_name, image_path_o, image_path_r):
+    paintingTool = Painting(image_path_o)
+    image = paintingTool.image
+
+    cv2.imwrite(f'{os.path.dirname(image_path_r)}/{image_name}', image)
+    
+    img_name_o = image_name.replace(".", "_origin.")
+    cv2.imwrite(f'{os.path.dirname(image_path_r)}/{img_name_o}', image)
+
+    return (
+        "#original_img",
+        image_name
+    )
+
+
+def reduce_color(image_name, image_path, reduce_data, clusters):
+    paintingTool = Painting(image_path)
+    paintingTool.image = cv2.imread(image_path)
+
+    # 색 단순화 + 블러 처리
+    blurImage = paintingTool.blurring(
+        div = 8, 
+        radius = 10, 
+        sigmaColor =20, 
+        medianValue=7
+    )
+
+    clusters = [int(i) for i in reduce_data.split(',')[:3]]
+
+    manager = Manager()
+    result_list = manager.Queue()
+    colorNames_ = manager.dict()
+    colors_ = manager.dict()
+    processes = []
+
+    for idx, cluster in enumerate(clusters):
+        process = Process(
+            target=reduce_color_process,
+            args=(
+                idx+1,
+                image_path,
+                blurImage,
+                cluster,
+                result_list,
+                colorNames_,
+                colors_
+            )
+        )
+        processes.append(process)
+        process.start()
+
+    for process in processes:
+        process.join()
+
+
+    painting_map_list = [result_list.get() for _ in range(3)]
+
+    colorNames = str(colorNames_)
+    colors = str(colors_)
+    
+    base_img_path = os.path.dirname(image_path)
+    reduce_img_name = image_name.replace(".", "_reduce.")
+
+    for cluster, painting_map in zip(clusters, painting_map_list):
+        reduce_img_name_ = image_name.replace(".", f"_reduce_{cluster}.")
+        cv2.imwrite(f'{base_img_path}/{reduce_img_name_}', painting_map)
+
+    return (
+        "#reduce_img",
+        reduce_img_name,
+        colorNames,
+        colors
+    )
+
+
+def draw_line(image_name, reduce_data, colors):
+    colors = literal_eval(colors)
+    cluster = colors[reduce_data]
+    
+    image_path = f"{os.getcwd()}/src/main/webapp/static/render_image/{image_name}"
+
+    paintingTool = Painting(image_path)
+    paintingTool.image = cv2.imread(image_path)
+    paintingMap = paintingTool.image
+
+    # 선 그리기
+    drawLineTool = DrawLine(paintingMap)
+    lined_image = drawLineTool.getDrawLine()
+    lined_image = drawLineTool.drawOutline(lined_image)
+
+    # 레이블 추출
+    img_lab, lab = getImgLabelFromImage(cluster, paintingMap)
+
+    base_img_path = os.path.dirname(image_path)
+    lined_image_name = image_name.replace("reduce", "linedraw")
+    image_lab_name = image_name.replace("reduce", "imglab")
+    lab_name = image_name.replace("reduce", "lab")
+    cv2.imwrite(f'{base_img_path}/{lined_image_name}', lined_image)
+    cv2.imwrite(f'{base_img_path}/{image_lab_name}', img_lab)
+    cv2.imwrite(f'{base_img_path}/{lab_name}', lab)
+
+    return (
+        "#linedraw_img",
+        lined_image_name,
+        str(img_lab),
+        str(lab)
+    )
+
+
+def numbering_sector(reduce_img_name, linedraw_img_name, reduce_data, colors, colorNames, img_lab, lab):
+    colors = literal_eval(colors)
+    colorNames = literal_eval(colorNames)
+    
+    image_path = f"{os.getcwd()}/src/main/webapp/static/render_image/{reduce_img_name}"
+    paintingTool = Painting(image_path)
+    paintingTool.image = cv2.imread(image_path)
+    paintingMap = paintingTool.image.copy()
+    
+    line_image_path = image_path.replace("reduce", "linedraw")
+    paintingTool.image = cv2.imread(line_image_path)
+    linedMap = paintingTool.image.copy()
+
+    
+    imglab_path = image_path.replace("reduce", "imglab")
+    lab_path = image_path.replace("reduce", "lab")
+    img_lab = cv2.imread(imglab_path)
+    lab = cv2.imread(lab_path)
+
+    # contour, hierarchy 추출
+    print(f'컨투어 추출 시작')
+    contours, hierarchy, thresh = getContoursFromImage(linedMap.copy())
+
+    # 결과 이미지 백지화
+    result_img = makeWhiteFromImage(paintingMap)
+    result_img = setBackgroundAlpha(paintingMap, result_img)
+
+    # 결과이미지 렌더링
+    # image를 넣으면 원본이미지에 그려주고, result_img에 넣으면 백지에 그려줌
+    print(f'넘버링 시작')
+    result_img = setColorNumberFromContours(result_img, thresh, contours, hierarchy, img_lab, lab, colorNames[reduce_data], False)
+
+    print(f'컬러 레이블링 시작')
+    result_img2 = setColorLabel(result_img.copy(), colorNames[reduce_data], colors[reduce_data])
+
+    print(f'작업 완료')
+
+    base_img_path = os.path.dirname(image_path)
+    number_img_name = reduce_img_name.replace("reduce", "_numbering.")
+    number_img_name_ = number_img_name = reduce_img_name.replace("reduce", "_numbering.")
+
+    cv2.imwrite(f'{base_img_path}/{number_img_name}', result_img)
+    cv2.imwrite(f'{base_img_path}/{number_img_name_}', result_img2)
+
+    return (
+            "#numbering_img",
+            number_img_name
+        )
\ No newline at end of file
diff --git a/src/main/easypipo/index/indexController.py b/src/main/easypipo/index/indexController.py
new file mode 100644
index 0000000..57db31e
--- /dev/null
+++ b/src/main/easypipo/index/indexController.py
@@ -0,0 +1,71 @@
+# index controller
+# Author : Ji-yong219
+# Project Start:: 2021.03.10.
+# Last Modified from Ji-yong 2023.06.22.
+
+from flask import request, render_template, jsonify, Blueprint, redirect, url_for, session, current_app
+import os
+
+
+contoller = Blueprint("server", __name__)
+
+
+@contoller.route("/", methods=["GET"])
+def index():
+    return render_template("index.html")
+    
+@contoller.route("/whatIsPipo", methods=["GET"])
+def whatIsPipo():
+    return render_template("what_is_pipo.html")
+    
+@contoller.route("/howToUse", methods=["GET"])
+def howToUse():
+    return render_template("how_to_use.html")
+    
+@contoller.route("/colorSetting", methods=["GET"])
+def ColorSetting():
+    return render_template("color_setting.html")
+
+@contoller.route("/uploadIMG", methods=["POST"])
+def upload_img():
+    if 'file' not in request.files:
+        resp = jsonify({'message' : 'No file part in the request'})
+        resp.status_code = 400
+        return resp
+
+    files = request.files.getlist('file')
+
+    errors = {}
+    success = False
+    filepath = None
+
+    for file in files:
+        if file:
+            # filename = secure_filename(file.filename) # secure_filename은 한글명을 지원하지 않음
+            filename = file.filename 
+            filepath = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
+            filepath = filepath.replace("\\", "/")
+            
+            # file save (with uploaded)
+            file.save(filepath)
+            success = True
+
+        else:
+            errors[file.filename] = 'File type is not allowed'
+    
+    if success and errors:
+        errors['message'] = 'File(s) successfully uploaded'
+        resp = jsonify(errors)
+        resp.status_code = 206
+        return resp
+
+    # main 
+    if success:
+        resp = jsonify({'message' : 'Files successfully uploaded'})
+        resp.status_code = 201
+        return resp
+
+    else:
+        resp = jsonify(errors)
+        resp.status_code = 400
+        return resp
diff --git a/libs/__init__.py b/src/main/easypipo/libs/__init__.py
similarity index 100%
rename from libs/__init__.py
rename to src/main/easypipo/libs/__init__.py
diff --git a/libs/colorCode.py b/src/main/easypipo/libs/colorCode.py
similarity index 100%
rename from libs/colorCode.py
rename to src/main/easypipo/libs/colorCode.py
diff --git a/libs/drawLine.py b/src/main/easypipo/libs/drawLine.py
similarity index 87%
rename from libs/drawLine.py
rename to src/main/easypipo/libs/drawLine.py
index 9acb7b0..9105092 100644
--- a/libs/drawLine.py
+++ b/src/main/easypipo/libs/drawLine.py
@@ -64,18 +64,6 @@ def drawOutline(self, image):
         image[0:2], image[-3:-1], image[:,0:2], image[:,-3:-1] = 0, 0, 0, 0
         return image
     
-
-def leaveOnePixel(lineImage):
-    image = lineImage.copy()
-    
-    _, image = cv2.threshold(image, 200, 1, cv2.THRESH_BINARY_INV)
-    skeleton = skeletonize(image)
-    skeleton = cv2.cvtColor(skeleton, cv2.COLOR_BGR2GRAY)
-    
-    canvas = np.zeros(skeleton.shape) + 1
-    
-    return 255 - np.multiply( canvas, skeleton )
-    
     
 if __name__ == "__main__":
     '''
diff --git a/libs/imageProcessing.py b/src/main/easypipo/libs/imageProcessing.py
similarity index 91%
rename from libs/imageProcessing.py
rename to src/main/easypipo/libs/imageProcessing.py
index 1e38bdf..36fd668 100644
--- a/libs/imageProcessing.py
+++ b/src/main/easypipo/libs/imageProcessing.py
@@ -98,6 +98,7 @@ def getContoursFromImage(img):
     return contours, hierarchy, image_bin
 
 
+
 @numba.jit(forceobj = True)
 def makeWhiteFromImage(img):
     return np.zeros(img.copy().shape) + 255
@@ -166,7 +167,8 @@ def setColorNumberFromContours(img, thresh, contours, hierarchy, img_lab, lab, c
         contour = contours[idx]
 
         # 면적 
-        if cv2.contourArea(contour) < 80: continue
+        if cv2.contourArea(contour) < 80:
+            continue
 
         chlidren = [ i for i, ii in enumerate(hierarchy[0]) if ii[3] == idx ]
 
@@ -175,12 +177,24 @@ def setColorNumberFromContours(img, thresh, contours, hierarchy, img_lab, lab, c
         cv2.fillPoly(raw_dist, pts =[contour], color=(255, 255, 255))
         cv2.fillPoly(raw_dist, pts =[contours[i] for i in chlidren], color=(0, 0, 0))
 
-
         # 내접원 반지름, 중심좌표 추출
         radius, center, points = getRadiusCenterCircle(raw_dist)
+        # center, radius = cv2.minEnclosingCircle(raw_dist)
+
+
+        # mask = np.zeros((512, 512), dtype=np.uint8)
+
+        # # Draw the contour on the mask image
+        # cv2.drawContours(mask, [contour], 0, (255, 255, 255), -1)
+
+        # # Find the largest inscribed circle using HoughCircles
+        # center, radius = cv2.HoughCircles(mask, cv2.HOUGH_GRADIENT, 1, 20,
+        #                         param1=50, param2=30,
+        #                         minRadius=0, maxRadius=0)
 
         # 반지름 작은거 무시
-        if radius < 8: continue
+        if radius < 8:
+            continue
 
         if center is not None:
             # 넘버링 여러 곳에 하는 기능 개발 중, 주석처리 하였음
diff --git a/libs/painting.py b/src/main/easypipo/libs/painting.py
similarity index 94%
rename from libs/painting.py
rename to src/main/easypipo/libs/painting.py
index cd40f25..bad5fea 100644
--- a/libs/painting.py
+++ b/src/main/easypipo/libs/painting.py
@@ -6,7 +6,9 @@
 import cv2
 import os
 import numpy as np
-from libs.colorCode import HexColorCode
+from ..libs.colorCode import HexColorCode
+from ..libs.utils import is_cuda_cv
+
 
 class Painting:
     def __init__(self, imagepath):
@@ -55,7 +57,15 @@ def blurring(self,
         radius += min( int(imageSize * 1.5) , 40) + step * 2
         
         # blurring
-        blurring = cv2.bilateralFilter(qimg, radius, sigmaColor, 60)
+        blurring = None
+        if is_cuda_cv():
+            qimg_cuda = cv2.cuda_GpuMat()
+            qimg_cuda.upload(qimg)
+            blurring_cuda = cv2.cuda.bilateralFilter(qimg_cuda, radius, sigmaColor, 60)
+            blurring = blurring_cuda.download()
+        else:
+            blurring = cv2.bilateralFilter(qimg, radius, sigmaColor, 60)
+            
         blurring = cv2.medianBlur(blurring, medianValue)
         
         # reduce numbers of color
@@ -139,6 +149,7 @@ def __kmeansColorCluster(self, image, clusters, rounds):
         # labels : array about label, show like 0, 1
         # centers : Cluster centroid Array
         '''
+        
         compactness, labels, centers = cv2.kmeans(
                     samples, # 학습 데이터 정렬, data type = np.float32
                     clusters, # 군집 개수
@@ -300,7 +311,15 @@ def imageExpand(image, guessSize=False, size = 3):
         length = max(image.shape[1], image.shape[0])
         size = ( 5000 // length ) + 1
     #       INTER_LANCZOS4
-    image = cv2.resize(image, None, fx=size, fy=size, interpolation=cv2.INTER_LINEAR)
+
+    if is_cuda_cv():
+        img_cuda = cv2.cuda_GpuMat()
+        img_cuda.upload(image)
+        img_cuda = cv2.cuda.resize(img_cuda, None, fx=size, fy=size, interpolation=cv2.INTER_LINEAR)
+        image = img_cuda.download()
+
+    else:
+        image = cv2.resize(image, None, fx=size, fy=size, interpolation=cv2.INTER_LINEAR)
     
     return  image
     
diff --git a/libs/utils.py b/src/main/easypipo/libs/utils.py
similarity index 71%
rename from libs/utils.py
rename to src/main/easypipo/libs/utils.py
index a4a6907..1054bc0 100644
--- a/libs/utils.py
+++ b/src/main/easypipo/libs/utils.py
@@ -1,6 +1,15 @@
-
-import cv2
-import random, datetime, os
+import cv2
+import random, datetime
+
+def is_cuda_cv(): # 1 == using cuda, 0 = not using cuda
+    try:
+        count = cv2.cuda.getCudaEnabledDeviceCount()
+        if count > 0:
+            return 1
+        else:
+            return 0
+    except:
+        return 0
 
 def get_job_id():
     nowTime = datetime.datetime.now().strftime("%Y%m%d%H%M%S")
@@ -21,6 +30,6 @@ def setBackgroundAlpha(painted_map, numbered_map, alpha = 0.15):
     return cv2.addWeighted(painted_map, alpha, numbered_map, (1-alpha), 0, dtype = cv2.CV_32F)
 
 # BGR to CYMK , Mixing ratios
-# 21.07.17
+# 21.07.17.
 def ratio_brg2cymk(blue, green, red):
     return 0
\ No newline at end of file
diff --git a/web/static/css/cursor.gif b/src/main/webapp/static/css/cursor.gif
similarity index 100%
rename from web/static/css/cursor.gif
rename to src/main/webapp/static/css/cursor.gif
diff --git a/web/static/css/diy_styles.css b/src/main/webapp/static/css/diy_styles.css
similarity index 99%
rename from web/static/css/diy_styles.css
rename to src/main/webapp/static/css/diy_styles.css
index dbe1376..5768a1c 100644
--- a/web/static/css/diy_styles.css
+++ b/src/main/webapp/static/css/diy_styles.css
@@ -60,6 +60,7 @@ body{
 header{
     position: relative;
     height: 150px;
+    margin: 0 auto;
     padding-top: 60px;
     border-bottom: solid 2px #7c7c7c;
     background: rgb(255, 245, 245);
diff --git a/web/static/css/fullpage.css b/src/main/webapp/static/css/fullpage.css
similarity index 100%
rename from web/static/css/fullpage.css
rename to src/main/webapp/static/css/fullpage.css
diff --git a/web/static/css/how_to_use.css b/src/main/webapp/static/css/how_to_use.css
similarity index 96%
rename from web/static/css/how_to_use.css
rename to src/main/webapp/static/css/how_to_use.css
index e72e4c7..40384e6 100644
--- a/web/static/css/how_to_use.css
+++ b/src/main/webapp/static/css/how_to_use.css
@@ -6,7 +6,7 @@
     height: 30px; 
     float: right;
     top: 200px;
-    right: 100px;
+    right: calc(15vw + 102px);
     z-index:9999;
 } 
 
@@ -85,6 +85,7 @@
     width: 49vw; 
     height: calc(70vh - 150px);
     top: 0;
+    float: left;
 }
 .ex_text_early{
     display: inline-block;
@@ -104,10 +105,11 @@
 }
 ul{
     text-align: left;
-    margin-left: 50px;
+    margin-left: 10px;
     vertical-align: middle;
 }
 li{
+    font-size: 20px;
     margin-bottom: 20px;
 }
 div{
diff --git a/src/main/webapp/static/css/what_is_pipo.css b/src/main/webapp/static/css/what_is_pipo.css
new file mode 100644
index 0000000..34d62e2
--- /dev/null
+++ b/src/main/webapp/static/css/what_is_pipo.css
@@ -0,0 +1,56 @@
+.centerbox{
+    display: inline-block;
+    width: 100vw;
+    margin: 0 15vw;
+    padding: 20px 0;
+    text-align: justify;
+}
+.contentbox{
+    display: inline-block;
+    width: 40%;
+    max-width: 1200px;
+    vertical-align: top;
+    margin: 10px;
+}
+.image_box{
+    display: inline-block;
+    width: 40%;
+}
+.main_img{
+    width: 80%;
+}
+
+.content{
+    font-family: NanumBarunGothic;
+}
+
+.discript_title{
+    font-size: 45px;
+    font-weight: normal;
+}
+
+.discript_sub_title{
+    font-size: 23px;
+    margin: 10px auto;
+}
+
+.discript{
+    font-size: 22px;
+    margin-top: 40px;
+    margin-left: 30px;
+    list-style: none;
+    line-height: 80px;
+    text-align: left;
+}
+
+.number{
+    font-size: 100px;
+    font-weight: bold;
+    font-family: 'Fugaz One', cursive;
+    display: inline-block;
+    color: #F8ECE0;
+}
+
+.number_discript{
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/web/static/dist/css-loader.css b/src/main/webapp/static/dist/css-loader.css
similarity index 100%
rename from web/static/dist/css-loader.css
rename to src/main/webapp/static/dist/css-loader.css
diff --git a/web/static/dist/loader-ball.css b/src/main/webapp/static/dist/loader-ball.css
similarity index 100%
rename from web/static/dist/loader-ball.css
rename to src/main/webapp/static/dist/loader-ball.css
diff --git a/web/static/dist/loader-bar-ping-pong.css b/src/main/webapp/static/dist/loader-bar-ping-pong.css
similarity index 100%
rename from web/static/dist/loader-bar-ping-pong.css
rename to src/main/webapp/static/dist/loader-bar-ping-pong.css
diff --git a/web/static/dist/loader-bar.css b/src/main/webapp/static/dist/loader-bar.css
similarity index 100%
rename from web/static/dist/loader-bar.css
rename to src/main/webapp/static/dist/loader-bar.css
diff --git a/web/static/dist/loader-border.css b/src/main/webapp/static/dist/loader-border.css
similarity index 100%
rename from web/static/dist/loader-border.css
rename to src/main/webapp/static/dist/loader-border.css
diff --git a/web/static/dist/loader-bouncing.css b/src/main/webapp/static/dist/loader-bouncing.css
similarity index 100%
rename from web/static/dist/loader-bouncing.css
rename to src/main/webapp/static/dist/loader-bouncing.css
diff --git a/web/static/dist/loader-clock.css b/src/main/webapp/static/dist/loader-clock.css
similarity index 100%
rename from web/static/dist/loader-clock.css
rename to src/main/webapp/static/dist/loader-clock.css
diff --git a/web/static/dist/loader-curtain.css b/src/main/webapp/static/dist/loader-curtain.css
similarity index 100%
rename from web/static/dist/loader-curtain.css
rename to src/main/webapp/static/dist/loader-curtain.css
diff --git a/web/static/dist/loader-default.css b/src/main/webapp/static/dist/loader-default.css
similarity index 100%
rename from web/static/dist/loader-default.css
rename to src/main/webapp/static/dist/loader-default.css
diff --git a/web/static/dist/loader-double.css b/src/main/webapp/static/dist/loader-double.css
similarity index 100%
rename from web/static/dist/loader-double.css
rename to src/main/webapp/static/dist/loader-double.css
diff --git a/web/static/dist/loader-music.css b/src/main/webapp/static/dist/loader-music.css
similarity index 100%
rename from web/static/dist/loader-music.css
rename to src/main/webapp/static/dist/loader-music.css
diff --git a/web/static/dist/loader-pokeball.css b/src/main/webapp/static/dist/loader-pokeball.css
similarity index 100%
rename from web/static/dist/loader-pokeball.css
rename to src/main/webapp/static/dist/loader-pokeball.css
diff --git a/web/static/dist/loader-smartphone.css b/src/main/webapp/static/dist/loader-smartphone.css
similarity index 100%
rename from web/static/dist/loader-smartphone.css
rename to src/main/webapp/static/dist/loader-smartphone.css
diff --git a/web/static/dist/thumbnail-gallery.css b/src/main/webapp/static/dist/thumbnail-gallery.css
similarity index 100%
rename from web/static/dist/thumbnail-gallery.css
rename to src/main/webapp/static/dist/thumbnail-gallery.css
diff --git a/web/static/font/AlfaSlabOne-Regular.ttf b/src/main/webapp/static/font/AlfaSlabOne-Regular.ttf
similarity index 100%
rename from web/static/font/AlfaSlabOne-Regular.ttf
rename to src/main/webapp/static/font/AlfaSlabOne-Regular.ttf
diff --git a/web/static/font/IndieFlower-Regular.ttf b/src/main/webapp/static/font/IndieFlower-Regular.ttf
similarity index 100%
rename from web/static/font/IndieFlower-Regular.ttf
rename to src/main/webapp/static/font/IndieFlower-Regular.ttf
diff --git a/web/static/font/NanumBarunGothic/NanumBarunGothic.eot b/src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothic.eot
similarity index 100%
rename from web/static/font/NanumBarunGothic/NanumBarunGothic.eot
rename to src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothic.eot
diff --git a/web/static/font/NanumBarunGothic/NanumBarunGothic.ttf b/src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothic.ttf
similarity index 100%
rename from web/static/font/NanumBarunGothic/NanumBarunGothic.ttf
rename to src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothic.ttf
diff --git a/web/static/font/NanumBarunGothic/NanumBarunGothic.woff b/src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothic.woff
similarity index 100%
rename from web/static/font/NanumBarunGothic/NanumBarunGothic.woff
rename to src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothic.woff
diff --git a/web/static/font/NanumBarunGothic/NanumBarunGothicBold.eot b/src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothicBold.eot
similarity index 100%
rename from web/static/font/NanumBarunGothic/NanumBarunGothicBold.eot
rename to src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothicBold.eot
diff --git a/web/static/font/NanumBarunGothic/NanumBarunGothicBold.ttf b/src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothicBold.ttf
similarity index 100%
rename from web/static/font/NanumBarunGothic/NanumBarunGothicBold.ttf
rename to src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothicBold.ttf
diff --git a/web/static/font/NanumBarunGothic/NanumBarunGothicBold.woff b/src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothicBold.woff
similarity index 100%
rename from web/static/font/NanumBarunGothic/NanumBarunGothicBold.woff
rename to src/main/webapp/static/font/NanumBarunGothic/NanumBarunGothicBold.woff
diff --git a/web/static/font/Pangolin-Regular.ttf b/src/main/webapp/static/font/Pangolin-Regular.ttf
similarity index 100%
rename from web/static/font/Pangolin-Regular.ttf
rename to src/main/webapp/static/font/Pangolin-Regular.ttf
diff --git a/web/static/font/ariblk.ttf b/src/main/webapp/static/font/ariblk.ttf
similarity index 100%
rename from web/static/font/ariblk.ttf
rename to src/main/webapp/static/font/ariblk.ttf
diff --git a/web/static/font/corbel-light.ttf b/src/main/webapp/static/font/corbel-light.ttf
similarity index 100%
rename from web/static/font/corbel-light.ttf
rename to src/main/webapp/static/font/corbel-light.ttf
diff --git a/web/static/how_to_use_image/1.png b/src/main/webapp/static/how_to_use_image/1.png
similarity index 100%
rename from web/static/how_to_use_image/1.png
rename to src/main/webapp/static/how_to_use_image/1.png
diff --git a/web/static/how_to_use_image/2.png b/src/main/webapp/static/how_to_use_image/2.png
similarity index 100%
rename from web/static/how_to_use_image/2.png
rename to src/main/webapp/static/how_to_use_image/2.png
diff --git a/web/static/how_to_use_image/3.png b/src/main/webapp/static/how_to_use_image/3.png
similarity index 100%
rename from web/static/how_to_use_image/3.png
rename to src/main/webapp/static/how_to_use_image/3.png
diff --git a/web/static/how_to_use_image/4.png b/src/main/webapp/static/how_to_use_image/4.png
similarity index 100%
rename from web/static/how_to_use_image/4.png
rename to src/main/webapp/static/how_to_use_image/4.png
diff --git a/web/static/how_to_use_image/5.png b/src/main/webapp/static/how_to_use_image/5.png
similarity index 100%
rename from web/static/how_to_use_image/5.png
rename to src/main/webapp/static/how_to_use_image/5.png
diff --git a/web/static/icon/download.png b/src/main/webapp/static/icon/download.png
similarity index 100%
rename from web/static/icon/download.png
rename to src/main/webapp/static/icon/download.png
diff --git a/web/static/icon/logo.png b/src/main/webapp/static/icon/logo.png
similarity index 100%
rename from web/static/icon/logo.png
rename to src/main/webapp/static/icon/logo.png
diff --git a/web/static/icon/magnifying-glass.png b/src/main/webapp/static/icon/magnifying-glass.png
similarity index 100%
rename from web/static/icon/magnifying-glass.png
rename to src/main/webapp/static/icon/magnifying-glass.png
diff --git a/web/static/images/whatispipo-main.png b/src/main/webapp/static/images/whatispipo-main.png
similarity index 100%
rename from web/static/images/whatispipo-main.png
rename to src/main/webapp/static/images/whatispipo-main.png
diff --git a/web/static/js/diy_func.js b/src/main/webapp/static/js/diy_func.js
similarity index 61%
rename from web/static/js/diy_func.js
rename to src/main/webapp/static/js/diy_func.js
index cf71312..87df926 100644
--- a/web/static/js/diy_func.js
+++ b/src/main/webapp/static/js/diy_func.js
@@ -10,8 +10,9 @@ function close_btn(target){
 
 $(window).on('load', function(){
 
-    var ori_image_path = null;
-    var ren_image_path = null;
+    let ori_image_path = null;
+    let ren_image_path = null;
+    sessionStorage.setItem("reduce_data", -1)
 
     $('.zone').on("dragover", dragOver).on("drop", uploadFiles);
                 
@@ -25,7 +26,7 @@ $(window).on('load', function(){
             e.preventDefault();
         }
 
-        var dropZone = $('.zone'),
+        let dropZone = $('.zone'),
             timeout = window.dropZoneTimeout;
         if (!timeout) {
             dropZone.addClass('in');
@@ -33,7 +34,7 @@ $(window).on('load', function(){
         else {
             clearTimeout(timeout);
         }
-        var found = false,
+        let found = false,
             node = e.target;
 
         do {
@@ -64,7 +65,7 @@ $(window).on('load', function(){
         }
         
         e.dataTransfer = e.originalEvent.dataTransfer;
-        var files = e.target.files || e.dataTransfer.files;
+        let files = e.target.files || e.dataTransfer.files;
 
         selectFile(files, e);
     }
@@ -72,59 +73,65 @@ $(window).on('load', function(){
 
     function do_image_job(job, next_btn, image_path){
         $('.loader').addClass('is-active');
-        var reduce_data = "";
 
-        if(job == "reduce_color"){
+        if(job == "reduceColor"){
+            reduce_data = ""
             $('.cluster_number_input').each(function(){
                 reduce_data += $(this).val()+",";
             });
             reduce_data += $("#mycolor_check").is(":checked");
+            sessionStorage.setItem("reduce_data", reduce_data)
         }
-        else if(job == "draw_line"){
+        else if(job == "drawLine"){
+            image_path = $("input[name='reduce_img_select']:checked + > img").attr("src");
             reduce_data = $("input[name='reduce_img_select']:checked").val();
-            
+            sessionStorage.setItem("reduce_data", reduce_data)
         }
         else{
-            reduce_data = -1;
+            reduce_data = sessionStorage.getItem("reduce_data")
         }
 
         $.ajax({
-            url: '/convert',
-            data: {"job":job, "image_path": image_path, "reduce_data":reduce_data},
+            url: `/imageProcess/${job}`,
+            data: {
+                "image_path": image_path,
+                "reduce_data": sessionStorage.getItem("reduce_data")
+            },
             dataType:'json',
             type: 'POST',
             success: function (data) {
                 $(data.target+'_box').show();
-                
-                // $($($(data.target+'_box').parent()).prev()).addClass('is-done');
-                // $($($(data.target+'_box').parent()).prev()).removeClass('current');
-                // $($(data.target+'_box').parent()).addClass('current');
-
-                // $($(data.target+'_box').parent().next()).addClass('is-done');
-                
                 $(data.target+'_box').parent().addClass('is-done');
                 $($(data.target+'_box').parent()).removeClass('current');
                 $($(data.target+'_box').parent().next()).addClass('current');
 
+                let time = new Date().getTime();
 
-                var time = new Date().getTime();
-
-                if(job == "reduce_color"){
-                    var img_name = data.img_name.split(".")[0];
-                    $(data.target+"_1"+" img").attr('src', '/static/render_image/'+img_name+'_1.'+data.img_name.split(".")[1]+'?time='+time);
-                    $(data.target+"_2"+" img").attr('src', '/static/render_image/'+img_name+'_2.'+data.img_name.split(".")[1]+'?time='+time);
-                    $(data.target+"_3"+" img").attr('src', '/static/render_image/'+img_name+'_3.'+data.img_name.split(".")[1]+'?time='+time);
-                    
-                    $(data.target+"_1").css('background-image', 'url(/static/render_image/'+img_name+'_1.'+data.img_name.split(".")[1]+'?time='+time+')');
-                    $(data.target+"_2").css('background-image', 'url(/static/render_image/'+img_name+'_2.'+data.img_name.split(".")[1]+'?time='+time+')');
-                    $(data.target+"_3").css('background-image', 'url(/static/render_image/'+img_name+'_3.'+data.img_name.split(".")[1]+'?time='+time+')');
+                if(job == "reduceColor") {
+                    let img_name = data.img_name.split(".")[0]
+                    let split_img_name = data.img_name.split(".")[1]
                     
-                    $(".color_text").each(function(i){
-                        $(this).text(data.clusters[i] + " Color");
-                    });
+                    $(".color_text").each(function(idx){
+                        let cluster = data.clusters[idx]
+
+                        $(`${data.target}_${idx+1} img`).attr(
+                            'src',
+                            `/static/render_image/${img_name}_${cluster}.${split_img_name}?time=${time}`
+                        )
+
+                        $(`${data.target}_${idx+1}`).css(
+                            'background-image',
+                            `url(/static/render_image/${img_name}_${cluster}.${split_img_name}?time=${time}`
+                        )
+
+                        $(this).text(`${cluster} Color`);
+                        
+                        $(".download_btn").eq(idx+1).attr("href", `/static/render_image/${img_name}_${cluster}.${split_img_name}`)
+                        $(`#a_reduce_input_${idx+1}`).attr("href", `/static/render_image/${img_name}_${cluster}.${split_img_name}?time=${time}`)
+                    })
                 }
                 else{
-                    $(data.target).attr('src', '/static/render_image/'+data.img_name+'?time='+time);
+                    $(data.target).attr('src', `/static/render_image/${data.img_name}?time=${time}`);
                 }
 
                 $(next_btn).show();
@@ -141,7 +148,7 @@ $(window).on('load', function(){
     
     
     function selectFile(fileObject, e){
-        var files = null;
+        let files = null;
 
         if(fileObject == undefined){
 
@@ -171,10 +178,10 @@ $(window).on('load', function(){
 
                 $('.view_image_box,.view_image_box').hide();
 
-                var tag = '';
-                var f = files[0];
-                var fileName = f.name;
-                var fileSize = f.size / 1024 / 1024;
+                let tag = '';
+                let f = files[0];
+                let fileName = f.name;
+                let fileSize = f.size / 1024 / 1024;
                 fileSize = fileSize < 1 ? fileSize.toFixed(3) : fileSize.toFixed(1);
 
                 tag += 
@@ -189,17 +196,19 @@ $(window).on('load', function(){
 
                 $('html,body').animate({ scrollTop: 9999 }, 'slow');
 
-                var reader = new FileReader();
+                let reader = new FileReader();
                 reader.onload = function(e){
                     $("#thumbnail").attr("src", e.target.result);
                 }
                 reader.readAsDataURL(f);
 
+                // GO 버튼 클릭 (첫 시작)
                 $('.go_btn').click(function(){
-                    var formData = new FormData();
+                    let formData = new FormData();
                     formData.append("file", f);
-                    ori_image_path = '../static/org_image/'+fileName;
-                    ren_image_path = '../static/render_image/'+fileName;
+
+                    sessionStorage.setItem("org_image_path", `../static/org_image/${fileName}`)
+                    sessionStorage.setItem("ren_image_path", `../static/render_image/${fileName}`)
 
                     $.ajax({
                         type: 'POST',
@@ -211,9 +220,10 @@ $(window).on('load', function(){
                         },
                         data: formData,
                         success: function (data) {
-                            do_image_job("start", "#reduce_btn", ori_image_path);
+                            org_image_path = sessionStorage.getItem("org_image_path")
+                            do_image_job("processStart", "#reduce_btn", org_image_path);
                             $("#reduce_box").show();
-                            $(".download_btn").eq(0).attr("href", ori_image_path);
+                            $(".download_btn").eq(0).attr("href", org_image_path);
                         },
                         error: function (error) {
                             console.error(error);
@@ -221,20 +231,11 @@ $(window).on('load', function(){
                     });
                 });
 
+                // Reduce Color 버튼 클릭 (2번째)
                 $("#reduce_btn").click(function(){
-                    var time = new Date().getTime();
-
-                    do_image_job("reduce_color", "#drawline_btn", ren_image_path);
+                    ren_image_path = sessionStorage.getItem("ren_image_path")
 
-                    var temp = ren_image_path.split(".");
-
-                    $(".download_btn").eq(1).attr("href", ".."+temp[2]+"_reduce_1."+temp[3]);
-                    $(".download_btn").eq(2).attr("href", ".."+temp[2]+"_reduce_2."+temp[3]);
-                    $(".download_btn").eq(3).attr("href", ".."+temp[2]+"_reduce_3."+temp[3]);
-                    
-                    $("#a_reduce_input_1").attr("href", ".."+temp[2]+"_reduce_1."+temp[3]+'?time='+time);
-                    $("#a_reduce_input_2").attr("href", ".."+temp[2]+"_reduce_2."+temp[3]+'?time='+time);
-                    $("#a_reduce_input_3").attr("href", ".."+temp[2]+"_reduce_3."+temp[3]+'?time='+time);
+                    do_image_job("reduceColor", "#drawline_btn", ren_image_path);
                     
                     baguetteBox.run('.reduce_img_baguette', {
                         noScrollbars: true
@@ -242,34 +243,36 @@ $(window).on('load', function(){
                 })
 
                 $("#drawline_btn").click(function(){
-                    do_image_job("draw_line", "#numbering_btn", ren_image_path);
+                    ren_image_path = sessionStorage.getItem("ren_image_path")
+                    do_image_job("drawLine", "#numbering_btn", ren_image_path)
 
-                    var temp = ren_image_path.split(".");
-                    $(".download_btn").eq(4).attr("href", ren_image_path);
-                    $(".download_btn").eq(4).attr("href", ".."+temp[2]+"_linedraw."+temp[3]);
+                    let temp = ren_image_path.split(".")
+                    $(".download_btn").eq(4).attr("href", ren_image_path)
+                    $(".download_btn").eq(4).attr("href", `..${temp[2]}_linedraw.${temp[3]}`)
                 })
 
                 $("#numbering_btn").click(function(){
-                    do_image_job("numbering", null, ren_image_path);
+                    ren_image_path = sessionStorage.getItem("ren_image_path")
+                    do_image_job("numbering", null, ren_image_path)
                     
-                    var temp = ren_image_path.split(".");
-                    $(".download_btn").eq(5).attr("href", ".."+temp[2]+"_numbering."+temp[3]);
+                    let temp = ren_image_path.split(".")
+                    $(".download_btn").eq(5).attr("href", `..${temp[2]}_numbering.${temp[3]}`)
 
                     $("#input_color_label_btn").show();
 
                     $("#input_color_label_btn").click(
                         function(){
-                            var time = new Date().getTime();
+                            let time = new Date().getTime();
 
-                            var state = $(this).data('toggleState');
+                            let state = $(this).data('toggleState');
 
                             if(state){
-                                $("#numbering_img").attr('src', ".."+temp[2]+"_numbering_label."+temp[3])+'?time='+time;
-                                $(".download_btn").eq(5).attr("href", ".."+temp[2]+"_numbering_label."+temp[3]);
+                                $("#numbering_img").attr('src', `..${temp[2]}_numbering_label.${temp[3]}'?time=${time}`)
+                                $(".download_btn").eq(5).attr("href", `..${temp[2]}_numbering_label.${temp[3]}`)
                             }
                             else{
-                                $("#numbering_img").attr('src', ".."+temp[2]+"_numbering."+temp[3])+'?time='+time;
-                                $(".download_btn").eq(5).attr("href", ".."+temp[2]+"_numbering."+temp[3]);
+                                $("#numbering_img").attr('src', `..${temp[2]}_numbering.${temp[3]}'?time=${time}`)
+                                $(".download_btn").eq(5).attr("href", `..${temp[2]}_numbering.${temp[3]}`)
                             }
                             $(this).data('toggleState', !state);
                         }
diff --git a/web/static/js/fullpage.js b/src/main/webapp/static/js/fullpage.js
similarity index 100%
rename from web/static/js/fullpage.js
rename to src/main/webapp/static/js/fullpage.js
diff --git a/src/main/webapp/static/org_image/IMG_7050.jpg b/src/main/webapp/static/org_image/IMG_7050.jpg
new file mode 100644
index 0000000..d8217c1
Binary files /dev/null and b/src/main/webapp/static/org_image/IMG_7050.jpg differ
diff --git a/web/static/org_image/cju-low.jpg b/src/main/webapp/static/org_image/cju-low.jpg
similarity index 100%
rename from web/static/org_image/cju-low.jpg
rename to src/main/webapp/static/org_image/cju-low.jpg
diff --git a/web/static/org_image/cju2.jpg b/src/main/webapp/static/org_image/cju2.jpg
similarity index 100%
rename from web/static/org_image/cju2.jpg
rename to src/main/webapp/static/org_image/cju2.jpg
diff --git a/web/static/org_image/entrance.png b/src/main/webapp/static/org_image/entrance.png
similarity index 100%
rename from web/static/org_image/entrance.png
rename to src/main/webapp/static/org_image/entrance.png
diff --git a/web/static/render_image/lala.jpg b/src/main/webapp/static/org_image/lala.jpg
similarity index 100%
rename from web/static/render_image/lala.jpg
rename to src/main/webapp/static/org_image/lala.jpg
diff --git a/web/static/org_image/lalaland.png b/src/main/webapp/static/org_image/lalaland.png
similarity index 100%
rename from web/static/org_image/lalaland.png
rename to src/main/webapp/static/org_image/lalaland.png
diff --git a/web/static/org_image/library.jpg b/src/main/webapp/static/org_image/library.jpg
similarity index 100%
rename from web/static/org_image/library.jpg
rename to src/main/webapp/static/org_image/library.jpg
diff --git a/src/main/webapp/static/render_image/IMG_7050.jpg b/src/main/webapp/static/render_image/IMG_7050.jpg
new file mode 100644
index 0000000..428ab5c
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050.jpg differ
diff --git a/src/main/webapp/static/render_image/IMG_7050__numbering._16.jpg b/src/main/webapp/static/render_image/IMG_7050__numbering._16.jpg
new file mode 100644
index 0000000..bc80d52
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050__numbering._16.jpg differ
diff --git a/src/main/webapp/static/render_image/IMG_7050_imglab_16.jpg b/src/main/webapp/static/render_image/IMG_7050_imglab_16.jpg
new file mode 100644
index 0000000..513f8ff
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050_imglab_16.jpg differ
diff --git a/src/main/webapp/static/render_image/IMG_7050_lab_16.jpg b/src/main/webapp/static/render_image/IMG_7050_lab_16.jpg
new file mode 100644
index 0000000..553f629
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050_lab_16.jpg differ
diff --git a/src/main/webapp/static/render_image/IMG_7050_linedraw_16.jpg b/src/main/webapp/static/render_image/IMG_7050_linedraw_16.jpg
new file mode 100644
index 0000000..21f09a7
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050_linedraw_16.jpg differ
diff --git a/src/main/webapp/static/render_image/IMG_7050_origin.jpg b/src/main/webapp/static/render_image/IMG_7050_origin.jpg
new file mode 100644
index 0000000..428ab5c
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050_origin.jpg differ
diff --git a/src/main/webapp/static/render_image/IMG_7050_reduce_16.jpg b/src/main/webapp/static/render_image/IMG_7050_reduce_16.jpg
new file mode 100644
index 0000000..487941a
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050_reduce_16.jpg differ
diff --git a/src/main/webapp/static/render_image/IMG_7050_reduce_24.jpg b/src/main/webapp/static/render_image/IMG_7050_reduce_24.jpg
new file mode 100644
index 0000000..796c5e8
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050_reduce_24.jpg differ
diff --git a/src/main/webapp/static/render_image/IMG_7050_reduce_32.jpg b/src/main/webapp/static/render_image/IMG_7050_reduce_32.jpg
new file mode 100644
index 0000000..ee1a412
Binary files /dev/null and b/src/main/webapp/static/render_image/IMG_7050_reduce_32.jpg differ
diff --git a/web/static/render_image/cju2_reduce_1.jpg b/src/main/webapp/static/render_image/cju2_reduce_1.jpg
similarity index 100%
rename from web/static/render_image/cju2_reduce_1.jpg
rename to src/main/webapp/static/render_image/cju2_reduce_1.jpg
diff --git a/web/static/render_image/cju2_reduce_2.jpg b/src/main/webapp/static/render_image/cju2_reduce_2.jpg
similarity index 100%
rename from web/static/render_image/cju2_reduce_2.jpg
rename to src/main/webapp/static/render_image/cju2_reduce_2.jpg
diff --git a/web/static/render_image/entrance.png b/src/main/webapp/static/render_image/entrance.png
similarity index 100%
rename from web/static/render_image/entrance.png
rename to src/main/webapp/static/render_image/entrance.png
diff --git a/web/static/render_image/entrance_linedraw.png b/src/main/webapp/static/render_image/entrance_linedraw.png
similarity index 100%
rename from web/static/render_image/entrance_linedraw.png
rename to src/main/webapp/static/render_image/entrance_linedraw.png
diff --git a/web/static/render_image/entrance_numbering.png b/src/main/webapp/static/render_image/entrance_numbering.png
similarity index 100%
rename from web/static/render_image/entrance_numbering.png
rename to src/main/webapp/static/render_image/entrance_numbering.png
diff --git a/web/static/render_image/entrance_numbering_label.png b/src/main/webapp/static/render_image/entrance_numbering_label.png
similarity index 100%
rename from web/static/render_image/entrance_numbering_label.png
rename to src/main/webapp/static/render_image/entrance_numbering_label.png
diff --git a/web/static/render_image/entrance_numbering_label16.png b/src/main/webapp/static/render_image/entrance_numbering_label16.png
similarity index 100%
rename from web/static/render_image/entrance_numbering_label16.png
rename to src/main/webapp/static/render_image/entrance_numbering_label16.png
diff --git a/web/static/render_image/entrance_numbering_label8.png b/src/main/webapp/static/render_image/entrance_numbering_label8.png
similarity index 100%
rename from web/static/render_image/entrance_numbering_label8.png
rename to src/main/webapp/static/render_image/entrance_numbering_label8.png
diff --git a/web/static/render_image/entrance_origin.png b/src/main/webapp/static/render_image/entrance_origin.png
similarity index 100%
rename from web/static/render_image/entrance_origin.png
rename to src/main/webapp/static/render_image/entrance_origin.png
diff --git a/web/static/render_image/entrance_reduce_1.png b/src/main/webapp/static/render_image/entrance_reduce_1.png
similarity index 100%
rename from web/static/render_image/entrance_reduce_1.png
rename to src/main/webapp/static/render_image/entrance_reduce_1.png
diff --git a/web/static/render_image/entrance_reduce_2.png b/src/main/webapp/static/render_image/entrance_reduce_2.png
similarity index 100%
rename from web/static/render_image/entrance_reduce_2.png
rename to src/main/webapp/static/render_image/entrance_reduce_2.png
diff --git a/web/static/render_image/entrance_reduce_3.png b/src/main/webapp/static/render_image/entrance_reduce_3.png
similarity index 100%
rename from web/static/render_image/entrance_reduce_3.png
rename to src/main/webapp/static/render_image/entrance_reduce_3.png
diff --git a/web/static/render_image/lala-color-24.jpg b/src/main/webapp/static/render_image/lala-color-24.jpg
similarity index 100%
rename from web/static/render_image/lala-color-24.jpg
rename to src/main/webapp/static/render_image/lala-color-24.jpg
diff --git a/web/static/render_image/lala_origin.jpg b/src/main/webapp/static/render_image/lala.jpg
similarity index 100%
rename from web/static/render_image/lala_origin.jpg
rename to src/main/webapp/static/render_image/lala.jpg
diff --git a/web/static/render_image/lala_linedraw.jpg b/src/main/webapp/static/render_image/lala_linedraw.jpg
similarity index 100%
rename from web/static/render_image/lala_linedraw.jpg
rename to src/main/webapp/static/render_image/lala_linedraw.jpg
diff --git a/web/static/render_image/lala_numbering.jpg b/src/main/webapp/static/render_image/lala_numbering.jpg
similarity index 100%
rename from web/static/render_image/lala_numbering.jpg
rename to src/main/webapp/static/render_image/lala_numbering.jpg
diff --git a/web/static/render_image/lala_numbering_label.jpg b/src/main/webapp/static/render_image/lala_numbering_label.jpg
similarity index 100%
rename from web/static/render_image/lala_numbering_label.jpg
rename to src/main/webapp/static/render_image/lala_numbering_label.jpg
diff --git a/src/main/webapp/static/render_image/lala_origin.jpg b/src/main/webapp/static/render_image/lala_origin.jpg
new file mode 100644
index 0000000..425ae72
Binary files /dev/null and b/src/main/webapp/static/render_image/lala_origin.jpg differ
diff --git a/web/static/render_image/lala_reduce_1.jpg b/src/main/webapp/static/render_image/lala_reduce_1.jpg
similarity index 100%
rename from web/static/render_image/lala_reduce_1.jpg
rename to src/main/webapp/static/render_image/lala_reduce_1.jpg
diff --git a/web/static/render_image/lala_reduce_2.jpg b/src/main/webapp/static/render_image/lala_reduce_2.jpg
similarity index 100%
rename from web/static/render_image/lala_reduce_2.jpg
rename to src/main/webapp/static/render_image/lala_reduce_2.jpg
diff --git a/web/static/render_image/lala_reduce_3.jpg b/src/main/webapp/static/render_image/lala_reduce_3.jpg
similarity index 100%
rename from web/static/render_image/lala_reduce_3.jpg
rename to src/main/webapp/static/render_image/lala_reduce_3.jpg
diff --git a/src/main/webapp/static/render_image/lala_render.jpg b/src/main/webapp/static/render_image/lala_render.jpg
new file mode 100644
index 0000000..425ae72
Binary files /dev/null and b/src/main/webapp/static/render_image/lala_render.jpg differ
diff --git a/web/static/render_image/lalaland.png b/src/main/webapp/static/render_image/lalaland.png
similarity index 100%
rename from web/static/render_image/lalaland.png
rename to src/main/webapp/static/render_image/lalaland.png
diff --git a/web/static/render_image/lalaland_linedraw.png b/src/main/webapp/static/render_image/lalaland_linedraw.png
similarity index 100%
rename from web/static/render_image/lalaland_linedraw.png
rename to src/main/webapp/static/render_image/lalaland_linedraw.png
diff --git a/web/static/render_image/lalaland_numbering.png b/src/main/webapp/static/render_image/lalaland_numbering.png
similarity index 100%
rename from web/static/render_image/lalaland_numbering.png
rename to src/main/webapp/static/render_image/lalaland_numbering.png
diff --git a/web/static/render_image/lalaland_numbering_label16.png b/src/main/webapp/static/render_image/lalaland_numbering_label16.png
similarity index 100%
rename from web/static/render_image/lalaland_numbering_label16.png
rename to src/main/webapp/static/render_image/lalaland_numbering_label16.png
diff --git a/web/static/render_image/lalaland_numbering_label32.png b/src/main/webapp/static/render_image/lalaland_numbering_label32.png
similarity index 100%
rename from web/static/render_image/lalaland_numbering_label32.png
rename to src/main/webapp/static/render_image/lalaland_numbering_label32.png
diff --git a/web/static/render_image/lalaland_origin.png b/src/main/webapp/static/render_image/lalaland_origin.png
similarity index 100%
rename from web/static/render_image/lalaland_origin.png
rename to src/main/webapp/static/render_image/lalaland_origin.png
diff --git a/web/static/render_image/lalaland_reduce_1.png b/src/main/webapp/static/render_image/lalaland_reduce_1.png
similarity index 100%
rename from web/static/render_image/lalaland_reduce_1.png
rename to src/main/webapp/static/render_image/lalaland_reduce_1.png
diff --git a/web/static/render_image/lalaland_reduce_2.png b/src/main/webapp/static/render_image/lalaland_reduce_2.png
similarity index 100%
rename from web/static/render_image/lalaland_reduce_2.png
rename to src/main/webapp/static/render_image/lalaland_reduce_2.png
diff --git a/web/static/render_image/lalaland_reduce_3.png b/src/main/webapp/static/render_image/lalaland_reduce_3.png
similarity index 100%
rename from web/static/render_image/lalaland_reduce_3.png
rename to src/main/webapp/static/render_image/lalaland_reduce_3.png
diff --git a/web/static/render_image/library.jpg b/src/main/webapp/static/render_image/library.jpg
similarity index 100%
rename from web/static/render_image/library.jpg
rename to src/main/webapp/static/render_image/library.jpg
diff --git a/web/static/render_image/library_linedraw.jpg b/src/main/webapp/static/render_image/library_linedraw.jpg
similarity index 100%
rename from web/static/render_image/library_linedraw.jpg
rename to src/main/webapp/static/render_image/library_linedraw.jpg
diff --git a/web/static/render_image/library_numbering.jpg b/src/main/webapp/static/render_image/library_numbering.jpg
similarity index 100%
rename from web/static/render_image/library_numbering.jpg
rename to src/main/webapp/static/render_image/library_numbering.jpg
diff --git a/web/static/render_image/library_numbering_label.jpg b/src/main/webapp/static/render_image/library_numbering_label.jpg
similarity index 100%
rename from web/static/render_image/library_numbering_label.jpg
rename to src/main/webapp/static/render_image/library_numbering_label.jpg
diff --git a/web/static/render_image/library_origin.jpg b/src/main/webapp/static/render_image/library_origin.jpg
similarity index 100%
rename from web/static/render_image/library_origin.jpg
rename to src/main/webapp/static/render_image/library_origin.jpg
diff --git a/web/static/render_image/library_reduce_1.jpg b/src/main/webapp/static/render_image/library_reduce_1.jpg
similarity index 100%
rename from web/static/render_image/library_reduce_1.jpg
rename to src/main/webapp/static/render_image/library_reduce_1.jpg
diff --git a/web/static/render_image/library_reduce_2.jpg b/src/main/webapp/static/render_image/library_reduce_2.jpg
similarity index 100%
rename from web/static/render_image/library_reduce_2.jpg
rename to src/main/webapp/static/render_image/library_reduce_2.jpg
diff --git a/web/static/render_image/library_reduce_3.jpg b/src/main/webapp/static/render_image/library_reduce_3.jpg
similarity index 100%
rename from web/static/render_image/library_reduce_3.jpg
rename to src/main/webapp/static/render_image/library_reduce_3.jpg
diff --git a/web/templates/color_setting.html b/src/main/webapp/templates/color_setting.html
similarity index 100%
rename from web/templates/color_setting.html
rename to src/main/webapp/templates/color_setting.html
diff --git a/web/templates/how_to_use.html b/src/main/webapp/templates/how_to_use.html
similarity index 71%
rename from web/templates/how_to_use.html
rename to src/main/webapp/templates/how_to_use.html
index d9dfa62..4b176f9 100644
--- a/web/templates/how_to_use.html
+++ b/src/main/webapp/templates/how_to_use.html
@@ -25,7 +25,6 @@
     <script type="text/javascript">
         var kor_contain = `<div id='page_1' class='section' style='width: 100vw; height: 100wh;'>
             {% include 'menu_template.html' %}
-            <div class='main'>
                 <div class='top_menu'>
                     <label class='switch-button' >
                         <span class='kor'>한국어</span>
@@ -49,58 +48,57 @@
                     </ul>
                 </div>
             </div>
-            </div>
             <div id='page_2' class='section' >
-            <div class='ex_image'>
-                <img src='../static/how_to_use_image/2.png' width='576' height='324'>
-            </div>
-            <div class='ex_text'>
-                <ul>
-                    <li>원본 이미지가 보여집니다.</li>
-                    <li>좌측에는 작업 진행 구간이 표시됩니다.</li>
-                    <li>우측 다운로드 버튼을 통해 이미지를 다운로드 할 수 있습니다.</li>
-                    <li>줄이고자 하는 색상 개수를 입력할 수 있습니다. (기본값 16, 24, 32)</li>
-                    <li>지정된 색상으로 변환하고 싶으면 사진 우측 하단의 버튼을 클릭해줍니다.</li>
-                    <li>Reduce Color 버튼을 누르면 이미지에서 색상을 줄이는 작업이 진행됩니다.</li>
-                    <li>예상 소요 시간 3분</li>
-                </ul>
-            </div>
-            <div class='ex_image'>
-                <img src='../static/how_to_use_image/3.png' width='576' height='324'>
-            </div>
-            <div class='ex_text'>
-                <ul>
-                    <li>3가지 종류의 색상 단순화 이미지가 나타납니다.</li>
-                    <li>하단 돋보기 버튼을 통해 확대해서 볼 수 있습니다.</li>
-                    <li>상단 다운로드 버튼을 통해 이미지를 다운로드 할 수 있습니다.</li>
-                    <li>이미지를 클릭하면 이미지가 선택됩니다</li>
-                    <li>Draw Line 버튼을 누르면 색상 경계선을 기준으로 선을 그리는 작업이 진행됩니다.</li>
-                    <li>예상 소요 시간 1분</li>
-                </ul>
-            </div>
+                <div class='ex_image'>
+                    <img src='../static/how_to_use_image/2.png' width='576' height='324'>
+                </div>
+                <div class='ex_text'>
+                    <ul>
+                        <li>원본 이미지가 보여집니다.</li>
+                        <li>좌측에는 작업 진행 구간이 표시됩니다.</li>
+                        <li>우측 다운로드 버튼을 통해 이미지를 다운로드 할 수 있습니다.</li>
+                        <li>줄이고자 하는 색상 개수를 입력할 수 있습니다. (기본값 16, 24, 32)</li>
+                        <li>지정된 색상으로 변환하고 싶으면 사진 우측 하단의 버튼을 클릭해줍니다.</li>
+                        <li>Reduce Color 버튼을 누르면 이미지에서 색상을 줄이는 작업이 진행됩니다.</li>
+                        <li>예상 소요 시간 3분</li>
+                    </ul>
+                </div>
+                <div class='ex_image'>
+                    <img src='../static/how_to_use_image/3.png' width='576' height='324'>
+                </div>
+                <div class='ex_text'>
+                    <ul>
+                        <li>3가지 종류의 색상 단순화 이미지가 나타납니다.</li>
+                        <li>하단 돋보기 버튼을 통해 확대해서 볼 수 있습니다.</li>
+                        <li>상단 다운로드 버튼을 통해 이미지를 다운로드 할 수 있습니다.</li>
+                        <li>이미지를 클릭하면 이미지가 선택됩니다</li>
+                        <li>Draw Line 버튼을 누르면 색상 경계선을 기준으로 선을 그리는 작업이 진행됩니다.</li>
+                        <li>예상 소요 시간 1분</li>
+                    </ul>
+                </div>
             </div>
             <div id='page_3' class='section'>
-            <div class='ex_image'>
-                <img src='../static/how_to_use_image/4.png' width='576' height='324'>
-            </div>
-            <div class='ex_text'>
-                <ul>
-                    <li>단순화된 이미지에서 색상 경계선을 따라 선이 그려집니다.</li>
-                    <li>우측 다운로드 버튼을 통해 이미지를 다운로드 할 수 있습니다.</li>
-                    <li>Numbering 버튼을 통해 선 내부에 색상 번호를 기입할 수 있습니다.</li>
-                    <li>예상 소요 시간 5분</li>
-                </ul>
-            </div>
-            <div class='ex_image'>
-                <img src='../static/how_to_use_image/5.png' width='576' height='324'>
-            </div>
-            <div class='ex_text'>
-                <ul>
-                    <li>색상 번호가 기입된 결과 이미지가 나타납니다.</li>
-                    <li>색상 레이블을 넣고 싶으면 하단의 Input Color Label 버튼을 눌러주세요.</li>
-                    <li>하단 다운로드 버튼을 통해 최종 이미지를 다운로드 할 수 있습니다.</li>
-                </ul>
-            </div>
+                <div class='ex_image'>
+                    <img src='../static/how_to_use_image/4.png' width='576' height='324'>
+                </div>
+                <div class='ex_text'>
+                    <ul>
+                        <li>단순화된 이미지에서 색상 경계선을 따라 선이 그려집니다.</li>
+                        <li>우측 다운로드 버튼을 통해 이미지를 다운로드 할 수 있습니다.</li>
+                        <li>Numbering 버튼을 통해 선 내부에 색상 번호를 기입할 수 있습니다.</li>
+                        <li>예상 소요 시간 5분</li>
+                    </ul>
+                </div>
+                <div class='ex_image'>
+                    <img src='../static/how_to_use_image/5.png' width='576' height='324'>
+                </div>
+                <div class='ex_text'>
+                    <ul>
+                        <li>색상 번호가 기입된 결과 이미지가 나타납니다.</li>
+                        <li>색상 레이블을 넣고 싶으면 하단의 Input Color Label 버튼을 눌러주세요.</li>
+                        <li>하단 다운로드 버튼을 통해 최종 이미지를 다운로드 할 수 있습니다.</li>
+                    </ul>
+                </div>
             </div>`;
 
         var eng_contain = `<div id='eng_page_1' class='section'>
diff --git a/web/templates/index.html b/src/main/webapp/templates/index.html
similarity index 100%
rename from web/templates/index.html
rename to src/main/webapp/templates/index.html
diff --git a/web/templates/menu_template.html b/src/main/webapp/templates/menu_template.html
similarity index 100%
rename from web/templates/menu_template.html
rename to src/main/webapp/templates/menu_template.html
diff --git a/src/main/webapp/templates/what_is_pipo.html b/src/main/webapp/templates/what_is_pipo.html
new file mode 100644
index 0000000..c67e156
--- /dev/null
+++ b/src/main/webapp/templates/what_is_pipo.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>EASY PIPO</title>
+
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
+	<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Fugaz+One&display=swap" rel="stylesheet">
+	<!-- import jquery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+    <!-- local js & css file import start -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/diy_styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/what_is_pipo.css') }}">
+</head>
+
+<body>
+    {% include "menu_template.html" %}
+	
+	<div class="centerbox">
+		<div class="image_box">
+			<img class="main_img" src="./static/images/whatispipo-main.png">
+		</div>
+		
+		<div class="contentbox">
+			<h2 class="content discript_title">
+			누구나 쉽게 그림을 그리도록, 피포 페인팅
+			</h2>
+			<h3 class="content discript_sub_title">
+			피포 페인팅은 그림을 손쉽게 그릴 수 있는 DIY(Do It Yourself) 그림 키트입니다.
+			</h3>
+			<ul class="content discript">
+				<li>
+				<div class="number">1</div>
+				<div class="number_discript">캔버스 위에 색칠놀이처럼 선이 그려져있습니다.</div>
+				</li>
+				<li>
+				<div class="number">2</div>
+				<div class="number_discript">그려진 선 내부에 번호가 쓰여져 있습니다.</div>
+				</li>
+				<li>
+				<div class="number">3</div>
+				<div class="number_discript">번호에 맞는 물감을 칠해주면, 하나의 그림이 완성됩니다.</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/__pycache__/__init__.cpython-38.pyc b/web/__pycache__/__init__.cpython-38.pyc
deleted file mode 100644
index b5f97c2..0000000
Binary files a/web/__pycache__/__init__.cpython-38.pyc and /dev/null differ
diff --git a/web/__pycache__/app.cpython-38.pyc b/web/__pycache__/app.cpython-38.pyc
deleted file mode 100644
index 167c1b3..0000000
Binary files a/web/__pycache__/app.cpython-38.pyc and /dev/null differ
diff --git a/web/__pycache__/server.cpython-38.pyc b/web/__pycache__/server.cpython-38.pyc
deleted file mode 100644
index db267dc..0000000
Binary files a/web/__pycache__/server.cpython-38.pyc and /dev/null differ
diff --git a/web/__pycache__/views.cpython-38.pyc b/web/__pycache__/views.cpython-38.pyc
deleted file mode 100644
index 68d48cf..0000000
Binary files a/web/__pycache__/views.cpython-38.pyc and /dev/null differ
diff --git a/web/app.py b/web/app.py
deleted file mode 100644
index 28cbd52..0000000
--- a/web/app.py
+++ /dev/null
@@ -1,18 +0,0 @@
-# flask create app
-# Author : Ji-yong219
-# Project Start:: 2021.03.10
-# Last Modified from Ji-yong 2021.06.12
-
-from flask import Flask
-from .views import views
-import os
-
-def create_app():
-    app = Flask(__name__)
-    app.register_blueprint(views)
-    app.secret_key = "wh2fdjqw3k4rvna5dml46smv"
-    
-    UPLOAD_FOLDER = os.getcwd() + r'\web\static\org_image'
-    app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
-
-    return app
\ No newline at end of file
diff --git a/web/templates/what_is_pipo.html b/web/templates/what_is_pipo.html
deleted file mode 100644
index 03e5b78..0000000
--- a/web/templates/what_is_pipo.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>EASY PIPO</title>
-
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
-	<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Fugaz+One&display=swap" rel="stylesheet">
-	<!-- import jquery -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-
-    <!-- local js & css file import start -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/diy_styles.css') }}">
-</head>
-
-<body>
-    {% include "menu_template.html" %}
-	
-	<div class="centerbox">
-    <div class="image_box">
-		<img class="main_img" src="./static/images/whatispipo-main.png">
-	</div>
-	
-	<div class="contentbox">
-		<h2 class="content discript_title">
-		누구나 쉽게 그림을 그리도록, 피포 페인팅
-		</h2>
-		<h3 class="content discript_sub_title">
-		피포 페인팅은 그림을 손쉽게 그릴 수 있는 DIY(Do It Yourself) 그림 키트입니다.
-		</h3>
-		<ul class="content discript">
-			<li>
-			<div class="number">1</div>
-			<div class="number_discript">캔버스 위에 색칠놀이처럼 선이 그려져있습니다.</div>
-			</li>
-			<li>
-			<div class="number">2</div>
-			<div class="number_discript">그려진 선 내부에 번호가 쓰여져 있습니다.</div>
-			</li>
-			<li>
-			<div class="number">3</div>
-			<div class="number_discript">번호에 맞는 물감을 칠해주면, 하나의 그림이 완성됩니다.</div>
-			</li>
-		</ul>
-	</div>
-	</div>
-</body>
-<style>
-	.centerbox{
-		display:inline-block;
-		//border: solid 1px red;
-		width: 100%;
-		padding: 20px;
-	}
-	.contentbox{
-		display:inline-block;
-		//border: solid 1px blue;
-		width: 58%;
-		vertical-align:top;
-		margin: 10px;
-	}
-	.image_box{
-		//border: solid 1px blue;
-		display:inline-block;
-		width: 40%;
-		//padding: 20px;
-		margin: 10px;
-	}
-	.main_img{
-		width: 80%;
-	}
-	
-	.content{
-		font-family: NanumBarunGothic;
-	}
-	
-	.discript_title{
-		font-size: 45px;
-		font-weight: normal;
-	}
-	
-	.discript_sub_title{
-		font-size: 23px;
-		margin: 10px auto;
-	}
-	
-	.discript{
-		font-size: 22px;
-		margin-top: 40px;
-		margin-left: 30px;
-		list-style: none;
-		line-height: 80px;
-		text-align: left;
-	}
-	
-	.number{
-		font-size: 100px;
-		font-weight: bold;
-		font-family: 'Fugaz One', cursive;
-		display: inline-block;
-		color: #F8ECE0;
-		//color: #D8D8D8;
-		//position: relative;
-		//z-index: 2;
-	}
-	
-	.number_discript{
-		
-		display: inline-block;
-		//position: absolute; 
-		//vertical-align: top;
-		//z-index: 1;
-		//left:10px;
-	}
-	
-</style>
-</html>
\ No newline at end of file
diff --git a/web/views.py b/web/views.py
deleted file mode 100644
index bdc70ab..0000000
--- a/web/views.py
+++ /dev/null
@@ -1,309 +0,0 @@
-# flask server
-# Author : minku Koo
-# Project Start:: 2021.03.10
-# Last Modified from Ji-yong 2022.03.03
-
-from flask import Flask, request, render_template, jsonify, Blueprint, redirect, url_for, session, current_app
-import cv2
-import numpy as np
-import os
-from libs.utils import *
-from libs.imageProcessing import *
-from libs.drawLine import *
-from libs.painting import *
-
-from multiprocessing import Process, Queue, Manager
-
-import logging
-
-views = Blueprint("server", __name__)
-log = logging.getLogger('werkzeug')
-log.setLevel(logging.ERROR)
-
-
-@views.route("/", methods=["GET"])
-def index():
-    if "id" not in session:
-        session["id"] = get_job_id()
-    
-    return render_template("index.html")
-    
-@views.route("/whatIsPipo", methods=["GET"])
-def whatIsPipo():
-    if "id" not in session:
-        session["id"] = get_job_id()
-    
-    return render_template("what_is_pipo.html")
-    
-@views.route("/howToUse", methods=["GET"])
-def howToUse():
-    if "id" not in session:
-        session["id"] = get_job_id()
-    
-    return render_template("how_to_use.html")
-    
-@views.route("/colorSetting", methods=["GET"])
-def ColorSetting():
-    if "id" not in session:
-        session["id"] = get_job_id()
-    
-    return render_template("color_setting.html")
-
-@views.route("/uploadIMG", methods=["POST"])
-def upload_img():
-    if 'file' not in request.files:
-        resp = jsonify({'message' : 'No file part in the request'})
-        resp.status_code = 400
-        return resp
-
-    files = request.files.getlist('file')
-
-    errors = {}
-    success = False
-    filepath = None
-
-    for file in files:
-        if file:
-            # filename = secure_filename(file.filename) # secure_filename은 한글명을 지원하지 않음
-            filename = file.filename 
-            filepath = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
-            filepath = filepath.replace("\\", "/")
-            # file_page_path = os.path.splitext(filepath)[0]
-            
-            # file save (with uploaded)
-            file.save(filepath)
-            success = True
-
-        else:
-            errors[file.filename] = 'File type is not allowed'
-    
-    if success and errors:
-        errors['message'] = 'File(s) successfully uploaded'
-        resp = jsonify(errors)
-        resp.status_code = 206
-        return resp
-
-    # main 
-    if success:
-        resp = jsonify({'message' : 'Files successfully uploaded'})
-        resp.status_code = 201
-        return resp
-
-    else:
-        resp = jsonify(errors)
-        resp.status_code = 400
-        return resp
-
-
-
-def reduce_color_process(idx, image_path, img, cluster, result, colorNames, colors):
-    idx = str(idx)
-
-    paintingTool = Painting(image_path)
-
-    print(f'{idx}번 프로세스 컬러 군집화 시작')
-    clusteredImage = paintingTool.colorClustering( img, cluster = cluster )
-    
-    print(f'{idx}번 프로세스 이미지 확장')
-    # expandedImage = imageExpand(clusteredImage, guessSize = True)
-    expandedImage = imageExpand(clusteredImage, guessSize = False, size=3)
-    
-    print(f'{idx}번 프로세스 컬러 매칭 시작')
-    paintingMap = paintingTool.expandImageColorMatch(expandedImage)
-
-    print(f'{idx}번 프로세스 컬러 추출 시작')
-    colorNames_, colors_ = getColorFromImage(paintingMap)
-
-    print(f'{idx}번 프로세스 컬러 {len(colorNames_)}개')
-    
-    # number_of_color = paintingTool.getNumberOfColor(paintingMap)
-    # print("Number of Color :", number_of_color)
-
-    colorNames[idx] = colorNames_
-    colors[idx] = colors_
-
-    result.put(paintingMap)
-
-    return
-
-
-colorNames = {}
-colors = {}
-img_lab = None
-lab = None
-img_list = []
-
-@views.route("/convert", methods=["POST"])
-def convert():
-    gif_mode = True
-    global colorNames
-    global colors
-
-    global img_lab
-    global lab
-
-    global img_list
-
-    job = request.form['job']
-    image_path = request.form['image_path']
-    reduce_data = request.form['reduce_data']
-    
-    image_path = './web'+image_path[2:]
-    image_name = os.path.basename(image_path)
-    
-    paintingTool = Painting(image_path)
-
-    if job == "start":
-        image = paintingTool.image
-
-        image_name2 = image_name.split('.')[0]+"_origin." + image_name.split('.')[1]
-        cv2.imwrite(f'./web/static/render_image/{image_name}', image)
-        cv2.imwrite(f'./web/static/render_image/{image_name2}', image)
-
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img0001.png', image)
-        return jsonify(target="#original_img", img_name=image_name2)
-
-    elif job == "reduce_color":
-        img_list = []
-
-        paintingTool.image = cv2.imread(f'./web/static/render_image/{image_name}')
-        image = paintingTool.image
-
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img0002.png', image)
-
-        # 색 단순화 + 블러 처리
-        blurImage = paintingTool.blurring(
-            div = 8, 
-            radius = 10, 
-            sigmaColor =20, 
-            medianValue=7
-        )
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img0003.png', blurImage)
-
-        clusters = [int(i) for i in reduce_data.split(',')[:3]]
-
-        manager = Manager()
-        result_list = manager.Queue()
-        colorNames_ = manager.dict()
-        colors_ = manager.dict()
-        processes = []
-
-        for idx, cluster in enumerate(clusters):
-            process = Process(target=reduce_color_process, args=(idx+1, image_path, blurImage, cluster, result_list, colorNames_, colors_))
-            processes.append(process)
-            process.start()
-
-        for process in processes:
-            process.join()
-
-        painting_map_1 = result_list.get()
-        painting_map_2 = result_list.get()
-        painting_map_3 = result_list.get()
-
-        for img in [painting_map_1, painting_map_2, painting_map_3]:
-            img_list.append(img)
-
-        colorNames = dict(colorNames_)
-        colors = dict(colors_)
-
-
-        image_name2 = image_name.split('.')[0]+"_reduce." + image_name.split('.')[1]
-        image_name2_1 = image_name.split('.')[0]+"_reduce_1." + image_name.split('.')[1]
-        image_name2_2 = image_name.split('.')[0]+"_reduce_2." + image_name.split('.')[1]
-        image_name2_3 = image_name.split('.')[0]+"_reduce_3." + image_name.split('.')[1]
-        
-        cv2.imwrite(f'./web/static/render_image/{image_name2_1}', painting_map_1)
-        cv2.imwrite(f'./web/static/render_image/{image_name2_2}', painting_map_2)
-        cv2.imwrite(f'./web/static/render_image/{image_name2_3}', painting_map_3)
-
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img0004.png', painting_map_2)
-
-        print(f'./web/static/render_image/{image_name2_2}')
-
-        return jsonify(target="#reduce_img", img_name=image_name2, clusters=clusters)
-
-    elif job == "draw_line":
-        session['reduce_idx'] = reduce_data
-
-        image_name2 = image_name.split('.')[0]+f"_reduce_{reduce_data}." + image_name.split('.')[1]
-        print(f'./web/static/render_image/{image_name2}')
-
-        paintingMap = img_list[int(reduce_data)-1]
-
-        # number_of_color = paintingTool.getNumberOfColor(paintingMap)
-        # print("Number of Color :", number_of_color)
-
-        # 선 그리기
-
-        drawLineTool = DrawLine(paintingMap)
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img0005.png', paintingMap)
-        lined_image = drawLineTool.getDrawLine()
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img0006.png', lined_image)
-        lined_image = drawLineTool.drawOutline(lined_image)
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img0007.png', lined_image)
-
-        # 레이블 추출
-        img_lab, lab = getImgLabelFromImage(colors[reduce_data], paintingMap)
-
-
-        image_name2 = image_name.split('.')[0]+"_linedraw." + image_name.split('.')[1]
-        cv2.imwrite(f'./web/static/render_image/{image_name2}', lined_image)
-
-
-        # lined_image = cv2.convertScaleAbs(lined_image)
-        return jsonify(target="#linedraw_img", img_name=image_name2)
-
-    elif job == "numbering":
-        reduce_idx = session['reduce_idx']
-
-        # image_name2 = image_name.split('.')[0]+f"_reduce_{reduce_data}." + image_name.split('.')[1]
-        # print(f'./web/static/render_image/{image_name2}')
-
-        paintingMap = img_list[int(reduce_idx)-1]
-
-        image_name2 = image_name.split('.')[0]+"_linedraw." + image_name.split('.')[1]
-        paintingTool.image = cv2.imread(f'./web/static/render_image/{image_name2}')
-        lined_image = paintingTool.image
-
-        # contour, hierarchy 추출
-        print(f'컨투어 추출 시작')
-        contours, hierarchy, thresh = getContoursFromImage(lined_image.copy())
-
-
-        # 결과 이미지 백지화
-        result_img = makeWhiteFromImage(paintingMap)
-
-        result_img = setBackgroundAlpha(paintingMap, result_img)
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img0008.png', result_img)
-
-        # 결과이미지 렌더링
-        # image를 넣으면 원본이미지에 그려주고, result_img에 넣으면 백지에 그려줌
-        print(f'넘버링 시작')
-        result_img = setColorNumberFromContours(result_img, thresh, contours, hierarchy, img_lab, lab, colorNames[reduce_idx], gif_mode)
-
-        print(f'컬러 레이블링 시작')
-        result_img2 = setColorLabel(result_img.copy(), colorNames[reduce_idx], colors[reduce_idx])
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img9999.png', result_img)
-
-        print(f'작업 완료')
-
-        image_name2 = image_name.split('.')[0]+"_numbering." + image_name.split('.')[1]
-        image_name2_2 = image_name.split('.')[0]+"_numbering_label." + image_name.split('.')[1]
-
-        cv2.imwrite(f'./web/static/render_image/{image_name2}', result_img)
-        cv2.imwrite(f'./web/static/render_image/{image_name2_2}', result_img2)
-
-        if gif_mode:
-            cv2.imwrite(f'D:/ppt_img/img10000.png', result_img2)
-        return jsonify(target="#numbering_img", img_name=image_name2)
-
-    return jsonify(img_name=image_name)
\ No newline at end of file