이미지-투-벡터

이미지 투 벡터

참조 이미지를 일치하는 SVG로 변환한 다음, 요청받은 스타일(그리고 원한다면 애니메이션)이 적용된 아트워크로 만듭니다.

아래 명령어에서 <skill>은 이 스킬의 폴더(이 파일이 있는 폴더)입니다. python이 Python 3가 아니라면 python3을 사용하세요. -I 플래그는 Python이 이미지 폴더에서 잘못된 파일을 import하지 못하게 합니다.

이 워크플로우가 존재하는 이유

눈대중으로 "좌표를 입력"하여 인식 가능한 모양을 그리는 것은 가까워 보여도 실패합니다. 모든 추정 지점이 조금씩 벗어나고, 그 오차가 쌓여 결과물은 특정 대상이 아닌 일반적인 모양으로 읽힙니다. 사람들은 즉시 알아챕니다("전혀 안 닮았어요"). 참조 이미지의 실제 픽셀을 tracing하면 정확한 기하학 구조를 얻을 수 있고, 이후의 모든 단계(색상, 음영, 애니메이션)는 이미 올바른 모양 위에 구축됩니다.

tracing만큼 중요한 두 가지 습관:

• 일치를 주장하기 전에 증명하세요. 출력물을 참조 이미지 옆에 놓고 오버레이해 보세요. 오버레이를 보지 않고 "이게 이미지와 일치합니다"라고 말하지 마세요. 일치하지 않을 때 그렇게 말하는 것은 그림 자체보다 더 큰 신뢰를 잃게 만듭니다.
• 디자인을 적용하기 전에 승인을 받으세요. 변형을 렌더링된 미리보기로 보여주고 선택하게 하세요. 미리보기를 바꾸는 것은 저렴하지만, 통합된 코드를 바꾸는 것은 그렇지 않으며, 사용자가 보지 않은 디자인은 거절당하기 쉽습니다.

설정

이 스크립트에는 Python 3.9+와 Pillow, NumPy, scikit-image, Node 18+, 그리고 (미리보기용) Edge, Chrome 또는 Chromium이 필요합니다. 확인하려면:

python -c "import PIL, numpy, skimage" && node --version

Python 패키지가 없으면 설치 전에 물어보세요. pip install -r <skill>/requirements.txt로 설치하거나, uv run --with pillow --with numpy --with scikit-image python ...으로 설치 없이 실행할 수 있습니다.

임시 폴더에서 작업하세요. 참조 이미지는 원래 위치에 두고, 공유될 어떤 폴더에도 복사하지 마세요.

단계

1. 좋은 참조 이미지 확보

평평한 아트워크가 깔끔하게 tracing됩니다: 2D 그림, 플랫 아이콘, 로고, 단색과 윤곽선이 있는 만화. 사진이나 3D 렌더링에는 그라데이션과 반사가 있어서 점으로 분해됩니다. 사진만 있다면(또는 사용자의 동의를 얻어) 같은 주제의 평평한 그림을 요청하세요. "X 그리는 방법: 최종 단계" 이미지가 이상적입니다. 사진은 나중에 음영을 가이드하는 데만 사용하세요.

먼저 이미지를 직접 살펴보세요. 각 부분을 평범한 단어로 이름을 붙여(올빼미의 경우: 귀깃, 얼굴 원반, 눈, 부리, 배, 날개) 사용자와 대화할 수 있게 하세요.

2. 색상 샘플링

python -I <skill>/scripts/palette.py <image>

이 명령어는 이미지 크기, 대상의 경계 상자, 주요 색상 및 시작 팔레트를 출력합니다. 이것을 trace 구성으로 전환하세요: 평평한 영역당 하나의 명명된 색상(body, belly, eye, line, background, ...). 작은 영역(부리, 하이라이트)은 시작 팔레트의 컷오프 아래에 있을 수 있으므로 이미지에서 확인하세요. 안티앨리어싱된 가장자리 색상도 기록하세요: 어두운 윤곽선은 종종 두세 가지 어두운 색조로 나옵니다. 각각에 고유한 팔레트 항목을 주고 같은 레이어에 넣으세요.

3. Trace

구성 파일을 작성하고(references/config.md에 모든 키가 문서화되어 있고, examples/owl/owl.config.json이 작동 예시입니다) 실행하세요:

python -I <skill>/scripts/trace.py <image> <config.json> <out-dir>

각 픽셀은 가장 가까운 팔레트 색상으로 이동합니다. 각 레이어의 연결된 영역은 외곽선이 추출되고(가볍게 블러 처리된 마스크에 marching squares를 적용하여 가장자리가 부드러워짐), 단순화되어 <out-dir>/regions.json에 이미지 자체 픽셀 좌표의 SVG 경로 데이터로 기록됩니다. silhouette 레이어(배경이 아닌 모든 것)는 항상 포함됩니다. 또한 결과물의 단색 SVG인 trace.svg와 각 픽셀이 어떤 색상으로 분류되었는지 보여주는 classes.png도 작성합니다. 영역이 잘못 나왔을 때는 classes.png를 살펴보세요. references/config.md 끝에 있는 표에는 일반적인 수정 방법이 나와 있습니다.

