Penpot SVG 가져오기: 디자인에 편집 가능한 도형 넣기
Penpot 캔버스로 SVG를 가져와 개별 채우기와 경로를 확인하세요. 디자인 키트에 아이콘을 추가하기 전에 누락된 도안과 편집할 수 없는 텍스트를 진단합니다.
목차
Penpot로 SVG를 가져오려면 디자인 파일을 열어 캔버스에 .svg를 드래그하거나 도구 모음의 이미지 도구로 파일을 선택하세요. 대시보드의 Import files 명령은 Penpot 프로젝트 파일용입니다. 아이콘을 배치하려면 디자인 안에서 시작하세요. Penpot의 레이어 삽입 안내와 프로젝트 가져오기 문서가 별도 경로를 설명합니다.
도안이 나타나면 색상 영역 하나를 바꾸고 윤곽 하나를 편집할 수 있는지 확인하세요. 아이콘이 올바르게 보여도 수정하기 어려울 수 있습니다. 원본이 이미 벡터라면 필요에 따라 수정하거나 다시 내보내세요. 픽셀에서 도형을 복원해야 할 때만 PNG나 JPG를 추적하세요.
재사용하기 전에 가져온 결과를 확인하세요
원본 SVG를 보관하고 대표 아이콘 하나를 가져와 복제본에서 작업하세요. 모습, 채우기 하나, 곡선 하나와 편집 가능한 텍스트를 시험하세요. 키트 전체에 작업 방식을 반복하기 전에 별도 SVG를 내보내 원본과 비교하세요.
캔버스에서 시작하고 레이어 확인하기
도안이 들어갈 Penpot 파일을 여세요. 다른 디자인에서 떨어져 살펴볼 수 있도록 저장한 SVG를 빈 영역에 삽입하세요. 드래그가 실패하면 이미지 도구의 파일 선택기를 사용해 드래그 앤 드롭 동작을 진단에서 제외하세요.
가져온 도안을 선택하고 Layers 패널의 항목을 펼치세요. 그룹은 유용한 구성이며 SVG가 비트맵이 되었다는 근거가 아닙니다. 패널에서 자식을 선택하거나 그룹 안으로 두 번 클릭할 수 있습니다. Penpot는 Ctrl-클릭이나 Command-클릭으로 내부 선택도 지원합니다. 레이어 선택 안내가 제어를 다룹니다.
SVG 콘텐츠에 따라 서로 다른 유형의 객체가 만들어질 수 있습니다. Penpot의 릴리스된 가져오기 도구에서 경로, 사각형과 타원 같은 일반 도형은 네이티브 도형 처리기를 사용하고 다른 요소는 원시 SVG로 유지될 수 있습니다. 이미지 요소도 별도로 처리합니다. 따라서 파일 이름만으로 모든 부분의 편집 방식을 알 수 없습니다. SVG 도형 가져오기 구현을 참고하세요.
처음부터 모든 그룹을 해제하거나 평면화하지 마세요. 먼저 바꿀 부분을 식별하세요. 자식이 이미 필요한 제어를 제공한다면 그룹을 보존하세요.
채우기 하나와 곡선 하나 시험하기
부분이 눈에 띄게 분리된 작은 아이콘을 사용하세요. 화분의 식물이 좋은 예시입니다. 잎을 바꾸지 않고 화분 색을 바꿀 수 있고, 전체 식물을 왜곡하지 않고 잎 하나를 편집할 수 있어야 합니다.
가져온 아이콘의 복제본에서 다음을 진행하세요.
- 화분 레이어를 선택하고 채우기를 대비되는 색으로 바꾸세요. 원하는 영역만 바뀌는지 확인하세요.
- 잎 경로 하나를 선택하세요. Enter로 노드를 편집해 점 하나를 조금 이동한 뒤 되돌리세요. Penpot의 노드 편집 안내에 나와 있습니다.
- 복제본을 수정하지 않은 가져오기 결과와 비교하세요. 시험을 되돌린 후 원래 실루엣, 작은 틈과 스트로크 두께가 유지되는지 확인하세요.
화분과 잎이 함께 바뀐다면 선택과 원본 구조를 확인하세요. 바깥 그룹을 선택했거나 원본이 여러 영역을 하나의 경로로 결합했을 수 있습니다. 색을 성공적으로 바꿨다고 모든 윤곽이 별도 네이티브 경로라는 뜻은 아닙니다.
원시 SVG 콘텐츠일 가능성도 있습니다. Penpot에는 지원 요소의 외관 제어를 포함한 별도 옵션 패널이 있습니다. 따라서 채우기나 스트로크 제어가 있다고 일반 노드 편집을 보장하지는 않습니다. 필요한 방식으로 편집할 수 없다면 원본 편집기에서 해당 부분을 단순화하거나 다시 그리고 새 사본을 가져오세요. 이 구분은 Penpot의 원시 SVG 옵션 구현에 보입니다.
파일을 바꾸기 전에 증상 진단하기
변경하지 않은 SVG를 기준으로 사용하세요. 브라우저에서 열어 렌더링을 Penpot 가져오기와 비교하세요. 브라우저에서도 이미 잘못 보인다면 Penpot 사본을 고치기 전에 원본 내보내기로 돌아가세요.
| 보이는 증상 | 첫 확인 사항 | 다음 작업 |
|---|---|---|
| 가져오기 도구가 Penpot 프로젝트를 요구함 | 대시보드에 있는지 | 디자인을 열고 SVG를 캔버스에 삽입 |
| 아이콘이 하나의 단위로 선택됨 | 펼친 Layers 항목 | 그룹을 바꾸기 전에 자식 선택 |
| Layers에는 있지만 도안이 안 보임 | 표시 여부, 불투명도, 색상 표현과 보드 클리핑 | 대비되는 배경에서 해당 레이어를 원본과 비교 |
| 선이나 작은 점이 사라짐 | 선택한 경로의 스트로크, 너비와 끝 모양 | 복제본에 원하는 모습을 복원하고 비교 |
| 색상 편집이 너무 많은 부분에 적용됨 | 그룹 선택이나 결합된 원본 형상 | 원하는 자식을 선택하거나 원본 도안 분리 |
| 그림에 편집 가능한 윤곽이 없음 | 이미지 채우기나 내장 래스터 | 원본 벡터 찾기, 다시 그리기 또는 적절한 래스터 추적 |
| 라벨은 맞게 보이지만 입력할 수 없음 | 네이티브 텍스트 레이어인지 | 문구를 편집해야 한다면 텍스트로 재제작 |
누락된 스트로크와 보이지 않는 도안
삭제 전에 선택한 레이어의 채우기와 스트로크 설정을 확인하세요. Penpot는 스트로크 색상, 불투명도, 너비, 스타일과 표시 여부 및 열린 경로의 끝 모양 제어를 제공합니다. 짧은 스트로크 표시는 끝 모양에 따라 상당히 달라 보이므로 선이 없다고 판단하지 말고 모양을 비교하세요. 제어 항목은 색상과 스트로크에 설명되어 있습니다.
보이지 않는 객체에서는 숨긴 레이어와 클리핑도 확인하세요. 브라우저에서 원본이 맞게 보이지만 Penpot에서는 그렇지 않다면 원본 사본에서 실패한 요소를 분리하세요. 단순한 샘플을 다시 내보내 비교하세요. 여러 설정을 한꺼번에 바꾸는 대신 조사할 구체적 파일과 증상을 얻을 수 있습니다.
오래된 해결책이 제안한다는 이유만으로 모든 style, 마스크나 정의를 제거하지 마세요. 이런 요소는 외관 정보를 담을 수 있습니다. 원본의 스트로크 구성이 문제라면 SVG 스트로크 누락 진단을 따르고 스트로크를 외곽선으로 확장하기 전에 편집 가능한 원본을 보존하세요.
올바르게 보이지만 편집할 수 없는 텍스트
버튼 라벨은 단어 하나를 바꿔 보세요. 로고라면 글자 모양 보존만으로 충분한지 결정하세요. 서로 다른 요구 사항입니다.
가져온 글자는 이미 외곽선일 수 있고 네이티브 텍스트 레이어 대신 SVG 콘텐츠로 남을 수도 있습니다. 모든 SVG 텍스트 요소가 편집 가능한 Penpot 텍스트가 된다고 생각하지 마세요. 문구를 정기적으로 바꿔야 한다면 Penpot 텍스트 도구로 다시 만들고 원하는 글꼴을 선택해 간격과 줄바꿈을 비교하세요. Penpot의 텍스트 안내는 텍스트 레이어 생성과 내용 편집을 설명합니다.
글자 모양이나 줄바꿈이 달라지면 SVG 글꼴 문제 해결 안내를 사용하세요. 전달 버전에 외곽선 글자가 필요하더라도 편집 가능한 텍스트 사본을 보관하세요.
이 작업에서 PerfectVector가 필요한 경우
래스터 아이콘이나 일러스트로 Penpot의 편집 가능한 윤곽이 필요할 때 PerfectVector가 유용합니다. PNG나 JPG를 SVG 경로로 변환하고, 실루엣과 색상 영역을 확인한 뒤 가져와 채우기 하나와 곡선 하나를 시험하세요. 추적 결과는 사용할 도안과 비교해 계속 판단해야 합니다.
SVG 안의 래스터 그림은 컨테이너가 바뀌었다고 편집 가능한 잎이나 화분 윤곽을 얻지 않습니다. Penpot 가져오기 도구는 별도 이미지 처리기를 사용하며, 해당 이미지를 가져오기 코드의 다른 부분에서 처리하는 네이티브 경로 객체로 바꾸지 않습니다.
원본 벡터 내보내기가 있다면 사용하세요. 단순한 인터페이스 심볼은 Penpot 기본 도형으로 그리면 추적보다 의도한 형상을 더 잘 만들 수 있습니다. 픽셀이 디자인의 일부라면 사진과 질감 많은 도안은 이미지로 유지하세요. 이미지 벡터화 설명은 추적이 복원할 수 있는 것과 바꾸는 것을 다룹니다.
키트를 만들기 전에 샘플 하나 내보내기
작업 디자인은 Penpot에 보관하고 별도 전달 SVG를 내보내세요. 아이콘이나 해당 보드를 선택하고 Design 패널 Export 영역의 더하기 버튼으로 내보내기 프리셋을 추가해 SVG를 선택하세요. Penpot의 레이어 내보내기에 설명되어 있습니다.
내보낸 파일을 브라우저에서 여세요. 색상, 스트로크, 텍스트 모습, 자르기와 여백을 기준과 비교하세요. 파일을 디자인 편집기로 다시 가져와야 한다면 별도 영역으로 가져오고 편집 시험을 반복하세요. 올바른 모습과 유용한 편집 구조는 각각 확인해야 합니다.
샘플을 더 큰 키트에 추가하기 전에 다음을 확인하세요.
- 별도 색상이 필요한 영역을 독립적으로 선택할 수 있습니다.
- 모양을 바꿀 윤곽에 사용 가능한 편집 제어가 있습니다.
- 작업 디자인에서 편집 가능한 라벨이 텍스트로 유지됩니다.
- 내보낸 아이콘에 목표 경계와 여백이 있습니다.
- 실제 인터페이스 크기에서도 아이콘을 명확히 알아볼 수 있습니다.
그런 다음 세트 전체에 같은 확인을 적용하세요. PNG 아이콘을 SVG UI 키트로 변환하는 작업 방식은 개별 가져오기가 정상인 후 공통 그리드, 시각적 크기와 이름 규칙을 추가합니다.
FAQ
Penpot Import files 대화상자가 SVG를 거부하는 이유는 무엇인가요? 그 대화상자는 Penpot 프로젝트 파일을 가져옵니다. SVG 그래픽을 배치하려면 디자인 파일을 열고 이미지 도구를 쓰거나 SVG를 캔버스로 드래그하세요.
SVG를 가져오면 모든 부분을 편집할 수 있나요? 일반 벡터 도형은 네이티브 Penpot 객체가 될 수 있지만 다른 콘텐츠는 원시 SVG나 이미지로 남을 수 있습니다. 도안을 재사용하기 전에 필요한 채우기, 곡선이나 텍스트 변경을 시험하세요.
가져온 SVG의 그룹을 해제해야 하나요? 그룹 구조 변경이 작업에 도움이 될 때만 하세요. 먼저 Layers 패널에서 자식을 선택해 보세요. 유용한 그룹을 유지해도 선택 가능한 자식을 편집할 수 있습니다.
잘못 가져와지는 SVG를 벡터화해야 하나요? 기존 벡터 도안을 수정하거나 다시 내보내는 것으로 시작하세요. 벡터화는 사용할 도안이 래스터이고 경로가 필요할 때 유용하며 기존 SVG의 일반적인 수정 단계는 아닙니다.
Sources
- Penpot: 레이어 — 도안 삽입, 자식 선택과 경로 노드 편집.
- Penpot: Penpot 파일 내보내기 및 가져오기 — 캔버스 도안 삽입과 별개인 기본 프로젝트 가져오기 경로.
- Penpot: SVG 도형 가져오기 구현 — 릴리스 버전에서 네이티브 도형, 이미지와 원시 SVG 콘텐츠의 별도 처리.
- Penpot: 원시 SVG 옵션 — 외관 제어만으로 네이티브 경로 편집 가능성이 확정되지 않음.
- Penpot: 색상과 스트로크 — 진단에 사용하는 채우기, 스트로크와 끝 모양 제어.
- Penpot: 텍스트와 타이포그래피 — 네이티브 텍스트 레이어 생성과 내용 편집.
- Penpot: 레이어 내보내기 — 레이어나 보드에 SVG 내보내기 프리셋 추가.
원본이 PNG나 JPG이고 편집 가능한 도형이 필요하다면 PerfectVector로 SVG를 준비하세요. Penpot로 가져와 채우기 하나를 바꾸고 곡선 하나를 시험한 뒤 디자인 키트에 도안을 확정하세요.
