-
Notifications
You must be signed in to change notification settings - Fork 7
๐ชต 2. WebRTC ๊ตฌํ ๋ฐฉ์
ssum1ra edited this page Dec 5, 2024
·
1 revision
- ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์๋ก ์ง์ ์ฐ๊ฒฐ๋๋ ๊ตฌ์กฐ
- ๋ฏธ๋์ด ์๋ฒ๋ฅผ ๊ฑฐ์น์ง ์๊ณ ๋ค๋ฅธ ์ฌ์ฉ์์๊ฒ ์ง์ ์คํธ๋ฆผ์ ๋ณด๋ธ๋ค.
- ์ฒ์ WebRTC๊ฐ peer๊ฐ์ ์ ๋ณด๋ฅผ ์ค๊ณํ ๋๋ง ์๋ฒ์ ๋ถํ๊ฐ ๋ฐ์ํ๋ค.
- ์ ๋ณด ๊ตํ์ ์ํ ์๋ฒ๋ฅผ **
์๊ทธ๋๋ง ์๋ฒ
**๋ผ๊ณ ํ๋ฉฐ, ์ด๋ WebRTC์ ์ด๊ธฐ ์ฐ๊ฒฐ ์ค์ ์ ๋๋๋ค.
- ์ ๋ณด ๊ตํ์ ์ํ ์๋ฒ๋ฅผ **
- Mesh ๋ฐฉ์์์๋ ์ ํ์ ์ผ๋ก ์คํธ๋ฆผ์ ์ ๋ฌํ์ง ์๊ณ , ๋ชจ๋ ์ฐธ๊ฐ์๊ฐ ์๋ก์ ์คํธ๋ฆผ์ ๋ชจ๋ ์ง์ ์ฃผ๊ณ ๋ฐ๋๋ค.
- ์ฆ, ๊ฐ ํผ์ด๊ฐ ์ฐ๊ฒฐ๋ ๋ชจ๋ ๋ค๋ฅธ ํผ์ด์๊ฒ ์์ ์ ๋ฏธ๋์ด ์คํธ๋ฆผ(์ค๋์ค, ๋น๋์ค, ๋๋ ๋ฐ์ดํฐ)์ ๋ค ๋ณด๋ด์ผ ํ๋ค.
-
์ฅ์
- ๋ฏธ๋์ด ์๋ฒ๊ฐ ํ์ ์์ด์ ๋น์ฉ์ด ์ ๊ฒ ๋ ๋ค.
- ์ง์ฐ ์๊ฐ์ด ๋ฎ๋ค.
-
๋จ์
- ์ฐธ๊ฐ์๊ฐ ๋ง์์ง์๋ก ๊ฐ ์ฌ์ฉ์๊ฐ ๋ชจ๋ ์ฐธ๊ฐ์์ ์คํธ๋ฆผ์ ์ฃผ๊ณ ๋ฐ์์ผ ํ๋ฏ๋ก ๋คํธ์ํฌ ๋ถํ๊ฐ ์ฆ๊ฐํ๋ค.
- ํ์ฅ์ฑ์ ํ๊ณ๊ฐ ์์ด ์๊ท๋ชจ ๊ทธ๋ฃน์ ์ ํฉํ๋ค.
- Multipoint Control Unit
- ์๋ฒ๋ ๊ฐ ํด๋ผ์ด์ธํธ๋ก๋ถํฐ ๋ฐ์ ์คํธ๋ฆผ์ ๋์ฝ๋ฉํ ํ, ์ด๋ฅผ ํ๋์ ํผํฉ๋ ์คํธ๋ฆผ์ผ๋ก ํฉ์น๋ค.
- ์ดํ ์ฌ์ธ์ฝ๋ฉ์ ํตํด ๋จ์ผ ์คํธ๋ฆผ์ผ๋ก ๋ณํํ์ฌ ๊ฐ ํด๋ผ์ด์ธํธ์๊ฒ ์ ๋ฌํ๋ค.
-
์ฅ์
- ๋๊ท๋ชจ ๊ทธ๋ฃน ํตํ์ ์ ํฉํ๋ฉฐ, ๋์ญํญ ๋ฌธ์ ๊ฐ ์๋ ๊ฒฝ์ฐ ์ ์ฉํ๋ค.
- ํด๋ผ์ด์ธํธ๋ ํผํฉ๋ ๋จ์ผ ์คํธ๋ฆผ๋ง ๋ฐ์ผ๋ฉด ๋๋ฏ๋ก ์ฒ๋ฆฌ ๋ถ๋ด์ด ์ค์ด๋ ๋ค.
- ์ค์์์ ์คํธ๋ฆผ ํ์ง์ ์กฐ์ ํ ์ ์์ด ์ ์ฒด ํ์ง์ด ํฅ์๋ ์ ์๋ค.
-
๋จ์
- ์คํธ๋ฆผ์ ๋์ฝ๋ฉ, ํผํฉ, ์ธ์ฝ๋ฉํ๋ ์์ ๋๋ฌธ์ ์๋ฒ์ ์ฒ๋ฆฌ ๋น์ฉ์ด ํฌ๋ค.
- ์ฒ๋ฆฌ ์ค๋ฒํค๋๋ก ์ธํด ์ง์ฐ ์๊ฐ์ด ๋์ด๋๋ค.
- Selective Forwarding Units
- ์๋ฒ๊ฐ ๊ฐ ์ฐธ๊ฐ์์ ๋ฏธ๋์ด ์คํธ๋ฆผ์ ๋ฐ์์ ํ์ํ ์ฐธ๊ฐ์์๊ฒ๋ง ์ ํ์ ์ผ๋ก ์ ๋ฌํ๋ ๋ฐฉ์
- SFU๋ ๋น๋์ค๋ฅผ ๋์ฝ๋ฉํ ๋ค, ๋ค์ ์ธ์ฝ๋ฉํ์ง ์๊ณ ๋จ์ํ ๋ฐ์ดํฐ๋ฅผ ๋ผ์ฐํ ํ๋ค.
-
์ฅ์
- ๋ณด๋ค ๋ง์ ์ฌ์ฉ์(๋ณดํต ์์ญ ๋ช ๊น์ง)๋ฅผ ํจ์จ์ ์ผ๋ก ์ง์ํ ์ ์๋ค.
- ๊ฐ ์ฌ์ฉ์๋ ํ๋์ ์คํธ๋ฆผ๋ง ์๋ฒ๋ก ๋ณด๋ด๊ณ , ์๋ฒ๊ฐ ํ์ํ ์ฐธ๊ฐ์์๊ฒ๋ง ์ ๋ฌํ๊ธฐ ๋๋ฌธ์ ํด๋ผ์ด์ธํธ ์ธก์ ๋์ญํญ ์ฌ์ฉ์ด ์ ๊ฐ๋๋ค.
- ํน์ ์คํธ๋ฆผ(์: ๋ฐ์ธ์์ ๋น๋์ค)์ ์ฐ์ ์ ์ผ๋ก ์ ๋ฌํ ์ ์๋ค.
- ํ์ฅ์ด ๊ฐ๋ฅํ๋ฉฐ ์์๋ฅผ ์ฌ๊ตฌ์ฑํ ์ ์๋ค.
-
๋จ์
- ์ค๊ฐ์ ์ ๋ฌ ์ญํ ์ ํ๋ ์ค์ ์๋ฒ๊ฐ ํ์ํ๋ค.
- Mesh๋ณด๋ค ์๋ฒ ๋ณต์ก๋๊ฐ ๋๋ค.
์ด๋ ๊ฒ๋ง ์ฝ์ด๋ดค์ ๋๋ SFU๊ฐ ์ฐ๋ฆฌ ํ๋ก์ ํธ์ ๊ฐ์ฅ ์ ํฉํด๋ณด์ธ๋ค.
- ๊ฒ์ ํน์ฑ ์ ๋ง์ ์ฐธ๊ฐ์๋ฅผ ์์ฉํ ์ ์์ด์ผ ํ๋ค. (์ต์ 5๋ช ์ด์)
- ํด๋ผ์ด์ธํธ ์ธก์์ ๋ณํฉ(CRDT)ํ ์ ์์ด์ผ ํ๋ค.
- ์ ํ์ ์ผ๋ก ์คํธ๋ฆผ์ ๋ณด๋ผ ์ ์๋ค.
- mesh ๋ฐฉ์์ ๋นํด ๋ฎ์ ๋์ญํญ
- 1. ๊ฐ๋ฐ ํ๊ฒฝ ์ธํ ๋ฐ ํ๋ก์ ํธ ๋ฌธ์ํ
- 2. ์ค์๊ฐ ํต์
- 3. ์ธํ๋ผ ๋ฐ CI/CD
- 4. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด Canvas ๊ตฌํํ๊ธฐ
- 5. ์บ๋ฒ์ค ๋๊ธฐํ๋ฅผ ์ํ ์์ CRDT ๊ตฌํ๊ธฐ
-
6. ์ปดํฌ๋ํธ ํจํด๋ถํฐ ์น์์ผ๊น์ง, ํจ์จ์ ์ธ FE ์ค๊ณ
- ์ข์ ์ปดํฌ๋ํธ๋ ๋ฌด์์ธ๊ฐ? + Headless Pattern
- ํจ์จ์ ์ธ UI ์ปดํฌ๋ํธ ์คํ์ผ๋ง: Tailwind CSS + cn.ts
- Tailwind CSS๋ก ๋์์ธ ์์คํ ๋ฐ UI ์ปดํฌ๋ํธ ์ธํ
- ์น์์ผ ํด๋ผ์ด์ธํธ ๊ตฌํ๊ธฐ: React ํ๊ฒฝ์์ ํจ์จ์ ์ธ ์น์์ผ ์ํคํ ์ฒ
- ์น์์ผ ํด๋ผ์ด์ธํธ ์ฝ๋ ๋ถ์ ๋ฐ ๊ณต์
- 7. ํธ๋ฌ๋ธ ์ํ ๋ฐ ์ฑ๋ฅ/UX ๊ฐ์
- 1์ฃผ์ฐจ ๊ธฐ์ ๊ณต์
- 2์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 3์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 4์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 5์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- WEEK 06 ์ฃผ๊ฐ ๊ณํ
- WEEK 06 ๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ
- WEEK 06 ์ฃผ๊ฐ ํ๊ณ