← 노드 한 장 전체#14 · HTML
HTML
API 없는 사이트에서 필요한 부분만
이 글은 이런 분께API가 없는 웹페이지에서 필요한 부분만 뽑고 싶은 분
1분 영상은 @workflow.hanjang 에 순서대로 공개돼요
API가 없는 사이트, 필요한 부분만 뽑아낼 수 있어요.
#1에서 HTTP Request로 페이지를 통째로 가져왔다면, HTML 노드는 그중 필요한 부분만 골라냅니다.
먼저 결과부터
API가 없는 사이트는 HTTP Request로 페이지를 받고 HTML 노드에서 CSS 선택자로 필요한 부분만 뽑는다. 연습용 사이트(books.toscrape.com)에서 책 20권 제목·가격·별점 추출.
우리가 실제로 돌린 기록 · 실행 #71392 · 2026-10-24
우리가 실제로 돌린 기록 · 실행 #71392 · 2026-10-24
- CSS 선택자 = 태그 주소 (article.product_pod h3 a → 제목)
- 화면엔 잘린 제목도 title 속성엔 전체가 들어 있어요
- Return Array를 켜면 20개 전부
따라 하기
아래 설정값은 이 영상에 나온 워크플로우 JSON에서 그대로 가져왔어요. n8n 캔버스에서 +를 눌러 노드를 순서대로 추가하고 같은 값을 넣으면 돼요. 빨간 제목이 이번 편의 주인공 노드예요. 표 왼쪽은 n8n 편집기에 보이는 칸 이름, 오른쪽은 실제로 넣은 값이에요. 직접 입력하기 번거로우면 JSON을 받아 ⋯ → Import from File로 가져오세요.
Step 1. Manual Trigger 노드 추가이름: Run manually
설정 없이 그대로 추가해요.
Step 2. HTTP Request 노드 추가이름: Get page (HTML)
| URL | https://books.toscrape.com/ |
| Options › Response › Response Format | Text |
| Options › Response › Put Output in Field | data |
Step 3. HTML 노드 추가이름: Extract books
| Operation | Extract HTML Content |
| Source Data | JSON |
| JSON Property | data |
| Values 1 › Key | title |
| Values 1 › CSS Selector | article.product_pod h3 a |
| Values 1 › Return Value | Attribute |
| Values 1 › Attribute | title |
| Values 1 › Return Array | 켜짐 |
| Values 2 › Key | price |
| Values 2 › CSS Selector | article.product_pod .price_color |
| Values 2 › Return Value | Text |
| Values 2 › Return Array | 켜짐 |
| … | 나머지 설정 6개는 JSON 파일에서 확인 |
Step 4. Split Out 노드 추가이름: One book per item
| Fields To Split Out | title, price, rating |
Step 5. Edit Fields (Set) 노드 추가이름: Clean up
| 필드 1 | title · string · {{ $json.title }} |
| 필드 2 | price_gbp · number · {{ parseFloat($json.price.replace(/[^0-9.]/g,'')) }} |
| 필드 3 | stars · string · {{ $json.rating.replace('star-rating ','') }} |
Step 6. Sort 노드 추가이름: Cheapest first
| Fields To Sort By › › Field Name | price_gbp |
| Fields To Sort By › › Order | Ascending |
가져와서 쓸 때 확인할 것
- YOUR_… 표시를 내 값으로 바꾸고, 계정이 필요한 서비스 노드만 자격 증명을 연결하세요. 그런 칸이나 노드가 없는 예제는 추가 계정 없이 실행할 수 있어요.
노드의 모든 옵션은 n8n 공식 문서에서 볼 수 있어요.