diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index a9a5bd8b..10c01d36 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -24,5 +24,16 @@ module.exports = {
     "vue/no-multiple-template-root": "off",
     "vue/no-v-for-template-key": "off",
     "vue/multi-word-component-names": "off",//TODO: 삭제
-  }
+  },
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@', './hwe/ts'],
+          ['@util', './hwe/ts/util'],
+          ['@scss', './hwe/scss'],
+        ]
+      }
+    }
+  },
 }
\ No newline at end of file
diff --git a/css/login.css b/hwe/scss/gateway/login.scss
similarity index 100%
rename from css/login.css
rename to hwe/scss/gateway/login.scss
diff --git a/hwe/ts/Board.vue b/hwe/ts/Board.vue
index e3aa5e12..aea26b97 100644
--- a/hwe/ts/Board.vue
+++ b/hwe/ts/Board.vue
@@ -60,18 +60,18 @@
 </template>
 
 <script lang="ts">
-import "../scss/common/bootstrap5.scss";
-import "../scss/game_bg.scss";
+import "@scss/common/bootstrap5.scss";
+import "@scss/game_bg.scss";
 import "../../css/config.css";
 
 import { defineComponent, onMounted, reactive, ref } from "vue";
-import TopBackBar from "./components/TopBackBar.vue";
-import BoardArticle from "./components/BoardArticle.vue";
-import { convertFormData } from "./util/convertFormData";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BoardArticle from "@/components/BoardArticle.vue";
+import { convertFormData } from "@util/convertFormData";
 import axios from "axios";
