Skip to Content
๐Ÿš€ ๋Œ€ํ‘œ ํ”„๋กœ์ ํŠธ๐Ÿ”” ๋ฏธ์…˜ ์•Œ๋žŒ ์„œ๋น„์Šค ๊นป๋ƒฅ

๐Ÿ”” ๋ฏธ์…˜ ์•Œ๋žŒ ์„œ๋น„์Šค ๊นป๋ƒฅ

๐Ÿ“… 2024.06 ~ 2024.07๐Ÿ‘ฅ 6๋ช…๐Ÿ›  Spring Boot ยท FCM ยท Native Alarm ยท React๐ŸŽฏ ์•Œ๋ฆผ/์Šค์ผ€์ค„๋ง ยท WebRTC ์—ฐ๋™

ํ”„๋กœ์ ํŠธ ๊ฐœ์š”: WebRTC์™€ ๋ฐฑ์—”๋“œ ์•Œ๋ฆผ ํŒŒ์ดํ”„๋ผ์ธ(FCM+๋„ค์ดํ‹ฐ๋ธŒ ์•Œ๋žŒ)์œผ๋กœ ์ •ํ•ด์ง„ ์‹œ๊ฐ„์— ๋ฏธ์…˜์„ ์‹คํ–‰ยท๊ฒ€์ฆํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ์•Œ๋žŒ ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค.

Group 16.png

https://youtube.com/shorts/potFdbd8nD8?feature=shareย 

1. ํ”„๋กœ์ ํŠธ ๊ฐœ์š”

  • ๋ชฉํ‘œ:

    ์Šค๋งˆํŠธํฐ์œผ๋กœ ๋ฏธ์…˜์„ ์ˆ˜ํ–‰ํ•˜๊ณ , ํŒ€๊ณผ ํ•จ๊ป˜ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ณต์œ ํ•˜๋ฉฐ, ํˆฌํ‘œ๋ฅผ ํ†ตํ•ด ๋ฏธ์…˜ ๊ฒฐ๊ณผ๋ฅผ ํ‰๊ฐ€ํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ๋ชฉํ‘œ ์‹œ๊ฐ„์— ๊ผญ ์ผ์–ด๋‚˜๋„๋ก ๋•๋Š” ์•ฑ ๊ฐœ๋ฐœ.

  • ๋ฐฐ๊ฒฝ:

    ๊ธฐ์ƒ ์•Œ๋žŒ์ด ํšจ๊ณผ์ ์ด์ง€ ์•Š๊ฑฐ๋‚˜ ์˜์ง€๊ฐ€ ๋ถ€์กฑํ•œ ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•ด, ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜ ๋ฏธ์…˜์„ ์ˆ˜ํ–‰ํ•˜๋ฉฐ ์ƒํ˜ธ ๊ฒฉ๋ ค์™€ ํ‰๊ฐ€๋ฅผ ํ†ตํ•ด ์•„์นจ ์ผ์–ด๋‚˜๋Š” ์Šต๊ด€์„ ํ˜•์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ธฐํš๋œ ํ”„๋กœ์ ํŠธ.

  • ์ฃผ์š” ๊ธฐ๋Šฅ:

    • ๋งค์ผ ์•„์นจ ์ง‘์—์„œ ์ˆ˜ํ–‰ ๊ฐ€๋Šฅํ•œ ๋ฏธ์…˜ ์ž๋™ ์„ ์ •.
    • ์‹ค์‹œ๊ฐ„ ๋‹จ์ฒด ์˜์ƒ ํ†ตํ™”๋ฅผ ํ†ตํ•œ ๋ฏธ์…˜ ์ง„ํ–‰ ๊ณต์œ  ๋ฐ ํ™•์ธ.
    • ํŒ€์›๋“ค์ด ๋ฏธ์…˜ ๊ฒฐ๊ณผ๋ฅผ ํˆฌํ‘œ๋กœ ํŒ์ •.
    • ๋ฏธ์…˜ ์‹œ๊ฐ„์ด ๋˜๋ฉด ์•Œ๋ฆผ ์ œ๊ณต.

