// 이 파일이 하는 일: "그래픽카드와 GPU의 세계" 코스 — CPU와 GPU가 어떻게 다른지에서 출발해
// 화면이 그려지는 원리, 스펙 읽는 법, AI 시대에 GPU가 왜 금값이 됐는지까지 7개 섹션으로 안내하는 정적 학습 페이지.
// (GPU vs CPU → 화면이 그려지는 원리 → 내장 vs 외장 → 스펙 읽기 → 게임·영상·AI 속의 GPU → 개발자와 GPU → 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

import { Link } from 'react-router-dom';

// ── 텍스트 다이어그램 · 표 상수들 ──

const CODE_CPU_GPU = `CPU vs GPU — 코어 수와 일하는 방식이 다르다

          CPU (한 명의 천재)          GPU (만 명의 일꾼)
────────────────────────────────────────────────────────
코어 수    4~24개 (강력한 코어)        수천~수만 개 (단순한 코어)
잘하는 일  복잡한 판단, 순서 있는 일     똑같은 계산을 동시에 잔뜩
비유       수학 올림피아드 1등          단순 덧셈만 하는 만 명의 알바
예시       "if면 A, 아니면 B" 분기      픽셀 200만 개 색 동시에 계산

→ 시험 문제 하나를 깊게 푸는 건 천재(CPU)가 빠르지만,
  덧셈 문제 백만 개를 채점하는 건 만 명(GPU)이 압도적으로 빨라요.`;

const CODE_FRAME = `화면 = 1초에 수십 번 다시 그려지는 그림 (프레임)

해상도: 한 장의 그림이 몇 개의 점(픽셀)로 이뤄지는가
  FHD (1920×1080) = 약 207만 픽셀
  QHD (2560×1440) = 약 369만 픽셀
  4K  (3840×2160) = 약 829만 픽셀  ← FHD의 4배!

주사율(Hz): 모니터가 1초에 그림을 몇 번 갈아 끼우는가
  60Hz  = 1초에 60장   (일반 모니터)
  144Hz = 1초에 144장  (게이밍 모니터)

GPU의 일 = 매 프레임마다 픽셀 수백만 개의 색을 전부 계산하기
  4K 60Hz라면?  829만 픽셀 × 60번 = 초당 약 5억 픽셀!
→ 이걸 코어 하나가 순서대로 하면 절대 못 끝내요.
  그래서 수천 개 코어가 화면을 나눠 맡아 '동시에' 칠합니다.`;

const CODE_SPEC = `그래픽카드 스펙표, 이렇게 읽어요 (예: RTX 4060)

RTX 4060 8GB
 │   │ │  └─ VRAM 용량: GPU 전용 메모리. 텍스처·프레임·AI 모델이 사는 곳
 │   │ └──── 성능 등급: 뒤 두 자리가 클수록 상위 (4060 < 4070 < 4080)
 │   └────── 세대: 앞 두 자리가 세대 (30xx보다 40xx가 신형)
 └────────── 제품군 이름

VRAM은 GPU의 '작업 책상' 크기예요.
  책상(VRAM)이 작으면 재료를 창고(일반 RAM)에서
  자꾸 가져와야 해서 아무리 손이 빨라도 느려집니다.
  게임 고해상도 텍스처, AI 모델처럼 '재료가 큰' 작업일수록
  VRAM 용량이 성능만큼 중요해요.

주의: 세대가 다르면 숫자만으로 비교 금지!
  신형 xx60이 구형 xx70을 이기는 경우도 흔해요. (벤치마크 확인 필수)`;

const CODE_AI_GPU = `AI 시대, GPU가 금값이 된 이유

인공지능의 정체 = 사실상 거대한 행렬 곱셈(숫자표 × 숫자표) 덩어리
  → "단순한 곱셈·덧셈을 수십억 번" = GPU가 세상에서 제일 잘하는 일!

원래 게임용으로 태어난 GPU가
  게임: 픽셀 수백만 개를 동시에 계산  ──┐ 하는 일이
  AI  : 숫자 수십억 개를 동시에 계산  ──┘ 사실상 같아서
AI 학습의 표준 장비가 됐어요.

그 결과:
  - 데이터센터용 GPU 한 장 가격 = 수천만 원
  - 빅테크들이 GPU를 수십만 장 단위로 사재기
  - "GPU 몇 장 확보했나"가 AI 회사의 경쟁력 지표가 됨
→ 삽(GPU)을 파는 회사가 금광(AI) 붐의 최대 수혜자가 된 셈이죠.`;

