diff --git a/package-lock.json b/package-lock.json
index b4792d9ff8094aafef385cd458acbe7085b3c0c7..f10438786d1a9ead864b79c2ef08798b86bf308f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -469,6 +469,14 @@
       "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
+      },
+      "dependencies": {
+        "sprintf-js": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+          "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+          "dev": true
+        }
       }
     },
     "aria-query": {
@@ -11670,9 +11678,9 @@
       }
     },
     "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
+      "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
       "dev": true
     },
     "squeak": {
diff --git a/package.json b/package.json
index eda8de9afc2448c17a6a6cb43e36b7e0482946e6..6ac78577b814887e9ca8f6de78a8eb73efb700ef 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
   },
   "keywords": [
     "algorithm",
-    "visualizer"
+    "data-structure",
+    "visualization",
+    "animation"
   ],
   "author": {
     "name": "Jinseo Jason Park",
@@ -94,6 +96,7 @@
     "remove-markdown": "^0.3.0",
     "sass-loader": "^7.0.3",
     "screenfull": "^3.3.2",
+    "sprintf-js": "^1.1.2",
     "style-loader": "^0.21.0",
     "uglifyjs-webpack-plugin": "^1.2.4",
     "webpack": "^4.5.0",
diff --git a/src/backend/tracers/js/worker.js b/src/backend/tracers/js/worker.js
index 06a841cc1431885620f7a2f28fe35ae3e555dae3..cb334a41599d79a5934dc3b495d7248ded74c0a0 100644
--- a/src/backend/tracers/js/worker.js
+++ b/src/backend/tracers/js/worker.js
@@ -1,5 +1,5 @@
 const process = { env: { ALGORITHM_VISUALIZER: '1' } };
-importScripts('https://unpkg.com/algorithm-visualizer/dist/algorithm-visualizer.js');
+importScripts('https://unpkg.com/algorithm-visualizer@latest/dist/algorithm-visualizer.js');
 importScripts('https://unpkg.com/babel-standalone@6/babel.min.js');
 
 const sandbox = code => {
diff --git a/src/frontend/core/datas/GraphData.js b/src/frontend/core/datas/GraphData.js
index add63032448f6a527891e8c08ed49ade5b198b64..285d6ee4c18c230af5b76379574a04faa4ad8b3d 100644
--- a/src/frontend/core/datas/GraphData.js
+++ b/src/frontend/core/datas/GraphData.js
@@ -231,7 +231,7 @@ class GraphData extends Data {
     if (weight !== undefined) node.weight = weight;
     node.visitedCount += visit ? 1 : -1;
     if (this.logData) {
-      this.logData.print(visit ? (source || '') + ' -> ' + target : (source || '') + ' <- ' + target);
+      this.logData.println(visit ? (source || '') + ' -> ' + target : (source || '') + ' <- ' + target);
     }
   }
 
@@ -249,7 +249,7 @@ class GraphData extends Data {
     const node = this.findNode(target);
     node.selectedCount += select ? 1 : -1;
     if (this.logData) {
-      this.logData.print(select ? (source || '') + ' => ' + target : (source || '') + ' <= ' + target);
+      this.logData.println(select ? (source || '') + ' => ' + target : (source || '') + ' <= ' + target);
     }
   }
 
diff --git a/src/frontend/core/datas/LogData.js b/src/frontend/core/datas/LogData.js
index 3549ca606a22057ec86cbc87fd3c3fad9815bdc7..b0f2dd3285c636f3696ff5a6885e9cdd6aa44d2c 100644
--- a/src/frontend/core/datas/LogData.js
+++ b/src/frontend/core/datas/LogData.js
@@ -1,3 +1,4 @@
+import { sprintf } from 'sprintf-js';
 import { Data } from '/core/datas';
 import { LogRenderer } from '/core/renderers';
 
@@ -6,13 +7,21 @@ class LogData extends Data {
     return LogRenderer;
   }
 
-  set(messages = []) {
-    this.messages = messages;
+  set(log = '') {
+    this.log = log;
     super.set();
   }
 
   print(message) {
-    this.messages.push(message);
+    this.log += message;
+  }
+
+  println(message) {
+    this.print(message + '\n');
+  }
+
+  printf(format, ...args) {
+    this.print(sprintf(format, ...args));
   }
 }
 
diff --git a/src/frontend/core/renderers/LogRenderer/index.jsx b/src/frontend/core/renderers/LogRenderer/index.jsx
index 22f880981c8afb40708de82377390b530329c192..d25bc93e9ce1141a2aca6e890e42edc35737df30 100644
--- a/src/frontend/core/renderers/LogRenderer/index.jsx
+++ b/src/frontend/core/renderers/LogRenderer/index.jsx
@@ -11,21 +11,15 @@ class LogRenderer extends Renderer {
 
   componentDidUpdate(prevProps, prevState, snapshot) {
     super.componentDidUpdate(prevProps, prevState, snapshot);
-    const { lastChild } = this.element.current;
-    if (lastChild) lastChild.scrollIntoView();
+    const div = this.element.current;
+    div.scrollTop = div.scrollHeight;
   }
 
   renderData() {
-    const { messages } = this.props.data;
+    const { log } = this.props.data;
 
     return (
-      <div className={styles.log} ref={this.element}>
-        {
-          messages.map((message, i) => (
-            <span className={styles.message} key={i} dangerouslySetInnerHTML={{ __html: message }} />
-          ))
-        }
-      </div>
+      <div className={styles.log} ref={this.element} dangerouslySetInnerHTML={{ __html: log }} />
     );
   }
 }
diff --git a/src/frontend/core/renderers/LogRenderer/stylesheet.scss b/src/frontend/core/renderers/LogRenderer/stylesheet.scss
index c1a2be033ff13142303850dd93948914fe43a80b..6a5097d7a0ff7f34e57fe65fbeddc505cdc3e989 100644
--- a/src/frontend/core/renderers/LogRenderer/stylesheet.scss
+++ b/src/frontend/core/renderers/LogRenderer/stylesheet.scss
@@ -8,8 +8,6 @@
   flex-direction: column;
   overflow-y: auto;
   font-family: $font-family-monospace;
-
-  .message {
-    margin: 2px 0;
-  }
-}
\ No newline at end of file
+  white-space: pre-wrap;
+  line-height: 1.6;
+}