나만의 아침 대시보드 만들기 (0) 전체 구성

아침에 확인하는 것들 — 날씨, 일정, 뉴스, 교통, 시세 — 을 한 화면에 모으고, 버튼 하나로 읽어 주기까지 하는 개인 대시보드를 만들어 쓰고 있다. 태블릿을 거치대에 세워 두고 출근 준비를 하면서 본다. 어떻게 만들었는지 묻는 사람이 있어서 몇 편으로 나눠 적는다. 각 편은 대시보드-따라하기 라벨에 모여 있다.

만들면서 정한 원칙

• 외부 패키지 없이. Node 24 의 내장 기능(http, fetch, node:sqlite, --env-file)만 쓴다. npm install 이 없으니 빌드가 빠르고, 몇 달 뒤에 열어도 깨져 있지 않다.
• 화면은 HTML 파일 하나. 프레임워크도 번들러도 없다. 서버가 주는 JSON 을 60초마다 받아서 다시 그린다.
• 카드 하나 = 수집기 파일 하나. 새 카드를 붙일 때 건드리는 곳이 정해져 있어야 계속 늘릴 수 있다.
• 수집이 실패해도 화면은 멀쩡하게. 외부 API 는 반드시 죽는다. 실패하면 직전 값을 그대로 보여 주고 조용히 다시 시도한다.

전체 구성

외부 API / RSS / 캘린더
        │  (수집기마다 정해진 주기)
        ▼
  collectors/*.js ──▶ 스케줄러(메모리에 최신값 보관) ──▶ GET /api/state
                              │                              │
                         LLM 요약·번역                  index.html (60초 폴링)
                              │
                       브리핑 원고 ──▶ TTS ──▶ 음성 재생

편별 내용

1. 뼈대 만들기 — 의존성 없는 서버, 수집기 규약, 실패에 강한 스케줄러, 태블릿 화면 요령
2. 데이터 모으기 — 키 없이 쓸 수 있는 소스들과 공공 API 에서 밟은 함정
3. LLM 붙이기 — 번역·요약·브리핑 원고, 그리고 비용을 수십 분의 일로 줄인 방법
4. 읽어 주는 대시보드 — 음성 합성, 기다리지 않고 바로 재생하기, 모바일 브라우저의 제약

배포

컨테이너 하나로 돌린다. 서버에 올리고 주소를 붙이고 로그인 뒤로 숨기는 과정은 홈서버-따라하기 시리즈에 따로 적었다. 개인 일정과 관심사가 그대로 드러나는 화면이므로 공개 주소에 그냥 올려 두지 말고 반드시 인증을 앞에 세운다.

미리 말해 두는 것

이런 프로젝트는 "완성"이 없다. 처음에는 카드 여덟 장이었는데 쓰다 보니 스무 장을 넘겼다. 그래서 이 시리즈도 특정 카드의 코드보다, 카드를 계속 붙여도 무너지지 않는 구조와 그 과정에서 겪은 문제에 무게를 둔다.