이 가이드에서 여러분은 다음을 발견하게 될 것입니다:

Langflow가 무엇이며 왜 인기를 얻었는지
Langflow 앱에서 표준 LLM 사용의 한계와 외부 데이터로 이를 극복하는 방법.
웹 데이터 접근을 위해 Bright Data와 통합된 Langflow AI 앱 구축 방법.

자, 시작해 보겠습니다!

Langflow란 무엇인가요?

Langflow는 Python과 JavaScript로 구축된 오픈소스 도구로, AI 기반 에이전트와 워크플로우를 구축하고 배포하기 위한 플랫폼입니다. GitHub에서 92,000개 이상의 스타를 기록한 이 도구는 AI 에이전트 개발을 위한 가장 인기 있고 널리 채택된 라이브러리 중 하나입니다.

Langflow는 로우코드 시각적 개발 플랫폼으로 작동합니다. 드래그 앤 드롭 인터페이스를 통해 미리 구축된 구성 요소를 연결하기만 하면 복잡한 AI 애플리케이션을 간단히 생성할 수 있습니다. 이 접근 방식은 방대한 코딩 작업의 필요성을 없애주면서도 최대의 유연성을 위해 커스텀 코드 통합을 지원합니다.

Langflow는 에이전트, 대규모 언어 모델(LLM), 벡터 저장소, 모든 API·모델·데이터베이스와의 연동을 포함한 광범위한 AI 기능을 제공합니다.

AI 애플리케이션에 데이터 접근이 필요한 이유

다른 프레임워크와 비교할 때, Langflow는 AI 앱 구축을 위한 시각적 로우코드 플랫폼으로서 두각을 나타냅니다. 그러나 다른 LLM 기반 시스템과 마찬가지로, Langflow 기반 앱의 지능은 접근 가능한 데이터의 수준에 달려 있습니다.

LLM은 정적 데이터셋으로 훈련되며 실시간 이벤트나 사내 비즈니스 데이터에 대한 내재적 인식이 없습니다. 따라서 신선하고 관련성 높은 데이터 소스와 연결하지 않으면 현실 세계와 단절된 상태입니다. 웹은 가장 방대한 정보 원천입니다.

이러한 LLM의 한계를 극복하기 위해 Langflow는 유연한 웹 데이터 파이프라인 연결을 지원합니다. 이 패턴은 다음과 같은 중요한 사용 사례의 기반이 됩니다:

RAG 워크플로: 검색된 데이터가 LLM의 출력을 향상시킵니다.
데이터 파이프라인: 분석 전 데이터 추출 및 정제.
질의 응답, 문서 요약, 웹 검색 실행과 같은 작업을 수행하기 위해 외부 지식이 필요한 AI 에이전트.

웹에서 정확한 공개 데이터를 검색하는 것은 결코 쉬운 일이 아닙니다. 다음과 같은 기능을 갖춘 인프라가 필요합니다:

거의 모든 웹사이트( 스크래핑 방지 기술로 보호된 사이트 포함)에 연결할 수 있어야 합니다.
필요한 데이터를 안정적으로 추출할 수 있어야 합니다.
구조화되고 AI 활용이 가능한 형식으로 반환.

바로 이것이 Bright Data가 제공하는 솔루션입니다. Langflow와 Bright Data 도구를 결합하면 AI 애플리케이션은 다음과 같은 강력한 기능을 확보할 수 있습니다:

반봇 방어 체계를 우회하는 실시간 웹 스크래핑.
Amazon, LinkedIn, Zillow 등 주요 플랫폼에서 구조화된 데이터 추출.
실시간 쿼리 기반 SERP 데이터를 위한 검색 엔진 결과 접근.
자동화된 전체 페이지 스크린샷을 통한 시각적 데이터 캡처.

Langflow 맞춤형 컴포넌트를 통해 Bright Data에 직접 연결할 수 있습니다. 즉, 복잡한 백엔드 로직을 구축하거나 유지 관리할 필요가 없습니다. 컴포넌트를 플로우에 연결하기만 하면 바로 사용 가능합니다!

