Convex 및 실시간 웹 데이터를 활용한 리액티브 앱

이 블로그 게시물에서는 다음 내용을 확인하실 수 있습니다:

Convex가 무엇인지, 그 정신 모델이 어떻게 작동하는지, 그리고 다른 데이터베이스와 어떻게 비교되는지.
Convex의 작동 원리와 이를 구성하는 핵심 구성 요소에 대한 상세 설명.
실시간 웹 데이터 저장에 Convex가 뛰어난 이유.
웹에서 실시간 데이터를 수집할 때 직면하는 주요 장애물과 과제.
Bright Data가 Convex 저장소에 바로 사용할 수 있는 구조화된 실시간 웹 데이터를 제공함으로써 이러한 과제를 어떻게 해결하는지.
웹 데이터 수집을 위한 Bright Data와 데이터 저장 및 원활한 UI 업데이트를 위한 Convex를 결합한 전체 데모를 시작하는 방법.

자, 시작해 봅시다!

Convex 소개

첫 번째 단계는 Convex가 무엇인지, 어떤 이점을 제공하는지, 그리고 그 배후에 있는 핵심적인 사고 방식을 이해하기 위해 Convex를 살펴보는 것입니다.

Convex란 무엇일까요?

Convex GitHub star history chart
Convex는 웹 및 모바일 앱의 동기화를 유지하도록 설계된 오픈 소스 리액티브 백엔드 플랫폼입니다.

내부적으로는 데이터베이스, 서버리스 함수, 인증 및 클라이언트 라이브러리를 단일 시스템으로 통합합니다. 상태 변화에 반응하는 React 컴포넌트처럼, Convex 쿼리는 데이터베이스 업데이트에 자동으로 반응하므로 실시간 동적 애플리케이션에 이상적입니다.

쿼리는 TypeScript로 작성되어 데이터베이스에서 직접 실행되므로, 개발 과정을 간소화하는 동시에 최소한의 인프라 오버헤드로 빠르고 반응형인 애플리케이션을 구현할 수 있습니다. 또한 이 솔루션은 모듈형 컴포넌트, 실시간 데이터 동기화, 스케줄링, AI 지원 코드 생성을 지원합니다. React, Next.js, Vue, Svelte, Nuxt와 같은 프레임워크와 통합될 뿐만 아니라, Python, Swift(iOS용), Kotlin(Android용), Rust 애플리케이션과도 상호 운용됩니다.

이러한 유연성 덕분에 개발자들 사이에서 인기를 얻어 GitHub에서 10,900개 이상의 스타를 기록했으며, npm 주간 다운로드 수는 40만 건을 넘었습니다.

Convex의 핵심 개념: 정신 모델 이해하기

기존 데이터베이스와 달리, Convex는 데이터베이스를 단순한 수동적 데이터 저장소가 아닌, 살아있는 반응형 시스템으로 취급합니다. 데이터가 추가, 업데이트 또는 삭제될 때마다 해당 변경 사항은 불변 트랜잭션 로그에 기록됩니다. 이는 모든 작업에 대한 영구적이고 타임스탬프가 찍힌 기록입니다. 동시에, 쿼리는 단순히 데이터를 가져오는 데 그치지 않습니다. 쿼리는 읽은 데이터 조각, 즉 “읽기 세트(read sets)”를 자동으로 추적합니다.

이를 통해 Convex는 쿼리가 의존하는 데이터 중 어느 하나가 변경될 때 즉시 감지할 수 있으며, 시스템은 결과를 실시간으로 업데이트할 수 있습니다. 이 아키텍처는 실시간 구독을 지원하며, 결정론적 트랜잭션과 낙관적 동시성 제어 메커니즘을 통해 강력한 일관성을 유지합니다. 이러한 특성 덕분에 여러 사용자가 충돌 없이 동시에 데이터베이스와 상호작용할 수 있습니다.

Convex와 다른 데이터베이스 비교

Convex가 다른 인기 있는 데이터베이스와 비교하여 어떤 위치에 있는지 더 잘 이해하려면 아래 비교표를 참조하십시오:

