r/vibecoding•약 2개월 전•50•11
macOS 메뉴바에서 작동하는 NTS 라디오 플레이어를 '바이브 코딩'으로 만들었습니다
I vibe-coded a NTS Radio Player that lives in your macOS menu bar
핵심 요약
Codex를 활용해 4일 만에 macOS 메뉴바용 NTS 라디오 플레이어를 개발한 프로젝트입니다.
- NTS Dial 개발 — macOS 메뉴바에서 NTS 라디오와 믹스테이프를 재생하는 앱 구현
- 바이브 코딩 활용 — Codex 모델들을 사용하여 기획부터 UI 디자인, 코드 구현까지 4일 만에 완료
- 스큐어모피즘 디자인 — 물리적 라디오 기기에서 영감을 받아 메뉴바 앱에 적용
- 기능적 편의성 — 미디어 키 지원 및 마지막 재생 스테이션 기억 기능 탑재
매일 NTS 듣는데 Atonemo랑 같이 만든 물리 플레이어 진짜 개지림. Teenage Engineering 느낌 나는 디자인 보니까 스큐어모피즘 디자인 한번 해보고 싶더라. 참고용 물리 기기.
그리고 브라우저로 라디오 듣는 거 은근히 리소스 잡아먹어서 짜증 나길래, macOS 메뉴 바에 숨어서 돌아가는 깔끔한 플레이어인 NTS Dial을 직접 만들었음.
기능:
- NTS Radio 1, Radio 2, 그리고 16개 Infinite Mixtape 전부 재생 가능
- 키보드 미디어 키 및 macOS '지금 재생 중' 기능 지원
- 현재 재생 중인 채널 메뉴 바에 표시
- 마지막으로 들었던 채널 기억함
제작 과정:
총 4일 걸림: 디자인 하루, 초기 빌드 하루, 디버깅이랑 QA, 배포에 이틀.
전부 Codex 써서 만들었음:
- 5.6 Sol High: 기획, 기능 개발, 디버깅, 코드 리뷰
- 5.6 Terra Medium: UI 수정
- 5.6 Luna Medium: 세부적인 비주얼 조정
처음엔 Figma MCP 써서 하드웨어 그대로 구현해보려 했는데 결과물이 영 별로라 그냥 처음부터 새로 디자인함. 그 뒤로 Codex 써서 스트림이랑 에셋 긁어오고, 플레이어랑 다이얼 로직 구현하고, Figma UI를 dev mode 켜놓고 컴포넌트 단위로 하나씩 옮기고, 코드 검수하고, GitHub 릴리즈 준비까지 다 끝냄.
4일짜리 실험치고는 결과물 아주 만족스러움. 다들 써보고 의견 좀 남겨줘!
GitHub: NTS Dial 저장소
이 글은 AI의 도움을 받아 편집 및 번역되었습니다.
