# 지도 위의 POI를 영상에 '딱' 붙이는 기술들 (그림 설명서) > 이 글은 **초등학생도 이해할 수 있게** 쓴 설명서예요. > "지도에 적힌 다리·터널·역의 위치(POI)를, 드론 영상의 **정확한 화면 자리**에 어떻게 붙이는가?" > 그 비밀을 **그림과 이야기**로 하나씩 풀어 줄게요. > (진짜 수학 공식은 같은 폴더의 기술문서 [geoProjection.ts](../client/src/utils/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) 이제 위치를 **세 개의 숫자**로 나타내요. 기준점에서: - **E**ast (동쪽으로 몇 m) - **N**orth (북쪽으로 몇 m) - **U**p (위로 몇 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, 친구가 보는 방향, 기찻길이 멀어지면 작아지는 원근법"** 같은 **일상의 생각들**을 컴퓨터로 정밀하게 이어 붙인 것뿐이랍니다. 🙂