기능	Convex	Firebase	Supabase	기존 SQL 데이터베이스
데이터베이스 유형	트랜잭션 지원 문서 저장소	NoSQL / Firestore	PostgreSQL	관계형 SQL
실시간	✔️ (내장, 자동 구독)	✔️ (내장)	➖ (선택 사항, 별도 서버를 통해)	❌ (기본 제공되지 않음)
트랜잭션	항상 트랜잭션 처리	제한적	지원됨	지원됨
스키마	선택 사항, 점진적, TypeScript에서 자동 생성	유연 / 스키마 없음	강제 적용 (Postgres)	엄격, 수동
SQL 지원	❌	❌	✔️	✔️
TypeScript 통합	전체	제한적	부분적, 서버 측	ORM에 따라 다름
인증/OAuth	표준 + 네이티브	표준 + Firebase 인증	표준 + 네이티브	사용자 지정 설정
데이터베이스 관리	Convex에서 전적으로 처리	공유	공유	개발자가 전적으로 관리

Convex의 작동 방식: 아키텍처, 구성 요소 및 데이터 흐름

Convex 아키텍처는 다음 세 가지 주요 구성 요소를 갖춘 풀스택 백엔드 플랫폼을 기반으로 합니다:

데이터베이스: JSON과 유사한 객체가 테이블로 구성된 반응형 문서-관계형 저장소입니다. Convex 데이터베이스는 각 프로젝트에 대해 클라우드에서 자동으로 프로비저닝되므로 수동 연결 설정이나 클러스터 관리가 필요하지 않습니다.
서버 함수: 쿼리와 뮤테이션은 TypeScript 함수로 작성되므로 SQL이나 ORM이 필요하지 않습니다. 쿼리는 순수하고 읽기 전용인 반면, 뮤테이션은 ACID 보장, 직렬화 가능 격리 수준, 낙관적 동시성 제어를 갖춘 완전 관리형 트랜잭션 내에서 실행됩니다.
클라이언트 라이브러리: 서버 함수를 구독하여 결과를 자동으로 동기화하고 뮤테이션 큐를 관리하는 프레임워크 전용 라이브러리(Next.js, React, Vue, Svelte 등)입니다. 이를 통해 수동 구독이나 상태 관리 없이도 일관된 실시간 UI 업데이트를 보장합니다.

이 세 가지 구성 요소를 통해 데이터는 서버 함수를 경유하여 데이터베이스에서 클라이언트로 반응형 방식으로 흐릅니다. 쿼리는 의존성을 자동으로 추적하여 데이터가 변경될 때 재실행되고 업데이트를 실시간으로 푸시합니다. 뮤테이션은 완전히 관리되는 트랜잭션으로 실행되어 데이터베이스와 종속 쿼리를 업데이트하므로, 클라이언트는 수동 동기화 없이 항상 최신 상태를 확인할 수 있습니다.

Convex의 일관된 아키텍처는 최소한의 상용구 코드로 반응형, 일관성 있고, 타입 세이프한 애플리케이션을 보장합니다. 이는 데이터베이스 튜닝과 동기화 작업을 추상화하여, 사람이 작성한 코드와 AI가 생성한 코드 모두에 대한 신속한 개발을 지원합니다. 또한 Convex는 인증, 스케줄링 등의 기능을 제공합니다.

Convex와 실시간 웹 데이터가 완벽한 조합인 이유

Convex와 같은 실시간 데이터베이스는 데이터 소스 자체가 실시간일 때 비로소 그 잠재력을 최대한 발휘합니다. 즉, Convex의 반응형 아키텍처는 실시간 상황(예: 주가, 소셜 미디어 피드, 뉴스 업데이트, 전자상거래 재고)을 반영해야 하는 애플리케이션에 완벽합니다.

그렇다면 지구상에서 가장 방대하고 끊임없이 변화하는 데이터의 원천은 무엇일까요? 바로 웹입니다! 웹 데이터는 수백만 개의 소스에서 실시간으로 유입되므로, Convex 기반의 반응형 애플리케이션에 이상적인 입력 소스가 됩니다.

