벡터 일러스트레이션 툴킷

사용자의 아이디어와 참조 디자인을 결합하고, 명확화 과정을 통해 점진적으로 초점을 맞춘 후, 여기에 있는 드로잉 도구를 사용하여 구현합니다. 기본적으로 아래 Micro-UI 스타일 제약 조건을 사용하며, 사용자가 명시적으로 지정한 방향 및 프로젝트 규칙이 우선합니다.

Micro-UI 기본 스타일 및 구성

이 규칙 세트는 이전 버전의 스타일 경계를 복원하여 새로 그려지는 Micro-UI 아트워크에 적용됩니다. 이는 범용 SVG 기술의 제한이 아닙니다.

실제 컨트롤 슬라이스: 주체는 식별 가능한 도구 또는 컨트롤 구조를 가져야 합니다. 반복되는 회색 막대, 빈 카드, 의미 없는 아이콘으로 인터페이스를 구성하지 마십시오. 먼저 참조에서 객체의 정체성 특징을 추출합니다.
제로 외곽선 주체: 큰 형태는 단색 면, 가림, 부드러운 그림자로 경계를 정의합니다. 필수 아이콘 선, 눈금자 기준선, 매우 희미한 환경 요소에는 선을 사용할 수 있습니다. 아이콘 크기와 외곽선은 대상 프로젝트 규칙을 따릅니다.
기본 레이어드 구성: '베이스 지지판 → 중간 컨트롤 슬라이스 → 전경 초점' 순서로 공간을 구성하며, 환경 레이어는 선택 사항입니다. 종이, 문서, 보고서는 지지판을 사용할 수 있습니다. 컨트롤 자체가 완전한 실체를 구성하는 경우 추가 지지판을 생략할 수 있습니다. 각 레이어는 주제를 위해 존재해야 하며, 레이어 수를 늘리기 위해 부속물을 추가하지 않습니다.
단일 레이어 원자 및 재귀 금지: 주체가 여러 하위 모듈로 구성된 경우, 하위 모듈은 완전한 단색 실체를 유지하며, 더 이상 세 번째 레이어의 마이크로 컨트롤, 유사 차트 또는 작은 기호를 중첩하지 않습니다. 구조 계층은 시각적 기능에 따라 계산되며, SVG <g> 중첩 횟수에 따라 계산되지 않습니다.
최소 구성 요소 16px: 대상 표시 크기에서 독립적인 색상 블록의 너비와 높이는 각각 최소 16px입니다. 필수 아이콘 선, 눈금자 기준선, 상태 미세 표시 점(직경 3px 이하)은 예외입니다. 내보내기 해상도를 높여 이 규칙을 우회하지 마십시오. 작은 크기에 맞지 않으면 구성 요소를 줄이거나 표현을 단순화합니다.
절제된 디테일: 단일 컨테이너는 기본적으로 3개 이하의 주요 구성 요소를 포함합니다. 조밀한 유사 텍스트를 그리지 않으며, 빈 높은 컨테이너에 소량의 콘텐츠를 담지 않습니다. 텍스트는 정체성, 상태 또는 작업을 표현할 때만 사용합니다.
토큰 색상: 소스 코드는 중앙 집중식으로 정의된 색상 역할을 참조한 다음 프로젝트 토큰에 매핑합니다. 16진수 또는 기타 색상 리터럴을 분산하여 작성하지 않습니다. 독립 SVG는 내보낼 때 역할을 실제 색상으로 확인하고 매핑 소스를 유지하여 호스트 없이도 표시될 수 있도록 합니다.

현재 객체에 대해 참조 이미지 및 분석 기록에서 관련 자료를 선택합니다. 조명 매개변수 또는 코드 예제가 필요한 경우 구축 및 전체 예제를 참조합니다. 스타일 규칙은 기본적으로 적용되며, 예외가 필요한 경우 AI가 참조 및 표시 크기를 결합하여 판단하고 예외 대상, 이유 및 시각적 검사 결과를 설명합니다. 일반 드로잉 선택을 위해 반복적으로 허가를 구할 필요는 없습니다.

사용자 참조 학습 프로세스

사용자가 참조 이미지를 제공하고 그 특징을 차용하려는 경우 다음 단계에 따라 분석하고 기록합니다.

