멜로피(Melofi) 개발기: Next.js, Electron, Firebase를 활용한 생산성 앱 출시 여정
🤖 AI 추천
프로젝트를 시작했지만 완수하는 데 어려움을 겪는 주니어 및 미들 레벨 개발자, 프로덕트 개발 과정에서 발생하는 심리적 어려움을 극복하고 싶은 개발자, 새로운 생산성 도구를 기획 및 개발하려는 개발자에게 추천합니다.
🔖 주요 키워드
핵심 기술
이 글은 개발자가 Next.js, Electron, Firebase 등 검증된 기술 스택을 활용하여 생산성 및 휴식 웹 앱 '멜로피(Melofi)'를 기획, 개발, 출시하는 전 과정을 생생하게 담고 있습니다. 특히, '단순히 시작하는 것'을 넘어 '완성하는 것'에 대한 개발자의 의지와 심리적 극복 과정을 공유합니다.
기술적 세부사항
- 프레임워크: Next.js (기존 경험 활용 및 Vercel 배포 용이성)
- 데스크톱 앱화: Electron (웹 앱 이상의 기능 제공 목표)
- 백엔드: Firebase (인증, Firestore, 호스팅 등 안정적이고 확장 가능한 솔루션)
- 상태 관리: Zustand (경량 및 직관적인 라이브러리)
- 테스팅: Cypress (전문적인 경험 활용)
- 개발 프로세스:
- 초기 아이디어 구체화 및 시스템 디자인 스케치 (Excalidraw 활용)
- MVP (Minimum Viable Product) 전략 수립 및 핵심 기능 정의
- MVP 기능: 게스트/로그인 모드, Lofi 음악 스트리밍, Spotify 연동, 커스터마이징 가능한 배경, 포모도로 위젯, 노트 위젯, Google Calendar 연동 캘린더 위젯, 앱 상태 템플릿
- UX/UI 디자인 (개인 경험 및 외부 영감 활용)
- 배포 및 테스트 (수동 및 자동화 테스트, Cypress 테스트 검토)
개발 임팩트
- 개인 프로젝트 완수에 대한 동기 부여 및 심리적 장벽 극복 방안 제시
- Next.js, Electron, Firebase를 활용한 실질적인 프로덕트 개발 워크플로우 공유
- MVP 전략의 중요성과 기능 범위 축소의 필요성 강조
- 기술 스택 선택 이유 및 각 기술의 장점 설명
커뮤니티 반응
- 개발자가 자신의 프로젝트를 공유하는 Reddit 스레드에서 다른 개발자들의 완성도 높은 프로젝트와 비교하며 자기 의심(self-doubt)과 번아웃을 겪었음을 언급합니다. 이는 많은 개발자가 공감할 만한 경험입니다.
📚 관련 자료
Next.js
글의 핵심 프레임워크로 사용되었으며, React 기반의 서버 사이드 렌더링 및 정적 사이트 생성을 위한 프레임워크입니다. Vercel 플랫폼과의 연동성이 뛰어나다는 점이 언급되었습니다.
관련도: 95%
Electron
웹 기술(HTML, CSS, JavaScript)을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있게 해주는 프레임워크입니다. 이 프로젝트에서 웹 앱을 넘어 데스크톱 앱으로 확장하기 위해 사용되었습니다.
관련도: 90%
Firebase
개발자가 백엔드 인프라에 대한 걱정 없이 애플리케이션을 개발할 수 있도록 하는 BaaS(Backend as a Service) 플랫폼입니다. 인증, 데이터베이스(Firestore), 호스팅 등 다양한 기능을 제공하며, 이 프로젝트에서 안정적인 백엔드 솔루션으로 선택되었습니다.
관련도: 95%