Chorus

문제

음악을 검색한 뒤 앨범 이미지와 짧은 메시지를 세로형 공유 카드로 만들고 싶었습니다. 모바일에서도 검색, 미리 듣기, 3D 화면 확인과 이미지 저장을 이어갈 수 있어야 했습니다.

화면을 그리는 일 외에도 브라우저의 오디오 재생 정책, WebGL 캔버스 캡처와 모바일의 파일 저장 방식을 함께 다뤄야 했습니다.

선택한 방법

검색과 카드 편집 상태를 연결

SvelteKit과 Svelte 5 Runes로 iTunes 음악 검색, 곡 선택과 스튜디오 상태를 구성했습니다. 선택한 곡의 커버·제목·아티스트와 사용자가 입력한 메시지가 같은 카드에 반영되도록 연결했습니다.

재생과 3D 반응을 같은 흐름으로 관리

Threlte와 Three.js로 바이닐 LP와 반사 재질을 표현했습니다. Web Audio의 주파수 데이터를 읽어 저음 크기를 시각화와 연결하고, 재생 상태에 따라 회전과 시각화 상태가 바뀌도록 했습니다.

모바일의 자동 재생 제한을 고려해 오디오 컨텍스트 생성·재개와 재생을 사용자 동작에서 시작했습니다. 화면을 떠날 때는 오디오를 멈추고 컨텍스트와 animation frame을 정리해, 시각 효과와 음원이 화면 수명 밖에서 계속 실행되지 않도록 했습니다.

WebGL과 DOM을 함께 이미지로 저장

WebGL renderer의 drawing buffer를 보존하고 html-to-image로 캔버스와 카드 문구를 함께 PNG로 변환했습니다. 저장 중 중복 실행을 막고 캡처 전 렌더링 시간을 확보했습니다.

데스크톱은 파일 다운로드, 모바일은 새 창에 이미지를 표시해 사용자가 저장하는 경로로 나눴습니다. 링크 공유도 Web Share API를 우선 사용하고, 지원하지 않으면 클립보드 복사로 이어지게 했습니다.

확인한 결과

음악 검색, 미리 듣기와 3D 반응, 메시지 편집, 세로형 PNG 저장을 하나의 흐름으로 구현해 공개 배포했습니다. 현재 서비스와 해당 코드의 운영 배포 기록을 확인할 수 있습니다.

이 프로젝트에서는 시각 효과를 만드는 데서 더 나아가, 브라우저마다 다른 재생·공유·저장 동작을 사용자가 완료할 수 있는 경로로 연결했습니다.