vectorize

2 개의 포스트

cloudflare

Cloudflare AI 검색: 에이전트에게 데이터 검색 엔진을 제공하세요 (새 탭에서 열림)

Cloudflare AI Search는 Workers AI, AI Gateway, Vectorize, R2, Browser Run 등을 직접 조합하지 않아도 에이전트용 검색 엔진을 구축할 수 있도록 개발자 경험을 개선했다. 웹사이트와 파일을 쉽게 색인하고, 여러 데이터 소스를 하나의 검색 엔드포인트나 MCP 엔드포인트로 통합할 수 있으며, 임베딩과 재순위화 비용은 일부 기본 모델 사용 시 무료다. Cloudflare는 이를 자사 문서·블로그·개발자 생태계 검색과 Dev Stack MCP에 실제로 적용하고 있다. ### 에이전트용 데이터 색인 - 구조화·비구조화 데이터를 AI 에이전트가 검색할 수 있도록 색인한다. - 개별 파일뿐 아니라 소유권을 확인할 수 있는 웹사이트도 데이터 소스로 사용할 수 있다. - AI Search가 웹 크롤링, 데이터 수집, 임베딩, 검색 결과 반환 과정을 처리한다. - 현재는 Cloudflare 계정에 등록된 zone이어야 하며, 향후 소유권 확인 방식이 확대될 예정이다. ### 사이트맵 없이 웹사이트 검색 구축 - 기존에는 웹사이트 연동에 sitemap이 필요했다. - 이제 `Discover` 파싱 옵션을 사용하면 sitemap이 없는 사이트도 링크를 따라가며 페이지를 발견하고 색인할 수 있다. - 내부적으로 Browser Run의 `/crawl` 기능을 활용해 페이지를 탐색한다. - Wrangler 명령어 예시는 다음과 같다. ```bash npx wrangler ai-search instance create cloudflare-community \ --namespace dev-stack \ --source https://community.cloudflare.com \ --type web-crawler \ --parse-type discover ``` ### 여러 검색 인스턴스를 하나로 통합 - 하나의 namespace 안에 여러 웹사이트나 데이터 인스턴스를 구성할 수 있다. - `/search`와 `/mcp` 공개 엔드포인트를 활성화하면 여러 인스턴스를 한 번에 검색할 수 있다. - 별도 Worker를 작성하지 않고도 여러 소스를 대상으로 통합 검색을 제공할 수 있다. - 검색 결과에는 출처 인스턴스 정보와 인용 가능한 청크가 포함된다. ### Worker와 MCP를 통한 검색 연동 - 기존 애플리케이션이나 MCP 서버에 검색 기능을 포함하려면 namespace를 Worker에 바인딩한다. - Worker에서는 `AI_SEARCH.search()`를 호출하고, `instance_ids`로 검색 대상들을 지정한다. - `max_num_results`로 결과 수를 제한하고 `reranking.enabled`로 재순위화를 활성화할 수 있다. - Cloudflare Dev Stack MCP는 이 방식을 사용해 Docs, Blog, API Docs, Community, Astro, Vite, Vitest, Hono, Replicate, OpenNext 등 여러 표면을 한 번에 검색한다. ```json { "ai_search_namespaces": [ { "binding": "AI_SEARCH", "namespace": "cloudflare-stack" } ] } ``` - 간단히 공유 가능한 검색 URL만 필요하다면 Worker 대신 공개 엔드포인트를 활성화하면 된다. ### 공개 엔드포인트와 사용자 도메인 - namespace에 공개 URL을 활성화하면 다음 엔드포인트가 제공된다. - `/search`: 일반 검색 API - `/mcp`: MCP 클라이언트와 에이전트 연동용 엔드포인트 - 기본 공개 URL 대신 `search.example.com/mcp`처럼 사용자 정의 도메인을 연결할 수 있다. - Cloudflare Access를 도메인 앞에 배치하면 공개 엔드포인트를 인증 기반의 비공개 검색 서비스로 전환할 수 있다. ### 예측 가능한 가격 모델 - AI Search는 임베딩 및 재순위화 비용을 포함하는 방향으로 가격 모델을 설계했다. - Workers AI 카탈로그의 일부 기본 모델을 사용하면 임베딩과 재순위화가 무료다. - 토큰 수를 직접 계산해 비용을 예측해야 하는 부담을 줄이고, 데이터 규모가 커져도 비용을 예측하기 쉽게 만드는 것이 목표다. - 가격은 현재 프리뷰 단계다. ### EmDash와 Cloudflare 서비스에 적용 - Cloudflare의 오픈소스 CMS인 EmDash에는 AI Search 플러그인을 추가할 수 있다. - 이 플러그인은 EmDash로 구축한 사이트 콘텐츠에 의미 기반 검색을 제공한다. - Cloudflare는 AI Search를 Blog, Developer Docs, Cloudflare.com, EmDash 기반 사이트 등에 실제 검색 기능으로 사용하고 있다. ### Cloudflare Dev Stack MCP 사례 - Dev Stack MCP는 Cloudflare 개발자 생태계 전체에서 최신 문서를 검색해 코딩 에이전트에 제공한다. - 검색 결과에 출처와 인용 정보가 포함되어 최신 기능과 수정 사항을 반영할 수 있다. - 기존처럼 웹 검색 후 여러 페이지를 직접 가져오는 방식보다 빠르고, 토큰 사용량이 적으며, 오래되거나 부정확한 문서를 선택할 가능성이 낮다. - MCP 설정에 다음 URL을 추가하면 에이전트에서 사용할 수 있다. ```json { "mcpServers": { "dev-stack": { "url": "https://stack.mcp.cloudflare.com/mcp" } } } ``` Cloudflare AI Search는 여러 Cloudflare 서비스를 직접 연결해야 했던 검색 구축 과정을 단순화하고, 웹사이트·문서·MCP를 하나의 검색 계층으로 묶는 데 초점을 둔다. 기존 애플리케이션에 통합하려면 Worker 방식을, 빠르게 공유 가능한 검색 기능이 필요하면 공개 `/search` 또는 `/mcp` 엔드포인트를 선택하는 것이 적합하다.

