지난 글 요약
개발 동기: J-Pop을 즐겨 듣다 노래를 통째로 외워 일본어를 마스터하고 싶다는 생각에 개발을 시작했다
제작 방식: Flutter의 중첩 구조가 낯설어 **AI와 협업하는 '바이브 코딩'**으로 Figma 디자인부터 기능 구현까지 신속하게 진행했다.
기술 스택: YouTube API와 가사 전문 API(Netease, LrcLib)를 조합해 정확도를 높였고, Gemini로 가사 해석을 처리했다.
문제 해결: AI의 오역과 싱크 불일치 문제를 집요한 프롬프트 수정과 외부 데이터 연동을 통해 해결하며 완성도를 높였다.
최종 결과: 약 6일간의 집중 개발 끝에 탄생한 순수 개인 공부용 앱으로, 열정만으로 기획부터 결과물까지 만들어냈다.
링크: https://codingisland.tistory.com/116
2번째 글을 쓰게 된 이유
앱을 만들다 보니 조금씩 더 욕심이 생겼다.
기능이 한 두개 더 추가됐으면 좋겠다는 생각이 들어 추가로 구현하게 되었다.
단지 그 뿐, 그저 개발이 재밌다.. 코드 성능은 모르겠다
지금까지 넣은 기술 요약
- YoutubeAPI: 유튜브 영상을 가져와 노래인 영상들을 가져오기 위함. + 영상 플레이어로 노래 듣기
- Netease + LrcLib: 노래 가사를 가져오기 위해 Http 통신으로 소스코드에 있는 가사와 타임스탬프를 가져옴.
- Gemini API: 가져온 가사를 일본어로 해석
- Drift: 로컬DB용으로 사용
난 여기서 계정 로그인 기능을 추가하여, 오프라인일때는 로컬DB를, 온라인일 때는 클라우드 DB의 정보를 가져오고 싶었다.
유튜브에서 보면 오프라인일때는 로컬의 알고리즘으로 영상추천이 나오고, 로그인하면 어느 기기든 동일한 알고리즘이 나오는 것을 보고, 나도 그렇게 만들고싶었다.
추가한 기술
Firebase
FireBase는 구글 계정 로그인도 API로 지원해준다. 마침 Gemini와 Youtube API를 사용중이던 나에게 맞는 기술이였다.

처음에 연결하려고 프로젝트 폴더에서 android에 build.gradle에 뭘 자꾸 추가해야된다... 그랬지만 우리 킹갓 Gemini님께서 다 설명해주신다. 그래서 금방 연결했다.
구글 계정 연동


구글 계정을 연동시켜서 로그인하면 클라우드에 정보를 통해 들었던 노래들을 보여주고, 오프라인일때는 로컬에서 들었던 정보만 보이게 만들었다.
팁 메모장 추가

가사를 '톡' 터치하면 타임스탬프에 따라 해당 가사가 재생되는 위치로 가고, '꾹~' 누르면 이렇게 단어와 문법을 설명해주는 메모를 추가했다.
앞으로 해야할 작업
영상으로는 계정들이 나와서 보여주진 못하지만 전 글에 AI가 번역하고나서 일본어랑 한국어가 섞여 나오는 경우가 있었길래 그 부분도 프롬프트를 수정해서 이제는 잘 가져오고있다. 하지만 DB와 API호출로 수정해야할 점이 있다.
1. DB문제
지금은 앱을 완성시키려고만 막 만든 형태다. 그러다 보니 DB의 정규화라던가 문제가 있다. Firebase가 Nosql이라서 DB로직을 수정하느라 하루 애먹긴했었다. Repository클래스를 만들어 Drift와 Firebase에서 수행할 공통에 로직들을 정의해 위임시켜 로그인 여부로 어느 DB에서 sql을 수행할지 나눈상태다.
2. API 호출문제
한 번 가사를 호출하고 번역했으면 이미 DB에 그 정보가 있기에 나중에 또다시 생성하지 않아도 된다. 하지만, 다른 사람이 같은 노래를 번역시키게 되면 각각 API호출로 번역시키는 상태이다. 이를 DB에 공통정보를 담을 데이터를 저장시켜 이미 노래를 해석해둔게 있다면 API를 호출하지않고 DB에서 불러오게 할 계획이다.
ex)
A씨와 B씨가 앱을 사용한다. 노래1과 노래2가 DB에 있다.
A씨는 노래3을 원한다. -> API호출로 노래를 번역하고 공통의 클라우드 DB에 저장한다.
후에 B씨가 노래3을 원한다 -> 전에 저장해뒀던 DB정보를 불러와 그대로 보여준다. (API 호출X)
이렇게 수정하기 위해 DB를 고쳐야한다.
'프로젝트' 카테고리의 다른 글
| [Flutter] AI로 노래가사 해석하는 앱개발 - 3 (마무리) (0) | 2026.01.29 |
|---|---|
| [Flutter] AI로 노래가사 해석하는 앱개발 (4) | 2026.01.18 |