Bright Data를 활용한 Langflow 웹 데이터 접근 기능으로 AI 앱 구축하기

이 단계별 튜토리얼에서는 Langflow를 사용하여 Bright Data와 통합하여 실시간 웹 데이터를 검색할 수 있는 AI 에이전트를 구축할 것입니다.

여기서 소개하는 AI 에이전트 설정은 이 통합을 통해 구축할 수 있는 수많은 가능성 중 하나의 간단한 예시일 뿐입니다. Bright Data × Langflow 통합을 활용해 만들 수 있는 AI 앱은 무궁무진합니다. 영감을 얻으려면 가능한 사용 사례 목록을 살펴보세요.

아래 가이드를 따라 Langflow에서 Bright Data 기반 AI 에이전트를 생성해 보세요!

필수 조건

이 튜토리얼을 따라하려면 다음 요구 사항을 충족해야 합니다:

최소 듀얼 코어 CPU 및 2GB RAM (권장: 멀티 코어 CPU 및 최소 4GB RAM).
로컬에 설치된 Windows용Python 버전 3.10~3.12 또는 macOS/Linux용 3.10~3.13.
로컬에 설치된uv 패키지.
Bright Data API 키.
지원되는 LLM 중 하나에 연결할 API 키 (여기서는 API를 통해 무료로 사용할 수 있는 Gemini를 사용합니다).

Bright Data API 키가 없어도 걱정하지 마세요. 튜토리얼 진행 중 설정 과정을 안내해 드립니다.

uv 설치 명령어 실행:

pip install uv

Windows 사용자의 경우 Microsoft Visual C++ 14.0 이상이 추가로 필요합니다. 다운로드 후 지원 가이드에 따라 설치를 완료하세요.

1단계: Langflow 설정

먼저 Langflow 프로젝트용 폴더를 생성하고 해당 폴더로 이동하세요:

mkdir langflow-agent
cd langflow-agent

langflow-agent 폴더는 Langflow 프로젝트 디렉터리 역할을 합니다.

프로젝트 폴더 내에서 uv를 사용하여 Python 가상 환경을 생성합니다:

uv venv venv

그런 다음 macOS/Linux에서는 다음 명령으로 활성화하세요:

source venv/bin/activate

Windows에서는 다음과 같이 실행합니다:

venvScriptsactivate

가상 환경을 활성화한 상태에서 프로젝트 환경에 Langflow를 설치하세요:

uv pip install langflow

설치에는 시간이 다소 소요되므로 기다려 주세요.

설치가 완료되면 다음 명령어로 애플리케이션을 실행하여 설정이 정상적으로 작동하는지 확인하세요:

uv run langflow run

LangFlow가 로컬 서버를 초기화할 때까지 기다리세요. 준비가 완료되면 브라우저에서 다음 페이지에서 확인할 수 있습니다:

http://localhost:7860

열어 보시면, 모든 것이 예상대로 진행되었고 Langflow를 처음 사용하시는 경우 다음과 같은 인터페이스가 표시됩니다:

오류가 발생할 경우 공식 설치 가이드를 참조하세요.

훌륭합니다! LangFlow 설정이 이제 실행 중입니다.

2단계: Bright Data 설정

AI 애플리케이션이 웹에서 데이터를 검색할 수 있도록 하려면 Bright Data의 AI 인프라에 연결해야 합니다.

Bright Data는 다양한 데이터 수집 솔루션을 제공하지만, 이 튜토리얼에서는 다음에 집중하겠습니다:

웹 언락커(Web Unlocker): 봇 차단을 우회하고 모든 웹 페이지를 HTML 또는 마크다운 형식으로 반환하는 고급 스크래핑 API입니다.

참고: 웹 스크레이퍼 API와 같은 다른 Bright Data 도구와의 통합도 가능하지만, 본 가이드는 범용적인 웹 언락커에 중점을 둡니다.

