지난 1주차에는 클로드코드에 설치한 /thinking-partner와 대화를 하며 만들고 싶은 기능을 기획하는 단계를 진행했었다.
일차적으로 기획한 내용은 <텔레그램 투자메세지 분류기> 였다.
평소 본업 업무를 할때 가장 큰 pain point는 투자 정보의 홍수 였고,
하루에 수백개씩 쌓이는 텔레그램 메세지들을 몇가지 기준들을 활용해 분류/요약해줘서
매일 정보 정리에 쓰는 시간을 단축할 뿐더러, 중요한 내러티브를 놓치는 것을 최소화할 수 있는 기능을 만들어보고 싶었다.
1주차에는 메세지의 분류 기준, 필터링 규칙 등을 세웠고 텔레그램 API와 연동을 통해 샘플 메세지들로 분류 기준 검증등을 진행하였다.
(자세한 1주차 내용은 아래 링크에)
https://www.gpters.org/nocode/post/planning-classification-system-talking-HZVA1sKw97ngq0h
--
📝 1주차 사례발표에서 받았던 피드백
스터디장님이 다음과 같은 피드백을 주셨다. (정확하게 피드백을 이해한게 맞는지 모르겠지만.. 일단 이해한대로..!)
텔레그램 메세지들은 대량 메세지들이다보디, 모든 작업을 클로드코드로 하기보단 n8n, supabase 등을 활용해 앞단을 만들어두는게 편할 것.
클로드코드에 n8n MCP 연결이 가능하니, n8n + 클로드코드 같이 활용하는 구조를 짜볼 것.
이 기능의 아 키텍처 구체화도 진행하면서, 동시에 이 기능이 프론트엔드에는 어떻게 구현될지도 분리해서 같이 진행해볼 것.
피드백 이후, 해야할 게 명확해졌다.
<텔레그램 투자메세지 분류기> 기능의 시스템 아키텍처 구체화 (n8n + Supabase+ 클로드코드를 활용).
사실 <텔레그램 투자메세지 분류기>는 내가 만들고 싶은 투자정보 대시보드 내의 일부 기능일 뿐.
이번 기회에 내가 만들고자하는 대시보드는 어떻게 생겼고, 그 안에 <텔레그램 투자메세지 분류기>가 어떻게 배치되면 좋을지 전체적인 IA를 재구상해볼 것.
이를 기반으로 이번주 과제인 프론트엔드 페이지까지 만들어보기 (Google AI Studio,GitHub, Vercel)
--
🔧 이번주 작업 과정들
1. 시스템 아키텍처 구체화 -- 비개발자가 백엔드를 설계하다.
솔직히 n8n, MCP, 깃클론, Supabase, Docker, API 호출 이런 용어들이 전부 낯설었다.
n8n을 만져본 적이 없어서, 유튜브 영상들을 몇개 찾아보며 대략의 n8n 워크플로우에 대해 공부했다.
그리고 기존 클로드코드 단독활용 대신 n8n MCP를 이 작업에서 왜 같이 활용해야하는지도 좀 명확히 이해하고 싶었다. 클로드에게 물어보니 아래와 같은 답변이 나왔다.. 핵심은 뭔가 #병렬처리, #배치처리 노드가 내장되어있다는 점(?) 인것 같았다.
이후 Claude Code에게 물어가며 '텔레그램 메세지 분류기' 기능의 시스템 아키텍처를 구체화 시켰다.
대량 정보를 처리하기 때문에 n8n MCP를 연동하는 것이 더 좋을 것 같은데, n8n이 해야 할 것과 Claude Code가 해야 할 것 구별해줘.Claude Code가 역할을 깔끔하게 나눠줬다:
n8n (자동화 도구): 2~4시간마다 텔레그램 수집 → AI 분류 → DB 저장 → 알림 발송
Supabase (데이터베이스): 분류 결과 저장
Next.js + Vercel (웹사이트): DB에서 읽어서 대시보드에 표시
핵심 포인트: n8n이 DB에 데이터를 넣으면, 웹사이트는 접속할 때마다 자동으로 최신 내용을 보여준다
이렇게 텔레그램 분류기 기능은 어느정도 구조가 잡힌 것 같았다.
--
2. 세부 기능단에서 대시보드로 확장하기 - 웹페이지 IA 고도화
처음에는 <텔레그램 투자메세지 분류기> 하나만 만들 생각이었다.
그런데 생각해보니, 내가 최종적으로 만들고 싶은 대시보드는 단순히 텔레그램 분류기만 덩그러니 있는 페이지는 아니었다.
텔레그램 외에도 매일 팔로업 하고있는 블로그 3~4개, PDF로 다운받아보는 글로벌IB 리포트, 주간 단위로 정리하고 있는 뉴스소스들, Economist, Stratechery 등 구독 페이지까지
참고하고 있는 좋은 소스들은 많은데, 소스들이 너무 분산되어 있어서 매일 1시간 이상을 정보 정리에 쓰고 있었기에 이런 기능들도 추가하고 싶었다.
우선, "Telegram Investment News Classifier"에서 "Global Market Intelligence Dashboard"로 프로젝트명도 바꿨다.
그리고, 다시 /thinking-partner와의 대화를 통해 최종 메뉴 구조(IA)는 다음과 같이 짰다. (이제 훨씬 대시보드의 모양새를 갖춰 가는것 같았다!)
📡 Telegram Classifier: 텔레그램 메시지 자동 분류 (Breaking/Macro/Theme/Stock)
📰 Daily Story: 블로그 자동 수집 + 일일 PDF 리포트 요약
📊 Weekly Wrap & Warm Up: 인포맥스/Economist/Stratechery 주간 종합
🏗️ Architecture: 시스템 구조 시각화 (진도 추적 포함)
--
3. Architecture 시각화 페이지 설계 — 타 스터디의 베스트사례 참고해보기!
21기 내삶자동화 스터디의 도시아재님이 만드신 OpenClaw 에이전트 "콜라 부동산 대시보드" 사례가 좋아,
벤치마크로 가져와서, 지금 설계하는 각 기능들의 시스템 구조를 시각화하는 페이지를 만들고 싶었다.
(참고링크: https://www.gpters.org/nocode/post/openclaw-first-lesson-creating-ebaYC91WOGWoGQ5)
클로드코드에게 다음과 같이 주문했다.
진도체크 용도 및 시스템 아키텍처 파악 용도로, 만들어야 하는 자동화 투자정보 메뉴들을 시각화하고 싶음. + 콜라 부동산 대시보드 URL 같이 첨부각 기능들을 어떻게 구현할지에 대한 HOW(방법론)이 잡히고 시각화하니 속이 시원해지는 느낌이었다.
텔레그램은 API로, 블로그는 RSS로, PDF는 수동 업로드로, 뉴스/구독사이트는 크롤링을 하면 됐다.
→ 결국, 수집 방식은 다 다르지만 Claude API → Supabase → 대시보드라는 공통 구간으로 합류한다는 걸 시각적으로 정리해볼 수 있었다.
(이 Architecture 페이지는 아래 Vercel로 배포한 결과물 링크 내 하나의 사이드바로 들어가 있다.)
--
4. 프론트 페이지 만들기 — Color-Set 정보만 줬더니, 디자인 퀄리티 있는 페이지 하나가 뚝딱
스터디장님이 주신 Color-Set.md 파일과, 디자인레퍼런스 사이트(Superdesign)를 통해 내 웹페이지의 대략적인 디자인 소스들을 정리했다.
그런뒤에, Google AI Studio에 IPO-Webpage-Plan-Template.md (앞선 클로드코드와 대화로 기획한 페이지의 내용을 정리한 파일), Color-Set.md를 넣고 Next.js 기반 웹사이트를 만들어달라고 했다.
한 1~2분만에 전체 페이지가 구현이 되었고, 사이드바에 총 6개 메뉴를 가진 페이지가 나왔다.
Home 페이지
Telegram Classifier 페이지
Daily Story 페이지 (블로그 + PDF 영역)
Weekly Wrap 페이지
Architecture 페이지 (통합 흐름도 + 기능 카드 9개 + 진도 추적)
Setting 페이지 (텔레그램 채널, 블로그 RSS 추가 등)
자잘한 수정사항들은 AI Studio와의 대화를 통해 수정해나갔다.
중간에 디자인 스타일(Newsprint)도 바꿔보고 싶어서 color-set-2.md를 만들어 아애 UI도 싹 고쳐보았다.
또한 Google AI Studio 말고, 클로드코드에서도 Next.js 페이지를 만들어주길래 부탁해보았는데, 디자인은 AI Studio가 더 잘하는듯 보였다.
다만, 6개 페이지들 중 'Achitecture 페이지'는 클로드코드가 더 잘만들었길래 캡쳐해서 AI Studio에게 부탁하니, 클로드코드 버전으로 금방 만들어주었다.
이후, 이 내용을 GitHub으로 커밋하고, Vercel 에 GitHub 레포지토리를 선택하니 Vercel에도 배포가 되었다!
결과물 공유 → https://global-market-intelligence-ten.vercel.app
※주의※ 아직 n8n, Supabase로 텔레그램과 블로그 내용들을 연결하는 백엔드는 붙이지 않은 상태임. 위 vercel 링크에 있는 투자정보는 모두 샘플메세지들이거나, 혹은 아주 오래된 뉴스임. 실질적인 내용이 채워지기 이전, 웹페이지의 뼈대를 잡아두었다라고 생각하면 될 것 같다.
--
🚀 후기 & 앞으로의 계획
결론적으로, 내가 만들고자 했던 웹페이지 내 기능들의 핵심은 동일했다.
분산된 정보 소스 → 자동 수집 → AI 분류/요약 → 한 곳에서 확인
이번주에 AI Studio로 프론트페이지도 만들었고, GitHub 커밋과 Vercel 배포도 해봤으니, 추후 계획은 백엔드 부분을 실제 붙여보는 것이다.
내가 하고자 하는 기능들이 대부분 n8n으로 만들어봐야하는 것이어서, 이 툴에 대해 좀 공부가 필요할 것 같긴 하다.
다만, 그래도 희망적인것은 요즘은 클로드코드에 n8n MCP를 설치하면, 클로드코드가 알아서 n8n 워크플로우를 짜준다고 한다..!
데이터 저장소 Supabase를 웹페이지 Next.js로 연결하는 것도 배워야 한다.
기능들 중에서는, 처음 계획했던대로 <텔레그램 투자메세지 분류기> 기능부터 만들어볼 것이다.
Architecture 페이지(통합 흐름도 + 기능 카드 9개 + 진도 추적)도 만들었으니, 하나씩 기능들이 만들어질때마다 진도를 체크할 수 있고, 웹페이지가 확장되는 모습을 시각화할 수 있게 된 것도 큰 수확이었다.
