b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
435 lines
30 KiB
HTML
435 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="generator" content="pandoc" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||
<title>발표_핵심기술_드론좌표를_영상에_맞추기_쉬운설명</title>
|
||
<style>
|
||
code{white-space: pre-wrap;}
|
||
span.smallcaps{font-variant: small-caps;}
|
||
span.underline{text-decoration: underline;}
|
||
div.column{display: inline-block; vertical-align: top; width: 50%;}
|
||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||
ul.task-list{list-style: none;}
|
||
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
|
||
</style>
|
||
<style type="text/css">@page {
|
||
size: A4;
|
||
margin: 18mm 16mm 16mm 16mm;
|
||
@bottom-center {
|
||
content: counter(page) " / " counter(pages);
|
||
font-family: "Malgun Gothic", sans-serif;
|
||
font-size: 9pt;
|
||
color: #999;
|
||
}
|
||
}
|
||
html { font-size: 11pt; }
|
||
body {
|
||
font-family: "Malgun Gothic", "Hancom Gothic", sans-serif;
|
||
color: #23272e;
|
||
line-height: 1.65;
|
||
max-width: 920px;
|
||
margin: 0 auto;
|
||
padding: 24px;
|
||
}
|
||
h1 {
|
||
font-size: 1.7rem;
|
||
color: #b45309;
|
||
border-bottom: 3px solid #f59e0b;
|
||
padding-bottom: 8px;
|
||
margin: 0 0 4px;
|
||
}
|
||
h2 {
|
||
font-size: 1.25rem;
|
||
color: #b45309;
|
||
border-bottom: 1px solid #e5d3b3;
|
||
padding-bottom: 5px;
|
||
margin-top: 1.6em;
|
||
}
|
||
h3 { font-size: 1.05rem; color: #92400e; margin-top: 1.1em; }
|
||
a { color: #b45309; }
|
||
hr { border: none; border-top: 1px solid #e2e2e2; margin: 1.6em 0; }
|
||
ul { padding-left: 1.25em; }
|
||
li { margin: 0.18em 0; }
|
||
strong { color: #1f2937; }
|
||
code {
|
||
font-family: "D2Coding", Consolas, monospace;
|
||
background: #f4f1ea;
|
||
border: 1px solid #e7e0d2;
|
||
border-radius: 3px;
|
||
padding: 0.5px 5px;
|
||
font-size: 0.92em;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
margin: 0.8em 0;
|
||
font-size: 0.95em;
|
||
}
|
||
th, td { border: 1px solid #d8d2c4; padding: 6px 10px; text-align: left; vertical-align: top; }
|
||
th { background: #fdf3df; color: #7c2d12; }
|
||
blockquote {
|
||
border-left: 4px solid #f59e0b;
|
||
margin: 0.8em 0;
|
||
padding: 0.2em 0 0.2em 14px;
|
||
color: #555;
|
||
background: #fffbf2;
|
||
}
|
||
|
||
h1, h2, h3 { break-after: avoid; }
|
||
</style>
|
||
<!--[if lt IE 9]>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||
<![endif]-->
|
||
</head>
|
||
<body>
|
||
<header id="title-block-header">
|
||
<h1 class="title">발표_핵심기술_드론좌표를_영상에_맞추기_쉬운설명</h1>
|
||
</header>
|
||
<h1 id="드론이-본-것을-지도랑-딱-맞추는-마법-발표용-쉬운-설명서">드론이 본 것을 지도랑 '딱' 맞추는 마법 (발표용 쉬운 설명서)</h1>
|
||
<blockquote>
|
||
<p>이 글은 <strong>초등학생도 이해할 수 있게</strong> 그림과 이야기로 쓴 발표 자료예요. 주제: <strong>"드론이 찍은 영상 위에, 지도 속 터널·다리 이름표를 어떻게 정확한 자리에 붙일까?"</strong> (진짜 수학 공식은 <a href="../client/src/utils/geoProjection.ts">geoProjection.ts</a> 참고)</p>
|
||
</blockquote>
|
||
<style>
|
||
figure.fig{margin:22px 0;text-align:center;page-break-inside:avoid;break-inside:avoid;}
|
||
figure.fig svg{width:100%;max-width:700px;height:auto;border:1px solid #e7e0d2;border-radius:10px;background:#fffdf8;}
|
||
figure.fig figcaption{font-size:0.9em;color:#777;margin-top:6px;}
|
||
text{font-family:'Malgun Gothic','Hancom Gothic',sans-serif;}
|
||
.big{font-size:1.05em;line-height:1.7;}
|
||
</style>
|
||
|
||
<hr />
|
||
<h2 id="0-한-문장으로-말하면">0. 한 문장으로 말하면</h2>
|
||
<p><strong>"드론이 지금 어디서, 어느 쪽을 보고 있는지"</strong> 를 알기 때문에, <strong>"지도 속 터널이 영상 화면의 어느 점에 보일지"</strong> 를 계산해서 이름표를 딱 붙이는 기술이에요.</p>
|
||
<blockquote>
|
||
<p>🎯 <strong>비유</strong>: 내가 서 있는 자리와 바라보는 방향을 알면, "저 멀리 나무가 내 눈앞 어디쯤 보일지" 알 수 있죠? 그걸 컴퓨터가 대신 해 주는 거예요.</p>
|
||
</blockquote>
|
||
<hr />
|
||
<h2 id="1-우리가-풀고-싶은-문제--드론은-앞을-보며-날아가요">1. 우리가 풀고 싶은 문제 — 드론은 '앞을 보며' 날아가요</h2>
|
||
<p>드론은 가만히 아래를 내려다보는 게 아니라, <strong>앞으로 날아가면서 자기 앞쪽 땅을 비스듬히</strong> 봐요. (자동차 운전할 때 바로 앞 범퍼가 아니라, 저~ 앞 도로를 보는 것과 똑같아요! 🚗)</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 340" role="img" aria-label="드론이 앞을 보며 날아가며 터널을 촬영">
|
||
<defs>
|
||
<marker id="mv" markerWidth="12" markerHeight="12" refX="8" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#2563eb"></path></marker>
|
||
<marker id="mc" markerWidth="12" markerHeight="12" refX="8" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#ea580c"></path></marker>
|
||
</defs>
|
||
<!-- 하늘/땅 -->
|
||
<rect x="0" y="0" width="700" height="230" fill="#eef6ff"></rect>
|
||
<rect x="0" y="230" width="700" height="110" fill="#eaf7ea"></rect>
|
||
<line x1="0" y1="230" x2="700" y2="230" stroke="#bcd8bc" stroke-width="2"></line>
|
||
<!-- 드론 -->
|
||
<g transform="translate(120,70)">
|
||
<rect x="-26" y="-8" width="52" height="16" rx="4" fill="#334155"></rect>
|
||
<circle cx="-26" cy="0" r="9" fill="none" stroke="#334155" stroke-width="3"></circle>
|
||
<circle cx="26" cy="0" r="9" fill="none" stroke="#334155" stroke-width="3"></circle>
|
||
<text x="0" y="-16" text-anchor="middle" font-size="13" font-weight="bold" fill="#334155">드론</text>
|
||
</g>
|
||
<!-- 이동 방향 -->
|
||
<line x1="150" y1="70" x2="300" y2="70" stroke="#2563eb" stroke-width="3" stroke-dasharray="7 5" marker-end="url(#mv)"></line>
|
||
<text x="235" y="60" text-anchor="middle" font-size="13" fill="#2563eb" font-weight="bold">이동 방향 ▶</text>
|
||
<!-- 카메라 시선 (앞·아래로 비스듬히) -->
|
||
<line x1="128" y1="80" x2="470" y2="228" stroke="#ea580c" stroke-width="3" marker-end="url(#mc)"></line>
|
||
<text x="300" y="150" text-anchor="middle" font-size="13" fill="#ea580c" font-weight="bold">카메라 시선 (앞·아래로 비스듬히)</text>
|
||
<!-- 드론 바로 아래 -->
|
||
<line x1="120" y1="80" x2="120" y2="230" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4 4"></line>
|
||
<text x="120" y="250" text-anchor="middle" font-size="11" fill="#64748b">드론 바로 밑</text>
|
||
<!-- 터널 -->
|
||
<text x="480" y="222" text-anchor="middle" font-size="22">🚇</text>
|
||
<text x="520" y="255" text-anchor="middle" font-size="13" font-weight="bold" fill="#166534">회덕터널 (드론보다 앞!)</text>
|
||
<!-- 기찻길 -->
|
||
<line x1="60" y1="300" x2="660" y2="300" stroke="#8a7a5c" stroke-width="6"></line>
|
||
<line x1="60" y1="290" x2="660" y2="290" stroke="#8a7a5c" stroke-width="2"></line>
|
||
<line x1="60" y1="310" x2="660" y2="310" stroke="#8a7a5c" stroke-width="2"></line>
|
||
</svg>
|
||
<figcaption>드론은 앞으로 날며(파란 화살표), 자기보다 <b>앞쪽</b> 땅을 비스듬히 본다(주황 시선). 그래서 터널은 드론 바로 밑이 아니라 <b>앞쪽</b>에 찍힌다.</figcaption>
|
||
</figure>
|
||
|
||
<p><strong>어려운 점:</strong> 드론은 계속 날아가고 바람에 흔들려요. 그래서 이름표도 터널을 <strong>졸졸 따라다녀야</strong> 해요. → "이 터널이 지금 화면의 <strong>어느 점</strong>에 보이는지"를 매 순간(1초에 60번!) 계산해야 해요.</p>
|
||
<hr />
|
||
<h2 id="2-우리가-가진-단서-4가지-">2. 우리가 가진 '단서' 4가지 🔍</h2>
|
||
<p>탐정처럼, 우리는 이미 몇 가지를 알고 있어요. 이 4개만 있으면 계산이 돼요!</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 200" role="img" aria-label="계산에 필요한 단서 4가지">
|
||
<rect x="20" y="30" width="150" height="140" rx="10" fill="#ecfdf5" stroke="#16a34a"></rect>
|
||
<text x="95" y="60" text-anchor="middle" font-size="26">📍</text>
|
||
<text x="95" y="95" text-anchor="middle" font-size="13" font-weight="bold" fill="#166534">① 드론 위치</text>
|
||
<text x="95" y="118" text-anchor="middle" font-size="11" fill="#166534">하늘의 '주소'</text>
|
||
<text x="95" y="136" text-anchor="middle" font-size="11" fill="#166534">(GPS 위도·경도·높이)</text>
|
||
<rect x="190" y="30" width="150" height="140" rx="10" fill="#eff6ff" stroke="#2563eb"></rect>
|
||
<text x="265" y="60" text-anchor="middle" font-size="26">🧭</text>
|
||
<text x="265" y="95" text-anchor="middle" font-size="13" font-weight="bold" fill="#1e3a8a">② 보는 방향</text>
|
||
<text x="265" y="118" text-anchor="middle" font-size="11" fill="#1e3a8a">어디를·얼마나</text>
|
||
<text x="265" y="136" text-anchor="middle" font-size="11" fill="#1e3a8a">기울여 보나</text>
|
||
<rect x="360" y="30" width="150" height="140" rx="10" fill="#fefce8" stroke="#ca8a04"></rect>
|
||
<text x="435" y="60" text-anchor="middle" font-size="26">🚇</text>
|
||
<text x="435" y="95" text-anchor="middle" font-size="13" font-weight="bold" fill="#854d0e">③ 터널 위치</text>
|
||
<text x="435" y="118" text-anchor="middle" font-size="11" fill="#854d0e">땅의 '주소'</text>
|
||
<text x="435" y="136" text-anchor="middle" font-size="11" fill="#854d0e">(지도 GPS)</text>
|
||
<rect x="530" y="30" width="150" height="140" rx="10" fill="#fdf2f8" stroke="#db2777"></rect>
|
||
<text x="605" y="60" text-anchor="middle" font-size="26">🔎</text>
|
||
<text x="605" y="95" text-anchor="middle" font-size="13" font-weight="bold" fill="#9d174d">④ 렌즈 정보</text>
|
||
<text x="605" y="118" text-anchor="middle" font-size="11" fill="#9d174d">얼마나 당겨</text>
|
||
<text x="605" y="136" text-anchor="middle" font-size="11" fill="#9d174d">찍나 (줌)</text>
|
||
</svg>
|
||
<figcaption>이 4가지 단서로 "터널이 화면 어디에 보일지"를 계산한다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="3-핵심-아이디어--창문에-스티커-붙이기-">3. 핵심 아이디어 — '창문에 스티커 붙이기' 🪟</h2>
|
||
<p><strong>이 그림 하나만 이해하면 끝!</strong> 가장 중요한 부분이에요.</p>
|
||
<p>내가 창문 안에서 밖의 나무를 봐요. <strong>내 눈에서 나무로 직선</strong>을 쭉 그으면, 그 선이 <strong>창문 유리를 통과하는 점</strong>이 있죠? 거기에 스티커를 붙이면 나무 위에 딱 겹쳐요!</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 260" role="img" aria-label="창문에 스티커 붙이기 원리">
|
||
<defs><marker id="me" markerWidth="12" markerHeight="12" refX="8" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#0f766e"></path></marker></defs>
|
||
<!-- 눈 -->
|
||
<text x="70" y="135" text-anchor="middle" font-size="34">👁️</text>
|
||
<text x="70" y="170" text-anchor="middle" font-size="12" fill="#0f766e" font-weight="bold">카메라(눈)</text>
|
||
<!-- 나무 -->
|
||
<text x="620" y="120" text-anchor="middle" font-size="40">🌳</text>
|
||
<text x="620" y="160" text-anchor="middle" font-size="12" fill="#166534" font-weight="bold">터널(나무)</text>
|
||
<!-- 시선 -->
|
||
<line x1="95" y1="125" x2="600" y2="105" stroke="#0f766e" stroke-width="2.5" marker-end="url(#me)"></line>
|
||
<!-- 창문 -->
|
||
<rect x="330" y="40" width="90" height="180" rx="6" fill="#e0f2fe" stroke="#0284c7" stroke-width="2" opacity="0.8"></rect>
|
||
<text x="375" y="238" text-anchor="middle" font-size="12" fill="#0369a1" font-weight="bold">창문 = 영상 화면</text>
|
||
<!-- 스티커 점 (시선이 창을 뚫는 곳) -->
|
||
<circle cx="375" cy="115" r="8" fill="#ef4444"></circle>
|
||
<text x="375" y="90" text-anchor="middle" font-size="12" fill="#b91c1c" font-weight="bold">스티커!</text>
|
||
<text x="375" y="105" text-anchor="middle" font-size="10" fill="#b91c1c">(이름표 붙는 자리)</text>
|
||
</svg>
|
||
<figcaption>카메라(눈)에서 터널(나무)로 선을 긋고, 그 선이 <b>화면(창문)을 뚫는 점</b>에 이름표를 붙인다.</figcaption>
|
||
</figure>
|
||
|
||
<blockquote>
|
||
<p>👉 그래서 하는 일은 딱 하나예요: <strong>"카메라에서 터널로 선을 긋고, 그 선이 화면을 뚫는 점을 찾는다."</strong></p>
|
||
</blockquote>
|
||
<hr />
|
||
<h2 id="4-실제-계산은-3번에-나눠서-해요-️">4. 실제 계산은 3번에 나눠서 해요 ✏️</h2>
|
||
<h3 id="계산-①-터널은-나드론-기준으로-어디-있지">계산 ① 터널은 '나(드론) 기준으로' 어디 있지?</h3>
|
||
<p>GPS 주소(위도·경도)는 <strong>지구본 위 각도</strong>라 계산이 불편해요. 그래서 먼저 <strong>모눈종이(미터 단위)</strong> 로 바꿔요. 그다음 드론을 중심(0,0)에 놓고 거리를 재요.</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 230" role="img" aria-label="미터 좌표로 바꾸고 드론 기준 거리 재기">
|
||
<!-- 지구본 -->
|
||
<circle cx="90" cy="115" r="45" fill="#dbeafe" stroke="#2563eb"></circle>
|
||
<path d="M50,115 h80 M90,72 v86 M60,90 q30,25 60,0 M60,140 q30,-25 60,0" stroke="#2563eb" fill="none" stroke-width="1"></path>
|
||
<text x="90" y="185" text-anchor="middle" font-size="11" fill="#1e3a8a">지구본 각도</text>
|
||
<text x="90" y="200" text-anchor="middle" font-size="10" fill="#1e3a8a">(위도·경도)</text>
|
||
<!-- 화살표 -->
|
||
<text x="185" y="118" text-anchor="middle" font-size="24" fill="#64748b">➡</text>
|
||
<text x="185" y="140" text-anchor="middle" font-size="10" fill="#64748b">바꾸기</text>
|
||
<!-- 모눈종이 -->
|
||
<g transform="translate(250,45)">
|
||
<rect x="0" y="0" width="160" height="140" fill="#fffdf8" stroke="#ca8a04"></rect>
|
||
<g stroke="#eadfae" stroke-width="1">
|
||
<line x1="32" y1="0" x2="32" y2="140"></line><line x1="64" y1="0" x2="64" y2="140"></line><line x1="96" y1="0" x2="96" y2="140"></line><line x1="128" y1="0" x2="128" y2="140"></line>
|
||
<line x1="0" y1="35" x2="160" y2="35"></line><line x1="0" y1="70" x2="160" y2="70"></line><line x1="0" y1="105" x2="160" y2="105"></line>
|
||
</g>
|
||
<!-- 드론(중심) -->
|
||
<circle cx="48" cy="105" r="6" fill="#334155"></circle>
|
||
<text x="48" y="128" text-anchor="middle" font-size="10" fill="#334155">드론(0,0)</text>
|
||
<!-- 터널 -->
|
||
<text x="120" y="45" text-anchor="middle" font-size="16">🚇</text>
|
||
<!-- 거리 화살표 -->
|
||
<line x1="48" y1="105" x2="120" y2="105" stroke="#16a34a" stroke-width="1.5" stroke-dasharray="3 3"></line>
|
||
<line x1="120" y1="105" x2="120" y2="45" stroke="#16a34a" stroke-width="1.5" stroke-dasharray="3 3"></line>
|
||
</g>
|
||
<text x="470" y="80" font-size="13" fill="#166534" font-weight="bold">드론 기준으로 재보니…</text>
|
||
<text x="470" y="108" font-size="12" fill="#166534">• 앞으로 200 m</text>
|
||
<text x="470" y="130" font-size="12" fill="#166534">• 오른쪽으로 50 m</text>
|
||
<text x="470" y="152" font-size="12" fill="#166534">• 아래로 80 m</text>
|
||
</svg>
|
||
<figcaption>각도를 미터로 바꾼 뒤, 드론을 중심에 놓고 "앞/옆/아래로 몇 m"인지 잰다.</figcaption>
|
||
</figure>
|
||
|
||
<h3 id="계산-②-그런데-내-카메라가-기울어져-있잖아">계산 ② 그런데 내 카메라가 기울어져 있잖아</h3>
|
||
<p>드론 카메라는 3가지로 방향이 틀어질 수 있어요. 사람이 고개를 움직이는 것과 똑같아요.</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 180" role="img" aria-label="카메라 방향 3가지 yaw pitch roll">
|
||
<g transform="translate(120,90)">
|
||
<text x="0" y="-45" text-anchor="middle" font-size="30">🙂</text>
|
||
<path d="M-45,10 a45,18 0 0 0 90,0" fill="none" stroke="#2563eb" stroke-width="3"></path>
|
||
<polygon points="45,10 38,3 38,17" fill="#2563eb"></polygon>
|
||
<text x="0" y="45" text-anchor="middle" font-size="13" font-weight="bold" fill="#2563eb">yaw (좌우로 돌기)</text>
|
||
<text x="0" y="63" text-anchor="middle" font-size="10" fill="#64748b">고개 도리도리</text>
|
||
</g>
|
||
<g transform="translate(350,90)">
|
||
<text x="0" y="-45" text-anchor="middle" font-size="30">🙂</text>
|
||
<path d="M0,-30 a18,45 0 0 0 0,60" fill="none" stroke="#16a34a" stroke-width="3"></path>
|
||
<polygon points="0,30 -7,23 7,23" fill="#16a34a"></polygon>
|
||
<text x="0" y="45" text-anchor="middle" font-size="13" font-weight="bold" fill="#16a34a">pitch (위아래 숙이기)</text>
|
||
<text x="0" y="63" text-anchor="middle" font-size="10" fill="#64748b">고개 끄덕끄덕</text>
|
||
</g>
|
||
<g transform="translate(580,90)">
|
||
<text x="0" y="-45" text-anchor="middle" font-size="30">🙂</text>
|
||
<path d="M-30,0 a30,30 0 1 1 8,20" fill="none" stroke="#db2777" stroke-width="3"></path>
|
||
<polygon points="-22,20 -30,14 -14,12" fill="#db2777"></polygon>
|
||
<text x="0" y="45" text-anchor="middle" font-size="13" font-weight="bold" fill="#db2777">roll (옆으로 갸웃)</text>
|
||
<text x="0" y="63" text-anchor="middle" font-size="10" fill="#64748b">고개 갸우뚱</text>
|
||
</g>
|
||
</svg>
|
||
<figcaption>①에서 잰 위치를, 카메라가 실제로 보는 방향(yaw·pitch·roll)에 맞게 살짝 돌려준다.</figcaption>
|
||
</figure>
|
||
|
||
<p>특히 우리 드론은 <strong>앞을 비스듬히</strong> 봐요(pitch). 그래서 터널이 화면 위쪽(멀리)에 작게 보일지, 아래쪽(가까이)에 크게 보일지가 딱 맞아떨어져요.</p>
|
||
<h3 id="계산-③-3d를-납작한-화면에-눌러-담기">계산 ③ 3D를 납작한 화면에 눌러 담기</h3>
|
||
<p>이제 3번의 <strong>창문 스티커</strong>를 실제로 계산해요. 멀수록 가운데로 작게, 가까울수록 크게·바깥으로!</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 220" role="img" aria-label="원근 투영 - 멀면 작게 가까우면 크게">
|
||
<!-- 카메라 -->
|
||
<text x="55" y="120" text-anchor="middle" font-size="28">📷</text>
|
||
<!-- 시야 원뿔 -->
|
||
<polygon points="80,110 660,20 660,200" fill="#f1f5f9" stroke="#94a3b8" stroke-dasharray="4 4"></polygon>
|
||
<!-- 화면 평면 -->
|
||
<rect x="250" y="55" width="14" height="110" fill="#e0f2fe" stroke="#0284c7"></rect>
|
||
<text x="257" y="185" text-anchor="middle" font-size="11" fill="#0369a1">화면</text>
|
||
<!-- 가까운 나무 (크게, 바깥) -->
|
||
<text x="330" y="80" text-anchor="middle" font-size="26">🌳</text>
|
||
<text x="330" y="100" text-anchor="middle" font-size="10" fill="#166534">가까움→크게</text>
|
||
<!-- 먼 나무 (작게, 가운데) -->
|
||
<text x="610" y="112" text-anchor="middle" font-size="15">🌲</text>
|
||
<text x="610" y="130" text-anchor="middle" font-size="10" fill="#166534">멀면→작게</text>
|
||
<!-- 화면 위 점 -->
|
||
<circle cx="257" cy="88" r="5" fill="#ef4444"></circle>
|
||
<circle cx="257" cy="112" r="4" fill="#ef4444"></circle>
|
||
</svg>
|
||
<figcaption>3D 방향을 납작한 화면 좌표로 바꾸면 → "화면 가로 60%, 세로 70%" 같은 <b>정확한 점</b>이 나온다.</figcaption>
|
||
</figure>
|
||
|
||
<blockquote>
|
||
<p>드디어 답: <strong>"터널은 화면의 가로 60%, 세로 70% 지점에 보인다!"</strong> → 거기에 이름표 딱! 🎯</p>
|
||
</blockquote>
|
||
<hr />
|
||
<h2 id="5-마지막-문제--드론이-흔들려요-️">5. 마지막 문제 — 드론이 흔들려요 🌬️</h2>
|
||
<p>드론은 바람에 흔들려서, 그냥 두면 이름표가 <strong>부들부들</strong> 떨려요. 그래서 <strong>여러 순간(프레임)의 위치를 평균 내서 부드럽게</strong> 만들어요. (친구가 손을 떨며 가리켜도, 우리가 "대충 저기구나" 하고 부드럽게 알아보는 것과 같아요.)</p>
|
||
<hr />
|
||
<h2 id="6-그래서-진짜-기술은-뭘-썼을까-️">6. 그래서 '진짜 기술'은 뭘 썼을까? 🛠️</h2>
|
||
<p>지금까지는 <strong>비유</strong>로 설명했어요. 이제 컴퓨터가 실제로 쓴 <strong>진짜 도구(기술)</strong> 이름을 알려줄게요. 어려운 이름이 나오지만, 오른쪽 칸을 보면 <strong>한 줄로 쉽게</strong> 이해돼요. 😊</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 340" role="img" aria-label="비유와 진짜 기술 연결표">
|
||
<!-- 헤더 -->
|
||
<rect x="20" y="15" width="200" height="34" fill="#fef3c7" stroke="#ca8a04"></rect>
|
||
<rect x="220" y="15" width="230" height="34" fill="#e0e7ff" stroke="#4f46e5"></rect>
|
||
<rect x="450" y="15" width="230" height="34" fill="#dcfce7" stroke="#16a34a"></rect>
|
||
<text x="120" y="37" text-anchor="middle" font-size="12" font-weight="bold" fill="#854d0e">우리가 한 일(비유)</text>
|
||
<text x="335" y="37" text-anchor="middle" font-size="12" font-weight="bold" fill="#3730a3">진짜 기술 이름</text>
|
||
<text x="565" y="37" text-anchor="middle" font-size="12" font-weight="bold" fill="#166534">쉽게 말하면</text>
|
||
<!-- 행 -->
|
||
<g font-size="11">
|
||
<text x="30" y="70" fill="#444">지구본 각도 → 모눈종이</text>
|
||
<text x="230" y="70" fill="#3730a3" font-weight="bold">proj4 · EPSG:5186 좌표계</text>
|
||
<text x="460" y="70" fill="#166534">둥근 지구를 평평한 지도로 펴기</text>
|
||
<line x1="20" y1="80" x2="680" y2="80" stroke="#eee"></line>
|
||
<text x="30" y="103" fill="#444">카메라 기울기 반영</text>
|
||
<text x="230" y="103" fill="#3730a3" font-weight="bold">회전행렬 (Rotation Matrix)</text>
|
||
<text x="460" y="103" fill="#166534">방향을 숫자표로 만들어 한 번에 돌리기</text>
|
||
<line x1="20" y1="113" x2="680" y2="113" stroke="#eee"></line>
|
||
<text x="30" y="136" fill="#444">3D → 화면 점 (창문 스티커)</text>
|
||
<text x="230" y="136" fill="#3730a3" font-weight="bold">핀홀 카메라 모델 · 초점거리</text>
|
||
<text x="460" y="136" fill="#166534">바늘구멍 사진기 원리로 점 찍기</text>
|
||
<line x1="20" y1="146" x2="680" y2="146" stroke="#eee"></line>
|
||
<text x="30" y="169" fill="#444">30장 사이 부드럽게</text>
|
||
<text x="230" y="169" fill="#3730a3" font-weight="bold">보간 (Interpolation)</text>
|
||
<text x="460" y="169" fill="#166534">사진 사이 중간 그림 상상해 채우기</text>
|
||
<line x1="20" y1="179" x2="680" y2="179" stroke="#eee"></line>
|
||
<text x="30" y="202" fill="#444">흔들림 잡기</text>
|
||
<text x="230" y="202" fill="#3730a3" font-weight="bold">이동평균 · EMA 평활</text>
|
||
<text x="460" y="202" fill="#166534">여러 값 평균 내 부들거림 없애기</text>
|
||
<line x1="20" y1="212" x2="680" y2="212" stroke="#eee"></line>
|
||
<text x="30" y="235" fill="#444">1초에 60번 다시 그리기</text>
|
||
<text x="230" y="235" fill="#3730a3" font-weight="bold">requestAnimationFrame · Canvas</text>
|
||
<text x="460" y="235" fill="#166534">화면 새로 칠할 때마다 그림 그리기</text>
|
||
<line x1="20" y1="245" x2="680" y2="245" stroke="#eee"></line>
|
||
<text x="30" y="268" fill="#444">영상마다 프레임 수 맞추기</text>
|
||
<text x="230" y="268" fill="#3730a3" font-weight="bold">fps 자동 산출 (프레임수÷길이)</text>
|
||
<text x="460" y="268" fill="#166534">1초에 몇 장인지 스스로 알아내기</text>
|
||
<line x1="20" y1="278" x2="680" y2="278" stroke="#eee"></line>
|
||
<text x="30" y="301" fill="#444">전체 화면·버튼·상태</text>
|
||
<text x="230" y="301" fill="#3730a3" font-weight="bold">React · TypeScript</text>
|
||
<text x="460" y="301" fill="#166534">화면을 블록처럼 조립하는 도구</text>
|
||
</g>
|
||
<rect x="20" y="15" width="660" height="300" fill="none" stroke="#ddd"></rect>
|
||
</svg>
|
||
<figcaption>왼쪽(비유) → 가운데(진짜 기술) → 오른쪽(쉬운 뜻). 이 표 한 장이 발표의 '기술 요약 슬라이드'예요.</figcaption>
|
||
</figure>
|
||
|
||
<blockquote>
|
||
<p>💡 <strong>재미있는 사실:</strong> 이 계산의 원래 버전은 <strong>파이썬(Python)</strong> 으로 만든 실험 프로그램(<code>advanced_tuner_v2.py</code>)이었어요. 그걸 <strong>웹 브라우저에서 바로 돌아가게 TypeScript로 옮겨서</strong>, 설치 없이 인터넷 창에서 실행돼요. 🌐</p>
|
||
</blockquote>
|
||
<hr />
|
||
<h2 id="7-중요한-기술-3개만-더-깊이-그래도-쉽게-">7. 중요한 기술 3개만 더 깊이 (그래도 쉽게!) 🔎</h2>
|
||
<h3 id="7-1-둥근-지구를-평평하게-펴기--좌표계-변환-proj4--epsg5186">7-1. 둥근 지구를 평평하게 펴기 — 좌표계 변환 (proj4 · EPSG:5186)</h3>
|
||
<p>지구는 <strong>공(球)</strong> 이라서, 위치를 "각도(위도·경도)"로 말해요. 그런데 각도로는 <strong>"몇 미터 떨어졌지?"</strong> 계산이 어려워요. 그래서 지구 표면을 <strong>평평한 종이에 펴서(투영)</strong>, 미터 단위로 바꿔요. 이때 쓰는 게 <strong>proj4</strong> 라는 도구고, 우리나라에 딱 맞게 만든 지도 규격이 <strong>EPSG:5186 (한국 TM 좌표계)</strong> 예요.</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 180" role="img" aria-label="지구를 평평한 지도로 펴기">
|
||
<circle cx="120" cy="90" r="55" fill="#dbeafe" stroke="#2563eb" stroke-width="2"></circle>
|
||
<path d="M65,90 h110 M120,35 v110 M80,60 q40,30 80,0 M80,120 q40,-30 80,0" stroke="#2563eb" fill="none"></path>
|
||
<text x="120" y="168" text-anchor="middle" font-size="11" fill="#1e3a8a">둥근 지구 (각도)</text>
|
||
<text x="300" y="85" text-anchor="middle" font-size="26" fill="#64748b">➡</text>
|
||
<text x="300" y="108" text-anchor="middle" font-size="11" fill="#64748b">proj4 로 펴기</text>
|
||
<g transform="translate(430,35)">
|
||
<rect x="0" y="0" width="220" height="110" fill="#fffdf8" stroke="#ca8a04"></rect>
|
||
<g stroke="#eadfae"><line x1="44" y1="0" x2="44" y2="110"></line><line x1="88" y1="0" x2="88" y2="110"></line><line x1="132" y1="0" x2="132" y2="110"></line><line x1="176" y1="0" x2="176" y2="110"></line><line x1="0" y1="37" x2="220" y2="37"></line><line x1="0" y1="74" x2="220" y2="74"></line></g>
|
||
</g>
|
||
<text x="540" y="168" text-anchor="middle" font-size="11" fill="#854d0e">평평한 지도 (미터) · EPSG:5186</text>
|
||
</svg>
|
||
<figcaption>각도로 된 위치를 '자로 잴 수 있는 미터'로 바꾸면, 드론과 터널 사이 거리를 정확히 계산할 수 있다.</figcaption>
|
||
</figure>
|
||
|
||
<h3 id="7-2-방향을-숫자표로-만들어-한-번에-돌리기--회전행렬">7-2. 방향을 '숫자표'로 만들어 한 번에 돌리기 — 회전행렬</h3>
|
||
<p>카메라가 좌우(yaw)·위아래(pitch)·갸웃(roll)로 기울어져 있죠? 이 세 방향을 <strong>하나씩 따로</strong> 돌리면 복잡하고 실수해요. 그래서 수학에서는 방향 정보를 <strong>작은 숫자표(행렬)</strong> 로 만들어요. 이 숫자표를 위치에 <strong>한 번 곱하면</strong>, 세 방향 회전이 <strong>동시에 딱</strong> 적용돼요.</p>
|
||
<blockquote>
|
||
<p>🎯 <strong>비유:</strong> 요리할 때 양념을 하나씩 넣는 대신, <strong>미리 섞어둔 '만능 양념장' 한 숟갈</strong>을 넣으면 끝나는 것과 같아요. 회전행렬 = "방향 돌리기 만능 양념장" 이에요. (우리 코드에선 <code>R_align · R_b2w^T</code> 라는 양념장을 써요.)</p>
|
||
</blockquote>
|
||
<h3 id="7-3-바늘구멍-사진기-원리--핀홀-카메라-모델">7-3. 바늘구멍 사진기 원리 — 핀홀 카메라 모델</h3>
|
||
<p>3D 세상을 <strong>납작한 사진 한 장</strong>으로 만드는 원리예요. 옛날 <strong>바늘구멍 사진기</strong>를 떠올려요: 작은 구멍으로 빛이 들어와 뒤쪽 벽에 그림이 맺혀요. 이때 <strong>멀리 있는 건 작게, 가까운 건 크게</strong> 맺혀요(원근).</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 210" role="img" aria-label="핀홀(바늘구멍) 카메라 원리">
|
||
<!-- 물체(터널): x=90, y=30~160 (가운데 y=95) -->
|
||
<line x1="90" y1="30" x2="90" y2="160" stroke="#16a34a" stroke-width="6"></line>
|
||
<polygon points="90,30 84,44 96,44" fill="#16a34a"></polygon>
|
||
<text x="90" y="180" text-anchor="middle" font-size="11" fill="#166534">터널(실제, 큼)</text>
|
||
<!-- 구멍 벽 + 바늘구멍(광선 교차점) at (360,95) -->
|
||
<line x1="360" y1="18" x2="360" y2="172" stroke="#94a3b8" stroke-width="6"></line>
|
||
<circle cx="360" cy="95" r="5.5" fill="#111"></circle>
|
||
<text x="360" y="192" text-anchor="middle" font-size="11" fill="#475569">바늘구멍(=렌즈)</text>
|
||
<!-- 광선: 물체 양끝 → 바늘구멍(360,95) 통과 → 화면. 반드시 점을 지나 X자로 교차. -->
|
||
<line x1="90" y1="30" x2="560" y2="143.1" stroke="#f59e0b" stroke-width="1.5"></line>
|
||
<line x1="90" y1="160" x2="560" y2="46.9" stroke="#f59e0b" stroke-width="1.5"></line>
|
||
<!-- 화면에 맺힌 상: x=560, 거꾸로 + 작게 (y=46.9~143.1, 가운데 95) -->
|
||
<line x1="560" y1="46.9" x2="560" y2="143.1" stroke="#ef4444" stroke-width="5"></line>
|
||
<polygon points="560,143.1 554,129.1 566,129.1" fill="#ef4444"></polygon>
|
||
<text x="560" y="180" text-anchor="middle" font-size="11" fill="#b91c1c">맺힌 상(작고 거꾸로 ↕)</text>
|
||
</svg>
|
||
<figcaption>구멍(렌즈)을 지나며 3D가 화면에 맺힌다. '얼마나 당겨 찍나(초점거리)'로 크기가 정해진다.</figcaption>
|
||
</figure>
|
||
|
||
<p>컴퓨터는 이 원리를 <strong>곱셈·나눗셈 몇 번</strong>으로 계산해서, "터널이 화면의 정확히 어느 점"인지 구해요. 여기서 <strong>초점거리(focal length)</strong> 가 클수록(망원처럼 당길수록) 물체가 화면에서 크게 보여요.</p>
|
||
<hr />
|
||
<h2 id="8-한-장-요약-마지막-슬라이드-">8. 한 장 요약 (마지막 슬라이드) 🎁</h2>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 700 300" role="img" aria-label="전체 요약 파이프라인">
|
||
<defs><marker id="ms" markerWidth="12" markerHeight="12" refX="8" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#7c3aed"></path></marker></defs>
|
||
<rect x="150" y="15" width="400" height="42" rx="8" fill="#f5f3ff" stroke="#7c3aed"></rect>
|
||
<text x="350" y="41" text-anchor="middle" font-size="13" font-weight="bold" fill="#5b21b6">드론 위치 + 보는 방향 + 터널 위치 + 렌즈 정보</text>
|
||
<line x1="350" y1="57" x2="350" y2="80" stroke="#7c3aed" stroke-width="2" marker-end="url(#ms)"></line>
|
||
<rect x="150" y="82" width="400" height="42" rx="8" fill="#ecfdf5" stroke="#16a34a"></rect>
|
||
<text x="350" y="108" text-anchor="middle" font-size="13" font-weight="bold" fill="#166534">① 미터로 바꿔 "드론 기준 위치" 재기</text>
|
||
<line x1="350" y1="124" x2="350" y2="147" stroke="#7c3aed" stroke-width="2" marker-end="url(#ms)"></line>
|
||
<rect x="150" y="149" width="400" height="42" rx="8" fill="#eff6ff" stroke="#2563eb"></rect>
|
||
<text x="350" y="175" text-anchor="middle" font-size="13" font-weight="bold" fill="#1e3a8a">② 카메라 기울기만큼 방향 돌리기</text>
|
||
<line x1="350" y1="191" x2="350" y2="214" stroke="#7c3aed" stroke-width="2" marker-end="url(#ms)"></line>
|
||
<rect x="150" y="216" width="400" height="42" rx="8" fill="#fefce8" stroke="#ca8a04"></rect>
|
||
<text x="350" y="242" text-anchor="middle" font-size="13" font-weight="bold" fill="#854d0e">③ 창문에 스티커 붙이듯 화면 점 찾기</text>
|
||
<line x1="350" y1="258" x2="350" y2="278" stroke="#7c3aed" stroke-width="2" marker-end="url(#ms)"></line>
|
||
<text x="350" y="294" text-anchor="middle" font-size="14" font-weight="bold" fill="#b91c1c">🎯 화면의 정확한 자리에 이름표 붙이기!</text>
|
||
</svg>
|
||
</figure>
|
||
|
||
<blockquote>
|
||
<p><strong>한 문장 결론:</strong> <strong>"드론이 어디서·어느 쪽을 보는지 알기 때문에, 지도 속 터널이 영상 화면 어디에 보일지를 계산해서 이름표를 딱 붙이는 기술"</strong> 이에요.</p>
|
||
</blockquote>
|
||
<p>이 "드론 좌표 → 영상 픽셀 3D 투영"이 GhiVideo를 <strong>보통 영상 플레이어와 다르게 만드는 가장 특별한 기술</strong>이랍니다. ✨</p>
|
||
</body>
|
||
</html>
|