새로운 서비스를 자주 들여다보고 분석해야 하는 기획자나 디자이너가 은근히 자주 사용하는 도구가 바로 개발자 도구입니다. 완성된 인터페이스 자체를 캡처하는 건 금방이지만, 그보다 폰트나 여백이 어떻게 설정되어 있는지 등을 확인하기 위해서는 개발자 도구를 거쳐야 하기 때문입니다. 문제는 개발자 도구에 꽤 익숙해졌다 하더라도 복잡하게 얽힌 <div> 태그의 숲을 헤매다 보면, 어느새 분석하려던 대상을 놓치거나, 찾는 데 많은 시간을 쓰게 됩니다. 특히 추출하기 까다로운 SVG 아이콘이나 로티(Lottie) 애니메이션 파일을 찾기 위해 네트워크 탭을 뒤지는 것도 그렇고요.

물론 확장 프로그램을 활용해 이런 문제를 해결할 수 있습니다. 저 역시 몇 가지 도구를 계속 써왔지만, 서비스가 종료되거나 업데이트를 지원하지 않아 사용이 어려워진 경우가 있었습니다. 그러다 얼마 전 ‘MiroMiro’라는 서비스를 알게 되었는데, 이곳은 클릭 한 번으로 웹 사이트 내 색상, 글꼴, 이미지 및 애니메이션 등을 추출할 수 있도록 도와줍니다. 확장 프로그램을 지원하며, URL을 통한 추출도 가능하죠. 구체적으로 어떤 기능을 제공하는지 이번 글에서 자세히 살펴보겠습니다.

주요 기능 훑어보기

MiroMiro는 기본적으로 크롬 확장 프로그램 형태로 작동합니다. 원하는 사이트에서 확장 프로그램을 실행하면, 필요한 정보를 패널을 통해 빠르게 확인할 수 있도록 구성되어 있습니다.

1) 전체 내용 요약: 확장 프로그램을 실행하면 가장 먼저 ‘오버뷰’에 해당하는 내용을 살펴볼 수 있습니다. 사용된 미디어, SVG, 컬러, 폰트의 수가 몇 개인지 빠르게 훑어볼 수 있습니다. 각 카드(예를 들어, 미디어)를 클릭하면 사용/적용된 내용을 별도 화면에서 모아볼 수 있으며, 즐겨찾기를 하거나 다운로드를 할 수도 있습니다.

2) 디자인 시스템의 시각화:특정 요소 하나만 보는 것이 아니라, 해당 페이지 전체에 흐르는 디자인 규칙을 읽어냅니다. 사용된 모든 컬러 팔레트와 타이포그래피 스타일(폰트 패밀리, 사이즈, 웨이트, 행간 등)을 데이터 시트 형태로 깔끔하게 정리해 보여줍니다.

3) '로티(Lottie)'까지 잡아내는 에셋 리퍼:Miro에서 느낀 가장 큰 강점 중 하나입니다. 일반적인 이미지나 SVG는 물론, 웹사이트에서 돌아가고 있는 인터랙션 애니메이션 파일(.json)을 클릭 한 번으로 추출할 수 있습니다. (다만, 로티 애니메이션 추출은 유료 플랜에서만 지원합니다)

4) Inspect 모드 지원: 마우스를 올리기만 하면 요소 사이의 여백(Padding, Margin)과 그리드 구조를 실시간 가이드 선으로 보여줍니다. 클릭하면, 패널을 통해 상세 내용을 확인할 수 있습니다. 예를 들어, 버튼이라면, 코드가 어떻게 구성되어 있는지 어떤 컬러와 그라데이션 등의 요소를 활용했는지, 대비는 잘 이뤄져 있는지 등을 자세히 확인할 수 있습니다.

핵심 기능 사용해 보기

특정 서비스에서 ‘MiroMiro’ 확장 프로그램을 실행, 하단 미디어 탭을 선택한 모습입니다. 페이지에 사용된 전체 이미지와 영상 그리고 로티 파일을 볼 수 있는 공간이기도 합니다. 리스트에 있는 영상이나 이미지에 마우스를 대면, 좋아요 또는 다운로드할 수 있는 버튼을 확인할 수 있습니다. (무료 버전에서는 최대 10개까지의 좋아요를 기록할 수 있으며, 유료 계정으로 업그레이드하면 전체 미디어를 일괄 다운로드할 수 있는 기능을 제공합니다.)

