(내가 쓰려고 만드는) 간단한 팟캐스트 웹앱 제작기 #1

이런저런 라디오와 팟캐스트를 즐겨 듣고 있다. 특히 잠자리에서 책이나 영화를 소개하는 팟캐스트를 듣다 잠드는 습관이 있다. 보통 30분에서 1시간 정도 종료 타이머를 맞춰 놓고 놓는다. 애플 팟캐스트, 팟빵, 팟티(종료됨) 등 여러 앱을 전전하다 네이버 오디오클립에 정착한 지 좀 됐다. 심플하고 군더더기 없는 UI/UX가 마음에 들었다. 그런데 최근 서비스 종료를 알리는 공지사항이 올라왔다. 참으로 난감한 일이 아닐 수 없다. 그래서! 이왕 이렇게 된 거 시간 여유도 있고 재밌을 것 같아서 직접 만들어 보기로 했다. 심지어 스토어에 올릴 필요도 없는 웹앱으로 하기로 했다.

나름 개발자 타이틀을 달고 있지만 게임 클라이언트 개발 외에 일반(?) 개발 경험은 거의 없다. 일단 ChatGPT한테 어디서부터 시작하면 좋을지 물어봤다. 위와 같이 답을 줬는데 하드코딩으로 정말 간단하게 동작만 하는 수준을 목표로 하고 만들기 시작했다. 목록이란 것도 없고, 요즘 가장 즐겨 듣는 '김혜리의 필름클럽'의 최근 다섯 개 에피소드만 들을 수 있는 초간단 필름클럽 전용 플레이어다.

https://github.com/Hamjoon/simple-podcast

GitHub - Hamjoon/simple-podcast

작업 결과물은 github에 올려놨다. 코드 작업은 거의 100% Claude Code에게 맡겼다. 요즘 비슷한 서비스들이 많이 나오고 있지만 이미 Claude Code가 결과물도 만족스럽고 손에 익어서 굳이 넘어갈 필요를 못 느끼고 있다. 참고로 직전 회사에서 마지막으로 한 작업이 웹 대시보드를 만드는 것이었는데 기반 지식이 없는 상태에서 (배포용이 아닌 내부 보고용이긴 했지만) Claude Code로 반나절도 안 걸려서 완성했다.

내 폰(iPhone 14 Pro Max)에서 실행(이라기 보다 브라우저에서 띄운)한 모습이다. 잘 동작한다. Claude Code에 작업을 요청했던 프롬프트들은 찾을 수가 없고, 또 별 게 없기도 해서 생략한다. 사실 너무나 처참한 콩글리쉬 프롬프트라 공개하기에 많이 부끄럽다. 옛날 사람이라 터미널 콘솔에 한글을 쓰는 것이 거북해서 꾸역꾸역 영어 프롬프트만 쓰고 있다. 개떡같이 말해도 찰떡같이 알아 듣는 Claude Code님이 고마울 따름이다. 블로그 포스팅을 위해 완성된 프로젝트를 다시 설명해 달라고 요청해 봤다.

Technical Architecture 항목에 'Pure vanilla JavaScript - no frameworks, no build process, no dependencies'라고 설명한 것이 재밌어서 혼자 피식 웃었다. 나머지 설명 내용을 모두 옮긴다.

---

Technical Architecture

Pure vanilla JavaScript - no frameworks, no build process, no dependencies:

1. index.html - Structure with:
  - Header showing podcast name
  - "Now Playing" section with album art and episode info
  - Native HTML5 <audio> player controls
  - Scrollable list of episodes
2. app.js - Logic including:
  - Hardcoded episode data (app.js:3-46) from SBS RSS feed
  - Simple state: currentEpisode tracks what's playing (app.js:49)
  - Episode rendering from the data object (app.js:64-71)
  - Click handlers to switch episodes (app.js:94-110)
  - Auto-play next episode listener (app.js:125-134)
3. styles.css - Modern UI with:
  - Purple gradient background (#667eea to #764ba2)
  - Card-based design with rounded corners
  - Active episode highlighting
  - Responsive layout for mobile devices

Key Features

- Auto-play next: When an episode ends, automatically starts the next one (app.js:125-134)
- Visual feedback: Active episode highlighted in purple (styles.css:116-119)
- Responsive design: Adapts layout for mobile screens (styles.css:159-177)
- No server required: Can run by simply opening index.html in a browser

Current Episode Data

Contains 5 episodes featuring conversations with film directors (윤가은, 박찬욱) and film discussions, ranging from 26
minutes to nearly 2 hours in length.

---

https://hamjoon.github.io/simple-podcast/

김혜리의 필름클럽

작업 결과물은 간단히 github page를 통해서 배포했다. 여기에 기능을 조금씩 붙여나가려고 한다. 일단 종료 타이머 기능이 가장 급하다. 끝.