์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

Firebase ์‹œ๋ฆฌ์ฆˆ #2: AI ํ•œ์ž ์ถ”์ฒœ & ํ•„๊ธฐ ํ•™์Šต ํ”Œ๋žซํผ

๐Ÿ”ฅ ํ•œ์ž ํ•™์Šต์„ ์œ„ํ•œ ๋งž์ถคํ˜• ํ”Œ๋žซํผ ๊ตฌ์ถ•! Google Gemini AI์™€ Firestore๋ฅผ ํ™œ์šฉํ•ด ๋‚˜๋งŒ์˜ ํ•œ์ž ๋‹จ์–ด์žฅ, ํš์ˆœ ์• ๋‹ˆ๋ฉ”์ด์…˜, ํ•„๊ธฐ ์ธ์‹๊นŒ์ง€ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ณด์„ธ์š”!

11๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ’€์Šคํƒ, AI ยท ChatGPT ํ™œ์šฉ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Firestore๋ฅผ ํ™œ์šฉํ•œ ํ•œ์ž ๋‹จ์–ด์žฅ ๊ตฌ์ถ•

  • Gemini API๋ฅผ ํ™œ์šฉํ•œ AI ํ•œ์ž ์ถ”์ฒœ

  • Firebase Authentication์œผ๋กœ ์‚ฌ์šฉ์ž ๊ด€๋ฆฌ

  • Nginx & SSL๋กœ Firebase ๊ธฐ๋ฐ˜ ํ•œ์ž ํ•™์Šต ํ”Œ๋žซํผ ๋ฐฐํฌ

  • ํด๋”๋ณ„ ์—ญํ• ์„ ๋‚˜๋ˆ„์–ด ํšจ์œจ์ ์ธ ์ฝ”๋“œ ๊ด€๋ฆฌ์™€ ์œ ์ง€๋ณด์ˆ˜ ํ•™์Šต

Firebase ์‹œ๋ฆฌ์ฆˆ #1: ์†Œ์…œ ๋กœ๊ทธ์ธยทํœด๋Œ€ํฐยท์œ„์น˜ ์ธ์ฆ ์™„๋ฒฝ ๊ฐ€์ด๋“œ
Firebase ์ธ์ฆ ๊ธฐ๋Šฅ(ํœด๋Œ€ํฐ, GPS ์œ„์น˜, Google Authentication)์„ ์™„๋ฒฝํ•˜๊ฒŒ ์ตํžˆ๊ณ  ์‹ถ์€ ๋ถ„๋“ค์„ ์œ„ํ•œ ์‹ค์ „ ๊ฐ•์˜! ๋งŽ์€ ๊ด€์‹ฌ๊ณผ ์ˆ˜๊ฐ• ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค ๐Ÿ˜Š๊ฐ•์˜ ๋ฐ”๋กœ๊ฐ€๊ธฐ

"Firebase ์‹œ๋ฆฌ์ฆˆ #2: AI ํ•œ์ž ์ถ”์ฒœ & ํ•„๊ธฐ ํ•™์Šต ํ”Œ๋žซํผ"

Firebase์™€ Firestore๋ฅผ ํ™œ์šฉํ•ด ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ์™€ ์ธ์ฆ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ณ ,
HTML/CSS, TailwindCSS, ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(JavaScript)๋กœ ํ•œ์ž ํ•„๊ธฐ ํ•™์Šต ํ”Œ๋žซํผ์„ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.

  • Firebase Authentication์œผ๋กœ ์‚ฌ์šฉ์ž ๋กœ๊ทธ์ธ/ํšŒ์›๊ฐ€์ž…, ์†Œ์…œ ๋กœ๊ทธ์ธ ๊ตฌํ˜„

  • Firestore๋กœ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

  • Google Gemini(gemini) AI ์ถ”์ฒœ ๋กœ์ง ์ ์šฉ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ํ๋ฆ„ ์„ค๊ณ„

  • Tailwind CSS๋ฅผ ํ™œ์šฉํ•œ ๋ฐ˜์‘ํ˜• UI ๊ตฌ์„ฑ

  • Hanzi-Writer ํŒจํ‚ค์ง€ ๊ธฐ๋ฐ˜์˜ ํ•„๊ธฐ ์˜์—ญ ๋ฐ ๋กœ์ง ๊ตฌํ˜„ (stroke ๋น„๊ต ๋“ฑ)

  • Firebase Hosting ๋ถ€ํ„ฐ์‹ค์ œ ๋„๋ฉ”์ธ ๋ฐฐํฌ๊นŒ์ง€

