# 쉬운설명_지도POI를_영상에_붙이는기술

# 지도 위의 POI를 영상에 '딱' 붙이는 기술들 (그림 설명서)

> 이 글은 초등학생도 이해할 수 있게 쓴 설명서예요. "지도에 적힌 다리·터널·역의 위치(POI)를, 드론 영상의 정확한 화면 자리에 어떻게 붙이는가?" 그 비밀을 그림과 이야기로 하나씩 풀어 줄게요. (진짜 수학 공식은 같은 폴더의 기술문서 geoProjection.ts를 보세요.)

## 0. 한 문장으로 말하면

"지도에서는 ○○다리가 여기 있어요" 라는 위치 정보(POI)를 받아서, "그럼 드론 영상 화면에서는 바로 이 자리에 보이겠네!" 하고 글자를 딱 붙여 주는 기술이에요.

> 🎯 비유: 보물지도에 "보물은 큰 나무 옆"이라고 적혀 있을 때, 내가 지금 서 있는 자리와 보는 방향을 알면 "저 나무가 내 눈앞 어디쯤 보일지" 알 수 있죠. 그걸 컴퓨터가 하는 거예요.

## 1. 큰 그림 먼저 — POI가 화면에 붙기까지 여행

POI 하나가 화면에 붙으려면 여러 단계의 변신을 거쳐요. 마치 공장의 컨베이어 벨트처럼요.

그림 1. POI는 ①지도좌표 → ②미터 → ③높이맞춤 → ④드론기준 → ⑤카메라기준 → ⑥화면투영 → ⑦글자 순으로 변신합니다.

## 2. 사용한 기술 한눈에 보기

번호 | 기술 이름 | 쉽게 말하면 | 자세히
--- | --- | --- | ---
① | 좌표계 변환 (proj4) | 위도·경도(각도)를 '미터'로 바꾸기 | 3장
② | ENU 월드 좌표 | "기준점에서 동·북·위로 몇 m" | 4장
③ | 지오이드 높이 보정 | 두 가지 높이 기준을 맞추기 | 5장
④ | 자세 회전 행렬 (yaw/pitch/roll) | 드론이 어느 쪽을 보는지 계산 | 6장
⑤ | 상대 위치 벡터 | 드론에서 POI까지의 방향·거리 | 7장
⑥ | 핀홀 카메라 원근투영 | 3D 세상을 납작한 화면에 그리기 | 8장
⑦ | 화각(초점거리·센서) | "얼마나 넓게 보나" 맞추기 | 9장
⑧ | 카메라 뒤 지우기(클리핑) | 뒤에 있는 건 안 그리기 | 10장
⑨ | POI 높이 추측 | 실제 높이 없을 때 똑똑하게 짐작 | 11장
⑩ | 거리 필터 | 너무 먼 건 숨기기 | 12장
⑪ | 역투영 보정 | 손으로 끌어 거꾸로 고치기 | 13장
⑫ | 화면 크롭 맞춤(cover) | 영상 잘림에 글자도 맞추기 | 14장

이제 하나씩 그림으로 볼게요!

## 3. 기술 ① — 위도·경도를 '미터'로 바꾸기 (proj4)

지도 위치는 보통 위도·경도 (예: 북위 36.3°, 동경 127.4°)로 말해요. 그런데 이건 각도라서 "두 곳이 몇 m 떨어졌나?" 같은 계산이 어려워요.

그래서 "기준점에서 동쪽 몇 m, 북쪽 몇 m" 같은 미터(m) 좌표로 바꿔요. 우리나라 전용 지도 격자인 EPSG:5186 (한국 TM) 을 써서 바꿔요. 이 변신은 `proj4`라는 도구가 해 줍니다.

> 📏 비유: "동경 127.4도"라고 하면 와닿지 않지만, "학교에서 동쪽으로 500m"라고 하면 바로 이해되죠.

그림 2. 각도(위경도)를 우리나라 전용 미터 격자(한국 TM)로 바꿔 계산하기 쉽게 만듭니다.

## 4. 기술 ② — "동·북·위로 몇 m" 3D 좌표 (ENU)

이제 위치를 세 개의 숫자로 나타내요. 기준점에서:

