음악 스트리밍 웹 플레이어
음악 서비스가 특정 장르 이용자를 위해 따로 낸 전용 웹 플레이어를 만들었습니다. 이용자는 웹 브라우저에서 바로 음원을 듣는데, 재생 조작과 지금 상태가 한눈에 보이지 않으면 음악을 듣다 말고 화면을 뒤지게 됩니다. 재생 · 정지 · 이동 · 상태 표시 같은 기본 조작, 재생 목록 화면과 순서 관리, 버튼과 상태 표현까지 플레이어 화면 전체를 개발했습니다.
웹 브라우저에서 바로 듣는 장르 전용 플레이어
장르 전용 웹 플레이어는 음악 서비스가 특정 장르를 즐기는 이용자를 위해 따로 마련한 서비스입니다. 이용자가 웹 브라우저에서 곧바로 음원을 들을 수 있도록, 브라우저 안에서 재생되는 플레이어 화면을 구현했습니다. 웹 페이지 안에 있지만 설치형 음악 프로그램처럼 동작하는 플레이어를 목표로 했습니다.
재생 · 정지 · 이동과 상태 표시를 갖춘 기본 조작
웹 플레이어의 기본 조작은 재생, 정지, 이동, 그리고 지금 상태를 알려 주는 표시입니다. 미디어 플레이어의 기본 조작 흐름을 하나씩 개발해, 이용자가 버튼을 눌렀을 때 플레이어가 무엇을 하고 있는지 화면이 바로 알려 주도록 했습니다. 재생 상태가 화면에 바로 보여야, 이용자가 소리가 나기를 기다리며 같은 버튼을 다시 누르지 않습니다.
곡 목록을 보며 순서를 정하는 재생 목록
재생 목록은 이용자가 들을 곡을 확인하고 재생 순서를 관리하는 화면입니다. 곡 목록을 보여 주는 화면과, 재생 순서를 관리하는 조작을 함께 구현했습니다. 목록에서 지금 재생 중인 곡과 다음 곡이 구분되어야 이용자가 순서를 따라갈 수 있습니다.
누른 버튼과 고른 곡이 바로 보이는 상태 표현
음악 플레이어는 지금 재생 중인지, 어느 곡을 골랐는지가 화면에 분명히 드러나야 합니다. 조작 버튼, 재생 상태, 선택 상태를 직관적으로 표현하도록 플레이어 화면과 반응을 설계했습니다. 웹 안에서도 설치형 프로그램처럼 반응하는 플레이어가 되도록 화면의 움직임을 다듬었습니다.
이 작업의 포인트
브라우저에서 바로 듣는 장르 전용 웹 플레이어
재생 · 정지 · 이동과 재생 상태 표시
곡 목록을 보고 재생 순서를 관리하는 재생 목록
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…