const CODE_TASKMGR = `# 내 GPU 확인하기 — Windows 작업 관리자

1) Ctrl + Shift + Esc  (작업 관리자 바로 열기)
2) 왼쪽 메뉴에서 [성능] 탭 클릭
3) 목록 맨 아래 GPU 0 (있다면 GPU 1도) 클릭

읽어 볼 것:
  오른쪽 위 이름       → 내 GPU 모델명 (예: Intel UHD / RTX 3050)
  전용 GPU 메모리      → VRAM 용량 (섹션 4에서 배운 '작업 책상')
  공유 GPU 메모리      → 부족할 때 빌려 쓰는 일반 RAM
  3D / Video Decode 그래프 → 지금 GPU가 어떤 일을 하는 중인지

GPU 0과 GPU 1이 둘 다 보인다면?
  → 내장(CPU에 포함) + 외장(별도 카드)이 같이 있는 PC!
  평소엔 내장이 일하다가, 게임을 켜면 외장이 바빠지는 걸
  그래프로 직접 관찰할 수 있어요.`;

const CODE_VIDEO_TEST = `# GPU가 진짜 일하는 순간 목격하기

1) 작업 관리자 [성능] → GPU 화면을 옆에 띄워 두고
2) 유튜브에서 4K 영상을 재생해 보세요
   → Video Decode 그래프가 쑥 올라갑니다
     (영상 압축을 푸는 일을 GPU 전용 회로가 담당!)
3) 이번엔 브라우저로 우리 학습 플랫폼을 스크롤해 보세요
   → 3D 그래프가 살짝 움직여요. 웹 페이지 렌더링도
     브라우저가 GPU에게 맡기고 있다는 증거!

→ "GPU는 게임할 때만 쓰는 것"이 아니라는 걸
  숫자로 직접 확인하는 실습입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
function Section({ n, title, sub, children }) {
  return (
    <section className="step-card" id={`sec-${n}`}>
      <div className="step-head">
        <span className="step-num">{n}</span>
        <div>
          <h3>{title}</h3>
          {sub && <span className="step-sub">{sub}</span>}
        </div>
      </div>
      <div className="step-body">{children}</div>
    </section>
  );
}

function Code({ children }) {
  return <pre className="code-block"><code>{children}</code></pre>;
}

const SECTIONS = [
  { n: 1, label: 'GPU vs CPU' },
  { n: 2, label: '화면이 그려지는 원리' },
  { n: 3, label: '내장 vs 외장' },
  { n: 4, label: '스펙 읽기' },
  { n: 5, label: '게임·영상·AI 속 GPU' },
  { n: 6, label: '개발자와 GPU' },
  { n: 7, label: '실습: 내 GPU 확인' },
];

export default function GpuPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>그래픽카드와 GPU의 세계</h1>
        <p>
          게임 좀 한다는 친구들이 왜 그렇게 그래픽카드에 목숨을 거는지, 그리고 요즘
          AI 회사들이 왜 GPU를 사재기하는지 — 그 이유를 원리부터 차근차근 알아봅니다.
          마지막엔 <strong>내 PC의 GPU를 직접 열어 확인</strong>하는 실습까지 해볼 거예요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개</span>
          <span className="chip">준비물: 내 PC 하나</span>
        </div>
      </div>

      {/* 섹션 바로가기 */}
      <nav className="pill-nav">
        {SECTIONS.map((s) => (
          <a key={s.n} href={`#sec-${s.n}`}>
            <b>{s.n}</b>
            {s.label}
          </a>
        ))}
      </nav>

      <Section n={1} title="GPU vs CPU" sub="한 명의 천재 vs 만 명의 일꾼">
        <p>
          <strong>CPU</strong>는 컴퓨터의 두뇌라고 배웠죠. 그럼 <strong>GPU</strong>(Graphics
          Processing Unit, 그래픽 처리 장치)는 뭘까요? 둘 다 계산하는 칩인데,
          <strong> 일하는 방식</strong>이 정반대예요.
        </p>
        <p>
          CPU는 <strong>한 명의 천재</strong>예요. 아주 어려운 문제도 척척 풀고,
          "이 경우엔 이렇게, 저 경우엔 저렇게" 같은 복잡한 판단을 순식간에 해내죠.
          대신 몸은 하나(정확히는 몇 개)라서 한 번에 할 수 있는 일의 개수가 적어요.
          반면 GPU는 <strong>만 명의 일꾼</strong>이에요. 한 명 한 명은 단순한 덧셈·곱셈밖에
          못 하지만, 만 명이 <strong>동시에</strong> 달려들면 단순 작업의 양에서는
          천재 한 명이 도저히 못 따라옵니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="CPU와 GPU 비교 도해: CPU는 강력한 코어 몇 개, GPU는 단순한 코어 수천 개로 이루어진다">
          <text x="165" y="28" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">CPU — 한 명의 천재</text>
          <text x="475" y="28" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">GPU — 만 명의 일꾼</text>
          <rect x="20" y="42" width="290" height="222" rx="10" fill="var(--card)" stroke="var(--line)" />
          <rect x="330" y="42" width="290" height="222" rx="10" fill="var(--card)" stroke="var(--line)" />
          <rect x="40" y="62" width="70" height="70" rx="8" fill="var(--primary)" />
          <rect x="130" y="62" width="70" height="70" rx="8" fill="var(--primary)" />
          <rect x="220" y="62" width="70" height="70" rx="8" fill="var(--primary)" />
          <rect x="40" y="152" width="70" height="70" rx="8" fill="var(--primary)" />
          <rect x="130" y="152" width="70" height="70" rx="8" fill="var(--primary)" />
          <rect x="220" y="152" width="70" height="70" rx="8" fill="var(--primary)" />
          {Array.from({ length: 8 }, (_, row) =>
            Array.from({ length: 12 }, (_, col) => (
              <rect
                key={`gpu-core-${row}-${col}`}
                x={345 + col * 22}
                y={58 + row * 22}
                width="18"
                height="18"
                rx="3"
                fill="var(--teal)"
              />
            ))
          )}
          <text x="165" y="248" textAnchor="middle" fontSize="12" fill="var(--muted)">강력한 코어 4~24개 · 복잡한 판단 담당</text>
          <text x="475" y="248" textAnchor="middle" fontSize="12" fill="var(--muted)">단순한 코어 수천~수만 개 · 동시 대량 계산</text>
          <text x="320" y="298" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">잘하는 일이 다르다</text>
          <text x="320" y="322" textAnchor="middle" fontSize="13" fill="var(--muted)">복잡하고 순서 있는 일 = CPU · 단순하지만 양이 어마어마한 일 = GPU</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: CPU는 강력한 코어 몇 개, GPU는 단순한 코어 수천 개</p>
        <Code>{CODE_CPU_GPU}</Code>
        <p>
          그래서 컴퓨터는 둘을 <strong>역할 분담</strong>시켜요. 프로그램의 흐름과 판단은
          CPU가, "화면 픽셀 200만 개 색칠하기"처럼 <strong>똑같은 계산이 대량으로</strong> 필요한
          일은 GPU가 맡습니다. 어느 한쪽이 더 좋은 게 아니라 <strong>잘하는 일이 다른</strong> 거예요.
        </p>
        <div className="tip">
          <b>기억 포인트</b> "복잡하고 순서가 중요한 일은 CPU, 단순하지만 양이 어마어마한 일은 GPU."
          이 한 문장만 기억하면 이 코스의 절반은 끝났어요.
        </div>
      </Section>

      <Section n={2} title="화면이 그려지는 원리" sub="프레임 · 해상도 · 주사율">
        <p>
          지금 보고 있는 화면은 사실 <strong>움직이지 않아요</strong>. 정지된 그림이
          1초에 수십 번씩 갈아 끼워지고 있을 뿐이죠. 이 그림 한 장을 <strong>프레임</strong>이라고
          하고, 애니메이션이 종이를 빠르게 넘겨 움직임을 만드는 것과 완전히 같은 원리입니다.
        </p>
        <Code>{CODE_FRAME}</Code>
        <p>
          여기서 GPU의 역할이 분명해져요. <strong>해상도</strong>가 높을수록 한 장에 칠할 픽셀이
          많아지고, <strong>주사율</strong>이 높을수록 1초에 그려야 할 장 수가 늘어나요.
          4K에 144Hz라면 초당 <strong>10억 픽셀 이상</strong>을 계산해야 하는데, 이게 바로
          "만 명의 일꾼"이 필요한 이유입니다. GPU가 프레임을 제때 못 만들어 내면 화면이
          뚝뚝 끊기는 <strong>"프레임 드랍"</strong>이 생기죠 — 게이머들이 그래픽카드에
          집착하는 이유가 이거예요.
        </p>
        <div className="warn">
          <b>흔한 오해</b> "모니터가 144Hz면 무조건 부드럽다"? 아니에요. GPU가 1초에 60장밖에
          못 그리면 모니터가 144번 갈아 끼울 그림이 없어요. <strong>모니터 주사율과 GPU 성능은
          세트</strong>로 맞아야 합니다.
        </div>
      </Section>

      <Section n={3} title="내장 그래픽 vs 외장 그래픽" sub="같이 사는 세입자 vs 독채 사는 전문가">
        <p>
          GPU는 두 가지 형태로 존재해요. <strong>내장 그래픽</strong>은 CPU 칩 안에
          같이 들어 있는 작은 GPU예요. CPU라는 집에 <strong>세 들어 사는</strong> 처지라
          방(칩 면적)도 좁고, 전용 메모리 없이 일반 RAM을 <strong>빌려</strong> 씁니다.
          <strong> 외장 그래픽</strong>(그래픽카드)은 <strong>독채</strong>예요. 자기만의 칩,
          자기만의 메모리(VRAM), 자기만의 냉각 팬까지 갖춘 별도의 부품이죠.
        </p>
        <p>그럼 뭘 선택해야 할까요? 기준은 의외로 간단해요.</p>
        <ol className="olist">
          <li>
            <strong>문서 작업·웹서핑·코딩·영상 감상</strong>이 대부분이다 →
            내장으로 충분해요. 요즘 내장 그래픽은 4K 영상도 거뜬합니다.
          </li>
          <li>
            <strong>3D 게임을 높은 옵션으로</strong> 하고 싶다 → 외장이 필요해요.
            내장으로는 프레임이 안 나옵니다.
          </li>
          <li>
            <strong>영상 편집·3D 모델링·AI 모델 돌리기</strong>를 한다 →
            외장, 그것도 VRAM이 넉넉한 걸로. (이유는 다음 섹션에서!)
          </li>
        </ol>
        <p>
          참고로 우리가 개발하는 학습 플랫폼(React 프론트 + Spring Boot 백엔드)은
          <strong> 내장 그래픽으로도 전혀 문제없이</strong> 개발할 수 있어요.
          웹 개발은 GPU보다 CPU와 RAM이 훨씬 중요합니다.
        </p>
        <div className="tip">
          <b>노트북 살 때 팁</b> 외장 GPU가 달린 노트북은 성능이 좋은 대신
          무겁고, 비싸고, 배터리가 빨리 닳아요. "혹시 게임할지도 모르니까"로 사면
          대부분 후회합니다. <strong>지금 확실히 하는 일</strong>을 기준으로 고르세요.
        </div>
      </Section>

      <Section n={4} title="그래픽카드 스펙 읽기" sub="VRAM과 세대 — 숫자의 의미를 알면 광고에 안 속는다">
        <p>
          그래픽카드 이름은 암호처럼 보이지만, 규칙만 알면 <strong>세대</strong>와
          <strong> 등급</strong>이 바로 읽혀요. 그리고 이름 뒤에 붙는 <strong>VRAM 용량</strong>이
          숨은 핵심입니다.
        </p>
        <Code>{CODE_SPEC}</Code>
        <p>
          <strong>VRAM</strong>(비디오 메모리)은 GPU 전용의 <strong>작업 책상</strong>이에요.
          게임의 고화질 텍스처, 그리는 중인 프레임, AI 모델의 숫자들이 전부 이 책상 위에
          올라가 있어야 GPU가 빠르게 작업할 수 있어요. 책상이 좁으면 창고(일반 RAM)를
          왔다 갔다 하느라 <strong>일꾼 만 명이 놀게</strong> 됩니다. 그래서 "연산 속도는 충분한데
          VRAM이 부족해서 못 돌리는" 상황이 실제로 자주 생겨요.
        </p>
        <svg className="diagram" viewBox="0 0 640 230" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="VRAM 도해: GPU는 바로 옆 VRAM과는 빠르게, 멀리 있는 일반 RAM과는 느리게 데이터를 주고받는다">
          <text x="320" y="30" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">VRAM = GPU의 작업 책상</text>
          <rect x="40" y="80" width="140" height="80" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="110" y="115" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">GPU</text>
          <text x="110" y="137" textAnchor="middle" fontSize="12" fill="var(--muted)">일꾼 수천 명</text>
          <rect x="260" y="80" width="140" height="80" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="330" y="115" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">VRAM</text>
          <text x="330" y="137" textAnchor="middle" fontSize="12" fill="var(--muted)">작업 책상</text>
          <rect x="480" y="80" width="140" height="80" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="550" y="115" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">일반 RAM</text>
          <text x="550" y="137" textAnchor="middle" fontSize="12" fill="var(--muted)">창고</text>
          <line x1="188" y1="120" x2="252" y2="120" stroke="var(--teal)" strokeWidth="3" />
          <polyline points="196,113 188,120 196,127" fill="none" stroke="var(--teal)" strokeWidth="3" strokeLinecap="round" />
          <polyline points="244,113 252,120 244,127" fill="none" stroke="var(--teal)" strokeWidth="3" strokeLinecap="round" />
          <text x="220" y="106" textAnchor="middle" fontSize="12" fill="var(--teal)">빠름</text>
          <line x1="408" y1="120" x2="472" y2="120" stroke="var(--amber)" strokeWidth="2" strokeDasharray="6 5" />
          <polyline points="416,113 408,120 416,127" fill="none" stroke="var(--amber)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="464,113 472,120 464,127" fill="none" stroke="var(--amber)" strokeWidth="2" strokeLinecap="round" />
          <text x="440" y="106" textAnchor="middle" fontSize="12" fill="var(--amber)">느림</text>
          <text x="320" y="200" textAnchor="middle" fontSize="13" fill="var(--muted)">책상이 좁으면 창고를 왔다 갔다 — 연산이 빨라도 일꾼들이 놀게 된다</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: VRAM은 GPU의 작업 책상 — 좁으면 창고(일반 RAM)를 오가느라 느려진다</p>
        <p>
          <strong>세대</strong>도 중요해요. 같은 등급이라도 세대가 다르면 설계 자체가 달라서,
          신형 중급이 구형 상급을 이기기도 합니다. 숫자 크기만 보고 판단하지 말고,
          꼭 실제 성능 측정 자료(벤치마크)를 확인하는 습관을 들이세요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 인터넷 쇼핑몰에서 그래픽카드 아무거나 하나 검색해서
          상세 페이지의 스펙표를 열어 보세요. 방금 배운 <span className="icode">세대</span>·
          <span className="icode">등급</span>·<span className="icode">VRAM 용량</span> 세 가지를
          직접 찾아 읽어 보면, 암호 같던 제품명이 문장처럼 읽히기 시작할 거예요.
        </div>
      </Section>

      <Section n={5} title="게임 · 영상 편집 · AI에서 GPU가 하는 일" sub="그리고 AI 시대에 GPU가 금값이 된 이유">
        <p>
          <strong>게임</strong>에서 GPU는 매 프레임 3D 세계를 계산해요. 캐릭터의 위치,
          빛이 반사되는 각도, 그림자의 방향까지 — 픽셀 하나하나가 전부 수학 계산의 결과입니다.
          <strong> 영상 편집</strong>에서는 영상을 압축하고 푸는 일(인코딩·디코딩)과
          효과 렌더링을 GPU가 맡아요. CPU만으로 1시간 걸릴 영상 내보내기가 GPU를 쓰면
          몇 분으로 줄어들죠.
        </p>
        <p>
          그런데 진짜 반전은 <strong>AI</strong>예요. 게임용으로 태어난 GPU가
          지금은 AI 산업 전체를 떠받치는 기둥이 됐거든요.
        </p>
        <Code>{CODE_AI_GPU}</Code>
        <p>
          AI 모델의 학습과 실행은 결국 <strong>거대한 숫자표끼리의 곱셈</strong>을 수십억 번
          반복하는 일이에요. "단순한 계산을 어마어마한 양으로" — 어디서 들어본 말이죠?
          바로 섹션 1의 <strong>만 명의 일꾼</strong>이 가장 잘하는 일입니다. 그래서 전 세계
          AI 회사들이 GPU를 확보하려고 줄을 서고, 데이터센터용 GPU는 부르는 게 값이 됐어요.
          여러분이 쓰는 AI 챗봇의 답변 한 줄도, 지구 어딘가의 GPU 수천 장이 동시에
          곱셈을 해서 만들어 낸 결과물이에요.
        </p>
      </Section>

      <Section n={6} title="개발자는 GPU가 언제 필요할까?" sub="솔직한 답: 웹 개발자는 거의 필요 없다">
        <p>
          그래서 개발자인 우리에겐 비싼 그래픽카드가 필요할까요? <strong>분야에 따라
          완전히 달라요.</strong> 솔직하게 정리해 볼게요.
        </p>
        <ol className="olist">
          <li>
            <strong>웹 개발 (우리!)</strong> — React·Spring Boot·PostgreSQL·Docker로 이루어진
            우리 스택은 GPU를 거의 안 써요. 코드 컴파일, 여러 개의 Docker 컨테이너, 브라우저
            수십 탭... 전부 <strong>CPU와 RAM</strong>의 일입니다. 내장 그래픽으로 충분해요.
          </li>
          <li>
            <strong>게임 개발</strong> — 자기가 만드는 게임이 돌아가는 걸 봐야 하니
            외장 GPU가 사실상 필수예요.
          </li>
          <li>
            <strong>AI/머신러닝 개발</strong> — 모델을 직접 학습시킨다면 VRAM 큰 GPU가
            필요해요. 다만 요즘은 개인 PC 대신 <strong>클라우드의 GPU를 시간 단위로 빌려</strong> 쓰는
            게 일반적이에요. 우리가 서버를 AWS EC2로 빌려 쓰는 것과 똑같은 방식이죠.
          </li>
          <li>
            <strong>영상·3D 콘텐츠 제작</strong> — 렌더링 시간이 곧 작업 속도라
            외장 GPU 투자 가치가 커요.
          </li>
        </ol>
        <p>
          핵심은 <strong>"내 작업이 CPU형인가 GPU형인가"를 스스로 판단하는 눈</strong>이에요.
          이 눈이 있으면 장비를 살 때도, 나중에 회사에서 서버 사양을 정할 때도
          돈을 낭비하지 않게 됩니다.
        </p>
        <div className="tip">
          <b>어썸데브 이야기</b> 우리 학습 플랫폼이 돌아가는 AWS EC2 서버에도 GPU가 없어요.
          웹 서비스는 GPU 없이 CPU·RAM만으로 돌아가는 대표적인 예 — 필요 없는 자원에
          돈을 쓰지 않는 것도 엔지니어링입니다.
        </div>
      </Section>

      <Section n={7} title="실습: 내 GPU를 직접 확인하자" sub="작업 관리자 성능 탭 탐험">
        <p>
          이론은 끝! 이제 <strong>내 PC에 어떤 GPU가 있는지</strong> 직접 확인해 볼 차례예요.
          Windows에는 별도 프로그램 설치 없이 GPU를 관찰할 수 있는 도구가 이미 들어 있어요 —
          바로 <strong>작업 관리자</strong>입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> 아래 순서대로 작업 관리자를 열고, 내 GPU의
          <strong> 모델명</strong>과 <strong>전용 GPU 메모리(VRAM)</strong>를 찾아 적어 보세요.
          섹션 4에서 배운 스펙 읽기를 내 PC에 그대로 적용하는 겁니다.
        </div>
        <Code>{CODE_TASKMGR}</Code>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 이번엔 GPU가 <strong>일하는 순간</strong>을 실시간으로
          목격해 봅시다. 그래프가 움직이는 걸 보면 "GPU가 뭔가 하고 있다"가
          추상적인 지식이 아니라 눈에 보이는 사실이 돼요.
        </div>
        <Code>{CODE_VIDEO_TEST}</Code>
        <div className="warn">
          <b>내 PC에 GPU가 안 보여요?</b> GPU 항목이 하나뿐이고 이름에
          <span className="icode">Intel</span>이나 <span className="icode">Radeon Graphics</span>가
          들어 있다면 내장 그래픽만 있는 PC예요. 고장이 아니라 아주 정상이고,
          섹션 3에서 배웠듯 우리 개발 업무에는 그걸로 충분합니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🎮 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 CPU와 GPU의 역할 분담, 화면이 그려지는 원리, 스펙표 읽는 법,
            그리고 AI 시대에 GPU가 금값인 이유까지 설명할 수 있어요. 무엇보다
            <strong> "이 작업엔 어떤 자원이 필요한가"를 판단하는 눈</strong>이 생겼습니다.
            다음은 그 자원 위에서 데이터가 어떻게 오가는지 —{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서
            랜선 한 가닥부터 인터넷까지 이어서 배워 보세요. 실습에서 확인한 내 GPU
            모델명과 VRAM 용량은 멘토와의 다음 체크인 때 공유해 주세요!
          </p>
        </div>
      </div>
    </div>
  );
}
