πŸš€ Next.js둜 μ‹€μ‹œκ°„ ν˜‘μ—…μ΄ κ°€λŠ₯ν•œ ν’€μŠ€νƒ Miro 클둠을 λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€

λ°œν–‰: (2026λ…„ 5μ›” 23일 PM 09:45 GMT+9)
4 λΆ„ μ†Œμš”
원문: Dev.to

좜처: Dev.to

πŸš€ Next.jsλ₯Ό μ‚¬μš©ν•΄ μ‹€μ‹œκ°„ ν˜‘μ—…μ΄ κ°€λŠ₯ν•œ ν’€μŠ€νƒ Miro 클둠을 λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€

λͺ‡ 주에 걸친 개발, 디버깅, μž¬μ„€κ³„, μ΅œμ ν™” 끝에 Canvra 🎨✨ λΌλŠ” ν’€μŠ€νƒ ν˜‘μ—… ν™”μ΄νŠΈλ³΄λ“œ ν”„λ‘œμ νŠΈλ₯Ό λ§ˆλ¬΄λ¦¬ν–ˆμŠ΅λ‹ˆλ‹€.
🌐 라이브 데λͺ¨: https://canvra.vercel.app/
https://github.com/Prem759-0/Miro-clone-public.git

CanvraλŠ” Miroμ—μ„œ μ˜κ°μ„ 받은 μ΅œμ‹  ν˜‘μ—… ν™”μ΄νŠΈλ³΄λ“œ ν”Œλž«νΌμž…λ‹ˆλ‹€.
μ‚¬μš©μžλŠ” λ‹€μŒμ„ ν•  수 μžˆμŠ΅λ‹ˆλ‹€:

  • λ¬΄ν•œ μΊ”λ²„μŠ€μ— 자유둭게 그리기
  • μŠ€ν‹°ν‚€ λ…ΈνŠΈ μΆ”κ°€
  • μ‹€μ‹œκ°„μœΌλ‘œ 객체 이동
  • μ—¬λŸ¬ μ‚¬μš©μžμ™€ ν˜‘μ—…
  • 아이디어λ₯Ό μ‹œκ°μ μœΌλ‘œ 정리

이 ν”„λ‘œμ νŠΈμ˜ μ£Όμš” λͺ©ν‘œλŠ” ν˜„λŒ€ ν˜‘μ—… SaaS μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ λ‚΄λΆ€μ μœΌλ‘œ μ–΄λ–»κ²Œ κ΅¬μΆ•λ˜λŠ”μ§€λ₯Ό 깊이 μ΄ν•΄ν•˜λŠ” κ²ƒμ΄μ—ˆμŠ΅λ‹ˆλ‹€.
배우고 μ‹Άμ—ˆλ˜ λ‚΄μš©:

  • μ‹€μ‹œκ°„ μ‹œμŠ€ν…œ
  • λ¬΄ν•œ μΊ”λ²„μŠ€ μ•„ν‚€ν…μ²˜
  • ν™•μž₯ κ°€λŠ₯ν•œ ν”„λ‘ νŠΈμ—”λ“œ ꡬ쑰
  • μ„±λŠ₯ μ΅œμ ν™”
  • μ΅œμ‹  UI/UX νŒ¨ν„΄
  • ν’€μŠ€νƒ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μ›Œν¬ν”Œλ‘œμš°

βœ… λ¬΄ν•œ μΊ”λ²„μŠ€

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • shadcn/ui
  • Convex
  • Liveblocks
  • Clerk
  • Vercel

ν˜‘μ—… 앱을 λ§Œλ“œλŠ” 일은 μ˜ˆμƒλ³΄λ‹€ 훨씬 μ–΄λ €μ› μŠ΅λ‹ˆλ‹€. μ–΄λ €μ› λ˜ λΆ€λΆ„λ“€:

  • μ‚¬μš©μž κ°„ μ‹€μ‹œκ°„ 동기화
  • λΆˆν•„μš”ν•œ λ¦¬λ Œλ” λ°©μ§€
  • μΊ”λ²„μŠ€ μ„±λŠ₯ μ΅œμ ν™”
  • λΆ€λ“œλŸ¬μš΄ λ“œλž˜κ·Έ μΈν„°λž™μ…˜
  • μƒνƒœ 관리 λ³΅μž‘μ„±
  • λ°˜μ‘ν˜• UI λ™μž‘
  • ν™•μž₯ κ°€λŠ₯ν•œ μ»΄ν¬λ„ŒνŠΈ μ•„ν‚€ν…μ²˜

μƒν˜Έμž‘μš©μ˜ λΆ€λ“œλŸ¬μ›€κ³Ό 전체 UXλ₯Ό κ°œμ„ ν•˜λŠ” 데 λ§Žμ€ μ‹œκ°„μ„ νˆ¬μžν–ˆμŠ΅λ‹ˆλ‹€.

