개발동기
팝송을 듣고 흥얼거리다가, 우연히 가사도 같이 볼 수 있으면 너무 좋겠다는 생각이 들었다. 사실 운전 중에 좋아하는 팝송이 나오면 네이버 선생님에게 가사를 보여달라고 검색하다가 놓쳐서 아쉬웠던 적이 많았기 때문이다.
노래가 나오면 가사가 함께 나오는 팝송 따라부르기 앱을 만들어보기로 했다. (나중에 안 일이지만, 이미 이런 서비스가 있었다!)
(기존) 어디선가 팝송이 나오면 → AI 에게 곡명 들려주고 확인 → 검색 → 가사 찾기 (이미 곡 놓침)
(희망) 어디선가 팝송이 나오면 → 앱 켜면 → 바로 가사 확인 (따라부르기)
마침 Gemini 3이 우수하다고 듣고 있었고, 새로 발표된 Antigravity도 궁금했다.
Antigravity는 Agent Manager가 주도적으로 개발하는 것이 특징이라고 하는데, 나는 Antigravity가 과연 Cursor(유료사용)를 대체할 수 있을지 궁금하기도 했어서, 이번에는 VS Code나 Cursor와 가능하면 동일한 환경에서 사용해보기로 했다.
앱의 이름은 Pop(팝송) + Scout(탐색가)라고 지었다.
사용한 개발도구
- Antigravity : 구글이 25년 11월에 발표한 새로운 AI 통합개발환경(IDE)
- Gemini 3 pro (High)
- AudD : 음악 인식 및 가사 데이터 제공 서비스 (REST API 기반)
- Spotify : 음원 스트리밍 서비스
- 프론트엔드 : React(UI 구축 라이브러리), Vite(Build Tool), Tailwind CSS(Styling 프레임워크), Axios(백엔드 API와 비동기 통신방식 HTTP Client)
- 백엔드 : Node.js(자바스크립트를 실행시켜주는 기반환경(Runtime)), Express(Node.js를 위한 Web Framework)
의도한 결과물 : 팝송 따라부르기 앱
- 들려오는 팝송의 제목과 가수를 바로 보여준다
- 영어 가사도 바로 보여준다
- 사용자는 들리는 노래를 영어가사로 따라 부를 수 있다
- 마음에 드는 곡은 나중을 위해 목록에 저장해준다.
개발과정
주변에서 들려오는 팝송을 듣고 곡명과 가수를 알아내는 앱을 웹으로 구현하고 싶어. 어떤 앱을 이용해야 할까? 또 모바일에서 가능하게 하려면 어떻게 해야할까?
웹에서 “지금 들리는 팝송이 뭔지” 인식하는 기능은 보통 음악인식 API를 붙여서 구현하는 방식이 가장 현실적입니다. 모바일 지원은 같은 API를 쓰되, PWA나 하이브리드 프레임워크(Flutter, React Native 등)로 래핑해서 마이크 권한을 써 주면 됩니다이게 도대체 먼 소린지 ... 웹에서 직접 음악 인식 알고리즘을 구현하기보다는 SaaS API를 사용하기를 권고하는 정도로 알아들었다. 쉽고 가장 간단하게 구현하는 방법을 요청하고, 따라해보기로 마음먹었다.그랬더니 다음과 같은 구조로 구현하는 거란다.
노래를 들려주면 React(프론트)에서 마이크 입력으로 몇 초간 녹음
→ Node 서버(Express, FastAPI 등)로 녹음된 Blob 업로드
→ Node 서버에서 AudD API로 전송해 곡 정보(JSON)를 받음
→ 곡명·가수·앨범 커버 등을 프런트(React)에 보여줌구현을 위해서는 우선 AudD(https://audd.io/)에서 API 토큰을 발급받아야 한다. 300번까지는 무료로 호출 가능한 것 같다. 발급받은 API 토큰은 환경변수에 넣어준다.
웹사이트의 오디오 파일 페이지 스크린샷
아키텍처 구조를 잡아달라고 요청하고 나서는, 특별하게 요청한 건 없었던 것 같다.
React + Node + AudD” 조합으로 최소 예제 아키텍처(엔드포인트 설계, 녹음 코드 구조)를 좀 더 구체적으로 잡아줘
결과
앱이 완성된 후, 먼저 start_app.bat을 실행하여 앱을 시작한다.
팝송이 나오면 약 5초간 들려준다.
팝아웃
popsout - popsout - popsout - popsout - popsout - popsout -
그러면 잠시 생각하다가, 찾은 노래의 정보(곡명, 아티스트, 영문가사)를 보여준다
팝아웃
즐겨찾기 저장을 누르면 곡목록에, favorit.csv 파일에 차곡차곡 저장된다
Spotify 듣기를 누르면 스트리밍 서비스로 연결된다. 이건 팝송을 온전히 감상하려고 할 때 유용하다.
컴퓨터 화면에 표시된 음악 플레이어의 스크린샷
단순하고 간단하지만, 영어공부(특히 듣기)를 하기에 좋은 앱이 된 것 같다. (내가 알고 있는 유사한 앱들도 가사나 번역을 보여주긴 하지만, 전체 가사를 보여주지는 않거나, 검색을 해서 찾아들어가야 하거나, 유료로 이용해야 해서 불편했다)
깨달은 점
Antigravity는 Agent 사용부분을 제외한다면, VS Code 환경과 차이가 없고, Cursor와 거의 같다고 보아도 좋을 것 같다.
개발과정에서, Shazam은 음원인식 서비스, Spotify는 음원스트리밍 서비스라는 것을 처음 알았다.
확인해보니 Shazam은 일반개발자에게는 웹용 곡 인식 API를 제공하지 않는다. 그래서 보통은 AudD, ACRCloud 같은 상용 음악인식서비스를 사용한다는 것도 알게 됐다.
찾아준 음원을 저장하는 기능도 추가했다. 가사를 보지 않고 다시들으면서 따라해볼 수 있으면 좋을거 같아서 기능을 추가했지만, 결과는 실패였다. 녹음기능이 썩 좋지 않아서, 음질이 형편없었기 때문이다.
AI가 찾은 음원을 mp3 파일로 저장하는 기능도 추가해줄 수 있다고 했지만 포기했다. 복잡한 변환절차를 삽입하면 오류확률이 커질 것 같고, 또 불법 음원 차단을 위한 정책 등 현실적으로 문제가 있었기 때문이다
1차개발 이후 . . . 유사 서비스 조사
여기까지가 지난 월요일, 그러니까 6일 전까지의 이야기다. 배포는 하지 못하고 마무리했었다 (코드가 꼬이는 바람에 웹 배포는 실패했다) 그 이후 오늘까지, 조금 더 진행된 사항이 있어 함께 공유해보려고 한다.
SoundHound
요구수준을 거의 다 구현
주변 음악을 듣고 실시간으로 곡 인식 후 가사를 보여줌
재생 중인 가사부분 하이라이트 (감탄했다. 하지만 UI는 별로 ...)
Musixmatch
요구수준의 일부 해결
자동 음악 인식, 가사 실시간 동기화는 잘 됨
하지만 주변 소리 인식 → 가사 표시 UI가 매끄럽지 않음
Shazam
요구수준의 절반만 해결
음악 인식은 최고 수준
가사가 없는 곡이 많음
발견사항
Shazam은 가사 DB가 취약하다
SoundHound는 가사에 대한 번역이 없다
기존의 음악 앱들은 음악인식 기능이 없다
번역앱/블로그 들은 실시간 음악 동기화를 제공하지 못한다
개발방향 전환
처음엔 나 혼자 사용하기 위해 만들려고 한 것인데, 유사 서비스의 현 상황을 알고 나서는 안되더라도 한번 들이대보고 싶어졌다 '어차피 스터딘데 이 참에 갈 데까지 가봐?. . .'
여러 사람이 함께 쓸 수 있는 다목적 모바일 서비스로 방향을 다시 정하고, 처음부터 다시 시작하기로 했다. '어차피 난 지시만 하면 코딩은 AI가 금방 짤텐데 뭐 . . .' 개발방향을 다시 정했다.
한글화면 -> 영문화면 전환
PopScout (팝송가사 중심) -> LyricSync (실시간가사 중심)
영어 듣기 및 말하기 -> 한국어 이해하기
PC용 웹앱 -> 모바일용 웹앱
주 기능 (차별화를 위한 제품 요구사항)
1. (실시간 노래 곡명, 아티스트 탐색) 주변(카페, 매장, 라디오 등)에서 흘러나오는 음악을 원 탭으로 인식
2. (실시간 가사 제공) 노래 인식 즉시 가사 제공해서 따라 부를 수 있게 지원
3. (실시간 번역 제공) 가사(문장, 단어)를 이해 및 공부 도우미
4. (회원가입, 로그인, 좋아하는 노래 저장) 스스로의 음악 취향 인식 지원
5. (장르별 인기곡 Top 10 제공) 인기곡 저장 지원, 음악 취향별 영어공부 도우미
기술스텍 변경
목표, 타겟사용자를 정해보고 MVP 기획서를 작성해보자. 개발 툴로 풀스택이 가능한 Rails로 시작해도 되겠지? 그랬더니만 기획서 작성 전에 먼저 기술 스택 선택에 대해 솔직하게 말할게 있단다. 실시간 음악 인식이 중요하므로 마이크 접근이 필수인 모바일 앱이나, Rails는 웹 브라우저의 오디오 API를 사용해야 해서 백그라운드 실행 안 되어 마이크 접근이 제한적인 웹 프레임워크라고 조언한다. 결국 Rails 백엔드 + React Native 프론트엔드를 추천했다
Next.js -> Ruby on Rails (빠른 MVP, 풀스텍, 향후의 유지관리리)
SQLite -> PostgreSQL 16, Supabase (관계형 DB, Free Tier)
웹 배포를 위해선
Docker (빌드 및 프로덕션 환경)
Kamal (SSH 기반 배포 자동화)
DigitalOcean Droplet / Cloudflare (합리적 가격)
외부 서비스에는
AudD API -> ACRCloud (음악인식 확장성)
Spotify (음악 재생의 강자)
개발 과정에서 겪은 어려움
착수시의 고민
웹 배포 앱을 공유하려면 웹 배포까지 가야하는데, 난 이런 걸 해본 적이 없다. 회원가입/로그인/로그아웃 은 또 어떻게 하지?
모바일 웹앱 모바일에서 활용할 수 없으면 크게 의미가 없다. 하지만 모바일 개발은 꿈에도 생각해 본 적이 없다.
영어가사 번역 처음엔 노래가 나올 때 영어가사를 바로 보고싶었지만, 생각해보니 영어 가사의 뜻까지 알아야 영어공부에 도움이 되지 싶었다. 한국어로 번역을 보여준다면 정말 좋겠다. 그런 앱은 없는 것 같았다. 이것도 만만치 않을 것 같았다.
모바일 앱 개발의 불편함
휴대폰에서 수행하다가 에러를 만나면 그걸 AI에게 알려주기가 번거로왔다. (모바일 에러상황 캡쳐 - 카톡 - PC에서 받아서 AI에게 질문입력)
수많은 에러
일주일 새에 정말 많은 에러를 만났다. 밤을 세우게 한 녀석도 있었다(결국 해결하진 못했다)
무슨 기능을 추가하면 이미 개발된 화면들이 다시 문제가 되는 상황이 계속됐다. (처음부터 다시 해결해야 했다)
배포과정에서 겪은 에러사례
Kamal 설정 파일이 없음(-> Kamal 초기화)
Docker Registry 인증 오류(-> deploy.yml 수정)
터미널에서 명령 실행 후 응답 없음 (-> WSL 환경의 줄바꿈 문자 변경)
PostgreSQL 연결 오류 (-> 오타 수정)
Supabase 연결 실패 (-> deploy.yml에 환경변수 추가)
Supabase 비밀번호 URL 인코딩 문제 (-> Supabase 비밀번호에 포함된 문자 '@' 제거)
Prepared statements 오류 (-> Supabase PgBouncer Transaction mode 설정)
Solid Queue 테이블이 없다는 오류 (-> 여러가지로 해결을 시도했으나 결국 해결하지 못함)
Docker 빌드 중 asset precompile 단계 오류 (-> ArgumentError 해결했으나 새로운 문제 발생)
마이그레이션 파일 누락 오류 (-> 마이그레이션 코드를 복사하여 수동 생성)
extensions 스키마 중복 오류 (-> db/schema.rb 수정)
이전 배포 실패 시 남아있던 일부 테이블/인덱스가 마이그레이션 재실행 시 중복 오류 (-> 모든 마이그레이션에 if_not_exists: true 추가)
배포 에러해결을 21회 시도했으나 결국은 실패했다. (해결하지 못한 문제는 Solid Gems 설정, 마이그레이션 충돌 등)
배포를 보류하고 로컬 개발모드로 되돌려 달라고 했는데, 이 때문에 코드 꼬여버려서 결국 복구되지 않았다. 처음부터 다시 개발해야만 했다
그 밖의 어려움
초기에는 어떤 터미널을 사용해야 하는지도 구분하기 어려웠다
통신, 네트워크 에러를 해결하는 과정도 이해하기 난이했다
안드로이드(모바일) - 윈도우 - 리눅스 체제 간의 연계 불일치해결이 가장 어려웠다다
현재까지의 진행상황 (결과물)
파란색 배경의 웹페이지 스크린샷
애드워즈 계정 설정 페이지의 스크린샷
항목 목록을 보여주는 웹페이지의 스크린샷
컴퓨터 화면에 표시된 작업 목록의 스크린샷
립스 한국어 mp3 플레이어
느낀점
앱을 개발한다 = 에러를 하나씩 하나씩 바로잡는다
개발 과정 중에 마주칠 에러는 원래 무수히 많다 (이렇게 생각하는 것이 정신건강에 좋다)
앱을 안전하게 복구하기 위해서는 깃 이닛, 깃 애드, 깃 커밋, 깃 푸쉬에 대해 이해해야 한다
앞으로의 계획
재생중인 가사부분 표시
가사 해설 (데이터베이스)
가사학습 진도관리
다양한 음원재생 서비스 연동(경쟁)
친구 추가/관리
개인별 음원재생 Playlist 공유
신뢰성 강화
가사 문장장분할방식 (노래 1 : 가사 N)
음원 고유성 문제해결