4. 일치 증명

node <skill>/scripts/compare.mjs <out-dir>/regions.json <image> <config.json> <out-dir>/compare.html
python -I <skill>/scripts/render.py <out-dir>/compare.html <out-dir>/compare.png --size 1160x520

구성의 compareColours는 각 레이어를 참조 이미지의 고유 색상에 매핑하므로 재구성이 원본처럼 보여야 합니다. 페이지는 참조 이미지, 재구성 이미지, 그리고 재구성 이미지를 참조 이미지 위에 55% 투명도로 겹치고 실루엣을 파란색으로 외곽선 처리한 것을 보여줍니다. PNG를 보고 정직하게 확인하세요: 외곽선, 모든 영역, 선과 두께. 구성을 수정하고 일치할 때까지 다시 trace하세요. 이 비교 결과도 사용자에게 보여주세요. 이것이 이후 과정에 대한 신뢰를 얻는 방법입니다.

만약 사용자가 원한 것이 이미지의 SVG뿐이라면, trace.svg가 바로 그것입니다: 비교 결과와 함께 전달하고, 더 원하지 않으면 여기서 멈추세요.

5. 세 가지 변형으로 리스타일

trace된 동일한 모양에 대해 세 가지 완전히 다른 렌더링을 사용자가 요청한 색상으로 만드세요. references/styles.md에 레시피가 있습니다:

• A, 플랫 아이콘: 단색 채움, 굵은 외곽선, 2톤 밝음/그림자 분할. 작은 크기에서 가장 선명합니다.
• B, 소프트 3D: 각 영역이 자체적인 왼쪽 위 조명 그라데이션을 가지며, 판은 부드러운 드롭 섀도우로 들뜨고, 광택 쉘, 빛나는 디테일.
• C, 시네마틱 메탈: 다중 밴드 브러시 그라데이션, 베벨 처리된 가장자리, 반사 줄무늬, 블룸.

색상 변경("다크 에디션" 등)은 같은 레이어의 팔레트 교체입니다. 모든 영역은 모양을 유지하며, 이것이 원본으로 읽히는 이유입니다.

각 변형을 어두운 배경과 밝은 배경에 크게, 그리고 실제로 사용될 크기(아바타 72px 및 40px, 파비콘 32px 및 16px 등)로 보여주는 미리보기 페이지를 만드세요. 비교를 위해 원본 색상도 함께 표시하세요. render.py로 PNG로 렌더링하고, 직접 살펴본 후 환경이 허용하는 방식(열 수 있는 이미지나 파일, artifact, 사이드 패널)으로 사용자에게 보여주세요. 선택하도록 하거나, 섞도록 하세요(C의 마감에 A의 외곽선 등). 아직 아무것도 빌드하지 마세요.

6. 애니메이션 (선택 사항, 스타일 선택 후)

references/animation.md를 읽으세요. 간단히 말해: 상태별 분위기(대기, 생각, 대화, 일시 정지), 루프용 CSS 키프레임, 그리고 데이터에 맞춰 시간이 지정된 모든 것(예: 음성 음량 엔벨로프에 맞춘 립싱크)에 SMIL <animate>를 사용합니다. 분위기를 HTML 페이지로 실시간 미리보기하고, 정지 PNG도 함께 보내세요. 다시 승인을 받으세요.

7. 통합하기

이제야 프로젝트를 건드립니다. trace된 모양을 경로 데이터를 여기저기 붙여넣기하는 대신 코드 모듈로 만드세요:

node <skill>/scripts/emit_shapes.mjs <out-dir>/regions.json <target>/shapes.ts --name OWL_SHAPES --layers silhouette,body,wings=wing[],eyes=eye,ink

key=layer는 레이어 이름을 바꾸고, []는 해당 영역을 배열로 유지하여 각각을 별도로 음영 처리할 수 있게 합니다. 모듈은 OWL_SHAPES_VIEWBOX도 내보냅니다. 좌표는 참조 이미지의 픽셀 공간에 유지하고 해당 viewBox로 프레임을 지정하세요. 임베딩 참고 사항은 references/animation.md에, Claude Code 모드 관련 참고 사항은 references/claude-code-mods.md에 있습니다.

사용자와 대화하기

• 설명하지 말고 보여주세요. 모든 디자인 단계는 사용자가 볼 수 있는 이미지로 끝납니다.
• 사용자가 이상하다고 말하면 믿으세요. 참조 이미지와 비교하고 무엇이 다른지 구체적으로 말한 후에 변경하세요.
• 방법을 묻는다면 평범한 말로 설명하세요("모든 픽셀을 색상별로 정렬하고, 각 색상의 외곽선을 추적한 다음, 외곽선을 벡터 모양으로 바꿉니다").
• 상표권이 있는 캐릭터나 회사 로고의 경우, 개인 용도로 tracing하는 것은 괜찮습니다. 출판하거나 판매하는 것은 다른 문제라는 점을 강의하지 않고 한 번 언급하세요.