이 페이지의 코드가 시작되지 않았습니다.

index.html을 폴더에서 바로 열면 브라우저가 JavaScript 모듈을 막습니다. 그래서 이미지를 골라도 아무 일도 일어나지 않아요. 폴더를 http로 띄워서 여세요: 

powershell -ExecutionPolicy Bypass -File serve.ps1

그런 다음 http://localhost:8080/을 여세요.

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

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

한국어
소스 보기
이미지는 절대 업로드되지 않습니다. 서버가 아예 없으니까요.

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

실시간 확인: 확인 중…

오프라인: 확인 중…

그냥 믿지 마시고 직접 확인해 보세요. 개발자 도구의 '네트워크' 탭을 켜 놓고 무언가의 윤곽을 따 보십시오. 이미지도, 미리보기도, 파일 이름도, 고른 파일의 단 1바이트도 실려 나가는 요청이 없습니다. 아니면 인터넷을 끊고 그냥 해 보셔도 됩니다.

1 이미지 고르기

2 무엇이 형태인지 알려 주기

윤곽 따기에는 픽셀당 1비트가 필요합니다. 안이냐, 밖이냐. 그것을 정하는 방법은 두 가지이고, 맞는 이미지가 다릅니다. 흰 종이에 그린 그림은 밝고 어두움으로 갈립니다. 물건 사진은 그렇지 않습니다. 짙은 회색 돌 위의 짙은 붉은 상은 어두운 것 위의 어두운 것이라 밝기로는 갈라지지 않습니다. 그런 사진에는 피사체가 맞습니다. 이미지 가장자리에서 배경이 무엇인지 알아내고, 배경이 아닌 것을 전부 남깁니다.

3 윤곽선을 확인하고 틀린 곳 고치기

빨간 선이 지금의 윤곽선이고, 그것이 나온 픽셀 위에 겹쳐 그려집니다. 이 문제를 판가름할 수 있는 곳은 거기뿐입니다. 윤곽선이 맞는지 틀린지는 그 픽셀에 대해서만 정해지고 다른 무엇과도 무관하니까요. 어느 쪽 그림이든 끌면 둘 다 움직이고, 휠을 굴리면 확대되고, 있으면 안 되는 것은 클릭하면 됩니다. 클릭 한 번이 그 색의 덩어리 전체를 잡으니 가리키는 것은 픽셀이 아니라 형태입니다. 다시 클릭하면 돌아옵니다.

형태별로 계산 선이 픽셀에서 얼마나 벗어나도 되는지. 1 아래에서는 아무 일도 일어나지 않는데, 계단 한 칸이 원래 속한 선에서 꼬박 한 픽셀 떨어져 있기 때문입니다. 2를 넘으면 진짜 곡선까지 깎아 먹기 시작합니다.

모서리 날카로움 굽이가 곡선으로 둥글려지지 않고 모서리로 남으려면 윤곽이 얼마나 꺾여야 하는지. 너무 낮으면 모든 흔들림이 모서리가 되고 원은 다각형으로 돌아옵니다.

이미지

SVG

선을 얼마나 매끄럽게

픽셀 계단이 곡선이 되는 방식은 두 숫자가 정합니다. 대부분의 이미지에서는 둘 다 손댈 필요가 없고, 필요할 때를 위해 둘 다 알아 둘 만합니다.

4 SVG 받기

Markdown으로 보기

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

자세한 설명

이미지의 윤곽을 SVG로 따는 방법 로고, 스텐실, 서명, 실루엣을 브라우저에서 진짜 벡터 윤곽선으로 만듭니다. 어떤 이미지가 잘 따지고 어떤 이미지는 결코 안 되는지, 그리고 잘못 딴 부분을 고치는 법.

자주 묻는 질문

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

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

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

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

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

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

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

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

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

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

SVG는 얼마나 커지나요?

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

색깔로도 따 주나요?

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

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

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

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

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

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

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

오프라인에서도 되나요?

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