๊ณต์‹ ๋„๋ฉ”์ธ ์†Œ๊ฐœ

๐Ÿ”— ๊ฐ•์˜์—์„œ ๋งŒ๋“ค ๊ฒฐ๊ณผ๋ฌผ์€ ์ด๋ฏธ learn-hanja.site์— ๋ฐฐํฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
์‹ค์ œ ์šด์˜ ์ค‘์ธ ์‚ฌ์ดํŠธ๋ฅผ ๋จผ์ € ๋‘˜๋Ÿฌ๋ณด๋ฉฐ, ์–ด๋–ค ํ”Œ๋žซํผ์„ ๋งŒ๋“ค๊ฒŒ ๋ ์ง€ ์ง์ ‘ ์ฒดํ—˜ํ•ด๋ณด์„ธ์š”.
๋กœ๊ทธ์ธ, ํ•„๊ธฐ ์—ฐ์Šต, ๋‚˜๋งŒ์˜ ๋‹จ์–ด์žฅ, ํ•œ์ž AI ๊ธฐ๋Šฅ๊นŒ์ง€ ๋ชจ๋‘ ์ฒดํ—˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

Firebase ์‹œ๋ฆฌ์ฆˆ #2: AI ํ•œ์ž ์ถ”์ฒœ & ํ•„๊ธฐ ํ•™์Šต ํ”Œ๋žซํผ ์œ ํŠœ๋ธŒ ์˜์ƒ

์ด ๊ฐ•์˜์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ

Firestore๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๋‚˜๋งŒ์˜ ๋‹จ์–ด์žฅ

์ด ์„น์…˜์—์„œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ž…๋ ฅํ•œ ํ•œ์ž๋ฅผ "๋‚˜๋งŒ์˜ ๋‹จ์–ด์žฅ"์— ์ €์žฅํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
Firebase Firestore๋ฅผ ํ™œ์šฉํ•ด, ์‚ฌ์šฉ์ž์˜ ๊ฐœ๋ณ„ ๋ฐ์ดํ„ฐ๊ฐ€ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ €์žฅ๋˜๊ณ  ๋ฐ˜์˜๋˜๋Š” ๊ตฌ์กฐ๋ฅผ ํ•™์Šตํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๋‚˜๋งŒ์˜ ๋‹จ์–ด์žฅ ์‚ฌ์šฉ ์˜ˆ์‹œ

Google Gemini ๊ธฐ๋ฐ˜ ๋งž์ถคํ˜• ํ•œ์ž ์ถ”์ฒœ ์‹œ์Šคํ…œ

์ด ์„น์…˜์—์„œ๋Š” Google Gemini AI API๋ฅผ ํ™œ์šฉํ•ด ์‚ฌ์šฉ์ž์˜ ๊ด€์‹ฌ ์ฃผ์ œ๋‚˜ ํ•™์Šต ์ˆ˜์ค€์— ๋งž์ถ˜ ํ•œ์ž ์ž๋™ ์ถ”์ฒœ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
๋‹จ์ˆœํ•œ ๋žœ๋ค์ด ์•„๋‹Œ, ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ํ‚ค์›Œ๋“œ(๊ฐ์ •, ์ƒํ™ฉ ๋“ฑ)๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์˜๋ฏธ ์žˆ๋Š” ํ•œ์ž๋ฅผ AI๊ฐ€ ์ง์ ‘ ์„ ํƒํ•ด ์ถ”์ฒœํ•˜์—ฌ, ๋ชฐ์ž…๊ฐ ์žˆ๊ณ  ๊ฐœ์ธํ™”๋œ ํ•™์Šต ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