Langflow 앱에서 Web Unlocker를 사용하려면 먼저 다음을 수행해야 합니다:

Bright Data 계정에 Web Unlocker 영역을 설정하세요.
요청 인증을 위한 Bright Data API 토큰 생성.

아래 지침을 따라 두 가지를 모두 수행하세요! 참고로 공식 문서도 살펴보시기 바랍니다.

먼저, Bright Data 계정이 없다면 무료로 가입하세요. 계정이 있다면 로그인 후 대시보드를 엽니다. “프록시 및 스크래핑” 버튼을 클릭하세요:

Clicking the “Proxies & Scraping” button in the Bright Data dashboard

“프록시 및 스크래핑 인프라” 페이지로 이동합니다:

Note the already activated Web Unlocker API zone

웹 언락커 영역이 이미 생성된 경우 이 페이지에 목록으로 표시됩니다. 이 예시에서는 "unblocker" 라는 이름의 영역이 이미 존재합니다(나중에 필요하니 이 이름을 기억해 두세요).

필요한 존이 아직 없다면, 아래로 스크롤하여 “웹 언락커 API” 카드에서 “존 생성”을 클릭하세요:

Clicking the “Create zone” on the “Web Unlocker API” card

존에 이름을 지정하고(예: “unlocker”), 최적의 성능을 위해 고급 기능을 활성화한 후 “추가” 버튼을 누르세요:

Configuring your new Web Unlocker API zone

생성 후 영역 상세 페이지로 이동합니다. 토글이 “활성”으로 설정되어 있는지 확인하세요. 이는 제품 사용 준비가 완료되었음을 의미합니다:

The “unlocker” Web Unlocker API zone page

이제 공식 Bright Data 문서를 따라 API 키를 생성하세요. 생성된 키는 곧 필요하므로 안전한 곳에 보관하십시오.

완벽합니다! 이제 커스텀 컴포넌트를 사용하여 Bright Data를 Langflow에 통합할 준비가 되었습니다.

3단계: 새 빈 플로우 초기화

계속하기 전에 새로운 Langflow 플로우를 생성해야 합니다. Langflow 로컬 서버로 돌아가서 “첫 번째 플로우 생성” 버튼을 클릭하세요:

다음 모달이 나타납니다. 오른쪽 하단의 “빈 플로우” 버튼을 누르세요:

플로우에 “Langflow x Bright Data AI 앱”과 같은 이름을 지정하세요. 생성 후 다음과 같은 빈 캔버스가 표시됩니다:

위 캔버스에 컴포넌트를 추가하고 연결하여 AI 애플리케이션을 정의할 수 있습니다. 잘하셨습니다!

4단계: 커스텀 Bright Data 컴포넌트 정의

Langflow와 Bright Data를 통합하는 가장 쉬운 방법은 커스텀 컴포넌트를 생성하는 것입니다. 이를 통해 AI 에이전트가 Bright Data의 Web Unlocker API를 사용하여 웹 데이터를 수집할 수 있습니다.

Langflow에서 사용자 정의 컴포넌트는 다음과 같이 정의된 Python 클래스입니다:

입력: 컴포넌트가 필요로 하는 데이터 또는 매개변수.
출력: 구성 요소가 다운스트림 노드에 반환하는 데이터.
논리: 입력을 출력으로 변환하는 내부 처리.

구체적으로 Langflow x Bright Data 커스텀 컴포넌트는 다음을 수행해야 합니다:

Bright Data API 키와 Web Unlocker 영역 이름을 입력으로 받아야 합니다(인증용).
스크래핑하려는 웹 페이지의 대상 URL을 수신합니다.
웹 언락커 API에 요청을 수행하여 페이지를 마크다운 형식( AI 활용에 이상적)으로 반환하도록 구성합니다.
검색된 콘텐츠를 출력으로 반환합니다.

위의 모든 기능을 다음 커스텀 Python 컴포넌트로 구현할 수 있습니다:

from langflow.custom import Component
from langflow.io import SecretStrInput, StrInput, Output
from langflow.schema import Data
import httpx

