요소 작업실

ELEMENT STUDIO

내 컴퓨터에서만 처리
YOUR LITTLE ASSET WORKSHOP

벡터는 그대로, 여백은 깔끔하게.

ChatGPT에서 만든 SVG와 PNG를 미리캔버스에 올리기 좋게 준비하세요.

Ctrl + S 덮어쓰기 저장

작업 미리보기

작은 요소의, 다음을 준비하는 곳

SVG 코드를 붙여넣거나 이미지를 열어주세요.
원본을 지키면서 필요한 만큼만 다듬어요.

출력 크기—px
보존 방식원본 유지
저장 형식SVG / PNG

SVG 코드 붙여넣기

ChatGPT의 SVG 코드를 그대로 붙여넣으세요. <svg>…</svg> 전체가 필요합니다.

요소 작업실 사용 안내

  1. 파일 열기로 SVG·PNG를 선택하거나, ChatGPT가 만든 SVG 전체 코드를 붙여넣으세요. 코드를 이미지로 캡처할 필요가 없습니다.
  2. SVG는 패스, 그룹, 색상, 그라데이션, 투명도, viewBox와 크기를 SVG 안에 보존합니다. 크기 변경은 출력 크기만 바꾸며 벡터 좌표는 유지합니다. PNG는 열자마자 보이는 요소의 경계에 맞춰 자동 크롭합니다. 기본 감지 기준 16과 미세 점 무시 기능으로 옅은 잔여 픽셀이 경계를 넓히는 것을 방지합니다. 옅은 그림자가 필요한 경우 ‘그림자까지 모두 포함’을 선택하세요. 단색 여백은 감지 방식을 바꿔주세요.
  3. 육각형 직접 편집: 육각형_말풍선.svg를 열면 파란 핸들 1~6이 나타납니다. 각 점을 마우스로 드래그하고, 오른쪽의 내부색·선색을 각각 선택하세요. 아래쪽 두 꼭짓점을 움직이면 꼬리 연결부도 따라갑니다. 주황색 끝 핸들은 꼬리 방향·길이를, 위치 핸들은 아래쪽 변에서 꼬리 위치를 조절합니다. 선 두께도 별도로 바꿀 수 있습니다. 요소 외곽에 딱 맞추기는 선까지 포함해 SVG 캔버스(viewBox)만 줄입니다. 벡터 좌표는 지우지 않으므로, 바깥으로 드래그하고 놓으면 다시 확장되며 사방에 40 여백 추가도 가능합니다. 이 외곽 맞추기는 효과 없는 단일 육각형·말풍선에 지원됩니다. Esc는 현재 드래그를 취소합니다. 핸들은 편집 화면에만 표시되며 저장된 SVG에는 들어가지 않습니다. 기존 육각형 말풍선과 변환이 없는 6점 polygon을 지원합니다.
  4. 저장 또는 Ctrl+S는 현재 연결된 파일을 덮어씁니다. 새 SVG 또는 파일 연결이 없는 경우에는 최초 1회 저장 위치를 선택합니다. 브라우저가 쓰기 권한을 물을 수 있습니다.
  5. 다른 이름으로 저장 또는 Ctrl+Shift+S를 선택한 경우에만 별도 저장 창을 엽니다. 이후 저장은 새로 선택한 파일을 덮어씁니다.
  6. 덮어쓰기는 Chrome·Edge의 지원 환경에서 작동합니다. 지원하지 않는 브라우저는 다운로드만 가능합니다. HTML을 다시 열거나 새로고침하면 파일을 다시 연결해야 합니다.
  7. 저장한 .svg / .png 파일을 미리캔버스 업로드 메뉴에 넣으세요. SVG 내부가 벡터여도 미리캔버스에서 편집할 수 있는 범위는 업로드 방식과 기능에 따라 달라집니다. 임베드된 비트맵을 벡터로 변환하지는 않습니다.

디자인허브 제출 참고: SVG 최대 150KB · 최대 변 길이 6,000px · 변경 가능 색상 5개 권장. 아래 검사는 간단한 참고이며, 제출 승인이나 완전한 호환성을 보장하지 않습니다. 공식 SVG 가이드

이 도구의 ‘불러온 원본’은 이번 세션에서 연 파일입니다. ‘되돌리기’ 후 저장하면 그 내용으로 파일을 다시 덮어씁니다. 파일의 EXIF 등 일부 PNG 부가정보는 크롭할 때 유지되지 않을 수 있습니다. PNG 해상도(pHYs) 정보는 유지합니다.