의도 수신: 사용자가 참조 이미지를 보내고 차용하려는 특징을 설명합니다(예: '폴더 개구부의 두께감 차용' 또는 '이 청록색 색상 조합의 면적 비율 차용').
요점 분석: AI가 이미지를 보고 다섯 가지 측면에서 분해합니다.
- 형태: 컨트롤이 어떻게 슬라이스되는지, 외형 윤곽 및 둥근 모서리 크기.
- 색상: 밝은 베이스 플레이트, 기능 메인 색상 및 하이라이트 초점의 면적 대비.
- 계층: 앞뒤 가림 관계, 층 간 이동 및 여백.
- 구도: 캔버스 내 주체의 무게 중심과 시선 흐름.
- 조명: 미세 그림자의 오프셋, 확산 크기 및 투명도.
저장 및 기록:
- 이미지를 assets/reference-images/ 디렉토리에 저장합니다.
- 분석 결론을 references/visual-reference-map.md에 추가합니다. 차용할 수 있는 것과 원본 이미지의 특정 비즈니스 콘텐츠(그대로 복사하지 않음)를 명확히 기록합니다.
스타일 변경 및 이미지 없는 경우:
- 사용자가 명시적으로 스타일 변경을 요청하는 경우 새 요구 사항에 따라 매개변수를 조정하고 이전 규칙과 충돌하지 않도록 합니다.
- 참조 이미지가 없는 경우 기존 규칙과 예제에 따라 그리고 사용자에게 이미지를 요구하지 않습니다.
개념 설명:
- 여기서 '학습'은 참조 이미지를 분석하고 요점을 기록하여 드로잉 중에 참조하는 것을 의미합니다. 모델을 훈련시키는 것이 아니며, 모델이 이 스타일을 영구적으로 학습했다고 주장하지 않습니다.

명확화를 통한 점진적 화면 집중

새로운 화면의 방향이 아직 명확하지 않은 경우, AI가 사용자가 점진적으로 아이디어를 표현하도록 능동적으로 안내하며, 주제어를 받자마자 바로 이미지를 제작하지 않습니다. 먼저 사용자가 이미 제공한 용도, 시나리오, 참조, 선호도 및 제한 사항을 정리하고, 현재 디자인 판단에 영향을 미칠 수 있는 차이점만 명확히 합니다. 확인된 정보는 재사용하며 반복적으로 묻지 않습니다.

먼저 소수의 구체적인 옵션을 제시하여 사용자가 선호도를 표현하도록 돕고, 사용자의 선택과 설명에 따라 점진적으로 깊이 들어갈 수 있습니다. 각 라운드는 하나의 주요 결정을 중심으로 간결하고 구체적인 질문을 하고, 실제로 차별화된 방향을 소수 제시하며, 각각 어떤 화면을 형성할지 설명하고 추천 사유를 제공합니다. 다음 라운드는 사용자가 방금 확인한 내용을 이어받아 아직 명확하지 않은 시나리오, 주체 또는 구성을 더욱 집중시켜야 하며, 일반적인 옵션을 반복하지 않습니다. 사용자가 이러한 방향을 자유롭게 설명, 조합 또는 거부할 수 있도록 허용하며, 사용자를 옵션에 제한하지 않습니다. 한 번에 전체 요구 사항 설문지를 던지지 말고 전문적인 구성 작업을 사용자에게 넘기지 마십시오.

누락된 정보에 따라 다음 사고 방식으로 점진적으로 진행합니다. 사용자가 이미 명확히 한 부분은 건너뜁니다.

표현 내용 집중: 용도와 주제에서 사용자가 관찰자에게 가장 이해시키고 싶은 것을 파악하고, 객체, 동작, 상태 또는 관계를 명확히 합니다. 광범위한 기능 용어를 구체적인 시나리오로 전환하고, 명확한 화면 의도를 한 문장으로 만들어 사용자 확인을 요청합니다.
시각적 방향 집중: 자료 분석과 결합하여 관련 참조를 보여주고, 차용할 수 있는 형태, 색상, 공간 또는 질감을 지적하며, 사용자가 좋아하는 부분과 싫어하는 부분을 묻습니다. 스타일 근거와 장면 구성을 구분하며, 특정 참조를 좋아한다고 해서 기본적으로 그 레이아웃을 그대로 복사하지 않습니다.
화면 구성 집중: 대화를 통해 사용자가 주체, 객체 관계, 초점 및 전체적인 느낌에 대한 생각을 점진적으로 이해하고, 참조를 결합하여 구체적인 조언을 제공하며, 사용자가 명확한 선택을 할 수 있도록 돕습니다.

