add commits..

src/renderer/public/slam-viewer/index.html

@@ -389,7 +389,7 @@
 	      display:none;
 	    }
     #splatToggle { display:none; }
-    .nav2-slam #goalToggle, .nav2-slam #poseToggle, .nav2-slam #sensorToggle { display:none; }
+    .nav2-slam #goalToggle, .nav2-slam #poseToggle { display:none; }
     .nav2-navigation #downloadWrap { display:none; }
     .nav2-navigation #topLeftControls { display:block; }
     .nav2-navigation #keyGuide { display:none; }
@@ -473,6 +473,7 @@ const ROBOT_PLATFORM = (params.get('platform') || '').trim().toLowerCase();
 // Keep the prior real-platform default when an older LMS URL has no platform.
 const USE_MKMINI_MODEL = ROBOT_PLATFORM === 'mkmini' || (!ROBOT_PLATFORM && REAL_RUNTIME);
 const SHOW_POINT_CLOUD = params.get('pointCloud') === '1';
+const SHOW_SENSOR_POINT_CLOUD = REAL_RUNTIME && SHOW_POINT_CLOUD;
 const SENSOR_POINT_CLOUD_MAX_AGE_MS = 3_000;
 // Camera preview is kept for the RGB test module, but is paused for now so
 // regular visualization sessions never poll `/camera-frame`.
@@ -480,8 +481,10 @@ const ENABLE_CAMERA_PREVIEW = false;
 const CUSTOM_WORLD = !REAL_RUNTIME && viewerMapKey === 'nav2-custom';
 const activeWorldModel = viewerMapKey === 'nav2-turtlebot3-house' ? 'turtlebot3_house' : 'turtlebot3_world';
 const MKMINI_WORLD_SPACING_SCALE = USE_MKMINI_MODEL && activeWorldModel === 'turtlebot3_world' ? 1.6 : 1;
-const MKMINI_RENDER_LENGTH = 0.855;
-const MKMINI_WHEELBASE_METERS = 0.325;
+const MKMINI_RENDER_LENGTH = 0.84;
+const MKMINI_RENDER_WIDTH = 0.61;
+const MKMINI_RENDER_HEIGHT = 0.6575;
+const MKMINI_WHEELBASE_METERS = 0.6;
 const MKMINI_MAX_STEERING_RADIANS = 0.52;
 const DEFAULT_SIMULATION_SPAWN = USE_MKMINI_MODEL
   ? { x: -1.4, y: -0.5 }
@@ -648,6 +651,8 @@ gazeboWorldRoot.name = 'gazebo-world';
 sdfRoot.add(gazeboWorldRoot);
 const editorObjects = new THREE.Group();
 sdfRoot.add(editorObjects);
+const editorBoundaryObjects = new THREE.Group();
+sdfRoot.add(editorBoundaryObjects);
 const runtimeLayoutObjects = new THREE.Group();
 gazeboWorldRoot.add(runtimeLayoutObjects);
 const navigationMapRoot = new THREE.Group();
