출퇴근길이 신나는 음악 추천 바이브 코딩

코딩 몰라도 OK! 바이브로 나만의 음악 큐레이터 만들기

여러분은 아침을 어떻게 시작하시나요? 시끄러운 알람 소리에 간신히 눈을 뜨고, 바쁘게 하루를 시작하는 분들이 많을 텐데요. 정신없는 아침, 커피 한 잔처럼 우리에게 작은 활력을 불어넣어 주는 것이 있다면 바로 '음악'이 아닐까 싶습니다. 상쾌한 기분으로 출근길에 나서고 싶을 때도, 차분하게 오늘 할 일을 정리하며 하루를 시작하고 싶을 때도 마찬가지입니다. 그날 기분과 상황에 딱 맞는 음악이 있다면 하루의 시작이 훨씬 즐거워지겠죠.

저 역시 일할 때 음악의 도움을 정말 많이 받습니다. 신나는 음악은 일의 속도를 높여주고, 잔잔한 음악은 스트레스를 받거나 생각이 복잡할 때 마음을 다독여 주거든요. 그래서 오늘은 '바이브 코딩'을 활용해 아침을 깨우는 음악을 추천해 주는 애플리케이션을 직접 만들어보려고 합니다. 출근길은 물론, 언제 어디서든 여러분만의 완벽한 플레이리스트를 추천받을 수 있는 나만의 음악 큐레이터를 함께 만들어볼까요?

Google Build Apps를 시작하기 전에 먼저 음악 추천 앱에 꼭 필요한 기능들을 정리해봤습니다. 복잡하게 만들 필요는 없더라고요. 사용자가 '오늘은 기분 좋은 팝송이 듣고 싶어' 또는 '잔잔한 발라드로 마음을 진정시키고 싶어' 같은 요청을 자유롭게 입력할 수 있는 텍스트 입력창 하나면 충분할 것 같습니다.

단순히 음악 제목만 목록으로 보여주는 건 아쉽겠죠? 추천받은 음악을 바로 들을 수 있도록 유튜브 링크를 연결하고, 국내 음악과 해외 음악을 적절히 섞어서 추천하는 것도 중요합니다. 또한 추천 목록이 마음에 들지 않을 수도 있으니 '다시 추천받기' 버튼도 있으면 좋을 것 같네요. 이런 기능들을 바이브 코딩에서 구현하기 위해 다음과 같은 프롬프트를 작성했습니다.

사용자가 입력한 음악 테마나 장르 기반하여 출퇴근 시간동안 지하철이나 버스등에서 들으면 좋을 음악들의 추천 목록을 매일 매일 7개씩 알려주는 어플리케이션을 만들어 주세요. 어플리케이션에 추가된 주요 기능들은 아래와 같습니다.

1. 해당 음악을 실제 들을 수 있도록 클릭하면 유튜브의 해당 음악의 검색링크로 바로 이동하도록 목록의 항목에 해당 검색 링크를 추가하여 주세요.
2. 음악 목록은 한국어와 해외 음악을 7:3의 비율로 설정해 주세요.
3. 다시 추천을 받을 수 있도록 재추천 버튼도 설정해 주세요.
4. 어플리케이션의 배경은 흰색으로 설정해 주세요.

프롬프트의 수행으로 아래와 같이 멋진 어플리케이션 만들어 졌습니다.

어플리케이션이 잘 작동하는지 궁금해서 "신나는 월요일 아침"이라는 테마로 직접 테스트해봤어요. 와, 정말 깔끔하게 음악 제목과 함께 유튜브 링크까지 바로 연결되더라고요! 특히 각 곡마다 국내 음악인지 해외 음악인지 표시되어 있어 한눈에 파악이 되었구요. "새로운 추천 받기" 버튼만 누르면 전혀 다른 플레이리스트가 짠! 하고 나타나니, 마치 음악 전문가가 옆에서 계속 새로운 추천을 해주는 느낌이었습니다. 덕분에 평소 몰랐던 숨은 명곡들도 발견하게 되었네요.

