diff --git a/html/assets/images/icons/icons.svg b/html/assets/images/icons/icons.svg
new file mode 100644
index 0000000..627cc33
--- /dev/null
+++ b/html/assets/images/icons/icons.svg
@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <defs>
+    <!-- Control Valve Icon - 512x512 viewBox -->
+    <symbol id="icon-cv" viewBox="0 0 512 512">
+      <g fill="currentColor">
+        <!-- 왼쪽 액추에이터 (삼각형) -->
+        <path d="M 120 310 L 120 490 L 246 400 Z"/>
+        
+        <!-- 오른쪽 액추에이터 (삼각형) -->
+        <path d="M 392 310 L 392 490 L 266 400 Z"/>
+        
+        <!-- 중앙 스템 (두꺼운 선) -->
+        <rect x="246" y="230" width="20" height="170" rx="10"/>
+        
+        <!-- 밸브 본체 (아치형) -->
+        <path d="M 100 230 Q 256 80, 412 230" 
+              stroke="currentColor" 
+              stroke-width="30" 
+              fill="none" 
+              stroke-linecap="round"/>
+        
+        <!-- 밸브 본체 하단 -->
+        <path d="M 100 230 L 100 250 L 412 250 L 412 230" 
+              fill="currentColor"/>
+      </g>
+    </symbol>
+    
+    <!-- XV Valve Icon - 512x512 viewBox -->
+    <symbol id="icon-xv" viewBox="0 0 512 512">
+      <g fill="currentColor">
+        <!-- 왼쪽 액추에이터 -->
+        <path d="M 120 290 L 120 470 L 246 380 Z"/>
+        
+        <!-- 오른쪽 액추에이터 -->
+        <path d="M 392 290 L 392 470 L 266 380 Z"/>
+        
+        <!-- 중앙 스템 -->
+        <rect x="246" y="210" width="20" height="170" rx="10"/>
+        
+        <!-- 상단 사각형 케이스 (외곽) -->
+        <rect x="156" y="50" width="200" height="160" 
+              stroke="currentColor" 
+              stroke-width="20" 
+              fill="none" 
+              rx="10"/>
+        
+        <!-- 내부 사각형 -->
+        <rect x="156" y="50" width="200" height="50" 
+              stroke="currentColor" 
+              stroke-width="15" 
+              fill="none" 
+              rx="5"/>
+      </g>
+    </symbol>
+  </defs>
+</svg>
diff --git a/html/assets/images/icons/orginalSVG/CV.svg b/html/assets/images/icons/orginalSVG/CV.svg
new file mode 100644
index 0000000..3f0e153
--- /dev/null
+++ b/html/assets/images/icons/orginalSVG/CV.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666662 8.4666662"
+   version="1.1"
+   id="CV"
+   sodipodi:docname="CV.svg"
+   inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="true"
+     showguides="true"
+     inkscape:lockguides="true"
+     inkscape:zoom="16"
+     inkscape:cx="21.4375"
+     inkscape:cy="18.53125"
+     inkscape:window-width="2560"
+     inkscape:window-height="1406"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="icon-cv">
+    <inkscape:grid
+       id="grid2"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458332"
+       spacingy="0.26458332"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+    <sodipodi:guide
+       position="4.2627494,9.4789286"
+       orientation="1,0"
+       id="guide2"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="0.51737855,-0.29502712"
+       orientation="1,0"
+       id="guide3"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="-0.65234687,-0.63244791"
+       orientation="0.70710678,-0.70710678"
+       id="guide4"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="7.9518834,9.523918"
+       orientation="1,0"
+       id="guide5"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="9.0991141,4.2601536"
+       orientation="0,-1"
+       id="guide6"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="8.784188,7.9267929"
+       orientation="0,-1"
+       id="guide7"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="-1.6983513,0.78471943"
+       orientation="0,-1"
+       id="guide8"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="-1.8670617,0.51478279"
+       orientation="0,-1"
+       id="guide9"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="4.4652019,4.0464538"
+       orientation="-0.70710678,-0.70710678"
+       id="guide10"
+       inkscape:locked="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <linearGradient
+       id="swatch6"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop6" />
+    </linearGradient>
+    <linearGradient
+       id="swatch5"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop5" />
+    </linearGradient>
+    <linearGradient
+       id="swatch4"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop4" />
+    </linearGradient>
+    <linearGradient
+       id="swatch3"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3" />
+    </linearGradient>
+    <linearGradient
+       id="swatch2"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       id="swatch1"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+    </linearGradient>
+    <linearGradient
+       id="swatch18"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop18" />
+    </linearGradient>
+    <linearGradient
+       id="swatch16"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop16" />
+    </linearGradient>
+    <linearGradient
+       id="swatch15"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop15" />
+    </linearGradient>
+    <linearGradient
+       id="swatch14"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#2864eb;stop-opacity:1;"
+         offset="0"
+         id="stop14" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch14"
+       id="linearGradient18"
+       x1="1.7277834"
+       y1="5.9455218"
+       x2="8.4411774"
+       y2="5.9455218"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.66393903,0,0,0.85634804,2.3787064,1.2196347)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch14"
+       id="linearGradient1"
+       x1="4.0094132"
+       y1="5.0275702"
+       x2="4.5385804"
+       y2="5.0275702"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-0.02338608)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch14"
+       id="linearGradient5"
+       x1="0.96664286"
+       y1="-2.2531047"
+       x2="7.6929812"
+       y2="-2.2531047"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.95980837,0,0,-0.92117588,0.10386417,0.02559155)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch14"
+       id="linearGradient6"
+       x1="0.84656554"
+       y1="6.2969909"
+       x2="4.0181665"
+       y2="6.2969909"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-0.02338609,-0.02338608)" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="icon-cv">
+    <path
+       style="fill:none;fill-opacity:1;stroke:url(#linearGradient18);stroke-width:0.529167;stroke-dasharray:none"
+       d="M 7.6511642,4.8306254 V 7.7779116 L 4.4998531,6.2561101 Z"
+       id="path14-1" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
+       d="M 0.83074929,4.7858732 V 7.7610021 L 3.977069,6.2248243 Z"
+       id="path14-1-7" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:url(#linearGradient1);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
+       d="M 4.2506107,3.8353499 V 6.2197903"
+       id="path19" />
+    <path
+       id="path4"
+       style="fill:none;stroke:url(#linearGradient5);stroke-width:0.497572"
+       d="m 7.2337027,3.69276 a 2.9740486,3.1851437 0 0 0 -1.4870244,-2.7584154 2.9740486,3.1851437 0 0 0 -2.9740486,7e-8 A 2.9740486,3.1851437 0 0 0 1.2856054,3.69276 Z" />
+  </g>
+</svg>
diff --git a/html/assets/images/icons/orginalSVG/XV.svg b/html/assets/images/icons/orginalSVG/XV.svg
new file mode 100644
index 0000000..83bc5ed
--- /dev/null
+++ b/html/assets/images/icons/orginalSVG/XV.svg
@@ -0,0 +1,227 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666662 8.4666662"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="XV.svg"
+   inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="true"
+     showguides="true"
+     inkscape:lockguides="true"
+     inkscape:zoom="18.234375"
+     inkscape:cx="9.5972581"
+     inkscape:cy="15.218509"
+     inkscape:window-width="1138"
+     inkscape:window-height="1240"
+     inkscape:window-x="646"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="icon-XV">
+    <inkscape:grid
+       id="grid2"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458332"
+       spacingy="0.26458332"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+    <sodipodi:guide
+       position="4.2627494,9.4789286"
+       orientation="1,0"
+       id="guide2"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="0.51737855,-0.29502712"
+       orientation="1,0"
+       id="guide3"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="-0.65234687,-0.63244791"
+       orientation="0.70710678,-0.70710678"
+       id="guide4"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="7.9518834,9.523918"
+       orientation="1,0"
+       id="guide5"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="9.0991141,4.2601536"
+       orientation="0,-1"
+       id="guide6"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="8.784188,7.9267929"
+       orientation="0,-1"
+       id="guide7"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="-1.6983513,0.78471943"
+       orientation="0,-1"
+       id="guide8"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="-1.8670617,0.51478279"
+       orientation="0,-1"
+       id="guide9"
+       inkscape:locked="true" />
+    <sodipodi:guide
+       position="4.4652019,4.0464538"
+       orientation="-0.70710678,-0.70710678"
+       id="guide10"
+       inkscape:locked="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <linearGradient
+       id="swatch4"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop4" />
+    </linearGradient>
+    <linearGradient
+       id="swatch3"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3" />
+    </linearGradient>
+    <linearGradient
+       id="swatch2"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       id="swatch1"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+    </linearGradient>
+    <linearGradient
+       id="swatch18"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop18" />
+    </linearGradient>
+    <linearGradient
+       id="swatch16"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop16" />
+    </linearGradient>
+    <linearGradient
+       id="swatch15"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop15" />
+    </linearGradient>
+    <linearGradient
+       id="swatch14"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#2864eb;stop-opacity:1;"
+         offset="0"
+         id="stop14" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch14"
+       id="linearGradient16"
+       x1="1.4266078"
+       y1="2.1372342"
+       x2="7.144485"
+       y2="2.1372342"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.87269478,0,0,1.0101615,0.51750303,0.21044164)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch14"
+       id="linearGradient1"
+       x1="4.0094132"
+       y1="5.0275702"
+       x2="4.5385804"
+       y2="5.0275702"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#swatch14"
+       id="linearGradient2"
+       x1="1.973379"
+       y1="1.8645531"
+       x2="6.5005426"
+       y2="1.8645531"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(0,0.0725507)" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="icon-XV">
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke-width:0.265;stroke-dasharray:none"
+       id="path10"
+       cx="4.2402544"
+       cy="4.1840181"
+       rx="2.901819"
+       ry="2.9917979" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:url(#linearGradient16);stroke-width:0.496843;stroke-dasharray:none;stroke-opacity:1"
+       d="M 1.8622283,0.77852414 6.6375951,0.75580052 6.6521989,3.9370624 1.8622288,3.9825089 Z"
+       id="path12" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#2864eb;stroke-width:0.52916667;stroke-dasharray:none;stroke-opacity:1"
+       d="M 7.5471292,4.78219 V 7.7294762 L 4.3958181,6.2076747 Z"
+       id="path14-1" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#2864eb;stroke-width:0.52916667;stroke-dasharray:none;stroke-opacity:1"
+       d="M 0.89517625,4.7887389 V 7.7638678 L 4.041496,6.22769 Z"
+       id="path14-1-7" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:url(#linearGradient1);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
+       d="M 4.2739968,3.8353499 V 6.2197903"
+       id="path19" />
+    <path
+       style="fill:none;stroke:url(#linearGradient2);stroke-width:0.264583"
+       d="m 1.973379,1.9516138 c 4.5271635,-0.02902 4.5271635,-0.02902 4.5271635,-0.02902"
+       id="path1" />
+  </g>
+</svg>
diff --git a/html/assets/images/icons/path.png b/html/assets/images/icons/path.png
new file mode 100644
index 0000000..f14cebd
Binary files /dev/null and b/html/assets/images/icons/path.png differ
diff --git a/html/assets/images/icons/path좌표문자.md b/html/assets/images/icons/path좌표문자.md
new file mode 100644
index 0000000..8b08c15
--- /dev/null
+++ b/html/assets/images/icons/path좌표문자.md
@@ -0,0 +1,26 @@
+이제 SVG  명령어들을 한눈에 볼 수 있는 요약표를 만들어드릴게요. 과 처럼 대문자/소문자의 차이는 절대 좌표 vs 상대 좌표라는 점을 기억하시면 됩니다.
+
+🔹 주요 Path 명령어 요약표
+
+![alt text](path.png)
+
+🔹 주요 Path 명령어 요약표
+
+| 명령어 | 의미 | 대문자(절대) | 소문자(상대) | 예시 |
+|--------|------|--------------|--------------|------|
+| **M / m** | Move To (좌표 이동) | 지정한 좌표로 이동 | 현재 위치 기준으로 이동 | `M 10 20` / `m 10 20` |
+| **L / l** | Line To (직선 그리기) | 지정 좌표까지 직선 | 현재 위치에서 상대 이동 직선 | `L 30 40` / `l 30 40` |
+| **H / h** | Horizontal Line | 지정 x좌표까지 수평선 | 현재 위치에서 x축 상대 이동 | `H 50` / `h 50` |
+| **V / v** | Vertical Line | 지정 y좌표까지 수직선 | 현재 위치에서 y축 상대 이동 | `V 60` / `v 60` |
+| **C / c** | Cubic Bézier Curve | 절대 좌표로 곡선 제어점 지정 | 상대 좌표로 곡선 제어점 지정 | `C x1 y1, x2 y2, x y` |
+| **Q / q** | Quadratic Bézier Curve | 절대 좌표로 곡선 제어점 지정 | 상대 좌표로 곡선 제어점 지정 | `Q x1 y1, x y` |
+| **A / a** | Arc (호 그리기) | 절대 좌표로 원호 | 상대 좌표로 원호 | `A rx ry x-axis-rotation large-arc-flag sweep-flag x y` |
+| **Z / z** | Close Path | 현재 경로를 시작점과 연결해 닫기 | 동일 | `Z` |
+
+
+
+
+🔹 핵심 정리
+• 	대문자 → 절대 좌표 (캔버스 기준)
+• 	소문자 → 상대 좌표 (현재 위치 기준)
+• 	/은 시작점 이동, /은 직선, /는 곡선, 는 닫기