[Flutter] AI로 노래가사 해석하는 앱개발

앱을 만들게 된 과정

1. 앱을 왜 만들고 어떻게 시작했는가?

앱을 만들게 된 이유

동기: 일본어 공부가 하고 싶어짐 -> 평소 Jpop 많이 들음.
영감: 유튜브 쇼츠 카지노 차무식이 팝송 500곡 외웠다길래 나도? 싶음.
결론: 500곡까진 아니어도 노래 통째로 외워보려는데 일일이 찾기 귀찮음 -> "앱 하나 만들어서 AI한테 번역시키고 편하게 보자!"

 

평소 C#으로 Unity 개발을 해왔기에 언어는 익숙한데... 디자인을 꾸미는게 html같아서 너무 헷갈린다.

위젯안에 위젯안에 위젯안에... 

디자인도 제대로 못하고 기획도 제대로 못하고 해석도 제대로 못하는데 처음부터 끝까지 AI한테 시키자 싶어서

내가 직접 한건 예시화면 그리기, 기능 설명 밖에 없다. 그저 바이브코딩

 

우선 Figma로 예시화면을 그렸다

Figma 예시화면 그리기

피그마를 처음써본건 아닌데 그렇다고 제대로 써본적도 없다. 그냥 손만 대봤다 수준이였어서 대충 막그렸다

평소 Youtube Music 앱을 자주써서 복붙수준으로 그렸다

 

근데 Figma도 AI기능이 있고 알아서 그려준다네? 그래서 AI한테 디자인을 시켰다.

세상 참 좋고 편하다

 

이렇게 만들어 주는게 아닌가 너무 예쁘게 잘 만들어줬다. 그래서 가사를 볼땐 이 화면을 많이 따라하려 했다.

그러고 시작된 (바이브)코딩

Flutter는 모두 Widget으로 이루어져있다.. 라고만 알고 싹다 AI한테 시켰다. 내가 한 것이라곤 나온 코드를 보고 유지보수나 가독성이 안좋은 네이밍 코드들은 직접 바꾼 것 밖에 없다.

AI가 로컬DB로 Drift를 소개해주길래 연결도 해줬고, 위젯도 알아서 만들어주고 얼마나 편한가

대신 지멋대로 바꾸거나 없애거나 하는게 꽤 있어서 조금씩 울컥했지만 내가 할 수 있는건 없었다.

 

초기 홈 화면

초기 노래 검색 화면

---

2. 사용한 기술들

사용한 기술 목록

로컬 DB (Drift): AI가 소개해주길래 연결함.
AI (Gemini 2.5 Flash-lite): 결제한 게 이거라 선택지 없었음. 지시만 똑바로 하면 번역 나쁘지 않음.
네트워크 (Http): 가사 사이트 소스 긁어오려고 씀.
가사 수집 (Netease + LrcLib): 아시아권 가사 제일 많고 싱크까지 줘서 선택함. 유튜브 API만으로는 가사 안 나오길래 이거 2개로 정확도 높임.
미디어 (Youtube API): 썸네일, 영상 정보 가져오기 부족함이 없음.

 

왜 이렇게 썼는가 Why?

Youtube API

처음 노래를 어디서 가져올지 찾아봤다. 난 국내음악도 일본어로 보고싶고, Jpop들도 필요했기에 아시아권에서 주는 API나 세계적인 음원사이트가 유리하겠구나 싶었다.

멜론이나 지니를 쓰고싶었는데 공개적으로 주는 api는 없었다.. 그래서 자주쓰는 유튜브API를 선택했다.

 

유튜브 API는 관련검색어, 썸네일이미지, 노래관련 정보들 등 많은 것을 주기에 부족함이 없었다. 초반에는 좋다 생각했다.. 하지만 그 뒤가 문제였다.

 

Netease + LrcLib

난 처음에 가사도 AI가 유튜브 링크를 전달해서 영상에 자막이나 음성을 통해 알아서 가져와주는줄 알았다. 근데 안되더라? 그래서 영상 제목과 채널명을 가지고 가사를 제공해주는 외부 API를 써야겠다 생각이 들었다. 그래서 찾아본 곳이 이 두 곳이였다. 심지어 가사 싱크도 맞출 수 있어서 굉장히 좋다.

처음에는 Genius도 했었는데 하다보니 저 2개면 충분히 가사를 가져오기에 모자람이 없기에 내동댕이쳤다.

 

Http

얘는 Netease와 LrcLib가 API Key를 주지 않고 Http로 쏘면 그 소스코드에서 가져오는거 같았다. 그래서 얘가 필요하단다 그러고 json형식에 맞추서 가져오게 시켰다.

 

Gemini AI

최근 결제한 AI가 얘라서 그냥 선택지가 없었다. 그리고 얘가 번역도 나쁘지 않게 하더라 지시만 똑바로 하면.

 

---

3. 하면서 터진 문제들

1. 가사 가져오기

위에도 적었지만 영상만 가져오면 AI가 알아서 가사들을 가져와주는 줄 알았다... 그게 아니더라 다른 API 찾고 제대로 못가져오면 다른곳 찾고 하느라 3시간은 썼다.

근데 한 곳만 하기엔 가져오는 정확도가 낮았다. 그래서 Netease와 LrcLib 2개로 원곡의 가사를 가져올 정확도를 높였다.

그리고 가사를 가져올땐 원곡자의 가수명과 노래제목을 똑바로 써야했다. 그러기 위해 가사 가져오기 버튼을 추가해 저 2가지를 입력하게 시킨 뒤 가져오게 했다. 그랬더니 확실히 가져오는데 문제는 사라졌다.

추가 문제는 유튜브에서는 뮤비라던가 커버곡이라던가 노래는 원곡이더라도 개인이 만든 영상이다보니 저 사이트들에서 제공하는 가사 싱크 시간과 영상 시간이 일치하지 않는 경우가 대부분이다. 이건 어쩔 수 없다.

잘 가져와 주시잖아..한잔해

2. 소형 플레이어?

Youtube Music을 따라 만들려다보니 기존 노래를 나가면 노래가 끊기는게 싫어서 밑에 소형 플레이어가 생기게 하고 노래가 안끊기게 하고싶었다. 그렇게 코드에 끼워넣다보니 자꾸 예외가 터지면서 가사 해석이라는 앱의 목적에서 멀어지려는게 아닌가.. 그래서 이건 과감히 제거했다.

 

3. AI 해석문제

유튜브 API다보니 커버곡들이 너무 많았다. 그래도 원곡의 가사를 가져올 수 있어서 그건 좋았다.

하지만 얘가 가사를 자기 멋대로 해석하거나 바꿔버리는게 많았다. 그래서 가져올때 마다 문제점들을 계속 추가하며

그거하지마. 이거하지마. 이렇게 해. 프롬프트가 추가되었다.

근데 그걸 테스트하면서 모델의 사용량을 초과시켜버려서 이틀이 걸렸다..

그래도 이젠 잘 번역해주긴한다..

몇몇은 아직 잘 안되지만 만족할 만큼 된다

---

4. 결과 화면들

 

홈 탭

기록 탭

즐겨찾기 탭

 

가사 불러오기

AI가 가사 일본어로 바꿔준 후

 

앱 개발까지 기간으로는 7일 일수로는 6일 걸렸다.

2026.01.12(월) ~ 2026.01.18(일) 수요일은 쉼.

 

대단한 앱도 아니고 그저 내가 하고싶어서 만든 앱. 절대 상업목적 없음을 밝히는 바입니다.