diff --git a/tools/printDocument.ts b/tools/printDocument.ts
index 5c031bb..a9f8124 100644
--- a/tools/printDocument.ts
+++ b/tools/printDocument.ts
@@ -3,9 +3,12 @@ import { Issue } from "./githubType.ts";
 import { copy } from "https://deno.land/std@0.136.0/fs/mod.ts";
 import { readAll } from "https://deno.land/std@0.135.0/streams/mod.ts"
 import { parse as argParse } from "https://deno.land/std@0.135.0/flags/mod.ts";
-import { normalize, join as pathJoin, fromFileUrl, parse as parsePath
-, relative } from "https://deno.land/std@0.135.0/path/mod.ts";
+import {
+    normalize, join as pathJoin, fromFileUrl, parse as parsePath
+    , relative
+} from "https://deno.land/std@0.135.0/path/mod.ts";
 import * as Eta from "https://deno.land/x/eta@v1.12.3/mod.ts";
+import { createReactive } from "./reactivity.ts";
 
 async function readContent(path?: string): Promise<string> {
     let content = "[]";
@@ -69,16 +72,17 @@ async function readAndPrint(args: {
 
 async function main() {
     const parsedArg = argParse(Deno.args);
-    const { issue_path, outDir, w, watch } = parsedArg;
+    const { issue_path, outDirArg, w, watch } = parsedArg;
     const watchMode = w || watch;
     if (typeof issue_path !== "undefined" && typeof issue_path !== "string") {
         console.log("Please provide a path to the json file.");
         Deno.exit(1);
     }
-    if (typeof outDir !== "undefined" && typeof outDir !== "string") {
+    if (typeof outDirArg !== "undefined" && typeof outDirArg !== "string") {
         console.log("Please provide a path to the output file.");
         Deno.exit(1);
     }
+    const outDir = (outDirArg ?? "build");
     if (typeof watchMode !== "undefined" && typeof watchMode !== "boolean") {
         console.log("Please provide a boolean value for w.");
         Deno.exit(1);
@@ -95,14 +99,29 @@ async function main() {
         views: viewPath,
         "view cache": false,
     });
-
-    const c = await readContent(issue_path);
-    const issues = JSON.parse(c) as Issue[];
-    issues.sort((a, b) => a.number - b.number);
+    const issuesR = await createReactive(async () => {
+        const c = await readContent(issue_path);
+        const issues = JSON.parse(c) as Issue[];
+        issues.sort((a, b) => a.number - b.number);
+        return issues;
+    });
 
     const targets = ["SUMMARY.md", "overall.md", "specific.md", "intro.md", "support.md"];
 
-    await readAndPrint({ issue_path, outDir, targets });
+    const targetsR = await Promise.all(targets.map(async (t) => {
+        return await createReactive(() => {
+            return readAndPrint({ issue_path, outDir, targets:[t] });
+        });
+    }
+
+    ));
+    issuesR.wireTo(...targetsR);
+    const copyOp = await createReactive(async () => {
+        const files = [...Deno.readDirSync(viewPath)].map(x => x.name).filter(x => !x.endsWith(".md"));
+        const op = files.map(x => copy(pathJoin(viewPath, x), pathJoin(outDir, x), { overwrite: true }));
+        await Promise.all(op);
+    });
+
     if (watchMode) {
         const watcher = Deno.watchFs([viewPath, issue_path as string]);
         for await (const event of watcher) {
@@ -111,28 +130,20 @@ async function main() {
                     new TextEncoder().encode("\x1b[2J\x1b[0f"),
                 );
                 console.log(`reloading ${event.paths.join(", ")}`);
-                let reloadAll = false;
                 for (const path of event.paths) {
                     const p = parsePath(path);
-                    if (targets.includes(p.base)) {
-                        readAndPrint({
-                            issue_path: issue_path as string,
-                            outDir: outDir as string,
-                            targets: [p.base]
-                        });
+                    if (p.dir === viewPath) {
+                        if(p.ext === ".md") {
+                            targetsR[targets.indexOf(p.base)].update();
+                        }
+                        else{
+                            copyOp.update();
+                        }
                     }
-                    else{
-                        reloadAll = true;
-                        break;
+                    else if (p.base === "issues.json") {
+                        await issuesR.update();
                     }
                 }
-                if (reloadAll) {
-                    readAndPrint({
-                        issue_path: issue_path as string,
-                        outDir: outDir as string,
-                        targets: targets
-                    });
-                }
             }
         }
     }
diff --git a/tools/reactivity.ts b/tools/reactivity.ts
new file mode 100644
index 0000000..701fe69
--- /dev/null
+++ b/tools/reactivity.ts
@@ -0,0 +1,28 @@
+interface Reactive<T>{
+    readonly value: T;
+    update: () => Promise<void>;
+    wireTo(...r: Reactive<unknown>[]): void;
+    unwireTo(r: Reactive<unknown>): void;
+}
+
+export async function createReactive<T>(fn: () => Promise<T>): Promise<Reactive<T>> {
+    let v = await fn();
+    let listeners: Reactive<unknown>[] = [];
+
+    return {
+        get value() : T {
+            return v;
+        },
+        async update(){
+            const ret = await fn();
+            v = ret;
+            await Promise.all(listeners.map(o => o.update()));
+        },
+        wireTo(...r: Reactive<unknown>[]) {
+            listeners.push(...r);
+        },
+        unwireTo(r: Reactive<unknown>) {
+            listeners = listeners.filter(o => o !== r);
+        }
+    };
+}
\ No newline at end of file
diff --git a/tools/template/interface.png b/tools/template/interface.png
new file mode 100644
index 0000000..fb31e77
Binary files /dev/null and b/tools/template/interface.png differ
diff --git a/tools/template/specific.md b/tools/template/specific.md
index ae7b7d5..5d03147 100644
--- a/tools/template/specific.md
+++ b/tools/template/specific.md
@@ -125,7 +125,7 @@ classDiagram
 
 ### 3.7.2. 사용자 인터페이스 상세
 
-
+![interface](./interface.png)
 
 ### 3.7.4. 특징(Feature)