Open Inspector — 웹사이트의 디자인 시스템을 살펴보는 무료 오픈소스 확장 프로그램

AI 요약

Open Inspector는 웹페이지 위에 마우스를 올려 레이아웃과 스타일을 확인하고, 색상·타이포그래피·에셋을 살펴보는 무료 오픈소스 브라우저 확장 프로그램입니다. 디자인 토큰은 CSS 변수, Tailwind, SCSS, JSON, W3C 토큰 형식으로 내보낼 수 있고, Cursor나 Claude에 전달할 Markdown 문서도 만들 수 있습니다.

권한과 기능

확장 프로그램은 호스트 권한을 요청하지 않습니다. 사용자가 클릭할 때 활성 탭에만 적용되는 activeTab 권한을 받고, 페이지를 이동하면 권한이 해제됩니다. 개발자는 빌드 단계에서 소스와 배포 번들을 검사해 fetch, XHR, WebSocket, beacon 호출이 발견되면 빌드가 실패하도록 했습니다. 페이지에서 값을 바꿔도 확장 프로그램을 닫으면 원래 상태로 돌아갑니다. 그 밖에 간격 체계, grid와 flex 구조, 실제 렌더링된 글꼴을 살펴보고 페이지 전체의 WCAG 대비 검사도 할 수 있습니다.

디자인 토큰 내보내기

CSS-in-JS처럼 생성된 클래스 이름을 쓰는 사이트에서도 클래스 이름이 아니라 화면에 실제 적용된 계산 스타일을 읽습니다. 비슷한 색상은 하나로 합치며 blue-600, gray-100처럼 색의 외형을 기준으로 이름을 붙입니다. 다만 페이지에 담기지 않은 의미 정보는 알 수 없어 primary나 surface 같은 이름은 만들지 않습니다. 간격은 기본 단위를 추정하지만, 현재 내보내기에는 기본 단위에서 벗어난 값도 각각 남습니다. 제작자는 이 때문에 복잡한 사이트에서 간격 목록이 길어질 수 있으며, 이를 정리하는 작업을 다음 과제로 꼽았습니다.

Product Hunt 반응

• @patryk_lasek1 — 안녕하세요, Product Hunt. 저는 Patryk이고, 제게 필요해서 Open Inspector를 만들었습니다. 누군가에게도 쓸모가 있을 것 같아 공유합니다. CSS 검사 확장 프로그램을 설치할 때마다 “모든 웹사이트의 데이터를 읽고 변경”하겠다는 권한을 요청했습니다. 그러면 제가 로그인한 스테이징 환경과 내부 대시보드까지 감사할 방법이 없는 비공개 소스 확장 프로그램에 맡기는 셈입니다. 그래서 아무 권한도 요청하지 않는 도구를 만들었습니다. 🔒 호스트 권한은 없습니다. 클릭하면 한 탭에만 부여되고 페이지를 이동하면 해제되는 activeTab만 씁니다. Chrome 설치 화면에도 사이트 접근 권한이 표시되지 않습니다. 📡 네트워크 요청도 없습니다. 빌드 단계에서 소스와 배포 번들의 fetch·XHR·WebSocket·beacon 사용 여부를 검사하고, 하나라도 나오면 빌드가 실패합니다. 📐 DevTools에서 바로 알려주지 않는 간격 체계, 글꼴 크기 체계, grid/flex 구조, 실제 렌더링된 글꼴, 페이지 전체 WCAG 대비 검사도 제공합니다. 📦 디자인 시스템을 CSS 변수, Tailwind, SCSS, JSON, W3C 토큰 또는 Cursor/Claude에 전달할 Markdown 문서로 내보낼 수 있습니다. ↩️ 값을 실시간으로 바꿔도 확장 프로그램을 닫으면 모두 정확히 원래대로 돌아갑니다. MIT 라이선스이며 영구 무료입니다. 마음에 드는 사이트에서 Alt+Shift+I를 눌러 보고 무엇이 빠졌거나 잘못됐는지 알려주세요.
• @galdayan — 여기서 진짜 장점은 각주가 아니라 activeTab만 쓴다는 점입니다. 디자인 토큰 내보내기에 관해 하나 묻고 싶습니다. 사이트가 실제 디자인 시스템 대신 CSS-in-JS와 생성된 클래스 이름을 쓰면 색상과 간격을 일관성 있게 묶어주나요? 아니면 이름도 없는 개별 값이 잔뜩 나오는 목록이 되나요?
  • @patryk_lasek1 — 좋은 질문입니다. 클래스 이름은 전혀 신경 쓰지 않습니다. 화면에 실제로 표시된 계산 스타일을 읽기 때문에 CSS-in-JS를 쓰는 사이트도 제대로 된 디자인 시스템이 있는 사이트와 같은 방식으로 처리합니다. 거의 같은 색상은 하나로 합치므로 회색이 조금씩 다른 값 12개가 남지는 않습니다. 의미가 아니라 겉으로 보이는 색을 기준으로 blue-600, gray-100처럼 이름을 붙입니다. 페이지에는 그 의미 정보가 없으니 primary나 surface라고 이름 붙일 수는 없습니다. 간격 처리는 아직 약합니다. 기본 단위가 얼마인지 계산합니다. 예를 들어 값의 92%가 8px 단위에 맞는다고 알려줍니다. 하지만 내보내기에는 특이한 값까지 포함해 발견한 값을 모두 나열합니다. 복잡한 사이트에서는 목록이 길어집니다. 다음으로 정리할 작업입니다.
  • @galdayan — “의미가 아니라 겉모습으로 이름 붙인다”는 한계는 페이지에서 의도를 알 수 없다는 점을 고려하면 솔직하고 타당합니다. 간격 정리와 관련해, 특이한 값을 그대로 나열하는 대신 “기본 단위의 가장 가까운 배수, 차이는 Xpx”처럼 묶는 편이 나을까요? 그러면 실제로 의도된 예외라고 아는 척하지 않으면서 반올림이나 누적 오차일 가능성을 알려줄 수 있습니다.

원문: Product Hunt / 번역·요약: Trawling