문제가 생긴 화면에서 검사
사이트나 localhost에서 확장 프로그램을 실행하세요. 현재 화면 너비의 가로 넘침과 원인 후보를 찾습니다.
CHROME EXTENSION / EARLY ACCESS
왜 옆으로
밀리는지,
이제 찾았습니다.
가로 스크롤을 만드는 요소를 찾고,
수정 CSS를 적용해 넘침이 줄었는지 확인합니다.
원인 찾기에서 코드 복사까지, 한 번에.
v0.1.0 · 직접 설치 버전 · Chrome 웹스토어 출시 준비 중
INTERACTIVE EXAMPLE눌러서 비교해보세요
localhost / your-next-project
가로 넘침 감지— px
CSS
overflow-wrap: anywhere;예시 레이아웃입니다. 현재 보고 있는 사이트를 검사하지 않습니다.
✓ 로그인 없이✓ 서버 전송 없이✓ 페이지에 임시 적용✓ 언제든 원래대로YOUR PAGE. YOUR CSS.
01 — THE WORKFLOW추측은 줄이고,
추측은 줄이고,
고쳐지는지 확인하세요.
요소를 하나씩 지우며 범인을 찾는 대신,
원인과 수정 결과를 함께 확인합니다.
수정안을 적용하고, 다시 측정
긴 문자열, 고정 너비, 미디어, flex·grid 관련 CSS를 임시 적용합니다. 실제로 넘침이 줄어든 수정안만 남깁니다.
직접 확인한 뒤, CSS 복사
미리보기로 배치를 확인하고 수정 코드를 가져가세요. 마음에 들지 않으면 원래대로 돌릴 수 있습니다.
02 — BUILT FOR A SPECIFIC PROBLEM작은 문제에,
작은 문제에,
정확한 한 가지 도구.
가로 넘침을 숨기지 않고,
넘침을 만드는 CSS를 살펴봅니다.
/* 문제를 가려두는 대신 */
overflow-x: hidden;min-width: 0;
overflow-wrap: anywhere;현재 MVP가 살펴보는 원인v0.1.0
01
끊어지지 않는 URL과 텍스트
줄바꿈 규칙과 최소 너비
02
부모보다 넓은 카드와 이미지
고정 너비와 미디어 크기
03
줄어들지 않는 flex·grid 항목
최소 너비와 열 배치
검증 범위는 현재 화면 너비의 기하학적 넘침입니다. iframe·Shadow DOM 내부와 복잡한 위치 지정은 놓칠 수 있으며, 디자인 의도는 미리보기로 확인해야 합니다.
03 — TRY THE MVP다음에 화면이 밀릴 때,
다음에 화면이 밀릴 때,
한번 써보세요.
MVP 다운로드
v0.1.0 ZIP · 데스크톱 Chrome용
웹스토어 등록 전 직접 설치 버전
파일을 내려받고 압축 해제
위 버튼으로 ZIP을 다운로드하세요. manifest.json이 들어 있는 폴더를 준비합니다.
크롬에서 확장 프로그램 등록
에 접속해 개발자 모드를 켜고, ‘압축해제된 확장 프로그램을 로드합니다’를 선택합니다.
문제가 있는 페이지에서 실행
압축을 푼 폴더를 등록한 뒤 Overflow Fix를 고정하세요. 검사 → 미리 적용 → CSS 복사 순서로 사용합니다.
다른 화면 크기를 검사하려면 개발자 도구의 기기 모드나 창 크기로 너비를 바꾼 뒤 다시 실행하세요.
A FEW THINGS TO KNOW
궁금할 수 있는 것들.
실제 사이트 코드를 자동으로 바꾸나요?
브라우저의 현재 페이지에만 CSS를 임시 적용합니다. 서버나 프로젝트 파일을 수정하지 않습니다. 확인한 CSS를 복사해 프로젝트에 반영할 수 있고, 미리보기는 원래대로 버튼이나 새로고침으로 해제할 수 있습니다.
페이지 내용이 외부 서버로 전송되나요?
확장 프로그램의 검사는 기기 안에서 실행됩니다. 페이지 내용과 검사 결과를 외부 서버로 전송하지 않으며 로그인이나 AI API 키도 필요하지 않습니다. 데이터 처리 안내 보기
모든 화면 크기를 자동으로 검사하나요?
현재 MVP는 지금 보고 있는 화면 너비만 검사합니다. 다른 너비는 창 크기나 개발자 도구의 기기 모드로 변경한 뒤 다시 검사하세요. 여러 너비의 자동 순회는 현재 제공하지 않습니다.
넘침이 없거나, 자동으로 고칠 수 없으면요?
넘침이 없으면 수정안을 만들지 않습니다. 해결하지 못한 문제는 남은 넘침으로 표시합니다. 의도한 내부 스크롤이나 복잡한 레이아웃은 직접 확인해야 하며, overflow를 숨겨 해결된 것처럼 표시하지 않습니다.
크롬 웹스토어에서 설치할 수 있나요?
아직 웹스토어에 등록되지 않은 MVP입니다. 현재는 이 페이지에서 ZIP을 내려받아 개발자 모드로 직접 설치할 수 있습니다. 설치 방법은 위 안내를 참고하세요.