TRAMS AI 프로젝트 문의
AI 뽀개기

Recraft 같은 SVG 아이콘 생성 서비스 만들기: FLUX.2·VTracer·SVGO

Recraft의 이미지·벡터 기능을 참고해 FLUX.2 API로 생성·편집하고 VTracer와 SVGO로 SVG를 만드는 방법을 설명합니다. 브랜드 색상 검수, 사용자 승인, API 지원 범위까지 AI 디자인 서비스 구현 흐름을 살펴봅니다.

핵심 요약

1. 설명과 브랜드 색상을 입력받아 이미지·SVG 아이콘 후보를 만들고 검토·저장하는 디자인 사이트를 설계합니다. 2. FLUX.2 AI API로 이미지를 생성·수정하고, VTracer로 벡터화한 뒤 SVGO로 SVG를 정리합니다. 3. 입력 검증, 색상 규칙, 작업 재시도와 사용자 승인 절차는 자체 개발합니다.

Recraft의 가치를 브랜드 디자인 자동화로 옮기기

Recraft(리크래프트)의 핵심 가치는 설명·스타일·브랜드 색상을 시각 자산으로 연결하는 데 있습니다. 이를 참고한 AI 디자인 서비스 개발은 디자이너와 마케터가 조건을 재사용하며 이미지와 아이콘을 반복 제작하는 흐름에 초점을 맞춥니다.

Recraft의 공개 벡터 안내는 V4.1 기반 텍스트→SVG 생성을 설명합니다. SVG는 픽셀 대신 도형과 경로를 표현하는 이미지 형식입니다. 여기서 제안하는 FLUX.2·VTracer·SVGO 조합은 유사 기능의 구현 대안이며, Recraft의 비공개 내부 기술을 설명하지 않습니다.

스타일별 이미지 생성: 설명을 FLUX.2 요청으로 바꾸기

사용자는 이미지의 용도, 대상, 구도와 원하는 스타일을 입력합니다. 자체 로직은 필수 항목을 검사하고 입력을 구조화된 프롬프트로 묶습니다. FLUX.2 AI API는 이 조건을 바탕으로 래스터, 즉 픽셀로 구성된 이미지 후보를 생성합니다.

이미지 생성 API 연동에서는 요청과 결과를 작업 번호로 연결합니다. 자체 서버는 처리 상태를 관리하고 실패한 작업의 재시도 여부를 결정합니다. 출력 화면에는 생성 이미지와 적용한 조건을 함께 표시해 사용자가 후보를 비교하고 저장하도록 만듭니다.

Recraft 서비스 소개 이미지
출처: recraft.ai

같은 스타일 아이콘 만들기: 공통 조건과 색상 검수 연결하기

브랜드 색상 아이콘 제작의 입력은 아이콘별 의미, 공통 스타일, 지정 색상입니다. 자체 로직은 공통 조건을 유지하면서 아이콘 설명만 바꿔 FLUX.2에 전달합니다. 생성한 래스터 후보는 오픈소스 변환 도구인 VTracer로 SVG로 바꿉니다.

이어서 자체 팔레트 매핑 로직으로 SVG의 색상을 지정 색상에 맞춥니다. 사용자가 선 굵기·여백·형태를 비교하는 검토 화면을 거쳐 승인된 SVG 묶음을 출력합니다. 브랜드 이미지 스타일 통일은 같은 프롬프트를 쓰는 것만으로 끝나지 않으며, 결과 비교와 수정 과정까지 포함해야 합니다.

이 흐름으로 텍스트로 SVG 만들기 기능을 제공할 수 있습니다. 다만 래스터를 거치는 변환 경로이므로 Recraft가 안내하는 텍스트→SVG 생성과 동일한 구조나 품질을 보장하는 방식은 아닙니다.

Recraft 서비스 소개 이미지
출처: recraft.ai

프롬프트로 이미지 수정: 원본과 결과를 비교하는 편집 화면