2. ๋‹ด๋‹น ์—ญํ•  ๋ฐ ๊ธฐ์—ฌ

  • ์—ญํ• : ํ”„๋ก ํŠธ์—”๋“œ & ์•Œ๋ฆผ ์—ฐ๋™
  • ๊ธฐ์—ฌ:
    • ์•Œ๋ฆผ ๋ฐฑ์—”๋“œ ์—ฐ๋™: Spring Boot ์•Œ๋ฆผ API + FCM ๋ฐ์ดํ„ฐ ๋ฉ”์‹œ์ง€ ์—ฐ๋™, ์•Œ๋žŒ ์žฌ๋“ฑ๋ก/์ทจ์†Œ ํ”Œ๋กœ์šฐ ๊ตฌํ˜„
    • ๋„ค์ดํ‹ฐ๋ธŒ ์•Œ๋žŒ ์ด์ค‘ํ™”: ๋กœ์ปฌ ์•Œ๋žŒ๊ณผ FCM ์žฌ์•Œ๋ฆผ ์ด์ค‘ํ™” UX ์„ค๊ณ„
    • WebRTC ๋ฐฉ ์—ฐ๊ฒฐ: ๋ฏธ์…˜ ์‹œ๊ฐ„์— ๋งž์ถฐ ๋ฐฉ ์ž…์žฅ/์ดˆ๋Œ€ ํ๋ฆ„ ๊ตฌํ˜„, ์•Œ๋ฆผ ๋”ฅ๋งํฌ โ†’ ๋ฐฉ ์ง„์ž…
    • ๋ฏธ์…˜ ์Šค์ผ€์ค„ ๊ด€๋ฆฌ: ์‚ฌ์šฉ์ž ๋งž์ถค ์‹œ๊ฐ„/๋ฐ˜๋ณต ์„ค์ • UIยท์ƒํƒœ ๊ด€๋ฆฌ, ์ดˆ๋Œ€/์ฐธ์—ฌ ํ๋ฆ„

3. ์‚ฌ์šฉ ๊ธฐ์ˆ  ๋ฐ ์ด์œ 

  • Spring Boot + FCM: ์•Œ๋ฆผ API, ์žฌ์•Œ๋ฆผ(FCM) ๋ฐฑ์—…, ๋ฉฑ๋“ฑ/์ทจ์†Œ ์ฒ˜๋ฆฌ
  • Native Alarm (AlarmManager/WorkManager): ์ ˆ์ „ยท์ œ์กฐ์‚ฌ ์ œํ•œ ํ™˜๊ฒฝ์—์„œ๋„ ์ •์‹œ ์•Œ๋žŒ ๋ณด์žฅ
  • React: WebRTC ํŠœํ† ๋ฆฌ์–ผ(OpenVidu)๊ณผ ๋น ๋ฅธ UI ๊ตฌํ˜„
  • WebRTC: ์‹ค์‹œ๊ฐ„ ๋ฏธ์…˜ ๊ฒ€์ฆ(์˜์ƒํ†ตํ™”)

4. ๊ตฌํ˜„ ์‚ฌํ•ญ

  • ์•Œ๋ฆผ ์ด์ค‘ํ™” ํ”Œ๋กœ์šฐ: ๋„ค์ดํ‹ฐ๋ธŒ ์•Œ๋žŒ์„ 1์ฐจ, ์‹คํŒจ ์‹œ FCM ์žฌ์•Œ๋ฆผ(๋”ฅ๋งํฌโ†’๋ฐฉ ์ž…์žฅ)์œผ๋กœ ๋™์ž‘
  • ๋ฐ˜๋ณต ์Šค์ผ€์ค„ ํ™•์žฅ: ์š”์ผ๋ณ„ ๋ฐ˜๋ณต(์›”~๊ธˆ ๋“ฑ) ์ง€์›์„ ์œ„ํ•ด ์•Œ๋žŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํฌํฌยท์ปค์Šคํ…€
  • ๋ฏธ์…˜ ๋ฐฉ ์—ฐ๊ฒฐ: ์•Œ๋žŒ โ†’ ๋”ฅ๋งํฌ โ†’ WebRTC ๋ฐฉ ์ž๋™ ์—ฐ๊ฒฐ, ์ดˆ๋Œ€/์ฐธ์—ฌ ์ƒํƒœ ๊ฐฑ์‹ 
  • ์‹œ๊ฐ„ ๋ณ€๊ฒฝ ์‹œ ์žฌ๋“ฑ๋ก: ์•Œ๋žŒ ์žฌ์„ค์ • ์‹œ ๊ธฐ์กด ์Šค์ผ€์ค„ ์ทจ์†Œ ํ›„ ์žฌ๋“ฑ๋ก, ์ตœ์‹  ์„ค์ •๋งŒ ์œ ์ง€

