MiroMiro

MiroMiro란?

MiroMiro는 무료 Chrome 확장 프로그램으로, 라이브 웹사이트의 요소를 검사하고 기본 디자인 및 코드 아티팩트를 복사할 수 있습니다. CSS를 추출해 Tailwind로 변환하며, SVG와 Lottie 애니메이션 같은 에셋도 내보낼 수 있습니다.

목표는 UI의 수동적인 “리버스 엔지니어링”을 줄이는 것입니다. 페이지에서 색상, 폰트, 간격/반경/그림자, 코드 출력을 직접 에디터로 가져올 수 있습니다.

주요 기능

• 원클릭 요소 복사 (라이브 사이트): 요소를 클릭해 현재 페이지에서 정확한 CSS 기반 값과 관련 디자인 정보를 얻습니다.
• CSS를 Tailwind로 내보내기: 추출된 스타일을 프로젝트 워크플로에서 재사용 가능한 생산 준비 Tailwind 출력과 HTML로 변환합니다.
• 디자인 토큰 추출 (팔레트 + 토큰): 브랜드 색상/팔레트를 추출하고 Tailwind config 및 CSS 변수 형식의 토큰(기본/강조/표면 등 UI 값)을 내보냅니다.
• 이미지 및 벡터 에셋 추출: 원본 품질의 이미지를 PNG, JPG, 또는 WebP로 내보내고, 인라인 SVG/아이콘/일러스트를 편집 가능한 벡터 에셋으로 추출합니다.
• Lottie 추출: 페이지에서 재생 중인 Lottie 애니메이션을 감지하고 프로젝트에서 재사용할 JSON을 다운로드합니다.
• 페이지 내 접근성 대비 확인: 라이브 사이트에서 머무르며 텍스트/UI 색상 쌍을 WCAG AA 및 AAA 대비 기준으로 확인합니다.
• 로컬 작동: 추출은 로컬에서 실행되며 확장 프로그램은 복사한 내용을 보지 않는다고 명시합니다.
• 라이브러리/북마킹: 컴포넌트, 색상, 에셋 등을 개인 참조 라이브러리에 저장합니다.

MiroMiro 사용 방법

1. Chrome 확장 프로그램 설치 후 참조할 웹사이트를 엽니다.
2. 호버로 검사해 요소 스타일(CSS)과 관련 값을 확인하고, 인라인 값을 조정해 실시간 변화를 볼 수 있습니다.
3. 클릭으로 내보내기해 선택 요소를 **코드(Tailwind + HTML)**로 또는 색상 같은 디자인 토큰으로 추출합니다.
4. 에셋 추출기를 사용해 에셋 내보내기 (이미지: PNG/JPG/WebP, 인라인 SVG: 벡터, Lottie 애니메이션: JSON).

사용 사례

• 랜딩 페이지 재구축 가속화: 라이브 페이지의 UI 컴포넌트를 클릭해 스크린샷 매칭 대신 Tailwind + HTML 출력을 얻습니다.
• 브랜드 팔레트 및 토큰 생성: 라이브 웹사이트에서 전체 팔레트를 추출해 디자인 시스템 워크플로에 맞춘 hex/RGB/HSL/OKLCH 값을 내보냅니다.
• 벡터 아이콘/SVG 일러스트 추출: 페이지에서 인라인 SVG를 추출해 스크린샷 대신 편집 가능한 벡터 에셋으로 붙여넣습니다.
• 앱에 기존 애니메이션 추가: 페이지의 Lottie 애니메이션을 찾아 JSON을 다운로드해 자체 Lottie 기반 UI에 통합합니다.
• 접근성 색상 대비 사전 확인: 생산 전 텍스트/UI 쌍을 페이지 내 WCAG 대비 확인(AA/AAA)으로 검증합니다.

자주 묻는 질문

MiroMiro는 웹 앱인가요, 브라우저 확장 프로그램인가요?
MiroMiro는 Chrome 확장 프로그램입니다.

MiroMiro는 모든 라이브 웹사이트에서 코드를 추출할 수 있나요?
확장 프로그램은 모든 라이브 웹사이트의 요소 기반으로 CSS를 복사해 Tailwind로 변환하도록 설계되었습니다.

어떤 출력을 내보낼 수 있나요?
페이지에 따라 Tailwind + HTML, 디자인 토큰(색상/팔레트), CSS 변수/config 내보내기, 이미지(PNG/JPG/WebP), SVG, Lottie JSON 등의 출력을 제공합니다.

MiroMiro가 복사한 내용을 서버로 전송하나요?
페이지에 따르면 추출은 로컬에서 실행되며 복사한 내용을 보지 않는다고 합니다.

Pro 기능 무료 체험은 있나요?
네. 페이지에 카드 없이 3일 Pro 체험이 있으며, 이후 Pro는 월 €6(제한된 초기 평생 옵션은 “한 번 결제”)로 설명됩니다.

대안

• 브라우저 DevTools (수동 검사): CSS와 DOM을 직접 검사할 수 있지만, Tailwind 등 형식으로의 수동 추출 및 변환이 필요합니다.
• UI-to-code / 디자인-to-code 도구 (레이아웃 중심 워크플로): 스크린샷이나 디자인 파일에서 코드를 생성하지만, 라이브 페이지에서 정확한 값을 추출하는 워크플로와 다를 수 있습니다.
• 디자인 토큰 추출 도구 (색상/테마 중심): 팔레트/토큰 추출 전용 도구는 색상 시스템에 도움이 되지만, Tailwind/HTML 내보내기, Lottie 다운로드, 인라인 SVG 추출을 함께 제공하지 않을 수 있습니다.
• Lottie 전용 추출기: Lottie 에셋 전용 도구는 애니메이션을 검색하지만, MiroMiro에 설명된 광범위한 CSS/Tailwind 및 디자인 토큰 추출을 제공하지 않을 수 있습니다.