StuDoc: 네트워크 첫걸음, 사업일지-08 퇴근 후 찍어 낸 앱 40개 추가
This commit is contained in:
1 parent
c7df2e5344
commit
fcd7c80688
4 files changed
+4040
No files matched your search
@@ -0,0 +1,403 @@
|
|||||||
|
<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>네트워크 첫걸음</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root{--navy:#0B1F3A;--ink:#0F172A;--teal:#0D9488;--teal-l:#5EEAD4;--amber:#F59E0B;--slate:#64748B;--card:#EEF3F8;--mutedd:#B6C3D6;--bg:#1a2433}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
html,body{height:100%;background:var(--bg);font-family:"Noto Sans KR","Noto Sans CJK KR",sans-serif;color:var(--ink)}
|
||||||
|
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||||||
|
.slide{position:absolute;width:1280px;height:720px;display:none;overflow:hidden;transform-origin:center center}
|
||||||
|
.slide.on{display:block}
|
||||||
|
.slide.light{background:#fff}.slide.dark{background:var(--navy);color:#fff}
|
||||||
|
.inner{position:absolute;inset:38px 64px 56px}
|
||||||
|
footer{position:absolute;left:64px;bottom:20px;font-size:13px;color:var(--slate)}
|
||||||
|
.pg{position:absolute;right:64px;bottom:20px;font-size:13px;color:var(--slate)}.dark .pg{color:var(--mutedd)}
|
||||||
|
.notes{display:none}
|
||||||
|
h2{font-size:34px;font-weight:700;color:var(--navy);text-align:center;height:56px;line-height:56px}
|
||||||
|
.lead{font-size:18px;color:var(--slate);margin:6px 0 22px}
|
||||||
|
.t-steps h2,.t-code h2{margin-bottom:22px}.t-analogy h2{margin-bottom:28px}
|
||||||
|
h3{font-size:20px;font-weight:700;color:var(--navy)}
|
||||||
|
p{font-size:18px;line-height:1.5}.sm{font-size:15px}.muted{color:var(--slate)}.muted-d{color:var(--mutedd)}.teal{color:var(--teal)}
|
||||||
|
.card{background:var(--card);border-radius:14px;padding:22px}
|
||||||
|
.ic{display:inline-flex;align-items:center;justify-content:center;flex:none}.ic svg{width:100%;height:100%}
|
||||||
|
.circ{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;padding:14px}
|
||||||
|
.circ.lg{width:70px;height:70px;padding:17px}.circ.xl{width:112px;height:112px;padding:28px}.circ.sm{width:36px;height:36px;padding:9px}
|
||||||
|
.circ.amber{background:var(--amber)}.circ.navy{background:var(--navy)}
|
||||||
|
.pill{display:inline-block;border-radius:99px;padding:4px 14px;font-size:14px;font-weight:700;color:#fff;background:var(--teal);white-space:nowrap}
|
||||||
|
.pill.amber{background:var(--amber)}.pill.slate{background:var(--slate)}
|
||||||
|
.row-sb{display:flex;align-items:center;justify-content:space-between;gap:10px}
|
||||||
|
.grid{display:grid;gap:24px}.g4{grid-template-columns:repeat(4,1fr);grid-auto-rows:204px}.g3{grid-template-columns:repeat(3,1fr);height:430px}
|
||||||
|
.g2{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}.g2.tight{grid-auto-rows:128px;gap:16px 24px}
|
||||||
|
.tile h3{margin-top:22px}.tile p{margin-top:4px}.tile.center{text-align:center}.tile.center .ic{margin:0 auto}.tile.center h3{margin-top:16px}
|
||||||
|
.num{color:var(--slate);font-size:15px}
|
||||||
|
.vcard h3.big{font-size:24px;margin:26px 0 12px}
|
||||||
|
.hcard{display:flex;gap:22px;align-items:center}.hcard>div{flex:1}.hcard p{margin-top:8px}
|
||||||
|
.sm-card{padding:16px 22px}.sm-card p{font-size:16px;margin-top:4px}
|
||||||
|
.title-l{position:absolute;left:24px;top:110px;width:640px}
|
||||||
|
.kicker{color:var(--teal-l);font-weight:700;font-size:17px}
|
||||||
|
h1{font-size:64px;font-weight:900;line-height:1.2;margin:10px 0}
|
||||||
|
.sub{font-size:26px;line-height:1.45}.meta{color:var(--mutedd);font-size:17px;margin-top:60px}
|
||||||
|
.net{position:absolute;right:30px;top:60px;width:380px;height:340px}.nodes{position:absolute;right:30px;top:60px;width:380px;height:340px}
|
||||||
|
.node{position:absolute;width:110px;height:110px;margin:-55px;border-radius:50%;background:var(--teal);color:#fff;padding:28px;display:flex}
|
||||||
|
.node.amber{background:var(--amber)}
|
||||||
|
.sec{position:absolute;left:40px;top:120px;width:760px}.no{font-size:92px;font-weight:900;color:var(--teal-l);line-height:1}
|
||||||
|
.ghost{position:absolute;right:40px;top:150px;width:360px;height:360px;color:var(--teal-l);opacity:.18}
|
||||||
|
.sm-ghost{width:280px;height:280px;top:40px}
|
||||||
|
.ana{display:flex;align-items:center;gap:0}.side{flex:1;height:370px;padding:26px 30px}
|
||||||
|
.side h3{font-size:23px;margin:10px 0 16px}.side ul{padding-left:22px}.side li{font-size:18px;line-height:1.5;margin-bottom:10px}
|
||||||
|
.approx{width:56px;height:56px;margin:0 -12px;z-index:1;border-radius:50%;background:#fff;border:2px solid var(--teal);color:var(--teal);font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
|
||||||
|
.take{margin-top:22px;background:rgba(13,148,136,.12);color:var(--teal);font-weight:700;font-size:20px;border-radius:12px;padding:14px 26px}
|
||||||
|
.flow{display:flex;align-items:stretch;gap:0;height:350px}.step{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;padding:24px 16px}
|
||||||
|
.step h3{margin:16px 0 10px;font-size:19px}.step p{font-size:17px}.step p.sm{font-size:15.5px}
|
||||||
|
.arrow{color:var(--teal);font-size:26px;display:flex;align-items:center;padding:0 10px}
|
||||||
|
.note{margin-top:22px;background:rgba(245,158,11,.16);border-radius:12px;padding:14px 26px;font-size:17px}
|
||||||
|
table{width:100%;border-collapse:collapse;font-size:18px}th{background:var(--teal);color:#fff;text-align:left;padding:14px 14px}
|
||||||
|
td{padding:14px;border-bottom:1px solid #D5DEE8}tbody tr:nth-child(odd){background:var(--card)}td:first-child{color:var(--teal);font-weight:700}
|
||||||
|
.stepwrap{display:flex;gap:26px;height:500px}.panel{width:340px;flex:none;background:var(--navy);border-radius:14px;color:#fff;padding:26px 30px;display:flex;flex-direction:column}
|
||||||
|
.steplbl{color:var(--teal-l);font-size:18px;text-align:center}.panel .ic{margin:22px auto 40px}.panel small{color:var(--amber);font-weight:700;font-size:15px}.panel p{margin-top:6px}
|
||||||
|
.items{list-style:none;flex:1;display:flex;flex-direction:column;gap:12px}.items li{flex:1;display:flex;align-items:center;gap:20px;padding:12px 24px}
|
||||||
|
.items .n{width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none}
|
||||||
|
.items p{font-size:16px;margin-top:2px}
|
||||||
|
.codewrap{display:flex;gap:30px;height:430px}.checks{list-style:none;width:380px;flex:none;display:flex;flex-direction:column;justify-content:space-around}
|
||||||
|
.checks li{display:flex;gap:16px;align-items:flex-start}.checks p{font-size:16px}
|
||||||
|
pre{flex:1;background:var(--navy);color:#E2E8F0;border-radius:14px;padding:22px 26px;font:15px/1.6 ui-monospace,"Courier New",monospace;overflow:auto;white-space:pre}
|
||||||
|
.close{position:absolute;left:40px;top:80px;width:780px}.close .sub{font-size:23px;margin:10px 0 50px}
|
||||||
|
.checks.d{width:auto}.checks.d li{align-items:center;margin-bottom:22px;font-size:20px}
|
||||||
|
#bar{position:fixed;left:0;bottom:0;height:4px;background:var(--teal);transition:width .2s}
|
||||||
|
#hud{position:fixed;right:14px;bottom:12px;display:flex;gap:8px;z-index:9}
|
||||||
|
#hud button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:8px;padding:8px 12px;font:600 14px "Noto Sans KR",sans-serif;cursor:pointer}
|
||||||
|
#hud button:hover{background:var(--teal)}
|
||||||
|
#noteview{position:fixed;left:0;right:0;bottom:0;max-height:30%;overflow:auto;background:#0b1220ee;color:#e2e8f0;padding:14px 24px;font-size:16px;display:none;z-index:8}
|
||||||
|
body.shownotes #noteview{display:block}
|
||||||
|
@media print{@page{size:1280px 720px;margin:0}html,body{background:#fff}#stage{position:static;display:block}
|
||||||
|
.slide{display:block!important;position:relative;transform:none!important;page-break-after:always;break-after:page}#hud,#bar,#noteview{display:none!important}
|
||||||
|
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
|
||||||
|
</style></head><body>
|
||||||
|
<main id="stage"><section class="slide dark t-title" data-i="0" aria-label="슬라이드 1">
|
||||||
|
<div class="inner"><div class="title-l"><p class="kicker">IT 비전공자를 위한 네트워크 기초</p><h1>네트워크 첫걸음</h1>
|
||||||
|
<p class="sub">도메인 하나로 우리 집 리눅스 서버까지</p><p class="meta">IP · DNS · 라우팅 · 공유기 · VPN — 택배와 전화번호부로 이해하기</p></div>
|
||||||
|
<svg class="net" viewBox="0 0 380 340"><g stroke="#0D9488" stroke-width="3" stroke-dasharray="8 7">
|
||||||
|
<line x1="50" y1="50" x2="300" y2="100"/><line x1="300" y1="100" x2="100" y2="250"/><line x1="100" y1="250" x2="310" y2="300"/><line x1="50" y1="50" x2="100" y2="250"/></g></svg>
|
||||||
|
<div class="nodes"><div class="node " style="left:50px;top:50px"><span class="ic "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg></span></div><div class="node amber" style="left:300px;top:100px"><span class="ic "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg></span></div><div class="node " style="left:100px;top:250px"><span class="ic "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z"></path></svg></span></div><div class="node " style="left:310px;top:300px"><span class="ic "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg></span></div></div></div>
|
||||||
|
<span class="pg">1</span>
|
||||||
|
<aside class="notes">오늘은 전공 지식 없이도 '내 도메인으로 집 서버에 접속하기'까지 가는 게 목표입니다. 모든 개념을 생활 속 비유와 한 쌍으로 기억하도록 안내합니다.</aside></section>
|
||||||
|
<section class="slide light t-agenda" data-i="1" aria-label="슬라이드 2">
|
||||||
|
<div class="inner"><h2>오늘의 여정</h2><p class="lead">개념 6개를 익힌 뒤, 실제로 도메인을 사서 집 서버에 연결합니다</p><div class="grid g4"><div class="card tile">
|
||||||
|
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path></svg></span><b class="num">01</b></div>
|
||||||
|
<h3>네트워크</h3><p class="muted sm">택배망처럼 데이터를 나르는 길</p></div><div class="card tile">
|
||||||
|
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg></span><b class="num">02</b></div>
|
||||||
|
<h3>IPv4 주소</h3><p class="muted sm">인터넷 세상의 집 주소</p></div><div class="card tile">
|
||||||
|
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"></path></svg></span><b class="num">03</b></div>
|
||||||
|
<h3>DNS</h3><p class="muted sm">이름을 주소로 바꾸는 전화번호부</p></div><div class="card tile">
|
||||||
|
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg></span><b class="num">04</b></div>
|
||||||
|
<h3>라우팅</h3><p class="muted sm">길을 찾아 주는 내비게이션</p></div><div class="card tile">
|
||||||
|
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z"></path></svg></span><b class="num">05</b></div>
|
||||||
|
<h3>인터넷 공유기</h3><p class="muted sm">우리 집 관리실 겸 교환원</p></div><div class="card tile">
|
||||||
|
<div class="row-sb"><span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M383.9 308.3l23.9-62.6c4-10.5-3.7-21.7-15-21.7h-58.5c11-18.9 17.8-40.6 17.8-64v-.3c39.2-7.8 64-19.1 64-31.7 0-13.3-27.3-25.1-70.1-33-9.2-32.8-27-65.8-40.6-82.8-9.5-11.9-25.9-15.6-39.5-8.8l-27.6 13.8c-9 4.5-19.6 4.5-28.6 0L182.1 3.4c-13.6-6.8-30-3.1-39.5 8.8-13.5 17-31.4 50-40.6 82.8-42.7 7.9-70 19.7-70 33 0 12.6 24.8 23.9 64 31.7v.3c0 23.4 6.8 45.1 17.8 64H56.3c-11.5 0-19.2 11.7-14.7 22.3l25.8 60.2C27.3 329.8 0 372.7 0 422.4v44.8C0 491.9 20.1 512 44.8 512h358.4c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-48.4-25.8-90.4-64.1-114.1zM176 480l-41.6-192 49.6 32 24 40-32 120zm96 0l-32-120 24-40 49.6-32L272 480zm41.7-298.5c-3.9 11.9-7 24.6-16.5 33.4-10.1 9.3-48 22.4-64-25-2.8-8.4-15.4-8.4-18.3 0-17 50.2-56 32.4-64 25-9.5-8.8-12.7-21.5-16.5-33.4-.8-2.5-6.3-5.7-6.3-5.8v-10.8c28.3 3.6 61 5.8 96 5.8s67.7-2.1 96-5.8v10.8c-.1.1-5.6 3.2-6.4 5.8z"></path></svg></span><b class="num">06</b></div>
|
||||||
|
<h3>VPN</h3><p class="muted sm">남이 못 보는 비밀 통로</p></div><div class="card tile">
|
||||||
|
<div class="row-sb"><span class="ic circ amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg></span><b class="num">07</b></div>
|
||||||
|
<h3>실전 연결</h3><p class="muted sm">후이즈 → Cloudflare → 공유기 → 서버</p></div><div class="card tile">
|
||||||
|
<div class="row-sb"><span class="ic circ amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256.1 446.3l-.1-381 175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7z"></path></svg></span><b class="num">08</b></div>
|
||||||
|
<h3>안전하게 운영</h3><p class="muted sm">보안 점검과 문제 해결 순서</p></div></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">2</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide dark t-section" data-i="2" aria-label="슬라이드 3">
|
||||||
|
<div class="inner"><div class="sec"><div class="no">01</div><h1>네트워크란?</h1><p class="sub muted-d">컴퓨터끼리 택배를 주고받는 약속된 시스템</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path></svg></span></div>
|
||||||
|
<span class="pg">3</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-analogy" data-i="3" aria-label="슬라이드 4">
|
||||||
|
<div class="inner"><h2>네트워크는 거대한 택배망입니다</h2><div class="ana">
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill amber">생활 속에서</span><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M425.7 256c-16.9 0-32.8-9-41.4-23.4L320 126l-64.2 106.6c-8.7 14.5-24.6 23.5-41.5 23.5-4.5 0-9-.6-13.3-1.9L64 215v178c0 14.7 10 27.5 24.2 31l216.2 54.1c10.2 2.5 20.9 2.5 31 0L551.8 424c14.2-3.6 24.2-16.4 24.2-31V215l-137 39.1c-4.3 1.3-8.8 1.9-13.3 1.9zm212.6-112.2L586.8 41c-3.1-6.2-9.8-9.8-16.7-8.9L320 64l91.7 152.1c3.8 6.3 11.4 9.3 18.5 7.3l197.9-56.5c9.9-2.9 14.7-13.9 10.2-23.1zM53.2 41L1.7 143.8c-4.6 9.2.3 20.2 10.1 23l197.9 56.5c7.1 2 14.7-1 18.5-7.3L320 64 69.8 32.1c-6.9-.8-13.5 2.7-16.6 8.9z"></path></svg></span></div>
|
||||||
|
<h3>택배를 보낼 때</h3><ul><li>상자에 보내는 사람·받는 사람 주소를 적는다</li><li>택배 회사가 여러 물류센터를 거쳐 배달한다</li><li>송장 양식이 정해져 있어 누구나 같은 방식으로 보낸다</li></ul></div><div class="approx">≈</div>
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill ">네트워크에서</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M640 264v-16c0-8.84-7.16-16-16-16H344v-40h72c17.67 0 32-14.33 32-32V32c0-17.67-14.33-32-32-32H224c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h72v40H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h104v40H64c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h160c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32h-56v-40h304v40h-56c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h160c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32h-56v-40h104c8.84 0 16-7.16 16-16zM256 128V64h128v64H256zm-64 320H96v-64h96v64zm352 0h-96v-64h96v64z"></path></svg></span></div>
|
||||||
|
<h3>데이터를 보낼 때</h3><ul><li>데이터 조각(패킷)에 출발지·목적지 IP를 적는다</li><li>라우터들이 여러 구간을 거쳐 전달한다</li><li>프로토콜(TCP/IP)이라는 공통 규칙을 따른다</li></ul></div></div>
|
||||||
|
<div class="take">네트워크 = 주소가 적힌 작은 상자(패킷)를 규칙대로 나르는 길</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">4</span>
|
||||||
|
<aside class="notes">유튜브 영상 하나도 수천 개의 작은 상자로 쪼개져 오고, 도착하면 다시 조립된다고 설명합니다.</aside></section>
|
||||||
|
<section class="slide light t-cards" data-i="4" aria-label="슬라이드 5">
|
||||||
|
<div class="inner"><h2>꼭 알아야 할 세 가지 단어</h2><p class="lead">택배로 바꿔 생각하면 어렵지 않습니다</p><div class="grid g3">
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M425.7 256c-16.9 0-32.8-9-41.4-23.4L320 126l-64.2 106.6c-8.7 14.5-24.6 23.5-41.5 23.5-4.5 0-9-.6-13.3-1.9L64 215v178c0 14.7 10 27.5 24.2 31l216.2 54.1c10.2 2.5 20.9 2.5 31 0L551.8 424c14.2-3.6 24.2-16.4 24.2-31V215l-137 39.1c-4.3 1.3-8.8 1.9-13.3 1.9zm212.6-112.2L586.8 41c-3.1-6.2-9.8-9.8-16.7-8.9L320 64l91.7 152.1c3.8 6.3 11.4 9.3 18.5 7.3l197.9-56.5c9.9-2.9 14.7-13.9 10.2-23.1zM53.2 41L1.7 143.8c-4.6 9.2.3 20.2 10.1 23l197.9 56.5c7.1 2 14.7-1 18.5-7.3L320 64 69.8 32.1c-6.9-.8-13.5 2.7-16.6 8.9z"></path></svg></span><span class="pill amber">택배 상자</span></div><h3 class="big">패킷</h3><p>큰 파일도 작은 상자 여러 개로 나눠 보내고, 받는 쪽에서 다시 조립합니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg></span><span class="pill amber">등기 · 전단지</span></div><h3 class="big">TCP · UDP</h3><p>TCP는 받았는지 확인하는 등기우편, UDP는 확인 없이 빠르게 뿌리는 전단지입니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"></path></svg></span><span class="pill amber">아파트 호수</span></div><h3 class="big">포트</h3><p>IP가 건물 주소라면 포트는 호수입니다. 웹은 80·443호, SSH는 22호에 삽니다.</p>
|
||||||
|
</div></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">5</span>
|
||||||
|
<aside class="notes">포트 개념은 뒤에서 포트포워딩을 이해하는 핵심이니 꼭 강조합니다. '서버 = 건물, 서비스 = 호수'.</aside></section>
|
||||||
|
<section class="slide dark t-section" data-i="5" aria-label="슬라이드 6">
|
||||||
|
<div class="inner"><div class="sec"><div class="no">02</div><h1>IPv4 주소</h1><p class="sub muted-d">인터넷에 연결된 모든 기기의 집 주소</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg></span></div>
|
||||||
|
<span class="pg">6</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-analogy" data-i="6" aria-label="슬라이드 7">
|
||||||
|
<div class="inner"><h2>IP 주소는 인터넷의 집 주소입니다</h2><div class="ana">
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill amber">생활 속에서</span><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"></path></svg></span></div>
|
||||||
|
<h3>도로명 주소</h3><ul><li>경기도 군포시 ○○로 12</li><li>주소가 있어야 택배가 찾아온다</li><li>같은 주소가 두 집이면 배달 사고</li></ul></div><div class="approx">≈</div>
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill ">네트워크에서</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg></span></div>
|
||||||
|
<h3>IPv4 주소</h3><ul><li>192.168.0.10 처럼 숫자 4묶음</li><li>각 묶음은 0~255, 점(.)으로 구분</li><li>전체 약 43억 개 → 이미 부족 → IPv6 등장</li></ul></div></div>
|
||||||
|
<div class="take">기기마다 겹치지 않는 주소가 있어야 데이터가 정확히 찾아갑니다</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">7</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-cards" data-i="7" aria-label="슬라이드 8">
|
||||||
|
<div class="inner"><h2>공인 IP와 사설 IP</h2><p class="lead">회사 대표번호와 내선번호를 떠올리세요</p><div class="grid g3">
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg></span><span class="pill amber">회사 대표번호</span></div><h3 class="big">공인 IP</h3><p>전 세계에서 유일한 주소. 통신사가 우리 집 공유기에 1개 줍니다. 밖에서 찾아올 때 쓰는 번호.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg></span><span class="pill amber">내선번호</span></div><h3 class="big">사설 IP</h3><p>집 안에서만 통하는 주소. 192.168.x.x, 10.x.x.x, 172.16~31.x.x. 옆집에도 똑같은 번호가 있어도 됩니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg navy"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span><span class="pill slate">실습</span></div><h3 class="big">직접 확인</h3><p>사설 IP: 리눅스에서 ip addr<br>공인 IP: curl ifconfig.me<br>두 값이 다르면 공유기 뒤에 있는 것!</p>
|
||||||
|
</div></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">8</span>
|
||||||
|
<aside class="notes">수강생 각자 휴대폰 와이파이 설정에서 IP를 확인해 보게 하면 192.168로 시작하는 걸 직접 보게 됩니다.</aside></section>
|
||||||
|
<section class="slide light t-cards" data-i="8" aria-label="슬라이드 9">
|
||||||
|
<div class="inner"><h2>같은 동네, 다른 동네</h2><p class="lead">서브넷과 게이트웨이 — 우리 동네 안은 직접, 밖은 우체국을 거쳐서</p><div class="grid g3">
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M128 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32zm-24-80h192v48h48v-48h192v48h48v-57.59c0-21.17-17.23-38.41-38.41-38.41H344v-64h40c17.67 0 32-14.33 32-32V32c0-17.67-14.33-32-32-32H256c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h40v64H94.41C73.23 224 56 241.23 56 262.41V320h48v-48zm264 80h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32zm240 0h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32z"></path></svg></span><span class="pill amber">같은 동네</span></div><h3 class="big">서브넷 /24</h3><p>192.168.0.1 ~ 192.168.0.254는 한 동네. 서로 직접 대화할 수 있습니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 616 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M602 118.6L537.1 15C531.3 5.7 521 0 510 0H106C95 0 84.7 5.7 78.9 15L14 118.6c-33.5 53.5-3.8 127.9 58.8 136.4 4.5.6 9.1.9 13.7.9 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18.1 20.1 44.3 33.1 73.8 33.1 4.7 0 9.2-.3 13.7-.9 62.8-8.4 92.6-82.8 59-136.4zM529.5 288c-10 0-19.9-1.5-29.5-3.8V384H116v-99.8c-9.6 2.2-19.5 3.8-29.5 3.8-6 0-12.1-.4-18-1.2-5.6-.8-11.1-2.1-16.4-3.6V480c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32V283.2c-5.4 1.6-10.8 2.9-16.4 3.6-6.1.8-12.1 1.2-18.2 1.2z"></path></svg></span><span class="pill amber">동네 우체국</span></div><h3 class="big">게이트웨이</h3><p>동네 밖으로 나가는 모든 짐은 공유기(보통 192.168.0.1)에 맡깁니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg navy"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M257.981 272.971L63.638 467.314c-9.373 9.373-24.569 9.373-33.941 0L7.029 444.647c-9.357-9.357-9.375-24.522-.04-33.901L161.011 256 6.99 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L257.981 239.03c9.373 9.372 9.373 24.568 0 33.941zM640 456v-32c0-13.255-10.745-24-24-24H312c-13.255 0-24 10.745-24 24v32c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24z"></path></svg></span><span class="pill slate">실습</span></div><h3 class="big">확인 명령</h3><p>ip route<br>→ default via 192.168.0.1<br>'모르는 곳은 공유기로 보내라'는 뜻</p>
|
||||||
|
</div></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">9</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide dark t-section" data-i="9" aria-label="슬라이드 10">
|
||||||
|
<div class="inner"><div class="sec"><div class="no">03</div><h1>DNS</h1><p class="sub muted-d">사람이 기억하는 이름을 컴퓨터의 주소로</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"></path></svg></span></div>
|
||||||
|
<span class="pg">10</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-analogy" data-i="10" aria-label="슬라이드 11">
|
||||||
|
<div class="inner"><h2>DNS는 인터넷의 전화번호부입니다</h2><div class="ana">
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill amber">생활 속에서</span><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg></span></div>
|
||||||
|
<h3>전화 걸 때</h3><ul><li>'엄마'를 누르면 폰이 번호로 바꿔 건다</li><li>번호를 몰라도 이름만 알면 된다</li><li>번호가 바뀌면 주소록만 고치면 끝</li></ul></div><div class="approx">≈</div>
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill ">네트워크에서</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"></path></svg></span></div>
|
||||||
|
<h3>웹사이트 접속할 때</h3><ul><li>naver.com → 223.130.x.x 로 바꿔 접속</li><li>숫자 IP를 외울 필요가 없다</li><li>서버 IP가 바뀌어도 DNS만 고치면 된다</li></ul></div></div>
|
||||||
|
<div class="take">도메인 이름 → (DNS) → IP 주소 → 접속</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">11</span>
|
||||||
|
<aside class="notes">오늘 실습의 핵심: 우리 집 공인 IP를 외우는 대신 도메인 이름으로 접속하게 만드는 것.</aside></section>
|
||||||
|
<section class="slide light t-flow" data-i="11" aria-label="슬라이드 12">
|
||||||
|
<div class="inner"><h2>이름 하나를 찾는 과정</h2><p class="lead">처음 가는 가게 주소를 물어물어 찾아가는 것과 같습니다</p><div class="flow"><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg></span>
|
||||||
|
<h3>내 PC</h3><p class="sm">최근에 찾은 적 있나? 수첩(캐시) 먼저 확인</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z"></path></svg></span>
|
||||||
|
<h3>리졸버</h3><p class="sm">공유기·통신사 안내원에게 대신 찾아 달라고 부탁</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg></span>
|
||||||
|
<h3>루트 · TLD</h3><p class="sm">'.com 담당은 저쪽'처럼 담당 부서를 안내</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg></span>
|
||||||
|
<h3>권한 네임서버</h3><p class="sm">도메인 주인이 정한 답(예: Cloudflare)을 알려줌</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
||||||
|
<h3>IP 획득</h3><p class="sm">받은 IP로 접속하고, 한동안 수첩에 기록(TTL)</p></div></div><div class="note">확인 명령: nslookup naver.com 또는 dig naver.com</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">12</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-table" data-i="12" aria-label="슬라이드 13">
|
||||||
|
<div class="inner"><h2>DNS 레코드 — 전화번호부의 항목들</h2><p class="lead">실습에서는 A 레코드 하나만 있어도 충분합니다</p><table><colgroup><col style="width:13.333333333333334%"><col style="width:28.888888888888893%"><col style="width:26.666666666666668%"><col style="width:31.11111111111111%"></colgroup>
|
||||||
|
<thead><tr><th>레코드</th><th>하는 일</th><th>생활 비유</th><th>예시</th></tr></thead>
|
||||||
|
<tbody><tr><td>A</td><td>이름 → IPv4 주소</td><td>이름 옆에 적힌 전화번호</td><td>server → 121.x.x.x</td></tr><tr><td>AAAA</td><td>이름 → IPv6 주소</td><td>새 형식의 긴 번호</td><td>server → 2001:db8::1</td></tr><tr><td>CNAME</td><td>이름 → 다른 이름(별명)</td><td>'김부장' = '김철수'</td><td>www → myhome-lab.com</td></tr><tr><td>MX</td><td>메일 받을 서버 지정</td><td>우편물 수령 장소</td><td>mail.myhome-lab.com</td></tr><tr><td>TXT</td><td>소유 인증·설정 메모</td><td>주소록 메모란</td><td>인증 문자열</td></tr><tr><td>NS</td><td>이 도메인의 전화번호부 담당</td><td>어느 114에 물어볼지</td><td>xxx.ns.cloudflare.com</td></tr></tbody></table></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">13</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide dark t-section" data-i="13" aria-label="슬라이드 14">
|
||||||
|
<div class="inner"><div class="sec"><div class="no">04</div><h1>라우팅</h1><p class="sub muted-d">수많은 갈림길에서 다음 길을 고르는 일</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg></span></div>
|
||||||
|
<span class="pg">14</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-analogy" data-i="14" aria-label="슬라이드 15">
|
||||||
|
<div class="inner"><h2>라우팅은 택배 허브의 길 안내입니다</h2><div class="ana">
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill amber">생활 속에서</span><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path></svg></span></div>
|
||||||
|
<h3>군포 → 부산 택배</h3><ul><li>군포 대리점 → 중앙 허브 → 부산 터미널</li><li>각 거점은 '다음 거점'만 알면 된다</li><li>길이 막히면 다른 경로로 돌아간다</li></ul></div><div class="approx">≈</div>
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill ">네트워크에서</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg></span></div>
|
||||||
|
<h3>내 PC → 해외 서버</h3><ul><li>공유기 → 통신사 → 국제망 → 목적지</li><li>각 라우터는 '다음 라우터'만 정한다</li><li>장애가 나면 우회 경로를 찾는다</li></ul></div></div>
|
||||||
|
<div class="take">전체 지도를 몰라도 각자 '다음 한 칸'만 정확하면 도착합니다</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">15</span>
|
||||||
|
<aside class="notes">traceroute(윈도우는 tracert) google.com 을 실행해 거쳐 가는 라우터 목록을 보여주면 효과적입니다.</aside></section>
|
||||||
|
<section class="slide light t-code" data-i="15" aria-label="슬라이드 16">
|
||||||
|
<div class="inner"><h2>라우팅 테이블 = 갈림길의 이정표</h2><div class="codewrap"><ul class="checks">
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>192.168.0.0/24 → 직접</h3><p class="muted">같은 동네는 바로 전달</p></div></li>
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>default (그 외 전부) → 공유기</h3><p class="muted">모르는 곳은 동네 우체국에 맡김</p></div></li>
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>traceroute 로 경로 보기</h3><p class="muted">거쳐 가는 라우터가 한 줄씩 보임</p></div></li></ul>
|
||||||
|
<pre><code>$ ip route
|
||||||
|
default via 192.168.0.1 dev eth0
|
||||||
|
192.168.0.0/24 dev eth0 src 192.168.0.10
|
||||||
|
|
||||||
|
$ traceroute google.com
|
||||||
|
1 192.168.0.1 1.2 ms
|
||||||
|
2 10.x.x.x 4.8 ms
|
||||||
|
3 ...
|
||||||
|
12 142.250.x.x 35.1 ms</code></pre></div><div class="note">리눅스 서버에서 직접 실행해 보세요</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">16</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide dark t-section" data-i="16" aria-label="슬라이드 17">
|
||||||
|
<div class="inner"><div class="sec"><div class="no">05</div><h1>인터넷 공유기</h1><p class="sub muted-d">공인 IP 하나를 온 가족이 나눠 쓰게 해 주는 장치</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z"></path></svg></span></div>
|
||||||
|
<span class="pg">17</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-cards" data-i="17" aria-label="슬라이드 18">
|
||||||
|
<div class="inner"><h2>공유기가 하는 네 가지 일</h2><p class="lead">작은 상자 하나가 아파트 관리실 역할을 모두 맡습니다</p><div class="grid g2">
|
||||||
|
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg></span><div><div class="row-sb"><h3>라우터</h3><span class="pill amber">동네 우체국</span></div><p>집 안과 인터넷 사이에서 패킷의 길을 정합니다.</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M560 64c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v32c0 8.84 7.16 16 16 16h15.98v384H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h240v-80c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v80h240c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16h-16V64h16zm-304 44.8c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4zm0 96c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4zm-128-96c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4zM179.2 256h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4c0 6.4-6.4 12.8-12.8 12.8zM192 384c0-53.02 42.98-96 96-96s96 42.98 96 96H192zm256-140.8c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm0-96c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4z"></path></svg></span><div><div class="row-sb"><h3>DHCP</h3><span class="pill amber">호텔 프런트</span></div><p>기기가 들어오면 빈 방(사설 IP)을 자동으로 배정합니다.</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M0 168v-16c0-13.255 10.745-24 24-24h360V80c0-21.367 25.899-32.042 40.971-16.971l80 80c9.372 9.373 9.372 24.569 0 33.941l-80 80C409.956 271.982 384 261.456 384 240v-48H24c-13.255 0-24-10.745-24-24zm488 152H128v-48c0-21.314-25.862-32.08-40.971-16.971l-80 80c-9.372 9.373-9.372 24.569 0 33.941l80 80C102.057 463.997 128 453.437 128 432v-48h360c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24z"></path></svg></span><div><div class="row-sb"><h3>NAT</h3><span class="pill amber">전화 교환원</span></div><p>내선(사설 IP)을 대표번호(공인 IP)로 바꿔 밖에 연결합니다.</p></div>
|
||||||
|
</div>
|
||||||
|
<div class="card hcard"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256.1 446.3l-.1-381 175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7z"></path></svg></span><div><div class="row-sb"><h3>방화벽·Wi-Fi</h3><span class="pill amber">경비실</span></div><p>밖에서 함부로 들어오는 연결을 막고 무선 신호를 뿌립니다.</p></div>
|
||||||
|
</div></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">18</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-flow" data-i="18" aria-label="슬라이드 19">
|
||||||
|
<div class="inner"><h2>NAT와 포트포워딩</h2><p class="lead">교환원에게 '외부에서 2222번 찾으면 서버 내선으로 돌려주세요'라고 부탁해 두는 것</p><div class="flow"><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg></span>
|
||||||
|
<h3>외부 사용자</h3><p class="">카페 노트북에서 내 공인 IP:2222로 접속</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z"></path></svg></span>
|
||||||
|
<h3>공유기(교환원)</h3><p class="">규칙표 확인: 2222 → 192.168.0.10:22</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg></span>
|
||||||
|
<h3>리눅스 서버</h3><p class="">내선 22번(SSH)에서 연결을 받음</p></div></div><div class="note">규칙이 없으면? 교환원이 '그런 분 없습니다' 하고 끊음 → 기본적으로 안전한 이유</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">19</span>
|
||||||
|
<aside class="notes">나가는 연결은 자동으로 되지만, 들어오는 연결은 미리 규칙(포트포워딩)을 만들어야 한다는 비대칭이 핵심입니다.</aside></section>
|
||||||
|
<section class="slide light t-cards" data-i="19" aria-label="슬라이드 20">
|
||||||
|
<div class="inner"><h2>주소가 바뀌는 문제와 해결책</h2><p class="lead">서버의 주소는 안 바뀌게, 집의 공인 IP는 바뀌어도 따라가게</p><div class="grid g3">
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H303.2c.9-4.5.8 3.6.8-22.4 0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6 0 26-.2 17.9.8 22.4H48V144h480v288zm-168-80h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm-168 96c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64z"></path></svg></span><span class="pill amber">지정석</span></div><h3 class="big">DHCP 고정 할당</h3><p>서버의 MAC 주소에 192.168.0.10을 고정. 포트포워딩 대상이 바뀌지 않습니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"></path></svg></span><span class="pill amber">가끔 이사</span></div><h3 class="big">유동 공인 IP</h3><p>가정용 회선은 공인 IP가 재부팅·계약 변경 시 바뀔 수 있습니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card vcard"><div class="row-sb"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></span><span class="pill amber">자동 주소록 갱신</span></div><h3 class="big">DDNS</h3><p>IP가 바뀌면 DNS 기록을 자동으로 고쳐 줍니다. 뒤에서 Cloudflare API로 직접 구현합니다.</p>
|
||||||
|
</div></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">20</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide dark t-section" data-i="20" aria-label="슬라이드 21">
|
||||||
|
<div class="inner"><div class="sec"><div class="no">06</div><h1>VPN</h1><p class="sub muted-d">인터넷 위에 나만의 비밀 통로를 놓는 기술</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M383.9 308.3l23.9-62.6c4-10.5-3.7-21.7-15-21.7h-58.5c11-18.9 17.8-40.6 17.8-64v-.3c39.2-7.8 64-19.1 64-31.7 0-13.3-27.3-25.1-70.1-33-9.2-32.8-27-65.8-40.6-82.8-9.5-11.9-25.9-15.6-39.5-8.8l-27.6 13.8c-9 4.5-19.6 4.5-28.6 0L182.1 3.4c-13.6-6.8-30-3.1-39.5 8.8-13.5 17-31.4 50-40.6 82.8-42.7 7.9-70 19.7-70 33 0 12.6 24.8 23.9 64 31.7v.3c0 23.4 6.8 45.1 17.8 64H56.3c-11.5 0-19.2 11.7-14.7 22.3l25.8 60.2C27.3 329.8 0 372.7 0 422.4v44.8C0 491.9 20.1 512 44.8 512h358.4c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-48.4-25.8-90.4-64.1-114.1zM176 480l-41.6-192 49.6 32 24 40-32 120zm96 0l-32-120 24-40 49.6-32L272 480zm41.7-298.5c-3.9 11.9-7 24.6-16.5 33.4-10.1 9.3-48 22.4-64-25-2.8-8.4-15.4-8.4-18.3 0-17 50.2-56 32.4-64 25-9.5-8.8-12.7-21.5-16.5-33.4-.8-2.5-6.3-5.7-6.3-5.8v-10.8c28.3 3.6 61 5.8 96 5.8s67.7-2.1 96-5.8v10.8c-.1.1-5.6 3.2-6.4 5.8z"></path></svg></span></div>
|
||||||
|
<span class="pg">21</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-analogy" data-i="21" aria-label="슬라이드 22">
|
||||||
|
<div class="inner"><h2>VPN은 회사 출입증이 달린 비밀 통로입니다</h2><div class="ana">
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill amber">생활 속에서</span><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"></path></svg></span></div>
|
||||||
|
<h3>사원증 들고 출근</h3><ul><li>출입증이 있어야 사내에 들어간다</li><li>들어가면 내부 회의실을 자유롭게 쓴다</li><li>밖에서 보면 누가 무엇을 하는지 모른다</li></ul></div><div class="approx">≈</div>
|
||||||
|
<div class="card side"><div class="row-sb"><span class="pill ">네트워크에서</span><span class="ic circ lg "><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg></span></div>
|
||||||
|
<h3>VPN 접속</h3><ul><li>인증한 기기만 집·회사망에 들어온다</li><li>접속하면 사설 IP(192.168.x)로 바로 통신</li><li>통로 안의 데이터는 모두 암호화된다</li></ul></div></div>
|
||||||
|
<div class="take">포트를 외부에 열지 않고도 집 서버에 안전하게 들어가는 방법</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">22</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-table" data-i="22" aria-label="슬라이드 23">
|
||||||
|
<div class="inner"><h2>포트포워딩 vs VPN</h2><p class="lead">처음엔 포트포워딩으로 원리를 배우고, 운영은 VPN 방식을 권장합니다</p><table><colgroup><col style="width:20%"><col style="width:40%"><col style="width:40%"></colgroup>
|
||||||
|
<thead><tr><th>비교</th><th>포트포워딩</th><th>VPN (WireGuard · Tailscale)</th></tr></thead>
|
||||||
|
<tbody><tr><td>비유</td><td>건물 정문 옆 쪽문을 열어 둠</td><td>출입증 있는 사람만 쓰는 비밀 통로</td></tr><tr><td>외부 노출</td><td>열어 둔 포트가 전 세계에 보임</td><td>통로 입구 하나(또는 없음)</td></tr><tr><td>설정 난이도</td><td>쉬움 — 공유기 설정만</td><td>보통 — 각 기기에 앱 설치</td></tr><tr><td>도메인 필요</td><td>있으면 편리(오늘 실습)</td><td>없어도 됨</td></tr><tr><td>추천 용도</td><td>학습·웹 서비스 공개</td><td>SSH·관리 화면 등 나만 쓰는 접속</td></tr></tbody></table></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">23</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide dark t-section" data-i="23" aria-label="슬라이드 24">
|
||||||
|
<div class="inner"><div class="sec"><div class="no">07</div><h1>실전: 집 서버 접속</h1><p class="sub muted-d">도메인 → Cloudflare DNS → 공유기 → 리눅스</p></div><span class="ic ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg></span></div>
|
||||||
|
<span class="pg">24</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-flow" data-i="24" aria-label="슬라이드 25">
|
||||||
|
<div class="inner"><h2>전체 그림 한 장</h2><p class="lead">ssh -p 2222 user@server.myhome-lab.com 을 입력하면 일어나는 일</p><div class="flow"><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg></span>
|
||||||
|
<h3>내 노트북</h3><p class="">server.myhome-lab.com 의 IP를 묻는다</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg></span>
|
||||||
|
<h3>Cloudflare DNS</h3><p class="">A 레코드: 우리 집 공인 IP를 알려준다</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z"></path></svg></span>
|
||||||
|
<h3>집 공유기</h3><p class="">2222번 문 → 192.168.0.10:22로 돌린다</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg></span>
|
||||||
|
<h3>리눅스 서버</h3><p class="">SSH 키를 확인하고 접속을 허락한다</p></div></div><div class="note">※ myhome-lab.com 은 설명용 예시 도메인입니다. 실습 때는 본인이 구입한 도메인으로 바꾸세요.</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">25</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-steps" data-i="25" aria-label="슬라이드 26">
|
||||||
|
<div class="inner"><h2>후이즈(whois.co.kr)에서 도메인 구입</h2><div class="stepwrap"><div class="panel"><b class="steplbl">STEP 1</b><span class="ic circ xl"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"></path></svg></span>
|
||||||
|
<small>생활 비유</small><p>가게 상호를 등록하는 일 — 이름의 주인이 됩니다</p></div><ol class="items">
|
||||||
|
<li class="card"><span class="n">1</span><div><h3>이름 검색</h3><p class="muted">원하는 이름과 확장자(.com, .kr, .net 등)가 비어 있는지 확인</p></div></li>
|
||||||
|
<li class="card"><span class="n">2</span><div><h3>구입 · 결제</h3><p class="muted">보통 1년 단위. 만료되면 남이 가져갈 수 있으니 자동 연장 권장</p></div></li>
|
||||||
|
<li class="card"><span class="n">3</span><div><h3>소유자 정보 확인</h3><p class="muted">연락받을 이메일을 정확히. 인증 메일을 놓치면 도메인이 정지될 수 있음</p></div></li>
|
||||||
|
<li class="card"><span class="n">4</span><div><h3>관리 화면 위치 기억</h3><p class="muted">'도메인 관리 → 네임서버 변경' 메뉴를 다음 단계에서 씁니다</p></div></li></ol></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">26</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-steps" data-i="26" aria-label="슬라이드 27">
|
||||||
|
<div class="inner"><h2>Cloudflare에 도메인 연결 (네임서버 변경)</h2><div class="stepwrap"><div class="panel"><b class="steplbl">STEP 2</b><span class="ic circ xl"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg></span>
|
||||||
|
<small>생활 비유</small><p>전화번호부 관리 회사를 후이즈에서 Cloudflare로 바꾸는 일</p></div><ol class="items">
|
||||||
|
<li class="card"><span class="n">1</span><div><h3>Cloudflare 가입 · 도메인 추가</h3><p class="muted">무료(Free) 요금제로 충분. 기존 DNS 기록을 자동으로 불러옴</p></div></li>
|
||||||
|
<li class="card"><span class="n">2</span><div><h3>네임서버 2개 받기</h3><p class="muted">예: ada.ns.cloudflare.com / bob.ns.cloudflare.com (계정마다 다름)</p></div></li>
|
||||||
|
<li class="card"><span class="n">3</span><div><h3>후이즈에서 네임서버 교체</h3><p class="muted">후이즈 기본 네임서버를 지우고 Cloudflare가 준 2개를 입력</p></div></li>
|
||||||
|
<li class="card"><span class="n">4</span><div><h3>활성화 기다리기</h3><p class="muted">보통 수 분~몇 시간, 길면 최대 48시간. 완료되면 이메일로 알려줌</p></div></li></ol></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">27</span>
|
||||||
|
<aside class="notes">확인: dig NS myhome-lab.com +short 결과에 cloudflare.com이 보이면 성공.</aside></section>
|
||||||
|
<section class="slide light t-table" data-i="27" aria-label="슬라이드 28">
|
||||||
|
<div class="inner"><h2>STEP 3 Cloudflare DNS 레코드 만들기</h2><p class="lead">주황 구름(Proxied)은 웹 전용 — SSH는 반드시 회색 구름(DNS only)으로</p><table><colgroup><col style="width:10%"><col style="width:15.555555555555555%"><col style="width:24.444444444444446%"><col style="width:23.333333333333332%"><col style="width:26.666666666666668%"></colgroup>
|
||||||
|
<thead><tr><th>Type</th><th>Name</th><th>Content</th><th>Proxy</th><th>용도</th></tr></thead>
|
||||||
|
<tbody><tr><td>A</td><td>server</td><td>우리 집 공인 IP</td><td>회색 (DNS only)</td><td>SSH 접속용</td></tr><tr><td>A</td><td>@</td><td>우리 집 공인 IP</td><td>주황 (Proxied)</td><td>웹사이트 (80·443)</td></tr><tr><td>CNAME</td><td>www</td><td>myhome-lab.com</td><td>주황 (Proxied)</td><td>www 붙여도 접속</td></tr></tbody></table><div class="note">주황 구름: Cloudflare가 대신 받아 전달(IP 숨김, 웹만) · 회색 구름: 주소만 알려줌(모든 포트)</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">28</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-steps" data-i="28" aria-label="슬라이드 29">
|
||||||
|
<div class="inner"><h2>공유기 설정 (ipTIME 기준)</h2><div class="stepwrap"><div class="panel"><b class="steplbl">STEP 4</b><span class="ic circ xl"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"></path></svg></span>
|
||||||
|
<small>생활 비유</small><p>관리실에 '서버 자리 지정'과 '쪽문 연결 규칙'을 등록하는 일</p></div><ol class="items">
|
||||||
|
<li class="card"><span class="n">1</span><div><h3>관리 화면 접속</h3><p class="muted">브라우저에서 192.168.0.1 → 관리자 로그인 (초기 비밀번호는 꼭 변경)</p></div></li>
|
||||||
|
<li class="card"><span class="n">2</span><div><h3>서버 IP 고정</h3><p class="muted">고급 설정 → 네트워크 관리 → 내부 네트워크 설정 → 수동 IP 할당: 192.168.0.10</p></div></li>
|
||||||
|
<li class="card"><span class="n">3</span><div><h3>포트포워딩 규칙</h3><p class="muted">고급 설정 → NAT/라우터 관리 → 포트포워드 설정: 외부 2222 → 192.168.0.10:22 (TCP)</p></div></li>
|
||||||
|
<li class="card"><span class="n">4</span><div><h3>공인 IP 확인</h3><p class="muted">공유기 첫 화면의 '외부 IP'와 curl ifconfig.me 값이 같은지 비교</p></div></li></ol></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">29</span>
|
||||||
|
<aside class="notes">제조사마다 메뉴 이름이 다릅니다. 외부 IP가 10.x / 100.64~127.x 이면 통신사 NAT(CGNAT) 뒤라 포트포워딩이 안 됩니다 → VPN이나 Cloudflare Tunnel로 우회.</aside></section>
|
||||||
|
<section class="slide light t-code" data-i="29" aria-label="슬라이드 30">
|
||||||
|
<div class="inner"><h2>STEP 5 리눅스 서버 준비와 접속</h2><div class="codewrap"><ul class="checks">
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>SSH 서버 설치</h3><p class="muted">Ubuntu: openssh-server</p></div></li>
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>방화벽에서 22번만 허용</h3><p class="muted">ufw로 필요한 문만 엽니다</p></div></li>
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>비밀번호 대신 키로 로그인</h3><p class="muted">내 노트북의 공개키를 서버에 등록</p></div></li>
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>도메인으로 접속</h3><p class="muted">외부 2222 → 내부 22로 연결됨</p></div></li></ul>
|
||||||
|
<pre><code># server (192.168.0.10)
|
||||||
|
$ sudo apt install -y openssh-server
|
||||||
|
$ sudo ufw allow 22/tcp && sudo ufw enable
|
||||||
|
|
||||||
|
# laptop
|
||||||
|
$ ssh-keygen -t ed25519
|
||||||
|
$ ssh-copy-id user@192.168.0.10
|
||||||
|
|
||||||
|
# from outside (cafe, LTE)
|
||||||
|
$ ssh -p 2222 user@server.myhome-lab.com</code></pre></div><div class="note">집 와이파이가 아닌 휴대폰 핫스팟에서 접속 테스트해야 '외부 접속'이 확인됩니다</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">30</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-code" data-i="30" aria-label="슬라이드 31">
|
||||||
|
<div class="inner"><h2>STEP 6 공인 IP가 바뀌어도 자동으로 (DDNS)</h2><div class="codewrap"><ul class="checks">
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>Cloudflare API 토큰 발급</h3><p class="muted">권한: Zone · DNS · Edit (해당 도메인만)</p></div></li>
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>Zone ID · Record ID 확인</h3><p class="muted">대시보드 개요 화면과 API 조회로 확인</p></div></li>
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>5분마다 실행</h3><p class="muted">crontab: */5 * * * * python3 ddns.py</p></div></li>
|
||||||
|
<li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><div><h3>표준 라이브러리만 사용</h3><p class="muted">pip 설치 없이 바로 실행</p></div></li></ul>
|
||||||
|
<pre><code>import json, os, urllib.request as u
|
||||||
|
T=os.environ['CF_TOKEN']; Z=os.environ['CF_ZONE']
|
||||||
|
R=os.environ['CF_RECORD']
|
||||||
|
ip=u.urlopen('https://api.ipify.org').read().decode()
|
||||||
|
api='https://api.cloudflare.com/client/v4'
|
||||||
|
url=f'{api}/zones/{Z}/dns_records/{R}'
|
||||||
|
body=json.dumps({'type':'A','name':'server',
|
||||||
|
'content':ip,'ttl':300,'proxied':False}).encode()
|
||||||
|
req=u.Request(url,data=body,method='PUT',headers={
|
||||||
|
'Authorization':f'Bearer {T}',
|
||||||
|
'Content-Type':'application/json'})
|
||||||
|
print(json.load(u.urlopen(req))['success'], ip)</code></pre></div><div class="note">토큰은 코드에 적지 말고 환경변수로 — 깃에 올라가면 누구나 내 DNS를 바꿀 수 있습니다</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">31</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-checklist" data-i="31" aria-label="슬라이드 32">
|
||||||
|
<div class="inner"><h2>문을 열었다면, 지키는 것도 내 몫</h2><p class="lead">포트를 여는 순간 전 세계 자동 스캐너가 두드리기 시작합니다</p><div class="grid g2 tight"><div class="card hcard sm-card">
|
||||||
|
<span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"></path></svg></span><div><h3>비밀번호 로그인 끄기</h3><p class="muted">sshd_config: PasswordAuthentication no — 키로만 접속</p></div></div><div class="card hcard sm-card">
|
||||||
|
<span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"></path></svg></span><div><h3>필요한 포트만 열기</h3><p class="muted">포트포워딩 규칙을 최소로. 안 쓰는 규칙은 바로 삭제</p></div></div><div class="card hcard sm-card">
|
||||||
|
<span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256.1 446.3l-.1-381 175.9 73.3c-3.3 151.4-82.1 261.1-175.8 307.7z"></path></svg></span><div><h3>반복 실패 차단</h3><p class="muted">fail2ban으로 로그인 실패가 잦은 IP를 자동 차단</p></div></div><div class="card hcard sm-card">
|
||||||
|
<span class="ic circ"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z"></path></svg></span><div><h3>업데이트 습관</h3><p class="muted">sudo apt update && sudo apt upgrade 를 주기적으로</p></div></div><div class="card hcard sm-card">
|
||||||
|
<span class="ic circ amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M383.9 308.3l23.9-62.6c4-10.5-3.7-21.7-15-21.7h-58.5c11-18.9 17.8-40.6 17.8-64v-.3c39.2-7.8 64-19.1 64-31.7 0-13.3-27.3-25.1-70.1-33-9.2-32.8-27-65.8-40.6-82.8-9.5-11.9-25.9-15.6-39.5-8.8l-27.6 13.8c-9 4.5-19.6 4.5-28.6 0L182.1 3.4c-13.6-6.8-30-3.1-39.5 8.8-13.5 17-31.4 50-40.6 82.8-42.7 7.9-70 19.7-70 33 0 12.6 24.8 23.9 64 31.7v.3c0 23.4 6.8 45.1 17.8 64H56.3c-11.5 0-19.2 11.7-14.7 22.3l25.8 60.2C27.3 329.8 0 372.7 0 422.4v44.8C0 491.9 20.1 512 44.8 512h358.4c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-48.4-25.8-90.4-64.1-114.1zM176 480l-41.6-192 49.6 32 24 40-32 120zm96 0l-32-120 24-40 49.6-32L272 480zm41.7-298.5c-3.9 11.9-7 24.6-16.5 33.4-10.1 9.3-48 22.4-64-25-2.8-8.4-15.4-8.4-18.3 0-17 50.2-56 32.4-64 25-9.5-8.8-12.7-21.5-16.5-33.4-.8-2.5-6.3-5.7-6.3-5.8v-10.8c28.3 3.6 61 5.8 96 5.8s67.7-2.1 96-5.8v10.8c-.1.1-5.6 3.2-6.4 5.8z"></path></svg></span><div><h3>관리 접속은 VPN으로</h3><p class="muted">SSH는 Tailscale·WireGuard 안쪽에서만 열면 가장 안전</p></div></div><div class="card hcard sm-card">
|
||||||
|
<span class="ic circ amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg></span><div><h3>웹은 Cloudflare 뒤로</h3><p class="muted">Proxied 또는 Cloudflare Tunnel로 집 IP를 숨김</p></div></div></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">32</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-flow" data-i="32" aria-label="슬라이드 33">
|
||||||
|
<div class="inner"><h2>안 될 때는 바깥에서 안쪽으로</h2><p class="lead">택배가 안 오면 주소 → 건물 → 호수 → 사람 순서로 확인하듯</p><div class="flow"><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"></path></svg></span>
|
||||||
|
<h3>① 이름</h3><p class="">dig +short server.myhome-lab.com 이 우리 집 공인 IP인가?</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg></span>
|
||||||
|
<h3>② 공인 IP</h3><p class="">curl ifconfig.me 와 공유기 외부 IP가 같은가?</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"></path></svg></span>
|
||||||
|
<h3>③ 쪽문</h3><p class="">포트포워딩 규칙의 내부 IP·포트가 정확한가?</p></div><div class="arrow">➜</div><div class="card step"><span class="ic circ lg amber"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg></span>
|
||||||
|
<h3>④ 서버</h3><p class="">systemctl status ssh 실행 중? ufw가 22를 허용?</p></div></div><div class="note">집 안에서 도메인으로 접속하면 실패할 수 있습니다(헤어핀 NAT 미지원) → 테스트는 휴대폰 데이터망으로</div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">33</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide light t-summary" data-i="33" aria-label="슬라이드 34">
|
||||||
|
<div class="inner"><h2>한 장으로 정리</h2><p class="lead">개념마다 생활 속 짝꿍 하나만 기억하세요</p><div class="grid g4"><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path></svg></span>
|
||||||
|
<h3>네트워크</h3><p class="teal"><b>= 택배망</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg></span>
|
||||||
|
<h3>IP 주소</h3><p class="teal"><b>= 집 주소</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"></path></svg></span>
|
||||||
|
<h3>포트</h3><p class="teal"><b>= 아파트 호수</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M436 160c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h320c26.5 0 48-21.5 48-48v-48h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-228-32c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H118.4C106 384 96 375.4 96 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"></path></svg></span>
|
||||||
|
<h3>DNS</h3><p class="teal"><b>= 전화번호부</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M416 320h-96c-17.6 0-32-14.4-32-32s14.4-32 32-32h96s96-107 96-160-43-96-96-96-96 43-96 96c0 25.5 22.2 63.4 45.3 96H320c-52.9 0-96 43.1-96 96s43.1 96 96 96h96c17.6 0 32 14.4 32 32s-14.4 32-32 32H185.5c-16 24.8-33.8 47.7-47.3 64H416c52.9 0 96-43.1 96-96s-43.1-96-96-96zm0-256c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM96 256c-53 0-96 43-96 96s96 160 96 160 96-107 96-160-43-96-96-96zm0 128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg></span>
|
||||||
|
<h3>라우팅</h3><p class="teal"><b>= 택배 허브 길 안내</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M0 168v-16c0-13.255 10.745-24 24-24h360V80c0-21.367 25.899-32.042 40.971-16.971l80 80c9.372 9.373 9.372 24.569 0 33.941l-80 80C409.956 271.982 384 261.456 384 240v-48H24c-13.255 0-24-10.745-24-24zm488 152H128v-48c0-21.314-25.862-32.08-40.971-16.971l-80 80c-9.372 9.373-9.372 24.569 0 33.941l80 80C102.057 463.997 128 453.437 128 432v-48h360c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24z"></path></svg></span>
|
||||||
|
<h3>공유기 · NAT</h3><p class="teal"><b>= 전화 교환원</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M383.9 308.3l23.9-62.6c4-10.5-3.7-21.7-15-21.7h-58.5c11-18.9 17.8-40.6 17.8-64v-.3c39.2-7.8 64-19.1 64-31.7 0-13.3-27.3-25.1-70.1-33-9.2-32.8-27-65.8-40.6-82.8-9.5-11.9-25.9-15.6-39.5-8.8l-27.6 13.8c-9 4.5-19.6 4.5-28.6 0L182.1 3.4c-13.6-6.8-30-3.1-39.5 8.8-13.5 17-31.4 50-40.6 82.8-42.7 7.9-70 19.7-70 33 0 12.6 24.8 23.9 64 31.7v.3c0 23.4 6.8 45.1 17.8 64H56.3c-11.5 0-19.2 11.7-14.7 22.3l25.8 60.2C27.3 329.8 0 372.7 0 422.4v44.8C0 491.9 20.1 512 44.8 512h358.4c24.7 0 44.8-20.1 44.8-44.8v-44.8c0-48.4-25.8-90.4-64.1-114.1zM176 480l-41.6-192 49.6 32 24 40-32 120zm96 0l-32-120 24-40 49.6-32L272 480zm41.7-298.5c-3.9 11.9-7 24.6-16.5 33.4-10.1 9.3-48 22.4-64-25-2.8-8.4-15.4-8.4-18.3 0-17 50.2-56 32.4-64 25-9.5-8.8-12.7-21.5-16.5-33.4-.8-2.5-6.3-5.7-6.3-5.8v-10.8c28.3 3.6 61 5.8 96 5.8s67.7-2.1 96-5.8v10.8c-.1.1-5.6 3.2-6.4 5.8z"></path></svg></span>
|
||||||
|
<h3>VPN</h3><p class="teal"><b>= 출입증 비밀 통로</b></p></div><div class="card tile center"><span class="ic circ lg"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 616 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M602 118.6L537.1 15C531.3 5.7 521 0 510 0H106C95 0 84.7 5.7 78.9 15L14 118.6c-33.5 53.5-3.8 127.9 58.8 136.4 4.5.6 9.1.9 13.7.9 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18 20.1 44.3 33.1 73.8 33.1 29.6 0 55.8-13 73.8-33.1 18.1 20.1 44.3 33.1 73.8 33.1 4.7 0 9.2-.3 13.7-.9 62.8-8.4 92.6-82.8 59-136.4zM529.5 288c-10 0-19.9-1.5-29.5-3.8V384H116v-99.8c-9.6 2.2-19.5 3.8-29.5 3.8-6 0-12.1-.4-18-1.2-5.6-.8-11.1-2.1-16.4-3.6V480c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32V283.2c-5.4 1.6-10.8 2.9-16.4 3.6-6.1.8-12.1 1.2-18.2 1.2z"></path></svg></span>
|
||||||
|
<h3>도메인</h3><p class="teal"><b>= 가게 상호</b></p></div></div></div>
|
||||||
|
<footer>네트워크 첫걸음</footer><span class="pg">34</span>
|
||||||
|
</section>
|
||||||
|
<section class="slide dark t-closing" data-i="34" aria-label="슬라이드 35">
|
||||||
|
<div class="inner"><span class="ic ghost sm-ghost"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M243.2 189.9V258c26.1 5.9 49.3 15.6 73.6 22.3v-68.2c-26-5.8-49.4-15.5-73.6-22.2zm223.3-123c-34.3 15.9-76.5 31.9-117 31.9C296 98.8 251.7 64 184.3 64c-25 0-47.3 4.4-68 12 2.8-7.3 4.1-15.2 3.6-23.6C118.1 24 94.8 1.2 66.3 0 34.3-1.3 8 24.3 8 56c0 19 9.5 35.8 24 45.9V488c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24v-94.4c28.3-12.1 63.6-22.1 114.4-22.1 53.6 0 97.8 34.8 165.2 34.8 48.2 0 86.7-16.3 122.5-40.9 8.7-6 13.8-15.8 13.8-26.4V95.9c.1-23.3-24.2-38.8-45.4-29zM169.6 325.5c-25.8 2.7-50 8.2-73.6 16.6v-70.5c26.2-9.3 47.5-15 73.6-17.4zM464 191c-23.6 9.8-46.3 19.5-73.6 23.9V286c24.8-3.4 51.4-11.8 73.6-26v70.5c-25.1 16.1-48.5 24.7-73.6 27.1V286c-27 3.7-47.9 1.5-73.6-5.6v67.4c-23.9-7.4-47.3-16.7-73.6-21.3V258c-19.7-4.4-40.8-6.8-73.6-3.8v-70c-22.4 3.1-44.6 10.2-73.6 20.9v-70.5c33.2-12.2 50.1-19.8 73.6-22v71.6c27-3.7 48.4-1.3 73.6 5.7v-67.4c23.7 7.4 47.2 16.7 73.6 21.3v68.4c23.7 5.3 47.6 6.9 73.6 2.7V143c27-4.8 52.3-13.6 73.6-22.5z"></path></svg></span><div class="close"><h1>오늘의 과제</h1><p class="sub">내 도메인으로 집(또는 실습실) 리눅스 서버에 접속하고, 접속 화면을 캡처해 제출하세요</p>
|
||||||
|
<ul class="checks d"><li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><span class="muted-d">dig 결과 · 공유기 포트포워딩 화면 · 외부(LTE)에서 ssh 접속 성공 화면</span></li><li><span class="ic circ sm"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="currentColor" style="color:currentColor" height="64" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></span><span class="muted-d">보너스: STEP 6 DDNS 스크립트를 cron에 등록하고 동작 로그 첨부</span></li></ul></div></div>
|
||||||
|
<span class="pg">35</span>
|
||||||
|
</section></main>
|
||||||
|
<div id="bar"></div><div id="noteview"></div>
|
||||||
|
<div id="hud"><button id="prev" aria-label="이전">◀</button><button id="nt">노트</button><button id="fs">전체화면</button><button id="pr">PDF 저장</button><button id="next" aria-label="다음">▶</button></div>
|
||||||
|
<script>
|
||||||
|
const S=[...document.querySelectorAll('.slide')];let i=0;
|
||||||
|
function fit(){const k=Math.min(innerWidth/1280,innerHeight/720);S.forEach(s=>s.style.transform='scale('+k+')')}
|
||||||
|
function go(n){i=Math.max(0,Math.min(S.length-1,n));S.forEach((s,j)=>s.classList.toggle('on',j===i));
|
||||||
|
document.getElementById('bar').style.width=((i+1)/S.length*100)+'%';const nt=S[i].querySelector('.notes');
|
||||||
|
document.getElementById('noteview').textContent=nt?nt.textContent:'(강사 노트 없음)';try{history.replaceState(null,'','#'+(i+1))}catch(e){}}
|
||||||
|
addEventListener('resize',fit);
|
||||||
|
addEventListener('keydown',e=>{if(['ArrowRight','PageDown',' ','Enter'].includes(e.key)){e.preventDefault();go(i+1)}
|
||||||
|
else if(['ArrowLeft','PageUp','Backspace'].includes(e.key)){e.preventDefault();go(i-1)}else if(e.key==='Home')go(0);else if(e.key==='End')go(S.length-1);
|
||||||
|
else if(e.key==='n')document.body.classList.toggle('shownotes');else if(e.key==='f')toggleFs()});
|
||||||
|
let tx=null;addEventListener('touchstart',e=>tx=e.touches[0].clientX);addEventListener('touchend',e=>{if(tx===null)return;const dx=e.changedTouches[0].clientX-tx;if(Math.abs(dx)>40)go(i+(dx<0?1:-1));tx=null});
|
||||||
|
function toggleFs(){document.fullscreenElement?document.exitFullscreen():document.documentElement.requestFullscreen()}
|
||||||
|
prev.onclick=()=>go(i-1);next.onclick=()=>go(i+1);nt.onclick=()=>document.body.classList.toggle('shownotes');fs.onclick=toggleFs;pr.onclick=()=>print();
|
||||||
|
fit();go((parseInt(location.hash.slice(1))||1)-1);
|
||||||
|
</script></body></html>
|
||||||
Binary file not shown.
File diff suppressed because it is too large.
Load diff
Binary file not shown.
Reference in new issue
Block a user