API 없이 자동화: 로우코드 플랫폼의 헤드리스 브라우저 Latenode

안녕하세요, Latenode 의 다니엘입니다 👋

오늘은 코딩을 모르는 전문가들 사이에서는 널리 사용되지 않는 자동화 도구에 대해 알아보겠습니다. Latenode 에 기본으로 제공되는 이 기능은 Zapier, Make 등의 플랫폼에서는 사용할 수 없지만 워크플로우를 개선할 수 있는 강력한 잠재력을 지니고 있습니다.

참고로, 채팅GPT를 통해 웹을 탐색할 때마다 채팅을 사용하고 있는 것입니다! 헤드리스 브라우저입니다.

헤드리스 브라우저 설명

한 걸음 물러나서 비즈니스 프로세스 자동화의 세계를 살펴봅시다. 대부분의 경우 기업에서는 두 가지 자동화 접근 방식만 사용하여 요구 사항을 완전히 충족합니다:

1. API를 통해 프로세스를 자동화하세요.

이는 공개 API를 사용하는 여러 애플리케이션 간에 데이터 흐름을 구축하기 위한 견고한 접근 방식입니다. 개발자 허브로 직접 이동하여 필요한 작업을 정확하게 수행하기 위해 올바른 API 호출 방법을 알아내거나, Latenode 의 JavaScript AI 도우미에게 요청하여 요청을 간단히 설명하면 몇 초 만에 필요한 모든 앱과의 통합을 구축할 수 있습니다.

안타깝게도 웹상의 모든 작업에 동일한 작업을 자동으로 수행할 수 있는 기본 API 인프라가 있는 것은 아닙니다. 그래서 기업들은 API 엔드포인트가 필요 없는 두 번째 방법을 사용합니다.

2. API 없이 자동화하는 헤드리스 브라우저

이 글은 이에 대한 모든 것을 다루고 있으니 편안히 앉아 긴장을 풀고 나중에 여러분의 뒤를 책임질 새로운 자동화 분야에 대해 알아보세요.

헤드리스 브라우저란 무엇인가요?

크롬이나 파이어폭스와 같은 일반 인터넷 브라우저를 상상해 보세요. 이제 버튼, 주소 표시줄, 북마크 등 눈에 보이는 인터페이스 부분을 모두 제거합니다. 무엇이 남을까요? 인터넷을 탐색하고, 웹사이트를 열고, 상호 작용할 수 있는 '두뇌'만 남습니다. 이를 "헤드리스" 브라우저라고 합니다. 시각적 콘텐츠를 표시하지 않고도 웹사이트의 다양한 작업을 자동화할 수 있으며, 이 작업을 매우 빠른 속도로 수행할 수 있습니다. 사람이 아닌 스크립트가 프로세스를 제어합니다.

헤드리스 브라우저의 중요한 부분은 자바스크립트 사용자 정의 스크립트를 실행하는 기능입니다. 이를 통해 버튼 클릭, 양식 작성, 사이트 메뉴 탐색과 같은 사용자 행동을 시뮬레이션할 수 있습니다. 이는 자동화된 테스트, 웹 스크래핑, 웹 포털에서 반복적인 작업 자동화와 같은 작업에 매우 중요합니다.

헤드리스 브라우저는 어떻게 작동하나요?

헤드리스 브라우저를 작동하려면 몇 가지 주요 단계를 거쳐야 하며, 이를 이해해야만 헤드리스 브라우저의 잠재력을 활용할 수 있습니다:

1. URL을 클릭합니다: 먼저 상호 작용하려는 웹 페이지의 URL을 지정해야 합니다. 이는 일반 브라우저에서 웹사이트 주소를 입력하는 것과 비슷하지만 여기서는 스크립트를 통해 수행합니다.
2. 탐색할 선택기: 선택기는 헤드리스 브라우저에 웹 페이지의 어떤 요소와 상호 작용할지 알려주는 중요한 역할을 합니다. CSS 선택기, XPath 또는 JavaScript 명령이 될 수 있습니다. 버튼, 텍스트 필드, 이미지 등과 같은 특정 요소를 정확히 찾아낼 수 있습니다.
3. 추가 매개변수: 작업에 따라 양식에 텍스트를 입력하거나 파일을 업로드하거나 버튼을 클릭해야 할 수도 있습니다. 이러한 작업은 사용자가 작성하는 스크립트에 의해 처리되며, 스크립트에는 수행 작업과 수행 시기가 명시되어 있습니다.

기본적으로 헤드리스 브라우저에 어디로 이동할지, 무엇을 찾을지, 어디를 클릭할지, 어떤 텍스트를 입력하거나 복사할지 등을 알려주어야 합니다.

헤드리스 브라우저는 무엇을 할 수 있나요?

