diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0d03fea7..a18a4b2c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -541,95 +541,6 @@
 				"tslint": "^5.20.1",
 				"webpack": "^4.0.0",
 				"yorkie": "^2.0.0"
-			},
-			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true,
-					"optional": true
-				},
-				"fork-ts-checker-webpack-plugin-v5": {
-					"version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
-					"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
-					"integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"@babel/code-frame": "^7.8.3",
-						"@types/json-schema": "^7.0.5",
-						"chalk": "^4.1.0",
-						"cosmiconfig": "^6.0.0",
-						"deepmerge": "^4.2.2",
-						"fs-extra": "^9.0.0",
-						"memfs": "^3.1.2",
-						"minimatch": "^3.0.4",
-						"schema-utils": "2.7.0",
-						"semver": "^7.3.2",
-						"tapable": "^1.0.0"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true,
-					"optional": true
-				},
-				"schema-utils": {
-					"version": "2.7.0",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-					"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"@types/json-schema": "^7.0.4",
-						"ajv": "^6.12.2",
-						"ajv-keywords": "^3.4.1"
-					}
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
 			}
 		},
 		"@vue/cli-plugin-vuex": {
@@ -5497,6 +5408,95 @@
 				}
 			}
 		},
+		"fork-ts-checker-webpack-plugin-v5": {
+			"version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
+			"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
+			"integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
+			"dev": true,
+			"optional": true,
+			"requires": {
+				"@babel/code-frame": "^7.8.3",
+				"@types/json-schema": "^7.0.5",
+				"chalk": "^4.1.0",
+				"cosmiconfig": "^6.0.0",
+				"deepmerge": "^4.2.2",
+				"fs-extra": "^9.0.0",
+				"memfs": "^3.1.2",
+				"minimatch": "^3.0.4",
+				"schema-utils": "2.7.0",
+				"semver": "^7.3.2",
+				"tapable": "^1.0.0"
+			},
+			"dependencies": {
+				"ansi-styles": {
+					"version": "4.3.0",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"color-convert": "^2.0.1"
+					}
+				},
+				"chalk": {
+					"version": "4.1.2",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"ansi-styles": "^4.1.0",
+						"supports-color": "^7.1.0"
+					}
+				},
+				"color-convert": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"color-name": "~1.1.4"
+					}
+				},
+				"color-name": {
+					"version": "1.1.4",
+					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+					"dev": true,
+					"optional": true
+				},
+				"has-flag": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+					"dev": true,
+					"optional": true
+				},
+				"schema-utils": {
+					"version": "2.7.0",
+					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+					"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"@types/json-schema": "^7.0.4",
+						"ajv": "^6.12.2",
+						"ajv-keywords": "^3.4.1"
+					}
+				},
+				"supports-color": {
+					"version": "7.2.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+					"dev": true,
+					"optional": true,
+					"requires": {
+						"has-flag": "^4.0.0"
+					}
+				}
+			}
+		},
 		"form-data": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
diff --git a/frontend/src/components/widgets/rulers/CanvasRuler.vue b/frontend/src/components/widgets/rulers/CanvasRuler.vue
index da05dd1d..326be554 100644
--- a/frontend/src/components/widgets/rulers/CanvasRuler.vue
+++ b/frontend/src/components/widgets/rulers/CanvasRuler.vue
@@ -2,6 +2,7 @@
 	<div class="canvas-ruler" :class="direction.toLowerCase()" ref="rulerRef">
 		<svg :style="svgBounds">
 			<path :d="svgPath" />
+			<text v-for="(svgText, index) in svgTexts" :key="index" :transform="svgText.transform">{{ svgText.text }}</text>
 		</svg>
 	</div>
 </template>
@@ -13,14 +14,18 @@
 	overflow: hidden;
 	position: relative;
 
-	&.vertical {
-		width: 16px;
-	}
-
 	&.horizontal {
 		height: 16px;
 	}
 
+	&.vertical {
+		width: 16px;
+
+		svg text {
+			text-anchor: end;
+		}
+	}
+
 	svg {
 		position: absolute;
 
@@ -28,6 +33,11 @@
 			stroke-width: 1px;
 			stroke: var(--color-7-middlegray);
 		}
+
+		text {
+			font-size: 12px;
+			fill: var(--color-8-uppergray);
+		}
 	}
 }
 </style>
@@ -36,6 +46,9 @@
 import { defineComponent, PropType } from "vue";
 
 const RULER_THICKNESS = 16;
+const MAJOR_MARK_THICKNESS = 16;
+const MEDIUM_MARK_THICKNESS = 6;
+const MINOR_MARK_THICKNESS = 3;
 
 export enum RulerDirection {
 	"Horizontal" = "Horizontal",
@@ -55,18 +68,20 @@ export default defineComponent({
 			const isVertical = this.direction === RulerDirection.Vertical;
 			const lineDirection = isVertical ? "H" : "V";
 
-			let offsetStart = this.origin % this.majorMarkSpacing;
-			if (offsetStart < this.majorMarkSpacing) offsetStart -= this.majorMarkSpacing;
+			const offsetStart = this.origin % this.majorMarkSpacing;
+			const phasingShift = offsetStart < this.majorMarkSpacing ? this.majorMarkSpacing : 0;
+			const shiftedOffsetStart = offsetStart - phasingShift;
 
 			const divisions = this.majorMarkSpacing / this.mediumDivisions / this.minorDivisions;
 			const majorMarksFrequency = this.mediumDivisions * this.minorDivisions;
 
 			let dPathAttribute = "";
 			let i = 0;
-			for (let location = offsetStart; location < this.rulerLength; location += divisions) {
-				let length = RULER_THICKNESS / 4;
-				if (i % majorMarksFrequency === 0) length = RULER_THICKNESS;
-				else if (i % this.minorDivisions === 0) length = RULER_THICKNESS / 2;
+			for (let location = shiftedOffsetStart; location < this.rulerLength; location += divisions) {
+				let length;
+				if (i % majorMarksFrequency === 0) length = MAJOR_MARK_THICKNESS;
+				else if (i % this.minorDivisions === 0) length = MEDIUM_MARK_THICKNESS;
+				else length = MINOR_MARK_THICKNESS;
 				i += 1;
 
 				const destination = Math.round(location) + 0.5;
@@ -76,6 +91,27 @@ export default defineComponent({
 
 			return dPathAttribute;
 		},
+		svgTexts(): {} {
+			const isVertical = this.direction === RulerDirection.Vertical;
+
+			const offsetStart = this.origin % this.majorMarkSpacing;
+			const phasingShift = offsetStart < this.majorMarkSpacing ? this.majorMarkSpacing : 0;
+			const shiftedOffsetStart = offsetStart - phasingShift;
+
+			const svgTextCoordinates = [];
+			for (let location = shiftedOffsetStart; location < this.rulerLength; location += this.majorMarkSpacing) {
+				const destination = Math.round(location);
+				const x = isVertical ? 9 : destination + 2;
+				const y = isVertical ? destination + 1 : 9;
+
+				let transform = `translate(${x} ${y})`;
+				if (isVertical) transform += " rotate(270)";
+
+				svgTextCoordinates.push({ transform, text: location });
+			}
+
+			return svgTextCoordinates;
+		},
 	},
 	methods: {
 		handleResize() {