대화 중에는 여전히 명확하지 않은 내용에 대해서만 계속 명확히 하고, 기계적으로 질문 목록을 완료하지 않습니다. 아이디어가 집중되면 짧은 텍스트로 양측이 확인한 화면 의도와 주요 구성을 다시 말하고, 사용자가 명확하게 '시작해도 됩니다', '움직여도 됩니다' 또는 이와 동등한 권한을 부여할 때까지 기다린 후 드로잉을 시작합니다. 이미 시작 권한이 있고 방향이 명확하면 직접 실행하며 반복적으로 확인하지 않습니다. 후속 세부 사항은 사용자가 제어하며, 사용자가 요청하는 수정에 따라 계속 조정하고, 샘플 확인 또는 피드백 정밀 검토 단계를 설정하지 않습니다. 부분 수정은 모호한 대상만 명확히 하고 전체 프로세스를 다시 시작하지 않습니다.

참조에서 형태 및 구성까지

먼저 사용자 경험에서 객체의 식별 구조를 찾습니다. 윤곽과 부품뿐만 아니라 핵심 비율, 배열 순서 및 연결 관계도 포함합니다. 텍스트와 일반적인 둥근 직사각형으로 이러한 특징을 대체할 수 없습니다. 용도에 따라 완전한 객체 또는 로컬 슬라이스를 선택합니다. 단순화는 프레이밍과 생략을 통해 우선적으로 수행하고, 과장 시에는 객체의 신뢰성 있는 구조 관계를 유지하며, 기능 이름을 기본적으로 프로세스로 그리지 않습니다.

현재 객체와 해결하려는 형태 문제에 따라 관련 참조를 선택하고 실제로 이미지를 엽니다. 구현을 이해해야 하는 경우 해당 SVG를 읽고 렌더링 결과를 봅니다. 자료 라이브러리를 순회할 필요는 없습니다. 분석은 '어떤 구체적인 관계가 참조를 성립하게 하며, 이번에 어떻게 사용할 것인가'에 초점을 맞춰야 합니다. 예를 들어 스케일 대비, 지지 또는 가림 등이며, 단지 둥근 모서리, 부드러운 그림자 등의 효과를 나열하는 데 그쳐서는 안 됩니다. 스타일 근거는 장면 레이아웃을 그대로 복사하는 것과 같지 않습니다. 이미지에 소스 코드가 없는 경우 구현 방식은 검증되지 않은 추측에 속합니다.

이에 따라 무엇을 유지하고, 무엇을 삭제하며, 어디를 과장할지 결정합니다. 그런 다음 큰 형태로 주체, 보조물 및 여백을 배치합니다. 먼저 객체가 신뢰할 수 있는지, 주요 및 부차가 성립하는지 판단한 다음 세부 사항과 재질을 추가합니다. 설명 텍스트나 그림자로만 보완할 수 있다면 형태로 돌아갑니다. 판단은 AI가 수행하며, 사용자 확인 단계를 추가하지 않습니다. 구체적인 효과를 경로, 좌표 및 필터로 변환하는 방법은 참조를 드로잉으로 변환을 참조합니다.

변형은 주체 관계, 시점 또는 구성을 변경해야 합니다. 선, 질감 및 색상만 바꾸는 것은 동일한 구성의 재질 변화에 불과하며, 새로운 장면이라고 할 수 없습니다. 현재 주제의 객체 조합을 후속 작업의 고정 템플릿으로 작성하지 마십시오.

동일한 공간의 객체는 그림자, 두께 및 조명 근거를 공유합니다. 평면 내의 아이콘과 텍스트는 먼저 로컬 좌표로 배치한 다음, 표면 전체에 매핑됩니다. 먼저 뒤의 실체를 그리고, 그다음 앞의 실체를 그립니다. 인접한 윤곽은 명확히 분리되거나 명확히 가려져야 하며, 접선, 좁은 틈, 아이콘이 반쯤 나오는 것을 피합니다. 균일한 기하는 구축 도구에서 처리하며, 주체의 적절성은 여전히 참조 분석 및 실제 크기 렌더링으로 판단합니다.

