Add Linux basics mindmap

2026-05-12 13:09:36 +09:00
parent 2c46c020e5
commit a0e8ae2adc
10 changed files with 719 additions and 8 deletions
--- a/README.md
+++ b/README.md
@@ -1,10 +1,11 @@
-# Web Mindmap
+# Learning Mindmap

-웹 개발 용어를 접을 수 있는 마인드맵으로 학습하는 정적 교육용 웹사이트입니다.
+웹 개발 용어와 리눅스 기초 사용법을 접을 수 있는 마인드맵으로 학습하는 정적 교육용 웹사이트입니다.

 ## Features

 - 접힌 루트 노드에서 시작하는 인터랙티브 마인드맵
+- 웹 개발 / 리눅스 기초 주제 전환
 - `+ / -` 버튼으로 하위 노드 펼침/접힘
 - 노드 드래그로 위치 이동
 - 배경 드래그로 viewport 이동
--- a/imgs/linux_filesystem.svg
+++ b/imgs/linux_filesystem.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="760" viewBox="0 0 1200 760" role="img" aria-labelledby="title desc">
+  <title id="title">Linux filesystem</title>
+  <desc id="desc">Linux directory tree with root, home, etc, var, usr, and mount points.</desc>
+  <rect width="1200" height="760" fill="#f5f9ff"/>
+  <text x="90" y="120" font-family="Segoe UI, Arial, sans-serif" font-size="50" font-weight="800" fill="#12345b">Linux 파일 시스템</text>
+  <text x="90" y="170" font-family="Segoe UI, Arial, sans-serif" font-size="24" fill="#526173">모든 것은 루트 / 아래의 경로로 연결되고, 장치도 마운트 지점에 붙습니다.</text>
+  <g stroke="#9ab8dc" stroke-width="5" fill="none">
+    <path d="M600 220 V330"/>
+    <path d="M600 330 H240 V450"/>
+    <path d="M600 330 H430 V450"/>
+    <path d="M600 330 V450"/>
+    <path d="M600 330 H770 V450"/>
+    <path d="M600 330 H960 V450"/>
+  </g>
+  <g font-family="Segoe UI, Arial, sans-serif" font-size="28" font-weight="800" text-anchor="middle">
+    <rect x="520" y="190" width="160" height="70" rx="16" fill="#12345b"/>
+    <text x="600" y="238" fill="#fff">/</text>
+    <rect x="150" y="450" width="180" height="90" rx="18" fill="#e8f1ff"/>
+    <text x="240" y="505" fill="#12345b">/home</text>
+    <rect x="340" y="450" width="180" height="90" rx="18" fill="#ecfdf5"/>
+    <text x="430" y="505" fill="#12345b">/etc</text>
+    <rect x="510" y="450" width="180" height="90" rx="18" fill="#fff7ed"/>
+    <text x="600" y="505" fill="#12345b">/var</text>
+    <rect x="680" y="450" width="180" height="90" rx="18" fill="#f4f0ff"/>
+    <text x="770" y="505" fill="#12345b">/usr</text>
+    <rect x="870" y="450" width="180" height="90" rx="18" fill="#ecfeff"/>
+    <text x="960" y="505" fill="#12345b">/mnt</text>
+  </g>
+  <text x="90" y="650" font-family="Segoe UI, Arial, sans-serif" font-size="25" fill="#526173">숨김 파일은 점(.)으로 시작하고, 설정 파일은 보통 홈 디렉터리나 /etc에서 만납니다.</text>
+</svg>
--- a/imgs/linux_network_packages.svg
+++ b/imgs/linux_network_packages.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="760" viewBox="0 0 1200 760" role="img" aria-labelledby="title desc">
+  <title id="title">Linux packages and networking</title>
+  <desc id="desc">Linux package management and networking tools including apt, dnf, ping, ss, curl, ssh, and firewall.</desc>
+  <rect width="1200" height="760" fill="#f5f9ff"/>
+  <text x="90" y="120" font-family="Segoe UI, Arial, sans-serif" font-size="50" font-weight="800" fill="#12345b">패키지와 네트워크</text>
+  <text x="90" y="170" font-family="Segoe UI, Arial, sans-serif" font-size="24" fill="#526173">필요한 도구를 설치하고, 네트워크 상태를 확인하고, 원격 서버에 안전하게 접속합니다.</text>
+  <g font-family="Segoe UI, Arial, sans-serif" font-weight="800">
+    <rect x="120" y="260" width="270" height="120" rx="20" fill="#e8f1ff"/>
+    <text x="155" y="325" font-size="30" fill="#12345b">apt / dnf</text>
+    <text x="155" y="355" font-size="19" fill="#526173">패키지 설치와 업데이트</text>
+    <rect x="465" y="260" width="270" height="120" rx="20" fill="#ecfdf5"/>
+    <text x="500" y="325" font-size="30" fill="#12345b">ping / ss</text>
+    <text x="500" y="355" font-size="19" fill="#526173">연결과 포트 확인</text>
+    <rect x="810" y="260" width="270" height="120" rx="20" fill="#fff7ed"/>
+    <text x="845" y="325" font-size="30" fill="#12345b">curl / wget</text>
+    <text x="845" y="355" font-size="19" fill="#526173">HTTP 요청과 다운로드</text>
+    <rect x="300" y="470" width="270" height="120" rx="20" fill="#f4f0ff"/>
+    <text x="335" y="535" font-size="30" fill="#12345b">ssh</text>
+    <text x="335" y="565" font-size="19" fill="#526173">원격 셸 접속</text>
+    <rect x="645" y="470" width="270" height="120" rx="20" fill="#ecfeff"/>
+    <text x="680" y="535" font-size="30" fill="#12345b">ufw / firewall</text>
+    <text x="680" y="565" font-size="19" fill="#526173">접근 허용과 차단</text>
+  </g>
+</svg>
--- a/imgs/linux_overview.svg
+++ b/imgs/linux_overview.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="760" viewBox="0 0 1200 760" role="img" aria-labelledby="title desc">
+  <title id="title">Linux overview learning map</title>
+  <desc id="desc">Linux basics organized around shell commands, files, permissions, processes, packages, and networking.</desc>
+  <rect width="1200" height="760" fill="#f5f9ff"/>
+  <rect x="70" y="70" width="1060" height="620" rx="28" fill="#ffffff" stroke="#b8c9df" stroke-width="4"/>
+  <text x="110" y="150" font-family="Segoe UI, Arial, sans-serif" font-size="54" font-weight="800" fill="#12345b">Linux 기초 개념</text>
+  <text x="110" y="205" font-family="Segoe UI, Arial, sans-serif" font-size="26" fill="#526173">명령어, 파일 시스템, 권한, 프로세스, 패키지, 네트워크를 한 흐름으로 봅니다.</text>
+  <g font-family="Segoe UI, Arial, sans-serif" font-size="26" font-weight="800" fill="#12345b">
+    <rect x="110" y="285" width="265" height="120" rx="18" fill="#e8f1ff" stroke="#9ab8dc"/>
+    <text x="140" y="350">Shell</text>
+    <text x="140" y="382" font-size="18" font-weight="600" fill="#526173">명령 실행과 조합</text>
+    <rect x="465" y="285" width="265" height="120" rx="18" fill="#ecfdf5" stroke="#91cbb2"/>
+    <text x="495" y="350">Filesystem</text>
+    <text x="495" y="382" font-size="18" font-weight="600" fill="#526173">경로와 저장 위치</text>
+    <rect x="820" y="285" width="265" height="120" rx="18" fill="#fff7ed" stroke="#e0b07a"/>
+    <text x="850" y="350">Permission</text>
+    <text x="850" y="382" font-size="18" font-weight="600" fill="#526173">사용자와 접근 제어</text>
+    <rect x="290" y="500" width="265" height="120" rx="18" fill="#f4f0ff" stroke="#b7a6e8"/>
+    <text x="320" y="565">Process</text>
+    <text x="320" y="597" font-size="18" font-weight="600" fill="#526173">실행 중인 작업</text>
+    <rect x="645" y="500" width="265" height="120" rx="18" fill="#ecfeff" stroke="#8acdd5"/>
+    <text x="675" y="565">Package &amp; Network</text>
+    <text x="675" y="597" font-size="18" font-weight="600" fill="#526173">설치, 통신, 원격 접속</text>
+  </g>
+</svg>
--- a/imgs/linux_permissions.svg
+++ b/imgs/linux_permissions.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="760" viewBox="0 0 1200 760" role="img" aria-labelledby="title desc">
+  <title id="title">Linux permissions</title>
+  <desc id="desc">Linux permission model showing owner, group, others and read, write, execute bits.</desc>
+  <rect width="1200" height="760" fill="#f5f9ff"/>
+  <text x="90" y="120" font-family="Segoe UI, Arial, sans-serif" font-size="50" font-weight="800" fill="#12345b">권한과 사용자</text>
+  <text x="90" y="170" font-family="Segoe UI, Arial, sans-serif" font-size="24" fill="#526173">파일마다 소유자, 그룹, 그 외 사용자에게 읽기/쓰기/실행 권한을 나누어 줍니다.</text>
+  <rect x="120" y="245" width="960" height="110" rx="20" fill="#0b1728"/>
+  <text x="170" y="315" font-family="Cascadia Code, Consolas, monospace" font-size="38" fill="#d6e4ff">- rwx r-x r--  user  devs  deploy.sh</text>
+  <g font-family="Segoe UI, Arial, sans-serif" font-size="25" font-weight="800" text-anchor="middle">
+    <rect x="150" y="435" width="220" height="110" rx="18" fill="#e8f1ff"/>
+    <text x="260" y="485" fill="#12345b">Owner</text>
+    <text x="260" y="520" font-size="20" fill="#526173">파일 주인</text>
+    <rect x="490" y="435" width="220" height="110" rx="18" fill="#ecfdf5"/>
+    <text x="600" y="485" fill="#12345b">Group</text>
+    <text x="600" y="520" font-size="20" fill="#526173">공동 작업 단위</text>
+    <rect x="830" y="435" width="220" height="110" rx="18" fill="#fff7ed"/>
+    <text x="940" y="485" fill="#12345b">Others</text>
+    <text x="940" y="520" font-size="20" fill="#526173">나머지 사용자</text>
+  </g>
+  <text x="130" y="635" font-family="Segoe UI, Arial, sans-serif" font-size="27" fill="#526173">chmod는 권한을 바꾸고, chown은 소유자를 바꾸며, sudo는 관리자 권한으로 실행합니다.</text>
+</svg>
--- a/imgs/linux_processes.svg
+++ b/imgs/linux_processes.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="760" viewBox="0 0 1200 760" role="img" aria-labelledby="title desc">
+  <title id="title">Linux processes and services</title>
+  <desc id="desc">Linux process and service flow with systemd, processes, logs, and scheduled jobs.</desc>
+  <rect width="1200" height="760" fill="#f5f9ff"/>
+  <text x="90" y="120" font-family="Segoe UI, Arial, sans-serif" font-size="50" font-weight="800" fill="#12345b">프로세스와 서비스</text>
+  <text x="90" y="170" font-family="Segoe UI, Arial, sans-serif" font-size="24" fill="#526173">실행 중인 프로그램을 관찰하고, 서비스로 등록하고, 로그와 예약 작업으로 운영합니다.</text>
+  <g font-family="Segoe UI, Arial, sans-serif" font-weight="800">
+    <rect x="150" y="260" width="260" height="120" rx="20" fill="#e8f1ff"/>
+    <text x="190" y="325" font-size="30" fill="#12345b">ps / top</text>
+    <text x="190" y="355" font-size="19" fill="#526173">무엇이 실행 중인지 보기</text>
+    <rect x="470" y="260" width="260" height="120" rx="20" fill="#ecfdf5"/>
+    <text x="510" y="325" font-size="30" fill="#12345b">systemd</text>
+    <text x="510" y="355" font-size="19" fill="#526173">서비스 시작과 자동 실행</text>
+    <rect x="790" y="260" width="260" height="120" rx="20" fill="#fff7ed"/>
+    <text x="830" y="325" font-size="30" fill="#12345b">journalctl</text>
+    <text x="830" y="355" font-size="19" fill="#526173">서비스 로그 확인</text>
+    <rect x="310" y="470" width="260" height="120" rx="20" fill="#f4f0ff"/>
+    <text x="350" y="535" font-size="30" fill="#12345b">kill</text>
+    <text x="350" y="565" font-size="19" fill="#526173">종료 신호 보내기</text>
+    <rect x="630" y="470" width="260" height="120" rx="20" fill="#ecfeff"/>
+    <text x="670" y="535" font-size="30" fill="#12345b">cron</text>
+    <text x="670" y="565" font-size="19" fill="#526173">정해진 시간에 실행</text>
+  </g>
+</svg>
--- a/imgs/linux_shell.svg
+++ b/imgs/linux_shell.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="760" viewBox="0 0 1200 760" role="img" aria-labelledby="title desc">
+  <title id="title">Linux shell commands</title>
+  <desc id="desc">A terminal style diagram showing command structure, pipes, redirects, grep, find, environment variables, and history.</desc>
+  <rect width="1200" height="760" fill="#f5f9ff"/>
+  <rect x="90" y="80" width="1020" height="600" rx="26" fill="#0b1728"/>
+  <rect x="90" y="80" width="1020" height="72" rx="26" fill="#17263d"/>
+  <circle cx="135" cy="116" r="12" fill="#ef4444"/>
+  <circle cx="174" cy="116" r="12" fill="#f59e0b"/>
+  <circle cx="213" cy="116" r="12" fill="#22c55e"/>
+  <text x="130" y="230" font-family="Cascadia Code, Consolas, monospace" font-size="34" fill="#d6e4ff">$ ls -la /var/log | grep error &gt; errors.txt</text>
+  <g font-family="Segoe UI, Arial, sans-serif" font-size="24" font-weight="800">
+    <rect x="145" y="310" width="185" height="90" rx="14" fill="#e8f1ff"/>
+    <text x="172" y="365" fill="#12345b">명령어</text>
+    <rect x="380" y="310" width="185" height="90" rx="14" fill="#ecfdf5"/>
+    <text x="407" y="365" fill="#12345b">옵션/인자</text>
+    <rect x="615" y="310" width="185" height="90" rx="14" fill="#fff7ed"/>
+    <text x="642" y="365" fill="#12345b">파이프</text>
+    <rect x="850" y="310" width="185" height="90" rx="14" fill="#f4f0ff"/>
+    <text x="877" y="365" fill="#12345b">리다이렉트</text>
+  </g>
+  <text x="145" y="490" font-family="Segoe UI, Arial, sans-serif" font-size="30" font-weight="800" fill="#ffffff">Shell은 작은 명령을 조합해 원하는 결과를 만드는 작업대입니다.</text>
+  <text x="145" y="545" font-family="Segoe UI, Arial, sans-serif" font-size="22" fill="#b6c6dd">pwd, cd, ls로 위치를 잡고 grep/find로 찾고, PATH와 history로 반복 작업을 줄입니다.</text>
+</svg>
--- a/index.html
+++ b/index.html
@@ -3,17 +3,21 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>웹 개발 용어 마인드맵</title>
+    <title>학습 용어 마인드맵</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main class="learning-canvas" id="viewport" aria-labelledby="page-title">
      <header class="hud">
        <div>
