어떤 때 쓰면 좋을까요?
CSS를 수정하기 전에 버튼 간격이나 제목 크기를 화면에서 바로 비교하고 싶을 때 활용합니다. 개발자와 디자이너가 같은 페이지를 보며 수정 방향을 설명하는 데 도움이 됩니다.
페이지에서 한 변경은 디자인 실험으로 생각하세요. 실제 사이트 코드에 저장되거나 배포되는 작업은 별도입니다. 바꾼 값을 기록하고 원본 화면과 비교하면 개발에 전달할 수정안을 정리하기 쉽습니다.
VisBug
크롬 확장 · 이미지·디자인
웹 화면의 간격·정렬·색을 직접 바꿔보기
웹페이지 요소를 선택해 간격, 크기와 스타일을 실험하는 시각적 디자인 도구입니다.
- 요소 정렬·간격 실험
- 스타일·접근성 정보 확인
이렇게 써보세요
카드 제목과 설명의 간격을 여러 값으로 바꿔본 뒤 가장 읽기 쉬운 구성을 골라 CSS 수정 요청에 사용하세요.
얻는 결과개발에 전달할 화면 수정 시안
사용 순서
페이지를 열고 VisBug를 실행합니다
요소를 선택해 간격·정렬을 실험합니다
수정할 값을 기록해 실제 코드에 반영합니다
사용할 때 알아두세요
새로고침하면 실험한 변경이 사라질 수 있습니다. 페이지를 직접 배포하거나 코드를 자동 저장하지 않습니다.
제작자 소개 · 2026-10-04 확인 · 기능·요금은 제작자의 최신 안내를 확인하세요.