GhiVideo 소스 복제 — v4 작업 시작 기준
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,427 @@
|
||||
<!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>로, 드론 영상 위에 글자를 어떻게 흔들림 없이 딱 붙이는지 알려줄게요. (더 어려운 진짜 기술 설명은 같은 폴더의 기술문서를 보세요.)</p>
|
||||
</blockquote>
|
||||
<style>
|
||||
figure.fig{margin:20px 0;text-align:center;page-break-inside:avoid;break-inside:avoid;}
|
||||
figure.fig svg{width:100%;max-width:660px;height:auto;border:1px solid #e7e0d2;border-radius:8px;background:#fffdf8;}
|
||||
figure.fig figcaption{font-size:0.9em;color:#777;margin-top:6px;}
|
||||
text{font-family:'Malgun Gothic','Hancom Gothic',sans-serif;}
|
||||
</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> 그냥 글자를 붙이면, 글자도 같이 <strong>부르르 떨려서</strong> 보기 싫어요.</p>
|
||||
<p>게다가 영상은 1초에 <strong>사진 30장</strong>으로 만들어지는데, 글자가 30번만 움직이면 <strong>뚝뚝 끊겨</strong> 보여요. 우리는 <strong>물 흐르듯 부드럽게</strong> 움직이길 바라죠.</p>
|
||||
<figure class="fig">
|
||||
<svg viewBox="0 0 660 210" role="img" aria-label="문제 두 가지">
|
||||
<!-- problem 1: shaking -->
|
||||
<rect x="30" y="40" width="280" height="140" rx="10" fill="#fff" stroke="#dc2626" stroke-width="1.5"></rect>
|
||||
<text x="170" y="32" text-anchor="middle" font-size="14" font-weight="bold" fill="#b91c1c">문제 1. 글자가 떨려요</text>
|
||||
<rect x="120" y="80" width="90" height="34" rx="6" fill="#fecaca" stroke="#dc2626"></rect>
|
||||
<text x="165" y="102" text-anchor="middle" font-size="13" fill="#7f1d1d">○○다리</text>
|
||||
<path d="M70,150 Q90,135 110,150 T150,150 T190,150 T230,150 T270,150" fill="none" stroke="#dc2626" stroke-width="2"></path>
|
||||
<text x="170" y="172" text-anchor="middle" font-size="11" fill="#b91c1c">부르르~ 떨림</text>
|
||||
<!-- problem 2: jerky -->
|
||||
<rect x="350" y="40" width="280" height="140" rx="10" fill="#fff" stroke="#d97706" stroke-width="1.5"></rect>
|
||||
<text x="490" y="32" text-anchor="middle" font-size="14" font-weight="bold" fill="#b45309">문제 2. 뚝뚝 끊겨요</text>
|
||||
<g fill="#fde68a" stroke="#d97706">
|
||||
<rect x="380" y="120" width="22" height="22"></rect><rect x="430" y="110" width="22" height="22"></rect><rect x="480" y="118" width="22" height="22"></rect><rect x="530" y="105" width="22" height="22"></rect><rect x="580" y="115" width="22" height="22"></rect>
|
||||
</g>
|
||||
<text x="490" y="170" text-anchor="middle" font-size="11" fill="#b45309">한 칸씩 점프 (부드럽지 않음)</text>
|
||||
</svg>
|
||||
<figcaption>그림 1. 떨림(왼쪽)과 끊김(오른쪽) — 이 두 가지를 동시에 해결해야 해요.</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>이 두 가지를 <strong>한꺼번에</strong> 해결하는 게 이 기술의 핵심이에요. 하나씩 볼까요?</p>
|
||||
<hr />
|
||||
<h2 id="2-비법-①-똑똑한-평균-내기--곧을-땐-많이-돌-땐-적게">2. 비법 ① 똑똑한 평균 내기 — "곧을 땐 많이, 돌 땐 적게"</h2>
|
||||
<h3 id="떨림을-없애는-가장-쉬운-방법은-평균">떨림을 없애는 가장 쉬운 방법은 '평균'</h3>
|
||||
<p>떨리는 값들을 <strong>여러 개 모아 평균</strong>을 내면 부드러워져요. 예를 들어 드론이 보는 방향이 <code>10°, 12°, 9°, 11°</code> 처럼 떨릴 때, 평균을 내면 <code>≈10.5°</code>로 매끈해지죠.</p>
|
||||
<blockquote>
|
||||
<p>✏️ <strong>비유</strong>: 손을 떨면서 그은 선도, 옆 점들과 평균을 내면 자를 댄 듯 매끈해져요.</p>
|
||||
</blockquote>
|
||||
<h3 id="그런데-함정이-있어요">그런데 함정이 있어요!</h3>
|
||||
<p>드론이 <strong>방향을 휙 트는 순간</strong>까지 평균에 섞으면, 글자가 <strong>늦게 따라와요.</strong> 회전했는데 글자는 아직 직진 방향을 보고 있는 거죠. (답답!)</p>
|
||||
<h3 id="그래서-똑똑한-평균을-써요">그래서 '똑똑한 평균'을 써요</h3>
|
||||
<ul>
|
||||
<li><strong>곧게 갈 때</strong> → 옆 사진을 <strong>많이</strong> (앞뒤 약 60장, 2초어치) 모아 평균 → 떨림 꽉 잡기 💪</li>
|
||||
<li><strong>방향 틀 때</strong> → "어, 방향이 확 달라졌네?" 하고 거기서 <strong>딱 멈춰서</strong> 그 부분은 평균에 안 섞어요 → 즉시 따라가기 ⚡</li>
|
||||
</ul>
|
||||
<p>방향 차이가 <strong>8도</strong>보다 크게 벌어지면 "여기는 다른(도는) 구간이다!" 하고 평균 범위를 멈춰요.</p>
|
||||
<figure class="fig">
|
||||
<svg viewBox="0 0 660 250" role="img" aria-label="똑똑한 평균">
|
||||
<!-- straight section -->
|
||||
<text x="40" y="40" font-size="13" font-weight="bold" fill="#166534">① 곧게 갈 때 = 넓게 평균 (떨림 꽉 잡기)</text>
|
||||
<line x1="40" y1="75" x2="620" y2="75" stroke="#d1d5db" stroke-width="2"></line>
|
||||
<g fill="#86efac" stroke="#16a34a">
|
||||
<circle cx="120" cy="75" r="7"></circle><circle cx="170" cy="75" r="7"></circle><circle cx="220" cy="75" r="7"></circle><circle cx="320" cy="75" r="10"></circle><circle cx="420" cy="75" r="7"></circle><circle cx="470" cy="75" r="7"></circle><circle cx="520" cy="75" r="7"></circle>
|
||||
</g>
|
||||
<rect x="110" y="58" width="420" height="34" rx="17" fill="#16a34a" opacity="0.12"></rect>
|
||||
<text x="320" y="108" text-anchor="middle" font-size="11" fill="#166534">가운데(큰 점) 둘레로 앞뒤 많이 모아 평균</text>
|
||||
<!-- turning section -->
|
||||
<text x="40" y="155" font-size="13" font-weight="bold" fill="#b45309">② 방향 틀 때 = 경계에서 멈춤 (즉시 따라가기)</text>
|
||||
<polyline points="40,200 260,200 360,200 440,165 520,135 600,120" fill="none" stroke="#d1d5db" stroke-width="2"></polyline>
|
||||
<g fill="#fde68a" stroke="#d97706">
|
||||
<circle cx="180" cy="200" r="7"></circle><circle cx="260" cy="200" r="7"></circle><circle cx="320" cy="200" r="10"></circle><circle cx="400" cy="183" r="7"></circle><circle cx="470" cy="150" r="7"></circle>
|
||||
</g>
|
||||
<rect x="245" y="184" width="95" height="34" rx="17" fill="#16a34a" opacity="0.12"></rect>
|
||||
<line x1="360" y1="160" x2="360" y2="215" stroke="#dc2626" stroke-width="2" stroke-dasharray="4 3"></line>
|
||||
<text x="368" y="150" font-size="11" font-weight="bold" fill="#dc2626">8°↑ 꺾임! 여기서 멈춤</text>
|
||||
<text x="200" y="238" text-anchor="middle" font-size="11" fill="#b45309">도는 부분은 평균에 안 섞음 → 안 늦음</text>
|
||||
</svg>
|
||||
<figcaption>그림 2. 곧을 땐 넓게 평균(떨림 제거), 돌 땐 꺾이는 지점에서 멈춤(지연 없음).</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>이렇게 하면 <strong>직선에서는 떨림이 사라지고, 회전에서는 늦지 않게</strong> 따라가요. 일석이조죠! 🐦🐦</p>
|
||||
<hr />
|
||||
<h2 id="3-비법-②-사진-사이를-채우기--30장을-60장처럼">3. 비법 ② 사진 사이를 채우기 — "30장을 60장처럼"</h2>
|
||||
<p>영상은 1초에 사진 30장이에요. 글자를 그 30장에만 맞춰 움직이면 <strong>뚝뚝</strong> 끊겨 보여요.</p>
|
||||
<p>그래서 <strong>사진과 사진 사이</strong>의 값을 <strong>계산으로 만들어</strong> 채워요. 예를 들어 10번 사진은 "방향 20°", 11번 사진은 "방향 24°"라면, 그 <strong>딱 중간</strong>은 "방향 22°"라고 만들어 내는 거예요.</p>
|
||||
<blockquote>
|
||||
<p>🎨 <strong>비유</strong>: 만화 영화에서 두 그림 사이에 그림을 더 그려 넣으면 더 부드럽게 움직이죠. 그것과 똑같아요. ("사이 그림 채우기")</p>
|
||||
</blockquote>
|
||||
<figure class="fig">
|
||||
<svg viewBox="0 0 660 200" role="img" aria-label="사이 채우기 보간">
|
||||
<line x1="60" y1="120" x2="600" y2="120" stroke="#d1d5db" stroke-width="2"></line>
|
||||
<!-- real frames -->
|
||||
<circle cx="140" cy="120" r="10" fill="#2563eb"></circle>
|
||||
<text x="140" y="150" text-anchor="middle" font-size="11" fill="#1e3a8a">10번 사진</text>
|
||||
<text x="140" y="100" text-anchor="middle" font-size="11" fill="#1e3a8a">20°</text>
|
||||
<circle cx="520" cy="120" r="10" fill="#2563eb"></circle>
|
||||
<text x="520" y="150" text-anchor="middle" font-size="11" fill="#1e3a8a">11번 사진</text>
|
||||
<text x="520" y="100" text-anchor="middle" font-size="11" fill="#1e3a8a">24°</text>
|
||||
<!-- interpolated -->
|
||||
<g fill="#f59e0b">
|
||||
<circle cx="235" cy="120" r="6"></circle><circle cx="330" cy="120" r="6"></circle><circle cx="425" cy="120" r="6"></circle>
|
||||
</g>
|
||||
<text x="330" y="100" text-anchor="middle" font-size="11" font-weight="bold" fill="#b45309">22° (계산으로 만든 사이 값)</text>
|
||||
<text x="330" y="175" text-anchor="middle" font-size="11" fill="#b45309">↑ 빈틈을 채워 부드럽게</text>
|
||||
</svg>
|
||||
<figcaption>그림 3. 진짜 사진(파랑) 사이에 계산으로 만든 값(주황)을 채워 끊김을 없앱니다.</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>이렇게 사이를 채우면 글자가 <strong>물 흐르듯</strong> 부드럽게 움직여요. 화면이 60번씩 새로 그려져도 글자가 항상 <strong>딱 맞는 중간 자리</strong>에 있게 되는 거죠.</p>
|
||||
<blockquote>
|
||||
<p>💡 작은 비밀: 방향(각도)은 <strong>359° 다음이 0°</strong> 라서, 그냥 계산하면 글자가 한 바퀴 빙 돌아버려요. 그래서 "<strong>가까운 쪽으로 돌기</strong>" 규칙을 따로 넣어 뒀어요. (359°→0°은 한 칸만 돌게)</p>
|
||||
</blockquote>
|
||||
<hr />
|
||||
<h2 id="4-비법-③-화면에서-한-번-더-다듬기--살살-vs-빨리">4. 비법 ③ 화면에서 한 번 더 다듬기 — "살살 vs 빨리"</h2>
|
||||
<p>비법 ①, ②로 이미 많이 부드러워졌지만, 화면에서 <strong>마지막으로 한 번 더</strong> 다듬어요. 규칙은 아주 똑똑해요:</p>
|
||||
<ul>
|
||||
<li><strong>천천히 움직일 때(=떨림일 가능성 큼)</strong> → 글자를 <strong>살살</strong> 움직여 떨림을 죽여요. 🐢</li>
|
||||
<li><strong>빨리 움직일 때(=진짜로 휙 도는 중)</strong> → 글자를 <strong>빨리</strong> 따라가게 해요. 🐇</li>
|
||||
</ul>
|
||||
<figure class="fig">
|
||||
<svg viewBox="0 0 660 180" role="img" aria-label="속도에 따라 다르게">
|
||||
<!-- slow -->
|
||||
<rect x="30" y="40" width="280" height="110" rx="10" fill="#ecfdf5" stroke="#16a34a"></rect>
|
||||
<text x="170" y="68" text-anchor="middle" font-size="14" font-weight="bold" fill="#166534">🐢 느리면 = 살살</text>
|
||||
<text x="170" y="95" text-anchor="middle" font-size="12" fill="#166534">"이건 떨림일 거야"</text>
|
||||
<text x="170" y="120" text-anchor="middle" font-size="12" fill="#166534">→ 조금만 움직여 떨림 제거</text>
|
||||
<!-- fast -->
|
||||
<rect x="350" y="40" width="280" height="110" rx="10" fill="#eff6ff" stroke="#2563eb"></rect>
|
||||
<text x="490" y="68" text-anchor="middle" font-size="14" font-weight="bold" fill="#1e3a8a">🐇 빠르면 = 빨리</text>
|
||||
<text x="490" y="95" text-anchor="middle" font-size="12" fill="#1e3a8a">"진짜로 도는 중이야"</text>
|
||||
<text x="490" y="120" text-anchor="middle" font-size="12" fill="#1e3a8a">→ 곧바로 쫓아감 (안 늦음)</text>
|
||||
</svg>
|
||||
<figcaption>그림 4. 천천히면 떨림으로 보고 살살, 빠르면 진짜 움직임으로 보고 빨리 따라갑니다.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3 id="깜짝-점프는-무시해요-단-너무-오래는-말고">깜짝 점프는 무시해요 (단, 너무 오래는 말고)</h3>
|
||||
<p>가끔 데이터가 <strong>확 튀어서</strong> 글자가 엉뚱한 데로 점프하려 해요. 이런 건 <strong>"어, 이상한데?" 하고 무시</strong>해요. 하지만 영상을 <strong>확 건너뛰기(시크)</strong> 했을 땐 진짜로 멀리 가야 하니까, <strong>계속 8번 넘게</strong> 같은 점프가 들어오면 "이건 진짜구나" 하고 받아들여요.</p>
|
||||
<blockquote>
|
||||
<p>🚦 <strong>비유</strong>: 친구가 갑자기 펄쩍 뛰면 "장난이지?" 하고 무시하지만, 계속 그쪽으로 가면 "아, 진짜 가는구나" 하고 따라가는 것과 같아요.</p>
|
||||
</blockquote>
|
||||
<hr />
|
||||
<h2 id="5-비법-④-미리-정해두기-vs-그때그때-그리기-제일-중요">5. 비법 ④ 미리 정해두기 vs 그때그때 그리기 (제일 중요!)</h2>
|
||||
<p>화면은 1초에 <strong>60번</strong>이나 새로 그려져요. 매번 모든 걸 다시 계산하면 컴퓨터가 <strong>헉헉</strong>대요. 그래서 일을 <strong>두 종류로 나눴어요.</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr class="header">
|
||||
<th>종류</th>
|
||||
<th>무슨 일?</th>
|
||||
<th>언제 하나?</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd">
|
||||
<td><strong>무거운 일</strong></td>
|
||||
<td>"어떤 글자를 <strong>보여줄지</strong>" 정하기 (가려진 것 빼기, 겹친 것 정리)</td>
|
||||
<td>미리 한 번만</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td><strong>가벼운 일</strong></td>
|
||||
<td>"그 글자를 화면 <strong>어디에 그릴지</strong>" 계산</td>
|
||||
<td>매 순간(60번)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<blockquote>
|
||||
<p>🍱 <strong>비유</strong>: 도시락을 미리 싸 두면(무거운 일), 점심시간엔 뚜껑만 열면 돼요(가벼운 일). 매번 처음부터 요리하면 점심시간이 다 가버리죠!</p>
|
||||
</blockquote>
|
||||
<figure class="fig">
|
||||
<svg viewBox="0 0 660 220" role="img" aria-label="두 단계 분리">
|
||||
<!-- heavy precompute -->
|
||||
<rect x="30" y="50" width="250" height="120" rx="10" fill="#fff7ed" stroke="#ea580c" stroke-width="1.5"></rect>
|
||||
<text x="155" y="42" text-anchor="middle" font-size="13" font-weight="bold" fill="#c2410c">무거운 일 (미리 한 번)</text>
|
||||
<text x="155" y="85" text-anchor="middle" font-size="12" fill="#7c2d12">"어떤 글자를 보여줄까?"</text>
|
||||
<text x="155" y="110" text-anchor="middle" font-size="11" fill="#9a3412">· 가려진 글자 빼기</text>
|
||||
<text x="155" y="132" text-anchor="middle" font-size="11" fill="#9a3412">· 겹친 글자 정리</text>
|
||||
<text x="155" y="154" text-anchor="middle" font-size="11" fill="#9a3412">→ 결과를 저장해 둠 🍱</text>
|
||||
<!-- arrow -->
|
||||
<defs><marker id="g5a" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#6b7280"></path></marker></defs>
|
||||
<line x1="285" y1="110" x2="375" y2="110" stroke="#6b7280" stroke-width="2" marker-end="url(#g5a)"></line>
|
||||
<!-- light raf -->
|
||||
<rect x="380" y="50" width="250" height="120" rx="10" fill="#eff6ff" stroke="#2563eb" stroke-width="1.5"></rect>
|
||||
<text x="505" y="42" text-anchor="middle" font-size="13" font-weight="bold" fill="#1d4ed8">가벼운 일 (매 순간 60번)</text>
|
||||
<text x="505" y="85" text-anchor="middle" font-size="12" fill="#1e3a8a">"저장된 글자를</text>
|
||||
<text x="505" y="107" text-anchor="middle" font-size="12" fill="#1e3a8a">어디에 그릴까?"</text>
|
||||
<text x="505" y="135" text-anchor="middle" font-size="11" fill="#1e40af">→ 위치만 쓱 계산해서 그리기</text>
|
||||
<text x="505" y="157" text-anchor="middle" font-size="11" fill="#1e40af">→ 그래서 안 끊겨요! ✨</text>
|
||||
</svg>
|
||||
<figcaption>그림 5. 무거운 결정은 미리, 가벼운 위치 계산만 매 순간 — 그래서 부드러운 60프레임 유지.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3 id="더-똑똑한-점들">더 똑똑한 점들</h3>
|
||||
<ul>
|
||||
<li><strong>지금 보는 곳부터 미리 계산</strong> → 영상을 틀면 바로 글자가 떠요. (멀리 있는 건 천천히 준비)</li>
|
||||
<li><strong>컴퓨터가 한가할 때 조금씩</strong> 준비해서, 영상이 안 끊겨요.</li>
|
||||
<li>글자 위치는 <strong>진짜 땅 위 좌표</strong>로 저장해 둬요. 그래야 드론이 움직여도 그 자리에 정확히 다시 그릴 수 있죠.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<h2 id="6-비법-⑤-글자가-겹치면-누가-이길까">6. 비법 ⑤ 글자가 겹치면 누가 이길까?</h2>
|
||||
<p>화면에 글자가 많으면 서로 <strong>겹쳐서</strong> 못 읽어요. 그래서 겹치면 <strong>누구를 남길지</strong> 규칙으로 정해요.</p>
|
||||
<ol type="1">
|
||||
<li><strong>기차역</strong>이 가장 힘이 세요 → 역은 무조건 남겨요. 🚉</li>
|
||||
<li>같은 급이면 <strong>드론에 더 가까운 것</strong>이 이겨요. (가까운 게 더 중요하니까)</li>
|
||||
</ol>
|
||||
<figure class="fig">
|
||||
<svg viewBox="0 0 660 180" role="img" aria-label="겹침 우선순위">
|
||||
<!-- before -->
|
||||
<text x="160" y="35" text-anchor="middle" font-size="13" font-weight="bold" fill="#b91c1c">겹쳐서 안 보여요</text>
|
||||
<rect x="80" y="60" width="100" height="30" rx="6" fill="#fde68a" stroke="#b45309" opacity="0.9"></rect>
|
||||
<rect x="120" y="75" width="100" height="30" rx="6" fill="#bfdbfe" stroke="#2563eb" opacity="0.9"></rect>
|
||||
<rect x="100" y="90" width="100" height="30" rx="6" fill="#fecaca" stroke="#dc2626" opacity="0.9"></rect>
|
||||
<text x="150" y="150" text-anchor="middle" font-size="11" fill="#777">셋이 겹침 😵</text>
|
||||
<!-- arrow -->
|
||||
<defs><marker id="g6a" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#16a34a"></path></marker></defs>
|
||||
<line x1="300" y1="90" x2="380" y2="90" stroke="#16a34a" stroke-width="2.5" marker-end="url(#g6a)"></line>
|
||||
<!-- after -->
|
||||
<text x="510" y="35" text-anchor="middle" font-size="13" font-weight="bold" fill="#166534">중요한 것만 남겨요</text>
|
||||
<rect x="450" y="78" width="120" height="34" rx="6" fill="#fde68a" stroke="#b45309"></rect>
|
||||
<text x="510" y="100" text-anchor="middle" font-size="13" fill="#7c2d12">🚉 ○○역</text>
|
||||
<text x="510" y="150" text-anchor="middle" font-size="11" fill="#166534">역이 최우선! 깔끔 😊</text>
|
||||
</svg>
|
||||
<figcaption>그림 6. 겹치면 기차역 먼저, 그다음 가까운 것 순으로 남겨 화면을 깔끔하게.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3 id="위아래-선로-형제-구분-똑똑">위·아래 선로 형제 구분 (똑똑!)</h3>
|
||||
<p>같은 다리가 <strong>위로 가는 선로용(상)</strong> 과 <strong>아래로 가는 선로용(하)</strong> 두 개로 있을 때가 있어요. 드론이 지금 <strong>위로 가는 선로</strong>를 따라가면 <code>○○다리(상)</code> 을, 아래면 <code>○○다리(하)</code> 를 보여줘요. <strong>드론이 진짜 지나는 쪽</strong>의 이름표를 골라주는 거죠.</p>
|
||||
<blockquote>
|
||||
<p>🚂 <strong>비유</strong>: 상행선·하행선 플랫폼이 따로 있을 때, 내가 탄 기차 쪽 안내판을 보여주는 것과 같아요.</p>
|
||||
</blockquote>
|
||||
<hr />
|
||||
<h2 id="7-보너스--빙글빙글-나침반">7. 보너스 — 빙글빙글 나침반</h2>
|
||||
<p>화면 구석엔 <strong>나침반</strong>이 있어요. 드론이 도는 대로 같이 돌아서 "지금 어느 쪽을 보는지" 알려줘요.</p>
|
||||
<p>큰 글자들은 <strong>떨림 제거를 많이</strong> 해서 살짝 느긋한데, 나침반은 <strong>방향을 바로바로</strong> 보여줘야 하니까 <strong>떨림 제거를 살짝만</strong> 해서 회전에 <strong>재빠르게</strong> 반응하게 만들었어요.</p>
|
||||
<p>그리고 나침반이 359°에서 0°로 갈 때 <strong>휙 한 바퀴 안 돌고</strong> 가까운 쪽으로만 살짝 돌게 해 뒀어요.</p>
|
||||
<figure class="fig">
|
||||
<svg viewBox="0 0 660 170" role="img" aria-label="나침반">
|
||||
<circle cx="120" cy="85" r="55" fill="#0b1020" stroke="#475569" stroke-width="2"></circle>
|
||||
<text x="120" y="42" text-anchor="middle" font-size="12" fill="#f87171" font-weight="bold">N</text>
|
||||
<text x="120" y="138" text-anchor="middle" font-size="11" fill="#cbd5e1">S</text>
|
||||
<text x="68" y="90" text-anchor="middle" font-size="11" fill="#cbd5e1">W</text>
|
||||
<text x="172" y="90" text-anchor="middle" font-size="11" fill="#cbd5e1">E</text>
|
||||
<polygon points="120,55 112,90 128,90" fill="#f87171"></polygon>
|
||||
<polygon points="120,115 112,90 128,90" fill="#cbd5e1"></polygon>
|
||||
<text x="320" y="70" font-size="13" fill="#334155">드론이 도는 대로 나침반도 빙글~ 돌아요.</text>
|
||||
<text x="320" y="98" font-size="13" fill="#334155">큰 글자보다 <tspan font-weight="bold" fill="#1d4ed8">더 빠릿하게</tspan> 반응하도록</text>
|
||||
<text x="320" y="124" font-size="13" fill="#334155">떨림 제거를 살짝만 해 뒀어요.</text>
|
||||
</svg>
|
||||
<figcaption>그림 7. 나침반은 회전에 빠르게 반응하도록 일부러 가볍게 다듬습니다.</figcaption>
|
||||
</figure>
|
||||
|
||||
<hr />
|
||||
<h2 id="8-전체를-한-그림으로-정리">8. 전체를 한 그림으로 정리</h2>
|
||||
<figure class="fig">
|
||||
<svg viewBox="0 0 660 300" role="img" aria-label="전체 흐름">
|
||||
<defs><marker id="g8a" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#b45309"></path></marker></defs>
|
||||
<!-- step 1 -->
|
||||
<rect x="30" y="30" width="600" height="44" rx="8" fill="#ecfdf5" stroke="#16a34a"></rect>
|
||||
<text x="330" y="58" text-anchor="middle" font-size="13" fill="#166534"><tspan font-weight="bold">① 똑똑한 평균</tspan> — 곧을 땐 많이, 돌 땐 멈춰서 (떨림 제거 + 안 늦음)</text>
|
||||
<line x1="330" y1="74" x2="330" y2="92" stroke="#b45309" stroke-width="2" marker-end="url(#g8a)"></line>
|
||||
<!-- step 2 -->
|
||||
<rect x="30" y="95" width="600" height="44" rx="8" fill="#eff6ff" stroke="#2563eb"></rect>
|
||||
<text x="330" y="123" text-anchor="middle" font-size="13" fill="#1e3a8a"><tspan font-weight="bold">② 사이 채우기</tspan> — 30장을 60장처럼 빈틈 메우기 (부드럽게)</text>
|
||||
<line x1="330" y1="139" x2="330" y2="157" stroke="#b45309" stroke-width="2" marker-end="url(#g8a)"></line>
|
||||
<!-- step 3 -->
|
||||
<rect x="30" y="160" width="600" height="44" rx="8" fill="#fefce8" stroke="#ca8a04"></rect>
|
||||
<text x="330" y="188" text-anchor="middle" font-size="13" fill="#854d0e"><tspan font-weight="bold">③ 화면에서 다듬기</tspan> — 느리면 살살, 빠르면 빨리 + 튀는 값 무시</text>
|
||||
<line x1="330" y1="204" x2="330" y2="222" stroke="#b45309" stroke-width="2" marker-end="url(#g8a)"></line>
|
||||
<!-- step 4 -->
|
||||
<rect x="30" y="225" width="600" height="44" rx="8" fill="#fff7ed" stroke="#ea580c"></rect>
|
||||
<text x="330" y="253" text-anchor="middle" font-size="13" fill="#9a3412"><tspan font-weight="bold">④ 미리 정하고 + 매 순간 그리기</tspan> — 무거운 건 미리, 위치만 60번 (안 끊김)</text>
|
||||
</svg>
|
||||
<figcaption>그림 8. 네 가지 비법이 차례로 작동해, 떨림 없이 부드러운 글자 붙이기가 완성됩니다.</figcaption>
|
||||
</figure>
|
||||
|
||||
<hr />
|
||||
<h2 id="9-왜-이게-대단할까-특허감인-이유">9. 왜 이게 대단할까? (특허감인 이유)</h2>
|
||||
<ol type="1">
|
||||
<li><strong>곧을 땐 많이, 돌 땐 멈추는 똑똑한 평균</strong> — 보통은 "부드러움"과 "빠른 반응" 중 하나만 얻는데, 이건 <strong>둘 다</strong> 얻어요. (회전 끝나고 한 번 튀는 문제도 없앴어요.)</li>
|
||||
<li><strong>미리 정하기 + 매 순간 위치만 그리기</strong> — 무거운 일과 가벼운 일을 나눠서, 느린 컴퓨터에서도 <strong>부드러운 60프레임</strong>을 만들어요.</li>
|
||||
<li><strong>30장을 60장처럼 사이 채우기 + 가까운 쪽으로만 돌기</strong> — 끊김 없이, 방향도 안 헷갈리게.</li>
|
||||
<li><strong>느리면 살살·빠르면 빨리 + 튀는 값 무시</strong> — 떨림과 진짜 움직임을 구별해요.</li>
|
||||
<li><strong>위·아래 선로 형제 이름표 골라주기</strong> — 드론이 진짜 지나는 쪽 이름을 보여줘요.</li>
|
||||
</ol>
|
||||
<blockquote>
|
||||
<p>⚠️ 단, 특허는 <strong>비슷한 게 이미 있는지</strong> 전문가가 꼭 찾아봐야 확정돼요.</p>
|
||||
</blockquote>
|
||||
<hr />
|
||||
<h2 id="10-쉬운-용어-사전">10. 쉬운 용어 사전</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr class="header">
|
||||
<th>어려운 말</th>
|
||||
<th>쉬운 뜻</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd">
|
||||
<td><strong>평활(스무딩)</strong></td>
|
||||
<td>떨리는 값을 주변과 평균 내어 부드럽게 만드는 것</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td><strong>보간</strong></td>
|
||||
<td>사진과 사진 <strong>사이 값을 계산으로 채우는</strong> 것 (사이 그림 그리기)</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td><strong>yaw(요)</strong></td>
|
||||
<td>드론이 <strong>좌우로 돈 방향</strong> (어느 쪽을 보나)</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td><strong>프레임</strong></td>
|
||||
<td>영상을 이루는 <strong>사진 한 장</strong> (1초에 보통 30장)</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td><strong>RAF (매 순간 그리기)</strong></td>
|
||||
<td>화면을 1초에 약 60번 다시 그리는 것</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td><strong>사전계산(미리 정하기)</strong></td>
|
||||
<td>무거운 결정을 <strong>미리 한 번</strong> 해서 저장해 두는 것</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td><strong>이상치 무시</strong></td>
|
||||
<td>갑자기 확 튀는 <strong>이상한 값을 버리는</strong> 것</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<td><strong>나침반(heading-up)</strong></td>
|
||||
<td>드론이 보는 방향에 맞춰 도는 방향 표시</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr />
|
||||
<h2 id="11-마치며">11. 마치며</h2>
|
||||
<blockquote>
|
||||
<p>드론은 바람에 흔들리고, 영상은 사진 30장으로 뚝뚝 끊겨요. 그런데도 글자가 <strong>떨지 않고, 부드럽게, 딱 맞는 자리</strong>에 붙는 건 <strong>① 똑똑한 평균 ② 사이 채우기 ③ 화면 다듬기 ④ 미리 정하고 그리기</strong> — 이 네 가지 비법이 함께 일하기 때문이에요.</p>
|
||||
</blockquote>
|
||||
<p>어려워 보여도, 사실은 <strong>"떨리는 선 매끈하게 다듬기, 만화 사이 그림 그리기, 도시락 미리 싸기"</strong> 같은 <strong>일상의 아이디어</strong>를 컴퓨터로 정밀하게 만든 것뿐이랍니다. 🙂</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user