Ai๋ฅผ ํ™œ์šฉํ•œ ํ•œ์ž ๋‹จ์–ด์žฅ ์ƒ์„ฑ

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ ์•ˆ๋‚ด

๐Ÿ’ป ์šด์˜ ์ฒด์ œ (OS)

  • Windows 10 ์ด์ƒ

  • macOS ๋ฒ„์ „ ๋ฌด๊ด€

  • Ubuntu 20.04 ์ด์ƒ (Linux ํ™˜๊ฒฝ๋„ ๊ฐ€๋Šฅ)

๐Ÿ›  ์‚ฌ์šฉ ๋„๊ตฌ

  • Firebase (๋ฌด๋ฃŒ ํ”Œ๋žœ / Blaze ํ”Œ๋žœ ์„ ํƒ ๊ฐ€๋Šฅ)

  • Google Gemini API (๋ฌด๋ฃŒ ์ฒดํ—˜ ์ œ๊ณต, ์ดํ›„ ๊ณผ๊ธˆ ์ฃผ์˜)

  • HTML, Tailwind CSS, JavaScript (Vanilla)

  • VS Code (๋˜๋Š” ๊ธฐํƒ€ ์ฝ”๋“œ ์—๋””ํ„ฐ)

โš™ ๊ถŒ์žฅ PC ์‚ฌ์–‘

  • CPU: Intel i5 / M1 ์ด์ƒ

  • ๋ฉ”๋ชจ๋ฆฌ: 8GB ์ด์ƒ

  • ์ €์žฅ ๊ณต๊ฐ„: 2GB ์ด์ƒ ์—ฌ์œ 

  • ๊ทธ๋ž˜ํ”ฝ: ์ผ๋ฐ˜ ๋‚ด์žฅ ๊ทธ๋ž˜ํ”ฝ์œผ๋กœ ์ถฉ๋ถ„

  • ๋ธŒ๋ผ์šฐ์ €: ์ตœ์‹  Chrome ๋˜๋Š” Edge ๊ถŒ์žฅ

ํ•™์Šต ์ž๋ฃŒ ์•ˆ๋‚ด

  • ๋ณธ ๊ฐ•์˜์˜ ์‹ค์Šต ์ž๋ฃŒ๋Š” GitHub ์ €์žฅ์†Œ์™€ Notion ํŽ˜์ด์ง€๋ฅผ ํ†ตํ•ด ํ•จ๊ป˜ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

๐Ÿ”— ์ž๋ฃŒ ๋งํฌ


๐Ÿ“ ์ œ๊ณต ํ˜•์‹

  • ์†Œ์Šค ์ฝ”๋“œ (HTML, CSS, JavaScript)


  • ์˜ˆ์ œ ์ด๋ฏธ์ง€ ๋ฐ ์—์…‹ ํŒŒ์ผ

  • ์‹ค์Šต ํ๋ฆ„ ๋ฉ”๋ชจ / ๊ฐœ๋… ์ •๋ฆฌ (Notion)

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

โœ… ์„ ์ˆ˜ ์ง€์‹ ์•ˆ๋‚ด

