๐Ÿš€ ํ’€์Šคํƒ AI ์ด๋ฏธ์ง€ ์ƒ์„ฑ ์•ฑ | OpenAI DALL-E & Cloudinary

๋ฐœํ–‰: (2026๋…„ 1์›” 6์ผ ์˜ค์ „ 11:30 GMT+9)
3 min read
์›๋ฌธ: Dev.to

Source: Dev.to

๐Ÿš€ ํ’€์Šคํƒ AI ์ด๋ฏธ์ง€ ์ƒ์„ฑ ์•ฑ | OpenAI DALLโ€‘E & Cloudinary ์ปค๋ฒ„ ์ด๋ฏธ์ง€

AI ์ด๋ฏธ์ง€ ์ƒ์„ฑ์€ ์ฐฝ์ž‘ ์˜ˆ์ˆ ๋ถ€ํ„ฐ ์‹ค์šฉ์ ์ธ ๋””์ž์ธ ์ž์‚ฐ๊นŒ์ง€ ์‹œ๊ฐ ์ž๋ฃŒ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ์‹์„ ํ˜์‹ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์„ ์ค‘์‹ฌ์œผ๋กœ ํ’€์Šคํƒ ์•ฑ์„ ๊ตฌ์ถ•ํ•˜๋ฉด ์‹ค์ œ AI ํ†ตํ•ฉ, ํด๋ผ์šฐ๋“œ ์Šคํ† ๋ฆฌ์ง€, ๋™์ ์ธ ์‚ฌ์šฉ์ž ์ธํ„ฐ๋ž™์…˜์„ ํ•œ๋ˆˆ์— ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

  • AI ๊ธฐ๋ฐ˜ ์ด๋ฏธ์ง€ ์ƒ์„ฑ โ€“ ํ…์ŠคํŠธ ํ”„๋กฌํ”„ํŠธ๋กœ ์‹œ๊ฐ ์ž๋ฃŒ ๋งŒ๋“ค๊ธฐ
  • ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ฐค๋Ÿฌ๋ฆฌ โ€“ ์ƒ์„ฑ๋œ ์ด๋ฏธ์ง€๋ฅผ ํƒ์ƒ‰ํ•˜๊ณ  ๊ณต์œ ํ•˜๊ธฐ
  • ๋‹ค์šด๋กœ๋“œ ๊ฐ€๋Šฅํ•œ ์ด๋ฏธ์ง€ โ€“ AI๊ฐ€ ๋งŒ๋“  ๊ฒฐ๊ณผ๋ฌผ์„ ๋กœ์ปฌ์— ์ €์žฅํ•˜๊ธฐ
  • ๋ฐ˜์‘ํ˜• React UI โ€“ ๊น”๋”ํ•˜๊ณ  ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ์ธํ„ฐํŽ˜์ด์Šค
  • ํด๋ผ์šฐ๋“œ ์ด๋ฏธ์ง€ ์Šคํ† ๋ฆฌ์ง€ โ€“ Cloudinary๋ฅผ ์ด์šฉํ•œ ์˜๊ตฌ ์ €์žฅ
  • ํ’€์Šคํƒ ์•„ํ‚คํ…์ฒ˜ โ€“ MERN ๊ธฐ๋ฐ˜ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ

์‚ฌ์šฉ ๊ธฐ์ˆ  ๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • React โ€“ ํ”„๋ก ํŠธ์—”๋“œ UI ๋ฐ ์ปดํฌ๋„ŒํŠธ ๋กœ์ง
  • OpenAI DALLโ€‘E API โ€“ ํ…์ŠคํŠธโ€‘ํˆฌโ€‘์ด๋ฏธ์ง€ ์ƒ์„ฑ
  • Node.js & Express.js โ€“ ๋ฐฑ์—”๋“œ API ๋ฐ ์„œ๋ฒ„ ๋กœ์ง
  • MongoDB โ€“ ํฌ์ŠคํŠธ์™€ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค
  • Cloudinary โ€“ ์ด๋ฏธ์ง€ ํ˜ธ์ŠคํŒ… ๋ฐ ์ „์†ก
  • Tailwind CSS โ€“ ๋ฐ˜์‘ํ˜• ์Šคํƒ€์ผ๋ง

ํ”„๋กœ์ ํŠธ ๋ชฉ์ 