- East (동쪽으로 몇 m)
- North (북쪽으로 몇 m)
- Up (위로 몇 m = 높이)

이 세 글자를 따서 ENU라고 불러요. 이렇게 하면 지구 위 모든 위치를 3D 공간의 한 점으로 다룰 수 있어요.

> 🧊 비유: 교실에서 물건 위치를 "칠판에서 오른쪽 2m, 앞으로 3m, 바닥에서 1m 높이"라고 말하는 것과 같아요.

그림 3. 모든 위치를 "동·북·위로 몇 m"인 3D 점으로 나타냅니다(ENU).

## 5. 기술 ③ — 두 가지 '높이 기준' 맞추기 (지오이드 보정)

높이를 재는 기준이 두 가지라서 헷갈려요.

- GPS 높이: 지구를 매끈한 타원이라 보고 잰 높이 (드론이 기록하는 높이)
- 지도 해발고도: 평균 바닷물 높이 기준 (지도에 적힌 높이) = 지오이드

이 둘은 지역마다 수십 m 차이 나요. (대전은 약 25.8m!) 안 맞추면 글자가 위아래로 엉뚱하게 떠요. 그래서 지도 높이에 25.8m를 더해 드론의 높이 기준과 똑같이 맞춰 줘요.

> 🌊 비유: "1층 바닥 기준 높이"와 "지하주차장 바닥 기준 높이"는 같은 창문인데 숫자가 다르죠. 비교하려면 기준을 하나로 맞춰야 해요.

그림 4. 높이 기준이 둘이라 약 25.8m 차이. 더해서 맞춰야 글자가 제 높이에 붙습니다.

## 6. 기술 ④ — 드론이 '어느 쪽을 보는지' (자세 회전)

드론은 가만히 있지 않아요. 좌우로 돌고(yaw), 아래로 숙이고(pitch), 옆으로 기울어요(roll). 이 세 가지를 알아야 "카메라가 정확히 어느 방향을 보는지" 계산할 수 있어요.

이걸 회전 행렬이라는 수학 도구로 한 번에 계산해요. (세 방향 회전을 합치는 마법 표라고 생각하면 돼요.)

그림 5. 드론의 세 가지 자세(yaw·pitch·roll)를 합쳐, 카메라가 보는 방향을 정확히 계산합니다.

## 7. 기술 ⑤ — 드론에서 POI까지 '상대 위치'

이제 POI의 위치 − 드론의 위치를 빼서, "드론에서 봤을 때 POI가 어느 쪽에, 얼마나 멀리" 있는지 구해요. 그리고 ④에서 구한 드론의 보는 방향을 적용하면, "카메라 눈 기준으로" POI가 어디 있는지 나와요.

> 👉 비유: 친구가 어디 서서 어느 쪽을 보는지 알면, "친구 눈에는 저 건물이 왼쪽 앞에 보이겠네" 하고 알 수 있죠.

그림 6. POI 위치에서 드론 위치를 빼고 드론의 보는 방향을 적용해, 카메라 눈 기준 위치를 구합니다.

## 8. 기술 ⑥ — 3D를 납작한 화면에 그리기 (핀홀 카메라 원근투영)

이제 핵심! 입체(3D)를 납작한 화면(2D)에 그려요. 규칙은 누구나 알아요: 가까운 건 크게, 먼 건 작게. 이게 바로 원근법이고, 카메라는 바늘구멍 사진기처럼 작동해요.

계산은 의외로 간단해요. "옆으로 간 거리 ÷ 앞으로 간 거리" 를 하면 화면의 좌우 위치가 나와요. (위아래도 똑같이!) 멀수록(앞으로 간 거리가 클수록) 나누는 값이 커져서 → 화면 가운데로 작게 모여요.

> 📷 비유: 기찻길이 멀어질수록 한 점으로 모이는 것 — 그게 바로 이 나눗셈의 결과예요.

그림 7. 바늘구멍 사진기처럼, "옆거리 ÷ 앞거리"로 화면 위치를 구하면 자동으로 원근법이 됩니다.

## 9. 기술 ⑦ — '얼마나 넓게 보나' 화각 맞추기 (초점거리·센서)