대조 검사 및 로컬 수정

내부 검사 단계: 렌더링 → 실제 보기 → 문제 찾기 → 재검사. 드로잉 또는 수정을 완료한 후 scripts/render.mjs를 사용하여 SVG 또는 디스플레이 페이지에서 1×, 3× PNG를 출력하고, 두 이미지를 실제로 열고 아래 '납품 전 시각적 승인' 항목을 하나씩 확인하며 구체적인 문제를 기록합니다. 1×는 주체 식별성, 구성, 비율 및 여백을 확인하고, 3×는 둥근 모서리, 가림, 이음새, 자르기 및 그림자를 확인합니다. 내보내기 픽셀 배율은 대상 표시 크기를 대체하지 않습니다. 대상 크기가 SVG 고유 크기와 다른 경우 --width, --height를 통해 지정합니다.

적어도 한 번의 초기 검사와 한 번의 수정 후 재검사를 완료합니다. 초기 검사에서 문제를 발견하지 못한 경우 두 번째 독립적인 재검사를 수행하며, 의도적으로 수정할 필요는 없습니다. 수정할 때마다 다시 렌더링하고 이미지를 열어 구체적인 문제가 해결되었는지 확인합니다. 여전히 해결할 수 없는 문제가 있거나 환경을 렌더링할 수 없는 경우 명확히 설명하고 시각적 승인이 통과되었다고 주장하지 않습니다. 이 프로세스는 AI 내부 품질 검사이며, 사용자 샘플 확인 또는 피드백 정밀 검토 단계를 추가하지 않습니다.

CSS 역할 변수와 관련된 경우 --vars를 통해 프로젝트에서 생성된 JSON 매핑을 전달합니다. 누락되고 유효한 대체 값이 없는 변수는 해결해야 하며, 스스로 색상을 보충하지 않습니다. 프로젝트 매핑과 내보내기 이미지는 작업 디렉토리에 저장하며, 프로젝트 색상 값을 skill에 쓰지 않습니다. 명령어, 종속성 및 디스플레이 페이지 스크린샷 범위는 렌더링 및 보기를 참조합니다.

완성된 이미지를 선택한 참조와 나란히 보고 윤곽, 비율, 둥근 모서리, 색상 면적, 그림자 및 디테일 밀도를 비교하여 시각적 언어가 조화로운지 판단합니다.

렌더링 후 구체적인 시각적 문제를 지적한 다음 문제를 수정합니다. 객체 식별성, 비율, 가림, 정렬 및 경계를 확인하고, 파일 유효성 또는 성공적인 내보내기로 시각적 판단을 대체하지 않습니다.

수정 전에 먼저 사용자가 가리키는 대상 및 범위를 찾고, 기존 벡터 구조를 사용하여 로컬 조정을 수행합니다. 수정 후 이전 및 이후 이미지를 대조하여 승인된 형태와 레이아웃이 유지되었는지 확인합니다.

납품 전 시각적 승인

렌더링 후 다음 항목을 확인하고, 문제가 발견되면 먼저 이미지를 수정한 다음 납품합니다. 파일이 구문 분석되거나 성공적으로 내보내질 수 있다고 해서 시각적 승인이 되는 것은 아닙니다.

핵심 비율, 배열 및 연결이 객체의 실제 경험과 일치합니다. 생략 또는 과장 후에도 식별 구조가 유지되며, 단지 제목이나 몇 가지 기호로 주제를 추측하게 하지 않습니다.
기본 베이스 플레이트, 중간, 전경의 크기와 가림에 주종 관계가 있습니다. 베이스 플레이트를 생략한 경우 주체 자체에 완전한 윤곽이 있습니다.
컨테이너 높이가 내용에 비례하며, 전경이 너무 큰 빈 영역으로 인해 무게 중심을 빼앗지 않습니다.
복합 하위 모듈에 재귀적 마이크로 컨트롤이 없습니다. 대상 표시 크기에서 독립 색상 블록은 16px를 만족하며, 필수 선과 미세 점은 예외로 구분됩니다.
인접한 형태가 명확히 분리되거나 가려져 있으며, 접선, 좁은 틈, 잘못된 삽입이 없습니다. 텍스트와 아이콘이 전경에 의해 의도치 않게 가려지지 않습니다.
그림자가 계층을 구분하지만 더럽고 검지 않으며, 색상 면적이 참조와 조화롭습니다. 모든 색상은 역할 구성 또는 프로젝트 토큰으로 추적 가능합니다.
선택한 참조와 나란히 보며 차용한 스케일, 윤곽, 공간 또는 재질 관계가 최종 이미지에서 성립하는지 확인하고, 단지 동일한 유형의 효과를 사용했는지만 확인하지 않습니다. 원래 크기와 실제 표시 크기를 동시에 보고, 구체적인 수정 사항을 설명하며, 가상의 점수나 사용자 승인을 조작하지 않습니다.