Convex를 실시간 웹 데이터 스트림에 연결하면, 앱은 복잡한 폴링, 수동 동기화 또는 상태 관리 없이도 업데이트에 즉시 반응할 수 있습니다. 이를 통해 정보와 사용자 인터페이스 간의 지연 시간을 제거하여, 끊김 없이 항상 최신 상태를 유지하는 사용자 경험을 제공합니다.

웹 데이터를 Convex 애플리케이션에 연결할 때의 과제

이제 실시간 웹 데이터가 Convex와 같은 솔루션에 왜 잘 어울리는지 이해하셨을 것입니다. 다음 질문은 , 실제로 어떻게 데이터를 가져올 수 있느냐는 것입니다 . 그 해답은 웹 스크래핑, 즉 웹 페이지에서 정보를 프로그래밍 방식으로 추출하는 과정입니다 .

웹 스크래핑은 강력한 접근 방식이지만, 몇 가지 과제를 수반합니다. 이러한 과제는 기술적 장애물부터 운영상의 복잡성에 이르기까지 다양하며, 다음을 포함합니다:

동적 콘텐츠: 현대적인 웹사이트는 자바스크립트(JavaScript), AJAX, 복잡한 탐색 및 상호작용 패턴에 의존하기 때문에 구조화된 데이터를 추출하기가 더 어렵습니다.
봇 방지 조치: 많은 웹사이트가 CAPTCHA, 요청 제한, 지문 인식 및 기타 방어 수단을 사용하여 자동화된 접근을 감지하고 차단합니다.
빈번한 변경: 레이아웃, HTML 구조, URL이 자주 변경되어 스크래퍼가 작동하지 않게 되며, 지속적인 모니터링과 유지 관리가 필요합니다.
확장성: 대규모 데이터 수집에는 견고한 인프라, IP 로테이션을 위한 신뢰할 수 있는 프록시 제공업체와의 통합, 그리고 강력한 오류 처리가 필요합니다.
데이터 일관성: 정확성, 완전성 및 최신성을 보장하는 것은, 특히 자주 업데이트되는 데이터의 경우 어려운 과제입니다.

결과적으로, 웹 데이터를 기반으로 완전한 리액티브 Convex 애플리케이션을 구축하는 것은 어려운 과제입니다. 이러한 장애물을 직접 해결하는 대신, Bright Data와 같은 엔터프라이즈급 실시간 웹 데이터 제공업체에 의존하는 것이 가장 이상적인 접근 방식입니다.

실시간 웹 데이터를 기반으로 한 반응형 애플리케이션을 위한 Bright Data + Convex

실시간 웹 데이터를 기반으로 하는 리액티브 애플리케이션을 개발할 때, Bright Data와 Convex의 조합이 돋보입니다. 이 둘은 함께 명확한 역할 분담을 이루어냅니다. Bright Data는 대규모 데이터 수집에 집중하고, Convex는 실시간 상태 동기화 및 UI 업데이트를 처리합니다.

Bright Data를 사용하면 프로그래밍 방식으로 웹에서 실시간으로 정보를 검색하고 추출할 수 있습니다. 수집된 데이터는 구조화된 JSON 형식으로 반환되며, 이는 Convex로 쉽게 전송될 수 있습니다. 이후 Convex는 리액티브 쿼리를 통해 연결된 모든 클라이언트에 데이터를 즉시 전파합니다.

Bright Data를 특히 매력적으로 만드는 것은 엔터프라이즈급 인프라입니다. 이 서비스는 195개국에 걸쳐 1억 5천만 개 이상의 IP를 보유한 세계 최대 규모의 프록시 네트워크 중 하나에서 운영되며, 무제한 동시 접속을 지원합니다. 이러한 기반은 99.99%의 가동 시간, 99.95%의 성공률, 그리고 연중무휴 24시간 지원을 통해 높은 신뢰성을 보장합니다.

Bright Data의 모든 실시간 데이터 수집 솔루션은 이 인프라를 기반으로 구축되었습니다. 주요 서비스는 다음과 같습니다:

웹 스크레이퍼 API: 인기 웹사이트에서 구조화된 실시간 데이터를 추출하기 위한 기성 API 엔드포인트.
언락커(Unlocker) API: CAPTCHA, 차단 메커니즘 및 봇 방지 시스템을 자동으로 처리하여 차단되지 않은 페이지 콘텐츠에 접근할 수 있게 해줍니다.
SERP API: 여러 검색 엔진의 실시간 검색 결과를 제공하며, 응답 시간은 1초 미만의 지연 시간을 자랑합니다.
크롤링 API: 웹사이트 전체를 구조화된 데이터 세트로 변환합니다.

Convex와 Bright Data의 통합을 통해 스크래핑에 따르는 일반적인 운영 부담 없이 웹에서 사용자에게 최신 데이터를 지속적으로 전달할 수 있습니다. 그 결과, 실시간 웹 데이터를 기반으로 구축된 확장 가능하고 유지 관리가 용이하며 완전히 반응형인 시스템을 확보하게 됩니다.

아키텍처 예시

다음은 Bright Data가 제공하는 실시간 웹 데이터를 활용하여 Convex로 구축된 반응형 웹 또는 모바일 애플리케이션의 아키텍처 예시입니다:

데이터 검색 트리거(Bright Data): 사용자가 특정 동작(예: 버튼 클릭)을 수행하면 프론트엔드가 백엔드로 요청을 보냅니다. 그러면 서버는 Bright Data API를 호출하여 웹에서 최신 데이터를 가져옵니다. 스크래핑된 데이터는 제품 가격, 뉴스 기사, 채용 공고 등이 될 수 있습니다.
백엔드 처리 (Convex): 구조화된 JSON 데이터를 수신하면, 이는 뮤테이션(mutation)을 통해 Convex로 전달됩니다. 이 단계에서 데이터는 Convex 데이터베이스로 수집, 정규화, 검증 및 저장됩니다. 또한 애플리케이션의 로직에 따라 여기서 데이터를 보강하거나 변환할 수도 있습니다.
실시간 UI 업데이트 (Convex 반응성): 프론트엔드는 Convex의 쿼리를 구독합니다. 데이터베이스가 업데이트되는 즉시 관련 쿼리가 자동으로 재실행됩니다. 업데이트된 결과는 클라이언트에 즉시 전송되며, 수동 개입 없이도 UI가 실시간으로 새로 고쳐집니다.

Convex와 Bright Data를 활용한 실시간 AI 시장 조사 터미널 구축 방법

Convex와 Bright Data의 통합이 열어주는 가능성을 보여주기 위해, 실제 데모인 Bright Data의 AI 시장 조사 터미널을 살펴보겠습니다.
Bright Data’s AI Market Research Terminal
이는 Convex 기반으로 구축된 Next.js 애플리케이션으로, 질문을 입력하면 웹 스크래핑을 통해 수집된 실시간 증거 그래프를 확인할 수 있습니다. 증거 그래프라는 개념이 생소하신 분들을 위해 설명하자면, 이는 데이터, 주장, 그리고 이를 뒷받침하는 증거 간의 관계를 보여주는 구조화된 표현입니다.

내부적으로 이 애플리케이션은 다음 8단계로 구성된 파이프라인을 따릅니다:

계획(Plan): LLM이 주제에 기반하여 4~6개의 집중된 검색 쿼리를 생성합니다.
검색(Search): 4~6개의 Bright Data SERP API 요청을 동시에 전송합니다.
스크래핑: Bright Data Web Unlocker API를 사용하여 상위 URL을 Markdown 형식으로 추출합니다.
추출: SERP 스니펫과 마크다운을 결합하여 구조화된 증거 항목으로 만듭니다.
요약: LLM이 각 항목에 대한 핵심 요점, 엔티티, 촉매 요인 및 감정을 추출합니다.
산출물: 신뢰도 점수를 포함한 지식 그래프 노드 및 에지를 구축합니다.
연결: 연결성 수정, 도메인 태깅 및 테이프 이벤트를 포함한 휴리스틱 보강을 적용합니다.
렌더링 → 준비 완료: Convex에 세션을 유지하면서 최종 아티팩트를 클라이언트로 스트리밍합니다.