이 ν”„λ‘œμ νŠΈλ₯Ό 톡해 λ‹€μŒμ— λŒ€ν•œ 이해도가 λ†’μ•„μ‘ŒμŠ΅λ‹ˆλ‹€:

  • κ³ κΈ‰ React μ•„ν‚€ν…μ²˜
  • μ‹€μ‹œκ°„ ν˜‘μ—… μ‹œμŠ€ν…œ
  • ν”„λ‘ νŠΈμ—”λ“œ μ΅œμ ν™”
  • TypeScript νŒ¨ν„΄
  • μΊ”λ²„μŠ€ μΈν„°λž™μ…˜ μ‹œμŠ€ν…œ
  • ν’€μŠ€νƒ μ›Œν¬ν”Œλ‘œμš°
  • ν™•μž₯ κ°€λŠ₯ν•œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ ꡬ좕

μ €λŠ” μ°½μ˜μ„±, ν˜‘μ—…, μ΅œμ‹  μΈν„°νŽ˜μ΄μŠ€, μ‹€μ œ μ—”μ§€λ‹ˆμ–΄λ§ 도전을 κ²°ν•©ν•œ μ œν’ˆμ„ λ§Œλ“œλŠ” 것을 μ¦κΉλ‹ˆλ‹€.
Miro μŠ€νƒ€μΌ 앱은 κ³ κΈ‰ ν”„λ‘ νŠΈμ—”λ“œμ™€ λ°±μ—”λ“œ κ°œλ…μ„ λ™μ‹œμ— λ°°μš°κΈ°μ— 졜고의 방법 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€. κ·Έλž˜μ„œ μ²˜μŒλΆ€ν„° 직접 λ§Œλ“€μ–΄ 보겠닀고 μŠ€μŠ€λ‘œμ—κ²Œ λ„μ „ν–ˆμŠ΅λ‹ˆλ‹€ πŸš€

μ˜ˆμ • κΈ°λŠ₯

  • AI λ³΄λ“œ μ–΄μ‹œμŠ€ν„΄νŠΈ
  • λ©€ν‹°ν”Œλ ˆμ΄μ–΄ μ»€μ„œ
  • λ³΄λ“œ 내보내기
  • ν…œν”Œλ¦Ώ μ‹œμŠ€ν…œ
  • μŒμ„±/μ˜μƒ ν˜‘μ—…
  • λŒ“κΈ€ 및 λ°˜μ‘
  • λͺ¨λ°”일 지원

🌐 라이브 데λͺ¨: https://canvra.vercel.app/
https://github.com/Prem759-0/Miro-clone-public.git

ν”„λ‘œμ νŠΈκ°€ λ§ˆμŒμ— λ“œμ‹ λ‹€λ©΄
μ—¬λŸ¬λΆ„μ˜ μ˜κ²¬μ„ λ“£κ³  μ‹ΆμŠ΅λ‹ˆλ‹€ πŸ™Œ

0 쑰회
Back to Blog

κ΄€λ ¨ κΈ€

더 보기 Β»

λ‚΄ μŠ€ν‚¬

ν”„λ‘œμ νŠΈλ₯Ό μœ„ν•œ AI μ§€μ‹œλ¬Έμ„ λ§Œλ“€κ³ , μ„€μΉ˜ν•˜κ³ , κ΄€λ¦¬ν•˜μ„Έμš” β€” 코딩이 ν•„μš” μ—†μŠ΅λ‹ˆλ‹€. CREATE 이름을 μ •ν•˜κ³ , μΉ΄ν…Œκ³ λ¦¬λ₯Ό μ„ νƒν•˜κ³ , μ›ν•˜λŠ” 것을 μ„€λͺ…ν•˜μ„Έμš” β€” λ§ˆλ²•μ‚¬κ°€ μžλ™μœΌλ‘œ κ΅¬μ„±ν•©λ‹ˆλ‹€.

μ„œλ²„ 없이 100개의 λΈŒλΌμš°μ € 기반 이미지 도ꡬλ₯Ό λ§Œλ“  방법 (FFmpeg WASM, PDF-lib, AI Background Removal)

μ œκ°€ ImgToolkit을 λ§Œλ“€κΈ° μ‹œμž‘ν–ˆμ„ λ•Œ λͺ©ν‘œλŠ” κ°„λ‹¨ν–ˆμŠ΅λ‹ˆλ‹€: μ œκ°€ μ‚¬μš©ν•˜λ˜ λͺ¨λ“  μ΄λ―Έμ§€β€‘νˆ΄ μ‚¬μ΄νŠΈλŠ” νŒŒμΌμ„ μ‹ λ’°ν•  수 μ—†λŠ” μ„œλ²„μ— μ—…λ‘œλ“œν•˜κ±°λ‚˜, 좜λ ₯물에 μ›Œν„°λ§ˆν¬λ₯Ό μ‚½μž…ν–ˆκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.