레이아웃 바뀌어도 안 깨지는 n8n AI 웹스크래핑 만들기 — ScrapeNinja와 LLM 조합, 셀프호스팅 전용

n8n.io 공식 템플릿 마켓플레이스에 공개된 이 워크플로우를 가져오면, 웹페이지의 CSS 구조를 미리 알아두지 않아도 ScrapeNinja와 LLM이 그 페이지에 맞는 추출 코드를 그때그때 짜서 구조화된 JSON을 뽑아내는 스크래퍼를 만들 수 있습니다. 다만 커뮤니티 노드를 쓰는 템플릿이라 셀프호스팅 n8n에서만 동작하고, n8n 클라우드에서는 지금 구조로는 쓸 수 없다는 점을 먼저 짚고 시작합니다.

이 템플릿 하나로 보여줄 수 있는 것

스크래핑 이야기를 꺼내면 면접에서 자주 따라오는 질문이 있습니다. "사이트 레이아웃이 바뀌면 어떻게 하나요?" CSS 선택자를 코드에 박아두는 방식은 그 순간 다 깨집니다. 이 템플릿은 그 질문에 구조 자체로 답을 보여줍니다. "선택자를 하드코딩하는 대신, 스크랩할 때마다 LLM에게 그 페이지에 맞는 추출 코드를 새로 짜게 했습니다"라고 말할 수 있게 해줍니다.

짧은 문장이지만 안에 들어간 역량은 세 가지입니다.

• LLM에게 실행 가능한 코드를 생성시키는 설계 — 프롬프트로 답을 받는 게 아니라, 그 답이 실제로 실행되는 코드가 되도록 파이프라인을 짠 경험
• 커뮤니티 노드 설치 — n8n이 기본 제공하지 않는 서비스를, npm 패키지 형태의 커뮤니티 노드로 직접 붙여본 경험
• 셀프호스팅 운영 감각 — 클라우드와 셀프호스팅의 차이가 단순히 "어디서 도는가"가 아니라 "어떤 확장이 가능한가"의 문제라는 걸 몸으로 이해한 경험

세 번째가 특히 이 템플릿의 진짜 가치입니다. n8n 클라우드만 써본 사람과 셀프호스팅까지 한 번 만져본 사람은 이력서에 "n8n 운영 경험"이라고 똑같이 쓰더라도 면접에서 나오는 답의 깊이가 다릅니다.

이 템플릿은 무엇인가

먼저 분명히 해둘 게 있습니다. 이 워크플로우는 데이터팝콘이 만든 게 아닙니다. n8n 공식 템플릿 마켓플레이스(n8n.io/workflows)에 Scrape any web page into structured JSON data with ScrapeNinja and AI라는 이름으로 공개된 템플릿이고, 제작자는 Anthony입니다. 카테고리는 Engineering과 Multimodal AI로 등록돼 있습니다.

공식 페이지에는 이 템플릿의 동작 배경이 이렇게 설명돼 있습니다. 웹 스크래퍼는 대상 웹페이지의 레이아웃이 바뀌면 자주 깨지는데, CSS 선택자를 코드에 하드코딩하는 기존 방식이 원인입니다. 이 템플릿은 선택자를 미리 정해두는 대신, 실행 시점마다 LLM이 그 페이지에 맞는 데이터 추출 코드를 새로 작성하게 해서 이 문제를 완화합니다.

그리고 페이지 상단에는 굵게 강조된 공식 디스클레이머가 있습니다. "이 템플릿은 커뮤니티 노드(n8n-nodes-scrapeninja)를 쓰기 때문에 지금은 셀프호스팅 n8n에서만 동작합니다." 풀어 말하면, n8n 클라우드 요금제(무료 포함)를 쓰는 독자는 이 템플릿을 그대로 가져와도 실행할 수 없다는 뜻입니다. 커뮤니티 노드는 n8n 인스턴스에 npm 패키지를 직접 설치하는 구조라서, 여러 사용자가 한 인프라를 공유하는 클라우드 환경에서는 임의 설치를 허용하지 않기 때문입니다. n8n 설치나 기본 노드 조작법은 n8n으로 반복업무 자동화 포트폴리오 만들기에 정리돼 있으니, 이 글은 이 템플릿 고유의 구조와 셀프호스팅 제약에 집중합니다.

