diff --git a/src/entities/slope/model/model.d.ts b/src/entities/slope/model/model.d.ts
index ffe3cc7..f662993 100644
--- a/src/entities/slope/model/model.d.ts
+++ b/src/entities/slope/model/model.d.ts
@@ -39,10 +39,7 @@ export type WebcamConstant = {
   id: number;
   key?: string;
   scale: number;
-  position: {
-    top: string;
-    left: string;
-  };
+  position: [number, number];
 };
 
 export type SlopeConstant = {
diff --git a/src/entities/slope/model/resorts/eden.tsx b/src/entities/slope/model/resorts/eden.tsx
index 5472260..71750f1 100644
--- a/src/entities/slope/model/resorts/eden.tsx
+++ b/src/entities/slope/model/resorts/eden.tsx
@@ -46,28 +46,19 @@ export const EDEN: ResortConstant = {
     {
       id: 1,
       key: '베이직 슬로프',
-      position: {
-        top: 'top-[52%]',
-        left: 'left-[35%]',
-      },
+      position: [52, 35],
       scale: 1,
     },
     {
       id: 2,
       key: '쥬피터 슬로프',
-      position: {
-        top: 'top-[16%]',
-        left: 'left-[50%]',
-      },
+      position: [16, 50],
       scale: 1,
     },
     {
       id: 3,
       key: '우라누스 슬로프',
-      position: {
-        top: 'top-[32%]',
-        left: 'left-[77%]',
-      },
+      position: [32, 77],
       scale: 1,
     },
   ],
diff --git a/src/entities/slope/model/resorts/elysian-gangchon.tsx b/src/entities/slope/model/resorts/elysian-gangchon.tsx
index f77e536..83cf020 100644
--- a/src/entities/slope/model/resorts/elysian-gangchon.tsx
+++ b/src/entities/slope/model/resorts/elysian-gangchon.tsx
@@ -61,28 +61,19 @@ export const ELYSIAN_GANGCHON: ResortConstant = {
     {
       id: 1,
       key: '알프하우스',
-      position: {
-        top: 'top-[7%]',
-        left: 'left-[27%]',
-      },
+      position: [7, 27],
       scale: 1,
     },
     {
       id: 2,
       key: '서브하우스',
-      position: {
-        top: 'top-[86%]',
-        left: 'left-[19%]',
-      },
+      position: [86, 19],
       scale: 1,
     },
     {
       id: 3,
       key: '스키하우스',
-      position: {
-        top: 'top-[83%]',
-        left: 'left-[80%]',
-      },
+      position: [83, 80],
       scale: 1,
     },
   ],
diff --git a/src/entities/slope/model/resorts/gonjiam.tsx b/src/entities/slope/model/resorts/gonjiam.tsx
index 28bc8a9..e0ecad5 100644
--- a/src/entities/slope/model/resorts/gonjiam.tsx
+++ b/src/entities/slope/model/resorts/gonjiam.tsx
@@ -61,47 +61,32 @@ export const GONJIAM: ResortConstant = {
     {
       id: 1,
       key: '정상 휴게소',
-      position: {
-        top: 'top-[7%]',
-        left: 'left-[20%]',
-      },
+      position: [7, 20],
       scale: 1,
     },
     {
       id: 2,
       key: '정상부 슬로프',
-      position: {
-        top: 'top-[34%]',
-        left: 'left-[21%]',
-      },
+      position: [34, 21],
       scale: 1,
     },
 
     {
       id: 3,
       key: '중간 슬로프',
-      position: {
-        top: 'top-[60%]',
-        left: 'left-[43%]',
-      },
+      position: [60, 43],
       scale: 1,
     },
     {
       id: 4,
       key: '초중급 베이스',
-      position: {
-        top: 'top-[82%]',
-        left: 'left-[51%]',
-      },
+      position: [82, 51],
       scale: 1,
     },
     {
       id: 5,
       key: '중상급 베이스',
-      position: {
-        top: 'top-[85%]',
-        left: 'left-[43%]',
-      },
+      position: [85, 43],
       scale: 1,
     },
   ],
diff --git a/src/entities/slope/model/resorts/high1.tsx b/src/entities/slope/model/resorts/high1.tsx
index 86b7e33..67315c6 100644
--- a/src/entities/slope/model/resorts/high1.tsx
+++ b/src/entities/slope/model/resorts/high1.tsx
@@ -91,163 +91,109 @@ export const HIGH1: ResortConstant = {
     {
       id: 1,
       key: '제우스2번 슬로프 입구',
-      position: {
-        top: 'top-[6%]',
-        left: 'left-[45%]',
-      },
+      position: [6, 45],
       scale: 2,
     },
     {
       id: 2,
       key: '헤라2번 슬로프 입구',
-      position: {
-        top: 'top-[10%]',
-        left: 'left-[50%]',
-      },
+      position: [10, 50],
       scale: 2,
     },
     {
       id: 3,
       key: '하이원 탑',
-      position: {
-        top: 'top-[6%]',
-        left: 'left-[54%]',
-      },
+      position: [6, 54],
       scale: 2,
     },
     {
       id: 4,
       key: '아테나1번 슬로프',
-      position: {
-        top: 'top-[30%]',
-        left: 'left-[65%]',
-      },
+      position: [30, 65],
       scale: 2,
     },
     {
       id: 5,
       key: '마운틴 허브 베이스',
-      position: {
-        top: 'top-[35%]',
-        left: 'left-[61%]',
-      },
+      position: [35, 61],
       scale: 2,
     },
     {
       id: 6,
       key: '아테나2번 슬로프',
-      position: {
-        top: 'top-[40%]',
-        left: 'left-[66%]',
-      },
+      position: [40, 66],
       scale: 2,
     },
     {
       id: 7,
       key: '마운틴 베이스',
-      position: {
-        top: 'top-[68%]',
-        left: 'left-[78%]',
-      },
+      position: [68, 78],
       scale: 2,
     },
     {
       id: 8,
       key: '아테나2번 슬로프 하단',
-      position: {
-        top: 'top-[76%]',
-        left: 'left-[73%]',
-      },
+      position: [76, 73],
       scale: 2,
     },
     {
       id: 9,
       key: '빅토리아 상단',
-      position: {
-        top: 'top-[17%]',
-        left: 'left-[17%]',
-      },
+      position: [17, 17],
       scale: 2,
     },
     {
       id: 10,
       key: '제우스 2번',
-      position: {
-        top: 'top-[34%]',
-        left: 'left-[38%]',
-      },
+      position: [34, 38],
       scale: 2,
     },
     {
       id: 11,
       key: '밸리 허브 베이스',
-      position: {
-        top: 'top-[40%]',
-        left: 'left-[40%]',
-      },
+      position: [40, 40],
       scale: 2,
     },
     {
       id: 12,
       key: '빅토리아1번 슬로프',
-      position: {
-        top: 'top-[48%]',
-        left: 'left-[43%]',
-      },
+      position: [48, 43],
       scale: 2,
     },
     {
       id: 13,
       key: '제우스3번 슬로프',
-      position: {
-        top: 'top-[50%]',
-        left: 'left-[36%]',
-      },
+      position: [50, 36],
       scale: 2,
     },
     {
       id: 14,
       key: '제우스3번 중단부',
-      position: {
-        top: 'top-[58%]',
-        left: 'left-[40%]',
-      },
+      position: [58, 40],
       scale: 2,
     },
     {
       id: 15,
       key: '아폴로4번 중단부',
-      position: {
-        top: 'top-[58%]',
-        left: 'left-[52%]',
-      },
+      position: [58, 52],
       scale: 2,
     },
     {
       id: 16,
       key: '아폴로 베이스',
-      position: {
-        top: 'top-[71%]',
-        left: 'left-[44%]',
-      },
+      position: [71, 44],
       scale: 2,
     },
     {
       id: 17,
       key: '제우스3번 하단',
-      position: {
-        top: 'top-[86%]',
-        left: 'left-[46%]',
-      },
+      position: [86, 46],
       scale: 2,
     },
     {
       id: 18,
       key: '밸리 베이스',
-      position: {
-        top: 'top-[86%]',
-        left: 'left-[39%]',
-      },
+      position: [86, 39],
       scale: 2,
     },
   ],
diff --git a/src/entities/slope/model/resorts/jisan.tsx b/src/entities/slope/model/resorts/jisan.tsx
index 10618e1..d04de5b 100644
--- a/src/entities/slope/model/resorts/jisan.tsx
+++ b/src/entities/slope/model/resorts/jisan.tsx
@@ -51,64 +51,43 @@ export const JISAN: ResortConstant = {
     {
       id: 1,
       key: '레몬 탑승장',
-      position: {
-        top: 'top-[84%]',
-        left: 'left-[20%]',
-      },
+      position: [84, 20],
       scale: 1,
     },
     {
       id: 2,
       key: '오렌지 탑승장',
-      position: {
-        top: 'top-[74%]',
-        left: 'left-[31%]',
-      },
+      position: [74, 31],
       scale: 1,
     },
     {
       id: 3,
       key: '뉴오렌지 탑승장',
-      position: {
-        top: 'top-[64%]',
-        left: 'left-[38%]',
-      },
+      position: [64, 38],
       scale: 1,
     },
     {
       id: 4,
       key: '블루 탑승장',
-      position: {
-        top: 'top-[69%]',
-        left: 'left-[56%]',
-      },
+      position: [69, 56],
       scale: 1,
     },
     {
       id: 5,
       key: '5번 슬로프',
-      position: {
-        top: 'top-[47%]',
-        left: 'left-[37%]',
-      },
+      position: [47, 37],
       scale: 1,
     },
     {
       id: 6,
       key: '실버 탑승장',
-      position: {
-        top: 'top-[72%]',
-        left: 'left-[68%]',
-      },
+      position: [72, 68],
       scale: 1,
     },
     {
       id: 7,
       key: '지산 전경',
-      position: {
-        top: 'top-[38%]',
-        left: 'left-[52%]',
-      },
+      position: [38, 52],
       scale: 1,
     },
   ],
diff --git a/src/entities/slope/model/resorts/muju.tsx b/src/entities/slope/model/resorts/muju.tsx
index ef89263..585c29d 100644
--- a/src/entities/slope/model/resorts/muju.tsx
+++ b/src/entities/slope/model/resorts/muju.tsx
@@ -146,73 +146,49 @@ export const MUJU: ResortConstant = {
     {
       id: 1,
       key: '설천상단 슬로프',
-      position: {
-        top: 'top-[16%]',
-        left: 'left-[23%]',
-      },
+      position: [16, 23],
       scale: 2,
     },
     {
       id: 2,
       key: '설천봉 정상',
-      position: {
-        top: 'top-[12%]',
-        left: 'left-[37%]',
-      },
+      position: [12, 37],
       scale: 2,
     },
     {
       id: 3,
       key: '모차르트, 미뉴에트',
-      position: {
-        top: 'top-[30%]',
-        left: 'left-[27%]',
-      },
+      position: [30, 27],
       scale: 2,
     },
     {
       id: 4,
       key: '만선봉 정상',
-      position: {
-        top: 'top-[32%]',
-        left: 'left-[51%]',
-      },
+      position: [32, 51],
       scale: 2,
     },
     {
       id: 5,
       key: '하이디 하우스',
-      position: {
-        top: 'top-[45%]',
-        left: 'left-[70%]',
-      },
+      position: [45, 70],
       scale: 2,
     },
     {
       id: 6,
       key: '서역기행, 썬다운',
-      position: {
-        top: 'top-[65%]',
-        left: 'left-[68%]',
-      },
+      position: [65, 68],
       scale: 2,
     },
     {
       id: 7,
       key: '만선 하우스',
-      position: {
-        top: 'top-[78%]',
-        left: 'left-[47%]',
-      },
+      position: [78, 47],
       scale: 2,
     },
     {
       id: 8,
       key: '설천 하우스',
-      position: {
-        top: 'top-[74%]',
-        left: 'left-[28%]',
-      },
+      position: [74, 28],
       scale: 2,
     },
   ],
diff --git a/src/entities/slope/model/resorts/o2.tsx b/src/entities/slope/model/resorts/o2.tsx
index efe4ed5..1951396 100644
--- a/src/entities/slope/model/resorts/o2.tsx
+++ b/src/entities/slope/model/resorts/o2.tsx
@@ -76,37 +76,25 @@ export const O2: ResortConstant = {
     {
       id: 1,
       key: '으뜸마루',
-      position: {
-        top: 'top-[5%]',
-        left: 'left-[75%]',
-      },
+      position: [5, 75],
       scale: 1,
     },
     {
       id: 2,
       key: '버금마루',
-      position: {
-        top: 'top-[23%]',
-        left: 'left-[46%]',
-      },
+      position: [23, 46],
       scale: 1,
     },
     {
       id: 3,
       key: '드림1',
-      position: {
-        top: 'top-[80%]',
-        left: 'left-[48%]',
-      },
+      position: [80, 48],
       scale: 1,
     },
     {
       id: 4,
       key: '오투 스키하우스',
-      position: {
-        top: 'top-[76%]',
-        left: 'left-[14%]',
-      },
+      position: [76, 14],
       scale: 1,
     },
   ],
diff --git a/src/entities/slope/model/resorts/phoenix.tsx b/src/entities/slope/model/resorts/phoenix.tsx
index 6b1e7ea..37cd884 100644
--- a/src/entities/slope/model/resorts/phoenix.tsx
+++ b/src/entities/slope/model/resorts/phoenix.tsx
@@ -86,64 +86,43 @@ export const PHOENIX: ResortConstant = {
     {
       id: 1,
       key: '스패로우',
-      position: {
-        top: 'top-[45%]',
-        left: 'left-[87%]',
-      },
+      position: [45, 87],
       scale: 1,
     },
     {
       id: 2,
       key: '파노라마',
-      position: {
-        top: 'top-[15%]',
-        left: 'left-[88%]',
-      },
+      position: [15, 88],
       scale: 1,
     },
     {
       id: 3,
       key: '불새마루존',
-      position: {
-        top: 'top-[31%]',
-        left: 'left-[9%]',
-      },
+      position: [31, 9],
       scale: 1,
     },
     {
       id: 4,
       key: '스키베이스',
-      position: {
-        top: 'top-[83%]',
-        left: 'left-[79%]',
-      },
+      position: [83, 79],
       scale: 1,
     },
     {
       id: 5,
       key: '펭귄 슬로프',
-      position: {
-        top: 'top-[79%]',
-        left: 'left-[43%]',
-      },
+      position: [79, 43],
       scale: 1,
     },
     {
       id: 6,
       key: '몽블랑 정상',
-      position: {
-        top: 'top-[7%]',
-        left: 'left-[53%]',
-      },
+      position: [7, 53],
       scale: 1,
     },
     {
       id: 7,
       key: '챔피온',
-      position: {
-        top: 'top-[26%]',
-        left: 'left-[66%]',
-      },
+      position: [26, 66],
       scale: 1,
     },
   ],
diff --git a/src/entities/slope/model/resorts/vivaldipark.tsx b/src/entities/slope/model/resorts/vivaldipark.tsx
index 713e625..ac587fe 100644
--- a/src/entities/slope/model/resorts/vivaldipark.tsx
+++ b/src/entities/slope/model/resorts/vivaldipark.tsx
@@ -56,92 +56,62 @@ export const VIVALDIPARK: ResortConstant = {
     {
       id: 1,
       key: '재즈',
-      position: {
-        top: 'top-[62%]',
-        left: 'left-[21%]',
-      },
+      position: [62, 21],
       scale: 1,
     },
     {
       id: 2,
       key: '발라드',
-      position: {
-        top: 'top-[56%]',
-        left: 'left-[41%]',
-      },
+      position: [56, 41],
       scale: 1,
     },
     {
       id: 4,
       key: '블루스',
-      position: {
-        top: 'top-[62%]',
-        left: 'left-[77%]',
-      },
+      position: [62, 77],
       scale: 1,
     },
     {
       id: 5,
       key: '테크노하단',
-      position: {
-        top: 'top-[64%]',
-        left: 'left-[51%]',
-      },
+      position: [64, 51],
       scale: 1,
     },
     {
       id: 6,
       key: '힙합',
-      position: {
-        top: 'top-[34%]',
-        left: 'left-[55%]',
-      },
+      position: [34, 55],
       scale: 1,
     },
     {
       id: 8,
       key: '슬로프 전경',
-      position: {
-        top: 'top-[76%]',
-        left: 'left-[45%]',
-      },
+      position: [76, 45],
       scale: 1,
     },
     {
       id: 9,
       key: '스키월드 정상',
-      position: {
-        top: 'top-[14%]',
-        left: 'left-[37%]',
-      },
+      position: [14, 37],
       scale: 1,
     },
     {
       id: 3,
       key: '클래식',
-      position: {
-        top: 'top-[30%]',
-        left: 'left-[30%]',
-      },
+      position: [30, 30],
       scale: 1,
     },
 
     {
       id: 7,
       key: '펑키',
-      position: {
-        top: 'top-[44%]',
-        left: 'left-[46%]',
-      },
+      position: [44, 46],
       scale: 1,
     },
     {
       id: 10,
       key: '테크노 상단',
-      position: {
-        top: 'top-[24%]',
-        left: 'left-[48%]',
-      },
+      position: [24, 48],
       scale: 1,
     },
   ],
diff --git a/src/entities/slope/model/resorts/wellihilli.tsx b/src/entities/slope/model/resorts/wellihilli.tsx
index 815e0c3..dca5e78 100644
--- a/src/entities/slope/model/resorts/wellihilli.tsx
+++ b/src/entities/slope/model/resorts/wellihilli.tsx
@@ -111,46 +111,31 @@ export const WELLIHILLI: ResortConstant = {
     {
       id: 5,
       key: '정상광장',
-      position: {
-        top: 'top-[4%]',
-        left: 'left-[56%]',
-      },
+      position: [4, 56],
       scale: 1,
     },
     {
       id: 2,
       key: '하프파이프',
-      position: {
-        top: 'top-[81%]',
-        left: 'left-[31%]',
-      },
+      position: [81, 31],
       scale: 1,
     },
     {
       id: 6,
       key: '패밀리슬로프',
-      position: {
-        top: 'top-[85%]',
-        left: 'left-[39%]',
-      },
+      position: [85, 39],
       scale: 1,
     },
     {
       id: 4,
       key: '야외광장',
-      position: {
-        top: 'top-[73%]',
-        left: 'left-[19%]',
-      },
+      position: [73, 19],
       scale: 1,
     },
     {
       id: 5,
       key: 'A1/A3 슬로프',
-      position: {
-        top: 'top-[62%]',
-        left: 'left-[8%]',
-      },
+      position: [62, 8],
       scale: 1,
     },
   ],
diff --git a/src/entities/slope/model/resorts/yongpyong.tsx b/src/entities/slope/model/resorts/yongpyong.tsx
index ac277bf..34e62c8 100644
--- a/src/entities/slope/model/resorts/yongpyong.tsx
+++ b/src/entities/slope/model/resorts/yongpyong.tsx
@@ -116,91 +116,61 @@ export const YONGPYONG: ResortConstant = {
     {
       id: 3,
       key: '옐로우 슬로프',
-      position: {
-        top: 'top-[71%]',
-        left: 'left-[37%]',
-      },
+      position: [71, 37],
       scale: 2,
     },
     {
       id: 4,
       key: '핑크 슬로프',
-      position: {
-        top: 'top-[64%]',
-        left: 'left-[33%]',
-      },
+      position: [64, 33],
       scale: 2,
     },
     {
       id: 5,
       key: '베이스 전경',
-      position: {
-        top: 'top-[84%]',
-        left: 'left-[34%]',
-      },
+      position: [84, 34],
       scale: 2,
     },
     {
       id: 6,
       key: '용평 진입로',
-      position: {
-        top: 'top-[86%]',
-        left: 'left-[26%]',
-      },
+      position: [86, 26],
       scale: 2,
     },
     {
       id: 7,
       key: '골드 슬로프 전경',
-      position: {
-        top: 'top-[56%]',
-        left: 'left-[17%]',
-      },
+      position: [56, 17],
       scale: 2,
     },
     {
       id: 8,
       key: '레드 슬로프',
-      position: {
-        top: 'top-[57%]',
-        left: 'left-[29%]',
-      },
+      position: [57, 29],
       scale: 2,
     },
     {
       id: 9,
       key: '레인보우 정상',
-      position: {
-        top: 'top-[2%]',
-        left: 'left-[61%]',
-      },
+      position: [2, 61],
       scale: 2,
     },
     {
       id: 10,
       key: '레인보우 전경',
-      position: {
-        top: 'top-[41%]',
-        left: 'left-[79%]',
-      },
+      position: [41, 79],
       scale: 2,
     },
     {
       id: 11,
       key: '메가 그린 슬로프',
-      position: {
-        top: 'top-[59%]',
-        left: 'left-[56%]',
-      },
+      position: [59, 56],
       scale: 2,
     },
     {
       id: 12,
       key: '슬로프 정상',
-      position: {
-        top: 'top-[26%]',
-        left: 'left-[30%]',
-      },
+      position: [26, 30],
       scale: 2,
     },
   ],
diff --git a/src/features/slope/ui/slope-camera.tsx b/src/features/slope/ui/slope-camera.tsx
index d7b5430..ad2fd95 100644
--- a/src/features/slope/ui/slope-camera.tsx
+++ b/src/features/slope/ui/slope-camera.tsx
@@ -60,7 +60,11 @@ const SlopeCamera = ({
 
   return (
     <>
-      <div ref={cameraRef} className={cn('absolute z-10', position.top, position.left)}>
+      <div
+        ref={cameraRef}
+        className={cn('absolute z-10', 'top-[--top]', 'left-[--left]')}
+        style={{ '--top': `${position[0]}%`, '--left': `${position[1]}%` } as React.CSSProperties}
+      >
         <div className={cn('relative')}>
           <Tooltip
             trigger={