개발자가 Claude Code로 YouTube 뉴스 멀티스트림 뷰어를 구축합니다

한 개발자가 자동 조정 그리드 레이아웃으로 수십 개의 실시간 뉴스 스트림을 동시에 표시하는 무료 YouTube 뉴스 멀티스트림 뷰어인 Beholder를 구축했습니다. 이 프로젝트는 새로 설치된 Raspberry Pi에서 Claude Code를 사용하여 만들어졌습니다.

Claude Code 사용 방법

개발자는 Claude Code가 설치된 새로운 Raspberry Pi를 설정하여 개발 및 디버깅에 필요한 모든 것을 설치할 수 있는 권한을 부여했습니다. 개발자에 따르면 Claude Code는 다음과 같은 작업을 수행했습니다:

• 적응형 스트림 그리드, 채널 브라우저, 설정 패널, 티커 바, 모달, 토스트 알림, 모바일 반응형 레이아웃을 위한 React 컴포넌트를 포함한 전체 프론트엔드 UI 구축
• API 오류가 침묵하지 않도록 오류 처리를 위한 토스트 알림 시스템 생성
• 검은 상자만 표시하는 대신 YouTube 링크와 제거 버튼이 포함된 오버레이로 끊어지거나 오프라인 상태인 스트림을 표시하는 스트림 오류 감지 기능 추가
• 데이터 수집에 대한 YouTube 이용약정 준수를 위해 평가 지원
• 실시간 스트림 데이터베이스와 이를 업데이트하는 스캐너 소프트웨어로 인한 버그 디버깅 및 수정
• "Hey Claude, CNN URL이 잘못되었어요, 다시 스캔하고 데이터베이스를 업데이트해 주세요"와 같은 관리 작업을 계속 처리

앱 기능

Beholder는 다음과 같은 기능을 제공합니다:

• 6개 대륙의 200개 이상의 실시간 뉴스 채널을 화면 크기에 자동으로 맞춰주는 동적 그리드로 제공
• 지역별(미국, 유럽, 아시아, 아프리카, 라틴 아메리카) 또는 미디어 편향성 등급별로 정리된 채널
• 30개 이상의 RSS 피드(AP, Reuters, BBC, CNN 등)에서 헤드라인을 가져오는 실시간 스크롤링 뉴스 티커
• 상세한 시세, 주요 변동 종목, Yahoo Finance 통합을 포함한 실시간 주식 시장 티커
• Cloudflare Radar 기반의 인터넷 중단 티커로 위치 및 원인별 활성 중단 상황 표시
• 뉴스를 로파이 음악, 만화, 자연 카메라, 명상 스트림으로 전환하는 "휴식 모드"
• 다른 스트림을 계속 보면서 특정 스트림을 확대할 수 있는 고정/포커스 기능
• 스트림별 및 전체 음소거, 자막 토글, 조정 가능한 그리드 열 및 글꼴 크기
• 모바일, 태블릿, 데스크톱 호환성

여러 YouTube 탭을 여는 것과의 주요 차이점

• 백그라운드 스캐너가 현재 실제로 라이브 중인 채널을 지속적으로 발견하여 오래된 링크 없음
• 모든 채널에 표시된 편향성 라벨로 사용자가 의식적으로 뉴스 소비를 다양화하거나 원하지 않는 콘텐츠를 숨길 수 있음
• CNN, BBC, Al Jazeera, Fox가 같은 사건을 어떻게 다루는지 나란히 볼 수 있는 기능

기술 스택

• 프론트엔드: React, Vite, Cloudflare Pages
• 백엔드: Python/FastAPI, PostgreSQL, Railway
• 외부 API: YouTube API, Yahoo Finance API, Cloudflare Radar API, RSS

개발자는 이 도구가 속보 모니터링을 위한 개인 도구로 시작하여 발전했다고 언급했습니다. 앱은 https://beholder.news에서 라이브로 운영 중입니다.