구조 — Trigger / Task / Target

공식 문서의 "How it works"를 데이터팝콘 방식인 Trigger/Task/Target 세 칸으로 정리하면 이렇습니다. 원문은 이 전체 과정을 ScrapeNinja 노드를 중심으로 한 3단계로 설명합니다.

• Trigger — Manual Trigger. 캔버스 미리보기 카드에서 확인되는 시작 노드로, 실행 버튼을 눌러 그때그때 스크랩을 돌리는 구조입니다.
• Task — ScrapeNinja 노드가 대상 웹페이지의 HTML을 스크랩하고, 그 HTML을 Basic LLM Chain이 Google Gemini Chat Model에 넘겨 "이 페이지에서 원하는 데이터를 뽑아낼 JS 추출기 함수를 짜 달라"고 요청합니다. LLM이 작성한 코드는 스크랩해둔 HTML을 대상으로 실행되어 실제 데이터를 뽑아냅니다.
• Target — 최종 결과물은 구조화된 JSON 데이터입니다. 공식 페이지는 이 마지막 실행 단계가 "샌드박스 안에서 안전하게 돈다"고 설명하는데, LLM이 만든 코드를 그대로 실행하는 구조이니만큼 이 안전장치가 왜 필요한지는 뒤에서 한 번 더 짚습니다.

캔버스 미리보기 카드에는 Manual Trigger, Basic LLM Chain, Google Gemini Chat Model 세 노드가 아이콘으로 보이고 "+N개 더"라는 표시가 붙어 있습니다. ScrapeNinja 노드는 커뮤니티 노드라 미리보기 카드에는 아이콘이 뜨지 않지만, 공식 설명 전체가 이 노드를 중심으로 짜여 있어 워크플로우의 핵심입니다. 이 페이지가 공개한 정보는 여기까지이고, 그 이상의 세부 파라미터(예: 프롬프트 원문, JSON 스키마 지정 방식)는 확인되지 않아 이 글에서 다루지 않습니다.

만들기

공식 Setup 섹션이 구체적으로 다루는 절차는 커뮤니티 노드 설치 한 가지뿐입니다. 그 앞뒤로 취준생이 실제로 준비해야 할 순서를 채워서 정리하면 이렇습니다.

1. 셀프호스팅 인스턴스인지 먼저 확인하기

지금 쓰는 n8n이 클라우드 요금제라면 이 템플릿은 이 구조 그대로는 못 돌립니다. 아직 셀프호스팅 환경을 준비하지 않았다면, 이 템플릿보다 먼저 이 시리즈의 클라우드에서도 동작하는 다른 편으로 포트폴리오를 채워두고, 셀프호스팅 환경을 마련한 뒤 이 템플릿으로 돌아오는 순서를 권합니다. 셀프호스팅 자체를 한 번 경험해보는 것이 이 템플릿의 학습 포인트 중 하나이기 때문입니다.

2. Community Nodes에서 ScrapeNinja 설치하기

Settings → Community Nodes에서 패키지명 n8n-nodes-scrapeninja를 입력하고 Install을 누릅니다. 공식 페이지는 최소 v0.3.0 이상 버전이 필요하다고 명시하고 있으니, 설치 후 버전을 한 번 확인해두면 좋습니다.

3. ScrapeNinja와 Google Gemini 인증 정보 연결하기

이 템플릿은 서비스 두 곳의 인증 정보가 필요합니다. ScrapeNinja 노드를 쓰려면 ScrapeNinja 계정과 API 키가, Google Gemini Chat Model 노드를 쓰려면 Google Gemini API 키가 있어야 합니다. 공식 페이지의 Setup 섹션은 커뮤니티 노드 설치 방법만 자세히 다루고 두 서비스의 키 발급 절차 자체는 각 서비스 사이트에서 별도로 진행해야 하는 부분이라, 정확한 가입·요금 정보는 각 서비스 공식 사이트에서 직접 확인하는 게 안전합니다.

4. 템플릿을 가져와 URL 하나로 먼저 확인하기

