📖 한국경영교육연구소 AI ACADEMY · 용어·통역 사전
오버플로 (overflow)
💬 쉬운 뜻
내용물이 자기 상자보다 커서 상자 밖으로 비어져 나오는 현상이에요. 컵보다 큰 얼음을 억지로 넣으면 얼음이 컵 밖으로 삐져나오는 것과 같아요. PC에선 멀쩡한데 휴대폰처럼 좁은 화면에서만 박스가 카드 밖으로 튀어나오거나 가로 스크롤이 생기면 십중팔구 이거예요.
🧭 이 상황에서
AI로 만든 페이지가 PC에선 멀쩡한데 휴대폰으로 열면 색깔 박스가 흰 카드 밖으로 삐져나오거나 화면이 옆으로 밀리는 가로 스크롤이 생긴다 — 안쪽 박스의 '최소 폭 약속(min-width)'이 좁은 화면의 부모 폭보다 커서 터지는 경우가 가장 흔하다
⌨️ 이럴 땐 이렇게 입력
- 휴대폰에서 보면 박스가 카드 밖으로 삐져나와(오버플로). 어떤 요소가 넘치는지 찾아서, flex/grid 자식이면 min-width를 min(원래값, 100%)로 바꾸고 box-sizing: border-box도 같이 넣어줘
- 모바일에서 가로 스크롤이 생겨. 화면 밖으로 넘치는 요소를 찾아서 좁은 화면에서는 부모 폭 안에 들어오게 고쳐줘
🔮 AI가 이렇게 답하면 = 이런 뜻
AI가 "min-width 때문에 오버플로가 발생해서 box-sizing: border-box를 추가했어요"라고 하면 = 박스의 최소 폭 약속이 패딩·테두리까지 더해져 부모보다 커졌던 거고, 이제 패딩·테두리를 폭 계산에 포함시켜 좁은 화면에서도 약속을 지킬 수 있게 고쳤다는 뜻이에요.
➡️ 다음엔 이렇게
고친 뒤엔 꼭 휴대폰으로(또는 브라우저 창을 좁게 줄여서) 다시 확인하세요. 그래도 넘치면 띄어쓰기 없는 긴 영어 단어나 링크 주소가 범인일 수 있으니 "긴 단어도 줄바꿈되게 overflow-wrap: break-word 넣어줘"라고 한 줄 더 시키면 돼요. overflow: hidden으로 그냥 가리는 건 내용이 잘려 보일 수 있는 임시방편이라, 원인(폭 계산)부터 잡는 게 먼저예요.
💬 김지백 강사의 현장 팁
라이브 수업 페이지의 '나쁜 지시 vs 좋은 지시' 빨강·초록 비교 박스가 PC에선 멀쩡한데 휴대폰에서만 흰 카드 밖으로 튀어나왔는데, 범인은 flex 자식의 min-width 240px이 패딩·테두리를 빼고 계산돼 실제 270px이 된 거였어요. "min-width에 min(240px, 100%)와 box-sizing: border-box를 같이 써줘" 한 줄로 바로 잡혔으니, 반응형인데 모바일에서만 삐져나오면 flex/grid 자식의 min-width부터 의심하세요.
한국경영교육연구소 · AI ACADEMY — 외부강사 김지백 · 시연 교실 홈