레트로 감성 돋는 Cassette Player 데스크탑 앱을 만들고 있습니다. #1

이 포스트는 Fedora Linux를 기반으로 작성되었습니다. 

 

이번 포스트에서는 과거 Casette Player를 듣던 세대 혹은 Retro 감성을 좋아하는 분들을 위한 음막 플레이어를 하나 소개 해 볼까 합니다. 

지금 나이로 40대 중후반 이후의 세대라면 아마 LP, Tape, CD, 그리고 오늘날의 Streaming 음원 서비스까지 음원과 관련된 거의 역사적인 모든 매체를 접해왔을 겁니다. 저도 그런 세대죠. 

지금은 음악을 너무나 쉽고 빠르고 편리하게 듣고 즐길 수 있지만, 과거에는 쉽지 않았죠. 라디오 음악방송으로 새 노래를 접하게 되고, 음악이 맘에 들면 또 그 음반이 정발 되기를 기다려야 했고, 그나마 국내 정발이 되지 않으면 수입음반을 고가에 사거나 반대로 해적판 음원을 구입해야 했습니다.  음악을 듣는 즐거움도 있었지만, 자신이 좋아하는 음반을 수집하는 행복감도 한몫했었죠.  가끔은 그 시절이 참 그리워요.. ^^

각설하고.. 오늘 웹 서핑을 하다가 정말 우연히 HTML5 기반의 오디오를 플레이할 수 있는 Cassette Player를 보게 되었습니다. 등록 날짜가 2012년이니까.. 이것도 13년 전이네요..  

웹 디자인 및 앱 개발 분야의 온라인 리소스 사이트인 Cordrops에 올라온 Old School Cassette Player with HTML5 Audio라는 것으로 HTML, CSS, Javascript로 구현된 Cassette Player 입니다.   Demo 사이트에서 그 기능을 확인할 수 있는데요. 일종의 카세트 플레이어 Simulator(시뮬레이터)인 셈입니다.  정말 멋지게 잘 만들어져 있습니다. 개발자분이 존경스럽네요. 관련 기술에 대한 온라인 학습과정을 홍보하기 위한 포트폴리오로 등록한 것 같습니다. 그런데 소스코드까지 다운로드할 수 있지 몹니까.. 와... 

해당 앱을 Downdload 한 후, 압축을 해제하고 Songs 폴더에 자신의 음원을 넣으면 local에서 자신의 음원을 플레이할 수 있습니다.  물론, 구조상 Local web-server 환경이 필요하지만, 조금만 수정하면 php 정도만 설치하고도 사용할 수 있습니다.  여하튼 이 이쁜 player를 웹 브라우저에서만 사용할 수 있다는 것이 좀 아쉽지요.

개발자분이 공개했을 때가 2012년 이니까. 당시에는 이것을 데스크톱 애플리케이션으로 만들 수는 없었을 것입니다. 다만, 그 다음 해인 2013년에 Javascript, HTML, CSS 기반의 데스크톱 애플리케이션을 만들 수 있는 ATOM Shell 이라는 프레임워크가 발표되었고.. 네~ 그것은 오늘날 우리가 알고 있는 Electron Framework라는 것입니다. 물론, Javascript, HTML, CSS 기반의 데스크톱 앱을 만들 수 있는 것은 Electron 만 있는 것은 아닙니다. Flutter나 Tauri , NW.js 등도 있지요..  Electron은 Chromium 전체를 App에 포함한다는 측면에서 다소 부담스럽고 자원소모량이 많다는 단점이 있지만 관련 기술 성숙도가 가장 좋고 높은 호환성과 안정적인 생태계를 갖고 있다는 장점도 있습니다. 

개인적으로는 직접적으로 Electron App을 개발해 본 적은 없지만, 이미 기본 소스가 있고 Electron App을 만드는 것이 그리 어려운 것은 아니라는 것을 어깨 너머로 알고 있는지라, 다운로드 받은 소스로 Electron 데스크톱 App을 만들어 보기로 했습니다. 

우선, 개발목표는 말 그대로 "레트로 감성 그대로의 Player를 만들자" 입니다.  워낙에 많은 음악 Player들이 세상에 나와 있고, 기능이나 편의성으로 보면 Spotify나 Apple Music 같은 거대 자본기업들의 Player가 대세인지라.. 그 수준을 따라가는 것은 의미가 없겠죠..  편의기능은 최소화, 기능보다는 감성...

우선, 원래 소스는 mp3와 ogg 파일만 사용할 수 있도록 되어 있는데, ogg는 빼고 대신 flac 음원을 플레이할 수 있도록 수정을 했습니다. 이유는 필자가 갖고 있는 음원들이 약간의 mp3와 대부분 flac 음원이기 때문입니다. ^^

