Today's Tech (TT)는 토스, 카카오, 라인 등 약 20곳의 국내 주요 기술 블로그 아티클을 매일 자동으로 크롤링 후 AI가 핵심 내용을 요약 및 발행하여 하루에 한 번 슬랙 채널로 전달해주는 테크 뉴스레터 서비스입니다.
아래 링크를 통해 들어가셔서 서비스를 확인해보시고, 슬랙 무료 구독 서비스을 통해 매일매일 오늘의 아티클을 받아보세요!🤗
🌐 Live Url: TT - Today's Tech
🔔 Slack Subscribe: TT - Today's Tech 서비스 구독하기
최근에 약 3주간 사이드 프로젝트를 A to Z로 Claude Code와 함께 만들어보았습니다. 1주 기획, 2주 개발, 3주 QA 및 기능 수정으로 1차 MVP를 완성하였습니다. 작업 과정 뿐만 아니라 도중에 어려웠던 점, 깨달았던 점, 배운 점 등을 낱낱히 상세하게 기록해보고자 합니다.
일단 1탄에서는 아이디어 구상과 프로젝트 설명, 기획안 및 개발 로드맵, 프론트엔드 및 백엔드 설계 구조 등 개발 작업 내용을 위주로 적어보고자 합니다.
‘시간은 참 빨라.. 어제와 오늘의 유행은 달라..’ 하루 아침에 변화하는 기술 트렌드, 나는 오늘도 뒤쳐지는 걸까?
‘업무 시작 전 가볍게 둘러보는 아티클’ 하루에 한번, 매일 아침 하루의 시작을 알리는 기술 아티클
‘바쁜 현대 사회, 핵심만! 요악만!’ 길고 어려운 글, AI가 요약해서 알려줌
‘까먹지 않게 습관으로’ 매일 아침 9시에 슬랙 채널로 링크 자동 발송
아이디어의 발상은 GeekNews 에서 시작되었습니다. 이전 회사의 업무용 슬랙에는 GeekNews 뉴스레터를 받는 채널이 따로 있었는데요. 그 때 팀원들이 각자 여유로울 때 한번씩 아티클을 살펴보며, 인사이트가 될만한 글은 슬랙의 댓글과 전달하기 기능으로 공유했습니다. 아무래도 업무 중일 때는 슬랙을 매일 켜두고 사용하다보니 아티클을 보다 손쉽게 접할 수 있었습니다.
또한, 저는 현재 구독하고 있는 뉴스레터로부터 하루에 하나씩 메일로 아티클을 전달받고 있습니다. 하지만 전송 받는 계정이 개인 계정이기도 하고, 아무래도 원문 분량이 꽤 길다보니 일찍 출근하거나 시간적 여유가 있을 때 아니면 확인하기가 어렵더라구요.
그래서 이 전의 슬랙 채널로 뉴스레터를 받아 접근성이 수월하다는 점과 아티클 원문을 한번에 전부 읽기 어렵다는 점을 접목해서, AI가 아티클을 자동으로 크롤링해 핵심 내용을 요약하고, 슬랙 채널로 매일 정해진 시간에, 하루에 1개 피드를 발행해주는 서비스를 구상하였습니다.
데이터 수집 (크롤링/RSS)
유명 기술 블로그(Toss, 당근, 우아한형제들 등)는 대부분 RSS Feed를 제공합니다. 백엔드에서 rss-parser 라이브러리를 사용해 주기적으로 새 글의 제목, 링크, 본문 일부를 긁어옵니다.
AI 요약 (OpenAI API)
수집된 본문 데이터를 OpenAI API(gpt-4o-mini)에 던져 "개발자 관점에서 글의 핵심 내용 한 장으로 요약(3개의 타이틀에 각 내용 최소 200자) + 관련 기술 태그(AI, DB, Architecture 등) 추출"을 수행합니다.
DB 저장
요약된 데이터와 태그를 데이터베이스에 저장합니다.
블로그 형식의 웹 사이트
메인 페이지에는 오늘부터 지난 날의 피드가 리스트 형식으로 보여집니다. 기술 태그로 필터링이 가능하고, 타이틀 및 섹션 키워드 전문을 검색해서 볼 수 있습니다.
하루에 피드 한 개
하루에 한 주제애 대한 피드 하나만 볼 수 있습니다. 지난 날들의 피드는 자유롭게 볼 수 있으나 내일 피드는 미리보기로 볼 수 있습니다. 단 광고 시청 후 확인 가능! (광고 기능은 아직 미구현)
Slack Webhooks에 연결
슬랙 채널을 추가하면 매일 정해진 시간(오전 9시)에 오늘의 뉴스를 송신합니다.
P0(필수, 2주 내 완성), P1(기간 내 도전) & p1까지 구현하고 배포, P2(추후 고도화/백로그)
백엔드 스케줄러 & AI 크롤러
매일 아침 6시, RSS 피드에서 최신 글 1개를 긁어와 OpenAI API로 요약 후 DB에 저장하는 파이프라인
피드 레이아웃
오늘 날짜의 요약본을 보여주는 기술 블로그 형태의 UI
아카이브 레이아웃 (지난 피드 목록)
서비스 런칭일부터 오늘까지 쌓인 지난 피드들을 날짜별 리스트로 정렬
기술 태그 필터링
아카이브 리스트에서 특정 태그(React, DB 등)를 클릭하면 해당 글만 필터링되어 보여주는 기능
검색 기능
아티클 타이틀 및 요약 섹션 키워드 전문 검색
내일 피드 미리보기 (비회원용 로컬 제한 방식)
p1 단계에서는 로그인/광고가 없으므로, 브라우저의 로컬 스토리지(LocalStorage)를 활용
내일 피드를 보려고 클릭하면 "광고 시청 완료"를 모방한 5초짜리 프로그레스바 애니메이션(Fake Loading)이 뜨고, 완료되면 로컬 스토리지에 unlocked_tomorrow: true를 저장해 다음 날 피드를 임시로 보여주는 방식
기술적으로 로그인 없이도 비즈니스 모델의 프로토타입 인터랙션을 임시 구현
Slack Webhooks 기본 연동
Add to Slack 클릭 시 Slack OAuth URL로 직접 리다이렉트하여 사용자가 webhook URL을 저장하도록 유도
geek-news 슬랙 봇 연동 방식과 동일 (참고: https://news.hada.io/slackbot)
회원가입 및 로그인 기능 (OAuth 2.0)
유저별 북마크(찜하기) 및 마이페이지
실제 배너 광고 SDK (구글 애드센스 등) 탑재 및 수익화
1주차(5.22~5.28, 8일)
목표: p0, p1 구현 완료
데이터 파이프라인 & 백엔드 안정화
Turborepo 모노레포 환경 세팅 및 DB 스키마 정의
RSS parser + OpenAI API를 활용한 '하루 1개 요약 생성' 크론탭/스크러버 구현
테스트 코드로 AI가 보낸 요약 데이터가 DB에 규격대로 잘 들어오는지 검증
프론트엔드 UI/UX 및 클라이언트 로직 완성
Next.js 기반 메인 피드 및 아카이브 페이지 UI 개발 (Shadcn UI 활용)
태그 필터링 및 날짜별 아카이브 렌더링 최적화
로컬 스토리지를 활용한 '내일 피드 미리보기(가짜 광고)' 인터랙션 추가
2주차(6.8~6.12, 5일)
목표: 서버 + 웹 + DB 배포, 슬랙 webhooks 연동, 개발 문서 작성, QA 및 운영
서버 + 웹 + DB 배포
슬랙 webhooks 연동
QA 및 운영
영역 | 기술 |
|---|---|
모노레포 | Turborepo 2 |
프론트엔드 | Next.js 16 (App Router), React 19, TypeScript |
UI | shadcn/ui, Base UI, Tailwind CSS 4, Lucide React |
백엔드 | Express 4, TypeScript, node-cron 3 |
DB | PostgreSQL 17, Prisma 6 |
OPEN AI | OpenAI SDK 4 (gpt-4o-mini) |
배포 | Vercel (web), Railway (server), Supabase (PostgreSQL) |
패키지 매니저 | npm 10 (workspaces) |
독립 배포 단위인 apps/web과 apps/server를 단일 레포로 관리합니다. Turborepo의 태스크 캐싱 덕분에 변경이 없는 앱은 빌드를 건너뜁니다.
web(:3000) ──fetch──▶ server(:4000)/api/v1/...
│
Prisma ORM
│
PostgreSQL (Supabase)RssSource ➡️ Article (1:N)
여러 기술 블로그로부터 주기적으로 수집된 원본 아티클들을 누적 저장하는 구조입니다. guid 유니크 키를 통해 중복 수집을 방지합니다.
Article ➡️ Feed (1:1)
수집된 수많은 아티클 중, 하루에 단 하나의 아티클만 엄선하여 요약 피드로 발행한다는 기획(Daily One-pick)이 Feed.date(Unique) 및 Feed.articleId(Unique) 제약 조건으로 명확히 강제되어 있습니다.
Feed ➡️ FeedSection (1:N, Cascade)
"3개의 타이틀과 각 최대 5줄의 내용"이라는 AI 요약 요구사항을 유연하게 수용하기 위해, 피드 하나가 여러 개의 섹션을 가질 수 있도록 쪼갰습니다. order 필드로 순서를 보장하며, 피드가 삭제되면 요약 본문도 함께 지워집니다.
Feed 🔀 Tag (N:M 교차 테이블 FeedTag)
하나의 피드가 여러 기술 태그(React, DB 등)를 가질 수 있고, 하나의 태그가 여러 피드에 붙을 수 있는 구조입니다. 추후 메인/아카이브 페이지에서 태그 필터링을 고속으로 수행하기 위한 표준 설계입니다.
SlackSubscriber (독립 테이블)
유저 세션(로그인) 없이 Webhook URL만 관리하므로 회원 정보와의 연동 없이 독립적으로 스케줄러가 참조하여 매일 아침 9시에 큐를 발송하기에 매우 가볍고 직관적인 구조입니다.
Feeds
GET /feeds -> 아카이브 피드 목록 (PUBLISHED만)
GET /feeds/search?q={query} -> 검색 (섹션 타이틀 기반, PUBLISHED만)
GET /feeds/today -> 오늘(KST) PUBLISHED 피드 상세
GET /feeds/tomorrow -> 내일(KST) DRAFT 피드 상세 (미리보기용)
GET /feeds/:date -> 날짜별 피드 상세 (DRAFT/PUBLISHED 모두 조회됨)
Tags
GET /tags -> 전체 태그 목록 (이름 오름차순)
DRAFT | PUBLISHED | |
|---|---|---|
의미 | 내일 피드 (대기, 비공개) | 오늘 피드 (공개) |
생성 시점 | 07:00 summarize 실행 시 | 08:00 publish 실행 시 (DRAFT → PUBLISHED 전환) |
API 노출 |
|
|
자동 크롤러 실행
06:00 KST → crawl.ts → RSS 수집 → Article 저장
07:00 KST → summarize.ts → Article 선정 → AI 요약 → Feed(DRAFT, date=내일) 생성
08:00 KST → publish.ts → 오늘 DRAFT → PUBLISHED 상태 전환
09:00 KST → slack-notify — 구독자에게 알림 발송
summarize는 항상 내일 날짜로 DRAFT를 만들고, 다음 날 08:00에 publish가 그걸 PUBLISHED로 바꿉니다.크롤링 성공 시 뜨는 로그
[catchup] No feed for today. Running catch-up pipeline...
[crawl] Starting RSS crawl...
[crawl] Done. New articles: 3 // 숫자 > 0
[summarize] Starting...
[summarize] Processing: "아티클 제목"
[summarize] Feed created for 2026-05-29 // 내일 날짜
[summarize] Starting...
[summarize] Today's feed already exists (2026-05-27)
[summarize] Processing for 2026-05-28 (DRAFT): "우아한공방의 새로운 동료, 시스템 맥락을 가진 챗봇서비스 개발기(feat. RAG)"
[summarize] Feed created for 2026-05-28 (DRAFT) // 오늘 날짜
[summarize] Done.프론트엔드 프로젝트 내 데이터 페칭은 Server Component(SSR/ISR)와 Client Component(CSR)를 필요한 기능에 적절히 사용할 수 있도록 의도적으로 분리하여 구현했습니다.
피드: 하루에 1회만 업데이트 되므로 SSR + ISR로 초기 렌더링 성능과 SEO를 확보
이전 피드 목록, 검색: 실시간으로 데이터가 필요하므로 무한스크롤을 사용, CSR로 분리
[초기 페이지 로드 — Server Component]
Browser ──요청──▶ Vercel 서버(Node.js)
│
│ fetch() — 서버 내부에서 실행
▼
Railway API
│
▼
Vercel 서버 ──완성된 HTML──▶ Browser
[무한스크롤 / 검색 — Client Component]
Browser ──fetch()──▶ Railway API (직접 호출)따라서 Server Component에서 실행하는 함수들은 캐시 옵션을 1시간 ISR(revalidate: 3600)로 지정하였고, Client Component에서 실행하는 함수들은 캐시를 저장하지 않는 캐싱 전략을 사용했습니다.
다음 포스트에서는 슬랙 채널 알람 플로우와 배포 계획 및 과정, QA를 통해 발생한 이슈들에 대한 트러블 슈팅 등의 주제를 다뤄보겠습니다. 다시 한번 많은 관심 부탁드립니닷.🙏