SNS, 포트폴리오, 샘플, 썸네일
SNS용, 포트폴리오용, 샘플 워터마크용, 썸네일용 JPG를 한 번에 만듭니다.
DrowPack
Draw · Render · Output · Wrap
4종 JPG 패키지 SVG까지 한 번에
그림 한 장의 리사이즈·워터마크·ZIP과
SVG 변환을 브라우저에서 한 흐름으로 처리하세요.
DrowPack 소개
DrowPack의 DROW는 Draw · Render · Output · Wrap의 뜻을 담고 있습니다. 그림을 완성한 뒤 여러 플랫폼에 맞게 다시 저장하고, 샘플 이미지와 썸네일, SVG 벡터 버전까지 하나의 흐름으로 정리합니다.
작업 이미지 업로드
PNG, JPG, WebP, SVG, PDF, PDF 호환 AI 파일을 미리보기 canvas에 렌더링한 뒤 패키지 생성과 SVG 벡터 변환에 사용합니다.
미리보기 canvas
이 canvas에 표시된 결과가 SVG 변환의 기준이 됩니다.
이 canvas에 표시된 결과가 SVG 변환의 기준이 됩니다.
SVG Export
SVG 벡터 추출
로고, 선화, 실루엣 이미지를 깔끔한 SVG 파일로 변환하세요. 복잡한 컬러 일러스트는 원본 품질 SVG로 보존할 수 있습니다.
추천
단순한 로고와 선화는 편집 가능한 벡터 SVG, 복잡한 그림은 시각 품질 보존 SVG를 선택하세요.
Vector Preview
SVG 미리보기가 여기에 표시됩니다.
기능 소개
그림을 올리기 전에 반복해서 만드는 파일들을 한 번에 정리합니다.
원본 품질 SVG와 순수 벡터 SVG
세밀한 컬러 일러스트는 현재 canvas를 고해상도 이미지로 품은 원본 품질 SVG로 저장하고, 로고·선화·실루엣은 편집 가능한 순수 벡터 SVG로 추적할 수 있습니다.
기본 변환은 브라우저에서 동작
이미지 로딩, 리사이즈, 워터마크, ZIP 생성, 기본 SVG 변환은 브라우저 안에서 실행됩니다. AI 편집이나 AI 보조 SVG 생성을 직접 실행할 때만 현재 canvas와 지시가 설정된 AI 제공자 API로 전송됩니다.
원본 크기 유지 후 직접 리사이즈
업로드 이미지는 원본 픽셀 크기로 표시합니다. 필요한 경우 가로·세로 값을 직접 입력해 고품질로 리사이즈하세요.
스케치와 흑백 그림
낙서, 스케치, 만화 선화처럼 경계가 분명한 흑백 그림을 추적합니다.
아이콘과 심볼 정리
경계가 선명한 로고, 아이콘, 심볼은 로고 모드를 사용하고, 어두운 면을 하나로 추적하려면 실루엣 모드를 사용하세요.
원본 색상 기준 벡터화
순수 벡터 SVG에서는 원본 색상 유지 옵션을 켜고 현재 canvas의 색을 기준으로 path를 만듭니다. 단순한 일러스트와 굵은 형태의 그림에 적합합니다.
복잡한 그림은 원본 품질 보존
눈 하이라이트, 머리카락 그라데이션, 작은 장식처럼 세밀한 요소가 많은 그림은 원본 품질 SVG, PNG, WebP로 저장하는 것이 가장 안정적입니다.
확대해도 덜 흔들리는 선
컬러 이미지는 원본 색을 유지하면서 작은 path와 안티앨리어싱 점을 줄여 더 매끄러운 SVG 경계로 추적합니다. 선화는 필요할 때 대비와 선명도를 함께 보정합니다.
사용 방법
DrowPack의 기본 흐름은 업로드, 미리보기 확인, 패키지 다운로드, 필요 시 SVG 변환입니다.
- 파일 업로드: PNG, JPG, WebP, SVG, PDF, PDF 호환 AI 파일을 선택하거나 드래그 앤 드롭합니다.
- 미리보기 확인: canvas에 표시된 결과를 확인합니다. 업로드 이미지는 임의로 줄이지 않고 원본 픽셀 크기로 렌더링합니다.
- 패키지 다운로드: SNS용, 포트폴리오용, 샘플 워터마크용, 썸네일용 JPG를 ZIP으로 저장합니다.
- SVG 변환 선택: 선화, 로고, 실루엣, 단순 컬러 모드를 고르고 현재 canvas를 SVG로 변환합니다.
- 결과 저장: `artwork_vector.svg`를 다운로드하거나 이미지 결과물과 함께 ZIP에 포함합니다.
업로드 전 이미지 정리
완성본을 PNG 또는 JPG로 내보낸 뒤 사용하면 가장 안정적입니다. 투명 배경이 필요한 캐릭터, 아이콘, 스티커 이미지는 PNG를 권장하고, 사진이나 배경이 꽉 찬 이미지는 JPG 또는 WebP가 적합합니다.
플랫폼별 파일을 한 번에 만들기
SNS 업로드용, 포트폴리오용, 커미션 샘플용, 썸네일용 파일을 같은 원본에서 생성합니다. 같은 그림을 여러 곳에 올릴 때 이름과 크기를 매번 다시 정리하지 않아도 됩니다.
벡터와 원본 품질 구분
편집 가능한 path가 필요하면 순수 벡터 SVG를 선택하세요. 반대로 그라데이션, 질감, 브러시 터치처럼 시각 품질이 중요한 그림은 원본 품질 SVG나 PNG/WebP 저장이 더 안전합니다.
단순한 형태는 벡터 모드
굵은 선, 로고, 아이콘, 흑백 실루엣은 순수 벡터 변환 결과가 비교적 깔끔합니다. 경계가 흐리거나 색이 너무 많은 이미지는 색상 수와 디테일 값을 낮춰 먼저 테스트해 보세요.
파일 크기와 선명도 균형 맞추기
색상 수와 디테일 값을 높이면 SVG가 더 세밀해질 수 있지만 파일 크기도 커집니다. 웹 업로드용이라면 확대 확인 후 필요한 만큼만 값을 올리는 방식이 가장 효율적입니다.
큰 파일이 느릴 때
브라우저 메모리 한계를 넘는 큰 이미지는 미리보기나 변환이 느릴 수 있습니다. 이 경우 먼저 이미지 크기를 줄이거나 JPG 품질을 낮춰 다시 저장한 뒤 SVG 변환을 시도하세요.
실제 규격과 측정으로 만든 가이드
기능 이름을 반복하지 않고, 현재 도구가 만드는 파일과 자동 변환의 성공·실패 조건을 독립 문서로 정리했습니다.
4종 JPG는 무엇이 다른가
1600px SNS용, 2200px 포트폴리오용, 워터마크 샘플, 600px 썸네일의 파일명과 품질 계산을 공개합니다.
출력 규격 읽기 →원본 품질 SVG vs 순수 벡터
같은 SVG 확장자라도 포함 이미지와 path 기반 파일은 확대 특성, 편집 가능성과 적합한 입력이 다릅니다.
두 형식 비교 →프리셋에서 한 값씩 조정하기
선화·로고·실루엣·컬러·사진·일러스트의 현재 프리셋과 흰 틈, 노이즈, 파일 크기별 조정 순서를 설명합니다.
설정 가이드 읽기 →60,114개 path가 거칠었던 이유
10.63MB 자동 추적 SVG의 작은 path와 반 픽셀 좌표를 직접 세고 28 path 정리본의 개선과 손실을 비교했습니다.
전후 사례 보기 →AI 버튼을 누르면 무엇이 전송될까
511px 입력 사본, 프롬프트, 현재 Cloudflare Workers AI 제공자, 저장 경계와 결과 검수 기준을 안내합니다.
AI 데이터 흐름 →필요한 답부터 골라 읽기
각 가이드는 실제 구현값과 측정 사례를 기준으로 작성하며, 자동 변환이 해결하지 못하는 조건도 함께 기록합니다.
실전 가이드 전체 보기 →FAQ
DrowPack의 이미지 패키지와 비트맵 SVG 변환에 대한 질문입니다.
비트맵 이미지를 벡터로 변환할 수 있나요?
네. 두 가지 방식이 있습니다. 원본 품질 SVG는 현재 canvas를 고해상도 이미지로 품어 시각 품질을 보존하고, 순수 벡터 SVG는 로고, 선화, 실루엣, 단순한 색상의 그림을 편집 가능한 path로 추적합니다.
사진도 SVG로 깔끔하게 변환되나요?
사진이나 복잡한 컬러 일러스트는 원본 품질 SVG를 권장합니다. 순수 벡터 SVG로 추적하면 파일이 매우 커지거나 원본과 다르게 보일 수 있으므로, 편집 가능한 path가 꼭 필요할 때만 사용하는 것이 좋습니다.
Illustrator의 Image Trace처럼 완벽하게 변환되나요?
순수 벡터 변환은 브라우저에서 업로드용 SVG를 빠르게 만드는 기능입니다. 전문 편집 프로그램의 모든 옵션을 대체하지는 않으며, 세밀한 일러스트의 시각 품질이 중요할 때는 원본 품질 SVG, PNG, WebP를 권장합니다.
원본 품질 SVG는 완전히 편집 가능한 벡터인가요?
아니요. 원본 품질 SVG는 고해상도 PNG 이미지를 SVG 안에 포함해 브라우저와 뷰어에서 원본처럼 보이게 하는 시각 품질 보존용 파일입니다. 색면과 선을 각각 편집하려면 순수 벡터 SVG를 선택해야 합니다.
원본 품질 SVG를 확대하면 픽셀이 보이나요?
원본 품질 SVG는 최대 10x 고해상도 PNG를 SVG 안에 넣어 확대 시 픽셀감을 줄입니다. 다만 완전한 순수 벡터는 아니므로 아주 크게 확대하면 래스터 이미지 특성이 보일 수 있습니다.
순수 벡터에서 흰색 경계가 우글거려요.
흰색 배경과 내부 하이라이트가 섞인 일러스트는 일반적인 색상 추적에서 흰 경계 노이즈가 생길 수 있습니다. 또한 색면 path가 맞닿는 부분에는 브라우저 안티앨리어싱 때문에 흰 실금이 보일 수 있습니다. 일러스트 고품질 모드와 색면 틈 보정을 함께 사용하면 내부 흰색 디테일을 보존하면서 이런 틈을 줄일 수 있습니다.
AI, PDF도 바로 열 수 있나요?
PDF와 PDF 호환 옵션으로 저장된 Illustrator AI 파일은 첫 페이지를 canvas에 렌더링할 수 있습니다. PDF 호환 데이터가 없는 AI 파일이나 PSD 원본은 브라우저에서 직접 열 수 없으므로 PNG, JPG, WebP 미리보기로 내보낸 뒤 사용해 주세요.
업로드한 파일이 항상 서버로 전송되나요?
아니요. 기본 이미지 처리, ZIP 생성, 기본 SVG 변환은 브라우저에서 실행됩니다. 단, 사용자가 AI 편집이나 AI 보조 SVG 생성을 직접 실행하면 현재 canvas와 지시가 설정된 AI 제공자 API로 전송됩니다.
이미지 크기 제한이 있나요?
DrowPack은 업로드한 이미지를 임의로 줄이지 않고 원본 픽셀 크기로 미리보기 canvas에 렌더링합니다. 다만 브라우저나 기기의 메모리 한계보다 큰 이미지는 처리에 실패할 수 있으므로, 그런 경우 크기를 낮춰 다시 시도하는 것이 좋습니다.
리사이즈 품질은 어떤 방식인가요?
큰 이미지를 줄일 때 한 번에 축소하지 않고 단계적으로 줄이는 고품질 리샘플링을 사용합니다. 비율 유지 옵션과 JPG 저장 품질 슬라이더를 조절해 업로드용 파일 크기와 화질을 맞출 수 있습니다.
광고가 이미지 파일이나 작업 내용을 볼 수 있나요?
아니요. 광고 서비스가 추가되더라도 기본 이미지 처리와 canvas 작업 결과는 브라우저 안에서 처리됩니다. 광고 제공자는 사이트 이용과 광고 표시 과정에서 쿠키 같은 일반 웹 기술을 사용할 수 있지만, 사용자가 AI 편집이나 AI 보조 SVG 생성을 직접 실행한 경우를 제외하고 원본 이미지 파일을 DrowPack 서버로 업로드하지 않습니다.
DrowPack이 결과 파일의 소유권을 주장하나요?
아니요. DrowPack은 업로드물이나 출력물 자체의 소유권을 주장하지 않습니다. 다만 사용자가 실제로 이용할 수 있는 권리는 원본의 저작권·초상권·라이선스, AI 제공자 조건과 관련 법률에 따라 달라질 수 있습니다. 본인이 만들었거나 필요한 허가를 받은 이미지만 사용하세요.
개인정보 및 파일 처리 요약
기본 변환은 브라우저 안에서 실행되며, 선택형 AI 요청과 사이트 운영 과정의 데이터 처리는 별도로 구분해 안내합니다.
핵심 처리 경계
- 기본 작업: 이미지 열기, 리사이즈, 패키지 생성과 일반 SVG 변환은 현재 브라우저에서 처리되며 DrowPack 서버에 원본이나 결과 사본을 저장하지 않습니다.
- 선택형 AI: 사용자가 AI 기능을 직접 실행할 때만 현재 canvas의 축소 사본과 지시문이 DrowPack Worker와 설정된 AI 제공자에게 전송됩니다.
- 사이트 운영: 호스팅·보안·광고 서비스는 페이지 요청 과정에서 IP 주소, HTTP 정보, 쿠키 같은 일반 웹 데이터를 처리할 수 있습니다.
AI 제공자, 저장 범위, 광고 쿠키, 이메일 문의와 사용자 선택은 개인정보처리방침에서, 파일 권리와 책임 범위는 이용 안내에서 확인할 수 있습니다.