Infosec403

ufw_발표자료.html

21.72 KB · text/html · 업로드 2026-07-24 14:35

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UFW — 핵심 요약</title>
<style>
  :root{
    --bg:#f5f5f7;
    --bg-deep:#e8e8ed;
    --ink:#1d1d1f;
    --ink-soft:#6e6e73;
    --blue:#0071e3;
    --blue-deep:#0058b0;
    --card:#ffffff;
    --line:rgba(0,0,0,0.08);
    --code-bg:#1d1d1f;
    --code-line:#2c2c2e;
    --green:#59d499;
    --orange:#f5a623;
    --pink:#ff6482;
    --purple:#bf8cff;
    --cyan:#6fd6ff;
    --radius:22px;
  }

  *{ box-sizing:border-box; }
  html,body{
    margin:0; padding:0; height:100%;
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
      "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }

  #deck{ position:relative; width:100vw; height:100vh; }

  .slide{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:6vh 8vw;
    opacity:0;
    transform:translateY(24px) scale(0.985);
    transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  .slide.active{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

  .content{ width:100%; max-width:1000px; }

  .eyebrow{
    font-size:14px; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; color:var(--blue); margin-bottom:14px;
  }

  h1.big{
    font-size:clamp(38px, 5.6vw, 68px);
    font-weight:700; letter-spacing:-0.02em;
    margin:0 0 10px 0; line-height:1.08;
  }

  h2.title{
    font-size:clamp(26px, 3.6vw, 42px);
    font-weight:700; letter-spacing:-0.015em;
    margin:0 0 22px 0; line-height:1.15;
  }

  p.sub{
    font-size:clamp(15px, 1.8vw, 21px);
    color:var(--ink-soft); font-weight:400; margin:0; line-height:1.55;
  }

  .grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:8px; }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-4{ grid-template-columns:repeat(4,1fr); }
  .grid.cols-1{ grid-template-columns:1fr; }

  .card{
    background:var(--card); border:1px solid var(--line); border-radius:18px;
    padding:20px 22px; box-shadow:0 1px 2px rgba(0,0,0,0.04);
  }
  .card h3{ margin:0 0 8px 0; font-size:18px; font-weight:600; letter-spacing:-0.01em; }
  .card p{ margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
  .card .tag{
    display:inline-block; font-size:12px; font-weight:700; color:var(--blue);
    background:rgba(0,113,227,.09); border-radius:20px; padding:3px 10px;
    margin-bottom:10px; letter-spacing:.01em;
  }

  table.compare{
    width:100%; border-collapse:separate; border-spacing:0;
    background:var(--card); border-radius:18px; overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,0.04); border:1px solid var(--line);
  }
  table.compare th, table.compare td{
    padding:13px 18px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line);
  }
  table.compare th{
    background:var(--bg-deep); font-weight:600; font-size:12.5px; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.03em;
  }
  table.compare tr:last-child td{ border-bottom:none; }
  table.compare td.emph{ font-weight:600; color:var(--ink); }
  table.compare td.accent{ color:var(--blue); font-weight:600; }

  .terminal{
    background:var(--code-bg); border-radius:16px; overflow:hidden;
    box-shadow:0 20px 45px -18px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
    margin-top:10px; width:100%;
  }
  .terminal-bar{
    display:flex; align-items:center; gap:8px; padding:10px 14px;
    background:var(--code-line); border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .dot{ width:11px; height:11px; border-radius:50%; }
  .dot.red{ background:#ff5f57; }
  .dot.yellow{ background:#febc2e; }
  .dot.green{ background:#28c840; }
  .terminal-title{
    flex:1; text-align:center; font-size:12px; color:#98989d;
    font-family:ui-monospace, "SF Mono", Menlo, monospace; margin-right:52px;
  }
  pre.code{
    margin:0; padding:18px 20px;
    font-family:ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
    font-size:15px; line-height:1.65; color:#e6e6e6;
    overflow-x:auto; white-space:pre;
  }
  .c-cmt{ color:#7d7d80; }
  .c-flag{ color:var(--cyan); }
  .c-val{ color:var(--orange); }
  .c-str{ color:var(--green); }
  .c-key{ color:var(--pink); font-weight:600; }
  .c-mod{ color:var(--purple); }

  .caption{ margin-top:12px; font-size:14px; color:var(--ink-soft); }
  .caption b{ color:var(--ink); font-weight:600; }

  ul.clean{ list-style:none; margin:0 0 6px 0; padding:0; }
  ul.clean li{
    position:relative; padding-left:22px; margin-bottom:10px;
    font-size:17px; line-height:1.5; color:var(--ink);
  }
  ul.clean li::before{
    content:""; position:absolute; left:0; top:9px;
    width:7px; height:7px; border-radius:50%; background:var(--blue);
  }
  ul.clean li b{ font-weight:600; }
  ul.clean li span.mono{
    font-family:ui-monospace, "SF Mono", monospace; background:rgba(0,0,0,0.06);
    border-radius:6px; padding:1px 7px; font-size:.92em;
  }

  .flow{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; flex-wrap:wrap; }
  .flow .step{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:18px 22px; text-align:center; min-width:150px;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
  }
  .flow .step .k{ font-size:11.5px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
  .flow .step .v{ font-size:18px; font-weight:600; }
  .flow .step .d{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
  .flow .arrow{ font-size:20px; color:var(--ink-soft); }

  .num{
    position:absolute; top:6vh; left:8vw;
    font-size:120px; font-weight:800; color:var(--line);
    line-height:1; z-index:-1; letter-spacing:-0.04em;
  }

  #hud{ position:fixed; left:0; right:0; bottom:26px; display:flex; justify-content:center; align-items:center; gap:8px; z-index:10; }
  .pip{ width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,0.18); transition:all .3s ease; cursor:pointer; }
  .pip.active{ background:var(--blue); width:22px; border-radius:4px; }

  #counter{
    position:fixed; top:26px; right:34px; font-size:13px; color:var(--ink-soft);
    font-weight:600; letter-spacing:.02em; z-index:10; font-family:ui-monospace, "SF Mono", monospace;
  }
  #brand{ position:fixed; top:26px; left:34px; font-size:13px; font-weight:700; color:var(--ink-soft); letter-spacing:.02em; z-index:10; }
  #brand b{ color:var(--ink); }

  .navzone{ position:fixed; top:0; bottom:0; width:14%; z-index:5; cursor:pointer; }
  #zone-prev{ left:0; }
  #zone-next{ right:0; }

  ::-webkit-scrollbar{ display:none; }
</style>
</head>
<body>

<div id="brand"><b>UFW</b> · 핵심 요약</div>
<div id="counter">01 / 14</div>

<div id="deck">

  <!-- 1. Title -->
  <section class="slide active">
    <div class="content" style="text-align:center;">
      <div class="eyebrow" style="justify-content:center; display:flex;">UNCOMPLICATED FIREWALL</div>
      <h1 class="big">UFW</h1>
      <p class="sub">복잡한 iptables 규칙을 간단한 명령어로 다룰 수 있게 만든 방화벽 관리 도구</p>
      <div class="flow" style="margin-top:52px;">
        <div class="step"><div class="k">대상</div><div class="v">Debian 계열</div><div class="d">Ubuntu 기본 제공</div></div>
        <div class="arrow">→</div>
        <div class="step"><div class="k">기반</div><div class="v">iptables</div><div class="d">내부적으로 사용</div></div>
        <div class="arrow">→</div>
        <div class="step"><div class="k">실행</div><div class="v">Netfilter</div><div class="d">실제 패킷 처리</div></div>
      </div>
    </div>
  </section>

  <!-- 2. 관계 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">관계</div>
      <h2 class="title">UFW는 자체 방화벽이 아니다</h2>
      <div class="grid cols-3">
        <div class="card"><span class="tag">관리 도구</span><h3>UFW</h3><p>사람이 쓰기 쉬운 명령어로 규칙을 등록하는 인터페이스</p></div>
        <div class="card"><span class="tag">규칙 엔진</span><h3>iptables</h3><p>UFW가 내부적으로 호출하는 규칙 관리 프로그램</p></div>
        <div class="card"><span class="tag">실제 방화벽</span><h3>Netfilter</h3><p>커널 내부에서 패킷을 실제로 허용·차단하는 엔진</p></div>
      </div>
      <p class="sub" style="margin-top:18px;">검증된 커널 기능을 그대로 사용하므로 <b style="color:var(--ink)">성능이 우수</b>하고, 별도 방화벽 프로세스를 띄울 필요가 없다.</p>
    </div>
  </section>

  <!-- 3. 특징 1: 간단한 명령어 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 01</div>
      <h2 class="title">간단한 명령어</h2>
      <p class="sub" style="margin-bottom:14px;">여러 옵션을 조합해야 하는 iptables와 달리, <b style="color:var(--ink)">한 줄 명령</b>으로 규칙을 설정할 수 있다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">allow</span> <span class="c-val">22/tcp</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">deny</span>  <span class="c-val">80/tcp</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">enable</span></pre>
      </div>
    </div>
  </section>

  <!-- 4. 특징 2: iptables(Netfilter) 기반 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 02</div>
      <h2 class="title">iptables(Netfilter) 기반</h2>
      <p class="sub" style="margin-bottom:14px;">UFW 자체는 패킷을 처리하지 않는다 — 실제 처리는 커널의 <b style="color:var(--ink)">Netfilter</b>가 담당한다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">내부 동작 확인</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">allow</span> <span class="c-val">22/tcp</span>
<span class="c-cmt"># ↓ 내부적으로 iptables 규칙 생성 (Netfilter가 실제 처리)</span>
<span class="c-key">sudo iptables</span> <span class="c-flag">-L</span> <span class="c-flag">-n</span></pre>
      </div>
      <p class="caption">별도 방화벽 프로세스 없이 검증된 커널 기능을 그대로 사용 → <b>성능 우수</b></p>
    </div>
  </section>

  <!-- 5. 특징 3: 기본 정책 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 03</div>
      <h2 class="title">기본 정책(Default Policy)</h2>
      <p class="sub" style="margin-bottom:14px;">모든 패킷에 대한 기본 동작을 설정 — <b style="color:var(--ink)">화이트리스트 방식</b>이 대표적이다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">default deny incoming</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">default allow outgoing</span>   <span class="c-cmt"># 이후 필요한 서비스만 개별 허용</span></pre>
      </div>
      <p class="caption">화이트리스트 장점: <b>불필요한 서비스 노출 방지 · 관리 용이 · 높은 보안성</b></p>
    </div>
  </section>

  <!-- 6. 특징 4: 포트 및 프로토콜 제어 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 04</div>
      <h2 class="title">포트 및 프로토콜 제어</h2>
      <p class="sub" style="margin-bottom:14px;">특정 포트를 TCP/UDP 단위로 허용·차단할 수 있다. 프로토콜을 생략하면 둘 다 허용된다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">allow</span> <span class="c-val">443/tcp</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">deny</span>  <span class="c-val">53/udp</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">allow</span> <span class="c-val">53</span>       <span class="c-cmt"># TCP + UDP 모두 허용</span></pre>
      </div>
    </div>
  </section>

  <!-- 7. 특징 5: IP 주소 기반 접근 제어 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 05</div>
      <h2 class="title">IP 주소 기반 접근 제어</h2>
      <p class="sub" style="margin-bottom:14px;">특정 IP만 허용/차단하고, 포트까지 함께 지정할 수 있다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">allow from</span> <span class="c-val">192.168.1.100</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">deny from</span>  <span class="c-val">10.0.0.5</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">allow from</span> <span class="c-val">192.168.1.100</span> to any port <span class="c-val">22</span></pre>
      </div>
    </div>
  </section>

  <!-- 8. 특징 6: 인터페이스별 규칙 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 06</div>
      <h2 class="title">인터페이스별 규칙 설정</h2>
      <p class="sub" style="margin-bottom:14px;">NIC별로 서로 다른 정책 적용 가능 — DMZ · 내부망 · 외부망 분리에 활용된다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">allow in on</span> eth0 to any port <span class="c-val">80</span>   <span class="c-cmt"># eth0: HTTP만 허용</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">allow in on</span> eth1 to any port <span class="c-val">22</span>   <span class="c-cmt"># eth1: SSH 허용</span></pre>
      </div>
    </div>
  </section>

  <!-- 9. 특징 7: 상태 확인 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 07</div>
      <h2 class="title">상태 확인이 쉬움</h2>
      <p class="sub" style="margin-bottom:14px;">현재 적용된 규칙과 열려있는 포트를 한눈에 확인할 수 있다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">status</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">status numbered</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">status verbose</span></pre>
      </div>
    </div>
  </section>

  <!-- 10. 특징 8: 규칙 삭제 간편 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 08</div>
      <h2 class="title">규칙 삭제 간편</h2>
      <p class="sub" style="margin-bottom:14px;">번호를 이용하거나 동일한 규칙을 그대로 입력해 삭제할 수 있다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">delete allow</span> <span class="c-val">22/tcp</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">delete</span> <span class="c-val">1</span></pre>
      </div>
    </div>
  </section>

  <!-- 11. 특징 9: IPv4/IPv6 지원 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 09</div>
      <h2 class="title">IPv4 · IPv6 모두 지원</h2>
      <p class="sub" style="margin-bottom:14px;">설정 파일에서 IPv6 사용 여부를 지정하면, IPv4와 동일한 규칙이 IPv6에도 그대로 적용된다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">/etc/default/ufw</div></div>
        <pre class="code"><span class="c-key">IPV6</span>=<span class="c-str">yes</span>   <span class="c-cmt"># 활성화 시 IPv4 규칙이 IPv6에도 동일 적용</span></pre>
      </div>
      <p class="caption">IPv6 환경을 위한 <b>별도 방화벽 구성이 필요 없다</b>.</p>
    </div>
  </section>

  <!-- 12. 특징 10: 로그 기능 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 10</div>
      <h2 class="title">로그 기능 제공</h2>
      <p class="sub" style="margin-bottom:14px;">차단된 패킷, 포트 스캔, 비정상 접속 시도를 로그로 분석할 수 있다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">logging on</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">logging</span> medium   <span class="c-cmt"># off → low → medium → high → full</span></pre>
      </div>
      <p class="caption">로그 파일: <span class="mono" style="font-family:ui-monospace, monospace; background:rgba(0,0,0,.06); border-radius:6px; padding:1px 7px;">/var/log/ufw.log</span></p>
    </div>
  </section>

  <!-- 13. 특징 11: 애플리케이션 프로파일 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">대표 특징 11</div>
      <h2 class="title">애플리케이션 프로파일 지원</h2>
      <p class="sub" style="margin-bottom:14px;">포트 번호를 외우지 않아도 <b style="color:var(--ink)">서비스 이름</b>만으로 권장 규칙을 적용할 수 있다.</p>
      <div class="terminal">
        <div class="terminal-bar"><div class="dot red"></div><div class="dot yellow"></div><div class="dot green"></div><div class="terminal-title">bash</div></div>
        <pre class="code"><span class="c-key">sudo ufw</span> <span class="c-flag">app list</span>              <span class="c-cmt"># 등록된 프로파일 확인</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">allow</span> <span class="c-str">OpenSSH</span>
<span class="c-key">sudo ufw</span> <span class="c-flag">allow</span> <span class="c-str">"Nginx Full"</span>   <span class="c-cmt"># HTTP(80) + HTTPS(443) 동시 허용</span></pre>
      </div>
    </div>
  </section>

  <!-- 14. 장단점 -->
  <section class="slide">
    <div class="content">
      <div class="eyebrow">정리</div>
      <h2 class="title">장점 vs 단점</h2>
      <table class="compare">
        <tr><th>장점</th><th>단점</th></tr>
        <tr><td>명령어가 매우 직관적</td><td>세밀한 설정에는 한계</td></tr>
        <tr><td>Debian 계열 기본 제공</td><td>복잡한 NAT·패킷 마킹·고급 체인은 iptables/nftables 필요</td></tr>
        <tr><td>설정 오류 가능성이 적음</td><td class="accent">대규모 환경은 firewalld가 더 적합</td></tr>
        <tr><td class="accent">기본적인 방화벽 기능은 충분</td><td>&nbsp;</td></tr>
      </table>
    </div>
  </section>

</div>

<div id="hud"></div>

<div class="navzone" id="zone-prev"></div>
<div class="navzone" id="zone-next"></div>

<script>
  const slides = document.querySelectorAll('.slide');
  const total = slides.length;
  let idx = 0;

  const hud = document.getElementById('hud');
  slides.forEach((_, i) => {
    const p = document.createElement('div');
    p.className = 'pip' + (i === 0 ? ' active' : '');
    p.addEventListener('click', () => go(i));
    hud.appendChild(p);
  });
  const pips = hud.querySelectorAll('.pip');
  const counter = document.getElementById('counter');

  function pad(n){ return String(n).padStart(2,'0'); }

  function render(){
    slides.forEach((s, i) => s.classList.toggle('active', i === idx));
    pips.forEach((p, i) => p.classList.toggle('active', i === idx));
    counter.textContent = pad(idx+1) + ' / ' + pad(total);
  }

  function go(i){
    idx = Math.max(0, Math.min(total - 1, i));
    render();
  }
  function next(){ go(idx + 1); }
  function prev(){ go(idx - 1); }

  document.getElementById('zone-next').addEventListener('click', next);
  document.getElementById('zone-prev').addEventListener('click', prev);

  window.addEventListener('keydown', (e) => {
    if (['ArrowRight','ArrowDown',' ','PageDown'].includes(e.key)) { next(); e.preventDefault(); }
    if (['ArrowLeft','ArrowUp','PageUp'].includes(e.key)) { prev(); e.preventDefault(); }
    if (e.key === 'Home') go(0);
    if (e.key === 'End') go(total-1);
  });

  let touchX = null;
  window.addEventListener('touchstart', e => touchX = e.touches[0].clientX);
  window.addEventListener('touchend', e => {
    if (touchX === null) return;
    const dx = e.changedTouches[0].clientX - touchX;
    if (dx > 50) prev();
    if (dx < -50) next();
    touchX = null;
  });

  render();
</script>
</body>
</html>