사용자는 원본 이미지와 함께 “배경은 유지하고 물체의 색상을 바꿔 주세요”처럼 수정 지시를 입력합니다. FLUX.2 이미지 편집 API는 원본과 지시를 처리하며, 서비스는 비동기로 결과를 조회합니다. 자체 로직은 업로드 조건을 검사하고 요청 상태와 원본·수정본의 연결 관계를 관리합니다.

결과 화면은 원본과 수정본을 나란히 보여주고 사용자가 채택할 이미지를 선택하도록 구성합니다. 편집 결과가 자동으로 벡터가 되는 것은 아니므로, SVG가 필요하면 별도의 벡터화 작업으로 넘깁니다.

PNG SVG 변환: VTracer와 SVGO의 역할 나누기

이미지 벡터화는 기존 래스터의 형태를 SVG 경로로 바꾸는 작업입니다. 새 이미지를 생성하는 기능과 구분해, 사용자가 PNG·JPG를 올리면 VTracer가 변환을 처리하도록 연결합니다. 자체 로직은 변환 결과의 색상, 경로 수, 파일 용량을 검사하고 검토가 필요한 결과를 표시합니다.

Recraft 유사 기능 구현 기술 요약
자료: 트램스 AI · 유사 기능 구현 기술 요약

SVG 최적화 라이브러리인 SVGO는 생성이나 벡터화 이후의 정리를 맡습니다. 불필요한 메타데이터·주석·중복 정보를 줄인 뒤, 자체 검수 단계에서 정리 전후의 모양을 비교합니다. 최종 출력은 사용자가 확대 상태와 색상 변경·경로 편집 가능 여부를 확인할 미리보기, 그리고 내려받을 SVG 파일입니다.

API 지원 범위와 승인 흐름까지 서비스로 연결하기

일반 애플리케이션 API는 업로드·작업 상태 조회·다운로드를 연결하고, 자체 서버는 사용자별 파일 접근 권한과 승인 상태를 관리합니다. 선택적인 AI 스킬은 프롬프트 양식과 검수 순서를 재사용하도록 묶는 역할로 둡니다. 이미지 생성·변환 엔진과 업무 규칙의 책임을 이렇게 나누면 수정할 지점을 구분하기 쉽습니다.

도입할 때는 FLUX.2의 고정 모델과 preview를 구분하고, API와 Playground의 참고 이미지 수 제한을 각각 확인해야 합니다. Recraft Studio는 외부 이미지 모델도 선택하는 편집 환경이므로 화면의 모든 기능을 Recraft API 지원 범위로 일반화할 수 없습니다. 원본 이미지의 이용 권한과 선택한 API의 이용 조건도 서비스 요구사항에 반영합니다.

브랜드 디자인 자동화나 SVG 아이콘 생성 서비스 만들기를 준비한다면 필요한 생성·편집 기능, 입력할 브랜드 자료, 연결할 승인 업무를 정리하면 구현 범위를 구체화할 수 있습니다. 트램스 AI 제작 문의(https://trams.co.kr/ai-si/contact/#inquiry)에서 서비스 구현을 상담할 수 있습니다.

참고 자료

  1. https://www.recraft.ai/
  2. https://www.recraft.ai/ai-image-generator
  3. https://www.recraft.ai/ai-vector-generator
  4. https://www.recraft.ai/ai-image-vectorizer
  5. https://www.recraft.ai/prompt-based-ai-image-editing
  6. https://www.recraft.ai/docs
  7. https://docs.bfl.ai/flux_2/flux2_text_to_image
  8. https://docs.bfl.ai/flux_2/flux2_image_editing
  9. https://github.com/visioncortex/vtracer
  10. https://svgo.dev/docs/introduction/
TRAMS AI

비슷한 AI 서비스를
사업에 적용하고 싶으신가요?

아이디어와 필요한 기능을 알려주시면 제작 범위와 방법을 검토합니다.

프로젝트 문의