이 데모를 살펴보고 로컬에서 테스트해 보세요! 실제 Convex + Bright Data 애플리케이션이 반응형 워크플로우에서 실시간 웹 데이터를 수집, 처리 및 전달하는 방식을 확인해 보세요.

필수 사항

이 튜토리얼 섹션을 따라 하려면 다음이 준비되어 있는지 확인하세요:

로컬에 Node.js 20 이상이 설치되어 있어야 합니다.
OpenRouter API 키.
SERP 및 Web Unlocker 영역이 구성된 Bright Data 계정.
Convex 프로젝트가 설정되어 있어야 합니다(무료 티어로도 충분합니다).
로컬에 Git이 설치되어 있어야 합니다.

아직 Bright Data와 Convex 설정에 대해서는 걱정하지 마세요. 두 가지 모두에 대해 별도의 두 소단원에서 안내해 드릴 예정입니다.

1단계: Bright Data 계정 준비

서론에서 언급했듯이, 이 데모 애플리케이션은 다음 두 가지 Bright Data 제품을 사용합니다:

SERP API
Web Unlocker API

아래에서는 계정에서 이 두 가지를 설정하는 방법을 안내해 드립니다. 더 자세한 지침은 Bright Data의 공식 문서를 참조하실 수도 있습니다:

아직 계정이 없다면 계정을 생성하십시오. 이미 계정이 있다면 로그인하십시오. 로그인 후 제어판의 “Proxies & Scraping” 페이지로 이동하십시오. “My Zones” 섹션에서 “SERP API”라고 표시된 행과 “Web Unlocker API”라고 표시된 행을 찾으십시오:
Note the “web_unlocker” and “serp_api” rows in the table

두 행 중 하나라도 없다면 해당 존이 아직 설정되지 않았음을 의미합니다. 예를 들어, SERP API 존을 생성하려면 아래로 스크롤하여 “SERP API” 섹션으로 이동한 후 “Create Zone”을 클릭하세요:
Configuring the SERP API zone
SERP API 존을 생성하고 serp_api (또는 원하는 이름)와 같은 이름을 지정하세요. 나중에 필요할 수 있으니 존 이름을 메모해 두세요.

Web Unlocker API에 대해서도 동일한 과정을 반복합니다. 이 튜토리얼에서는 Web Unlocker 존의 이름이 web_unlocker라고 가정하겠습니다.

마지막으로, 공식 튜토리얼을 따라 Bright Data API 키를 생성하세요. Convex 기반 Next.js 앱에서 SERP API 및 Web Unlocker로 전송되는 API 요청을 인증하는 데 필요하므로, 이 키를 안전하게 보관해 두세요.

대단합니다! 이제 Bright Data 계정이 완전히 설정되어 AI 시장 조사 터미널 데모에 통합할 준비가 되었습니다.

2단계: Convex 계정 설정

먼저 Convex에 로그인하거나, 아직 계정이 없다면 새 계정을 생성하세요. Convex 대시보드로 이동하게 됩니다:
Pressing the “Create Project” button in your Convex dashboard

여기서 “프로젝트 생성(Create Project)” 버튼을 누르세요. 프로젝트 이름을 “AI Market Research Terminal”(또는 원하는 이름)으로 지정한 후 “생성(Create)”을 클릭하세요:
Giving your new Convex project a name

프로젝트가 초기화될 때까지 기다린 후 배포 지역을 선택하세요:
Selecting your deployment region

“배포 구성”을 눌러 확인하세요. 몇 초 후 프로젝트가 준비될 것입니다:
Note the deployment info of your Convex project
좋습니다! 이제 프로젝트를 복제하여 로컬에서 실행하는 데 필요한 모든 구성 요소가 준비되었습니다.

3단계: 프로젝트 설정

먼저 데모 저장소를 ai-market-research-terminal/이라는 로컬 폴더로 클론하세요:

git clone https://github.com/brightdata/market-terminal ai-market-research-terminal

이제 ai-market-research-terminal/ 프로젝트 폴더에는 공식 저장소에 나열된 모든 파일이 포함되어 있어야 합니다.

프로젝트 디렉터리로 이동하세요:

cd ai-market-research-terminal

다음으로 프로젝트 종속성을 설치합니다:

npm install

