0

웹플레이어 제작기

2004년 2월 15일



처음 홈페이지에 음악을 올려놓고 서비스를 할 때, 그냥 링크만 걸어놓으면 알아서 리얼플레이어나 윈도우 미디어 플레이어가 실행되면서 음악이 들리면 되는 줄 알았었다. 그러다가 SBS나 KBS 홈페이지에서 음악스트리밍 서비스를 할 때 이상한 자체플레이어를 띄워서 음악을 들려준다는 사실을 알고 ‘야, 나도 요런 것 한번 해볼까’하는 생각도 했었지만, 일단 실력이 안되고-_- 리얼미디어 파일과 윈도우미디어 파일이 혼재된 상황이라 하나의 플레이어로 통합할 수도 없었다.

나중에 음악파일들은 윈도우미디어용 파일로 통합이 되었지만, 여전히 "자체 플레이어"는 내 능력 밖에 있었다. 능력이 안되면 그냥 잊고나 살았으면 좋았을 것을, 홈페이지를 운영할수록 "자체 플레이어"의 필요성은 계속 드러나기만 했다.

가장 심각했던 때가 여러 곡의 파일을 한꺼번에 선택해서 듣는 기능이 필요해지면서였다. 그때까지는 한곡 한곡 클릭해서 들을 수밖에 없었기 때문에 다른 일을 하면서 음악을 듣는 사람들은 평균 3분 단위로 새로운 노래를 클릭해야하는 번거로움을 감수해야만 했었다. 벅스뮤직 등의 다른 사이트에서는 체크박스에서 착착착 선택한 후에 "선택곡듣기" 같은 버튼 하나만 눌러주면 줄줄이 들리던데… 뭐 이런 부분이 아쉬워지더란 말이다. 이 문제의 해결을 위해 "자체 플레이어"를 만들어야 하나 심각하게 고민하던 중, ASX 파일을 잘만 코딩하면 윈도우미디어플레이어에서도 선택된 곡들을 줄줄이 들을 수 있다는 사실을 알아내버리는 바람에 "자체 플레이어"의 개발은 없었던 일로 해버릴 수 있었다.

그 문제를 해결한 후에도 "자체 플레이어"의 필요성이 덜해진 것은 아니었다. 첫손에 꼽을 수 있는 것이 "플레이어가 실행되지 않고 다운받기 창이 뜨거나 다른 플레이어가 떠서 음악이 들리지 않는다"류의 항의가 들어올 때였는데, 윈도우미디어플레이어가 기본 미디어재생 프로그램으로 등록되지 않고 윈앰프나 기타 플레이어를 주요 프로그램으로 쓰는 사람의 경우 왕왕 발생할 수 있는 문제였는데, 다른 사람의 컴퓨터 설정까지 내가 뭐라고뭐라고 할 수는 없는 일이므로 가장 깔끔하게 해결할 수 있는 방법이 ‘자체플레이어’를 만들어 올려놓는 거였다. 처음에는 못들은 척 모르는 척 버텨보려고 했지만 (귀찮으니까…) 내가 회사 컴퓨터에 윈앰프를 깔았다가 내 홈에 있는 음악을 못듣게 되는 사태가 발생하면서 폭발하고 말았다. 썅, 만들자 만들어! 남들 다 만드는데 그것 하나 못만들까?

만든다, 는 대전제를 깔아놓은 뒤, 기존에 돌아다니는 웹플레이어 소스를 분석하기 시작했다. (여차하면 그대로 갖다 쓸라고…) 처음에는 그냥 윈도우미디어플레이어만 embed해서 쓸 생각이었는데, 모양이 윈도우미디어플레이어와 똑같으니 개성도 없어보이고, 벅스뮤직 같은 곳에서처럼 지금 나오고 있는 노래의 제목이나 앨범 표지 같은 것도 보여주고 싶었는데 그런 기능도 구현하기 힘들었다. 고민고민하다가 플레이어를 그냥 embed하지 않고 자바스크립트로 플레이어를 완전히 새로 만들어낸 그런 소스를 찾아보기로 했지만, 생각처럼 내가 원하는 기능 – 벅스뮤직 같은 스트리밍서비스에서 보여주는 그런 알싸한 모양까지 – 을 갖춘 웹플레이어 소스는 거의 없었다. 어쩌다 찾은 것은 내 성에 안차고…

방법을 바꿔서, 웹플레이어가 아닌 BGM플레이어 소스를 찾기 시작했다. 일단 한걸음 한걸음 나가자. 음악부터 들리면 되지 않겠는가. 이렇게 마음을 바꿔먹은 것이다. 몇몇 BGM플레이어들이 눈에 들어왔고 실행/멈춤/잠시멈춤/이전곡/다음곡/뮤트(소리죽임)/볼륨조절 등 내가 필요로 했던 최소한의 기능은 다 갖추고 있는 소스들도 있었다. Exobud라는 BGM플레이어 소스를 가져다가 기본적인 구성은 최소로 건드리면서 내가 원하는 모양으로 뜯어고쳐보았다. 오호, 꽤 맘에 들더만.

다만 BGM플레이어에는 내가 원했던 기능 중에 중요한 것이 하나 빠져있었는데, 음악의 시작과 끝을 바(bar)로 표시해서 그 중간 어디쯤을 클릭하면 노래의 중간으로 건너뛰는 기능과, 볼륨 역시 바(bar)로 표시해서 자유자재로 소리를 키웠다 줄였다 하는 기능이 없었다. (볼륨은 10%씩 늘이고 줄이는 버튼이 있었다) 이놈의 것은 또 어디서 베껴오나 고민하다가 일단 벅스뮤직플레이어 소스를 받았다. 벅스의 자바스크립트를 온종일 들여다봤지만 답은 안나오더라. 별 수 있나. 하나씩 갖다붙여보는 수밖에.

한 사흘 이것저것 갖다붙이고 빼고 해보다가 드디어 볼륨과 타임을 체크할 수 있게 되었다. (어느 함수가 그런 기능을 하는지는 모른다) 기능은 다 갖췄으므로 이제는 플레이어에 쓸 버튼 등의 이미지를 찾기 위해 윈앰프 스킨 사이트와 윈도우미디어플레이어 스킨 사이트를 뒤지기 시작했다. 박박 뒤졌지만 내가 생각했던 모양과 꼭 들어맞는 모양은 찾기 힘들었고, 며칠을 뒤진 끝에 결국 기본 모양은 내가 새로 짜고 버튼 등만 가져다 쓰는 것으로 결정했다. 뭐 가져다 쓰기만 하는 것도 장난이 아니라서 이미지버튼 만드는데만 이틀이 걸렸지만…

그렇게 ‘만들자’고 결정한 지 대략 한 달만에 웹플레이어를 완성해서 올려놓았는데, 남의 소스 훔쳐다 만든 거라 그런지 몰라도 기능도 좀 불안하고 이게 제대로 돌아가고는 있는지 불안하기도 하다. (올려놓은지 하루만에 윈미플 버전 7.1에서 안돌아간다는 사실 발견… 그날 밤에 부랴부랴 수정) 그러면서도 기왕 만든 김에 기능 이것저것 더 붙여보거나 다른 스킨을 적용시켜볼 궁리를 하고 있는데… 이건 또 무슨 바람이 불거나 무슨 충격을 받아야 착수할 수 있을지는 잘 모르겠다. ‘웹플레이어 제작기’를 쓰려고 작심하고도 열흘이나 지나서야 이제 쓰고있는 판국인데.