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,352 @@
|
||||
# 드론 영상에 글자를 '딱' 붙이는 비밀 (그림으로 보는 이야기)
|
||||
|
||||
> 이 글은 **초등학생도 이해할 수 있게** 쓴 설명서예요.
|
||||
> 어려운 수학 대신 **그림과 이야기**로, 드론 영상 위에 글자를 어떻게 흔들림 없이 딱 붙이는지 알려줄게요.
|
||||
> (더 어려운 진짜 기술 설명은 같은 폴더의 기술문서를 보세요.)
|
||||
|
||||
<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>
|
||||
|
||||
---
|
||||
|
||||
## 0. 한 문장으로 말하면
|
||||
|
||||
**날아다니는 드론이 찍은 영상** 위에 "여기는 ○○다리, 저기는 △△터널" 같은 글자를
|
||||
**떨지 않고, 부드럽게, 딱 맞는 자리에** 붙여 주는 기술 이야기예요.
|
||||
|
||||
> 🎮 **비유**: 게임에서 캐릭터 머리 위에 이름표가 떠다니죠? 그 이름표가 흔들리지 않고
|
||||
> 캐릭터를 졸졸 따라다니게 만드는 비법이라고 생각하면 돼요.
|
||||
|
||||
---
|
||||
|
||||
## 1. 무슨 문제가 있었을까?
|
||||
|
||||
드론은 하늘에서 바람을 맞으며 날아요. 그래서 영상이 **조금씩 부르르 떨려요.**
|
||||
그냥 글자를 붙이면, 글자도 같이 **부르르 떨려서** 보기 싫어요.
|
||||
|
||||
게다가 영상은 1초에 **사진 30장**으로 만들어지는데, 글자가 30번만 움직이면
|
||||
**뚝뚝 끊겨** 보여요. 우리는 **물 흐르듯 부드럽게** 움직이길 바라죠.
|
||||
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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 x="430" y="110" width="22" height="22"/><rect x="480" y="118" width="22" height="22"/><rect x="530" y="105" width="22" height="22"/><rect x="580" y="115" width="22" height="22"/>
|
||||
</g>
|
||||
<text x="490" y="170" text-anchor="middle" font-size="11" fill="#b45309">한 칸씩 점프 (부드럽지 않음)</text>
|
||||
</svg>
|
||||
<figcaption>그림 1. 떨림(왼쪽)과 끊김(오른쪽) — 이 두 가지를 동시에 해결해야 해요.</figcaption>
|
||||
</figure>
|
||||
|
||||
이 두 가지를 **한꺼번에** 해결하는 게 이 기술의 핵심이에요. 하나씩 볼까요?
|
||||
|
||||
---
|
||||
|
||||
## 2. 비법 ① 똑똑한 평균 내기 — "곧을 땐 많이, 돌 땐 적게"
|
||||
|
||||
### 떨림을 없애는 가장 쉬운 방법은 '평균'
|
||||
|
||||
떨리는 값들을 **여러 개 모아 평균**을 내면 부드러워져요.
|
||||
예를 들어 드론이 보는 방향이 `10°, 12°, 9°, 11°` 처럼 떨릴 때, 평균을 내면 `≈10.5°`로 매끈해지죠.
|
||||
|
||||
> ✏️ **비유**: 손을 떨면서 그은 선도, 옆 점들과 평균을 내면 자를 댄 듯 매끈해져요.
|
||||
|
||||
### 그런데 함정이 있어요!
|
||||
|
||||
드론이 **방향을 휙 트는 순간**까지 평균에 섞으면, 글자가 **늦게 따라와요.**
|
||||
회전했는데 글자는 아직 직진 방향을 보고 있는 거죠. (답답!)
|
||||
|
||||
### 그래서 '똑똑한 평균'을 써요
|
||||
|
||||
- **곧게 갈 때** → 옆 사진을 **많이** (앞뒤 약 60장, 2초어치) 모아 평균 → 떨림 꽉 잡기 💪
|
||||
- **방향 틀 때** → "어, 방향이 확 달라졌네?" 하고 거기서 **딱 멈춰서** 그 부분은 평균에 안 섞어요 → 즉시 따라가기 ⚡
|
||||
|
||||
방향 차이가 **8도**보다 크게 벌어지면 "여기는 다른(도는) 구간이다!" 하고 평균 범위를 멈춰요.
|
||||
|
||||
<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"/>
|
||||
<g fill="#86efac" stroke="#16a34a">
|
||||
<circle cx="120" cy="75" r="7"/><circle cx="170" cy="75" r="7"/><circle cx="220" cy="75" r="7"/><circle cx="320" cy="75" r="10"/><circle cx="420" cy="75" r="7"/><circle cx="470" cy="75" r="7"/><circle cx="520" cy="75" r="7"/>
|
||||
</g>
|
||||
<rect x="110" y="58" width="420" height="34" rx="17" fill="#16a34a" opacity="0.12"/>
|
||||
<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"/>
|
||||
<g fill="#fde68a" stroke="#d97706">
|
||||
<circle cx="180" cy="200" r="7"/><circle cx="260" cy="200" r="7"/><circle cx="320" cy="200" r="10"/><circle cx="400" cy="183" r="7"/><circle cx="470" cy="150" r="7"/>
|
||||
</g>
|
||||
<rect x="245" y="184" width="95" height="34" rx="17" fill="#16a34a" opacity="0.12"/>
|
||||
<line x1="360" y1="160" x2="360" y2="215" stroke="#dc2626" stroke-width="2" stroke-dasharray="4 3"/>
|
||||
<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>
|
||||
|
||||
이렇게 하면 **직선에서는 떨림이 사라지고, 회전에서는 늦지 않게** 따라가요. 일석이조죠! 🐦🐦
|
||||
|
||||
---
|
||||
|
||||
## 3. 비법 ② 사진 사이를 채우기 — "30장을 60장처럼"
|
||||
|
||||
영상은 1초에 사진 30장이에요. 글자를 그 30장에만 맞춰 움직이면 **뚝뚝** 끊겨 보여요.
|
||||
|
||||
그래서 **사진과 사진 사이**의 값을 **계산으로 만들어** 채워요.
|
||||
예를 들어 10번 사진은 "방향 20°", 11번 사진은 "방향 24°"라면,
|
||||
그 **딱 중간**은 "방향 22°"라고 만들어 내는 거예요.
|
||||
|
||||
> 🎨 **비유**: 만화 영화에서 두 그림 사이에 그림을 더 그려 넣으면 더 부드럽게 움직이죠.
|
||||
> 그것과 똑같아요. ("사이 그림 채우기")
|
||||
|
||||
<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"/>
|
||||
<!-- real frames -->
|
||||
<circle cx="140" cy="120" r="10" fill="#2563eb"/>
|
||||
<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"/>
|
||||
<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 cx="330" cy="120" r="6"/><circle cx="425" cy="120" r="6"/>
|
||||
</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>
|
||||
|
||||
이렇게 사이를 채우면 글자가 **물 흐르듯** 부드럽게 움직여요. 화면이 60번씩 새로 그려져도
|
||||
글자가 항상 **딱 맞는 중간 자리**에 있게 되는 거죠.
|
||||
|
||||
> 💡 작은 비밀: 방향(각도)은 **359° 다음이 0°** 라서, 그냥 계산하면 글자가 한 바퀴 빙 돌아버려요.
|
||||
> 그래서 "**가까운 쪽으로 돌기**" 규칙을 따로 넣어 뒀어요. (359°→0°은 한 칸만 돌게)
|
||||
|
||||
---
|
||||
|
||||
## 4. 비법 ③ 화면에서 한 번 더 다듬기 — "살살 vs 빨리"
|
||||
|
||||
비법 ①, ②로 이미 많이 부드러워졌지만, 화면에서 **마지막으로 한 번 더** 다듬어요.
|
||||
규칙은 아주 똑똑해요:
|
||||
|
||||
- **천천히 움직일 때(=떨림일 가능성 큼)** → 글자를 **살살** 움직여 떨림을 죽여요. 🐢
|
||||
- **빨리 움직일 때(=진짜로 휙 도는 중)** → 글자를 **빨리** 따라가게 해요. 🐇
|
||||
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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>
|
||||
|
||||
### 깜짝 점프는 무시해요 (단, 너무 오래는 말고)
|
||||
|
||||
가끔 데이터가 **확 튀어서** 글자가 엉뚱한 데로 점프하려 해요. 이런 건 **"어, 이상한데?" 하고 무시**해요.
|
||||
하지만 영상을 **확 건너뛰기(시크)** 했을 땐 진짜로 멀리 가야 하니까,
|
||||
**계속 8번 넘게** 같은 점프가 들어오면 "이건 진짜구나" 하고 받아들여요.
|
||||
|
||||
> 🚦 **비유**: 친구가 갑자기 펄쩍 뛰면 "장난이지?" 하고 무시하지만,
|
||||
> 계속 그쪽으로 가면 "아, 진짜 가는구나" 하고 따라가는 것과 같아요.
|
||||
|
||||
---
|
||||
|
||||
## 5. 비법 ④ 미리 정해두기 vs 그때그때 그리기 (제일 중요!)
|
||||
|
||||
화면은 1초에 **60번**이나 새로 그려져요. 매번 모든 걸 다시 계산하면 컴퓨터가 **헉헉**대요.
|
||||
그래서 일을 **두 종류로 나눴어요.**
|
||||
|
||||
| 종류 | 무슨 일? | 언제 하나? |
|
||||
|------|---------|-----------|
|
||||
| **무거운 일** | "어떤 글자를 **보여줄지**" 정하기 (가려진 것 빼기, 겹친 것 정리) | 미리 한 번만 |
|
||||
| **가벼운 일** | "그 글자를 화면 **어디에 그릴지**" 계산 | 매 순간(60번) |
|
||||
|
||||
> 🍱 **비유**: 도시락을 미리 싸 두면(무거운 일), 점심시간엔 뚜껑만 열면 돼요(가벼운 일).
|
||||
> 매번 처음부터 요리하면 점심시간이 다 가버리죠!
|
||||
|
||||
<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"/>
|
||||
<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"/></marker></defs>
|
||||
<line x1="285" y1="110" x2="375" y2="110" stroke="#6b7280" stroke-width="2" marker-end="url(#g5a)"/>
|
||||
<!-- light raf -->
|
||||
<rect x="380" y="50" width="250" height="120" rx="10" fill="#eff6ff" stroke="#2563eb" stroke-width="1.5"/>
|
||||
<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>
|
||||
|
||||
### 더 똑똑한 점들
|
||||
|
||||
- **지금 보는 곳부터 미리 계산** → 영상을 틀면 바로 글자가 떠요. (멀리 있는 건 천천히 준비)
|
||||
- **컴퓨터가 한가할 때 조금씩** 준비해서, 영상이 안 끊겨요.
|
||||
- 글자 위치는 **진짜 땅 위 좌표**로 저장해 둬요. 그래야 드론이 움직여도 그 자리에 정확히 다시 그릴 수 있죠.
|
||||
|
||||
---
|
||||
|
||||
## 6. 비법 ⑤ 글자가 겹치면 누가 이길까?
|
||||
|
||||
화면에 글자가 많으면 서로 **겹쳐서** 못 읽어요. 그래서 겹치면 **누구를 남길지** 규칙으로 정해요.
|
||||
|
||||
1. **기차역**이 가장 힘이 세요 → 역은 무조건 남겨요. 🚉
|
||||
2. 같은 급이면 **드론에 더 가까운 것**이 이겨요. (가까운 게 더 중요하니까)
|
||||
|
||||
<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 x="120" y="75" width="100" height="30" rx="6" fill="#bfdbfe" stroke="#2563eb" opacity="0.9"/>
|
||||
<rect x="100" y="90" width="100" height="30" rx="6" fill="#fecaca" stroke="#dc2626" opacity="0.9"/>
|
||||
<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"/></marker></defs>
|
||||
<line x1="300" y1="90" x2="380" y2="90" stroke="#16a34a" stroke-width="2.5" marker-end="url(#g6a)"/>
|
||||
<!-- 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"/>
|
||||
<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>
|
||||
|
||||
### 위·아래 선로 형제 구분 (똑똑!)
|
||||
|
||||
같은 다리가 **위로 가는 선로용(상)** 과 **아래로 가는 선로용(하)** 두 개로 있을 때가 있어요.
|
||||
드론이 지금 **위로 가는 선로**를 따라가면 `○○다리(상)` 을, 아래면 `○○다리(하)` 를 보여줘요.
|
||||
**드론이 진짜 지나는 쪽**의 이름표를 골라주는 거죠.
|
||||
|
||||
> 🚂 **비유**: 상행선·하행선 플랫폼이 따로 있을 때, 내가 탄 기차 쪽 안내판을 보여주는 것과 같아요.
|
||||
|
||||
---
|
||||
|
||||
## 7. 보너스 — 빙글빙글 나침반
|
||||
|
||||
화면 구석엔 **나침반**이 있어요. 드론이 도는 대로 같이 돌아서 "지금 어느 쪽을 보는지" 알려줘요.
|
||||
|
||||
큰 글자들은 **떨림 제거를 많이** 해서 살짝 느긋한데, 나침반은 **방향을 바로바로** 보여줘야 하니까
|
||||
**떨림 제거를 살짝만** 해서 회전에 **재빠르게** 반응하게 만들었어요.
|
||||
|
||||
그리고 나침반이 359°에서 0°로 갈 때 **휙 한 바퀴 안 돌고** 가까운 쪽으로만 살짝 돌게 해 뒀어요.
|
||||
|
||||
<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"/>
|
||||
<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 points="120,115 112,90 128,90" fill="#cbd5e1"/>
|
||||
<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>
|
||||
|
||||
---
|
||||
|
||||
## 8. 전체를 한 그림으로 정리
|
||||
|
||||
<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"/></marker></defs>
|
||||
<!-- step 1 -->
|
||||
<rect x="30" y="30" width="600" height="44" rx="8" fill="#ecfdf5" stroke="#16a34a"/>
|
||||
<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)"/>
|
||||
<!-- step 2 -->
|
||||
<rect x="30" y="95" width="600" height="44" rx="8" fill="#eff6ff" stroke="#2563eb"/>
|
||||
<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)"/>
|
||||
<!-- step 3 -->
|
||||
<rect x="30" y="160" width="600" height="44" rx="8" fill="#fefce8" stroke="#ca8a04"/>
|
||||
<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)"/>
|
||||
<!-- step 4 -->
|
||||
<rect x="30" y="225" width="600" height="44" rx="8" fill="#fff7ed" stroke="#ea580c"/>
|
||||
<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>
|
||||
|
||||
---
|
||||
|
||||
## 9. 왜 이게 대단할까? (특허감인 이유)
|
||||
|
||||
1. **곧을 땐 많이, 돌 땐 멈추는 똑똑한 평균** — 보통은 "부드러움"과 "빠른 반응" 중 하나만 얻는데,
|
||||
이건 **둘 다** 얻어요. (회전 끝나고 한 번 튀는 문제도 없앴어요.)
|
||||
2. **미리 정하기 + 매 순간 위치만 그리기** — 무거운 일과 가벼운 일을 나눠서,
|
||||
느린 컴퓨터에서도 **부드러운 60프레임**을 만들어요.
|
||||
3. **30장을 60장처럼 사이 채우기 + 가까운 쪽으로만 돌기** — 끊김 없이, 방향도 안 헷갈리게.
|
||||
4. **느리면 살살·빠르면 빨리 + 튀는 값 무시** — 떨림과 진짜 움직임을 구별해요.
|
||||
5. **위·아래 선로 형제 이름표 골라주기** — 드론이 진짜 지나는 쪽 이름을 보여줘요.
|
||||
|
||||
> ⚠️ 단, 특허는 **비슷한 게 이미 있는지** 전문가가 꼭 찾아봐야 확정돼요.
|
||||
|
||||
---
|
||||
|
||||
## 10. 쉬운 용어 사전
|
||||
|
||||
| 어려운 말 | 쉬운 뜻 |
|
||||
|----------|---------|
|
||||
| **평활(스무딩)** | 떨리는 값을 주변과 평균 내어 부드럽게 만드는 것 |
|
||||
| **보간** | 사진과 사진 **사이 값을 계산으로 채우는** 것 (사이 그림 그리기) |
|
||||
| **yaw(요)** | 드론이 **좌우로 돈 방향** (어느 쪽을 보나) |
|
||||
| **프레임** | 영상을 이루는 **사진 한 장** (1초에 보통 30장) |
|
||||
| **RAF (매 순간 그리기)** | 화면을 1초에 약 60번 다시 그리는 것 |
|
||||
| **사전계산(미리 정하기)** | 무거운 결정을 **미리 한 번** 해서 저장해 두는 것 |
|
||||
| **이상치 무시** | 갑자기 확 튀는 **이상한 값을 버리는** 것 |
|
||||
| **나침반(heading-up)** | 드론이 보는 방향에 맞춰 도는 방향 표시 |
|
||||
|
||||
---
|
||||
|
||||
## 11. 마치며
|
||||
|
||||
> 드론은 바람에 흔들리고, 영상은 사진 30장으로 뚝뚝 끊겨요.
|
||||
> 그런데도 글자가 **떨지 않고, 부드럽게, 딱 맞는 자리**에 붙는 건
|
||||
> **① 똑똑한 평균 ② 사이 채우기 ③ 화면 다듬기 ④ 미리 정하고 그리기** —
|
||||
> 이 네 가지 비법이 함께 일하기 때문이에요.
|
||||
|
||||
어려워 보여도, 사실은 **"떨리는 선 매끈하게 다듬기, 만화 사이 그림 그리기, 도시락 미리 싸기"** 같은
|
||||
**일상의 아이디어**를 컴퓨터로 정밀하게 만든 것뿐이랍니다. 🙂
|
||||
Reference in New Issue
Block a user