훌륭합니다! 이제 Visual Studio Code와 같은 선호하는 JavaScript IDE에서 프로젝트를 열 수 있습니다. 프로젝트를 살펴보고 작동 방식을 익혀보세요. 더 자세한 정보와 개발 배경에 대한 내용은 DEV의 관련 심층 분석 글을 참고하세요.

4단계: 애플리케이션 구성

애플리케이션은 .env.local 파일에서 모든 구성을 읽어옵니다. 저장소에는 .env.local.example이라는 샘플 파일이 포함되어 있습니다. 이 파일을 복사하여 나만의 .env.local 파일을 만드세요:

cp .env.local.example .env.local

다음으로, 프로젝트의 루트 폴더에서 다음 명령어를 실행하여 Convex 커넥터를 설정하세요:

npx convex dev

지시 사항을 따르고, 브라우저에서 기기를 Convex 계정에 연결하세요. 그런 다음 2단계에서 생성한 기존 “AI Market Research Terminal” 프로젝트를 선택하세요. Convex가 필요한 환경 변수로 .env.local 파일을 자동으로 업데이트합니다. 이 경우 다음 내용이 추가됩니다:

CONVEX_DEPLOYMENT=dev:deafening-bloodhound-209
NEXT_PUBLIC_CONVEX_URL=https://deafening-bloodhound-209.convex.cloud
NEXT_PUBLIC_CONVEX_SITE_URL=https://deafening-bloodhound-209.convex.site

이 값들을 통해 애플리케이션이 Convex 프로젝트에 연결할 수 있습니다.

기본적으로 Convex 프로젝트에 두 개의 새 테이블(sessionEnvts 및 session)이 추가됩니다:

다음으로, .env.local 파일의 나머지 환경 변수를 입력하세요:

BRIGHTDATA_API_TOKEN=<YOUR_BRIGHTDATA_API_KEY>
BRIGHTDATA_WEB_UNLOCKER_ZONE=<YOUR_BRIGHTDATA_WEB_UNLOCKER_API_NAME> # 예: "web_unlocker"
BRIGHTDATA_SERP_ZONE=<YOUR_BRIGHTDATA_SERP_API_NAME> # 예: "serp_api"

OPENROUTER_API_KEY=<YOUR_OPENROUTER_API_KEY>
OPENROUTER_MODEL=google/gemini-3-flash-preview

위 자리 표시자를 Bright Data API 토큰, Web Unlocker 영역 이름, SERP API 영역 이름 및 OpenRouter API 키로 대체하십시오. 기본 LLM은 Gemini 3 Flash이지만, 원하신다면 지원되는 다른 모델을 사용할 수도 있습니다.

훌륭합니다! 이제 데모가 완전히 구성되었으며 로컬에서 실행할 준비가 되었습니다.

5단계: 애플리케이션을 로컬에서 실행하기

다음 명령어를 사용하여 로컬에서 데모를 실행하세요:

npm run dev

브라우저에서 http://localhost/market-terminal을 열어 로컬 AI 시장 조사 터미널 앱에 접속하세요. 다음과 같은 화면이 표시됩니다:
The local AI Market Research Terminal app

쿼리를 입력하여 애플리케이션을 테스트해 보세요. 예를 들어:

오늘 BTC 가격이 왜 하락했나요?

“Generate” 버튼을 누르면 다음과 같은 결과를 확인할 수 있습니다:
The result produced by the app

이제 “Evidence Workspace” 섹션을 확인해 보세요. 이 화면에는 웹 스크래핑을 통해 실시간으로 수집된 모든 데이터가 포함되어 있으며, Convex에 집계, 처리 및 저장되었습니다. 이제 Convex 데이터베이스에는 이번 실행에 대한 데이터가 포함됩니다:
The data stored in your Convex database

다음으로 “그래프(Graph)”, “마인드(Mind)”, “플로우(Flow)”, “타임라인(Timeline)” 보기를 살펴보세요:
Exploring the “Graph”, “Mind”, “Flow”, and “Timeline” views
여기서 수집된 소스를 확인하고 필터링하여 데이터를 더 깊이 있게 분석할 수 있습니다.