@@ -665,9 +670,9 @@ const remoteNavigationSplatBaseScale = new THREE.Vector3(3.672624762730334, 3.67
 const pointCloudGeometry = SHOW_POINT_CLOUD ? new THREE.BufferGeometry() : null;
 let pointCloudLayer = null;
 let hasGlobalMapPointCloud = false;
-// A real platform can provide a 3D LiDAR stream even when this viewer was
-// opened through a legacy NAV2 stack URL without pointCloud=1.
-const sensorPointCloudGeometry = REAL_RUNTIME ? new THREE.BufferGeometry() : null;
+// The live sensor point cloud belongs to the 3D view. 2D SLAM renders only
+// LaserScan and must never poll the point-cloud endpoint.
+const sensorPointCloudGeometry = SHOW_SENSOR_POINT_CLOUD ? new THREE.BufferGeometry() : null;
 let sensorPointCloudLayer = null;
 if (pointCloudGeometry) {
   pointCloudLayer = new THREE.Points(
@@ -833,8 +838,9 @@ function createLayoutMesh(item, editor = false) {
 
 function renderEditorLayout(layout) {
   if (!EDITOR_MODE) return;
-  editorLayout = layout && Array.isArray(layout.objects) ? layout : { version:1, objects:[] };
+  editorLayout = layout && Array.isArray(layout.objects) ? layout : { version:1, bounds:{ width:10, depth:10 }, objects:[] };
   clearLayoutObjects(editorObjects);
+  clearLayoutObjects(editorBoundaryObjects);
   for (const item of editorLayout.objects) {
     editorObjects.add(createLayoutMesh(item, true));
   }
@@ -846,7 +852,7 @@ async function refreshRuntimeLayout() {
   if (EDITOR_MODE || REAL_RUNTIME || !CUSTOM_WORLD) return;
   try {
     const layout = await fetch(`${BACKEND_URL}/world-layout`).then(response => response.ok ? response.json() : { objects: [] });
-    const signature = JSON.stringify(layout?.objects || []);
+    const signature = JSON.stringify({ bounds: layout?.bounds || null, objects: layout?.objects || [] });
     if (signature === runtimeLayoutSignature) return;
     runtimeLayoutSignature = signature;
     clearLayoutObjects(runtimeLayoutObjects);
@@ -884,6 +890,7 @@ let targetMkMiniSteeringAngle = 0;
 let currentMkMiniSteeringAngle = 0;
 let targetMkMiniSteeringAngles = { left: 0, right: 0 };
 let currentMkMiniSteeringAngles = { left: 0, right: 0 };
+let lastMkMiniSteeringUpdateMs = null;
 let lastMkMiniMotionSample = null;
 let hasSimulatorMkMiniSteering = false;
 let laserGroup = null;
@@ -910,10 +917,12 @@ let cameraFrameRequestInFlight = false;
 let cameraFrameRefreshTimer = null;
 let cameraFrameObjectUrl = null;
 let pathVisible = false;
-// Sensor data is opt-in in every visualization mode. A saved 3D map is
-// rendered independently, so it must not implicitly enable the live lidar.
-let navigationSensorVisible = false;
-if (sensorPointCloudLayer) sensorPointCloudLayer.visible = false;
+// SLAM always renders its live scan, including the forward beam. Navigation
+// keeps the sensor opt-in so a saved-map view starts cleanly.
+let navigationSensorVisible = NAV2_VIEW_MODE !== 'navigation';
+if (sensorPointCloudLayer) sensorPointCloudLayer.visible = navigationSensorVisible;
+sensorToggleButton.classList.toggle('active', navigationSensorVisible);
+sensorToggleButton.setAttribute('aria-pressed', String(navigationSensorVisible));
 const robotPathPoints = [];
 let robotPathLine = null;
 let navigationPlanLine = null;
@@ -1183,7 +1192,7 @@ function addCylinder(parent, visual, geometry) {
   const cyl = directChild(geometry, 'cylinder');
   const radius = Number(getDirectText(cyl, 'radius', '0.1')) || .1;
   const sourceLength = Number(getDirectText(cyl, 'length', '1')) || 1;
-  const length = isMkMiniWorldPillar(visual) && sourceLength === .5 ? .8 : sourceLength;
+  const length = isMkMiniWorldPillar(visual) && sourceLength === .5 ? 1.2 : sourceLength;
   const mesh = new THREE.Mesh(new THREE.CylinderGeometry(radius, radius, length, 32), materialFromVisual(visual));
   // Three cylinder 기본 축은 Y, SDF cylinder 기본 축은 Z입니다.
   mesh.rotation.x = Math.PI / 2;
@@ -1231,7 +1240,7 @@ async function buildFromSdf() {
         const visualGroup = new THREE.Group();
         visualGroup.name = visual.getAttribute('name') || 'visual';
         applyWorldSdfPose(visualGroup, parsePose(getDirectText(visual, 'pose', '0 0 0 0 0 0')));
-        if (isMkMiniWorldPillar(visual)) visualGroup.position.z += 0.15;
+        if (isMkMiniWorldPillar(visual)) visualGroup.position.z = 0.6;
         linkGroup.add(visualGroup);
 
         const geometry = directChild(visual, 'geometry');
@@ -1366,15 +1375,18 @@ async function loadMkMiniModel(sdfPose = { x:0, y:0, z:0, roll:0, pitch:0, yaw:0
   model.updateMatrixWorld(true);
   const initialBounds = new THREE.Box3().setFromObject(model);
   const initialSize = initialBounds.getSize(new THREE.Vector3());
-  const largestDimension = Math.max(initialSize.x, initialSize.y, initialSize.z, 0.001);
-  // Match the Gazebo MKMini collision body's 1.05 m longest dimension.
-  model.scale.setScalar(MKMINI_RENDER_LENGTH / largestDimension);
+  // The GLB is rotated into the SDF coordinate system above. Its local axes
+  // then map to SDF as X=length, Z=width, Y=height. Normalize every axis to
+  // the same physical envelope used by the Gazebo collision model.
+  const scaleX = MKMINI_RENDER_LENGTH / Math.max(initialSize.x, 0.001);
+  const scaleY = MKMINI_RENDER_HEIGHT / Math.max(initialSize.z, 0.001);
+  const scaleZ = MKMINI_RENDER_WIDTH / Math.max(initialSize.y, 0.001);
+  model.scale.set(scaleX, scaleY, scaleZ);
   model.updateMatrixWorld(true);
 
   const normalizedBounds = new THREE.Box3().setFromObject(model);
   const center = normalizedBounds.getCenter(new THREE.Vector3());
-  // This model lives under sdfRoot (Gazebo Z-up). Center it on base_link in
-  // the horizontal plane and place its base on SDF Z=0.
+  // Keep the wheels on SDF Z=0 after scaling the vehicle height.
   model.position.set(-center.x, -center.y, -normalizedBounds.min.z);
   model.traverse((child) => {
     if (!child.isMesh) return;
@@ -1491,15 +1503,11 @@ async function setRemoteNavigationSplatVisible(visible) {
 }
 
 const LASER_HOLE_R = 0.14;
-const LASER_OFFSET_X = USE_MKMINI_MODEL ? 0.1 : -0.032;
+const LASER_OFFSET_X = USE_MKMINI_MODEL ? 0.15 : -0.032;
 const LASER_OFFSET_Y = 0;
-// Calibrated to the MKMini GLB at the current display scale.
+// Fallback height when an explicit ROS scan pose is unavailable.
 const LASER_Z = USE_MKMINI_MODEL ? 0.5 : 0.181;
-// The MKMini ROS frame reports os_lidar at Z=0.6 m while the bundled GLB
-// places the visible LiDAR head at approximately Z=0.5 m. Keep ROS/map
-// coordinates untouched and correct only the rendered scan origin.
-const MKMINI_LASER_RENDER_Z_OFFSET = 0.1;
-const MKMINI_LASER_RENDER_FORWARD_OFFSET = 0.12;
+const MKMINI_LASER_RENDER_BACKWARD_OFFSET = 0.03;
 
 function setRobotPose(pose) {
   if (!pose) return;
@@ -1556,7 +1564,6 @@ function applyCurrentRobotPose() {
   robotModel.visible = shouldRenderRobot();
   robotModel.position.set(currentRobotPose.x, currentRobotPose.y, currentRobotPose.z);
   robotModel.rotation.set(currentRobotPose.roll, currentRobotPose.pitch, currentRobotPose.yaw, 'XYZ');
-  updateMkMiniFrontWheelSteering();
 }
 
 function updateMkMiniSteeringTarget(pose) {
@@ -1647,7 +1654,7 @@ function mkMiniAckermannAngles(steeringAngle) {
   if (Math.abs(steeringAngle) < 0.0001) return { left: 0, right: 0 };
   const direction = Math.sign(steeringAngle);
   const radius = MKMINI_GAZEBO_WHEELBASE_METERS / Math.tan(Math.abs(steeringAngle));
-  const halfTrack = 0.293;
+  const halfTrack = 0.255;
   const inner = Math.atan(MKMINI_GAZEBO_WHEELBASE_METERS / Math.max(0.01, radius - halfTrack));
   const outer = Math.atan(MKMINI_GAZEBO_WHEELBASE_METERS / (radius + halfTrack));
   return direction > 0 ? { left: inner, right: outer } : { left: -outer, right: -inner };
@@ -1655,13 +1662,17 @@ function mkMiniAckermannAngles(steeringAngle) {
 
 function updateMkMiniFrontWheelSteering() {
   if (!mkMiniFrontWheelPivots.length) return;
-  currentMkMiniSteeringAngle += (targetMkMiniSteeringAngle - currentMkMiniSteeringAngle)
-    * (hasSimulatorMkMiniSteering ? 1 : 0.28);
+  const now = performance.now();
+  const elapsedSeconds = lastMkMiniSteeringUpdateMs === null
+    ? 0
+    : Math.min((now - lastMkMiniSteeringUpdateMs) / 1000, 0.1);
+  lastMkMiniSteeringUpdateMs = now;
+  const alpha = 1 - Math.exp(-8 * elapsedSeconds);
+  currentMkMiniSteeringAngle += (targetMkMiniSteeringAngle - currentMkMiniSteeringAngle) * alpha;
   for (const { pivot, side } of mkMiniFrontWheelPivots) {
     // The asset is Z-up before its model-level X rotation, so its local Y axis
     // becomes the viewer's vertical steering axis.
-    currentMkMiniSteeringAngles[side] += (targetMkMiniSteeringAngles[side] - currentMkMiniSteeringAngles[side])
-      * (hasSimulatorMkMiniSteering ? 1 : 0.28);
+    currentMkMiniSteeringAngles[side] += (targetMkMiniSteeringAngles[side] - currentMkMiniSteeringAngles[side]) * alpha;
     pivot.rotation.y = currentMkMiniSteeringAngles[side];
   }
 }
@@ -1768,7 +1779,7 @@ function setNavigationSensorVisible(visible) {
     drawMiniMap(latestSlamState);
     return;
   }
-  if (REAL_RUNTIME) {
+  if (SHOW_SENSOR_POINT_CLOUD) {
     void refreshSensorPointCloud();
     if (!sensorPointCloudRefreshTimer) {
       sensorPointCloudRefreshTimer = window.setInterval(() => void refreshSensorPointCloud(), 500);
@@ -1798,9 +1809,8 @@ function drawLaserScan(scan, scanPose = (
   const renderPose = USE_MKMINI_MODEL && scanPose
     ? {
       ...sourcePose,
-      x: sourcePose.x + Math.cos(sourcePose.yaw || 0) * MKMINI_LASER_RENDER_FORWARD_OFFSET,
-      y: sourcePose.y + Math.sin(sourcePose.yaw || 0) * MKMINI_LASER_RENDER_FORWARD_OFFSET,
-      z: (sourcePose.z || 0) - MKMINI_LASER_RENDER_Z_OFFSET,
+      x: sourcePose.x - Math.cos(sourcePose.yaw || 0) * MKMINI_LASER_RENDER_BACKWARD_OFFSET,
+      y: sourcePose.y - Math.sin(sourcePose.yaw || 0) * MKMINI_LASER_RENDER_BACKWARD_OFFSET,
     }
     : sourcePose;
   const origin = scanPose
@@ -1813,18 +1823,25 @@ function drawLaserScan(scan, scanPose = (
 
   const endpoints = [];
   const linePoints = [];
+  const openSpaceLinePoints = [];
+  const showOpenSpaceRays = NAV2_VIEW_MODE === 'slam';
   for (let i = 0; i < scan.ranges.length; i++) {
     const raw = scan.ranges[i];
     const valid = Number.isFinite(raw) && raw >= rangeMin && raw < rangeMax;
     const d = valid ? Math.min(raw, rangeMax) : rangeMax;
     const a = angleMin + i * angleInc;
-    const dir = laserDirectionFromPose(sourcePose, a);
+    const dir = laserDirectionFromPose(renderPose, a);
     const startD = Math.min(LASER_HOLE_R, d);
     const start = origin.clone().addScaledVector(dir, startD);
     const point = origin.clone().addScaledVector(dir, d);
     endpoints.push({ start, point, hit: valid });
-    // A range-max value represents open space, not an actual reflected beam.
-    if (valid) linePoints.push(start.x, start.y, start.z, point.x, point.y, point.z);
+    if (valid) {
+      linePoints.push(start.x, start.y, start.z, point.x, point.y, point.z);
+    } else if (showOpenSpaceRays) {
+      // Match Gazebo's ray visualization: no-return rays remain visible, but
+      // deliberately subdued so detected obstacles stay the primary signal.
+      openSpaceLinePoints.push(start.x, start.y, start.z, point.x, point.y, point.z);
+    }
   }
 
   const fillPoints = [];
@@ -1858,10 +1875,20 @@ function drawLaserScan(scan, scanPose = (
   const lineGeo = new THREE.BufferGeometry();
   lineGeo.setAttribute('position', new THREE.Float32BufferAttribute(linePoints, 3));
   grp.add(new THREE.LineSegments(lineGeo, lineMat));
+  if (openSpaceLinePoints.length) {
+    const openSpaceGeo = new THREE.BufferGeometry();
+    openSpaceGeo.setAttribute('position', new THREE.Float32BufferAttribute(openSpaceLinePoints, 3));
+    grp.add(new THREE.LineSegments(
+      openSpaceGeo,
+      new THREE.LineBasicMaterial({ color: 0x6f9dff, transparent: true, opacity: 0.28 }),
+    ));
+  }
 
   const frontIndex = Math.max(0, Math.min(scan.ranges.length - 1, Math.round((0 - angleMin) / angleInc)));
   const front = endpoints[frontIndex];
-  if (front?.hit) {
+  // Keep the forward direction beam even in open space. It is the visual
+  // heading reference used in the TurtleBot SLAM view, not only a hit marker.
+  if (front) {
     const delta = new THREE.Vector3(
       front.point.x - front.start.x,
       front.point.y - front.start.y,
@@ -1980,7 +2007,7 @@ async function refreshPointCloud() {
 }
 
 async function refreshSensorPointCloud() {
-  if (!REAL_RUNTIME || !navigationSensorVisible || sensorPointCloudRequestInFlight) return;
+  if (!SHOW_SENSOR_POINT_CLOUD || !navigationSensorVisible || sensorPointCloudRequestInFlight) return;
   sensorPointCloudRequestInFlight = true;
   try {
     const response = await fetch(`${BACKEND_URL}/sensor-point-cloud`);
@@ -3188,7 +3215,7 @@ if (SHOW_POINT_CLOUD) {
   void refreshPointCloud();
   pointCloudRefreshTimer = window.setInterval(() => void refreshPointCloud(), 1000);
 }
-if (REAL_RUNTIME && navigationSensorVisible) {
+if (SHOW_SENSOR_POINT_CLOUD && navigationSensorVisible) {
   void refreshSensorPointCloud();
   sensorPointCloudRefreshTimer = window.setInterval(() => void refreshSensorPointCloud(), 500);
 }
@@ -3223,7 +3250,7 @@ let singleMoveStopTimer = null;
 const TELEOP_COMMAND_INTERVAL_MS = 120;
 const SINGLE_MOVE_DURATION_MS = 120;
 const LATCHED_ROTATION_SPEED_SCALE = 0.25;
-const MKMINI_GAZEBO_WHEELBASE_METERS = 0.489;
+const MKMINI_GAZEBO_WHEELBASE_METERS = 0.6;
 const MKMINI_GAZEBO_MAX_STEERING_RADIANS = 0.5;
 let cmdVelRequestInFlight = false;
 let queuedCmdVel = null;
@@ -3446,6 +3473,7 @@ window.addEventListener('resize', () => {
 function animate(){
   requestAnimationFrame(animate);
   updateSmoothedRobotPose();
+  updateMkMiniFrontWheelSteering();
   controls.update();
   if (remoteNavigationSplatViewer && remoteNavigationSplatEnabled) {
     remoteNavigationSplatViewer.update();

src/renderer/src/App.tsx

@@ -43,7 +43,7 @@ import WorkspaceLogView from './features/workspace/WorkspaceLogView'
 import WorkspaceModuleTabContextMenu from './features/workspace/WorkspaceModuleTabContextMenu'
 import ModuleListView from './features/workspace/ModuleListView'
 import WorldEditorModal from './features/workspace/WorldEditorModal'
-import WorldMapSelectorModal, { WorldMapRestartConfirmModal, type SavedMapRuntimeKind, type WorkspaceMapOption } from './features/workspace/WorldMapSelectorModal'
+import WorldMapSelectorModal, { NAV2_MAP_OPTIONS, WorldMapRestartConfirmModal, type SavedMapRuntimeKind, type WorkspaceMapOption } from './features/workspace/WorldMapSelectorModal'
 import WorkspaceQaPanel from './features/workspace/WorkspaceQaPanel'
 import WorkspaceSettingsView from './features/workspace/WorkspaceSettingsView'
 import WorkspaceSourceControlView from './features/workspace/WorkspaceSourceControlView'
@@ -85,6 +85,11 @@ type IdeActivity = WorkspaceActivity
 
 const PUBLIC_GUIDE_COURSE_SLUG = 'autonomy-studio-lms-guide'
 
+function isRemoteEnvironmentProfile(profile: EnvironmentProfile): boolean {
+  const target = profile.config?.target
+  return target === 'remote-jetson' || target === 'platform'
+}
+
 function resolveModuleRuntimeImages(
   profiles: EnvironmentProfile[],
   remoteWorkspace: boolean,
@@ -93,7 +98,7 @@ function resolveModuleRuntimeImages(
   if (!remoteWorkspace) return activeRuntimeImages
 
   const images = profiles
-    .filter((profile) => ['real_slam', 'real_slam_3d', 'real_navigation'].includes(profile.profileType.toLowerCase()))
+    .filter(isRemoteEnvironmentProfile)
     .flatMap((profile) => Array.isArray(profile.config.runtimeImages) ? profile.config.runtimeImages : [])
     .filter((image): image is RuntimeImageArtifact => (
       typeof image === 'object'
@@ -806,39 +811,56 @@ function LocalPcWorkspaceMockup({
   const sessionWorldMaps = useMemo(() => {
     const configuredMaps = (curriculumWeek.maps ?? [])
       .filter((map): map is WorkspaceMapOption => map.platformKey === 'NAV2')
-    const baseMaps = [...configuredMaps]
-    const usesThreeDimensionalSlam = (curriculumWeek.modules ?? []).some((module) => (
-      /lms-nav2-gazebo-slam3d/i.test(module.folderName ?? '')
-    ))
-    const platformSlamMap: WorkspaceMapOption = {
-      key: 'nav2-platform-slam',
-      platformKey: 'NAV2',
-      name: '새 SLAM',
-      description: '플랫폼 LiDAR로 새 지도를 생성합니다.',
-      worldFile: '',
-      viewerModel: 'turtlebot3_world',
-      remoteSlam: true,
-      runtimeKind: usesThreeDimensionalSlam ? 'PLATFORM_3D' : 'PLATFORM_2D',
-    }
-    const maps = [...baseMaps, platformSlamMap, ...savedSlamMaps]
+    const customMap = NAV2_MAP_OPTIONS.find((map) => map.key === 'nav2-custom')
+    const baseMaps = configuredMaps.some((map) => map.key === 'nav2-custom') || !customMap
+      ? [...configuredMaps]
+      : [...configuredMaps, customMap]
+    const platformSlamMaps: WorkspaceMapOption[] = [
+      {
+        key: 'nav2-platform-slam-2d',
+        platformKey: 'NAV2',
+        name: '새 2D SLAM',
+        description: '2D LiDAR로 새 지도를 생성합니다.',
+        worldFile: '',
+        viewerModel: 'turtlebot3_world',
+        remoteSlam: true,
+        runtimeKind: 'PLATFORM_2D',
+      },
+      {
+        key: 'nav2-platform-slam-3d',
+        platformKey: 'NAV2',
+        name: '새 3D SLAM',
+        description: '3D LiDAR 포인트 클라우드로 새 지도를 생성합니다.',
+        worldFile: '',
+        viewerModel: 'turtlebot3_world',
+        remoteSlam: true,
+        runtimeKind: 'PLATFORM_3D',
+      },
+    ]
+    const maps = [...baseMaps, ...platformSlamMaps, ...savedSlamMaps]
     const keys = new Set<string>()
     return maps.filter((map) => {
       if (keys.has(map.key)) return false
       keys.add(map.key)
       return true
     })
-  }, [curriculumWeek.maps, curriculumWeek.modules, savedSlamMaps])
+  }, [curriculumWeek.maps, savedSlamMaps])
   useEffect(() => {
     const storedMapKey = window.localStorage.getItem(sessionMapStorageKey)
       ?? window.localStorage.getItem(simulationMapStorageKey)
       ?? window.localStorage.getItem(platformMapStorageKey)
-    const requestedMapKey = selectedWorldMapKey || storedMapKey
+    const normalizedStoredMapKey = storedMapKey === 'nav2-platform-slam'
+      ? 'nav2-platform-slam-2d'
+      : storedMapKey
+    const requestedMapKey = selectedWorldMapKey === 'nav2-platform-slam'
+      ? 'nav2-platform-slam-2d'
+      : selectedWorldMapKey || normalizedStoredMapKey
     if (!savedSlamMapsLoaded && requestedMapKey?.startsWith('saved-slam-')) return
     setSelectedWorldMapKey((current) => {
       const next = sessionWorldMaps.some((map) => map.key === current)
         ? current
-        : sessionWorldMaps.some((map) => map.key === storedMapKey)
-          ? storedMapKey!
+        : sessionWorldMaps.some((map) => map.key === normalizedStoredMapKey)
+          ? normalizedStoredMapKey!
           : sessionWorldMaps[0]?.key ?? 'nav2-turtlebot3-world'
       window.localStorage.setItem(sessionMapStorageKey, next)
       return next
@@ -1014,7 +1036,7 @@ function LocalPcWorkspaceMockup({
     mapKey: selectedWorldMap.saved ? selectedWorldMap.sourceMapKey : selectedWorldMap.key,
     platform: visualizationPlatform,
     threeDimensional: Boolean(
-      selectedWorldMap.databasePath || selectedWorldMap.runtimeKind === 'PLATFORM_3D'
+      selectedWorldMap.runtimeKind === 'PLATFORM_3D'
     ),
     savedMapDatabasePath: selectedWorldMap.databasePath,
     prepareSavedMap: async () => prepareVisualizationSavedMapRef.current?.() ?? {},
@@ -1037,9 +1059,7 @@ function LocalPcWorkspaceMockup({
     if (initializedVisualizationMapRef.current === mapIdentity) return
     initializedVisualizationMapRef.current = mapIdentity
     const navigationMap = Boolean(selectedWorldMap?.saved)
-    const threeDimensionalMap = Boolean(
-      selectedWorldMap?.databasePath || selectedWorldMap?.runtimeKind === 'PLATFORM_3D'
-    )
+    const threeDimensionalMap = selectedWorldMap?.runtimeKind === 'PLATFORM_3D'
     // Saved RTAB-Map databases are navigable maps. Keep the 3D viewer while
     // enabling the same pose and goal controls used by NAV2 navigation.
     const nextMode = navigationMap ? 'navigation' : 'slam'
@@ -1050,7 +1070,7 @@ function LocalPcWorkspaceMockup({
         : 'slam'
     if (visualizationStack !== nextStack) setVisualizationStack(nextStack)
     if (nav2VisualizationMode !== nextMode) setNav2VisualizationMode(nextMode)
-  }, [nav2VisualizationMode, selectedWorldMap?.databasePath, selectedWorldMap?.key, selectedWorldMap?.runtimeKind, selectedWorldMap?.saved, setNav2VisualizationMode, setVisualizationStack, visualizationStack])
+  }, [nav2VisualizationMode, selectedWorldMap?.key, selectedWorldMap?.runtimeKind, selectedWorldMap?.saved, setNav2VisualizationMode, setVisualizationStack, visualizationStack])
   const [customModules, setCustomModules] = useState<NonNullable<CurriculumWeek['modules']>>(() => (
     (curriculumWeek.modules ?? []).filter((module) => module.sourceType === 'CUSTOM')
   ))
@@ -1083,7 +1103,7 @@ function LocalPcWorkspaceMockup({
     const resolvedModules = resolveRuntimeModules(
       curriculumModulesWithCustom,
       remoteWorkspace
-        ? visualizationProfiles.filter((profile) => ['real_slam', 'real_slam_3d', 'real_navigation'].includes(profile.profileType.toLowerCase()))
+        ? visualizationProfiles.filter(isRemoteEnvironmentProfile)
         : activeEnvironmentProfile,
       remoteWorkspace ? 'platform' : 'local'
     ) ?? []
@@ -1129,11 +1149,9 @@ function LocalPcWorkspaceMockup({
       const maps = await response.json() as Array<{ id: string; name: string; yamlPath: string; pgmPath: string; yamlUrl?: string | null; pgmUrl?: string | null; previewPgm?: string | null; databasePath?: string | null; databaseUrl?: string | null; runtimeKind?: SavedMapRuntimeKind; sourceMapKey: string; worldFile: string; viewerModel: 'turtlebot3_world' | 'turtlebot3_house'; createdAt: string }>
       setSavedSlamMaps(maps.map((map) => {
         const isThreeDimensional = map.runtimeKind === 'PLATFORM_3D'
-          || Boolean(map.databasePath || map.databaseUrl)
-        // Older 3D map rows can omit databasePath even though the database
-        // artifact follows the YAML filename in the workspace maps directory.
-        const databasePath = map.databasePath
-          ?? (isThreeDimensional ? map.yamlPath.replace(/\.yaml$/i, '.db') : undefined)
+        const databasePath = isThreeDimensional
+          ? (map.databasePath ?? map.yamlPath.replace(/\.yaml$/i, '.db'))
+          : undefined
         return {
         key: `saved-slam-${map.id}`,
         platformKey: 'NAV2',
@@ -1153,7 +1171,7 @@ function LocalPcWorkspaceMockup({
         databasePath,
         databaseUrl: map.databaseUrl ?? undefined,
         runtimeKind: map.runtimeKind
-          ?? (databasePath ? 'PLATFORM_3D' : map.sourceMapKey === 'nav2-platform-slam' ? 'PLATFORM_2D' : 'SIMULATION'),
+          ?? (map.sourceMapKey === 'nav2-platform-slam' ? 'PLATFORM_2D' : 'SIMULATION'),
         }
       }))
     } catch (error) {
@@ -1266,9 +1284,8 @@ function LocalPcWorkspaceMockup({
           form.set('sourceMapKey', selectedWorldMap.key)
           form.set('worldFile', selectedWorldMap.worldFile)
           form.set('viewerModel', selectedWorldMap.viewerModel)
-          form.set('runtimeKind', remoteWorkspace
-            ? (databasePath ? 'PLATFORM_3D' : 'PLATFORM_2D')
-            : 'SIMULATION')
+          form.set('runtimeKind', selectedWorldMap.runtimeKind
+            ?? (databasePath ? 'PLATFORM_3D' : remoteWorkspace ? 'PLATFORM_2D' : 'SIMULATION'))
           form.set('yamlPath', payload.map.yamlPath)
           form.set('pgmPath', payload.map.pgmPath)
           if (payload.map.previewPgm) form.set('previewPgm', payload.map.previewPgm)
@@ -1310,7 +1327,7 @@ function LocalPcWorkspaceMockup({
   const workspaceRestoreStartedAtRef = useRef(Date.now())
   const moduleParameterScope = remoteWorkspace ? `platform:${platformId}` : 'local'
   const getModuleParameterStorageKey = (module: ModuleRow): string => (
-    makeModuleParameterKey(courseKey, weekNumber, module.folderName ?? module.name, moduleParameterScope)
+    makeModuleParameterKey(courseKey, weekNumber, module.id ?? module.folderName ?? module.name, moduleParameterScope)
   )
   const applyModuleParameterOverrides = useCallback((modules: ModuleRow[]): ModuleRow[] => {
     const storedParameters = readStoredModuleParameters()
@@ -2368,6 +2385,24 @@ function LocalPcWorkspaceMockup({
 
     void applySourceSettings(normalizedSettings, false)
   }
+  const sourceSettingsDirty = (() => {
+    const normalizeForSave = (settings: StudioSourceSettings): StudioSourceSettings => normalizeStudioSourceSettings({
+      workspaceRoot: remoteWorkspace
+        ? platformSourceSettingsDefaults.workspaceRoot
+        : settings.workspaceRoot.trim() || defaultStudioSourceSettings.workspaceRoot,
+      giteaBaseUrl: sourceSettings.giteaBaseUrl,
+      giteaOwner: sourceSettings.giteaOwner,
+      gpuEnabled: settings.gpuEnabled,
+      editorWordWrap: settings.editorWordWrap,
+      editorFontSize: settings.editorFontSize,
+      editorTabSize: settings.editorTabSize,
+      editorMinimap: settings.editorMinimap,
+      rosDomainId: settings.rosDomainId.trim() || defaultStudioSourceSettings.rosDomainId,
+      rosLinkedPlatformId: settings.rosLinkedPlatformId ?? null,
+      visualizationBridgeLocation: settings.visualizationBridgeLocation ?? 'local',
+    })
+    return JSON.stringify(normalizeForSave(sourceSettingsDraft)) !== JSON.stringify(normalizeForSave(sourceSettings))
+  })()
   const saveDirtyFilesForModule = async (module: ModuleRow): Promise<void> => {
     const moduleRoot = getModuleFilePrefix(module.name)
     const dirtyFiles = Object.keys(dirtyEditorFiles).filter((file) => (
@@ -2512,11 +2547,10 @@ function LocalPcWorkspaceMockup({
     }
     if (map.saved) {
       setNav2VisualizationMode('navigation')
-      setVisualizationStack(map.databasePath ? 'slam3d' : 'nav2')
+      setVisualizationStack(map.runtimeKind === 'PLATFORM_3D' ? 'slam3d' : 'nav2')
     } else {
       setNav2VisualizationMode('slam')
-      if (map.remoteSlam && visualizationStacks.includes('slam3d')) setVisualizationStack('slam3d')
-      else if (visualizationStacks.includes('slam')) setVisualizationStack('slam')
+      setVisualizationStack(map.runtimeKind === 'PLATFORM_3D' ? 'slam3d' : 'slam')
     }
     onTitlebarNotice(`[${map.name}] 맵이 선택되었습니다.`, 'info')
   }
@@ -3542,6 +3576,7 @@ function LocalPcWorkspaceMockup({
             platformName={platformName}
             configuredDraftWorkspaceRoot={configuredDraftWorkspaceRoot}
             sourceSettingsDraft={sourceSettingsDraft}
+            saveDisabled={!sourceSettingsDirty}
             remotePlatforms={platformOptions.filter((platform) => platform.platformKey !== 'futuredrive-local-pc')}
             onUpdateSourceSetting={updateSourceSetting}
             onSaveSourceSettings={saveSourceSettings}
@@ -3786,13 +3821,12 @@ function LocalPcWorkspaceMockup({
                 onTitlebarNotice('맵 편집은 로컬 시뮬레이션 환경에서 사용할 수 있습니다.', 'warning')
                 return
               }
-              setWorldMapSelectorOpen(false)
               setWorldEditorOpen(true)
             }}
             onDelete={(map) => void deleteSavedSlamMap(map)}
             onSelect={(map) => {
-              if (map.key === selectedWorldMapKey) return
               setWorldMapSelectorOpen(false)
+              if (map.key === selectedWorldMapKey) return
               if (availableModules.some((module) => module.state === 'running')) {
                 void applyWorldMapSelection(map)
                 setPendingWorldMapRestart(map)
@@ -3812,7 +3846,14 @@ function LocalPcWorkspaceMockup({
         {worldEditorOpen && (
           <WorldEditorModal
             workspaceRoot={clonePathPreview}
-            onSaved={() => setWorldLayoutVersion((version) => version + 1)}
+            onSaved={() => {
+              setWorldLayoutVersion((version) => version + 1)
+              const customMap = sessionWorldMaps.find((map) => map.key === 'nav2-custom')
+              if (customMap) void applyWorldMapSelection(customMap)
+              if (availableModules.some((module) => module.state === 'running')) {
+                onTitlebarNotice('커스텀 맵은 시뮬레이터를 다시 실행하면 적용됩니다.', 'warning')
+              }
+            }}
             onClose={() => setWorldEditorOpen(false)}
           />
         )}

src/renderer/src/env.d.ts

@@ -348,6 +348,10 @@ type WorldLayoutObject = {
 
 type WorldLayout = {
   version: 1
+  bounds: {
+    width: number
+    depth: number
+  }
   objects: WorldLayoutObject[]
 }
 

src/renderer/src/features/workspace/ModuleListRow.tsx

@@ -17,6 +17,8 @@ export type ModuleListRowItem = {
 
 type ModuleActionTone = 'install' | 'start' | 'warning' | 'delete' | 'neutral'
 
+let dismissActiveTooltip: (() => void) | null = null
+
 type ModuleListRowProps<Module extends ModuleListRowItem> = {
   dark: boolean
   module: Module
@@ -75,55 +77,65 @@ function actionButtonClass(dark: boolean, tone: ModuleActionTone, busy: boolean)
 
 function TooltipLabel({ dark, children }: { dark: boolean; children: React.ReactNode }): React.JSX.Element {
   const anchorRef = useRef<HTMLSpanElement>(null)
+  const dismissTimerRef = useRef<number | null>(null)
   const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
 
   useEffect(() => {
     const anchor = anchorRef.current?.parentElement
     if (!(anchor instanceof HTMLElement)) return
 
+    const clearDismissTimer = (): void => {
+      if (dismissTimerRef.current === null) return
+      window.clearTimeout(dismissTimerRef.current)
+      dismissTimerRef.current = null
+    }
+    const hideTooltip = (): void => {
+      clearDismissTimer()
+      setPosition(null)
+      if (dismissActiveTooltip === hideTooltip) dismissActiveTooltip = null
+    }
     const showTooltip = (): void => {
+      dismissActiveTooltip?.()
+      clearDismissTimer()
       const bounds = anchor.getBoundingClientRect()
       setPosition({
         left: Math.min(window.innerWidth - 8, Math.max(8, bounds.left + (bounds.width / 2))),
         top: bounds.top - 8
       })
+      dismissActiveTooltip = hideTooltip
+      dismissTimerRef.current = window.setTimeout(() => {
+        hideTooltip()
+      }, 3000)
+    }
+    const hideWhenPointerLeaves = (event: PointerEvent): void => {
+      if (event.target instanceof Node && anchor.contains(event.target)) return
+      hideTooltip()
     }
-    const hideTooltip = (): void => setPosition(null)
 
     anchor.addEventListener('mouseenter', showTooltip)
     anchor.addEventListener('mouseleave', hideTooltip)
     anchor.addEventListener('focus', showTooltip)
     anchor.addEventListener('blur', hideTooltip)
+    document.addEventListener('pointermove', hideWhenPointerLeaves, true)
+    document.addEventListener('pointerdown', hideTooltip, true)
+    document.addEventListener('scroll', hideTooltip, true)
+    window.addEventListener('blur', hideTooltip)
+    window.addEventListener('resize', hideTooltip)
 
     return () => {
       anchor.removeEventListener('mouseenter', showTooltip)
       anchor.removeEventListener('mouseleave', hideTooltip)
       anchor.removeEventListener('focus', showTooltip)
       anchor.removeEventListener('blur', hideTooltip)
+      document.removeEventListener('pointermove', hideWhenPointerLeaves, true)
+      document.removeEventListener('pointerdown', hideTooltip, true)
+      document.removeEventListener('scroll', hideTooltip, true)
+      window.removeEventListener('blur', hideTooltip)
+      window.removeEventListener('resize', hideTooltip)
+      hideTooltip()
     }
   }, [])
 
-  useEffect(() => {
-    if (!position) return
-
-    const updateTooltipPosition = (): void => {
-      const anchor = anchorRef.current?.parentElement
-      if (!(anchor instanceof HTMLElement)) return
-      const bounds = anchor.getBoundingClientRect()
-      setPosition({
-        left: Math.min(window.innerWidth - 8, Math.max(8, bounds.left + (bounds.width / 2))),
-        top: bounds.top - 8
-      })
-    }
-
-    window.addEventListener('resize', updateTooltipPosition)
-    window.addEventListener('scroll', updateTooltipPosition, true)
-    return () => {
-      window.removeEventListener('resize', updateTooltipPosition)
-      window.removeEventListener('scroll', updateTooltipPosition, true)
-    }
-  }, [position])
-
   return (
     <>
       <span ref={anchorRef} aria-hidden="true" className="absolute h-0 w-0 overflow-hidden" />

src/renderer/src/features/workspace/WorkspaceSettingsView.tsx

@@ -10,6 +10,7 @@ type Props = {
   platformName: string
   configuredDraftWorkspaceRoot: string
   sourceSettingsDraft: StudioSourceSettings
+  saveDisabled: boolean
   remotePlatforms: PlatformOption[]
   onUpdateSourceSetting: <Key extends keyof StudioSourceSettings>(key: Key, value: StudioSourceSettings[Key]) => void
   onSaveSourceSettings: () => void
@@ -23,6 +24,7 @@ function WorkspaceSettingsView({
   platformName,
   configuredDraftWorkspaceRoot,
   sourceSettingsDraft,
+  saveDisabled,
   remotePlatforms,
   onUpdateSourceSetting,
   onSaveSourceSettings
@@ -173,8 +175,9 @@ function WorkspaceSettingsView({
                 <div className="mt-8 flex justify-end">
                   <button
                     type="button"
+                    disabled={saveDisabled}
                     onClick={onSaveSourceSettings}
-                    className="h-9 cursor-pointer rounded-md border border-[#2563eb] bg-[#2563eb] px-4 text-[12px] font-bold text-white transition hover:bg-[#1d4ed8]"
+                    className="h-9 rounded-md border border-[#2563eb] bg-[#2563eb] px-4 text-[12px] font-bold text-white transition hover:bg-[#1d4ed8] disabled:cursor-default disabled:border-[#64748b] disabled:bg-[#64748b] disabled:text-white/70 disabled:hover:bg-[#64748b]"
                   >
                     저장
                   </button>

src/renderer/src/features/workspace/WorldEditorModal.tsx

@@ -11,7 +11,7 @@ type WorldObjectType = WorldLayoutObject['type']
 type WorldEditorModalProps = {
   workspaceRoot: string
   onClose: () => void
-  onSaved?: () => void
+  onSaved?: (layout: WorldLayout) => void
 }
 
 type TransformMode = 'translate' | 'rotate' | 'scale'
@@ -175,10 +175,10 @@ async function loadWorldSdf(parent: THREE.Group): Promise<void> {
 export default function WorldEditorModal({ workspaceRoot, onClose, onSaved }: WorldEditorModalProps): React.JSX.Element {
   const canvasHostRef = useRef<HTMLDivElement>(null)
   const viewerRef = useRef<HTMLIFrameElement>(null)
-  const worldRef = useRef<WorldLayout>({ version: 1, objects: [] })
+  const worldRef = useRef<WorldLayout>({ version: 1, bounds: { width: 10, depth: 10 }, objects: [] })
   const selectedIdRef = useRef<string | null>(null)
   const renderSceneRef = useRef<(() => void) | null>(null)
-  const [layout, setLayout] = useState<WorldLayout>({ version: 1, objects: [] })
+  const [layout, setLayout] = useState<WorldLayout>({ version: 1, bounds: { width: 10, depth: 10 }, objects: [] })
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
@@ -403,8 +403,16 @@ export default function WorldEditorModal({ workspaceRoot, onClose, onSaved }: Wo
     setSelectedId(remaining[0]?.id ?? null)
     window.requestAnimationFrame(() => renderSceneRef.current?.())
   }
+  const updateBounds = (key: 'width' | 'depth', value: string): void => {
+    const numeric = Number(value)
+    if (!Number.isFinite(numeric)) return
+    setLayout((current) => ({
+      ...current,
+      bounds: { ...current.bounds, [key]: Math.min(40, Math.max(2, numeric)) },
+    }))
+  }
   const resetLayout = (): void => {
-    const next: WorldLayout = { version: 1, objects: [] }
+    const next: WorldLayout = { version: 1, bounds: layout.bounds, objects: [] }
     worldRef.current = next
     setLayout(next)
     setSelectedId(null)
@@ -416,7 +424,7 @@ export default function WorldEditorModal({ workspaceRoot, onClose, onSaved }: Wo
     try {
       const saved = await window.localWorkspace.worldLayout.write(workspaceRoot, layout)
       setLayout(saved)
-      onSaved?.()
+      onSaved?.(saved)
       onClose()
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : '월드 정보를 저장하지 못했습니다.')
@@ -426,7 +434,7 @@ export default function WorldEditorModal({ workspaceRoot, onClose, onSaved }: Wo
   }
 
   return (
-    <div className="absolute inset-0 z-[70] flex items-center justify-center bg-[#050914]/78 p-6 backdrop-blur-sm">
+    <div className="absolute inset-0 z-[170] flex items-center justify-center bg-[#050914]/78 p-6 backdrop-blur-sm">
       <section className="flex h-[min(820px,calc(100vh-64px))] w-[min(1280px,calc(100vw-64px))] flex-col overflow-hidden rounded-lg border border-white/12 bg-[#111a2a] shadow-[0_24px_72px_rgba(0,0,0,0.5)]">
         <header className="flex h-12 shrink-0 items-center justify-between border-b border-white/10 bg-[#162238] px-4">
           <div>
@@ -442,6 +450,19 @@ export default function WorldEditorModal({ workspaceRoot, onClose, onSaved }: Wo
               <p className="text-[10px] font-bold tracking-[0.1em] text-white/38">SCENE</p>
               <p className="mt-1 text-[11px] font-semibold text-white/66">월드 오브젝트</p>
             </div>
+            <div className="border-b border-white/10 px-3 py-3">
+              <p className="mb-2 text-[10px] font-bold tracking-[0.08em] text-white/38">맵 크기</p>
+              <div className="grid grid-cols-2 gap-1.5">
+                <label className="min-w-0">
+                  <span className="mb-1 block text-[10px] font-bold text-white/38">가로 (m)</span>
+                  <input type="number" min="2" max="40" step="0.5" value={layout.bounds.width} onChange={(event) => updateBounds('width', event.target.value)} className="h-8 w-full rounded border border-white/12 bg-[#0d1728] px-2 text-[11px] font-medium text-white outline-none transition focus:border-[#60a5fa]" />
+                </label>
+                <label className="min-w-0">
+                  <span className="mb-1 block text-[10px] font-bold text-white/38">세로 (m)</span>
+                  <input type="number" min="2" max="40" step="0.5" value={layout.bounds.depth} onChange={(event) => updateBounds('depth', event.target.value)} className="h-8 w-full rounded border border-white/12 bg-[#0d1728] px-2 text-[11px] font-medium text-white outline-none transition focus:border-[#60a5fa]" />
+                </label>
+              </div>
+            </div>
             <div className="min-h-0 flex-1 overflow-y-auto p-2">
               {layout.objects.length ? layout.objects.map((item) => {
                 const Icon = item.type === 'pillar' ? Cylinder : item.type === 'wall' ? PanelsTopLeft : Box

src/renderer/src/features/workspace/WorldMapSelectorModal.tsx

@@ -137,7 +137,30 @@ export function WorkspaceMapPreview({
     >
       {map.previewPgm && <canvas ref={canvasRef} className="absolute inset-0 size-full" />}
       {!map.previewPgm && <span className="absolute inset-0 bg-[linear-gradient(rgba(20,30,42,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(20,30,42,0.08)_1px,transparent_1px)] bg-[size:8px_8px]" />}
-      {!map.previewPgm && (map.custom ? (
+      {!map.previewPgm && (map.remoteSlam && map.runtimeKind === 'PLATFORM_3D' ? (
+        <>
+          <span className="absolute inset-0 bg-[linear-gradient(rgba(20,30,42,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(20,30,42,0.08)_1px,transparent_1px)] bg-[size:8px_8px]" />
+          <span className="absolute inset-[11%] border-[3px] border-[#455363]" />
+          {[
+            ['left-[27%]', 'top-[31%]'], ['left-[31%]', 'top-[36%]'], ['left-[35%]', 'top-[28%]'],
+            ['left-[38%]', 'top-[40%]'], ['left-[44%]', 'top-[33%]'], ['left-[48%]', 'top-[43%]'],
+            ['left-[62%]', 'top-[27%]'], ['left-[68%]', 'top-[33%]'], ['left-[72%]', 'top-[40%]'],
+            ['left-[58%]', 'top-[57%]'], ['left-[64%]', 'top-[63%]'], ['left-[70%]', 'top-[55%]'],
+          ].map(([left, top], index) => (
+            <span
+              key={`${left}-${top}`}
+              className={[
+                'absolute rounded-full bg-[#536273]',
+                index % 4 === 0 ? 'size-1.5 opacity-90' : index % 3 === 0 ? 'size-1 opacity-75' : 'size-[3px] opacity-60',
+                left,
+                top,
+              ].join(' ')}
+            />
+          ))}
+          <span className="absolute left-[28%] top-[51%] h-px w-[25%] rotate-[-20deg] bg-[#536273]/70" />
+          <span className="absolute left-[55%] top-[48%] h-px w-[23%] rotate-[28deg] bg-[#536273]/70" />
+        </>
+      ) : map.custom ? (
         <>
           <span className="absolute left-[18%] top-[28%] h-[12%] w-[42%] bg-[#536273]" />
           <span className="absolute bottom-[20%] right-[16%] h-[34%] w-[12%] bg-[#536273]" />
@@ -208,7 +231,7 @@ export default function WorldMapSelectorModal({ weekNumber, initialScope = 'simu
           <button type="button" onClick={() => setScope('simulation')} className={['h-8 cursor-pointer border-b-2 px-2 text-[12px] font-bold transition', scope === 'simulation' ? 'border-[#3b7ffa] text-[#78a4ff]' : 'border-transparent text-white/45 hover:text-white/75'].join(' ')}>시뮬레이션</button>
           <button type="button" onClick={() => setScope('platform')} className={['h-8 cursor-pointer border-b-2 px-2 text-[12px] font-bold transition', scope === 'platform' ? 'border-[#3b7ffa] text-[#78a4ff]' : 'border-transparent text-white/45 hover:text-white/75'].join(' ')}>플랫폼</button>
         </div>
-        <div className="thin-y-scrollbar min-h-[270px] max-h-[270px] space-y-2 overflow-y-auto p-5">
+        <div className="thin-y-scrollbar min-h-[320px] max-h-[320px] space-y-2 overflow-y-auto p-5">
           {maps.map((map) => {
             const pending = map.key === pendingMap?.key
             const selected = map.key === selectedMapKey
@@ -216,7 +239,7 @@ export default function WorldMapSelectorModal({ weekNumber, initialScope = 'simu
             // runtime is chosen by the active SLAM stack, so only persisted
             // map results receive a dimensional badge.
             const mapDimension = map.saved
-              ? (map.runtimeKind === 'PLATFORM_3D' || Boolean(map.databasePath) ? '3D' : '2D')
+              ? (map.runtimeKind === 'PLATFORM_3D' ? '3D' : '2D')
               : null
             return (
               <button
@@ -257,10 +280,10 @@ export default function WorldMapSelectorModal({ weekNumber, initialScope = 'simu
           {scope === 'simulation' && onCreate && (
             <button type="button" onClick={onCreate} className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-md border border-white/12 px-3 text-[12px] font-bold text-white/70 transition hover:bg-white/8 hover:text-white">
               <PencilRuler className="size-3.5" />
-              맵 편집
+              커스텀 맵
             </button>
           )}
-          <button type="button" disabled={!pendingMap || pendingMap.key === selectedMapKey} onClick={() => pendingMap && onSelect(pendingMap)} className="ml-auto h-8 cursor-pointer rounded-md bg-[#2563eb] px-3 text-[12px] font-bold text-white transition hover:bg-[#1d5ed8] disabled:cursor-default disabled:opacity-45">
+          <button type="button" disabled={!pendingMap} onClick={() => pendingMap && onSelect(pendingMap)} className="ml-auto h-8 cursor-pointer rounded-md bg-[#2563eb] px-3 text-[12px] font-bold text-white transition hover:bg-[#1d5ed8] disabled:cursor-default disabled:opacity-45">
             확인
           </button>
         </footer>

src/renderer/src/features/workspace/useWorkspaceModuleControl.ts

@@ -31,6 +31,24 @@ function waitForSimulatorStartup(): Promise<void> {
   return new Promise((resolve) => window.setTimeout(resolve, 4000))
 }
 
+function duplicateCategorySummary(modules: ModuleRow[]): string | null {
+  const categories = new Map<string, { label: string; modules: ModuleRow[] }>()
+  modules.forEach((module) => {
+    const label = module.category.trim()
+    if (!label) return
+    const key = label.toLowerCase()
+    const entry = categories.get(key) ?? { label, modules: [] }
+    entry.modules.push(module)
+    categories.set(key, entry)
+  })
+
+  const conflicts = Array.from(categories.values()).filter((entry) => entry.modules.length > 1)
+  if (!conflicts.length) return null
+  return conflicts
+    .map((entry) => `${entry.label}: ${entry.modules.map((module) => module.name).join(', ')}`)
+    .join(' / ')
+}
+
 type UseWorkspaceModuleControlOptions = {
   availableModules: ModuleRow[]
   setAvailableModules: React.Dispatch<React.SetStateAction<ModuleRow[]>>
@@ -284,14 +302,17 @@ export function useWorkspaceModuleControl({
     try {
       const requestAccessToken = await getFreshAccessToken()
       await installModuleOnce(module, requestAccessToken)
-      await loadAvailableModules({ silent: true })
+      // The install request completed successfully, so update only this row.
+      // A full module probe can overlap the ongoing background probe and leave
+      // the install action visible until the user refreshes the workspace.
+      markModuleState(module, 'stopped')
     } catch (error) {
       console.error('[modules] install failed', error)
       setModuleInstallError(error instanceof Error ? error.message : '모듈 설치 실패')
     } finally {
       setInstallingModuleName(null)
     }
-  }, [getFreshAccessToken, installModuleOnce, installingModuleName, loadAvailableModules])
+  }, [getFreshAccessToken, installModuleOnce, installingModuleName, markModuleState])
 
   const installAllModules = useCallback(async (): Promise<void> => {
     if (installingModuleName) return
@@ -304,16 +325,15 @@ export function useWorkspaceModuleControl({
       const requestAccessToken = await getFreshAccessToken()
       for (const module of targets) {
         await installModuleOnce(module, requestAccessToken)
+        markModuleState(module, 'stopped')
       }
-      await loadAvailableModules({ silent: true })
     } catch (error) {
       console.error('[modules] install all failed', error)
       setModuleInstallError(error instanceof Error ? error.message : '전체 설치 실패')
-      await loadAvailableModules({ silent: true })
     } finally {
       setInstallingModuleName(null)
     }
-  }, [availableModules, getFreshAccessToken, installModuleOnce, installingModuleName, isExcludedFromBulkControl, loadAvailableModules])
+  }, [availableModules, getFreshAccessToken, installModuleOnce, installingModuleName, isExcludedFromBulkControl, markModuleState])
 
   const startAllModules = useCallback(async (): Promise<void> => {
     if (installingModuleName) return
@@ -323,6 +343,18 @@ export function useWorkspaceModuleControl({
       return
     }
 
+    const activeModules = availableModules.filter((module) => (
+      !isExcludedFromBulkControl(module)
+      && (module.state === 'stopped' || module.state === 'running')
+    ))
+    const duplicateCategories = duplicateCategorySummary(activeModules)
+    if (duplicateCategories) {
+      const message = `동일 카테고리 모듈이 중복되어 전체 실행을 중단했습니다. ${duplicateCategories}`
+      setModuleInstallError(message)
+      onTitlebarNotice('중복 카테고리 모듈을 확인하세요', 'warning')
+      return
+    }
+
     setInstallingModuleName('__start_all__')
     setModuleInstallError(null)
     try {
@@ -386,6 +418,7 @@ export function useWorkspaceModuleControl({
           targets.map((module) => ({ moduleName: module.name, folderName: module.folderName })),
         )
         if (!result.ok) throw new Error(result.message)
+        targets.forEach((module) => markModuleState(module, 'stopped'))
       } else {
         if (targets.length) {
           const result = await window.localWorkspace.modules.stopMany(
@@ -393,6 +426,7 @@ export function useWorkspaceModuleControl({
             clonePathPreview
           )
           if (!result.ok) throw new Error(result.message)
+          targets.forEach((module) => markModuleState(module, 'stopped'))
         }
         await stopLocalVisualization()
       }
@@ -406,7 +440,7 @@ export function useWorkspaceModuleControl({
     } finally {
       setInstallingModuleName(null)
     }
-  }, [availableModules, clonePathPreview, getRemoteWorkspaceTarget, installingModuleName, isExcludedFromBulkControl, loadAvailableModules, onStopVisualization, onTitlebarNotice, remoteWorkspace])
+  }, [availableModules, clonePathPreview, getRemoteWorkspaceTarget, installingModuleName, isExcludedFromBulkControl, loadAvailableModules, markModuleState, onStopVisualization, onTitlebarNotice, remoteWorkspace])
 
   const restartRunningModules = useCallback(async (overrides?: { simulatorWorldFile?: string | null; savedMapYamlPath?: string | null }): Promise<boolean> => {
     if (installingModuleName) return false
@@ -588,7 +622,7 @@ export function useWorkspaceModuleControl({
         .map((parameter) => ({ ...parameter, name: parameter.name.trim(), value: parameter.value.trim() }))
         .filter((parameter) => parameter.name)
       storeModuleParameters(
-        makeModuleParameterKey(courseKey, weekNumber, module.folderName ?? module.name, moduleParameterScope),
+        makeModuleParameterKey(courseKey, weekNumber, module.id ?? module.folderName ?? module.name, moduleParameterScope),
         normalizedParameters
       )
       const nextTokens = serializeModuleParameters(normalizedParameters).split(/\s+/).filter(Boolean)

src/renderer/src/features/workspace/useWorkspaceVisualization.ts

@@ -28,20 +28,10 @@ const DEFAULT_NAV2_VISUALIZATION_PROFILE: EnvironmentProfile = {
 function resolveVisualizationStack(profileType: string): VisualizationStack | null {
   const type = profileType.toLowerCase()
   if (type === 'local' || type === 'platform') return 'nav2'
-  if (type === 'real_slam') return 'slam'
-  if (type === 'real_slam_3d') return 'slam3d'
-  if (type === 'real_navigation') return 'nav2'
   return type === 'autoware' || type === 'nav2' || type === 'slam' || type === 'slam3d' ? type : null
 }
 
-function resolveNav2Mode(profile: EnvironmentProfile | null): Nav2VisualizationMode {
-  const type = profile?.profileType.toLowerCase()
-  if (type === 'real_navigation') return 'navigation'
-  return 'slam'
-}
-
-function isRealPlatformProfile(profile: EnvironmentProfile | null): boolean {
-  if (['real_slam', 'real_slam_3d', 'real_navigation'].includes(profile?.profileType.toLowerCase() ?? '')) return true
+function isRemoteEnvironment(profile: EnvironmentProfile | null): boolean {
   const config = profile?.config
   return Boolean(
     config
@@ -53,7 +43,7 @@ function isRealPlatformProfile(profile: EnvironmentProfile | null): boolean {
 
 function selectRuntimeProfiles(profiles: EnvironmentProfile[], remoteWorkspace: boolean): EnvironmentProfile[] {
   const matchingProfiles = profiles.filter((profile) => (
-    remoteWorkspace ? isRealPlatformProfile(profile) : !isRealPlatformProfile(profile)
+    remoteWorkspace ? isRemoteEnvironment(profile) : !isRemoteEnvironment(profile)
   ))
   return matchingProfiles.length ? matchingProfiles : profiles
 }
@@ -175,7 +165,7 @@ export function useWorkspaceVisualization({
   // resolves to the generic NAV2 viewer. Keep the viewer mode tied to the map,
   // not only to the profile label, so 3D state is never rendered as /scan.
   const pointCloudQuery = visualizationStack === 'slam3d' || threeDimensional ? '&pointCloud=1' : ''
-  const viewerRuntime = visualizationRuntime ?? (isRealPlatformProfile(activeEnvironmentProfile) ? 'real' : 'simulation')
+  const viewerRuntime = visualizationRuntime ?? (isRemoteEnvironment(activeEnvironmentProfile) ? 'real' : 'simulation')
   const localBridgeProfile = useMemo(() => {
     const configuredBridge = typeof activeEnvironmentConfig.bridge === 'object' && activeEnvironmentConfig.bridge !== null
       ? activeEnvironmentConfig.bridge as Record<string, unknown>
@@ -205,7 +195,6 @@ export function useWorkspaceVisualization({
       ? savedStack as VisualizationStack
       : fallback ?? fallbackStack
     setVisualizationStack(stack)
-    setNav2VisualizationMode(resolveNav2Mode(runtimeProfiles[0] ?? null))
   }, [fallbackStack, runtimeProfiles, visualizationStackStorageKey, visualizationStacks])
 
   const refreshVisualizationStatus = useCallback(async (): Promise<void> => {
@@ -227,9 +216,13 @@ export function useWorkspaceVisualization({
     const rawStatusStack = status.stack === 'autoware' || status.stack === 'nav2' || status.stack === 'slam'
       ? status.stack
       : null
-    const statusStack = rawStatusStack === 'nav2' && visualizationStack === 'slam3d' ? 'slam3d' : rawStatusStack
-    setVisualizationRunning(Boolean(status.running) && Boolean(statusStack && visualizationStacks.includes(statusStack)))
-    if (statusStack && visualizationStacks.includes(statusStack)) setVisualizationStack(statusStack)
+    // The runtime bridge reports Nav2 for both SLAM modes. Preserve the
+    // map-selected SLAM stack instead of treating it as an unavailable profile.
+    const statusStack = rawStatusStack === 'nav2' && (visualizationStack === 'slam' || visualizationStack === 'slam3d')
+      ? visualizationStack
+      : rawStatusStack
+    setVisualizationRunning(Boolean(status.running) && Boolean(statusStack))
+    if (statusStack) setVisualizationStack(statusStack)
     setVisualizationStatusMessage(status.running
       ? formatVisualizationStackLabel(status.stack)
       : status.message