# Langflow 커스텀 컴포넌트는 Component를 상속해야 함
class BrightDataComponent(Component):
    # Langflow UI에 표시되는 컴포넌트 이름
    display_name = "Bright Data"
    # 컴포넌트 상세 정보의 설명
    description = "Bright Data를 사용하여 웹에서 Markdown 형식의 데이터를 가져옵니다"
    icon = "sparkles"  # UI 아이콘 식별자
    name = "BrightData"  # Langflow 내부에서 사용되는 이름

    # --- 입력값 ---
    # 컴포넌트에 필요한 입력값 정의
    inputs = [
        SecretStrInput(
            name="api_key",
            display_name="Bright Data API 키",
            required=True,
            info="대시보드에서 발급받은 Bright Data API 키"
        ),
        StrInput(
            name="zone",
            display_name="웹 언락커 존 이름",
            info="연결할 웹 언락커 존 이름 (예: 'web_unlocker')",
            required=True
        ),
        StrInput(
            name="url",
            display_name="대상 URL",
            info="Markdown 데이터로 변환할 URL",
            tool_mode=True
        ),
    ]

    # --- OUTPUT ---
    # 컴포넌트가 반환하는 출력 정의
    outputs = [
        Output(
            name="web_data",
            display_name="웹 데이터 결과",
            method="get_web_data"  # 출력 생성에 사용되는 메서드 이름
        )
    ]

    # --- 로직 ---
    # 이 메서드는 Bright Data에서 웹 데이터를 가져와 반환합니다
    def get_web_data(self) -> Data:
        try:
            # Bright Data Web Unlocker API 엔드포인트
            url = "https://api.brightdata.com/request"

            # 인증용 API 키를 포함한 요청 헤더
            headers = {
                "Authorization": f"Bearer {self.api_key}",
                "Content-Type": "application/json"
            }

            # 영역, URL, 출력 형식을 지정하는 페이로드
            payload = {
                "zone": self.zone,
                "url": self.url,
                "format": "raw",
                "data_format": "markdown"
            }

            # 180초 타임아웃으로 POST 요청 전송
            with httpx.Client(timeout=180.0) as client:
                response = client.post(url, json=payload, headers=headers)

                # HTTP 상태 코드가 2xx가 아닐 경우 오류 발생
                response.raise_for_status()

                # 추출된 마크다운 형식의 웹 데이터
                markdown_data = response.text
        return Data(data={"data": markdown_data})

        # 타임아웃 오류 처리
        except httpx.TimeoutException:
            error_msg = "웹 언락커 요청이 시간 초과되었습니다"
            return Data(data={"error": error_msg, "data": None})

        # 기타 HTTP 오류 처리 (예: 4xx, 5xx)
        except httpx.HTTPStatusError as e:
            error_msg = f"상태 코드 {e.response.status_code}로 요청 실패: {e.response.text}"
            return Data(data={"error": error_msg, "data": None})

BrightDataComponent는 다음 입력을 받습니다:

Bright Data API 키.
웹 언락커(Web Unlocker) 영역 이름.
스크래핑하려는 페이지의 URL.

그런 다음 HTTPX Python 클라이언트를 사용하여 Web Unlocker API에 요청을 전송하며, 응답을 마크다운 형식으로 반환하도록 구성됩니다. API가 반환한 페이지의 마크다운 표현이 컴포넌트의 출력이 됩니다.

참고: Langflow에서 기본 제공되는 HTTP 클라이언트 라이브러리인 HTTPX를 사용했습니다. 자세한 내용은 웹 스크래핑을 위한 HTTPX 사용 가이드를 참조하세요.

훌륭합니다! 이 컴포넌트를 플로우에 추가하고 AI 에이전트가 그 출력을 활용하는 방법을 확인해 보세요.

단계 #5: 커스텀 Bright Data 컴포넌트 추가