같은 자리에서도 광각 렌즈는 넓게, 줌 렌즈는 좁게 보여요. 이 "얼마나 넓게 보나"가 화각이에요. 화각은 초점거리(focal, 기본 24mm) 와 센서 크기(36mm, 16:9) 로 정해져요.

화각이 안 맞으면 글자가 위아래·좌우로 어긋나요. 그래서 8장의 나눗셈에 이 값을 곱해서 정확히 맞춰 줘요.

> 🔍 비유: 같은 창밖 풍경도 망원경(줌)으로 보면 좁고 크게, 그냥 보면 넓고 작게 보이죠.

그림 8. 초점거리·센서로 정해지는 화각(FOV)을 맞춰야 글자가 정확한 자리에 붙습니다.

## 10. 기술 ⑧ — 카메라 '뒤'에 있는 건 안 그리기 (클리핑)

POI가 드론 뒤쪽이나 너무 가까이에 있으면, 계산이 이상해져서 글자가 화면 반대편으로 휙 튀어요. 그래서 "앞으로 간 거리(Zc)가 너무 작거나 마이너스면 = 카메라 뒤/너무 가까움" → 그냥 안 그려요.

> 🙈 비유: 내 뒤통수 쪽 물건은 내 눈에 안 보이죠. 안 보이는 건 화면에도 안 그리는 게 맞아요.

그림 9. 카메라 뒤·너무 가까운 POI는 글자가 튀므로 아예 그리지 않습니다(클리핑).

## 11. 기술 ⑨ — POI 높이를 똑똑하게 '추측'하기

문제가 하나 있어요. 다리·역의 위도·경도는 정확히 아는데, 정확한 높이는 모를 때가 많아요. 비싼 3D 지형 데이터(DEM)를 사면 알 수 있지만, 안 사고도 똑똑하게 짐작해요. 두 가지 방법:

1. 가장 가까운 선로(중심선)의 높이를 빌려 써요. → 선로 굴곡(오르막/내리막)까지 자연스럽게 반영! 👍
2. 또는 "드론 높이 − 일정값(약 24m)" 으로 가정해요.

그리고 사람이 직접 고친 높이가 있으면(드래그/DEM) 그걸 가장 먼저 써요.

> 🏔️ 비유: 친구 키를 모를 때, 바로 옆에 선 비슷한 친구 키를 참고해 짐작하는 것과 같아요.

그림 10. POI 높이를 모를 때, 가장 가까운 선로 높이를 빌려 자연스럽게 맞춥니다.

## 12. 기술 ⑩ — 너무 먼 건 숨기기 (거리 필터)

화면에 모든 POI를 다 그리면 너무 복잡해요. 그래서 드론과의 수평 직선거리가 정해진 범위(기본 1000m)보다 멀면 숨겨요. 가까운 것만 보여 주는 거죠.

또 "앞에 있나 / 옆에 있나"도 따로 구분해서 더 똑똑하게 걸러낼 수 있어요.

> 🔭 비유: 지도 앱에서 너무 멀리 있는 가게 이름은 안 보이다가, 가까이 가면 나타나는 것과 같아요.

그림 11. 드론에서 너무 먼 POI는 숨기고, 범위 안의 것만 화면에 보여 깔끔하게 합니다.

## 13. 기술 ⑪ — 손으로 끌어 거꾸로 고치기 (역투영)

지도 위치가 가끔 살짝 틀려요. 그러면 화면에서 글자를 제자리로 쓱 끌면, 컴퓨터가 그 화면 위치를 거꾸로 따라가 실제 위치(또는 높이)를 다시 계산해 고쳐요. (8장을 반대로!) 고친 값은 저장돼서 다음에도, 다른 장면에서도 계속 맞아요.

이렇게 거꾸로 푸는 방법이 여러 개 있어요:

- 화면점 → 실제 위치 복원 (위·아래 동시 보정)
- 높이만 다시 풀기 (앞으로 밀려 보일 때)
- 광선을 땅과 만나게 해서 좌우 위치 고치기
- 글자를 끌면 화각(초점거리)을 스스로 다시 맞추기

> 🎯 비유: 다트가 빗나가면, 맞은 자리를 보고 "팔을 이만큼 틀어야겠다" 하고 거꾸로 교정하는 것과 같아요.