헤드리스 브라우저에서 지원하는 몇 가지 기본 작업은 사용자가 제어할 수 있습니다:

• 자동 탐색 및 상호 작용: 헤드리스 브라우저는 양식 작성, 링크 클릭, 데이터 스크래핑, 웹 페이지 스크린샷 찍기 등의 작업을 수행할 수 있습니다.
• 데이터 추출 및 처리: 웹 페이지에서 데이터를 추출하는 것이 목표인 경우가 많습니다. 헤드리스 브라우저는 페이지의 HTML과 텍스트를 구문 분석하여 필요한 정보를 추출한 다음 애플리케이션에서 사용하거나 나중에 사용하기 위해 저장할 수 있습니다.
• 사용자 지정 스크립트 실행: 헤드리스 브라우저는 JavaScript를 실행할 수 있으므로 사용자 지정 스크립트를 실행하여 동적 콘텐츠를 처리하거나 인증을 처리하는 등 복잡한 방식으로 웹 페이지와 상호 작용할 수 있습니다.

헤드리스 브라우저는 어떤 용도로 사용할 수 있나요?

기본 동작을 고려하면 헤드리스 브라우저는 매우 유용할 수 있는 다양한 고급 동작을 제공합니다. 이를 실제로 구현하려면 Latenode 에서 헤드리스 브라우저를 로우코드 시나리오에 통합해야 합니다. 이를 통해 다음과 같은 사용 사례에 헤드리스 브라우저를 구현할 수 있습니다:

헤드리스 브라우저의 사용 사례

이제 헤드리스 브라우저에 대한 사전 경험이 없어도 간단히 복사하여 붙여넣기하고 핫와이어로 연결할 수 있는 특정 사용 사례로 넘어가 보겠습니다.

사용 사례 #1: 헤드리스 브라우저에서 GPT 플러그인처럼 웹 검색하기

재미있는 사실: ChatGPT를 사용하여 웹 브라우징을 요청하면 헤드리스 브라우저가 작동합니다! 이와 유사한 MVP를 만들어 헤드리스 브라우저에 검색 쿼리를 요청해 보겠습니다.

다음은 다음 시나리오에 대한 간략한 개요입니다:

• 웹훅 URL은 검색 요청이 포함된 게시물 요청을 찾고 있습니다.
• 헤드리스 브라우저는 해당 요청을 수신하고 Google을 열어 처음 10개 검색 순위의 제목을 반환합니다.
• 웹훅 응답은 웹훅에 결과를 다시 전송합니다.

웹훅에서 데이터를 매핑하여 헤드리스 브라우저 노드가 Google에서 정확히 무엇을 검색해야 하는지 알 수 있도록 하는 헤드리스 브라우저 코드를 좀 더 자세히 살펴봅시다.

그런 다음 POST 요청을 만들고 검색 쿼리를 본문에 '검색' 키로 전송해 보겠습니다. 몇 초 만에 시나리오 실행 결과를 확인할 수 있습니다.

👉직접 테스트해보고 싶으신가요? 바로 사용 가능한 템플릿을 복사하여 헤드리스 브라우저로 웹을 탐색하세요!

사용 사례 #2: 헤드리스 브라우저로 웹 페이지에서 데이터 구문 분석하기

이제 웹사이트의 데이터를 바로 파싱할 수 있습니다! 마켓플레이스의 가격 실시간 동기화부터 추가 분석을 위한 대량 스크래핑 SEO 요소에 이르기까지 매우 광범위하게 사용할 수 있습니다.

첫 번째 예: Latenode의 랜딩 페이지에서 모든 제목(H1, H2, H3)을 스크랩하는 것은 어떨까요? 해봅시다!

• 시나리오는 동일하게 보입니다:
• 웹훅은 구문 분석할 URL을 기다립니다.
• 헤드리스 브라우저는 제공된 URL로 이동하여 H1, H2, H3 타이틀을 찾아서 검색합니다.
• 웹훅 응답에는 웹훅 트리거를 호출한 결과의 제목 목록이 표시됩니다.

그런 다음 시나리오에 다시 POST 요청을 하고 아래와 같이 본문 섹션에서 구문 분석할 웹사이트를 보냅니다:

결과적으로 헤드리스 브라우저로 전송한 웹 페이지에서 H1, H2, H3 타이틀 목록을 가져옵니다.

참고: 중요한 것은 Latenode 시나리오 내에서 해당 정보를 사용하여 추가 데이터 변환을 수행하거나 필요한 곳에 정보를 전송할 수 있다는 점입니다.

두 번째 예: 미국 달러와 유로에서 영국 파운드로의 환율과 같은 중요한 정보를 검색해야 하는 웹사이트의 API가 없는 경우 헤드리스 브라우저를 사용하여 직접 액세스할 수 있습니다.