앞서 정의한 컴포넌트를 등록하려면 왼쪽 하단의 “새 사용자 정의 컴포넌트” 버튼을 클릭하세요. 캔버스에 새로운 일반 “Hello, World” 사용자 정의 컴포넌트가 나타납니다. 마우스를 올려놓고 “코드” 섹션을 클릭하여 로직을 사용자 정의하세요:

Dealing with the “Hello, World!” custom component

표시되는 코드 편집기에 BrightDataComponent 클래스의 전체 소스 코드를 붙여넣으세요:

Pasting the code of the BrightDataComponent

“확인 및 저장” 버튼을 누릅니다. 이제 일반 “사용자 정의 컴포넌트”가 Bright Data 컴포넌트로 대체된 것을 확인할 수 있습니다:

보시다시피, Bright Data와의 통합을 위해 자리 표시자 커스텀 컴포넌트가 사용자 정의 컴포넌트로 업데이트되었습니다.

참고: 각 플로우마다 Bright Data 컴포넌트를 수동으로 재작성할 필요는 없습니다.
사용자 정의 컴포넌트를 Python 파일에 저장하고 Langflow 문서에 설명된 방법으로 자동 로드하기만 하면 됩니다.

훌륭합니다! 이제 AI 플로우가 Bright Data와 통합되어 웹 데이터를 가져올 수 있습니다.

6단계: AI 에이전트를 Bright Data에 연결하기

Langflow 앱 내에서 Bright Data 컴포넌트를 직접 사용하거나, AI 에이전트가 상호작용할 수 있는 도구로 전환할 수 있습니다. 도구로 변환하면 에이전트가 AI 친화적인 마크다운 형식으로 모든 웹 페이지의 실시간 콘텐츠를 가져올 수 있는 기능을 부여하게 됩니다. 즉, AI가 모든 사이트에서 실시간 정보를 접근하고 검색할 수 있도록 하는 것입니다.

Bright 컴포넌트를 도구로 만들기:

Bright Data 컴포넌트 위에 마우스를 올려놓으세요.
“도구 모드” 스위치를 토글하여 활성화합니다.
필수 필드를 입력하세요:
- 브라이트 데이터 API 키.
- 웹 언락커(Web Unlocker) 영역 이름(예: "unlocker").

이제 다음과 같은 화면이 표시됩니다:

The Bright Data component is now an AI tool

Bright Data 구성 요소가 도구로 준비되었으므로 AI 에이전트에 연결하세요:

왼쪽 사이드바에서 “에이전트 > 에이전트” 컴포넌트를 찾으세요.
캔버스로 드래그하세요.
선호하는 LLM을 사용하도록 에이전트를 구성하세요(이 예시에서는 Gemini를 사용하며, gemini-2.5-flash 같은 무료 모델을 선택하고 Gemini API 키를 붙여넣습니다).
Bright Data 컴포넌트의 출력을 에이전트 컴포넌트의 “도구” 입력에 연결하세요:

Connecting the Bright Data component to the Agent component

이제 AI 애플리케이션의 핵심이 완전히 연결되었습니다. Bright Data의 스크래핑 인프라를 활용해 실시간 웹 콘텐츠를 동적으로 수집하는 Gemini 기반 에이전트를 구축한 것입니다.

7단계: 플로우 완성

AI 플로우가 완전히 작동하려면 입력 및 출력 컴포넌트가 모두 필요합니다. 따라서 입력 채팅 컴포넌트를 AI 에이전트에 연결하고, 응답을 수신할 출력 채팅 컴포넌트를 연결하세요.

이후 플로우 구조는 다음과 같아야 합니다:

위 설정으로 AI 에이전트와 대화할 수 있는 채팅형 인터페이스가 제공됩니다.

이제 끝입니다! Langflow × Bright Data AI 앱이 완성되어 사용 준비가 되었습니다.

8단계: AI 앱 테스트하기

AI 앱을 실행하려면 Langflow 인터페이스 오른쪽 상단의 “플레이그라운드” 버튼을 클릭하세요:

다음과 같은 화면이 표시됩니다:

ChatGPT 스타일의 경험을 제공하지만, 여러분의 자체 AI 에이전트로 구동됩니다. 모든 기능이 정상 작동하는지 확인하려면 다음과 같은 프롬프트를 입력해 보세요:

이 제품에 대한 핵심 정보를 포함한 상세한 요약문을 제공해 주세요:
https://www.amazon.com/AmazonBasics-Pound-Neoprene-Dumbbells-Weights/dp/B01LR5S6HK/

배경에서 발생하는 과정은 다음과 같습니다:

프롬프트는 채팅 입력에서 AI 에이전트 컴포넌트로 전달됩니다.
에이전트는 설정된 LLM(이 경우 Gemini)을 활용하여 Bright Data 컴포넌트에서 필요한 도구를 실행합니다.
에이전트는 스크랩된 웹 콘텐츠를 수신하여 처리한 후 최종 응답을 채팅 출력(채팅에서 보게 될 답변에 해당)으로 전달합니다.

위 프롬프트는 훌륭한 테스트 사례입니다. Gemini만으로는 아마존과 같은 사이트의 반봇 보호 기능으로 인해 스크래핑이 불가능하기 때문입니다. Bright Data의 Web Unlocker는 아마존 CAPTCHA를 우회하고 페이지에서 데이터를 추출하여 AI가 활용 가능한 마크다운 형식으로 제공함으로써 이 문제를 해결합니다.

프롬프트를 실행하면 다음과 같은 결과를 확인할 수 있습니다:

에이전트가 Bright Data를 사용했는지 확인하려면 “Accessing web_get_data” 드롭다운을 확장하세요:

여기서 Bright Data 구성 요소의 핵심 메서드인 get_web_data 함수 호출의 전체 세부 정보를 확인할 수 있습니다. 아마존 제품 페이지에서 데이터가 성공적으로 추출되었는지 확인하세요.

AI 에이전트가 생성한 실제 출력의 일부 스크린샷입니다:

이 AI 생성 요약의 모든 정보는 실제 데이터이며 허구가 아닙니다. 원본 아마존 페이지를 방문하여 확인할 수 있습니다:

자, 이제 Langflow와 Bright Data를 활용해 웹 데이터 접근 기능을 갖춘 AI 앱을 구축하고 테스트해 보셨습니다.

다음 단계

통합이 정상 작동 중이니, 다음 단계를 진행해 보세요:

공식 지원 방법 중 하나를 사용하여 에이전트를 클라우드 또는 자체 서버에 배포하세요.
웹 스크레이퍼 API나 SERP API 등 다른 Bright Data 제품을 연결하여 통합을 확장하세요. 이를 위해 공식 문서에 설명된 대로 BrightDataComponent의 로직을 수정하여 다른 Bright Data API를 호출하면 됩니다.
RAG 파이프라인, 데이터 워크플로, AI 자동화 흐름 등 더 고급 사용 사례를 만들기 위해 컴포넌트를 재조합하세요.
AI 에이전트를 Bright Data Web MCP 서버에 연결하여 50개 이상의 도구를 즉시 통합하세요.

결론

이 글에서는 Langflow를 활용해 웹 데이터 접근이 가능한 AI 에이전트를 구축하는 방법을 알아보았습니다. 이는 Bright Data 도구와의 맞춤형 통합을 통해 가능해졌습니다. 이 설정으로 LLM은 사실상 모든 웹사이트에서 실시간으로 데이터를 검색하고 처리할 수 있는 능력을 갖추게 됩니다.

여기서 소개한 내용은 기본적인 예시에 불과하다는 점을 명심하세요. 더 고급 에이전트를 구축하려면 실시간 웹 데이터를 가져오고 검증하며 AI 활용에 최적화된 정보로 변환하는 도구가 필요합니다. 바로 Bright Data AI 인프라에서 이를 구현할 수 있습니다.

무료 Bright Data 계정을 생성하고 AI 활용이 가능한 데이터 수집 도구로 실험을 시작해 보세요!

문의하기 무료 체험 시작하기