Front-Cover.png 파일을 이미지 편집 프로그램으로 살짝 다듬어서 플레이 중인 음반의 제목과 곡명을 overlay로 표시할 수 있도록 수정했습니다. 물론 그 기능도 추가했구요. 

볼륨 Knob는 굳이 필요치 않을 것 같아서 빼버렸습니다. 대신, Odometer(주행 기록계)와 Odometer Reset 버튼을 추가했습니다. 과거 카세트 플레이어를 사용하셨던 분들이라면 Odometer가 뭔지는 아실 것입니다.  LP 나 CD 처럼 사용자가 원하는 트랙(Track)으로 곧바로 Jump 할 수 없는 것이 테이프의 태생적 한계이자 특징이죠. 다음 트랙이나 이전 트랙으로 넘어가려면 Fast Forward(빨리 김기) 버튼이나 뒤로 감기(Rewind) 버튼을 눌러야 합니다.  이 기능은 그대로 넣었습니다. 트랙 List 기능을 넣지 않았기 때문에 실제 카세트처럼 다음 곡이나 이전 곡으로 가려면 빨리 감아야 합니다. ^^  하지만, 딱 하나 불편한 것이 처음으로 가는 것입니다. 이건 너무 오래 감아야 해서 좀 불편하더라구요.. 그래서 Odometer Reset 버튼을 누르면 그냥 곧바로 처음으로 가도록 하는 기능을 추가했습니다. 

카세트테이프를 앞/뒤로 뒤집는 것은 원래 소스코드에 있는 기능이라 그래로 사용하고,  웹의 배경은 깔끔한 게 좋은지라, 투명하게 처리했습니다. 태이프 아래 버튼들의 모음인 컨트톨러는 Mouse Hover기능을 넣어서 Focus를 받을 때만 나타나게 처리했습니다.

또 앱을 종료하고 다시 실행했을 때, 이전에 플레이 했던 딱 그 위치에 있어야 합니다. 카세트 특성이 그러하죠.. 그래서 마지막 플레이 사이드(Side A/B) 정보와 Odometer 정보를 저장하는 기능도 추가 했습니다. 

코드 분석하고, 수정하고 기능 추가하고 테스트하고.. 대략 8시간쯤 걸린것 같은데.. 

완성된 모습은 아래와 같습니다. 

좀 괜찮아 보이죠 ?
실제 동작하는 모습을 동영상으로 담아 봤습니다. 저작권 관계상 소리는 넣지 않았습니다.  원본 소스의 Simulation 효과나 버튼별 효과음의 수준이  너무 뛰어나서 결과도 매우 만족스럽습니다.  빨리 감기 할때 좀 덜덜거려 보이는데, 이건 동영상 Frame이 낮아서 그런거지 실제로는 훨씬 자연 스럽습니다.  원래 소스에서는 2배속으로 감는데 넘 느린것 같아 4배속으로 수정했습니다.

 

원래 카세트에서는 이전 곡이나 다음 곡을 탐색할 때, 뒤로 혹은 앞으로 감고 멈추고 플레이로 확인하고 또 뒤로 혹은 앞으로 감고 멈추고 확인하고 했었는데.. 이것도 좀 불편해서 앞으로 감거나 뒤로 감기 버튼을 눌러 놓으면 알아서 곡 시작이나 끝이 되었을 때, 자동으로 멈추도록 하는 기능을 넣었습니다. (이 기능은 카세트플레이어가 전성기 인 시절에 고급 기능 중에 하나였죠..) 

아래 동영상은 데스크탑 전체에서 본 모습입니다. 이리저리 배치도 해보고.. 크기도 가늠해 볼겸., 27인치 4K 모니터 입니다. 

이뻐요.. 

Electron App으로 만든 후, macOS에서도 확인을 해 봤는데, 특별한 문제는 발견되지 않았습니다. WIndows에서는 확인을 못 해 봤구요.. 

몇군데 다듬어 지지 않은 부분과 기능상 버그를 손 본 후에 Tauri 나 Flutter로도 만들어 볼 예정입니다.Elctron 과 비교해 보고 좀 더 나은 결과물로 결정을 해야 할 것 같습니다. PSD 파일도 있으니 좀 더 이쁘고 다양한 Face 이미지도 추가해서 선택할 수 있도록 하구요. 아마 추석 연휴가 끝나면 완성될 것 같은데, 개인적으로 사용하려고 만들고는 있지만 완성도가 좋고, 원하는 분들이 있다면.. 나눔 진행해 보겠습니다.