두 개의 통화로 POST 요청을 한 번 더 하면 Latenode 시나리오에서 필연적으로 두 개의 환율을 응답으로 받게 됩니다.

사용 사례 #3: 헤드리스 브라우저를 사용하여 양식 작성하기

이제 검색과 검색에서 채우기로 초점을 전환합니다. API 없이 자동으로 웹 양식을 작성하는 것은 어떨까요?

• 헤드리스 브라우저에 웹 양식 링크를 제공합니다.
• 입력할 텍스트를 입력합니다.
• 텍스트를 입력할 HTML, CSS 또는 XPath 요소의 경로를 입력합니다.

이러한 간단한 HTML 코드를 작성하는 코드는 다음과 같습니다:

const targetUrl = '<https://webhook.latenode.com/368/dev/SIMPLE_FORM>';

await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');
await page.goto(targetUrl);

// Using 'id' selectors as per your HTML structure
await page.type('#subject', data["{{$3.body.subject}}"]);
await page.type('#title', data["{{$3.body.title}}"]);
await page.type('#overview', data["{{$3.body.overview}}"]);
await page.type('#platform-updates', data["{{$3.body.updates}}"]);
await page.type('#useful-materials', data["{{$3.body.materials}}"]);
await page.type('#other-news', data["{{$3.body.news}}"]);

// The 'value' in the select option should match the 'value' attribute of the option
await page.select('#platform', 'TestEmail');
await page.click('#submit'); // Updated to use the 'id' of the submit button

// Assuming the popup is the confirmation of submission
await page.waitForSelector('#popup', {visible: true, timeout: 5000});

return { message: 'FORM SUBMITTED' };

사용 사례 #4: 헤드리스 브라우저로 스크린샷 만들기

마지막으로, 웹에서 발견한 모든 자료의 스크린샷을 찍어두는 것입니다.

쇼케이스를 만들기 위해 Latenode 플랫폼에 매주 새로운 정보로 업데이트되는 동적 차트를 구축합니다. 이 모든 작업은 자바스크립트 노드와 전역 변수의 도움으로 이루어집니다.

이렇게 생겼습니다. 하지만 이 차트가 업데이트될 때마다 매주 다른 사람과 공유하려면 어떻게 해야 할까요? 이 차트를 실제로 만들려면 헤드리스 브라우저에 도움을 요청하여 스크린샷을 찍고 필요한 곳에 파일을 보내면 됩니다.

헤드리스 브라우저 노드는 base64 형식의 스크린샷을 반환합니다. 그런 다음 JavaScript 노드를 사용하면 추가 시스템에서 이 파일을 가져오는 데 필요한 대로 변환할 수 있습니다.

👉 바로 사용 가능한 이 템플릿을 사용자 지정하고 스크린샷을 만들어 텔레그램 채팅으로 전송하려면, 다음 단계를 따르세요:

• 갤러리에서 템플릿을 복사합니다.
• 자바스크립트 노드에서, 텔레그램 봇 토큰과 ChatID를 데이터로 바꿉니다.
• 시나리오를 배포하고 웹훅 URL을 수동으로 호출합니다.

결론 

이 글에서는 로우코드 자동화를 위한 강력한 도구인 헤드리스 브라우저( Latenode)의 강력한 기능에 대해 알아봤습니다. 헤드리스 브라우저는 Chrome이나 Firefox의 일반적인 인터페이스 없이 스크립트 중심의 빠른 웹 사용 방식을 제공합니다. 특히 복잡하고 동적인 사이트에서 양식 작성, 웹사이트에서 데이터 가져오기, 자동화된 테스트와 같은 작업에 적합합니다.

헤드리스 브라우저 노드가 돋보이는 이유는 로우코드 환경에서도 쉽게 사용할 수 있다는 점입니다. 즉, 코딩에 대한 깊은 지식이 없어도 헤드리스 브라우저의 기능을 사용할 수 있습니다. 간단한 작업 자동화부터 복잡한 웹 상호작용 처리까지, 헤드리스 브라우저는 다양한 요구사항을 충족하는 강력한 도구입니다.

Latenode, 그리고 플랫폼에 대한 질문이 있으시면 언제든지 문의해 주세요, 로우코드 전문가로 구성된 Discord 커뮤니티 에 가입하세요.

헤드리스 브라우저 자동화에 대한 시각적 표현을 보려면 플랫폼에서 바로 사용 가능한 헤드리스 브라우저 노드의 도움을 받아 로우코드 자동화에 대한 튜토리얼( Latenode )을 시청하세요.

관련 문서:

• 자바스크립트 + AI: 로우코드 자동화를 위한 완벽한 듀오
• 모든 앱과 통합 만들기: 두 가지 방법
• 얼리 버드를 위한 평생 최초 특가!