일단 리스트 형태로 이미지와 영상 그리고 로티 파일을 모아볼 수 있다는 자체가 탐색 시간을 줄이는데 많은 도움을 줍니다. 그렇지 않으면 스크롤을 내리며, 적용된 이미지를 하나씩 확인해야 하고, 거기에 효과까지 붙은 섹션이라면 시간이 더 소요될 수밖에 없기 때문입니다. 또 로티로 만들어진 효과를 따로 모아보고, 참조할 수 있다는 점은 특정 웹페이지에서 레퍼런스를 보다 쪼개어 확인하는 과정에서 특히 매력적입니다.

하단 - 세 번째 탭에서는 SVGs 정보를 확인할 수 있는데요. 주로 아이콘이 포함되어 있으며, SVG 코드를 복사하거나 다운로드할 수 있습니다. 물론, 이미지나 영상과 같이 특정 SVG를 저장해서 나중에 참고하는 것도 가능합니다. 저는 이 서비스를 알게 된 뒤로 이 기능을 가장 많이 활용했는데, 마음에 드는 아이콘을 다양한 방법으로 뜯어보고 실제 활용하는 데 직접적인 도움을 받을 수 있기 때문입니다.

네 번째 탭은 컬러가 주인공입니다. 사용된 컬러에 대한 정보를 상세히 확인할 수 있도록 초점이 맞춰져 있습니다. 화면에서 컬러를 직접 추출할 수 있는 기능으로 시작, 전체 컬러를 확인하거나, 배경, 텍스트, 보더, 브랜드 등 타입에 따라 컬러를 살펴보는 것도 가능합니다.

또한 디자인 시스템을 전체 확인, 내려받는 기능도 지원합니다. 폰트, 여백, 그림자, 기타 구성 요소를 한 번에 추출해 ‘Tailwind, CSS, JSON’ 파일로 받아볼 수 있습니다. 요즘 바이브 코딩을 많이 하시는데, 그때 이런 데이터를 참고해 스타일 가이드 등을 만드는데 도움을 받을 수 있는 기능입니다. (다만 실제 내려받는 기능은 유료 모델에서만 가능합니다. 추출 및 확인은 무료 계정에서도 지원)

다섯 번째 탭은 타이포입니다. 사용된 폰트와 함께 해당 폰트가 어떤 목적으로 사용되는지 살펴볼 수 있습니다. 상세 정보를 통해 폰트 이름, 사이즈, 두께, 간격 등의 내용도 알 수 있습니다. 또한 특정 폰트의 ‘위치’ 확인하기 버튼을 클릭하면 실제로 어떻게 적용되었는지 해당 위치로 바로 이동할 수 있습니다. 폰트 역시 마음에 드는 대상을 좋아요로 기록해, 마이페이지(여섯 번째 탭)에서 언제든 다시 살펴볼 수 있도록 구성된 모습입니다.

여섯 번째 탭 - 마이페이지에서는 현재 사용 중인 요금제에 대한 정보로 시작해, 월 기준 사용량에 대한 정보를 확인할 수 있습니다. 좋아요(저장)한 아이템도 볼 수 있습니다.

한 번은 꼭 써봐야 하는 이유

탭 구분과 상관없이, 상단에는 ‘Inspect mode’를 지원합니다. 클릭하기 전에는 웹페이지 상에서 기본적인 정보를 확인할 수 있고, 클릭 후에는 우측 패널에서 자세한 정보를 제공합니다. 클릭한 대상의 미리 보기와 함께 코드 복사, 코드 내보내기 그리고 사용된 컬러와 스타일 정보가 포함되어 있습니다.

저는 이 서비스를 레퍼런스 탐색도 탐색이지만, 개인적으로 진행하는 다양한 바이브 디자인/코딩 프로젝트에 적극적으로 활용하고 있습니다. 예를 들어, 마음에 드는 스타일의 버튼이 있다면, 클릭 후 컬러나 스타일 정보 등을 바탕으로 참고해 적용하는 방법입니다. 컴포넌트 단위의 레퍼런스 제공 서비스와 함께 활용하면, 더 다양한 구성요소를 빠르게 작업할 수 있죠.

서비스는 무료로도 사용할 수 있지만, 사용량 등에 제한이 있는 건 어쩔 수 없습니다. 무료 버전에서는 디자인 시스템 추출은 가능하지만, 내려받기는 지원하지 않습니다. 또 CSS, Tailwind 등으로 내보내는 기능 또한 사용할 수 없습니다. 미디어/영상, SVGs 등을 한 번에 내려받는 기능 또한 유료 버전에서만 지원합니다.

그럼에도 무료 버전을 제공하고 있으며, 확장 프로그램이라는 접근성 좋은 환경과 다양한 도구를 충분히 체험해 볼 수 있다는 점, 무엇보다 기존의 탐색 방식을 보다 직관적이고 빠르게 바꿔줄 수 있다는 점에서 유용한 서비스라고 생각합니다.

<참고>

https://MiroMiro.app/