์ด ๊ฐ•์˜๋Š” ์‹ค์Šต ์œ„์ฃผ์˜ ํ”„๋กœ์ ํŠธ ๊ฐ•์˜๋กœ, ์•„๋ž˜ ๊ธฐ๋ณธ ์ง€์‹์„ ๋ฏธ๋ฆฌ ํ•™์Šตํ•˜์‹œ๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • firebase๋ฅผ ํ™œ์šฉํ•œ ํ•œ์ž ํ•™์Šต ํ”Œ๋žซํผ์„ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

  • "Firebase ๋งˆ์Šคํ„ฐ ๊ณผ์ • #1: ์‚ฌ์šฉ์ž ์ธ์ฆ ์™„๋ฒฝ ๊ฐ€์ด๋“œ" ๊ฐ•์˜๊ฐ€ ์œ ์ตํ–ˆ๋˜ ๋ถ„

  • AI & Firebase๋ฅผ ํ™œ์šฉํ•œ ์‹ค์ „ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์ด ํ•„์š”ํ•œ ๋ถ„

  • ๋‚จ๋“ค๊ณผ ๋‹ค๋ฅธ ์ฐจ๋ณ„ํ™”๋œ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ต์œก ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML, CSS, JavaScript ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

  • Firebase ๋งˆ์Šคํ„ฐ ๊ณผ์ • #1

์•ˆ๋…•ํ•˜์„ธ์š”
๋‹ญ๊ฐ•์ •์ž…๋‹ˆ๋‹ค.

182

๋ช…

์ˆ˜๊ฐ•์ƒ

6

๊ฐœ

์ˆ˜๊ฐ•ํ‰

24

๊ฐœ

๋‹ต๋ณ€

5.0

์ 

๊ฐ•์˜ ํ‰์ 

3

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š”! ์„œ๊ฐ•๋Œ€ํ•™๊ต ์ปด๊ณต๊ณผ๋ฅผ ์กธ์—…ํ•˜๊ณ  ํ˜„์žฌ ๋Œ€ํ•™์› ์ง„ํ•™์„ ์ค€๋น„ ์ค‘์ธ ํ•™์ƒ์ž…๋‹ˆ๋‹ค.

๊ณ ๋“ฑํ•™๊ต ๋•Œ ์šฐ์—ฐํžˆ ํ’€์Šคํƒ ์›น ๊ฐœ๋ฐœ๊ณผ ํŒŒ์ด์ฌ์„ ํ™œ์šฉํ•œ ์ž๋™ ๋งค๋งค๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋น ์ง€๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ํ›„ ๋‹ค์–‘ํ•œ ํ”„๋กœ์ ํŠธ์™€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณผ์™ธํ™œ๋™์„ ๊ฒฝํ—˜ํ•˜๋ฉฐ ์‹ค๋ ฅ๊ณผ ๋…ธํ•˜์šฐ๋ฅผ ๊ณต์œ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฒฝํ—˜์„ ํ†ตํ•ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ๋ถ„๋“ค์—๊ฒŒ๋„ "์ด๋ ‡๊ฒŒ ์‰ฌ์šธ ์ˆ˜ ์žˆ๊ตฌ๋‚˜!"๋ผ๋Š” ๋А๋‚Œ์„ ์ค„ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค๊ณ ์ž ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

์‹ค์šฉ์ ์ธ ์˜ˆ์ œ์™€ ์นœ๊ทผํ•œ ์„ค๋ช…์œผ๋กœ ์—ฌ๋Ÿฌ๋ถ„์˜ ํ•™์Šต์„ ๋•๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

 

GitHub ์ €์žฅ์†Œ ๋ฐ”๋กœ๊ฐ€๊ธฐ (ํด๋ฆญ!)

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

36๊ฐœ โˆ™ (6์‹œ๊ฐ„ 59๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

๋‹ญ๊ฐ•์ •๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

๋น„์Šทํ•œ ๊ฐ•์˜

๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

์—ฐ๊ด€ ๋กœ๋“œ๋งต

๊ฐ•์˜๊ฐ€ ํฌํ•จ๋œ ๋กœ๋“œ๋งต์œผ๋กœ ํ•™์Šตํ•ด ๋ณด์„ธ์š”!

โ‚ฉ29,700