스트리밍 미터 제작기

서비스 소개

스트리밍 미터는 음악이나 영상이 재생된 시간을 모두 더해 얼마나 많은 사랑이 아티스트에게 쌓였는지 확인할 수 있는 서비스입니다.
여기엔 서비스를 만들어나간 기록을 적어두었습니다. 서비스를 직접 보고 싶으신 분은 이곳에서 확인해보세요 :)

아이디어를 얻은 곳

2018년 3월 20일, 온라인에서 이 트윗을 보게 됩니다.
보자마자 '재밌는데?! 다른 곡들도 알 수 있게 아예 서비스로 만들어보면 좋겠다!'는 생각이 들어 본격적으로 기획을 시작했습니다.

초기 기획 단계에서 머릿속에 그려졌던 이미지는 두 가지였어요.

1. 재생된 시간들이 차곡차곡 쌓여가는 모습 → 쌓임과 채워짐
2. 시간이 쌓여 그만큼 애정어린 마음이 오래도록 이어진 모습

요런 이미지들이 연상되어 자연스레 서비스의 테마는 '시간으로 쌓여간 사랑'이 되었습니다.

변천사

기획

스트리밍 미터는 2018년, 2019년, 2023년 세 차례에 거쳐 변천사를 겪었습니다.
초창기엔 '역주행'이라는 키워드에 집중해서 역주행 계산기라는 가제로 시작했고, 이후엔 유튜브 조회수를 기반으로 측정된다는 의미에서 ViewTube라는 이름으로 바꿨습니다.

별 문제없이 운영됐었지만 처음 떠올렸던 인상과 만들어진 모습이 너무나도 달랐고, ViewTube라는 서비스 이름은 설명이 들어가도 직관적이지 않았어요. 그래서 2019년엔 다시금 스트리밍 미터로 이름을 바꾸어 메인 화면의 인상을 다르게 가져갔습니다.

그렇게 서비스를 까맣게 잊고 지내오다 올해(2023년) 포트폴리오를 정리해야 할 때가 왔습니다. 겸사겸사 스트리밍 미터에 들어가봤더니 유튜브 API가 바뀌어 오류가 발생하기도 했고, 4년의 시간이 흘러 제가 변한만큼 제 감성이 묻은 프로젝트도 리뉴얼이 필요해보였습니다.

리뉴얼을 통해 이루고자했던 목표는 다음과 같습니다.

1. 기존에 있던 '아티스트에게 쌓인 사랑, 그 축적감'이라는 뼈대는 그대로 둔 채 서비스 분위기를 바꿔볼 것
2. 스포티파이가 어느정도 국내에 안착했으니 유튜브뿐만 아니라 스포티파이도 지원할 것
3. 프론트엔드와 백엔드 모든 곳에서 캐싱을 적극 활용해볼 것

가장 먼저 서비스를 어떤 느낌으로 가져갈지 고민하면서 키워드들을 추상화해보았습니다. 크게 두 가지로 나눠볼 수 있었는데요,

• 스트림, 재생, 시간 = 가로축(→)의 이미지
• 누적, 축적, 쌓임 = 세로축(↑)의 이미지

조금씩 겹쳐있는 시간대가 차근차근 쌓이는 모습을 상상해보니 석 삼(三)자가 기울어진 형태가 그려졌습니다. 심플하니 썩 괜찮아보여서 이 모양을 아이콘으로 결정하게 됐는데요, 아이콘을 결정하고서 스포티파이와 유튜브를 보니 이 서비스들의 아이콘도 3개의 선으로 이루어져 있단 걸 알게 됐습니다. 유튜브는 3개의 변으로 이루어진 삼각형, 스포티파이는 와이파이처럼 곡선이 3개인 아이콘이니까... 이걸로 애니메이션을 주면 되게 자연스럽겠단 생각이 들었어요.

최종적으로 조금 더 모던(?)하고 깔끔(?)한 2023 스트리밍 미터가 완성됐습니다! 참 단순하게 완성됐죠? 사실 2023 버전은 개발적인 고민을 더 많이 하고 싶었어요. 그래서 시각적인 부분은 최대한 작업을 줄이고 싶었답니다. 그럼 그간의 리뉴얼 사이사이 어떤 기술적인 변화가 있었는지, Python 스크립트를 거쳐 NestJS로 오기까지의 여정을 간략하게 설명드릴게요.

개발

• 2018년 (Python + EC2)
  당시 파이썬을 통해 웹스크래핑을 해본 경험이 있어 파이썬을 개발 언어로 채택했습니다.
  이후엔 유튜브측에서 제공하는 API를 알게 되어 스크래핑이 아닌 API 호출로 개발을 완료했었습니다.

• 2019년 (React + Github Pages)
  우선 서버 운영에 부담이 있었습니다. 그리고 기술적으론 사실 통계를 확인하는 서비스일 뿐인데 꼭 서버가 있어야 할까? 로직을 프론트로 옮기고 프론트에서 API 호출을 하면 되지 않을까? React도 새로 배우고 있는데 이걸로 대체할 수 있지 않을까? 이런 대안들이 계속 떠올라 React 기반의 프론트엔드로 대부분의 로직을 옮겨 재구현을 했습니다.

• 2023년 (NestJS + NextJS + EC2)
  리액트 버전의 가장 아쉬웠던 점은 SEO였습니다. 서비스 특성상 공유가 곧잘 되기 마련인데, SPA 환경에선 '공유하기'라는 기능이 좀처럼 예쁘게 동작하질 않거든요. 그래서 SEO를 염두에 두고 NextJS로 프론트엔드를 구현했습니다. SEO 이외의 주요 사안은 캐싱이었습니다. 유튜브는 API로 조회수를 제공하지만 스포티파이는 조회수를 제공하지 않아 웹스크래핑이 필요했어요. API로 제공된다하더라도 호출횟수에 제한이 있어 속도면에서든 비용면에서든 캐싱은 필수적이어서 백엔드를 별도로 구성하게 됐습니다. 사실 결과 페이지에 나오는 수치들이 꼭 실시간일 필요도 없었구요.

이외에도 더 많은 요소들이 남아있는데요. 예를 들면,

• 다국어 지원
• 스크래핑시 HTML 구조가 바뀌면 알림 보내기
• 인기 동영상이나 특정 시즌이 자주 재생되는 캐롤같은 음악들은 미리 캐싱을 해두면 어떨까?
• 아이돌 신규 MV가 나왔을 때를 고려하면, 동일한 리퀘스트가 짧은 시간 안에 여러 번 들어올 텐데 그땐 캐시를 refresh 해줘야 UX가 더 좋지 않을까?
• 응답 결과로 제공되는 역사적 사건들은 직접 마련할 게 아니라 ChatGPT한테 요청하면 어떨까?

2024년엔 리뉴얼이 아니라 이런 기능들이 추가되어 업그레이드된 스트리밍 미터가 될 수 있도록 노력할 예정입니다.
생각나실 때 한 번씩 들러주세요 :)