I와 함께 레벨업: '마인드로그' Firebase 배포 & 기능 진화기 (2편)
안녕하세요! 지난 1편, AI와 뇌과학으로 만든 나만의 감정 파트너, '마인드로그' 개발기에서는 아이디어를 구체화하고 AI와 함께 아름다운 프로토타입의 청사진을 그리는 과정을 공유했습니다. 감정과 경험의 중요성에 대한 철학을 담고, 뇌과학 원리를 적용해 사용자가 즐겁게 몰입할 수 있는 앱의 '뼈대'를 만드는 작업이었죠.
하지만 프로토타입은 어디까지나 제 컴퓨터 안에서만 존재하는 '가능성'일 뿐이었습니다. 이제 그 가능성에 진짜 생명력을 불어넣을 시간이었습니다.
1편의 목표가 '무엇을 만들 것인가'였다면, 2편의 목표는 '어떻게 현실 세계에 살아 숨 쉬게 할 것인가'입니다.
이번 2편에서는 AI 파트너와 함께 로컬 환경에 머물러 있던 '마인드로그'를 클라우드로 옮겨, 사용자가 언제 어디서든 접속하고 데이터를 안전하게 보관하는 '진짜' 웹앱으로 진화시킨 치열하고 흥미진진했던 여정을 공유합니다.
1. 다음 목표: Firebase를 이용한 클라우드 생명력 불어넣기
프로토타입의 가장 큰 한계는 '휘발성'이었습니다. 브라우저를 닫으면 모든 기록이 사라졌죠. 이 문제를 해결하고 회원가입, 데이터 저장, 그리고 어디서든 접속할 수 있는 '진짜' 앱을 만들기 위해 저는 'Firebase'라는 강력한 도구를 선택했습니다.
AI에게 "이 앱을 Firebase로 배포해서 회원과 데이터까지 관리하고 싶어"라고 말하자, AI는 마치 경험 많은 아키텍트처럼 전체 작업 계획을 순식간에 제시했습니다.
AI가 제시한 To-do List:
Firebase 프로젝트 설정 및 SDK 설치
Firebase Authentication 통합 (로그인/회원가입)
Firestore 데이터베이스 설정 및 스키마 설계
로컬 데이터를 Firestore로 마이그레이션
기존 데이터 관리 로직(Hook)을 Firebase와 연동
Firebase Hosting 배포 설정
환경 변수 및 설정 파일 구성
전체 연동 테스트 및 검증
혼자였다면 어디서부터 시작해야 할지 막막했을 작업들이, AI 덕분에 명확한 로드맵으로 정리되었습니다.
2. AI와의 페어 프로그래밍: 아이디어가 코드가 되는 순간
개발 과정은 직선이 아니었습니다. Firebase 연동이라는 큰 줄기를 따라가면서도, 문득 떠오르는 아이디어들을 AI에게 던지며 앱을 끊임없이 진화시켰습니다.
✨ 아이디어 1: "내 데이터를 내가 소유하고 싶어!" → 데이터 내보내기 기능 구현
사용자가 자신의 기록을 온전히 소유해야 한다는 생각에, '데이터 내보내기' 기능을 제안했습니다. 그러자 AI는 exportUtils.ts라는 유틸리티 파일을 생성하고, 데일리 감정 기록, AI 페르소나, 종합 진단 상태를 각각 Markdown(.md) 파일로 다운로드할 수 있는 기능을 순식간에 구현해주었습니다.
✨ 아이디어 2: "더 아름답고 세련된 UI가 필요해!" → Liquid Glass 디자인 적용
기존 디자인도 좋았지만, 더 몰입감 있는 경험을 위해 'Liquid Glass' 스타일을 요청했습니다. AI는 즉시 index.css파일을 생성하고, 유리 질감 효과(backdrop-filter), 부드러운 애니메이션, 그라데이션 텍스트 등 복잡한 CSS 코드들을 작성하여 앱 전체에 세련된 디자인을 입혔습니다.
✨ 아이디어 3: "기록이 끝났는지 알 수가 없어 답답해!" → 사용자 경험(UX) 개선
AI와의 대화가 끝나고 기록이 저장될 때, 앱이 잠시 멈추는 듯한 현상이 있었습니다. 이 문제를 해결하기 위해 "기록이 완료되면 명확한 피드백을 줬으면 좋겠어"라고 요청했습니다. AI는 이 요청을 이해하고, "모든 기록이 완료되었습니다! 요약을 생성하고 있어요..." 와 같은 상태 메시지와 로딩 애니메이션을 추가하여 사용자가 불안하지 않도록 UX를 섬세하게 다듬어 주었습니다.
3. 바이브코더...의 숙명 , 버그와의 사투 (feat. AI 디버거)
하지만 개발의 여정에는 언제나 '예상치 못한 용'이 등장하죠. 저에게는 '배포'와 '네트워크 설정'이 바로 그 용이었습니다. ngrok을 통해 임시 링크를 만들어 테스트하는 과정에서 수많은 에러 메시지를 마주했습니다.
💬 나: "링크로 들어가면 빈 화면만 떠. 무슨 문제야?" 🤖 AI: "로컬 서버는 정상 작동 중입니다. 문제는 Firebase 환경 변수 설정이 없어서 앱이 제대로 로드되지 않는 것 같습니다."
💬 나: "회원가입이 안돼!" 🤖 AI: "현재 Firebase 설정이 임시 값이라 실제 회원가입이 실패하고 있습니다. 테스트를 위해 로컬 스토리지 버전으로 임시 전환해 드릴까요?"
이처럼 문제가 발생할 때마다 에러 로그를 그대로 AI에게 보여주면, AI는 원인을 분석하고 해결책(코드 수정, 설정 변경 등)을 제시하며 훌륭한 디버깅 파트너가 되어주었습니다. 수많은 시행착오 끝에, 마침내 GitHub Pages를 통해 영구적으로 접속 가능한 웹앱 링크를 얻을 수 있었습니다!
4. 한층 더 강력해진 MindLog: 주요 업데이트
이 모든 여정을 거쳐, '마인드로그'는 이제 단순한 프로토타입이 아닌, 다음과 같은 강력한 기능을 갖춘 웹앱으로 성장했습니다.
☁️ Firebase 기반 클라우드 연동: 이메일/비밀번호로 회원가입하고 로그인할 수 있으며, 모든 데이터는 클라우드에 안전하게 저장되어 언제 어디서든 접근할 수 있습니다.
✨ Liquid Glass 디자인: 유리 질감과 부드러운 애니메이션이 적용된 아름답고 세련된 UI로 업그레이드되었습니다.
📤 데이터 포터빌리티(Data Portability): 설정 메뉴에서 나의 모든 감정 기록, AI 페르소나, 종합 진단 상태를 Markdown 파일로 쉽게 내보내어 온전히 소유할 수 있습니다.
🚀 안정적인 배포: 이제 GitHub Pages를 통해 누구나 접속할 수 있는 영구적인 웹 주소를 갖게 되었습니다.
테스트해보기: https://7b5c0b9941ea.ngrok-free.app/
5. 배운 점과 다음 스텝
AI와 함께 프로토타입을 실제 서비스로 발전시키는 과정은 '무엇을' 만들지 정의하는 것을 넘어, '어떻게' 문제를 해결하고 제품을 성장시킬 것인가에 대한 깊은 배움을 주었습니다. AI는 이제 단순히 코드를 생성하는 도구를 넘어, 복잡한 기술적 문제를 함께 해결하는 아키텍트이자, 지치지 않는 페어 프로그래밍 파트너가 되었습니다.
이제 사용자의 데이터가 클라우드에 쌓이기 시작했습니다. 다음 목표는 이 데이터를 사용자를 위한 '의미 있는 인사이트'로 바꾸는 것입니다. AI가 나의 감정 패턴과 생각의 습관을 분석하여 맞춤형 리포트를 제공하는 '종합 분석' 기능을 고도화하는 여정이 곧 시작될 예정입니다.