ERD

๊นป๋ƒฅ.png


5. ํ”„๋กœ์ ํŠธ ์„ฑ๊ณผ ๋ฐ ๊ฒฐ๊ณผ

  • ์„ฑ๊ณผ:

    • OAuth2.0 ๋ฐ WebRTC ๊ธฐ์ˆ ์„ ์„ฑ๊ณต์ ์œผ๋กœ ์ ์šฉํ•˜์—ฌ ์‹ค์‹œ๊ฐ„ ๋ฏธ์…˜ ์ˆ˜ํ–‰ ํ™˜๊ฒฝ ์ œ๊ณต.
    • React์™€ Flutter ๊ธฐ๋ฐ˜์œผ๋กœ ๋น ๋ฅธ ๊ฐœ๋ฐœ๊ณผ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ์ธํ„ฐํŽ˜์ด์Šค ๊ตฌํ˜„.
    • FCM ๋ฐ ๋„ค์ดํ‹ฐ๋ธŒ ์•Œ๋žŒ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž ํŽธ์˜์„ฑ ๊ทน๋Œ€ํ™”.
  • ๊ฒฐ๊ณผ:

    ํ”„๋กœ์ ํŠธ์˜ ๋ชจ๋“  ์ฃผ์š” ๊ธฐ๋Šฅ์ด ๊ณ„ํš์— ๋”ฐ๋ผ ๋™์ž‘ํ•˜๋„๋ก ๊ตฌํ˜„.


6. ๋ฌธ์ œ ๋ฐ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

๐Ÿ”” ๋ฌธ์ œ 1: ์•Œ๋žŒ ์ค‘๋ณตยท์ง€์—ฐ ๋ฐœ์ƒ (์ •ํ™•ํ•œ ๊ธฐ์ƒ ์‹œ๊ฐ ๋ณด์žฅ)

์ƒํ™ฉ:
FCM ํ‘ธ์‹œ์™€ ๋กœ์ปฌ ์•Œ๋žŒ์„ ๋ชจ๋‘ ์จ๋„, ์ ˆ์ „ ๋ชจ๋“œ/์ œ์กฐ์‚ฌ ์ปค์Šคํ…€ OS์—์„œ ์•Œ๋žŒ์ด ๋Šฆ๊ฒŒ ์šธ๋ฆฌ๊ฑฐ๋‚˜ ์ค‘๋ณต์œผ๋กœ ์šธ๋ฆฌ๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Œ. ํ•ต์‹ฌ ๋ชฉํ‘œ(์ •ํ•ด์ง„ ์‹œ๊ฐ„์— ๊นจ์šฐ๊ธฐ)์— ์น˜๋ช…์ .

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•:

  1. ๋„ค์ดํ‹ฐ๋ธŒ ์•Œ๋žŒ ์šฐ์„ , FCM์€ ๋ณด์กฐ๋กœ ๋ถ„๋ฆฌ
    • ๊ธฐ๊ธฐ ๋‚ด AlarmManager/WorkManager๋ฅผ 1์ฐจ๋กœ ์‚ฌ์šฉํ•ด ์ •ํ™•๋„ ํ™•๋ณด
    • ์‹คํŒจ ์‹œ ์„œ๋ฒ„๊ฐ€ FCM ๋ฐ์ดํ„ฐ ๋ฉ”์‹œ์ง€๋กœ ์žฌ์•Œ๋ฆผ ๋ฐœ์†ก
  2. ์•Œ๋žŒ ์žฌ๋“ฑ๋ก ์‹œ ์ด์ „ ์Šค์ผ€์ค„ ์ •๋ฆฌ
    • ์‹œ๊ฐ„ ๋ณ€๊ฒฝ/๋ฐ˜๋ณต ์„ค์ • ์‹œ ๊ธฐ์กด PendingIntent ์ทจ์†Œ ํ›„ ์žฌ๋“ฑ๋ก

