b23042andClaude Opus 4.8
e0ff5dd6d0
- 지도 기반 나침반(노스업, 현재위치, 시야 역삼각형): 호버 확대·휠 줌·클릭 위성전환, OSM/Esri 타일 서버 프록시(/api/tile) - 스테이션 검색: 실제 측점(chain) 기준 이동, 없으면 '측점 없음' 안내 - 역 마커: 직교 투영 측점 일치 시에만 표시, 미도착 종점은 추가 방식 - POI 팝업 겹침/재등장·라벨 정합 수정 - 영상 fps 데이터 기반 자동 산출 - 기술/발표/쉬운설명 문서 추가 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
657 lines
41 KiB
HTML
657 lines
41 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>쉬운설명_지도POI를_영상에_붙이는기술</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">쉬운설명_지도POI를_영상에_붙이는기술</h1>
|
||
</header>
|
||
<h1 id="지도-위의-poi를-영상에-딱-붙이는-기술들-그림-설명서">지도 위의 POI를 영상에 '딱' 붙이는 기술들 (그림 설명서)</h1>
|
||
<blockquote>
|
||
<p>이 글은 <strong>초등학생도 이해할 수 있게</strong> 쓴 설명서예요. "지도에 적힌 다리·터널·역의 위치(POI)를, 드론 영상의 <strong>정확한 화면 자리</strong>에 어떻게 붙이는가?" 그 비밀을 <strong>그림과 이야기</strong>로 하나씩 풀어 줄게요. (진짜 수학 공식은 같은 폴더의 기술문서 <a href="../client/src/utils/geoProjection.ts">geoProjection.ts</a>를 보세요.)</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:680px;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> 라는 위치 정보(POI)를 받아서, <strong>"그럼 드론 영상 화면에서는 바로 이 자리에 보이겠네!"</strong> 하고 글자를 딱 붙여 주는 기술이에요.</p>
|
||
<blockquote>
|
||
<p>🎯 <strong>비유</strong>: 보물지도에 "보물은 큰 나무 옆"이라고 적혀 있을 때, 내가 지금 서 있는 자리와 보는 방향을 알면 "저 나무가 내 눈앞 어디쯤 보일지" 알 수 있죠. 그걸 컴퓨터가 하는 거예요.</p>
|
||
</blockquote>
|
||
<hr />
|
||
<h2 id="1-큰-그림-먼저--poi가-화면에-붙기까지-여행">1. 큰 그림 먼저 — POI가 화면에 붙기까지 여행</h2>
|
||
<p>POI 하나가 화면에 붙으려면 <strong>여러 단계의 변신</strong>을 거쳐요. 마치 공장의 컨베이어 벨트처럼요.</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 280" role="img" aria-label="POI 매핑 전체 흐름">
|
||
<defs><marker id="p1a" 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>
|
||
<rect x="30" y="30" width="180" height="50" rx="8" fill="#ecfdf5" stroke="#16a34a"></rect>
|
||
<text x="120" y="52" text-anchor="middle" font-size="13" font-weight="bold" fill="#166534">① 지도 위치</text>
|
||
<text x="120" y="70" text-anchor="middle" font-size="11" fill="#166534">위도·경도 (각도)</text>
|
||
<rect x="250" y="30" width="180" height="50" rx="8" fill="#eff6ff" stroke="#2563eb"></rect>
|
||
<text x="340" y="52" text-anchor="middle" font-size="13" font-weight="bold" fill="#1e3a8a">② 미터 좌표</text>
|
||
<text x="340" y="70" text-anchor="middle" font-size="11" fill="#1e3a8a">동 몇 m, 북 몇 m</text>
|
||
<rect x="470" y="30" width="180" height="50" rx="8" fill="#fefce8" stroke="#ca8a04"></rect>
|
||
<text x="560" y="52" text-anchor="middle" font-size="13" font-weight="bold" fill="#854d0e">③ 높이 맞추기</text>
|
||
<text x="560" y="70" text-anchor="middle" font-size="11" fill="#854d0e">지오이드 보정</text>
|
||
<rect x="470" y="115" width="180" height="50" rx="8" fill="#fff7ed" stroke="#ea580c"></rect>
|
||
<text x="560" y="137" text-anchor="middle" font-size="13" font-weight="bold" fill="#9a3412">④ 드론 기준 위치</text>
|
||
<text x="560" y="155" text-anchor="middle" font-size="11" fill="#9a3412">드론에서 본 방향</text>
|
||
<rect x="250" y="115" width="180" height="50" rx="8" fill="#fdf2f8" stroke="#db2777"></rect>
|
||
<text x="340" y="137" text-anchor="middle" font-size="13" font-weight="bold" fill="#9d174d">⑤ 카메라 눈 기준</text>
|
||
<text x="340" y="155" text-anchor="middle" font-size="11" fill="#9d174d">자세(회전) 적용</text>
|
||
<rect x="30" y="115" width="180" height="50" rx="8" fill="#f5f3ff" stroke="#7c3aed"></rect>
|
||
<text x="120" y="137" text-anchor="middle" font-size="13" font-weight="bold" fill="#5b21b6">⑥ 화면 평면에 투영</text>
|
||
<text x="120" y="155" text-anchor="middle" font-size="11" fill="#5b21b6">바늘구멍 사진기</text>
|
||
<rect x="250" y="205" width="180" height="50" rx="8" fill="#fff" stroke="#b45309" stroke-width="2"></rect>
|
||
<text x="340" y="227" text-anchor="middle" font-size="13" font-weight="bold" fill="#23272e">⑦ 화면에 글자!</text>
|
||
<text x="340" y="245" text-anchor="middle" font-size="11" fill="#555">○○다리 ✨</text>
|
||
<!-- arrows -->
|
||
<line x1="210" y1="55" x2="246" y2="55" stroke="#b45309" stroke-width="1.5" marker-end="url(#p1a)"></line>
|
||
<line x1="430" y1="55" x2="466" y2="55" stroke="#b45309" stroke-width="1.5" marker-end="url(#p1a)"></line>
|
||
<line x1="560" y1="80" x2="560" y2="111" stroke="#b45309" stroke-width="1.5" marker-end="url(#p1a)"></line>
|
||
<line x1="470" y1="140" x2="434" y2="140" stroke="#b45309" stroke-width="1.5" marker-end="url(#p1a)"></line>
|
||
<line x1="250" y1="140" x2="214" y2="140" stroke="#b45309" stroke-width="1.5" marker-end="url(#p1a)"></line>
|
||
<line x1="120" y1="165" x2="120" y2="195" stroke="#b45309" stroke-width="1.5"></line>
|
||
<line x1="120" y1="195" x2="250" y2="225" stroke="#b45309" stroke-width="1.5" marker-end="url(#p1a)"></line>
|
||
</svg>
|
||
<figcaption>그림 1. POI는 ①지도좌표 → ②미터 → ③높이맞춤 → ④드론기준 → ⑤카메라기준 → ⑥화면투영 → ⑦글자 순으로 변신합니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="2-사용한-기술-한눈에-보기">2. 사용한 기술 한눈에 보기</h2>
|
||
<table>
|
||
<thead>
|
||
<tr class="header">
|
||
<th>번호</th>
|
||
<th>기술 이름</th>
|
||
<th>쉽게 말하면</th>
|
||
<th>자세히</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="odd">
|
||
<td>①</td>
|
||
<td><strong>좌표계 변환 (proj4)</strong></td>
|
||
<td>위도·경도(각도)를 '미터'로 바꾸기</td>
|
||
<td>3장</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td>②</td>
|
||
<td><strong>ENU 월드 좌표</strong></td>
|
||
<td>"기준점에서 동·북·위로 몇 m"</td>
|
||
<td>4장</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td>③</td>
|
||
<td><strong>지오이드 높이 보정</strong></td>
|
||
<td>두 가지 높이 기준을 맞추기</td>
|
||
<td>5장</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td>④</td>
|
||
<td><strong>자세 회전 행렬 (yaw/pitch/roll)</strong></td>
|
||
<td>드론이 어느 쪽을 보는지 계산</td>
|
||
<td>6장</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td>⑤</td>
|
||
<td><strong>상대 위치 벡터</strong></td>
|
||
<td>드론에서 POI까지의 방향·거리</td>
|
||
<td>7장</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td>⑥</td>
|
||
<td><strong>핀홀 카메라 원근투영</strong></td>
|
||
<td>3D 세상을 납작한 화면에 그리기</td>
|
||
<td>8장</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td>⑦</td>
|
||
<td><strong>화각(초점거리·센서)</strong></td>
|
||
<td>"얼마나 넓게 보나" 맞추기</td>
|
||
<td>9장</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td>⑧</td>
|
||
<td><strong>카메라 뒤 지우기(클리핑)</strong></td>
|
||
<td>뒤에 있는 건 안 그리기</td>
|
||
<td>10장</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td>⑨</td>
|
||
<td><strong>POI 높이 추측</strong></td>
|
||
<td>실제 높이 없을 때 똑똑하게 짐작</td>
|
||
<td>11장</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td>⑩</td>
|
||
<td><strong>거리 필터</strong></td>
|
||
<td>너무 먼 건 숨기기</td>
|
||
<td>12장</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td>⑪</td>
|
||
<td><strong>역투영 보정</strong></td>
|
||
<td>손으로 끌어 거꾸로 고치기</td>
|
||
<td>13장</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td>⑫</td>
|
||
<td><strong>화면 크롭 맞춤(cover)</strong></td>
|
||
<td>영상 잘림에 글자도 맞추기</td>
|
||
<td>14장</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>이제 하나씩 그림으로 볼게요!</p>
|
||
<hr />
|
||
<h2 id="3-기술-①--위도경도를-미터로-바꾸기-proj4">3. 기술 ① — 위도·경도를 '미터'로 바꾸기 (proj4)</h2>
|
||
<p>지도 위치는 보통 <strong>위도·경도</strong> (예: 북위 36.3°, 동경 127.4°)로 말해요. 그런데 이건 <strong>각도</strong>라서 "두 곳이 몇 m 떨어졌나?" 같은 계산이 어려워요.</p>
|
||
<p>그래서 <strong>"기준점에서 동쪽 몇 m, 북쪽 몇 m"</strong> 같은 <strong>미터(m)</strong> 좌표로 바꿔요. 우리나라 전용 지도 격자인 <strong>EPSG:5186 (한국 TM)</strong> 을 써서 바꿔요. 이 변신은 <code>proj4</code>라는 도구가 해 줍니다.</p>
|
||
<blockquote>
|
||
<p>📏 <strong>비유</strong>: "동경 127.4도"라고 하면 와닿지 않지만, "학교에서 동쪽으로 500m"라고 하면 바로 이해되죠.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 200" role="img" aria-label="위경도를 미터로">
|
||
<defs><marker id="p3a" 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>
|
||
<!-- globe -->
|
||
<circle cx="120" cy="100" r="60" fill="#dbeafe" stroke="#2563eb"></circle>
|
||
<ellipse cx="120" cy="100" rx="60" ry="22" fill="none" stroke="#93c5fd"></ellipse>
|
||
<ellipse cx="120" cy="100" rx="22" ry="60" fill="none" stroke="#93c5fd"></ellipse>
|
||
<circle cx="138" cy="78" r="5" fill="#dc2626"></circle>
|
||
<text x="120" y="180" text-anchor="middle" font-size="12" fill="#1e3a8a">위도·경도 (각도)</text>
|
||
<text x="120" y="40" text-anchor="middle" font-size="11" fill="#b91c1c">36.3°, 127.4°</text>
|
||
<!-- arrow -->
|
||
<line x1="195" y1="100" x2="270" y2="100" stroke="#16a34a" stroke-width="2.5" marker-end="url(#p3a)"></line>
|
||
<text x="232" y="90" text-anchor="middle" font-size="11" fill="#166534">proj4</text>
|
||
<text x="232" y="118" text-anchor="middle" font-size="10" fill="#166534">한국 TM</text>
|
||
<!-- grid -->
|
||
<g stroke="#e5e7eb"><line x1="320" y1="40" x2="320" y2="170"></line><line x1="380" y1="40" x2="380" y2="170"></line><line x1="440" y1="40" x2="440" y2="170"></line><line x1="500" y1="40" x2="500" y2="170"></line><line x1="560" y1="40" x2="560" y2="170"></line>
|
||
<line x1="300" y1="60" x2="620" y2="60"></line><line x1="300" y1="100" x2="620" y2="100"></line><line x1="300" y1="140" x2="620" y2="140"></line></g>
|
||
<line x1="320" y1="170" x2="620" y2="170" stroke="#6b7280" stroke-width="2"></line>
|
||
<line x1="320" y1="170" x2="320" y2="40" stroke="#6b7280" stroke-width="2"></line>
|
||
<text x="610" y="188" font-size="10" fill="#6b7280">동(m)→</text>
|
||
<text x="300" y="50" font-size="10" fill="#6b7280">북(m)↑</text>
|
||
<circle cx="500" cy="80" r="6" fill="#16a34a"></circle>
|
||
<text x="508" y="76" font-size="11" font-weight="bold" fill="#166534">동 540m, 북 320m</text>
|
||
</svg>
|
||
<figcaption>그림 2. 각도(위경도)를 우리나라 전용 미터 격자(한국 TM)로 바꿔 계산하기 쉽게 만듭니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="4-기술-②--동북위로-몇-m-3d-좌표-enu">4. 기술 ② — "동·북·위로 몇 m" 3D 좌표 (ENU)</h2>
|
||
<p>이제 위치를 <strong>세 개의 숫자</strong>로 나타내요. 기준점에서:</p>
|
||
<ul>
|
||
<li><strong>E</strong>ast (동쪽으로 몇 m)</li>
|
||
<li><strong>N</strong>orth (북쪽으로 몇 m)</li>
|
||
<li><strong>U</strong>p (위로 몇 m = 높이)</li>
|
||
</ul>
|
||
<p>이 세 글자를 따서 <strong>ENU</strong>라고 불러요. 이렇게 하면 지구 위 모든 위치를 <strong>3D 공간의 한 점</strong>으로 다룰 수 있어요.</p>
|
||
<blockquote>
|
||
<p>🧊 <strong>비유</strong>: 교실에서 물건 위치를 "칠판에서 오른쪽 2m, 앞으로 3m, 바닥에서 1m 높이"라고 말하는 것과 같아요.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 220" role="img" aria-label="ENU 3D 좌표">
|
||
<defs><marker id="p4a" markerWidth="9" markerHeight="9" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#6b7280"></path></marker></defs>
|
||
<!-- origin -->
|
||
<circle cx="180" cy="160" r="6" fill="#16a34a"></circle>
|
||
<text x="150" y="180" font-size="11" fill="#14532d">기준점 (0,0,0)</text>
|
||
<!-- E axis -->
|
||
<line x1="180" y1="160" x2="560" y2="160" stroke="#6b7280" stroke-width="2" marker-end="url(#p4a)"></line>
|
||
<text x="555" y="180" font-size="12" fill="#6b7280">E 동쪽</text>
|
||
<!-- N axis (diagonal back) -->
|
||
<line x1="180" y1="160" x2="380" y2="60" stroke="#6b7280" stroke-width="2" marker-end="url(#p4a)"></line>
|
||
<text x="385" y="55" font-size="12" fill="#6b7280">N 북쪽</text>
|
||
<!-- U axis -->
|
||
<line x1="180" y1="160" x2="180" y2="40" stroke="#6b7280" stroke-width="2" marker-end="url(#p4a)"></line>
|
||
<text x="150" y="40" font-size="12" fill="#6b7280">U 위(높이)</text>
|
||
<!-- point -->
|
||
<line x1="440" y1="120" x2="440" y2="80" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="4 3"></line>
|
||
<circle cx="440" cy="80" r="7" fill="#b45309"></circle>
|
||
<text x="450" y="76" font-size="12" font-weight="bold" fill="#b45309">○○다리</text>
|
||
<text x="450" y="94" font-size="11" fill="#7c2d12">(E, N, U)</text>
|
||
</svg>
|
||
<figcaption>그림 3. 모든 위치를 "동·북·위로 몇 m"인 3D 점으로 나타냅니다(ENU).</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="5-기술-③--두-가지-높이-기준-맞추기-지오이드-보정">5. 기술 ③ — 두 가지 '높이 기준' 맞추기 (지오이드 보정)</h2>
|
||
<p>높이를 재는 기준이 <strong>두 가지</strong>라서 헷갈려요.</p>
|
||
<ul>
|
||
<li><strong>GPS 높이</strong>: 지구를 매끈한 타원이라 보고 잰 높이 (드론이 기록하는 높이)</li>
|
||
<li><strong>지도 해발고도</strong>: 평균 바닷물 높이 기준 (지도에 적힌 높이) = <strong>지오이드</strong></li>
|
||
</ul>
|
||
<p>이 둘은 지역마다 <strong>수십 m</strong> 차이 나요. (대전은 약 <strong>25.8m</strong>!) 안 맞추면 글자가 위아래로 엉뚱하게 떠요. 그래서 지도 높이에 <strong>25.8m를 더해</strong> 드론의 높이 기준과 똑같이 맞춰 줘요.</p>
|
||
<blockquote>
|
||
<p>🌊 <strong>비유</strong>: "1층 바닥 기준 높이"와 "지하주차장 바닥 기준 높이"는 같은 창문인데 숫자가 다르죠. 비교하려면 기준을 하나로 맞춰야 해요.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 200" role="img" aria-label="높이 기준 차이">
|
||
<defs><marker id="p5a" markerWidth="9" markerHeight="9" refX="3" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#dc2626"></path></marker><marker id="p5b" markerWidth="9" markerHeight="9" refX="3" refY="3" orient="auto"><path d="M6,0 L0,3 L6,6 Z" fill="#dc2626"></path></marker></defs>
|
||
<line x1="40" y1="55" x2="640" y2="55" stroke="#2563eb" stroke-width="2" stroke-dasharray="6 4"></line>
|
||
<text x="450" y="48" font-size="12" fill="#1e3a8a">GPS 높이 기준 (드론이 기록)</text>
|
||
<line x1="40" y1="115" x2="640" y2="115" stroke="#0ea5e9" stroke-width="2" stroke-dasharray="6 4"></line>
|
||
<text x="430" y="135" font-size="12" fill="#0369a1">지도 해발 기준 (지오이드)</text>
|
||
<line x1="160" y1="56" x2="160" y2="114" stroke="#dc2626" stroke-width="1.5" marker-start="url(#p5a)" marker-end="url(#p5b)"></line>
|
||
<text x="170" y="92" font-size="12" font-weight="bold" fill="#dc2626">약 25.8m 차이</text>
|
||
<path d="M40,170 Q200,150 360,158 T640,150" fill="none" stroke="#8b5e34" stroke-width="3"></path>
|
||
<text x="46" y="188" font-size="11" fill="#7c5a3a">실제 땅</text>
|
||
<text x="400" y="175" font-size="11" fill="#b91c1c">→ 지도 높이에 25.8m 더해 기준 통일</text>
|
||
</svg>
|
||
<figcaption>그림 4. 높이 기준이 둘이라 약 25.8m 차이. 더해서 맞춰야 글자가 제 높이에 붙습니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="6-기술-④--드론이-어느-쪽을-보는지-자세-회전">6. 기술 ④ — 드론이 '어느 쪽을 보는지' (자세 회전)</h2>
|
||
<p>드론은 가만히 있지 않아요. <strong>좌우로 돌고(yaw), 아래로 숙이고(pitch), 옆으로 기울어요(roll).</strong> 이 세 가지를 알아야 "카메라가 정확히 어느 방향을 보는지" 계산할 수 있어요.</p>
|
||
<p>이걸 <strong>회전 행렬</strong>이라는 수학 도구로 한 번에 계산해요. (세 방향 회전을 합치는 마법 표라고 생각하면 돼요.)</p>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 200" role="img" aria-label="yaw pitch roll">
|
||
<!-- yaw -->
|
||
<g><circle cx="120" cy="100" r="45" fill="none" stroke="#2563eb" stroke-width="2"></circle>
|
||
<path d="M120,55 A45,45 0 0 1 158,80" fill="none" stroke="#2563eb" stroke-width="3" marker-end="url(#p6a)"></path>
|
||
<defs><marker id="p6a" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#2563eb"></path></marker></defs>
|
||
<text x="120" y="105" text-anchor="middle" font-size="13" font-weight="bold" fill="#1e3a8a">yaw</text>
|
||
<text x="120" y="165" text-anchor="middle" font-size="11" fill="#1e3a8a">좌우로 돌기</text></g>
|
||
<!-- pitch -->
|
||
<g><ellipse cx="340" cy="100" rx="45" ry="20" fill="none" stroke="#16a34a" stroke-width="2"></ellipse>
|
||
<path d="M340,80 A20,20 0 0 1 360,100" fill="none" stroke="#16a34a" stroke-width="3"></path>
|
||
<text x="340" y="105" text-anchor="middle" font-size="13" font-weight="bold" fill="#166534">pitch</text>
|
||
<text x="340" y="165" text-anchor="middle" font-size="11" fill="#166534">위·아래 숙이기</text></g>
|
||
<!-- roll -->
|
||
<g><line x1="510" y1="100" x2="610" y2="100" stroke="#d1d5db" stroke-width="2"></line>
|
||
<line x1="520" y1="115" x2="600" y2="85" stroke="#ea580c" stroke-width="3"></line>
|
||
<text x="560" y="135" text-anchor="middle" font-size="13" font-weight="bold" fill="#9a3412">roll</text>
|
||
<text x="560" y="165" text-anchor="middle" font-size="11" fill="#9a3412">옆으로 기울기</text></g>
|
||
</svg>
|
||
<figcaption>그림 5. 드론의 세 가지 자세(yaw·pitch·roll)를 합쳐, 카메라가 보는 방향을 정확히 계산합니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="7-기술-⑤--드론에서-poi까지-상대-위치">7. 기술 ⑤ — 드론에서 POI까지 '상대 위치'</h2>
|
||
<p>이제 <strong>POI의 위치 − 드론의 위치</strong>를 빼서, <strong>"드론에서 봤을 때 POI가 어느 쪽에, 얼마나 멀리"</strong> 있는지 구해요. 그리고 ④에서 구한 드론의 보는 방향을 적용하면, <strong>"카메라 눈 기준으로" POI가 어디 있는지</strong> 나와요.</p>
|
||
<blockquote>
|
||
<p>👉 <strong>비유</strong>: 친구가 어디 서서 어느 쪽을 보는지 알면, "친구 눈에는 저 건물이 왼쪽 앞에 보이겠네" 하고 알 수 있죠.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 200" role="img" aria-label="상대 위치">
|
||
<defs><marker id="p7a" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#7c3aed"></path></marker></defs>
|
||
<!-- view cone -->
|
||
<path d="M130,120 L470,55 L470,165 Z" fill="#ede9fe" opacity="0.6"></path>
|
||
<circle cx="130" cy="120" r="9" fill="#7c3aed"></circle>
|
||
<text x="100" y="148" font-size="12" font-weight="bold" fill="#5b21b6">드론</text>
|
||
<rect x="500" y="75" width="55" height="60" fill="#fde68a" stroke="#b45309"></rect>
|
||
<text x="527" y="152" text-anchor="middle" font-size="11" fill="#7c2d12">○○다리</text>
|
||
<line x1="140" y1="118" x2="496" y2="100" stroke="#7c3aed" stroke-width="2" stroke-dasharray="5 4" marker-end="url(#p7a)"></line>
|
||
<text x="250" y="95" font-size="12" fill="#5b21b6">"드론 눈 기준으로 오른쪽 앞, 340m"</text>
|
||
</svg>
|
||
<figcaption>그림 6. POI 위치에서 드론 위치를 빼고 드론의 보는 방향을 적용해, 카메라 눈 기준 위치를 구합니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="8-기술-⑥--3d를-납작한-화면에-그리기-핀홀-카메라-원근투영">8. 기술 ⑥ — 3D를 납작한 화면에 그리기 (핀홀 카메라 원근투영)</h2>
|
||
<p>이제 핵심! <strong>입체(3D)를 납작한 화면(2D)에</strong> 그려요. 규칙은 누구나 알아요: <strong>가까운 건 크게, 먼 건 작게.</strong> 이게 바로 <strong>원근법</strong>이고, 카메라는 <strong>바늘구멍 사진기</strong>처럼 작동해요.</p>
|
||
<p>계산은 의외로 간단해요. "옆으로 간 거리 ÷ 앞으로 간 거리" 를 하면 화면의 좌우 위치가 나와요. (위아래도 똑같이!) 멀수록(앞으로 간 거리가 클수록) 나누는 값이 커져서 → 화면 가운데로 작게 모여요.</p>
|
||
<blockquote>
|
||
<p>📷 <strong>비유</strong>: 기찻길이 멀어질수록 한 점으로 모이는 것 — 그게 바로 이 나눗셈의 결과예요.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 230" role="img" aria-label="핀홀 투영">
|
||
<line x1="40" y1="195" x2="650" y2="195" stroke="#9ca3af" stroke-width="1.5"></line>
|
||
<circle cx="70" cy="150" r="7" fill="#111"></circle>
|
||
<text x="42" y="172" font-size="11" fill="#333">카메라(눈)</text>
|
||
<line x1="210" y1="55" x2="210" y2="195" stroke="#2563eb" stroke-width="2"></line>
|
||
<text x="175" y="48" font-size="11" fill="#1e3a8a">화면</text>
|
||
<!-- near pole -->
|
||
<line x1="360" y1="65" x2="360" y2="195" stroke="#16a34a" stroke-width="4"></line>
|
||
<text x="330" y="213" font-size="11" fill="#14532d">가까운 다리</text>
|
||
<line x1="560" y1="65" x2="560" y2="195" stroke="#16a34a" stroke-width="4"></line>
|
||
<text x="530" y="213" font-size="11" fill="#14532d">먼 다리</text>
|
||
<text x="350" y="53" font-size="10" fill="#777">(실제 크기는 같음)</text>
|
||
<line x1="70" y1="150" x2="360" y2="65" stroke="#f59e0b" stroke-width="1" stroke-dasharray="3 3"></line>
|
||
<line x1="70" y1="150" x2="360" y2="195" stroke="#f59e0b" stroke-width="1" stroke-dasharray="3 3"></line>
|
||
<line x1="70" y1="150" x2="560" y2="65" stroke="#b45309" stroke-width="1" stroke-dasharray="3 3"></line>
|
||
<line x1="70" y1="150" x2="560" y2="195" stroke="#b45309" stroke-width="1" stroke-dasharray="3 3"></line>
|
||
<line x1="210" y1="108" x2="210" y2="173" stroke="#16a34a" stroke-width="6"></line>
|
||
<line x1="218" y1="125" x2="218" y2="167" stroke="#15803d" stroke-width="6" opacity="0.8"></line>
|
||
<text x="228" y="120" font-size="10" fill="#166534">화면엔 가까운 게 크게</text>
|
||
</svg>
|
||
<figcaption>그림 7. 바늘구멍 사진기처럼, "옆거리 ÷ 앞거리"로 화면 위치를 구하면 자동으로 원근법이 됩니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="9-기술-⑦--얼마나-넓게-보나-화각-맞추기-초점거리센서">9. 기술 ⑦ — '얼마나 넓게 보나' 화각 맞추기 (초점거리·센서)</h2>
|
||
<p>같은 자리에서도 <strong>광각 렌즈</strong>는 넓게, <strong>줌 렌즈</strong>는 좁게 보여요. 이 "얼마나 넓게 보나"가 <strong>화각</strong>이에요. 화각은 <strong>초점거리(focal, 기본 24mm)</strong> 와 <strong>센서 크기(36mm, 16:9)</strong> 로 정해져요.</p>
|
||
<p>화각이 안 맞으면 글자가 위아래·좌우로 어긋나요. 그래서 8장의 나눗셈에 이 값을 곱해서 정확히 맞춰 줘요.</p>
|
||
<blockquote>
|
||
<p>🔍 <strong>비유</strong>: 같은 창밖 풍경도 망원경(줌)으로 보면 좁고 크게, 그냥 보면 넓고 작게 보이죠.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 190" role="img" aria-label="화각">
|
||
<circle cx="80" cy="95" r="7" fill="#111"></circle>
|
||
<text x="55" y="117" font-size="11" fill="#333">카메라</text>
|
||
<path d="M80,95 L620,20 L620,170 Z" fill="#fef3c7" opacity="0.7" stroke="#f59e0b"></path>
|
||
<text x="480" y="38" font-size="13" font-weight="bold" fill="#b45309">광각: 넓게 봄</text>
|
||
<path d="M80,95 L620,75 L620,115 Z" fill="#bfdbfe" opacity="0.85" stroke="#2563eb"></path>
|
||
<text x="480" y="145" font-size="13" font-weight="bold" fill="#1e3a8a">줌: 좁게 봄</text>
|
||
</svg>
|
||
<figcaption>그림 8. 초점거리·센서로 정해지는 화각(FOV)을 맞춰야 글자가 정확한 자리에 붙습니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="10-기술-⑧--카메라-뒤에-있는-건-안-그리기-클리핑">10. 기술 ⑧ — 카메라 '뒤'에 있는 건 안 그리기 (클리핑)</h2>
|
||
<p>POI가 드론 <strong>뒤쪽</strong>이나 <strong>너무 가까이</strong>에 있으면, 계산이 이상해져서 글자가 화면 반대편으로 <strong>휙 튀어요.</strong> 그래서 "앞으로 간 거리(Zc)가 너무 작거나 마이너스면 = 카메라 뒤/너무 가까움" → <strong>그냥 안 그려요.</strong></p>
|
||
<blockquote>
|
||
<p>🙈 <strong>비유</strong>: 내 뒤통수 쪽 물건은 내 눈에 안 보이죠. 안 보이는 건 화면에도 안 그리는 게 맞아요.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 180" role="img" aria-label="클리핑">
|
||
<circle cx="340" cy="90" r="9" fill="#111"></circle>
|
||
<text x="320" y="115" font-size="11" fill="#333">카메라</text>
|
||
<path d="M340,90 L640,30 L640,150 Z" fill="#dcfce7" opacity="0.6" stroke="#16a34a"></path>
|
||
<text x="560" y="90" font-size="12" fill="#166534">앞 = 그림 ✓</text>
|
||
<circle cx="560" cy="80" r="6" fill="#16a34a"></circle>
|
||
<!-- behind -->
|
||
<path d="M340,90 L40,30 L40,150 Z" fill="#fee2e2" opacity="0.6" stroke="#dc2626"></path>
|
||
<text x="120" y="90" font-size="12" fill="#b91c1c">뒤 = 안 그림 ✗</text>
|
||
<circle cx="130" cy="80" r="6" fill="#dc2626"></circle>
|
||
<line x1="120" y1="70" x2="140" y2="90" stroke="#b91c1c" stroke-width="2"></line><line x1="140" y1="70" x2="120" y2="90" stroke="#b91c1c" stroke-width="2"></line>
|
||
</svg>
|
||
<figcaption>그림 9. 카메라 뒤·너무 가까운 POI는 글자가 튀므로 아예 그리지 않습니다(클리핑).</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="11-기술-⑨--poi-높이를-똑똑하게-추측하기">11. 기술 ⑨ — POI 높이를 똑똑하게 '추측'하기</h2>
|
||
<p>문제가 하나 있어요. 다리·역의 <strong>위도·경도는 정확히 아는데, 정확한 높이는 모를 때</strong>가 많아요. 비싼 3D 지형 데이터(DEM)를 사면 알 수 있지만, 안 사고도 똑똑하게 짐작해요. 두 가지 방법:</p>
|
||
<ol type="1">
|
||
<li><strong>가장 가까운 선로(중심선)의 높이</strong>를 빌려 써요. → 선로 굴곡(오르막/내리막)까지 자연스럽게 반영! 👍</li>
|
||
<li>또는 <strong>"드론 높이 − 일정값(약 24m)"</strong> 으로 가정해요.</li>
|
||
</ol>
|
||
<p>그리고 사람이 직접 고친 높이가 있으면(드래그/DEM) 그걸 <strong>가장 먼저</strong> 써요.</p>
|
||
<blockquote>
|
||
<p>🏔️ <strong>비유</strong>: 친구 키를 모를 때, 바로 옆에 선 비슷한 친구 키를 참고해 짐작하는 것과 같아요.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 190" role="img" aria-label="POI 높이 추측">
|
||
<!-- rail line with slope -->
|
||
<polyline points="40,150 200,140 360,120 520,135 640,125" fill="none" stroke="#06a4c8" stroke-width="4"></polyline>
|
||
<text x="46" y="172" font-size="11" fill="#0369a1">가까운 선로(높이 알고 있음)</text>
|
||
<!-- POI -->
|
||
<circle cx="360" cy="120" r="7" fill="#b45309"></circle>
|
||
<line x1="360" y1="120" x2="360" y2="70" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4 3"></line>
|
||
<rect x="335" y="45" width="50" height="25" rx="4" fill="#fde68a" stroke="#b45309"></rect>
|
||
<text x="360" y="62" text-anchor="middle" font-size="11" fill="#7c2d12">○○다리</text>
|
||
<text x="375" y="115" font-size="11" font-weight="bold" fill="#b45309">↑ 옆 선로 높이를 빌려 씀</text>
|
||
</svg>
|
||
<figcaption>그림 10. POI 높이를 모를 때, 가장 가까운 선로 높이를 빌려 자연스럽게 맞춥니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="12-기술-⑩--너무-먼-건-숨기기-거리-필터">12. 기술 ⑩ — 너무 먼 건 숨기기 (거리 필터)</h2>
|
||
<p>화면에 모든 POI를 다 그리면 너무 복잡해요. 그래서 드론과의 <strong>수평 직선거리</strong>가 정해진 범위(기본 <strong>1000m</strong>)보다 멀면 <strong>숨겨요.</strong> 가까운 것만 보여 주는 거죠.</p>
|
||
<p>또 "앞에 있나 / 옆에 있나"도 따로 구분해서 더 똑똑하게 걸러낼 수 있어요.</p>
|
||
<blockquote>
|
||
<p>🔭 <strong>비유</strong>: 지도 앱에서 너무 멀리 있는 가게 이름은 안 보이다가, 가까이 가면 나타나는 것과 같아요.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 190" role="img" aria-label="거리 필터">
|
||
<circle cx="120" cy="95" r="9" fill="#7c3aed"></circle>
|
||
<text x="95" y="120" font-size="11" font-weight="bold" fill="#5b21b6">드론</text>
|
||
<circle cx="120" cy="95" r="130" fill="#7c3aed" opacity="0.07" stroke="#7c3aed" stroke-dasharray="6 4"></circle>
|
||
<text x="120" y="220" text-anchor="middle" font-size="11" fill="#5b21b6"></text>
|
||
<text x="200" y="40" font-size="11" fill="#5b21b6">범위(1000m) 안</text>
|
||
<!-- inside -->
|
||
<circle cx="180" cy="120" r="6" fill="#16a34a"></circle><text x="190" y="124" font-size="11" fill="#166534">○○다리 ✓</text>
|
||
<circle cx="210" cy="60" r="6" fill="#16a34a"></circle><text x="220" y="64" font-size="11" fill="#166534">△△역 ✓</text>
|
||
<!-- outside -->
|
||
<circle cx="560" cy="120" r="6" fill="#9ca3af"></circle><text x="500" y="140" font-size="11" fill="#9ca3af">먼 터널 ✗ (숨김)</text>
|
||
</svg>
|
||
<figcaption>그림 11. 드론에서 너무 먼 POI는 숨기고, 범위 안의 것만 화면에 보여 깔끔하게 합니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="13-기술-⑪--손으로-끌어-거꾸로-고치기-역투영">13. 기술 ⑪ — 손으로 끌어 거꾸로 고치기 (역투영)</h2>
|
||
<p>지도 위치가 가끔 살짝 틀려요. 그러면 화면에서 글자를 <strong>제자리로 쓱 끌면</strong>, 컴퓨터가 그 화면 위치를 <strong>거꾸로 따라가</strong> 실제 위치(또는 높이)를 다시 계산해 고쳐요. (8장을 반대로!) 고친 값은 <strong>저장</strong>돼서 다음에도, 다른 장면에서도 계속 맞아요.</p>
|
||
<p>이렇게 거꾸로 푸는 방법이 여러 개 있어요:</p>
|
||
<ul>
|
||
<li><strong>화면점 → 실제 위치</strong> 복원 (위·아래 동시 보정)</li>
|
||
<li><strong>높이만</strong> 다시 풀기 (앞으로 밀려 보일 때)</li>
|
||
<li><strong>광선을 땅과 만나게</strong> 해서 좌우 위치 고치기</li>
|
||
<li>글자를 끌면 <strong>화각(초점거리)을 스스로 다시 맞추기</strong></li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>🎯 <strong>비유</strong>: 다트가 빗나가면, 맞은 자리를 보고 "팔을 이만큼 틀어야겠다" 하고 거꾸로 교정하는 것과 같아요.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 200" role="img" aria-label="역투영 보정">
|
||
<defs><marker id="p13a" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 Z" fill="#7c3aed"></path></marker></defs>
|
||
<rect x="40" y="35" width="220" height="130" rx="6" fill="#0b1020" stroke="#444"></rect>
|
||
<text x="150" y="28" text-anchor="middle" font-size="11" fill="#333">영상 화면</text>
|
||
<circle cx="170" cy="80" r="6" fill="#f59e0b"></circle>
|
||
<text x="95" y="105" font-size="11" fill="#fde68a">여기로 끌었다</text>
|
||
<line x1="300" y1="175" x2="650" y2="175" stroke="#8b5e34" stroke-width="3"></line>
|
||
<text x="300" y="195" font-size="11" fill="#7c5a3a">실제 땅</text>
|
||
<line x1="176" y1="82" x2="560" y2="170" stroke="#7c3aed" stroke-width="2" stroke-dasharray="5 4" marker-end="url(#p13a)"></line>
|
||
<circle cx="560" cy="170" r="6" fill="#7c3aed"></circle>
|
||
<text x="485" y="160" font-size="12" font-weight="bold" fill="#6d28d9">진짜 위치!</text>
|
||
<text x="270" y="60" font-size="11" fill="#6d28d9">화면의 점 → 거꾸로 따라가 → 실제 위치 계산·저장</text>
|
||
</svg>
|
||
<figcaption>그림 12. 글자를 끌면 그 화면점을 거꾸로 따라가 실제 위치·높이·화각을 자동 보정하고 저장합니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="14-기술-⑫--영상-잘림에-글자도-맞추기-cover-변환">14. 기술 ⑫ — 영상 잘림에 글자도 맞추기 (cover 변환)</h2>
|
||
<p>영상은 화면을 <strong>비율 유지하며 꽉 채우다 보니 가장자리가 살짝 잘려요</strong>(CSS <code>object-fit: cover</code>). 그래서 글자도 <strong>똑같이 잘린 영상에 맞춰</strong> 위치를 옮겨야 정확히 붙어요. 8장에서 구한 "0~1 사이의 화면 비율 위치"를, 실제 화면 픽셀로 바꿀 때 이 잘림을 똑같이 반영해 줘요.</p>
|
||
<blockquote>
|
||
<p>🖼️ <strong>비유</strong>: 액자(화면)에 사진(영상)을 꽉 채우면 사진 가장자리가 조금 잘리죠. 사진 위에 붙일 스티커(글자)도 그 잘린 만큼 같이 옮겨 줘야 제자리예요.</p>
|
||
</blockquote>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 190" role="img" aria-label="cover 변환">
|
||
<!-- container -->
|
||
<rect x="220" y="30" width="240" height="130" fill="#0b1020" stroke="#23272e" stroke-width="2"></rect>
|
||
<text x="340" y="22" text-anchor="middle" font-size="11" fill="#333">화면(액자)</text>
|
||
<!-- video larger, cropped -->
|
||
<rect x="180" y="40" width="320" height="110" fill="#1e293b" opacity="0.5" stroke="#64748b" stroke-dasharray="5 4"></rect>
|
||
<text x="340" y="100" text-anchor="middle" font-size="11" fill="#94a3b8">영상(좌우 살짝 잘림)</text>
|
||
<!-- label -->
|
||
<rect x="300" y="70" width="80" height="24" rx="4" fill="#fde68a" stroke="#b45309"></rect>
|
||
<text x="340" y="87" text-anchor="middle" font-size="11" fill="#7c2d12">○○다리</text>
|
||
<text x="510" y="95" font-size="11" fill="#555">글자도 잘린 만큼</text>
|
||
<text x="510" y="113" font-size="11" fill="#555">같이 맞춰 이동</text>
|
||
</svg>
|
||
<figcaption>그림 13. 영상이 꽉 차며 잘리는 만큼 글자 위치도 똑같이 보정해 정확히 정합시킵니다.</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="15-전체를-한-줄로-다시-정리">15. 전체를 한 줄로 다시 정리</h2>
|
||
<figure class="fig">
|
||
<svg viewBox="0 0 680 120" role="img" aria-label="전체 요약">
|
||
<defs><marker id="p15a" markerWidth="9" markerHeight="9" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#b45309"></path></marker></defs>
|
||
<g font-size="11" text-anchor="middle">
|
||
<rect x="10" y="45" width="80" height="34" rx="6" fill="#ecfdf5" stroke="#16a34a"></rect><text x="50" y="66" fill="#166534">위경도</text>
|
||
<rect x="110" y="45" width="80" height="34" rx="6" fill="#eff6ff" stroke="#2563eb"></rect><text x="150" y="66" fill="#1e3a8a">미터·ENU</text>
|
||
<rect x="210" y="45" width="80" height="34" rx="6" fill="#fefce8" stroke="#ca8a04"></rect><text x="250" y="66" fill="#854d0e">높이맞춤</text>
|
||
<rect x="310" y="45" width="80" height="34" rx="6" fill="#fff7ed" stroke="#ea580c"></rect><text x="350" y="60" fill="#9a3412">드론자세</text><text x="350" y="73" fill="#9a3412">+상대위치</text>
|
||
<rect x="410" y="45" width="80" height="34" rx="6" fill="#f5f3ff" stroke="#7c3aed"></rect><text x="450" y="60" fill="#5b21b6">원근투영</text><text x="450" y="73" fill="#5b21b6">+화각</text>
|
||
<rect x="510" y="45" width="70" height="34" rx="6" fill="#fdf2f8" stroke="#db2777"></rect><text x="545" y="60" fill="#9d174d">거리·겹침</text><text x="545" y="73" fill="#9d174d">필터</text>
|
||
<rect x="600" y="45" width="70" height="34" rx="6" fill="#fff" stroke="#b45309" stroke-width="2"></rect><text x="635" y="66" fill="#23272e">화면 글자✨</text>
|
||
</g>
|
||
<line x1="90" y1="62" x2="108" y2="62" stroke="#b45309" stroke-width="1.3" marker-end="url(#p15a)"></line>
|
||
<line x1="190" y1="62" x2="208" y2="62" stroke="#b45309" stroke-width="1.3" marker-end="url(#p15a)"></line>
|
||
<line x1="290" y1="62" x2="308" y2="62" stroke="#b45309" stroke-width="1.3" marker-end="url(#p15a)"></line>
|
||
<line x1="390" y1="62" x2="408" y2="62" stroke="#b45309" stroke-width="1.3" marker-end="url(#p15a)"></line>
|
||
<line x1="490" y1="62" x2="508" y2="62" stroke="#b45309" stroke-width="1.3" marker-end="url(#p15a)"></line>
|
||
<line x1="580" y1="62" x2="598" y2="62" stroke="#b45309" stroke-width="1.3" marker-end="url(#p15a)"></line>
|
||
</svg>
|
||
<figcaption>그림 14. 위경도 → 미터/ENU → 높이맞춤 → 드론자세·상대위치 → 원근투영·화각 → 거리/겹침 필터 → 화면 글자!</figcaption>
|
||
</figure>
|
||
|
||
<hr />
|
||
<h2 id="16-왜-이게-대단할까-특허감-포인트">16. 왜 이게 대단할까? (특허감 포인트)</h2>
|
||
<ul>
|
||
<li><strong>측량 선로 높이로, 비싼 3D 지형 없이도 정합</strong> (11장) + 두 높이 기준 자동 맞춤(5장).</li>
|
||
<li><strong>한 번 끌어서 위치·높이·화각을 동시에 거꾸로 보정</strong> (13장) — 보통은 깊이 측정 장비가 필요한 일을 장비 없이.</li>
|
||
<li><strong>드론 자세·화각·지오이드·원근법을 모두 합친 정확한 투영</strong> (6~9장) — 영상 위에 글자를 픽셀 단위로 정합.</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>⚠️ 단, 특허는 <strong>비슷한 게 이미 있는지(선행기술)</strong> 전문가가 꼭 찾아봐야 확정돼요.</p>
|
||
</blockquote>
|
||
<hr />
|
||
<h2 id="17-쉬운-용어-사전">17. 쉬운 용어 사전</h2>
|
||
<table>
|
||
<thead>
|
||
<tr class="header">
|
||
<th>어려운 말</th>
|
||
<th>쉬운 뜻</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="odd">
|
||
<td><strong>POI</strong></td>
|
||
<td>다리·터널·역처럼 지도에 표시된 '관심 지점'(Point Of Interest)</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td><strong>좌표계 변환 / proj4</strong></td>
|
||
<td>위도·경도(각도)를 미터 격자로 바꾸는 것 (한국 TM = EPSG:5186)</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td><strong>ENU</strong></td>
|
||
<td>기준점에서 동(E)·북(N)·위(U)로 몇 m인지 나타내는 3D 좌표</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td><strong>지오이드</strong></td>
|
||
<td>'해발고도'의 기준(평균 바닷물 높이). GPS 높이와 달라 보정 필요</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td><strong>yaw / pitch / roll</strong></td>
|
||
<td>좌우로 돈 / 위아래 숙인 / 옆으로 기운 정도 (드론 자세)</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td><strong>회전 행렬</strong></td>
|
||
<td>세 가지 회전을 한 번에 계산하는 수학 도구</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td><strong>투영(projection)</strong></td>
|
||
<td>입체(3D)를 납작한 화면(2D)에 그리는 것 (원근법)</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td><strong>핀홀 카메라</strong></td>
|
||
<td>바늘구멍 사진기 — 가까운 건 크게, 먼 건 작게</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td><strong>화각(FOV) / 초점거리</strong></td>
|
||
<td>카메라가 얼마나 넓게 보는지 (광각=넓게, 줌=좁게)</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td><strong>클리핑</strong></td>
|
||
<td>카메라 뒤/너무 가까운 것을 안 그리고 잘라내는 것</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td><strong>DEM</strong></td>
|
||
<td>땅의 높낮이를 담은 3D 지형 데이터 (보통 비쌈)</td>
|
||
</tr>
|
||
<tr class="even">
|
||
<td><strong>역투영</strong></td>
|
||
<td>투영의 반대 — 화면의 한 점이 실제 어디인지 거꾸로 찾는 것</td>
|
||
</tr>
|
||
<tr class="odd">
|
||
<td><strong>object-fit: cover</strong></td>
|
||
<td>영상을 비율 유지하며 화면을 꽉 채우는 방식(가장자리 잘림)</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<hr />
|
||
<h2 id="18-마치며">18. 마치며</h2>
|
||
<blockquote>
|
||
<p>지도에 적힌 <strong>"○○다리는 여기"</strong> 라는 위치 하나가 화면에 붙기까지, <strong>위경도→미터 변환 → 높이 맞추기 → 드론 자세·상대위치 → 원근법 투영 → 거리·겹침 정리</strong> 라는 여러 기술이 차례로 일을 해요.</p>
|
||
</blockquote>
|
||
<p>복잡해 보여도, 사실은 <strong>"학교에서 동쪽 몇 m, 친구가 보는 방향, 기찻길이 멀어지면 작아지는 원근법"</strong> 같은 <strong>일상의 생각들</strong>을 컴퓨터로 정밀하게 이어 붙인 것뿐이랍니다. 🙂</p>
|
||
</body>
|
||
</html>
|