그림 12. 글자를 끌면 그 화면점을 거꾸로 따라가 실제 위치·높이·화각을 자동 보정하고 저장합니다.

## 14. 기술 ⑫ — 영상 잘림에 글자도 맞추기 (cover 변환)

영상은 화면을 비율 유지하며 꽉 채우다 보니 가장자리가 살짝 잘려요(CSS `object-fit: cover`). 그래서 글자도 똑같이 잘린 영상에 맞춰 위치를 옮겨야 정확히 붙어요. 8장에서 구한 "0~1 사이의 화면 비율 위치"를, 실제 화면 픽셀로 바꿀 때 이 잘림을 똑같이 반영해 줘요.

> 🖼️ 비유: 액자(화면)에 사진(영상)을 꽉 채우면 사진 가장자리가 조금 잘리죠. 사진 위에 붙일 스티커(글자)도 그 잘린 만큼 같이 옮겨 줘야 제자리예요.

그림 13. 영상이 꽉 차며 잘리는 만큼 글자 위치도 똑같이 보정해 정확히 정합시킵니다.

## 15. 전체를 한 줄로 다시 정리

그림 14. 위경도 → 미터/ENU → 높이맞춤 → 드론자세·상대위치 → 원근투영·화각 → 거리/겹침 필터 → 화면 글자!

## 16. 왜 이게 대단할까? (특허감 포인트)

- 측량 선로 높이로, 비싼 3D 지형 없이도 정합 (11장) + 두 높이 기준 자동 맞춤(5장).
- 한 번 끌어서 위치·높이·화각을 동시에 거꾸로 보정 (13장) — 보통은 깊이 측정 장비가 필요한 일을 장비 없이.
- 드론 자세·화각·지오이드·원근법을 모두 합친 정확한 투영 (6~9장) — 영상 위에 글자를 픽셀 단위로 정합.

> ⚠️ 단, 특허는 비슷한 게 이미 있는지(선행기술) 전문가가 꼭 찾아봐야 확정돼요.

## 17. 쉬운 용어 사전

어려운 말 | 쉬운 뜻
--- | ---
POI | 다리·터널·역처럼 지도에 표시된 '관심 지점'(Point Of Interest)
좌표계 변환 / proj4 | 위도·경도(각도)를 미터 격자로 바꾸는 것 (한국 TM = EPSG:5186)
ENU | 기준점에서 동(E)·북(N)·위(U)로 몇 m인지 나타내는 3D 좌표
지오이드 | '해발고도'의 기준(평균 바닷물 높이). GPS 높이와 달라 보정 필요
yaw / pitch / roll | 좌우로 돈 / 위아래 숙인 / 옆으로 기운 정도 (드론 자세)
회전 행렬 | 세 가지 회전을 한 번에 계산하는 수학 도구
투영(projection) | 입체(3D)를 납작한 화면(2D)에 그리는 것 (원근법)
핀홀 카메라 | 바늘구멍 사진기 — 가까운 건 크게, 먼 건 작게
화각(FOV) / 초점거리 | 카메라가 얼마나 넓게 보는지 (광각=넓게, 줌=좁게)
클리핑 | 카메라 뒤/너무 가까운 것을 안 그리고 잘라내는 것
DEM | 땅의 높낮이를 담은 3D 지형 데이터 (보통 비쌈)
역투영 | 투영의 반대 — 화면의 한 점이 실제 어디인지 거꾸로 찾는 것
object-fit: cover | 영상을 비율 유지하며 화면을 꽉 채우는 방식(가장자리 잘림)

## 18. 마치며

> 지도에 적힌 "○○다리는 여기" 라는 위치 하나가 화면에 붙기까지, 위경도→미터 변환 → 높이 맞추기 → 드론 자세·상대위치 → 원근법 투영 → 거리·겹침 정리 라는 여러 기술이 차례로 일을 해요.

복잡해 보여도, 사실은 "학교에서 동쪽 몇 m, 친구가 보는 방향, 기찻길이 멀어지면 작아지는 원근법" 같은 일상의 생각들을 컴퓨터로 정밀하게 이어 붙인 것뿐이랍니다. 🙂