๊ฒฐ๊ณผ:
์ค‘๋ณตยท์ง€์—ฐ ์•Œ๋žŒ ์ œ๊ฑฐ, ๊ธฐ์ƒ ์•Œ๋ฆผ ์ •ํ™•๋„ ํ™•๋ณด.


โฑ๏ธ ๋ฌธ์ œ 2: 1์ฃผ์ผ ๋ฐ˜๋ณต ์•Œ๋žŒ ์ง€์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ถ€์žฌ

์ƒํ™ฉ:
๊ธฐ์กด ์•Œ๋žŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์ฃผ๊ฐ„ ๋ฐ˜๋ณต(์˜ˆ: ์›”~๊ธˆ ๊ธฐ์ƒ) ๊ธฐ๋Šฅ์ด ์—†์–ด ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๋ฐ˜๋ณต ํŒจํ„ด์„ ์„ค์ •ํ•  ์ˆ˜ ์—†์—ˆ์Œ.

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•:

  • ์˜คํ”ˆ์†Œ์Šค ์•Œ๋žŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํฌํฌ/์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆํ•ด ์š”์ผ๋ณ„ ๋ฐ˜๋ณต ์Šค์ผ€์ค„๋ง ๊ธฐ๋Šฅ ์ถ”๊ฐ€
  • ๋‚ด๋ถ€ ํฌ๋งท์œผ๋กœ ์ €์žฅํ•ด AlarmManager ์žฌ๋“ฑ๋ก ์‹œ ์š”์ผ ์ •๋ณด๋ฅผ ๋ฐ˜์˜

๊ฒฐ๊ณผ:
์›”~๊ธˆ/์ฃผ๋ง ์ „์šฉ ๋“ฑ ๋ฐ˜๋ณต ์•Œ๋žŒ ์ง€์›, ์‚ฌ์šฉ์„ฑ ๊ฐœ์„ .


๐Ÿ“ฑ ๋ฌธ์ œ 3: ์˜์ƒํ†ตํ™” ๋ฏธ์…˜ ์ง์ „ ์•Œ๋ฆผ์ด ๋А๋ฆฌ๊ฒŒ ๋„์ฐฉ

์ƒํ™ฉ:
๋ฏธ์…˜ ๋ฐฉ ์ž…์žฅ ์•Œ๋ฆผ์ด ๋Šฆ์–ด ์˜์ƒํ†ตํ™” ์‹œ์ž‘ ์‹œ์ ์ด ์–ด๊ธ‹๋‚จ.

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•:

  • ๋ฏธ์…˜ ์‹œ๊ฐ 1~2๋ถ„ ์ „์— ๋„ค์ดํ‹ฐ๋ธŒ ์•Œ๋žŒ์„ ๋จผ์ € ์šธ๋ฆฌ๊ฒŒ ํ•˜๊ณ , FCM์€ ๋ฐฉ ์ž…์žฅ ํ† ํฐ ์ „๋‹ฌ์šฉ์œผ๋กœ๋งŒ ์‚ฌ์šฉ
  • ๋„ค์ดํ‹ฐ๋ธŒ ์•Œ๋žŒ ํ„ฐ์น˜ ์‹œ ๋ฐ”๋กœ WebRTC ๋ฐฉ์œผ๋กœ ์ง„์ž…ํ•˜๋„๋ก ๋”ฅ๋งํฌ ์—ฐ๊ฒฐ

๊ฒฐ๊ณผ:
์˜์ƒํ†ตํ™” ์‹œ์ž‘ ์‹œ๊ฐ„ ์ค€์ˆ˜, ๋ฏธ์…˜ ์ง„ํ–‰ ๋™๊ธฐํ™” ๊ฐœ์„ .

Last updated on