Add generated Linux card infographics

script.js

@@ -491,7 +491,7 @@ const linuxNodes = [
     type: "root",
     title: "리눅스",
     subtitle: "클릭해서 펼치기",
-    image: "imgs/linux_overview.svg",
+    image: "imgs/linux_card_root.png",
     category: "전체 개요",
     focus: "리눅스를 터미널, 파일 시스템, 권한, 프로세스, 패키지, 네트워크 흐름으로 나누어 봅니다.",
     x: 1020,
@@ -504,7 +504,7 @@ const linuxNodes = [
     type: "category",
     title: "기초 개념",
     subtitle: "운영체제와 도움말",
-    image: "imgs/linux_overview.svg",
+    image: "imgs/linux_card_linux_basics.png",
     category: "기초 개념",
     focus: "리눅스가 커널, 배포판, 셸, 패키지 저장소로 구성된 운영체제 생태계라는 큰 그림을 봅니다.",
     x: 1020,
@@ -517,7 +517,7 @@ const linuxNodes = [
     type: "category",
     title: "셸 명령어",
     subtitle: "명령 실행과 조합",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_shell.png",
     category: "셸 명령어",
     focus: "셸은 명령어, 옵션, 인자, 파이프, 리다이렉트를 조합해 작업을 자동화하는 인터페이스입니다.",
     x: 1360,
@@ -530,7 +530,7 @@ const linuxNodes = [
     type: "category",
     title: "파일 시스템",
     subtitle: "경로와 디렉터리",
-    image: "imgs/linux_filesystem.svg",
+    image: "imgs/linux_card_linux_filesystem.png",
     category: "파일 시스템",
     focus: "리눅스는 모든 경로가 루트(/)에서 시작하고, 설정·로그·사용자 파일이 관례적인 위치에 놓입니다.",
     x: 1320,
@@ -543,7 +543,7 @@ const linuxNodes = [
     type: "category",
     title: "권한",
     subtitle: "사용자와 접근 제어",
-    image: "imgs/linux_permissions.svg",
+    image: "imgs/linux_card_linux_permissions.png",
     category: "권한",
     focus: "사용자, 그룹, 읽기/쓰기/실행 권한을 이해하면 파일 접근과 관리자 작업을 안전하게 다룰 수 있습니다.",
     x: 1020,
@@ -556,7 +556,7 @@ const linuxNodes = [
     type: "category",
     title: "프로세스",
     subtitle: "실행 중인 작업",
-    image: "imgs/linux_processes.svg",
+    image: "imgs/linux_card_linux_processes.png",
     category: "프로세스",
     focus: "프로세스와 서비스 상태를 보고, 필요하면 종료하거나 로그를 확인하고, 예약 실행까지 연결합니다.",
     x: 660,
@@ -569,7 +569,7 @@ const linuxNodes = [
     type: "category",
     title: "패키지·네트워크",
     subtitle: "설치와 원격 접속",
-    image: "imgs/linux_network_packages.svg",
+    image: "imgs/linux_card_linux_packages_network.png",
     category: "패키지·네트워크",
     focus: "패키지 관리자로 도구를 설치하고, 네트워크 명령과 SSH로 서버 상태를 확인합니다.",
     x: 660,
@@ -582,7 +582,7 @@ const linuxNodes = [
     type: "term",
     title: "커널",
     subtitle: "기초 개념",
-    image: "imgs/linux_overview.svg",
+    image: "imgs/linux_card_linux_kernel.png",
     category: "기초 개념",
     focus: "커널은 CPU, 메모리, 파일, 네트워크 같은 하드웨어 자원을 프로그램이 안전하게 쓰도록 중재합니다.",
     x: 650,
@@ -594,7 +594,7 @@ const linuxNodes = [
     type: "term",
     title: "배포판",
     subtitle: "기초 개념",
-    image: "imgs/linux_overview.svg",
+    image: "imgs/linux_card_linux_distro.png",
     category: "기초 개념",
     focus: "Ubuntu, Debian, Fedora 같은 배포판은 커널 위에 기본 도구, 패키지 저장소, 설정 방식을 묶어 제공합니다.",
     x: 720,
@@ -606,7 +606,7 @@ const linuxNodes = [
     type: "term",
     title: "터미널",
     subtitle: "기초 개념",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_terminal.png",
     category: "기초 개념",
     focus: "터미널은 셸을 통해 명령을 입력하고 결과를 확인하는 창입니다.",
     x: 1020,
@@ -618,7 +618,7 @@ const linuxNodes = [
     type: "term",
     title: "man · --help",
     subtitle: "기초 개념",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_man_pages.png",
     category: "기초 개념",
     focus: "명령어가 헷갈릴 때는 man, --help, tldr 같은 도움말로 옵션과 사용 예를 먼저 확인합니다.",
     x: 1320,
@@ -630,7 +630,7 @@ const linuxNodes = [
     type: "term",
     title: "관리자 작업",
     subtitle: "기초 개념",
-    image: "imgs/linux_permissions.svg",
+    image: "imgs/linux_card_linux_sudo_basics.png",
     category: "기초 개념",
     focus: "시스템 설정, 패키지 설치, 서비스 제어처럼 영향 범위가 큰 작업은 관리자 권한이 필요합니다.",
     x: 1290,
@@ -642,7 +642,7 @@ const linuxNodes = [
     type: "term",
     title: "명령어 구조",
     subtitle: "셸 명령어",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_command_shape.png",
     category: "셸 명령어",
     focus: "대부분의 명령은 command --option argument 형태이며, 옵션은 동작 방식을 바꾸고 인자는 대상을 지정합니다.",
     x: 1530,
@@ -654,7 +654,7 @@ const linuxNodes = [
     type: "term",
     title: "pwd · ls · cd",
     subtitle: "셸 명령어",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_pwd_ls_cd.png",
     category: "셸 명령어",
     focus: "pwd로 현재 위치를 보고, ls로 목록을 확인하고, cd로 디렉터리를 이동합니다.",
     x: 1640,
@@ -666,7 +666,7 @@ const linuxNodes = [
     type: "term",
     title: "cp · mv · rm",
     subtitle: "셸 명령어",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_file_ops.png",
     category: "셸 명령어",
     focus: "cp는 복사, mv는 이동/이름 변경, rm은 삭제입니다. 삭제 명령은 되돌리기 어렵기 때문에 대상 경로를 먼저 확인합니다.",
     x: 1720,
@@ -678,7 +678,7 @@ const linuxNodes = [
     type: "term",
     title: "파이프 · 리다이렉트",
     subtitle: "셸 명령어",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_pipes.png",
     category: "셸 명령어",
     focus: "파이프(|)는 한 명령의 출력을 다음 명령으로 넘기고, > 또는 >>는 출력을 파일에 저장합니다.",
     x: 1530,
@@ -690,7 +690,7 @@ const linuxNodes = [
     type: "term",
     title: "grep · find",
     subtitle: "셸 명령어",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_grep_find.png",
     category: "셸 명령어",
     focus: "grep은 텍스트 안에서 패턴을 찾고, find는 파일 시스템에서 조건에 맞는 파일과 디렉터리를 찾습니다.",
     x: 1740,
@@ -702,7 +702,7 @@ const linuxNodes = [
     type: "term",
     title: "history",
     subtitle: "셸 명령어",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_history.png",
     category: "셸 명령어",
     focus: "history와 방향키, Ctrl+R 검색을 쓰면 이전 명령을 빠르게 재사용할 수 있습니다.",
     x: 1780,
@@ -714,7 +714,7 @@ const linuxNodes = [
     type: "term",
     title: "환경 변수 · PATH",
     subtitle: "셸 명령어",
-    image: "imgs/linux_shell.svg",
+    image: "imgs/linux_card_linux_env_path.png",
     category: "셸 명령어",
     focus: "환경 변수는 현재 셸과 프로그램에 전달되는 설정이고, PATH는 명령어 실행 파일을 찾는 디렉터리 목록입니다.",
     x: 1470,
@@ -726,7 +726,7 @@ const linuxNodes = [
     type: "term",
     title: "루트 경로 /",
     subtitle: "파일 시스템",
-    image: "imgs/linux_filesystem.svg",
+    image: "imgs/linux_card_linux_root_path.png",
     category: "파일 시스템",
     focus: "리눅스의 모든 절대 경로는 루트(/)에서 시작합니다.",
     x: 1510,
@@ -738,7 +738,7 @@ const linuxNodes = [
     type: "term",
     title: "/home · /etc · /var",
     subtitle: "파일 시스템",
-    image: "imgs/linux_filesystem.svg",
+    image: "imgs/linux_card_linux_home_etc_var.png",
     category: "파일 시스템",
     focus: "/home은 사용자 파일, /etc는 시스템 설정, /var는 로그와 변하는 데이터를 주로 담습니다.",
     x: 1600,
@@ -750,7 +750,7 @@ const linuxNodes = [
     type: "term",
     title: "숨김 파일",
     subtitle: "파일 시스템",
-    image: "imgs/linux_filesystem.svg",
+    image: "imgs/linux_card_linux_hidden_files.png",
     category: "파일 시스템",
     focus: ".bashrc처럼 점(.)으로 시작하는 파일은 기본 목록에서 숨겨지며, 보통 사용자 설정을 담습니다.",
     x: 1460,
@@ -762,7 +762,7 @@ const linuxNodes = [
     type: "term",
     title: "mount",
     subtitle: "파일 시스템",
-    image: "imgs/linux_filesystem.svg",
+    image: "imgs/linux_card_linux_mounts.png",
     category: "파일 시스템",
     focus: "디스크, USB, 네트워크 저장소는 특정 디렉터리에 마운트되어 파일 시스템 일부처럼 보입니다.",
     x: 1190,
@@ -774,7 +774,7 @@ const linuxNodes = [
     type: "term",
     title: "심볼릭 링크",
     subtitle: "파일 시스템",
-    image: "imgs/linux_filesystem.svg",
+    image: "imgs/linux_card_linux_links.png",
     category: "파일 시스템",
     focus: "심볼릭 링크는 다른 파일이나 디렉터리를 가리키는 바로가기이며 ln -s로 만듭니다.",
     x: 1740,
@@ -786,7 +786,7 @@ const linuxNodes = [
     type: "term",
     title: "사용자 · 그룹",
     subtitle: "권한",
-    image: "imgs/linux_permissions.svg",
+    image: "imgs/linux_card_linux_users_groups.png",
     category: "권한",
     focus: "리눅스는 사용자와 그룹 단위로 파일 접근, 서비스 실행, 관리자 작업 가능 여부를 나눕니다.",
     x: 760,
@@ -798,7 +798,7 @@ const linuxNodes = [
     type: "term",
     title: "rwx 권한",
     subtitle: "권한",
-    image: "imgs/linux_permissions.svg",
+    image: "imgs/linux_card_linux_rwx.png",
     category: "권한",
     focus: "r은 읽기, w는 쓰기, x는 실행 권한입니다. 디렉터리의 x는 내부로 들어갈 수 있는 권한에 가깝습니다.",
     x: 880,
@@ -810,7 +810,7 @@ const linuxNodes = [
     type: "term",
     title: "chmod · chown",
     subtitle: "권한",
-    image: "imgs/linux_permissions.svg",
+    image: "imgs/linux_card_linux_chmod_chown.png",
     category: "권한",
     focus: "chmod는 권한 비트를 바꾸고, chown은 파일의 소유자나 그룹을 바꿉니다.",
     x: 1180,
@@ -822,7 +822,7 @@ const linuxNodes = [
     type: "term",
     title: "sudo",
     subtitle: "권한",
-    image: "imgs/linux_permissions.svg",
+    image: "imgs/linux_card_linux_sudo.png",
     category: "권한",
     focus: "sudo는 허용된 사용자가 한 명령을 관리자 권한으로 실행하게 해 줍니다.",
     x: 810,
@@ -834,7 +834,7 @@ const linuxNodes = [
     type: "term",
     title: "SSH Key 권한",
     subtitle: "권한",
-    image: "imgs/linux_permissions.svg",
+    image: "imgs/linux_card_linux_ssh_keys.png",
     category: "권한",
     focus: "개인 키는 너무 열려 있으면 SSH가 거부할 수 있으므로 보통 chmod 600처럼 제한적으로 둡니다.",
     x: 1420,
@@ -846,7 +846,7 @@ const linuxNodes = [
     type: "term",
     title: "ps · top",
     subtitle: "프로세스",
-    image: "imgs/linux_processes.svg",
+    image: "imgs/linux_card_linux_ps_top.png",
     category: "프로세스",
     focus: "ps는 프로세스 목록을 출력하고, top/htop은 CPU와 메모리 사용량을 실시간으로 보여 줍니다.",
     x: 390,
@@ -858,7 +858,7 @@ const linuxNodes = [
     type: "term",
     title: "kill",
     subtitle: "프로세스",
-    image: "imgs/linux_processes.svg",
+    image: "imgs/linux_card_linux_kill.png",
     category: "프로세스",
     focus: "kill은 프로세스에 종료 신호를 보내며, 강제 종료 전에 정상 종료 신호를 먼저 고려합니다.",
     x: 420,
@@ -870,7 +870,7 @@ const linuxNodes = [
     type: "term",
     title: "systemd · service",
     subtitle: "프로세스",
-    image: "imgs/linux_processes.svg",
+    image: "imgs/linux_card_linux_systemd.png",
     category: "프로세스",
     focus: "systemctl로 서비스를 시작, 중지, 재시작, 자동 실행 설정할 수 있습니다.",
     x: 260,
@@ -882,7 +882,7 @@ const linuxNodes = [
     type: "term",
     title: "로그",
     subtitle: "프로세스",
-    image: "imgs/linux_processes.svg",
+    image: "imgs/linux_card_linux_logs.png",
     category: "프로세스",
     focus: "journalctl과 /var/log는 서비스 오류와 시스템 이벤트를 추적하는 첫 번째 단서입니다.",
     x: 200,
@@ -894,7 +894,7 @@ const linuxNodes = [
     type: "term",
     title: "cron",
     subtitle: "프로세스",
-    image: "imgs/linux_processes.svg",
+    image: "imgs/linux_card_linux_cron.png",
     category: "프로세스",
     focus: "cron은 정해진 시간에 백업, 정리, 점검 스크립트를 반복 실행할 때 사용합니다.",
     x: 610,
@@ -906,7 +906,7 @@ const linuxNodes = [
     type: "term",
     title: "apt · dnf",
     subtitle: "패키지·네트워크",
-    image: "imgs/linux_network_packages.svg",
+    image: "imgs/linux_card_linux_apt_dnf.png",
     category: "패키지·네트워크",
     focus: "apt는 Debian/Ubuntu 계열, dnf는 Fedora/RHEL 계열에서 패키지를 설치하고 제거하는 대표 도구입니다.",
     x: 560,
@@ -918,7 +918,7 @@ const linuxNodes = [
     type: "term",
     title: "update · upgrade",
     subtitle: "패키지·네트워크",
-    image: "imgs/linux_network_packages.svg",
+    image: "imgs/linux_card_linux_update_upgrade.png",
     category: "패키지·네트워크",
     focus: "update는 패키지 목록을 새로 받고, upgrade는 설치된 패키지를 새 버전으로 올립니다.",
     x: 390,
@@ -930,7 +930,7 @@ const linuxNodes = [
     type: "term",
     title: "ping · ss",
     subtitle: "패키지·네트워크",
-    image: "imgs/linux_network_packages.svg",
+    image: "imgs/linux_card_linux_ping_ss.png",
     category: "패키지·네트워크",
     focus: "ping은 연결 가능성을 확인하고, ss는 열린 포트와 소켓 상태를 확인합니다.",
     x: 780,
@@ -942,7 +942,7 @@ const linuxNodes = [
     type: "term",
     title: "curl · wget",
     subtitle: "패키지·네트워크",
-    image: "imgs/linux_network_packages.svg",
+    image: "imgs/linux_card_linux_curl_wget.png",
     category: "패키지·네트워크",
     focus: "curl은 HTTP 요청과 응답 확인에 강하고, wget은 파일 다운로드에 자주 쓰입니다.",
     x: 350,
@@ -954,7 +954,7 @@ const linuxNodes = [
     type: "term",
     title: "ssh",
     subtitle: "패키지·네트워크",
-    image: "imgs/linux_network_packages.svg",
+    image: "imgs/linux_card_linux_ssh.png",
     category: "패키지·네트워크",
     focus: "ssh는 원격 서버의 셸에 안전하게 접속하는 기본 도구입니다.",
     x: 780,
@@ -966,7 +966,7 @@ const linuxNodes = [
     type: "term",
     title: "방화벽",
     subtitle: "패키지·네트워크",
-    image: "imgs/linux_network_packages.svg",
+    image: "imgs/linux_card_linux_firewall.png",
     category: "패키지·네트워크",
     focus: "ufw, firewalld, iptables 같은 도구로 외부에서 접근 가능한 포트와 규칙을 제한합니다.",
     x: 480,