음악을 듣기 위해서 플레이버튼을 누르면, youtube의 해당 음악의 검색 화면으로 이동합니다. 음악을 바로 들을 수 있도록 해당 음악의 영상으로 바로 이동하면 좋은데, 이 부분을 구현하는데 많은 어려움(박스 글이 시행착오의 내용에 관한 글 참조)이 있었고 최종적으로 검색으로 유튜브 페이지를 이동하도록 기능을 구현했답니다.

- Build Apps에서 사용하는 Youtube API의 리스트가 오래되어 "플레이할 수 없는 영상"이라는 화면이 표시되는 경우가 많았습니다.
- 목록으로 추천한 음악 영상의 링크가 지역 제한이나 비공개 영상인 경우로 인해 '재생할 수 없음'으로 표시되는 경우도 있었습니다.
- 추천 목록을 먼저 생성하고, 최종 출력 전에 재생하지 못하는 영상의 링크를 제외하는 구현 요청을 했으니, 브라우저의 보안 정책(CORS) 으로 인해 웹 애플리케이션 코드에서 직접 YouTube 링크가 실제로 작동하는지 여부를 기술적으로 확인하지 못하는 문제가 있었습니다.
- Youtube API가 아닌 구글 검색(search)를 직접 활용하는 방법으로도 코드 구현이 이루어졌으나, 위와 같은 동일한 이슈가 발생되어 이 방식으로도 직접 음악 영상 링크로 접속이 불가했습니다.

아래는 "Pharrell Williams"의 Happy를 클릭하면 이동하는 화면의 예시입니다. 해당 음악과 관련한 다양한 음악 영상들이 표시되어 원하는 음악을 선택해서 청취가 가능합니다.

음악을 들으면서 문득 이런 생각이 들더라고요. '이 플레이리스트를 나중에 또 들으려면 어떻게 하지?' 추천받은 목록이 마음에 쏙 들어도, 앱을 닫으면 사라져버리니까 아쉬웠거든요. 특히 출근길에 듣던 완벽한 플레이리스트를 퇴근길에도 다시 듣고 싶을 때가 있잖아요. 그래서 떠올린 아이디어가 바로 '플레이리스트 다운로드' 기능이었어요. 마음에 드는 음악 목록을 파일로 저장해두면, 언제든지 꺼내볼 수 있을 테니까요. 친구들과 공유하거나, 나만의 음악 아카이브를 만드는데 유용할 것 같기도 합니다. 이러한 기능들을 추가하기 위해 다음과 같은 프롬프트로 앱을 업그레이드했습니다.

추천 음악 목록을 다운로드 받을 수 있는 버튼을 추가해 주세요. 사용자가 입력한 내용에 가장 적합한 음악들을 맨 위부터 표시하여 주세요.

프롬프트 수행 결과, "목록 다운로드"의 녹색 버튼이 새로이 추가되었고, 버튼을 클릭하면 txt파일 형식의 추천 음악 목록을 다운로드 받을 수 있게 되었네요.

새로 추가된 '플레이리스트 다운로드' 버튼을 클릭하면, 추천받은 음악 목록이 깔끔하게 정리된 텍스트 파일로 저장됩니다. 파일에는 사용자가 요청한 테마에 가장 잘 맞는 곡부터 차례대로 정리되어 있고, 각 곡의 제목과 아티스트 정보가 한눈에 들어오도록 저장되어 있습니다.

이번 글에서는 출퇴근 시간 동안 하루의 에너지를 채워줄 음악 추천 애플리케이션을 Google Build Apps를 활용해서 바이브 코딩으로 직접 만들어봤습니다. 평소 음악을 즐기시거나 새로운 곡을 발견하고 싶은 분들께 정말 유용한 도구가 될 것 같아요. 여러분도 바이브 코딩으로 나만의 특별한 앱을 만들어보는 것은 어떨까요? 음악 추천 앱 다음으로는 어떤 것을 만들어보면 좋을지, 여러분의 아이디어를 댓글로 나눠주세요.