ShellSignal: 신호를 원하고 잡음은 원하지 않는 개발자를 위한 터미널 대시보드
Source: Dev.to
이 작품은 DEV Weekend Challenge: Community 에 대한 제출물입니다.
커뮤니티
나이지리아의 기숙사에 사는 학생 개발자로서, 내 정신적·디지털 대역폭은 엄격히 제한돼 있다. JUPEB 시험 공부와 모바일 화면으로 기술 산업을 따라잡으려는 사이에 현대 웹은 지치게 만든다. 무거운 JavaScript 프레임워크, 알고리즘 피드, 클릭베이트가 신호‑대‑잡음 비율을 끔찍하게 만든다.
나는 이것을 주니어 엔지니어, 독학 개발자, 그리고 잡음 없이 신호만을 원하는 학생들을 위해 만들었다. 부풀려진 웹을 없애고 개발자들이 가장 집중하고 통제할 수 있는 환경, 즉 커맨드 라인에서 높은 가치를 지닌 기술적 맥락을 제공하는 안식처가 필요한 사람들을 위한 것이다.
내가 만든 것
ShellSignal은 소음(노이즈)을 걸러내기 위해 설계된 모바일‑우선 레트로‑터미널 대시보드입니다.
- 실시간 터미널 바 – 현재 컨텍스트에서 바로 실행 가능한 Bash 스크립트를 생성하기 위해 LLM을 사용합니다. 마크다운 포맷이나 대화형 여백 없이, 복사‑붙여넣기만 하면 바로 배포 가능한 순수 쉘 명령을 제공합니다.
- Dev Health 배지 – 최신 기술 기사들을 모아 실시간 GitHub 저장소 건강 지표와 연관시킵니다. Stars와 Open Issues를 매핑함으로써, 오픈‑소스 프로젝트가 활발한지, 잘 관리되고 있는지, 아니면 방치되고 있는지를 링크를 클릭하기 전에도 즉시 파악할 수 있습니다.
- AI 요약 드롭다운 – 각 피드 항목에 대한 필요 시 요약을 제공해 읽는 시간을 최적화합니다.
- Daily Brief 뷰 – 하루 동안의 매크로 기술 트렌드를 요약합니다.
데모
🔗 실시간:
코드
(여기에 저장소 링크(들)를 추가하세요)
🟢 ShellSignal
소프트웨어 엔지니어를 위한 제로 노이즈, 터미널 미학 일일 대시보드.
ShellSignal은 상위 개발자 스토리를 집계하고, 오픈소스 건강성을 평가하며, AI를 사용해 초간결하고 기술적인 executive summary를 생성하는 자동화된 뉴스룸입니다. 완전히 클라우드에서 실행됩니다.
Tech Stack
✨ Features
-
Daily Automated Briefs
Vercel Cron 작업이 매일 아침 실행되어 그날의 주요 기술 뉴스를 선별합니다. -
AI Executive Summaries
OpenRouter와 통합(프론티어 모델인 Grok 및 Llama 사용)하여 수시간의 독서를 세 개의 날카롭고 기술적인 핵심 포인트로 압축합니다. -
Dev Health Metrics
GitHub API를 통해 트렌드 레포지토리를 교차 참조하고, 실시간 별 수, 오픈 이슈, 마지막 커밋 타임스탬프를 표시합니다. -
Native Markdown Parsing
맞춤형 React‑Markdown 파이프라인이 AI 출력물을 직접 네이티브 CSS 변수에 매핑하여 매끄러운 터미널 미학을 제공합니다. -
Edge‑Optimized
Next.js App Router와 적극적인 캐싱 전략으로 구축되어 즉시 로드 시간을 제공합니다.
🏗️ 시스템 아키텍처
크론 트리거
- Vercel은 매일 보안된 API 라우트 (
/api/cron/daily-brief)를 호출합니다. - …
How I Built It
Next.js (App Router)
- 전역
AppShell컴포넌트가 라우트 간 상태를 유지하므로, 터미널 바, 시스템 HUD, CRT‑스캔라인 오버레이가 Live Feed와 Archives 사이를 이동할 때 재렌더링 없이 매끄럽게 지속됩니다.
LLM Integration via OpenRouter
- 터미널 생성기는 Gemini 2.0 Flash 로 구동됩니다.
- 핵심 기술 과제는 모델이 실행 가능한 Bash 코드만 반환하도록 강제하는 엄격한 프롬프트 엔지니어링이었으며, UI 파손을 방지하기 위해 마크다운 백틱을 적극적으로 제거했습니다.
Pure CSS Architecture
- 레트로 미학을 완전하게 제어하기 위해 무거운 UI 라이브러리를 전혀 사용하지 않았습니다.
- 매트릭스‑그린 글로우, CRT 스캔라인, 깜박이는 커서 애니메이션은 커스텀 CSS 변수와 키프레임으로 구현되어 DOM을 가볍게 유지합니다.
Data Fetching
- 커스텀 API 라우트가 Hacker News 로부터 실시간 스토리를 집계합니다.
- GitHub API에 대한 병렬 요청을 통해 각 스토리에 Dev Health 메트릭을 계산·첨부한 뒤 클라이언트에 데이터를 제공합니다.
Built with focus, from a hostel room in Nigeria. For every developer who just wants the signal. 🖥️