Media
5 items
Description
멀티 뷰포트 뷰어 · CSS 인스펙터 · DOM 탐색기 · 브레이크포인트 인디케이터를 제공하는 프론트엔드 개발 도구 더 효율적인 프론트엔드 개발의 시작. 멀티 뷰포트 확인부터 DOM 탐색, CSS 검사, 컬러 팔레트까지, 반복되는 개발 작업을 하나의 도구로 해결합니다. ■ 멀티 뷰포트 뷰어 - 현재 페이지를 Mobile / Fold 접힘·펼침 / Tablet / Laptop / Desktop 뷰포트로 나란히 미리보기 - 폴더블 프리셋은 Galaxy Z Fold의 커버/메인 디스플레이 뷰포트 기준으로, 폴드폰 대응 화면을 한눈에 확인 - 자동 맞춤 줌으로 가로 스크롤 없이 한 화면에서 반응형 확인 - 디바이스 토글, 줌 조절, 일괄 새로고침 지원 ■ CSS 인스펙터 - 요소에 마우스를 올리면 색상, 폰트, 크기, 여백 등 스타일 정보를 즉시 표시 - 클릭 한 번으로 값 복사: RGB, HEX, Tailwind 클래스(text-gray-500, p-4, rounded-lg) 형식 선택 가능 - 요소를 고정한 뒤에도 호버 미리보기가 유지되어, ESC 없이 클릭만으로 다음 요소로 바로 이동 - 인스펙터가 켜져 있는 동안 링크 이동·버튼 동작 같은 페이지 액션을 차단해 어떤 요소든 안전하게 검사 - 박스 모델 오버레이(margin / padding / content 색 구분)로 여백 구조를 시각화 - 선택한 요소의 색을 기준으로 어울리는 색 제안: 같은 Tailwind 계열 스케일, 보색, 유사색, 삼각 배색 ■ 컬러 팔레트 - 스포이드로 화면 어디서든 색을 추출하고, 가장 근접한 Tailwind 토큰과 조화색(계열 스케일·보색·유사색·삼각 배색)을 함께 확인 - 최근 추출한 색은 히스토리로 보관되어 팝업을 다시 열어도 유지 - 페이지 색상 모아보기: 현재 페이지에서 실제 사용 중인 색(글자·배경·테두리)을 사용 빈도순으로 정리한 별도 창 제공, 행 클릭 한 번으로 복사 ■ DOM 탐색기 - 개발자도구 스타일의 HTML 트리로 요소 구조 확인 - 텍스트와 속성값을 더블클릭으로 즉석 수정하여 화면에서 바로 실험 - 방향키로 부모·자식·형제 요소 이동, 자주 보는 요소는 저장 후 클릭 한 번으로 재선택 - 창 위치(왼쪽/오른쪽/하단) 조절 및 항상 위에 떠 있는 별도 창(PiP)으로 분리 가능 ■ 브레이크포인트 인디케이터 - 현재 뷰포트 너비와 Tailwind 브레이크포인트(sm/md/lg/xl/2xl)를 화면에 상시 표시 ■ 단축키 - Alt+Shift+C로 인스펙터 실행 (변경 가능) - Enter 고정, 방향키 DOM 이동, S 저장, D DOM 창, P 창 분리, ESC 취소 - 주요 단축키는 설정에서 원하는 키로 변경 가능 ■ 개인정보 - 모든 기능은 브라우저 안에서만 동작하며, 어떠한 데이터도 수집하거나 외부로 전송하지 않습니다.