# 이미지를 SVG로 — 로고, 스텐실, 실루엣의 윤곽을 곡선으로 따기

형태 하나, 윤곽선 하나. 있으면 안 되는 것은 가리키기만 하세요.

> 흑백 이미지의 윤곽을 브라우저에서 진짜 SVG 곡선으로 땁니다. 로고, 스텐실, 서명, 선화, 실루엣이 어떤 크기로도 키울 수 있는 곡선이 됩니다. 잘못 딸려 온 것은 클릭 한 번으로 뺍니다. 아무것도 업로드되지 않습니다.

이 페이지는 브라우저 안에서만 동작하는 대화형 도구입니다(https://abox.tools/ko/이미지-svg-변환/). 도구에 넘긴 어떤 것도 업로드되지 않습니다. 아래는 이 페이지가 도구에 대해 글로 설명하는 내용 전부입니다. 도구를 쓰려면 이 주소를 여세요.

## 이미지는 **절대 업로드되지 않습니다**. 서버가 아예 없으니까요.

이미지는 브라우저가 디스크에서 읽고, `src/mask.js`가 픽셀당 1비트로 줄이고, `src/contour.js`가 형태의 가장자리를 한 바퀴 돌고, `src/fit.js`가 곡선을 맞춥니다. 누구나 읽어 볼 수 있는 육백 줄 남짓이고, 뒤에 엔진도 없고, 돌리기 위해 내려받는 것도 없습니다. 이 도구에는 네트워크 기능이 하나도 없습니다. 가져올 것도 보낼 것도 없고, 설령 보내려 해도 이 페이지 반대편에는 그림을 받아 줄 서버 자체가 없습니다.

- ✗ 업로드 없음
- ✗ 가입 없음
- ✗ 워터마크 없음
- ✓ 오프라인 동작
- ✓ 오픈 소스

## 업로드하지 않고 이미지의 윤곽을 SVG로 따는 방법

1. **이미지를 고릅니다.** 로고, 스텐실, 서명, 도장, 스캔한 그림, 실루엣. 뚜렷한 형태가 들어 있는 것이면 무엇이든 깔끔하게 따집니다. 방 사진은 그렇지 않은데, 마지막에 놀라게 하는 대신 아래에 솔직한 안내가 나옵니다. 파일은 디스크에서 바로 읽히고 그동안 어디로도 아무것도 보내지지 않습니다.
2. **무엇이 형태인지 알려 줍니다.** 종이에 그린 그림은 **밝고 어두움**으로 갈리고, 그 경계값은 대신 계산해 드립니다. 물건 사진은 그렇지 않습니다. 짙은 회색 돌 위의 짙은 붉은 상은 어두운 것 위의 어두운 것이라 밝기로는 갈라지지 않습니다. 그런 사진에는 **피사체**가 맞습니다. 이미지 가장자리를 따라 난 띠에서 배경이 무엇인지 배우고, 배경이 아닌 것을 전부 남깁니다.
3. **설정이 아니라 빨간 선을 봅니다.** 윤곽선은 그것이 나온 픽셀 위에 겹쳐 그려집니다. 이 문제를 판가름할 수 있는 곳이 거기뿐이기 때문입니다. 윤곽선이 맞는지 틀린지는 그 픽셀에 대해서만 정해지고 다른 무엇과도 무관합니다. 어느 쪽 그림이든 끌면 둘 다 움직이고, 휠을 굴리면 선이 실제로 무엇을 하는지 보일 만큼 확대됩니다.
4. **있으면 안 되는 것은 클릭해서 뺍니다.** 얼룩, 스테이플, 도장, 캡션, 그림자. 클릭 한 번이 픽셀 하나가 아니라 그 색의 덩어리 전체를 잡으니 가리키는 것은 형태입니다. 다시 클릭하면 돌아옵니다. 둘러싸인 배경 조각을 클릭하면 대신 그곳이 채워집니다. 구멍이면 안 되는 구멍은 그렇게 메웁니다.
5. **필요할 때만 매끄러움을 조정합니다.** *세부*는 단순화하는 동안 선이 픽셀에서 얼마나 벗어나도 되는지이고, 따로 정하지 않으면 형태별로 계산됩니다. *모서리 날카로움*은 굽이가 둥글려지지 않고 모서리로 남으려면 윤곽이 얼마나 꺾여야 하는지를 정합니다. 대부분의 이미지는 둘 다 손댈 필요가 없습니다.
6. **SVG를 받습니다.** 파일 하나, `<path>` 하나, 신경 쓸 채우기 규칙 없음. 바깥 윤곽은 한 방향으로, 구멍은 반대 방향으로 돌기 때문에 구멍이 마흔 개인 형태도 요소 하나가 됩니다. Illustrator, Inkscape, Figma, 브라우저, 커팅 기계에서 열립니다.

## 자세한 설명

[이미지의 윤곽을 SVG로 따는 방법](https://abox.tools/ko/가이드/이미지-svg-변환하기/): 로고, 스텐실, 서명, 실루엣을 브라우저에서 진짜 벡터 윤곽선으로 만듭니다. 어떤 이미지가 잘 따지고 어떤 이미지는 결코 안 되는지, 그리고 잘못 딴 부분을 고치는 법.

## 상자 속 다른 도구

- [키 비교 차트](https://abox.tools/ko/키-비교/): 키를 적으면 그림을 가져갑니다. 그리려고 어디로도 보내지 않습니다.
- [이미지 압축](https://abox.tools/ko/이미지-압축/): 용량만 말씀하세요. 나머지는 알아서 맞춥니다.
- [이미지 크기 조절](https://abox.tools/ko/이미지-크기-조절/): 크기를 말하고, 상자를 그리고, 형식을 고르세요.
- [HEIC를 JPG로](https://abox.tools/ko/heic-jpg-변환/): 아이폰이 만드는 사진을, 아무 데서나 열리는 형식으로.

## 자주 묻는 질문

### 내 이미지가 어딘가로 업로드되나요?

아니요. 파일은 내 하드웨어에서 내 브라우저가 읽고, 이 출처에서 제공되는 자바스크립트 몇백 줄이 윤곽을 따서, 다운로드로 돌려줍니다. 이 도구에는 네트워크 기능이 하나도 없습니다. 아무것도 가져오지 않고 아무것도 보내지 않습니다. 페이지의 `Content-Security-Policy`에는 연결할 수 있는 주소가 전부 적혀 있는데, 그중 어느 것도 이 사이트의 것이 아닙니다.

### 내 사진을 SVG로 바꿔 주나요?

쓸모 있게는 아니고, 다운로드한 뒤에 알게 두는 대신 페이지가 그렇게 말해 줍니다. 윤곽 따기는 비슷한 색의 덩어리 하나하나를 별개의 형태로 만들기 때문에, 사진은 수천 개의 겹친 얼룩으로 돌아오고 파일은 JPEG보다 몇 배나 커져서 느리게 열리고 사진처럼 보이지도 않습니다. 잘 따지는 것은 *형태*가 들어 있는 이미지입니다. 로고, 스텐실, 서명, 선화, 실루엣. 물건 하나를 찍은 사진이라면 *피사체* 설정이 그것을 속이 찬 실루엣 하나로 오려 냅니다. 그건 다른 일이고, 정말 쓸모가 있습니다.

### 형태를 찾는 두 방법은 무엇이 다른가요?

던지는 질문이 다릅니다. **밝고 어두움**은 각 픽셀이 어떤 값보다 어두운지 묻습니다. 종이 위 잉크에는 딱 맞고, 피사체와 배경이 똑같이 어두울 때는 쓸모가 없습니다. **피사체**는 배경이 무엇인지 묻습니다. 이미지 가장자리를 따라 난 띠에서 그것을 배우고, 모든 픽셀을 거기에 견주어, 배경이 아닌 가장 큰 것을 남깁니다. 대체로 고른 배경 앞에 물건 하나를 놓은 사진에서는 잘 되고, 피사체가 세 변으로 잘려 나갈 만큼 바짝 자른 이미지에서는 실패합니다. 배우는 가장자리가 곧 피사체이기 때문입니다. 그럴 때는 배경을 직접 가리켜 줄 수 있습니다.

### 딴 형태에 왜 구멍이 나거나 가는 부분이 사라지나요?

픽셀당 1비트가 된 순간 이미지가 이미 그랬기 때문입니다. *따는 쪽이 받은 것*을 켜서 확인해 보세요. 열두 픽셀 안팎 아래에서는 글자의 속공간이 이미 메워지고 세로획이 이미 붙어 있으며, 없는 구멍을 되살리는 윤곽 따기는 없습니다. 해결책은 앞 단계에 있습니다. 문턱값을 옮기거나 더 큰 스캔에서 시작하세요. *피사체* 모드에서는 *틈 메우기*가 작은 구멍을 봉하고 *속을 꽉 채우기*가 배경이 이미지 가장자리에서 닿지 못하는 구멍을 전부 닫습니다.

### 잘못 딴 부분을 고칠 수 있나요?

네, 세 번째 단계가 대부분 그 일을 위한 것입니다. 그림에 있으면 안 되는 것을 클릭하면 사라지고, 다시 클릭하면 돌아옵니다. 클릭 한 번이 그 색의 덩어리 전체를 잡으니, 한 번에 픽셀 하나가 아니라 얼룩 하나나 도장 하나가 통째로 빠집니다. 둘러싸인 배경 조각을 클릭하면 채워집니다. 수정은 문턱값과 따로 보관되므로 나중에 슬라이더를 움직여도 버려지지 않습니다.

### SVG는 얼마나 커지나요?

형태라면 이미지보다 작습니다. 딴 실루엣은 보통 1~5킬로바이트이고 로고는 그보다 조금 더 됩니다. 정확한 값은 다운로드 옆에 페이지가 알려 줍니다. 사진이라면 거대해지는데, 그것이 이 도구가 그 파일에 맞지 않는다는 가장 분명한 신호입니다. 별개의 형태가 천 개쯤을 넘으면 페이지는 그리기를 멈추고 그렇게 말합니다.

### 색깔로도 따 주나요?

아니요. 이 도구는 한 가지 색의 형태 하나를 만들고, 그것이 조잡한 복사본이 아니라 그림으로 나오는 경우입니다. 색깔 윤곽 따기란 몇 가지 색으로 줄인 뒤 색마다 따로 층으로 따는 것인데, 결과는 그것을 원했던 사람 대부분을 실망시킵니다. 색이 필요하다면 여기서 형태를 따고 그리기 프로그램에서 채우세요.

### 받은 SVG로 무엇을 할 수 있나요?

흐려지지 않고 어떤 크기로도 키우기, 속성 하나로 색 바꾸기, 애니메이션, 인쇄, 커팅 기계나 레이저로 보내기. 틀릴 채우기 규칙이 없는 `<path>` 하나라서 Illustrator, Inkscape, Figma, 브라우저, 대부분의 CNC 소프트웨어가 똑같이 읽습니다.

### 이미지 크기에 한도가 있나요?

내 기기의 한도이지 저희 한도가 아닙니다. 300 dpi로 스캔한 A4 한 장, 약 9백만 픽셀은 순식간에 따집니다. 더 큰 이미지도 됩니다. 시간이 더 걸릴 뿐이고, 그 일은 어딘가의 대기열이 아니라 내 프로세서에서 일어납니다.

### 무료인가요, 계정이 필요한가요?

무료이고, 계정도 로그인도 체험 기간도 워터마크도 없습니다. 파일 개수나 크기 제한도 없습니다. 그 비용을 내는 서버가 없고, 일은 내 기기에서 일어나니까요. 사이트에는 광고가 있고 광고가 비용을 댑니다. 광고에는 파일에 관한 것이 전혀 건네지지 않습니다.

### 오프라인에서도 되나요?

네. 페이지를 한 번 불러온 뒤 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 합니다. 이미지를 어딘가로 보내서 따는 도구라면 선을 뽑는 순간 멈출 테니까요.

## 이 약속을 직접 확인하는 방법

- **이미지는 갈 곳이 없습니다.** Content-Security-Policy에 이 페이지가 연결할 수 있는 주소가 전부 적혀 있는데, 그중 어느 것도 이 사이트의 것이 아닙니다. 파일을 모을 수 있는 끝점이 여기에는 없고, 있다 한들 거기로 보낼 코드도 없습니다.
- **여기서는 아무것도 가져오지 않습니다.** `src/` 어디에도 `fetch`도 `XMLHttpRequest`도 `sendBeacon`도 없습니다. 도구 전체가 이미지 한 장의 픽셀에 대한 산수입니다. 문턱값 하나, 찾아낸 형태의 가장자리 한 바퀴, 그리고 약간의 곡선 맞추기가 전부입니다.
- **내려받을 엔진이 없습니다.** 윤곽 따기는 보통 남의 프로그램이 하는 일이고, 웹에서는 첫 클릭 전에 컴파일된 코드 몇 메가바이트가 먼저 도착한다는 뜻입니다. 여기에는 그런 것이 없습니다. 전체가 이 출처에서 내려오는 평범한 자바스크립트 몇백 줄이고, 그래서 페이지가 기다림 없이 열리자마자 동작합니다.
- **Google이 불러오는 것과 받지 못하는 것.** 광고와 측정 스크립트는 Google에서, 후원 버튼은 Buy Me a Coffee에서 옵니다. 그 어느 쪽에도 이미지에 관한 것은 전혀 건네지지 않습니다. 이미지를 읽고, 가르고, 윤곽을 따는 모든 줄은 이 출처에서 제공되며 저장소에 올라와 있습니다.
- **오프라인에서 동작합니다.** 네트워크를 끊어도 도구는 그대로입니다. 애초에 네트워크 단계가 없었으니까요. 가장 간단한 증명입니다.

**직접 확인해 보세요.** 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 `dist` 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다: https://github.com/A-Box-of-Tools/website

먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 `config/site.toml`, 이미지가 픽셀당 1비트가 되는 과정은 `src/mask.js`, 형태의 가장자리를 도는 한 바퀴는 `src/contour.js`, 계단이 곡선이 되는 과정은 `src/fit.js`, 밝고 어두움으로 가를 수 없을 때 배경을 알아내는 방법은 `src/subject.js`에 있습니다.