요약 개인 웹사이트에서 자바스크립트(JS)를 단 한 줄도 쓰지 않고 현재 스포티파이에서 재생 중인 곡 정보를 실시간으로 띄운 한 개발자의 광기 어린 구현기가 화제입니다. 일반적으로 웹페이지에서 실시간 데이터를 받아와 화면을 바꾸려면 자바스크립트를 쓰는 것이 상식이지만, 글쓴이는 "순수 HTML/CSS 사이트"라는 콘셉트를 깨고 싶지 않아 기괴하면서도 신박한 우회로를 찾았습니다.
핵심 아이디어는 서버와의 HTTP 연결을 끊지 않고 계속 열어둔 채 스트리밍하는 방식입니다. 브라우저가 초기 페이지를 로드한 뒤에도 파이썬 플라스크(Flask) 백엔드 서버는 연결을 유지하며 스포티파이 API 상태를 상시 감시합니다. 곡이 바뀌거나 일시정지, 스킵이 발생하면 서버는 새 데이터를 담은 `<style>` 태그를 브라우저로 계속 쏴줍니다. 예를 들어 `.song-title::before { content: "새 노래 제목"; }` 같은 CSS 코드를 문서 맨 끝에 덧붙여 보내면, CSS의 '캐스케이딩(Cascading, 나중에 선언된 스타일이 우선 적용되는 특성)' 원리에 따라 기존 텍스트를 즉시 덮어쓰게 됩니다.
물론 엽기적인 꼼수인 만큼 여러 현실적인 문제도 있었습니다. 브라우저 연결을 무한정 열어두면 탭에 계속 로딩 스피너가 돌아가는데, 이는 아이프레임(iframe)을 활용해 초기 페이지 로딩 완료 후 5초 뒤 메타 리프레시 헤더로 스트리밍 페이지로 넘기는 꼼수로 해결했습니다. 또한 스포티파이 링크 버튼을 넣기 위해 곡이 바뀔 때마다 투명한 `<a>` 태그를 화면에 겹겹이 쌓아 올리도록 설계해, 사이트를 몇 시간 켜두면 수백 개의 링크 태그가 누적되는 진풍경이 벌어지기도 합니다.
작성자는 여기서 멈추지 않고 실시간 가사 동기화까지 구현했습니다. 곡이 시작될 때 모든 가사와 타임스탬프를 통째로 묶어 단 하나의 CSS 키프레임 애니메이션으로 전송함으로써, 자바스크립트 없이도 노래 박자에 맞춰 가사가 바뀌게 만들었습니다. 작성자는 "제정신인 사람이라면 그냥 자바스크립트를 쓰는 게 천 배는 편하겠지만, 구현하는 과정 자체가 너무 재미있었다"고 소감을 남겼습니다.