-          <p class="eyebrow">Web Learning Map</p>
+          <p class="eyebrow" id="mapEyebrow">Web Learning Map</p>
          <h1 id="page-title">웹 개발 용어 마인드맵</h1>
        </div>
        <div class="hud-actions">
+          <div class="map-switcher" aria-label="마인드맵 주제 선택">
+            <button class="map-tab is-selected" data-map="web" type="button" aria-pressed="true">웹</button>
+            <button class="map-tab" data-map="linux" type="button" aria-pressed="false">리눅스</button>
+          </div>
          <button id="resetView" type="button">중앙으로</button>
          <button id="foldAll" type="button">접기</button>
        </div>
--- a/script.js
+++ b/script.js
@@ -1,4 +1,4 @@
-const nodes = [
+const webNodes = [
  {
    id: "root",
    type: "root",
@@ -485,11 +485,517 @@ const nodes = [
  },
 ];

+const linuxNodes = [
+  {
+    id: "root",
+    type: "root",
+    title: "리눅스",
+    subtitle: "클릭해서 펼치기",
+    image: "imgs/linux_overview.svg",
+    category: "전체 개요",
+    focus: "리눅스를 터미널, 파일 시스템, 권한, 프로세스, 패키지, 네트워크 흐름으로 나누어 봅니다.",
+    x: 1020,
+    y: 700,
+    children: ["linux-basics", "linux-shell", "linux-filesystem", "linux-permissions", "linux-processes", "linux-packages-network"],
+  },
+  {
+    id: "linux-basics",
+    parent: "root",
+    type: "category",
+    title: "기초 개념",
+    subtitle: "운영체제와 도움말",
+    image: "imgs/linux_overview.svg",
+    category: "기초 개념",
+    focus: "리눅스가 커널, 배포판, 셸, 패키지 저장소로 구성된 운영체제 생태계라는 큰 그림을 봅니다.",
+    x: 1020,
+    y: 420,
+    children: ["linux-kernel", "linux-distro", "linux-terminal", "linux-man-pages", "linux-sudo-basics"],
+  },
+  {
+    id: "linux-shell",
+    parent: "root",
+    type: "category",
+    title: "셸 명령어",
+    subtitle: "명령 실행과 조합",
+    image: "imgs/linux_shell.svg",
+    category: "셸 명령어",
+    focus: "셸은 명령어, 옵션, 인자, 파이프, 리다이렉트를 조합해 작업을 자동화하는 인터페이스입니다.",
+    x: 1360,
+    y: 560,
+    children: ["linux-command-shape", "linux-pwd-ls-cd", "linux-file-ops", "linux-pipes", "linux-grep-find", "linux-history", "linux-env-path"],
+  },
+  {
+    id: "linux-filesystem",
+    parent: "root",
+    type: "category",
+    title: "파일 시스템",
+    subtitle: "경로와 디렉터리",
+    image: "imgs/linux_filesystem.svg",
+    category: "파일 시스템",
+    focus: "리눅스는 모든 경로가 루트(/)에서 시작하고, 설정·로그·사용자 파일이 관례적인 위치에 놓입니다.",
+    x: 1320,
+    y: 900,
+    children: ["linux-root-path", "linux-home-etc-var", "linux-hidden-files", "linux-mounts", "linux-links"],
+  },
+  {
+    id: "linux-permissions",
+    parent: "root",
+    type: "category",
+    title: "권한",
+    subtitle: "사용자와 접근 제어",
+    image: "imgs/linux_permissions.svg",
+    category: "권한",
+    focus: "사용자, 그룹, 읽기/쓰기/실행 권한을 이해하면 파일 접근과 관리자 작업을 안전하게 다룰 수 있습니다.",
+    x: 1020,
+    y: 1030,
+    children: ["linux-users-groups", "linux-rwx", "linux-chmod-chown", "linux-sudo", "linux-ssh-keys"],
+  },
+  {
+    id: "linux-processes",
+    parent: "root",
+    type: "category",
+    title: "프로세스",
+    subtitle: "실행 중인 작업",
+    image: "imgs/linux_processes.svg",
+    category: "프로세스",
+    focus: "프로세스와 서비스 상태를 보고, 필요하면 종료하거나 로그를 확인하고, 예약 실행까지 연결합니다.",
+    x: 660,
+    y: 900,
+    children: ["linux-ps-top", "linux-kill", "linux-systemd", "linux-logs", "linux-cron"],
+  },
+  {
+    id: "linux-packages-network",
+    parent: "root",
+    type: "category",
+    title: "패키지·네트워크",
+    subtitle: "설치와 원격 접속",
+    image: "imgs/linux_network_packages.svg",
+    category: "패키지·네트워크",
+    focus: "패키지 관리자로 도구를 설치하고, 네트워크 명령과 SSH로 서버 상태를 확인합니다.",
+    x: 660,
+    y: 560,
+    children: ["linux-apt-dnf", "linux-update-upgrade", "linux-ping-ss", "linux-curl-wget", "linux-ssh", "linux-firewall"],
+  },
+  {
+    id: "linux-kernel",
+    parent: "linux-basics",
+    type: "term",
+    title: "커널",
+    subtitle: "기초 개념",
+    image: "imgs/linux_overview.svg",
+    category: "기초 개념",
+    focus: "커널은 CPU, 메모리, 파일, 네트워크 같은 하드웨어 자원을 프로그램이 안전하게 쓰도록 중재합니다.",
+    x: 650,
+    y: 170,
+  },
+  {
+    id: "linux-distro",
+    parent: "linux-basics",
+    type: "term",
+    title: "배포판",
+    subtitle: "기초 개념",
+    image: "imgs/linux_overview.svg",
+    category: "기초 개념",
+    focus: "Ubuntu, Debian, Fedora 같은 배포판은 커널 위에 기본 도구, 패키지 저장소, 설정 방식을 묶어 제공합니다.",
+    x: 720,
+    y: 330,
+  },
+  {
+    id: "linux-terminal",
+    parent: "linux-basics",
+    type: "term",
+    title: "터미널",
+    subtitle: "기초 개념",
+    image: "imgs/linux_shell.svg",
+    category: "기초 개념",
+    focus: "터미널은 셸을 통해 명령을 입력하고 결과를 확인하는 창입니다.",
+    x: 1020,
+    y: 240,
+  },
+  {
+    id: "linux-man-pages",
+    parent: "linux-basics",
+    type: "term",
+    title: "man · --help",
+    subtitle: "기초 개념",
+    image: "imgs/linux_shell.svg",
+    category: "기초 개념",
+    focus: "명령어가 헷갈릴 때는 man, --help, tldr 같은 도움말로 옵션과 사용 예를 먼저 확인합니다.",
+    x: 1320,
+    y: 330,
+  },
+  {
+    id: "linux-sudo-basics",
+    parent: "linux-basics",
+    type: "term",
+    title: "관리자 작업",
+    subtitle: "기초 개념",
+    image: "imgs/linux_permissions.svg",
+    category: "기초 개념",
+    focus: "시스템 설정, 패키지 설치, 서비스 제어처럼 영향 범위가 큰 작업은 관리자 권한이 필요합니다.",
+    x: 1290,
+    y: 150,
+  },
+  {
+    id: "linux-command-shape",
+    parent: "linux-shell",
+    type: "term",
+    title: "명령어 구조",
+    subtitle: "셸 명령어",
+    image: "imgs/linux_shell.svg",
+    category: "셸 명령어",
+    focus: "대부분의 명령은 command --option argument 형태이며, 옵션은 동작 방식을 바꾸고 인자는 대상을 지정합니다.",
+    x: 1530,
+    y: 380,
+  },
+  {
+    id: "linux-pwd-ls-cd",
+    parent: "linux-shell",
+    type: "term",
+    title: "pwd · ls · cd",
+    subtitle: "셸 명령어",
+    image: "imgs/linux_shell.svg",
+    category: "셸 명령어",
+    focus: "pwd로 현재 위치를 보고, ls로 목록을 확인하고, cd로 디렉터리를 이동합니다.",
+    x: 1640,
+    y: 560,
+  },
+  {
+    id: "linux-file-ops",
+    parent: "linux-shell",
+    type: "term",
+    title: "cp · mv · rm",
+    subtitle: "셸 명령어",
+    image: "imgs/linux_shell.svg",
+    category: "셸 명령어",
+    focus: "cp는 복사, mv는 이동/이름 변경, rm은 삭제입니다. 삭제 명령은 되돌리기 어렵기 때문에 대상 경로를 먼저 확인합니다.",
+    x: 1720,
+    y: 410,
+  },
+  {
+    id: "linux-pipes",
+    parent: "linux-shell",
+    type: "term",
+    title: "파이프 · 리다이렉트",
+    subtitle: "셸 명령어",
+    image: "imgs/linux_shell.svg",
+    category: "셸 명령어",
+    focus: "파이프(|)는 한 명령의 출력을 다음 명령으로 넘기고, > 또는 >>는 출력을 파일에 저장합니다.",
+    x: 1530,
+    y: 740,
+  },
+  {
+    id: "linux-grep-find",
+    parent: "linux-shell",
+    type: "term",
+    title: "grep · find",
+    subtitle: "셸 명령어",
+    image: "imgs/linux_shell.svg",
+    category: "셸 명령어",
+    focus: "grep은 텍스트 안에서 패턴을 찾고, find는 파일 시스템에서 조건에 맞는 파일과 디렉터리를 찾습니다.",
+    x: 1740,
+    y: 760,
+  },
+  {
+    id: "linux-history",
+    parent: "linux-shell",
+    type: "term",
+    title: "history",
+    subtitle: "셸 명령어",
+    image: "imgs/linux_shell.svg",
+    category: "셸 명령어",
+    focus: "history와 방향키, Ctrl+R 검색을 쓰면 이전 명령을 빠르게 재사용할 수 있습니다.",
+    x: 1780,
+    y: 620,
+  },
+  {
+    id: "linux-env-path",
+    parent: "linux-shell",
+    type: "term",
+    title: "환경 변수 · PATH",
+    subtitle: "셸 명령어",
+    image: "imgs/linux_shell.svg",
+    category: "셸 명령어",
+    focus: "환경 변수는 현재 셸과 프로그램에 전달되는 설정이고, PATH는 명령어 실행 파일을 찾는 디렉터리 목록입니다.",
+    x: 1470,
+    y: 240,
+  },
+  {
+    id: "linux-root-path",
+    parent: "linux-filesystem",
+    type: "term",
+    title: "루트 경로 /",
+    subtitle: "파일 시스템",
+    image: "imgs/linux_filesystem.svg",
+    category: "파일 시스템",
+    focus: "리눅스의 모든 절대 경로는 루트(/)에서 시작합니다.",
+    x: 1510,
+    y: 810,
+  },
+  {
+    id: "linux-home-etc-var",
+    parent: "linux-filesystem",
+    type: "term",
+    title: "/home · /etc · /var",
+    subtitle: "파일 시스템",
+    image: "imgs/linux_filesystem.svg",
+    category: "파일 시스템",
+    focus: "/home은 사용자 파일, /etc는 시스템 설정, /var는 로그와 변하는 데이터를 주로 담습니다.",
+    x: 1600,
+    y: 940,
+  },
+  {
+    id: "linux-hidden-files",
+    parent: "linux-filesystem",
+    type: "term",
+    title: "숨김 파일",
+    subtitle: "파일 시스템",
+    image: "imgs/linux_filesystem.svg",
+    category: "파일 시스템",
+    focus: ".bashrc처럼 점(.)으로 시작하는 파일은 기본 목록에서 숨겨지며, 보통 사용자 설정을 담습니다.",
+    x: 1460,
+    y: 1080,
+  },
+  {
+    id: "linux-mounts",
+    parent: "linux-filesystem",
+    type: "term",
+    title: "mount",
+    subtitle: "파일 시스템",
+    image: "imgs/linux_filesystem.svg",
+    category: "파일 시스템",
+    focus: "디스크, USB, 네트워크 저장소는 특정 디렉터리에 마운트되어 파일 시스템 일부처럼 보입니다.",
+    x: 1190,
+    y: 1160,
+  },
+  {
+    id: "linux-links",
+    parent: "linux-filesystem",
+    type: "term",
+    title: "심볼릭 링크",
+    subtitle: "파일 시스템",
+    image: "imgs/linux_filesystem.svg",
+    category: "파일 시스템",
+    focus: "심볼릭 링크는 다른 파일이나 디렉터리를 가리키는 바로가기이며 ln -s로 만듭니다.",
+    x: 1740,
+    y: 1040,
+  },
+  {
+    id: "linux-users-groups",
+    parent: "linux-permissions",
+    type: "term",
+    title: "사용자 · 그룹",
+    subtitle: "권한",
+    image: "imgs/linux_permissions.svg",
+    category: "권한",
+    focus: "리눅스는 사용자와 그룹 단위로 파일 접근, 서비스 실행, 관리자 작업 가능 여부를 나눕니다.",
+    x: 760,
+    y: 1010,
+  },
+  {
+    id: "linux-rwx",
+    parent: "linux-permissions",
+    type: "term",
+    title: "rwx 권한",
+    subtitle: "권한",
+    image: "imgs/linux_permissions.svg",
+    category: "권한",
+    focus: "r은 읽기, w는 쓰기, x는 실행 권한입니다. 디렉터리의 x는 내부로 들어갈 수 있는 권한에 가깝습니다.",
+    x: 880,
+    y: 1280,
+  },
+  {
+    id: "linux-chmod-chown",
+    parent: "linux-permissions",
+    type: "term",
+    title: "chmod · chown",
+    subtitle: "권한",
+    image: "imgs/linux_permissions.svg",
+    category: "권한",
+    focus: "chmod는 권한 비트를 바꾸고, chown은 파일의 소유자나 그룹을 바꿉니다.",
+    x: 1180,
+    y: 1300,
+  },
+  {
+    id: "linux-sudo",
+    parent: "linux-permissions",
+    type: "term",
+    title: "sudo",
+    subtitle: "권한",
+    image: "imgs/linux_permissions.svg",
+    category: "권한",
+    focus: "sudo는 허용된 사용자가 한 명령을 관리자 권한으로 실행하게 해 줍니다.",
+    x: 810,
+    y: 1500,
+  },
+  {
+    id: "linux-ssh-keys",
+    parent: "linux-permissions",
+    type: "term",
+    title: "SSH Key 권한",
+    subtitle: "권한",
+    image: "imgs/linux_permissions.svg",
+    category: "권한",
+    focus: "개인 키는 너무 열려 있으면 SSH가 거부할 수 있으므로 보통 chmod 600처럼 제한적으로 둡니다.",
+    x: 1420,
+    y: 1210,
+  },
+  {
+    id: "linux-ps-top",
+    parent: "linux-processes",
+    type: "term",
+    title: "ps · top",
+    subtitle: "프로세스",
+    image: "imgs/linux_processes.svg",
+    category: "프로세스",
+    focus: "ps는 프로세스 목록을 출력하고, top/htop은 CPU와 메모리 사용량을 실시간으로 보여 줍니다.",
+    x: 390,
+    y: 820,
+  },
+  {
+    id: "linux-kill",
+    parent: "linux-processes",
+    type: "term",
+    title: "kill",
+    subtitle: "프로세스",
+    image: "imgs/linux_processes.svg",
+    category: "프로세스",
+    focus: "kill은 프로세스에 종료 신호를 보내며, 강제 종료 전에 정상 종료 신호를 먼저 고려합니다.",
+    x: 420,
+    y: 1080,
+  },
+  {
+    id: "linux-systemd",
+    parent: "linux-processes",
+    type: "term",
+    title: "systemd · service",
+    subtitle: "프로세스",
+    image: "imgs/linux_processes.svg",
+    category: "프로세스",
+    focus: "systemctl로 서비스를 시작, 중지, 재시작, 자동 실행 설정할 수 있습니다.",
+    x: 260,
+    y: 940,
+  },
+  {
+    id: "linux-logs",
+    parent: "linux-processes",
+    type: "term",
+    title: "로그",
+    subtitle: "프로세스",
+    image: "imgs/linux_processes.svg",
+    category: "프로세스",
+    focus: "journalctl과 /var/log는 서비스 오류와 시스템 이벤트를 추적하는 첫 번째 단서입니다.",
+    x: 200,
+    y: 1190,
+  },
+  {
+    id: "linux-cron",
+    parent: "linux-processes",
+    type: "term",
+    title: "cron",
+    subtitle: "프로세스",
+    image: "imgs/linux_processes.svg",
+    category: "프로세스",
+    focus: "cron은 정해진 시간에 백업, 정리, 점검 스크립트를 반복 실행할 때 사용합니다.",
+    x: 610,
+    y: 1190,
+  },
+  {
+    id: "linux-apt-dnf",
+    parent: "linux-packages-network",
+    type: "term",
+    title: "apt · dnf",
+    subtitle: "패키지·네트워크",
+    image: "imgs/linux_network_packages.svg",
+    category: "패키지·네트워크",
+    focus: "apt는 Debian/Ubuntu 계열, dnf는 Fedora/RHEL 계열에서 패키지를 설치하고 제거하는 대표 도구입니다.",
+    x: 560,
+    y: 310,
+  },
+  {
+    id: "linux-update-upgrade",
+    parent: "linux-packages-network",
+    type: "term",
+    title: "update · upgrade",
+    subtitle: "패키지·네트워크",
+    image: "imgs/linux_network_packages.svg",
+    category: "패키지·네트워크",
+    focus: "update는 패키지 목록을 새로 받고, upgrade는 설치된 패키지를 새 버전으로 올립니다.",
+    x: 390,
+    y: 470,
+  },
+  {
+    id: "linux-ping-ss",
+    parent: "linux-packages-network",
+    type: "term",
+    title: "ping · ss",
+    subtitle: "패키지·네트워크",
+    image: "imgs/linux_network_packages.svg",
+    category: "패키지·네트워크",
+    focus: "ping은 연결 가능성을 확인하고, ss는 열린 포트와 소켓 상태를 확인합니다.",
+    x: 780,
+    y: 420,
+  },
+  {
+    id: "linux-curl-wget",
+    parent: "linux-packages-network",
+    type: "term",
+    title: "curl · wget",
+    subtitle: "패키지·네트워크",
+    image: "imgs/linux_network_packages.svg",
+    category: "패키지·네트워크",
+    focus: "curl은 HTTP 요청과 응답 확인에 강하고, wget은 파일 다운로드에 자주 쓰입니다.",
+    x: 350,
+    y: 650,
+  },
+  {
+    id: "linux-ssh",
+    parent: "linux-packages-network",
+    type: "term",
+    title: "ssh",
+    subtitle: "패키지·네트워크",
+    image: "imgs/linux_network_packages.svg",
+    category: "패키지·네트워크",
+    focus: "ssh는 원격 서버의 셸에 안전하게 접속하는 기본 도구입니다.",
+    x: 780,
+    y: 660,
+  },
+  {
+    id: "linux-firewall",
+    parent: "linux-packages-network",
+    type: "term",
+    title: "방화벽",
+    subtitle: "패키지·네트워크",
+    image: "imgs/linux_network_packages.svg",
+    category: "패키지·네트워크",
+    focus: "ufw, firewalld, iptables 같은 도구로 외부에서 접근 가능한 포트와 규칙을 제한합니다.",
+    x: 480,
+    y: 210,
+  },
+];
+
+const maps = {
+  web: {
+    eyebrow: "Web Learning Map",
+    title: "웹 개발 용어 마인드맵",
+    ariaLabel: "접을 수 있는 웹 개발 용어 지도",
+    nodes: webNodes,
+  },
+  linux: {
+    eyebrow: "Linux Learning Map",
+    title: "리눅스 기초 마인드맵",
+    ariaLabel: "접을 수 있는 리눅스 기초 개념 지도",
+    nodes: linuxNodes,
+  },
+};
+
 const viewport = document.querySelector("#viewport");
 const world = document.querySelector("#world");
 const nodeLayer = document.querySelector("#nodeLayer");
 const connectorLayer = document.querySelector("#connectorLayer");
 const visibleCount = document.querySelector("#visibleCount");
+const pageTitle = document.querySelector("#page-title");
+const mapEyebrow = document.querySelector("#mapEyebrow");
 const lightbox = document.querySelector("#lightbox");
 const lightboxImage = document.querySelector("#lightboxImage");
 const lightboxCaption = document.querySelector("#lightboxCaption");
@@ -502,7 +1008,9 @@ const zoomOutButton = document.querySelector("#zoomOut");
 const zoomResetButton = document.querySelector("#zoomReset");
 const fullscreenToggle = document.querySelector("#fullscreenToggle");

-const nodeMap = new Map(nodes.map((node) => [node.id, node]));
+let activeMapId = "web";
+let nodes = maps[activeMapId].nodes;
+let nodeMap = new Map(nodes.map((node) => [node.id, node]));
 const expanded = new Set();
 let pan = { x: window.innerWidth / 2 - 1136, y: window.innerHeight / 2 - 764 };
 let activePointer = null;
@@ -526,6 +1034,29 @@ function setWorldTransform() {
  world.style.transform = `translate(${pan.x}px, ${pan.y}px)`;
 }

+function syncMapChrome() {
+  const activeMap = maps[activeMapId];
+  pageTitle.textContent = activeMap.title;
+  mapEyebrow.textContent = activeMap.eyebrow;
+  nodeLayer.setAttribute("aria-label", activeMap.ariaLabel);
+  for (const button of document.querySelectorAll(".map-tab")) {
+    const isSelected = button.dataset.map === activeMapId;
+    button.classList.toggle("is-selected", isSelected);
+    button.setAttribute("aria-pressed", String(isSelected));
+  }
+}
+
+function switchMap(mapId) {
+  if (!maps[mapId] || mapId === activeMapId) return;
+  activeMapId = mapId;
+  nodes = maps[activeMapId].nodes;
+  nodeMap = new Map(nodes.map((node) => [node.id, node]));
+  expanded.clear();
+  syncMapChrome();
+  resetView();
+  render();
+}
+
 function render() {
  const visible = new Set(visibleNodeIds());
  nodeLayer.innerHTML = "";
@@ -820,6 +1351,9 @@ window.addEventListener("pointerup", onPointerUp);
 window.addEventListener("pointercancel", onPointerUp);
 document.querySelector("#resetView").addEventListener("click", resetView);
 document.querySelector("#foldAll").addEventListener("click", foldAll);
+for (const button of document.querySelectorAll(".map-tab")) {
+  button.addEventListener("click", () => switchMap(button.dataset.map));
+}
 document.querySelector(".lightbox-backdrop").addEventListener("click", closeLightbox);
 document.querySelector("#closeLightbox").addEventListener("click", closeLightbox);
 zoomInButton.addEventListener("click", () => setZoom(zoomState.scale + 0.25));
@@ -843,4 +1377,5 @@ document.addEventListener("keydown", (event) => {
 window.addEventListener("resize", resetView);

 setWorldTransform();
+syncMapChrome();
 render();
--- a/styles.css
+++ b/styles.css
@@ -85,17 +85,24 @@ h1 {

 .hud-actions {
  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
 }

-.hud-actions button {
+.hud-actions button,
+.map-switcher {
  border: 1px solid rgba(191, 208, 232, 0.92);
  border-radius: 8px;
-  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(18, 32, 51, 0.1);
+}
+
+.hud-actions button {
+  padding: 10px 13px;
  cursor: pointer;
 }

@@ -103,6 +110,23 @@ h1 {
  border-color: var(--accent);
 }

+.map-switcher {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+}
+
+.map-switcher .map-tab {
+  border: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.map-switcher .map-tab.is-selected {
+  background: var(--accent-deep);
+  color: #fff;
+}
+
 .canvas-help {
  position: fixed;
  left: 18px;