템플릿 페이지에서 워크플로우를 자신의 인스턴스로 가져온 뒤, ScrapeNinja 노드에 스크랩할 웹페이지 주소를 하나 넣고 Manual Trigger로 실행해봅니다. LLM이 작성한 추출기 코드가 실행 결과 패널에 그대로 보이니, 처음에는 구조가 단순한 페이지(상품 하나짜리 상세 페이지 등)로 시험해보고 나서 복잡한 페이지로 넘어가는 순서가 안전합니다.

주의할 점 · 제약

공식 문서에 적힌 제약과 이 템플릿 특유의 성격을 그대로 옮기면 이렇습니다.

• 셀프호스팅 전용입니다. 커뮤니티 노드(n8n-nodes-scrapeninja)를 쓰기 때문에 n8n 클라우드에서는 지금 구조로 실행할 수 없습니다. 이 시리즈의 다른 템플릿 대부분은 클라우드에서도 그대로 돌릴 수 있지만, 이 템플릿만큼은 예외입니다. 클라우드 요금제만 써본 독자라면 이 템플릿을 시도하기 전에 이 사실부터 확인하세요.
• 커뮤니티 노드 버전 조건이 있습니다. 최소 v0.3.0 이상이 필요하다고 명시돼 있어, 오래된 버전이 이미 설치돼 있다면 업데이트가 먼저입니다.
• 외부 서비스 두 곳에 계정이 필요합니다. ScrapeNinja와 Google Gemini 모두 별도 가입과 API 키 발급이 필요하고, 사용량에 따라 비용이 발생할 수 있는 서비스입니다. 정확한 요금제는 이 글의 근거 자료에 없어 숫자를 적지 않았으니, 시작 전에 각 서비스 사이트에서 직접 확인하는 걸 권합니다.
• LLM이 만든 코드를 그대로 실행하는 구조입니다. 공식 페이지는 이 실행이 "샌드박스 안에서 안전하게" 이뤄진다고 설명합니다. 뒤집어 말하면, 이 안전장치가 없었다면 LLM이 생성한 임의 코드를 검증 없이 돌리는 구조라는 뜻이기도 합니다. 처음 실행할 때는 사이트를 하나 골라 결과 JSON을 직접 확인하고 나서, 신뢰할 수 있는 대상에만 이 파이프라인을 넓혀 쓰는 편이 안전합니다.

포트폴리오·면접 포인트

포트폴리오에는 세 장이면 충분합니다. 커뮤니티 노드를 설치하는 Settings 화면, LLM이 그 페이지에 맞춰 실제로 작성한 JS 추출기 코드, 그리고 최종으로 나온 구조화된 JSON 결과입니다. 세 장을 나란히 두면 "AI가 코드를 대신 짜서 그 코드가 실제로 실행됐다"는 흐름이 한눈에 보입니다.

면접에서는 "왜 이 템플릿은 n8n 클라우드에서 안 되나요?"라는 질문이 나올 수 있습니다. 커뮤니티 노드는 n8n 인스턴스에 npm 패키지를 직접 설치하는 구조라, 여러 조직이 인프라를 공유하는 클라우드 환경에서는 임의의 패키지 설치를 허용하기 어렵다는 게 이유입니다. 이 답을 할 수 있으면 "템플릿을 따라 만들어본 사람"이 아니라 "n8n의 배포 구조 자체를 이해한 사람"이라는 인상을 줍니다. 그다음 "그러면 CSS 선택자를 하드코딩하는 기존 방식과 뭐가 다른가요"라는 후속 질문에는, 선택자는 레이아웃이 바뀌면 매번 사람이 다시 고쳐야 하지만 이 구조는 실행 시점마다 LLM이 새로 코드를 짜기 때문에 레이아웃 변화에 자동으로 적응한다고 답하면 됩니다.

다음 액션

다음 편에서는 같은 마켓플레이스에 공개된, 이력서를 AI로 심사하는 채용 담당자용 템플릿을 다룹니다. 이번 편에서 본 "LLM이 코드를 대신 짠다"는 패턴 대신, 이번에는 LLM이 채용 담당자의 판단 기준 자체를 대신하는 구조를 보게 됩니다. 두 템플릿을 나란히 보면, 같은 마켓플레이스 안에서도 LLM에게 맡기는 역할이 얼마나 다양한지가 더 선명해집니다.