figma

장인 정신을 담아: Figma (새 탭에서 열림)

Figma의 **Vectorize**는 래스터 이미지를 편집 가능한 벡터로 변환하는 AI 이미지 편집 도구다. 손그림, 사진으로 찍은 질감, 손글씨 등을 Figma 안에서 바로 벡터화해 크기·형태·색상·구성을 수정할 수 있어, 별도 도구로 재작업하거나 처음부터 다시 그리는 과정을 줄여준다. 이를 통해 원본의 개성을 유지하면서도 다양한 디자인에 재사용 가능한 자산으로 발전시킬 수 있다. ## 래스터 그림을 편집 가능한 벡터로 변환 - Figma Design 또는 Figma Draw에 이미지 파일을 드래그 앤 드롭한 뒤 **Vectorize**를 실행한다. - 연필 스케치나 손으로 그린 일러스트가 편집 가능한 벡터 일러스트로 변환된다. - 변환 후 크기, 형태, 배치, 전체 구성을 Figma 캔버스에서 직접 조정할 수 있다. - **Recolor** 슬라이더를 사용하면 색상과 도형을 단순화해 관리하기 쉬운 결과물을 만들 수 있다. - Figma의 **색상 변수(Color variables)**를 적용해 브랜드 색상이나 여러 디자인 테마에 맞게 팔레트를 일괄 변경할 수 있다. - 결과물은 일회성 이미지가 아니라, 여러 디자인에서 계속 수정하고 재사용할 수 있는 살아 있는 디자인 자산이 된다. ## 손글씨와 레터링을 로고로 발전시키기 - 종이에 쓴 글씨, 캘리그래피, 콜라주로 만든 문자를 사진이나 스캔 이미지로 Figma에 가져온다. - Vectorize를 실행하면 글자의 선과 곡선이 편집 가능한 벡터 형태로 변환된다. - 변환된 각 글자의 앵커 포인트를 조정해 획의 모양, 곡선, 글자 간격을 세밀하게 다듬을 수 있다. - **Remove background**로 불필요한 배경을 제거할 수 있다. - 바운딩 박스를 사용해 개별 글자를 이동하거나 크기를 조절하고, 색상을 변경해 로고나 타이포그래픽으로 발전시킬 수 있다. - 완성된 레터링은 커버 아트, 인터페이스, 브랜드 그래픽 등 다양한 맥락에 맞게 확대·변형해 사용할 수 있다. ## 기존 AI 이미지 편집 도구와의 연계 - Vectorize는 Figma의 기존 AI 이미지 편집 도구군에 추가된 기능이다. - 함께 소개된 기능으로는 **배경 제거(Remove background)**, **객체 지우기(Erase object)**, **이미지 확장(Expand image)**이 있다. - 이미지를 벡터화한 뒤 배경을 제거하거나 색상을 바꾸는 식으로 여러 편집 기능을 연속해서 적용할 수 있다. - 별도의 그래픽 편집 프로그램으로 파일을 옮기지 않고 Figma 안에서 작업을 이어갈 수 있다는 점이 핵심이다. ## 창작 과정의 개성을 유지하는 작업 방식 - 초기 아이디어가 노트의 스케치나 휴대폰으로 찍은 이미지처럼 비정형적인 형태로 시작해도 그대로 디지털 작업에 활용할 수 있다. - 기존 방식처럼 이미지를 다시 그리거나 여러 도구 사이를 오갈 필요가 줄어든다. - 원본의 손맛과 표현을 유지하면서도 벡터의 확장성, 편집성, 재사용성을 확보할 수 있다. - 한 번 변환한 결과물을 브랜드 시스템이나 여러 화면 디자인에 맞게 지속적으로 발전시킬 수 있다. 실무에서는 손그림이나 손글씨를 먼저 자연스럽게 만든 뒤 Vectorize로 변환하고, 불필요한 배경 제거와 색상 변수 적용을 거쳐 브랜드 자산으로 정리하는 방식이 유용하다.