예제 수집 프로세스

완료 및 검사 후 한 번 능동적으로 질문하고, 사용자가 명시적으로 동의한 경우에만 수집합니다.

질문 규칙:
- 일러스트레이션이 완료되고 내부 검사가 완료된 후 AI가 한 번 능동적으로 질문합니다. "이 일러스트레이션에 만족하십니까? 나중에 참조할 수 있도록 예제 라이브러리에 등록할까요?"
- 사용자가 아직 수정을 요구하고 있으면 먼저 이미지를 수정하고 반복적으로 묻지 않습니다.
- 사용자가 거부하거나 응답하지 않거나, '만족'이라고만 말하고 수집에 명시적으로 동의하지 않은 경우 수집을 실행하지 않습니다.
- 매번 생성된 결과를 자동으로 수집하지 않습니다.
수집 실행:
- 파일 확인: 편집 가능한 .svg 소스 코드와 렌더링된 .png 미리보기 이미지가 모두 있어야 하며, 중복 이름을 확인하고 기존 파일을 덮어쓰지 않습니다.
- 수집 스크립트 실행: scripts/collect-example.mjs;
- references/example-guide.md를 자동으로 업데이트하여 주제 이름, 구성 특징 및 적용 가능한 시나리오를 기록합니다.

조합 가능한 SVG 드로잉 방법

SVG 구축 도구는 로컬 scripts/build-kit.mjs의 사용법을 설명합니다. 윤곽, 균일 카메라, 실체 압출, 표면 매핑, 경계 상자 및 색상 역할 내보내기. 화면 요구에 따라 선택하며, 모든 이미지를 입체화할 필요는 없습니다.

도구 색인

구현하려는 내용	도구 및 예제
직선 윤곽, 호, 유기적 곡선	경로 및 곡선
병합, 구멍 뚫기, 로컬 자르기, 투명 전환	형상 조합 및 마스크
이동, 회전, 크기 조절, 기울이기, 평면 투영	좌표 및 변환
색상 면, 그라데이션, 그림자, 반복 질감	채우기 및 재질
텍스트 너비, 레이블 크기, 행 상자 및 경계	텍스트 및 레이아웃 도구
브라우저 미리보기, 로컬 재렌더링, 이미지 대조	렌더링 및 보기
예제 안전 수집 및 색인 업데이트	예제 수집 설명

편집 가능한 예제 및 자료

참조를 관찰할 때 실제로 열린 이미지와 해당 SVG를 결합하여 로컬 효과를 구현 방식에 연결하고, 현재 주제에 어떻게 사용할지 고려합니다. 구체적인 관점과 예제는 참조를 드로잉으로 변환을 참조합니다.

구축 및 코드 예제: 객체 스케일, 조명, 색상 역할 및 역사적 예제 사용 경계.
테마 템플릿: Typography 5개 이미지 및 검색 필터 이미지의 SVG와 PNG.
오리지널 예제 라이브러리: 북마크, 달력, 업로드, 모바일 콘텐츠의 SVG와 PNG.
스타일 자료: 사용 가능한 외관 참조.
참조 이미지 및 분석 기록: 사용자 참조 분석 및 특징 색인.

예제의 매개변수는 특정 작품의 구현이므로 수정할 수 있습니다. 무엇을 그릴지, 어떤 기술을 조합할지, 어떻게 의사소통하고 납품할지는 현재 작업이 결정합니다.

Micro-UI 일러스트레이션