-import { InvalidResponse } from "./defs";
-import { autoResizeTextarea } from "./util/autoResizeTextarea";
-import { unwrap } from "./util/unwrap";
+import { InvalidResponse } from "@/defs";
+import { autoResizeTextarea } from "@util/autoResizeTextarea";
+import { unwrap } from "@util/unwrap";
 export type BoardResponse = {
   result: true;
   articles: Record<number, BoardArticleItem>;
diff --git a/hwe/ts/Join.vue b/hwe/ts/Join.vue
index e7c84089..85c39fa5 100644
--- a/hwe/ts/Join.vue
+++ b/hwe/ts/Join.vue
@@ -294,11 +294,11 @@
   </div>
 </template>
 <script lang="ts">
-import "../scss/common/bootstrap5.scss";
-import "../scss/game_bg.scss";
+import "@scss/common/bootstrap5.scss";
+import "@scss/game_bg.scss";
 
 import { defineComponent } from "vue";
-import TopBackBar from "./components/TopBackBar.vue";
+import TopBackBar from "@/components/TopBackBar.vue";
 import {
   CTable,
   CTableBody,
@@ -306,18 +306,18 @@ import {
   CTableHeaderCell,
   CTableDataCell,
 } from "@coreui/vue/src/components/table";
-import { getIconPath } from "./util/getIconPath";
-import { isBrightColor } from "./util/isBrightColor";
+import { getIconPath } from "@util/getIconPath";
+import { isBrightColor } from "@util/isBrightColor";
 import {
   abilityLeadint,
   abilityLeadpow,
   abilityPowint,
   abilityRand,
-} from "./util/generalStats";
+} from "@util/generalStats";
 import { clone, shuffle, sum } from "lodash";
 import axios from "axios";
-import { InvalidResponse } from "./defs";
-import NumberInputWithInfo from "./components/NumberInputWithInfo.vue";
+import { InvalidResponse } from "@/defs";
+import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";
 
 declare const nationList: {
   nation: number;
diff --git a/hwe/ts/NPCControl.vue b/hwe/ts/NPCControl.vue
index 1229d813..1cedfde6 100644
--- a/hwe/ts/NPCControl.vue
+++ b/hwe/ts/NPCControl.vue
@@ -459,8 +459,8 @@
   </div>
 </template>
 <script lang="ts">
-import "../scss/common/bootstrap5.scss";
-import "../scss/game_bg.scss";
+import "@scss/common/bootstrap5.scss";
+import "@scss/game_bg.scss";
 
 import { defineComponent } from "vue";
 import {
@@ -470,17 +470,17 @@ import {
   NPCChiefActions,
   NPCGeneralActions,
   ToastType,
-} from "./defs";
-import NumberInputWithInfo from "./components/NumberInputWithInfo.vue";
+} from "@/defs";
+import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";
 import { cloneDeep, isEqual, last } from "lodash";
-import { unwrap } from "./util/unwrap";
-import { convertFormData } from "./util/convertFormData";
+import { unwrap } from "@util/unwrap";
+import { convertFormData } from "@util/convertFormData";
 import axios from "axios";
-import { NPCPriorityBtnHelpMessage } from "./helpTexts";
+import { NPCPriorityBtnHelpMessage } from "@/helpTexts";
 import draggable from "vuedraggable";
-import MyToast from "./components/MyToast.vue";
-import TopBackBar from "./components/TopBackBar.vue";
-import { convertIDArray } from "./util/convertIDArray";
+import MyToast from "@/components/MyToast.vue";
+import TopBackBar from "@/components/TopBackBar.vue";
+import { convertIDArray } from "@util/convertIDArray";
 
 declare const nationID: number;
 
diff --git a/hwe/ts/ReservedCommand.vue b/hwe/ts/ReservedCommand.vue
index 34106d52..1ed85952 100644
--- a/hwe/ts/ReservedCommand.vue
+++ b/hwe/ts/ReservedCommand.vue
@@ -203,13 +203,13 @@ import addMinutes from "date-fns/esm/addMinutes";
 import { range } from "lodash";
 import { stringifyUrl } from "query-string";
 import { defineComponent } from "vue";
-import { formatTime } from "./util/formatTime";
-import { joinYearMonth } from "./util/joinYearMonth";
-import { mb_strwidth } from "./util/mb_strwidth";
-import { parseTime } from "./util/parseTime";
-import { parseYearMonth } from "./util/parseYearMonth";
-import { sammoAPI } from "./util/sammoAPI";
-import { filter초성withAlphabet } from "./util/filter초성withAlphabet";
+import { formatTime } from "@util/formatTime";
+import { joinYearMonth } from "@util/joinYearMonth";
+import { mb_strwidth } from "@util/mb_strwidth";
+import { parseTime } from "@util/parseTime";
+import { parseYearMonth } from "@util/parseYearMonth";
+import { sammoAPI } from "@util/sammoAPI";
+import { filter초성withAlphabet } from "@util/filter초성withAlphabet";
 
 type commandItem = {
   value: string;
@@ -544,10 +544,10 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-@import "../scss/common/break_500px.scss";
-@import "../scss/common/variables.scss";
-@import "../scss/common/bootswatch_custom_variables.scss";
-@import "../../node_modules/bootstrap/scss/bootstrap-utilities.scss";
+@import "@scss/common/break_500px.scss";
+@import "@scss/common/variables.scss";
+@import "@scss/common/bootswatch_custom_variables.scss";
+@import "bootstrap/scss/bootstrap-utilities.scss";
 
 .commandPad {
   background-color: $gray-900;
diff --git a/hwe/ts/battle_simulator.ts b/hwe/ts/battle_simulator.ts
index 78e094ff..7e247bb8 100644
--- a/hwe/ts/battle_simulator.ts
+++ b/hwe/ts/battle_simulator.ts
@@ -1,14 +1,14 @@
 import $ from 'jquery';
 import 'bootstrap';
 import download from 'downloadjs';
-import { unwrap } from "./util/unwrap";
+import { unwrap } from "@util/unwrap";
 import { isInteger } from 'lodash';
-import { combineArray, errUnknown, getNpcColor } from './common_legacy';
-import { isBrightColor } from "./util/isBrightColor";
-import { numberWithCommas } from "./util/numberWithCommas";
-import { unwrap_any } from './util/unwrap_any';
-import { BasicGeneralListResponse, InvalidResponse } from './defs';
-import { formatTime } from './util/formatTime';
+import { combineArray, errUnknown, getNpcColor } from '@/common_legacy';
+import { isBrightColor } from "@util/isBrightColor";
+import { numberWithCommas } from "@util/numberWithCommas";
+import { unwrap_any } from '@util/unwrap_any';
+import { BasicGeneralListResponse, InvalidResponse } from '@/defs';
+import { formatTime } from '@util/formatTime';
 
 type CityAttackerInfo = {
     level: number,
diff --git a/hwe/ts/betting.ts b/hwe/ts/betting.ts
index 8a27a581..1c938a21 100644
--- a/hwe/ts/betting.ts
+++ b/hwe/ts/betting.ts
@@ -1,9 +1,9 @@
 import $ from 'jquery';
 import axios from 'axios';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
-import { InvalidResponse } from './defs';
-import { convertFormData } from './util/convertFormData';
-import { unwrap_any } from './util/unwrap_any';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { InvalidResponse } from '@/defs';
+import { convertFormData } from '@util/convertFormData';
+import { unwrap_any } from '@util/unwrap_any';
 
 $(function($){
     setAxiosXMLHttpRequest();
diff --git a/hwe/ts/bossInfo.ts b/hwe/ts/bossInfo.ts
index b4f5fdd7..8132124f 100644
--- a/hwe/ts/bossInfo.ts
+++ b/hwe/ts/bossInfo.ts
@@ -1,9 +1,9 @@
 import $ from 'jquery';
 import axios from 'axios';
-import { convertFormData } from './util/convertFormData';
-import { InvalidResponse } from './defs';
-import { unwrap_any } from './util/unwrap_any';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { convertFormData } from '@util/convertFormData';
+import { InvalidResponse } from '@/defs';
+import { unwrap_any } from '@util/unwrap_any';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import 'bootstrap';
 import 'select2/dist/js/select2.full.js'
 
diff --git a/hwe/ts/chiefCenter.ts b/hwe/ts/chiefCenter.ts
index b49663a5..c9a3d8cc 100644
--- a/hwe/ts/chiefCenter.ts
+++ b/hwe/ts/chiefCenter.ts
@@ -2,15 +2,15 @@ import axios from 'axios';
 import $ from 'jquery';
 import { range } from 'lodash';
 import { addMinutes } from 'date-fns';
-import { errUnknown, getNpcColor } from './common_legacy';
-import { InvalidResponse } from './defs';
-import { unwrap } from "./util/unwrap";
-import { convertFormData } from './util/convertFormData';
-import { unwrap_any } from "./util/unwrap_any";
-import { parseTime } from './util/parseTime';
-import { formatTime } from './util/formatTime';
+import { errUnknown, getNpcColor } from '@/common_legacy';
+import { InvalidResponse } from '@/defs';
+import { unwrap } from "@util/unwrap";
+import { convertFormData } from '@util/convertFormData';
+import { unwrap_any } from "@util/unwrap_any";
+import { parseTime } from '@util/parseTime';
+import { formatTime } from '@util/formatTime';
 import { stringifyUrl } from 'query-string';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 
 setAxiosXMLHttpRequest();
 
diff --git a/hwe/ts/common_deprecated.ts b/hwe/ts/common_deprecated.ts
index 308640b3..a24273e5 100644
--- a/hwe/ts/common_deprecated.ts
+++ b/hwe/ts/common_deprecated.ts
@@ -1,15 +1,15 @@
-import { exportWindow } from "./util/exportWindow";
-import { activateFlip, errUnknown, errUnknownToast, quickReject, initTooltip } from "./common_legacy";
-import { isBrightColor } from "./util/isBrightColor";
-import { getIconPath } from "./util/getIconPath";
-import { mb_strwidth } from "./util/mb_strwidth";
-import { TemplateEngine } from "./util/TemplateEngine";
-import { escapeHtml } from "./legacy/escapeHtml";
-import { nl2br } from "./util/nl2br";
+import { exportWindow } from "@util/exportWindow";
+import { activateFlip, errUnknown, errUnknownToast, quickReject, initTooltip } from "@/common_legacy";
+import { isBrightColor } from "@util/isBrightColor";
+import { getIconPath } from "@util/getIconPath";
+import { mb_strwidth } from "@util/mb_strwidth";
+import { TemplateEngine } from "@util/TemplateEngine";
+import { escapeHtml } from "@/legacy/escapeHtml";
+import { nl2br } from "@util/nl2br";
 import jQuery from "jquery";
 import 'bootstrap';
 
-import "../scss/common_legacy.scss";
+import "@scss/common_legacy.scss";
 
 exportWindow(jQuery, '$');
 exportWindow(jQuery, 'jQuery');
diff --git a/hwe/ts/components/BoardArticle.vue b/hwe/ts/components/BoardArticle.vue
index 12b19e20..46e35351 100644
--- a/hwe/ts/components/BoardArticle.vue
+++ b/hwe/ts/components/BoardArticle.vue
@@ -50,12 +50,12 @@
   </table>
 </template>
 <script lang="ts">
-import { BoardArticleItem } from "../Board.vue";
-import BoardComment from "./BoardComment.vue";
+import { BoardArticleItem } from "@/Board.vue";
+import BoardComment from "@/BoardComment.vue";
 import { defineComponent, PropType } from "vue";
 import axios from "axios";
-import { convertFormData } from "../util/convertFormData";
-import { InvalidResponse } from "../defs";
+import { convertFormData } from "@util/convertFormData";
+import { InvalidResponse } from "@/defs";
 export default defineComponent({
   name: "BoardArticle",
   components: {
diff --git a/hwe/ts/components/BoardComment.vue b/hwe/ts/components/BoardComment.vue
index ddb1d4a1..7e5b4ead 100644
--- a/hwe/ts/components/BoardComment.vue
+++ b/hwe/ts/components/BoardComment.vue
@@ -7,7 +7,7 @@
   </tr>
 </template>
 <script lang="ts">
-import { BoardCommentItem } from "../Board.vue";
+import { BoardCommentItem } from "@/Board.vue";
 import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
diff --git a/hwe/ts/components/BottomBar.vue b/hwe/ts/components/BottomBar.vue
index 1f7fd8f5..37058fe3 100644
--- a/hwe/ts/components/BottomBar.vue
+++ b/hwe/ts/components/BottomBar.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import "../../scss/game_bg.scss";
+import "@scss/game_bg.scss";
 
 export default defineComponent({
   name: "TopBackBar",
diff --git a/hwe/ts/components/MyToast.vue b/hwe/ts/components/MyToast.vue
index 2316256c..c91708de 100644
--- a/hwe/ts/components/MyToast.vue
+++ b/hwe/ts/components/MyToast.vue
@@ -19,7 +19,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { ToastType } from "../defs";
+import { ToastType } from "@/defs";
 import { CToaster, CToast, CToastHeader, CToastBody } from "@coreui/vue/src/components/toast";
 
 export default defineComponent({
diff --git a/hwe/ts/components/TopBackBar.vue b/hwe/ts/components/TopBackBar.vue
index ff4e3687..040f74a1 100644
--- a/hwe/ts/components/TopBackBar.vue
+++ b/hwe/ts/components/TopBackBar.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import "../../scss/game_bg.scss";
+import "@scss/game_bg.scss";
 
 export default defineComponent({
   name: "TopBackBar",
diff --git a/hwe/ts/defaultSelectCityByMap.ts b/hwe/ts/defaultSelectCityByMap.ts
index 2fd463ac..15facc51 100644
--- a/hwe/ts/defaultSelectCityByMap.ts
+++ b/hwe/ts/defaultSelectCityByMap.ts
@@ -1,5 +1,5 @@
-import { reloadWorldMap } from "./map";
-import { unwrap_any } from "./util/unwrap_any";
+import { reloadWorldMap } from "@/map";
+import { unwrap_any } from "@util/unwrap_any";
 
 export function defaultSelectCityByMap(): void {
     const $target = $("#destCityID");
diff --git a/hwe/ts/defaultSelectNationByMap.ts b/hwe/ts/defaultSelectNationByMap.ts
index 28d2b0ee..21ed28d3 100644
--- a/hwe/ts/defaultSelectNationByMap.ts
+++ b/hwe/ts/defaultSelectNationByMap.ts
@@ -1,5 +1,5 @@
-import { reloadWorldMap } from "./map";
-import { unwrap_any } from "./util/unwrap_any";
+import { reloadWorldMap } from "@/map";
+import { unwrap_any } from "@util/unwrap_any";
 
 export function defaultSelectNationByMap(): void{
     const $target = $("#destNationID");
diff --git a/hwe/ts/dipcenter.ts b/hwe/ts/dipcenter.ts
index eb41af99..4fbf508f 100644
--- a/hwe/ts/dipcenter.ts
+++ b/hwe/ts/dipcenter.ts
@@ -2,10 +2,10 @@ import $ from 'jquery';
 import 'bootstrap';
 import 'summernote/dist/summernote-bs4';
 import 'summernote/dist/summernote-bs4.css';
-import './summernote-image-flip';
-import './summernote-ko-KR';
-import { activateFlip } from './common_legacy';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import '@/summernote-image-flip';
+import '@/summernote-ko-KR';
+import { activateFlip } from '@/common_legacy';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 
 declare const editable: boolean;
 
diff --git a/hwe/ts/diplomacy.ts b/hwe/ts/diplomacy.ts
index ba002156..e65ad40c 100644
--- a/hwe/ts/diplomacy.ts
+++ b/hwe/ts/diplomacy.ts
@@ -1,14 +1,14 @@
 import $ from 'jquery';
-import { unwrap_any } from './util/unwrap_any';
+import { unwrap_any } from '@util/unwrap_any';
 import axios from 'axios';
-import { isBrightColor } from "./util/isBrightColor";
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { isBrightColor } from "@util/isBrightColor";
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { isString } from 'lodash';
-import { convertFormData } from './util/convertFormData';
-import { InvalidResponse, NationStaticItem } from './defs';
-import { escapeHtml } from './legacy/escapeHtml';
-import { nl2br } from './util/nl2br';
-import { unwrap } from './util/unwrap';
+import { convertFormData } from '@util/convertFormData';
+import { InvalidResponse, NationStaticItem } from '@/defs';
+import { escapeHtml } from '@/legacy/escapeHtml';
+import { nl2br } from '@util/nl2br';
+import { unwrap } from '@util/unwrap';
 import 'bootstrap';
 import 'select2/dist/js/select2.full.js'
 import { LoadingData } from 'select2';
diff --git a/hwe/ts/extExpandCity.ts b/hwe/ts/extExpandCity.ts
index 6b271a05..03dbf77f 100644
--- a/hwe/ts/extExpandCity.ts
+++ b/hwe/ts/extExpandCity.ts
@@ -1,6 +1,6 @@
 
 import $ from 'jquery';
-import { unwrap_any } from './util/unwrap_any';
+import { unwrap_any } from '@util/unwrap_any';
 
 type UserItem = {
     val: string,
diff --git a/hwe/ts/extKingdoms.ts b/hwe/ts/extKingdoms.ts
index 8fef5ce4..c03b13ad 100644
--- a/hwe/ts/extKingdoms.ts
+++ b/hwe/ts/extKingdoms.ts
@@ -1,7 +1,7 @@
 import $ from 'jquery';
-import { unwrap } from './util/unwrap';
+import { unwrap } from '@util/unwrap';
 import axios from 'axios';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 
 type KingdomGeneral = {
     html: JQuery<HTMLElement>,
diff --git a/hwe/ts/extPluginTroop.ts b/hwe/ts/extPluginTroop.ts
index 529537ae..2acd0a42 100644
--- a/hwe/ts/extPluginTroop.ts
+++ b/hwe/ts/extPluginTroop.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
-import { unwrap } from "./util/unwrap";
-import { RuntimeError } from "./util/RuntimeError";
+import { unwrap } from "@util/unwrap";
+import { RuntimeError } from "@util/RuntimeError";
 
 declare global {
     interface Window {
diff --git a/hwe/ts/gateway/admin_member.ts b/hwe/ts/gateway/admin_member.ts
index f88d4d7b..fb28060e 100644
--- a/hwe/ts/gateway/admin_member.ts
+++ b/hwe/ts/gateway/admin_member.ts
@@ -1,13 +1,13 @@
 import axios from 'axios';
 import $ from 'jquery';
 import { isNumber } from 'lodash';
-import { TemplateEngine } from '../util/TemplateEngine';
-import { InvalidResponse } from '../defs';
-import { setAxiosXMLHttpRequest } from '../util/setAxiosXMLHttpRequest';
-import { unwrap_any } from '../util/unwrap_any';
-import { convertFormData } from '../util/convertFormData';
-import { exportWindow } from '../util/exportWindow';
-import './common';
+import { TemplateEngine } from '@util/TemplateEngine';
+import { InvalidResponse } from '@/defs';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { unwrap_any } from '@util/unwrap_any';
+import { convertFormData } from '@util/convertFormData';
+import { exportWindow } from '@util/exportWindow';
+import '@/gateway/common';
 
 type UserEntry = {
     userID: string,
diff --git a/hwe/ts/gateway/admin_server.ts b/hwe/ts/gateway/admin_server.ts
index 5172f084..6e55df19 100644
--- a/hwe/ts/gateway/admin_server.ts
+++ b/hwe/ts/gateway/admin_server.ts
@@ -1,12 +1,12 @@
-import { exportWindow } from '../util/exportWindow';
+import { exportWindow } from '@util/exportWindow';
 import axios from 'axios';
-import { setAxiosXMLHttpRequest } from '../util/setAxiosXMLHttpRequest';
-import { InvalidResponse } from '../defs';
-import { convertFormData } from '../util/convertFormData';
-import { TemplateEngine } from "../util/TemplateEngine";
-import { unwrap_any } from '../util/unwrap_any';
-import { unwrap } from '../util/unwrap';
-import './common';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { InvalidResponse } from '@/defs';
+import { convertFormData } from '@util/convertFormData';
+import { TemplateEngine } from "@util/TemplateEngine";
+import { unwrap_any } from '@util/unwrap_any';
+import { unwrap } from '@util/unwrap';
+import '@/gateway/common';
 
 type ServerUpdateResponse = {
     result: true,
diff --git a/hwe/ts/gateway/common.ts b/hwe/ts/gateway/common.ts
index ea3e9efb..1333a491 100644
--- a/hwe/ts/gateway/common.ts
+++ b/hwe/ts/gateway/common.ts
@@ -1,3 +1,3 @@
 
 import 'bootstrap';
-import "../../scss/common/bootstrap5.scss";
\ No newline at end of file
+import "@scss/common/bootstrap5.scss";
\ No newline at end of file
diff --git a/hwe/ts/gateway/entrance.ts b/hwe/ts/gateway/entrance.ts
index 51963f3d..b0af45ff 100644
--- a/hwe/ts/gateway/entrance.ts
+++ b/hwe/ts/gateway/entrance.ts
@@ -1,14 +1,14 @@
-import { exportWindow } from '../util/exportWindow';
+import { exportWindow } from '@util/exportWindow';
 import $ from 'jquery';
 exportWindow($, '$');
 import axios from 'axios';
-import { initTooltip } from '../common_legacy';
-import { TemplateEngine } from "../util/TemplateEngine";
-import { InvalidResponse } from '../defs';
-import { getDateTimeNow } from '../util/getDateTimeNow';
-import { setAxiosXMLHttpRequest } from '../util/setAxiosXMLHttpRequest';
-import { loadPlugin as loadAdminPlugin } from './admin_server';
-import './common';
+import { initTooltip } from '@/common_legacy';
+import { TemplateEngine } from '@util/TemplateEngine';
+import { InvalidResponse } from '@/defs';
+import { getDateTimeNow } from '@util/getDateTimeNow';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { loadPlugin as loadAdminPlugin } from '@/gateway/admin_server';
+import '@/gateway/common';
 
 
 declare const isAdmin: boolean;
diff --git a/hwe/ts/gateway/install.ts b/hwe/ts/gateway/install.ts
index 70acd9c6..d43c6dff 100644
--- a/hwe/ts/gateway/install.ts
+++ b/hwe/ts/gateway/install.ts
@@ -1,15 +1,15 @@
 
 import $ from 'jquery';
 import axios from 'axios';
-import { setAxiosXMLHttpRequest } from '../util/setAxiosXMLHttpRequest';
-import { InvalidResponse } from '../defs';
-import { JQValidateForm, NamedRules } from '../util/jqValidateForm';
-import { convertFormData } from '../util/convertFormData';
-import { unwrap_any } from '../util/unwrap_any';
-import { mb_strwidth } from '../util/mb_strwidth';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { InvalidResponse } from '@/defs';
+import { JQValidateForm, NamedRules } from '@util/jqValidateForm';
+import { convertFormData } from '@util/convertFormData';
+import { unwrap_any } from '@util/unwrap_any';
+import { mb_strwidth } from '@util/mb_strwidth';
 import { isString } from 'lodash';
 import { sha512 } from 'js-sha512';
-import './common';
+import '@/gateway/common';
 
 async function changeInstallMode() {
     let result: {
diff --git a/hwe/ts/gateway/join.ts b/hwe/ts/gateway/join.ts
index d62ea971..ea65d6eb 100644
--- a/hwe/ts/gateway/join.ts
+++ b/hwe/ts/gateway/join.ts
@@ -1,14 +1,14 @@
 import $ from 'jquery';
 import axios from 'axios';
-import { JQValidateForm, NamedRules } from '../util/jqValidateForm';
-import { convertFormData } from '../util/convertFormData';
-import { InvalidResponse } from '../defs';
-import { setAxiosXMLHttpRequest } from '../util/setAxiosXMLHttpRequest';
-import { unwrap_any } from '../util/unwrap_any';
+import { JQValidateForm, NamedRules } from '@util/jqValidateForm';
+import { convertFormData } from '@util/convertFormData';
+import { InvalidResponse } from '@/defs';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { unwrap_any } from '@util/unwrap_any';
 import { sha512 } from 'js-sha512';
 import { isString } from 'lodash';
-import { mb_strwidth } from '../util/mb_strwidth';
-import './common';
+import { mb_strwidth } from '@util/mb_strwidth';
+import '@/gateway/common';
 
 
 $(async function () {
diff --git a/hwe/ts/gateway/login.ts b/hwe/ts/gateway/login.ts
index cbc55fd5..bd07c605 100644
--- a/hwe/ts/gateway/login.ts
+++ b/hwe/ts/gateway/login.ts
@@ -1,14 +1,14 @@
 import $ from 'jquery';
-import { JQValidateForm, NamedRules } from '../util/jqValidateForm';
+import { JQValidateForm, NamedRules } from '@util/jqValidateForm';
 import axios from 'axios';
-import { convertFormData } from '../util/convertFormData';
-import { setAxiosXMLHttpRequest } from '../util/setAxiosXMLHttpRequest';
-import { unwrap_any } from '../util/unwrap_any';
+import { convertFormData } from '@util/convertFormData';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { unwrap_any } from '@util/unwrap_any';
 import { sha512 } from 'js-sha512';
-import { unwrap } from '../util/unwrap';
-import { InvalidResponse } from '../defs';
-import { delay } from '../util/delay';
-import './common';
+import { unwrap } from '@util/unwrap';
+import { InvalidResponse } from '@/defs';
+import { delay } from '@util/delay';
+import '@/gateway/common';
 
 
 type LoginResponse = {
diff --git a/hwe/ts/gateway/user_info.ts b/hwe/ts/gateway/user_info.ts
index e7cc5d93..1e152266 100644
--- a/hwe/ts/gateway/user_info.ts
+++ b/hwe/ts/gateway/user_info.ts
@@ -1,15 +1,15 @@
-import { setAxiosXMLHttpRequest } from "../util/setAxiosXMLHttpRequest";
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import $ from 'jquery';
 import axios from 'axios';
 import { subDays } from 'date-fns';
-import { getDateTimeNow } from "../util/getDateTimeNow";
+import { getDateTimeNow } from '@util/getDateTimeNow';
 import { sha512 } from "js-sha512";
-import { convertFormData } from "../util/convertFormData";
-import { InvalidResponse } from "../defs";
-import { unwrap } from "../util/unwrap";
-import { parseTime } from "../util/parseTime";
-import { formatTime } from "../util/formatTime";
-import './common';
+import { convertFormData } from '@util/convertFormData';
+import { InvalidResponse } from '@/defs';
+import { unwrap } from '@util/unwrap';
+import { parseTime } from '@util/parseTime';
+import { formatTime } from '@util/formatTime';
+import '@/gateway/common';
 
 type ResultUserInfo = {
     result: true,
diff --git a/hwe/ts/hallOfFame.ts b/hwe/ts/hallOfFame.ts
index 78961dbf..7c487bd1 100644
--- a/hwe/ts/hallOfFame.ts
+++ b/hwe/ts/hallOfFame.ts
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { stringifyUrl } from 'query-string';
-import { initTooltip } from './common_legacy';
+import { initTooltip } from '@/common_legacy';
 import 'bootstrap';
 
 $(function ($) {
diff --git a/hwe/ts/helpTexts.ts b/hwe/ts/helpTexts.ts
index 6823c65f..4bb6592d 100644
--- a/hwe/ts/helpTexts.ts
+++ b/hwe/ts/helpTexts.ts
@@ -1,4 +1,4 @@
-import { NPCChiefActions, NPCGeneralActions } from "./defs";
+import { NPCChiefActions, NPCGeneralActions } from "@/defs";
 
 export const NPCPriorityBtnHelpMessage: {
   [v in NPCChiefActions | NPCGeneralActions]: string;
diff --git a/hwe/ts/history.ts b/hwe/ts/history.ts
index 76924377..d5f0a513 100644
--- a/hwe/ts/history.ts
+++ b/hwe/ts/history.ts
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import './map';
+import '@/map';
 
 declare const startYear:number;
 declare const startMonth:number;
diff --git a/hwe/ts/inheritPoint.vue b/hwe/ts/inheritPoint.vue
index fa51c893..2a2568d4 100644
--- a/hwe/ts/inheritPoint.vue
+++ b/hwe/ts/inheritPoint.vue
@@ -259,13 +259,13 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import "../scss/common/bootstrap5.scss";
-import "../scss/game_bg.scss";
-import TopBackBar from "./components/TopBackBar.vue";
+import "@scss/common/bootstrap5.scss";
+import "@scss/game_bg.scss";
+import TopBackBar from "@/components/TopBackBar.vue";
 import _ from "lodash";
-import { InvalidResponse } from "./defs";
+import { InvalidResponse } from "@/defs";
 import axios from "axios";
-import NumberInputWithInfo from "./components/NumberInputWithInfo.vue";
+import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";
 
 type InheritanceType =
   | "previous"
diff --git a/hwe/ts/install.ts b/hwe/ts/install.ts
index d3224d78..4bef926d 100644
--- a/hwe/ts/install.ts
+++ b/hwe/ts/install.ts
@@ -1,11 +1,11 @@
 import $ from "jquery";
 import 'bootstrap';
-import { setAxiosXMLHttpRequest } from "./util/setAxiosXMLHttpRequest";
+import { setAxiosXMLHttpRequest } from "@util/setAxiosXMLHttpRequest";
 import axios from "axios";
-import { InvalidResponse } from "./defs";
-import { JQValidateForm, NamedRules } from "./util/jqValidateForm";
-import { convertFormData } from "./util/convertFormData";
-import { exportWindow } from "./util/exportWindow";
+import { InvalidResponse } from "@/defs";
+import { JQValidateForm, NamedRules } from "@util/jqValidateForm";
+import { convertFormData } from "@util/convertFormData";
+import { exportWindow } from "@util/exportWindow";
 
 type ResponseScenarioItem = {
     year?: number,
diff --git a/hwe/ts/install_db.ts b/hwe/ts/install_db.ts
index f8c1e48e..d4508e31 100644
--- a/hwe/ts/install_db.ts
+++ b/hwe/ts/install_db.ts
@@ -1,10 +1,10 @@
 
 import axios from 'axios';
 import jQuery from 'jquery';
-import { JQValidateForm, NamedRules } from './util/jqValidateForm';
-import { convertFormData } from './util/convertFormData';
-import { InvalidResponse } from './defs';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { JQValidateForm, NamedRules } from '@util/jqValidateForm';
+import { convertFormData } from '@util/convertFormData';
+import { InvalidResponse } from '@/defs';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 
 jQuery(async function ($) {
     setAxiosXMLHttpRequest();
diff --git a/hwe/ts/main.ts b/hwe/ts/main.ts
index 8a87ca09..f3468123 100644
--- a/hwe/ts/main.ts
+++ b/hwe/ts/main.ts
@@ -1,19 +1,19 @@
 import $ from 'jquery';
 import 'bootstrap';
-import { activateFlip, initTooltip } from './common_legacy';
-import './msg.ts';
-import './map.ts';
-import { exportWindow } from './util/exportWindow';
+import { activateFlip, initTooltip } from '@/common_legacy';
+import '@/msg.ts';
+import '@/map.ts';
+import { exportWindow } from '@util/exportWindow';
 
-import { scrollHardTo } from './util/scrollHardTo';
+import { scrollHardTo } from '@util/scrollHardTo';
 
 exportWindow(scrollHardTo, 'scrollHardTo');
 exportWindow($, '$');
 
-import '../scss/main.scss';
-import { unwrap } from './util/unwrap';
-import { auto500px } from './util/auto500px';
-import { htmlReady } from './util/htmlReady';
+import '@scss/main.scss';
+import { unwrap } from '@util/unwrap';
+import { auto500px } from '@util/auto500px';
+import { htmlReady } from '@util/htmlReady';
 
 $(function ($) {
     $('.refreshPage').click(function () {
diff --git a/hwe/ts/map.ts b/hwe/ts/map.ts
index 4ce3f2eb..619be304 100644
--- a/hwe/ts/map.ts
+++ b/hwe/ts/map.ts
@@ -1,11 +1,11 @@
 import axios from 'axios';
 import $ from 'jquery';
 import { extend, isNumber } from 'lodash';
-import { convColorValue, convertDictById, stringFormat } from './common_legacy';
-import { InvalidResponse } from './defs';
-import { unwrap } from "./util/unwrap";
-import { convertFormData } from './util/convertFormData';
-import { exportWindow } from './util/exportWindow';
+import { convColorValue, convertDictById, stringFormat } from '@/common_legacy';
+import { InvalidResponse } from '@/defs';
+import { unwrap } from "@util/unwrap";
+import { convertFormData } from '@util/convertFormData';
+import { exportWindow } from '@util/exportWindow';
 
 declare const serverNick: string;
 declare const serverID: string;
diff --git a/hwe/ts/msg.ts b/hwe/ts/msg.ts
index db1e83df..c9003bb4 100644
--- a/hwe/ts/msg.ts
+++ b/hwe/ts/msg.ts
@@ -1,20 +1,20 @@
 
 import $ from 'jquery';
-import { InvalidResponse } from './defs';
-import { getDateTimeNow } from './util/getDateTimeNow';
+import { InvalidResponse } from '@/defs';
+import { getDateTimeNow } from '@util/getDateTimeNow';
 import axios from 'axios';
-import { convertFormData } from './util/convertFormData';
-import { isBrightColor } from "./util/isBrightColor";
-import { unwrap } from './util/unwrap';
+import { convertFormData } from '@util/convertFormData';
+import { isBrightColor } from "@util/isBrightColor";
+import { unwrap } from '@util/unwrap';
 import _ from 'lodash';
 import { addMinutes } from 'date-fns';
-import { parseTime } from './util/parseTime';
-import { formatTime } from './util/formatTime';
-import { TemplateEngine } from './util/TemplateEngine';
-import { isNotNull } from './util/isNotNull';
-import { unwrap_any } from './util/unwrap_any';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
-import { exportWindow } from './util/exportWindow';
+import { parseTime } from '@util/parseTime';
+import { formatTime } from '@util/formatTime';
+import { TemplateEngine } from '@util/TemplateEngine';
+import { isNotNull } from '@util/isNotNull';
+import { unwrap_any } from '@util/unwrap_any';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { exportWindow } from '@util/exportWindow';
 
 const messageTemplate = `<div
     class="msg_plate msg_plate_<%msgType%> msg_plate_<%nationType%>"
diff --git a/hwe/ts/myPage.ts b/hwe/ts/myPage.ts
index 009dd203..9b4b75d9 100644
--- a/hwe/ts/myPage.ts
+++ b/hwe/ts/myPage.ts
@@ -1,10 +1,10 @@
 import axios from 'axios';
 import $ from 'jquery';
-import { InvalidResponse } from './defs';
-import { convertFormData } from './util/convertFormData';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
-import { unwrap } from './util/unwrap';
-import { unwrap_any } from './util/unwrap_any';
+import { InvalidResponse } from '@/defs';
+import { convertFormData } from '@util/convertFormData';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { unwrap } from '@util/unwrap';
+import { unwrap_any } from '@util/unwrap_any';
 
 
 type LogResponse = {
diff --git a/hwe/ts/processing.ts b/hwe/ts/processing.ts
index 9c72dfb2..a43a0b50 100644
--- a/hwe/ts/processing.ts
+++ b/hwe/ts/processing.ts
@@ -1,19 +1,19 @@
 import $ from 'jquery';
 exportWindow($, '$');
-import { exportWindow } from './util/exportWindow';
+import { exportWindow } from '@util/exportWindow';
 import axios from 'axios';
 import 'bootstrap';
 import 'select2/dist/js/select2.full.js'
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
-import { convertFormData } from './util/convertFormData';
-import { InvalidResponse } from './defs';
-import { unwrap_any } from './util/unwrap_any';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { convertFormData } from '@util/convertFormData';
+import { InvalidResponse } from '@/defs';
+import { unwrap_any } from '@util/unwrap_any';
 import { DataFormat, IdTextPair, OptionData } from 'select2';
-import { unwrap } from "./util/unwrap";
-import { defaultSelectCityByMap } from './defaultSelectCityByMap';
-import { defaultSelectNationByMap } from './defaultSelectNationByMap';
-import { colorSelect } from './colorSelect';
-import { recruitCrewForm } from './recruitCrewForm';
+import { unwrap } from "@util/unwrap";
+import { defaultSelectCityByMap } from '@/defaultSelectCityByMap';
+import { defaultSelectNationByMap } from '@/defaultSelectNationByMap';
+import { colorSelect } from '@/colorSelect';
+import { recruitCrewForm } from '@/recruitCrewForm';
 
 declare const isChiefTurn: boolean;
 declare const jsPlugins: string[];
diff --git a/hwe/ts/recent_map.ts b/hwe/ts/recent_map.ts
index 94b9623c..62e15974 100644
--- a/hwe/ts/recent_map.ts
+++ b/hwe/ts/recent_map.ts
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import 'bootstrap';
-import { reloadWorldMap } from './map';
+import { reloadWorldMap } from '@/map';
 
 declare global{
     interface Window{
diff --git a/hwe/ts/recruitCrewForm.ts b/hwe/ts/recruitCrewForm.ts
index fa0bce94..b89a693d 100644
--- a/hwe/ts/recruitCrewForm.ts
+++ b/hwe/ts/recruitCrewForm.ts
@@ -1,4 +1,4 @@
-import { unwrap_any } from './util/unwrap_any';
+import { unwrap_any } from '@util/unwrap_any';
 
 
 declare const leadership: number;
diff --git a/hwe/ts/select_general_from_pool.ts b/hwe/ts/select_general_from_pool.ts
index e4384b8f..f5002683 100644
--- a/hwe/ts/select_general_from_pool.ts
+++ b/hwe/ts/select_general_from_pool.ts
@@ -1,13 +1,13 @@
 import $ from 'jquery';
 import axios from 'axios';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
-import { InvalidResponse } from './defs';
-import { initTooltip } from './common_legacy';
-import { getIconPath } from "./util/getIconPath";
-import { convertFormData } from './util/convertFormData';
-import { unwrap_any } from './util/unwrap_any';
-import { unwrap } from './util/unwrap';
-import { TemplateEngine } from './util/TemplateEngine';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { InvalidResponse } from '@/defs';
+import { initTooltip } from '@/common_legacy';
+import { getIconPath } from "@util/getIconPath";
+import { convertFormData } from '@util/convertFormData';
+import { unwrap_any } from '@util/unwrap_any';
+import { unwrap } from '@util/unwrap';
+import { TemplateEngine } from '@util/TemplateEngine';
 import { Tooltip } from 'bootstrap';
 import { trim } from 'lodash';
 type CardItem = {
diff --git a/hwe/ts/select_npc.ts b/hwe/ts/select_npc.ts
index 3452936b..841c9756 100644
--- a/hwe/ts/select_npc.ts
+++ b/hwe/ts/select_npc.ts
@@ -1,11 +1,11 @@
 import axios from 'axios';
-import { errUnknown } from './common_legacy';
-import { getIconPath } from "./util/getIconPath";
-import { TemplateEngine } from "./util/TemplateEngine";
-import { GeneralListResponse, InvalidResponse } from './defs';
-import { convertFormData } from './util/convertFormData';
-import { unwrap_any } from './util/unwrap_any';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { errUnknown } from '@/common_legacy';
+import { getIconPath } from "@util/getIconPath";
+import { TemplateEngine } from "@util/TemplateEngine";
+import { GeneralListResponse, InvalidResponse } from '@/defs';
+import { convertFormData } from '@util/convertFormData';
+import { unwrap_any } from '@util/unwrap_any';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { Tooltip } from 'bootstrap';
 import { trim } from 'lodash';
 
diff --git a/hwe/ts/troop.ts b/hwe/ts/troop.ts
index 80e1ac15..4f8c9ad6 100644
--- a/hwe/ts/troop.ts
+++ b/hwe/ts/troop.ts
@@ -1,8 +1,8 @@
-import { errUnknown } from "./common_legacy";
-import { launchTroopPlugin } from "./extPluginTroop";
+import { errUnknown } from "@/common_legacy";
+import { launchTroopPlugin } from "@/extPluginTroop";
 import jQuery from "jquery";
 
-import "../scss/troop.scss";
+import "@scss/troop.scss";
 
 jQuery(function($){
     //btnJoinTroop, btnLeaveTroop, btnKickTroop, btnCreateTroop, btnChangeTroopName
diff --git a/hwe/ts/util/TemplateEngine.ts b/hwe/ts/util/TemplateEngine.ts
index afffc849..88cbf2e3 100644
--- a/hwe/ts/util/TemplateEngine.ts
+++ b/hwe/ts/util/TemplateEngine.ts
@@ -1,4 +1,4 @@
-import { escapeHtml } from "../legacy/escapeHtml";
+import { escapeHtml } from '@/legacy/escapeHtml';
 import linkifyStr from 'linkifyjs/string';
 /**
  * 단순한 Template 함수.  <%변수명%>으로 template 가능
diff --git a/hwe/ts/util/auto500px.ts b/hwe/ts/util/auto500px.ts
index c28930f7..38a99f8c 100644
--- a/hwe/ts/util/auto500px.ts
+++ b/hwe/ts/util/auto500px.ts
@@ -1,5 +1,5 @@
-import { htmlReady } from "./htmlReady";
-import { unwrap } from "./unwrap";
+import { htmlReady } from "@util/htmlReady";
+import { unwrap } from "@util/unwrap";
 
 export function auto500px(targetHeight = 700): void {
     let deviceWidth = -1;
diff --git a/hwe/ts/util/autoResizeTextarea.ts b/hwe/ts/util/autoResizeTextarea.ts
index 9d0fc09d..0e7237ee 100644
--- a/hwe/ts/util/autoResizeTextarea.ts
+++ b/hwe/ts/util/autoResizeTextarea.ts
@@ -1,4 +1,4 @@
-import { unwrap } from "./unwrap";
+import { unwrap } from "@util/unwrap";
 
 export function autoResizeTextarea(e: InputEvent): void {
     const el = unwrap(e.target) as HTMLInputElement;
diff --git a/hwe/ts/util/convertIDArray.ts b/hwe/ts/util/convertIDArray.ts
index ff182e17..5abec4db 100644
--- a/hwe/ts/util/convertIDArray.ts
+++ b/hwe/ts/util/convertIDArray.ts
@@ -1,4 +1,4 @@
-import { IDItem } from "../defs";
+import { IDItem } from '@/defs';
 
 export function convertIDArray<T>(array: Iterable<T>): IDItem<T>[] {
     const result: IDItem<T>[] = [];
diff --git a/hwe/ts/util/getDateTimeNow.ts b/hwe/ts/util/getDateTimeNow.ts
index 1c0a143e..88c89bdd 100644
--- a/hwe/ts/util/getDateTimeNow.ts
+++ b/hwe/ts/util/getDateTimeNow.ts
@@ -1,4 +1,4 @@
-import { formatTime } from './formatTime';
+import { formatTime } from '@util/formatTime';
 export function getDateTimeNow(withFraction = false): string {
     return formatTime(new Date(), withFraction);
 }
\ No newline at end of file
diff --git a/hwe/ts/util/isBrightColor.ts b/hwe/ts/util/isBrightColor.ts
index b7e1b745..3681ded5 100644
--- a/hwe/ts/util/isBrightColor.ts
+++ b/hwe/ts/util/isBrightColor.ts
@@ -1,5 +1,5 @@
-import { unwrap } from "./unwrap";
-import { hexToRgb } from "./hexToRgb";
+import { unwrap } from "@util/unwrap";
+import { hexToRgb } from "@util/hexToRgb";
 
 export function isBrightColor(color: string): boolean {
     const cv = unwrap(hexToRgb(color));
diff --git a/hwe/ts/util/jqValidateForm.ts b/hwe/ts/util/jqValidateForm.ts
index 20db9655..557bffdc 100644
--- a/hwe/ts/util/jqValidateForm.ts
+++ b/hwe/ts/util/jqValidateForm.ts
@@ -1,6 +1,6 @@
 import Schema, { Rule, Values } from "async-validator";
 import { isArray } from "lodash";
-import { mergeKVArray } from "./mergeKVArray";
+import { mergeKVArray } from "@util/mergeKVArray";
 import $ from 'jquery';
 
 type Option = {
diff --git a/hwe/ts/util/mb_strimwidth.ts b/hwe/ts/util/mb_strimwidth.ts
index ae13c34d..94b24f7b 100644
--- a/hwe/ts/util/mb_strimwidth.ts
+++ b/hwe/ts/util/mb_strimwidth.ts
@@ -1,4 +1,4 @@
-import { mb_strwidth } from "./mb_strwidth";
+import { mb_strwidth } from "@util/mb_strwidth";
 
 /**
  * mb_strimwidth
diff --git a/hwe/ts/util/sammoAPI.ts b/hwe/ts/util/sammoAPI.ts
index 2897242e..36d9e052 100644
--- a/hwe/ts/util/sammoAPI.ts
+++ b/hwe/ts/util/sammoAPI.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 import { isArray } from "lodash";
-import { InvalidResponse } from "../defs";
+import { InvalidResponse } from '@/defs';
 
 type ValidResponse = {
     result: true
diff --git a/hwe/ts/util/unwrap.ts b/hwe/ts/util/unwrap.ts
index 68c1936f..5a43515c 100644
--- a/hwe/ts/util/unwrap.ts
+++ b/hwe/ts/util/unwrap.ts
@@ -1,5 +1,5 @@
-import { Nullable } from "./Nullable";
-import { NotNullExpected } from "./NotNullExpected";
+import { Nullable } from "@util/Nullable";
+import { NotNullExpected } from "@util/NotNullExpected";
 
 export function unwrap<T>(result: Nullable<T>): T {
     if (result === null || result === undefined) {
diff --git a/hwe/ts/util/unwrap_any.ts b/hwe/ts/util/unwrap_any.ts
index 70d343c8..44ebcd66 100644
--- a/hwe/ts/util/unwrap_any.ts
+++ b/hwe/ts/util/unwrap_any.ts
@@ -1,5 +1,5 @@
-import { Nullable } from "./Nullable";
-import { NotNullExpected } from "./NotNullExpected";
+import { Nullable } from "@util/Nullable";
+import { NotNullExpected } from "@util/NotNullExpected";
 
 
 export function unwrap_any<T>(result: Nullable<unknown>): T {
diff --git a/hwe/ts/util/unwrap_err.ts b/hwe/ts/util/unwrap_err.ts
index eee98384..39034483 100644
--- a/hwe/ts/util/unwrap_err.ts
+++ b/hwe/ts/util/unwrap_err.ts
@@ -1,4 +1,4 @@
-import { Nullable } from "./Nullable";
+import { Nullable } from "@util/Nullable";
 
 type ErrType<T> = { new(msg?: string): T }
 
diff --git a/hwe/ts/v_NPCControl.ts b/hwe/ts/v_NPCControl.ts
index 60f560ba..d690146b 100644
--- a/hwe/ts/v_NPCControl.ts
+++ b/hwe/ts/v_NPCControl.ts
@@ -1,9 +1,9 @@
 import { createApp } from 'vue'
-import NPCControl from './NPCControl.vue';
+import NPCControl from '@/NPCControl.vue';
 import BootstrapVue3 from 'bootstrap-vue-3'
-import "../scss/common/bootstrap5.scss";
+import "@scss/common/bootstrap5.scss";
 import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 
 setAxiosXMLHttpRequest();
 createApp(NPCControl).use(BootstrapVue3).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_board.ts b/hwe/ts/v_board.ts
index 5103f576..5b0c498e 100644
--- a/hwe/ts/v_board.ts
+++ b/hwe/ts/v_board.ts
@@ -1,9 +1,9 @@
 import { createApp } from 'vue'
-import Board from './Board.vue';
+import Board from '@/Board.vue';
 import BootstrapVue3 from 'bootstrap-vue-3'
-import "../scss/common/bootstrap5.scss";
+import "@scss/common/bootstrap5.scss";
 import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 
 declare const isSecretBoard: boolean;
 
diff --git a/hwe/ts/v_inheritPoint.ts b/hwe/ts/v_inheritPoint.ts
index afc34464..15e0c862 100644
--- a/hwe/ts/v_inheritPoint.ts
+++ b/hwe/ts/v_inheritPoint.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
-import InheritPoint from './inheritPoint.vue';
+import InheritPoint from '@/inheritPoint.vue';
 import BootstrapVue3 from 'bootstrap-vue-3'
-import "../scss/common/bootstrap5.scss";
+import "@scss/common/bootstrap5.scss";
 import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
 createApp(InheritPoint).use(BootstrapVue3).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_join.ts b/hwe/ts/v_join.ts
index 3a3ce5d4..74972f5b 100644
--- a/hwe/ts/v_join.ts
+++ b/hwe/ts/v_join.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-import Join from './Join.vue';
+import Join from '@/Join.vue';
 import BootstrapVue3 from 'bootstrap-vue-3'
-import "../scss/common/bootstrap5.scss";
+import "@scss/common/bootstrap5.scss";
 import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
 
 createApp(Join).use(BootstrapVue3).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_main.ts b/hwe/ts/v_main.ts
index df24915b..c0a05ee1 100644
--- a/hwe/ts/v_main.ts
+++ b/hwe/ts/v_main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-import ReservedCommand from './ReservedCommand.vue';
+import ReservedCommand from '@/ReservedCommand.vue';
 import BootstrapVue3 from 'bootstrap-vue-3'
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import Multiselect from 'vue-multiselect';
 
 setAxiosXMLHttpRequest();
diff --git a/index.php b/index.php
index ea536c57..2f9454b0 100644
--- a/index.php
+++ b/index.php
@@ -53,11 +53,12 @@ foreach (ServConfig::getServerList() as $setting) {
     </script>
     <?= WebUtil::printJS('d_shared/common_path.js') ?>
     <?= WebUtil::printJS('dist_js/vendors.js') ?>
+    <?= WebUtil::printJS('dist_js/common_ts.js') ?>
     <?= WebUtil::printJS('dist_js/login.js') ?>
 
     <?= WebUtil::printCSS('d_shared/common.css') ?>
+    <?= WebUtil::printCSS('dist_css/common_ts.css') ?>
     <?= WebUtil::printCSS('dist_css/login.css') ?>
-    <?= WebUtil::printCSS('css/login.css') ?>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
     <meta name="description" content="실시간으로 진행되는 삼국지 웹게임(삼모전)입니다">
     <meta name="keywords" content="삼국지,삼모전,웹게임,힏체,힏체섭,히데체,히데체섭,HiDCHe,체섭">
diff --git a/package.json b/package.json
index c98fc7fc..e7ab341c 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "core-js": "^3.19.3",
     "date-fns": "^2.27.0",
     "downloadjs": "^1.4.7",
+    "eslint-import-resolver-alias": "^1.1.2",
     "jquery": "^3.6.0",
     "js-sha512": "^0.8.0",
     "linkifyjs": "^3.0",
diff --git a/tsconfig.json b/tsconfig.json
index fc9ce599..35085cc7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -45,9 +45,13 @@
 
     /* Module Resolution Options */
     "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    //"baseUrl": "./hwe/ts",                             /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    "rootDirs": ["./hwe/ts"],              /* List of root folders whose combined content represents the structure of the project at runtime. */
+    "baseUrl": "./hwe/",                             /* Base directory to resolve non-absolute module names. */
+    "paths": {
+      "@/*": ["./ts/*"],
+      "@scss/*": ["./scss/*"],
+      "@util/*": ["./ts/util/*"],
+    },                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    //"rootDirs": ["./hwe/ts"],              /* List of root folders whose combined content represents the structure of the project at runtime. */
     //"typeRoots": ["./typings"],                             /* List of folders to include type definitions from. */
     //"types": ["ts/common_path.d.ts"],             /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
diff --git a/webpack.config.cjs b/webpack.config.cjs
index fc8e0432..0fb288b4 100644
--- a/webpack.config.cjs
+++ b/webpack.config.cjs
@@ -29,7 +29,10 @@ module.exports = (env, argv) => {
         resolve: {
             extensions: [".ts", ".tsx", ".vue", ".js"],
             alias: {
-                vue: "@vue/runtime-dom"
+                vue: "@vue/runtime-dom",
+                '@': tsDir,
+                '@scss': path.resolve(tsDir, '../scss'),
+                '@util': path.resolve(tsDir, 'util'),
             }
         },
         mode,
@@ -191,6 +194,11 @@ module.exports = (env, argv) => {
         name: `ingame_${target}`,
         resolve: {
             extensions: [".js", ".ts", ".tsx"],
+            alias: {
+                '@': tsDir,
+                '@scss': path.resolve(tsDir, '../scss'),
+                '@util': path.resolve(tsDir, 'util'),
+            },
         },
         mode,
         entry: entryIngame,
@@ -275,117 +283,122 @@ module.exports = (env, argv) => {
             }),
             //new BundleAnalyzerPlugin()
         ],
-    cache: {
-        type: 'filesystem',
+        cache: {
+            type: 'filesystem',
         },
         externals: {
             // require("jquery") is external and available
             //  on the global var jQuery
             "jQuery": "jquery"
         }
-};
-const gateway = {
-    name: 'gateway',
-    resolve: {
-        extensions: [".js", ".ts", ".tsx"],
-    },
-    mode,
-    entry: {
-        entrance: `${tsDir}/gateway/entrance.ts`,
-        user_info: `${tsDir}/gateway/user_info.ts`,
-        admin_member: `${tsDir}/gateway/admin_member.ts`,
-        join: `${tsDir}/gateway/join.ts`,
-        login: `${tsDir}/gateway/login.ts`,
-        install: `${tsDir}/gateway/install.ts`,
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, 'dist_js'),
-    },
-    devtool: 'source-map',
-    optimization: {
-        splitChunks: {
-            cacheGroups: {
-                commons: {
-                    test: /[\\/]node_modules[\\/]/,
-                    name: 'vendors',
-                    chunks: 'all',
-                },
-                default: {
-                    name: 'common_ts',
-                    minChunks: 2,
-                    priority: -20,
-                    chunks: 'all',
-                    reuseExistingChunk: true,
-                },
+    };
+    const gateway = {
+        name: 'gateway',
+        resolve: {
+            extensions: [".js", ".ts", ".tsx"],
+            alias: {
+                '@': tsDir,
+                '@scss': path.resolve(tsDir, '../scss'),
+                '@util': path.resolve(tsDir, 'util'),
             },
         },
-        minimizer: [
-            new ESBuildMinifyPlugin({
-                css: true
+        mode,
+        entry: {
+            entrance: `${tsDir}/gateway/entrance.ts`,
+            user_info: `${tsDir}/gateway/user_info.ts`,
+            admin_member: `${tsDir}/gateway/admin_member.ts`,
+            join: `${tsDir}/gateway/join.ts`,
+            login: `${tsDir}/gateway/login.ts`,
+            install: `${tsDir}/gateway/install.ts`,
+        },
+        output: {
+            filename: '[name].js',
+            path: path.resolve(__dirname, 'dist_js'),
+        },
+        devtool: 'source-map',
+        optimization: {
+            splitChunks: {
+                cacheGroups: {
+                    commons: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: 'vendors',
+                        chunks: 'all',
+                    },
+                    default: {
+                        name: 'common_ts',
+                        minChunks: 2,
+                        priority: -20,
+                        chunks: 'all',
+                        reuseExistingChunk: true,
+                    },
+                },
+            },
+            minimizer: [
+                new ESBuildMinifyPlugin({
+                    css: true
+                }),
+            ],
+            moduleIds: 'deterministic',
+        },
+        module: {
+            rules: [{
+                test: /\.ts$/,
+                exclude: /(node_modules)/,
+                use: [
+                    {
+                        loader: 'esbuild-loader',
+                        options: {
+                            loader: 'ts',
+                            target: 'es2019',
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.tsx$/,
+                exclude: /(node_modules)/,
+                use: [
+                    {
+                        loader: 'esbuild-loader',
+                        options: {
+                            loader: 'tsx',
+                            target: 'es2019',
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.js$/,
+                exclude: /(node_modules)/,
+                use: [
+                    {
+                        loader: 'esbuild-loader',
+                        options: {
+                            loader: 'js',
+                            target: 'es2019',
+                        }
+                    }
+                ]
+            }, {
+                test: /.(s?[ac]ss)$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+            }]
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: '../dist_css/[name].css'
             }),
+            //new BundleAnalyzerPlugin()
         ],
-        moduleIds: 'deterministic',
-    },
-    module: {
-        rules: [{
-            test: /\.ts$/,
-            exclude: /(node_modules)/,
-            use: [
-                {
-                    loader: 'esbuild-loader',
-                    options: {
-                        loader: 'ts',
-                        target: 'es2019',
-                    }
-                }
-            ]
+        cache: {
+            type: 'filesystem',
         },
-        {
-            test: /\.tsx$/,
-            exclude: /(node_modules)/,
-            use: [
-                {
-                    loader: 'esbuild-loader',
-                    options: {
-                        loader: 'tsx',
-                        target: 'es2019',
-                    }
-                }
-            ]
-        },
-        {
-            test: /\.js$/,
-            exclude: /(node_modules)/,
-            use: [
-                {
-                    loader: 'esbuild-loader',
-                    options: {
-                        loader: 'js',
-                        target: 'es2019',
-                    }
-                }
-            ]
-        }, {
-            test: /.(s?[ac]ss)$/,
-            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
-        }]
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: '../dist_css/[name].css'
-        }),
-        //new BundleAnalyzerPlugin()
-    ],
-    cache: {
-        type: 'filesystem',
-    },
-};
+    };
 
-if (target == 'hwe') {
-    return [gateway, ingame_vue, ingame];
-}
-else {
-    return [ingame_vue, ingame];
-}
+    if (target == 'hwe') {
+        return [gateway, ingame_vue, ingame];
+    }
+    else {
+        return [ingame_vue, ingame];
+    }
 }