소개
타이핑이 아니라, 음성으로 생각을 말하고 기록하고픈 욕구는 누구나 있습니다. 그리고 이미 AI 시대에 이 작업을 자동화 할 수 있는 워크플로우와 앱들, 아이폰 단축어, 플라우드 노트와 같은 기기들도 있고요.
그러나 저는 아주 간편하게 안드로이드폰도 차별없이(?) 언제 어디서든 녹음하고 내 노션에 혹은 옵시디언에 저장하고 싶었죠~
그래서 간단하게 혼자서 사용할 자동화 서비스가 웹에 배포하는 웹서비스까지 빌드업이 될지 몰랐;;;;
진행 방법
🛠 사용한 도구 및 기술 스택
초기 개발: Claude Desktop, Playwright-stealth
중기 리팩토링: Claude Code (Pro 요금제) + Rails 8.0.2
인프라: Docker, Digital Ocean (6달러/월)
백엔드: FastAPI → Ruby on Rails (리팩토링)
프론트엔드: HTML, JS, CSS
🎯 워크플로우 설계
웹앱 접속 → 실시간 음성 녹음 or 파일 업로드
Whisper API로 음성 텍스트 변환
GPT-4o-mini로 요약 및 메타 정보 생성
구조화된 데이터 → Notion DB에 저장
진행 순서
아이디어 구상 및 최초 단순 웹버전 구현 : 처음 에는 클로드 데스크톱에서 작업하고 바이브코딩 프로젝트를 만들고 MCP를 붙였습니다.
Desktop commmander : 터미널
playwright-stealth : 테스트, 자동화
cotext7 : 최신 문서 레퍼런스
파이썬 (벡엔드) + HTML + JS + CSS (프론트) 사용
단순한 웹사이트가 아니라, 요약하는 간단한 벡엔드가 필요했다. Python 기반 FastAPI 프로젝트를 구축 : FastAPI 뭔지 이번에 처음 알게 됨
사용성을 위해 간단한 프론트 uI 가 필요 : HTML 의 간단한 바이브코딩은 쉽게 구축 가능, 잘못된 부분은 캡쳐 떠서 수정해줘 신공 사용!!
엄청난 삽질 끝에 노션에 저장 성공 !!
Whisper API를 통해 음성을 텍스트로 변환한 뒤, GPT-4o-mini로 핵심 정보(카테고리, 요약, 감정 등)를 분석해 구조화.
결과를 Notion API로 저장하는 로직 완성
클로드 코드로 작업 시작 : Rails8로 다시 리팩토링하여 웹 배포까지 해보기로 함
그러나, 단순히 나만 사용하기 보다는 다른이들도 같이 쓰고싶었고, 무료 SaaS화를 시키면 사용자를 모으면서 바이브 마케팅 전략을 펼칠 수가 있겠다는 생각으로 빌드업
-> Rails 선택이유 : 데이터베이스, 보안, 인증 등 바이브코더가 어려워하는 부분이 해결 가능테스트 서버를 돌려가서 서비스를 기존 단계 까지 구축하는데 고작 반나절이면 충분했음. 다만 그다음이 문제였으니...!!!!
내가 혼자 쓸 서비스를 만드는 것과 다른 사람이 쓰도록 만드는 것은 천지 차이였음
1번째 문제 : 사용자 분리 문제 - 로그인/로그아웃 사용자 정보를 설정하는 문제
2번째 문제 : 보안 문제 - 민감한 API키와 개인정보를 다루기에 보안 작업이 중요
3번째 문제 : 개인정보 처리방침 및 서비스 이용약관 정리
Ruby on Rails가 풀스택이 가능했기에, 1-2-3번 문제를 정말 그나마 간단하게 처리 (여기에 80%의 시간과 노력이 소요)
→ DigitalOcean + Kamal 조합으로 무중단 배포 환경 구성. SSL 인증 및 도메인 연결 까지 완료. 사용자 설정 페이지, API 키 저장, 에러 메시지 개선 작업 진행노션데이터 베이스에도 잘 들어갑니다만, 실사용자들 데상으로 오픈베타서비스로 회초릴 두둘겨 맞을 예정 . 단순한 기록 뿐만 아니라, 중요도와, 감정, 태그도 달 수 있도록 했습니다.
👉 최종 배포 URL: https://voice2notion.xyz (디버깅중입니다)
결과와 배운 점
✅ 배운 점
내가 쓸 수 있는 툴을 넘어서, 남도 쓸 수 있는 서비스를 만드는 건 완전히 다른 차원의 문제였어요.
사용자 인증, 보안, 스키마 관리, 오류 안내 등 ‘작지만 중요한 UX’의 힘을 많이 배웠습니다.
풀스택이 가능한 Rails와 Kamal을 활용하면 꽤 빠르고 안정적이며, 보안도 안전한 바이브코더의 상업적 배포도 가능하다는 걸 몸소 체험했습니다!
🧪 시행착오
Notion API 오류: Integration 연결 누락으로 저장 실패 ⚠️
파일 포맷 오류: Safari에서 WebM 미지원 → WAV 포맷 대응 필요
Devise 인증 에러: JSON/HTML 응답 분리 안되어 로그인 오류 발생
🔮 앞으로의 계획
현재는 에러투성이와 디버깅 지옥일듯.
감정 및 맥락 분석 및 처리 도입(?)
멀티 데이터베이스 도입
API 비사용자를 위한 유료 서비스??
지피티 외 다양한 STT API 지원 (Google, AWS 등)
