SVG 아이콘 클리닝 & 코드 최적화 스튜디오 - Sovereign Luxury Monochrome

SVG 아이콘 클리닝 & 코드 최적화 스튜디오(Sovereign Monochrome Luxury Cleaner)는 웹 브라우저 환경에서 피그마(Figma), 잉크스케이프(Inkscape), 일러스트레이터(Illustrator) 등 그래픽 에디터에서 내보낸 SVG 아이콘과 벡터 그래픽의 불필요한 용량 낭비 요소(메타데이터, 주석, 에디터 고유 속성, 과도한 소수점 좌표, 중복 그룹 및 변형 행렬)를 클리닝하고 실시간으로 비주얼 비교와 코드 Diff를 제공하는 고성능 유틸리티 스튜디오입니다.

독보적인 [고급스러운 흑백 모노크롬 스위닝 럭셔리] 다크 테마 디자인과 직관적인 터치/마우스 대시보드 레이아웃을 통해 최상의 사용자 경험을 선사합니다.

🌟 핵심 주요 기능

• 🖤 고급스러운 흑백 모노크롬 럭셔리 (Sovereign Luxury Monochrome) UI:
  • 깊이감 있는 딥 흑요석(Obsidian) 배경과 실버/플래티넘 금속성 광택 가공 요소, 글래스모피즘 계층 구조로 제작된 프리미엄 디자인입니다.
  • 데스크톱 마우스 드래그 앤 드롭 및 클릭 조작뿐만 아니라 터치 디바이스 제스처(손가락 스플릿 슬라이더, 터치 타겟)를 완벽하게 지원합니다.
• 🧹 강력한 SVG 엔진 & 맞춤형 룰 설정 (Custom Optimization Rules):
  • 메타데이터 & 주석 클리닝: <?xml>, <!DOCTYPE>, <!-- 주석 -->, <metadata>, <sodipodi:namedview> 자동 제거.
  • 에디터 고유 속성 제거: inkscape:*, sodipodi:*, sketch:*, xmlns:sketch, data-name, data-id 완벽 소탕.
  • 소수점 정밀도 압축 (Precision Control): 0~6자리까지 정밀도를 선택하여 패스 d 좌표 및 도형 수치를 미세 조절, 최대 80% 이상의 용량을 획기적으로 절감.
  • 스마트 구조 정리: 빈 그룹(<g></g>) 삭제, 0 크기 무의미 요소 제거, 기본/중복 속성(stroke-width="1", fill-rule="nonzero") 자동 정돈.
• 🎨 컬러 & 테마 변환 엔진 (Color Engine):
  • 컬러 팔레트 자동 추출: SVG 내 사용된 모든 색상을 자동 탐지하여 클릭 한 번으로 컬러 코드를 복사.
  • currentColor 자동 전환: CSS의 color 속성으로 제어 가능한 반응형 웹 아이콘으로 변환.
  • 모노크롬 럭셔리 스와프 (High-Contrast Re-color): 복잡한 다채로운 아이콘을 시크한 모노크롬 블랙/화이트로 재색상화.
• 🔍 실시간 Split 뷰포트 Inspector (Before vs After 비교):
  • 터치 및 마우스 드래그가 가능한 스플릿 핸들로 원본(Original)과 최적화(Cleaned) SVG를 실시간 시각적 비교.
  • 투명 체커보드, 럭셔리 블랙, 클린 화이트 배경 전환 및 50%~300% 확대/축소, 외곽선 와이어프레임(Wireframe) 강조 지원.
• 💻 다양한 포맷 내보내기 & 실시간 Code Diff Viewer:
  • 코드 비교 (Diff Inspector): 삭제되거나 새로 작성된 라인을 색상별로 직관적 표시.
  • React JSX 변환: React 애플리케이션용 <CleanIcon /> 컴포넌트 코드로 원클릭 생성.
  • CSS Data URI 생성: CSS background-image 또는 src에 바로 쓸 수 있는 Data URI 즉시 출력.
  • 배치 작업 큐 (Batch Upload & Download): 여러 개의 SVG 파일들을 한 번에 드래그하여 배치 처리 후 다운로드.

🛠️ 사용 방법 (How to Use)

1. SVG 불러오기 / 샘플 확인:
   • 상단 헤더의 🎨 Figma 로고, 📐 Inkscape 일러스트, ⚡ 히어로 벡터, 💎 UI 아이콘 팩, ✨ 모션 아트 버튼으로 준비된 샘플을 체험해보세요.
   • 본인의 SVG 파일은 [📁 파일 업로드] 버튼이나 화면 중앙 캔버스로 드래그 앤 드롭하여 추가할 수 있습니다.
2. 최적화 룰 조정:
   • 좌측 사이드바 패널에서 소수점 정밀도(Precision), 메타데이터 제거 여부, currentColor 변환, viewBox 자동 생성 등의 옵션을 자유롭게 켜고 끕니다.
3. 시각적 차이 확인:
   • 중앙 뷰포트의 구분선(◀▶)을 마우스나 터치로 좌우로 끌어 원본과 최적화본의 시각적 해상도 차이가 없는지 점검합니다.
4. 코드 및 용량 절감 분석:
   • 우측 대시보드에서 용량 절감 비율(-XX%)과 제거된 속성 개수를 확인하고, 하단 코드 창에서 Cleaned SVG, React JSX, Data URI 탭을 넘겨가며 복사합니다.
5. 내보내기:
   • 상단 [💾 SVG 다운로드] 버튼으로 최적화된 .svg 파일을 다운로드하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

앱을 열면 제공되는 기본 설정과 화면 안내를 확인할 수 있습니다. 먼저 예시 상태에서 주요 조작을 살펴본 뒤, 목적에 맞게 입력값이나 도구를 변경해 보세요.

별도 설치가 필요한가요?

이 앱은 웹 브라우저에서 실행하도록 구성되어 있습니다. 원활한 사용을 위해 최신 브라우저와 안정적인 인터넷 환경을 권장합니다.

결과가 예상과 다르게 보이면 무엇을 확인해야 하나요?

현재 선택한 설정, 입력값, 화면 크기, 브라우저 상태에 따라 결과가 달라질 수 있습니다. 초기화 또는 예시 설정으로 돌아간 뒤 값을 하나씩 바꿔 확인하면 원인을 파악하기 쉽습니다.