소개
안녕하세요. 샘알토란입니다.
지난 노션n8n롱폼스터디에서 이빛나 starry님 사례를 보고 저도 한번 뉴스 레터를 만들고 싶었습니다.
늘 그랬듯
잠깐 샛길로 세서 만든다는게 더 깊게 진행되고 있네요.
하다보니.. 데이터를 모으고, 가공을 해서 다양한 포멧으로 배포하고 싶다는 생각까지 들었습니다.
작년부터 미국주식에 관심이 많아져서
많은 지표들은 보고 참고하고 있는데요.
관심이 많지만 공부는 그만큼 안하고 있어서
항상 아쉬움이 있었고, 내가 매일 공부하고 트레킹하는 것,
매일 뉴스 웹사이트를 찾아다니는 게 번거롭고, 내가 원하는 정보만 쏙쏙 모아서
정리해서 하나만 보면 좋겠다고 생각이 들었습니다.
일단 주요지표는
NASDAQ
S&P 500
Dow John's Index
VIX
CNN Fear and greed
은 공통이고.
원하는 Ticker를 사용자가 선택하면,
그에 맞는 뉴스 + 간밤 동안 시세변동
하여 지면 뉴스 1면 처럼 만들고 싶었습니다.
그 중 간단하게 주요 시장파악을 할때 보는
finviz.com에서 제공하는 시각화 자료가 있는데요!
(아시는 분들은 다 아시는)
이 것을 데이터로 만드는 건 너무 어려울 것 같고,
매일 장이 마감되면 스크린샷하면 되지 않을까?
싶었습니다.
그래서 오늘은 n8n에 Puppeteer를 설치해서, 필요한 웹페이지를 자동으로 캡처하고 저장하는 모듈을 만들었습니다.
데이터 두더지를 잘해서
뉴스레터
텔레그램챗봇
등으로 잘 발전할 수 있을까요?
결론부터 보고 가시죠!
아무 멋지게 웹사이트 캡처링이 되었습니다.
오랜 try & error를 거쳤는데. 아래에서 자세히 썰을 풀도록 하겠습니다.
진행 방법
사용한 도구
🛠️ n8n (워크플로우 자동화)
🐳 Docker (환경 구성)
🤖 ChatGPT (도움 및 설계 조언)
🕷️ Puppeteer (스크린샷 기능) -> 두 가지 방식이 있습니다.
n8n custom node -> 다운받으면 됩니다.
npm external node -> 이건 설치해야합니다.
동작 방식
이번 실습에서 저는 docker image build 단계에서 n8n에 추가
JavaSript Package를 설치해서 진행하고자 하였습니다.
dockerfile, docker compose 환경 변수, 등 n8n 자체 환경을 건드는 다양한 시도를 통했고
Code node에서 실행하고자 하였고 성공했습니다!
그런데 말입니다...
사례를 열심히 쓰다 알게된 사실인데요....
알고 보니 이전에 설치해둔 n8n puppeteer custom node로 진행했던거 더라구요?
열심히 package 설치하고 인식 시키려하였는데 그냥 딸깍으로 되는거 였습니다!!!
그래도.. n8n 추가 package 설치하는거 알고, 적용하는거 까지 찾았으니 한잔해
결론은
n8n custom node를 지금 하려는 것
충분히 가능하고 그것으로 하는 것을 추천드립니다.
n8n 의 custom function 노드에서 Puppeteer 스크립트를 실행해야합니다.
Q: 엇? 저는 그 노드가 없는데요?
A: 커뮤니티 노드를 설치하시면 됩니다.
(잠깐!) Community node 설치하는 방법
Settings -> Community nodes -> install -> browse 접속 이름 검색
검색한 package 이름을 npm Package Name에 넣고 Install!
다시 puppeteer 노드를 엽니다.
URL에 정보 넣고 누르면 끝!
당연히 커스텀이 가능합니다. -> 따로 puppeteer package를 설치하지 않아도 되는 이유...
puppeteer의 operation 중에서 Run custom Script를 활용하면
다양하게 컨트롤이 가능합니다.
예를들어
브라우저 창사이즈
스크린샷 크롭(위치,크기 등등)
웹페이지 로딩 기다리기
등등 다양한 것들이 가능합니다.
저는 GPT에게 물어서 간단하게 코드를 짰습니다.
Q2 : 스크린샷은 완료했는데 한글이 깨져보여요.
A : n8n이 작동되는 서버 혹은 docker 환경에 한글폰트가 없어서 그렇습니다.
서버 관리자에게 폰트를 설치해달라고하세요
자신이 self hosting하고 있으시다면
안타깝지만 n8n 이미지 빌드를 다시 하셔야합니다
n8n 이미지 build 하실 때 한글 폰트를 추가하시면 되세요build를 위한 dockerfile 예시 (폰트만 추가)
FROM docker.n8n.io/n8nio/n8n:latest USER root # puppeteer 의존성 설치 (Alpine 기반에서는 apk 사용) RUN apk update && apk add --no-cache \ font-noto \ font-noto-cjk \ font-noto-extra \ fontconfig \ && fc-cache -f -v \ && rm -rf /var/cache/apk/* USER node
만약 pepputeer를 추가해야한다면 아래 dockerfile를 참고하세요.
FROM docker.n8n.io/n8nio/n8n:latest
USER root
# puppeteer 의존성 설치 (Alpine 기반에서는 apk 사용)
RUN apk update && apk add --no-cache \
chromium \
nss \
freetype \
harfbuzz \
ttf-freefont \
bash \
udev \
wget \
ca-certificates \
libxcomposite \
libxrandr \
libxdamage \
libxfixes \
libx11 \
libxext \
libxtst \
dumb-init \
font-noto \
font-noto-cjk \
font-noto-extra \
fontconfig \
&& fc-cache -f -v \
&& rm -rf /var/cache/apk/*
# puppeteer 설치
RUN npm install puppeteer && \
npx puppeteer browsers install chrome
# 추가 package 설치 (빼도됩니다)
#RUN npm install cheerio --prefix /usr/local/lib/cheerio
#RUN npm install axios --prefix /usr/local/lib/axios
# puppeteer가 chromium 경로를 인식할 수 있게 설정
ENV N8N_ENABLE_BROWSER_EXECUTION=true
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
ENV PUPPETEER_EXECUTABLE_PATH="/usr/bin/chromium"
ENV PUPPETEER_ARGS="--no-sandbox --disable-setuid-sandbox"
USER node결과와 배운 점
🎯 스크린샷 자동화에는 성공! 원하는 뉴스 페이지 이미지를 자동으로 수집할 수 있게 되었어요.
⚠️ 하지만 일부 웹사이트는 Puppeteer로 접속이 차단되더라고요. 크롤링 방어 시스템 때문인지, 접근 자체가 막혀서 난감했어요.
🔍 그래서 API로 대체하려고 시도 중인데, 괜찮은 API 찾는 게 정말 어렵네요. 공개된 것도 부족하고, 문서도 불친절한 경우가 많아요.
오늘도 Docker와 친해졌습니다. n8n으로 개발해야하는데.
n8n 개발을 이해하고 있어서 큰일입니다.
빨리 워크플로 짜서 제 삶을 좀 자동화하고 싶네요.
여기까지 데이터 두더지를 이야기를 가지고 3.5탄입니다.
좀 더 완성된 서비스나 워크플로우로 4탄을 가지고 오겠습니다.