์ด ํ”„๋กœ์ ํŠธ๋Š” AI ์„œ๋น„์Šค, ํด๋ผ์šฐ๋“œ ์Šคํ† ๋ฆฌ์ง€, ํ’€์Šคํƒ ๊ฐœ๋ฐœ์„ ๊ฒฐํ•ฉํ•œ ํ”„๋กœ๋•์…˜ ์ˆ˜์ค€์˜ AI ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๋Š” ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ๊ณต๊ฐœ์ ์œผ๋กœ ๊ณต์œ ํ•˜๋ฉฐ, ์‹ค์‹œ๊ฐ„์œผ๋กœ AI ๊ธฐ๋ฐ˜ ์ฐฝ์˜์„ฑ์„ ์ฒดํ—˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

GitHub & ๋ผ์ด๋ธŒ ๋ฐ๋ชจ

Fullโ€‘Stack AI Image Generation App โ€“ GitHub & Live Demo

Back to Blog

๊ด€๋ จ ๊ธ€

๋” ๋ณด๊ธฐ ยป

๊ธฐ์ˆ ์€ ๊ตฌ์›์ž๊ฐ€ ์•„๋‹ˆ๋ผ ์ด‰์ง„์ž๋‹ค

์™œ ์‚ฌ๊ณ ์˜ ๋ช…ํ™•์„ฑ์ด ์‚ฌ์šฉํ•˜๋Š” ๋„๊ตฌ๋ณด๋‹ค ๋” ์ค‘์š”ํ•œ๊ฐ€? Technology๋Š” ์ข…์ข… ๋งˆ๋ฒ• ์Šค์œ„์น˜์ฒ˜๋Ÿผ ์ทจ๊ธ‰๋œ๋‹คโ€”์ผœ๊ธฐ๋งŒ ํ•˜๋ฉด ๋ชจ๋“  ๊ฒƒ์ด ๊ฐœ์„ ๋œ๋‹ค. ์ƒˆ๋กœ์šด software, ...

์—…๊ณ„ ์„ค๋ฌธ์กฐ์‚ฌ: ์ฝ”๋”ฉ์€ ๋นจ๋ผ์ง€๊ณ  ๋””๋ฒ„๊น…์€ ๋А๋ ค์ง„๋‹ค

AIโ€‘์ง€์› ํ”„๋กœ๊ทธ๋ž˜๋ฐ: ๊ฐœ๋ฐœ ๋ฐ ๋””๋ฒ„๊น… ์‹œ๊ฐ„์˜ ๋ณ€ํ™” ์ธ๊ณต์ง€๋Šฅ์˜ ๊ธ‰์†ํ•œ ๋ฐœ์ „๊ณผ ํ•จ๊ป˜, GitHub์™€ ๊ฐ™์€ AIโ€‘์ง€์› ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋„๊ตฌ๊ฐ€โ€ฆ

์—์ด์ „ํ‹ฑ ์ฝ”๋”ฉ์— ์ž…๋ฌธํ•˜๊ธฐ

Copilot Agent์™€์˜ ๊ฒฝํ—˜ ๋‚˜๋Š” ์ฃผ๋กœ GitHub Copilot์„ ์‚ฌ์šฉํ•ด ์ธ๋ผ์ธ ํŽธ์ง‘๊ณผ PR ๋ฆฌ๋ทฐ๋ฅผ ์ˆ˜ํ–‰ํ–ˆ์œผ๋ฉฐ, ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ๊ณ ๋Š” ๋‚ด ๋จธ๋ฆฌ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ ๋‚˜๋Š” t...

npm Classic Tokens ์‚ฌ๋ผ์ง: ๋ฐฐํฌ๋ฅผ ์ง€์†ํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ์ € ์œ ์ง€๋ณด์ˆ˜ ๋ฐฉ๋ฒ•

๋ฐฐ๊ฒฝ: npm์ด ์ตœ๊ทผ ํด๋ž˜์‹ npm ํ† ํฐ์ด deprecated(์‚ฌ์šฉ ์ค‘๋‹จ)๋˜๊ณ  revoked(ํ๊ธฐ)๋œ๋‹ค๊ณ  ๋ฐœํ‘œํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์‚ฌ์šฉ์ž๋Š” expiration์ด ํฌํ•จ๋œ granular tokens๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.